OrderTypesBottomSheet: initial commit

src/components/CustomBottomSheet/OrderTypesBottomSheet.tsx

@@ -0,0 +1,105 @@
+import { Button } from "antd";
+import { useTranslation } from "react-i18next";
+import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
+import NextIcon from "components/Icons/NextIcon";
+import { useAppSelector } from "redux/hooks";
+
+interface OrderTypesBottomSheetBottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function OrderTypesBottomSheet({
+  isOpen,
+  onClose,
+}: OrderTypesBottomSheetBottomSheetProps) {
+  const { t } = useTranslation();
+  const { restaurant } = useAppSelector((state) => state.order);
+
+  const buttonStyle = {
+    height: 48,
+    width: "100%",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+  };
+
+  // Count visible services
+  const visibleServicesCount = [
+    restaurant?.dineIn == true,
+    restaurant?.delivery == true,
+    restaurant?.pickup == true,
+    restaurant?.gift == true,
+    restaurant?.toRoom == true,
+    restaurant?.toOffice == true,
+    restaurant?.is_schedule_order_enabled == 1,
+    restaurant?.is_booking_enabled == 1,
+  ].filter(Boolean).length;
+
+  // Calculate height: base 620px, subtract 48px for each hidden service
+  const totalServices = 8;
+  const hiddenServices = totalServices - visibleServicesCount;
+  const calculatedHeight = 620 - hiddenServices * 64;
+
+  return (
+    <ProBottomSheet
+      isOpen={isOpen}
+      onClose={onClose}
+      title={t("menu.orderTypes")}
+      showCloseButton={false}
+      initialSnap={1}
+      height={calculatedHeight}
+      snapPoints={[calculatedHeight.toString()]}
+    >
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: 16,
+          margin: "16px 0",
+        }}
+      >
+        {restaurant?.dineIn == true && (
+          <Button icon={<NextIcon />} iconPlacement="end" style={buttonStyle}>
+            {t("orderTypes.dineIn")}
+          </Button>
+        )}
+        {restaurant?.delivery == true && (
+          <Button icon={<NextIcon />} iconPlacement="end" style={buttonStyle}>
+            {t("orderTypes.delivery")}
+          </Button>
+        )}
+        {restaurant?.pickup == true && (
+          <Button icon={<NextIcon />} iconPlacement="end" style={buttonStyle}>
+            {t("orderTypes.pickup")}
+          </Button>
+        )}
+        {restaurant?.gift == true && (
+          <Button icon={<NextIcon />} iconPlacement="end" style={buttonStyle}>
+            {t("orderTypes.gift")}
+          </Button>
+        )}
+        {restaurant?.toRoom == true && (
+          <Button icon={<NextIcon />} iconPlacement="end" style={buttonStyle}>
+            {t("orderTypes.room")}
+          </Button>
+        )}
+        {restaurant?.toOffice == true && (
+          <Button icon={<NextIcon />} iconPlacement="end" style={buttonStyle}>
+            {t("orderTypes.office")}
+          </Button>
+        )}
+        {restaurant?.is_schedule_order_enabled == 1 && (
+          <Button icon={<NextIcon />} iconPlacement="end" style={buttonStyle}>
+            {t("orderTypes.scheduled_order")}
+          </Button>
+        )}
+        {restaurant?.is_booking_enabled == 1 && (
+          <Button icon={<NextIcon />} iconPlacement="end" style={buttonStyle}>
+            {t("orderTypes.booking")}
+          </Button>
+        )}
+      </div>
+    </ProBottomSheet>
+  );
+}