checkout: reafactor UI

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>
+    </>
+  );
+}

src/pages/checkout/components/PhoneCard.module.css

@@ -0,0 +1,3 @@
+.phoneCard {
+  height: 150px !important;
+}

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>
       </>
     )

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>
 

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