setting
This commit is contained in:
hamid zarghami
@@ -31,8 +31,8 @@ const Tabs: FC<Props> = (props: Props) => {
|
||||
return (
|
||||
<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',
|
||||
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}
|
||||
|
||||
+6
-1
@@ -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": "افزایش موجودی حساب اعتباری",
|
||||
|
||||
+83
-115
@@ -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<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 (
|
||||
<div className='mt-4'>
|
||||
@@ -21,14 +77,14 @@ const Setting: FC = () => {
|
||||
<Tabs
|
||||
items={[
|
||||
{
|
||||
icon: <Notification1 color={activeTab === 'notification' ? 'black' : '#8C90A3'} size={22} />,
|
||||
label: t('setting.notification'),
|
||||
value: 'notification'
|
||||
icon: <Notification1 color={activeTab === 'setting' ? 'black' : '#8C90A3'} size={22} />,
|
||||
label: t('setting.setting'),
|
||||
value: 'setting'
|
||||
},
|
||||
{
|
||||
icon: <KeySquare color={activeTab === 'password' ? 'black' : '#8C90A3'} size={22} />,
|
||||
label: t('setting.password'),
|
||||
value: 'password'
|
||||
icon: <KeySquare color={activeTab === 'domain' ? 'black' : '#8C90A3'} size={22} />,
|
||||
label: t('setting.domain'),
|
||||
value: 'domain'
|
||||
},
|
||||
]}
|
||||
active={activeTab}
|
||||
@@ -37,115 +93,27 @@ const Setting: FC = () => {
|
||||
</div>
|
||||
|
||||
{
|
||||
activeTab === 'notification' ?
|
||||
activeTab === 'setting' ?
|
||||
<div className='mt-10 bg-white xl:p-8 p-4 rounded-3xl'>
|
||||
<div>
|
||||
{t('setting.setting_email_message')}
|
||||
<Input
|
||||
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 className='flex xl:flex-row flex-col gap-6 text-sm mt-8'>
|
||||
<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 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 className='mt-6'>
|
||||
<Button
|
||||
label={t('setting.save_change')}
|
||||
onClick={() => formik.handleSubmit()}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
|
||||
@@ -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),
|
||||
});
|
||||
};
|
||||
@@ -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;
|
||||
};
|
||||
@@ -0,0 +1,4 @@
|
||||
export type SettingType = {
|
||||
zarinpalMerchantId: string;
|
||||
logoUrl: string;
|
||||
};
|
||||
Reference in New Issue
Block a user