feat: added select component

src/core/event-name.enum.ts

@@ -18,4 +18,6 @@ export const enum EventName {
   setSecureComponentStyles = 'setSecureComponentStyles',
   formFieldsStatusChanged = 'formFieldsStatusChanged',
   updateCreditCardType = 'updateCreditCardType',
+  publicControlChangeState = 'publicControlChangeState',
+  publicControlOnValueChanges = 'publicControlOnValueChanges',
 }

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

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

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

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

src/core/post-messages-client/post-messages-client.ts

@@ -49,7 +49,7 @@ export class PostMessagesClient {
   public listen<T>(
     eventName: EventName,
     handler: Handler<T>,
-    callback: (value?: T) => void
+    callback: (value?: T) => void,
   ): () => void {
     const handlerWrapper = (message: MessageEvent): void => {
       if (this.isSameOrigin(message.origin)) {
@@ -68,7 +68,7 @@ export class PostMessagesClient {
   private sendMessage(message: Message): void {
     this.recipient.contentWindow?.postMessage(
       JSON.stringify(message),
-      this.recipientUrl
+      this.recipientUrl,
     );
   }
 

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

@@ -10,4 +10,5 @@ export enum WebComponentTagName {
   PhoneComponent = 'psdk-phone',
   CardNumberComponent = 'psdk-card-number',
   ThreeDsComponent = 'psdk-3ds',
+  SelectComponent = 'psdk-select',
 }

src/core/web-components/web-component.abstract.ts

@@ -1,6 +1,6 @@
 export abstract class WebComponentAbstract extends HTMLElement {
   protected eventListeners: Array<{
-    element: HTMLElement;
+    element: Element;
     eventType: string;
     listener(event: Event): void;
   }> = [];
@@ -16,7 +16,7 @@ export abstract class WebComponentAbstract extends HTMLElement {
   }
 
   protected addEventListenerToElement(
-    element: HTMLElement,
+    element: Element,
     eventType: string,
     listener: (event: Event) => void,
   ): void {

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

@@ -10,6 +10,7 @@ import { PaymentFormComponent } from '../../features/headless-checkout/web-compo
 import { CardNumberComponent } from '../../features/headless-checkout/web-components/card-number/card-number.component';
 import { ThreeDsComponent } from '../../features/headless-checkout/web-components/three-ds/three-ds.component';
 import { PhoneComponent } from '../../features/headless-checkout/web-components/phone-component/phone.component';
+import { SelectComponent } from '../../features/headless-checkout/web-components/select/select.component';
 
 export const webComponents: {
   [key in WebComponentTagName]: CustomElementConstructor;
@@ -25,4 +26,5 @@ export const webComponents: {
   [WebComponentTagName.CardNumberComponent]: CardNumberComponent,
   [WebComponentTagName.ThreeDsComponent]: ThreeDsComponent,
   [WebComponentTagName.PhoneComponent]: PhoneComponent,
+  [WebComponentTagName.SelectComponent]: SelectComponent,
 };

src/features/headless-checkout/web-components/base-control/base-control.abstract.ts

@@ -0,0 +1,140 @@
+import { container } from 'tsyringe';
+import { WebComponentAbstract } from '../../../../core/web-components/web-component.abstract';
+import { PostMessagesClient } from '../../../../core/post-messages-client/post-messages-client';
+import { EventName } from '../../../../core/event-name.enum';
+import { Message } from '../../../../core/message.interface';
+import { ValidationErrors } from '../../../../core/form/validation-errors.interface';
+import { HeadlessCheckout } from '../../headless-checkout';
+import { ControlComponentConfig } from '../control-component-config.interface';
+import { getControlComponentConfigHandler } from '../get-control-component-config.handler';
+import {
+  publicControlChangeState,
+  publicControlOnValueChanges,
+} from './element.handlers';
+import { ElementEventName } from './element-events.enum';
+
+export abstract class BaseControl extends WebComponentAbstract {
+  protected postMessagesClient: PostMessagesClient;
+  protected headlessCheckout: HeadlessCheckout;
+  protected window: Window;
+
+  protected controlName!: string;
+  protected config: ControlComponentConfig | null = null;
+  protected isListeningFieldStatusChange = false;
+
+  protected constructor() {
+    super();
+
+    this.postMessagesClient = container.resolve(PostMessagesClient);
+    this.headlessCheckout = container.resolve(HeadlessCheckout);
+    this.window = container.resolve(Window);
+  }
+
+  protected async getComponentConfig(
+    inputName: string,
+  ): Promise<ControlComponentConfig> {
+    const msg: Message<{ inputName: string }> = {
+      name: EventName.getControlComponentConfig,
+      data: {
+        inputName,
+      },
+    };
+
+    return this.postMessagesClient.send<ControlComponentConfig>(
+      msg,
+      (message) => {
+        return getControlComponentConfigHandler(message, (controlName) => {
+          return msg.data?.inputName === controlName;
+        });
+      },
+    ) as Promise<ControlComponentConfig>;
+  }
+
+  protected notifyOnValueChanges(value: unknown): void {
+    void this.postMessagesClient.send(
+      {
+        name: EventName.publicControlOnValueChanges,
+        data: {
+          fieldName: this.controlName,
+          value,
+        },
+      },
+      publicControlOnValueChanges,
+    );
+  }
+
+  protected notifyOnFocusEvent(): void {
+    void this.postMessagesClient.send(
+      {
+        name: EventName.publicControlChangeState,
+        data: {
+          fieldName: this.controlName,
+          event: ElementEventName.focus,
+        },
+      },
+      publicControlChangeState,
+    );
+  }
+
+  protected notifyOnBlurEvent(): void {
+    void this.postMessagesClient.send(
+      {
+        name: EventName.publicControlChangeState,
+        data: {
+          fieldName: this.controlName,
+          event: ElementEventName.blur,
+        },
+      },
+      publicControlChangeState,
+    );
+  }
+
+  protected listenFieldStatusChange(): void {
+    if (this.isListeningFieldStatusChange) {
+      return;
+    }
+
+    this.isListeningFieldStatusChange = true;
+    this.headlessCheckout.form.onFieldsStatusChange((fieldsStatus) => {
+      const fieldStatus = fieldsStatus[this.controlName];
+
+      if (!this.config || !fieldStatus) {
+        return;
+      }
+
+      this.config.error = this.getErrorFromFieldStatus(fieldStatus.errors);
+      this.updateError(fieldStatus.isFocused);
+    });
+  }
+
+  protected getErrorFromFieldStatus(
+    errors: ValidationErrors | null,
+  ): string | null {
+    if (!errors) {
+      return null;
+    }
+
+    const firstErrorKey: string = Object.keys(errors)[0];
+    return errors[firstErrorKey]?.message ?? null;
+  }
+
+  protected updateError(isFieldInFocus: boolean | undefined): void {
+    const rootElement = this.shadowRoot ?? this;
+    const errorElement = rootElement.querySelector('.field-error');
+
+    if (this.config?.error && !isFieldInFocus) {
+      if (!errorElement) {
+        const newErrorElement = this.window.document.createElement('div');
+        newErrorElement.classList.add('field-error');
+        newErrorElement.textContent = this.config.error;
+        rootElement.appendChild(newErrorElement);
+      } else {
+        errorElement.textContent = this.config.error;
+      }
+    } else {
+      if (errorElement) {
+        errorElement.remove();
+      }
+    }
+  }
+}

src/features/headless-checkout/web-components/base-control/element-events.enum.ts

@@ -0,0 +1,4 @@
+export enum ElementEventName {
+  blur = 'blur',
+  focus = 'focus',
+}

src/features/headless-checkout/web-components/base-control/element.handlers.ts

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

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

@@ -0,0 +1,14 @@
+import { TextConfigTooltip } from './text-component/text-config-tooltip.interface';
+
+export interface ControlComponentConfig {
+  controlType?: string;
+  dataType?: string;
+  name?: string;
+  title?: string;
+  placeholder?: string;
+  readonly?: boolean;
+  options?: Array<{ label: string; value: string }>;
+  tooltip?: TextConfigTooltip;
+  error?: string | null;
+  additionalControls?: string;
+}

src/features/headless-checkout/web-components/get-control-component-config.handler.ts

@@ -0,0 +1,26 @@
+import { Handler } from '../../../core/post-messages-client/handler.type';
+import { ControlComponentConfig } from './control-component-config.interface';
+import { Message } from '../../../core/message.interface';
+import { isControlConfigEventMessage } from '../../../core/guards/control-config-event-message.guard';
+
+export const getControlComponentConfigHandler: Handler<
+  ControlComponentConfig
+> = (
+  message: Message,
+  callback?: (args?: unknown) => boolean | void,
+): { isHandled: boolean; value: ControlComponentConfig } | null => {
+  if (isControlConfigEventMessage(message)) {
+    const config = message.data?.config;
+
+    if (typeof callback !== 'function' || !callback(config?.name)) {
+      return null;
+    }
+
+    return {
+      isHandled: true,
+      value: config!,
+    };
+  }
+
+  return null;
+};

src/features/headless-checkout/web-components/payment-form/form-controls-tags.list.ts

@@ -3,4 +3,5 @@ import { WebComponentTagName } from '../../../../core/web-components/web-compone
 export const formControlsTags = [
   WebComponentTagName.TextComponent,
   WebComponentTagName.PhoneComponent,
+  WebComponentTagName.SelectComponent,
 ];

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

@@ -10,7 +10,7 @@ import { PostMessagesClient } from '../../../../core/post-messages-client/post-m
 
 function createComponent(): void {
   const element = document.createElement(
-    WebComponentTagName.PaymentFormComponent
+    WebComponentTagName.PaymentFormComponent,
   );
   element.setAttribute('id', 'test');
   (document.getElementById('container')! as HTMLElement).appendChild(element);
@@ -29,7 +29,7 @@ const getTextInputElements = (names: string[]): NodeListOf<Element> => {
   const mockContainer = document.createElement('div');
   for (const name of names) {
     const mockElement = document.createElement(
-      WebComponentTagName.TextComponent
+      WebComponentTagName.TextComponent,
     );
     mockElement.setAttribute('name', name);
     mockContainer.appendChild(mockElement);
@@ -47,7 +47,7 @@ describe('PaymentFormComponent', () => {
 
   window.customElements.define(
     WebComponentTagName.PaymentFormComponent,
-    PaymentFormComponent
+    PaymentFormComponent,
   );
 
   beforeEach(() => {
@@ -109,7 +109,7 @@ describe('PaymentFormComponent', () => {
   it('Should create component', () => {
     createComponent();
     expect(
-      document.querySelector(WebComponentTagName.PaymentFormComponent)
+      document.querySelector(WebComponentTagName.PaymentFormComponent),
     ).toBeDefined();
   });
 
@@ -139,7 +139,7 @@ describe('PaymentFormComponent', () => {
 
     const textInputElements = getTextInputElements(['zip']);
     spyOn(windowService.document, 'querySelectorAll').and.returnValue(
-      textInputElements
+      textInputElements,
     );
 
     const spy = spyOn(paymentFormFieldsManager, 'createMissedFields');
@@ -164,12 +164,13 @@ describe('PaymentFormComponent', () => {
 
     const textInputElements = getTextInputElements(['zip', 'zip']);
     spyOn(windowService.document, 'querySelectorAll').and.returnValue(
-      textInputElements
+      textInputElements,
     );
 
     const spy = spyOn(paymentFormFieldsManager, 'removeExtraFields');
     createComponent();
 
-    expect(spy).toHaveBeenCalledWith(['zip', 'zip', 'zip']);
+    // rewrite querySelectorAll mock
+    expect(spy).toHaveBeenCalledWith(['zip', 'zip', 'zip', 'zip', 'zip']);
   });
 });

src/features/headless-checkout/web-components/payment-form/web-components-fields-names.map.ts

@@ -3,4 +3,5 @@ import { WebComponentTagName } from '../../../../core/web-components/web-compone
 export const webComponentsFieldsNamesMap: { [k: string]: WebComponentTagName } =
   {
     phone: WebComponentTagName.PhoneComponent,
+    select: WebComponentTagName.SelectComponent,
   };

src/features/headless-checkout/web-components/select/select-attributes.enum.ts

@@ -0,0 +1,3 @@
+export enum SelectAttributes {
+  name = 'name',
+}