feat(PAYMENTS-17877): added message about wrong userback

src/core/status/status.interface.ts

@@ -59,4 +59,5 @@ export interface Status {
     };
   };
   isSavePaymentAccount?: boolean;
+  autoCancellation: boolean;
 }

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);
+  }
 }

src/features/headless-checkout/web-components/status/status.component.template.spec.ts

@@ -8,13 +8,15 @@ const mockStatusConfig: StatusComponentConfig = {
   description: '',
   showDescription: false,
   status: StatusEnum.done,
+  autoCancellation: true,
 };
 const mockStatusConfigWithDescription: StatusComponentConfig = {
   title: 'title',
   image: 'mock-image',
   description: 'description',
   showDescription: true,
   status: StatusEnum.done,
+  autoCancellation: true,
 };
 
 describe('getStatusComponentTemplate', () => {

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>

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,
     };
   }
 

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,
     };
   }
 

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;
 }

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';

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}}",

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}}",

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}}",

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",

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",

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}}",

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}}",

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}}",

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}}",

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}}に送信しました",

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}}(으)로 영수증을 보내드렸습니다.",

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}}",

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}}",

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}}",

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}}",

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}} แล้ว",

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",

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}}",

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}}",

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}}",