Feature/mb way international phone number

packages/lib/src/components/Card/components/CardInput/validate.ts

@@ -1,7 +1,7 @@
 import { ValidatorRules } from '../../../../utils/Validator/types';
 import { formatCPFCNPJ } from '../../../internal/SocialSecurityNumberBrazil/utils';
 import validateSSN from '../../../internal/SocialSecurityNumberBrazil/validate';
-import { isEmpty } from '../../../internal/SecuredFields/lib/utilities/commonUtils';
+import { isEmpty } from '../../../../utils/validator-utils';
 
 export const cardInputFormatters = {
     socialSecurityNumber: formatCPFCNPJ

packages/lib/src/components/MBWay/MBWay.tsx

@@ -14,10 +14,11 @@ export class MBWayElement extends UIElement {
         return {
             ...props,
             data: {
-                telephoneNumber: data.telephoneNumber || data.phoneNumber
+                phoneNumber: data.telephoneNumber || data.phoneNumber,
+                phonePrefix: data.phonePrefix || '+351' // if not specified default to Portuguese country code
             },
             placeholders: {
-                telephoneNumber: placeholders.telephoneNumber || placeholders.phoneNumber || '+351 932 123 456'
+                phoneNumber: placeholders.telephoneNumber || placeholders.phoneNumber || '932123456'
             }
         };
     }
@@ -29,7 +30,7 @@ export class MBWayElement extends UIElement {
         return {
             paymentMethod: {
                 type: MBWayElement.type,
-                ...(this.state.data?.telephoneNumber && { telephoneNumber: this.state.data.telephoneNumber })
+                ...(this.state.data?.phoneNumber && { telephoneNumber: this.state.data.phonePrefix + this.state.data.phoneNumber })
             }
         };
     }

packages/lib/src/components/MBWay/components/MBWayInput/MBWayInput.tsx

@@ -1,69 +1,74 @@
 import { h } from 'preact';
-import { useState, useEffect } from 'preact/hooks';
-import classNames from 'classnames';
+import { useState, useLayoutEffect, useRef } from 'preact/hooks';
 import useCoreContext from '../../../../core/Context/useCoreContext';
-import Field from '../../../internal/FormFields/Field';
-import { renderFormField } from '../../../internal/FormFields';
-import { MBWayDataState, MBWayInputProps } from './types';
+import { MBWayInputProps } from './types';
 import './MBWayInput.scss';
-import useForm from '../../../../utils/useForm';
-const phoneNumberRegEx = /^[+]*[0-9]{1,4}[\s/0-9]*$/;
+import getDataset from '../../../../core/Services/get-dataset';
+import { DataSet } from '../../../../core/Services/data-set';
+import PhoneInput from '../../../internal/PhoneInputNew';
+import AdyenCheckoutError from '../../../../core/Errors/AdyenCheckoutError';
+import LoadingWrapper from '../../../internal/LoadingWrapper';
 
 function MBWayInput(props: MBWayInputProps) {
-    const { i18n } = useCoreContext();
+    const { i18n, loadingContext } = useCoreContext();
 
-    const { handleChangeFor, triggerValidation, data, valid, errors, isValid } = useForm<MBWayDataState>({
-        schema: ['telephoneNumber'],
-        defaultData: props.data,
-        rules: {
-            telephoneNumber: {
-                validate: num => phoneNumberRegEx.test(num) && num.length >= 7,
-                errorMessage: 'mobileNumber.invalid',
-                modes: ['blur']
-            }
-        },
-        formatters: {
-            telephoneNumber: num => num.replace(/[^0-9+\s]/g, '')
-        }
-    });
+    const phoneInputRef = useRef(null);
 
-    const [status, setStatus] = useState('ready');
+    const { allowedCountries = [] } = props;
+
+    const [phonePrefixes, setPhonePrefixes] = useState<DataSet>([]);
+    const [status, setStatus] = useState<string>('loading');
 
     this.setStatus = setStatus;
-    this.showValidation = triggerValidation;
+    this.showValidation = phoneInputRef?.current?.triggerValidation;
+
+    useLayoutEffect(() => {
+        getDataset('phonenumbers', loadingContext)
+            .then(response => {
+                const countriesFilter = country => allowedCountries.includes(country.id);
+                const filteredCountries = allowedCountries.length ? response.filter(countriesFilter) : response;
+                const mappedCountries = filteredCountries.map(item => {
+                    // Get country flags (magic! - shifts the country code characters to the correct position of the emoji in the unicode space)
+                    const codePoints: number[] = item.id
+                        .toUpperCase()
+                        .split('')
+                        .map(char => 127397 + char.charCodeAt(0));
+
+                    // Get flag emoji + space at end (it doesn't work to add spaces in the template literal, below)
+                    const flag = String.fromCodePoint ? String.fromCodePoint(...codePoints) + '\u00A0\u00A0' : '';
+
+                    return { id: item.prefix, name: `${flag} ${item.prefix} (${item.id})`, selectedOptionName: `${flag} ${item.prefix}` };
+                });
+
+                setPhonePrefixes(mappedCountries || []);
+                setStatus('ready');
+            })
+            .catch(error => {
+                props.onError(new AdyenCheckoutError('ERROR', error));
+                setPhonePrefixes([]);
+                setStatus('ready');
+            });
+    }, []);
 
-    useEffect(() => {
+    const onChange = ({ data, valid, errors, isValid }) => {
         props.onChange({ data, valid, errors, isValid });
-    }, [data, valid, errors, isValid]);
+    };
 
     return (
-        <div className="adyen-checkout__mb-way">
-            <Field
-                errorMessage={!!errors.telephoneNumber && i18n.get('mobileNumber.invalid')}
-                label={i18n.get('mobileNumber')}
-                className={classNames('adyen-checkout__input--phone-number')}
-                isValid={valid.telephoneNumber}
-                dir={'ltr'}
-                name={'telephoneNumber'}
-            >
-                {renderFormField('tel', {
-                    value: data.telephoneNumber,
-                    className: 'adyen-checkout__pm__phoneNumber__input',
-                    placeholder: props.placeholders.telephoneNumber,
-                    required: true,
-                    autoCorrect: 'off',
-                    onBlur: handleChangeFor('telephoneNumber', 'blur'),
-                    onInput: handleChangeFor('telephoneNumber', 'input')
-                })}
-            </Field>
+        <LoadingWrapper status={status}>
+            <div className="adyen-checkout__mb-way">
+                <PhoneInput {...props} items={phonePrefixes} ref={phoneInputRef} onChange={onChange} data={props.data} />
 
-            {props.showPayButton && props.payButton({ status, label: i18n.get('confirmPurchase') })}
-        </div>
+                {props.showPayButton && props.payButton({ status, label: i18n.get('confirmPurchase') })}
+            </div>
+        </LoadingWrapper>
     );
 }
 
 MBWayInput.defaultProps = {
-    onChange: () => {}
+    onChange: () => {},
+    phoneNumberKey: 'mobileNumber',
+    phoneNumberErrorKey: 'mobileNumber.invalid'
 };
 
 export default MBWayInput;

packages/lib/src/components/MBWay/components/MBWayInput/types.ts

@@ -2,12 +2,17 @@ import { UIElementProps } from '../../../types';
 
 export interface MBWayInputData {
     telephoneNumber?: string;
+    phoneNumber?: string;
+    phonePrefix?: string;
 }
 
 export interface MBWayInputProps extends UIElementProps {
     data?: MBWayInputData;
     placeholders?: MBWayInputData;
     onChange: (state) => void;
+    allowedCountries?: string[];
+    requiredFields?: string[];
+    phoneNumberKey?: string;
 }
 
 export interface MBWayDataState {

packages/lib/src/components/internal/Address/validate.ts

@@ -1,7 +1,7 @@
 import { ValidatorRules, ValidatorRule } from '../../../utils/Validator/types';
 import { countrySpecificFormatters } from './validate.formats';
 import { ERROR_CODES, ERROR_MSG_INCOMPLETE_FIELD } from '../../../core/Errors/constants';
-import { isEmpty } from '../SecuredFields/lib/utilities/commonUtils';
+import { isEmpty } from '../../../utils/validator-utils';
 
 const createPatternByDigits = (digits: number) => {
     return {

packages/lib/src/components/internal/FormFields/FormFields.scss

@@ -136,10 +136,6 @@
     color: $color-alert;
 }
 
-.adyen-checkout__input--invalid {
-    border-color: $color-alert;
-}
-
 .adyen-checkout__input--valid {
     border-bottom-color: $color-success;
 }

packages/lib/src/components/internal/PhoneInputNew/PhoneInput.scss

@@ -0,0 +1,82 @@
+.adyen-checkout-phone-input--new {
+    direction: ltr;
+
+    // inherited style (FormFields.scss)
+    .adyen-checkout__input-wrapper {
+        width: 100%;
+
+        // inherited style (FormFields.scss)
+        .adyen-checkout__input {
+            padding: 0;
+            height: auto;
+
+            &:focus-within {
+                 border: 1px solid #06f;
+
+                 .adyen-checkout-dropdown--countrycode-selector {
+                     border-right: 1px solid #06f;
+                 }
+             }
+        }
+
+        // inherited style (Select.scss)
+        .adyen-checkout__dropdown__button {
+            width: auto;
+            border: 0;
+            height: 35px;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+
+            &:after {
+                box-sizing: revert;
+                height: 10px;
+            }
+        }
+
+        // inherited style (Select.scss)
+        .adyen-checkout__dropdown__button--active {
+            box-shadow: none;
+
+            &:hover {
+                box-shadow: none;
+            }
+        }
+
+        // Example of better BEM naming i.e. 'adyen-checkout-input' as the Base
+        .adyen-checkout-input--phone-number {
+            height: 35px;
+            line-height: 35px;
+            min-height: 35px;
+            padding-bottom: 0;
+            padding-top: 0;
+            border: 1px solid transparent;
+            padding-left: 15px;
+
+            &:focus-within {
+                border: 1px solid #06f;
+                box-shadow: 0 0 0 2px #99c2ff;
+            }
+        }
+
+        .adyen-checkout-dropdown--countrycode-selector {
+            border-right: 1px solid #dce0e5;
+            min-width: 130px;
+            width: 130px;
+        }
+
+        .adyen-checkout-input-holder--phone-input {
+            align-items: center;
+            display: flex;
+        }
+
+        .adyen-checkout-phone-number {
+            align-items: center;
+            display: flex;
+            flex: 3;
+        }
+    }
+
+    .adyen-checkout-phone-input__error-holder {
+        margin-top: -10px;
+    }
+}