invoice + plan

2025-02-15 16:22:42 +03:30
parent 65faa4de5f
commit 8f39afeb48
20 changed files with 1125 additions and 262 deletions
@@ -0,0 +1,152 @@
+import { FC, useEffect, useState } from 'react'
+import Button from '../../../components/Button'
+import { Edit, TickCircle } from 'iconsax-react'
+import { useTranslation } from 'react-i18next'
+import DefaulModal from '../../../components/DefaulModal'
+import Input from '../../../components/Input'
+import { useFormik } from 'formik'
+import { CreateItemPlanType, UpdatePlanType } from '../types/ServiceTypes'
+import * as Yup from 'yup'
+import { clx } from '../../../helpers/utils'
+import { toast } from 'react-toastify'
+import { useGetPlanDetail, useUpdatePlan } from '../hooks/useServiceData'
+import { useParams } from 'react-router-dom'
+import { ErrorType } from '../../../helpers/types'
+
+type Props = {
+    id: string,
+}
+
+const EditPlan: FC<Props> = (props: Props) => {
+
+    const { id } = useParams()
+    const { t } = useTranslation('global')
+    const [showModal, setShowModal] = useState<boolean>(false)
+    const getPlanDetail = useGetPlanDetail(showModal ? props.id : undefined)
+    const updatePlan = useUpdatePlan(props.id)
+
+    const formik = useFormik<CreateItemPlanType>({
+        initialValues: {
+            name: '',
+            duration: '',
+            isActive: true,
+            price: ''
+        },
+        validationSchema: Yup.object({
+            name: Yup.string()
+                .required(t('errors.required')),
+            duration: Yup.string()
+                .required(t('errors.required')),
+            price: Yup.string()
+                .required(t('errors.required')),
+        }),
+        onSubmit: (values) => {
+            const params: UpdatePlanType = {
+                serviceId: id,
+                duration: +values.duration,
+                price: +values.price,
+                name: values.name,
+            }
+            updatePlan.mutate(params, {
+                onSuccess: () => {
+                    toast.success(t('success'))
+                    setShowModal(false)
+                },
+                onError: (error: ErrorType) => {
+                    toast.error(error.response?.data?.error?.message[0])
+                }
+            })
+        }
+    })
+
+    useEffect(() => {
+
+        if (getPlanDetail.data) {
+            formik.setValues({
+                name: getPlanDetail.data.data?.subscription.name,
+                duration: getPlanDetail.data.data?.subscription.duration + '',
+                price: getPlanDetail.data.data?.subscription.price + '',
+                isActive: getPlanDetail.data.data?.subscription.isActive
+            })
+        }
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [getPlanDetail.data])
+
+    return (
+        <div>
+            <Edit
+                onClick={() => setShowModal(true)}
+                size={20}
+                color='#0047FF'
+            />
+
+            <DefaulModal
+                open={showModal}
+                close={() => setShowModal(false)}
+                title_header={t('plan.edit_plan')}
+                isHeader
+            >
+                <div className='mt-6'>
+
+                    <div className={clx(
+                        'flex justify-between items-start gap-8',
+                    )}>
+                        <Input
+                            label={t('title')}
+                            className='bg-white bg-opacity-30'
+                            name='name'
+                            value={formik.values.name}
+                            onChange={formik.handleChange}
+                            error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
+                        />
+                        <Input
+                            label={t('plan.time')}
+                            className='bg-white bg-opacity-30'
+                            name='duration'
+                            value={formik.values.duration}
+                            onChange={formik.handleChange}
+                            error_text={formik.touched.duration && formik.errors.duration ? formik.errors.duration : ''}
+                        />
+                        <Input
+                            label={t('plan.price')}
+                            className='bg-white bg-opacity-30'
+                            name='price'
+                            value={formik.values.price}
+                            onChange={formik.handleChange}
+                            error_text={formik.touched.price && formik.errors.price ? formik.errors.price : ''}
+                        />
+                    </div>
+
+                    <div className='mt-12 border-t border-border pt-5 flex justify-end'>
+                        <div className='flex gap-5 items-center'>
+                            <Button
+                                className='w-[150px] bg-white bg-opacity-15 text-description'
+                                label={t('plan.cancel')}
+                                onClick={() => setShowModal(false)}
+                            />
+
+                            <Button
+                                onClick={() => formik.handleSubmit()}
+                                isLoading={updatePlan.isPending}
+                            >
+                                <div className='flex gap-2'>
+                                    <TickCircle
+                                        size={20}
+                                        color='white'
+                                    />
+                                    <div>
+                                        {t('save')}
+                                    </div>
+                                </div>
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+
+            </DefaulModal>
+        </div>
+    )
+}
+
+export default EditPlan