apply collect card

src/assets/locals/ar.json

@@ -300,7 +300,9 @@
     "viewOrder": "عرض الطلب",
     "itemsSummary": "ملخص العناصر",
     "removeSplitBill": "إزالة التقسيم",
-    "cardBalance": "رصيد البطاقة"
+    "cardBalance": "رصيد البطاقة",
+    "collectAtCounter": "استلام في المكتب",
+    "collectAtParking": "استلام في الموقف"
   },
   "address": {
     "title": "العنوان",

src/assets/locals/en.json

@@ -312,7 +312,9 @@
     "viewOrder": "View Order",
     "itemsSummary": "Items Summary",
     "removeSplitBill": "Remove Split Bill",
-    "cardBalance": "Card Balance"
+    "cardBalance": "Card Balance",
+    "collectAtCounter": "Collect at counter",
+    "collectAtParking": "Collect at parking"
   },
   "address": {
     "title": "Address",

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

@@ -0,0 +1,65 @@
+.collectWay {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 16px;
+  background-color: #ebebec;
+  height: 44;
+  border-radius: 888px;
+  padding: 4px;
+  opacity: 1;
+}
+
+.activeButton {
+  background-color: #030014;
+  color: #ffffff;
+  height: 36px;
+  border: none !important;
+  width: 100%;
+  transition: none !important;
+}
+
+.activeButton:hover,
+.activeButton:focus,
+.activeButton:active,
+.activeButton:focus-visible {
+  background-color: #030014 !important;
+  color: #ffffff !important;
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+  transform: none !important;
+  opacity: 1 !important;
+}
+
+.activeButton::before,
+.activeButton::after {
+  display: none !important;
+}
+
+.inactiveButton {
+  background-color: #ebebec;
+  color: #595764;
+  height: 36px;
+  border: none !important;
+  width: 100%;
+  transition: none !important;
+}
+
+.inactiveButton:hover,
+.inactiveButton:focus,
+.inactiveButton:active,
+.inactiveButton:focus-visible {
+  background-color: #ebebec !important;
+  color: #595764 !important;
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+  transform: none !important;
+  opacity: 1 !important;
+}
+
+.inactiveButton::before,
+.inactiveButton::after {
+  display: none !important;
+}

src/pages/checkout/components/CollectWay/CollectWay.tsx

@@ -0,0 +1,34 @@
+import { Button } from "antd";
+import styles from "./CollectWay.module.css";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+export const CollectWay = (): JSX.Element => {
+  const { t } = useTranslation();
+  const [activeButton, setActiveButton] = useState<string>("counter");
+
+  return (
+    <div className={styles.collectWay}>
+      <Button
+        className={
+          activeButton === "counter"
+            ? styles.activeButton
+            : styles.inactiveButton
+        }
+        onClick={() => setActiveButton("counter")}
+      >
+        {t("checkout.collectAtCounter")}
+      </Button>
+      <Button
+        className={
+          activeButton === "parking"
+            ? styles.activeButton
+            : styles.inactiveButton
+        }
+        onClick={() => setActiveButton("parking")}
+      >
+        {t("checkout.collectAtParking")}
+      </Button>
+    </div>
+  );
+};

src/pages/checkout/page.tsx

@@ -1,4 +1,4 @@
-import { Form, Layout } from "antd";
+import { Flex, Form, Layout } from "antd";
 import InputCard from "components/InputCard";
 import OrderSummary from "components/OrderSummary/OrderSummary";
 import PaymentMethods from "components/PaymentMethods/PaymentMethods";
@@ -21,6 +21,7 @@ import Ads1 from "components/Ads/Ads1";
 import TimeEstimateCard from "pages/cart/components/timeEstimate/TimeEstimateCard";
 import { useEffect } from "react";
 import { CarCard } from "./components/CarCard";
+import { CollectWay } from "./components/CollectWay/CollectWay";
 
 export default function CheckoutPage() {
   const { t } = useTranslation();
@@ -45,8 +46,10 @@ export default function CheckoutPage() {
         <Layout>
           <ProHeader>{t("checkout.title")}</ProHeader>
           <Layout.Content className={styles.checkoutContainer}>
+            {orderType === OrderType.Pickup && <CollectWay />}
             {(orderType === OrderType.Pickup ||
               orderType === OrderType.ScheduledOrder) && <TimeEstimateCard />}
+
             {orderType === OrderType.Pickup && <CarCard />}
             {orderType === OrderType.Gift && <GiftCard />}
             <PaymentMethods />