Merge pull request #97 from xsolla/PAYMENTS-19010

feat(PAYMENTS-19010): add cash-payment-instruction

src/core/actions/next-action-type.enum.ts

@@ -8,4 +8,6 @@ export enum NextActionType {
   specialButton = 'special_button',
   showQrCode = 'show_qr_code',
   showMobilePaymentScreen = 'show_mobile_payment_screen',
+  hideForm = 'hide_form',
+  showCashPaymentInstruction = 'show_cash_payment_instruction',
 }

src/core/cash-payment-data.interface.ts

@@ -6,4 +6,5 @@ export interface CashPaymentData {
   title: string;
   projectName: string;
   printUrl: string;
+  instruction?: string;
 }

src/features/headless-checkout/web-components/cash-payment-instruction/cash-payment-instruction.component.scss

@@ -0,0 +1,29 @@
+@use 'src/styles/mixins/typo.mixin' as typo;
+@use 'src/styles/mixins/animation.mixin' as animation;
+@use 'src/styles/mixins/buttons.mixin' as buttons;
+
+.cash-payment-instruction {
+  @include typo.psdk-typo;
+
+  .payment-title {
+    @include typo.psdk-title2;
+
+    margin: 0 0 4px;
+    padding: 0;
+  }
+
+  .payment-description {
+    margin: 0 0 20px;
+    padding: 0;
+  }
+
+  .payment-instruction {
+    margin: 0;
+    padding: 0;
+
+    a {
+      color: var(--psdk-checkbox-checked-bg);
+      text-decoration: none;
+    }
+  }
+}

src/features/headless-checkout/web-components/cash-payment-instruction/cash-payment-instruction.component.spec.ts

@@ -84,4 +84,19 @@ describe('CashPaymentInstructionComponent', () => {
       )!.innerHTML,
     ).toContain(WebComponentTagName.XsollaNumberComponent);
   });
+
+  it('Should draw cash-payment-instruction', async () => {
+    spyOnProperty(formSpy, 'formWasInit').and.returnValue(true);
+    spyOn(postMessagesClient, 'send').and.returnValue(
+      Promise.resolve({ isCashPaymentMethod: true } as CashPaymentData),
+    );
+    createComponent();
+    const delay = 100;
+    await timeout(delay);
+    expect(
+      document.querySelector(
+        WebComponentTagName.CashPaymentInstructionComponent,
+      )!.innerHTML,
+    ).toContain('cash-payment-instruction');
+  });
 });

src/features/headless-checkout/web-components/cash-payment-instruction/cash-payment-instruction.component.ts

@@ -8,6 +8,8 @@ import { CashPaymentData } from '../../../../core/cash-payment-data.interface';
 import { CashPaymentType } from './cash-payment.type';
 import { WebComponentAbstract } from '../../../../core/web-components/web-component.abstract';
 import { WebComponentTagName } from '../../../../core/web-components/web-component-tag-name.enum';
