CustomAmountChoiceBottomSheet: update UI

src/assets/locals/ar.json

@@ -425,7 +425,11 @@
     "yourAmount": "مبلغك",
     "selectedTotal": "المجموع المحدد",
     "splitBillAmount": "مبلغ تقسيم الفاتورة",
-    "removeSplitWay": "إزالة طريقة التقسيم",
-    "amount": "المبلغ"
+    "removeSplit": "إزالة التقسيم",
+    "amount": "المبلغ",
+    "howMuchWouldYouLikeToPay": "كم مبلغ تريد دفعه؟",
+    "confirm": "تأكيد",
+    "totalBill": "الفاتورة الكلية",
+    "remainingToPay": "المبلغ المتبقي"
   }
 }

src/assets/locals/en.json

@@ -437,7 +437,11 @@
     "yourAmount": "Your Amount",
     "selectedTotal": "Selected Total",
     "splitBillAmount": "Split Bill Amount",
-    "removeSplitWay": "Remove Split Way",
-    "amount": "Amount"
+    "removeSplit": "Remove Split",
+    "amount": "Amount",
+    "howMuchWouldYouLikeToPay": "How much would you like to pay?",
+    "confirm": "Confirm",
+    "totalBill": "Total Bill",
+    "remainingToPay": "Remaining to Pay"
   }
 }

src/components/ProBottomSheet/ProBottomSheet.tsx

