diff --git a/src/pages/settings/GeneralSettings.tsx b/src/pages/settings/GeneralSettings.tsx index c3ca0f7..ec50eaa 100644 --- a/src/pages/settings/GeneralSettings.tsx +++ b/src/pages/settings/GeneralSettings.tsx @@ -1,267 +1,245 @@ -import Button from '@/components/Button' -import ColorPicker from '@/components/ColorPicker' -import Input from '@/components/Input' -import Textarea from '@/components/Textarea' -import UploadBox from '@/components/UploadBox' -import DefaulModal from '@/components/DefaulModal' -import LocationPicker from './components/LocationPicker' -import LocationInput from './components/LocationInput' -import { TickCircle } from 'iconsax-react' -import { type FC, useEffect, useState } from 'react' -import { useGetRestaurant, useUpdateRestaurant } from './hooks/useSettingData' -import { useSingleUpload } from '../uploader/hooks/useUploaderData' -import type { UpdateRestaurantType } from './types/Types' -import type { ErrorType } from '@/helpers/types' -import { useFormik } from 'formik' -import * as yup from 'yup' -import { toast } from 'react-toastify' -import { extractErrorMessage } from '@/config/func' -import ServiceAreaPicker from './components/ServiceAreaPicker' +import Button from "@/components/Button"; +import ColorPicker from "@/components/ColorPicker"; +import DefaulModal from "@/components/DefaulModal"; +import Input from "@/components/Input"; +import Textarea from "@/components/Textarea"; +import UploadBox from "@/components/UploadBox"; +import { extractErrorMessage } from "@/config/func"; +import type { ErrorType } from "@/helpers/types"; +import { useFormik } from "formik"; +import { TickCircle } from "iconsax-react"; +import { type FC, useEffect, useState } from "react"; +import { toast } from "react-toastify"; +import * as yup from "yup"; +import { useSingleUpload } from "../uploader/hooks/useUploaderData"; +import LocationInput from "./components/LocationInput"; +import LocationPicker from "./components/LocationPicker"; +import ServiceAreaPicker from "./components/ServiceAreaPicker"; +import { useGetRestaurant, useUpdateRestaurant } from "./hooks/useSettingData"; +import type { UpdateRestaurantType } from "./types/Types"; const validationSchema = yup.object({ - name: yup.string().required('نام فروشگاه الزامی است'), - menuColor: yup.string().required('رنگ منو الزامی است'), - phone: yup.string().required('شماره تماس الزامی است'), - instagram: yup.string().url('لینک اینستاگرام معتبر نیست').nullable(), - address: yup.string().required('آدرس الزامی است'), - latitude: yup.number().required('انتخاب موقعیت روی نقشه الزامی است'), - longitude: yup.number().required('انتخاب موقعیت روی نقشه الزامی است'), - description: yup.string().nullable(), -}) + name: yup.string().required("نام فروشگاه الزامی است"), + menuColor: yup.string().required("رنگ منو الزامی است"), + phone: yup.string().required("شماره تماس الزامی است"), + instagram: yup.string().url("لینک اینستاگرام معتبر نیست").nullable(), + address: yup.string().required("آدرس الزامی است"), + latitude: yup.number().required("انتخاب موقعیت روی نقشه الزامی است"), + longitude: yup.number().required("انتخاب موقعیت روی نقشه الزامی است"), + description: yup.string().nullable(), + establishedYear: yup + .string() + .nullable() + .matches(/^$|^\d{4}$/, "سال تاسیس باید ۴ رقم باشد"), +}); const GeneralSettings: FC = () => { - const { data: restaurant, refetch } = useGetRestaurant() - const { mutate: updateRestaurant, isPending } = useUpdateRestaurant() - const { mutate: singleUpload, isPending: isUploading } = useSingleUpload() - const [isLocationModalOpen, setIsLocationModalOpen] = useState(false) - const [logoFile, setLogoFile] = useState([]) + const { data: restaurant, refetch } = useGetRestaurant(); + const { mutate: updateRestaurant, isPending } = useUpdateRestaurant(); + const { mutate: singleUpload, isPending: isUploading } = useSingleUpload(); + const [isLocationModalOpen, setIsLocationModalOpen] = useState(false); + const [logoFile, setLogoFile] = useState([]); - const formik = useFormik({ - initialValues: { - name: '', - menuColor: '#000000', - phone: '', - instagram: '', - address: '', - latitude: 0, - longitude: 0, - description: '', - logo: '', - serviceArea: undefined, - }, - validationSchema, - onSubmit: (values) => { - const submitSettings = (logoUrl?: string) => { - const settingsData: UpdateRestaurantType = { - ...values, - logo: logoUrl || values.logo || '' - } + const formik = useFormik({ + initialValues: { + name: "", + menuColor: "#000000", + phone: "", + instagram: "", + address: "", + latitude: 0, + longitude: 0, + description: "", + logo: "", + serviceArea: undefined, + establishedYear: "", + }, + validationSchema, + onSubmit: (values) => { + const submitSettings = (logoUrl?: string) => { + const settingsData: UpdateRestaurantType = { + ...values, + logo: logoUrl || values.logo || "", + }; - updateRestaurant(settingsData, { - onSuccess: () => { - toast.success('تنظیمات با موفقیت ذخیره شد') - refetch() - setLogoFile([]) - }, - onError: (error: unknown) => { - toast.error('خطا در ذخیره تنظیمات') - console.error(error) - }, - }) - } + updateRestaurant(settingsData, { + onSuccess: () => { + toast.success("تنظیمات با موفقیت ذخیره شد"); + refetch(); + setLogoFile([]); + }, + onError: (error: unknown) => { + toast.error("خطا در ذخیره تنظیمات"); + console.error(error); + }, + }); + }; - if (logoFile.length > 0) { - singleUpload(logoFile[0], { - onSuccess: (response) => { - const logoUrl = response?.data?.url || '' - submitSettings(logoUrl) - }, - onError: (error: ErrorType) => { - toast.error(extractErrorMessage(error, 'خطا در آپلود لوگو')) - }, - }) - } else { - submitSettings() - } - }, - enableReinitialize: true, - }) + if (logoFile.length > 0) { + singleUpload(logoFile[0], { + onSuccess: (response) => { + const logoUrl = response?.data?.url || ""; + submitSettings(logoUrl); + }, + onError: (error: ErrorType) => { + toast.error(extractErrorMessage(error, "خطا در آپلود لوگو")); + }, + }); + } else { + submitSettings(); + } + }, + enableReinitialize: true, + }); - useEffect(() => { - if (restaurant?.data) { - const restaurantData = restaurant.data - formik.setValues({ - name: restaurantData.name || '', - menuColor: restaurantData.menuColor || '#000000', - phone: restaurantData.phone || '', - instagram: restaurantData.instagram || '', - address: restaurantData.address || '', - latitude: restaurantData.latitude || 0, - longitude: restaurantData.longitude || 0, - description: restaurantData.description || '', - logo: restaurantData.logo || '', - serviceArea: restaurantData.serviceArea || undefined, - }) - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [restaurant]) - - const handleLocationSelect = (lat: number, lng: number) => { - formik.setFieldValue('latitude', lat) - formik.setFieldValue('longitude', lng) - setIsLocationModalOpen(false) + useEffect(() => { + if (restaurant?.data) { + const restaurantData = restaurant.data; + formik.setValues({ + name: restaurantData.name || "", + menuColor: restaurantData.menuColor || "#000000", + phone: restaurantData.phone || "", + instagram: restaurantData.instagram || "", + address: restaurantData.address || "", + latitude: restaurantData.latitude || 0, + longitude: restaurantData.longitude || 0, + description: restaurantData.description || "", + logo: restaurantData.logo || "", + serviceArea: restaurantData.serviceArea || undefined, + establishedYear: restaurantData.establishedYear?.toString() || "", + }); } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [restaurant]); + const handleLocationSelect = (lat: number, lng: number) => { + formik.setFieldValue("latitude", lat); + formik.setFieldValue("longitude", lng); + setIsLocationModalOpen(false); + }; - return ( - <> -
-
- تنظیمات عمومی -
+ return ( + <> +
+
تنظیمات عمومی
-
-
- + +
+ - formik.setFieldValue('menuColor', value)} - error_text={formik.touched.menuColor && formik.errors.menuColor ? formik.errors.menuColor : undefined} - /> -
+ formik.setFieldValue("menuColor", value)} + error_text={formik.touched.menuColor && formik.errors.menuColor ? formik.errors.menuColor : undefined} + /> +
-
- setLogoFile(files)} - isReset={logoFile.length === 0 && !formik.values.logo} - /> +
+ setLogoFile(files)} isReset={logoFile.length === 0 && !formik.values.logo} /> - { - formik.values.logo && ( -
- logo -
- ) - } -
+ {formik.values.logo && ( +
+ logo +
+ )} +
-
- +
+ - -
+ +
-
-