From 3ed6dbab1133b478313dba0a155a36f7dd1f5e3b Mon Sep 17 00:00:00 2001
From: "e.kireev" <e.kireev@xsolla.com>
Date: Thu, 28 Mar 2024 14:22:36 +0300
Subject: [PATCH] feat(PAYMENTS-17877): added message about wrong userback

---
 src/core/status/status.interface.ts           |  1 +
 .../status/status.component.scss              |  9 +++++++++
 .../status/status.component.template.spec.ts  |  2 ++
 .../status/status.component.template.ts       | 19 ++++++++++++++-----
 .../get-payment-status-config.function.ts     |  4 ++++
 ...et-saving-method-status-config.function.ts |  4 ++++
 .../status.component.config.interface.ts      |  1 +
 src/index.ts                                  |  1 +
 src/translations/ar.json                      |  1 +
 src/translations/bg.json                      |  1 +
 src/translations/cs.json                      |  1 +
 src/translations/de.json                      |  1 +
 src/translations/en.json                      |  1 +
 src/translations/es.json                      |  1 +
 src/translations/fr.json                      |  1 +
 src/translations/he.json                      |  1 +
 src/translations/it.json                      |  1 +
 src/translations/ja.json                      |  1 +
 src/translations/ko.json                      |  1 +
 src/translations/pl.json                      |  1 +
 src/translations/pt.json                      |  1 +
 src/translations/ro.json                      |  1 +
 src/translations/ru.json                      |  1 +
 src/translations/th.json                      |  1 +
 src/translations/tr.json                      |  1 +
 src/translations/vi.json                      |  1 +
 src/translations/zh_HANS.json                 |  1 +
 src/translations/zh_HANT.json                 |  1 +
 28 files changed, 56 insertions(+), 5 deletions(-)

diff --git a/src/core/status/status.interface.ts b/src/core/status/status.interface.ts
index eea8a64..cbab696 100644
--- a/src/core/status/status.interface.ts
+++ b/src/core/status/status.interface.ts
@@ -59,4 +59,5 @@ export interface Status {
     };
   };
   isSavePaymentAccount?: boolean;
+  autoCancellation: boolean;
 }
diff --git a/src/features/headless-checkout/web-components/status/status.component.scss b/src/features/headless-checkout/web-components/status/status.component.scss
index b536307..26543b6 100644
--- a/src/features/headless-checkout/web-components/status/status.component.scss
+++ b/src/features/headless-checkout/web-components/status/status.component.scss
@@ -31,4 +31,13 @@ psdk-status {
 
     margin-top: 20px;
   }
+
+  .message {
+    @include typo.psdk-typo;
+
+    padding: 12px;
+    border-radius: var(--psdk-common-border-radius);
+    background-color: var(--psdk-neutral-bg);
+    color: var(--psdk-neutral-color);
+  }
 }
