structure
This commit is contained in:
hamid zarghami
@@ -0,0 +1,273 @@
|
||||
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
|
||||
Reference in New Issue
Block a user