OPS-525: Add QrCode destination type (#345)

2024-11-06 02:25:18 +00:00 · 2024-09-25 19:42:39 +07:00 · 2024-09-25 19:42:39 +07:00 · 9afbafa386
commit 9afbafa386
parent ba95f7b434
18 changed files with 50 additions and 8 deletions
--- a/src/assets/locale/ar.json
+++ b/src/assets/locale/ar.json
@ -47,6 +47,7 @@
    "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": "يرجى الانتظار",
--- a/src/assets/locale/az.json
+++ b/src/assets/locale/az.json
@ -47,6 +47,7 @@
    "form.p2p.destination.bank.account.account": "Hesab nömrəsi:",
    "form.p2p.destination.bank.account.bic": "BIC:",
    "form.p2p.destination.bank.account.purpose": "Ödənişin təyinatı:",
+    "form.p2p.destination.qrCode.description": "Zəhmət olmasa, QR kodunu bank tətbiqiniz və ya telefon kamerası ilə tarayın",
    "form.p2p.complete.info": "Təqdim etdikdən sonra \"Köçürmə tamamlandı\" düyməsini basın. Ödənişin işlənməsi 5 dəqiqəyə qədər çəkir.",
    "form.p2p.complete.button": "Köçürmə tamamlandı",
    "form.p2p.complete.loading": "Lütfən, gözləyin",
--- a/src/assets/locale/bn.json
+++ b/src/assets/locale/bn.json
@ -47,6 +47,7 @@
    "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": "অনুগ্রহ করে অপেক্ষা করুন",
--- a/src/assets/locale/en.json
+++ b/src/assets/locale/en.json
@ -47,6 +47,7 @@
    "form.p2p.destination.bank.account.account": "Account number:",
    "form.p2p.destination.bank.account.bic": "BIC:",
    "form.p2p.destination.bank.account.purpose": "Purpose:",
+    "form.p2p.destination.qrCode.description": "Please scan the QR code with your banking app or phone camera",
    "form.p2p.complete.info": "After completing the transfer, press the button below.",
    "form.p2p.complete.button": "Complete payment",
    "form.p2p.complete.loading": "Please, wait",
--- a/src/assets/locale/ja.json
+++ b/src/assets/locale/ja.json
@ -47,6 +47,7 @@
    "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": "読み込み中...",
--- a/src/assets/locale/ko.json
+++ b/src/assets/locale/ko.json
@ -47,6 +47,7 @@
    "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": "기다려 주십시오",
--- a/src/assets/locale/pt.json
+++ b/src/assets/locale/pt.json
@ -47,6 +47,7 @@
    "form.p2p.destination.bank.account.account": "Número da conta:",
    "form.p2p.destination.bank.account.bic": "BIC:",
    "form.p2p.destination.bank.account.purpose": "Finalidade do pagamento:",
+    "form.p2p.destination.qrCode.description": "Por favor, escaneie o código QR com seu aplicativo bancário ou câmera do telefone",
    "form.p2p.complete.info": "Após completar a transferência, pressione o botão abaixo. O processamento do pagamento pode levar até 5 minutos.",
    "form.p2p.complete.button": "Transferência concluída",
    "form.p2p.complete.loading": "Por favor, aguarde",
--- a/src/assets/locale/ru.json
+++ b/src/assets/locale/ru.json
@ -47,6 +47,7 @@
    "form.p2p.destination.bank.account.account": "Номер счета:",
    "form.p2p.destination.bank.account.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": "Пожалуйста, подождите",
--- a/src/assets/locale/tj.json
+++ b/src/assets/locale/tj.json
@ -47,6 +47,7 @@
    "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": "Лутфан интизор шавед",
--- a/src/assets/locale/tr.json
+++ b/src/assets/locale/tr.json
@ -47,6 +47,7 @@
    "form.p2p.destination.bank.account.account": "Hesap numarası:",
    "form.p2p.destination.bank.account.bic": "BIC:",
    "form.p2p.destination.bank.account.purpose": "Ödeme amacı:",
+    "form.p2p.destination.qrCode.description": "Lütfen QR kodunu banka uygulamanız veya telefon kameranızla tarayın",
    "form.p2p.complete.info": "Transferi tamamladıktan sonra aşağıdaki butona basın. Ödeme işleminin tamamlanması 5 dakikaya kadar sürebilir.",
    "form.p2p.complete.button": "Transfer tamamlandı",
    "form.p2p.complete.loading": "Lütfen bekleyin",
--- a/src/assets/locale/uz.json
+++ b/src/assets/locale/uz.json
@ -47,6 +47,7 @@
    "form.p2p.destination.bank.account.account": "Ҳисоб рақами:",
    "form.p2p.destination.bank.account.bic": "БИК:",
    "form.p2p.destination.bank.account.purpose": "Тўлов мақсади:",
+    "form.p2p.destination.qrCode.description": "Iltimos, QR kodni banking ilovangiz yoki telefon kamerangiz bilan skaner qiling",
    "form.p2p.complete.info": "Ўтказишни амалга оширгач, пастдаги тугмани босинг. Тўловни қабул қилиш 5 дақиқагача вақт олади.",
    "form.p2p.complete.button": "Ўтказиш бажарилди",
    "form.p2p.complete.loading": "Илтимос, кутинг",
--- a/src/common/backend/p2p/types.ts
+++ b/src/common/backend/p2p/types.ts
@ -12,6 +12,7 @@ export type DestinationBankCard = {
    pan: string;
    bankName?: string;
    recipientName?: string;
+    notification?: string;
 };

 export type DestinationSBP = {
@ -19,6 +20,7 @@ export type DestinationSBP = {
    phoneNumber: string;
    bankName?: string;
    recipientName?: string;
+    notification?: string;
 };

 export type DestinationBankAccount = {
@ -28,6 +30,15 @@ export type DestinationBankAccount = {
    recipientName?: string;
    bic?: string;
    purpose?: string;
+    notification?: string;
 };

-export type Destination = DestinationBankCard | DestinationSBP | DestinationBankAccount;
+export type DestinationQRCode = {
+    destinationType: 'QRCode';
+    qrCode: string;
+    bankName?: string;
+    recipientName?: string;
+    notification?: string;
+};
+
+export type Destination = DestinationBankCard | DestinationSBP | DestinationBankAccount | DestinationQRCode;
--- a/src/components/ViewContainer/QrCodeView/QrCode.tsx
+++ b/src/components/ViewContainer/QrCodeView/QrCode.tsx
--- a/src/common/components/index.ts
+++ b/src/common/components/index.ts
@ -3,6 +3,8 @@ export { BackwardBox } from './BackwardBox';
 export { GlobalSpinner } from './GlobalSpinner';
 export { Pane, PaneLogo, PaneLogoBox, PaneText, PaneMetadataLogo, PaneMetadataImageLogo } from './Pane';
 export { StatusInputRightElement } from './StatusInputRightElement';
+export { QRCode } from './QRCode';

 export type { PaneMetadataImageLogoProps, PaneMetadataLogoProps } from './Pane';
 export type { StatusInputRightElementProps } from './StatusInputRightElement';
+export type { QRCodeProps } from './QRCode';
--- a/src/components/ViewContainer/ApiExtensionView/Destinations/DestinationInfo.tsx
+++ b/src/components/ViewContainer/ApiExtensionView/Destinations/DestinationInfo.tsx
@ -6,6 +6,7 @@ import { LocaleContext, PaymentConditionsContext, PaymentModelContext, ViewModel
 import { InvoiceDetermined, PaymentCondition } from 'checkout/paymentCondition';

 import { DestinationBankAccountInfo } from './DestinationBankAccountInfo';
+import { DestinationQRCodeAccountInfo } from './DestinationQRCodeAccountInfo';
 import { InfoItem } from './InfoItem';
 import { formatCardPan, formatPhoneNumber } from './utils';
 import { SBPIcon } from '../icons/SBPIcon';
@ -62,6 +63,7 @@ export function DestinationInfo({ destination }: DestinationInfoProps) {
                    value={destination.phoneNumber}
                />
            )}
+            {destination.destinationType === 'QRCode' && <DestinationQRCodeAccountInfo qrCode={destination.qrCode} />}
            {destination?.bankName && (
                <InfoItem
                    icon={getGatewayIcon(destination.bankName)}
--- a/src/components/ViewContainer/ApiExtensionView/Destinations/DestinationQRCodeAccountInfo.tsx
+++ b/src/components/ViewContainer/ApiExtensionView/Destinations/DestinationQRCodeAccountInfo.tsx
@ -0,0 +1,21 @@
+import { VStack, Text, Divider } from '@chakra-ui/react';
+import { useContext } from 'react';
+
+import { QRCode } from 'checkout/components';
+import { LocaleContext } from 'checkout/contexts';
+
+export type DestinationQRCodeAccountInfoProps = {
+    qrCode: string;
+};
+
+export function DestinationQRCodeAccountInfo({ qrCode }: DestinationQRCodeAccountInfoProps) {
+    const { l } = useContext(LocaleContext);
+
+    return (
+        <VStack align="stretch">
+            <Text textAlign="center">{l['form.p2p.destination.qrCode.description']}</Text>
+            <QRCode text={qrCode} />
+            <Divider />
+        </VStack>
+    );
+}
--- a/src/components/ViewContainer/ApiExtensionView/Destinations/Destinations.tsx
+++ b/src/components/ViewContainer/ApiExtensionView/Destinations/Destinations.tsx
@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-max-depth */
-import { VStack, Text, Heading, Button, Divider, Spacer, LightMode } from '@chakra-ui/react';
+import { VStack, Text, Button, Spacer, LightMode } from '@chakra-ui/react';
 import { useContext, useEffect } from 'react';

 import { Destination } from 'checkout/backend/p2p';
@ -36,10 +36,6 @@ export function Destinations({ destinations }: DestinationsProps) {

    return (
        <VStack align="stretch" minH="md" spacing={5}>
-            <Heading as="h5" size="sm" textAlign="center">
-                {l['form.p2p.destinations.heading']}
-            </Heading>
-            <Divider />
            <P2PAlert />
            <VStack align="stretch" spacing={3}>
                <Text fontWeight="medium">{l['form.p2p.destination.info']}</Text>
--- a/src/components/ViewContainer/QrCodeView/QrCodeView.tsx
+++ b/src/components/ViewContainer/QrCodeView/QrCodeView.tsx
@ -3,13 +3,12 @@ import isMobile from 'ismobilejs';
 import { useContext, useEffect } from 'react';

 import { QrCodeFormMetadata } from 'checkout/backend/payments';
+import { QRCode } from 'checkout/components';
 import { LocaleContext, PaymentConditionsContext, PaymentContext, PaymentModelContext } from 'checkout/contexts';
 import { PaymentInteractionRequested, PaymentStarted } from 'checkout/paymentCondition';
 import { isNil } from 'checkout/utils';
 import { findMetadata } from 'checkout/utils/findMetadata';

-import { QRCode } from './QrCode';
-
 const isQrCodeRedirect = (formMetadata: QrCodeFormMetadata) =>
    !isNil(formMetadata) &&
    (isMobile(window.navigator).phone || isMobile(window.navigator).tablet) &&