add "order details" bottom sheet

src/components/CustomBottomSheet/OrderDetailsBottomSheet.tsx

@@ -0,0 +1,138 @@
+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>
+  );
+}