Add phone number metadata field (#131)

src/app/components/app/modal-container/modal/form-container/common-fields/phone/format-phone-number.ts

@@ -1,7 +0,0 @@
-import { FormEvent } from 'react';
-import { formatPhoneNumber as _formatPhoneNumber } from 'checkout/utils';
-
-export const formatPhoneNumber = (e: FormEvent<HTMLInputElement>) => {
-    const target = e.currentTarget as HTMLInputElement;
-    target.value = _formatPhoneNumber(target.value);
-};

src/app/components/app/modal-container/modal/form-container/common-fields/phone/phone.tsx

@@ -5,9 +5,8 @@ import { Field, WrappedFieldProps } from 'redux-form';
 import { State } from 'checkout/state';
 import { Locale } from 'checkout/locale';
 import { validatePhone } from './validate-phone';
-import { formatPhoneNumber } from './format-phone-number';
 import { Input } from 'checkout/components';
-import { isError } from 'checkout/utils';
+import { formatPhoneNumber, isError } from 'checkout/utils';
 
 export interface PhoneProps {
     locale: Locale;

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

@@ -0,0 +1,22 @@
+import { ServiceProviderMetadataField } from 'checkout/backend';
+import { replaceSpaces } from 'checkout/utils';
+
+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
+        };
+    }, {} as T);
+}

src/app/components/app/modal-container/modal/form-container/payment-terminal-form/payment-terminal-form.tsx

@@ -28,6 +28,7 @@ import { toAmountConfig, toEmailConfig, toPhoneNumberConfig } from '../fields-co
 import { Amount, Email, Phone } from '../common-fields';
 import { LogoContainer } from './logo-container';
 import { ServiceProviderContactInfo, ServiceProviderMetadataField } from 'checkout/backend';
+import { formatMetadataValue } from './format-metadata-value';
 
 const Container = styled.div`
     min-height: 300px;
@@ -97,7 +98,10 @@ const PaymentTerminalFormRef: React.FC<InjectedFormProps> = ({ submitFailed, ini
         dispatch(
             pay({
                 method: PaymentMethodName.PaymentTerminal,
-                values
+                values: {
+                    ...values,
+                    metadata: formatMetadataValue(form, values?.metadata)
+                } as PaymentTerminalFormValues
             })
         );
     };

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

@@ -3,9 +3,40 @@ import { useMemo } from 'react';
 import { Field, Validator, WrappedFieldProps } from 'redux-form';
 
 import { MetadataTextLocalization, ServiceProviderMetadataField } from 'checkout/backend';
-import { formatEmail, isError, validateEmail } from 'checkout/utils';
+import { formatEmail, formatPhoneNumber, isError, validateEmail, validatePhone } from 'checkout/utils';
 import { Input } from 'checkout/components';
 
+const getAutocomplete = (type: JSX.IntrinsicElements['input']['type']): string | null => {
+    switch (type) {
+        case 'email':
+            return 'email';
+        case 'tel':
+            return 'tel';
+        default:
+            return null;
+    }
+};
+
+const getOnInputHandler = (type: JSX.IntrinsicElements['input']['type']) => {
+    switch (type) {
+        case 'email':
+            return formatEmail;
+        case 'tel':
+            return formatPhoneNumber;
+        default:
+            return null;
+    }
+};
+
+const getOnFocusHandler = (type: JSX.IntrinsicElements['input']['type']) => {
+    switch (type) {
+        case 'tel':
+            return formatPhoneNumber;
+        default:
+            return null;
+    }
+};
+
 const getPlaceholder = (localeCode: string, localization: MetadataTextLocalization) =>
     localization[localeCode] || localization['en'];
 
@@ -23,6 +54,9 @@ const WrappedInput: React.FC<WrappedFieldProps & {
         placeholder={getPlaceholder(localeCode, localization)}
         mark={true}
         error={isError(meta)}
+        onInput={getOnInputHandler(type)}
+        onFocus={getOnFocusHandler(type)}
+        autocomplete={getAutocomplete(type)}
     />
 );
 
@@ -34,6 +68,9 @@ const createValidator = (
     if (type === 'email') {
         return validateEmail(value);
     }
+    if (type === 'tel') {
+        return validatePhone(value);
+    }
     if (pattern) {
         return !new RegExp(pattern).test(value);
     }
@@ -42,24 +79,6 @@ const createValidator = (
     }
 };
 
-const getAutocomplete = (type: JSX.IntrinsicElements['input']['type']): string | null => {
-    switch (type) {
-        case 'email':
-            return 'email';
-        default:
-            return null;
-    }
-};
-
-const getOnInputHandler = (type: JSX.IntrinsicElements['input']['type']) => {
-    switch (type) {
-        case 'email':
-            return formatEmail;
-        default:
-            return null;
-    }
-};
-
 export interface MetadataFieldProps {
     metadata: ServiceProviderMetadataField;
     localeCode?: string;
@@ -78,8 +97,6 @@ export const MetadataField: React.FC<MetadataFieldProps> = ({
             component={WrappedInput}
             props={{ type, name, localization, localeCode }}
             validate={validate}
-            autocomplete={getAutocomplete(type)}
-            onInput={getOnInputHandler(type)}
         />
     );
 };

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

@@ -1,4 +1,9 @@
+import { FormEvent } from 'react';
 import { AsYouType } from 'libphonenumber-js/min';
 
-export const formatPhoneNumber = (value: string): string =>
-    value.slice(0, 1) === '+' ? new AsYouType().input(value) : '+';
+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);
+};