@wise/dynamic-flow-client 5.9.2-logging-bf0bd22 → 5.9.2

package/build/useDynamicFlow.js

@@ -0,0 +1,104 @@
+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

@@ -0,0 +1,58 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,113 @@
+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

@@ -0,0 +1,12 @@
+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

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

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

@@ -0,0 +1,24 @@
+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/openLinkInNewTab.js

@@ -0,0 +1,10 @@
+export const openLinkInNewTab = (url) => {
+    var _a;
+    try {
+        const w = (_a = window === null || window === void 0 ? void 0 : window.open) === null || _a === void 0 ? void 0 : _a.call(window, url, '_blank');
+        return Boolean(w);
+    }
+    catch (_b) {
+        return false;
+    }
+};

package/build/utils/recursiveMerge.js

@@ -0,0 +1,40 @@
+/**
+ * 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

@@ -0,0 +1,93 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,11 @@
+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);