create shipment method

src/pages/shipmentMethod/Create.tsx

@@ -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

src/pages/shipmentMethod/hooks/useShipmentMethodData.ts

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import * as api from "../service/ShipmentMethodService";
 
 export const useGetRestaurantShipmentMethods = () => {
@@ -7,3 +7,16 @@ export const useGetRestaurantShipmentMethods = () => {
     queryFn: api.getRestaurantShipmentMethods,
   });
 };
+
+export const useGetShipmentMethods = () => {
+  return useQuery({
+    queryKey: ["shipment-methods"],
+    queryFn: api.getShipmentMethods,
+  });
+};
+
+export const useCreateRestaurantShipmentMethod = () => {
+  return useMutation({
+    mutationFn: api.createRestaurantShipmentMethod,
+  });
+};

src/pages/shipmentMethod/service/ShipmentMethodService.ts

@@ -1,6 +1,30 @@
 import axios from "@/config/axios";
+import type {
+  CreateShipmentMethodType,
+  GetShipmentMethodsResponseType,
+  GetRestaurantShipmentMethodsResponseType,
+} from "../types/Types";
 
-export const getRestaurantShipmentMethods = async () => {
+export const getShipmentMethods = async (): Promise<
+  GetShipmentMethodsResponseType
+> => {
+  const { data } = await axios.get(`/admin/shipment-methods`);
+  return data;
+};
+
+export const getRestaurantShipmentMethods = async (): Promise<
+  GetRestaurantShipmentMethodsResponseType
+> => {
   const { data } = await axios.get("/admin/restaurant-shipment-methods");
   return data;
 };
+
+export const createRestaurantShipmentMethod = async (
+  params: CreateShipmentMethodType
+) => {
+  const { data } = await axios.post(
+    "/admin/restaurant-shipment-methods",
+    params
+  );
+  return data;
+};

src/pages/shipmentMethod/types/Types.ts

@@ -0,0 +1,36 @@
+import type { IResponse } from "@/types/response.types";
+
+export type ShipmentMethod = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  name: string;
+  title: string;
+  description: string;
+  isActive: boolean;
+};
+
+export type GetShipmentMethodsResponseType = IResponse<ShipmentMethod[]>;
+
+export type CreateShipmentMethodType = {
+  shipmentMethodId: string;
+  price: number | null;
+  minOrderPrice: number | null;
+  isActive: boolean;
+};
+
+export type RestaurantShipmentMethod = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  shipmentMethod: ShipmentMethod;
+  price: number | null;
+  minOrderPrice: number | null;
+  isActive: boolean;
+};
+
+export type GetRestaurantShipmentMethodsResponseType = IResponse<
+  RestaurantShipmentMethod[]
+>;

src/router/Main.tsx

@@ -31,6 +31,7 @@ import AdminList from '@/pages/admin/List'
 import CreateAdmin from '@/pages/admin/Create'
 import UpdateAdmin from '@/pages/admin/Update'
 import ShipmentMethodList from '@/pages/shipmentMethod/List'
+import CreateShipmentMethod from '@/pages/shipmentMethod/Create'
 const MainRouter: FC = () => {
 
     const { hasSubMenu } = useSharedStore()
@@ -76,6 +77,7 @@ const MainRouter: FC = () => {
                             <Route path={Pages.admins.update + ':id'} element={<UpdateAdmin />} />
 
                             <Route path={Pages.shipment_methods.list} element={<ShipmentMethodList />} />
+                            <Route path={Pages.shipment_methods.add} element={<CreateShipmentMethod />} />
                         </Routes>
                     </div>
                 </div>