MI-48: Add destination notification (#349)

src/assets/locale/ar.json

@@ -84,6 +84,9 @@
         "kapital": "Kapital",
         "abb": "ABB"
     },
+    "p2p.notification": {
+        "verified": "يرجى التأكد من أن حساب محفظة MPAY الخاص بك تم التحقق منه قبل إجراء الدفع."
+    },
     "metadata.addons": {
         "pinikle": {
             "label": "هل عندك قسيمة ؟",

src/assets/locale/az.json

@@ -84,6 +84,9 @@
         "kapital": "Kapital",
         "abb": "ABB"
     },
+    "p2p.notification": {
+        "verified": "Ödəniş etməzdən əvvəl MPAY pul kisəsi hesabınızın təsdiqləndiyinə əmin olun."
+    },
     "metadata.addons": {
         "pinikle": {
             "label": "Voucheriniz yoxdur?",

src/assets/locale/bn.json

@@ -84,6 +84,9 @@
         "kapital": "Kapital",
         "abb": "ABB"
     },
+    "p2p.notification": {
+        "verified": "পেমেন্ট করার আগে অনুগ্রহ করে নিশ্চিত করুন যে আপনার MPAY ওয়ালেট অ্যাকাউন্ট যাচাই করা হয়েছে।"
+    },
     "metadata.addons": {
         "pinikle": {
             "label": "আপনার কি ভাউচার নেই?",

src/assets/locale/en.json

@@ -84,6 +84,9 @@
         "kapital": "Kapital",
         "abb": "ABB"
     },
+    "p2p.notification": {
+        "verified": "Please make sure your MPAY wallet account is verified before making a payment."
+    },
     "metadata.addons": {
         "pinikle": {
             "label": "Don't have a voucher?",

src/assets/locale/ja.json

@@ -84,6 +84,9 @@
         "kapital": "Kapital",
         "abb": "ABB"
     },
+    "p2p.notification": {
+        "verified": "支払いを行う前に、MPAYウォレットのアカウントが認証されていることを確認してください。"
+    },
     "metadata.addons": {
         "pinikle": {
             "label": "バウチャーがありませんか？",

src/assets/locale/ko.json

@@ -84,6 +84,9 @@
         "kapital": "Kapital",
         "abb": "ABB"
     },
+    "p2p.notification": {
+        "verified": "결제를 진행하기 전에 MPAY 지갑 계정이 인증되었는지 확인하십시오."
+    },
     "metadata.addons": {
         "pinikle": {
             "label": "바우처가 없으신가요?",

src/assets/locale/pt.json

@@ -84,6 +84,9 @@
         "kapital": "Kapital",
         "abb": "ABB"
     },
+    "p2p.notification": {
+        "verified": "Antes de efetuar o pagamento, certifique-se de que sua conta na carteira MPAY está verificada."
+    },
     "metadata.addons": {
         "pinikle": {
             "label": "Não tem um voucher?",

src/assets/locale/ru.json

@@ -84,6 +84,9 @@
         "kapital": "Kapital",
         "abb": "ABB"
     },
+    "p2p.notification": {
+        "verified": "Перед проведением платежа убедитесь, что ваша учетная запись в кошельке MPAY верифицирована."
+    },
     "metadata.addons": {
         "pinikle": {
             "label": "У вас нет ваучера?",

src/assets/locale/tj.json

@@ -84,6 +84,9 @@
         "kapital": "Kapital",
         "abb": "ABB"
     },
+    "p2p.notification": {
+        "verified": "Пеш аз пардохт боварӣ ҳосил кунед, ки ҳисоби шумо дар ҳамёни MPAY тасдиқ шудааст."
+    },
     "metadata.addons": {
         "pinikle": {
             "label": "Шумо ваучер надоред?",

src/assets/locale/tr.json

@@ -84,6 +84,9 @@
         "kapital": "Kapital",
         "abb": "ABB"
     },
+    "p2p.notification": {
+        "verified": "Ödeme yapmadan önce MPAY cüzdanındaki hesabınızın doğrulandığından emin olun."
+    },
     "metadata.addons": {
         "pinikle": {
             "label": "Kuponunuz yok mu?",

src/assets/locale/uz.json

@@ -84,6 +84,9 @@
         "kapital": "Kapital",
         "abb": "ABB"
     },
+    "p2p.notification": {
+        "verified": "Тўловни амалга оширишдан олдин MPAY ҳамёнидаги ҳисобингиз тасдиқланганига ишонч ҳосил қилинг."
+    },
     "metadata.addons": {
         "pinikle": {
             "label": "Ваучер йўқми?",

src/common/utils/detectLocale.ts

@@ -1,6 +1,6 @@
 import { isNil } from './isNil';
 
-const locales = ['ru', 'en', 'ja', 'pt', 'bn', 'ko', 'tr', 'az', 'ar', 'tj', 'uz'];
+const locales = ['ru', 'en', 'pt', 'bn', 'tr', 'az', 'ar', 'tj', 'uz'];
 
 export const detectLocale = (locale: string | null): string => {
     let result;

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 { DestinationNotification } from './DestinationNotification';
 import { DestinationQRCodeAccountInfo } from './DestinationQRCodeAccountInfo';
 import { InfoItem } from './InfoItem';
 import { formatCardPan, formatPhoneNumber } from './utils';
@@ -35,6 +36,7 @@ export function DestinationInfo({ destination }: DestinationInfoProps) {
 
     return (
         <VStack align="stretch">
+            {destination?.notification && <DestinationNotification code={destination.notification} />}
             <VStack align="stretch">
                 {isAmountRandomized && (
                     <Alert borderRadius="xl" p={3} status="warning">

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

@@ -0,0 +1,22 @@
+import { Alert, AlertIcon, Text } from '@chakra-ui/react';
+import { useContext } from 'react';
+
+import { LocaleContext } from 'checkout/contexts';
+
+import { mapNotification } from '../utils';
+
+type NotificationProps = {
+    code: string;
+};
+
+export function DestinationNotification({ code }: NotificationProps) {
+    const { l } = useContext(LocaleContext);
+    const message = mapNotification(code, l);
+
+    return (
+        <Alert borderRadius="xl" p={3} status="warning">
+            <AlertIcon />
+            <Text fontSize="sm">{message}</Text>
+        </Alert>
+    );
+}

src/components/ViewContainer/ApiExtensionView/utils/index.ts

@@ -1,2 +1,3 @@
 export { mapGatewayName } from './mapGatewayName';
 export { getGatewayIcon } from './getGatewayIcon';
+export { mapNotification } from './mapNotifications';

src/components/ViewContainer/ApiExtensionView/utils/mapNotification.test.ts

@@ -0,0 +1,35 @@
+import { Locale } from 'checkout/contexts';
+
+import { mapNotification } from './mapNotifications';
+
+describe('mapNotification', () => {
+    const mockLocale: Locale = {
+        'p2p.notification': {
+            success: 'Success message',
+            error: 'Error message',
+        },
+    };
+
+    it('should return the mapped notification when it exists', () => {
+        expect(mapNotification('success', mockLocale)).toBe('Success message');
+        expect(mapNotification('error', mockLocale)).toBe('Error message');
+    });
+
+    it('should return the original code when the notification does not exist', () => {
+        expect(mapNotification('unknown', mockLocale)).toBe('unknown');
+    });
+
+    it('should handle undefined locale', () => {
+        expect(mapNotification('success', undefined)).toBe('success');
+    });
+
+    it('should handle empty p2p.notification object', () => {
+        const emptyLocale: Locale = { 'p2p.notification': {} };
+        expect(mapNotification('success', emptyLocale)).toBe('success');
+    });
+
+    it('should handle missing p2p.notification key', () => {
+        const incompleteLocale: Locale = {};
+        expect(mapNotification('success', incompleteLocale)).toBe('success');
+    });
+});

src/components/ViewContainer/ApiExtensionView/utils/mapNotifications.ts

@@ -0,0 +1,6 @@
+import { Locale } from 'checkout/contexts';
+
+export const mapNotification = (code: string, l: Locale): string => {
+    const notifications = l?.['p2p.notification'] ?? {};
+    return notifications[code] ?? code;
+};

src/components/ViewContainer/LocaleSelector.tsx

@@ -13,26 +13,11 @@ const localeInfo = {
         short: 'Az',
         long: 'Azerbaijani',
     },
-    bn: {
-        flag: '🇧🇩',
-        short: 'বাং',
-        long: 'বাংলা',
-    },
     en: {
         flag: '🇬🇧',
         short: 'En',
         long: 'English',
     },
-    ja: {
-        flag: '🇯🇵',
-        short: '日本',
-        long: '日本語',
-    },
-    ko: {
-        flag: '🇰🇷',
-        short: '한국',
-        long: '한국어',
-    },
     pt: {
         flag: '🇵🇹',
         short: 'Pt',