danak/danak-console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

learning

Browse Source
This commit is contained in:
hamid zarghami
2025-02-28 19:26:32 +03:30
parent e8c26de5e1
commit d986365f56
11 changed files with 168 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/service/BuyService.tsx
+94 -2
View File
@@ -1,13 +1,54 @@
import { FC } from 'react'
import { useParams } from 'react-router-dom'
import { useGetDetailService } from './hooks/useServiceData'
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 'react-toastify'
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: () => {
toast.success(t('success'))
navigate(Pages.services.mine)
},
onError: (error: ErrorType) => {
toast.error(error.response?.data?.error.message[0])
}
})
}
})
return (
<div className='w-full flex gap-6 mt-4'>
@@ -17,6 +58,57 @@ const BuyService: FC = () => {
:
<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>
src/pages/service/components/HeaderBuy.tsx
+1 -45
View File
@@ -1,11 +1,8 @@
import { FC, useEffect, useState } from 'react'
import Button from '../../../components/Button'
import { ArrowRight, TickCircle } from 'iconsax-react'
import { ArrowRight } from 'iconsax-react'
import { ServiceDetailDataType } from '../types/ServiecTypes'
import { NumberFormat } from '../../../config/func'
import { useTranslation } from 'react-i18next'
import Input from '../../../components/Input'
import Textarea from '../../../components/Textarea'
import { useNavigate } from 'react-router-dom'
import { Pages } from '../../../config/Pages'
@@ -85,48 +82,7 @@ const HeaderBuy: FC<Props> = ({ data, planId }) => {
</div>
</div>
<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')}
/>
</div>
<div className='mt-8'>
<Input
label={t('service.phone_business')}
/>
</div>
<div className='mt-8'>
<Textarea
label={t('service.short_description')}
/>
</div>
<div className='mt-8 flex justify-end'>
<Button
className='xl:w-fit px-5'
>
<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>
)
}
src/pages/service/types/ServiecTypes.ts
+12 -4
View File
@@ -70,10 +70,10 @@ export type PlanItemType = {
updatedAt: string;
};
export type BuyServiceType = {
planId: string;
serviceId: string;
};
// export type BuyServiceType = {
// planId: string;
// serviceId: string;
// };
export type MyServicesItem = {
createdAt: string;
@@ -110,3 +110,11 @@ export type MyServicesItem = {
status: string;
updatedAt: string;
};
export type BuyServiceType = {
planId: string;
businessName: string;
businessPhone: string;
description: string;
serviceId: string;
};