Bacs Direct Debit component

packages/lib/src/components/BacsDD/BacsDD.tsx

@@ -0,0 +1,64 @@
+import { h } from 'preact';
+import UIElement from '../UIElement';
+import BacsInput from './components/BacsInput';
+import CoreProvider from '../../core/Context/CoreProvider';
+import BacsResult from './components/BacsResult';
+
+interface BacsElementData {
+    paymentMethod: {
+        type: string;
+        holderName: string;
+        bankAccountNumber: string;
+        bankLocationId: string;
+    };
+    shopperEmail: string;
+}
+
+class BacsElement extends UIElement {
+    public static type = 'directdebit_GB';
+
+    formatData(): BacsElementData {
+        return {
+            paymentMethod: {
+                type: BacsElement.type,
+                ...(this.state.data?.holderName && { holderName: this.state.data.holderName }),
+                ...(this.state.data?.bankAccountNumber && { bankAccountNumber: this.state.data.bankAccountNumber }),
+                ...(this.state.data?.bankLocationId && { bankLocationId: this.state.data.bankLocationId })
+            },
+            ...(this.state.data?.shopperEmail && { shopperEmail: this.state.data.shopperEmail })
+        };
+    }
+
+    get isValid(): boolean {
+        return !!this.state.isValid;
+    }
+
+    render() {
+        return (
+            <CoreProvider i18n={this.props.i18n} loadingContext={this.props.loadingContext}>
+                {this.props.url ? (
+                    <BacsResult
+                        ref={ref => {
+                            this.componentRef = ref;
+                        }}
+                        icon={this.icon}
+                        url={this.props.url}
+                        paymentMethodType={this.props.paymentMethodType}
+                    />
+                ) : (
+                    <BacsInput
+                        ref={ref => {
+                            this.componentRef = ref;
+                        }}
+                        {...this.props}
+                        onChange={this.setState}
+                        payButton={this.payButton}
+                        onSubmit={this.submit}
+                    />
+                )}
+            </CoreProvider>
+        );
+    }
+}
+
+export default BacsElement;

packages/lib/src/components/BacsDD/components/BacsInput.scss

@@ -0,0 +1,41 @@
+@import '../../../style/index';
+
+.adyen-checkout__bacs{
+
+  &--confirm {
+    position: relative;
+
+    .adyen-checkout-input__inline-validation--valid {
+      display: none
+    }
+  }
+
+  .adyen-checkout__field {
+
+    &--inactive {
+      pointer-events: none;
+    }
+  }
+
+  .adyen-checkout__bacs--edit {
+
+    position: absolute;
+    top: -25px;
+    right: 0px;
+    cursor: pointer;
+    width: 20%;
+
+    &-dropin{
+      top: -50px;
+    }
+
+    .adyen-checkout__bacs--edit-button {
+      border: none;
+      background: none;
+      color: $color-blue;
+      text-decoration: underline;
+      text-align: end;
+      cursor: pointer;
+    }
+  }
+}

packages/lib/src/components/BacsDD/components/BacsInput.tsx