+import { getCashPaymentInstructionTemplate } from './cash-payment-instruction.template';
+import './cash-payment-instruction.component.scss';
 
 export class CashPaymentInstructionComponent extends WebComponentAbstract {
   private readonly formSpy: FormSpy;
@@ -30,7 +32,10 @@ export class CashPaymentInstructionComponent extends WebComponentAbstract {
 
   protected getHtml(): string {
     if (this.cashPaymentData?.isCashPaymentMethod) {
-      return '';
+      return getCashPaymentInstructionTemplate(
+        this.cashPaymentData.title,
+        this.cashPaymentData.instruction,
+      );
     }
 
     return `<${WebComponentTagName.XsollaNumberComponent}></${WebComponentTagName.XsollaNumberComponent}>`;

src/features/headless-checkout/web-components/cash-payment-instruction/cash-payment-instruction.template.ts

@@ -0,0 +1,22 @@
+import i18next from 'i18next';
+
+export const getCashPaymentInstructionTemplate = (
+  paymentMethodName: string,
+  instruction?: string,
+): string => {
+  return `
+<div class='cash-payment-instruction'>
+    <h2 class='payment-title'>
+      ${i18next.t('cash-payment-instruction.title', { paymentMethodName })}
+      </h2>
+    <p class='payment-description'>
+      ${i18next.t('cash-payment-instruction.description')}
+    </p>
+    <h3 class="payment-title">${i18next.t(
+      'cash-payment-instruction.how-to',
+    )}</h3>
+    <p class='payment-instruction'>
+      ${instruction ?? ''}
+    </p>
+</div>`;
+};

src/features/headless-checkout/web-components/xsolla-number/xsolla-number.component.ts

@@ -138,7 +138,9 @@ export class XsollaNumberComponent extends SecureComponentAbstract {
     isLoading: boolean,
   ): void {
     this.isLoading = isLoading;
-    const button = this.querySelector(`#send-${channelType}`);
+    const button = this.querySelector(
+      `#send-${channelType === 'phone' ? 'sms' : channelType}`,
+    );
     if (!button) {
       return;
     }

src/index.ts

@@ -8,3 +8,4 @@ export { EventName } from './core/event-name.enum';
 export { NextActionType } from './core/actions/next-action-type.enum';
 export { FinanceDetails } from './core/finance-details/finance-details.interface';
 export { InitialOptions } from './features/headless-checkout/initial-options.interface';
+export { StatusEnum } from './core/status/status.enum';

src/translations/ar.json

@@ -3,6 +3,9 @@
       "translation" : {
          "apple-pay.errors.device-is-not-capable" : "Apple Pay متاح فقط في متصفح Safari مع تثبيت OS 10.12 Sierra أو IOS 10. يرجى تغيير المتصفح أو تحديد خيار آخر للسداد.",
          "apple-pay.errors.payment" : "لم نتمكن من معالجة سدادك. تأكد من تسجيل الدخول إلى Apple على جهازك وقم بإعداد Apple Pay قبل المحاولة مرة أخرى. تستغرق التغييرات في إعدادات Apple دقيقتين للمزامنة.",
+         "cash-payment-instruction.description" : "لقد أصدرنا فاتورة الشراء الخاصة بك. بمجرد قيامك بالدفع، سنرسل إليك الإيصال عبر البريد الإلكتروني.",
+         "cash-payment-instruction.how-to" : "كيفية الدفع",
+         "cash-payment-instruction.title" : "السداد عن طريق {{paymentMethodName}}",
          "cookie-policy" : "سياسة ملفات تعريف الارتباط",
          "disclaimer-with-cookies" : "أنت تؤكد من خلال المتابعة أنك شخص بالغ وفقًا لقوانين ولايتك وتوافق على الالتزام بـ <a href={{xsolla_terms_link}} target=\"_blank\">اتفاقية ترخيص المستخدم النهائي الخاصة بإيكسولا<\/a>.<br>تجمع إيكسولا بشكل مستقل ملفات تعريف الارتباط الأساسية على هذه الصفحة وكذلك أثناء معالجة عملية الشراء التي تغطيها <a href={{xsolla_privacy_link}} target=\"_blank\">سياسة ملفات تعريف الارتباط الخاصة بإيكسولا <\/a>.<br>يُرجى ملاحظة أنه فيما يخص عملية الشراء هذه، فإن إيكسولا هي تاجر معتمد للسجلات ومراقب للبيانات التي ترسلها على هذه الصفحة.<br>إذا كانت لديك أية أسئلة، يرجى التواصل مع <a href={{xsolla_help_link}} target=\"_blank\">دعم Xsolla Gamer<\/a> .",
          "error.title.default" : "تعذرت معالجة السداد",
@@ -44,7 +47,24 @@
          "status.processing.description" : "في انتظار أن يتم السداد...",
          "status.processing.title" : "جارٍ تنفيذ السداد",
          "status.success.description" : "أرسلنا إيصالك إلى {{email}}",
-         "status.success.title" : "نجحت عملية السداد"
+         "status.success.title" : "نجحت عملية السداد",
+         "xsolla-number.info.user-account" : "حساب المستخدم",
+         "xsolla-number.info.xsolla-number" : "رقم إيكسولا",
+         "xsolla-number.instruction.how-to" : "كيفية الدفع",
+         "xsolla-number.instruction.notification" : "قد يتقاضى المالك النهائي عمولة إضافية",
+         "xsolla-number.instruction.paragraph-four" : "4. أدخل النقود لإتمام المعاملة.",
+         "xsolla-number.instruction.paragraph-one" : "1. اذهب إلى موقع السداد{{paymentMethodName}}.",
+         "xsolla-number.instruction.paragraph-three" : "3. أدخل اسم حساب المستخدم الخاص بك أو رقم إيكسولا.",
+         "xsolla-number.instruction.paragraph-two" : "2. اضغط على {{projectName}} أو زر إيكسولا الموجود في كشك الدفع.",
+         "xsolla-number.notification.failed" : "تعذّر إرسال تعليمات الدفع. حاول مرة أخرى لاحقًا",
+         "xsolla-number.notification.success.email" : "أرسلنا تعليمات الدفع إلى بريدك الإلكتروني. إذا لم تستلمها، فحاول مرة أخرى",
+         "xsolla-number.notification.success.sms" : "لقد أرسلنا رقم إيكسولا الخاص بك إلى رقم هاتفك. إذا لم تكن قد استلمته، فحاول مرة أخرى",
+         "xsolla-number.payment.description" : "نحتاج إلى التحقق من حسابك لمعالجة سدادك.",
+         "xsolla-number.payment.title" : "السداد عن طريق {{paymentMethodName}}",
+         "xsolla-number.send-panel.email" : "البريد الإلكتروني",
+         "xsolla-number.send-panel.get-xsolla-number" : "احصل على رقم إيكسولا",
+         "xsolla-number.send-panel.print" : "بيانات الطباعة",
+         "xsolla-number.send-panel.send" : "إرسال"
       }
    }
 }

src/translations/bg.json

@@ -3,6 +3,9 @@
       "translation" : {
          "apple-pay.errors.device-is-not-capable" : "Услугата Apple Pay е достъпна само в браузър Safari с инсталирана OS 10.12 Sierra или IOS 10. Моля, сменете браузъра си или изберете друг метод на плащане.",
          "apple-pay.errors.payment" : "Плащането Ви не може да бъде обработено. Уверете се, че сте вписани в Apple на Вашето устройство и настройте Apple Pay, преди да опитате отново. Синхронизирането на промените в настройките на Apple отнема няколко минути.",
+         "cash-payment-instruction.description" : "Издадохме фактура за вашата покупка. След като платите, ще ви изпратим разписката по имейл.",
+         "cash-payment-instruction.how-to" : "Как да платя",
+         "cash-payment-instruction.title" : "Плащане с {{paymentMethodName}}",
          "cookie-policy" : "Политика за бисквитките",
          "disclaimer-with-cookies" : "С продължаването Вие потвърждавате, че сте на пълнолетна възраст съгласно законите във Вашата държава и се съгласявате да бъдете обвързан(а) от <a href={{xsolla_terms_link}} target=\"_blank\">ЛСКП на Xsolla<\/a>.<br>Xsolla самостоятелно събира основни бисквитки на тази страница и по-нататък, докато обработва покупката, която е обхваната от <a href={{xsolla_privacy_link}} target=\"_blank\">Правилата за бисквитки на Xsolla<\/a>.<br>Имайте предвид, че за тази покупка Xsolla е упълномощеният регистриран търговец и администратор на данните, които подавате на тази страница.<br>Ако имате въпроси, свържете се с <a href={{xsolla_help_link}} target=\"_blank\">отдел „Геймърска поддръжка“ на Xsolla<\/a>.",
          "error.title.default" : "Неуспешно обработване на плащането",
@@ -44,7 +47,24 @@
          "status.processing.description" : "Изчаква завършване на плащане...",
          "status.processing.title" : "Плащането се обработва",
          "status.success.description" : "Изпратихме касовата Ви бележка на {{email}}",
-         "status.success.title" : "Успешно плащане"
+         "status.success.title" : "Успешно плащане",
+         "xsolla-number.info.user-account" : "Потребителски профил",
+         "xsolla-number.info.xsolla-number" : "Номер на Ексола",
+         "xsolla-number.instruction.how-to" : "Как да платя",
+         "xsolla-number.instruction.notification" : "Терминалният собственик може да таксува допълнителна комисиона",
+         "xsolla-number.instruction.paragraph-four" : "4. Внесете средства, за да завършите трансакцията.",
+         "xsolla-number.instruction.paragraph-one" : "1. Отидете в център за плащане на {{paymentMethodName}}.",
+         "xsolla-number.instruction.paragraph-three" : "3. Въведете потребителското име на профила си или номер на Ексола.",
+         "xsolla-number.instruction.paragraph-two" : "2. Натиснете бутона {{projectName}} или „Ексола“ на терминала за плащане.",
+         "xsolla-number.notification.failed" : "Неуспешно изпращане на платежни инструкции. Опитайте отново по-късно.",
+         "xsolla-number.notification.success.email" : "Изпратихме платежни инструкции на Вашия имейл. Ако не сте ги получили, опитайте отново.",
+         "xsolla-number.notification.success.sms" : "Изпратихме вашия Ексола номер на телефона Ви. Ако не сте го получили, опитайте отново.",
+         "xsolla-number.payment.description" : "За да обработим плащането Ви, трябва да потвърдим профила Ви.",
+         "xsolla-number.payment.title" : "Плащане с {{paymentMethodName}}",
+         "xsolla-number.send-panel.email" : "Имейл",
+         "xsolla-number.send-panel.get-xsolla-number" : "Получаване на номер на Ексола",
+         "xsolla-number.send-panel.print" : "Печат на информацията",
+         "xsolla-number.send-panel.send" : "Изпращане"
       }
    }
 }

