order details sheet: work on components

src/ThemeConstants.ts

@@ -183,7 +183,7 @@ export const themeConfig: ThemeConfig = {
       colorText: WHITE_COLOR["600"],
     },
     Segmented: {
-      colorBgLayout: WHITE_COLOR["100"],
+      colorBgLayout: WHITE_COLOR["hoverBg"],
       borderRadius: 6,
       colorTextLabel: "#000000",
     },

src/assets/locals/ar.json

@@ -363,5 +363,12 @@
     "office": "إلى مكتبك",
     "scheduled_order": "مجدول",
     "booking": "حجز مسبق"
+  },
+  "orderDetails": {
+    "title": "تفاصيل الطلبية",
+    "fulfillmentType": "نوع التلبية",
+    "save": "حفظ",
+    "location": "العنوان",
+    "pickupTime": "توقيت الاستلام"
   }
 }

src/assets/locals/en.json

@@ -375,5 +375,12 @@
     "scheduled_order": "Scheduled",
     "booking": "Booking",
     "scheduledOrder": "Scheduled Order"
+  },
+  "orderDetails": {
+    "title": "Order Details",
+    "fulfillmentType": "Fulfillment Type",
+    "save": "save",
+    "location": "Location",
+    "pickupTime": "Pickup time"
   }
 }

src/components/CustomBottomSheet/OrderDetailsBottomSheet.tsx

@@ -1,138 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
-import { useAppSelector } from "redux/hooks";
-import ProText from "components/ProText";
-import { OrderType } from "pages/checkout/hooks/types";
-
-interface OrderDetailsBottomSheetProps {
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-export function OrderDetailsBottomSheet({
-  isOpen,
-  onClose,
-}: OrderDetailsBottomSheetProps) {
-  const { t } = useTranslation();
-  const { orderType, restaurant, specialRequest, items } = useAppSelector(
-    (state) => state.order,
-  );
-  // const { isRTL } = useAppSelector((state) => state.locale);
-
-  return (
-    <ProBottomSheet
-      isOpen={isOpen}
-      onClose={onClose}
-      title={t("Order Details")}
-      height={500}
-      snapPoints={["60vh"]}
-    >
-      <div style={{ padding: "16px 0" }}>
-        {/* Order Type */}
-        <div style={{ marginBottom: 16 }}>
-          <ProText style={{ fontSize: 18, fontWeight: 600 }}>
-            {t("Order Type")}: {orderType && t(orderType)}
-          </ProText>
-        </div>
-
-        {/* Items List */}
-        <div style={{ marginBottom: 16 }}>
-          <ProText style={{ fontSize: 16, fontWeight: 600, marginBottom: 8 }}>
-            {t("Items")}
-          </ProText>
-          {items.length > 0 ? (
-            <div>
-              {items.map((item) => (
-                <div
-                  key={item.id}
-                  style={{
-                    display: "flex",
-                    justifyContent: "space-between",
-                    marginBottom: 8,
-                    padding: "8px 0",
-                    borderBottom: "1px solid #eee",
-                  }}
-                >
-                  <div>
-                    <ProText style={{ fontWeight: 500 }}>
-                      {item.quantity} x {item.name}
-                    </ProText>
-                  </div>
-                  <ProText style={{ fontWeight: 500 }}>{}</ProText>
-                </div>
-              ))}
-            </div>
-          ) : (
-            <ProText>{t("No items in cart")}</ProText>
-          )}
-        </div>
-
-        {/* Special Request */}
-        {specialRequest && (
-          <div style={{ marginBottom: 16 }}>
-            <ProText style={{ fontSize: 16, fontWeight: 600, marginBottom: 8 }}>
-              {t("Special Request")}
-            </ProText>
-            <ProText>{specialRequest}</ProText>
-          </div>
-        )}
-
-        {/* Order Summary */}
-        <div style={{ marginTop: 24 }}>
-          <ProText style={{ fontSize: 16, fontWeight: 600, marginBottom: 8 }}>
-            {t("Order Summary")}
-          </ProText>
-
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "space-between",
-              marginBottom: 8,
-            }}
-          >
-            <ProText>{t("Subtotal")}</ProText>
-            <ProText>{}</ProText>
-          </div>
-
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "space-between",
-              marginBottom: 8,
-            }}
-          >
-            <ProText>{t("Tax")}</ProText>
-            <ProText>{}</ProText>
-          </div>
-
-          {orderType !== OrderType.DineIn && restaurant?.delivery_fees && (
-            <div
-              style={{
-                display: "flex",
-                justifyContent: "space-between",
-                marginBottom: 8,
-              }}
-            >
-              <ProText>{t("Delivery Fee")}</ProText>
-              <ProText>{Number(restaurant.delivery_fees)}</ProText>
-            </div>
-          )}
-
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "space-between",
-              marginTop: 16,
-              paddingTop: 16,
-              borderTop: "1px solid #eee",
-              fontWeight: 600,
-            }}
-          >
-            <ProText style={{ fontWeight: 600 }}>{t("Total")}</ProText>
-            <ProText style={{ fontWeight: 600 }}>{}</ProText>
-          </div>
-        </div>
-      </div>
-    </ProBottomSheet>
-  );
-}

