Merge pull request #42 from xsolla/PAYMENTS-16979-errors

fix(text): show touched input error only
xsolla · Nov 2, 2023 · f356639 · f356639
2 parents 0bf0d7b + 43fbb50
commit f356639
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 22 deletions.
diff --git a/src/core/actions/next-action.interface.ts b/src/core/actions/next-action.interface.ts
@@ -1,4 +1,5 @@
 import { CheckStatusAction } from './check-status.action.type';
+import { RedirectAction } from './redirect/redirect.action.type';
 import { ShowErrorsAction } from './show-errors.action.type';
 import { ShowFieldsAction } from './show-fields.action.type';
 import { StatusUpdatedAction } from './status-updated.action.type';
@@ -9,4 +10,5 @@ export type NextAction =
   | ShowFieldsAction
   | StatusUpdatedAction
   | ShowErrorsAction
+  | RedirectAction
   | ThreeDsAction;
diff --git a/src/core/actions/redirect/redirect.action.type.ts b/src/core/actions/redirect/redirect.action.type.ts
@@ -0,0 +1,20 @@
+import { Field } from '../../form/field.interface';
+import { FormError } from '../../form/form-error.interface';
+import { FormMessage } from '../../form/form-message.interface';
+import { Action } from '../action.interface';
+
+export type RedirectActionType = 'redirect';
+
+export interface RedirectActionData {
+  fields: Field[];
+  errors: FormError[] | null;
+  messages: FormMessage[] | undefined;
+  invoiceId?: string;
+  order?: object;
+  redirect: {
+    redirectUrl: string;
+    data: object;
+  };
+}
+
+export type RedirectAction = Action<RedirectActionType, RedirectActionData>;
diff --git a/src/core/form/field-status.interface.ts b/src/core/form/field-status.interface.ts
@@ -5,4 +5,5 @@ export interface FieldStatus {
   validationStatus: 'VALID' | 'INVALID' | 'PENDING' | 'DISABLED';
   errors: ValidationErrors | null;
   isFocused?: boolean;
+  isTouched?: boolean;
 }
diff --git a/src/features/headless-checkout/web-components/base-control/base-control.abstract.ts b/src/features/headless-checkout/web-components/base-control/base-control.abstract.ts
@@ -14,7 +14,7 @@ import {
 import { ElementEventName } from './element-events.enum';
 
 export abstract class BaseControl<
-  Config extends ControlComponentConfig
+  Config extends ControlComponentConfig,
 > extends WebComponentAbstract {
   protected postMessagesClient: PostMessagesClient;
   protected headlessCheckout: HeadlessCheckout;
@@ -33,7 +33,7 @@ export abstract class BaseControl<
   }
 
   protected async getComponentConfig(
-    inputName: string
+    inputName: string,
   ): Promise<ControlComponentConfig> {
     const msg: Message<{ inputName: string }> = {
       name: EventName.getControlComponentConfig,
@@ -48,7 +48,7 @@ export abstract class BaseControl<
         return getControlComponentConfigHandler(message, (controlName) => {
           return msg.data?.inputName === controlName;
         });
-      }
+      },
     ) as Promise<ControlComponentConfig>;
   }
 
@@ -61,7 +61,7 @@ export abstract class BaseControl<
           value,
         },
       },
-      publicControlOnValueChanges
+      publicControlOnValueChanges,
     );
   }
 
@@ -74,7 +74,7 @@ export abstract class BaseControl<
           event: ElementEventName.focus,
         },
       },
-      publicControlChangeState
+      publicControlChangeState,
     );
   }
 
@@ -87,7 +87,7 @@ export abstract class BaseControl<
           event: ElementEventName.blur,
         },
       },
-      publicControlChangeState
+      publicControlChangeState,
     );
   }
 
