From 3b0b8ceab6dd916ebf2102a94be675bd92fb6e34 Mon Sep 17 00:00:00 2001 From: Mohammed Al-yaseen Date: Wed, 31 Dec 2025 23:49:04 +0300 Subject: [PATCH] checkout: add card deyails & card amount BT --- src/assets/locals/ar.json | 12 +- src/assets/locals/en.json | 12 +- src/components/Icons/CardAmountIcon.tsx | 55 ++++ src/features/order/orderSlice.ts | 3 +- src/pages/CardDetails/CardDetails.tsx | 9 +- .../components/GiftAmountBottomSheet.tsx | 109 ++++++++ .../GiftAmountCard/GiftAmountCard.tsx | 5 +- .../components/CartMobileTabletLayout.tsx | 1 - src/pages/checkout/components/GiftCard.tsx | 262 +++++++++++------- .../components/GiftDetails.module.css | 10 + src/pages/checkout/page.tsx | 2 +- src/pages/menu/page.tsx | 1 - 12 files changed, 373 insertions(+), 108 deletions(-) create mode 100644 src/components/Icons/CardAmountIcon.tsx create mode 100644 src/pages/CardDetails/components/GiftAmountBottomSheet.tsx diff --git a/src/assets/locals/ar.json b/src/assets/locals/ar.json index ca47576..5e0d67d 100644 --- a/src/assets/locals/ar.json +++ b/src/assets/locals/ar.json @@ -267,6 +267,10 @@ "checkout": { "customerName": "اسم العميل", "paymentSummary": "ملخص الدفع", + "holdayGiftCard": "هدية العيد", + "messageIncluded": "الرسالة مضمنة", + "to": "ل", + "giftSummary": "ملخص الهدية", "customerInformation": "تفاصيل العميل", "title": "الدفع", "cash": "كاش", @@ -481,6 +485,12 @@ "yourPhone": "رقم هاتفك", "keepMyNameSecret": "الاحتفاظ باسمي مخفياً", "receiverInformation": "تفاصيل المستلم", - "costumeAmount": "مبلغ البطاقة" + "costumeAmount": "مبلغ البطاقة", + "enterCustomOucherAmount": "أدخل مبلغ البطاقة المخصص", + "amount": "المبلغ", + "eCardAmount": "مبلغ البطاقة الإلكترونية", + "receiverName": "اسم المستلم", + "edit": "تعديل", + "yourInformation": "تفاصيلك" } } diff --git a/src/assets/locals/en.json b/src/assets/locals/en.json index 70b77ed..554d29e 100644 --- a/src/assets/locals/en.json +++ b/src/assets/locals/en.json @@ -278,6 +278,10 @@ "customerName": "Customer Name", "paymentSummary": "Payment Summary", "orderSummary": "Order Summary", + "holdayGiftCard": "Holday gift card", + "messageIncluded": "Message included", + "to": "To", + "giftSummary": "Gift Summary", "customerInformation": "Customer Information", "title": "Checkout", "cash": "Cash", @@ -492,6 +496,12 @@ "yourPhone": "Your Phone", "keepMyNameSecret": "Keep my name secret", "receiverInformation": "Receiver Information", - "costumeAmount": "Costume amount" + "costumeAmount": "Costume amount", + "enterCustomOucherAmount": "Enter custom oucher amount", + "amount": "Amount", + "eCardAmount": "E-Card Amount", + "receiverName": "Receiver Name", + "edit": "Edit", + "yourInformation": "Your Information" } } diff --git a/src/components/Icons/CardAmountIcon.tsx b/src/components/Icons/CardAmountIcon.tsx new file mode 100644 index 0000000..d0b4ded --- /dev/null +++ b/src/components/Icons/CardAmountIcon.tsx @@ -0,0 +1,55 @@ +interface CardAmountIconType { + className?: string; + onClick?: () => void; +} + +const CardAmountIcon = ({ className, onClick }: CardAmountIconType) => { + return ( + + + + + + + + + ); +}; + +export default CardAmountIcon; diff --git a/src/features/order/orderSlice.ts b/src/features/order/orderSlice.ts index d361b66..02e5d35 100644 --- a/src/features/order/orderSlice.ts +++ b/src/features/order/orderSlice.ts @@ -26,6 +26,7 @@ export interface OfficeDetailsType { } export interface GiftDetailsType { + amount: number; receiverName: string; receiverPhone: string; message: string; @@ -33,7 +34,7 @@ export interface GiftDetailsType { senderPhone: string; senderEmail: string; isSecret: boolean; - cardId: string; + cardId: number; giftType: "items" | "vouchers" | "itemsAndVouchers"; } diff --git a/src/pages/CardDetails/CardDetails.tsx b/src/pages/CardDetails/CardDetails.tsx index 74473a2..fbf9304 100644 --- a/src/pages/CardDetails/CardDetails.tsx +++ b/src/pages/CardDetails/CardDetails.tsx @@ -15,6 +15,7 @@ import SenderformationCard from "./components/SenderformationCard/Senderformatio import TimeEstimateCard from "pages/cart/components/timeEstimate/TimeEstimateCard"; import { useNavigate, useParams } from "react-router-dom"; import GiftAmountCard from "./components/GiftAmountCard/GiftAmountCard"; +import { GiftAmountBottomSheet } from "./components/GiftAmountBottomSheet"; export default function CardDetailsPage() { const { t } = useTranslation(); @@ -22,6 +23,7 @@ export default function CardDetailsPage() { const { giftDetails } = useAppSelector(selectCart); const { isRTL } = useAppSelector((state) => state.locale); const [currentIndex, setCurrentIndex] = useState(0); + const [isGiftAmountBottomSheetOpen, setIsGiftAmountBottomSheetOpen] = useState(false); const { subdomain } = useParams(); const navigate = useNavigate(); @@ -29,7 +31,7 @@ export default function CardDetailsPage() { useEffect(() => { if (cards && giftDetails?.cardId) { const index = cards.findIndex( - (card) => card.id.toString() === giftDetails.cardId, + (card) => card?.id?.toString() === giftDetails.cardId, ); if (index !== -1) { setCurrentIndex(index); @@ -56,6 +58,7 @@ export default function CardDetailsPage() { }, [subdomain]); return ( + <> {t("cardDetails.title")} @@ -131,7 +134,7 @@ export default function CardDetailsPage() { layout="vertical" style={{ display: "flex", flexDirection: "column", gap: 16 }} > - {giftDetails?.giftType !== "items" && } + {giftDetails?.giftType !== "items" && setIsGiftAmountBottomSheetOpen(true)} />} @@ -148,5 +151,7 @@ export default function CardDetailsPage() { + setIsGiftAmountBottomSheetOpen(false)} /> + ); } diff --git a/src/pages/CardDetails/components/GiftAmountBottomSheet.tsx b/src/pages/CardDetails/components/GiftAmountBottomSheet.tsx new file mode 100644 index 0000000..ad11218 --- /dev/null +++ b/src/pages/CardDetails/components/GiftAmountBottomSheet.tsx @@ -0,0 +1,109 @@ +import { Button, Form } from "antd"; +import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx"; +import { useState, useEffect } from "react"; +import { useTranslation } from "react-i18next"; + +import { + selectCart, + selectGrandTotal, + updateGiftDetails, + updateSplitBillAmount, +} from "features/order/orderSlice"; +import { useAppDispatch, useAppSelector } from "redux/hooks"; +import ProText from "components/ProText"; +import { ProInputNumber } from "components/Inputs/ProInputNumber"; + +interface SplitBillChoiceBottomSheetProps { + isOpen: boolean; + onClose: () => void; +} + +export function GiftAmountBottomSheet({ + isOpen, + onClose, +}: SplitBillChoiceBottomSheetProps) { + const { t } = useTranslation(); + const dispatch = useAppDispatch(); + const { giftDetails, } = useAppSelector(selectCart); + const [amount, setAmount] = useState( + giftDetails?.amount && giftDetails?.amount > 0 ? giftDetails?.amount?.toString() : "", + ); + + const handleSave = () => { + const numAmount = parseFloat(amount) || 0; + dispatch(updateGiftDetails({amount: numAmount})); + onClose(); + }; + + + return ( + +
+
+ + {t("cardDetails.enterCustomOucherAmount")} + + + { + setAmount(value?.toString() || ""); + dispatch(updateSplitBillAmount(Number(value) || 0)); + }} + placeholder={t("cardDetails.amount")} + min={0} + /> + +
+
+ +
+ +
+ + ); +} diff --git a/src/pages/CardDetails/components/GiftAmountCard/GiftAmountCard.tsx b/src/pages/CardDetails/components/GiftAmountCard/GiftAmountCard.tsx index ab05c55..2ace4e4 100644 --- a/src/pages/CardDetails/components/GiftAmountCard/GiftAmountCard.tsx +++ b/src/pages/CardDetails/components/GiftAmountCard/GiftAmountCard.tsx @@ -6,11 +6,11 @@ import ArabicPrice from "components/ArabicPrice"; import ProText from "components/ProText"; import EditIcon from "components/Icons/EditIcon"; -export default function GiftAmountCard() { +export default function GiftAmountCard({ onOpen }: { onOpen: () => void }) { const { t } = useTranslation(); return ( - +