diff --git a/src/features/headless-checkout/web-components/status/status.component.template.spec.ts b/src/features/headless-checkout/web-components/status/status.component.template.spec.ts
index 681324e..5d892f8 100644
--- a/src/features/headless-checkout/web-components/status/status.component.template.spec.ts
+++ b/src/features/headless-checkout/web-components/status/status.component.template.spec.ts
@@ -8,6 +8,7 @@ const mockStatusConfig: StatusComponentConfig = {
   description: '',
   showDescription: false,
   status: StatusEnum.done,
+  autoCancellation: true,
 };
 const mockStatusConfigWithDescription: StatusComponentConfig = {
   title: 'title',
@@ -15,6 +16,7 @@ const mockStatusConfigWithDescription: StatusComponentConfig = {
   description: 'description',
   showDescription: true,
   status: StatusEnum.done,
+  autoCancellation: true,
 };
 
 describe('getStatusComponentTemplate', () => {
diff --git a/src/features/headless-checkout/web-components/status/status.component.template.ts b/src/features/headless-checkout/web-components/status/status.component.template.ts
index c284a57..ccddb24 100644
--- a/src/features/headless-checkout/web-components/status/status.component.template.ts
+++ b/src/features/headless-checkout/web-components/status/status.component.template.ts
@@ -1,22 +1,31 @@
 import { StatusComponentConfig } from './template-config/status.component.config.interface';
+import i18next from 'i18next';
 
 export const getStatusComponentTemplate = (
   statusConfig: StatusComponentConfig,
 ): string => {
+  const autoCancellationMessage = !statusConfig.autoCancellation
+    ? `<div class='message'>${i18next.t(
+        'status.message.auto-cancellation',
+      )}</div>`
+    : '';
+
   return `
-  <div class="status">
-    <div class="title">
-      <h2 class="title-text">${statusConfig.title}</h2>
+  <div class='status'>
+    <div class='title'>
+      <h2 class='title-text'>${statusConfig.title}</h2>
     </div>
+    
+    
 
     ${
       statusConfig.showDescription
-        ? `<p class="description">${statusConfig.description}</p>`
+        ? `<p class='description'>${statusConfig.description}</p>`
         : ''
     }
     ${
       statusConfig.status === 'processing' || statusConfig.status === 'awaiting'
-        ? '<div class="loader"></div>'
+        ? `${autoCancellationMessage}<div class='loader'></div>`
         : ''
     }
   </div>
diff --git a/src/features/headless-checkout/web-components/status/template-config/get-payment-status-config.function.ts b/src/features/headless-checkout/web-components/status/template-config/get-payment-status-config.function.ts
index be21d0a..1a6bd61 100644
--- a/src/features/headless-checkout/web-components/status/template-config/get-payment-status-config.function.ts
+++ b/src/features/headless-checkout/web-components/status/template-config/get-payment-status-config.function.ts
@@ -17,6 +17,7 @@ export function getPaymentStatusConfig(
       description: i18next.t('error.title.default'),
       showDescription: true,
       status: status.statusState,
+      autoCancellation: status.autoCancellation,
     };
   }
 
@@ -27,6 +28,7 @@ export function getPaymentStatusConfig(
       description: i18next.t('status.processing.description'),
       showDescription: true,
       status: status.statusState,
+      autoCancellation: status.autoCancellation,
     };
   }
 
@@ -37,6 +39,7 @@ export function getPaymentStatusConfig(
       description: i18next.t('error.title.default'),
       showDescription: true,
       status: status.statusState,
+      autoCancellation: status.autoCancellation,
     };
   }
 
@@ -49,6 +52,7 @@ export function getPaymentStatusConfig(
       }),
       showDescription: !!status.email,
       status: status.statusState,
+      autoCancellation: status.autoCancellation,
     };
   }
 
diff --git a/src/features/headless-checkout/web-components/status/template-config/get-saving-method-status-config.function.ts b/src/features/headless-checkout/web-components/status/template-config/get-saving-method-status-config.function.ts
index e776463..636d7f4 100644
--- a/src/features/headless-checkout/web-components/status/template-config/get-saving-method-status-config.function.ts
+++ b/src/features/headless-checkout/web-components/status/template-config/get-saving-method-status-config.function.ts
@@ -17,6 +17,7 @@ export function getSavingMethodStatusConfig(
       showDescription: false,
       isSavePaymentAccount: true,
       status: status.statusState,
+      autoCancellation: status.autoCancellation,
     };
   }
 
@@ -28,6 +29,7 @@ export function getSavingMethodStatusConfig(
       showDescription: true,
       isSavePaymentAccount: true,
       status: status.statusState,
+      autoCancellation: status.autoCancellation,
     };
   }
 
@@ -39,6 +41,7 @@ export function getSavingMethodStatusConfig(
       showDescription: false,
       isSavePaymentAccount: true,
       status: status.statusState,
+      autoCancellation: status.autoCancellation,
     };
   }
 
@@ -50,6 +53,7 @@ export function getSavingMethodStatusConfig(
       showDescription: false,
       isSavePaymentAccount: true,
       status: status.statusState,
+      autoCancellation: status.autoCancellation,
     };
   }
 
diff --git a/src/features/headless-checkout/web-components/status/template-config/status.component.config.interface.ts b/src/features/headless-checkout/web-components/status/template-config/status.component.config.interface.ts
index ac517d4..a65d53c 100644
--- a/src/features/headless-checkout/web-components/status/template-config/status.component.config.interface.ts
+++ b/src/features/headless-checkout/web-components/status/template-config/status.component.config.interface.ts
@@ -7,4 +7,5 @@ export interface StatusComponentConfig {
   showDescription: boolean;
   isSavePaymentAccount?: boolean;
   status: StatusEnum;
+  autoCancellation: boolean;
 }
diff --git a/src/index.ts b/src/index.ts
index 6ee650c..c66ae86 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -4,3 +4,4 @@ import './styles/style.scss';
 
 export { headlessCheckout } from './features/headless-checkout/headless-checkout.instance';
 export * from './web-components';
+export { Lang } from './core/i18n/lang.enum';
diff --git a/src/translations/ar.json b/src/translations/ar.json
index e71f045..3f5b0d1 100644
--- a/src/translations/ar.json
+++ b/src/translations/ar.json
@@ -40,6 +40,7 @@
          "sctl-indications" : "SCTL Indications",
          "secure-connection" : "اتصال آمن",
          "status.error.title" : "فشلت عملية السداد",
+         "status.message.auto-cancellation" : "أكمل المعاملة باستخدام طريقة السداد المحددة. إذا اخترت عدم إكمالها في صفحة طريقة الدفع، فأغلق هذه النافذة. لن تُخصم أي مبالغ من حسابك.",
          "status.processing.description" : "في انتظار أن يتم السداد...",
          "status.processing.title" : "جارٍ تنفيذ السداد",
          "status.success.description" : "أرسلنا إيصالك إلى {{email}}",
diff --git a/src/translations/bg.json b/src/translations/bg.json
index 8b1ca75..a58363e 100644
--- a/src/translations/bg.json
+++ b/src/translations/bg.json
@@ -40,6 +40,7 @@
          "sctl-indications" : "SCTL Indications",
          "secure-connection" : "Сигурна връзка",
          "status.error.title" : "Неуспешно плащане",
+         "status.message.auto-cancellation" : "Завършете транзакцията с избрания начин на плащане. Ако изберете да не я завършвате на страницата на начина на плащане, затворете прозореца. Няма да бъдете таксувани.",
          "status.processing.description" : "Изчаква завършване на плащане...",
          "status.processing.title" : "Плащането се обработва",
          "status.success.description" : "Изпратихме касовата Ви бележка на {{email}}",
diff --git a/src/translations/cs.json b/src/translations/cs.json
index 9f3c87c..2055e20 100644
--- a/src/translations/cs.json
+++ b/src/translations/cs.json
@@ -40,6 +40,7 @@
          "sctl-indications" : "SCTL Indications",
          "secure-connection" : "Zabezpečené připojení",
          "status.error.title" : "Platba se nezdařila",
+         "status.message.auto-cancellation" : "Dokončete transakci pomocí vybraného způsobu platby. Pokud se na stránce způsobu platby rozhodnete transakci nedokončit, zavřete toto okno. Z Vašeho účtu nebude stržena žádná částka.",
          "status.processing.description" : "Čekání na dokončení platby...",
          "status.processing.title" : "Zpracovávání platby",
          "status.success.description" : "Vaši stvrzenku jsme zaslali na {{email}}",
diff --git a/src/translations/de.json b/src/translations/de.json
index bf9a8d3..6ab6717 100644
--- a/src/translations/de.json
+++ b/src/translations/de.json
@@ -40,6 +40,7 @@
          "sctl-indications" : "SCTL Indications",
          "secure-connection" : "Sichere Verbindung",
          "status.error.title" : "Zahlung fehlgeschlagen",
+         "status.message.auto-cancellation" : "Schließe die Transaktion mit der ausgewählten Zahlungsmethode ab. Wenn du die Transaktion auf der Seite der Zahlungsmethoden nicht abschließen möchtest, schließe dieses Fenster. Es wird dann kein Geld abgebucht.",
          "status.processing.description" : "Zahlung wird durchgeführt …",
          "status.processing.title" : "Zahlung wird verarbeitet",
          "status.success.description" : "Wir haben den Beleg an {{email}} gesendet",
diff --git a/src/translations/en.json b/src/translations/en.json
index 1af9153..8f0a6e5 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -14,6 +14,7 @@
       "status.error.title": "Payment failed",
       "status.success.title": "Payment successful",
       "status.success.description": "We sent your receipt to {{email}}",
+      "status.message.auto-cancellation": "Complete the transaction with the selected payment method. If you choose not to complete it on the payment method's page, close this window. Your account won't be charged.",
       "finance-details-total-title": "Total",
       "finance-details-subtotal-title": "Subtotal",
       "finance-details-hrk-equal": "Equals {{value}} HRK",
diff --git a/src/translations/es.json b/src/translations/es.json
index 3dc48a5..e866ab5 100644
--- a/src/translations/es.json
+++ b/src/translations/es.json
@@ -40,6 +40,7 @@
          "sctl-indications" : "SCTL Indications",
          "secure-connection" : "Conexión segura",
          "status.error.title" : "Pago fallido",
+         "status.message.auto-cancellation" : "Completa la transacción con el método de pago seleccionado. Si decides no completarla en la página del método de pago, cierra esta ventana. No se realizará ningún cargo en tu cuenta.",
          "status.processing.description" : "Esperando la confirmación del pago...",
          "status.processing.title" : "Procesando el pago",
          "status.success.description" : "Hemos enviado el recibo a {{email}}",
diff --git a/src/translations/fr.json b/src/translations/fr.json
index df31208..84c9022 100644
--- a/src/translations/fr.json
+++ b/src/translations/fr.json
@@ -40,6 +40,7 @@
          "sctl-indications" : "SCTL Indications",
          "secure-connection" : "Connexion sécurisée",
          "status.error.title" : "Échec de paiement",
+         "status.message.auto-cancellation" : "Complétez la transaction avec le mode de paiement sélectionné. Si vous choisissez de ne pas terminer la transaction une fois sur la page du mode de paiement, fermez la fenêtre. Votre compte ne sera pas débité.",
          "status.processing.description" : "En attente de l'achèvement du paiement…",
          "status.processing.title" : "Traitement du paiement",
          "status.success.description" : "Nous avons envoyé votre reçu à {{email}}",
diff --git a/src/translations/he.json b/src/translations/he.json
index fb6c2a4..d1f6ce6 100644
--- a/src/translations/he.json
+++ b/src/translations/he.json
@@ -40,6 +40,7 @@
          "sctl-indications" : "SCTL Indications",
          "secure-connection" : "חיבור מאובטח",
          "status.error.title" : "התשלום נכשל",
+         "status.message.auto-cancellation" : "צריך להשלים את העסקה באמצעות אמצעי התשלום שבחרת. אם אינך רוצה להשלים את העסקה בדף של אמצעי התשלום, אפשר לסגור את החלון והחשבון שלך לא יחויב.",
          "status.processing.description" : "בהמתנה לסיום התשלום...",
          "status.processing.title" : "התשלום בעיבוד",
          "status.success.description" : "שלחנו את הקבלה אל {{email}}",
diff --git a/src/translations/it.json b/src/translations/it.json
index 8fd945a..45b7085 100644
--- a/src/translations/it.json
+++ b/src/translations/it.json
@@ -40,6 +40,7 @@
          "sctl-indications" : "SCTL Indications",
          "secure-connection" : "Connessione sicura",
          "status.error.title" : "Pagamento non riuscito",
+         "status.message.auto-cancellation" : "Completa la transazione con il metodo di pagamento selezionato. Se decidi di non completarlo sulla pagina del metodo di pagamento, chiudi questa finestra. Non verrà addebitato niente sul tuo conto.",
          "status.processing.description" : "In attesa che il pagamento venga completato…",
          "status.processing.title" : "Elaborazione pagamento",
          "status.success.description" : "Abbiamo inviato una ricevuta a {{email}}",
diff --git a/src/translations/ja.json b/src/translations/ja.json
index 2369d13..a75f2d8 100644
--- a/src/translations/ja.json
+++ b/src/translations/ja.json
@@ -40,6 +40,7 @@
          "sctl-indications" : "特商法取引に基づく表示",
          "secure-connection" : "安全な接続",
          "status.error.title" : "決済失敗",
+         "status.message.auto-cancellation" : "選択された決済方法で取引を完了してください。決済方法のページで完了しないことを選択した場合は、このウィンドウを閉じてください。アカウントには請求されません。",
          "status.processing.description" : "決済の完了待ち...",
          "status.processing.title" : "決済処理中",
          "status.success.description" : "領収書を{{email}}に送信しました",
diff --git a/src/translations/ko.json b/src/translations/ko.json
index a0c79ff..a94f5f1 100644
--- a/src/translations/ko.json
+++ b/src/translations/ko.json
@@ -40,6 +40,7 @@
          "sctl-indications" : "SCTL Indications",
          "secure-connection" : "보안 연결",
          "status.error.title" : "결제 실패함",
+         "status.message.auto-cancellation" : "선택한 결제 방식으로 거래를 완료합니다. 결제 방식 페이지에서 완료하지 않기로 선택한 경우 이 창을 닫습니다. 계정으로 요금이 청구되지 않습니다.",
          "status.processing.description" : "결제 완료 대기 중...",
          "status.processing.title" : "결제 처리 중",
          "status.success.description" : "{{email}}(으)로 영수증을 보내드렸습니다.",
diff --git a/src/translations/pl.json b/src/translations/pl.json
index 2645ab9..bfc5d6d 100644
--- a/src/translations/pl.json
+++ b/src/translations/pl.json
@@ -40,6 +40,7 @@
          "sctl-indications" : "SCTL Indications",
          "secure-connection" : "Bezpieczne połączenie",
          "status.error.title" : "Płatność nieudana",
+         "status.message.auto-cancellation" : "Dokończ transakcję przy użyciu wybranej metody płatności. Jeśli nie chcesz zrealizować transakcji na stronie metody płatności, zamknij to okno. Twoje konto nie zostanie obciążone.",
          "status.processing.description" : "Oczekiwanie na sfinalizowanie płatności...",
          "status.processing.title" : "Trwa przetwarzanie płatności",
          "status.success.description" : "Wysłaliśmy rachunek na adres {{email}}",
diff --git a/src/translations/pt.json b/src/translations/pt.json
index c79db3c..271c7f5 100644
--- a/src/translations/pt.json
+++ b/src/translations/pt.json
@@ -40,6 +40,7 @@
          "sctl-indications" : "SCTL Indications",
          "secure-connection" : "Conexão segura",
          "status.error.title" : "Falha no pagamento",
+         "status.message.auto-cancellation" : "Conclua a transação com o método de pagamento selecionado. Se você escolher não concluí-la na página de métodos de pagamento, feche esta janela. Sua conta não será cobrada.",
          "status.processing.description" : "Aguardando a conclusão do pagamento",
          "status.processing.title" : "Pagamento em processamento",
          "status.success.description" : "Enviamos seu recibo para {{email}}",
diff --git a/src/translations/ro.json b/src/translations/ro.json
index d459840..fac76ae 100644
--- a/src/translations/ro.json
+++ b/src/translations/ro.json
@@ -40,6 +40,7 @@
          "sctl-indications" : "Indicații SCTL",
          "secure-connection" : "Conexiune securizată",
          "status.error.title" : "Plată eșuată",
+         "status.message.auto-cancellation" : "Finalizați tranzacția cu metoda de plată selectată. Dacă alegeți să nu o finalizați pe pagina metodei de plată, închideți această fereastră. Contul dvs. nu va fi debitat.",
          "status.processing.description" : "Se aşteaptă încheierea plății...",
          "status.processing.title" : "Procesare plată",
          "status.success.description" : "Am trimis chitanța dumneavoastră la {{email}}",
diff --git a/src/translations/ru.json b/src/translations/ru.json
index 414b61d..df8e398 100644
--- a/src/translations/ru.json
+++ b/src/translations/ru.json
@@ -40,6 +40,7 @@
          "sctl-indications" : "SCTL Indications",
          "secure-connection" : "Безопасное соединение",
          "status.error.title" : "Платеж не прошел",
+         "status.message.auto-cancellation" : "Завершите транзакцию с выбранным способом оплаты. Если вы решите не завершать платеж на странице способа оплаты, закройте это окно. Деньги не спишутся.",
          "status.processing.description" : "Ожидаем завершения оплаты...",
          "status.processing.title" : "Обработка платежа",
          "status.success.description" : "Мы отправили чек на {{email}}",
diff --git a/src/translations/th.json b/src/translations/th.json
index 761de22..582c369 100644
--- a/src/translations/th.json
+++ b/src/translations/th.json
@@ -40,6 +40,7 @@
          "sctl-indications" : "SCTL Indications",
          "secure-connection" : "การเชื่อมต่อที่ปลอดภัย",
          "status.error.title" : "ชำระเงินไม่สำเร็จ",
+         "status.message.auto-cancellation" : "ทำธุรกรรมให้เสร็จสิ้นด้วยวิธีการชำระเงินที่เลือก หากคุณเลือกที่จะไม่ทำธุรกรรมในหน้าวิธีการชำระเงิน โปรดปิดหน้าต่างนี้ บัญชีของคุณจะไม่ถูกเรียกเก็บเงิน",
          "status.processing.description" : "กำลังรอการชำระเงินให้เสร็จสิ้น...",
          "status.processing.title" : "กำลังดำเนินการชำระเงิน",
          "status.success.description" : "เราส่งใบเสร็จรับเงินไปยัง {{email}} แล้ว",
diff --git a/src/translations/tr.json b/src/translations/tr.json
index cdbd2a9..2a61c0d 100644
--- a/src/translations/tr.json
+++ b/src/translations/tr.json
@@ -40,6 +40,7 @@
          "sctl-indications" : "SCTL Indications",
          "secure-connection" : "Güvenli bağlantı",
          "status.error.title" : "Ödeme alınamadı",
+         "status.message.auto-cancellation" : "Ödemeyi seçili ödeme yöntemiyle tamamlayın. Ödeme yönteminin sayfasında işlemi tamamlamamayı seçerseniz bu pencereyi kapatın. Bu durumda hesabınızdan ücret tahsil edilmez.",
          "status.processing.description" : "Ödeme işleminin tamamlanması bekleniyor...",
          "status.processing.title" : "Ödeme işlemi gerçekleştiriliyor",
          "status.success.description" : "Makbuzunuzu {{email}} adresine gönderdik",
diff --git a/src/translations/vi.json b/src/translations/vi.json
index e0c7fd9..b181a0b 100644
--- a/src/translations/vi.json
+++ b/src/translations/vi.json
@@ -40,6 +40,7 @@
          "sctl-indications" : "SCTL Indications",
          "secure-connection" : "Kết nối bảo mật",
          "status.error.title" : "Thanh toán thất bại",
+         "status.message.auto-cancellation" : "Hoàn tất giao dịch với phương thức thanh toán đã chọn. Nếu bạn không muốn hoàn tất giao dịch trên trang của phương thức thanh toán, hãy đóng cửa sổ này lại. Tài khoản của bạn sẽ không bị tính phí.",
          "status.processing.description" : "Đợi thanh toán hoàn tất...",
          "status.processing.title" : "Đang xử lý thanh toán",
          "status.success.description" : "Biên nhận đã được gửi đến {{email}}",
diff --git a/src/translations/zh_HANS.json b/src/translations/zh_HANS.json
index a4589e4..494f485 100644
--- a/src/translations/zh_HANS.json
+++ b/src/translations/zh_HANS.json
@@ -40,6 +40,7 @@
          "sctl-indications" : "SCTL Indications",
          "secure-connection" : "安全连接",
          "status.error.title" : "支付失败",
+         "status.message.auto-cancellation" : "使用所选支付方式完成交易。如选择不在支付方式页面完成交易，请关闭此窗口。您的帐户将不会被扣款。",
          "status.processing.description" : "正在等待支付完成...",
          "status.processing.title" : "正在处理付款",
          "status.success.description" : "您的收据已发送至{{email}}",
diff --git a/src/translations/zh_HANT.json b/src/translations/zh_HANT.json
index 3d3f7d1..a86d716 100644
--- a/src/translations/zh_HANT.json
+++ b/src/translations/zh_HANT.json
@@ -40,6 +40,7 @@
          "sctl-indications" : "特定商業交易法聲明",
          "secure-connection" : "安全連線",
          "status.error.title" : "付款失敗",
+         "status.message.auto-cancellation" : "請使用所選的付款方式完成交易。如果您選擇不在付款方式的頁面上完成交易，請關閉此視窗，您的帳戶將不會被扣費。",
          "status.processing.description" : "等待完成付款......",
          "status.processing.title" : "正在處理付款",
          "status.success.description" : "我們已將您的收據發送至 {{email}}",