From 5f58ed5bdd9e7ac765d85c4b6c991c400c09e402 Mon Sep 17 00:00:00 2001 From: simbirromanmakarov Date: Wed, 20 Sep 2023 13:58:30 +0400 Subject: [PATCH] feat(PAYMENTS-15256): set secure component styles --- examples/secure-component-styles/index.html | 140 ++++++++++++++++++ package-lock.json | 15 +- package.json | 1 - src/core/event-name.enum.ts | 1 + .../headless-checkout.spec.ts | 6 + .../headless-checkout/headless-checkout.ts | 35 +++-- ...et-secure-component-styles.handler.spec.ts | 24 +++ .../set-secure-component-styles.handler.ts | 14 ++ .../payment-form-fields.service.spec.ts | 1 + 9 files changed, 211 insertions(+), 26 deletions(-) create mode 100644 examples/secure-component-styles/index.html create mode 100644 src/features/headless-checkout/post-messages-handlers/set-secure-component-styles.handler.spec.ts create mode 100644 src/features/headless-checkout/post-messages-handlers/set-secure-component-styles.handler.ts diff --git a/examples/secure-component-styles/index.html b/examples/secure-component-styles/index.html new file mode 100644 index 0000000..9e0cefc --- /dev/null +++ b/examples/secure-component-styles/index.html @@ -0,0 +1,140 @@ + + + + + + + Secure component styles + + + + + + + + + +

Secure component styles

