EMP-78: Use qrcode.react; Add leave alert (#359)

package-lock.json

@@ -23,8 +23,8 @@
         "framer-motion": "10.12.18",
         "ismobilejs": "1.1.1",
         "js-base64": "3.7.7",
-        "kjua": "0.9.0",
         "libphonenumber-js": "1.10.37",
+        "qrcode.react": "4.1.0",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-error-boundary": "4.0.11",
@@ -7174,10 +7174,6 @@
         "node": ">=4.0"
       }
     },
-    "node_modules/kjua": {
-      "version": "0.9.0",
-      "license": "MIT"
-    },
     "node_modules/kleur": {
       "version": "3.0.3",
       "dev": true,
@@ -7956,6 +7952,14 @@
       ],
       "license": "MIT"
     },
+    "node_modules/qrcode.react": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-4.1.0.tgz",
+      "integrity": "sha512-uqXVIIVD/IPgWLYxbOczCNAQw80XCM/LulYDADF+g2xDsPj5OoRwSWtIS4jGyp295wyjKstfG1qIv/I2/rNWpQ==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/querystringify": {
       "version": "2.2.0",
       "dev": true,

package.json

@@ -30,8 +30,8 @@
     "framer-motion": "10.12.18",
     "ismobilejs": "1.1.1",
     "js-base64": "3.7.7",
-    "kjua": "0.9.0",
     "libphonenumber-js": "1.10.37",
+    "qrcode.react": "4.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-error-boundary": "4.0.11",

src/assets/locale/ar.json

@@ -67,6 +67,10 @@
     "form.p2p.next.button": "التالي",
     "form.p2p.destinations.heading": "الدفع",
     "form.p2p.copied": "تم النسخ!",
+    "leave.alert.header": "هل أنت متأكد؟",
+    "leave.alert.body": "لم تكتمل عملية الدفع بعد.",
+    "leave.alert.footer.button.no": "لا",
+    "leave.alert.footer.button.yes": "نعم",
     "InvalidPaymentTool": "أداة دفع غير صالحة",
     "AccountLimitsExceeded": "تجاوز الحد الأقصى للحساب",
     "InsufficientFunds": "الأموال غير كافية",

src/assets/locale/az.json

@@ -67,6 +67,10 @@
     "form.p2p.next.button": "Növbəti",
     "form.p2p.destinations.heading": "Ödəniş",
     "form.p2p.copied": "Kopyalandı!",
+    "leave.alert.header": "Əminsiniz?",
+    "leave.alert.body": "Ödənişiniz hələ tamamlanmayıb.",
+    "leave.alert.footer.button.no": "Xeyr",
+    "leave.alert.footer.button.yes": "Bəli",
     "InvalidPaymentTool": "Yanlış ödəniş aləti",
     "AccountLimitsExceeded": "Hesab limiti aşıldı",
     "InsufficientFunds": "Kifayət qədər vəsait yoxdur",

src/assets/locale/bn.json

@@ -1,104 +0,0 @@
-{
-    "info.back": "পিছনে",
-    "info.details": "বিস্তারিত",
-    "info.modal.no.available.payment.method": "কোনো পেমেন্ট পদ্ধতি উপলব্ধ নেই",
-    "form.header.payment.methods.label": "দয়া করে একটি পেমেন্ট পদ্ধতি চয়ন করুন",
-    "form.header.netbanking.label": "একটি ব্যাংক চয়ন করুন",
-    "form.header.pay.card.label": "কার্ড দিয়ে পরিশোধ করুন",
-    "form.header.final.success.label": "সফল পেমেন্ট",
-    "form.header.final.invoice.paid.label": "সফল",
-    "form.header.final.invoice.paid.already.label": "ইতিমধ্যে সম্পূর্ণরূপে পরিশোধিত",
-    "form.header.final.invoice.cancelled.label": "চালান বাতিল করা হয়েছে",
-    "form.header.final.invoice.fulfilled.label": "চালান পরিশোধিত হয়েছে",
-    "form.header.final.error.label": "ত্রুটি",
-    "form.header.final.started.label": "মুলতুবি",
-    "form.header.final.failed.label": "পরিশোধ হয়নি",
-    "form.header.final.refunded.label": "ফেরত দেওয়া হয়েছে",
-    "form.header.final.pending.label": "মুলতুবি",
-    "form.header.final.pending.description": "",
-    "form.header.final.cancelled.label": "বাতিল করা হয়েছে",
-    "form.final.failed.cancelled.text": "পেমেন্ট বাতিল করা হয়েছে",
-    "form.final.started.pay.text": "পেমেন্ট মুলতুবি আছে",
-    "form.final.need.help": "সমস্যা সমাধানে কীভাবে সাহায্য করা যায়?",
-    "form.input.phone.placeholder": "ফোন নম্বর",
-    "form.input.card.placeholder": "কার্ড নম্বর",
-    "form.input.expiry.placeholder": "মাস / বছর",
-    "form.input.secure.placeholder": "সিভিভি",
-    "form.input.cardholder.placeholder": "কার্ডধারীর নাম",
-    "form.input.email.placeholder": "ইমেইল",
-    "form.input.amount.placeholder": "পরিমাণ",
-    "form.button.back.to.website": "ওয়েবসাইটে ফিরে যান",
-    "form.button.reload": "পুনরায় লোড করুন",
-    "form.button.next.label": "পরবর্তী",
-    "form.button.pay.again.label": "আবার চেষ্টা করুন",
-    "form.button.pay.label": "পরিশোধ করুন",
-    "form.button.copy.label": "অনুলিপি",
-    "form.button.copied.label": "অনুলিপি হয়েছে!",
-    "form.payment.method.name.card.label": "কার্ড",
-    "form.payment.method.name.others.label": "সমস্ত পেমেন্ট পদ্ধতি",
-    "form.serviceProvidersGrid.search": "অনুসন্ধান",
-    "form.qr.code": "পেমেন্ট সম্পন্ন করতে আপনার ব্যাংকিং অ্যাপ বা ফোনের ক্যামেরা দিয়ে কিউআর কোড স্ক্যান করুন",
-    "form.p2p.error": "অন্য একটি পরিমাণের জন্য আবেদন করুন অথবা পরে আবার চেষ্টা করুন।",
-    "form.p2p.destination.info": "নিম্নলিখিত বিবরণ ব্যবহার করে ট্রান্সফার করুন:",
-    "form.p2p.destination.bank.card.pan": "কার্ড নম্বর:",
-    "form.p2p.destination.bank.name": "ব্যাংক:",
-    "form.p2p.destination.bank.recipient": "প্রাপক:",
-    "form.p2p.destination.spb.phone": "ফোন নম্বর:",
-    "form.p2p.destination.bank.account.account": "অ্যাকাউন্ট নম্বর:",
-    "form.p2p.destination.bank.account.bic": "BIC:",
-    "form.p2p.destination.bank.account.purpose": "প্রদানের উদ্দেশ্য:",
-    "form.p2p.destination.qrCode.description": "অনুগ্রহ করে আপনার ব্যাংকিং অ্যাপ বা ফোন ক্যামেরা দিয়ে কিউআর কোড স্ক্যান করুন",
-    "form.p2p.complete.info": "ট্রান্সফার সম্পন্ন হওয়ার পর নিচের বোতাম চাপুন। পেমেন্ট প্রক্রিয়াকরণে ৫ মিনিট সময় লাগতে পারে।",
-    "form.p2p.complete.button": "ট্রান্সফার সম্পন্ন",
-    "form.p2p.complete.loading": "অনুগ্রহ করে অপেক্ষা করুন",
-    "form.p2p.destination.amount": "পরিমাণ:",
-    "form.p2p.destination.randomizeAmountDescription": "আমরা আপনার অর্থ জমা করার প্রক্রিয়া দ্রুত করার জন্য আমানতের পরিমাণ পরিবর্তন করেছি।",
-    "form.p2p.alert.li": [
-        "অর্ডারে উল্লিখিত সঠিক পরিমাণ ট্রান্সফার করুন।",
-        "পুরো পরিমাণ একবারে পরিশোধ করুন।",
-        "১৫ মিনিটের মধ্যে স্থানান্তর সম্পন্ন করুন।",
-        "স্থানান্তর সম্পন্ন করার পর, \"স্থানান্তর সম্পন্ন হয়েছে\" বোতামে ক্লিক করুন।"
-    ],
-    "form.p2p.alert.p": "অন্যথায়, পেমেন্ট গৃহীত হবে না।",
-    "form.p2p.gateway.selector.heading": "একটি পদ্ধতি বা ব্যাংক চয়ন করুন",
-    "form.p2p.default.pane.label": "যেকোনো ব্যাংক",
-    "form.p2p.next.button": "পরবর্তী",
-    "form.p2p.destinations.heading": "পেমেন্ট",
-    "form.p2p.copied": "অনুলিপি হয়েছে!",
-    "InvalidPaymentTool": "অবৈধ পেমেন্ট যন্ত্র",
-    "AccountLimitsExceeded": "অ্যাকাউন্টের সীমা অতিক্রম করা হয়েছে",
-    "InsufficientFunds": "অপর্যাপ্ত তহবিল",
-    "PreauthorizationFailed": "প্রাক-অনুমোদন ব্যর্থ হয়েছে",
-    "RejectedByIssuer": "জারি করা ব্যাংকের দ্বারা প্রত্যাখ্যান করা হয়েছে",
-    "PaymentRejected": "পেমেন্ট প্রত্যাখ্যান করা হয়েছে",
-    "p2p.gateways": {
-        "sberbank": "sberbank",
-        "сбер": "sberbank",
-        "sber": "sberbank",
-        "сбербанк": "sberbank",
-        "сбр": "sberbank",
-        "sbr": "sberbank",
-        "tinkoff": "Tinkoff",
-        "raiffeisen": "Raiffeisen",
-        "sbp": "SBP",
-        "kapital": "Kapital",
-        "abb": "ABB"
-    },
-    "p2p.notification": {
-        "verified": "পেমেন্ট করার আগে অনুগ্রহ করে নিশ্চিত করুন যে আপনার MPAY ওয়ালেট অ্যাকাউন্ট যাচাই করা হয়েছে।"
-    },
-    "metadata.addons": {
-        "pinikle": {
-            "label": "আপনার কি ভাউচার নেই?",
-            "link": "কিনুন"
-        }
-    },
-    "loaderMessages": [
-        "লোড হচ্ছে... দয়া করে পৃষ্ঠাটি বন্ধ করবেন না।",
-        "এখনও কাজ চলছে... এতে বেশি সময় লাগবে না।",
-        "অপেক্ষা করুন! আমরা আপনার অনুরোধ প্রক্রিয়া করছি...",
-        "দয়া করে অপেক্ষা করুন... আপনার অনুরোধটি প্রক্রিয়া করা হচ্ছে।",
-        "দয়া করে অপেক্ষা করুন... আমরা প্রায় শেষ করেছি!",
-        "প্রায় হয়ে গেছে... অপেক্ষার জন্য ধন্যবাদ!"
-    ]
-}

src/assets/locale/en.json

@@ -67,6 +67,10 @@
     "form.p2p.next.button": "Next",
     "form.p2p.destinations.heading": "Payment",
     "form.p2p.copied": "Copied!",
+    "leave.alert.header": "Are you sure?",
+    "leave.alert.body": "Your payment isn’t complete yet.",
+    "leave.alert.footer.button.no": "No",
+    "leave.alert.footer.button.yes": "Yes",
     "InvalidPaymentTool": "Invalid payment instrument",
     "AccountLimitsExceeded": "Account limit is exceeded",
     "InsufficientFunds": "Insufficient funds",

src/assets/locale/ja.json

@@ -1,104 +0,0 @@
-{
-    "info.back": "戻る",
-    "info.details": "詳細",
-    "info.modal.no.available.payment.method": "利用できる支払方法はありません",
-    "form.header.payment.methods.label": "お支払い方法を選択してください",
-    "form.header.netbanking.label": "銀行を選択してください",
-    "form.header.pay.card.label": "カードで支払う",
-    "form.header.final.success.label": "支払い完了",
-    "form.header.final.invoice.paid.label": "全額支払い済み",
-    "form.header.final.invoice.paid.already.label": "すでに支払い済み",
-    "form.header.final.invoice.cancelled.label": "請求書がキャンセルされました",
-    "form.header.final.invoice.fulfilled.label": "請求書は支払い済みです",
-    "form.header.final.error.label": "エラー",
-    "form.header.final.started.label": "保留中",
-    "form.header.final.failed.label": "未払い",
-    "form.header.final.refunded.label": "返金済み",
-    "form.header.final.pending.label": "保留中",
-    "form.header.final.pending.description": "",
-    "form.header.final.cancelled.label": "キャンセル済",
-    "form.final.failed.cancelled.text": "支払いがキャンセルされました",
-    "form.final.started.pay.text": "支払いは保留中です",
-    "form.final.need.help": "問題を解決するには？",
-    "form.input.phone.placeholder": "電話番号",
-    "form.input.card.placeholder": "カード番号",
-    "form.input.expiry.placeholder": "MM / YY",
-    "form.input.secure.placeholder": "CVV",
-    "form.input.cardholder.placeholder": "クレジットカード名義人氏名",
-    "form.input.email.placeholder": "Email",
-    "form.input.amount.placeholder": "金額",
-    "form.button.back.to.website": "サイトに戻る",
-    "form.button.reload": "リロード",
-    "form.button.next.label": "次",
-    "form.button.pay.again.label": "もう一度お試しください",
-    "form.button.pay.label": "支払う",
-    "form.button.copy.label": "コピー",
-    "form.button.copied.label": "コピーしました！",
-    "form.payment.method.name.card.label": "カード",
-    "form.payment.method.name.others.label": "すべての支払い方法",
-    "form.serviceProvidersGrid.search": "検索",
-    "form.qr.code": "お支払いを完了するために、銀行アプリまたは電話のカメラでQRコードをスキャンしてください",
-    "form.p2p.error": "別の金額を選択するか、後ほどお試しください",
-    "form.p2p.destination.info": "以下の詳細を使用して送金してください:",
-    "form.p2p.destination.bank.card.pan": "カード番号:",
-    "form.p2p.destination.bank.name": "銀行名:",
-    "form.p2p.destination.bank.recipient": "名前:",
-    "form.p2p.destination.spb.phone": "電話番号:",
-    "form.p2p.destination.bank.account.account": "口座番号:",
-    "form.p2p.destination.bank.account.bic": "BIC:",
-    "form.p2p.destination.bank.account.purpose": "支払い目的:",
-    "form.p2p.destination.qrCode.description": "銀行アプリまたは携帯電話のカメラでQRコードをスキャンしてください",
-    "form.p2p.complete.info": "送金完了後、以下のボタンを押してください。",
-    "form.p2p.complete.button": "支払い完了",
-    "form.p2p.complete.loading": "読み込み中...",
-    "form.p2p.destination.amount": "金額:",
-    "form.p2p.destination.randomizeAmountDescription": "資金の入金を迅速に行うために、預金額を変更しました。",
-    "form.p2p.alert.li": [
-        "正確な金額を振り込んでください",
-        "全額を一回の取引で振り込んでください",
-        "15分以内に振り込みを完了してください。",
-        "振り込みが完了したら、「振り込み完了」ボタンをクリックしてください。"
-    ],
-    "form.p2p.alert.p": "そうしない場合、支払いは認められません。",
-    "form.p2p.gateway.selector.heading": "方法または銀行を選択してください",
-    "form.p2p.default.pane.label": "任意の銀行",
-    "form.p2p.next.button": "次",
-    "form.p2p.destinations.heading": "支払い",
-    "form.p2p.copied": "コピーしました！",
-    "InvalidPaymentTool": "無効な支払い手段です",
-    "AccountLimitsExceeded": "アカウントの上限を超えました",
-    "InsufficientFunds": "残高不足",
-    "PreauthorizationFailed": "事前認証に失敗しました",
-    "RejectedByIssuer": "信用状発行銀行に拒否されました",
-    "PaymentRejected": "支払いが却下されました",
-    "p2p.gateways": {
-        "sberbank": "sberbank",
-        "сбер": "sberbank",
-        "sber": "sberbank",
-        "сбербанк": "sberbank",
-        "сбр": "sberbank",
-        "sbr": "sberbank",
-        "tinkoff": "Tinkoff",
-        "raiffeisen": "Raiffeisen",
-        "sbp": "SBP",
-        "kapital": "Kapital",
-        "abb": "ABB"
-    },
-    "p2p.notification": {
-        "verified": "支払いを行う前に、MPAYウォレットのアカウントが認証されていることを確認してください。"
-    },
-    "metadata.addons": {
-        "pinikle": {
-            "label": "バウチャーがありませんか？",
-            "link": "購入"
-        }
-    },
-    "loaderMessages": [
-        "読み込み中... ページを閉じないでください。",
-        "まだ作業中です... もう少しお待ちください。",
-        "お待ちください！リクエストを処理しています...",
-        "少々お待ちください... リクエストを処理中です。",
-        "少々お待ちください... もうすぐです！",
-        "ほぼ完了です... お待ちいただきありがとうございます！"
-    ]
-}

src/assets/locale/ko.json

@@ -1,104 +0,0 @@
-{
-    "info.back": "뒤로",
-    "info.details": "상세",
-    "info.modal.no.available.payment.method": "사용 가능한 결제 수단이 없습니다",
-    "form.header.payment.methods.label": "결제 수단을 선택하십시오",
-    "form.header.netbanking.label": "은행을 선택해주세요",
-    "form.header.pay.card.label": "카드로 지불하기",
-    "form.header.final.success.label": "결제 성공",
-    "form.header.final.invoice.paid.label": "전액 결제됨",
-    "form.header.final.invoice.paid.already.label": "이미 전액 결제됨",
-    "form.header.final.invoice.cancelled.label": "송장이 취소되었습니다",
-    "form.header.final.invoice.fulfilled.label": "송장이 결제되었습니다",
-    "form.header.final.error.label": "오류",
-    "form.header.final.started.label": "대기 중",
-    "form.header.final.failed.label": "미결제",
-    "form.header.final.refunded.label": "환불됨",
-    "form.header.final.pending.label": "대기 중",
-    "form.header.final.pending.description": "입금이 승인되었습니다. 10분안에 충전이 완료됩니다.",
-    "form.header.final.cancelled.label": "취소됨",
-    "form.final.failed.cancelled.text": "결제가 취소되었습니다",
-    "form.final.started.pay.text": "결제가 승인되어 처리 중입니다. 5-15분 내에 승인될 것으로 예상입니다",
-    "form.final.need.help": "문제가 생기셨습니까?",
-    "form.input.phone.placeholder": "전화번호",
-    "form.input.card.placeholder": "카드 번호",
-    "form.input.expiry.placeholder": "MM / YY",
-    "form.input.secure.placeholder": "CVV",
-    "form.input.cardholder.placeholder": "카드 소유자 이름",
-    "form.input.email.placeholder": "이메일",
-    "form.input.amount.placeholder": "합계",
-    "form.button.back.to.website": "웹사이트로 돌아가기",
-    "form.button.reload": "새로 고침",
-    "form.button.next.label": "다음",
-    "form.button.pay.again.label": "다시 시도해주십시오",
-    "form.button.pay.label": "결제",
-    "form.button.copy.label": "복사",
-    "form.button.copied.label": "복사됨!",
-    "form.payment.method.name.card.label": "카드",
-    "form.payment.method.name.others.label": "모든 결제 수단",
-    "form.serviceProvidersGrid.search": "검색",
-    "form.qr.code": "은행 앱으로 QR 코드를 스캔하여 결제를 완료하십시오",
-    "form.p2p.error": "다른 금액을 선택하거나 나중에 다시 시도하십시오.",
-    "form.p2p.destination.info": "다음 세부 정보를 사용하여 이체하세요:",
-    "form.p2p.destination.bank.card.pan": "카드 번호:",
-    "form.p2p.destination.bank.name": "은행:",
-    "form.p2p.destination.bank.recipient": "수령인:",
-    "form.p2p.destination.spb.phone": "전화번호:",
-    "form.p2p.destination.bank.account.account": "계좌 번호:",
-    "form.p2p.destination.bank.account.bic": "BIC:",
-    "form.p2p.destination.bank.account.purpose": "지급 목적:",
-    "form.p2p.destination.qrCode.description": "은행 앱 또는 휴대폰 카메라로 QR 코드를 스캔하세요",
-    "form.p2p.complete.info": "이체를 완료한 후 아래 버튼을 누르십시오. 결제 처리에는 최대 5분이 소요될 수 있습니다.",
-    "form.p2p.complete.button": "이체 완료",
-    "form.p2p.complete.loading": "기다려 주십시오",
-    "form.p2p.destination.amount": "금액:",
-    "form.p2p.destination.randomizeAmountDescription": "자금 입금을 신속하게 처리하기 위해 입금 금액을 변경했습니다.",
-    "form.p2p.alert.li": [
-        "요청한 정확한 금액을 이체하십시오.",
-        "전체 금액을 한 번에 이체하십시오.",
-        "15분 이내에 이체를 완료하세요.",
-        "이체 완료 후 \"이체 완료\" 버튼을 클릭하세요."
-    ],
-    "form.p2p.alert.p": "그렇지 않으면 결제가 인정되지 않습니다.",
-    "form.p2p.gateway.selector.heading": "방법 또는 은행 선택",
-    "form.p2p.default.pane.label": "어떤 은행이든",
-    "form.p2p.next.button": "다음",
-    "form.p2p.destinations.heading": "결제",
-    "form.p2p.copied": "복사됨!",
-    "InvalidPaymentTool": "잘못된 결제 수단",
-    "AccountLimitsExceeded": "계정 한도 초과",
-    "InsufficientFunds": "자금 부족",
-    "PreauthorizationFailed": "사전 승인 실패",
-    "RejectedByIssuer": "발급 은행에 의해 거부됨",
-    "PaymentRejected": "결제 거부됨",
-    "p2p.gateways": {
-        "sberbank": "sberbank",
-        "сбер": "sberbank",
-        "sber": "sberbank",
-        "сбербанк": "sberbank",
-        "сбр": "sberbank",
-        "sbr": "sberbank",
-        "tinkoff": "Tinkoff",
-        "raiffeisen": "Raiffeisen",
-        "sbp": "SBP",
-        "kapital": "Kapital",
-        "abb": "ABB"
-    },
-    "p2p.notification": {
-        "verified": "결제를 진행하기 전에 MPAY 지갑 계정이 인증되었는지 확인하십시오."
-    },
-    "metadata.addons": {
-        "pinikle": {
-            "label": "바우처가 없으신가요?",
-            "link": "구매"
-        }
-    },
-    "loaderMessages": [
-        "로딩 중... 페이지를 닫지 마세요.",
-        "아직 작업 중입니다... 오래 걸리지 않을 것입니다.",
-        "잠시만 기다려 주세요! 요청을 처리 중입니다...",
-        "잠시만 기다려 주세요... 요청을 처리 중입니다.",
-        "잠시만 기다려 주세요... 거의 다 됐습니다!",
-        "거의 다 됐습니다... 기다려 주셔서 감사합니다!"
-    ]
-}

src/assets/locale/pt.json

@@ -67,6 +67,10 @@
     "form.p2p.next.button": "Próximo",
     "form.p2p.destinations.heading": "Pagamento",
     "form.p2p.copied": "Copiado!",
+    "leave.alert.header": "Tem certeza?",
+    "leave.alert.body": "Seu pagamento ainda não está completo.",
+    "leave.alert.footer.button.no": "Não",
+    "leave.alert.footer.button.yes": "Sim",
     "InvalidPaymentTool": "Instrumento de pagamento inválido",
     "AccountLimitsExceeded": "Limite da conta excedido",
     "InsufficientFunds": "Sem fundos",

src/assets/locale/ru.json

@@ -67,6 +67,10 @@
     "form.p2p.next.button": "Далее",
     "form.p2p.destinations.heading": "Оплата",
     "form.p2p.copied": "Скопировано!",
+    "leave.alert.header": "Вы уверены?",
+    "leave.alert.body": "Ваш платеж еще не завершен.",
+    "leave.alert.footer.button.no": "Нет",
+    "leave.alert.footer.button.yes": "Да",
     "InvalidPaymentTool": "Недопустимое средство оплаты",
     "AccountLimitsExceeded": "Превышен лимит",
     "InsufficientFunds": "Недостаточно средств",

src/assets/locale/tj.json

@@ -67,6 +67,10 @@
     "form.p2p.next.button": "Баъдӣ",
     "form.p2p.destinations.heading": "Пардохт",
     "form.p2p.copied": "Нусхабардорӣ шуд!",
+    "leave.alert.header": "Шумо мутмаин ҳастед?",
+    "leave.alert.body": "Пардохти шумо ҳоло анҷом наёфтааст.",
+    "leave.alert.footer.button.no": "Не",
+    "leave.alert.footer.button.yes": "Ҳа",
     "InvalidPaymentTool": "Абрези пардохт ғайриқонунӣ аст",
     "AccountLimitsExceeded": "Меъёри ҳисоб зиёд шуд",
     "InsufficientFunds": "Пули кофӣ нест",

src/assets/locale/tr.json

@@ -67,6 +67,10 @@
     "form.p2p.next.button": "İleri",
     "form.p2p.destinations.heading": "Ödeme",
     "form.p2p.copied": "Kopyalandı!",
+    "leave.alert.header": "Emin misiniz?",
+    "leave.alert.body": "Ödemeniz henüz tamamlanmadı.",
+    "leave.alert.footer.button.no": "Hayır",
+    "leave.alert.footer.button.yes": "Evet",
     "InvalidPaymentTool": "Geçersiz ödeme aracı",
     "AccountLimitsExceeded": "Hesap limiti aşıldı",
     "InsufficientFunds": "Yetersiz bakiye",

src/assets/locale/uz.json

@@ -67,6 +67,10 @@
     "form.p2p.next.button": "Кейинги",
     "form.p2p.destinations.heading": "Тўлов",
     "form.p2p.copied": "Нусхаланди!",
+    "leave.alert.header": "Ishonchingiz komilmi?",
+    "leave.alert.body": "To'lovingiz hali tugallanmagan.",
+    "leave.alert.footer.button.no": "Yo'q",
+    "leave.alert.footer.button.yes": "Ha",
     "InvalidPaymentTool": "Нотўғри тўлов воситаси",
     "AccountLimitsExceeded": "Ҳисоб лимити ошиб кетди",
     "InsufficientFunds": "Етарли маблағ йўқ",

src/common/components/QRCode.tsx

@@ -1,30 +1,20 @@
 import { Center, useTheme } from '@chakra-ui/react';
-import kjua from 'kjua';
+import { QRCodeSVG } from 'qrcode.react';
 
 export type QRCodeProps = {
-    text: string;
+    value: string;
     size?: number;
 };
 
-export function QRCode({ text, size = 224 }: QRCodeProps) {
+export function QRCode({ value, size = 224 }: QRCodeProps) {
     const {
-        QRCode: { back, fill },
+        colors,
+        ViewContainer: { viewContainerBg },
     } = useTheme();
+
     return (
-        <Center
+        <Center>
-            dangerouslySetInnerHTML={{
+            <QRCodeSVG bgColor={viewContainerBg} fgColor={colors.brand[500]} size={size} value={value} />
-                __html: kjua({
+        </Center>
-                    size,
-                    back,
-                    fill,
-                    rounded: 100,
-                    crisp: true,
-                    ecLevel: 'H',
-                    quiet: 0,
-                    mode: 'plain',
-                    text,
-                }).outerHTML,
-            }}
-        />
     );
 }

src/components/ViewContainer/ApiExtensionView/Destinations/DestinationQRCodeAccountInfo.tsx

@@ -8,7 +8,7 @@ import { HiOutlineDuplicate } from 'react-icons/hi';
 import { QRCode } from 'checkout/components';
 import { LocaleContext } from 'checkout/contexts';
 
-const QR_CODE_SIZE = 192;
+const QR_CODE_SIZE = 160;
 
 export type DestinationQRCodeAccountInfoProps = {
     qrCode: string;
@@ -36,11 +36,11 @@ export function DestinationQRCodeAccountInfo({ qrCode }: DestinationQRCodeAccoun
     };
 
     return (
-        <VStack align="stretch">
+        <VStack align="stretch" spacing={4}>
             <Text fontSize="sm" textAlign="center">
                 {l['form.p2p.destination.qrCode.description']}
             </Text>
-            <QRCode size={QR_CODE_SIZE} text={decodedUrl} />
+            <QRCode size={QR_CODE_SIZE} value={decodedUrl} />
             {isRedirect ? (
                 <Button
                     borderRadius="xl"

src/components/ViewContainer/ApiExtensionView/Destinations/Destinations.tsx

@@ -1,11 +1,12 @@
 /* eslint-disable react/jsx-max-depth */
-import { VStack, Text, Button, Spacer, LightMode } from '@chakra-ui/react';
+import { VStack, Text, Button, Spacer, LightMode, useDisclosure } from '@chakra-ui/react';
 import { useContext, useEffect } from 'react';
 
 import { Destination } from 'checkout/backend/p2p';
 import { LocaleContext, PaymentContext, PaymentModelContext } from 'checkout/contexts';
 
 import { DestinationInfo } from './DestinationInfo';
+import { LeaveAlert } from './LeaveAlert';
 import { P2PAlert } from './P2PAlert';
 import { ApiExtensionViewContext } from '../ApiExtensionViewContext';
 import { P2PApiError } from '../P2PApiError';
@@ -22,6 +23,7 @@ export function Destinations({ destinations }: DestinationsProps) {
     const {
         paymentModel: { initContext },
     } = useContext(PaymentModelContext);
+    const { isOpen, onOpen, onClose } = useDisclosure();
 
     const {
         completeState: { status },
@@ -35,44 +37,42 @@ export function Destinations({ destinations }: DestinationsProps) {
     }, [status]);
 
     return (
-        <VStack align="stretch" minH="md" spacing={5}>
+        <>
-            <P2PAlert />
+            <VStack align="stretch" minH="md" spacing={5}>
-            <VStack align="stretch" spacing={3}>
+                <P2PAlert />
-                {destinations.map((destination, index) => (
+                <VStack align="stretch" spacing={3}>
-                    <DestinationInfo key={index} destination={destination} />
+                    {destinations.map((destination, index) => (
-                ))}
+                        <DestinationInfo key={index} destination={destination} />
-            </VStack>
+                    ))}
-            <Spacer />
+                </VStack>
-            <VStack align="stretch" spacing={3}>
+                <Spacer />
-                <Text fontSize="sm" textAlign="center">
+                <VStack align="stretch" spacing={3}>
-                    {l['form.p2p.complete.info']}
+                    <Text fontSize="sm" textAlign="center">
-                </Text>
+                        {l['form.p2p.complete.info']}
-                <VStack align="stretch" spacing={4}>
+                    </Text>
-                    <LightMode>
+                    <VStack align="stretch" spacing={4}>
-                        <Button
+                        <LightMode>
-                            borderRadius="xl"
+                            <Button
-                            colorScheme="brand"
+                                borderRadius="xl"
-                            isLoading={status === 'LOADING' || status === 'SUCCESS'}
+                                colorScheme="brand"
-                            loadingText={l['form.p2p.complete.loading']}
+                                isLoading={status === 'LOADING' || status === 'SUCCESS'}
-                            size="lg"
+                                loadingText={l['form.p2p.complete.loading']}
-                            onClick={complete}
+                                size="lg"
-                        >
+                                onClick={complete}
-                            {l['form.p2p.complete.button']}
+                            >
-                        </Button>
+                                {l['form.p2p.complete.button']}
-                        {initContext?.redirectUrl && (
+                            </Button>
-                            <Button
+                            {initContext?.redirectUrl && (
-                                colorScheme="brand"
+                                <Button colorScheme="brand" pt={4} size="lg" variant="link" onClick={() => onOpen()}>
-                                size="lg"
+                                    {l['form.button.back.to.website']}
-                                variant="link"
+                                </Button>
-                                onClick={() => window.open(initContext.redirectUrl, '_self')}
+                            )}
-                            >
+                        </LightMode>
-                                {l['form.button.back.to.website']}
+                    </VStack>
-                            </Button>
+                    {status === 'FAILURE' && <P2PApiError l={l} />}
-                        )}
-                    </LightMode>
                 </VStack>
-                {status === 'FAILURE' && <P2PApiError l={l} />}
             </VStack>
-        </VStack>
+            <LeaveAlert isOpen={isOpen} onClose={onClose} />
+        </>
     );
 }

src/components/ViewContainer/ApiExtensionView/Destinations/LeaveAlert.tsx

@@ -0,0 +1,45 @@
+import {
+    AlertDialog,
+    AlertDialogBody,
+    AlertDialogCloseButton,
+    AlertDialogContent,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogOverlay,
+    Button,
+} from '@chakra-ui/react';
+import { useContext, useRef } from 'react';
+
+import { LocaleContext, PaymentModelContext } from 'checkout/contexts';
+
+export type LeaveAlertProps = {
+    isOpen: boolean;
+    onClose: () => void;
+};
+
+export function LeaveAlert({ isOpen, onClose }: LeaveAlertProps) {
+    const { l } = useContext(LocaleContext);
+    const cancelRef = useRef();
+    const {
+        paymentModel: { initContext },
+    } = useContext(PaymentModelContext);
+
+    return (
+        <AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} motionPreset="slideInBottom" onClose={onClose}>
+            <AlertDialogOverlay />
+            <AlertDialogContent borderRadius="xl">
+                <AlertDialogHeader>{l['leave.alert.header']}</AlertDialogHeader>
+                <AlertDialogCloseButton />
+                <AlertDialogBody>{l['leave.alert.body']}</AlertDialogBody>
+                <AlertDialogFooter>
+                    <Button ref={cancelRef} borderRadius="xl" onClick={onClose}>
+                        {l['leave.alert.footer.button.no']}
+                    </Button>
+                    <Button borderRadius="xl" ml={4} onClick={() => window.open(initContext.redirectUrl, '_self')}>
+                        {l['leave.alert.footer.button.yes']}
+                    </Button>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+    );
+}

src/components/ViewContainer/QrCodeView/QrCodeView.tsx

@@ -63,7 +63,7 @@ export function QrCodeView() {
                     <Text fontWeight="medium" textAlign="center">
                         {l['form.qr.code']}
                     </Text>
-                    <QRCode text={interaction.qrCode} />
+                    <QRCode value={interaction.qrCode} />
                     {initContext.redirectUrl && (
                         <>
                             <Divider />

src/theme/index.ts

@@ -2,7 +2,7 @@ import { theme as chakraTheme } from '@chakra-ui/react';
 
 import { Menu } from './components/Menu';
 
-const { Button, Spinner, Divider, Heading, Alert, Drawer, Input } = chakraTheme.components;
+const { Button, Spinner, Divider, Heading, Alert, Modal, Drawer, Input } = chakraTheme.components;
 
 export const common = {
     useSystemColorMode: false,
@@ -12,6 +12,7 @@ export const common = {
         Divider,
         Heading,
         Alert,
+        Modal,
         Menu,
         Drawer,
         Input,

types/kjua.d.ts

@@ -1,60 +0,0 @@
-declare module 'kjua' {
-    interface KjuaOptions {
-        // render method: 'canvas' or 'image'
-        render?: 'canvas' | 'image';
-
-        // render pixel-perfect lines
-        crisp?: true;
-
-        // minimum version: 1..40
-        minVersion?: number;
-
-        // error correction level: 'L', 'M', 'Q' or 'H'
-        ecLevel?: 'L' | 'M' | 'Q' | 'H';
-
-        // size in pixel
-        size?: number;
-
-        // pixel-ratio, null for devicePixelRatio
-        ratio?: number;
-
-        // code color
-        fill?: string;
-
-        // background color
-        back?: string;
-
-        // content
-        text: string;
-
-        // roundend corners in pc: 0..100
-        rounded?: number;
-
-        // quiet zone in modules
-        quiet?: number;
-
-        // modes: 'plain', 'label' or 'image'
-        mode?: 'plain' | 'label' | 'image';
-
-        // label/image size and pos in pc: 0..100
-        mSize?: number;
-        mPosX?: number;
-        mPosY?: number;
-
-        // label
-        label?: string;
-        fontname?: string;
-        fontcolor?: string;
-
-        // image element
-        image?: HTMLImageElement;
-    }
-
-    function kjua<T extends KjuaOptions['render'] = 'image'>(
-        options: KjuaOptions & { render?: T },
-    ): T extends 'canvas' ? HTMLCanvasElement : HTMLImageElement;
-    namespace kjua {
-        export { KjuaOptions as Options };
-    }
-    export = kjua;
-}