@@ -110,7 +110,7 @@ export abstract class BaseControl<
   }
 
   protected getErrorFromFieldStatus(
-    errors: ValidationErrors | null
+    errors: ValidationErrors | null,
   ): string | null {
     if (!errors) {
       return null;
@@ -128,10 +128,10 @@ export abstract class BaseControl<
       if (!errorElement) {
         const newErrorElement = this.window.document.createElement('div');
         newErrorElement.classList.add('field-error');
-        newErrorElement.textContent = this.config.error;
+        newErrorElement.innerHTML = this.config.error;
         rootElement.appendChild(newErrorElement);
       } else {
-        errorElement.textContent = this.config.error;
+        errorElement.innerHTML = this.config.error;
       }
     } else {
       if (errorElement) {

diff --git a/src/features/headless-checkout/web-components/text-component/text.component.spec.ts b/src/features/headless-checkout/web-components/text-component/text.component.spec.ts
@@ -23,6 +23,7 @@ const invalidFieldsStatus: FormFieldsStatus = {
   [fieldName]: {
     name: fieldName,
     validationStatus: 'INVALID',
+    isTouched: true,
     errors: {
       errorName: {
         message: 'message',
@@ -59,7 +60,7 @@ describe('TextComponent', () => {
 
   window.customElements.define(
     WebComponentTagName.TextComponent,
-    TextComponent
+    TextComponent,
   );
 
   beforeEach(() => {
@@ -124,7 +125,7 @@ describe('TextComponent', () => {
     spyOn(headlessCheckout.form, 'onFieldsStatusChange').and.callFake(
       (callbackFn) => {
         setTimeout(() => (callback = callbackFn));
-      }
+      },
     );
 
     element = createComponent();
@@ -146,7 +147,7 @@ describe('TextComponent', () => {
     spyOn(headlessCheckout.form, 'onFieldsStatusChange').and.callFake(
       (callbackFn) => {
         setTimeout(() => (callback = callbackFn));
-      }
+      },
     );
 
     element = createComponent();
@@ -168,7 +169,7 @@ describe('TextComponent', () => {
     spyOn(headlessCheckout.form, 'onFieldsStatusChange').and.callFake(
       (callbackFn) => {
         setTimeout(() => (callback = callbackFn));
-      }
+      },
     );
 
     element = createComponent();
@@ -190,7 +191,7 @@ describe('TextComponent', () => {
     spyOn(headlessCheckout.form, 'onFieldsStatusChange').and.callFake(
       (callbackFn) => {
         setTimeout(() => (callback = callbackFn));
-      }
+      },
     );
 
     element = createComponent();

diff --git a/src/features/headless-checkout/web-components/text-component/text.component.ts b/src/features/headless-checkout/web-components/text-component/text.component.ts
@@ -11,6 +11,7 @@ import { getControlComponentConfigHandler } from '../get-control-component-confi
 import { HeadlessCheckout } from '../../headless-checkout';
 import { ValidationErrors } from '../../../../core/form/validation-errors.interface';
 import { TextComponentConfig } from './text-component.config.interface';
+import { FieldStatus } from '../../../../core/form/field-status.interface';
 
 export class TextComponent extends SecureComponentAbstract {
   protected config?: TextComponentConfig;
@@ -43,7 +44,7 @@ export class TextComponent extends SecureComponentAbstract {
   }
 
   protected async getControlComponentConfig(
-    inputName: string
+    inputName: string,
   ): Promise<TextComponentConfig> {
     const msg: Message<{ inputName: string }> = {
       name: EventName.getControlComponentConfig,
@@ -58,13 +59,13 @@ export class TextComponent extends SecureComponentAbstract {
         return getControlComponentConfigHandler(message, (controlName) => {
           return msg.data?.inputName === controlName;
         });
-      }
+      },
     ) as Promise<TextComponentConfig>;
   }
 
   protected readonly configLoadedHandler = (
     config: TextComponentConfig,
-    componentName: string
+    componentName: string,
   ): void => {
     this.config = config;
     this.componentName = componentName;
@@ -113,22 +114,22 @@ export class TextComponent extends SecureComponentAbstract {
       }
 
       this.config.error = this.getFirstError(fieldStatus.errors);
-      this.updateError(fieldStatus.isFocused);
+      this.updateError(fieldStatus);
     });
   }
 
-  private updateError(isFieldInFocus: boolean | undefined): void {
+  private updateError(fieldStatus: FieldStatus): void {
     const rootElement = this.shadowRoot ?? this;
     const errorElement = rootElement.querySelector('.field-error');
 
-    if (this.config?.error && !isFieldInFocus) {
+    if (this.config?.error && fieldStatus.isTouched && !fieldStatus.isFocused) {
       if (!errorElement) {
         const newErrorElement = this.window.document.createElement('div');
         newErrorElement.classList.add('field-error');
-        newErrorElement.textContent = this.config.error;
+        newErrorElement.innerHTML = this.config.error;
         rootElement.appendChild(newErrorElement);
       } else {
-        errorElement.textContent = this.config.error;
+        errorElement.innerHTML = this.config.error;
       }
     } else {
       if (errorElement) {