hamid zarghami
273 lines
13 KiB
TypeScript
273 lines
13 KiB
TypeScript
import { FC, Fragment, 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 } from 'iconsax-react'
|
|
import DatePickerComponent from '../../components/DatePicker'
|
|
import RadioGroup from '../../components/RadioGroup'
|
|
import { useFormik } from 'formik'
|
|
import { CreateDiscountType } from './types/DiscountTypes'
|
|
import * as Yup from 'yup'
|
|
import { useGetAllServices } from '../service/hooks/useServiceData'
|
|
import { ServiceItemType } from '../service/types/ServiceTypes'
|
|
import CheckBoxComponent from '../../components/CheckBoxComponent'
|
|
import { toast } from 'react-toastify'
|
|
import { useCreateDiscount } from './hooks/useDiscountData'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import { Pages } from '../../config/Pages'
|
|
import { ErrorType } from '../../helpers/types'
|
|
import moment from 'moment-jalaali'
|
|
|
|
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: {
|
|
endDate: '',
|
|
startDate: '',
|
|
title: '',
|
|
type: 1,
|
|
targetServices: [],
|
|
direct: true,
|
|
value: 0,
|
|
isActive: true,
|
|
userPhone: ''
|
|
},
|
|
validationSchema: Yup.object({
|
|
value: Yup.number().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) {
|
|
values.targetServices = serviceId
|
|
values.type = +values.type
|
|
if (values.userPhone === '') {
|
|
values.userPhone = undefined
|
|
}
|
|
const params: CreateDiscountType = {
|
|
...values,
|
|
startDate: moment(values.startDate, 'jYYYY-jMM-jDD').format('YYYY-MM-DD'),
|
|
endDate: moment(values.endDate, 'jYYYY-jMM-jDD').format('YYYY-MM-DD'),
|
|
value: +values.value
|
|
}
|
|
createDiscount.mutate(params, {
|
|
onSuccess: () => {
|
|
toast.success(t('success'))
|
|
navigate(Pages.discount.list)
|
|
},
|
|
onError: (error: ErrorType) => {
|
|
toast.error(error.response?.data?.error?.message[0])
|
|
}
|
|
})
|
|
},
|
|
})
|
|
return (
|
|
<div className='mt-4'>
|
|
<div className='flex justify-between items-center'>
|
|
<div>
|
|
{t('discount.new_discount')}
|
|
</div>
|
|
<Button
|
|
className='w-[172px]'
|
|
onClick={() => formik.handleSubmit()}
|
|
>
|
|
<div className='flex gap-2 items-center'>
|
|
<TickCircle size={20} color='white' />
|
|
<div>
|
|
{t('discount.submit')}
|
|
</div>
|
|
</div>
|
|
</Button>
|
|
</div>
|
|
<div className='flex gap-6 xl:mt-8 mt-4'>
|
|
<div className='flex-1 min-h-[calc(100vh-201px)] bg-white py-8 xl:px-10 px-4 rounded-3xl'>
|
|
<div className='mt-6'>
|
|
{t('discount.type')}
|
|
<div className='rowTwoInput mt-2'>
|
|
<RadioGroup
|
|
items={[
|
|
{
|
|
label: t('discount.direct_discount'),
|
|
value: true
|
|
},
|
|
{
|
|
label: t('discount.discount_code'),
|
|
value: false
|
|
}
|
|
]}
|
|
onChange={(value) => formik.setFieldValue('direct', value)}
|
|
selected={formik.values.direct}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className='mt-6 rowTwoInput'>
|
|
<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'>
|
|
<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'
|
|
/>
|
|
<p>
|
|
{t('discount.auto_generate_code')}
|
|
</p>
|
|
</button>
|
|
</div> */}
|
|
</div>
|
|
<div className='mt-6 rowTwoInput'>
|
|
<div className='w-full'>
|
|
{t('discount.price')}
|
|
<div className='rowTwoInput mt-2'>
|
|
<RadioGroup
|
|
items={[
|
|
{
|
|
label: t('discount.fixed_amount'),
|
|
value: '1'
|
|
},
|
|
{
|
|
label: t('discount.percent'),
|
|
value: '0'
|
|
}
|
|
]}
|
|
onChange={(value) => formik.setFieldValue('type', value)}
|
|
selected={formik.values.type.toString()}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<Input
|
|
label={t('discount.price_or_percent')}
|
|
placeholder={t('discount.enter_price_or_percent')}
|
|
{...formik.getFieldProps('value')}
|
|
error_text={formik.touched.value && formik.errors.value ? formik.errors.value : ''}
|
|
/>
|
|
</div>
|
|
<div className='mt-6 rowTwoInput'>
|
|
<DatePickerComponent
|
|
label={t('discount.startDate')}
|
|
onChange={(value) => formik.setFieldValue('startDate', value)}
|
|
placeholder=''
|
|
error_text={formik.touched.startDate && formik.errors.startDate ? formik.errors.startDate : ''}
|
|
/>
|
|
<DatePickerComponent
|
|
label={t('discount.endDate')}
|
|
onChange={(value) => formik.setFieldValue('endDate', value)}
|
|
placeholder=''
|
|
error_text={formik.touched.endDate && formik.errors.endDate ? formik.errors.endDate : ''}
|
|
/>
|
|
</div>
|
|
|
|
{
|
|
!formik.values.direct &&
|
|
<div className='mt-6 rowTwoInput'>
|
|
<Input
|
|
label='شماره مشتری (اختیاری)'
|
|
placeholder='شماره مشتری را وارد کنید'
|
|
{...formik.getFieldProps('userPhone')}
|
|
/>
|
|
</div>
|
|
}
|
|
</div>
|
|
<div className='min-h-[calc(100vh-201px)] bg-white w-sidebar xl:block hidden py-10 px-5 h-fit rounded-3xl'>
|
|
<div className='text-sm flex items-center justify-between'>
|
|
<p>
|
|
{'وضعیت تخفیف'}
|
|
</p>
|
|
<div className='flex gap-1 text-xs items-center text-description'>
|
|
<SwitchComponent
|
|
active={formik.values.isActive}
|
|
onChange={(value) => formik.setFieldValue('isActive', value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{
|
|
formik.values.direct &&
|
|
<Fragment>
|
|
<p className='mt-10 text-sm'>{t('discount.availabe_service')}</p>
|
|
<div className='p-2 text-sm border border-[##D0D0D0] rounded-lg mt-2'>
|
|
<Input
|
|
variant='search'
|
|
placeholder={t('header.search')}
|
|
/>
|
|
{
|
|
getServices.data?.data?.services?.map((item: ServiceItemType) => (
|
|
<div key={item.id} className='flex gap-2 mt-3 py-2 items-center'>
|
|
<div>
|
|
<CheckBoxComponent
|
|
checked={serviceId.includes(item.id)}
|
|
onChange={(e) => setServiceId(e.target.checked ? [...serviceId, item.id] : serviceId.filter(id => id !== item.id))}
|
|
/>
|
|
</div>
|
|
<div className='text-xs leading-5'>
|
|
{item.name}
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</Fragment>
|
|
}
|
|
|
|
{/* {
|
|
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>
|
|
<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>
|
|
}
|
|
|
|
{
|
|
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>
|
|
<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>
|
|
)
|
|
}
|
|
export default CreateDiscount |