danak/dzone-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

setting

Browse Source
This commit is contained in:
hamid zarghami
2025-05-21 16:39:59 +03:30
parent cce765007c
commit 58678d585b
6 changed files with 122 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Tabs.tsx
+2 -2
View File
@@ -31,8 +31,8 @@ const Tabs: FC<Props> = (props: Props) => {
return ( return (
<SwiperSlide style={SWIPER_SLIDE_STYLE} onClick={() => props.onChange(item.value)} key={item.value} className={clx( <SwiperSlide style={SWIPER_SLIDE_STYLE} onClick={() => props.onChange(item.value)} key={item.value} className={clx(
'flex flex-col max-w-fit mt-[15px] items-center gap-2 cursor-pointer', 'flex flex-col max-w-fit mt-[15px] items-center gap-2 cursor-pointer',
index === 0 && 'pr-[30px]', index === 0 && 'pr-[22px]',
index === props.items.length - 1 && 'pl-[30px]', // index === props.items.length - 1 && 'pl-[30px]',
props.active === item.value && 'text-black' props.active === item.value && 'text-black'
)}> )}>
{item.icon} {item.icon}
src/langs/fa.json
+6 -1
View File
@@ -591,7 +591,12 @@
"min-8": "حداقل 8 کاراکتر باشد", "min-8": "حداقل 8 کاراکتر باشد",
"mix_charachter_number": "ترکیبی از حروف کوچک و بزرگ باشد", "mix_charachter_number": "ترکیبی از حروف کوچک و بزرگ باشد",
"exsist_number": "شامل اعداد باشد", "exsist_number": "شامل اعداد باشد",
"exsist_special_character": "شامل کاراکتر های خاص (نماد ها) باشد" "exsist_special_character": "شامل کاراکتر های خاص (نماد ها) باشد",
"domain": "دامنه",
"zarinpal_merchant_id": "شناسه مرچنت زرین پال",
"logo": "لوگو",
"file_required": "فایل الزامی است",
"update_success": "تنظیمات با موفقیت به روز شد"
}, },
"wallet": { "wallet": {
"increese_wallet": "افزایش موجودی حساب اعتباری", "increese_wallet": "افزایش موجودی حساب اعتباری",
src/pages/setting/Setting.tsx
+83 -115
View File
@@ -1,15 +1,71 @@
import { FC, useState } from 'react' import { FC, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import Tabs from '../../components/Tabs' import Tabs from '../../components/Tabs'
import { KeySquare, Notification1 } from 'iconsax-react' import { KeySquare, Notification1 } from 'iconsax-react'
import SwitchComponent from '../../components/Switch'
import Input from '../../components/Input' import Input from '../../components/Input'
import Button from '../../components/Button' 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 Setting: FC = () => {
const { t } = useTranslation('global') const { t } = useTranslation('global')
const [activeTab, setActiveTab] = useState<string>('notification') const [activeTab, setActiveTab] = useState<string>('setting')
const [file, setFile] = useState<File | null>(null)
const singleUpload = useSingleUpload()
const updateSetting = useUpdateSetting()
const { data: setting } = useSettingData()
const formik = useFormik<SettingType>({
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 ( return (
<div className='mt-4'> <div className='mt-4'>
@@ -21,14 +77,14 @@ const Setting: FC = () => {
<Tabs <Tabs
items={[ items={[
{ {
icon: <Notification1 color={activeTab === 'notification' ? 'black' : '#8C90A3'} size={22} />, icon: <Notification1 color={activeTab === 'setting' ? 'black' : '#8C90A3'} size={22} />,
label: t('setting.notification'), label: t('setting.setting'),
value: 'notification' value: 'setting'
}, },
{ {
icon: <KeySquare color={activeTab === 'password' ? 'black' : '#8C90A3'} size={22} />, icon: <KeySquare color={activeTab === 'domain' ? 'black' : '#8C90A3'} size={22} />,
label: t('setting.password'), label: t('setting.domain'),
value: 'password' value: 'domain'
}, },
]} ]}
active={activeTab} active={activeTab}
@@ -37,115 +93,27 @@ const Setting: FC = () => {
</div> </div>
{ {
activeTab === 'notification' ? activeTab === 'setting' ?
<div className='mt-10 bg-white xl:p-8 p-4 rounded-3xl'> <div className='mt-10 bg-white xl:p-8 p-4 rounded-3xl'>
<div> <Input
{t('setting.setting_email_message')} label={t('setting.zarinpal_merchant_id')}
{...formik.getFieldProps('zarinpalMerchantId')}
error_text={formik.touched.zarinpalMerchantId && formik.errors.zarinpalMerchantId ? formik.errors.zarinpalMerchantId : undefined}
/>
<div className='mt-6'>
<UploadBox
label={t('setting.logo')}
{...formik.getFieldProps('logoUrl')}
onChange={(file) => setFile(file[0])}
/>
</div> </div>
<div className='flex xl:flex-row flex-col gap-6 text-sm mt-8'> <div className='mt-6'>
<div className='flex-1 border border-border px-4 rounded-2xl min-h-14 items-center flex justify-between'> <Button
<div className='xl:text-[13px] text-xs'> label={t('setting.save_change')}
{t('setting.notification_announcement')} onClick={() => formik.handleSubmit()}
</div> />
<div className='flex xl:gap-4 gap-2'>
<div className='flex gap-2 text-xs items-center text-description'>
<div>
{t('setting.email')}
</div>
<SwitchComponent
active={true}
onChange={() => { }}
/>
</div>
<div className='flex gap-2 text-xs items-center text-description'>
<div>
{t('setting.sms')}
</div>
<SwitchComponent
active={false}
onChange={() => { }}
/>
</div>
</div>
</div>
<div className='flex-1 border border-border px-4 rounded-2xl min-h-14 items-center flex justify-between'>
<div className='xl:text-[13px] text-xs'>
{t('setting.notification_announcement')}
</div>
<div className='flex xl:gap-4 gap-2'>
<div className='flex gap-2 text-xs items-center text-description'>
<div>
{t('setting.email')}
</div>
<SwitchComponent
active={true}
onChange={() => { }}
/>
</div>
<div className='flex gap-2 text-xs items-center text-description'>
<div>
{t('setting.sms')}
</div>
<SwitchComponent
active={false}
onChange={() => { }}
/>
</div>
</div>
</div>
</div>
<div className='flex xl:flex-row flex-col gap-6 text-sm mt-6'>
<div className='flex-1 border border-border px-4 rounded-2xl min-h-14 items-center flex justify-between'>
<div className='xl:text-[13px] text-xs'>
{t('setting.notification_announcement')}
</div>
<div className='flex xl:gap-4 gap-2'>
<div className='flex gap-2 text-xs items-center text-description'>
<div>
{t('setting.email')}
</div>
<SwitchComponent
active={true}
onChange={() => { }}
/>
</div>
<div className='flex gap-2 text-xs items-center text-description'>
<div>
{t('setting.sms')}
</div>
<SwitchComponent
active={false}
onChange={() => { }}
/>
</div>
</div>
</div>
<div className='flex-1 border border-border px-4 rounded-2xl min-h-14 items-center flex justify-between'>
<div className='xl:text-[13px] text-xs'>
{t('setting.notification_announcement')}
</div>
<div className='flex xl:gap-4 gap-2'>
<div className='flex gap-2 text-xs items-center text-description'>
<div>
{t('setting.email')}
</div>
<SwitchComponent
active={true}
onChange={() => { }}
/>
</div>
<div className='flex gap-2 text-xs items-center text-description'>
<div>
{t('setting.sms')}
</div>
<SwitchComponent
active={false}
onChange={() => { }}
/>
</div>
</div>
</div>
</div> </div>
</div> </div>
: :
src/pages/setting/hooks/useSettingData.ts
+15
View File
@@ -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),
});
};
src/pages/setting/service/Service.ts
+12
View File
@@ -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;
};
src/pages/setting/types/Types.ts
+4
View File
@@ -0,0 +1,4 @@
export type SettingType = {
zarinpalMerchantId: string;
logoUrl: string;
};