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

xsolla · Mar 28, 2024 · d0bf879 · d0bf879
1 parent 8379984
commit d0bf879
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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', () => {

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
@@ -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.autoCancellation',
+      )}</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/...less-checkout/web-components/status/template-config/get-payment-status-config.function.ts b/...less-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/...heckout/web-components/status/template-config/get-saving-method-status-config.function.ts b/...heckout/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/...dless-checkout/web-components/status/template-config/status.component.config.interface.ts b/...dless-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
@@ -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
@@ -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.autoCancellation": "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",