diff --git a/src/app/[name]/(Dialogs)/order/checkout/[id]/components/PaymentSection.tsx b/src/app/[name]/(Dialogs)/order/checkout/[id]/components/PaymentSection.tsx index 99998e0..e338f0a 100644 --- a/src/app/[name]/(Dialogs)/order/checkout/[id]/components/PaymentSection.tsx +++ b/src/app/[name]/(Dialogs)/order/checkout/[id]/components/PaymentSection.tsx @@ -9,7 +9,7 @@ import { extractErrorMessage } from "@/lib/func"; import { Card, Icon, Wallet2 } from "iconsax-react"; import Image from "next/image"; import { glassSurfaceCard } from "@/lib/styles/glassSurface"; -import { useCallback, useMemo, useRef } from "react"; +import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; import { PaymentMethodEnum } from "../../enum/Enum"; import { useGetPaymentMethod } from "../../hooks/useOrderData"; @@ -20,6 +20,11 @@ type PaymentSectionProps = { onPaymentTypeChange: (id: string) => void; }; +type CreditCardOption = { + cardNumber: string; + cardOwner: string; +}; + const getIconByMethod = (method: PaymentMethodEnum): Icon => { if (method === PaymentMethodEnum.Online || method === PaymentMethodEnum.CreditCard) { return Card; @@ -40,6 +45,7 @@ export const PaymentSection = ({ paymentType, onPaymentTypeChange }: PaymentSect const { data: cartData } = useGetCartItems(isSuccess); const { mutateAsync: singleUpload, isPending: isUploading } = useSingleUpload(); const fileInputRef = useRef(null); + const [selectedCardNumber, setSelectedCardNumber] = useState(""); const walletAmount = userWallet?.data?.balance ?? 0; const totalAmount = cartData?.data?.total ?? 0; @@ -69,6 +75,11 @@ export const PaymentSection = ({ paymentType, onPaymentTypeChange }: PaymentSect method: item.method, cardNumber: item.cardNumber, cardOwner: item.cardOwner, + cards: + item.cards?.map((card) => ({ + cardNumber: card.cardNumber, + cardOwner: card.owner, + })) ?? [], description: item.description, isWallet: item.method === PaymentMethodEnum.Wallet, })); @@ -85,11 +96,45 @@ export const PaymentSection = ({ paymentType, onPaymentTypeChange }: PaymentSect if (selected?.method !== PaymentMethodEnum.CreditCard) { setPaymentDesc(""); setPaymentAttachments([]); + setSelectedCardNumber(""); } onPaymentTypeChange(value); setIsSelectedPayment(true); }; + const creditCardOptions = useMemo(() => { + if (!selectedCreditCard) return []; + + const normalizedCards = selectedCreditCard.cards.filter( + (card): card is CreditCardOption => !!card.cardNumber && !!card.cardOwner, + ); + + if (normalizedCards.length > 0) return normalizedCards; + + if (selectedCreditCard.cardNumber && selectedCreditCard.cardOwner) { + return [{ cardNumber: selectedCreditCard.cardNumber, cardOwner: selectedCreditCard.cardOwner }]; + } + + return []; + }, [selectedCreditCard]); + + useEffect(() => { + if (creditCardOptions.length === 0) { + setSelectedCardNumber(""); + return; + } + + const hasSelectedCard = creditCardOptions.some((item) => item.cardNumber === selectedCardNumber); + if (!hasSelectedCard) { + setSelectedCardNumber(creditCardOptions[0].cardNumber); + } + }, [creditCardOptions, selectedCardNumber]); + + const selectedCard = useMemo( + () => creditCardOptions.find((item) => item.cardNumber === selectedCardNumber) ?? null, + [creditCardOptions, selectedCardNumber], + ); + const handleCopyCardNumber = useCallback( async (cardNumber: string) => { try { @@ -147,24 +192,49 @@ export const PaymentSection = ({ paymentType, onPaymentTypeChange }: PaymentSect {selectedCreditCard && (
- {(selectedCreditCard.cardOwner || selectedCreditCard.cardNumber) && ( + {creditCardOptions.length > 0 && ( +
+

+ {`تعداد کارت های مقصد: ${creditCardOptions.length}`} +

+ {creditCardOptions.map((card) => { + const isActiveCard = selectedCardNumber === card.cardNumber; + return ( + + ); + })} +
+ )} + {selectedCard && (
- {selectedCreditCard.cardOwner && ( + {selectedCard.cardOwner && (
{tOrderDetail("SectionPayment.CreditCard.CardOwnerLabel")} -

{selectedCreditCard.cardOwner}

+

{selectedCard.cardOwner}

)} - {selectedCreditCard.cardNumber && ( + {selectedCard.cardNumber && (
{tOrderDetail("SectionPayment.CreditCard.CardNumberLabel")}
)} diff --git a/src/app/[name]/(Dialogs)/order/checkout/types/Types.ts b/src/app/[name]/(Dialogs)/order/checkout/types/Types.ts index d2e4fee..8584fdc 100644 --- a/src/app/[name]/(Dialogs)/order/checkout/types/Types.ts +++ b/src/app/[name]/(Dialogs)/order/checkout/types/Types.ts @@ -116,10 +116,21 @@ export interface PaymentMethodResponse { enabled: boolean; order: number; merchantId: string | null; + cards?: PaymentMethodCard[]; } export type PaymentMethodsResponse = BaseResponse; +export interface PaymentMethodCard { + id: string; + createdAt: string; + updatedAt: string; + deletedAt: string | null; + paymentMethod: string; + cardNumber: string; + owner: string; +} + export type CheckoutStoreType = { isSelectedAddress: boolean; setIsSelectedAddress: (value: boolean) => void; diff --git a/src/config/const.ts b/src/config/const.ts index d6c6c30..c7007b2 100644 --- a/src/config/const.ts +++ b/src/config/const.ts @@ -1,5 +1,5 @@ // export const API_BASE_URL = "https://dmenuplus-api-production.dev.danakcorp.com"; -// export const API_BASE_URL = "https://dmenu-api.danakcorp.com"; -export const API_BASE_URL = "http://192.168.99.131:2000"; +export const API_BASE_URL = "https://dmenu-api.danakcorp.com"; +// export const API_BASE_URL = "http://192.168.99.131:2000"; export const TOKEN_NAME = "dmenu-t"; export const REFRESH_TOKEN_NAME = "dmenu-rt";