This commit is contained in:
hamid zarghami
@@ -1,249 +1,221 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { Card, Icon, Wallet2 } from 'iconsax-react';
|
||||
import { useCallback, useMemo, useRef } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
|
||||
import { useGetPaymentMethod } from '../../hooks/useOrderData';
|
||||
import { useCheckoutStore } from '../../store/Store';
|
||||
import { useGetUserWallet } from '@/app/[name]/(Main)/transactions/hooks/useTransactionData';
|
||||
import { useGetCartItems } from '@/app/[name]/(Main)/cart/hooks/useCartData';
|
||||
import { useGetProfile, useSingleUpload } from '@/app/[name]/(Profile)/profile/hooks/userProfileData';
|
||||
import { PaymentMethodEnum } from '../../enum/Enum';
|
||||
import { toast } from '@/components/Toast';
|
||||
import { extractErrorMessage } from '@/lib/func';
|
||||
import Image from 'next/image';
|
||||
import { useGetCartItems } from "@/app/[name]/(Main)/cart/hooks/useCartData";
|
||||
import { useGetUserWallet } from "@/app/[name]/(Main)/transactions/hooks/useTransactionData";
|
||||
import { useGetProfile, useSingleUpload } from "@/app/[name]/(Profile)/profile/hooks/userProfileData";
|
||||
import { toast } from "@/components/Toast";
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||||
import { extractErrorMessage } from "@/lib/func";
|
||||
import { Card, Icon, Wallet2 } from "iconsax-react";
|
||||
import Image from "next/image";
|
||||
import { useCallback, useMemo, useRef } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { PaymentMethodEnum } from "../../enum/Enum";
|
||||
import { useGetPaymentMethod } from "../../hooks/useOrderData";
|
||||
import { useCheckoutStore } from "../../store/Store";
|
||||
|
||||
type PaymentSectionProps = {
|
||||
paymentType: string;
|
||||
onPaymentTypeChange: (id: string) => void;
|
||||
paymentType: string;
|
||||
onPaymentTypeChange: (id: string) => void;
|
||||
};
|
||||
|
||||
const getIconByMethod = (method: PaymentMethodEnum): Icon => {
|
||||
if (method === PaymentMethodEnum.Online || method === PaymentMethodEnum.CreditCard) {
|
||||
return Card;
|
||||
}
|
||||
if (method === PaymentMethodEnum.Cash || method === PaymentMethodEnum.Wallet) {
|
||||
return Wallet2;
|
||||
}
|
||||
if (method === PaymentMethodEnum.Online || method === PaymentMethodEnum.CreditCard) {
|
||||
return Card;
|
||||
}
|
||||
if (method === PaymentMethodEnum.Cash || method === PaymentMethodEnum.Wallet) {
|
||||
return Wallet2;
|
||||
}
|
||||
return Card;
|
||||
};
|
||||
|
||||
export const PaymentSection = ({ paymentType, onPaymentTypeChange }: PaymentSectionProps) => {
|
||||
const { t: tOrderDetail } = useTranslation("parallels", { keyPrefix: "OrderDetail" });
|
||||
const { t: tOrders } = useTranslation("orders");
|
||||
const { data: paymentMethod } = useGetPaymentMethod();
|
||||
const { setIsSelectedPayment, paymentDesc, setPaymentDesc, paymentAttachments, setPaymentAttachments } = useCheckoutStore();
|
||||
const { data: userWallet } = useGetUserWallet();
|
||||
const { isSuccess } = useGetProfile();
|
||||
const { data: cartData } = useGetCartItems(isSuccess);
|
||||
const { mutateAsync: singleUpload, isPending: isUploading } = useSingleUpload();
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const { t: tOrderDetail } = useTranslation('parallels', { keyPrefix: 'OrderDetail' });
|
||||
const { t: tOrders } = useTranslation('orders');
|
||||
const { data: paymentMethod } = useGetPaymentMethod();
|
||||
const {
|
||||
setIsSelectedPayment,
|
||||
paymentDesc,
|
||||
setPaymentDesc,
|
||||
paymentAttachments,
|
||||
setPaymentAttachments,
|
||||
} = useCheckoutStore();
|
||||
const { data: userWallet } = useGetUserWallet();
|
||||
const { isSuccess } = useGetProfile();
|
||||
const { data: cartData } = useGetCartItems(isSuccess);
|
||||
const { mutateAsync: singleUpload, isPending: isUploading } = useSingleUpload();
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const walletAmount = userWallet?.data?.balance ?? 0;
|
||||
const totalAmount = cartData?.data?.total ?? 0;
|
||||
const isWalletInsufficient = walletAmount < totalAmount;
|
||||
|
||||
const walletAmount = userWallet?.data?.balance ?? 0;
|
||||
const totalAmount = cartData?.data?.total ?? 0;
|
||||
const isWalletInsufficient = walletAmount < totalAmount;
|
||||
const formatPrice = useCallback((value: number) => value.toLocaleString("fa-IR"), []);
|
||||
|
||||
const formatPrice = useCallback(
|
||||
(value: number) => value.toLocaleString('fa-IR'),
|
||||
[]
|
||||
);
|
||||
const getPaymentMethodTranslation = useCallback(
|
||||
(method: string, fallbackTitle: string) => {
|
||||
const translationKey = `paymentMethod.${method}`;
|
||||
const translation = tOrders(translationKey);
|
||||
return translation !== translationKey ? translation : fallbackTitle;
|
||||
},
|
||||
[tOrders],
|
||||
);
|
||||
|
||||
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 [];
|
||||
|
||||
const paymentOptions = useMemo(() => {
|
||||
if (!paymentMethod?.data) return [];
|
||||
return paymentMethod.data
|
||||
.filter((item) => item.enabled)
|
||||
.sort((a, b) => a.order - b.order)
|
||||
.map((item) => ({
|
||||
id: item.id,
|
||||
label: getPaymentMethodTranslation(item.method, item.description),
|
||||
icon: getIconByMethod(item.method),
|
||||
method: item.method,
|
||||
cardNumber: item.cardNumber,
|
||||
cardOwner: item.cardOwner,
|
||||
description: item.description,
|
||||
isWallet: item.method === PaymentMethodEnum.Wallet,
|
||||
}));
|
||||
}, [paymentMethod, getPaymentMethodTranslation]);
|
||||
|
||||
return paymentMethod.data
|
||||
.filter(item => item.enabled)
|
||||
.sort((a, b) => a.order - b.order)
|
||||
.map(item => ({
|
||||
id: item.id,
|
||||
label: getPaymentMethodTranslation(item.method, item.description),
|
||||
icon: getIconByMethod(item.method),
|
||||
method: item.method,
|
||||
cardNumber: item.cardNumber,
|
||||
cardOwner: item.cardOwner,
|
||||
description: item.description,
|
||||
isWallet: item.method === PaymentMethodEnum.Wallet,
|
||||
}));
|
||||
}, [paymentMethod, getPaymentMethodTranslation]);
|
||||
const selectedCreditCard = useMemo(() => {
|
||||
const selected = paymentOptions.find((opt) => opt.id === paymentType);
|
||||
if (selected?.method === PaymentMethodEnum.CreditCard) return selected;
|
||||
return null;
|
||||
}, [paymentOptions, paymentType]);
|
||||
|
||||
const selectedCreditCard = useMemo(() => {
|
||||
const selected = paymentOptions.find(opt => opt.id === paymentType);
|
||||
if (selected?.method === PaymentMethodEnum.CreditCard) return selected;
|
||||
return null;
|
||||
}, [paymentOptions, paymentType]);
|
||||
const handlePaymentTypeChange = (value: string) => {
|
||||
const selected = paymentOptions.find((opt) => opt.id === value);
|
||||
if (selected?.method !== PaymentMethodEnum.CreditCard) {
|
||||
setPaymentDesc("");
|
||||
setPaymentAttachments([]);
|
||||
}
|
||||
onPaymentTypeChange(value);
|
||||
setIsSelectedPayment(true);
|
||||
};
|
||||
|
||||
const handlePaymentTypeChange = (value: string) => {
|
||||
const selected = paymentOptions.find(opt => opt.id === value);
|
||||
if (selected?.method !== PaymentMethodEnum.CreditCard) {
|
||||
setPaymentDesc('');
|
||||
setPaymentAttachments([]);
|
||||
}
|
||||
onPaymentTypeChange(value);
|
||||
setIsSelectedPayment(true);
|
||||
};
|
||||
const handleCopyCardNumber = useCallback(
|
||||
async (cardNumber: string) => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(cardNumber);
|
||||
toast(tOrderDetail("SectionPayment.CreditCard.CopySuccess"), "success");
|
||||
} catch {
|
||||
toast(tOrderDetail("SectionPayment.CreditCard.CopyError"), "error");
|
||||
}
|
||||
},
|
||||
[tOrderDetail],
|
||||
);
|
||||
|
||||
const handleReceiptUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
const handleReceiptUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
try {
|
||||
const response = await singleUpload(file);
|
||||
if (response?.data?.url) {
|
||||
setPaymentAttachments([response.data.url]);
|
||||
toast(tOrderDetail('SectionPayment.CreditCard.UploadSuccess'), 'success');
|
||||
}
|
||||
} catch (error) {
|
||||
toast(extractErrorMessage(error), 'error');
|
||||
} finally {
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = '';
|
||||
}
|
||||
}
|
||||
};
|
||||
try {
|
||||
const response = await singleUpload(file);
|
||||
if (response?.data?.url) {
|
||||
setPaymentAttachments([response.data.url]);
|
||||
toast(tOrderDetail("SectionPayment.CreditCard.UploadSuccess"), "success");
|
||||
}
|
||||
} catch (error) {
|
||||
toast(extractErrorMessage(error), "error");
|
||||
} finally {
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = "";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
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>
|
||||
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>
|
||||
|
||||
<RadioGroup
|
||||
value={paymentType}
|
||||
onValueChange={handlePaymentTypeChange}
|
||||
className='flex flex-col gap-6 mt-6'
|
||||
>
|
||||
{paymentOptions.map(({ id, label, icon: Icon, isWallet }) => {
|
||||
const isDisabled = isWallet && isWalletInsufficient;
|
||||
<RadioGroup value={paymentType} onValueChange={handlePaymentTypeChange} className="flex flex-col gap-6 mt-6">
|
||||
{paymentOptions.map(({ id, label, icon: Icon, isWallet }) => {
|
||||
const isDisabled = isWallet && isWalletInsufficient;
|
||||
|
||||
return (
|
||||
<div key={id} className='flex items-center justify-between'>
|
||||
<RadioGroupItem
|
||||
value={id}
|
||||
id={`paymentMethod${id}`}
|
||||
disabled={isDisabled}
|
||||
/>
|
||||
<label
|
||||
className={`flex items-center gap-2 ${isDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`}
|
||||
htmlFor={`paymentMethod${id}`}
|
||||
>
|
||||
<div className='flex gap-1'>
|
||||
{isWallet && (
|
||||
<span className='text-xs text-gray-500 dark:text-gray-400 mt-1'>
|
||||
({formatPrice(walletAmount)} T)
|
||||
</span>
|
||||
)}
|
||||
<span className='text-xs mt-0.5'>{label}</span>
|
||||
</div>
|
||||
<Icon
|
||||
size={16}
|
||||
color='currentColor'
|
||||
className='mr-2'
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</RadioGroup>
|
||||
return (
|
||||
<div key={id} className="flex items-center justify-between">
|
||||
<RadioGroupItem value={id} id={`paymentMethod${id}`} disabled={isDisabled} />
|
||||
<label className={`flex items-center gap-2 ${isDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`} htmlFor={`paymentMethod${id}`}>
|
||||
<div className="flex gap-1">
|
||||
{isWallet && <span className="text-xs text-gray-500 dark:text-gray-400 mt-1">({formatPrice(walletAmount)} T)</span>}
|
||||
<span className="text-xs mt-0.5">{label}</span>
|
||||
</div>
|
||||
<Icon size={16} color="currentColor" className="mr-2" />
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</RadioGroup>
|
||||
|
||||
{selectedCreditCard && (
|
||||
<div className='mt-6 pt-4 border-t border-border flex flex-col gap-4'>
|
||||
{selectedCreditCard.cardOwner && (
|
||||
<div>
|
||||
<span className='text-xs text-gray-500 dark:text-gray-400'>
|
||||
{tOrderDetail('SectionPayment.CreditCard.CardOwnerLabel')}
|
||||
</span>
|
||||
<p className='text-sm font-medium mt-1'>
|
||||
{selectedCreditCard.cardOwner}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{selectedCreditCard.cardNumber && (
|
||||
<div>
|
||||
<span className='text-xs text-gray-500 dark:text-gray-400'>
|
||||
{tOrderDetail('SectionPayment.CreditCard.CardNumberLabel')}
|
||||
</span>
|
||||
<p className='text-sm font-medium mt-1' dir='ltr'>
|
||||
{selectedCreditCard.cardNumber}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{selectedCreditCard.description && (
|
||||
{selectedCreditCard && (
|
||||
<div className="mt-6 pt-4 border-t border-border flex flex-col gap-4">
|
||||
{(selectedCreditCard.cardOwner || selectedCreditCard.cardNumber) && (
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
{selectedCreditCard.cardOwner && (
|
||||
<div>
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400">{tOrderDetail("SectionPayment.CreditCard.CardOwnerLabel")}</span>
|
||||
<p className="text-sm font-medium mt-1">{selectedCreditCard.cardOwner}</p>
|
||||
</div>
|
||||
)}
|
||||
{selectedCreditCard.cardNumber && (
|
||||
<div className="text-left">
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400">{tOrderDetail("SectionPayment.CreditCard.CardNumberLabel")}</span>
|
||||
<button
|
||||
type="button"
|
||||
className="block text-sm font-medium mt-1 cursor-pointer hover:text-primary transition-colors"
|
||||
dir="ltr"
|
||||
onClick={() => handleCopyCardNumber(selectedCreditCard.cardNumber!)}
|
||||
>
|
||||
{selectedCreditCard.cardNumber}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{/* {selectedCreditCard.description && (
|
||||
<p className='text-xs text-gray-500 dark:text-gray-400 leading-5'>
|
||||
{selectedCreditCard.description}
|
||||
</p>
|
||||
)}
|
||||
<div>
|
||||
<label className='text-xs text-gray-500 dark:text-gray-400' htmlFor='paymentDesc'>
|
||||
{tOrderDetail('SectionPayment.CreditCard.PaymentDescLabel')}
|
||||
</label>
|
||||
<textarea
|
||||
id='paymentDesc'
|
||||
className='w-full px-4 py-2.5 mt-2 text-sm2 leading-6 outline-0 border border-border rounded-normal resize-none focus:ring-0'
|
||||
placeholder={tOrderDetail('SectionPayment.CreditCard.PaymentDescPlaceholder')}
|
||||
value={paymentDesc}
|
||||
onChange={(e) => setPaymentDesc(e.target.value)}
|
||||
rows={2}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<span className='text-xs text-gray-500 dark:text-gray-400'>
|
||||
{tOrderDetail('SectionPayment.CreditCard.ReceiptLabel')}
|
||||
</span>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type='file'
|
||||
accept='image/*'
|
||||
className='hidden'
|
||||
onChange={handleReceiptUpload}
|
||||
/>
|
||||
{paymentAttachments[0] ? (
|
||||
<div className='mt-2 relative w-full h-32 rounded-normal overflow-hidden border border-border'>
|
||||
<Image
|
||||
src={paymentAttachments[0]}
|
||||
alt='receipt'
|
||||
fill
|
||||
className='object-contain'
|
||||
/>
|
||||
<button
|
||||
type='button'
|
||||
className='absolute top-2 left-2 text-xs bg-white/90 dark:bg-background/90 px-2 py-1 rounded-normal'
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
disabled={isUploading}
|
||||
>
|
||||
{isUploading
|
||||
? tOrderDetail('SectionPayment.CreditCard.Uploading')
|
||||
: tOrderDetail('SectionPayment.CreditCard.UploadReceipt')}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
type='button'
|
||||
className='w-full mt-2 py-3 text-sm2 border border-dashed border-border rounded-normal text-gray-500 dark:text-gray-400 hover:border-primary transition-colors'
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
disabled={isUploading}
|
||||
>
|
||||
{isUploading
|
||||
? tOrderDetail('SectionPayment.CreditCard.Uploading')
|
||||
: tOrderDetail('SectionPayment.CreditCard.UploadReceipt')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)} */}
|
||||
<div>
|
||||
<label className="text-xs text-gray-500 dark:text-gray-400" htmlFor="paymentDesc">
|
||||
{tOrderDetail("SectionPayment.CreditCard.PaymentDescLabel")}
|
||||
</label>
|
||||
<textarea
|
||||
id="paymentDesc"
|
||||
className="w-full px-2 py-2.5 mt-2 text-xs leading-6 outline-0 border border-border rounded-normal resize-none focus:ring-0"
|
||||
placeholder={tOrderDetail("SectionPayment.CreditCard.PaymentDescPlaceholder")}
|
||||
value={paymentDesc}
|
||||
onChange={(e) => setPaymentDesc(e.target.value)}
|
||||
rows={2}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
<div>
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400">{tOrderDetail("SectionPayment.CreditCard.ReceiptLabel")}</span>
|
||||
<input ref={fileInputRef} type="file" accept="image/*" className="hidden" onChange={handleReceiptUpload} />
|
||||
{paymentAttachments[0] ? (
|
||||
<div className="mt-2 relative w-full h-32 rounded-normal overflow-hidden border border-border">
|
||||
<Image src={paymentAttachments[0]} alt="receipt" fill className="object-contain" />
|
||||
<button
|
||||
type="button"
|
||||
className="absolute top-2 left-2 text-xs bg-white/90 dark:bg-background/90 px-2 py-1 rounded-normal"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
disabled={isUploading}
|
||||
>
|
||||
{isUploading ? tOrderDetail("SectionPayment.CreditCard.Uploading") : tOrderDetail("SectionPayment.CreditCard.UploadReceipt")}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="w-full mt-2 py-3 text-sm2 border border-dashed border-border rounded-normal text-gray-500 dark:text-gray-400 hover:border-primary transition-colors"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
disabled={isUploading}
|
||||
>
|
||||
{isUploading ? tOrderDetail("SectionPayment.CreditCard.Uploading") : tOrderDetail("SectionPayment.CreditCard.UploadReceipt")}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,38 +1,38 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import Image from 'next/image';
|
||||
import React from 'react';
|
||||
import Button from '@/components/button/PrimaryButton';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { Clock } from 'iconsax-react';
|
||||
import clsx from 'clsx';
|
||||
import useToggle from '@/hooks/helpers/useToggle';
|
||||
import Prompt from '@/components/utils/Prompt';
|
||||
import { useCancelOrder, useGetOrderDetail } from '../../checkout/hooks/useOrderData';
|
||||
import ordersTranslations from '@/locales/fa/orders.json';
|
||||
import { toast } from '@/components/Toast';
|
||||
import { extractErrorMessage } from '@/lib/func';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import Button from "@/components/button/PrimaryButton";
|
||||
import { toast } from "@/components/Toast";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import Prompt from "@/components/utils/Prompt";
|
||||
import useToggle from "@/hooks/helpers/useToggle";
|
||||
import { extractErrorMessage } from "@/lib/func";
|
||||
import ordersTranslations from "@/locales/fa/orders.json";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import clsx from "clsx";
|
||||
import { Clock } from "iconsax-react";
|
||||
import Image from "next/image";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import React from "react";
|
||||
import { useCancelOrder, useGetOrderDetail } from "../../checkout/hooks/useOrderData";
|
||||
|
||||
const getDeliveryMethodTitle = (method: string) => {
|
||||
switch (method) {
|
||||
case 'deliveryCourier':
|
||||
return 'ارسال توسط پیک';
|
||||
case 'deliveryCar':
|
||||
return 'تحویل به خودرو';
|
||||
case 'pickup':
|
||||
return 'تحویل حضوری';
|
||||
case 'dineIn':
|
||||
return 'سرو در رستوران';
|
||||
default:
|
||||
return 'روش ارسال';
|
||||
}
|
||||
switch (method) {
|
||||
case "deliveryCourier":
|
||||
return "ارسال توسط پیک";
|
||||
case "deliveryCar":
|
||||
return "تحویل به خودرو";
|
||||
case "pickup":
|
||||
return "تحویل حضوری";
|
||||
case "dineIn":
|
||||
return "سرو در رستوران";
|
||||
default:
|
||||
return "روش ارسال";
|
||||
}
|
||||
};
|
||||
|
||||
const getPaymentMethodTitle = (method: string, fallback?: string) => {
|
||||
const methodKey = method as keyof typeof ordersTranslations.paymentMethod;
|
||||
return ordersTranslations.paymentMethod[methodKey] || fallback || 'نامشخص';
|
||||
const methodKey = method as keyof typeof ordersTranslations.paymentMethod;
|
||||
return ordersTranslations.paymentMethod[methodKey] || fallback || "نامشخص";
|
||||
};
|
||||
|
||||
// const getStatusPercentage = (status: string) => {
|
||||
@@ -59,17 +59,17 @@ const getPaymentMethodTitle = (method: string, fallback?: string) => {
|
||||
// };
|
||||
|
||||
const getStatusText = (status: string): string => {
|
||||
const statusKey = status as keyof typeof ordersTranslations.status;
|
||||
return ordersTranslations.status[statusKey] || 'نامشخص';
|
||||
const statusKey = status as keyof typeof ordersTranslations.status;
|
||||
return ordersTranslations.status[statusKey] || "نامشخص";
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string): string => {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('fa-IR', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
});
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString("fa-IR", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
});
|
||||
};
|
||||
|
||||
// const formatTime = (dateString: string): string => {
|
||||
@@ -81,191 +81,161 @@ const formatDate = (dateString: string): string => {
|
||||
// };
|
||||
|
||||
function OrderTrackingPage() {
|
||||
const { id, name } = useParams();
|
||||
const router = useRouter();
|
||||
const queryClient = useQueryClient();
|
||||
const { state: cancelModal, toggle: toggleCancelModal } = useToggle();
|
||||
const { data: orderDetail, isLoading } = useGetOrderDetail(id as string);
|
||||
const { mutate: cancelOrder } = useCancelOrder();
|
||||
const { id, name } = useParams();
|
||||
const router = useRouter();
|
||||
const queryClient = useQueryClient();
|
||||
const { state: cancelModal, toggle: toggleCancelModal } = useToggle();
|
||||
const { data: orderDetail, isLoading } = useGetOrderDetail(id as string);
|
||||
const { mutate: cancelOrder } = useCancelOrder();
|
||||
|
||||
const onCancelOrder = (e: React.MouseEvent | null) => {
|
||||
const onCancelOrder = (e: React.MouseEvent | null) => {
|
||||
if (!e || !id) return;
|
||||
|
||||
if (!e || !id) return;
|
||||
cancelOrder(id as string, {
|
||||
onSuccess: () => {
|
||||
toggleCancelModal();
|
||||
queryClient.invalidateQueries({ queryKey: ["order-detail", id] });
|
||||
toast("سفارش با موفقیت لغو شد", "success");
|
||||
},
|
||||
onError: (error) => {
|
||||
toast(extractErrorMessage(error), "error");
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
cancelOrder(id as string, {
|
||||
onSuccess: () => {
|
||||
toggleCancelModal();
|
||||
queryClient.invalidateQueries({ queryKey: ['order-detail', id] });
|
||||
toast('سفارش با موفقیت لغو شد', 'success');
|
||||
},
|
||||
onError: (error) => {
|
||||
toast(extractErrorMessage(error), 'error');
|
||||
}
|
||||
});
|
||||
};
|
||||
return (
|
||||
<div className="fixed inset-0 bg-container flex flex-col">
|
||||
<div className="flex-1 overflow-y-auto px-4 py-6">
|
||||
<div className="max-w-2xl mx-auto flex flex-col gap-6">
|
||||
{isLoading ? (
|
||||
<>
|
||||
<Skeleton className="h-6 w-48 mx-auto" />
|
||||
<div className="flex flex-col gap-4">
|
||||
<Skeleton className="h-5 w-full" />
|
||||
<Skeleton className="h-5 w-full" />
|
||||
<Skeleton className="h-20 w-full" />
|
||||
<Skeleton className="h-5 w-full" />
|
||||
</div>
|
||||
</>
|
||||
) : orderDetail?.data ? (
|
||||
<>
|
||||
<h1 className="text-lg font-semibold text-center">{getDeliveryMethodTitle(orderDetail.data.deliveryMethod.method)}</h1>
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-container flex flex-col">
|
||||
<div className='flex-1 overflow-y-auto px-4 py-6'>
|
||||
<div className='max-w-2xl mx-auto flex flex-col gap-6'>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<Skeleton className='h-6 w-48 mx-auto' />
|
||||
<div className='flex flex-col gap-4'>
|
||||
<Skeleton className='h-5 w-full' />
|
||||
<Skeleton className='h-5 w-full' />
|
||||
<Skeleton className='h-20 w-full' />
|
||||
<Skeleton className='h-5 w-full' />
|
||||
</div>
|
||||
</>
|
||||
) : orderDetail?.data ? (
|
||||
<>
|
||||
<h1 className='text-lg font-semibold text-center'>
|
||||
{getDeliveryMethodTitle(orderDetail.data.deliveryMethod.method)}
|
||||
</h1>
|
||||
<div className="flex flex-col">
|
||||
<div className="flex justify-between items-center h-16 border-b border-border">
|
||||
<span className="text-sm text-muted-foreground flex items-center gap-2">
|
||||
<Clock className="stroke-current" size={16} />
|
||||
زمان سفارش
|
||||
</span>
|
||||
<div className="flex items-end gap-0.5">
|
||||
<span className="text-sm font-semibold">{formatDate(orderDetail.data.createdAt)}</span>
|
||||
{/* <span className='text-xs text-muted-foreground'>{formatTime(orderDetail.data.createdAt)}</span> */}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between items-center h-16 border-b border-border">
|
||||
<span className="text-sm text-muted-foreground">نوع ارسال</span>
|
||||
<span className="text-sm font-semibold">{orderDetail.data?.deliveryMethod?.description}</span>
|
||||
</div>
|
||||
{orderDetail.data.carAddress && (
|
||||
<div className="flex justify-between items-center h-16 border-b border-border">
|
||||
<div className="text-sm text-muted-foreground mb-1">اطلاعات خودرو</div>
|
||||
<div className="text-sm font-semibold">
|
||||
{orderDetail.data.carAddress.carModel} {orderDetail.data.carAddress.carColor} - پلاک: {orderDetail.data.carAddress.plateNumber}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-between items-center h-16 border-b border-border">
|
||||
<span className="text-sm text-muted-foreground">شماره سفارش</span>
|
||||
<span className="text-sm font-semibold">#{orderDetail.data.orderNumber}</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center h-16 border-b border-border">
|
||||
<span className="text-sm text-muted-foreground">وضعیت سفارش</span>
|
||||
<span className="text-sm font-semibold">{getStatusText(orderDetail.data.status)}</span>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-col'>
|
||||
<div className='flex justify-between items-center h-16 border-b border-border'>
|
||||
<span className='text-sm text-muted-foreground flex items-center gap-2'>
|
||||
<Clock className='stroke-current' size={16} />
|
||||
زمان سفارش
|
||||
</span>
|
||||
<div className='flex items-end gap-0.5'>
|
||||
<span className='text-sm font-semibold'>{formatDate(orderDetail.data.createdAt)}</span>
|
||||
{/* <span className='text-xs text-muted-foreground'>{formatTime(orderDetail.data.createdAt)}</span> */}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex justify-between items-center h-16 border-b border-border'>
|
||||
<span className='text-sm text-muted-foreground'>نوع ارسال</span>
|
||||
<span className='text-sm font-semibold'>{orderDetail.data?.deliveryMethod?.description}</span>
|
||||
</div>
|
||||
{orderDetail.data.carAddress && (
|
||||
<div className='flex justify-between items-center h-16 border-b border-border'>
|
||||
<div className='text-sm text-muted-foreground mb-1'>اطلاعات خودرو</div>
|
||||
<div className='text-sm font-semibold'>
|
||||
{orderDetail.data.carAddress.carModel} {orderDetail.data.carAddress.carColor} - پلاک: {orderDetail.data.carAddress.plateNumber}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className='flex justify-between items-center h-16 border-b border-border'>
|
||||
<span className='text-sm text-muted-foreground'>شماره سفارش</span>
|
||||
<span className='text-sm font-semibold'>#{orderDetail.data.orderNumber}</span>
|
||||
</div>
|
||||
<div className='flex justify-between items-center h-16 border-b border-border'>
|
||||
<span className='text-sm text-muted-foreground'>وضعیت سفارش</span>
|
||||
<span className='text-sm font-semibold'>{getStatusText(orderDetail.data.status)}</span>
|
||||
</div>
|
||||
{orderDetail.data.tableNumber && (
|
||||
<div className="flex justify-between items-center h-16 border-b border-border">
|
||||
<span className="text-sm text-muted-foreground">شماره میز</span>
|
||||
<span className="text-sm font-semibold">#{orderDetail.data.tableNumber}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{orderDetail.data.tableNumber && (
|
||||
<div className='flex justify-between items-center h-16 border-b border-border'>
|
||||
<span className='text-sm text-muted-foreground'>شماره میز</span>
|
||||
<span className='text-sm font-semibold'>#{orderDetail.data.tableNumber}</span>
|
||||
</div>
|
||||
)}
|
||||
{orderDetail.data.userAddress && (
|
||||
<div className="py-3 border-b border-border">
|
||||
<div className="text-sm text-muted-foreground mb-1">آدرس تحویل</div>
|
||||
<div className="text-sm">{orderDetail.data.userAddress.address}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{orderDetail.data.userAddress && (
|
||||
<div className='py-3 border-b border-border'>
|
||||
<div className='text-sm text-muted-foreground mb-1'>آدرس تحویل</div>
|
||||
<div className='text-sm'>{orderDetail.data.userAddress.address}</div>
|
||||
</div>
|
||||
)}
|
||||
{orderDetail.data.paymentMethod && (
|
||||
<div className="flex justify-between items-center h-16 border-b border-border">
|
||||
<span className="text-sm text-muted-foreground">نوع پرداخت</span>
|
||||
<span className="text-sm font-semibold">{getPaymentMethodTitle(orderDetail.data.paymentMethod.method, orderDetail.data.paymentMethod.description)}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{orderDetail.data.paymentMethod && (
|
||||
<div className='flex justify-between items-center h-16 border-b border-border'>
|
||||
<span className='text-sm text-muted-foreground'>نوع پرداخت</span>
|
||||
<span className='text-sm font-semibold'>
|
||||
{getPaymentMethodTitle(
|
||||
orderDetail.data.paymentMethod.method,
|
||||
orderDetail.data.paymentMethod.description
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{orderDetail.data.payments?.[0]?.description?.trim() && (
|
||||
<div className="py-3 border-b border-border">
|
||||
<div className="text-sm text-muted-foreground mb-1">توضیحات پرداخت</div>
|
||||
<div className="text-sm">{orderDetail.data.payments[0].description}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{orderDetail.data.payments?.[0]?.description?.trim() && (
|
||||
<div className='py-3 border-b border-border'>
|
||||
<div className='text-sm text-muted-foreground mb-1'>توضیحات پرداخت</div>
|
||||
<div className='text-sm'>{orderDetail.data.payments[0].description}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{orderDetail.data.payments?.[0]?.attachments?.length ? (
|
||||
<div className='py-3 border-b border-border'>
|
||||
<div className='text-sm text-muted-foreground mb-2'>پیوست پرداخت</div>
|
||||
<div className='flex flex-col gap-2'>
|
||||
{orderDetail.data.payments[0].attachments.map((attachment, index) => (
|
||||
<div
|
||||
key={attachment}
|
||||
className='relative w-full h-40 rounded-normal overflow-hidden border border-border'
|
||||
>
|
||||
<Image
|
||||
src={attachment}
|
||||
alt={`پیوست پرداخت ${index + 1}`}
|
||||
fill
|
||||
className='object-contain'
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className='flex justify-between items-center py-4 border-t border-border'>
|
||||
<span className='text-sm font-medium'>مجموع سفارش</span>
|
||||
<span className='text-sm font-bold '>
|
||||
{orderDetail.data.total.toLocaleString('fa-IR')} تومان
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className='text-center text-muted-foreground py-12'>
|
||||
اطلاعات سفارش یافت نشد
|
||||
{orderDetail.data.payments?.[0]?.attachments?.length ? (
|
||||
<div className="py-3 border-b border-border">
|
||||
<div className="text-sm text-muted-foreground mb-2">پیوست پرداخت</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
{orderDetail.data.payments[0].attachments.map((attachment, index) => (
|
||||
<div key={attachment} className="relative w-full h-40 rounded-normal overflow-hidden border border-border">
|
||||
<Image src={attachment} alt={`پیوست پرداخت ${index + 1}`} fill className="object-contain" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className='p-4 border-t border-border bg-container'>
|
||||
<div className='max-w-2xl mx-auto grid grid-cols-2 gap-4'>
|
||||
<Button
|
||||
className='dark:bg-white dark:text-black! dark:hover:bg-gray-100'
|
||||
onClick={() => router.push(`/${name}`)}
|
||||
type='button'>
|
||||
بازگشت به منو
|
||||
</Button>
|
||||
<Button
|
||||
type='submit'
|
||||
onClick={toggleCancelModal}
|
||||
className='bg-disabled! text-foreground!'
|
||||
disabled={
|
||||
orderDetail?.data?.status === 'cancelled' ||
|
||||
orderDetail?.data?.status === 'delivered' ||
|
||||
orderDetail?.data?.status === 'delivering'
|
||||
}
|
||||
>
|
||||
لغو سفارش
|
||||
</Button>
|
||||
<div className="flex justify-between items-center py-4 border-t border-border">
|
||||
<span className="text-sm font-medium">مجموع سفارش</span>
|
||||
<span className="text-sm font-bold ">{orderDetail.data.total.toLocaleString("fa-IR")} تومان</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={clsx(
|
||||
'fixed inset-0 z-1001',
|
||||
!cancelModal && 'pointer-events-none'
|
||||
)}>
|
||||
<Prompt
|
||||
title={'لغو سفارش'}
|
||||
description={'آیا از درخواست خود اطمینان دارید؟'}
|
||||
textConfirm={'بله'}
|
||||
textCancel={'منصرف شدم'}
|
||||
onConfirm={onCancelOrder}
|
||||
visible={cancelModal}
|
||||
onClick={toggleCancelModal}
|
||||
onCancel={toggleCancelModal}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="text-center text-muted-foreground py-12">اطلاعات سفارش یافت نشد</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
</div>
|
||||
|
||||
<div className="p-4 border-t border-border bg-container">
|
||||
<div className="max-w-2xl mx-auto grid grid-cols-2 gap-4">
|
||||
<Button className="dark:bg-white dark:text-black! dark:hover:bg-gray-100" onClick={() => router.push(`/${name}`)} type="button">
|
||||
بازگشت به منو
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
onClick={toggleCancelModal}
|
||||
className="bg-disabled! text-foreground!"
|
||||
disabled={orderDetail?.data?.status === "cancelled" || orderDetail?.data?.status === "delivered" || orderDetail?.data?.status === "delivering"}
|
||||
>
|
||||
لغو سفارش
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={clsx("fixed inset-0 z-1001", !cancelModal && "pointer-events-none")}>
|
||||
<Prompt
|
||||
title={"لغو سفارش"}
|
||||
description={"آیا از درخواست خود اطمینان دارید؟"}
|
||||
textConfirm={"بله"}
|
||||
textCancel={"منصرف شدم"}
|
||||
onConfirm={onCancelOrder}
|
||||
visible={cancelModal}
|
||||
onClick={toggleCancelModal}
|
||||
onCancel={toggleCancelModal}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default OrderTrackingPage;
|
||||
export default OrderTrackingPage;
|
||||
|
||||
Reference in New Issue
Block a user