cart & checkout: UI enhacnements

2025-12-25 21:13:25 +03:00
parent 90e729cdce
commit ce9092d634
24 changed files with 167 additions and 86 deletions
--- a/src/assets/locals/ar.json
+++ b/src/assets/locals/ar.json
@@ -166,6 +166,7 @@
    "customizable": "قابل للتخصيص"
  },
  "cart": {
+    "leaveANoteHere": "أي تعليمات خاصة لطلبك..",
    "title": "السلة",
    "emptyCart": "سلة المشتريات فارغة",
    "emptyCartMessage": "يبدو أنك لم تضيف أي عناصر إلى سلة المشتريات بعد. ابدأ في استكشاف قائمتنا للعثور على وجبات لذيذة!",
@@ -263,6 +264,8 @@
    "checkRequiredFields": "يرجى التحقق من الحقول المطلوبة"
  },
  "checkout": {
+    "customerName": "اسم العميل",
+    "customerInformation": "تفاصيل العميل",
    "title": "الدفع",
    "cash": "كاش",
    "creditDebitCard": "بطاقة ائتمان/ائتمان",
--- a/src/assets/locals/en.json
+++ b/src/assets/locals/en.json
@@ -178,6 +178,7 @@
    "customizable": "Customizable"
  },
  "cart": {
+    "leaveANoteHere": "Leave a note here..",
    "title": "Cart",
    "emptyCart": "Cart is empty",
    "emptyCartMessage": "Looks like you haven't added any items to your cart yet. Start exploring our menu to find delicious meals!",
@@ -273,6 +274,8 @@
    "checkRequiredFields": "Please check required fields"
  },
  "checkout": {
+    "customerName": "Customer Name",
+    "customerInformation": "Customer Information",
    "title": "Checkout",
    "cash": "Cash",
    "creditDebitCard": "Credit/Debit Card",
--- a/src/components/CartActionsButtons/CartActionsButtons.tsx
+++ b/src/components/CartActionsButtons/CartActionsButtons.tsx
@@ -104,7 +104,7 @@ export default function CartActionsButtons({ item }: { item: CartItem }) {
          )}
          <InputNumber
            min={1}
