dmenu-admin/src/pages/shipmentMethod/Create.tsx

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 Textarea from '@/components/Textarea'
import type { CreateShipmentMethodType } from './types/Types'
import { useCreateRestaurantShipmentMethod } from './hooks/useShipmentMethodData'
import { DeliveryMethodEnum } from './enum/Enum'
import { Pages } from '@/config/Pages'
import type { ErrorType } from '@/helpers/types'
import { extractErrorMessage } from '@/config/func'
import { useTranslation } from 'react-i18next'

const CreateShipmentMethod: FC = () => {

    const { t } = useTranslation('global')
    const navigate = useNavigate()
    const { mutate: createRestaurantShipmentMethod, isPending } = useCreateRestaurantShipmentMethod()

    const shipmentMethods = [
        { label: t(`shipment.${DeliveryMethodEnum.DineIn}`), value: DeliveryMethodEnum.DineIn },
        { label: t(`shipment.${DeliveryMethodEnum.Pickup}`), value: DeliveryMethodEnum.Pickup },
        { label: t(`shipment.${DeliveryMethodEnum.DeliveryCourier}`), value: DeliveryMethodEnum.DeliveryCourier },
    ]

    const formik = useFormik<CreateShipmentMethodType>({
        initialValues: {
            method: '',
            title: '',
            deliveryFee: 0,
            minOrderPrice: 0,
            description: '',
            enabled: true,
            order: 0,
        },
        validationSchema: Yup.object().shape({
            method: Yup.string().required('روش ارسال الزامی است'),
            title: Yup.string().required('عنوان الزامی است'),
            deliveryFee: Yup.number().required('هزینه ارسال الزامی است').min(0, 'هزینه ارسال باید مثبت باشد'),
            minOrderPrice: Yup.number().required('حداقل قیمت سفارش الزامی است').min(0, 'حداقل قیمت سفارش باید مثبت باشد'),
            description: Yup.string().required('توضیحات الزامی است'),
            enabled: Yup.boolean(),
            order: Yup.number().required('ترتیب الزامی است').min(0, 'ترتیب باید مثبت باشد'),
        }),
        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='method'
                            value={formik.values.method}
                            onChange={formik.handleChange}
                            items={shipmentMethods}
                            placeholder='روش ارسال را انتخاب کنید'
                            error_text={formik.touched.method && formik.errors.method ? formik.errors.method : ''}
                        />
                    </div>
                    <div className='mt-6'>
                        <Input
                            label='عنوان'
                            name='title'
                            value={formik.values.title}
                            onChange={formik.handleChange}
                            error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
                        />
                    </div>
                    <div className='mt-6'>
                        <Input
                            label='هزینه ارسال'
                            name='deliveryFee'
                            type='number'
                            value={formik.values.deliveryFee ?? ''}
                            onChange={(e) => {
                                const value = e.target.value === '' ? 0 : Number(e.target.value)
                                formik.setFieldValue('deliveryFee', value)
                            }}
                            error_text={formik.touched.deliveryFee && formik.errors.deliveryFee ? formik.errors.deliveryFee : ''}
                        />
                    </div>
                    <div className='mt-6'>
                        <Input
                            label='حداقل قیمت سفارش'
                            name='minOrderPrice'
                            type='number'
                            value={formik.values.minOrderPrice ?? ''}
                            onChange={(e) => {
                                const value = e.target.value === '' ? 0 : Number(e.target.value)
                                formik.setFieldValue('minOrderPrice', value)
                            }}
                            error_text={formik.touched.minOrderPrice && formik.errors.minOrderPrice ? formik.errors.minOrderPrice : ''}
                        />
                    </div>
                    <div className='mt-6'>
                        <Textarea
                            label='توضیحات'
                            name='description'
                            value={formik.values.description}
                            onChange={formik.handleChange}
                            error_text={formik.touched.description && formik.errors.description ? formik.errors.description : ''}
                        />
                    </div>
                    <div className='mt-6'>
                        <Input
                            label='ترتیب'
                            name='order'
                            type='number'
                            value={formik.values.order ?? ''}
                            onChange={(e) => {
                                const value = e.target.value === '' ? 0 : Number(e.target.value)
                                formik.setFieldValue('order', value)
                            }}
                            error_text={formik.touched.order && formik.errors.order ? formik.errors.order : ''}
                        />
                    </div>
                    <div className='mt-6'>
                        <Switch
                            active={formik.values.enabled}
                            onChange={(value) => formik.setFieldValue('enabled', value)}
                            label='فعال'
                        />
                    </div>
                </div>
            </div>
        </div>
    )
}

export default CreateShipmentMethod