From 19212860c398e03ba14278eff9f8b05e3a8765f3 Mon Sep 17 00:00:00 2001 From: Mohammed Al-yaseen Date: Wed, 24 Dec 2025 22:34:11 +0300 Subject: [PATCH] checkout: reafactor UI --- package.json | 2 +- src/assets/locals/ar.json | 4 +- src/assets/locals/en.json | 4 +- .../PaymentDetails/PaymentDetails.tsx | 2 +- .../PaymentMethods/PaymentMethods.tsx | 30 +++++----- src/components/ProInputCard/ProInputCard.tsx | 12 +++- .../checkout/components/BriefMenuCard.tsx | 55 +++++++++++++++++++ .../checkout/components/PhoneCard.module.css | 3 + src/pages/checkout/components/phoneCard.tsx | 10 +++- src/pages/checkout/page.tsx | 9 +-- src/pages/pay/page.tsx | 2 +- 11 files changed, 106 insertions(+), 27 deletions(-) create mode 100644 src/pages/checkout/components/BriefMenuCard.tsx create mode 100644 src/pages/checkout/components/PhoneCard.module.css diff --git a/package.json b/package.json index 761e2a7..b07b009 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "version": "0.0.0", "type": "module", "scripts": { - "dev": "vite --open", + "dev": "vite", "build": "vite build", "production": "vite --mode production --open", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", diff --git a/src/assets/locals/ar.json b/src/assets/locals/ar.json index e44791b..62ce0d0 100644 --- a/src/assets/locals/ar.json +++ b/src/assets/locals/ar.json @@ -281,7 +281,9 @@ "expiresInDescription": "تنتهي في:12/26", "phoneNumber": "رقم الهاتف", "pleaseSelectPaymentMethod": "يرجى اختيار طريقة الدفع", - "pleaseEnterPhoneNumber": "يرجى إدخال رقم الهاتف" + "pleaseEnterPhoneNumber": "يرجى إدخال رقم الهاتف", + "viewOrder": "عرض الطلب", + "itemsSummary": "ملخص العناصر" }, "address": { "title": "العنوان", diff --git a/src/assets/locals/en.json b/src/assets/locals/en.json index 08277a3..11c85c0 100644 --- a/src/assets/locals/en.json +++ b/src/assets/locals/en.json @@ -291,7 +291,9 @@ "expiresInDescription": "Expires in:12/26", "phoneNumber": "Phone Number", "pleaseSelectPaymentMethod": "Please select payment method", - "pleaseEnterPhoneNumber": "Please enter phone number" + "pleaseEnterPhoneNumber": "Please enter phone number", + "viewOrder": "View Order", + "itemsSummary": "Items Summary" }, "address": { "title": "Address", diff --git a/src/components/PaymentDetails/PaymentDetails.tsx b/src/components/PaymentDetails/PaymentDetails.tsx index 8de83c0..58c74ce 100644 --- a/src/components/PaymentDetails/PaymentDetails.tsx +++ b/src/components/PaymentDetails/PaymentDetails.tsx @@ -14,7 +14,7 @@ export default function PaymentDetails({ order }: { order?: Order }) { {t("cart.orderSummary")} - +
{t("cart.totalAmount")} diff --git a/src/components/PaymentMethods/PaymentMethods.tsx b/src/components/PaymentMethods/PaymentMethods.tsx index 86aa6cf..39e66e5 100644 --- a/src/components/PaymentMethods/PaymentMethods.tsx +++ b/src/components/PaymentMethods/PaymentMethods.tsx @@ -41,12 +41,12 @@ const PaymentMethods = () => { }, ] : []), - { - label: t("checkout.creditDebitCard"), - value: "creditDebitCard", - price: t("checkout.expiresIn") + ":12/26", - hideCurrency: true, - }, + // { + // label: t("checkout.creditDebitCard"), + // value: "creditDebitCard", + // price: t("checkout.expiresIn") + ":12/26", + // hideCurrency: true, + // }, { label: t("checkout.differentCard"), value: "differentCard", @@ -56,15 +56,15 @@ const PaymentMethods = () => {
), hideCurrency: true, - }, - { - label: t("checkout.fascanoWallet"), - value: "fascanoWallet", - price: "7.50", - style: { - color: colors.primary, - }, - }, + } + // { + // label: t("checkout.fascanoWallet"), + // value: "fascanoWallet", + // price: "7.50", + // style: { + // color: colors.primary, + // }, + // }, ]; const onPaymentSelect = (value: string) => { diff --git a/src/components/ProInputCard/ProInputCard.tsx b/src/components/ProInputCard/ProInputCard.tsx index 7de9dac..0f277e0 100644 --- a/src/components/ProInputCard/ProInputCard.tsx +++ b/src/components/ProInputCard/ProInputCard.tsx @@ -28,7 +28,17 @@ const ProInputCard: FunctionComponent = ({ }} > {title && typeof title === "string" && ( - {title} + + {title} + )} {title && typeof title !== "string" && title}
{titleRight}
diff --git a/src/pages/checkout/components/BriefMenuCard.tsx b/src/pages/checkout/components/BriefMenuCard.tsx new file mode 100644 index 0000000..60d91d7 --- /dev/null +++ b/src/pages/checkout/components/BriefMenuCard.tsx @@ -0,0 +1,55 @@ +import NextIcon from "components/Icons/NextIcon"; +import InvoiceIcon from "components/Icons/order/InvoiceIcon"; +import ProInputCard from "components/ProInputCard/ProInputCard.tsx"; +import ProText from "components/ProText"; +import { useTranslation } from "react-i18next"; +import { useAppSelector } from "redux/hooks"; +import { selectCart } from "features/order/orderSlice"; +import { useNavigate, useParams } from "react-router-dom"; + +export default function BriefMenuCard() { + const { t } = useTranslation(); + const { items } = useAppSelector(selectCart); + const totalItems = items.length; + const { subdomain } = useParams(); + const navigate = useNavigate(); + + return ( + <> + +
{ + navigate(`/${subdomain}/cart`); + }} + > + + + + + {t("checkout.viewOrder")} ( {totalItems} {t("cart.items")} ) + + +
+ + + ); +} diff --git a/src/pages/checkout/components/PhoneCard.module.css b/src/pages/checkout/components/PhoneCard.module.css new file mode 100644 index 0000000..9bbe080 --- /dev/null +++ b/src/pages/checkout/components/PhoneCard.module.css @@ -0,0 +1,3 @@ +.phoneCard { + height: 150px !important; +} \ No newline at end of file diff --git a/src/pages/checkout/components/phoneCard.tsx b/src/pages/checkout/components/phoneCard.tsx index ea8259f..4002175 100644 --- a/src/pages/checkout/components/phoneCard.tsx +++ b/src/pages/checkout/components/phoneCard.tsx @@ -4,6 +4,7 @@ import { selectCart } from "features/order/orderSlice"; import { OrderType } from "pages/checkout/hooks/types.ts"; import { useTranslation } from "react-i18next"; import { useAppSelector } from "redux/hooks"; +import styles from "./PhoneCard.module.css"; export default function PhoneCard() { const { t } = useTranslation(); @@ -12,8 +13,13 @@ export default function PhoneCard() { return ( orderType !== OrderType.Gift && ( <> - - + +
+ +
) diff --git a/src/pages/checkout/page.tsx b/src/pages/checkout/page.tsx index 7354baa..8680a5e 100644 --- a/src/pages/checkout/page.tsx +++ b/src/pages/checkout/page.tsx @@ -8,15 +8,15 @@ import { useTranslation } from "react-i18next"; import { useAppSelector } from "redux/hooks"; import styles from "../address/address.module.css"; import { AddressSummary } from "./components/AddressSummary"; -import BriefMenu from "./components/BriefMenu"; import CheckoutButton from "./components/CheckoutButton"; import { GiftCard } from "./components/GiftCard"; -import PhoneCard from "./components/phoneCard"; import { OrderType } from "./hooks/types"; import RewardWaiterCard from "pages/cart/components/RewardWaiterCard"; import ProInputCard from "components/ProInputCard/ProInputCard"; import ProRatioGroups from "components/ProRatioGroups/ProRatioGroups"; import CouponCard from "pages/cart/components/CouponCard"; +import PhoneCard from "./components/PhoneCard"; +import BriefMenuCard from "./components/BriefMenuCard"; export default function CheckoutPage() { const { t } = useTranslation(); @@ -36,8 +36,9 @@ export default function CheckoutPage() { {t("checkout.title")} - + {!token && } + {orderType === OrderType.ToRoom && ( */} {/* */} {/* */} - {/* Collection Method */} @@ -99,6 +99,7 @@ export default function CheckoutPage() { {/* Reward Your Waiter */} + diff --git a/src/pages/pay/page.tsx b/src/pages/pay/page.tsx index 58bc7a3..5807b9d 100644 --- a/src/pages/pay/page.tsx +++ b/src/pages/pay/page.tsx @@ -7,7 +7,7 @@ import { selectCart } from "features/order/orderSlice"; import { AddressSummary } from "pages/checkout/components/AddressSummary"; import BriefMenu from "pages/checkout/components/BriefMenu"; import { GiftCard } from "pages/checkout/components/GiftCard"; -import PhoneCard from "pages/checkout/components/phoneCard"; +import PhoneCard from "pages/checkout/components/PhoneCard"; import { OrderType } from "pages/checkout/hooks/types"; import { useTranslation } from "react-i18next"; import { useAppSelector } from "redux/hooks";