From 90e729cdcef8a287f46337f4efbf460fe7fb6d59 Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Thu, 25 Dec 2025 00:35:44 +0300
Subject: [PATCH] implemt QRBottomSheet

---
 src/pages/pay/components/PayButton.tsx        |  11 -
 .../CustomAmountChoiceBottomSheet.tsx         | 248 ++++-----
 .../splitBill/EqualltyChoiceBottomSheet.tsx   | 479 +++++++++---------
 .../PayForYourItemsChoiceBottomSheet.tsx      | 293 +++++------
 4 files changed, 517 insertions(+), 514 deletions(-)

diff --git a/src/pages/pay/components/PayButton.tsx b/src/pages/pay/components/PayButton.tsx
index 0370613..37a775e 100644
--- a/src/pages/pay/components/PayButton.tsx
+++ b/src/pages/pay/components/PayButton.tsx
@@ -10,7 +10,6 @@ import { CustomAmountChoiceBottomSheet } from "./splitBill/CustomAmountChoiceBot
 import { EqualltyChoiceBottomSheet } from "./splitBill/EqualltyChoiceBottomSheet";
 import { PayForYourItemsChoiceBottomSheet } from "./splitBill/PayForYourItemsChoiceBottomSheet";
 import { SplitBillChoiceBottomSheet } from "./splitBill/SplitBillChoiceBottomSheet";
-import { QRBottomSheet } from "./splitBill/QRBottomSheet";
 
 type SplitWay = "customAmount" | "equality" | "payForItems" | null;
 
@@ -27,7 +26,6 @@ export default function PayButton({ form }: { form: FormInstance }) {
   const [isCustomAmountOpen, setIsCustomAmountOpen] = useState(false);
   const [isEqualityOpen, setIsEqualityOpen] = useState(false);
   const [isPayForItemsOpen, setIsPayForItemsOpen] = useState(false);
-  const [isQROpen, setIsQROpen] = useState(false);
 
   const handleSplitBillClick = useCallback(() => {
     if (selectedSplitWay === "customAmount") {
@@ -105,9 +103,6 @@ export default function PayButton({ form }: { form: FormInstance }) {
           setIsCustomAmountOpen(false);
         }}
         onRemoveSplitWay={handleRemoveSplitWay}
-        onSave={() => {
-          setIsQROpen(true);
-        }}
       />
 
       <EqualltyChoiceBottomSheet
@@ -116,21 +111,15 @@ export default function PayButton({ form }: { form: FormInstance }) {
           setIsEqualityOpen(false);
         }}
         onRemoveSplitWay={handleRemoveSplitWay}
-        onSave={() => {
-          setIsQROpen(true);
-        }}
       />
 
       <PayForYourItemsChoiceBottomSheet
         isOpen={isPayForItemsOpen}
         onClose={() => {
           setIsPayForItemsOpen(false);
-          setIsQROpen(true);
         }}
         onRemoveSplitWay={handleRemoveSplitWay}
       />
-
-      <QRBottomSheet isOpen={isQROpen} onClose={() => setIsQROpen(false)} />
     </>
   );
 }
diff --git a/src/pages/pay/components/splitBill/CustomAmountChoiceBottomSheet.tsx b/src/pages/pay/components/splitBill/CustomAmountChoiceBottomSheet.tsx
index 75f40d6..14fed93 100644
--- a/src/pages/pay/components/splitBill/CustomAmountChoiceBottomSheet.tsx
+++ b/src/pages/pay/components/splitBill/CustomAmountChoiceBottomSheet.tsx
@@ -12,11 +12,11 @@ import { useAppDispatch, useAppSelector } from "redux/hooks";
 import ProText from "components/ProText";
 import ArabicPrice from "components/ArabicPrice";
 import styles from "./SplitBill.module.css";
+import { QRBottomSheet } from "./QRBottomSheet";
 
 interface SplitBillChoiceBottomSheetProps {
   isOpen: boolean;
   onClose: () => void;
-  onSave?: (value: string) => void;
   onRemoveSplitWay?: () => void;
 }
 
