order details sheet: work on components

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