checkout: reafactor UI

2025-12-24 22:34:11 +03:00
parent 66d77d0621
commit 19212860c3
11 changed files with 106 additions and 27 deletions
--- 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",
--- 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": "العنوان",
--- 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",
--- a/src/components/PaymentDetails/PaymentDetails.tsx
+++ b/src/components/PaymentDetails/PaymentDetails.tsx
@@ -14,7 +14,7 @@ export default function PaymentDetails({ order }: { order?: Order }) {
      <Card className={`${styles.orderSummary}`}>
        <ProTitle style={{ fontSize: 18 }}>{t("cart.orderSummary")}</ProTitle>
        <Divider style={{ margin: "15px 0 15px 0" }} />
-        <Space direction="vertical" style={{ width: "100%" }}>
+        <Space orientation="vertical" style={{ width: "100%" }}>
          <div className={`${styles.summaryRow} ${styles.totalRow}`}>
            <ProText strong>{t("cart.totalAmount")}</ProText>
            <ArabicPrice price={order?.total_price || 0} strong />
--- 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 = () => {
        </div>
      ),
      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) => {
--- a/src/components/ProInputCard/ProInputCard.tsx
+++ b/src/components/ProInputCard/ProInputCard.tsx
@@ -28,7 +28,17 @@ const ProInputCard: FunctionComponent<ProInputCardProps> = ({
        }}
      >
        {title && typeof title === "string" && (
-          <ProTitle style={{ fontSize: 18 }}> {title} </ProTitle>
+          <ProTitle
+            style={{
+              fontWeight: 500,
+              fontStyle: "Medium",
+              fontSize: 18,
+              lineHeight: "140%",
+              letterSpacing: "0%",
+            }}
+          >
+            {title}
+          </ProTitle>
        )}
        {title && typeof title !== "string" && title}
        <div style={{ position: "relative", top: 0 }}>{titleRight}</div>
--- a/src/pages/checkout/components/BriefMenuCard.tsx
+++ 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 (
+    <>
+      <ProInputCard
+        title={t("checkout.itemsSummary")}
+        dividerStyle={{ margin: "5px 0 0 0" }}
+      >
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "space-between",
+            padding: "16px 0",
+          }}
+          onClick={() => {
+            navigate(`/${subdomain}/cart`);
+          }}
+        >
+          <ProText
+            style={{
+              fontWeight: 400,
+              fontStyle: "Regular",
+              fontSize: 12,
+              lineHeight: "140%",
+              letterSpacing: "0%",
+              color: "#777580",
+              cursor: "pointer",
+            }}
+          >
+            <span style={{ marginRight: 5, position: "relative", top: 3.5 }}>
+              <InvoiceIcon />
+            </span>
+            {t("checkout.viewOrder")} ( {totalItems} {t("cart.items")} )
+          </ProText>
+          <NextIcon />
+        </div>
+      </ProInputCard>
+    </>
+  );
+}
--- a/src/pages/checkout/components/PhoneCard.module.css
+++ b/src/pages/checkout/components/PhoneCard.module.css
@@ -0,0 +1,3 @@
+.phoneCard {
+  height: 150px !important;
+}
--- 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 && (
      <>
-        <ProInputCard title={t("checkout.phoneNumber")}>
-          <ProPhoneInput label={t("login.phone")} propName="phone" />
+        <ProInputCard
+          title={t("checkout.phoneNumber")}
+          className={styles.phoneCard}
+        >
+          <div style={{ position: "relative", top: -20 }}>
+            <ProPhoneInput label={t("login.phone")} propName="phone" />
+          </div>
        </ProInputCard>
      </>
    )
--- 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() {
        <Layout>
          <ProHeader>{t("checkout.title")}</ProHeader>
          <Layout.Content className={styles.checkoutContainer}>
-            <AddressSummary />
+            <PaymentMethods />
            {!token && <PhoneCard />}
+            <AddressSummary />
            {orderType === OrderType.ToRoom && (
              <InputCard
                title={t("address.roomNo")}
@@ -59,7 +60,6 @@ export default function CheckoutPage() {
            <OfficeDetails /> */}
            {/* <GiftDetails /> */}
            {/* <BriefMenu /> */}
-            <PaymentMethods />
            <CouponCard />

            {/* Collection Method */}
@@ -99,6 +99,7 @@ export default function CheckoutPage() {

            {/* Reward Your Waiter */}
            <RewardWaiterCard />
+            <BriefMenuCard />
            <OrderSummary />
          </Layout.Content>

--- 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";