+ +
+ + +
+ + + + + + + + diff --git a/package-lock.json b/package-lock.json index 7bec398..2692233 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@xsolla/pay-station-sdk", - "version": "0.1.0", + "version": "0.0.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@xsolla/pay-station-sdk", - "version": "0.1.0", + "version": "0.0.2", "license": "ISC", "dependencies": { "currency-format": "^1.0.13", @@ -16,7 +16,6 @@ "devDependencies": { "@commitlint/cli": "^17.7.1", "@commitlint/config-conventional": "^17.7.0", - "@types/i18next": "^13.0.0", "@types/jasmine": "^4.3.5", "@typescript-eslint/eslint-plugin": "^6.5.0", "@typescript-eslint/parser": "^6.5.0", @@ -1191,16 +1190,6 @@ "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==", "dev": true }, - "node_modules/@types/i18next": { - "version": "13.0.0", - "resolved": "https://registry.npmjs.org/@types/i18next/-/i18next-13.0.0.tgz", - "integrity": "sha512-gp/SIShAuf4WOqi8ey0nuI7qfWaVpMNCcs/xLygrh/QTQIXmlDC1E0TtVejweNW+7SGDY7g0lyxyKZIJuCKIJw==", - "deprecated": "This is a stub types definition. i18next provides its own type definitions, so you do not need this installed.", - "dev": true, - "dependencies": { - "i18next": "*" - } - }, "node_modules/@types/istanbul-lib-coverage": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz", diff --git a/package.json b/package.json index 3dc88b2..09969f9 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,6 @@ "devDependencies": { "@commitlint/cli": "^17.7.1", "@commitlint/config-conventional": "^17.7.0", - "@types/i18next": "^13.0.0", "@types/jasmine": "^4.3.5", "@typescript-eslint/eslint-plugin": "^6.5.0", "@typescript-eslint/parser": "^6.5.0", diff --git a/src/core/event-name.enum.ts b/src/core/event-name.enum.ts index d159f6f..3ab79d4 100644 --- a/src/core/event-name.enum.ts +++ b/src/core/event-name.enum.ts @@ -15,4 +15,5 @@ export const enum EventName { nextAction = 'nextAction', warning = 'warning', getTextComponentConfig = 'getTextComponentConfig', + setSecureComponentStyles = 'setSecureComponentStyles', } diff --git a/src/features/headless-checkout/headless-checkout.spec.ts b/src/features/headless-checkout/headless-checkout.spec.ts index 12744c4..1a0c1ce 100644 --- a/src/features/headless-checkout/headless-checkout.spec.ts +++ b/src/features/headless-checkout/headless-checkout.spec.ts @@ -125,6 +125,12 @@ describe('HeadlessCheckout', () => { expect(spy).toHaveBeenCalled(); }); + it('Should set secure component styles', async () => { + const spy = spyOn(postMessagesClient, 'send'); + await headlessCheckout.setSecureComponentStyles('styles'); + expect(spy).toHaveBeenCalled(); + }); + it('Should throw exception if empty token', async () => { try { await headlessCheckout.setToken(''); diff --git a/src/features/headless-checkout/headless-checkout.ts b/src/features/headless-checkout/headless-checkout.ts index fffc60e..a9d69e2 100644 --- a/src/features/headless-checkout/headless-checkout.ts +++ b/src/features/headless-checkout/headless-checkout.ts @@ -28,6 +28,7 @@ import { headlessCheckoutAppUrl } from './environment'; import { FinanceDetails } from '../../core/finance-details/finance-details.interface'; import { getFinanceDetailsHandler } from './post-messages-handlers/get-finance-details.handler'; import { FormStatus } from '../../core/status/form-status.enum'; +import { setSecureComponentStylesHandler } from './post-messages-handlers/set-secure-component-styles.handler'; @singleton() export class HeadlessCheckout { @@ -52,7 +53,7 @@ export class HeadlessCheckout { onCoreEvent: ( eventName: EventName, handler: Handler, - callback: (value?: T) => void + callback: (value?: T) => void, ): (() => void) => { return this.postMessagesClient.listen(eventName, handler, callback); }, @@ -81,7 +82,7 @@ export class HeadlessCheckout { } this.formSpy.formWasInit = true; this.formStatus = FormStatus.active; - }) + }), ) as Promise
; }, @@ -93,7 +94,7 @@ export class HeadlessCheckout { if (nextAction) { callbackFn(nextAction); } - } + }, ); }, @@ -124,7 +125,7 @@ export class HeadlessCheckout { private readonly postMessagesClient: PostMessagesClient, private readonly localizeService: LocalizeService, private readonly headlessCheckoutSpy: HeadlessCheckoutSpy, - private readonly formSpy: FormSpy + private readonly formSpy: FormSpy, ) {} public async init(environment: { @@ -145,7 +146,7 @@ export class HeadlessCheckout { getErrorHandler, (error) => { throw new Error(error); - } + }, ); } @@ -173,7 +174,17 @@ export class HeadlessCheckout { return this.postMessagesClient.send(msg, (message) => setTokenHandler(message, () => { this.headlessCheckoutSpy.appWasInit = true; - }) + }), + ); + } + + public async setSecureComponentStyles(styles: string): Promise { + return this.postMessagesClient.send( + { + name: EventName.setSecureComponentStyles, + data: styles, + }, + setSecureComponentStylesHandler, ); } @@ -188,7 +199,7 @@ export class HeadlessCheckout { return this.postMessagesClient.send( msg, - getFinanceDetailsHandler + getFinanceDetailsHandler, ) as Promise; } @@ -208,7 +219,7 @@ export class HeadlessCheckout { return this.postMessagesClient.send( msg, - getRegularMethodsHandler + getRegularMethodsHandler, ) as Promise; } @@ -228,7 +239,7 @@ export class HeadlessCheckout { return this.postMessagesClient.send( msg, - getQuickMethodsHandler + getQuickMethodsHandler, ) as Promise; } @@ -239,7 +250,7 @@ export class HeadlessCheckout { return this.postMessagesClient.send( msg, - getSavedMethodsHandler + getSavedMethodsHandler, ) as Promise; } @@ -250,7 +261,7 @@ export class HeadlessCheckout { return this.postMessagesClient.send( msg, - getUserBalanceHandler + getUserBalanceHandler, ) as Promise; } @@ -263,7 +274,7 @@ export class HeadlessCheckout { }; return this.postMessagesClient.send(msg, (message) => - getPaymentStatusHandler(message) + getPaymentStatusHandler(message), ) as Promise; } diff --git a/src/features/headless-checkout/post-messages-handlers/set-secure-component-styles.handler.spec.ts b/src/features/headless-checkout/post-messages-handlers/set-secure-component-styles.handler.spec.ts new file mode 100644 index 0000000..1f07735 --- /dev/null +++ b/src/features/headless-checkout/post-messages-handlers/set-secure-component-styles.handler.spec.ts @@ -0,0 +1,24 @@ +import { EventName } from '../../../core/event-name.enum'; +import { Message } from '../../../core/message.interface'; +import { PaymentMethod } from '../../../core/payment-method.interface'; +import { setSecureComponentStylesHandler } from './set-secure-component-styles.handler'; + +const mockMessage: Message<{ methods: PaymentMethod[] }> = { + name: EventName.setSecureComponentStyles, +}; + +describe('setSecureComponentStylesHandler', () => { + it('Should handle data', () => { + expect(setSecureComponentStylesHandler(mockMessage)).toEqual({ + isHandled: true, + }); + }); + + it('Should return null', () => { + expect( + setSecureComponentStylesHandler({ + name: EventName.getPaymentMethodsList, + }), + ).toBeNull(); + }); +}); diff --git a/src/features/headless-checkout/post-messages-handlers/set-secure-component-styles.handler.ts b/src/features/headless-checkout/post-messages-handlers/set-secure-component-styles.handler.ts new file mode 100644 index 0000000..92ebe1c --- /dev/null +++ b/src/features/headless-checkout/post-messages-handlers/set-secure-component-styles.handler.ts @@ -0,0 +1,14 @@ +import { Handler } from '../../../core/post-messages-client/handler.type'; +import { Message } from '../../../core/message.interface'; +import { EventName } from '../../../core/event-name.enum'; + +export const setSecureComponentStylesHandler: Handler = ( + message: Message, +): { isHandled: boolean } | null => { + if (message.name === EventName.setSecureComponentStyles) { + return { + isHandled: true, + }; + } + return null; +}; diff --git a/src/features/headless-checkout/web-components/payment-form/payment-form-fields.service.spec.ts b/src/features/headless-checkout/web-components/payment-form/payment-form-fields.service.spec.ts index 1740803..09c82be 100644 --- a/src/features/headless-checkout/web-components/payment-form/payment-form-fields.service.spec.ts +++ b/src/features/headless-checkout/web-components/payment-form/payment-form-fields.service.spec.ts @@ -23,6 +23,7 @@ describe('PaymentFormFieldsManager', () => { beforeEach(() => { windowService = window; + container.clearInstances(); container.clearInstances();