-
Notifications
You must be signed in to change notification settings - Fork 141
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* chore(deps): update dependency express to v4.21.2 (#3061) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency eslint-plugin-testing-library to v6.5.0 (#3060) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency eslint-plugin-storybook to v0.11.1 (#3058) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency @changesets/cli to v2.27.11 (#3070) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency msw to v2.7.0 (#3074) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency globals to v15.14.0 (#3072) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency prettier to v3.4.2 (#3075) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency @rollup/plugin-node-resolve to v15.3.1 (#3071) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * bsb input component --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
- Loading branch information
1 parent
df83f04
commit 3e2271d
Showing
10 changed files
with
402 additions
and
215 deletions.
There are no files selected for viewing
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
134 changes: 123 additions & 11 deletions
134
packages/lib/src/components/PayTo/components/BSBInput.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,17 +1,129 @@ | ||
| import { h } from 'preact'; | ||
| import Fieldset from '../../internal/FormFields/Fieldset'; | ||
| import { useEffect, useRef } from 'preact/hooks'; | ||
| import useForm from '../../../utils/useForm'; | ||
| import { getErrorMessage } from '../../../utils/getErrorMessage'; | ||
| import Field from '../../internal/FormFields/Field'; | ||
| import { useCoreContext } from '../../../core/Context/CoreProvider'; | ||
| import InputText from '../../internal/FormFields/InputText'; | ||
| import { bsbValidationRules } from './validate'; | ||
| import './PayIDInput.scss'; | ||
| import { phoneFormatters } from '../../internal/PhoneInput/validate'; | ||
| import { ComponentMethodsRef } from '../../internal/UIElement/types'; | ||
|
|
||
| export default function BSBInput() { | ||
| // const { i18n } = useCoreContext(); | ||
| export interface BSBFormData { | ||
| bsb: string; | ||
| bankAccountNumber: string; | ||
| firstName: string; | ||
| lastName: string; | ||
| } | ||
|
|
||
| export interface BSBInputProps { | ||
| defaultData: BSBFormData; | ||
| placeholders: any; //TODO | ||
| onChange: (e) => void; | ||
| setComponentRef: (ref: ComponentMethodsRef) => void; | ||
| } | ||
|
|
||
| const BASE_SCHEMA = ['bankAccountNumber', 'bsb', 'firstName', 'lastName']; | ||
|
|
||
| export default function BSBInput({ setComponentRef, defaultData, placeholders, onChange }: BSBInputProps) { | ||
| const { i18n } = useCoreContext(); | ||
|
|
||
| const form = useForm<BSBFormData>({ | ||
| schema: BASE_SCHEMA, | ||
| defaultData: defaultData, | ||
| rules: bsbValidationRules, | ||
| formatters: phoneFormatters | ||
| }); | ||
| const { handleChangeFor, triggerValidation, data, errors, valid, isValid } = form; | ||
|
|
||
| // standard onChange propagate to parent state | ||
| useEffect(() => { | ||
| onChange({ data, valid, errors, isValid }); | ||
| }, [data, valid, errors, isValid]); | ||
|
|
||
| const payToRef = useRef<ComponentMethodsRef>({ | ||
| showValidation: triggerValidation | ||
| }); | ||
|
|
||
| useEffect(() => { | ||
| setComponentRef(payToRef.current); | ||
| }, [setComponentRef]); | ||
|
|
||
| return ( | ||
| <Fieldset classNameModifiers={['payto__bsb_input']} label={'payto.bsb.header'} description={'payto.bsb.description'}> | ||
| <Field | ||
| label={i18n.get('payto.bsb.label.bankAccountNumber')} | ||
| classNameModifiers={['col-60', 'bankAccountNumber']} | ||
| errorMessage={getErrorMessage(i18n, errors.bankAccountNumber, i18n.get('payto.bsb.label.bankAccountNumber'))} | ||
| name={'bankAccountNumber'} | ||
| i18n={i18n} | ||
| > | ||
| <InputText | ||
| name={'bankAccountNumber'} | ||
| value={data.bankAccountNumber} | ||
| onInput={handleChangeFor('bankAccountNumber', 'input')} | ||
| onBlur={handleChangeFor('bankAccountNumber', 'blur')} | ||
| placeholder={placeholders?.bankAccountNumber} | ||
| required={true} | ||
| /> | ||
| </Field> | ||
|
|
||
| // TODO type this | ||
| // const { handleChangeFor, triggerValidation, data, valid, errors } = useForm<any>({ | ||
| // schema: ['beneficiaryId'] | ||
| // }); | ||
| // | ||
| // const [status, setStatus] = useState<string>('ready'); | ||
| <Field | ||
| label={i18n.get('payto.bsb.label.bsb')} | ||
| classNameModifiers={['col-40', 'bsb']} | ||
| errorMessage={getErrorMessage(i18n, errors.bsb, i18n.get('payto.bsb.label.bsb'))} | ||
| name={'bsb'} | ||
| i18n={i18n} | ||
| > | ||
| <InputText | ||
| name={'bsb'} | ||
| value={data.bsb} | ||
| onInput={handleChangeFor('bsb', 'input')} | ||
| onBlur={handleChangeFor('bsb', 'blur')} | ||
| placeholder={placeholders?.bsb} | ||
| required={true} | ||
| /> | ||
| </Field> | ||
|
|
||
| // this.setStatus = setStatus; | ||
| // this.showValidation = triggerValidation; | ||
| <Field | ||
| label={i18n.get('firstName')} | ||
| classNameModifiers={['col-50', 'firstName']} | ||
| errorMessage={getErrorMessage(i18n, errors.firstName, i18n.get('firstName'))} | ||
| name={'firstName'} | ||
| i18n={i18n} | ||
| > | ||
| <InputText | ||
| name={'firstName'} | ||
| value={data.firstName} | ||
| classNameModifiers={['firstName']} | ||
| onInput={handleChangeFor('firstName', 'input')} | ||
| onBlur={handleChangeFor('firstName', 'input')} | ||
| placeholder={placeholders?.firstName} | ||
| spellCheck={false} | ||
| required={true} | ||
| /> | ||
| </Field> | ||
|
|
||
| return <p>BSBInput.tsx</p>; | ||
| <Field | ||
| label={i18n.get('lastName')} | ||
| classNameModifiers={['col-50', 'lastName']} | ||
| errorMessage={getErrorMessage(i18n, errors.lastName, i18n.get('lastName'))} | ||
| name={'lastName'} | ||
| i18n={i18n} | ||
| > | ||
| <InputText | ||
| name={'lastName'} | ||
| value={data.lastName} | ||
| classNameModifiers={['lastName']} | ||
| onInput={handleChangeFor('lastName', 'input')} | ||
| onBlur={handleChangeFor('lastName', 'blur')} | ||
| placeholder={placeholders?.lastName} | ||
| spellCheck={false} | ||
| required={true} | ||
| /> | ||
| </Field> | ||
| </Fieldset> | ||
| ); | ||
| } |
12 changes: 7 additions & 5 deletions
12
packages/lib/src/components/PayTo/components/PayIDInput.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 |
|---|---|---|
| @@ -1,10 +1,12 @@ | ||
| @import 'styles/variable-generator'; | ||
|
|
||
| .adyen-checkout__fieldset--payto__payid_input { | ||
| margin-top: token(spacer-070); | ||
|
|
||
| .adyen-checkout__fieldset__fields { | ||
| .adyen-checkout__payto-component { | ||
| .adyen-checkout__fieldset { | ||
| margin-top: token(spacer-070); | ||
| gap: 0 token(spacer-060); | ||
|
|
||
| .adyen-checkout__fieldset__fields { | ||
| margin-top: token(spacer-070); | ||
| gap: 0 token(spacer-060); | ||
| } | ||
| } | ||
| } |
76 changes: 76 additions & 0 deletions
76
packages/lib/src/components/PayTo/components/PayToComponent.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 |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| import { h } from 'preact'; | ||
| import LoadingWrapper from '../../internal/LoadingWrapper'; | ||
| import SegmentedControl from '../../internal/SegmentedControl'; | ||
| import { useState } from 'preact/hooks'; | ||
| import { SegmentedControlOptions } from '../../internal/SegmentedControl/SegmentedControl'; | ||
| import PayIDInput from './PayIDInput'; | ||
| import BSBInput from './BSBInput'; | ||
| import { useCoreContext } from '../../../core/Context/CoreProvider'; | ||
|
|
||
| export type PayToInputOption = 'payid-option' | 'bsb-option'; | ||
|
|
||
| export type PayToComponentData = { selectedInput: PayToInputOption }; | ||
|
|
||
| const inputOptions: SegmentedControlOptions<PayToInputOption> = [ | ||
| { | ||
| value: 'payid-option', | ||
| label: 'PayID', | ||
| htmlProps: { | ||
| id: 'payid-option', // TODO move this to i18n | ||
| 'aria-controls': 'payid-input', | ||
| 'aria-expanded': true // TODO move this logic to segmented controller | ||
| } | ||
| }, | ||
| { | ||
| value: 'bsb-option', | ||
| label: 'BSB and account number', // TODO move this to i18n | ||
| htmlProps: { | ||
| id: 'bsb-option', | ||
| 'aria-controls': 'bsb-input', | ||
| 'aria-expanded': false // TODO move this logic to segmented controller | ||
| } | ||
| } | ||
| ]; | ||
|
|
||
| export default function PayToComponent(props) { | ||
| const { i18n } = useCoreContext(); | ||
|
|
||
| const [status, setStatus] = useState<string>('ready'); | ||
|
|
||
| this.setStatus = setStatus; | ||
|
|
||
| const defaultOption = inputOptions[0].value; | ||
| const [selectedInput, setSelectedInput] = useState<PayToInputOption>(defaultOption); | ||
|
|
||
| const onChange = ({ data, valid, errors, isValid }) => { | ||
| // merge selected input to as data, this keep the input layers untouched | ||
| props.onChange({ data: { selectedInput: selectedInput, ...data }, valid, errors, isValid }); | ||
| }; | ||
|
|
||
| return ( | ||
| <LoadingWrapper> | ||
| <div className="adyen-checkout__payto-component"> | ||
| <SegmentedControl selectedValue={selectedInput} options={inputOptions} onChange={setSelectedInput} /> | ||
| {selectedInput === 'payid-option' && ( | ||
| <PayIDInput | ||
| setComponentRef={props.setComponentRef} | ||
| onChange={onChange} | ||
| defaultData={props.data} | ||
| onError={props.onError} | ||
| placeholders={props.placeholders} | ||
| /> | ||
| )} | ||
| {selectedInput === 'bsb-option' && ( | ||
| <BSBInput | ||
| setComponentRef={props.setComponentRef} | ||
| onChange={onChange} | ||
| defaultData={props.data} | ||
| placeholders={props.placeholders} | ||
| /> | ||
| )} | ||
|
|
||
| {props.showPayButton && props.payButton({ status, label: i18n.get('confirmPurchase') })} | ||
| </div> | ||
| </LoadingWrapper> | ||
| ); | ||
| } |
62 changes: 0 additions & 62 deletions
62
packages/lib/src/components/PayTo/components/PayToInput.tsx
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.