add split bill choice bottom sheet

src/pages/pay/components/splitBill/SplitBillChoiceBottomSheet.tsx

@@ -0,0 +1,150 @@
+import { Card } from "antd";
+import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
+import { useTranslation } from "react-i18next";
+
+import BackIcon from "components/Icons/BackIcon";
+import NextIcon from "components/Icons/NextIcon";
+import ProTitle from "components/ProTitle";
+import { useNavigate, useParams } from "react-router-dom";
+import { useGetRestaurantDetailsQuery } from "redux/api/others";
+import { useAppSelector } from "redux/hooks";
+import styles from "./SplitBill.module.css";
+
+interface SplitBillChoiceBottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave?: (value: string) => void;
+}
+
+export function SplitBillChoiceBottomSheet({
+  isOpen,
+  onClose,
+  // onSave,
+}: SplitBillChoiceBottomSheetProps) {
+  const { t } = useTranslation();
+  // const [value, setValue] = useState(initialValue);
+  const { isRTL } = useAppSelector((state) => state.locale);
+  const { subdomain } = useParams();
+  const navigate = useNavigate();
+  const { data: restaurant } = useGetRestaurantDetailsQuery(subdomain, {
+    skip: !subdomain,
+  });
+
+  // const handleSave = () => {
+  //   onSave(value);
+  //   onClose();
+  // };
+
+  const handleCancel = () => {
+    // setValue(initialValue);
+    onClose();
+  };
+
+  return (
+    <ProBottomSheet
+      isOpen={isOpen}
+      onClose={handleCancel}
+      title={t("splitBill.title")}
+      showCloseButton={false}
+      initialSnap={1}
+      height={290}
+      snapPoints={[290]}
+    >
+      <div
+        style={{
+          marginTop: 20,
+          display: "flex",
+          flexDirection: "column",
+          gap: 10,
+        }}
+      >
+        <Card
+          className={styles.backToHomePage}
+          onClick={() => navigate(`/${restaurant?.subdomain}`)}
+        >
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-between",
+              marginTop: 1,
+            }}
+          >
+            <ProTitle
+              level={5}
+              style={{
+                fontSize: 14,
+              }}
+            >
+              {t("splitBill.payAsCustomAmount")}
+            </ProTitle>
+
+            {isRTL ? (
+              <BackIcon className={styles.serviceIcon} />
+            ) : (
+              <NextIcon className={styles.serviceIcon} />
+            )}
+          </div>
+        </Card>
+
+        <Card
+          className={styles.backToHomePage}
+          onClick={() => navigate(`/${restaurant?.subdomain}`)}
+        >
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-between",
+              marginTop: 1,
+            }}
+          >
+            <ProTitle
+              level={5}
+              style={{
+                fontSize: 14,
+              }}
+            >
+              {t("splitBill.divideTheBillEqually")}
+            </ProTitle>
+
+            {isRTL ? (
+              <BackIcon className={styles.serviceIcon} />
+            ) : (
+              <NextIcon className={styles.serviceIcon} />
+            )}
+          </div>
+        </Card>
+
+        <Card
+          className={styles.backToHomePage}
+          onClick={() => navigate(`/${restaurant?.subdomain}`)}
+        >
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-between",
+              marginTop: 1,
+            }}
+          >
+            <ProTitle
+              level={5}
+              style={{
+                fontSize: 14,
+              }}
+            >
+              {t("splitBill.payForYourItems")}
+            </ProTitle>
+
+            {isRTL ? (
+              <BackIcon className={styles.serviceIcon} />
+            ) : (
+              <NextIcon className={styles.serviceIcon} />
+            )}
+          </div>
+        </Card>
+      </div>
+    </ProBottomSheet>
+  );
+}