feat(PAYMENTS-14328): add legal component

package.json

@@ -28,8 +28,8 @@
   "devDependencies": {
     "@commitlint/cli": "^17.6.5",
     "@commitlint/config-conventional": "^17.6.5",
-    "@types/jasmine": "^4.3.2",
     "@types/i18next": "^13.0.0",
+    "@types/jasmine": "^4.3.2",
     "@types/prettier": "^2.7.2",
     "@typescript-eslint/eslint-plugin": "^5.59.6",
     "@typescript-eslint/parser": "^5.59.6",
@@ -56,6 +56,7 @@
     "stylelint-config-prettier-scss": "^1.0.0",
     "stylelint-config-standard-scss": "^9.0.0",
     "stylelint-order": "^6.0.3",
+    "svgo-loader": "^4.0.0",
     "ts-loader": "^9.4.2",
     "typescript": "^5.0.4",
     "webpack": "^5.82.1",

src/assets/images.d.ts

@@ -0,0 +1 @@
+declare module '*.svg';

src/core/event-name.enum.ts

@@ -6,4 +6,7 @@ export const enum EventName {
   getSavedMethods = 'getSavedMethods',
   getUserBalance = 'getUserBalance',
   submitButton = 'submitButton',
+  getLegalComponentConfig = 'getLegalComponentConfig',
+  legalComponentPing = 'legalComponentPing',
+  legalComponentPong = 'legalComponentPong',
 }

src/core/guards/legal-config-event-message.guard.ts

@@ -0,0 +1,16 @@
+import { Message } from '../../core/message.interface';
+import { isEventMessage } from './event-message.guard';
+import { EventName } from '../../core/event-name.enum';
+import { LegalComponentConfig } from '../../features/headless-checkout/web-components/legal/legal-component.config.interface';
+
+export const isLegalConfigEventMessage = (
+  messageData: unknown
+): messageData is Message<{ config: LegalComponentConfig }> => {
+  if (isEventMessage(messageData)) {
+    return (
+      messageData.name === EventName.getLegalComponentConfig &&
+      (messageData.data as { [key: string]: unknown })?.config !== undefined
+    );
+  }
+  return false;
+};

src/core/web-components/web-component-tag-name.enum.ts

@@ -2,4 +2,5 @@ export enum WebComponentTagName {
   CardNumberComponent = 'psdk-card-number',
   SubmitButtonComponent = 'psdk-submit-button',
   PaymentMethodsComponent = 'psdk-payment-methods',
+  LegalComponent = 'psdk-legal',
 }

src/core/web-components/web-components.map.ts

@@ -2,11 +2,13 @@ import { CardNumberComponent } from '../../features/headless-checkout/web-compon
 import { SubmitButtonComponent } from '../../features/headless-checkout/web-components/submit-button/submit-button.component';
 import { WebComponentTagName } from './web-component-tag-name.enum';
 import { PaymentMethodsComponent } from '../../features/headless-checkout/web-components/payment-methods/payment-methods.component';
+import { LegalComponent } from '../../features/headless-checkout/web-components/legal/legal.component';
 
 export const webComponents: {
   [key in WebComponentTagName]: CustomElementConstructor;
 } = {
   [WebComponentTagName.CardNumberComponent]: CardNumberComponent,
   [WebComponentTagName.SubmitButtonComponent]: SubmitButtonComponent,
   [WebComponentTagName.PaymentMethodsComponent]: PaymentMethodsComponent,
+  [WebComponentTagName.LegalComponent]: LegalComponent,
 };

src/features/headless-checkout/post-messages-handlers/get-legal-component-config.handler.spec.ts

@@ -0,0 +1,22 @@
+import { EventName } from '../../../core/event-name.enum';
+import { Message } from '../../../core/message.interface';
+import { getLegalComponentConfigHandler } from './get-legal-component-config.handler';
+import { LegalComponentConfig } from '../web-components/legal/legal-component.config.interface';
+
+const mockMessage: Message<{ config: LegalComponentConfig }> = {
+  name: EventName.getLegalComponentConfig,
+  data: { config: {} as unknown as LegalComponentConfig },
+};
+describe('getLegalComponentConfigHandler', () => {
+  it('Should handle data', () => {
+    expect(getLegalComponentConfigHandler(mockMessage)).toEqual({
+      isHandled: true,
+      value: {} as unknown as LegalComponentConfig,
+    });
+  });
+  it('Should return null', () => {
+    expect(
+      getLegalComponentConfigHandler({ name: EventName.initPayment })
+    ).toBeNull();
+  });
+});

src/features/headless-checkout/post-messages-handlers/get-legal-component-config.handler.ts

@@ -0,0 +1,21 @@
+import { Handler } from '../../../core/post-messages-client/handler.type';
+import { Message } from '../../../core/message.interface';
+import { EventName } from '../../../core/event-name.enum';
+import { LegalComponentConfig } from '../web-components/legal/legal-component.config.interface';
+import { isLegalConfigEventMessage } from '../../../core/guards/legal-config-event-message.guard';
+
+export const getLegalComponentConfigHandler: Handler<LegalComponentConfig> = (
+  message: Message
+): { isHandled: boolean; value: LegalComponentConfig } | null => {
+  if (
+    isLegalConfigEventMessage(message) &&
+    message.name === EventName.getLegalComponentConfig
+  ) {
+    const config = message.data?.config;
+    return {
+      isHandled: true,
+      value: config!,
+    };
+  }
+  return null;
+};

src/features/headless-checkout/web-components/legal/handlers/legal-ping-handler.ts

@@ -0,0 +1,15 @@
+import { Handler } from '../../../../../core/post-messages-client/handler.type';
+import { Message } from '../../../../../core/message.interface';
+import { EventName } from '../../../../../core/event-name.enum';
+
+export const legalPingHandler: Handler<void> = (
+  message: Message
+): { isHandled: boolean } | null => {
+  console.log(message);
+  if (message.name === EventName.legalComponentPing) {
+    return {
+      isHandled: true,
+    };
+  }
+  return null;
+};

src/features/headless-checkout/web-components/legal/handlers/legal-pong.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 legalPongHandler: Handler<void> = (
+  message: Message
+): { isHandled: boolean } | null => {
+  if (message.name === EventName.legalComponentPong) {
+    return {
+      isHandled: true,
+    };
+  }
+  return null;
+};

src/features/headless-checkout/web-components/legal/legal-component.config.interface.ts

@@ -0,0 +1,10 @@
+export interface LegalComponentConfig {
+  isJapanUser: boolean;
+  refundPolicyUrl: string;
+  sctlPolicyUrl?: string;
+  secureConnection: {
+    secureConnectionUrl?: string;
+    isWhiteLabel?: boolean;
+  };
+  disclaimer?: string;
+}

src/features/headless-checkout/web-components/legal/legal.component.tempate.ts

@@ -0,0 +1,78 @@
+import { LegalComponentConfig } from './legal-component.config.interface';
+import { getSecureConnectionTemplate } from './secure-connection.component.template';
+import i18next from 'i18next';
+
+export const getLegalComponentTemplate = (
+  config: LegalComponentConfig
+): string => {
+  const {
+    isJapanUser,
+    refundPolicyUrl,
+    sctlPolicyUrl,
+    secureConnection,
+    disclaimer,
+  } = config;
+  return `
+    ${
+      disclaimer
+        ? `
+  <div class="disclaimer">
+    ${disclaimer}
+  </div>`
+        : ''
+    }
+   ${getSecureConnectionTemplate(secureConnection)}
+  <div class="legal-links">
+    <a
+      class="link link-legal"
+      href="https://xsolla.com/legal-agreements"
+      target="_blank"
+    >
+      ${i18next.t('legal')}
+    </a>
+
+    <div class="divider"></div>
+
+    <a
+      class="link link-legal"
+      href="https://xsolla.com/cookie"
+      target="_blank"
+    >
+      ${i18next.t('cookie-policy')}
+    </a>
+
+    <div class="divider"></div>
+
+    <a
+      class="link link-legal"
+      href="https://xsolla.com/privacypolicy"
+      target="_blank"
+    >
+      ${i18next.t('privacy-policy')}
+    </a>
+
+    <div class="divider"></div>
+
+    <a
+      class="link link-refund"
+      href="${refundPolicyUrl}"
+      target="_blank"
+    >
+      ${i18next.t('refund-policy')}
+    </a>
+    ${
+      isJapanUser && sctlPolicyUrl
+        ? `
+    <div class="divider"></div>
+
+    <a
+      class="link sctl-link"
+      href="${sctlPolicyUrl}"
+      target="_blank"
+    >
+      ${i18next.t('sctl-indications')}
+    </a>`
+        : ''
+    }
+  </div>`;
+};

src/features/headless-checkout/web-components/legal/legal.component.ts

@@ -0,0 +1,87 @@
+import { WebComponentAbstract } from '../../../../core/web-components/web-component.abstract';
+import { container } from 'tsyringe';
+import { PostMessagesClient } from '../../../../core/post-messages-client/post-messages-client';
+import { legalPingHandler } from './handlers/legal-ping-handler';
+import { EventName } from '../../../../core/event-name.enum';
+import { HeadlessCheckout } from '../../headless-checkout';
+import { legalPongHandler } from './handlers/legal-pong.handler';
+import { getLegalComponentTemplate } from './legal.component.tempate';
+import { Message } from '../../../../core/message.interface';
+import { HeadlessCheckoutSpy } from '../../../../core/headless-checkout-spy/headless-checkout-spy';
+import { getLegalComponentConfigHandler } from '../../post-messages-handlers/get-legal-component-config.handler';
+import { LegalComponentConfig } from './legal-component.config.interface';
+
+export class LegalComponent extends WebComponentAbstract {
+  private readonly postMessagesClient: PostMessagesClient;
+  private readonly headlessCheckout: HeadlessCheckout;
+  private readonly headlessCheckoutSpy: HeadlessCheckoutSpy;
+  private config?: LegalComponentConfig;
+  private subscription?: () => void;
+
+  public constructor() {
+    super();
+    this.headlessCheckoutSpy = container.resolve(HeadlessCheckoutSpy);
+    this.headlessCheckout = container.resolve(HeadlessCheckout);
+    this.postMessagesClient = container.resolve(PostMessagesClient);
+  }
+
+  protected connectedCallback(): void {
+    if (!this.headlessCheckoutSpy.appWasInit) {
+      this.headlessCheckoutSpy.listenAppInit(() => this.connectedCallback());
+      return;
+    }
+    void this.getLegalComponentConfig().then(this.configLoadedHandler);
+  }
+
+  protected readonly configLoadedHandler = (
+    config: LegalComponentConfig
+  ): void => {
+    this.config = config;
+
+    super.render();
+
+    if (this.config) {
+      this.listenPings();
+    }
+  };
+
+  protected listenPings(): void {
+    this.subscription = this.headlessCheckout.events.onCoreEvent(
+      EventName.legalComponentPing,
+      legalPingHandler,
+      this.pongCallback
+    );
+  }
+
+  protected disconnectedCallback(): void {
+    super.disconnectedCallback();
+    if (this.subscription) {
+      this.subscription();
+    }
+  }
+
+  protected async getLegalComponentConfig(): Promise<LegalComponentConfig> {
+    const msg: Message = {
+      name: EventName.getLegalComponentConfig,
+    };
+
+    return this.postMessagesClient.send<LegalComponentConfig>(
+      msg,
+      getLegalComponentConfigHandler
+    ) as Promise<LegalComponentConfig>;
+  }
+
+  protected getHtml(): string {
+    if (this.config) {
+      return getLegalComponentTemplate(this.config);
+    }
+    return '';
+  }
+
+  private readonly pongCallback = (): void => {
+    void this.headlessCheckout.events.send(
+      { name: EventName.legalComponentPong },
+      legalPongHandler
+    );
+  };
+}

src/features/headless-checkout/web-components/legal/secure-connection.component.template.ts

@@ -0,0 +1,36 @@
+import { LegalComponentConfig } from './legal-component.config.interface';
+import logo from '../../../../assets/icons/logo.svg';
+import i18next from 'i18next';
+export const getSecureConnectionTemplate = (
+  secureConnection?: LegalComponentConfig['secureConnection']
+): string => {
+  const isWhiteLabel = secureConnection?.isWhiteLabel;
+  const secureConnectionUrl = secureConnection?.secureConnectionUrl;
+  return `
+  <div class="info">
+  <div class="company">
+    ${
+      !isWhiteLabel && secureConnectionUrl
+        ? `
+
+    <a
+      class="logo"
+      [href]="secureConnectionUrl"
+      target="_blank"
+    >
+      <img src="${logo as string}">
+    </a>`
+        : `
+
+      <span class="logo">
+      <img src="${logo as string}">
+
+      </span>`
+    }
+    <div class="connection">
+    ${i18next.t('secure-connection')}
+    </div>
+  </div>
+</div>
+`;
+};

src/translations/en.json

@@ -1,7 +1,13 @@
 {
   "en": {
     "translation": {
-      "hello": "Hello world!"
+      "hello": "Hello world!",
+      "legal": "Legal",
+      "cookie-policy": "Cookie Policy",
+      "privacy-policy": "Privacy Policy",
+      "refund-policy": "Refund policy",
+      "sctl-indications": "SCTL Indications",
+      "secure-connection": "Secure connection"
     }
   }
 }

src/web-components.ts

@@ -1,5 +1,11 @@
 import { SubmitButtonComponent } from './features/headless-checkout/web-components/submit-button/submit-button.component';
 import { CardNumberComponent } from './features/headless-checkout/web-components/card-number/card-number.component';
 import { PaymentMethodsComponent } from './features/headless-checkout/web-components/payment-methods/payment-methods.component';
+import { LegalComponent } from './features/headless-checkout/web-components/legal/legal.component';
 
-export { SubmitButtonComponent, CardNumberComponent, PaymentMethodsComponent };
+export {
+  SubmitButtonComponent,
+  CardNumberComponent,
+  PaymentMethodsComponent,
+  LegalComponent,
+};