@adyen/adyen-web 5.36.0 → 5.37.0

package/dist/types/components/internal/CompanyDetails/CompanyDetails.d.ts

@@ -1,5 +1,6 @@
 import { h } from 'preact';
 import { CompanyDetailsProps } from './types';
+export declare const COMPANY_DETAILS_SCHEMA: string[];
 declare function CompanyDetails(props: CompanyDetailsProps): h.JSX.Element;
 declare namespace CompanyDetails {
     var defaultProps: {
@@ -7,12 +8,7 @@ declare namespace CompanyDetails {
         onChange: () => void;
         visibility: string;
         requiredFields: string[];
-        validationRules: {
-            default: {
-                validate: (value: any) => boolean;
-                modes: string[];
-            };
-        };
+        validationRules: import("../../../utils/Validator/types").ValidatorRules;
     };
 }
 export default CompanyDetails;

package/dist/types/components/internal/CompanyDetails/validate.d.ts

@@ -1,6 +1,2 @@
-export declare const companyDetailsValidationRules: {
-    default: {
-        validate: (value: any) => boolean;
-        modes: string[];
-    };
-};
+import { ValidatorRules } from '../../../utils/Validator/types';
+export declare const companyDetailsValidationRules: ValidatorRules;

package/dist/types/components/internal/FormFields/Field/types.d.ts

@@ -24,6 +24,7 @@ export interface FieldProps {
     isCollatingErrors?: boolean;
     useLabelElement?: boolean;
     i18n?: Language;
+    errorVisibleToScreenReader?: boolean;
 }
 export interface FieldState {
     disabled?: boolean;

package/dist/types/components/internal/FormFields/Select/Select.d.ts

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { SelectProps } from './types';
 import './Select.scss';
-declare function Select({ items, className, classNameModifiers, filterable, readonly, onChange, selected, name, isInvalid, isValid, placeholder, uniqueId, isCollatingErrors }: SelectProps): h.JSX.Element;
+declare function Select({ items, className, classNameModifiers, filterable, readonly, onChange, selected, name, isInvalid, isValid, placeholder, uniqueId, isCollatingErrors, disabled }: SelectProps): h.JSX.Element;
 declare namespace Select {
     var defaultProps: {
         className: string;

package/dist/types/components/internal/FormFields/Select/components/SelectList.d.ts

@@ -1,4 +1,4 @@
 import { h } from 'preact';
 import { SelectListProps } from '../types';
-declare function SelectList({ active, items, showList, textFilter, ...props }: SelectListProps): h.JSX.Element;
+declare function SelectList({ selected, active, filteredItems, showList, ...props }: SelectListProps): h.JSX.Element;
 export default SelectList;

package/dist/types/components/internal/FormFields/Select/components/SelectListItem.d.ts

@@ -1,4 +1,4 @@
 import { h } from 'preact';
 import { SelectItemProps } from '../types';
-declare const SelectListItem: ({ item, selected, ...props }: SelectItemProps) => h.JSX.Element;
+declare const SelectListItem: ({ item, active, selected, ...props }: SelectItemProps) => h.JSX.Element;
 export default SelectListItem;

package/dist/types/components/internal/FormFields/Select/types.d.ts

@@ -1,7 +1,7 @@
 export interface SelectItem {
     disabled?: boolean;
     icon?: string;
-    id: string;
+    id: string | number;
     name: string;
     secondaryText?: string;
     selectedOptionName?: string;
@@ -14,20 +14,29 @@ export interface SelectProps {
     isValid?: boolean;
     items: SelectItem[];
     name?: string;
-    onChange: (e: any) => void;
+    onChange: (e: {
+        target: {
+            value: string | number;
+            name: string;
+        };
+    }) => void;
     placeholder: string;
     readonly: boolean;
     selected: string;
     uniqueId?: string;
     isCollatingErrors: boolean;
+    disabled: boolean;
 }
 export interface SelectButtonProps {
+    inputText: string;
     active: SelectItem;
+    selected: SelectItem;
     filterInputRef: any;
     filterable: boolean;
     isInvalid: boolean;
     isValid?: boolean;
     onButtonKeyDown: (e: KeyboardEvent) => void;
+    onFocus: (e: Event) => void;
     onInput: (e: Event) => void;
     placeholder: string;
     readonly: boolean;
@@ -37,20 +46,22 @@ export interface SelectButtonProps {
     toggleList: (e: Event) => void;
     id?: string;
     ariaDescribedBy: string;
+    disabled: boolean;
 }
 export interface SelectListProps {
     active: SelectItem;
-    items: SelectItem[];
-    onKeyDown: (e: KeyboardEvent) => void;
+    filteredItems: SelectItem[];
+    onHover: (e: Event) => void;
     onSelect: (e: Event) => void;
+    selected: SelectItem;
     selectListId: string;
     selectListRef: any;
     showList: boolean;
-    textFilter: string;
 }
 export interface SelectItemProps {
+    active: boolean;
     item: SelectItem;
     selected: boolean;
-    onKeyDown: (e: KeyboardEvent) => void;
+    onHover: (e: Event) => void;
     onSelect: (e: Event) => void;
 }

package/dist/types/components/internal/FormFields/utils.d.ts

@@ -1,2 +1,8 @@
 declare const convertFullToHalf: (str: any) => any;
-export { convertFullToHalf };
+/**
+ * This function scrolls and element to view and simulates the default behaviour of .focus() by a given browser
+ * This function is inspired, yet simplified of the code found here https://gist.github.com/hsablonniere/2581101
+ * @param element - element to focus
+ */
+declare const simulateFocusScroll: (element: HTMLElement) => void;
+export { convertFullToHalf, simulateFocusScroll };

package/dist/types/components/internal/OpenInvoice/types.d.ts

@@ -3,6 +3,7 @@ import { CompanyDetailsSchema } from '../CompanyDetails/types';
 import { AddressSpecifications } from '../Address/types';
 import { UIElementProps } from '../../types';
 import UIElement from '../../UIElement';
+import { GenericError, ValidationRuleErrorObj } from '../../../core/Errors/types';
 export interface OpenInvoiceVisibility {
     companyDetails?: FieldsetVisibility;
     personalDetails?: FieldsetVisibility;
@@ -44,12 +45,12 @@ export interface OpenInvoiceStateData {
     consentCheckbox?: boolean;
 }
 export interface OpenInvoiceStateError {
-    consentCheckbox?: boolean;
-    companyDetails?: boolean;
-    billingAddress?: boolean;
-    deliveryAddress?: boolean;
-    personalDetails?: boolean;
-    bankAccount?: boolean;
+    consentCheckbox?: boolean | GenericError;
+    companyDetails?: boolean | ValidationRuleErrorObj;
+    billingAddress?: boolean | ValidationRuleErrorObj;
+    deliveryAddress?: boolean | ValidationRuleErrorObj;
+    personalDetails?: boolean | ValidationRuleErrorObj;
+    bankAccount?: boolean | object;
 }
 export interface OpenInvoiceStateValid {
     consentCheckbox?: boolean;

package/dist/types/components/internal/OpenInvoice/utils.d.ts

@@ -1,4 +1,12 @@
 import { OpenInvoiceActiveFieldsets, OpenInvoiceStateData, OpenInvoiceVisibility } from './types';
+import Language from '../../../language';
+import { StringObject } from '../Address/types';
 export declare const fieldsetsSchema: Array<keyof OpenInvoiceStateData>;
 export declare const getActiveFieldsData: (activeFieldsets: OpenInvoiceActiveFieldsets, data: OpenInvoiceStateData) => OpenInvoiceStateData;
 export declare const getInitialActiveFieldsets: (visibility: OpenInvoiceVisibility, data?: OpenInvoiceStateData) => OpenInvoiceActiveFieldsets;
+/**
+ * Used by the SRPanel sorting function to tell it whether we need to prepend the field type to the SR panel message, and, if so, we retrieve the correct translation for the field type.
+ * (Whether we need to prepend the field type depends on whether we know that the error message correctly reflects the label of the field. Ultimately all error messages should do this
+ * and this mapping fn will become redundant)
+ */
+export declare const mapFieldKey: (key: string, i18n: Language, countrySpecificLabels: StringObject) => string;

package/dist/types/components/internal/PersonalDetails/PersonalDetails.d.ts

@@ -1,6 +1,7 @@
 import { h } from 'preact';
 import { PersonalDetailsProps } from './types';
 import './PersonalDetails.scss';
+export declare const PERSONAL_DETAILS_SCHEMA: string[];
 declare function PersonalDetails(props: PersonalDetailsProps): h.JSX.Element;
 declare namespace PersonalDetails {
     var defaultProps: {

package/dist/types/components/internal/PersonalDetails/utils.d.ts

@@ -1,3 +1,4 @@
+import Language from '../../../language';
 export declare const getFormattedData: (data: any) => {
     telephoneNumber: any;
     shopperEmail: any;
@@ -8,3 +9,9 @@ export declare const getFormattedData: (data: any) => {
         firstName: any;
     };
 };
+/**
+ * Used by the SRPanel sorting function to tell it whether we need to prepend the field type to the SR panel message, and, if so, we retrieve the correct translation for the field type.
+ * (Whether we need to prepend the field type depends on whether we know that the error message correctly reflects the label of the field. Ultimately all error messages should do this
+ * and this mapping fn will become redundant)
+ */
+export declare const mapFieldKey: (key: string, i18n: Language) => string;

package/dist/types/components/internal/SecuredFields/SFP/SecuredFieldsProvider.d.ts

@@ -2,6 +2,7 @@ import { Component } from 'preact';
 import { SFPProps, SFPState, SingleBrandResetObject } from './types';
 import { StylesObject, CbObjOnError } from '../lib/types';
 import { BinLookupResponse } from '../../../Card/types';
+import { SFStateErrorObj } from '../../../Card/components/CardInput/types';
 /**
  * SecuredFieldsProvider:
  * Initialises & handles the client-side part of SecuredFields
@@ -66,7 +67,7 @@ declare class SecuredFieldsProvider extends Component<SFPProps, SFPState> {
     /**
      * Map SF errors to ValidationRuleResult-like objects, for CardInput component
      */
-    mapErrorsToValidationRuleResult(): object;
+    mapErrorsToValidationRuleResult(): SFStateErrorObj;
     processBinLookupResponse(binLookupResponse: BinLookupResponse, resetObject: SingleBrandResetObject): void;
     private setRootNode;
     render(props: any, state: any): any;

package/dist/types/components/internal/SecuredFields/SFP/types.d.ts

@@ -17,7 +17,6 @@ export interface SFPProps {
     hasKoreanFields?: boolean;
     i18n: Language;
     implementationType?: string;
-    isCollatingErrors?: boolean;
     keypadFix?: boolean;
     koreanAuthenticationRequired?: boolean;
     legacyInputMode?: boolean;

package/dist/types/components/internal/SecuredFields/lib/CSF/types.d.ts

@@ -34,7 +34,6 @@ interface CSFCommonProps {
     legacyInputMode?: boolean;
     minimumExpiryDate?: string;
     implementationType?: 'components' | 'custom';
-    isCollatingErrors?: boolean;
     maskSecurityCode: boolean;
     disableIOSArrowKeys: boolean;
 }

package/dist/types/components/internal/SecuredFields/lib/securedField/AbstractSecuredField.d.ts

@@ -22,7 +22,6 @@ export interface SFInternalConfig {
     legacyInputMode: boolean;
     minimumExpiryDate: string;
     implementationType: string;
-    isCollatingErrors: boolean;
     maskSecurityCode: boolean;
     disableIOSArrowKeys: boolean;
 }

package/dist/types/components/types.d.ts

@@ -5,6 +5,7 @@ import Analytics from '../core/Analytics';
 import RiskElement from '../core/RiskModule';
 import { PayButtonProps } from './internal/PayButton/PayButton';
 import Session from '../core/CheckoutSession';
+import { SRPanel } from '../core/Errors/SRPanel';
 export interface PaymentMethodData {
     paymentMethod: {
         [key: string]: any;
@@ -50,6 +51,7 @@ export interface BaseElementProps {
     _parentInstance?: Core;
     order?: Order;
     modules?: {
+        srPanel: SRPanel;
         analytics: Analytics;
         risk: RiskElement;
     };

package/dist/types/core/Errors/SRMessages.d.ts

@@ -0,0 +1,6 @@
+import { h } from 'preact';
+import { SRMessagesProps } from './types';
+export interface SRMessagesRef {
+    setMessages?: (who: string[]) => void;
+}
+export declare function SRMessages({ setComponentRef }: SRMessagesProps): h.JSX.Element;

package/dist/types/core/Errors/SRPanel.d.ts

@@ -0,0 +1,28 @@
+import { h } from 'preact';
+import './SRPanel.scss';
+import { SRPanelProps } from './types';
+import BaseElement from '../../components/BaseElement';
+/**
+ * A panel meant to hold messages that will be read out by ScreenReaders on an aria-live="polite" basis
+ * Expects a string or string array of message to add to the panel to be read out
+ * For testing purposes can be made visible
+ */
+export declare class SRPanel extends BaseElement<SRPanelProps> {
+    static defaultProps: {
+        enabled: boolean;
+        node: string;
+        showPanel: boolean;
+    };
+    private readonly srPanelContainer;
+    private readonly id;
+    private readonly showPanel;
+    private readonly _enabled;
+    private readonly _moveFocus;
+    private componentRef;
+    constructor(props: SRPanelProps);
+    setComponentRef: (ref: any) => void;
+    get enabled(): boolean;
+    get moveFocus(): boolean;
+    setMessages: (messages: string[] | string) => void;
+    render(): h.JSX.Element;
+}

package/dist/types/core/Errors/SRPanelContext.d.ts

@@ -0,0 +1,12 @@
+import { SRPanel } from './SRPanel';
+import { SetSRMessagesReturnFn } from './SRPanelProvider';
+export interface ISRPanelContext {
+    srPanel: SRPanel;
+    setSRMessagesFromObjects: ({ fieldTypeMappingFn }: {
+        fieldTypeMappingFn: any;
+    }) => SetSRMessagesReturnFn;
+    setSRMessagesFromStrings: (strs: any) => void;
+    clearSRPanel: () => void;
+    shouldMoveFocusSR: boolean;
+}
+export declare const SRPanelContext: import("preact").Context<ISRPanelContext>;

package/dist/types/core/Errors/SRPanelProvider.d.ts

@@ -0,0 +1,15 @@
+import { h, ComponentChildren } from 'preact';
+import { SRPanel } from './SRPanel';
+import { SetSRMessagesReturnObject } from './types';
+type SRPanelProviderProps = {
+    srPanel: SRPanel;
+    children: ComponentChildren;
+};
+export type SetSRMessagesReturnFn = ({ errors, isValidating, layout, countrySpecificLabels }: {
+    errors: any;
+    isValidating: any;
+    layout?: any;
+    countrySpecificLabels?: any;
+}) => SetSRMessagesReturnObject;
+declare const SRPanelProvider: ({ srPanel, children }: SRPanelProviderProps) => h.JSX.Element;
+export default SRPanelProvider;

package/dist/types/core/Errors/constants.d.ts

@@ -67,3 +67,5 @@ export declare const EMPTY_FIELD_ERROR_MESSAGES: {
     encryptedBankAccountNumber: string;
     encryptedBankLocationId: string;
 };
+export declare const ERROR_ACTION_FOCUS_FIELD = "focusField";
+export declare const ERROR_ACTION_BLUR_SCENARIO = "notValidating:blurScenario";

package/dist/types/core/Errors/types.d.ts

@@ -1,5 +1,42 @@
+import { ValidationRuleResult } from '../../utils/Validator/ValidationRuleResult';
+import { SFError } from '../../components/Card/components/CardInput/types';
+import Language from '../../language';
+import { StringObject } from '../../components/internal/Address/types';
+import { BaseElementProps } from '../../components/types';
+export interface ErrorObj {
+    [key: string]: ValidationRuleResult | SFError;
+}
+export interface ValidationRuleErrorObj {
+    [key: string]: ValidationRuleResult;
+}
+export interface SortErrorsObj {
+    errors: ErrorObj;
+    layout?: string[];
+    i18n: Language;
+    countrySpecificLabels?: StringObject;
+    fieldTypeMappingFn?: (key: string, i18n: Language, countrySpecificLabels: StringObject) => string;
+}
+export interface SortedErrorObject {
+    field: string;
+    errorMessage: string;
+    errorCode: string;
+}
+export interface SRPanelProps extends BaseElementProps {
+    enabled?: boolean;
+    node?: string;
+    showPanel?: boolean;
+    moveFocus?: boolean;
+}
+export interface SRMessagesProps {
+    setComponentRef: (ref: any) => void;
+}
 export interface GenericError {
-    isValid?: boolean;
+    isValid: boolean;
     errorMessage: string;
     error: string;
 }
+export interface SetSRMessagesReturnObject {
+    currentErrorsSortedByLayout: SortedErrorObject[];
+    action: string;
+    fieldToFocus?: string;
+}

package/dist/types/core/Errors/useSRPanelContext.d.ts

@@ -0,0 +1,3 @@
+import { ISRPanelContext } from './SRPanelContext';
+declare function useSRPanelContext(): ISRPanelContext;
+export default useSRPanelContext;

package/dist/types/core/Errors/utils.d.ts

@@ -1,3 +1,4 @@
+import { SortErrorsObj, SortedErrorObject, SetSRMessagesReturnObject } from './types';
 /**
  * Access items stored in the ERROR_CODES object by either sending in the key - in which case you get the value
  * or by sending in the value - in which case you get the key
@@ -13,3 +14,30 @@ export declare const addAriaErrorTranslationsObject: (i18n: any) => {};
  * @returns a duplicate of the original object with a new property: "error" whose value is a object containing the translated errors
  */
 export declare const addErrorTranslationsToObject: (originalObj: any, i18n: any) => any;
+/**
+ * sortErrorsByLayout - takes a list of errors and a layout, and returns a sorted array of error objects with translated error messages
+ *
+ * @param errors - an object containing errors, referenced by field type
+ * @param layout - a string[] controlling how the output error objects will be ordered. Required when it is known that the way the error object is populated can vary e.g. Card comp, &/or anything with a country selector
+ * @param i18n - our internal Language mechanism
+ * @param countrySpecificLabels - some errors are region specific, e.g. in the US "postal code" = "zip code", so map the fieldType value accordingly (if it is being added to the errorMessage string)
+ * @param fieldTypeMappingFn - a component specific lookup function that will tell us both if we need to prepend the field type to the SR panel message, and, if so, will retrieve the correct translation for the field type
+ */
+export declare const sortErrorsByLayout: ({ errors, i18n, layout, countrySpecificLabels, fieldTypeMappingFn }: SortErrorsObj) => SortedErrorObject[];
+/**
+ * Implemented as a partial, with an object containing the first 6 arguments; then the final argument, errors, is passed to the partial
+ *
+ * NOTE: using this generic error setting fny is only suitable when errors for the SRPanel are *only* generated by showValidation().
+ * When errors are also generated onBlur, as the user leaves the input, the SR message generation becomes more complex - see CardInput as an example
+ */
+export declare const setSRMessagesFromErrors: ({ i18n, fieldTypeMappingFn, SRPanelRef }: {
+    i18n: any;
+    fieldTypeMappingFn: any;
+    SRPanelRef: any;
+}, { errors, isValidating, layout, countrySpecificLabels }: {
+    errors: any;
+    isValidating: any;
+    layout: any;
+    countrySpecificLabels: any;
+}) => SetSRMessagesReturnObject;
+export declare const enhanceErrorObjectKeys: (errorObj: any, keyPrefix: any) => {};

package/dist/types/language/config.d.ts

@@ -52,7 +52,10 @@ export declare const defaultTranslation: {
     personalDetails: string;
     companyDetails: string;
     "companyDetails.name": string;
+    "companyDetails.name.invalid": string;
     "companyDetails.registrationNumber": string;
+    "companyDetails.registrationNumber.invalid": string;
+    "consent.checkbox.invalid": string;
     socialSecurityNumber: string;
     firstName: string;
     "firstName.invalid": string;