add split bill participants BS

src/pages/order/components/SplitBillParticipantsBottomSheet.tsx

@@ -0,0 +1,146 @@
+import { Button } from "antd";
+import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
+import { useTranslation } from "react-i18next";
+
+import { useAppSelector } from "redux/hooks";
+import ProText from "components/ProText";
+import ArabicPrice from "components/ArabicPrice";
+import styles from "../order.module.css";
+import NextIcon from "components/Icons/NextIcon";
+import BackIcon from "components/Icons/BackIcon";
+
+interface SplitBillParticipantsBottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function SplitBillParticipantsBottomSheet({
+  isOpen,
+  onClose,
+}: SplitBillParticipantsBottomSheetProps) {
+  const { t } = useTranslation();
+  const { isRTL } = useAppSelector((state) => state.locale);
+
+  const taxesChargesStyle = {
+    fontWeight: 400,
+    fontStyle: "Regular",
+    fontSize: 12,
+    lineHeight: "140%",
+    letterSpacing: "0%",
+    color: "#777580",
+  };
+
+  return (
+    <ProBottomSheet
+      isOpen={isOpen}
+      onClose={onClose}
+      title={t("order.whosPaidTheirShareSplitBill")}
+      showCloseButton={true}
+      initialSnap={1}
+      height={285}
+      snapPoints={[285]}
+      contentStyle={{
+        padding: 0,
+      }}
+    >
+      <div
+        style={{
+          padding: "20px",
+          display: "flex",
+          flexDirection: "column",
+          gap: 20,
+        }}
+      >
+        <div className={styles.inviteToBill}>
+          <Button
+            shape="circle"
+            iconPlacement="start"
+            size="small"
+            className={styles.addButton}
+            style={{
+              background: "#F9F9FA",
+              width: 28,
+              height: 28,
+              border: "none",
+              color: "#FFB700",
+            }}
+          >
+            <ProText style={{ color: "#1F1C2E" }}> 1 </ProText>
+          </Button>
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              gap: 4,
+              width: "100%",
+            }}
+          >
+            <ProText
+              style={{
+                fontWeight: 500,
+                fontStyle: "Medium",
+                fontSize: 14,
+                lineHeight: "140%",
+                letterSpacing: "0%",
+                color: "#777580",
+              }}
+            >
+              {t("order.personHasPaid")}
+            </ProText>
+          </div>
+          {isRTL ? <BackIcon iconSize={24} /> : <NextIcon iconSize={24} />}
+        </div>
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          backgroundColor: "var(--background)",
+          padding: "20px",
+          opacity: 1,
+          gap: 8,
+          borderTopLeftRadius: 24,
+          borderTopRightRadius: 24,
+          paddingTop: 12,
+          paddingRight: 24,
+          paddingBottom: 24,
+          paddingLeft: 24,
+        }}
+      >
+        <div className={styles.summaryRow}>
+          <ProText style={taxesChargesStyle}>
+            {t("splitBill.totalBill")}
+          </ProText>
+          <ArabicPrice price={0} textStyle={taxesChargesStyle} />
+        </div>
+        <div className={styles.summaryRow}>
+          <ProText style={taxesChargesStyle}>
+            {t("splitBill.serviceFee")}
+          </ProText>
+          <ArabicPrice price={0} textStyle={taxesChargesStyle} />
+        </div>
+        <div className={styles.summaryRow}>
+          <ProText
+            style={{
+              fontWeight: 400,
+              fontStyle: "Regular",
+              fontSize: 14,
+              lineHeight: "140%",
+              letterSpacing: "0%",
+            }}
+          >
+            {t("splitBill.remainingToPay")}
+          </ProText>
+          <ArabicPrice
+            price={0}
+            textStyle={taxesChargesStyle}
+          />
+        </div>
+        <ProText style={taxesChargesStyle}>
+          {t("splitBill.includesAllOfTaxesCharges")}
+        </ProText>
+      </div>
+    </ProBottomSheet>
+  );
+}