hamid zarghami
111 lines
4.7 KiB
TypeScript
111 lines
4.7 KiB
TypeScript
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||
'use client'
|
||
import { FC, useEffect, useState } from 'react'
|
||
import Button from '../../../components/Button'
|
||
import { ArrowLeft } from 'iconsax-react'
|
||
import { NumberFormat } from '../../../config/func'
|
||
import Link from 'next/link'
|
||
import { DanakService } from '../types/ProductTypes'
|
||
import RadioGroup from '@/components/RadioGroup'
|
||
import Image from 'next/image'
|
||
import { CONSOLE_URL } from '@/config/const'
|
||
import { useSharedStore } from '@/shared/store/sharedStore'
|
||
type Props = {
|
||
data: DanakService,
|
||
}
|
||
|
||
const ServiceHeader: FC<Props> = (props: Props) => {
|
||
|
||
const { isLogin } = useSharedStore()
|
||
const { data } = props
|
||
const [planSelected, setPlanSelected] = useState<string>(data?.subscriptionPlans[0]?.id)
|
||
const [price, setPrice] = useState<number>(data?.subscriptionPlans[0]?.price)
|
||
const [finalPrice, setFinalPrice] = useState<number>(0)
|
||
// const buyService = useBuyService()
|
||
|
||
useEffect(() => {
|
||
|
||
const plan: any = data?.subscriptionPlans.find((item) => item.id === planSelected)
|
||
|
||
setFinalPrice(plan.price)
|
||
setPrice(plan?.originalPrice)
|
||
|
||
}, [data?.subscriptionPlans, planSelected])
|
||
|
||
|
||
return (
|
||
<div className='w-full p-6 bg-white rounded-3xl flex xl:flex-row flex-col items-end xl:justify-between'>
|
||
<div className='flex w-full xl:gap-8 gap-4'>
|
||
<div className='xl:size-[70px] xl:min-w-[70px] min-w-[50px] size-[50px] rounded-xl'>
|
||
<Image alt='icon' width={70} height={70} src={data?.icon} className='w-full h-full rounded-xl' />
|
||
</div>
|
||
<div>
|
||
<div>
|
||
{data?.name}
|
||
</div>
|
||
|
||
<p className='text-description mt-1 text-[11px]'>
|
||
{data?.description}
|
||
</p>
|
||
<div className='hidden xl:flex gap-5 mt-5'>
|
||
<RadioGroup
|
||
items={data?.subscriptionPlans?.map((item) => {
|
||
return {
|
||
label: item?.name,
|
||
value: item?.id
|
||
}
|
||
})}
|
||
onChange={setPlanSelected}
|
||
selected={planSelected}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='flex w-full flex-col justify-between xl:items-end'>
|
||
<div className='xl:hidden flex gap-5 mt-5'>
|
||
<RadioGroup
|
||
items={data?.subscriptionPlans?.map((item) => {
|
||
return {
|
||
label: item?.name,
|
||
value: item?.id
|
||
}
|
||
})}
|
||
onChange={setPlanSelected}
|
||
selected={planSelected}
|
||
/>
|
||
</div>
|
||
<div className='flex gap-4 mt-5 xl:mt-0 items-center justify-between xl:justify-normal'>
|
||
<div className='text-xs whitespace-nowrap flex gap-1 items-center'>
|
||
<div className='flex gap-2'>
|
||
{
|
||
finalPrice !== price && !!price &&
|
||
<div className='line-through text-xs text-description'>
|
||
{NumberFormat(Number(price))}
|
||
</div>
|
||
}
|
||
<div>{NumberFormat(Number(finalPrice))}</div>
|
||
</div>
|
||
<span>تومان</span>
|
||
</div>
|
||
<Link target='_blank' href={`${isLogin ? CONSOLE_URL + `/other-service/buy/${data?.id}/${planSelected}` : CONSOLE_URL + '/auth/login'}?redirect=${CONSOLE_URL}/other-service/buy/${data?.id}/${planSelected}`}>
|
||
<Button
|
||
// onClick={handleBuy}
|
||
// isLoading={buyService.isPending}
|
||
className='bg-description xl:max-w-full max-w-[100px] text-xs h-8 bg-opacity-20 text-black px-4'
|
||
>
|
||
<div className='flex gap-1 items-center'>
|
||
<div>
|
||
خرید
|
||
</div>
|
||
<ArrowLeft className='size-4' color='black' />
|
||
</div>
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default ServiceHeader |