-
Notifications
You must be signed in to change notification settings - Fork 137
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feature/mb way international phone number (#1601)
* First draft of new PhoneInput * Starting to sort out styling * Mapping country flags, handling onChange & showValidation * Correctly adding placeholders and labels to PhoneInput comp. Removed spritesheet mapping * MBWayInput - removing unnecessary useForm fny. MBWay - expect data props to be 'phoneNumber' & 'phonePrefix' * Allow parent comp to pass in keys for error messages * Set styling related heights to 35px * Moved isEmpty util to validator-utils.ts and added some other util fns * Don't show validation error on an empty phone input * Styling: better selector names. (Added comments) * Changed some class names. Show valid and error icons * Removed duplicated class fro FormFields.scss * Adjusted width of dropdown and removed inappropriate 'field' string from some selectors * Adding more new look BEM class names * Concatenate pref and number into one value for paymentMethod data * Fully validate a portuguese mobile number * Remove console.log * Fixing types * Increased sf version to 3.10.2 * Show spinner whilst phonenumbers dataset loads * Turned mechanism for fetching phonePrefixes into a custom hook * handling error differently
- Loading branch information
Showing
17 changed files
with
430 additions
and
63 deletions.
There are no files selected for viewing
2 changes: 1 addition & 1 deletion
2
packages/lib/src/components/Card/components/CardInput/validate.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
72 changes: 24 additions & 48 deletions
72
packages/lib/src/components/MBWay/components/MBWayInput/MBWayInput.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,69 +1,45 @@ | ||
| import { h } from 'preact'; | ||
| import { useState, useEffect } from 'preact/hooks'; | ||
| import classNames from 'classnames'; | ||
| import { useState, 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 PhoneInput from '../../../internal/PhoneInputNew'; | ||
| import LoadingWrapper from '../../../internal/LoadingWrapper'; | ||
| import usePhonePrefixes from '../../../internal/PhoneInputNew/usePhonePrefixes'; | ||
|
|
||
| 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 [status, setStatus] = useState<string>('ready'); | ||
|
|
||
| this.setStatus = setStatus; | ||
| this.showValidation = triggerValidation; | ||
| this.showValidation = phoneInputRef?.current?.triggerValidation; | ||
|
|
||
| const { loadingStatus: prefixLoadingStatus, phonePrefixes } = usePhonePrefixes({ allowedCountries, loadingContext, handleError: props.onError }); | ||
|
|
||
| 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={prefixLoadingStatus}> | ||
| <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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
82 changes: 82 additions & 0 deletions
82
packages/lib/src/components/internal/PhoneInputNew/PhoneInput.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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: 134px; | ||
| width: 134px; | ||
| } | ||
|
|
||
| .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; | ||
| } | ||
| } |
Oops, something went wrong.