danak-console/src/pages/service/BuyService.tsx

import { FC } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { useBuyService, useGetDetailService } from './hooks/useServiceData'
import HeaderBuy from './components/HeaderBuy'
import PageLoading from '../../components/PageLoading'
import Button from '../../components/Button'
import { TickCircle } from 'iconsax-react'
import Textarea from '../../components/Textarea'
import Input from '../../components/Input'
import { useTranslation } from 'react-i18next'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import { BuyServiceType } from './types/ServiecTypes'
import { toast } from '../../components/Toast'
import { ErrorType } from '../../helpers/types'
import { Pages } from '../../config/Pages'

const BuyService: FC = () => {

    const { t } = useTranslation('global')
    const navigate = useNavigate()
    const { serviceId, planId } = useParams()
    const getDetailService = useGetDetailService(serviceId ? serviceId : '')
    const buyService = useBuyService()

    const formik = useFormik<BuyServiceType>({
        initialValues: {
            businessName: '',
            businessPhone: '',
            description: '',
            planId: planId ? planId : '',
            serviceId: serviceId ? serviceId : ''
        },
        validationSchema: Yup.object({
            businessName: Yup.string().required(t('errors.required')),
            businessPhone: Yup.string().required(t('errors.required')),
            description: Yup.string().required(t('errors.required')),
            planId: Yup.string().required(t('errors.required'))
        }),
        onSubmit: (values) => {
            buyService.mutate(values, {
                onSuccess: (data) => {
                    toast(t('success'), 'success')
                    navigate(Pages.receipts.detail + data?.data?.invoice?.id)
                },
                onError: (error: ErrorType) => {
                    toast(error.response?.data?.error?.message[0], 'error')
                }
            })
        }
    })

    return (
        <div className='w-full flex gap-6 mt-4'>
            {
                getDetailService.isPending ?
                    <PageLoading />
                    :
                    <div className='flex-1 max-w-full'>
                        <HeaderBuy planId={planId} data={getDetailService?.data?.data?.danakService} />

                        <div className='mt-8 p-6 bg-white rounded-3xl flex xl:gap-20 xl:flex-row flex-col gap-10'>
                            <div>
                                <div className='text-sm'>
                                    {t('service.info_business')}
                                </div>

                                <div className='text-xs text-description mt-2'>
                                    {t('service.enter_info_business')}
                                </div>
                            </div>

                            <div className='flex-1'>
                                <div>
                                    <Input
                                        label={t('service.business_name')}
                                        {...formik.getFieldProps('businessName')}
                                        error_text={formik.touched.businessName && formik.errors.businessName ? formik.errors.businessName : ''}
                                    />
                                </div>
                                <div className='mt-8'>
                                    <Input
                                        label={t('service.phone_business')}
                                        {...formik.getFieldProps('businessPhone')}
                                        error_text={formik.touched.businessPhone && formik.errors.businessPhone ? formik.errors.businessPhone : ''}
                                    />
                                </div>
                                <div className='mt-8'>
                                    <Textarea
                                        label={t('service.short_description')}
                                        {...formik.getFieldProps('description')}
                                        error_text={formik.touched.description && formik.errors.description ? formik.errors.description : ''}
                                    />
                                </div>

                                <div className='mt-8 flex justify-end'>
                                    <Button
                                        className='xl:w-fit px-5'
                                        onClick={() => formik.handleSubmit()}
                                        isLoading={buyService.isPending}
                                    >
                                        <div className='flex gap-2 items-center'>
                                            <TickCircle size={20} color='white' />
                                            <div>
                                                {t('service.confrim_and_invoice')}
                                            </div>
                                        </div>
                                    </Button>
                                </div>
                            </div>
                        </div>
                    </div>
            }
        </div>
    )
}

export default BuyService