add split bill participants BS

src/assets/locals/ar.json

@@ -378,6 +378,10 @@
     "confirmOTPSuccess": "تم التحقق من رمز التحقق بنجاح"
   },
   "order": {
+    "whosPaidTheirShareSplitBill": "من قام بدفع نصيبه من الفاتورة؟",
+    "seeWhoPaidAndHowMuch": "اعرض من قام بدفع نصيبه من الفاتورة وكم يبلغ نصيبه",
+    "personHasPaid": "قام بدفع نصيبه من الفاتورة",
+    "inviteOthersToBill": "دع الآخرين يدفعوا معك",
     "title": "الطلب",
     "newOrder": "طلب جديد",
     "paymentSummary": "ملخص الدفع",
@@ -438,6 +442,7 @@
     "payButtonDescription": "الدفع للطلب"
   },
   "splitBill": {
+    "serviceFee": "نصيب الخدمة",
     "title": "تقسيم الفاتورة",
     "description": "تقسيم الفاتورة",
     "splitBill": "تقسيم الفاتورة",

src/assets/locals/en.json

@@ -391,6 +391,10 @@
     "confirmOTPSuccess": "OTP confirmed successfully"
   },
   "order": {
+    "whosPaidTheirShareSplitBill": "Who's paid their share of the split bill?",
+    "seeWhoPaidAndHowMuch": "See who paid and how much",
+    "personHasPaid": "Person has paid",
+    "inviteOthersToBill": "Invite others to bill",
     "title": "Order",
     "newOrder": "New Order",
     "aStaffMemberWillCollectTheCashFromYouAtYourTable": "A staff member will collect the cash from you at your table",
@@ -450,6 +454,7 @@
     "payButtonDescription": "Pay for your order"
   },
   "splitBill": {
+    "serviceFee": "Service Fee",
     "title": "Split Bill",
     "description": "Split Bill",
     "splitBill": "Split Bill",

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>
+  );
+}

src/pages/order/order.module.css

@@ -314,17 +314,17 @@
 }
 
 .orderContent {
-    display: flex;
-    flex-direction: column;
-    padding: 16px;
-    gap: 16px;
-    overflow: auto;
-    scrollbar-width: none;
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  gap: 16px;
+  overflow: auto;
+  scrollbar-width: none;
 }
 
 /* CheckoutButton Styles */
 
-.checkoutButton{
+.checkoutButton {
   width: 100%;
 }
 
@@ -348,3 +348,13 @@
 :global(.darkApp) .checkoutButtonContainer {
   background-color: #000000 !important;
 }
+
+.inviteToBill {
+  gap: 16px;
+  opacity: 1;
+  border-radius: 6px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  place-items: center;
+}

src/pages/order/page.tsx

@@ -37,6 +37,8 @@ import { QRBottomSheet } from "pages/pay/components/splitBill/QRBottomSheet";
 import NewRateIcon from "components/Icons/order/NewRateIcon";
 import NoteIcon from "components/Icons/NoteIcon";
 import SuccessIcon from "components/Icons/SuccessIcon";
+import ProInputCard from "components/ProInputCard/ProInputCard";
+import { SplitBillParticipantsBottomSheet } from "./components/SplitBillParticipantsBottomSheet";
 
 export default function OrderPage() {
   const { t } = useTranslation();
@@ -47,7 +49,7 @@ export default function OrderPage() {
   const hasRefetchedRef = useRef(false);
   const [isOpen, setIsOpen] = useState(false);
   const [isRateOrderOpen, setIsRateOrderOpen] = useState(false);
-
+  const [isSplitBillParticipantsBottomSheetOpen, setIsSplitBillParticipantsBottomSheetOpen] = useState(false);
   const { data: orderDetails } = useGetOrderDetailsQuery(
     {
       orderID: orderId || "",
@@ -322,9 +324,8 @@ export default function OrderPage() {
                 </Tooltip>
               </Flex>
             ) : (
-              <div style={{margin: "56px 0"}}>
-              <OrderDishIcon className={styles.orderDishIcon} />
-
+              <div style={{ margin: "56px 0" }}>
+                <OrderDishIcon className={styles.orderDishIcon} />
               </div>
             )}
 
@@ -497,32 +498,121 @@ export default function OrderPage() {
 
           <PaymentDetails order={orderDetails?.order} />
 
-          {hasClosedStatus && (
-            <Card
-              className={styles.inviteToBillCard}
-              onClick={() => setIsOpen(true)}
+          {/* inviteToBill */}
+          {!hasClosedStatus && (
+            <ProInputCard
+              title={
+                <>
+                  <div
+                    style={{
+                      display: "flex",
+                      flexDirection: "column",
+                      marginBottom: 9,
+                      gap: 2  ,
+                    }}
+                  >
+                    <ProText
+                      style={{
+                        fontSize: "18px",
+                        fontWeight: 500,
+                        fontStyle: "Medium",
+                        lineHeight: "140%",
+                        letterSpacing: "0%",
+                        color: "#333333",
+                      }}
+                    >
+                      {t("order.whosPaidTheirShareSplitBill")}
+                    </ProText>
+                    <ProText
+                      style={{
+                        fontWeight: 400,
+                        fontStyle: "Regular",
+                        fontSize: 12,
+                        lineHeight: "140%",
+                        letterSpacing: "0%",
+                        color: "#777580",
+                      }}
+                    >
+                      {t("order.seeWhoPaidAndHowMuch")}
+                    </ProText>
+                  </div>
+                </>
+              }
             >
-              <div
+              <div className={styles.inviteToBill} 
+              onClick={() => setIsSplitBillParticipantsBottomSheetOpen(true)}>
+                <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>
+              <Button
+                type="text"
                 style={{
+                  height: 48,
+                  width: "100%",
                   display: "flex",
                   flexDirection: "row",
                   justifyContent: "center",
-                  marginTop: 1,
+                  alignItems: "center",
+                  gap: 8,
+                  border: "1px solid #C0BFC4",
+                  borderRadius: 888,
+                  marginTop: 16,
                 }}
+                onClick={() => setIsOpen(true)}
               >
-                <div style={{ display: "flex", flexDirection: "row", gap: 10 }}>
-                  <ProTitle
-                    level={5}
-                    style={{
-                      marginTop: 1,
-                      fontSize: 14,
-                    }}
-                  >
-                    {t("order.inviteToBill")}
-                  </ProTitle>
-                </div>
-              </div>
-            </Card>
+                <ProText
+                  style={{
+                    fontWeight: 400,
+                    fontStyle: "Regular",
+                    fontSize: 16,
+                    lineHeight: "140%",
+                    letterSpacing: "0%",
+                    color: "#333333",
+                  }}
+                >
+                  {t("order.inviteOthersToBill")}
+                </ProText>
+              </Button>
+            </ProInputCard>
           )}
 
           <QRBottomSheet isOpen={isOpen} onClose={() => setIsOpen(false)} />
@@ -589,6 +679,7 @@ export default function OrderPage() {
           </Layout.Footer>
         )}
       </Layout>
+      <SplitBillParticipantsBottomSheet isOpen={isSplitBillParticipantsBottomSheetOpen} onClose={() => setIsSplitBillParticipantsBottomSheetOpen(false)} />
     </>
   );
 }