@@ -32,7 +32,7 @@ export function CustomAmountChoiceBottomSheet({
   const [amount, setAmount] = useState<string>(
     splitBillAmount > 0 ? splitBillAmount.toString() : "",
   );
-
+  const [isQROpen, setIsQROpen] = useState(false);
   useEffect(() => {
     if (isOpen && splitBillAmount > 0) {
       setAmount(splitBillAmount.toString());
@@ -42,6 +42,7 @@ export function CustomAmountChoiceBottomSheet({
   const handleSave = () => {
     const numAmount = parseFloat(amount) || 0;
     dispatch(updateSplitBillAmount(numAmount));
+    setIsQROpen(true);
     onClose();
   };
 
@@ -61,135 +62,138 @@ export function CustomAmountChoiceBottomSheet({
   const previewRemaining = originalTotalBill - currentAmount;
 
   return (
-    <ProBottomSheet
-      isOpen={isOpen}
-      onClose={onClose}
-      title={t("splitBill.payAsCustomAmount")}
-      showCloseButton={true}
-      initialSnap={1}
-      height={430}
-      snapPoints={[430]}
-      contentStyle={{
-        padding: 0,
-      }}
-    >
-      <div
-        style={{
-          padding: "20px",
-          display: "flex",
-          flexDirection: "column",
-          gap: 20,
+    <>
+      <ProBottomSheet
+        isOpen={isOpen}
+        onClose={onClose}
+        title={t("splitBill.payAsCustomAmount")}
+        showCloseButton={true}
+        initialSnap={1}
+        height={430}
+        snapPoints={[430]}
+        contentStyle={{
+          padding: 0,
         }}
       >
-        <div>
-          <ProText
-            style={{
-              fontWeight: 400,
-              fontStyle: "Regular",
-              fontSize: 16,
-              lineHeight: "140%",
-              letterSpacing: "0%",
-            }}
-          >
-            {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));
+        <div
+          style={{
+            padding: "20px",
+            display: "flex",
+            flexDirection: "column",
+            gap: 20,
+          }}
+        >
+          <div>
+            <ProText
+              style={{
+                fontWeight: 400,
+                fontStyle: "Regular",
+                fontSize: 16,
+                lineHeight: "140%",
+                letterSpacing: "0%",
               }}
-              placeholder={t("splitBill.amount")}
-              max={(grandTotal + splitBillAmount).toString()}
-              min={"0"}
-              style={{ width: "100%", fontSize: "1rem" }}
-            />
-          </Form.Item>
+            >
+              {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>
 
-      <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
+          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 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,
-          margin: 20,
-        }}
-      >
-        <Button
+        <div
           style={{
-            flex: 1,
-            backgroundColor: "#FEEDED",
-            color: "#DD4143",
-            boxShadow: "none",
-            border: "none",
+            display: "flex",
+            gap: 12,
+            margin: 20,
           }}
-          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>
+          <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>
+      <QRBottomSheet isOpen={isQROpen} onClose={() => setIsQROpen(false)} />
+    </>
   );
 }
diff --git a/src/pages/pay/components/splitBill/EqualltyChoiceBottomSheet.tsx b/src/pages/pay/components/splitBill/EqualltyChoiceBottomSheet.tsx
index 3b59d4e..45ce118 100644
--- a/src/pages/pay/components/splitBill/EqualltyChoiceBottomSheet.tsx
+++ b/src/pages/pay/components/splitBill/EqualltyChoiceBottomSheet.tsx
@@ -1,6 +1,6 @@
 import { Button } from "antd";
 import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import ProText from "components/ProText";
@@ -15,6 +15,7 @@ import { ProGray1 } from "ThemeConstants";
 import PayForActions from "../../../split-bill/components/PayForActions";
 import TotalPeopleActions from "../../../split-bill/components/TotalPeopleActions";
 import styles from "./SplitBill.module.css";
+import { QRBottomSheet } from "./QRBottomSheet";
 
 interface SplitBillChoiceBottomSheetProps {
   isOpen: boolean;
@@ -37,7 +38,7 @@ export function EqualltyChoiceBottomSheet({
   const dispatch = useAppDispatch();
   const { tmp, splitBillAmount } = useAppSelector(selectCart);
   const grandTotal = useAppSelector(selectGrandTotal);
-
+  const [isQROpen, setIsQROpen] = useState(false);
   const splitBillTmp = tmp as SplitBillTmp;
   const totalPeople = splitBillTmp?.totalPeople || 2;
   const payFor = splitBillTmp?.payFor || 1;
@@ -55,6 +56,7 @@ export function EqualltyChoiceBottomSheet({
 
   const handleSave = () => {
     dispatch(updateSplitBillAmount(splitAmount));
+    setIsQROpen(true);
     onClose();
   };
 
@@ -65,281 +67,284 @@ export function EqualltyChoiceBottomSheet({
   };
 
   return (
-    <ProBottomSheet
-      isOpen={isOpen}
-      onClose={onClose}
-      title={t("splitBill.divideTheBillEqually")}
-      showCloseButton={true}
-      initialSnap={1}
-      height={630}
-      snapPoints={[630]}
-      contentStyle={{
-        padding: 0,
-      }}
-    >
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          marginTop: 20,
+    <>
+      <ProBottomSheet
+        isOpen={isOpen}
+        onClose={onClose}
+        title={t("splitBill.divideTheBillEqually")}
+        showCloseButton={true}
+        initialSnap={1}
+        height={630}
+        snapPoints={[630]}
+        contentStyle={{
+          padding: 0,
         }}
       >
-        {/* Spinner Visualization - Blank Spin Wheel */}
-        {totalPeople > 0 && (
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            marginTop: 20,
+          }}
+        >
+          {/* Spinner Visualization - Blank Spin Wheel */}
+          {totalPeople > 0 && (
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                gap: 12,
+                alignItems: "center",
+              }}
+            >
+              <div
+                style={{
+                  position: "relative",
+                  width: 200,
+                  height: 200,
+                  margin: "0 auto",
+                }}
+              >
+                <svg
+                  width="200"
+                  height="200"
+                  viewBox="0 0 200 200"
+                  style={{
+                    transform: "rotate(-90deg)",
+                  }}
+                >
+                  {Array.from({ length: totalPeople }).map((_, index) => {
+                    const anglePerSlice = 360 / totalPeople;
+                    const startAngle = index * anglePerSlice;
+                    const endAngle = (index + 1) * anglePerSlice;
+                    const isSelected = index < payFor;
+
+                    // Convert angles to radians
+                    const startAngleRad = (startAngle * Math.PI) / 180;
+                    const endAngleRad = (endAngle * Math.PI) / 180;
+
+                    // Calculate path for pie slice (fit 200x200 viewBox)
+                    const radius = 90;
+                    const centerX = 100;
+                    const centerY = 100;
+
+                    const x1 = centerX + radius * Math.cos(startAngleRad);
+                    const y1 = centerY + radius * Math.sin(startAngleRad);
+                    const x2 = centerX + radius * Math.cos(endAngleRad);
+                    const y2 = centerY + radius * Math.sin(endAngleRad);
+
+                    const largeArcFlag = anglePerSlice > 180 ? 1 : 0;
+
+                    const pathData = [
+                      `M ${centerX} ${centerY}`,
+                      `L ${x1} ${y1}`,
+                      `A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2}`,
+                      "Z",
+                    ].join(" ");
+
+                    return (
+                      <path
+                        key={index}
+                        d={pathData}
+                        fill={
+                          isSelected ? "var(--primary)" : "rgba(0, 0, 0, 0.1)"
+                        }
+                        stroke="#fff"
+                        strokeWidth="5"
+                      />
+                    );
+                  })}
+                </svg>
+                {/* Center circle with total bill amount */}
+                <div
+                  style={{
+                    position: "absolute",
+                    top: "50%",
+                    left: "50%",
+                    transform: "translate(-50%, -50%)",
+                    // Keep the SVG at 200x200, but make the center content smaller
+                    // so the wheel remains visible around it.
+                    width: 160,
+                    height: 160,
+                    borderRadius: "50%",
+                    backgroundColor: "var(--secondary-background)",
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    zIndex: 10,
+                    padding: 10,
+                  }}
+                >
+                  <div
+                    style={{
+                      fontSize: 20,
+                      fontWeight: 600,
+                      color: "var(--primary)",
+                      lineHeight: 1.1,
+                      textAlign: "center",
+                    }}
+                  >
+                    <ArabicPrice
+                      price={originalTotalBill}
+                      style={{
+                        fontSize: 20,
+                        fontWeight: 600,
+                      }}
+                    />
+                  </div>
+                  <ProText
+                    style={{
+                      fontSize: 11,
+                      color: ProGray1,
+                      marginTop: 6,
+                      textAlign: "center",
+                      lineHeight: 1.2,
+                      fontWeight: 400,
+                    }}
+                  >
+                    {t("splitBill.totalBill")}
+                  </ProText>
+                </div>
+              </div>
+            </div>
+          )}
+
           <div
             style={{
               display: "flex",
               flexDirection: "column",
-              gap: 12,
-              alignItems: "center",
+              gap: "1rem",
+              padding: 20,
             }}
           >
             <div
               style={{
-                position: "relative",
-                width: 200,
-                height: 200,
-                margin: "0 auto",
+                display: "flex",
+                flexDirection: "row",
+                justifyContent: "space-between",
+                gap: "1rem",
+                padding: 8,
               }}
             >
-              <svg
-                width="200"
-                height="200"
-                viewBox="0 0 200 200"
+              <ProText
                 style={{
-                  transform: "rotate(-90deg)",
+                  fontSize: "1rem",
+                  marginTop: 3,
+                  color: ProGray1,
                 }}
               >
-                {Array.from({ length: totalPeople }).map((_, index) => {
-                  const anglePerSlice = 360 / totalPeople;
-                  const startAngle = index * anglePerSlice;
-                  const endAngle = (index + 1) * anglePerSlice;
-                  const isSelected = index < payFor;
+                {t("checkout.totalPeople")}
+              </ProText>
 
-                  // Convert angles to radians
-                  const startAngleRad = (startAngle * Math.PI) / 180;
-                  const endAngleRad = (endAngle * Math.PI) / 180;
+              <TotalPeopleActions />
 
-                  // Calculate path for pie slice (fit 200x200 viewBox)
-                  const radius = 90;
-                  const centerX = 100;
-                  const centerY = 100;
-
-                  const x1 = centerX + radius * Math.cos(startAngleRad);
-                  const y1 = centerY + radius * Math.sin(startAngleRad);
-                  const x2 = centerX + radius * Math.cos(endAngleRad);
-                  const y2 = centerY + radius * Math.sin(endAngleRad);
-
-                  const largeArcFlag = anglePerSlice > 180 ? 1 : 0;
-
-                  const pathData = [
-                    `M ${centerX} ${centerY}`,
-                    `L ${x1} ${y1}`,
-                    `A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2}`,
-                    "Z",
-                  ].join(" ");
-
-                  return (
-                    <path
-                      key={index}
-                      d={pathData}
-                      fill={
-                        isSelected ? "var(--primary)" : "rgba(0, 0, 0, 0.1)"
-                      }
-                      stroke="#fff"
-                      strokeWidth="5"
-                    />
-                  );
-                })}
-              </svg>
-              {/* Center circle with total bill amount */}
-              <div
+              <ProText
                 style={{
-                  position: "absolute",
-                  top: "50%",
-                  left: "50%",
-                  transform: "translate(-50%, -50%)",
-                  // Keep the SVG at 200x200, but make the center content smaller
-                  // so the wheel remains visible around it.
-                  width: 160,
-                  height: 160,
-                  borderRadius: "50%",
-                  backgroundColor: "var(--secondary-background)",
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  zIndex: 10,
-                  padding: 10,
+                  fontSize: "1rem",
+                  marginTop: 3,
+                  color: ProGray1,
                 }}
               >
-                <div
-                  style={{
-                    fontSize: 20,
-                    fontWeight: 600,
-                    color: "var(--primary)",
-                    lineHeight: 1.1,
-                    textAlign: "center",
-                  }}
-                >
-                  <ArabicPrice
-                    price={originalTotalBill}
-                    style={{
-                      fontSize: 20,
-                      fontWeight: 600,
-                    }}
-                  />
-                </div>
-                <ProText
-                  style={{
-                    fontSize: 11,
-                    color: ProGray1,
-                    marginTop: 6,
-                    textAlign: "center",
-                    lineHeight: 1.2,
-                    fontWeight: 400,
-                  }}
-                >
-                  {t("splitBill.totalBill")}
-                </ProText>
-              </div>
+                {t("checkout.totalPeople")}
+              </ProText>
+            </div>
+
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                justifyContent: "space-between",
+                gap: "1rem",
+                padding: 8,
+              }}
+            >
+              <ProText
+                style={{
+                  fontSize: "1rem",
+                  marginTop: 2,
+                  color: ProGray1,
+                }}
+              >
+                {t("checkout.payFor")}
+              </ProText>
+
+              <PayForActions />
+
+              <ProText
+                style={{
+                  fontSize: "1rem",
+                  marginTop: 2,
+                  color: ProGray1,
+                }}
+              >
+                {t("checkout.payFor")}
+              </ProText>
             </div>
           </div>
-        )}
 
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            gap: "1rem",
-            padding: 20,
-          }}
-        >
           <div
             style={{
               display: "flex",
-              flexDirection: "row",
-              justifyContent: "space-between",
-              gap: "1rem",
-              padding: 8,
+              flexDirection: "column",
+              backgroundColor: "var(--background)",
+              padding: 20,
+              opacity: 1,
+              gap: 8,
+              borderTopLeftRadius: 24,
+              borderTopRightRadius: 24,
+              paddingTop: 12,
+              paddingRight: 24,
+              paddingBottom: 24,
+              paddingLeft: 24,
             }}
           >
-            <ProText
-              style={{
-                fontSize: "1rem",
-                marginTop: 3,
-                color: ProGray1,
-              }}
-            >
-              {t("checkout.totalPeople")}
-            </ProText>
-
-            <TotalPeopleActions />
-
-            <ProText
-              style={{
-                fontSize: "1rem",
-                marginTop: 3,
-                color: ProGray1,
-              }}
-            >
-              {t("checkout.totalPeople")}
-            </ProText>
+            <div className={styles.summaryRow}>
+              <ProText
+                style={{
+                  fontWeight: 400,
+                  fontStyle: "Regular",
+                  fontSize: 14,
+                  lineHeight: "140%",
+                  letterSpacing: "0%",
+                }}
+              >
+                {t("splitBill.yourShare")}
+              </ProText>
+              <ArabicPrice price={splitAmount} />
+            </div>
           </div>
 
           <div
             style={{
               display: "flex",
-              flexDirection: "row",
-              justifyContent: "space-between",
-              gap: "1rem",
-              padding: 8,
+              gap: 12,
+              margin: 20,
             }}
           >
-            <ProText
+            <Button
               style={{
-                fontSize: "1rem",
-                marginTop: 2,
-                color: ProGray1,
+                flex: 1,
+                backgroundColor: "#FEEDED",
+                color: "#DD4143",
+                boxShadow: "none",
+                border: "none",
               }}
+              onClick={handleRemoveSplitWay}
             >
-              {t("checkout.payFor")}
-            </ProText>
-
-            <PayForActions />
-
-            <ProText
-              style={{
-                fontSize: "1rem",
-                marginTop: 2,
-                color: ProGray1,
-              }}
+              {t("splitBill.removeSplit")}
+            </Button>
+            <Button
+              type="primary"
+              style={{ flex: 1, boxShadow: "none" }}
+              onClick={handleSave}
             >
-              {t("checkout.payFor")}
-            </ProText>
+              {t("cart.save")}
+            </Button>
           </div>
         </div>
-
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            backgroundColor: "var(--background)",
-            padding: 20,
-            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.yourShare")}
-            </ProText>
-            <ArabicPrice price={splitAmount} />
-          </div>
-        </div>
-
-        <div
-          style={{
-            display: "flex",
-            gap: 12,
-            margin: 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}
-          >
-            {t("cart.save")}
-          </Button>
-        </div>
-      </div>
-    </ProBottomSheet>
+      </ProBottomSheet>
+      <QRBottomSheet isOpen={isQROpen} onClose={() => setIsQROpen(false)} />
+    </>
   );
 }
diff --git a/src/pages/pay/components/splitBill/PayForYourItemsChoiceBottomSheet.tsx b/src/pages/pay/components/splitBill/PayForYourItemsChoiceBottomSheet.tsx
index 3bc2f24..57fb0ca 100644
--- a/src/pages/pay/components/splitBill/PayForYourItemsChoiceBottomSheet.tsx
+++ b/src/pages/pay/components/splitBill/PayForYourItemsChoiceBottomSheet.tsx
@@ -8,6 +8,7 @@ import ProText from "components/ProText";
 import { selectCart, updateSplitBillAmount } from "features/order/orderSlice";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
 import styles from "./SplitBill.module.css";
+import { QRBottomSheet } from "./QRBottomSheet";
 
 interface SplitBillChoiceBottomSheetProps {
   isOpen: boolean;
@@ -25,7 +26,7 @@ export function PayForYourItemsChoiceBottomSheet({
   const dispatch = useAppDispatch();
   const { items } = useAppSelector(selectCart);
   const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
-
+  const [isQROpen, setIsQROpen] = useState(false);
   // Calculate total for selected items
   const selectedTotal = items
     .filter((item) => selectedItems.has(item.uniqueId || item.id.toString()))
@@ -56,6 +57,7 @@ export function PayForYourItemsChoiceBottomSheet({
 
   const handleSave = () => {
     dispatch(updateSplitBillAmount(selectedTotal));
+    setIsQROpen(true);
     onClose();
   };
 
@@ -67,159 +69,162 @@ export function PayForYourItemsChoiceBottomSheet({
   };
 
   return (
-    <ProBottomSheet
-      isOpen={isOpen}
-      onClose={onClose}
-      title={t("splitBill.payForYourItems")}
-      showCloseButton={true}
-      initialSnap={1}
-      height={720}
-      snapPoints={[720]}
-      contentStyle={{ padding: 0 }}
-    >
-      <div
-        style={{
-          padding: 20,
-          display: "flex",
-          flexDirection: "column",
-          gap: 12,
-          maxHeight: "455px",
-          minHeight: "455px",
-          overflowY: "auto",
-        }}
-      >
-        {items.length === 0 ? (
-          <ProText
-            type="secondary"
-            style={{ textAlign: "center", padding: 20 }}
-          >
-            {t("cart.emptyCart")}
-          </ProText>
-        ) : (
-          items.map((item) => {
-            const itemId = item.uniqueId || item.id.toString();
-            const isSelected = selectedItems.has(itemId);
-            const itemTotal = item.price * item.quantity;
-
-            return (
-              <>
-                <Card
-                  key={itemId}
-                  style={{
-                    border: "none",
-                    cursor: "pointer",
-                    padding: 0,
-                  }}
-                  onClick={() => handleItemToggle(itemId)}
-                >
-                  <div
-                    style={{
-                      display: "flex",
-                      flexDirection: "row",
-                      gap: 12,
-                      alignItems: "center",
-                    }}
-                  >
-                    <Image
-                      src={item.image}
-                      alt={item.name}
-                      width={60}
-                      height={60}
-                      preview={false}
-                      style={{
-                        borderRadius: 8,
-                        objectFit: "cover",
-                      }}
-                    />
-                    <div
-                      style={{
-                        flex: 1,
-                        display: "flex",
-                        flexDirection: "column",
-                        gap: 4,
-                      }}
-                    >
-                      <ProText style={{ fontSize: 14, fontWeight: 500 }}>
-                        {item.name}
-                      </ProText>
-                      <ArabicPrice price={itemTotal} />
-                    </div>
-                    <div
-                      style={{
-                        width: 32,
-                        height: 32,
-                        minWidth: 32,
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                      }}
-                      onClick={(e) => e.stopPropagation()}
-                    >
-                      <Checkbox
-                        className={styles.circleCheckbox}
-                        checked={isSelected}
-                        onChange={() => handleItemToggle(itemId)}
-                      />
-                    </div>
-                  </div>
-                </Card>
-                {item !== items[items.length - 1] && (
-                  <Divider style={{ margin: "0" }} />
-                )}
-              </>
-            );
-          })
-        )}
-      </div>
-      <div
-        style={{
-          padding: 16,
-          backgroundColor: "rgba(255, 183, 0, 0.08)",
-          borderRadius: 8,
-          marginTop: 8,
-        }}
+    <>
+      <ProBottomSheet
+        isOpen={isOpen}
+        onClose={onClose}
+        title={t("splitBill.payForYourItems")}
+        showCloseButton={true}
+        initialSnap={1}
+        height={720}
+        snapPoints={[720]}
+        contentStyle={{ padding: 0 }}
       >
         <div
           style={{
+            padding: 20,
             display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
+            flexDirection: "column",
+            gap: 12,
+            maxHeight: "455px",
+            minHeight: "455px",
+            overflowY: "auto",
           }}
         >
-          <ProText style={{ fontSize: 16, fontWeight: 600 }}>
-            {t("splitBill.selectedTotal")}:
-          </ProText>
-          <ArabicPrice price={selectedTotal} />
+          {items.length === 0 ? (
+            <ProText
+              type="secondary"
+              style={{ textAlign: "center", padding: 20 }}
+            >
+              {t("cart.emptyCart")}
+            </ProText>
+          ) : (
+            items.map((item) => {
+              const itemId = item.uniqueId || item.id.toString();
+              const isSelected = selectedItems.has(itemId);
+              const itemTotal = item.price * item.quantity;
+
+              return (
+                <>
+                  <Card
+                    key={itemId}
+                    style={{
+                      border: "none",
+                      cursor: "pointer",
+                      padding: 0,
+                    }}
+                    onClick={() => handleItemToggle(itemId)}
+                  >
+                    <div
+                      style={{
+                        display: "flex",
+                        flexDirection: "row",
+                        gap: 12,
+                        alignItems: "center",
+                      }}
+                    >
+                      <Image
+                        src={item.image}
+                        alt={item.name}
+                        width={60}
+                        height={60}
+                        preview={false}
+                        style={{
+                          borderRadius: 8,
+                          objectFit: "cover",
+                        }}
+                      />
+                      <div
+                        style={{
+                          flex: 1,
+                          display: "flex",
+                          flexDirection: "column",
+                          gap: 4,
+                        }}
+                      >
+                        <ProText style={{ fontSize: 14, fontWeight: 500 }}>
+                          {item.name}
+                        </ProText>
+                        <ArabicPrice price={itemTotal} />
+                      </div>
+                      <div
+                        style={{
+                          width: 32,
+                          height: 32,
+                          minWidth: 32,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                        }}
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        <Checkbox
+                          className={styles.circleCheckbox}
+                          checked={isSelected}
+                          onChange={() => handleItemToggle(itemId)}
+                        />
+                      </div>
+                    </div>
+                  </Card>
+                  {item !== items[items.length - 1] && (
+                    <Divider style={{ margin: "0" }} />
+                  )}
+                </>
+              );
+            })
+          )}
         </div>
-      </div>
-      <div
-        style={{
-          display: "flex",
-          gap: 12,
-          margin: 20,
-        }}
-      >
-        <Button
+        <div
           style={{
-            flex: 1,
-            backgroundColor: "#FEEDED",
-            color: "#DD4143",
-            boxShadow: "none",
-            border: "none",
+            padding: 16,
+            backgroundColor: "rgba(255, 183, 0, 0.08)",
+            borderRadius: 8,
+            marginTop: 8,
           }}
-          onClick={handleRemoveSplitWay}
         >
-          {t("splitBill.removeSplit")}
-        </Button>
-        <Button
-          type="primary"
-          style={{ flex: 1, boxShadow: "none" }}
-          onClick={handleSave}
-          disabled={selectedTotal === 0}
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            <ProText style={{ fontSize: 16, fontWeight: 600 }}>
+              {t("splitBill.selectedTotal")}:
+            </ProText>
+            <ArabicPrice price={selectedTotal} />
+          </div>
+        </div>
+        <div
+          style={{
+            display: "flex",
+            gap: 12,
+            margin: 20,
+          }}
         >
-          {t("cart.save")}
-        </Button>
-      </div>
-    </ProBottomSheet>
+          <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={selectedTotal === 0}
+          >
+            {t("cart.save")}
+          </Button>
+        </div>
+      </ProBottomSheet>
+      <QRBottomSheet isOpen={isQROpen} onClose={() => setIsQROpen(false)} />
+    </>
   );
 }