APM-176: Add supporting of meta field required flag (#134)

src/app/components/app/modal-container/modal/form-container/payment-terminal-form/format-metadata-value.ts

@@ -1,22 +1,27 @@
 import { ServiceProviderMetadataField } from 'checkout/backend';
 import { replaceSpaces } from 'checkout/utils';
+import { isNil } from 'lodash-es';
+
+const toResultValue = (field: ServiceProviderMetadataField, formValue) => {
+    switch (field.type) {
+        case 'tel':
+            return replaceSpaces(formValue);
+        default:
+            return formValue;
+    }
+};
 
 export function formatMetadataValue<T>(form: ServiceProviderMetadataField[], formMetadata: T): T {
     if (!form) {
         return formMetadata;
     }
-    return form.reduce((acc, curr) => {
-        let value;
-        switch (curr.type) {
-            case 'tel':
-                value = replaceSpaces(formMetadata[curr.name]);
-                break;
-            default:
-                value = formMetadata[curr.name];
-        }
-        return {
-            ...acc,
-            [curr.name]: value
-        };
+    return form.reduce((acc, field) => {
+        const formValue = formMetadata[field.name];
+        return isNil(formValue)
+            ? acc
+            : {
+                  ...acc,
+                  [field.name]: toResultValue(field, formValue)
+              };
     }, {} as T);
 }

src/app/components/ui/metadata/metadata-field/metadata-field.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { useMemo } from 'react';
 import { Field, Validator, WrappedFieldProps } from 'redux-form';
+import isNil from 'lodash-es/isNil';
+import partialRight from 'lodash-es/partialRight';
 
 import { MetadataTextLocalization, ServiceProviderMetadataField } from 'checkout/backend';
-import { formatEmail, formatPhoneNumber, isError, validateEmail, validatePhone } from 'checkout/utils';
+import { formatEmail, formatPhoneNumber, isError, formatOnFocus, validateEmail, validatePhone } from 'checkout/utils';
 import { Input } from 'checkout/components';
 
 const getAutocomplete = (type: JSX.IntrinsicElements['input']['type']): string | null => {
@@ -31,7 +33,7 @@ const getOnInputHandler = (type: JSX.IntrinsicElements['input']['type']) => {
 const getOnFocusHandler = (type: JSX.IntrinsicElements['input']['type']) => {
     switch (type) {
         case 'tel':
-            return formatPhoneNumber;
+            return partialRight(formatPhoneNumber, formatOnFocus);
         default:
             return null;
     }
@@ -45,6 +47,7 @@ const WrappedInput: React.FC<WrappedFieldProps & {
     name: string;
     localization: MetadataTextLocalization;
     localeCode: string;
+    required: boolean;
 }> = ({ type, name, input, meta, localeCode, localization }) => (
     <Input
         {...input}
@@ -65,6 +68,9 @@ const createValidator = (
     required: boolean,
     pattern?: string
 ): Validator => (value) => {
+    if (!required && isNil(value)) {
+        return undefined;
+    }
     if (type === 'email') {
         return validateEmail(value);
     }
@@ -95,7 +101,7 @@ export const MetadataField: React.FC<MetadataFieldProps> = ({
         <Field
             name={wrappedName ? `${wrappedName}.${name}` : name}
             component={WrappedInput}
-            props={{ type, name, localization, localeCode }}
+            props={{ type, name, localization, localeCode, required }}
             validate={validate}
         />
     );

src/app/utils/phone/format-phone-number.ts

@@ -1,9 +1,19 @@
 import { FormEvent } from 'react';
 import { AsYouType } from 'libphonenumber-js/min';
 
-const format = (value: string): string => (value.slice(0, 1) === '+' ? new AsYouType().input(value) : '+');
-
-export const formatPhoneNumber = (e: FormEvent<HTMLInputElement>) => {
-    const target = e.currentTarget as HTMLInputElement;
-    target.value = format(target.value);
+export const formatOnInput = (value: string): string => {
+    if (value === '') {
+        return value;
+    }
+    if (value.slice(0, 1) === '+') {
+        return new AsYouType().input(value);
+    }
+    return `+${value}`;
+};
+
+export const formatOnFocus = (value: string): string => (value === '' ? '+' : value);
+
+export const formatPhoneNumber = (e: FormEvent<HTMLInputElement>, formatter = formatOnInput) => {
+    const target = e.currentTarget as HTMLInputElement;
+    target.value = formatter(target.value);
 };