change radio section payment
This commit is contained in:
hamid zarghami
@@ -1,8 +1,9 @@
|
||||
'use client';
|
||||
|
||||
import { Card, Icon, Wallet2 } from 'iconsax-react';
|
||||
import { useMemo } from 'react';
|
||||
import { useCallback, useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
|
||||
import { useGetPaymentMethod, useSetPaymentMethod } from '../../hooks/useOrderData';
|
||||
import { useCheckoutStore } from '../../store/Store';
|
||||
|
||||
@@ -30,11 +31,11 @@ export const PaymentSection = ({ paymentType, onPaymentTypeChange }: PaymentSect
|
||||
const { mutate: setPaymentMethod } = useSetPaymentMethod();
|
||||
const { setIsSelectedPayment } = useCheckoutStore();
|
||||
|
||||
const getPaymentMethodTranslation = (method: string, fallbackTitle: string) => {
|
||||
const getPaymentMethodTranslation = useCallback((method: string, fallbackTitle: string) => {
|
||||
const translationKey = `paymentMethod.${method}`;
|
||||
const translation = tOrders(translationKey);
|
||||
return translation !== translationKey ? translation : fallbackTitle;
|
||||
};
|
||||
}, [tOrders]);
|
||||
|
||||
const paymentOptions = useMemo(() => {
|
||||
if (!paymentMethod?.data) return [];
|
||||
@@ -47,41 +48,39 @@ export const PaymentSection = ({ paymentType, onPaymentTypeChange }: PaymentSect
|
||||
label: getPaymentMethodTranslation(item.method, item.title),
|
||||
icon: getIconByMethod(item.method, item.gateway),
|
||||
}));
|
||||
}, [paymentMethod, tOrders]);
|
||||
}, [paymentMethod, getPaymentMethodTranslation]);
|
||||
|
||||
return (
|
||||
<section className="bg-container rounded-container box-shadow-normal p-4">
|
||||
<div className="py-3">
|
||||
<h3 className="text-sm2 font-medium leading-5">{tOrderDetail("SectionPayment.Title")}</h3>
|
||||
|
||||
<div className='flex flex-col gap-5 mt-6'>
|
||||
<RadioGroup
|
||||
value={paymentType}
|
||||
onValueChange={(value) => {
|
||||
onPaymentTypeChange(value);
|
||||
setPaymentMethod(value, {
|
||||
onSuccess: () => {
|
||||
setIsSelectedPayment(true);
|
||||
},
|
||||
});
|
||||
}}
|
||||
className='flex flex-col gap-6 mt-6'
|
||||
>
|
||||
{paymentOptions.map(({ id, label, icon: Icon }) => (
|
||||
<div key={id} className='flex items-center'>
|
||||
<label className='flex items-center gap-2 w-full' htmlFor={`paymentMethod${id}`}>
|
||||
<div key={id} className='flex items-center justify-between'>
|
||||
<RadioGroupItem value={id} id={`paymentMethod${id}`} />
|
||||
<label className='flex items-center gap-2 cursor-pointer' htmlFor={`paymentMethod${id}`}>
|
||||
<span className='text-xs mt-0.5'>{label}</span>
|
||||
<Icon
|
||||
size={16}
|
||||
color='currentColor'
|
||||
className='mr-2'
|
||||
/>
|
||||
<span className='text-xs mt-0.5'>{label}</span>
|
||||
</label>
|
||||
<input
|
||||
checked={paymentType === id}
|
||||
onChange={() => {
|
||||
onPaymentTypeChange(id);
|
||||
setPaymentMethod(id, {
|
||||
onSuccess: () => {
|
||||
setIsSelectedPayment(true);
|
||||
},
|
||||
});
|
||||
}}
|
||||
type='radio'
|
||||
name='paymentMethod'
|
||||
id={`paymentMethod${id}`}
|
||||
className='size-4 accent-primary' />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -69,20 +69,13 @@ export const SummarySection = ({ cartModal, onToggleCartModal, deliveryType }: S
|
||||
|
||||
createOrder(undefined, {
|
||||
onSuccess: (data) => {
|
||||
confirmOrder(data?.data?.order?.id, {
|
||||
onSuccess: (payment) => {
|
||||
if (payment?.data?.paymentUrl) {
|
||||
window.location.href = payment?.data?.paymentUrl;
|
||||
toast('در حال ریدایرکت به صفحه پرداخت...', 'success');
|
||||
} else {
|
||||
window.location.href = `/${name}/verify/${data?.data?.order?.id}`;
|
||||
toast('سفارش با موفقیت ثبت شد', 'success');
|
||||
}
|
||||
},
|
||||
onError: (error) => {
|
||||
toast(extractErrorMessage(error), 'error');
|
||||
}
|
||||
});
|
||||
if (data?.data?.paymentUrl) {
|
||||
window.location.href = data?.data?.paymentUrl;
|
||||
toast('در حال ریدایرکت به صفحه پرداخت...', 'success');
|
||||
} else {
|
||||
window.location.href = `/${name}/verify/${data?.data?.order?.id}`;
|
||||
toast('سفارش با موفقیت ثبت شد', 'success');
|
||||
}
|
||||
},
|
||||
onError: (error) => {
|
||||
toast(extractErrorMessage(error), 'error');
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
|
||||
import { Circle } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const RadioGroup = React.forwardRef<
|
||||
React.ElementRef<typeof RadioGroupPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<RadioGroupPrimitive.Root
|
||||
className={cn("grid gap-2", className)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
)
|
||||
})
|
||||
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
|
||||
|
||||
const RadioGroupItem = React.forwardRef<
|
||||
React.ElementRef<typeof RadioGroupPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<RadioGroupPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<RadioGroupPrimitive.Indicator className="flex items-center justify-center">
|
||||
<Circle className="h-2.5 w-2.5 fill-current text-current" />
|
||||
</RadioGroupPrimitive.Indicator>
|
||||
</RadioGroupPrimitive.Item>
|
||||
)
|
||||
})
|
||||
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
|
||||
|
||||
export { RadioGroup, RadioGroupItem }
|
||||
|
||||
Reference in New Issue
Block a user