change payment method
This commit is contained in:
hamid zarghami
@@ -1,44 +1,75 @@
|
||||
import { type FC, useEffect } from 'react'
|
||||
import { type FC, useMemo } from 'react'
|
||||
import { useFormik } from 'formik'
|
||||
import * as Yup from 'yup'
|
||||
import { TickCircle } from 'iconsax-react'
|
||||
import { toast } from 'react-toastify'
|
||||
import { useNavigate, useParams } from 'react-router-dom'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '@/components/Button'
|
||||
import Input from '@/components/Input'
|
||||
import Select from '@/components/Select'
|
||||
import Switch from '@/components/Switch'
|
||||
import PageLoading from '@/components/PageLoading'
|
||||
import type { CreateRestaurantPaymentMethodType, PaymentMethod } from './types/Types'
|
||||
import { useGetRestaurantPaymentMethod, useUpdateRestaurantPaymentMethod, useGetPaymentMethods } from './hooks/usePaymentMethodData'
|
||||
import Textarea from '@/components/Textarea'
|
||||
import type { CreateRestaurantPaymentMethodType } from './types/Types'
|
||||
import { useGetRestaurantPaymentMethod, useUpdateRestaurantPaymentMethod } from './hooks/usePaymentMethodData'
|
||||
import { PaymentMethodEnum, PaymentGatewayEnum } from './enum/Enum'
|
||||
import { Pages } from '@/config/Pages'
|
||||
import type { ErrorType } from '@/helpers/types'
|
||||
import { extractErrorMessage } from '@/config/func'
|
||||
|
||||
const UpdatePaymentMethod: FC = () => {
|
||||
const { t } = useTranslation('global')
|
||||
const navigate = useNavigate()
|
||||
const { id } = useParams<{ id: string }>()
|
||||
const { data: restaurantPaymentMethodData, isLoading } = useGetRestaurantPaymentMethod(id || '')
|
||||
const { data: paymentMethodsData } = useGetPaymentMethods()
|
||||
const { mutate: updateRestaurantPaymentMethod, isPending } = useUpdateRestaurantPaymentMethod()
|
||||
const { data: paymentMethodData, isLoading } = useGetRestaurantPaymentMethod(id || '')
|
||||
|
||||
const paymentMethods = paymentMethodsData?.data?.map((method: PaymentMethod) => ({
|
||||
label: method.name,
|
||||
value: method.id
|
||||
})) || []
|
||||
const paymentMethods = [
|
||||
{ label: t(`payment.${PaymentMethodEnum.Online}`), value: PaymentMethodEnum.Online },
|
||||
{ label: t(`payment.${PaymentMethodEnum.Cash}`), value: PaymentMethodEnum.Cash },
|
||||
{ label: t(`payment.${PaymentMethodEnum.CardOnDelivery}`), value: PaymentMethodEnum.CardOnDelivery },
|
||||
{ label: t(`payment.${PaymentMethodEnum.Wallet}`), value: PaymentMethodEnum.Wallet },
|
||||
]
|
||||
|
||||
const restaurantPaymentMethod = restaurantPaymentMethodData?.data
|
||||
const paymentGateways = [
|
||||
{ label: t(`payment.${PaymentGatewayEnum.ZarinPal}`), value: PaymentGatewayEnum.ZarinPal },
|
||||
]
|
||||
|
||||
const initialValues = useMemo<CreateRestaurantPaymentMethodType>(() => {
|
||||
if (paymentMethodData?.data) {
|
||||
const data = paymentMethodData.data as CreateRestaurantPaymentMethodType & { id: string }
|
||||
return {
|
||||
title: data.title || '',
|
||||
method: data.method || '',
|
||||
gateway: data.gateway || '',
|
||||
description: data.description || '',
|
||||
enabled: data.enabled ?? true,
|
||||
order: data.order || 0,
|
||||
merchantId: data.merchantId || '',
|
||||
}
|
||||
}
|
||||
return {
|
||||
title: '',
|
||||
method: '',
|
||||
gateway: '',
|
||||
description: '',
|
||||
enabled: true,
|
||||
order: 0,
|
||||
merchantId: '',
|
||||
}
|
||||
}, [paymentMethodData])
|
||||
|
||||
const formik = useFormik<CreateRestaurantPaymentMethodType>({
|
||||
initialValues: {
|
||||
paymentMethodId: '',
|
||||
merchantId: '',
|
||||
isActive: true,
|
||||
},
|
||||
initialValues,
|
||||
enableReinitialize: true,
|
||||
validationSchema: Yup.object().shape({
|
||||
paymentMethodId: Yup.string().required('روش پرداخت الزامی است'),
|
||||
title: Yup.string().required('عنوان الزامی است'),
|
||||
method: Yup.string().required('روش پرداخت الزامی است'),
|
||||
gateway: Yup.string().required('درگاه پرداخت الزامی است'),
|
||||
description: Yup.string().required('توضیحات الزامی است'),
|
||||
enabled: Yup.boolean(),
|
||||
order: Yup.number().required('ترتیب الزامی است').min(0, 'ترتیب باید مثبت باشد'),
|
||||
merchantId: Yup.string().required('شناسه مرچنت الزامی است'),
|
||||
isActive: Yup.boolean(),
|
||||
}),
|
||||
onSubmit: (values) => {
|
||||
if (!id) return
|
||||
@@ -57,22 +88,15 @@ const UpdatePaymentMethod: FC = () => {
|
||||
},
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (restaurantPaymentMethod) {
|
||||
formik.setValues({
|
||||
paymentMethodId: restaurantPaymentMethod.paymentMethod?.id || '',
|
||||
merchantId: restaurantPaymentMethod.merchantId || '',
|
||||
isActive: restaurantPaymentMethod.isActive ?? true,
|
||||
})
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [restaurantPaymentMethod])
|
||||
|
||||
if (isLoading) {
|
||||
return <PageLoading />
|
||||
return (
|
||||
<div className='mt-5'>
|
||||
<div className='text-lg font-light'>در حال بارگذاری...</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!restaurantPaymentMethod) {
|
||||
if (!paymentMethodData?.data) {
|
||||
return (
|
||||
<div className='w-full mt-4 flex justify-center items-center'>
|
||||
<div>روش پرداخت یافت نشد</div>
|
||||
@@ -105,12 +129,32 @@ const UpdatePaymentMethod: FC = () => {
|
||||
<div className='mb-4'>
|
||||
<Select
|
||||
label='روش پرداخت'
|
||||
name='paymentMethodId'
|
||||
value={formik.values.paymentMethodId}
|
||||
name='method'
|
||||
value={formik.values.method}
|
||||
onChange={formik.handleChange}
|
||||
items={paymentMethods}
|
||||
placeholder='روش پرداخت را انتخاب کنید'
|
||||
error_text={formik.touched.paymentMethodId && formik.errors.paymentMethodId ? formik.errors.paymentMethodId : ''}
|
||||
error_text={formik.touched.method && formik.errors.method ? formik.errors.method : ''}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-6'>
|
||||
<Input
|
||||
label='عنوان'
|
||||
name='title'
|
||||
value={formik.values.title}
|
||||
onChange={formik.handleChange}
|
||||
error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-6'>
|
||||
<Select
|
||||
label='درگاه پرداخت'
|
||||
name='gateway'
|
||||
value={formik.values.gateway}
|
||||
onChange={formik.handleChange}
|
||||
items={paymentGateways}
|
||||
placeholder='درگاه پرداخت را انتخاب کنید'
|
||||
error_text={formik.touched.gateway && formik.errors.gateway ? formik.errors.gateway : ''}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-6'>
|
||||
@@ -122,10 +166,32 @@ const UpdatePaymentMethod: FC = () => {
|
||||
error_text={formik.touched.merchantId && formik.errors.merchantId ? formik.errors.merchantId : ''}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-6'>
|
||||
<Textarea
|
||||
label='توضیحات'
|
||||
name='description'
|
||||
value={formik.values.description}
|
||||
onChange={formik.handleChange}
|
||||
error_text={formik.touched.description && formik.errors.description ? formik.errors.description : ''}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-6'>
|
||||
<Input
|
||||
label='ترتیب'
|
||||
name='order'
|
||||
type='number'
|
||||
value={formik.values.order ?? ''}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value === '' ? 0 : Number(e.target.value)
|
||||
formik.setFieldValue('order', value)
|
||||
}}
|
||||
error_text={formik.touched.order && formik.errors.order ? formik.errors.order : ''}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-6'>
|
||||
<Switch
|
||||
active={formik.values.isActive}
|
||||
onChange={(value) => formik.setFieldValue('isActive', value)}
|
||||
active={formik.values.enabled}
|
||||
onChange={(value) => formik.setFieldValue('enabled', value)}
|
||||
label='فعال'
|
||||
/>
|
||||
</div>
|
||||
@@ -135,4 +201,4 @@ const UpdatePaymentMethod: FC = () => {
|
||||
)
|
||||
}
|
||||
|
||||
export default UpdatePaymentMethod
|
||||
export default UpdatePaymentMethod
|
||||
|
||||
Reference in New Issue
Block a user