From ad036d1e6440924951a0f6dbe360dcaa185285ff Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Tue, 6 Jan 2026 20:56:41 +0300
Subject: [PATCH] apply collect card

---
 src/assets/locals/ar.json                     |  4 +-
 src/assets/locals/en.json                     |  4 +-
 .../CollectWay/CollectWay.module.css          | 65 +++++++++++++++++++
 .../components/CollectWay/CollectWay.tsx      | 34 ++++++++++
 src/pages/checkout/page.tsx                   |  5 +-
 5 files changed, 109 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/checkout/components/CollectWay/CollectWay.module.css
 create mode 100644 src/pages/checkout/components/CollectWay/CollectWay.tsx

diff --git a/src/assets/locals/ar.json b/src/assets/locals/ar.json
index 37d4d8f..6ca4ada 100644
--- a/src/assets/locals/ar.json
+++ b/src/assets/locals/ar.json
@@ -300,7 +300,9 @@
     "viewOrder": "عرض الطلب",
     "itemsSummary": "ملخص العناصر",
     "removeSplitBill": "إزالة التقسيم",
-    "cardBalance": "رصيد البطاقة"
+    "cardBalance": "رصيد البطاقة",
+    "collectAtCounter": "استلام في المكتب",
+    "collectAtParking": "استلام في الموقف"
   },
   "address": {
     "title": "العنوان",
diff --git a/src/assets/locals/en.json b/src/assets/locals/en.json
index 8a68f0c..6d5afeb 100644
--- a/src/assets/locals/en.json
+++ b/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",
diff --git a/src/pages/checkout/components/CollectWay/CollectWay.module.css b/src/pages/checkout/components/CollectWay/CollectWay.module.css
new file mode 100644
index 0000000..1a79304
--- /dev/null
+++ b/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;
+}
diff --git a/src/pages/checkout/components/CollectWay/CollectWay.tsx b/src/pages/checkout/components/CollectWay/CollectWay.tsx
new file mode 100644
index 0000000..abbef57
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/pages/checkout/page.tsx b/src/pages/checkout/page.tsx
index 829471f..6bc88fe 100644
--- a/src/pages/checkout/page.tsx
+++ b/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 />