cart & checkout: apply validation based on required inputs in each service & add phone input in checkout page

src/assets/locals/ar.json

@@ -221,7 +221,8 @@
     "inYourCart": "في سلة المشتريات",
     "updatedSuccessfully": "تم التحديث بنجاح",
     "editNote": "تعديل الملاحظة",
-    "selectTimeEstimate": "أدخل وقت التقديم"
+    "selectTimeEstimate": "أدخل وقت التقديم",
+    "pleaseAddItemsToCart": "يرجى إضافة عناصر إلى السلة"
   },
   "checkout": {
     "title": "الدفع",
@@ -238,7 +239,8 @@
     "totalAmount": "المبلغ الكلي",
     "items": "العناصر",
     "expiresIn": "تنتهي في",
-    "expiresInDescription": "تنتهي في:12/26"
+    "expiresInDescription": "تنتهي في:12/26",
+    "phoneNumber": "رقم الهاتف"
   },
   "address": {
     "title": "العنوان",

src/assets/locals/en.json

@@ -231,7 +231,8 @@
     "plateNumber": "Plate Number",
     "plateNumberPlaceholder": "Enter plate number",
     "editNote": "Edit Note",
-    "selectTimeEstimate": "Select Estimate Time"
+    "selectTimeEstimate": "Select Estimate Time",
+      "pleaseAddItemsToCart": "Please add items to your cart"
   },
   "checkout": {
     "title": "Checkout",
@@ -248,7 +249,8 @@
     "totalAmount": "Total Amount",
     "items": "Items",
     "expiresIn": "Expires in",
-    "expiresInDescription": "Expires in:12/26"
+    "expiresInDescription": "Expires in:12/26",
+    "phoneNumber": "Phone Number"
   },
   "address": {
     "title": "Address",

src/components/PaymentMethods/PaymentMethods.tsx

@@ -1,4 +1,4 @@
-import { Radio, Space } from "antd";
+import { Form, Radio, Space } from "antd";
 import { Group } from "antd/es/radio";
 import ArabicPrice from "components/ArabicPrice";
 import DifferentCardIcon from "components/Icons/paymentMethods/DifferentCardIcon";
@@ -50,67 +50,69 @@ const PaymentMethods = ({ onPaymentSelect, ...props }: PaymentMethodsProps) => {
 
   return (
     <ProInputCard title={t("checkout.selectedPaymentMethod")}>
-      <Group
-        className={styles.paymentMethods}
-        style={{
-          width: "100%",
-        }}
-        {...props}
-        size="large"
-      >
-        <Space direction="vertical" style={{ width: "100%" }}>
-          {options.map((option) => (
-            <div key={option.value}>
-              <Radio
-                key={option.value}
-                value={option.value}
-                onClick={onPaymentSelect}
-                style={{
-                  height: 50,
-                  borderRadius: 888,
-                  border: "1px solid #DDD",
-                  padding: 16,
-                }}
-              >
-                <div
+      <Form.Item name="paymentMethod" required rules={[{ required: true }]}>
+        <Group
+          className={styles.paymentMethods}
+          style={{
+            width: "100%",
+          }}
+          {...props}
+          size="large"
+        >
+          <Space direction="vertical" style={{ width: "100%" }}>
+            {options.map((option) => (
+              <div key={option.value}>
+                <Radio
+                  key={option.value}
+                  value={option.value}
+                  onClick={onPaymentSelect}
                   style={{
-                    display: "flex",
-                    flexDirection: "row",
-                    justifyContent: "space-between",
-                    width: "100%",
-                    position: "relative",
-                    top: -4,
+                    height: 50,
+                    borderRadius: 888,
+                    border: "1px solid #DDD",
+                    padding: 16,
                   }}
                 >
-                  <ProText
+                  <div
                     style={{
-                      fontSize: "0.85rem",
-                      color: ProGray1,
+                      display: "flex",
+                      flexDirection: "row",
+                      justifyContent: "space-between",
+                      width: "100%",
+                      position: "relative",
+                      top: -4,
                     }}
                   >
-                    {option.label}
-                  </ProText>
-                  {!option.icon ? (
-                    <ArabicPrice
-                      price={option.price || 0}
+                    <ProText
                       style={{
-                        fontSize: "0.75rem",
+                        fontSize: "0.85rem",
                         color: ProGray1,
-                        fontWeight: 400,
-                        ...option?.style,
-                        position: "relative",
-                        top: 4,
                       }}
-                    />
-                  ) : (
-                    <>{option.icon}</>
-                  )}
-                </div>
-              </Radio>
-            </div>
-          ))}
-        </Space>
-      </Group>
+                    >
+                      {option.label}
+                    </ProText>
+                    {!option.icon ? (
+                      <ArabicPrice
+                        price={option.price || 0}
+                        style={{
+                          fontSize: "0.75rem",
+                          color: ProGray1,
+                          fontWeight: 400,
+                          ...option?.style,
+                          position: "relative",
+                          top: 4,
+                        }}
+                      />
+                    ) : (
+                      <>{option.icon}</>
+                    )}
+                  </div>
+                </Radio>
+              </div>
+            ))}
+          </Space>
+        </Group>
+      </Form.Item>
     </ProInputCard>
   );
 };

src/features/order/orderSlice.ts

@@ -48,6 +48,7 @@ interface CartState {
   estimateTimeDate: Date;
   estimateTimeTime: string;
   collectionMethod: string;
+  phone: string;
 }
 
 // localStorage keys
@@ -65,6 +66,7 @@ const CART_STORAGE_KEYS = {
   ESTIMATE_TIME_DATE: 'fascano_estimate_time_date',
   ESTIMATE_TIME_TIME: 'fascano_estimate_time_time',
   COLLECTION_METHOD: 'fascano_collection_method',
+  PHONE: 'fascano_phone',
 } as const;
 
 // Utility functions for localStorage
@@ -95,6 +97,7 @@ const initialState: CartState = {
   estimateTimeDate: new Date(getFromLocalStorage(CART_STORAGE_KEYS.ESTIMATE_TIME_DATE, new Date().toISOString())),
   estimateTimeTime: getFromLocalStorage(CART_STORAGE_KEYS.ESTIMATE_TIME_TIME, ""),
   collectionMethod: getFromLocalStorage(CART_STORAGE_KEYS.COLLECTION_METHOD, ""),
+  phone: getFromLocalStorage(CART_STORAGE_KEYS.PHONE, ""),
 };
 
 const orderSlice = createSlice({
@@ -273,6 +276,14 @@ const orderSlice = createSlice({
         localStorage.setItem(CART_STORAGE_KEYS.COLLECTION_METHOD, JSON.stringify(state.collectionMethod));
       }
     },
+    updatePhone(state, action: PayloadAction<string>) {
+      state.phone = action.payload;
+      
+      // Sync to localStorage
+      if (typeof window !== 'undefined') {
+        localStorage.setItem(CART_STORAGE_KEYS.PHONE, JSON.stringify(state.phone));
+      }
+    },
   },
 });
 
