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