@wise/dynamic-flow-client 5.11.0 → 5.12.0

package/build/useDynamicFlow.js

@@ -1,104 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useIntl } from 'react-intl';
-import ErrorBoundary from './common/errorBoundary/ErrorBoundary';
-import { createFlowController } from './controller/FlowController';
-import { getErrorMessage } from './controller/getErrorMessage';
-import { FeatureFlags } from './domain/mappers/utils/FeatureFlags';
-import { CoreContainerRenderer } from './renderers/CoreContainerRenderer';
-import { EmptyLoadingStateRenderer } from './renderers/EmptyLoadingStateRenderer';
-import { CoreRootRenderer } from './renderers/CoreRootRenderer';
-import { getRenderFunction } from './renderers/getRenderFunction';
-import { getSchemaErrorMessageFunction } from './renderers/getSchemaErrorMessageFunction';
-import { componentToRendererProps } from './renderers/mappers/componentToRendererProps';
-import { getScrollToTop } from './utils/getScrollToTop';
-import { normaliseFlowId } from './utils/normalise-flow-id';
-import { useStableCallback } from './utils/useStableCallback';
-const className = 'dynamic-flow';
-const noop = () => { };
-/**
- * @experimental This hook may be changed or removed in the future without notice.
- */
-export function useDynamicFlow(props) {
-    var _a;
-    const { flowId, renderers } = props;
-    const normalisedFlowId = normaliseFlowId(flowId);
-    const scrollToTop = useMemo(() => getScrollToTop(normalisedFlowId, className), [normalisedFlowId]);
-    const features = useMemo(() => {
-        var _a;
-        return new FeatureFlags((_a = props.features) !== null && _a !== void 0 ? _a : {});
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    const rerender = useRerender();
-    const httpClient = useStableCallback(props.httpClient);
-    const onCancellation = useStableCallback(props.onCancellation);
-    const onCompletion = useStableCallback(props.onCompletion);
-    const onCopy = useStableCallback(props.onCopy);
-    const onLink = useStableCallback(props.onLink);
-    const onError = useStableCallback(props.onError);
-    const onEvent = useStableCallback(props.onEvent);
-    const onLog = useStableCallback(props.onLog);
-    const onValueChange = noop;
-    const { formatMessage, locale } = useIntl();
-    const getErrorMessageFunctions = useMemo(() => getSchemaErrorMessageFunction(formatMessage, locale), [formatMessage, locale]);
-    const { rootComponent, cancel } = useFlowController(Object.assign(Object.assign({}, props), { features, backConfig: {
-            isNativeBackEnabled: features.isEnabled('nativeBack'),
-            isFlowCancellable: Boolean(props.onCancellation),
-        }, getErrorMessageFunctions,
-        httpClient, onChange: rerender, onCancellation,
-        onCompletion,
-        onCopy,
-        onLink,
-        onError,
-        onEvent,
-        onLog,
-        onValueChange,
-        scrollToTop }));
-    const render = useMemo(() => getRenderFunction([
-        CoreRootRenderer,
-        CoreContainerRenderer,
-        ...renderers,
-        EmptyLoadingStateRenderer,
-    ]), [renderers]);
-    const tree = componentToRendererProps(rootComponent, {
-        features,
-        render,
-        httpClient,
-        trackEvent: (_a = rootComponent.getTrackEvent()) !== null && _a !== void 0 ? _a : (() => { }),
-        stepLoadingState: rootComponent.getLoadingState(),
-    });
-    return {
-        controller: {
-            getSubmittableValue: async () => rootComponent.getSubmittableValue(),
-            validate: () => rootComponent.validate(),
-            cancel,
-        },
-        view: (_jsx(ErrorBoundary, { onError: (error) => {
-                onEvent === null || onEvent === void 0 ? void 0 : onEvent('Dynamic Flow - Failed', { error });
-                onError === null || onError === void 0 ? void 0 : onError(error);
-                onLog === null || onLog === void 0 ? void 0 : onLog('error', 'Dynamic Flow - ErrorBoundary', {
-                    errorMessage: getErrorMessage(error),
-                });
-            }, children: _jsx("div", { id: normalisedFlowId, className: className, children: render(tree) }) })),
-    };
-}
-const useRerender = () => {
-    const [, setState] = useState({});
-    return useCallback(() => setState({}), []);
-};
-/**
- * This hook ensures that the FlowController is only created once
- * and is properly stopped when the component using this hook is unmounted.
- * @param props
- * @returns
- */
-const useFlowController = (props) => {
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const df = useMemo(() => createFlowController(props), []);
-    useEffect(() => {
-        df.start();
-        return () => df.rootComponent.stop();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    return df;
-};

package/build/useDynamicFlowModal.js

@@ -1,58 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { useDynamicFlow } from '.';
-import { useState } from 'react';
-export const useDynamicFlowModal = (props) => {
-    const { renderers, onCompletion, onError, onCancellation, onEvent, onLink } = props, rest = __rest(props, ["renderers", "onCompletion", "onError", "onCancellation", "onEvent", "onLink"]);
-    const [state, setState] = useState({ type: 'initial' });
-    const df = useDynamicFlow(Object.assign(Object.assign({}, rest), { onCompletion: (result) => {
-            setState({ type: 'completed', result });
-            // if the success happens during initial load (initial response is exiting)
-            // we need to call onCompletion here, because onUnmount won't be called
-            if (state.type === 'initial') {
-                onCompletion(result);
-            }
-        }, onError: (error, status) => {
-            setState({ type: 'error', error, status });
-            // if the error happens during initial load
-            // we need to call onError here,
-            // because onUnmount won't be called
-            if (state.type === 'initial') {
-                onError(error, status);
-            }
-        }, onEvent: (name, properties) => {
-            if (name === 'Dynamic Flow - Step Shown') {
-                setState({ type: 'in-progress' });
-            }
-            onEvent === null || onEvent === void 0 ? void 0 : onEvent(name, properties);
-        }, renderers, onLink: onLink !== null && onLink !== void 0 ? onLink : (() => true) }));
-    const onUnmount = () => {
-        switch (state.type) {
-            case 'completed':
-                onCompletion(state.result);
-                break;
-            case 'error':
-                onError(state.error, state.status);
-                break;
-            case 'initial':
-            case 'in-progress':
-            case 'cancelled': {
-                df.controller.cancel();
-                onCancellation === null || onCancellation === void 0 ? void 0 : onCancellation();
-            }
-        }
-    };
-    const onClose = () => {
-        setState({ type: 'cancelled' });
-    };
-    return Object.assign(Object.assign({}, df), { modal: { body: df.view, open: state.type === 'in-progress', onClose, onUnmount } });
-};

package/build/utils/analyse-step.js

@@ -1,14 +0,0 @@
-import { validateStep } from '@wise/dynamic-flow-types/spec';
-export const analyseStep = (step, logEvent) => {
-    validateStepTypes(step, logEvent);
-};
-const validateStepTypes = (step, logEvent) => {
-    var _a;
-    const validationResult = validateStep(step);
-    if (!validationResult.valid) {
-        logEvent('info', 'The provided step does not conform to the specification.', {
-            stepId: (_a = step.id) !== null && _a !== void 0 ? _a : step.key,
-            errors: validationResult.errors,
-        });
-    }
-};

package/build/utils/component-utils.js

@@ -1,8 +0,0 @@
-import { recursiveMerge } from './recursiveMerge';
-export const getSubmittableData = async (components) => Promise.all(components.map(async (component) => component.getSubmittableValue())).then((values) => values.reduce((acc, value) => recursiveMerge(acc, value), null));
-export const getSubmittableDataSync = (components) => components
-    .map((component) => component.getSubmittableValueSync())
-    .reduce((acc, value) => recursiveMerge(acc, value), null);
-export const getLocalValues = (components) => components
-    .map((component) => component.getLocalValue())
-    .reduce((acc, value) => recursiveMerge(acc, value), null);

package/build/utils/component-utils.test.js

@@ -1,113 +0,0 @@
-import { createObjectComponent } from '../domain/components/ObjectComponent';
-import { createMockTextInputComponent } from '../test-utils/component-utils';
-import { getSubmittableData, getSubmittableDataSync } from './component-utils';
-describe('getSubmittableData and getSubmittableDataSync', () => {
-    it('should return null if no components', async () => {
-        expect(await getSubmittableData([])).toBeNull();
-        expect(getSubmittableDataSync([])).toBeNull();
-    });
-    it('should return data from object schemas', async () => {
-        const components = [
-            createObjectComponent({
-                uid: '0',
-                displayOrder: ['name', 'email'],
-                componentMap: {
-                    name: createMockTextInputComponent({
-                        uid: '0.0',
-                        id: 'name',
-                        value: 'Florence Jones',
-                    }),
-                    email: createMockTextInputComponent({
-                        uid: '0.1',
-                        id: 'email',
-                        value: 'florencejones@fake.com',
-                    }),
-                },
-                hidden: false,
-                summariser: () => ({}),
-            }),
-        ];
-        const expected = {
-            name: 'Florence Jones',
-            email: 'florencejones@fake.com',
-        };
-        expect(await getSubmittableData(components)).toStrictEqual(expected);
-        expect(getSubmittableDataSync(components)).toStrictEqual(expected);
-    });
-    it('should take the last valid value, if components are not mergeable', async () => {
-        const components = [
-            createMockTextInputComponent({
-                uid: '0',
-                id: 'name',
-                value: 'Florence Jones',
-            }),
-            createMockTextInputComponent({
-                uid: '1',
-                id: 'email',
-                value: 'florencejones@fake.com',
-            }),
-        ];
-        expect(await getSubmittableData(components)).toBe('florencejones@fake.com');
-        expect(getSubmittableDataSync(components)).toBe('florencejones@fake.com');
-    });
-    it('should ignore fields with no value', async () => {
-        const components = [
-            createMockTextInputComponent({
-                uid: '0',
-                id: 'name',
-                value: 'Florence Jones',
-            }),
-            createMockTextInputComponent({
-                uid: '1',
-                id: 'email',
-                value: null,
-            }),
-        ];
-        expect(await getSubmittableData(components)).toBe('Florence Jones');
-        expect(getSubmittableDataSync(components)).toBe('Florence Jones');
-    });
-    it('should merge data from nested components', async () => {
-        const components = [
-            createObjectComponent({
-                uid: '0',
-                displayOrder: ['name', 'bankInfo'],
-                componentMap: {
-                    name: createMockTextInputComponent({
-                        uid: '0.0',
-                        id: 'name',
-                        value: 'Florence Jones',
-                    }),
-                    bankInfo: createObjectComponent({
-                        uid: '0.1',
-                        displayOrder: ['accountNumber', 'sortCode'],
-                        componentMap: {
-                            accountNumber: createMockTextInputComponent({
-                                uid: '0.1.0',
-                                id: 'account',
-                                value: '12345678',
-                            }),
-                            sortCode: createMockTextInputComponent({
-                                uid: '0.1.1',
-                                id: 'sortCode',
-                                value: '04-00-04',
-                            }),
-                        },
-                        hidden: false,
-                        summariser: () => ({}),
-                    }),
-                },
-                hidden: false,
-                summariser: () => ({}),
-            }),
-        ];
-        const expected = {
-            name: 'Florence Jones',
-            bankInfo: {
-                accountNumber: '12345678',
-                sortCode: '04-00-04',
-            },
-        };
-        expect(await getSubmittableData(components)).toStrictEqual(expected);
-        expect(getSubmittableDataSync(components)).toStrictEqual(expected);
-    });
-});

package/build/utils/getScrollToTop.js

@@ -1,12 +0,0 @@
-export const getScrollToTop = (normalisedFlowId, className) => (behavior) => {
-    var _a;
-    const element = document.querySelector(`div#${normalisedFlowId}.${className}`);
-    if (!element || !window) {
-        return;
-    }
-    const rect = element.getBoundingClientRect();
-    const isInView = rect.top >= 0 && rect.top <= window.innerHeight;
-    if (!isInView) {
-        (_a = element.scrollIntoView) === null || _a === void 0 ? void 0 : _a.call(element, { behavior });
-    }
-};

package/build/utils/normalise-flow-id.js

@@ -1 +0,0 @@
-export const normaliseFlowId = (flowId) => flowId.toLowerCase().replace(/[^a-z-]/g, '-');

package/build/utils/normalise-flow-id.test.js

@@ -1,24 +0,0 @@
-import { normaliseFlowId } from './normalise-flow-id';
-describe('normaliseFlowId', () => {
-    describe('when given an id with spaces and capitals', () => {
-        it('replaces with dashes', () => {
-            const flowId = 'my flow id';
-            const result = normaliseFlowId(flowId);
-            expect(result).toBe('my-flow-id');
-        });
-    });
-    describe('when given an id with other special characters', () => {
-        it('removes them', () => {
-            const flowId = 'flow#id.classname';
-            const result = normaliseFlowId(flowId);
-            expect(result).toBe('flow-id-classname');
-        });
-    });
-    describe('when given an id with capital letters', () => {
-        it('replaces them with lowercase', () => {
-            const flowId = 'MyFlowId';
-            const result = normaliseFlowId(flowId);
-            expect(result).toBe('myflowid');
-        });
-    });
-});

package/build/utils/recursiveMerge.js

@@ -1,40 +0,0 @@
-/**
- * Recursively merges two local values.
- * If both values are objects, it merges their properties.
- * If both values are arrays, it merges their elements.
- * Otherwise, it returns the second value.
- *
- * This function works with both LocalValue and JsonElement types.
- * But, only because JsonElement is assignable to LocalValue.
- */
-export function recursiveMerge(valueA, valueB) {
-    if (valueA === null) {
-        return valueB;
-    }
-    if (valueB === null) {
-        return valueA;
-    }
-    if (isObject(valueA) && isObject(valueB)) {
-        return mergeObjects(valueA, valueB);
-    }
-    if (Array.isArray(valueA) && Array.isArray(valueB)) {
-        return mergeArrays(valueA, valueB);
-    }
-    return valueB;
-}
-function isObject(value) {
-    return (value != null && typeof value === 'object' && !Array.isArray(value) && !(value instanceof File));
-}
-function mergeObjects(valueA, valueB) {
-    const allKeys = new Set([...Object.keys(valueA), ...Object.keys(valueB)]);
-    const entries = Array.from(allKeys).map((key) => {
-        var _a, _b;
-        const value = recursiveMerge((_a = valueA[key]) !== null && _a !== void 0 ? _a : null, (_b = valueB[key]) !== null && _b !== void 0 ? _b : null);
-        return [key, value];
-    });
-    return Object.fromEntries(entries);
-}
-function mergeArrays(valueA, valueB) {
-    const length = Math.max(valueA.length, valueB.length);
-    return Array.from({ length }, (_, index) => { var _a, _b; return recursiveMerge((_a = valueA[index]) !== null && _a !== void 0 ? _a : null, (_b = valueB[index]) !== null && _b !== void 0 ? _b : null); });
-}

package/build/utils/recursiveMerge.test.js

@@ -1,93 +0,0 @@
-import { recursiveMerge } from './recursiveMerge';
-describe('Recursive Merge', () => {
-    it('when merging with null, returns current value', () => {
-        const a = true;
-        const b = null;
-        const result = recursiveMerge(a, b);
-        expect(result).toEqual(a);
-    });
-    it('when merging with different type, returns new value', () => {
-        const a = true;
-        const b = 'Overridden';
-        const result = recursiveMerge(a, b);
-        expect(result).toEqual(b);
-    });
-    it('when merging object with object, returns combined object', () => {
-        const a = { prop1: 'value1' };
-        const b = { prop2: 'value2' };
-        const result = recursiveMerge(a, b);
-        expect(result).toEqual({
-            prop1: 'value1',
-            prop2: 'value2',
-        });
-    });
-    it('when merging object with object, performs a deep merge', () => {
-        const a = { prop1: { prop2: 'value2' } };
-        const b = { prop1: { prop3: 'value3' } };
-        const result = recursiveMerge(a, b);
-        expect(result).toEqual({
-            prop1: {
-                prop2: 'value2',
-                prop3: 'value3',
-            },
-        });
-    });
-    it('when merging empty arrays, returns empty array', () => {
-        const a = [];
-        const b = [];
-        const result = recursiveMerge(a, b);
-        expect(result).toEqual([]);
-    });
-    it('when merging arrays, returns merged array', () => {
-        const a = [null, { prop1: 'value1' }, { prop3: 'value3' }, { prop5: 'value5' }];
-        const b = [{ prop7: 'value7' }, null, { prop3: 'value8' }];
-        const result = recursiveMerge(a, b);
-        expect(result).toEqual([
-            { prop7: 'value7' },
-            { prop1: 'value1' },
-            { prop3: 'value8' },
-            { prop5: 'value5' },
-        ]);
-    });
-    it('when merging arrays in reverse order, maintains correct merging behavior', () => {
-        const a = [null, { prop1: 'value1' }, { prop3: 'value3' }, { prop5: 'value5' }];
-        const b = [{ prop7: 'value7' }, null, { prop3: 'value8' }];
-        const result = recursiveMerge(b, a);
-        expect(result).toEqual([
-            { prop7: 'value7' },
-            { prop1: 'value1' },
-            { prop3: 'value3' },
-            { prop5: 'value5' },
-        ]);
-    });
-    it('when a is null and b is not null, returns b', () => {
-        const a = null;
-        const b = { key: 'value' };
-        const result = recursiveMerge(a, b);
-        expect(result).toEqual(b);
-    });
-    it('when both a and b are null, returns null', () => {
-        const a = null;
-        const b = null;
-        const result = recursiveMerge(a, b);
-        expect(result).toBeNull();
-    });
-    it('when merging arrays with different lengths, handles undefined values correctly', () => {
-        const a = [1, 2, 3];
-        const b = [4, 5];
-        const result = recursiveMerge(a, b);
-        expect(result).toEqual([4, 5, 3]);
-    });
-    it('when merging nested objects within arrays, properly merges the nested objects', () => {
-        const a = [{ nested: { prop1: 'value1' } }];
-        const b = [{ nested: { prop2: 'value2' } }];
-        const result = recursiveMerge(a, b);
-        expect(result).toEqual([{ nested: { prop1: 'value1', prop2: 'value2' } }]);
-    });
-    it('when merging File instances, returns the second instance', () => {
-        const a = new File(['content'], 'fileA.txt', { type: 'text/plain' });
-        const b = new File(['content'], 'fileB.txt', { type: 'text/plain' });
-        const result = recursiveMerge(a, b);
-        expect(result).toBe(b);
-    });
-});

package/build/utils/type-utils.js

@@ -1,21 +0,0 @@
-import { isArray, isNullish, isObject } from './type-validators';
-export const hasChildren = (component) => 'getChildren' in component && typeof component.getChildren === 'function';
-export const isHiddenComponent = (component) => 'hidden' in component && component.hidden;
-export const isObjectLocalValue = (value) => value != null && typeof value === 'object' && !Array.isArray(value) && !(value instanceof File);
-export const isArrayLocalValue = (value) => Array.isArray(value);
-export const isObjectModel = (model) => model != null && typeof model === 'object' && !Array.isArray(model);
-export const isArrayModel = (model) => Array.isArray(model);
-export const isAllOfSchema = (schema) => 'allOf' in schema && !isNullish(schema.allOf);
-export const isBooleanSchema = (schema) => 'type' in schema && schema.type === 'boolean';
-export const isBlobSchema = (schema) => 'type' in schema && schema.type === 'blob';
-export const isConstSchema = (schema) => 'const' in schema && schema.const !== undefined;
-export const isIntegerSchema = (schema) => 'type' in schema && schema.type === 'integer';
-export const isNumberSchema = (schema) => 'type' in schema && schema.type === 'number';
-export const isObjectSchema = (schema) => 'type' in schema && schema.type === 'object';
-export const isOneOfSchema = (schema) => 'oneOf' in schema && !isNullish(schema.oneOf);
-export const isArraySchema = (schema) => 'items' in schema && !isNullish(schema.items);
-export const isArrayListSchema = (schema) => 'items' in schema && isObject(schema.items) && !isArray(schema.items);
-export const isArrayTupleSchema = (schema) => 'items' in schema && !isObject(schema.items) && isArray(schema.items);
-export const isStringSchema = (schema) => 'type' in schema && schema.type === 'string';
-export const isStringSchemaWithUpload = (schema) => isStringSchema(schema) && schema.format === 'base64url';
-export const isSchemaWithPersistAsync = (schema) => 'persistAsync' in schema && !isNullish(schema.persistAsync);

package/build/utils/type-validators.js

@@ -1,11 +0,0 @@
-export const isString = (value) => typeof value === 'string';
-export const isNumber = (value) => typeof value === 'number' && !Number.isNaN(value);
-export const isInteger = (value) => isNumber(value) && Math.floor(value) === value;
-export const isBoolean = (value) => typeof value === 'boolean';
-export const isObject = (value) => !isNullish(value) && (value === null || value === void 0 ? void 0 : value.constructor) === Object;
-export const isArray = (value) => Array.isArray(value);
-export const isNull = (value) => value === null;
-export const isUndefined = (value) => typeof value === 'undefined';
-export const isNullish = (v) => isNull(v) || isUndefined(v);
-export const isFile = (value) => value instanceof File;
-export const isValidDate = (value) => isString(value) && /^\d{4}-\d{2}-\d{2}$/.test(value);