@@ -16,6 +16,7 @@ interface ProBottomSheetProps {
   initialSnap?: number;
   className?: string;
   themeName?: "light" | "dark";
+  contentStyle?: React.CSSProperties;
 }
 
 export function ProBottomSheet({
@@ -30,6 +31,7 @@ export function ProBottomSheet({
   snapPoints = [500],
   initialSnap = 0,
   className = "",
+  contentStyle = {},
 }: ProBottomSheetProps) {
   const [currentSnap, setCurrentSnap] = useState(initialSnap);
   const [isDragging, setIsDragging] = useState(false);
@@ -231,12 +233,13 @@ export function ProBottomSheet({
     backdropFilter: themeName === "dark" ? "blur(8px)" : "none",
   };
 
-  const contentStyle: React.CSSProperties = {
+  const contentWrapperStyle: React.CSSProperties = {
     flex: 1,
     overflow: "auto",
     padding: "0 20px",
     backgroundColor: themeName === "dark" ? "#0a0a0a" : "#ffffff",
     color: themeName === "dark" ? "#ffffff" : "#000000",
+    ...contentStyle,
   };
 
   const closeButtonStyle: React.CSSProperties = {
@@ -315,7 +318,7 @@ export function ProBottomSheet({
           </div>
         )}
 
-        <div style={contentStyle}>{children}</div>
+        <div style={contentWrapperStyle}>{children}</div>
       </div>
     </>
   );

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

@@ -9,7 +9,9 @@ import {
   updateSplitBillAmount,
 } from "features/order/orderSlice";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
-import ProInputCard from "components/ProInputCard/ProInputCard";
+import ProText from "components/ProText";
+import ArabicPrice from "components/ArabicPrice";
+import styles from "./SplitBill.module.css";
 
 interface SplitBillChoiceBottomSheetProps {
   isOpen: boolean;
@@ -50,6 +52,14 @@ export function CustomAmountChoiceBottomSheet({
     onClose();
   };
 
+  // Calculate preview values using local amount state for real-time updates
+  const currentAmount = parseFloat(amount) || 0;
+  // Original total bill (before split) = grandTotal + splitBillAmount (from Redux)
+  const originalTotalBill = grandTotal + splitBillAmount;
+  // Preview: total bill stays the same, remaining = original - current amount being typed
+  const previewTotalBill = originalTotalBill;
+  const previewRemaining = originalTotalBill - currentAmount;
+
   return (
     <ProBottomSheet
       isOpen={isOpen}
@@ -57,56 +67,129 @@ export function CustomAmountChoiceBottomSheet({
       title={t("splitBill.payAsCustomAmount")}
       showCloseButton={true}
       initialSnap={1}
-      height={400}
-      snapPoints={[400]}
+      height={430}
+      snapPoints={[430]}
+      contentStyle={{
+        padding: 0,
+      }}
     >
       <div
         style={{
-          padding: "20px 0",
+          padding: "20px",
           display: "flex",
           flexDirection: "column",
           gap: 20,
         }}
       >
         <div>
-          <ProInputCard title={t("splitBill.payAsCustomAmount")}>
-            <Form.Item
-              label={t("splitBill.amount")}
-              name="amount"
-              style={{ position: "relative", top: -5 }}
-            >
-              <InputNumber
-                value={amount}
-                onChange={(value) => setAmount(value?.toString() || "")}
-                placeholder={t("splitBill.amount")}
-                max={grandTotal.toString()}
-                min={"0"}
-                style={{ width: "100%", fontSize:"1rem" }}
-              />
-            </Form.Item>
-          </ProInputCard>
-        </div>
-
-        <div
-          style={{
-            display: "flex",
-            gap: 12,
-            marginTop: 20,
-          }}
-        >
-          <Button style={{ flex: 1 }} onClick={handleRemoveSplitWay}>
-            {t("splitBill.removeSplitWay")}
-          </Button>
-          <Button
-            type="primary"
-            style={{ flex: 1, boxShadow: "none" }}
-            onClick={handleSave}
-            disabled={!amount || parseFloat(amount) <= 0}
+          <ProText
+            style={{
+              fontWeight: 400,
+              fontStyle: "Regular",
+              fontSize: 16,
+              lineHeight: "140%",
+              letterSpacing: "0%",
+            }}
           >
-            {t("cart.save")}
-          </Button>
+            {t("splitBill.howMuchWouldYouLikeToPay")}
+          </ProText>
+          <Form.Item
+            label={t("splitBill.amount")}
+            name="amount"
+            style={{ position: "relative", top: -5 }}
+          >
+            <InputNumber
+              value={amount}
+              onChange={(value) => {
+                setAmount(value?.toString() || "");
+                dispatch(updateSplitBillAmount(Number(value) || 0));
+              }}
+              placeholder={t("splitBill.amount")}
+              max={(grandTotal + splitBillAmount).toString()}
+              min={"0"}
+              style={{ width: "100%", fontSize: "1rem" }}
+            />
+          </Form.Item>
         </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={{
+              fontWeight: 400,
+              fontStyle: "Regular",
+              fontSize: 14,
+              lineHeight: "140%",
+              letterSpacing: "0%",
+            }}
+          >
+            {t("splitBill.totalBill")}
+          </ProText>
+          <ArabicPrice price={previewTotalBill} />
+        </div>
+        <div className={styles.summaryRow}>
+          <ProText
+            style={{
+              fontWeight: 400,
+              fontStyle: "Regular",
+              fontSize: 14,
+              lineHeight: "140%",
+              letterSpacing: "0%",
+            }}
+          >
+            {t("splitBill.remainingToPay")}
+          </ProText>
+          <ArabicPrice price={Math.max(0, previewRemaining)} />
+        </div>
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          gap: 12,
+          marginTop: 20,
+        }}
+      >
+        <Button
+          style={{
+            flex: 1,
+            backgroundColor: "#FEEDED",
+            color: "#DD4143",
+            boxShadow: "none",
+            border: "none",
+          }}
+          onClick={handleRemoveSplitWay}
+        >
+          {t("splitBill.removeSplit")}
+        </Button>
+        <Button
+          type="primary"
+          style={{
+            flex: 1,
+            boxShadow: "none",
+          }}
+          onClick={handleSave}
+          disabled={!amount || parseFloat(amount) <= 0}
+        >
+          {t("splitBill.confirm")}
+        </Button>
+      </div>
     </ProBottomSheet>
   );
 }

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

@@ -192,8 +192,17 @@ export function PayForYourItemsChoiceBottomSheet({
           marginTop: 20,
         }}
       >
-        <Button style={{ flex: 1 }} onClick={handleRemoveSplitWay}>
-          {t("splitBill.removeSplitWay")}
+        <Button
+          style={{
+            flex: 1,
+            backgroundColor: "#FEEDED",
+            color: "#DD4143",
+            boxShadow: "none",
+            border: "none",
+          }}
+          onClick={handleRemoveSplitWay}
+        >
+          {t("splitBill.removeSplit")}
         </Button>
         <Button
           type="primary"

src/pages/pay/components/splitBill/SplitBill.module.css

@@ -46,3 +46,10 @@
   width: 24px;
   height: 24px;
 }
+
+.summaryRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 16px;
+}