single service + 404 page and 500 page

2025-04-17 09:30:33 +03:30
parent a2c226b5a8
commit 1c314972da
21 changed files with 1032 additions and 7 deletions
@@ -0,0 +1,109 @@
+/* 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'
+
+type Props = {
+    data: DanakService,
+}
+
+const ServiceHeader: FC<Props> = (props: Props) => {
+
+    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.finalPrice)
+        setPrice(plan?.price)
+
+    }, [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 &&
+                                <div className='line-through text-xs text-description'>
+                                    {NumberFormat(Number(price))}
+                                </div>
+                            }
+                            <div>{NumberFormat(Number(price))}</div>
+                        </div>
+                        <span>تومان</span>
+                    </div>
+                    <Link target='_blank' href={`https://console.danakcorp.com/services/detail/${data?.id}`}>
+                        <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