src/components/CustomBottomSheet/orderDetailsSheet/OrderDetailsBottomSheet.module.css

@@ -0,0 +1,9 @@
+.saveButton {
+  border-radius: 100px;
+  height: 48px;
+  width: 100%;
+  font-size: 16px;
+  box-shadow: none;
+  position: fixed;
+  bottom: 0;left: 0;
+}

src/components/CustomBottomSheet/orderDetailsSheet/OrderDetailsBottomSheet.tsx

@@ -0,0 +1,108 @@
+import { useTranslation } from "react-i18next";
+import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
+import { useAppSelector } from "redux/hooks.ts";
+import ProText from "components/ProText.tsx";
+import { OrderType } from "pages/checkout/hooks/types.ts";
+import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
+import { Segmented, Button } from "antd";
+
+import DineInIcon from "./icons/dineIn.svg?react";
+import DeliveryIcon from "./icons/delivery.svg?react";
+import PickupIcon from "./icons/pickup.svg?react";
+import styles from "./OrderDetailsBottomSheet.module.css";
+import { GoogleMap } from "components/CustomBottomSheet/GoogleMap.tsx";
+
+interface OrderDetailsBottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function OrderDetailsBottomSheet({
+  isOpen,
+  onClose,
+}: OrderDetailsBottomSheetProps) {
+  const { t } = useTranslation();
+  const { orderType, location } = useAppSelector((state) => state.order);
+
+  return (
+    <ProBottomSheet
+      isOpen={isOpen}
+      onClose={onClose}
+      title={t("orderDetails.title")}
+      height={500}
+      snapPoints={["60vh"]}
+      showCloseButton={false}
+    >
+      <div style={{ padding: "16px 0", position: "relative" }}>
+        {/* Order Type */}
+        <ProInputCard
+          title={t("orderDetails.fulfillmentType")}
+          dividerStyle={{ margin: "5px 0 0 0" }}
+        >
+          <Segmented
+            options={[
+              {
+                value: OrderType.DineIn,
+                label: t("orderTypes.dine-in"),
+                icon: <DineInIcon />,
+              },
+              {
+                value: OrderType.Pickup,
+                label: t("orderTypes.pickup"),
+                icon: <PickupIcon />,
+              },
+              {
+                value: OrderType.Delivery,
+                label: t("orderTypes.delivery"),
+                icon: <DeliveryIcon />,
+              },
+            ]}
+            value={orderType}
+            size="small"
+          />
+        </ProInputCard>
+        <ProInputCard
+          title={t("orderDetails.location")}
+          dividerStyle={{ margin: "5px 0 0 0" }}
+        >
+          {!location ? (
+            <div className={styles.noLocationContainer}>
+              <ProText type="secondary">
+                {t("address.noLocationSelected")}
+              </ProText>
+              <br />
+              <ProText type="secondary" className={styles.smallTextStyle}>
+                {t("address.clickEditToSelect")}
+              </ProText>
+            </div>
+          ) : (
+            <div className={styles.mapContainer}>
+              <GoogleMap
+                readOnly={true}
+                initialLocation={location}
+                height="160px"
+              />
+            </div>
+          )}
+        </ProInputCard>
+        <ProInputCard
+          title={t("orderDetails.pickupTime")}
+          dividerStyle={{ margin: "5px 0 0 0" }}
+        >
+          <div className={styles.noLocationContainer}>
+            <ProText type="secondary">
+              {t("address.noLocationSelected")}
+            </ProText>
+            <br />
+            <ProText type="secondary" className={styles.smallTextStyle}>
+              {t("address.clickEditToSelect")}
+            </ProText>
+          </div>
+        </ProInputCard>
+        <Button type="primary" className={styles.saveButton}>
+          {t("orderDetails.save")}
+        </Button>
+      </div>
+    </ProBottomSheet>
+  );
+}

src/pages/restaurant/page.tsx

@@ -11,7 +11,7 @@ import RestaurantServices from "./RestaurantServices";
 
 // Import the Client Component for localStorage handling
 import Ads1 from "components/Ads/Ads1";
-import { OrderDetailsBottomSheet } from "components/CustomBottomSheet/OrderDetailsBottomSheet";
+import { OrderDetailsBottomSheet } from "components/CustomBottomSheet/orderDetailsSheet/OrderDetailsBottomSheet.tsx";
 import { Loader } from "components/Loader/Loader";
 import {
   CART_STORAGE_KEYS,
@@ -45,9 +45,12 @@ export default function RestaurantPage() {
     (state) => state.order,
   );
   const { isRTL } = useAppSelector((state) => state.locale);
-  const { data: restaurant, isLoading } = useGetRestaurantDetailsQuery(param.subdomain, {
+  const { data: restaurant, isLoading } = useGetRestaurantDetailsQuery(
-    skip: !param.subdomain,
+    param.subdomain,
-  });
+    {
+      skip: !param.subdomain,
+    },
+  );
   const [isOrderDetailsOpen, setIsOrderDetailsOpen] = useState(false);
 
   const { containerRef, handleTouchEnd, handleTouchStart } = useSwipeUp({