create shipment method

2025-11-23 15:56:09 +03:30
parent 255a07df06
commit 45122f4d7a
5 changed files with 202 additions and 2 deletions
@@ -0,0 +1,125 @@
+import { type FC } from 'react'
+import { useFormik } from 'formik'
+import * as Yup from 'yup'
+import { TickCircle } from 'iconsax-react'
+import { toast } from 'react-toastify'
+import { useNavigate } 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 type { CreateShipmentMethodType, ShipmentMethod } from './types/Types'
+import { useCreateRestaurantShipmentMethod, useGetShipmentMethods } from './hooks/useShipmentMethodData'
+import { Pages } from '@/config/Pages'
+import type { ErrorType } from '@/helpers/types'
+import { extractErrorMessage } from '@/config/func'
+
+const CreateShipmentMethod: FC = () => {
+    const navigate = useNavigate()
+    const { mutate: createRestaurantShipmentMethod, isPending } = useCreateRestaurantShipmentMethod()
+    const { data: shipmentMethodsData } = useGetShipmentMethods()
+
+    const shipmentMethods = shipmentMethodsData?.data?.map((method: ShipmentMethod) => ({
+        label: method.title,
+        value: method.id
+    })) || []
+
+    const formik = useFormik<CreateShipmentMethodType>({
+        initialValues: {
+            shipmentMethodId: '',
+            price: null,
+            minOrderPrice: null,
+            isActive: true,
+        },
+        validationSchema: Yup.object().shape({
+            shipmentMethodId: Yup.string().required('روش ارسال الزامی است'),
+            price: Yup.number().nullable().required('قیمت الزامی است').min(0, 'قیمت باید مثبت باشد'),
+            minOrderPrice: Yup.number().nullable().required('حداقل قیمت سفارش الزامی است').min(0, 'حداقل قیمت سفارش باید مثبت باشد'),
+            isActive: Yup.boolean(),
+        }),
+        onSubmit: (values) => {
+            createRestaurantShipmentMethod(values, {
+                onSuccess: () => {
+                    toast.success('روش ارسال با موفقیت ایجاد شد')
+                    navigate(Pages.shipment_methods.list)
+                },
+                onError: (error: ErrorType) => {
+                    toast.error(extractErrorMessage(error))
+                },
+            })
+        },
+    })
+
+    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='shipmentMethodId'
+                            value={formik.values.shipmentMethodId}
+                            onChange={formik.handleChange}
+                            items={shipmentMethods}
+                            placeholder='روش ارسال را انتخاب کنید'
+                            error_text={formik.touched.shipmentMethodId && formik.errors.shipmentMethodId ? formik.errors.shipmentMethodId : ''}
+                        />
+                    </div>
+                    <div className='mt-6'>
+                        <Input
+                            label='قیمت'
+                            name='price'
+                            type='number'
+                            value={formik.values.price ?? ''}
+                            onChange={(e) => {
+                                const value = e.target.value === '' ? null : Number(e.target.value)
+                                formik.setFieldValue('price', value)
+                            }}
+                            error_text={formik.touched.price && formik.errors.price ? formik.errors.price : ''}
+                        />
+                    </div>
+                    <div className='mt-6'>
+                        <Input
+                            label='حداقل قیمت سفارش'
+                            name='minOrderPrice'
+                            type='number'
+                            value={formik.values.minOrderPrice ?? ''}
+                            onChange={(e) => {
+                                const value = e.target.value === '' ? null : Number(e.target.value)
+                                formik.setFieldValue('minOrderPrice', value)
+                            }}
+                            error_text={formik.touched.minOrderPrice && formik.errors.minOrderPrice ? formik.errors.minOrderPrice : ''}
+                        />
+                    </div>
+                    <div className='mt-6'>
+                        <Switch
+                            active={formik.values.isActive}
+                            onChange={(value) => formik.setFieldValue('isActive', value)}
+                            label='فعال'
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default CreateShipmentMethod