From 857c9d4825b8a073460e1dcb270a849dc5a7582a 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/en.json                      |  1 +
 9 files changed, 37 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 5be890d..1bff927 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: '',
       showDescription: false,
       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: '',
       showDescription: false,
       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/en.json b/src/translations/en.json
index 11c29df..f758d2e 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 this payment 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",