return policy page

src/config/Pages.ts

@@ -60,6 +60,10 @@ export const Pages = {
     faqUpdate: "/pages/faq/update/",
     shipment: "/pages/shipment",
     privacy: "/pages/privacy",
+    returnPolicy: "/pages/return-policy",
+    jobs: "/pages/jobs",
+    documents: "/pages/documents",
+    incomeTariff: "/pages/income-tariff",
   },
   wallet: "/wallet",
   profile: "/profile",

src/pages/setting/ReturnPolicyPage.tsx

@@ -0,0 +1,107 @@
+import { type FC, useEffect, useState } from 'react'
+import { useGetSiteSetting, useUpdateSiteSetting } from './hooks/useSettingData'
+import { SiteSettingPageEnum } from './enum/Enum'
+import { useFormik } from 'formik'
+import type { UpdateSiteSetting } from './types/Types'
+import { toast } from 'react-toastify'
+import { Pages } from '@/config/Pages'
+import * as Yup from 'yup'
+import { useNavigate } from 'react-router-dom'
+import Button from '@/components/Button'
+import TextEditor from '@/components/TextEditor'
+import PageLoading from '@/components/PageLoading'
+import Error from '@/components/Error'
+import { TickCircle } from 'iconsax-react'
+
+const ReturnPolicyPage: FC = () => {
+    const navigate = useNavigate()
+    const { data: siteSetting, isLoading: siteSettingLoading, error: siteSettingError } = useGetSiteSetting(SiteSettingPageEnum.returnRulesContent)
+    const updateSiteSettingMutation = useUpdateSiteSetting()
+    const [formData, setFormData] = useState<UpdateSiteSetting>({ returnRulesContent: '' })
+
+    const formik = useFormik<UpdateSiteSetting>({
+        initialValues: formData,
+        validationSchema: Yup.object({
+            returnRulesContent: Yup.string().required('سیاست بازگشت کالا الزامی است'),
+        }),
+        onSubmit: (values) => {
+            updateSiteSettingMutation.mutate(values, {
+                onSuccess: () => {
+                    toast.success('سیاست بازگشت کالا با موفقیت ویرایش شد')
+                    navigate(Pages.pages.returnPolicy)
+                }
+            })
+        },
+        enableReinitialize: true
+    })
+
+    useEffect(() => {
+        if (siteSetting?.results?.siteSetting?.returnRulesContent) {
+            const newData = { returnRulesContent: siteSetting.results.siteSetting.returnRulesContent }
+            setFormData(newData)
+        }
+    }, [siteSetting])
+
+    if (siteSettingLoading) {
+        return (
+            <div className="flex justify-center items-center min-h-[400px]">
+                <PageLoading />
+            </div>
+        )
+    }
+
+    if (siteSettingError) {
+        return (
+            <div className="flex justify-center items-center min-h-[400px]">
+                <Error errorText="خطا در بارگذاری اطلاعات سیاست بازگشت کالا" />
+            </div>
+        )
+    }
+
+    return (
+        <div className='mt-4'>
+            <div className='flex justify-between items-center'>
+                <div className='flex items-center gap-3'>
+                    <h1>ویرایش سیاست بازگشت کالا</h1>
+                </div>
+                <div>
+                    <Button
+                        className='px-6'
+                        onClick={() => formik.handleSubmit()}
+                        isLoading={updateSiteSettingMutation.isPending}
+                        disabled={!formik.isValid || updateSiteSettingMutation.isPending}
+                    >
+                        <div className='flex gap-2 items-center'>
+                            <TickCircle size={16} color='#fff' />
+                            <div>ذخیره تغییرات</div>
+                        </div>
+                    </Button>
+                </div>
+            </div>
+
+            <div className='flex gap-6 xl:mt-8 mt-6'>
+                <div className='flex-1'>
+                    <div className='bg-white rounded-lg shadow-sm border p-6'>
+                        <div className='mb-4'>
+                            <div className='mb-4'>
+                                متن سیاست بازگشت کالا
+                            </div>
+                            <TextEditor
+                                value={formik.values.returnRulesContent || ''}
+                                onChange={(value) => formik.setFieldValue('returnRulesContent', value)}
+                                placeholder='متن سیاست بازگشت کالا را وارد کنید...'
+                            />
+                            {formik.touched.returnRulesContent && formik.errors.returnRulesContent && (
+                                <div className='text-red-500 text-sm mt-12'>
+                                    {formik.errors.returnRulesContent}
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default ReturnPolicyPage

src/router/Main.tsx

@@ -51,6 +51,7 @@ import FaqCreate from '@/pages/setting/FaqCreate'
 import FaqUpdate from '@/pages/setting/FaqUpdate'
 import ShipmentPage from '@/pages/setting/ShipmentPage'
 import PrivacyPage from '@/pages/setting/PrivacyPage'
+import ReturnPolicyPage from '@/pages/setting/ReturnPolicyPage'
 
 const MainRouter: FC = () => {
 
@@ -127,6 +128,7 @@ const MainRouter: FC = () => {
                             <Route path={`${Pages.pages.faqUpdate}:id`} element={<FaqUpdate />} />
                             <Route path={Pages.pages.shipment} element={<ShipmentPage />} />
                             <Route path={Pages.pages.privacy} element={<PrivacyPage />} />
+                            <Route path={Pages.pages.returnPolicy} element={<ReturnPolicyPage />} />
                         </Routes>
                     </div>
                 </div>

src/shared/SideBar.tsx

@@ -821,22 +821,22 @@ const PagesSubMenu: FC = () => {
                 <SubMenuItem
                     title={'قوانین مرجوعی'}
                     isActive={isActive('return-policy')}
-                    link="/pages/return-policy"
+                    link={Pages.pages.returnPolicy}
                 />
                 <SubMenuItem
                     title={'مشاغل'}
                     isActive={isActive('jobs')}
-                    link="/pages/jobs"
+                    link={Pages.pages.jobs}
                 />
                 <SubMenuItem
                     title={'اسناد'}
                     isActive={isActive('documents')}
-                    link="/pages/documents"
+                    link={Pages.pages.documents}
                 />
                 <SubMenuItem
                     title={'تعرفه درآمد'}
                     isActive={isActive('income-tariff')}
-                    link="/pages/income-tariff"
+                    link={Pages.pages.incomeTariff}
                 />
             </div>
         </div>