Initial commit

src/components/CustomBottomSheet/CancelOrderBottomSheet.tsx

@@ -0,0 +1,138 @@
+// import { useGlobals } from "../../hooks/useGlobals";
+import { Button, Card } from "antd";
+import BackIcon from "components/Icons/BackIcon";
+import CancelIcon from "components/Icons/CancelIcon";
+import CancelPopupIcon from "components/Icons/CancelPopupIcon";
+import NextIcon from "components/Icons/NextIcon";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
+import ProText from "../ProText";
+import ProTitle from "../ProTitle";
+import styles from "./CustomBottomSheet.module.css";
+
+interface CancelOrderBottomSheetProps {
+  initialValue?: string;
+  onSave?: (value: string) => void;
+}
+
+export function CancelOrderBottomSheet({}: CancelOrderBottomSheetProps) {
+  const { t } = useTranslation();
+  const [isOpen, setIsOpen] = useState(false);
+  const isRTL = false; // Default to LTR
+
+  const handleSave = () => {
+    setIsOpen(false);
+  };
+
+  const handleCancel = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <>
+      <Card className={styles.homeServiceCard} onClick={() => setIsOpen(true)}>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "space-between",
+            marginTop: 1,
+          }}
+        >
+          <div style={{ display: "flex", flexDirection: "row", gap: 10 }}>
+            <CancelIcon />
+
+            <ProTitle
+              level={5}
+              style={{
+                marginTop: 1,
+                fontSize: 14,
+                color: "#ea1f22",
+              }}
+            >
+              {t("order.cancelOrder")}
+            </ProTitle>
+          </div>
+
+          {isRTL ? (
+            <BackIcon className={styles.serviceIcon} />
+          ) : (
+            <NextIcon className={styles.serviceIcon} />
+          )}
+        </div>
+      </Card>
+
+      <ProBottomSheet
+        isOpen={isOpen}
+        onClose={handleCancel}
+        title={t("order.cancelOrder")}
+        showCloseButton={false}
+        initialSnap={1}
+        height={"45vh"}
+        snapPoints={["40vh"]}
+      >
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 10,
+          }}
+        >
+          <CancelPopupIcon />
+
+          <ProText
+            style={{
+              fontSize: "1rem",
+            }}
+          >
+            {t("order.areYouSureYouWantToCancelThisOrder?")}
+          </ProText>
+
+          <ProText
+            type="secondary"
+            style={{
+              fontSize: 14,
+              marginBottom: 10
+            }}
+          >
+            {t("order.thisActionCannotBeUndone")}
+          </ProText>
+
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              gap: 10,
+              width: "100%",
+            }}
+          >
+            <Button
+              type="primary"
+              style={{ width: "100%", height: 50, color: "#FFF" }}
+              onClick={handleSave}
+            >
+              {t("order.keepOrder")}
+            </Button>
+
+            <Button
+              type="primary"
+              style={{
+                width: "100%",
+                height: 50,
+                color: "#ea1f22",
+                borderColor: "#ea1f22",
+                backgroundColor: "#fff",
+              }}
+              onClick={handleSave}
+            >
+              {t("order.cancelOrder")}
+            </Button>
+          </div>
+        </div>
+      </ProBottomSheet>
+    </>
+  );
+}