pixel perfect
This commit is contained in:
hamid zarghami
@@ -39,9 +39,9 @@ const BuyService: FC = () => {
|
||||
}),
|
||||
onSubmit: (values) => {
|
||||
buyService.mutate(values, {
|
||||
onSuccess: () => {
|
||||
onSuccess: (data) => {
|
||||
toast.success(t('success'))
|
||||
navigate(Pages.receipts.index)
|
||||
navigate(Pages.receipts.detail + data?.data?.invoice?.id)
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(error.response?.data?.error.message[0])
|
||||
|
||||
@@ -38,7 +38,7 @@ const OtherServices: FC = () => {
|
||||
getAds.data?.data?.ads?.map((item: AdsItemType) => {
|
||||
return (
|
||||
<a target='_blank' key={item.id} className='relative drtl'>
|
||||
<img src={item.imageUrl} className='w-full max-h-[300px] h-full object-cover rounded-3xl' />
|
||||
<img src={item.imageUrl} className='w-full min-h-[190px] max-h-[300px] h-full object-cover rounded-3xl' />
|
||||
<div className='absolute bg-black bg-opacity-20 size-full top-0 right-0 py-6 px-8 flex flex-col justify-between'>
|
||||
<button className="px-8 w-fit py-1.5 bg-white bg-opacity-10 text-white text-sm rounded-full shadow-md ">
|
||||
{t('home.new')}
|
||||
|
||||
@@ -17,7 +17,6 @@ const HeaderBuy: FC<Props> = ({ data, planId }) => {
|
||||
const { t } = useTranslation('global')
|
||||
const [planSelected] = useState<string>(planId ? planId : '')
|
||||
const [price, setPrice] = useState<number>(data?.subscriptionPlans[0]?.price)
|
||||
const [finalPrice, setFinalPrice] = useState<number>(0)
|
||||
const [planText, setPlanText] = useState<string>('')
|
||||
|
||||
useEffect(() => {
|
||||
@@ -25,7 +24,6 @@ const HeaderBuy: FC<Props> = ({ data, planId }) => {
|
||||
const plan = data?.subscriptionPlans.find((item) => item.id === planSelected)
|
||||
|
||||
setPlanText(plan.name)
|
||||
setFinalPrice(plan.finalPrice)
|
||||
setPrice(plan?.price)
|
||||
|
||||
}, [data])
|
||||
@@ -68,13 +66,13 @@ const HeaderBuy: FC<Props> = ({ data, planId }) => {
|
||||
<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(finalPrice))}</div>
|
||||
} */}
|
||||
<div>{NumberFormat(Number(price))}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { FC, useEffect, useState } from 'react'
|
||||
import { FC, useState } from 'react'
|
||||
import TitleLine from '../../../components/TitleLine'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useGetCategoriesPublic, useGetServicesByCategory } from '../hooks/useServiceData'
|
||||
@@ -18,19 +18,6 @@ const OtherServicesComponent: FC = () => {
|
||||
const getCategory = useGetCategoriesPublic()
|
||||
const getServices = useGetServicesByCategory(categoryId)
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
if (getCategory.data) {
|
||||
setCategoryId(getCategory?.data?.data?.categories[0]?.id)
|
||||
}
|
||||
|
||||
}, [getCategory.data])
|
||||
|
||||
console.log('services', getServices.data?.data?.category?.danakServices
|
||||
);
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className='w-full mt-8'>
|
||||
@@ -43,6 +30,14 @@ const OtherServicesComponent: FC = () => {
|
||||
spaceBetween={15} // فاصله پیشفرض بین اسلایدها
|
||||
slidesPerView='auto'
|
||||
>
|
||||
<SwiperSlide className='max-w-[158px]'>
|
||||
<div onClick={() => setCategoryId('')} className={clx(
|
||||
'h-10 cursor-pointer rounded-full border-2 border-white bg-white/45 flex gap-2 justify-center items-center',
|
||||
'' === categoryId && 'bg-white'
|
||||
)}>
|
||||
<div className='text-sm'>{t('all')}</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
{
|
||||
getCategory.data?.data?.categories?.map((item: CategoryItemType) => {
|
||||
return (
|
||||
@@ -65,7 +60,7 @@ const OtherServicesComponent: FC = () => {
|
||||
<div className='flex w-full gap-6 items-center'>
|
||||
<div className='flex w-full flex-wrap xl:gap-6 gap-4 items-center mt-8'>
|
||||
{
|
||||
getServices.data?.data?.category?.danakServices?.map((item: ItemServiceType) => {
|
||||
getServices.data?.data?.services?.map((item: ItemServiceType) => {
|
||||
return (
|
||||
<div className='flex-1 min-w-full xl:min-w-0 bg-white rounded-3xl py-4 px-6'>
|
||||
<div className='flex gap-2 justify-between items-center'>
|
||||
@@ -77,7 +72,7 @@ const OtherServicesComponent: FC = () => {
|
||||
className='h-8 w-fit px-2 text-xs text-black bg-description bg-opacity-20 rounded-xl'
|
||||
>
|
||||
<div className='flex gap-2'>
|
||||
<div className='whitespace-nowrap'>{t('service.detail')}</div>
|
||||
<div className='whitespace-nowrap'>{t('service.buy')}</div>
|
||||
<ArrowLeft color='black' size={16} />
|
||||
</div>
|
||||
</Button>
|
||||
|
||||
@@ -38,7 +38,7 @@ const ServiceHeader: FC<Props> = (props: Props) => {
|
||||
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 xl:gap-8 gap-4'>
|
||||
<div className='xl:size-[70px] size-[50px] rounded-xl'>
|
||||
<div className='xl:size-[70px] min-w-[50px] size-[50px] rounded-xl'>
|
||||
<img src={data?.icon} className='w-full h-full rounded-xl' />
|
||||
</div>
|
||||
<div>
|
||||
@@ -66,7 +66,7 @@ const ServiceHeader: FC<Props> = (props: Props) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-col justify-between xl:items-end'>
|
||||
<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) => {
|
||||
|
||||
@@ -20,7 +20,6 @@ export const useGetServicesByCategory = (categoryId: string) => {
|
||||
return useQuery({
|
||||
queryKey: ["services-category", categoryId],
|
||||
queryFn: () => api.getServicesByCategory(categoryId),
|
||||
enabled: !!categoryId,
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@@ -10,9 +10,11 @@ export const getCategoriesPublic = async () => {
|
||||
return data;
|
||||
};
|
||||
export const getServicesByCategory = async (categoryId: string) => {
|
||||
const { data } = await axios.get(
|
||||
`/danak-services/categories/${categoryId}/services`
|
||||
);
|
||||
let query = ``;
|
||||
if (categoryId) {
|
||||
query = `?categoryId=${categoryId}`;
|
||||
}
|
||||
const { data } = await axios.get(`/danak-services/public${query}`);
|
||||
return data;
|
||||
};
|
||||
|
||||
|
||||
@@ -14,6 +14,7 @@ export type ItemServiceType = {
|
||||
softwareLanguage: string;
|
||||
updatedAt: string;
|
||||
userCount: number;
|
||||
title: string;
|
||||
};
|
||||
|
||||
export type CategoryItemType = {
|
||||
|
||||
Reference in New Issue
Block a user