hamid zarghami
@@ -2,9 +2,7 @@ import axios from "../../../config/axios";
|
||||
import { CreateCustomerType } from "../types/CustomerTypes";
|
||||
|
||||
export const getCustomers = async (page: number, limit: number, withoutPaginate?: boolean, search?: string) => {
|
||||
const { data } = await axios.get(
|
||||
`/users/customers?page=${page}&limit=${limit}&paginate=${withoutPaginate ? "0" : "1"}&q=${encodeURIComponent(search ?? "")}`,
|
||||
);
|
||||
const { data } = await axios.get(`/users/customers?page=${page}&limit=${limit}&paginate=${withoutPaginate ? "0" : "1"}&q=${encodeURIComponent(search ?? "")}`);
|
||||
return data;
|
||||
};
|
||||
|
||||
|
||||
+413
-448
@@ -1,480 +1,445 @@
|
||||
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 '../../components/Toast';
|
||||
import { useGetCustomers } from '../customer/hooks/useCustomerData'
|
||||
import { CustomerItemType } from '../customer/types/CustomerTypes'
|
||||
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 { RecurringPeriodEnum } from './enum/ReceipEnum'
|
||||
import SwitchComponent from '../../components/Switch'
|
||||
import { useFormik } from "formik";
|
||||
import { Add, TickCircle, TickSquare, Trash } from "iconsax-react";
|
||||
import { ChangeEvent, FC, Fragment, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import * as Yup from "yup";
|
||||
import Button from "../../components/Button";
|
||||
import Input from "../../components/Input";
|
||||
import PageLoading from "../../components/PageLoading";
|
||||
import Select from "../../components/Select";
|
||||
import SwitchComponent from "../../components/Switch";
|
||||
import { toast } from "../../components/Toast";
|
||||
import { Pages } from "../../config/Pages";
|
||||
import { ErrorType } from "../../helpers/types";
|
||||
import { useGetCustomers } from "../customer/hooks/useCustomerData";
|
||||
import { CustomerItemType } from "../customer/types/CustomerTypes";
|
||||
import { RecurringPeriodEnum } from "./enum/ReceipEnum";
|
||||
import { useCreateInvoice } from "./hooks/useReceiptData";
|
||||
import { CreateReceiptType, ReceiptCreateItemsType } from "./types/ReceiptTypes";
|
||||
const CreateReceipt: FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const { t } = useTranslation("global");
|
||||
const [items, setItems] = useState<ReceiptCreateItemsType[]>([]);
|
||||
const [customer, setCustomer] = useState<CustomerItemType>();
|
||||
const [isRecurring, setIsRecurring] = useState<boolean>(false);
|
||||
const [type, setType] = useState<RecurringPeriodEnum>(RecurringPeriodEnum.WEEKLY);
|
||||
const [maxRecurringCycles, setMaxRecurringCycles] = useState<number>(0);
|
||||
const getCustomers = useGetCustomers(1, 50, true);
|
||||
const createInvoice = useCreateInvoice();
|
||||
|
||||
const navigate = useNavigate()
|
||||
const { t } = useTranslation('global')
|
||||
const [items, setItems] = useState<ReceiptCreateItemsType[]>([])
|
||||
const [customer, setCustomer] = useState<CustomerItemType>()
|
||||
const [isRecurring, setIsRecurring] = useState<boolean>(false)
|
||||
const [type, setType] = useState<RecurringPeriodEnum>(RecurringPeriodEnum.WEEKLY)
|
||||
const [maxRecurringCycles, setMaxRecurringCycles] = useState<number>(0)
|
||||
const getCustomers = useGetCustomers(1, true)
|
||||
const createInvoice = useCreateInvoice()
|
||||
|
||||
const formik = useFormik<ReceiptCreateItemsType>({
|
||||
initialValues: {
|
||||
name: '',
|
||||
count: '',
|
||||
unitPrice: '',
|
||||
discount: ''
|
||||
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,
|
||||
},
|
||||
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()
|
||||
}
|
||||
})
|
||||
]);
|
||||
formik.resetForm();
|
||||
},
|
||||
});
|
||||
|
||||
const handleChangeCustomer = (e: ChangeEvent<HTMLSelectElement>) => {
|
||||
const value = e.target.value
|
||||
const customer = getCustomers.data?.data?.customers?.find((item: CustomerItemType) => item.id === value)
|
||||
setCustomer(customer)
|
||||
const handleChangeCustomer = (e: ChangeEvent<HTMLSelectElement>) => {
|
||||
const value = e.target.value;
|
||||
const customer = getCustomers.data?.data?.customers?.find((item: CustomerItemType) => item.id === value);
|
||||
setCustomer(customer);
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (customer) {
|
||||
const params: CreateReceiptType = {
|
||||
userId: customer?.id,
|
||||
items: items,
|
||||
isRecurring: isRecurring,
|
||||
recurringPeriod: isRecurring ? +type : undefined,
|
||||
maxRecurringCycles: isRecurring ? maxRecurringCycles : undefined,
|
||||
};
|
||||
|
||||
createInvoice.mutate(params, {
|
||||
onSuccess: () => {
|
||||
toast(t("success"), "success");
|
||||
navigate(Pages.receipts.index);
|
||||
},
|
||||
onError(error: ErrorType) {
|
||||
toast(error.response?.data?.error.message[0], "error");
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (customer) {
|
||||
const params: CreateReceiptType = {
|
||||
userId: customer?.id,
|
||||
items: items,
|
||||
isRecurring: isRecurring,
|
||||
recurringPeriod: isRecurring ? +type : undefined,
|
||||
maxRecurringCycles: isRecurring ? maxRecurringCycles : undefined
|
||||
}
|
||||
const handleRemove = (index: number) => {
|
||||
setItems((prev) => prev.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
createInvoice.mutate(params, {
|
||||
onSuccess: () => {
|
||||
toast(t('success'), 'success')
|
||||
navigate(Pages.receipts.index)
|
||||
},
|
||||
onError(error: ErrorType) {
|
||||
toast(error.response?.data?.error.message[0], 'error')
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
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>
|
||||
|
||||
const handleRemove = (index: number) => {
|
||||
setItems((prev) => prev.filter((_, i) => i !== index))
|
||||
}
|
||||
<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("receip.customer")}
|
||||
placeholder={t("select")}
|
||||
items={getCustomers.data?.data?.customers?.map((item: CustomerItemType) => {
|
||||
return {
|
||||
label: item.firstName + " " + item.lastName,
|
||||
value: item.id,
|
||||
};
|
||||
})}
|
||||
onChange={handleChangeCustomer}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
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>
|
||||
{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("receip.type_person")}</div>
|
||||
<div>{customer.legalUser ? "حقوقی" : "حقیقی"}</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="text-description">{t("receip.representativeـname")}</div>
|
||||
<div>{customer.firstName + " " + customer.lastName}</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="text-description">{t("receip.company_name")}</div>
|
||||
<div>{customer?.legalUser?.registrationName}</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="text-description">{t("receip.registration_number")}</div>
|
||||
<div>{customer?.legalUser?.registrationCode}</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.tel_company")}</div>
|
||||
<div>{customer?.realUser?.phone || customer?.legalUser?.phone}</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-1">
|
||||
<div className="text-description">{t("receip.national_code")}</div>
|
||||
<div>{customer.nationalCode}</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-1">
|
||||
<div className="text-description">{t("receip.postal_code")}</div>
|
||||
<div>{customer?.realUser?.address?.postalCode || customer?.legalUser?.address?.postalCode}</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='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-10">
|
||||
<SwitchComponent
|
||||
label={t("receip.recurring")}
|
||||
active={isRecurring}
|
||||
onChange={(value) => setIsRecurring(value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-8'>
|
||||
<div className='w-full xl:w-1/2'>
|
||||
<Select
|
||||
label={t('receip.customer')}
|
||||
placeholder={t('select')}
|
||||
items={getCustomers.data?.data?.customers?.map((item: CustomerItemType) => {
|
||||
return {
|
||||
label: item.firstName + ' ' + item.lastName,
|
||||
value: item.id
|
||||
}
|
||||
})}
|
||||
onChange={handleChangeCustomer}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{isRecurring && (
|
||||
<div className="mt-10">
|
||||
<div>{t("receip.select_type")}</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('receip.type_person')}</div>
|
||||
<div>{customer.legalUser ? 'حقوقی' : 'حقیقی'}</div>
|
||||
</div>
|
||||
<div className='flex items-center gap-2'>
|
||||
<div className='text-description'>{t('receip.representativeـname')}</div>
|
||||
<div>{customer.firstName + ' ' + customer.lastName}</div>
|
||||
</div>
|
||||
<div className='flex items-center gap-2'>
|
||||
<div className='text-description'>{t('receip.company_name')}</div>
|
||||
<div>{customer?.legalUser?.registrationName}</div>
|
||||
</div>
|
||||
<div className='flex items-center gap-2'>
|
||||
<div className='text-description'>{t('receip.registration_number')}</div>
|
||||
<div>{customer?.legalUser?.registrationCode}</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.tel_company')}</div>
|
||||
<div>{customer?.realUser?.phone || customer?.legalUser?.phone}</div>
|
||||
</div>
|
||||
<div className='flex items-center gap-2 flex-1'>
|
||||
<div className='text-description'>{t('receip.national_code')}</div>
|
||||
<div>{customer.nationalCode}</div>
|
||||
</div>
|
||||
<div className='flex items-center gap-2 flex-1'>
|
||||
<div className='text-description'>{t('receip.postal_code')}</div>
|
||||
<div>{customer?.realUser?.address?.postalCode || customer?.legalUser?.address?.postalCode}</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-4 rowTwoInput">
|
||||
<Select
|
||||
label={t("select")}
|
||||
items={[
|
||||
{ label: t("receip.WEEKLY"), value: RecurringPeriodEnum.WEEKLY.toString() },
|
||||
{ label: t("receip.MONTHLY"), value: RecurringPeriodEnum.MONTHLY.toString() },
|
||||
{ label: t("receip.QUARTERLY"), value: RecurringPeriodEnum.QUARTERLY.toString() },
|
||||
{ label: t("receip.SEMIANNUALLY"), value: RecurringPeriodEnum.SEMIANNUALLY.toString() },
|
||||
{ label: t("receip.ANNUALLY"), value: RecurringPeriodEnum.ANNUALLY.toString() },
|
||||
]}
|
||||
onChange={(e) => setType(e.target.value as unknown as RecurringPeriodEnum)}
|
||||
/>
|
||||
|
||||
<div className='mt-10'>
|
||||
<SwitchComponent
|
||||
label={t('receip.recurring')}
|
||||
active={isRecurring}
|
||||
onChange={(value) => setIsRecurring(value)}
|
||||
/>
|
||||
</div>
|
||||
<Input
|
||||
label={t("receip.maxRecurringCycles")}
|
||||
name="maxRecurringCycles"
|
||||
value={maxRecurringCycles}
|
||||
onChange={(e) => setMaxRecurringCycles(+e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{
|
||||
isRecurring &&
|
||||
<div className='mt-10'>
|
||||
<div>
|
||||
{t('receip.select_type')}
|
||||
</div>
|
||||
<div className="mt-10">
|
||||
<div>{t("receip.receipt_information")}</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-4 rowTwoInput'>
|
||||
<Select
|
||||
label={t('select')}
|
||||
items={[
|
||||
{ label: t('receip.WEEKLY'), value: RecurringPeriodEnum.WEEKLY.toString() },
|
||||
{ label: t('receip.MONTHLY'), value: RecurringPeriodEnum.MONTHLY.toString() },
|
||||
{ label: t('receip.QUARTERLY'), value: RecurringPeriodEnum.QUARTERLY.toString() },
|
||||
{ label: t('receip.SEMIANNUALLY'), value: RecurringPeriodEnum.SEMIANNUALLY.toString() },
|
||||
{ label: t('receip.ANNUALLY'), value: RecurringPeriodEnum.ANNUALLY.toString() }
|
||||
]}
|
||||
onChange={(e) => setType(e.target.value as unknown as RecurringPeriodEnum)}
|
||||
/>
|
||||
<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>
|
||||
|
||||
<Input
|
||||
label={t('receip.maxRecurringCycles')}
|
||||
name='maxRecurringCycles'
|
||||
value={maxRecurringCycles}
|
||||
onChange={(e) => setMaxRecurringCycles(+e.target.value)}
|
||||
/>
|
||||
</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='mt-10'>
|
||||
<div>{t('receip.receipt_information')}</div>
|
||||
</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='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.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.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.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.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.total_amount")}</div>
|
||||
<Input
|
||||
className="text-center bg-[#EBEDF5]"
|
||||
readOnly
|
||||
/>
|
||||
</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
|
||||
onClick={() => {
|
||||
if (formik.errors.name || formik.errors.count || formik.errors.unitPrice || formik.errors.discount) {
|
||||
toast(t("receip.error_empty"), "error");
|
||||
} else {
|
||||
formik.handleSubmit();
|
||||
}
|
||||
}}
|
||||
className="size-10 border border-border rounded-xl flex justify-center items-center"
|
||||
>
|
||||
<Add
|
||||
size={20}
|
||||
color="black"
|
||||
/>
|
||||
</div>
|
||||
</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>
|
||||
{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'>
|
||||
<div>
|
||||
{t('receip.total_amount')}
|
||||
</div>
|
||||
<Input
|
||||
className='text-center bg-[#EBEDF5]'
|
||||
readOnly
|
||||
/>
|
||||
</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 onClick={() => {
|
||||
if (formik.errors.name || formik.errors.count || formik.errors.unitPrice || formik.errors.discount) {
|
||||
toast(t('receip.error_empty'), 'error')
|
||||
} else {
|
||||
formik.handleSubmit()
|
||||
}
|
||||
}} className='size-10 border border-border rounded-xl flex justify-center items-center'>
|
||||
<Add size={20} color='black' />
|
||||
</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>
|
||||
<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>
|
||||
|
||||
{
|
||||
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
|
||||
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='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="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.1
|
||||
).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.1
|
||||
).toFixed(1)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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="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='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="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>
|
||||
);
|
||||
};
|
||||
|
||||
<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
|
||||
export default CreateReceipt;
|
||||
|
||||
+505
-538
File diff suppressed because it is too large
Load Diff
+220
-227
@@ -1,244 +1,237 @@
|
||||
import { FC, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Input from '../../components/Input'
|
||||
import Select from '../../components/Select'
|
||||
import Textarea from '../../components/Textarea'
|
||||
import UploadBox from '../../components/UploadBox'
|
||||
import Button from '../../components/Button'
|
||||
import { TickCircle, TickSquare } from 'iconsax-react'
|
||||
import { useCreateTicket, useGetCategories } from './hooks/useTicketData'
|
||||
import { useGetProfile } from '../profile/hooks/useProfileData'
|
||||
import PageLoading from '../../components/PageLoading'
|
||||
import { useFormik } from 'formik'
|
||||
import * as Yup from 'yup'
|
||||
import { ErrorType } from '../../helpers/types'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { Pages } from '../../config/Pages'
|
||||
import { CreateTicketAdminType } from './types/TicketTypes'
|
||||
import { toast } from '../../components/Toast';
|
||||
import { useMultiUpload } from '../service/hooks/useServiceData'
|
||||
import { useGetCustomers } from '../customer/hooks/useCustomerData'
|
||||
import { CustomerItemType } from '../customer/types/CustomerTypes'
|
||||
import { useFormik } from "formik";
|
||||
import { TickCircle, TickSquare } from "iconsax-react";
|
||||
import { FC, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import * as Yup from "yup";
|
||||
import Button from "../../components/Button";
|
||||
import Input from "../../components/Input";
|
||||
import PageLoading from "../../components/PageLoading";
|
||||
import Select from "../../components/Select";
|
||||
import Textarea from "../../components/Textarea";
|
||||
import { toast } from "../../components/Toast";
|
||||
import UploadBox from "../../components/UploadBox";
|
||||
import { Pages } from "../../config/Pages";
|
||||
import { ErrorType } from "../../helpers/types";
|
||||
import { useGetCustomers } from "../customer/hooks/useCustomerData";
|
||||
import { CustomerItemType } from "../customer/types/CustomerTypes";
|
||||
import { useGetProfile } from "../profile/hooks/useProfileData";
|
||||
import { useMultiUpload } from "../service/hooks/useServiceData";
|
||||
import { useCreateTicket, useGetCategories } from "./hooks/useTicketData";
|
||||
import { CreateTicketAdminType } from "./types/TicketTypes";
|
||||
|
||||
const CreateTicket: FC = () => {
|
||||
const { t } = useTranslation('global')
|
||||
const navigate = useNavigate()
|
||||
const [files, setFiles] = useState<File[]>([])
|
||||
const getProfile = useGetProfile()
|
||||
const getCategories = useGetCategories()
|
||||
const multiUpload = useMultiUpload()
|
||||
const createTicket = useCreateTicket()
|
||||
const getCustomers = useGetCustomers(1, true)
|
||||
const { t } = useTranslation("global");
|
||||
const navigate = useNavigate();
|
||||
const [files, setFiles] = useState<File[]>([]);
|
||||
const getProfile = useGetProfile();
|
||||
const getCategories = useGetCategories();
|
||||
const multiUpload = useMultiUpload();
|
||||
const createTicket = useCreateTicket();
|
||||
const getCustomers = useGetCustomers(1, 50, true);
|
||||
|
||||
const formik = useFormik<CreateTicketAdminType>({
|
||||
initialValues: {
|
||||
subject: "",
|
||||
message: "",
|
||||
categoryId: "",
|
||||
priority: "LOW",
|
||||
attachmentUrls: [],
|
||||
userId: "",
|
||||
},
|
||||
validationSchema: Yup.object({
|
||||
subject: Yup.string().required(t("errors.required")),
|
||||
message: Yup.string().required(t("errors.required")),
|
||||
categoryId: Yup.string().required(t("errors.required")),
|
||||
priority: Yup.string().required(t("errors.required")),
|
||||
}),
|
||||
onSubmit: async (values) => {
|
||||
if (files.length > 0) {
|
||||
const images = new FormData();
|
||||
files.forEach((file) => {
|
||||
images.append("files", file);
|
||||
});
|
||||
await multiUpload.mutateAsync(images, {
|
||||
onSuccess: async (data) => {
|
||||
values.attachmentUrls = await data.data.map((item: { url: string }) => item?.url);
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast(error.response?.data?.error?.message[0], "error");
|
||||
},
|
||||
});
|
||||
} else {
|
||||
delete values.attachmentUrls;
|
||||
}
|
||||
|
||||
const formik = useFormik<CreateTicketAdminType>({
|
||||
initialValues: {
|
||||
subject: '',
|
||||
message: '',
|
||||
categoryId: '',
|
||||
priority: 'LOW',
|
||||
attachmentUrls: [],
|
||||
userId: ''
|
||||
if (values.danakServiceId === "") {
|
||||
delete values.danakServiceId;
|
||||
}
|
||||
|
||||
createTicket.mutate(values, {
|
||||
onSuccess: (data) => {
|
||||
toast(t("success"), "success");
|
||||
formik.resetForm();
|
||||
navigate(Pages.ticket.detail + data.data?.ticketId);
|
||||
},
|
||||
validationSchema: Yup.object({
|
||||
subject: Yup.string().required(t('errors.required')),
|
||||
message: Yup.string().required(t('errors.required')),
|
||||
categoryId: Yup.string().required(t('errors.required')),
|
||||
priority: Yup.string().required(t('errors.required')),
|
||||
}),
|
||||
onSubmit: async (values) => {
|
||||
if (files.length > 0) {
|
||||
const images = new FormData()
|
||||
files.forEach(file => {
|
||||
images.append('files', file)
|
||||
})
|
||||
await multiUpload.mutateAsync(images, {
|
||||
onSuccess: async (data) => {
|
||||
values.attachmentUrls = await data.data.map((item: { url: string }) => item?.url)
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast(error.response?.data?.error?.message[0], 'error')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
delete values.attachmentUrls
|
||||
}
|
||||
onError: (error: ErrorType) => {
|
||||
toast(error.response?.data?.error?.message[0], "error");
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
if (values.danakServiceId === '') {
|
||||
delete values.danakServiceId
|
||||
}
|
||||
return (
|
||||
<div className="mt-4 pb-12">
|
||||
<div>{t("ticket.new_ticket")}</div>
|
||||
|
||||
{getProfile.isPending || getCategories.isPending ? (
|
||||
<PageLoading />
|
||||
) : (
|
||||
<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("ticket.submit_your_message")}</div>
|
||||
|
||||
createTicket.mutate(values, {
|
||||
onSuccess: (data) => {
|
||||
toast(t('success'), 'success')
|
||||
formik.resetForm()
|
||||
navigate(Pages.ticket.detail + data.data?.ticketId)
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast(error.response?.data?.error?.message[0], 'error')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
return (
|
||||
<div className='mt-4 pb-12'>
|
||||
<div>
|
||||
{t('ticket.new_ticket')}
|
||||
<div className="mt-5">
|
||||
<Select
|
||||
label={t("receip.customer")}
|
||||
placeholder={t("select")}
|
||||
items={getCustomers.data?.data?.customers?.map((item: CustomerItemType) => {
|
||||
return {
|
||||
label: item.firstName + " " + item.lastName,
|
||||
value: item.id,
|
||||
};
|
||||
})}
|
||||
{...formik.getFieldProps("userId")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{
|
||||
getProfile.isPending || getCategories.isPending ?
|
||||
<PageLoading />
|
||||
:
|
||||
<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('ticket.submit_your_message')}
|
||||
</div>
|
||||
<div className="mt-6 rowTwoInput">
|
||||
<Input
|
||||
label={t("ticket.subject")}
|
||||
placeholder={t("ticket.enter_your_subject")}
|
||||
name="subject"
|
||||
value={formik.values.subject}
|
||||
onChange={formik.handleChange}
|
||||
error_text={formik.touched.subject && formik.errors.subject ? formik.errors.subject : ""}
|
||||
/>
|
||||
<Select
|
||||
label={t("ticket.priority")}
|
||||
items={[
|
||||
{
|
||||
label: t("ticket.low"),
|
||||
value: "LOW",
|
||||
},
|
||||
{
|
||||
label: t("ticket.medium"),
|
||||
value: "MEDIUM",
|
||||
},
|
||||
{
|
||||
label: t("ticket.high"),
|
||||
value: "HIGH",
|
||||
},
|
||||
]}
|
||||
placeholder={t("select")}
|
||||
className="border"
|
||||
name="priority"
|
||||
value={formik.values.priority}
|
||||
onChange={formik.handleChange}
|
||||
error_text={formik.touched.priority && formik.errors.priority ? formik.errors.priority : ""}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-5'>
|
||||
<Select
|
||||
label={t('receip.customer')}
|
||||
placeholder={t('select')}
|
||||
items={getCustomers.data?.data?.customers?.map((item: CustomerItemType) => {
|
||||
return {
|
||||
label: item.firstName + ' ' + item.lastName,
|
||||
value: item.id
|
||||
}
|
||||
})}
|
||||
{...formik.getFieldProps('userId')}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-6 rowTwoInput">
|
||||
<Select
|
||||
label={t("ticket.category")}
|
||||
items={getCategories.data?.data?.ticketCategories?.map((item: { id: string; title: string }) => ({
|
||||
label: item.title,
|
||||
value: item.id,
|
||||
}))}
|
||||
placeholder={t("select")}
|
||||
className="border"
|
||||
name="categoryId"
|
||||
value={formik.values.categoryId}
|
||||
onChange={formik.handleChange}
|
||||
error_text={formik.touched.categoryId && formik.errors.categoryId ? formik.errors.categoryId : ""}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<Textarea
|
||||
label={t("description")}
|
||||
placeholder={t("ticket.your_description")}
|
||||
name="message"
|
||||
value={formik.values.message}
|
||||
onChange={formik.handleChange}
|
||||
error_text={formik.touched.message && formik.errors.message ? formik.errors.message : ""}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<UploadBox
|
||||
label={t("ticket.attachment")}
|
||||
isMultiple
|
||||
onChange={setFiles}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-6 rowTwoInput'>
|
||||
<Input
|
||||
label={t('ticket.subject')}
|
||||
placeholder={t('ticket.enter_your_subject')}
|
||||
name='subject'
|
||||
value={formik.values.subject}
|
||||
onChange={formik.handleChange}
|
||||
error_text={formik.touched.subject && formik.errors.subject ? formik.errors.subject : ''}
|
||||
/>
|
||||
<Select
|
||||
label={t('ticket.priority')}
|
||||
items={[
|
||||
{
|
||||
label: t('ticket.low'),
|
||||
value: 'LOW'
|
||||
},
|
||||
{
|
||||
label: t('ticket.medium'),
|
||||
value: 'MEDIUM'
|
||||
},
|
||||
{
|
||||
label: t('ticket.high'),
|
||||
value: 'HIGH'
|
||||
}
|
||||
]}
|
||||
placeholder={t('select')}
|
||||
className='border'
|
||||
name='priority'
|
||||
value={formik.values.priority}
|
||||
onChange={formik.handleChange}
|
||||
error_text={formik.touched.priority && formik.errors.priority ? formik.errors.priority : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-6 rowTwoInput'>
|
||||
|
||||
<Select
|
||||
label={t('ticket.category')}
|
||||
items={getCategories.data?.data?.ticketCategories?.map((item: { id: string, title: string }) => ({
|
||||
label: item.title,
|
||||
value: item.id
|
||||
})
|
||||
)}
|
||||
placeholder={t('select')}
|
||||
className='border'
|
||||
name='categoryId'
|
||||
value={formik.values.categoryId}
|
||||
onChange={formik.handleChange}
|
||||
error_text={formik.touched.categoryId && formik.errors.categoryId ? formik.errors.categoryId : ''}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-6'>
|
||||
<Textarea
|
||||
label={t('description')}
|
||||
placeholder={t('ticket.your_description')}
|
||||
name='message'
|
||||
value={formik.values.message}
|
||||
onChange={formik.handleChange}
|
||||
error_text={formik.touched.message && formik.errors.message ? formik.errors.message : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-6'>
|
||||
<UploadBox
|
||||
label={t('ticket.attachment')}
|
||||
isMultiple
|
||||
onChange={setFiles}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-8 flex justify-end'>
|
||||
<Button
|
||||
className='xl:max-w-[100px]'
|
||||
onClick={() => formik.handleSubmit()}
|
||||
isLoading={createTicket.isPending || multiUpload.isPending}
|
||||
>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<TickCircle size={20} color='white' />
|
||||
<div>
|
||||
{t('ticket.send')}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='bg-white w-sidebar xl: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>
|
||||
}
|
||||
|
||||
<div className="mt-8 flex justify-end">
|
||||
<Button
|
||||
className="xl:max-w-[100px]"
|
||||
onClick={() => formik.handleSubmit()}
|
||||
isLoading={createTicket.isPending || multiUpload.isPending}
|
||||
>
|
||||
<div className="flex gap-2 items-center">
|
||||
<TickCircle
|
||||
size={20}
|
||||
color="white"
|
||||
/>
|
||||
<div>{t("ticket.send")}</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white w-sidebar xl: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>
|
||||
)
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateTicket
|
||||
export default CreateTicket;
|
||||
|
||||
Reference in New Issue
Block a user