hamid zarghami
468 lines
27 KiB
TypeScript
468 lines
27 KiB
TypeScript
import { ChangeEvent, FC, Fragment, useState } from 'react'
|
||
import { useTranslation } from 'react-i18next'
|
||
import Button from '../../components/Button'
|
||
import { Add, TickCircle, TickSquare, Trash } from 'iconsax-react'
|
||
import Select from '../../components/Select'
|
||
import Input from '../../components/Input'
|
||
import { CreateReceiptType, ReceiptCreateItemsType } from './types/ReceiptTypes'
|
||
import { useFormik } from 'formik'
|
||
import * as Yup from 'yup'
|
||
import { toast } from 'react-toastify'
|
||
import PageLoading from '../../components/PageLoading'
|
||
import { useCreateInvoice } from './hooks/useReceiptData'
|
||
import { useNavigate } from 'react-router-dom'
|
||
import { Pages } from '../../config/Pages'
|
||
import { ErrorType } from '../../helpers/types'
|
||
import { ReceiptTypeEnum } from './enum/ReceipEnum'
|
||
import SwitchComponent from '../../components/Switch'
|
||
import { useGetCompanies } from '../company/hooks/useCompanyData'
|
||
import { CompanyItemType } from '../company/types/CompanyTypes'
|
||
import moment from 'moment-jalaali'
|
||
const CreateReceipt: FC = () => {
|
||
|
||
const navigate = useNavigate()
|
||
const { t } = useTranslation('global')
|
||
const [items, setItems] = useState<ReceiptCreateItemsType[]>([])
|
||
const [customer, setCustomer] = useState<CompanyItemType>()
|
||
const [isRecurring, setIsRecurring] = useState<boolean>(false)
|
||
const [type, setType] = useState<ReceiptTypeEnum>(ReceiptTypeEnum.DAILY)
|
||
const [maxRecurringCycles, setMaxRecurringCycles] = useState<number>(0)
|
||
const getCustomers = useGetCompanies(1)
|
||
const createInvoice = useCreateInvoice()
|
||
|
||
const formik = useFormik<ReceiptCreateItemsType>({
|
||
initialValues: {
|
||
name: '',
|
||
count: '',
|
||
unitPrice: '',
|
||
discount: ''
|
||
},
|
||
validationSchema: Yup.object({
|
||
name: Yup.string().required(t('errors.required')),
|
||
count: Yup.string().required(t('errors.required')),
|
||
unitPrice: Yup.string().required(t('errors.required')),
|
||
}),
|
||
onSubmit: (values) => {
|
||
setItems((prev) => [...prev, {
|
||
count: +values.count,
|
||
discount: +values.discount,
|
||
name: values.name,
|
||
unitPrice: +values.unitPrice
|
||
}])
|
||
formik.resetForm()
|
||
}
|
||
})
|
||
|
||
const handleChangeCustomer = (e: ChangeEvent<HTMLSelectElement>) => {
|
||
const value = e.target.value
|
||
const customer = getCustomers.data?.data?.companies?.find((item: CompanyItemType) => item.id === value)
|
||
setCustomer(customer)
|
||
}
|
||
|
||
const handleSubmit = () => {
|
||
if (customer) {
|
||
const params: CreateReceiptType = {
|
||
companyId: customer?.id,
|
||
items: items,
|
||
isRecurring: isRecurring,
|
||
recurringPeriod: isRecurring ? +type : undefined,
|
||
maxRecurringCycles: isRecurring ? maxRecurringCycles : undefined
|
||
}
|
||
|
||
createInvoice.mutate(params, {
|
||
onSuccess: () => {
|
||
toast.success(t('success'))
|
||
navigate(Pages.receipts.index)
|
||
},
|
||
onError(error: ErrorType) {
|
||
toast.error(error.response?.data?.error.message[0])
|
||
},
|
||
})
|
||
}
|
||
}
|
||
|
||
const handleRemove = (index: number) => {
|
||
setItems((prev) => prev.filter((_, i) => i !== index))
|
||
}
|
||
|
||
|
||
return (
|
||
<div className='mt-4'>
|
||
{
|
||
getCustomers.isPending ?
|
||
<PageLoading />
|
||
:
|
||
<Fragment>
|
||
<div className='flex justify-between items-center'>
|
||
<div>
|
||
{t('receip.add_receip')}
|
||
</div>
|
||
<div>
|
||
<Button
|
||
className='px-5'
|
||
onClick={handleSubmit}
|
||
isLoading={createInvoice.isPending}
|
||
>
|
||
<div className='flex gap-2 items-center'>
|
||
<TickCircle size={20} color='white' />
|
||
<div>
|
||
{t('receip.submit_receip')}
|
||
</div>
|
||
</div>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='flex gap-6 xl:mt-8 mt-4'>
|
||
<div className='flex-1 bg-white py-8 xl:px-10 px-4 rounded-3xl'>
|
||
{/* <div>
|
||
{t('receip.customer_information')}
|
||
</div> */}
|
||
|
||
<div className='mt-8'>
|
||
<div className='w-full xl:w-1/2'>
|
||
<Select
|
||
label={t('company.select_company')}
|
||
placeholder={t('select')}
|
||
items={getCustomers.data?.data?.companies?.map((item: CompanyItemType) => {
|
||
return {
|
||
label: item.name,
|
||
value: item.id
|
||
}
|
||
})}
|
||
onChange={handleChangeCustomer}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{
|
||
customer &&
|
||
<div className='mt-10 bg-[#F6F7FB] p-8 rounded-3xl text-sm'>
|
||
<div className='flex justify-between items-center border-b border-border border-dashed pb-7'>
|
||
<div className='flex items-center gap-2'>
|
||
<div className='text-description'>{t('company.company_name')}</div>
|
||
<div>{customer.name}</div>
|
||
</div>
|
||
<div className='flex items-center gap-2'>
|
||
<div className='text-description'>{t('company.ceo_name')}</div>
|
||
<div>{customer.user?.firstName + ' ' + customer.user?.lastName}</div>
|
||
</div>
|
||
<div className='flex items-center gap-2'>
|
||
<div className='text-description'>{t('company.register_date')}</div>
|
||
<div>{moment(customer.createdAt).format('jYYYY/jMM/jDD')}</div>
|
||
</div>
|
||
</div>
|
||
<div className='flex justify-between items-center mt-7'>
|
||
<div className='flex items-center gap-2 flex-1'>
|
||
<div className='text-description'>{t('company.industry')}</div>
|
||
<div>{customer.industry?.title}</div>
|
||
</div>
|
||
</div>
|
||
{/* <div className='flex justify-between items-center mt-7'>
|
||
<div className='flex items-center gap-2 flex-1'>
|
||
<div className='text-description'>{t('receip.state')}</div>
|
||
<div>{customer?.realUser?.address?.city?.province?.name || customer?.legalUser?.address?.city?.province?.name}</div>
|
||
</div>
|
||
<div className='flex items-center gap-2 flex-1'>
|
||
<div className='text-description'>{t('receip.city')}</div>
|
||
<div>{customer?.realUser?.address?.city?.name || customer?.legalUser?.address?.city?.name}</div>
|
||
</div>
|
||
<div className='flex items-center gap-2 flex-1'>
|
||
<div className='text-description'>{t('receip.address')}</div>
|
||
<div>{customer?.realUser?.address?.fullAddress || customer?.legalUser?.address?.fullAddress}</div>
|
||
</div>
|
||
</div> */}
|
||
</div>
|
||
}
|
||
|
||
<div className='mt-10'>
|
||
<SwitchComponent
|
||
label={t('receip.recurring')}
|
||
active={isRecurring}
|
||
onChange={(value) => setIsRecurring(value)}
|
||
/>
|
||
</div>
|
||
|
||
{
|
||
isRecurring &&
|
||
<div className='mt-10'>
|
||
<div>
|
||
{t('receip.select_type')}
|
||
</div>
|
||
|
||
<div className='mt-4 rowTwoInput'>
|
||
<Select
|
||
label={t('select')}
|
||
items={Object.values(ReceiptTypeEnum).map((item) => {
|
||
return {
|
||
label: t(`receip.${item}`),
|
||
value: item
|
||
}
|
||
})}
|
||
onChange={(e) => setType(e.target.value as ReceiptTypeEnum)}
|
||
/>
|
||
|
||
<Input
|
||
label={t('receip.maxRecurringCycles')}
|
||
name='maxRecurringCycles'
|
||
value={maxRecurringCycles}
|
||
onChange={(e) => setMaxRecurringCycles(+e.target.value)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
}
|
||
|
||
<div className='mt-10'>
|
||
<div>{t('receip.receipt_information')}</div>
|
||
</div>
|
||
|
||
<div className='mt-8 border-b border-dashed border-border pb-7 flex items-end justify-between text-xs text-description'>
|
||
<div className='flex flex-col gap-2 items-center'>
|
||
<div>
|
||
{t('receip.number')}
|
||
</div>
|
||
<div className='size-10 bg-[#EBEDF5] rounded-xl flex justify-center items-center'>
|
||
{items.length + 1}
|
||
</div>
|
||
</div>
|
||
|
||
<div className='flex flex-col gap-2 items-center'>
|
||
<div>
|
||
{t('receip.product_name')}
|
||
</div>
|
||
<Input
|
||
className='text-center'
|
||
name='name'
|
||
value={formik.values.name}
|
||
onChange={formik.handleChange}
|
||
/>
|
||
</div>
|
||
|
||
<div className='flex flex-col gap-2 items-center'>
|
||
<div>
|
||
{t('receip.count')}
|
||
</div>
|
||
<Input
|
||
type='number'
|
||
className='w-16 text-center'
|
||
name='count'
|
||
value={formik.values.count}
|
||
onChange={formik.handleChange}
|
||
/>
|
||
</div>
|
||
|
||
<div className='flex flex-col gap-2 items-center'>
|
||
<div>
|
||
{t('receip.unit_amount')}
|
||
</div>
|
||
<Input
|
||
className='text-center'
|
||
name='unitPrice'
|
||
value={formik.values.unitPrice}
|
||
onChange={(e) => formik.setFieldValue('unitPrice', e.target.value)}
|
||
seprator
|
||
/>
|
||
</div>
|
||
|
||
<div className='flex flex-col gap-2 items-center'>
|
||
<div>
|
||
{t('receip.discount')}
|
||
</div>
|
||
<Input
|
||
type='number'
|
||
className='w-16 text-center'
|
||
name='discount'
|
||
value={formik.values.discount}
|
||
onChange={formik.handleChange}
|
||
/>
|
||
</div>
|
||
|
||
<div className='flex flex-col gap-2 items-center'>
|
||
<div>
|
||
{t('receip.total_amount')}
|
||
</div>
|
||
<Input
|
||
className='text-center bg-[#EBEDF5]'
|
||
readOnly
|
||
/>
|
||
</div>
|
||
|
||
<div onClick={() => {
|
||
if (formik.errors.name || formik.errors.count || formik.errors.unitPrice || formik.errors.discount) {
|
||
toast.error(t('receip.error_empty'))
|
||
} else {
|
||
formik.handleSubmit()
|
||
}
|
||
}} className='size-10 border border-border rounded-xl flex justify-center items-center'>
|
||
<Add size={20} color='black' />
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
{
|
||
items.map((item, index: number) => {
|
||
return (
|
||
<div key={item.name} className='mt-6 flex items-end justify-between text-xs text-description'>
|
||
<div className='flex flex-col gap-2 items-center'>
|
||
{
|
||
index === 0 &&
|
||
<div>
|
||
{t('receip.number')}
|
||
</div>
|
||
}
|
||
<div className='size-10 bg-[#EBEDF5] rounded-xl flex justify-center items-center'>
|
||
{index + 1}
|
||
</div>
|
||
</div>
|
||
<div className='flex flex-col gap-2 items-center'>
|
||
{
|
||
index === 0 &&
|
||
<div>
|
||
{t('receip.product_name')}
|
||
</div>
|
||
}
|
||
<Input
|
||
className='text-center'
|
||
name='name'
|
||
readOnly
|
||
value={item.name}
|
||
/>
|
||
</div>
|
||
|
||
<div className='flex flex-col gap-2 items-center'>
|
||
{
|
||
index === 0 &&
|
||
<div>
|
||
{t('receip.count')}
|
||
</div>
|
||
}
|
||
<Input
|
||
type='number'
|
||
className='w-16 text-center'
|
||
name='count'
|
||
readOnly
|
||
value={item.count}
|
||
/>
|
||
</div>
|
||
|
||
<div className='flex flex-col gap-2 items-center'>
|
||
{
|
||
index === 0 &&
|
||
<div>
|
||
{t('receip.unit_amount')}
|
||
</div>
|
||
}
|
||
<Input
|
||
className='text-center'
|
||
name='unitPrice'
|
||
readOnly
|
||
value={item.unitPrice}
|
||
seprator
|
||
/>
|
||
</div>
|
||
|
||
<div className='flex flex-col gap-2 items-center'>
|
||
{
|
||
index === 0 &&
|
||
<div>
|
||
{t('receip.discount')}
|
||
</div>
|
||
}
|
||
<Input
|
||
type='number'
|
||
className='w-16 text-center'
|
||
name='discount'
|
||
readOnly
|
||
value={item.discount}
|
||
/>
|
||
</div>
|
||
|
||
<div className='flex flex-col gap-2 items-center'>
|
||
{
|
||
index === 0 &&
|
||
<div>
|
||
{t('receip.total_amount')}
|
||
</div>
|
||
}
|
||
<Input
|
||
className='text-center bg-[#EBEDF5]'
|
||
readOnly
|
||
value={((Number(item.unitPrice) || 0) * (Number(item.count) || 0) - (Number(item.unitPrice) || 0) * (Number(item.count) || 0) * (Number(item.discount) / 100 || 0)).toFixed(1)}
|
||
seprator
|
||
/>
|
||
</div>
|
||
|
||
<div onClick={() => handleRemove(index)} className='size-10 border border-border rounded-xl flex justify-center items-center'>
|
||
<Trash size={20} color='black' />
|
||
</div>
|
||
</div>
|
||
)
|
||
})
|
||
}
|
||
|
||
|
||
|
||
<div className='mt-8 flex flex-col gap-4 items-end'>
|
||
<div className='xl:w-1/2 h-12 w-full rounded-xl flex px-4 bg-[#EBEDF5] text-sm text-description justify-between items-center'>
|
||
<div>
|
||
{t('receip.tax')}
|
||
</div>
|
||
<div className='text-black'>
|
||
{((items.reduce((acc, item) => acc + (Number(item.unitPrice) || 0) * (Number(item.count) || 0) - (Number(item.unitPrice) || 0) * (Number(item.count) || 0) * (Number(item.discount) / 100 || 0), 0)) * 0.10).toFixed(1)}
|
||
</div>
|
||
</div>
|
||
<div className='xl:w-1/2 h-12 w-full rounded-xl flex px-4 bg-[#EBEDF5] text-sm text-description justify-between items-center'>
|
||
<div>
|
||
{t('receip.total')}
|
||
</div>
|
||
<div className='text-black'>
|
||
{(
|
||
items.reduce((acc, item) => acc + (Number(item.unitPrice) || 0) * (Number(item.count) || 0) - (Number(item.unitPrice) || 0) * (Number(item.count) || 0) * (Number(item.discount) / 100 || 0), 0) * 1.10
|
||
).toFixed(1)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div className='bg-white w-sidebar 3xl:block hidden py-10 px-5 h-fit rounded-3xl'>
|
||
<div className='text-sm'>
|
||
{t('ticket.title_hint')}
|
||
</div>
|
||
|
||
<div className='mt-6'>
|
||
<div className='flex items-start gap-2 border-b pb-5'>
|
||
<div>
|
||
<TickSquare size={20} color='black' variant='Bold' />
|
||
</div>
|
||
<div className='text-description text-xs leading-5'>
|
||
سوالات - مشکلاتی که به یک موضوع مربوط میشوند را در یک درخواست پشتیبانی پیگیر باشید و چند درخواست برای یک موضوع باز نکنید.
|
||
</div>
|
||
</div>
|
||
<div className='flex items-start gap-2 mt-6 border-b pb-5'>
|
||
<div>
|
||
<TickSquare size={20} color='black' variant='Bold' />
|
||
</div>
|
||
<div className='text-description text-xs leading-5'>
|
||
لطفاً برای بررسی و رفع مشکلات احتمالی صبور باشید بررسی و رفع مشکلات در برخی موارد زمان گیر است.
|
||
</div>
|
||
</div>
|
||
<div className='flex items-start gap-2 mt-6'>
|
||
<div>
|
||
<TickSquare size={20} color='black' variant='Bold' />
|
||
</div>
|
||
<div className='text-description text-xs leading-5'>
|
||
پاسخگویی 24 ساعته تلفنی را تنها از میهن وب هاست می توانید انتظار داشته باشید .بخش پشتیبانی در هر ساعتی حتی در روز های تعطیل آماده پیگیری سریع مشکلات کاربران است.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Fragment>
|
||
}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default CreateReceipt |