hamid zarghami
112 lines
4.6 KiB
TypeScript
112 lines
4.6 KiB
TypeScript
import { type FC } from 'react'
|
||
import PageTitle from '../../components/PageTitle'
|
||
import { useCreateFaq } from './hooks/useSettingData'
|
||
import { useFormik } from 'formik'
|
||
import { type CreateFaqType } from './types/Types'
|
||
import { FaqPageEnum } from './enum/Enum'
|
||
import * as Yup from 'yup'
|
||
import { useNavigate } from 'react-router-dom'
|
||
import Input from '../../components/Input'
|
||
import Textarea from '../../components/Textarea'
|
||
import Select from '../../components/Select'
|
||
import Button from '../../components/Button'
|
||
import { TickCircle } from 'iconsax-react'
|
||
import { toast } from 'react-toastify'
|
||
import { extractErrorMessage } from '@/helpers/utils'
|
||
import { Pages } from '@/config/Pages'
|
||
|
||
const FaqCreate: FC = () => {
|
||
const navigate = useNavigate()
|
||
const createFaq = useCreateFaq()
|
||
|
||
const formik = useFormik<CreateFaqType>({
|
||
initialValues: {
|
||
question: '',
|
||
answer: '',
|
||
page: FaqPageEnum.Faq,
|
||
},
|
||
validationSchema: Yup.object({
|
||
question: Yup.string().required('سوال الزامی است'),
|
||
answer: Yup.string().required('جواب الزامی است'),
|
||
page: Yup.string().required('صفحه الزامی است'),
|
||
}),
|
||
onSubmit: (values) => {
|
||
createFaq.mutate(values, {
|
||
onSuccess: () => {
|
||
toast.success('سوال متداول با موفقیت ایجاد شد')
|
||
navigate(Pages.pages.faq)
|
||
},
|
||
onError: (error) => {
|
||
toast.error(extractErrorMessage(error))
|
||
}
|
||
})
|
||
}
|
||
})
|
||
|
||
const pageOptions = [
|
||
{ value: FaqPageEnum.Faq, label: 'سوالات متداول' },
|
||
{ value: FaqPageEnum.Seller, label: 'فروشندگان' },
|
||
{ value: FaqPageEnum.ProductTag, label: 'برچسب محصول' },
|
||
{ value: FaqPageEnum.ProductDescription, label: 'توضیحات محصول' },
|
||
{ value: FaqPageEnum.ProductBenefit, label: 'مزایای محصول' },
|
||
{ value: FaqPageEnum.ShipmentProcess, label: 'فرآیند ارسال' },
|
||
{ value: FaqPageEnum.Policy, label: 'سیاستها' },
|
||
]
|
||
|
||
return (
|
||
<div className='mt-4'>
|
||
<PageTitle />
|
||
<div className='flex justify-between items-center'>
|
||
<div className='flex items-center gap-3'>
|
||
<h1>ساخت سوال متداول جدید</h1>
|
||
</div>
|
||
<div>
|
||
<Button
|
||
className='px-6'
|
||
onClick={() => formik.handleSubmit()}
|
||
isLoading={createFaq.isPending}
|
||
disabled={!formik.isValid || createFaq.isPending}
|
||
>
|
||
<div className='flex gap-2 items-center'>
|
||
<TickCircle size={16} color='#fff' />
|
||
<div>ثبت سوال متداول</div>
|
||
</div>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='flex gap-6 xl:mt-8 mt-6'>
|
||
{/* اطلاعات اصلی */}
|
||
<div className='flex-1 text-sm bg-white py-8 xl:px-10 px-6 rounded-3xl'>
|
||
<h2 className='text-lg font-medium mb-6'>اطلاعات اصلی</h2>
|
||
|
||
<div className='space-y-6'>
|
||
<Input
|
||
label='سوال'
|
||
placeholder='سوال متداول را وارد کنید...'
|
||
{...formik.getFieldProps('question')}
|
||
error_text={formik.touched.question && formik.errors.question ? formik.errors.question : ''}
|
||
/>
|
||
|
||
<Textarea
|
||
label='جواب'
|
||
placeholder='جواب سوال را وارد کنید...'
|
||
{...formik.getFieldProps('answer')}
|
||
error_text={formik.touched.answer && formik.errors.answer ? formik.errors.answer : ''}
|
||
/>
|
||
|
||
<Select
|
||
label='صفحه مربوطه'
|
||
placeholder='انتخاب صفحه'
|
||
items={pageOptions}
|
||
{...formik.getFieldProps('page')}
|
||
error_text={formik.touched.page && formik.errors.page ? formik.errors.page : ''}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default FaqCreate |