discount

src/components/Radio.tsx

@@ -2,8 +2,8 @@ import { FC } from 'react'
 
 type Props = {
     isActive: boolean,
-    value: 'year' | '3month' | 'month',
+    value: string,
-    onChange: (value: 'year' | '3month' | 'month') => void
+    onChange: (value: string) => void
 }
 
 const Radio: FC<Props> = (props: Props) => {

src/components/RadioGroup.tsx

@@ -5,10 +5,10 @@ import Radio from './Radio'
 type Props = {
     items: {
         label: string
-        value: 'year' | '3month' | 'month'
+        value: string
     }[]
     selected: string
-    onChange: (value: 'year' | '3month' | 'month') => void
+    onChange: (value: string) => void
 }
 
 const RadioGroup: FC<Props> = (props: Props) => {

src/langs/fa.json

@@ -296,7 +296,12 @@
     "discount_code": "کد تخفیف",
     "direct_discount": "تخفیف مستقیم",
     "fixed_amount": "مبلغ ثابت",
-    "percent": "درصد"
+    "percent": "درصد",
+    "errors_plan": "سرویس و پلن را انتخاب کنید",
+    "DIRECT": "مستقیم",
+    "FIXED": "ثابت",
+    "plan": "پلن",
+    "user": "کاربر"
   },
   "blog": {
     "blog": "بلاگ",

src/pages/discounts/CreateDiscount.tsx

@@ -1,13 +1,80 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '../../components/Input'
 import Button from '../../components/Button'
 import SwitchComponent from '../../components/Switch'
-import { TickCircle, TickSquare, Refresh } from 'iconsax-react'
+import { TickCircle } from 'iconsax-react'
 import DatePickerComponent from '../../components/DatePicker'
 import RadioGroup from '../../components/RadioGroup'
+import { useFormik } from 'formik'
+import { CreateDiscountType, DiscountCalculationType, DiscountType } from './types/DiscountTypes'
+import * as Yup from 'yup'
+import { useGetAllServices, useGetPlans } from '../service/hooks/useServiceData'
+import { PlanItemType, ServiceItemType } from '../service/types/ServiceTypes'
+import CheckBoxComponent from '../../components/CheckBoxComponent'
+import { toast } from 'react-toastify'
+import { useCreateDiscount } from './hooks/useDiscountData'
+import { useGetCustomers } from '../customer/hooks/useCustomerData'
+import { CustomerItemType } from '../customer/types/CustomerTypes'
+import { useNavigate } from 'react-router-dom'
+import { Pages } from '../../config/Pages'
+import { ErrorType } from '../../helpers/types'
+
 const CreateDiscount: FC = () => {
+
+    const navigate = useNavigate()
     const { t } = useTranslation('global')
+    const [serviceId, setServiceId] = useState<string>('')
+    const [planId, setPlanId] = useState<string>('')
+    const [customerId, setCustomerId] = useState('')
+    const getServices = useGetAllServices('', 1, '', '', undefined, 50)
+    const getPlans = useGetPlans(serviceId)
+    const getCustomers = useGetCustomers()
+    const createDiscount = useCreateDiscount()
+
+    const formik = useFormik<CreateDiscountType>({
+        initialValues: {
+            amount: '',
+            calculationType: DiscountCalculationType.FIXED,
+            endDate: '',
+            startDate: '',
+            title: '',
+            type: DiscountType.DIRECT,
+            subscriptionPlanIds: [],
+            userIds: []
+        },
+        validationSchema: Yup.object({
+            amount: Yup.string().required(t('errors.required')),
+            calculationType: Yup.string().required(t('errors.required')),
+            endDate: Yup.string().required(t('errors.required')),
+            startDate: Yup.string().required(t('errors.required')),
+            title: Yup.string().required(t('errors.required')),
+            type: Yup.string().required(t('errors.required')),
+        }),
+        onSubmit(values) {
+            if (serviceId && planId) {
+                values.subscriptionPlanIds = [planId]
+                values.userIds = [customerId]
+                const params: CreateDiscountType = {
+                    ...values,
+                    startDate: new Date(values.startDate).toISOString(),
+                    endDate: new Date(values.endDate).toISOString(),
+                    amount: +values.amount
+                }
+                createDiscount.mutate(params, {
+                    onSuccess: () => {
+                        toast.success(t('success'))
+                        navigate(Pages.discount.list)
+                    },
+                    onError: (error: ErrorType) => {
+                        toast.error(error.response?.data?.error?.message[0])
+                    }
+                })
+            } else {
+                toast.error(t('discount.errors_plan'))
+            }
+        },
+    })
     return (
         <div className='mt-4'>
             <div className='flex justify-between items-center'>
@@ -16,6 +83,7 @@ const CreateDiscount: FC = () => {
                 </div>
                 <Button
                     className='w-[172px]'
+                    onClick={() => formik.handleSubmit()}
                 >
                     <div className='flex gap-2 items-center'>
                         <TickCircle size={20} color='white' />
@@ -34,15 +102,15 @@ const CreateDiscount: FC = () => {
                                 items={[
                                     {
                                         label: t('discount.direct_discount'),
-                                        value: '3month'
+                                        value: DiscountType.DIRECT
                                     },
                                     {
                                         label: t('discount.discount_code'),
-                                        value: 'year'
+                                        value: DiscountType.CODE
                                     }
                                 ]}
-                                onChange={() => ''}
+                                onChange={(value) => formik.setFieldValue('type', value)}
-                                selected={''}
+                                selected={formik.values.type}
                             />
                         </div>
                     </div>
@@ -50,8 +118,10 @@ const CreateDiscount: FC = () => {
                         <Input
                             label={t('discount.title')}
                             placeholder={t('discount.enter_discount_description')}
+                            {...formik.getFieldProps('title')}
+                            error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
                         />
-                        <div className='w-full sm:mt-7 flex flex-col xl:flex-row items-center'>
+                        {/* <div className='w-full sm:mt-7 flex flex-col xl:flex-row items-center'>
                             <button className='text-xs border h-[39px] xl:h-full w-full xl:w-[142px] border-black rounded-xl flex justify-center items-center gap-2'>
                                 <Refresh
                                     size={18} color='black'
@@ -60,7 +130,7 @@ const CreateDiscount: FC = () => {
                                     {t('discount.auto_generate_code')}
                                 </p>
                             </button>
-                        </div>
+                        </div> */}
                     </div>
                     <div className='mt-6 rowTwoInput'>
                         <div className='w-full'>
@@ -70,35 +140,37 @@ const CreateDiscount: FC = () => {
                                     items={[
                                         {
                                             label: t('discount.fixed_amount'),
-                                            value: '3month'
+                                            value: DiscountCalculationType.FIXED
                                         },
                                         {
                                             label: t('discount.percent'),
-                                            value: 'year'
+                                            value: DiscountCalculationType.PERCENTAGE
                                         }
                                     ]}
-                                    onChange={() => ''}
+                                    onChange={(value) => formik.setFieldValue('calculationType', value)}
-                                    selected={''}
+                                    selected={formik.values.calculationType}
                                 />
                             </div>
                         </div>
                         <Input
                             label={t('discount.price_or_percent')}
                             placeholder={t('discount.enter_price_or_percent')}
+                            {...formik.getFieldProps('amount')}
+                            error_text={formik.touched.amount && formik.errors.amount ? formik.errors.amount : ''}
                         />
                     </div>
                     <div className='mt-6 rowTwoInput'>
                         <DatePickerComponent
                             label={t('discount.startDate')}
-                            onChange={() => { }}
+                            onChange={(value) => formik.setFieldValue('startDate', value)}
                             placeholder=''
-                            defaulValue='1400-01-01'
+                            error_text={formik.touched.startDate && formik.errors.startDate ? formik.errors.startDate : ''}
                         />
                         <DatePickerComponent
                             label={t('discount.endDate')}
-                            onChange={() => { }}
+                            onChange={(value) => formik.setFieldValue('endDate', value)}
                             placeholder=''
-                            defaulValue='1400-01-01'
+                            error_text={formik.touched.endDate && formik.errors.endDate ? formik.errors.endDate : ''}
                         />
                     </div>
                 </div>
@@ -117,37 +189,70 @@ const CreateDiscount: FC = () => {
                             />
                         </div>
                     </div>
-                    <p className='mt-6 text-sm'>{t('discount.availabe_service')}</p>
+                    <p className='mt-10 text-sm'>{t('discount.availabe_service')}</p>
-                    <div className='p-2 border border-[##D0D0D0] rounded-lg mt-2'>
+                    <div className='p-2 text-sm border border-[##D0D0D0] rounded-lg mt-2'>
                         <Input
                             variant='search'
                             placeholder={t('header.search')}
                         />
-                        <div className='flex items-start gap-2 py-2'>
+                        {
+                            getServices.data?.data?.services?.map((item: ServiceItemType) => (
+                                <div key={item.id} className='flex gap-2 mt-3 py-2 items-center'>
                                     <div>
-                                <TickSquare size={20} color='black' variant='Bold' />
+                                        <CheckBoxComponent
+                                            checked={serviceId === item.id}
+                                            onChange={(e) => setServiceId(e.target.checked ? item.id : '')}
+                                        />
                                     </div>
                                     <div className='text-xs leading-5'>
-                                لورم ایپسوم
+                                        {item.name}
                                     </div>
                                 </div>
-                        <div className='flex items-start gap-2 py-2'>
+                            ))
+                        }
+                    </div>
+
+                    {
+                        getPlans.data &&
+                        <div className='p-2 text-sm border border-[##D0D0D0] rounded-lg mt-2'>
+                            {
+                                getPlans.data?.data?.subscriptions?.map((item: PlanItemType) => (
+                                    <div key={item.id} className='flex gap-2 mt-3 py-2 items-center'>
                                         <div>
-                                <TickSquare size={20} color='black' variant='Bold' />
+                                            <CheckBoxComponent
+                                                checked={planId === item.id}
+                                                onChange={(e) => setPlanId(e.target.checked ? item.id : '')}
+                                            />
                                         </div>
                                         <div className='text-xs leading-5'>
-                                لورم ایپسوم
+                                            {item.name}
                                         </div>
                                     </div>
-                        <div className='flex items-start gap-2 py-2'>
+                                ))
+                            }
+                        </div>
+                    }
+
+                    {
+                        planId && getCustomers.data &&
+                        <div className='p-2 text-sm border border-[##D0D0D0] rounded-lg mt-2'>
+                            {
+                                getCustomers.data?.data?.customers?.map((item: CustomerItemType) => (
+                                    <div key={item.id} className='flex gap-2 mt-3 py-2 items-center'>
                                         <div>
-                                <TickSquare size={20} color='black' variant='Bold' />
+                                            <CheckBoxComponent
+                                                checked={customerId === item.id}
+                                                onChange={(e) => setCustomerId(e.target.checked ? item.id : '')}
+                                            />
                                         </div>
                                         <div className='text-xs leading-5'>
-                                لورم ایپسوم
+                                            {item.firstName + ' ' + item.lastName}
                                         </div>
                                     </div>
+                                ))
+                            }
                         </div>
+                    }
                 </div>
             </div>
         </div>

src/pages/discounts/DiscountsList.tsx

@@ -1,14 +1,23 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '../../components/Button'
-import { Add, Eye } from 'iconsax-react'
+import { Add } from 'iconsax-react'
 import Td from '../../components/Td'
 import { Link } from 'react-router-dom'
 import { Pages } from '../../config/Pages'
-import SwitchComponent from '../../components/Switch'
 import Input from '../../components/Input'
+import { useGetDiscounts } from './hooks/useDiscountData'
+import { DiscountItemType } from './types/DiscountTypes'
+import moment from 'moment-jalaali'
+import ToggleStatusDiscount from './components/ToggleStatusDiscount'
+import PageLoading from '../../components/PageLoading'
+
 const DiscountList: FC = () => {
+
     const { t } = useTranslation('global')
+    const [search, setSearch] = useState<string>('')
+    const getDiscounts = useGetDiscounts(search)
+
     return (
         <div className='mt-4 min-h-[500px]'>
             <div className='flex justify-between items-center'>
@@ -41,6 +50,7 @@ const DiscountList: FC = () => {
                             variant='search'
                             placeholder={t('ads.search')}
                             className='bg-white w-full'
+                            onChangeSearchFinal={(value) => setSearch(value)}
                         />
                     </div>
 
@@ -50,65 +60,52 @@ const DiscountList: FC = () => {
 
 
 
+            {
+                getDiscounts.isPending ?
+                    <PageLoading />
+                    :
                     <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
                         <table className='w-full text-sm '>
                             <thead className='thead'>
                                 <tr>
                                     <Td text={t('discount.number')} />
+                                    <Td text={t('discount.user')} />
                                     <Td text={t('discount.type')} />
                                     <Td text={t('discount.code')} />
                                     <Td text={t('discount.startDate')} />
                                     <Td text={t('discount.endDate')} />
                                     <Td text={t('discount.price_or_percent')} />
-                            <Td text={t('discount.service')} />
+                                    <Td text={t('discount.plan')} />
                                     <Td text={t('discount.status')} />
-                            <Td text={''} />
                                 </tr>
                             </thead>
                             <tbody>
-                        <tr className='tr'>
+                                {
-                            <Td text={t('discount.number')} />
+                                    getDiscounts.data?.data?.discounts?.map((item: DiscountItemType, index: number) => {
-                            <Td text={t('discount.type')} />
+                                        return (
-                            <Td text={t('discount.code')} />
+                                            <tr key={item.id} className='tr'>
-                            <Td text={t('discount.startDate')} />
+                                                <Td text={String(index + 1)} />
-                            <Td text={t('discount.endDate')} />
+                                                <Td text={item.users[0].firstName + ' ' + item.users[0].lastName} />
-                            <Td text={t('discount.price_or_percent')} />
+                                                <Td text={t(`discount.${item.type}`)} />
-                            <Td text={t('discount.service')} />
+                                                <Td text={item.code} />
+                                                <Td text={moment(item.startDate, 'jYYYY-jMM-jDD').format('jYYYY-jMM-jDD')} />
+                                                <Td text={moment(item.endDate, 'jYYYY-jMM-jDD').format('jYYYY-jMM-jDD')} />
+                                                <Td text={String(item.amount)} />
+                                                <Td text={item.subscriptionPlans[0].name} />
                                                 <Td text={t('')}>
-                                <SwitchComponent
+                                                    <ToggleStatusDiscount
-                                    active={true}
+                                                        defaultActive={item.isActive}
-                                    onChange={() => { }}
+                                                        id={item.id}
                                                     />
                                                 </Td>
-                            <Td text={''}>
-                                <Link to={Pages.ticket.detail + '1'}>
-                                    <Eye size={20} color='#8C90A3' />
-                                </Link>
-                            </Td>
-                        </tr>
-                        <tr className='tr'>
-                            <Td text={t('discount.number')} />
-                            <Td text={t('discount.type')} />
-                            <Td text={t('discount.code')} />
-                            <Td text={t('discount.startDate')} />
-                            <Td text={t('discount.endDate')} />
-                            <Td text={t('discount.price_or_percent')} />
-                            <Td text={t('discount.service')} />
-                            <Td text={t('')}>
-                                <SwitchComponent
-                                    active={true}
-                                    onChange={() => { }}
-                                />
-                            </Td>
-                            <Td text={''}>
-                                <Link to={Pages.discount + '1'}>
-                                    <Eye size={20} color='#8C90A3' />
-                                </Link>
-                            </Td>
                                             </tr>
+                                        )
+                                    })
+                                }
                             </tbody>
                         </table>
                     </div>
+            }
         </div>
     )
 }

src/pages/discounts/components/ToggleStatusDiscount.tsx

@@ -0,0 +1,28 @@
+import { FC, useState } from 'react'
+import SwitchComponent from '../../../components/Switch'
+import { useToggleStatusDiscount } from '../hooks/useDiscountData'
+
+type Props = {
+    defaultActive: boolean,
+    id: string
+}
+
+const ToggleStatusDiscount: FC<Props> = (props: Props) => {
+
+    const [isActive, setIsActive] = useState<boolean>(props.defaultActive)
+    const toggleStatus = useToggleStatusDiscount()
+
+    const handleChange = (value: boolean) => {
+        setIsActive(value)
+        toggleStatus.mutate(props.id)
+    }
+
+    return (
+        <SwitchComponent
+            active={isActive}
+            onChange={handleChange}
+        />
+    )
+}
+
+export default ToggleStatusDiscount

src/pages/discounts/hooks/useDiscountData.ts

@@ -0,0 +1,23 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import * as api from "../service/DiscountService";
+import { CreateDiscountType } from "../types/DiscountTypes";
+
+export const useCreateDiscount = () => {
+  return useMutation({
+    mutationFn: (variables: CreateDiscountType) =>
+      api.createDiscount(variables),
+  });
+};
+
+export const useGetDiscounts = (search: string) => {
+  return useQuery({
+    queryKey: ["discounts", search],
+    queryFn: () => api.getDiscounts(search),
+  });
+};
+
+export const useToggleStatusDiscount = () => {
+  return useMutation({
+    mutationFn: (variables: string) => api.toggleStatusDiscount(variables),
+  });
+};

src/pages/discounts/service/DiscountService.ts

@@ -0,0 +1,17 @@
+import axios from "../../../config/axios";
+import { CreateDiscountType } from "../types/DiscountTypes";
+
+export const createDiscount = async (params: CreateDiscountType) => {
+  const { data } = await axios.post(`/discounts`, params);
+  return data;
+};
+
+export const getDiscounts = async (search: string) => {
+  const { data } = await axios.get(`/discounts?q=${search}`);
+  return data;
+};
+
+export const toggleStatusDiscount = async (id: string) => {
+  const { data } = await axios.patch(`/discounts/${id}/toggle`);
+  return data;
+};

src/pages/discounts/types/DiscountTypes.ts

@@ -0,0 +1,37 @@
+export type CreateDiscountType = {
+  title: string;
+  type: string;
+  calculationType: DiscountCalculationType;
+  amount: string | number;
+  startDate: string;
+  endDate: string;
+  subscriptionPlanIds: string[];
+  userIds: string[];
+};
+
+export enum DiscountType {
+  DIRECT = "DIRECT",
+  CODE = "CODE",
+}
+
+export enum DiscountCalculationType {
+  FIXED = "FIXED",
+  PERCENTAGE = "PERCENTAGE",
+}
+
+export type DiscountItemType = {
+  id: string;
+  title: string;
+  type: DiscountType;
+  calculationType: DiscountCalculationType;
+  amount: string | number;
+  startDate: string;
+  endDate: string;
+  subscriptionPlans: { id: string; createdAt: string; name: string }[];
+  userIds: string[];
+  code: string;
+  createdAt: string;
+  updatedAt: string;
+  isActive: boolean;
+  users: { firstName: string; lastName: string }[];
+};

src/pages/service/hooks/useServiceData.ts

@@ -13,12 +13,28 @@ export const useGetAllServices = (
   page: number,
   category: string,
   status: string,
-  isDanakSuggest: boolean
+  isDanakSuggest?: boolean,
+  limit?: number
 ) => {
   return useQuery({
-    queryKey: ["services", search, page, category, status, isDanakSuggest],
+    queryKey: [
+      "services",
+      search,
+      page,
+      category,
+      status,
+      isDanakSuggest,
+      limit,
+    ],
     queryFn: () =>
-      api.getAllServicess(search, page, category, status, isDanakSuggest),
+      api.getAllServicess(
+        search,
+        page,
+        category,
+        status,
+        isDanakSuggest,
+        limit
+      ),
   });
 };
 

src/pages/service/service/ServiceService.ts

@@ -12,7 +12,8 @@ export const getAllServicess = async (
   page: number,
   category: string,
   status: string,
-  isDanakSuggest: boolean
+  isDanakSuggest?: boolean,
+  limit?: number
 ) => {
   let query = `?page=${page}`;
   if (status) {
@@ -25,9 +26,14 @@ export const getAllServicess = async (
     query += `&q=${search}`;
   }
 
-  if (isDanakSuggest) {
+  if (isDanakSuggest !== undefined) {
     query += `&isDanakSuggest=${isDanakSuggest}`;
   }
+
+  if (limit) {
+    query += `&limit=${limit}`;
+  }
+
   const { data } = await axios.get(`/danak-services${query}`);
   return data;
 };