-            max={100}
+            max={99}
            value={item.quantity || 1}
            onChange={(value: number | null) =>
              dispatch(
--- a/src/components/CustomBottomSheet/TipBottomSheet.tsx
+++ b/src/components/CustomBottomSheet/TipBottomSheet.tsx
@@ -42,7 +42,7 @@ export function TipBottomSheet({
      showCloseButton={false}
      initialSnap={1}
      height={370}
-      snapPoints={["30vh"]}
+      snapPoints={[370]}
    >
      <div
        style={{
@@ -52,7 +52,9 @@ export function TipBottomSheet({
          justifyContent: "center",
        }}
      >
+        <div style={{ marginTop: 20 }}>
          <WaiterRewardingIcon />
+        </div>

        <br />

--- a/src/components/Icons/DeleteIcon.tsx
+++ b/src/components/Icons/DeleteIcon.tsx
@@ -1,22 +1,26 @@
 interface DeleteIconType {
  className?: string;
  onClick?: () => void;
+  color?: string;
+  dimension?: number;
 }

-const DeleteIcon = ({ className, onClick }: DeleteIconType) => {
+const DeleteIcon = ({ className, onClick, color, dimension }: DeleteIconType) => {
  return (
    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
+      width={dimension || "14"}
+      height={dimension || "14"}
+      viewBox="0 0 14 14"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      onClick={onClick}
    >
      <path
-        d="M3 2.4V0.6C3 0.44087 3.06321 0.288258 3.17574 0.175736C3.28826 0.0632141 3.44087 0 3.6 0H8.4C8.55913 0 8.71174 0.0632141 8.82426 0.175736C8.93679 0.288258 9 0.44087 9 0.6V2.4H12V3.6H10.8V11.4C10.8 11.5591 10.7368 11.7117 10.6243 11.8243C10.5117 11.9368 10.3591 12 10.2 12H1.8C1.64087 12 1.48826 11.9368 1.37574 11.8243C1.26321 11.7117 1.2 11.5591 1.2 11.4V3.6H0V2.4H3ZM6.8484 7.2L7.9092 6.1392L7.0608 5.2908L6 6.3516L4.9392 5.2908L4.0908 6.1392L5.1516 7.2L4.0908 8.2608L4.9392 9.1092L6 8.0484L7.0608 9.1092L7.9092 8.2608L6.8484 7.2ZM4.2 1.2V2.4H7.8V1.2H4.2Z"
-        fill="#DC2626"
+        d="M11.375 3.20866L11.0133 9.05658C10.9212 10.5505 10.8751 11.2977 10.5 11.835C10.3148 12.1005 10.0764 12.3246 9.8 12.493C9.24175 12.8337 8.49333 12.8337 6.9965 12.8337C5.49733 12.8337 4.74775 12.8337 4.18833 12.4924C3.91177 12.3237 3.67337 12.0992 3.48833 11.8332C3.11383 11.2954 3.06833 10.547 2.9785 9.05074L2.625 3.20866M1.75 3.20866H12.25M9.366 3.20866L8.96758 2.38733C8.70333 1.84133 8.57092 1.56891 8.34283 1.39858C8.29217 1.36084 8.23852 1.32729 8.18242 1.29824C7.92983 1.16699 7.6265 1.16699 7.02042 1.16699C6.39858 1.16699 6.08767 1.16699 5.83042 1.30349C5.77355 1.33395 5.71931 1.36907 5.66825 1.40849C5.43783 1.58524 5.30892 1.86816 5.05108 2.43341L4.69758 3.20866M5.54167 9.62533V6.12533M8.45833 9.62533V6.12533"
+        stroke={color || "#DD4143"}
+        strokeWidth="1.5"
+        strokeLinecap="round"
      />
    </svg>
  );
--- a/src/components/Icons/PlusIcon.tsx
+++ b/src/components/Icons/PlusIcon.tsx
@@ -1,13 +1,14 @@
 interface PlusIconType {
  className?: string;
  onClick?: () => void;
+  dimesion?: string
 }

-const PlusIcon = ({ className, onClick }: PlusIconType) => {
+const PlusIcon = ({ className, onClick, dimesion }: PlusIconType) => {
  return (
    <svg
-      width="16"
-      height="16"
+      width={dimesion || "16"}
+      height={dimesion || "16"}
      viewBox="0 0 16 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
--- a/src/components/InputCard.tsx
+++ b/src/components/InputCard.tsx
@@ -32,7 +32,7 @@ export default function InputCard({
            placeholder={placeholder}
            size="large"
            autoFocus={false}
-            style={{ padding: "7px 11px", height: 50, borderRadius: 888 }}
+            style={{ padding: "7px 11px", height: 48, borderRadius: 888 }}
            value={value}
            onChange={handleChange}
          />
--- a/src/components/PaymentMethods/PaymentMethods.tsx
+++ b/src/components/PaymentMethods/PaymentMethods.tsx
@@ -88,7 +88,7 @@ const PaymentMethods = () => {
          }}
          size="large"
        >
-          <Space orientation="vertical" style={{ width: "100%" }}>
+          <Space orientation="vertical" style={{ width: "100%", gap: 16 }}>
            {options.map((option) => (
              <div key={option.value}>
                <Radio
@@ -96,7 +96,7 @@ const PaymentMethods = () => {
                  value={option.value}
                  onClick={() => onPaymentSelect(option.value)}
                  style={{
-                    height: 50,
+                    height: 48,
                    borderRadius: 888,
                    border: "1px solid #DDD",
                    padding: 16,
--- a/src/components/ProPhoneInput.tsx
+++ b/src/components/ProPhoneInput.tsx
@@ -86,7 +86,7 @@ export const PhoneInputWrapper = ({
  const inputStyle = useMemo(
    () => ({
      borderRadius: 1000,
-      height: 50,
+      height: 48,
      width: "100%",
      color: themeName === "light" ? "#000" : "#FFF",
      backgroundColor: themeName === "light" ? "#FFF" : ProBlack1,
--- a/src/components/ProRatioGroups/ProRatioGroups.tsx
+++ b/src/components/ProRatioGroups/ProRatioGroups.tsx
@@ -37,9 +37,15 @@ const ProRatioGroups = ({
        onChange={handleChange}
        {...props}
      >
-        <Space direction="vertical" style={{ width: "100%" }}>
+        <Space orientation="vertical" style={{ width: "100%" }}>
          {options.map((option) => (
-            <Radio key={option.value} value={option.value}>
+            <Radio
+              key={option.value}
+              value={option.value}
+              // style={{
+              //   height: 48,
+              // }}
+            >
              <div
                style={{
                  display: "flex",
--- a/src/features/order/orderSlice.ts
+++ b/src/features/order/orderSlice.ts
@@ -70,6 +70,7 @@ interface CartState {
  pickupType: string;
  order: any;
  splitBillAmount: number;
+  customerName: string;
 }

 // localStorage keys
@@ -187,6 +188,7 @@ const initialState: CartState = {
  pickupType: getFromLocalStorage(CART_STORAGE_KEYS.PICKUP_TYPE, ""),
  order: getFromLocalStorage(CART_STORAGE_KEYS.ORDER, null),
  splitBillAmount: 0,
+  customerName: "",
 };

 const orderSlice = createSlice({
@@ -637,6 +639,9 @@ const orderSlice = createSlice({
    updateSplitBillAmount(state, action: PayloadAction<number>) {
      state.splitBillAmount = action.payload;
    },
+    updateCustomerName(state, action: PayloadAction<string>) {
+      state.customerName = action.payload;
+    },
  },
 });

@@ -675,6 +680,7 @@ export const {
  updatePickUpType,
  updateOrder,
  updateSplitBillAmount,
+  updateCustomerName,
 } = orderSlice.actions;

 // Tax calculation helper functions
--- a/src/pages/cart/cart.module.css
+++ b/src/pages/cart/cart.module.css
@@ -605,3 +605,8 @@
  outline: 2px solid #ffffff;
  outline-offset: 2px;
 }
+
+.deleteIcon {
+ position: relative;
+ top: 1px;
+}
--- a/src/pages/cart/components/CarPlateCard.tsx
+++ b/src/pages/cart/components/CarPlateCard.tsx
@@ -24,7 +24,7 @@ export default function CarPlateCard() {
            placeholder={t("cart.plateNumber")}
            size="large"
            autoFocus={false}
-            style={{ padding: "7px 11px", height: 50, borderRadius: 888 }}
+            style={{ padding: "7px 11px", height: 48, borderRadius: 888 }}
            value={plateCar}
            onChange={(e) => {
              dispatch(updatePlateCar(e.target.value));
--- a/src/pages/cart/components/CartMobileTabletLayout.tsx
+++ b/src/pages/cart/components/CartMobileTabletLayout.tsx
@@ -1,5 +1,4 @@
-import { PlusOutlined } from "@ant-design/icons";
-import { Card, Divider, Space, Layout } from "antd";
+import { Card, Divider, Space, Layout, Button } from "antd";
 import ArabicPrice from "components/ArabicPrice";
 import CartActionsButtons from "components/CartActionsButtons/CartActionsButtons.tsx";
 import ImageWithFallback from "components/ImageWithFallback";
@@ -9,8 +8,7 @@ import ProTitle from "components/ProTitle.tsx";
 import { selectCart } from "features/order/orderSlice.ts";
 import styles from "pages/cart/cart.module.css";
 import YouMightAlsoLike from "pages/cart/components/youMayLike/YouMightAlsoLike.tsx";
-import { Link, useParams } from "react-router-dom";
-import { colors } from "ThemeConstants.ts";
+import { Link, useNavigate, useParams } from "react-router-dom";

 import { useAppSelector } from "redux/hooks.ts";

@@ -18,13 +16,14 @@ import { FormInstance } from "antd";
 import useBreakPoint from "hooks/useBreakPoint.ts";
 import CarPlateCard from "pages/cart/components/CarPlateCard.tsx";
 import CartFooter from "pages/cart/components/cartFooter/CartFooter.tsx";
-import CouponCard from "pages/cart/components/CouponCard.tsx";
 import SpecialRequestCard from "pages/cart/components/specialRequest/SpecialRequestCard.tsx";
 import TableNumberCard from "pages/cart/components/TableNumberCard.tsx";
 import TimeEstimateCard from "pages/cart/components/timeEstimate/TimeEstimateCard.tsx";
 import { OrderType } from "pages/checkout/hooks/types";
 import { useTranslation } from "react-i18next";
 import { Variant } from "utils/types/appTypes";
+import DeleteIcon from "components/Icons/DeleteIcon";
+import PlusIcon from "components/Icons/PlusIcon";

 interface CartMobileTabletLayoutProps {
  form: FormInstance;
@@ -39,8 +38,8 @@ export default function CartMobileTabletLayout({
  const { subdomain } = useParams();
  const { pickup_type } = useAppSelector((state) => state.order.restaurant);
  const { isMobile, isTablet } = useBreakPoint();
-
  const getResponsiveClass = () => (isTablet ? "tablet" : "mobile");
+  const navigate = useNavigate();

  const getMenuItemImageStyle = () => {
    if (isMobile) {
@@ -82,11 +81,21 @@ export default function CartMobileTabletLayout({
                >
                  <div
                    style={{
-                      marginTop: 10,
+                      marginTop: 3,
                      boxSizing: "border-box", // Explicit box model definition
                    }}
                  >
-                    <ProTitle level={5} style={{ whiteSpace: "nowrap" }}>
+                    <ProTitle
+                      level={5}
+                      style={{
+                        whiteSpace: "nowrap",
+                        fontWeight: 500,
+                        fontStyle: "Medium",
+                        fontSize: 18,
+                        lineHeight: "140%",
+                        letterSpacing: 0,
+                      }}
+                    >
                      {t("cart.yourOrder")}
                    </ProTitle>
                  </div>
@@ -100,25 +109,29 @@ export default function CartMobileTabletLayout({
                      textAlign: "end",
                    }}
                  >
-                    <div
+                    <Button
+                      shape="circle"
+                      iconPlacement="start"
+                      icon={
+                        <DeleteIcon
+                          className={styles.deleteIcon}
+                          color={"#C0BFC4"}
+                          dimension={16}
+                        />
+                      }
+                      size="small"
+                      className={styles.addButton}
                      style={{
-                        color: colors.primary,
-                      }}
-                    >
-                      <PlusOutlined
-                        style={{
-                          color: colors.primary,
-                          marginLeft: 5,
-                          marginTop: 15,
+                        width: 32,
+                        height: 32,
+                        border: "1px solid #DEDEE0",
                      }}
                    />
-                      {t("cart.addMore")}
-                    </div>
                  </Link>
                </div>

                {items.length >= 1 && (
-                  <Divider style={{ margin: "0px 0px 10px 0px" }} />
+                  <Divider style={{ margin: "8px 0px 12px 0px" }} />
                )}
                {items.map((item, index) => (
                  <div key={index} style={{ position: "relative" }}>
@@ -230,6 +243,16 @@ export default function CartMobileTabletLayout({
                    )}
                  </div>
                ))}
+                <Button
+                  style={{ width: "100%", marginTop: 24, color: "#4C4A58" }}
+                  onClick={() => {
+                    navigate(`/${subdomain}/menu?${
+                      orderType ? `orderType=${orderType}` : ""
+                    }`);
+                  }}
+                >
+                  <PlusIcon dimesion="18" /> {t("cart.addMore")}
+                </Button>
              </Card>
            </div>
          </div>
--- a/src/pages/cart/components/CouponCard.tsx
+++ b/src/pages/cart/components/CouponCard.tsx
@@ -83,7 +83,7 @@ export default function CouponCard() {
            placeholder={t("cart.couponCode")}
            size="large"
            autoFocus={false}
-            style={{ padding: "7px 11px", height: 50 }}
+            style={{ padding: "7px 11px", height: 48 }}
            onChange={(e) => {
              dispatch(updateCoupon(e.target.value));
            }}
--- a/src/pages/cart/components/specialRequest/SpecialRequestCard.module.css
+++ b/src/pages/cart/components/specialRequest/SpecialRequestCard.module.css
@@ -1,5 +1,12 @@
 .inputField {
-  height: 50px;
+  border-radius: 8px !important;
+  justify-content: space-between;
+  padding-top: 12px;
+  padding-right: 16px;
+  padding-bottom: 12px;
+  padding-left: 16px;
+  opacity: 1;
+  border-width: 1px;
 }

 .editButton {
--- a/src/pages/cart/components/specialRequest/SpecialRequestCard.tsx
+++ b/src/pages/cart/components/specialRequest/SpecialRequestCard.tsx
@@ -9,13 +9,13 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
 import styles from "./SpecialRequestCard.module.css";
+import TextArea from "antd/es/input/TextArea";

 export default function SpecialRequestCard() {
  const { t } = useTranslation();
  const { isDesktop } = useBreakPoint();
  const dispatch = useAppDispatch();
  const { specialRequest } = useAppSelector(selectCart);
-  const { isRTL } = useAppSelector((state) => state.locale);
  const [isSpecialRequestOpen, setIsSpecialRequestOpen] = useState(false);

  const handleSpecialRequestSave = (value: string) => {
@@ -32,12 +32,8 @@ export default function SpecialRequestCard() {
        title={t("cart.specialRequest")}
        dividerStyle={{ margin: "5px 0 0 0" }}
      >
-        <Form.Item
-          label={t("cart.specialRequest")}
-          name="specialRequest"
-          style={{ position: "relative", top: -5 }}
-        >
-          <Input
+        <Form.Item name="specialRequest" style={{ marginTop: 12 }}>
+          {/* <Input
            placeholder={t("cart.specialRequest")}
            size="large"
            autoFocus={false}
@@ -51,6 +47,13 @@ export default function SpecialRequestCard() {
                <u>{t("cart.editNote")}</u> {isRTL ? <LeftOutlined /> : <RightOutlined />}
              </div>
            }
+          /> */}
+          <TextArea
+            placeholder={t("cart.leaveANoteHere")}
+            rows={2}
+            autoFocus={false}
+            className={styles.inputField}
+            onChange={(e) => handleSpecialRequestSave(e.target.value)}
          />
        </Form.Item>
      </ProInputCard>
--- a/src/pages/cart/components/timeEstimate/BottomSheet.tsx
+++ b/src/pages/cart/components/timeEstimate/BottomSheet.tsx
@@ -22,8 +22,8 @@ export function BottomSheet({
      title={t("cart.selectTimeEstimate")}
      showCloseButton={true}
      initialSnap={1}
-      height={555}
-      snapPoints={["65vh"]}
+      height={495}
+      snapPoints={[495]}
    >
      <Content onSave={onSave} onClose={onClose} />
    </ProBottomSheet>
--- a/src/pages/checkout/components/CustomerInformationCard.module.css
+++ b/src/pages/checkout/components/CustomerInformationCard.module.css
@@ -0,0 +1,3 @@
+.customerInformationCard {
+  height: 215px !important;
+}
--- a/src/pages/checkout/components/CustomerInformationCard.tsx
+++ b/src/pages/checkout/components/CustomerInformationCard.tsx
@@ -0,0 +1,44 @@
+import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
+import ProPhoneInput from "components/ProPhoneInput";
+import { selectCart, updateCustomerName } from "features/order/orderSlice";
+import { OrderType } from "pages/checkout/hooks/types.ts";
+import { useTranslation } from "react-i18next";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
+import { Form, Input } from "antd";
+import styles from "./CustomerInformationCard.module.css";
+
+export default function CustomerInformationCard() {
+  const { t } = useTranslation();
+  const { orderType } = useAppSelector(selectCart);
+  const dispatch = useAppDispatch();
+  const customerName = useAppSelector((state) => state.order.customerName);
+
+  return (
+    orderType !== OrderType.Gift && (
+      <>
+        <ProInputCard
+          title={t("checkout.customerInformation")}
+          className={styles.customerInformationCard}
+        >
+          <div style={{ position: "relative", top: -25 }}>
+            <Form.Item label={t("checkout.customerName")} name="customerName">
+              <Input
+                placeholder={t("checkout.customerName")}
+                size="large"
+                autoFocus={false}
+                style={{ padding: "7px 11px", height: 48, borderRadius: 888 }}
+                value={customerName}
+                onChange={(e) => {
+                  dispatch(updateCustomerName(e.target.value));
+                }}
+              />
+            </Form.Item>
+          </div>
+          <div style={{ position: "relative", top: -30 }}>
+            <ProPhoneInput label={t("login.phone")} propName="phone" />
+          </div>
+        </ProInputCard>
+      </>
+    )
+  );
+}
--- a/src/pages/checkout/components/PhoneCard.module.css
+++ b/src/pages/checkout/components/PhoneCard.module.css
@@ -1,3 +0,0 @@
-.phoneCard {
-  height: 150px !important;
-}
--- a/src/pages/checkout/components/PhoneCard.tsx
+++ b/src/pages/checkout/components/PhoneCard.tsx
@@ -1,27 +0,0 @@
-import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
-import ProPhoneInput from "components/ProPhoneInput";
-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();
-  const { orderType } = useAppSelector(selectCart);
-
-  return (
-    orderType !== OrderType.Gift && (
-      <>
-        <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
@@ -15,8 +15,8 @@ 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";
+import CustomerInformationCard from "./components/CustomerInformationCard";

 export default function CheckoutPage() {
  const { t } = useTranslation();
@@ -37,7 +37,7 @@ export default function CheckoutPage() {
          <ProHeader>{t("checkout.title")}</ProHeader>
          <Layout.Content className={styles.checkoutContainer}>
            <PaymentMethods />
-            {!token && <PhoneCard />}
+            {!token && <CustomerInformationCard />}
            <AddressSummary />
            {orderType === OrderType.ToRoom && (
              <InputCard
--- a/src/pages/pay/page.tsx
+++ b/src/pages/pay/page.tsx
@@ -7,18 +7,19 @@ 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 { OrderType } from "pages/checkout/hooks/types";
 import { useTranslation } from "react-i18next";
 import { useAppSelector } from "redux/hooks";
 import styles from "../address/address.module.css";
 import PayButton from "./components/PayButton";
-
+import CustomerInformationCard from "pages/checkout/components/CustomerInformationCard";

 export default function PayPage() {
  const { t } = useTranslation();
  const [form] = Form.useForm();
  const { phone, order, orderType } = useAppSelector(selectCart);
+  const { token } = useAppSelector((state) => state.auth);
+
  return (
    <>
      <Form
@@ -54,7 +55,7 @@ export default function PayPage() {
            {/* <GiftDetails /> */}
            <BriefMenu />
            <OrderSummary />
-            <PhoneCard />
+            {!token && <CustomerInformationCard />}
            <PaymentMethods />
          </Layout.Content>