danak-admin/src/pages/service/components/EditPlan.tsx

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