diff --git a/src/core/actions/next-action-type.enum.ts b/src/core/actions/next-action-type.enum.ts index b5ca566..2bd0c73 100644 --- a/src/core/actions/next-action-type.enum.ts +++ b/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', } diff --git a/src/core/cash-payment-data.interface.ts b/src/core/cash-payment-data.interface.ts index 99fff40..f63ab9b 100644 --- a/src/core/cash-payment-data.interface.ts +++ b/src/core/cash-payment-data.interface.ts @@ -6,4 +6,5 @@ export interface CashPaymentData { title: string; projectName: string; printUrl: string; + instruction?: string; } diff --git a/src/features/headless-checkout/web-components/cash-payment-instruction/cash-payment-instruction.component.scss b/src/features/headless-checkout/web-components/cash-payment-instruction/cash-payment-instruction.component.scss new file mode 100644 index 0000000..83611c4 --- /dev/null +++ b/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; + } + } +} diff --git a/src/features/headless-checkout/web-components/cash-payment-instruction/cash-payment-instruction.component.spec.ts b/src/features/headless-checkout/web-components/cash-payment-instruction/cash-payment-instruction.component.spec.ts index 76c10e8..4754a1e 100644 --- a/src/features/headless-checkout/web-components/cash-payment-instruction/cash-payment-instruction.component.spec.ts +++ b/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'); + }); }); diff --git a/src/features/headless-checkout/web-components/cash-payment-instruction/cash-payment-instruction.component.ts b/src/features/headless-checkout/web-components/cash-payment-instruction/cash-payment-instruction.component.ts index f24f4b7..a42ee1a 100644 --- a/src/features/headless-checkout/web-components/cash-payment-instruction/cash-payment-instruction.component.ts +++ b/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}>`; diff --git a/src/features/headless-checkout/web-components/cash-payment-instruction/cash-payment-instruction.template.ts b/src/features/headless-checkout/web-components/cash-payment-instruction/cash-payment-instruction.template.ts new file mode 100644 index 0000000..2111907 --- /dev/null +++ b/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 ` +
+ ${i18next.t('cash-payment-instruction.description')} +
++ ${instruction ?? ''} +
+