From 58678d585bbb5e14b9e79b74947a1e870df6cbd1 Mon Sep 17 00:00:00 2001 From: hamid zarghami Date: Wed, 21 May 2025 16:39:59 +0330 Subject: [PATCH] setting --- src/components/Tabs.tsx | 4 +- src/langs/fa.json | 7 +- src/pages/setting/Setting.tsx | 198 +++++++++------------- src/pages/setting/hooks/useSettingData.ts | 15 ++ src/pages/setting/service/Service.ts | 12 ++ src/pages/setting/types/Types.ts | 4 + 6 files changed, 122 insertions(+), 118 deletions(-) create mode 100644 src/pages/setting/hooks/useSettingData.ts create mode 100644 src/pages/setting/service/Service.ts create mode 100644 src/pages/setting/types/Types.ts diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx index aac29f6..51475a4 100644 --- a/src/components/Tabs.tsx +++ b/src/components/Tabs.tsx @@ -31,8 +31,8 @@ const Tabs: FC = (props: Props) => { return ( props.onChange(item.value)} key={item.value} className={clx( 'flex flex-col max-w-fit mt-[15px] items-center gap-2 cursor-pointer', - index === 0 && 'pr-[30px]', - index === props.items.length - 1 && 'pl-[30px]', + index === 0 && 'pr-[22px]', + // index === props.items.length - 1 && 'pl-[30px]', props.active === item.value && 'text-black' )}> {item.icon} diff --git a/src/langs/fa.json b/src/langs/fa.json index d562a52..f6adbba 100644 --- a/src/langs/fa.json +++ b/src/langs/fa.json @@ -591,7 +591,12 @@ "min-8": "حداقل 8 کاراکتر باشد", "mix_charachter_number": "ترکیبی از حروف کوچک و بزرگ باشد", "exsist_number": "شامل اعداد باشد", - "exsist_special_character": "شامل کاراکتر های خاص (نماد ها) باشد" + "exsist_special_character": "شامل کاراکتر های خاص (نماد ها) باشد", + "domain": "دامنه", + "zarinpal_merchant_id": "شناسه مرچنت زرین پال", + "logo": "لوگو", + "file_required": "فایل الزامی است", + "update_success": "تنظیمات با موفقیت به روز شد" }, "wallet": { "increese_wallet": "افزایش موجودی حساب اعتباری", diff --git a/src/pages/setting/Setting.tsx b/src/pages/setting/Setting.tsx index 3f0c88f..d5efaf0 100644 --- a/src/pages/setting/Setting.tsx +++ b/src/pages/setting/Setting.tsx @@ -1,15 +1,71 @@ -import { FC, useState } from 'react' +import { FC, useEffect, useState } from 'react' import { useTranslation } from 'react-i18next' import Tabs from '../../components/Tabs' import { KeySquare, Notification1 } from 'iconsax-react' -import SwitchComponent from '../../components/Switch' import Input from '../../components/Input' import Button from '../../components/Button' +import { useFormik } from 'formik' +import { SettingType } from './types/Types' +import * as yup from 'yup' +import UploadBox from '../../components/UploadBox' +import { toast } from 'react-toastify' +import { useSingleUpload } from '../service/hooks/useServiceData' +import { ErrorType } from '../../helpers/types' +import { useSettingData, useUpdateSetting } from './hooks/useSettingData' const Setting: FC = () => { const { t } = useTranslation('global') - const [activeTab, setActiveTab] = useState('notification') + const [activeTab, setActiveTab] = useState('setting') + const [file, setFile] = useState(null) + const singleUpload = useSingleUpload() + const updateSetting = useUpdateSetting() + const { data: setting } = useSettingData() + const formik = useFormik({ + initialValues: { + zarinpalMerchantId: '', + logoUrl: '' + }, + validationSchema: yup.object({ + zarinpalMerchantId: yup.string().required(t('errors.required')), + }), + onSubmit: async (values) => { + if (!file && !values.logoUrl) { + toast.error(t('setting.file_required')) + return + } + + if (file) { + const formData = new FormData() + formData.append('file', file) + + await singleUpload.mutateAsync(formData, { + onSuccess: (data) => { + values.logoUrl = data.data.url + }, + onError: (error: ErrorType) => { + toast.error(error.response?.data?.error.message[0]) + } + }) + } + + await updateSetting.mutateAsync(values, { + onSuccess: () => { + toast.success(t('setting.update_success')) + }, + onError: (error: ErrorType) => { + toast.error(error.response?.data?.error.message[0]) + } + }) + } + }) + + useEffect(() => { + if (setting?.data) { + formik.setValues(setting?.data?.business) + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [setting]) return (
@@ -21,14 +77,14 @@ const Setting: FC = () => { , - label: t('setting.notification'), - value: 'notification' + icon: , + label: t('setting.setting'), + value: 'setting' }, { - icon: , - label: t('setting.password'), - value: 'password' + icon: , + label: t('setting.domain'), + value: 'domain' }, ]} active={activeTab} @@ -37,115 +93,27 @@ const Setting: FC = () => {
{ - activeTab === 'notification' ? + activeTab === 'setting' ?
-
- {t('setting.setting_email_message')} + + +
+ setFile(file[0])} + />
-
-
-
- {t('setting.notification_announcement')} -
-
-
-
- {t('setting.email')} -
- { }} - /> -
-
-
- {t('setting.sms')} -
- { }} - /> -
-
-
-
-
- {t('setting.notification_announcement')} -
-
-
-
- {t('setting.email')} -
- { }} - /> -
-
-
- {t('setting.sms')} -
- { }} - /> -
-
-
-
-
-
-
- {t('setting.notification_announcement')} -
-
-
-
- {t('setting.email')} -
- { }} - /> -
-
-
- {t('setting.sms')} -
- { }} - /> -
-
-
-
-
- {t('setting.notification_announcement')} -
-
-
-
- {t('setting.email')} -
- { }} - /> -
-
-
- {t('setting.sms')} -
- { }} - /> -
-
-
+
+
: diff --git a/src/pages/setting/hooks/useSettingData.ts b/src/pages/setting/hooks/useSettingData.ts new file mode 100644 index 0000000..19649ab --- /dev/null +++ b/src/pages/setting/hooks/useSettingData.ts @@ -0,0 +1,15 @@ +import { useMutation, useQuery } from "@tanstack/react-query"; +import { getSetting, updateSetting } from "../service/Service"; +import { SettingType } from "../types/Types"; +export const useSettingData = () => { + return useQuery({ + queryKey: ["setting"], + queryFn: getSetting, + }); +}; + +export const useUpdateSetting = () => { + return useMutation({ + mutationFn: (params: SettingType) => updateSetting(params), + }); +}; diff --git a/src/pages/setting/service/Service.ts b/src/pages/setting/service/Service.ts new file mode 100644 index 0000000..3bd60f2 --- /dev/null +++ b/src/pages/setting/service/Service.ts @@ -0,0 +1,12 @@ +import axios from "../../../config/axios"; +import { SettingType } from "../types/Types"; + +export const getSetting = async () => { + const { data } = await axios.get("/business/settings"); + return data; +}; + +export const updateSetting = async (params: SettingType) => { + const { data } = await axios.patch("/business/settings", params); + return data; +}; diff --git a/src/pages/setting/types/Types.ts b/src/pages/setting/types/Types.ts new file mode 100644 index 0000000..c7a5022 --- /dev/null +++ b/src/pages/setting/types/Types.ts @@ -0,0 +1,4 @@ +export type SettingType = { + zarinpalMerchantId: string; + logoUrl: string; +};