@@ -0,0 +1,278 @@
+import { h } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+import classNames from 'classnames';
+import useCoreContext from '../../../core/Context/useCoreContext';
+import Field from '../../internal/FormFields/Field';
+import { renderFormField } from '../../internal/FormFields';
+import ConsentCheckbox from '../../internal/FormFields/ConsentCheckbox';
+import { bacsValidationRules } from './validate';
+import Validator from '../../../utils/Validator';
+import { BacsDataState, BacsErrorsState, BacsInputProps, BacsValidState, ValidationObject } from './types';
+import './BacsInput.scss';
+import getImage from '../../../utils/get-image';
+
+const ENTER_STATE = 'enter-data';
+const CONFIRM_STATE = 'confirm-data';
+
+function BacsInput(props: BacsInputProps) {
+    const { i18n } = useCoreContext();
+    const validator = new Validator(bacsValidationRules);
+
+    const [status, setStatus] = useState(ENTER_STATE);
+    this.setStatus = setStatus;
+
+    const [data, setData] = useState<BacsDataState>(props.data);
+    const [errors, setErrors] = useState<BacsErrorsState>({});
+    const [valid, setValid] = useState<BacsValidState>({
+        ...(props.data.holderName && {
+            holderName: validator.validate('holderName', 'input')(props.data.holderName).isValid
+        }),
+        ...(props.data.bankAccountNumber && {
+            bankAccountNumber: validator.validate('bankAccountNumber', 'input')(props.data.bankAccountNumber).isValid
+        }),
+        ...(props.data.bankLocationId && {
+            bankLocationId: validator.validate('bankLocationId', 'input')(props.data.bankLocationId).isValid
+        }),
+        ...(props.data.shopperEmail && {
+            shopperEmail: validator.validate('shopperEmail', 'input')(props.data.shopperEmail).isValid
+        })
+    });
+
+    const [isValid, setIsValid] = useState(false);
+
+    this.showValidation = (): void => {
+        setErrors({
+            holderName: !validator.validate('holderName', 'blur')(data.holderName).isValid,
+            bankAccountNumber: !validator.validate('bankAccountNumber', 'blur')(data.bankAccountNumber).isValid,
+            bankLocationId: !validator.validate('bankLocationId', 'blur')(data.bankLocationId).isValid,
+            shopperEmail: !validator.validate('shopperEmail', 'blur')(data.shopperEmail).isValid,
+            amountConsentCheckbox: !data.amountConsentCheckbox,
+            accountConsentCheckbox: !data.accountConsentCheckbox
+        });
+    };
+
+    const handleEventFor = (key: string, mode: string) => (e: Event): void => {
+        const val: string = (e.target as HTMLInputElement).value;
+        const { value, isValid, showError }: ValidationObject = validator.validate(key, mode)(val);
+
+        setData({ ...data, [key]: value });
+        setErrors({ ...errors, [key]: !isValid && showError });
+        setValid({ ...valid, [key]: isValid });
+    };
+
+    const handleConsentCheckbox = (key: string) => (): void => {
+        const checked = !data[key];
+        setData(prevData => ({ ...prevData, [key]: checked }));
+        setValid(prevValid => ({ ...prevValid, [key]: checked }));
+        setErrors(prevErrors => ({ ...prevErrors, [key]: !checked }));
+    };
+
+    const handlePayButton = () => {
+        if (!isValid) {
+            this.showValidation();
+            return false;
+        }
+
+        if (status === ENTER_STATE) {
+            this.setStatus(CONFIRM_STATE);
+            return;
+        }
+
+        if (status === CONFIRM_STATE) {
+            props.onSubmit();
+        }
+    };
+
+    const handleEdit = () => {
+        this.setStatus(ENTER_STATE);
+        return;
+    };
+
+    useEffect(() => {
+        const pmIsValid =
+            valid.holderName &&
+            valid.bankAccountNumber &&
+            valid.bankLocationId &&
+            valid.shopperEmail &&
+            !!valid.amountConsentCheckbox &&
+            !!valid.accountConsentCheckbox;
+
+        setIsValid(pmIsValid);
+
+        props.onChange({
+            data,
+            isValid: pmIsValid
+        });
+    }, [data, valid]);
+
+    return (
+        <div
+            className={classNames({
+                'adyen-checkout__bacs': true,
+                'adyen-checkout__bacs--confirm': status === CONFIRM_STATE || status === 'loading'
+            })}
+        >
+            {status == CONFIRM_STATE && (
+                <div
+                    className={classNames({
+                        'adyen-checkout__bacs--edit': true,
+                        'adyen-checkout__bacs--edit-dropin': props.isDropin
+                    })}
+                >
+                    {renderFormField('text', {
+                        name: 'bacsEdit',
+                        className: 'adyen-checkout__bacs--edit-button',
+                        value: i18n.get('edit'),
+                        'aria-label': i18n.get('edit'),
+                        readonly: true,
+                        onClick: handleEdit
+                    })}
+                </div>
+            )}
+
+            <Field
+                className={classNames({
+                    'adyen-checkout__bacs--holder-name': true,
+                    'adyen-checkout__field--inactive': status === CONFIRM_STATE || status === 'loading'
+                })}
+                label={i18n.get('bacs.accountHolderName')}
+                errorMessage={errors.holderName ? i18n.get('bacs.accountHolderName.invalid') : false}
+                isValid={valid.holderName}
+            >
+                {renderFormField('text', {
+                    name: 'bacs.accountHolderName',
+                    className: 'adyen-checkout__bacs-input--holder-name',
+                    placeholder: props.placeholders.holderName,
+                    value: data.holderName,
+                    'aria-invalid': !valid.holderName,
+                    'aria-label': i18n.get('bacs.accountHolderName'),
+                    'aria-required': 'true',
+                    required: true,
+                    readonly: status === CONFIRM_STATE || status === 'loading',
+                    autocorrect: 'off',
+                    onChange: handleEventFor('holderName', 'blur'),
+                    onInput: handleEventFor('holderName', 'input')
+                })}
+            </Field>
+
+            <div className="adyen-checkout__bacs__num-id adyen-checkout__field-wrapper">
+                <Field
+                    errorMessage={!!errors.bankAccountNumber && i18n.get('bacs.accountNumber.invalid')}
+                    label={i18n.get('bacs.accountNumber')}
+                    className={classNames({
+                        'adyen-checkout__bacs--bank-account-number': true,
+                        'adyen-checkout__field--inactive': status === CONFIRM_STATE || status === 'loading'
+                    })}
+                    classNameModifiers={['col-70']}
+                    isValid={valid.bankAccountNumber}
+                >
+                    {renderFormField('text', {
+                        value: data.bankAccountNumber,
+                        className: 'adyen-checkout__bacs-input--bank-account-number',
+                        placeholder: props.placeholders.bankAccountNumber,
+                        'aria-invalid': !valid.bankAccountNumber,
+                        'aria-label': i18n.get('bacs.accountNumber'),
+                        'aria-required': 'true',
+                        required: true,
+                        readonly: status === CONFIRM_STATE || status === 'loading',
+                        autocorrect: 'off',
+                        onChange: handleEventFor('bankAccountNumber', 'blur'),
+                        onInput: handleEventFor('bankAccountNumber', 'input')
+                    })}
+                </Field>
+
+                <Field
+                    errorMessage={!!errors.bankLocationId && i18n.get('bacs.bankLocationId.invalid')}
+                    label={i18n.get('bacs.bankLocationId')}
+                    className={classNames({
+                        'adyen-checkout__bacs--bank-location-id': true,
+                        'adyen-checkout__field--inactive': status === CONFIRM_STATE || status === 'loading'
+                    })}
+                    classNameModifiers={['col-30']}
+                    isValid={valid.bankLocationId}
+                >
+                    {renderFormField('text', {
+                        value: data.bankLocationId,
+                        className: 'adyen-checkout__bacs-input--bank-location-id',
+                        placeholder: props.placeholders.bankLocationId,
+                        'aria-invalid': !valid.bankLocationId,
+                        'aria-label': i18n.get('bacs.bankLocationId'),
+                        'aria-required': 'true',
+                        required: true,
+                        readonly: status === CONFIRM_STATE || status === 'loading',
+                        autocorrect: 'off',
+                        onChange: handleEventFor('bankLocationId', 'blur'),
+                        onInput: handleEventFor('bankLocationId', 'input')
+                    })}
+                </Field>
+            </div>
+
+            <Field
+                errorMessage={!!errors.shopperEmail && i18n.get('bacs.shopperEmail.invalid')}
+                label={i18n.get('bacs.shopperEmail')}
+                className={classNames({
+                    'adyen-checkout__bacs--shopper-email': true,
+                    'adyen-checkout__field--inactive': status === CONFIRM_STATE || status === 'loading'
+                })}
+                isValid={valid.shopperEmail}
+            >
+                {renderFormField('emailAddress', {
+                    value: data.shopperEmail,
+                    name: 'shopperEmail',
+                    className: 'adyen-checkout__bacs-input--shopper-email',
+                    classNameModifiers: ['large'],
+                    placeholder: props.placeholders.shopperEmail,
+                    spellcheck: false,
+                    'aria-invalid': !valid.shopperEmail,
+                    'aria-label': i18n.get('bacs.shopperEmail'),
+                    'aria-required': 'true',
+                    required: true,
+                    readonly: status === CONFIRM_STATE || status === 'loading',
+                    autocorrect: 'off',
+                    onInput: handleEventFor('shopperEmail', 'input'),
+                    onChange: handleEventFor('shopperEmail', 'blur')
+                })}
+            </Field>
+
+            {status === ENTER_STATE && (
+                <ConsentCheckbox
+                    data={data}
+                    errorMessage={!!errors.amountConsentCheckbox}
+                    label={i18n.get('bacs.consent.amount')}
+                    onChange={handleConsentCheckbox('amountConsentCheckbox')}
+                    checked={!!data.amountConsentCheckbox}
+                />
+            )}
+
+            {status === ENTER_STATE && (
+                <ConsentCheckbox
+                    data={data}
+                    errorMessage={!!errors.accountConsentCheckbox}
+                    label={i18n.get('bacs.consent.account')}
+                    onChange={handleConsentCheckbox('accountConsentCheckbox')}
+                    checked={!!data.accountConsentCheckbox}
+                />
+            )}
+
+            {props.showPayButton &&
+                props.payButton({
+                    status,
+                    label:
+                        status === ENTER_STATE
+                            ? i18n.get('continue')
+                            : `${i18n.get('bacs.confirm')} ${
+                                  !!props.amount?.value && !!props.amount?.currency ? i18n.amount(props.amount.value, props.amount.currency) : ''
+                              }`,
+                    icon: getImage({ loadingContext: props.loadingContext, imageFolder: 'components/' })('lock'),
+                    onClick: handlePayButton
+                })}
+        </div>
+    );
+}
+
+BacsInput.defaultProps = {
+    data: {},
+    placeholders: {}
+};
+
+export default BacsInput;

packages/lib/src/components/BacsDD/components/BacsResult.scss

@@ -0,0 +1,6 @@
+@import '../../../style/index';
+
+.adyen-checkout__voucher-result__introduction {
+  font-size: $font-size-medium;
+  max-width: 420px;
+}