service and hook compelete

2025-11-23 11:38:28 +03:30
parent a630febd95
commit 92e225118b
6 changed files with 220 additions and 15 deletions
@@ -0,0 +1,138 @@
+import { type FC, useEffect } from 'react'
+import { useFormik } from 'formik'
+import * as Yup from 'yup'
+import { TickCircle } from 'iconsax-react'
+import { toast } from 'react-toastify'
+import { useNavigate, useParams } from 'react-router-dom'
+import Button from '@/components/Button'
+import Input from '@/components/Input'
+import Select from '@/components/Select'
+import Switch from '@/components/Switch'
+import PageLoading from '@/components/PageLoading'
+import type { CreateRestaurantPaymentMethodType, PaymentMethod } from './types/Types'
+import { useGetRestaurantPaymentMethod, useUpdateRestaurantPaymentMethod, useGetPaymentMethods } from './hooks/usePaymentMethodData'
+import { Pages } from '@/config/Pages'
+import type { ErrorType } from '@/helpers/types'
+import { extractErrorMessage } from '@/config/func'
+
+const UpdatePaymentMethod: FC = () => {
+    const navigate = useNavigate()
+    const { id } = useParams<{ id: string }>()
+    const { data: restaurantPaymentMethodData, isLoading } = useGetRestaurantPaymentMethod(id || '')
+    const { data: paymentMethodsData } = useGetPaymentMethods()
+    const { mutate: updateRestaurantPaymentMethod, isPending } = useUpdateRestaurantPaymentMethod()
+
+    const paymentMethods = paymentMethodsData?.data?.map((method: PaymentMethod) => ({
+        label: method.name,
+        value: method.id
+    })) || []
+
+    const restaurantPaymentMethod = restaurantPaymentMethodData?.data
+
+    const formik = useFormik<CreateRestaurantPaymentMethodType>({
+        initialValues: {
+            paymentMethodId: '',
+            merchantId: '',
+            isActive: true,
+        },
+        validationSchema: Yup.object().shape({
+            paymentMethodId: Yup.string().required('روش پرداخت الزامی است'),
+            merchantId: Yup.string().required('شناسه مرچنت الزامی است'),
+            isActive: Yup.boolean(),
+        }),
+        onSubmit: (values) => {
+            if (!id) return
+            updateRestaurantPaymentMethod(
+                { id, params: values },
+                {
+                    onSuccess: () => {
+                        toast.success('روش پرداخت با موفقیت ویرایش شد')
+                        navigate(Pages.payment_methods.list)
+                    },
+                    onError: (error: ErrorType) => {
+                        toast.error(extractErrorMessage(error))
+                    },
+                }
+            )
+        },
+    })
+
+    useEffect(() => {
+        if (restaurantPaymentMethod) {
+            formik.setValues({
+                paymentMethodId: restaurantPaymentMethod.paymentMethodId || '',
+                merchantId: restaurantPaymentMethod.merchantId || '',
+                isActive: restaurantPaymentMethod.isActive ?? true,
+            })
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [restaurantPaymentMethod])
+
+    if (isLoading) {
+        return <PageLoading />
+    }
+
+    if (!restaurantPaymentMethod) {
+        return (
+            <div className='w-full mt-4 flex justify-center items-center'>
+                <div>روش پرداخت یافت نشد</div>
+            </div>
+        )
+    }
+
+    return (
+        <div className='mt-5'>
+            <div className='flex w-full justify-between items-center'>
+                <div className='text-lg font-light'>
+                    ویرایش روش پرداخت
+                </div>
+                <div>
+                    <Button
+                        className='px-5'
+                        onClick={() => formik.handleSubmit()}
+                        isloading={isPending}
+                    >
+                        <div className='flex gap-2 items-center'>
+                            <TickCircle className='size-5' color='white' />
+                            <div>ثبت تغییرات</div>
+                        </div>
+                    </Button>
+                </div>
+            </div>
+
+            <div className='mt-6'>
+                <div className='bg-white rounded-3xl p-6'>
+                    <div className='mb-4'>
+                        <Select
+                            label='روش پرداخت'
+                            name='paymentMethodId'
+                            value={formik.values.paymentMethodId}
+                            onChange={formik.handleChange}
+                            items={paymentMethods}
+                            placeholder='روش پرداخت را انتخاب کنید'
+                            error_text={formik.touched.paymentMethodId && formik.errors.paymentMethodId ? formik.errors.paymentMethodId : ''}
+                        />
+                    </div>
+                    <div className='mt-6'>
+                        <Input
+                            label='شناسه مرچنت'
+                            name='merchantId'
+                            value={formik.values.merchantId}
+                            onChange={formik.handleChange}
+                            error_text={formik.touched.merchantId && formik.errors.merchantId ? formik.errors.merchantId : ''}
+                        />
+                    </div>
+                    <div className='mt-6'>
+                        <Switch
+                            active={formik.values.isActive}
+                            onChange={(value) => formik.setFieldValue('isActive', value)}
+                            label='فعال'
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default UpdatePaymentMethod