add qr bottom sheet

src/pages/pay/components/PayButton.tsx

@@ -10,6 +10,7 @@ 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;
 
@@ -26,6 +27,7 @@ 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") {
@@ -99,21 +101,36 @@ export default function PayButton({ form }: { form: FormInstance }) {
 
       <CustomAmountChoiceBottomSheet
         isOpen={isCustomAmountOpen}
-        onClose={() => setIsCustomAmountOpen(false)}
+        onClose={() => {
+          setIsCustomAmountOpen(false);
+        }}
         onRemoveSplitWay={handleRemoveSplitWay}
+        onSave={() => {
+          setIsQROpen(true);
+        }}
       />
 
       <EqualltyChoiceBottomSheet
         isOpen={isEqualityOpen}
-        onClose={() => setIsEqualityOpen(false)}
+        onClose={() => {
+          setIsEqualityOpen(false);
+        }}
         onRemoveSplitWay={handleRemoveSplitWay}
+        onSave={() => {
+          setIsQROpen(true);
+        }}
       />
 
       <PayForYourItemsChoiceBottomSheet
         isOpen={isPayForItemsOpen}
-        onClose={() => setIsPayForItemsOpen(false)}
+        onClose={() => {
+          setIsPayForItemsOpen(false);
+          setIsQROpen(true);
+        }}
         onRemoveSplitWay={handleRemoveSplitWay}
       />
+
+      <QRBottomSheet isOpen={isQROpen} onClose={() => setIsQROpen(false)} />
     </>
   );
 }

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

@@ -0,0 +1,123 @@
+import { Button } from "antd";
+import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import ProText from "components/ProText";
+import QRIcon from "components/Icons/QRIcon";
+
+interface QRBottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave?: (value: string) => void;
+}
+
+export function QRBottomSheet({
+  isOpen,
+  onClose,
+}: QRBottomSheetProps) {
+  const { t } = useTranslation();
+  const [qrCode, setQRCode] = useState("");
+
+  const handleSave = () => {
+    onClose();
+  };
+
+  const handleCopyQRCode = () => {
+    navigator.clipboard.writeText(qrCode);
+  };
+
+  return (
+    <ProBottomSheet
+      isOpen={isOpen}
+      onClose={onClose}
+      title={t("splitBill.payWithQR")}
+      showCloseButton={true}
+      initialSnap={1}
+      height={430}
+      snapPoints={[430]}
+      contentStyle={{
+        padding: 0,
+      }}
+    >
+      <div
+        style={{
+          padding: "20px",
+          display: "flex",
+          flexDirection: "column",
+          gap: 20,
+        }}
+      >
+        <ProText
+          style={{
+            fontWeight: 400,
+            fontStyle: "Regular",
+            fontSize: 16,
+            lineHeight: "140%",
+            letterSpacing: "0%",
+          }}
+        >
+          {t("splitBill.inviteEveryonePayingWithYou")}
+        </ProText>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: 12,
+            alignItems: "center",
+          }}
+        >
+          <QRIcon />
+          <Button
+            style={{
+              width: 169,
+              height: 40,
+              borderRadius: 888,
+              gap: 16,
+              opacity: 1,
+              borderWidth: 1,
+              paddingTop: 8,
+              paddingRight: 32,
+              paddingBottom: 8,
+              paddingLeft: 32,
+            }}
+            onClick={handleCopyQRCode}
+          >
+            {t("splitBill.copyQRCode")}
+          </Button>
+        </div>
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          gap: 12,
+          margin: 20,
+        }}
+      >
+        <Button
+          style={{
+            flex: 1,
+            backgroundColor: "#FEEDED",
+            color: "#DD4143",
+            boxShadow: "none",
+            border: "none",
+          }}
+          onClick={onClose}
+        >
+          {t("splitBill.cancel")}
+        </Button>
+        <Button
+          type="primary"
+          style={{
+            flex: 1,
+            boxShadow: "none",
+          }}
+          onClick={handleSave}
+        >
+          {t("splitBill.done")}
+        </Button>
+      </div>
+    </ProBottomSheet>
+  );
+}