checkout: reafactor UI

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

src/ThemeConstants.ts

@@ -7,7 +7,7 @@ export const colors = {
   darkSpace: "linear-gradient(to right, #0F0525, #2A0B45)",
 };
 
-export const ProGray1 = "#8a8a8a";
+export const ProGray1 = "#434E5C";
 export const ProGreen = "#03B100";
 export const ProGreen2 = "#52c41a";
 export const ProDraft = "#f36c00";

src/assets/locals/ar.json

@@ -281,7 +281,9 @@
     "expiresInDescription": "تنتهي في:12/26",
     "phoneNumber": "رقم الهاتف",
     "pleaseSelectPaymentMethod": "يرجى اختيار طريقة الدفع",
-    "pleaseEnterPhoneNumber": "يرجى إدخال رقم الهاتف"
+    "pleaseEnterPhoneNumber": "يرجى إدخال رقم الهاتف",
+    "viewOrder": "عرض الطلب",
+    "itemsSummary": "ملخص العناصر"
   },
   "address": {
     "title": "العنوان",

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

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

src/components/PaymentMethods/PaymentMethods.tsx

@@ -41,12 +41,12 @@ const PaymentMethods = () => {
           },
         ]
       : []),
-    {
+      // {
-      label: t("checkout.creditDebitCard"),
+      //   label: t("checkout.creditDebitCard"),
-      value: "creditDebitCard",
+      //   value: "creditDebitCard",
-      price: t("checkout.expiresIn") + ":12/26",
+      //   price: t("checkout.expiresIn") + ":12/26",
-      hideCurrency: true,
+      //   hideCurrency: true,
-    },
+      // },
     {
       label: t("checkout.differentCard"),
       value: "differentCard",
@@ -56,15 +56,15 @@ const PaymentMethods = () => {
         </div>
       ),
       hideCurrency: true,
-    },
+    }
-    {
+    // {
-      label: t("checkout.fascanoWallet"),
+    //   label: t("checkout.fascanoWallet"),
-      value: "fascanoWallet",
+    //   value: "fascanoWallet",
-      price: "7.50",
+    //   price: "7.50",
-      style: {
+    //   style: {
-        color: colors.primary,
+    //     color: colors.primary,
-      },
+    //   },
-    },
+    // },
   ];
 
   const onPaymentSelect = (value: string) => {

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>

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")}>
+        <ProInputCard
-          <ProPhoneInput label={t("login.phone")} propName="phone" />
+          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/menu/components/AddToCartButton/AddToCartButton.tsx

@@ -250,6 +250,7 @@ export function AddToCartButton({ item }: { item: Product }) {
         className={styles.addButton}
         style={{
           color: "#302E3E",
+          backgroundColor: "white",
           width: 28,
           height: 28,
           position: "absolute",

src/pages/menu/components/BackButton.tsx

@@ -23,6 +23,7 @@ export default function BackButton({ navigateBack = true }: BackButtonProps) {
         justifyContent: "center",
         padding: 0,
         borderRadius: "50%",
+        border: "none",
       }}
       icon={
         <div

src/pages/menu/components/MenuList/ProductCard.tsx

@@ -98,39 +98,39 @@ export default function ProductCard({ item, setIsBottomSheetOpen }: Props) {
               <ProText
                 style={{
                   margin: 0,
-                  display: "inline-block",
                   fontWeight: 600,
                   fontStyle: "SemiBold",
                   fontSize: "16px",
-                  // leadingTrim: "NONE",
                   lineHeight: "140%",
                   letterSpacing: "0%",
                 }}
               >
                 {isRTL ? item.nameOther : item.name}
               </ProText>
-              <ProText
+              {item.description && (
-                type="secondary"
+                <ProText
-                className={styles.itemDescription}
+                  type="secondary"
-                style={{
+                  className={styles.itemDescription}
-                  display: "-webkit-box",
+                  style={{
-                  WebkitBoxOrient: "vertical",
+                    display: "-webkit-box",
-                  WebkitLineClamp: 2,
+                    WebkitBoxOrient: "vertical",
-                  overflow: "hidden",
+                    WebkitLineClamp: 2,
-                  textOverflow: "ellipsis",
+                    overflow: "hidden",
-                  wordWrap: "break-word",
+                    textOverflow: "ellipsis",
-                  overflowWrap: "break-word",
+                    wordWrap: "break-word",
-                  maxHeight: "3em",
+                    overflowWrap: "break-word",
-                  fontWeight: 500,
+                    maxHeight: "3em",
-                  fontStyle: "Medium",
+                    fontWeight: 500,
-                  fontSize: "12px",
+                    fontStyle: "Medium",
-                  // leadingTrim: "NONE",
+                    fontSize: "12px",
-                  lineHeight: "140%",
+                    // leadingTrim: "NONE",
-                  letterSpacing: "0%",
+                    lineHeight: "140%",
-                }}
+                    letterSpacing: "0%",
-              >
+                  }}
-                {item.description}
+                >
-              </ProText>
+                  {item.description}
+                </ProText>
+              )}
 
               <div
                 style={{
@@ -170,7 +170,7 @@ export default function ProductCard({ item, setIsBottomSheetOpen }: Props) {
                   style={{
                     position: "relative",
                     ...(isRTL ? { right: -5 } : {}),
-                    marginTop: item.description ? 0 : 5,
+                    marginTop: 6,
                   }}
                 >
                   <ItemDescriptionIcons

src/pages/menu/menu.module.css

@@ -510,6 +510,7 @@
   justify-content: center;
   padding: 0px;
   border-radius: 50%;
+  border: none;
 }
 
 .contentWrapper {

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