src/translations/cs.json

@@ -3,6 +3,9 @@
       "translation" : {
          "apple-pay.errors.device-is-not-capable" : "Apple Pay je k dispozici pouze v prohlížeči Safari s nainstalovaným macOS 10.12 Sierra nebo iOS 10. Změňte prosím prohlížeč nebo vyberte jinou možnost platby.",
          "apple-pay.errors.payment" : "Platbu nelze zpracovat. Než to zkusíte znovu, ujistěte se, že jste na svém zařízení přihlášeni k účtu Apple a máte nastaveno Apple Pay. Synchronizace změn v nastavení Apple trvá několik minut.",
+         "cash-payment-instruction.description" : "Vystavili jsme účtenku za Váš nákup. Jakmile zaplatíte, zašleme Vám e-mailem stvrzenku.",
+         "cash-payment-instruction.how-to" : "Jak platit",
+         "cash-payment-instruction.title" : "Platba prostřednictvím {{paymentMethodName}}",
          "cookie-policy" : "Zásady používání cookies",
          "disclaimer-with-cookies" : "Pokračováním potvrzujete, že jste dospělí podle zákonů Vašeho státu a souhlasíte s tím, že budete vázáni <a href={{xsolla_terms_link}} target=\"_blank\">smlouvou EULA společnosti Xsolla<\/a>.<br>Společnost Xsolla na této stránce a dále při zpracování nákupu nezávisle shromažďuje základní soubory cookies, na které se vztahují <a href={{xsolla_privacy_link}} target=\"_blank\">Zásady používání cookies společnosti Xsolla<\/a>.<br>Upozorňujeme, že pro tento nákup je společnost Xsolla autorizovaným obchodníkem a správcem údajů, které na této stránce odešlete.<br>V případě jakýchkoli dotazů se obraťte na <a href={{xsolla_help_link}} target=\"_blank\">Podporu hráčů společnosti Xsolla<\/a>.",
          "error.title.default" : "Platbu nelze zpracovat",
@@ -44,7 +47,24 @@
          "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}}",
-         "status.success.title" : "Platba byla úspěšná"
+         "status.success.title" : "Platba byla úspěšná",
+         "xsolla-number.info.user-account" : "Uživatelský účet",
+         "xsolla-number.info.xsolla-number" : "Číslo Xsolla",
+         "xsolla-number.instruction.how-to" : "Jak platit",
+         "xsolla-number.instruction.notification" : "Majitel terminálu si může účtovat dodatečný poplatek",
+         "xsolla-number.instruction.paragraph-four" : "4. Pro dokončení transakce vložte hotovost.",
+         "xsolla-number.instruction.paragraph-one" : "1. Jděte na platební místo {{paymentMethodName}}.",
+         "xsolla-number.instruction.paragraph-three" : "3. Zadejte název svého uživatelského účtu nebo číslo Xsolla.",
+         "xsolla-number.instruction.paragraph-two" : "2. Stiskněte tlačítko {{projectName}} nebo Xsolla na platebním kiosku.",
+         "xsolla-number.notification.failed" : "Pokyny k platbě nelze odeslat. Zkuste to znovu později",
+         "xsolla-number.notification.success.email" : "Pokyny k platbě jsme Vám zaslali na e-mail. Pokud jste je neobdrželi, zkuste to znovu",
+         "xsolla-number.notification.success.sms" : "Vaše číslo Xsolla jsme Vám zaslali na telefonní číslo. Pokud jste ho neobdrželi, zkuste to znovu",
+         "xsolla-number.payment.description" : "Abychom mohli platbu zpracovat, musíme Váš účet ověřit",
+         "xsolla-number.payment.title" : "Platba prostřednictvím {{paymentMethodName}}",
+         "xsolla-number.send-panel.email" : "E-mail",
+         "xsolla-number.send-panel.get-xsolla-number" : "Obdržet číslo Xsolla",
+         "xsolla-number.send-panel.print" : "Vytisknout informace",
+         "xsolla-number.send-panel.send" : "Odeslat"
       }
    }
 }