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

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