@@ -295,6 +306,7 @@ export const {
   updateGiftDetails,
   updateEstimateTime,
   updateCollectionMethod,
+  updatePhone,
   reset,
 } = orderSlice.actions;
 

src/pages/cart/components/CartMobileTabletLayout.tsx

@@ -1,5 +1,5 @@
 import { PlusOutlined } from "@ant-design/icons";
-import { Card, Divider, Space } from "antd";
+import { Card, Divider, Form, Space } from "antd";
 import ArabicPrice from "components/ArabicPrice";
 import CartActionsButtons from "components/CartActionsButtons/CartActionsButtons.tsx";
 import ImageWithFallback from "components/ImageWithFallback";
@@ -35,7 +35,9 @@ interface CartMobileTabletLayoutProps {
   form: FormInstance;
 }
 
-export default function CartMobileTabletLayout({ form }: CartMobileTabletLayoutProps) {
+export default function CartMobileTabletLayout({
+  form,
+}: CartMobileTabletLayoutProps) {
   const { t } = useTranslation();
   const { items, collectionMethod } = useAppSelector(selectCart);
   const { id } = useParams();
@@ -235,24 +237,30 @@ export default function CartMobileTabletLayout({ form }: CartMobileTabletLayoutP
           {/* Collection Method */}
           {orderType === "pickup" && (
             <ProInputCard title={t("cart.collectionMethod")}>
-              <ProRatioGroups
-                options={[
-                  { label: t("cart.Cash"), value: "cod", price: "" },
-                  {
-                    label: t("cart.e-payment"),
-                    value: "paymentgateway",
-                    price: "",
-                  },
-                ]}
-                value={collectionMethod}
-                onRatioClick={(value) => {
-                  if (value === "cod") {
-                    updateCollectionMethod(value);
-                  } else {
-                    updateCollectionMethod(value);
-                  }
-                }}
-              />
+              <Form.Item
+                name="collectionMethod"
+                required
+                rules={[{ required: true }]}
+              >
+                <ProRatioGroups
+                  options={[
+                    { label: t("cart.Cash"), value: "cod", price: "" },
+                    {
+                      label: t("cart.e-payment"),
+                      value: "paymentgateway",
+                      price: "",
+                    },
+                  ]}
+                  value={collectionMethod}
+                  onRatioClick={(value) => {
+                    if (value === "cod") {
+                      updateCollectionMethod(value);
+                    } else {
+                      updateCollectionMethod(value);
+                    }
+                  }}
+                />
+              </Form.Item>
             </ProInputCard>
           )}
 

src/pages/cart/components/cartFooter/CartFooter.tsx

@@ -1,5 +1,5 @@
 import { colors } from "ThemeConstants.ts";
-import { Button, FormInstance } from "antd";
+import { Button, FormInstance, message } from "antd";
 import { selectCart } from "features/order/orderSlice.ts";
 import { useTranslation } from "react-i18next";
 import { Link, useNavigate, useParams } from "react-router-dom";
@@ -17,15 +17,15 @@ export default function CartFooter({ form }: CartFooterProps) {
   const orderType = localStorage.getItem("orderType");
   const navigate = useNavigate();
 
-  // Check if checkout should be disabled
-  const isCheckoutDisabled = items.length === 0;
-
   const handleCheckoutClick = async () => {
-    try {
-      await form.validateFields();
-      navigate(`/${id}/checkout`);
-    } catch (error) {
-      console.log("Form validation failed:", error);
+    if (items.length === 0) message.warning(t("cart.pleaseAddItemsToCart"));
+    else {
+      try {
+        await form.validateFields();
+        navigate(`/${id}/checkout`);
+      } catch (error) {
+        console.log("Form validation failed:", error);
+      }
     }
   };
 
@@ -60,7 +60,6 @@ export default function CartFooter({ form }: CartFooterProps) {
           color: "white",
           width: "100%",
         }}
-        disabled={isCheckoutDisabled}
         onClick={handleCheckoutClick}
       >
         {t("cart.checkout")}

src/pages/cart/components/timeEstimate/TimeEstimateCard.tsx

@@ -1,3 +1,4 @@
+import { Form } from "antd";
 import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
 import ProRatioGroups from "components/ProRatioGroups/ProRatioGroups.tsx";
 import { selectCart, updateEstimateTime } from "features/order/orderSlice.ts";
@@ -27,22 +28,24 @@ export default function TimeEstimateCard() {
   return (
     <>
       <ProInputCard title={t("cart.estimateTime")}>
-        <ProRatioGroups
-          options={[
-            { label: t("cart.now"), value: "now", price: "" },
-            { label: t("cart.later"), value: "later", price: "" },
-          ]}
-          value={estimateWay}
-          onRatioClick={(value) => {
-            if (value === "now") {
-              setEstimateWay(value);
-              handleEstimateTimeSave(new Date(), "now");
-            } else {
-              setEstimateWay(value);
-              setIsEstimateTimeOpen(true);
-            }
-          }}
-        />
+        <Form.Item name="estimateWay" required rules={[{ required: true }]}>
+          <ProRatioGroups
+            options={[
+              { label: t("cart.now"), value: "now", price: "" },
+              { label: t("cart.later"), value: "later", price: "" },
+            ]}
+            value={estimateWay}
+            onRatioClick={(value) => {
+              if (value === "now") {
+                setEstimateWay(value);
+                handleEstimateTimeSave(new Date(), "now");
+              } else {
+                setEstimateWay(value);
+                setIsEstimateTimeOpen(true);
+              }
+            }}
+          />
+        </Form.Item>
       </ProInputCard>
       {isDesktop ? (
         <Dialog

src/pages/cart/components/youMayLike/YouMayAlsoLike.module.css

@@ -1,3 +1,7 @@
+.youMightAlsoLikeTitle {
+  margin: 0 16px 16px 16px;
+}
+
 .youMightAlsoLikeContainer {
   display: flex;
   flex-direction: row;
@@ -66,6 +70,9 @@
   .youMightAlsoLikeContainer {
     height: 200px !important;
   }
+  .youMightAlsoLikeTitle {
+    margin: 16px;
+  }
 }
 
 /* Hover effects for devices that support hover */

src/pages/cart/components/youMayLike/YouMightAlsoLike.tsx

@@ -117,7 +117,7 @@ export default function YouMightAlsoLike() {
 
   return (
     <>
-      <div style={{ margin: 16 }}>
+      <div className={styles.youMightAlsoLikeTitle} >
         <ProText
           strong
           style={{

src/pages/checkout/components/CheckoutButton.tsx

@@ -1,11 +1,11 @@
-import { Button } from "antd";
+import { Button, FormInstance } from "antd";
 import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "react-router-dom";
 import styles from "../../address/address.module.css";
 import useOrder from "../hooks/useOrder";
 
-export default function CheckoutButton() {
+export default function CheckoutButton({ form }: { form: FormInstance }) {
   const { t } = useTranslation();
   const orderType = useMemo(() => localStorage.getItem("orderType"), []);
   const navigate = useNavigate();
@@ -16,13 +16,18 @@ export default function CheckoutButton() {
     navigate(`/${id}/split-bill`);
   }, [navigate, id]);
 
-  const handlePlaceOrderClick = useCallback(() => {
-    handleCreateOrder();
-  }, [handleCreateOrder]);
+  const handlePlaceOrderClick = useCallback(async () => {
+    try {
+      await form.validateFields();
+      handleCreateOrder();
+    } catch (error) {
+      console.log(error);
+    }
+  }, [handleCreateOrder, form]);
 
   const shouldShowSplitBill = useMemo(
     () => orderType === "dine-in",
-    [orderType]
+    [orderType],
   );
 
   return (

src/pages/checkout/components/phoneCard.tsx

@@ -0,0 +1,27 @@
+import { Form, Input } from "antd";
+import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
+import { selectCart, updatePhone } from "features/order/orderSlice";
+import { useTranslation } from "react-i18next";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
+
+export default function PhoneCard() {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const { phone } = useAppSelector(selectCart);
+  return (
+    <>
+      <ProInputCard title={t("checkout.phoneNumber")}>
+        <Form.Item name="phone" required rules={[{ required: true }]}>
+          <Input
+            placeholder={t("checkout.phoneNumber")}
+            size="large"
+            autoFocus={false}
+            style={{ padding: "7px 11px", height: 50, borderRadius: 888 }}
+            value={phone}
+            onChange={(e) => dispatch(updatePhone(e.target.value))}
+          />
+        </Form.Item>
+      </ProInputCard>
+    </>
+  );
+}

src/pages/checkout/hooks/useOrder.ts

@@ -13,14 +13,14 @@ export default function useOrder() {
   const { mobilenumber, user_uuid } = JSON.parse(
     localStorage.getItem("customer") || "{}"
   ) as Customer;
-  const { items, coupon, tip, tables, specialRequest } =
+  const { items, coupon, tip, tables, specialRequest, phone } =
     useAppSelector(selectCart);
 
   const [createOrder] = useCreateOrderMutation();
 
   const handleCreateOrder = useCallback(() => {
     createOrder({
-      phone: mobilenumber,
+      phone: mobilenumber || phone,
       couponID: coupon,
       discountAmount: 0,
       comment: specialRequest,

src/pages/checkout/page.tsx

@@ -1,3 +1,4 @@
+import { Form } from "antd";
 import OrderSummary from "components/OrderSummary/OrderSummary";
 import PaymentMethods from "components/PaymentMethods/PaymentMethods";
 import ProHeader from "components/ProHeader/ProHeader";
@@ -9,12 +10,15 @@ import CheckoutButton from "./components/CheckoutButton";
 import { GiftDetails } from "./components/GiftDetails";
 import { OfficeDetails } from "./components/OfficeDetails";
 import { RoomDetails } from "./components/RoomDetails";
+import PhoneCard from "./components/phoneCard";
 
 export default function CheckoutPage() {
   const { t } = useTranslation();
+  const [form] = Form.useForm();
 
   return (
     <>
+    <Form form={form}>
       <ProHeader>{t("checkout.title")}</ProHeader>
       <div className={styles.checkoutContainer}>
         <AddressSummary />
@@ -22,11 +26,13 @@ export default function CheckoutPage() {
         <OfficeDetails />
         <GiftDetails />
         <BriefMenu />
+        <PhoneCard />
         <PaymentMethods />
         <OrderSummary />
       </div>
 
-      <CheckoutButton />
+      <CheckoutButton form={form} />
+      </Form>
     </>
   );
 }