@wise/dynamic-flow-client 5.25.1 → 5.25.2

package/build/controller/executeRequest.js

@@ -0,0 +1,93 @@
+import { handleErrorResponse } from './handleErrorResponse';
+import { getResponseType } from './getResponseType';
+import { assertActionResponseBody, assertModalResponseBody, assertStepResponseBody, assertSubflowResponseBody, parseResponseBodyAsJsonElement, } from './response-utils';
+import { makeSafeHttpClient } from './makeSafeHttpClient';
+import { normaliseBehavior } from '../domain/mappers/utils/behavior-utils';
+export const executeRequest = async (props) => {
+    const { isInitial, exit, request, requestCache, httpClient, trackEvent, logEvent } = props;
+    const { url, method, body } = request;
+    const response = await getCachedOrFetch([
+        url,
+        {
+            method,
+            body: body != null ? JSON.stringify(body) : undefined,
+            headers: { 'Content-Type': 'application/json' },
+        },
+    ], requestCache, httpClient);
+    if (!response) {
+        const extra = { errorMessage: 'Network Error' };
+        trackEvent('Request Failed', extra);
+        logEvent('error', 'Dynamic Flow - Request Failed Unexpectedly', extra);
+        return { type: 'error' };
+    }
+    if (!response.ok) {
+        return handleErrorResponse(response, undefined, trackEvent);
+    }
+    const responseBody = await parseResponseBodyAsJsonElement(response);
+    const responseType = getResponseType(response.headers, responseBody);
+    if (exit) {
+        return { type: 'complete', result: responseBody };
+    }
+    switch (responseType) {
+        case 'step': {
+            const etag = response.headers.get('etag') || null;
+            assertStepResponseBody(responseBody);
+            return { type: 'replace-step', step: responseBody, etag };
+        }
+        case 'exit': {
+            return { type: 'complete', result: responseBody };
+        }
+        case 'action': {
+            assertActionResponseBody(responseBody);
+            return {
+                type: 'behavior',
+                behavior: {
+                    type: 'action',
+                    action: responseBody.action,
+                    track: false,
+                },
+            };
+        }
+        case 'subflow': {
+            assertSubflowResponseBody(responseBody);
+            return !isInitial
+                ? {
+                    type: 'behavior',
+                    behavior: Object.assign(Object.assign({}, responseBody), { type: 'subflow', onCompletion: responseBody.onCompletion
+                            ? normaliseBehavior(responseBody.onCompletion, [])
+                            : undefined, onError: responseBody.onError
+                            ? normaliseBehavior(responseBody.onError, [])
+                            : undefined, track: false }),
+                }
+                : {
+                    type: 'error',
+                    body: { errors: { error: 'Cannot start subflow without a current step' } },
+                };
+        }
+        case 'modal': {
+            assertModalResponseBody(responseBody);
+            return !isInitial
+                ? { type: 'behavior', behavior: Object.assign(Object.assign({}, responseBody), { type: 'modal', track: false }) }
+                : {
+                    type: 'error',
+                    body: { errors: { error: 'Cannot show modal without a current step' } },
+                };
+        }
+        case 'no-op': {
+            return { type: 'no-op' };
+        }
+        default: {
+            throw new Error(`Unsupported response type: ${String(responseType)}`);
+        }
+    }
+};
+const getCachedOrFetch = async (requestParams, requestCache, httpClient) => {
+    const cachedPromise = requestCache.get(requestParams);
+    if (cachedPromise) {
+        const cachedResponse = await cachedPromise;
+        if (cachedResponse === null || cachedResponse === void 0 ? void 0 : cachedResponse.ok) {
+            return cachedResponse;
+        }
+    }
+    return makeSafeHttpClient(httpClient)(...requestParams);
+};

package/build/controller/executeSubflow.js

@@ -0,0 +1,71 @@
+import { createSubflowComponent } from '../domain/components/SubflowComponent';
+import { recursiveMerge } from '../utils/recursiveMerge';
+export const executeSubflow = async ({ behavior, rootComponent, trackEvent, onEvent, onChange, }) => {
+    rootComponent.setLoadingState('submitting');
+    const { launchConfig } = behavior;
+    const trackSubflowEvent = (eventName, properties) => {
+        if (behavior.launchConfig.type === 'native') {
+            trackEvent(`Native Subflow ${eventName}`, Object.assign({ referrerId, nativeSubflowId: behavior.launchConfig.id }, properties));
+        }
+    };
+    const { onCompletion, onError: onErrorBehavior, referrerId, resultKey } = behavior;
+    return new Promise((resolve) => {
+        var _a;
+        var _b;
+        const restart = () => {
+            rootComponent.setLoadingState('idle');
+            rootComponent.start();
+        };
+        const close = () => {
+            var _a;
+            if (((_a = rootComponent.getSubflow()) === null || _a === void 0 ? void 0 : _a.uid) === component.uid) {
+                rootComponent.closeSubflow();
+            }
+        };
+        const callbacks = {
+            onCompletion: (result) => {
+                var _a;
+                trackSubflowEvent('Succeeded');
+                restart();
+                if (!onCompletion) {
+                    close();
+                    resolve({ type: 'no-op' });
+                    return;
+                }
+                if (onCompletion.type === 'action') {
+                    const newActionData = recursiveMerge((_a = onCompletion.action.data) !== null && _a !== void 0 ? _a : null, resultKey ? { [resultKey]: result } : result);
+                    resolve({
+                        type: 'behavior',
+                        behavior: Object.assign(Object.assign({}, onCompletion), { action: Object.assign(Object.assign({}, onCompletion.action), { data: newActionData }) }),
+                    });
+                    return;
+                }
+                resolve({ type: 'behavior', behavior: onCompletion });
+                close();
+            },
+            onError: (error, status) => {
+                trackSubflowEvent('Failed', { error, status });
+                if (!onErrorBehavior) {
+                    resolve({ type: 'error', error, status });
+                    close();
+                    return;
+                }
+                restart();
+                resolve({ type: 'behavior', behavior: onErrorBehavior });
+                close();
+            },
+            onEvent: (name, properties) => onEvent === null || onEvent === void 0 ? void 0 : onEvent(name, Object.assign({ referrerId }, properties)),
+            onCancellation: () => {
+                trackSubflowEvent('Cancelled');
+                restart();
+                close();
+            },
+        };
+        const component = launchConfig.type === 'dynamic'
+            ? createSubflowComponent(Object.assign(Object.assign({}, callbacks), { subflowType: 'dynamic', initialRequest: launchConfig.request, requestCache: (_b = (_a = rootComponent.getStep()) === null || _a === void 0 ? void 0 : _a.requestCache) !== null && _b !== void 0 ? _b : rootComponent.requestCache, presentation: launchConfig.presentation }), onChange)
+            : createSubflowComponent(Object.assign(Object.assign({}, callbacks), { subflowType: 'native', id: launchConfig.id, payload: launchConfig.payload }), onChange);
+        rootComponent.stop();
+        rootComponent.addSubflow(component);
+        trackSubflowEvent('Triggered');
+    });
+};

package/build/controller/executeSubmission.js

@@ -0,0 +1,68 @@
+import { recursiveMerge } from '../utils/recursiveMerge';
+import { getErrorMessage } from './getErrorMessage';
+import { executeRequest } from './executeRequest';
+export const executeSubmission = async (props) => {
+    const { httpClient, requestCache, trackEvent, logEvent } = props;
+    const triggerAction = async (action, model, isInitial) => {
+        var _a, _b;
+        const { exit, url, result = null, id: actionId } = action;
+        const trackSubmissionEvent = !isInitial ? trackEvent : () => { };
+        trackSubmissionEvent('Action Triggered', { actionId });
+        if (exit && !url) {
+            trackSubmissionEvent('Action Succeeded', { actionId });
+            return { type: 'complete', result };
+        }
+        try {
+            const command = await executeRequest({
+                isInitial,
+                exit,
+                request: createRequestFromAction(action, model),
+                requestCache,
+                httpClient,
+                trackEvent: (name, properties) => {
+                    trackSubmissionEvent(name, Object.assign(Object.assign({}, properties), { actionId }));
+                },
+                logEvent,
+            });
+            switch (command.type) {
+                case 'error': {
+                    trackSubmissionEvent('Action Failed', Object.assign({ actionId, statusCode: (_a = command.httpError) === null || _a === void 0 ? void 0 : _a.statusCode }, (_b = command.body) === null || _b === void 0 ? void 0 : _b.analytics));
+                    return command;
+                }
+                case 'behavior': {
+                    if (command.behavior.type === 'action') {
+                        trackSubmissionEvent('Action Succeeded', { actionId });
+                        return await executeSubmission({
+                            action: command.behavior.action,
+                            isInitial: false,
+                            model: null,
+                            requestCache,
+                            httpClient,
+                            trackEvent,
+                            logEvent,
+                        });
+                    }
+                    trackSubmissionEvent('Action Succeeded', { actionId });
+                    return command;
+                }
+                case 'complete': {
+                    trackSubmissionEvent('Action Succeeded', { actionId });
+                    return Object.assign(Object.assign({}, command), { result: recursiveMerge(command.result, result) });
+                }
+                case 'no-op':
+                default: {
+                    trackSubmissionEvent('Action Succeeded', { actionId });
+                    return command;
+                }
+            }
+        }
+        catch (error) {
+            const errorMessage = getErrorMessage(error);
+            trackSubmissionEvent('Action Failed', { actionId, errorMessage });
+            logEvent('error', 'Dynamic Flow - Action Failed Unexpectedly', { actionId, errorMessage });
+            throw error;
+        }
+    };
+    return triggerAction(props.action, props.model, props.isInitial);
+};
+export const createRequestFromAction = (action, model) => { var _a, _b, _c; return (Object.assign(Object.assign({}, action), { url: (_a = action.url) !== null && _a !== void 0 ? _a : '', method: (_b = action.method) !== null && _b !== void 0 ? _b : 'POST', body: action.method === 'GET' ? undefined : recursiveMerge(model, (_c = action.data) !== null && _c !== void 0 ? _c : null) })); };

package/build/controller/getErrorMessage.js

@@ -0,0 +1,7 @@
+export const getErrorMessage = (error) => {
+    return error instanceof Error
+        ? error.message
+        : typeof error === 'string'
+            ? error
+            : `Unknown Error: type is ${typeof error}`;
+};

package/build/controller/getFilenameFromContentDisposition.js

@@ -0,0 +1,47 @@
+export const getFilenameFromContentDisposition = (contentDisposition) => {
+    var _a;
+    if (!contentDisposition) {
+        return '';
+    }
+    const parameters = getFilenames(contentDisposition);
+    const { filename, filenameStar } = parameters;
+    const decodedFilename = decodeFilename(filenameStar);
+    return extractBasename((_a = decodedFilename !== null && decodedFilename !== void 0 ? decodedFilename : filename) !== null && _a !== void 0 ? _a : '');
+};
+const filenameRegex = /;\s*(filename\*?)\s*=\s*("[^"]*"|[^;]*)/gi;
+const getFilenames = (contentDisposition) => {
+    var _a, _b;
+    const params = Array.from(contentDisposition.matchAll(filenameRegex)).map((match) => {
+        var _a, _b;
+        var _c;
+        return [(_a = match[1]) === null || _a === void 0 ? void 0 : _a.toLowerCase(), removeQuotes((_c = (_b = match[2]) === null || _b === void 0 ? void 0 : _b.trim()) !== null && _c !== void 0 ? _c : '') || undefined];
+    });
+    return {
+        filename: (_a = params.find(([key]) => key === 'filename')) === null || _a === void 0 ? void 0 : _a[1],
+        filenameStar: (_b = params.find(([key]) => key === 'filename*')) === null || _b === void 0 ? void 0 : _b[1],
+    };
+};
+const removeQuotes = (value) => {
+    if (value.startsWith('"') && value.endsWith('"')) {
+        return value.slice(1, -1);
+    }
+    return value;
+};
+const decodeFilename = (encodedFilename) => {
+    if (!encodedFilename) {
+        return undefined;
+    }
+    const sections = encodedFilename.split("'");
+    const encodedValue = sections.length >= 3 ? sections.slice(2).join("'") : encodedFilename;
+    try {
+        return decodeURIComponent(encodedValue);
+    }
+    catch (_a) {
+        return undefined;
+    }
+};
+const extractBasename = (filename) => {
+    var _a;
+    const segments = filename.split(/[\\/]+/).filter(Boolean);
+    return (_a = segments.at(-1)) !== null && _a !== void 0 ? _a : '';
+};

package/build/controller/getFilenameFromContentDisposition.test.js

@@ -0,0 +1,47 @@
+import { getFilenameFromContentDisposition } from './getFilenameFromContentDisposition';
+describe('getFilenameFromContentDisposition', () => {
+    it('should extract filename from Content-Disposition header', () => {
+        const contentDisposition = 'attachment; filename="example.txt"';
+        const filename = getFilenameFromContentDisposition(contentDisposition);
+        expect(filename).toBe('example.txt');
+    });
+    it('should return empty string if filename is not present', () => {
+        const contentDisposition = 'attachment';
+        const filename = getFilenameFromContentDisposition(contentDisposition);
+        expect(filename).toBe('');
+    });
+    it('should handle filenames without quotes', () => {
+        const contentDisposition = 'attachment; filename=example.txt';
+        const filename = getFilenameFromContentDisposition(contentDisposition);
+        expect(filename).toBe('example.txt');
+    });
+    it('should return empty string if Content-Disposition is null', () => {
+        const filename = getFilenameFromContentDisposition(null);
+        expect(filename).toBe('');
+    });
+    it('should handle encoded filenames', () => {
+        const contentDisposition = "attachment; filename*=UTF-8''file%20name.jpg";
+        const filename = getFilenameFromContentDisposition(contentDisposition);
+        expect(filename).toBe('file name.jpg');
+    });
+    it('should prefer filename* over filename when both are present', () => {
+        const contentDisposition = "attachment; filename=fallback-name.jpg; filename*=UTF-8''preferred%20name.jpg";
+        const filename = getFilenameFromContentDisposition(contentDisposition);
+        expect(filename).toBe('preferred name.jpg');
+    });
+    it('should fallback to filename when filename* is malformed', () => {
+        const contentDisposition = "attachment; filename=fallback-name.jpg; filename*=UTF-8''%%%";
+        const filename = getFilenameFromContentDisposition(contentDisposition);
+        expect(filename).toBe('fallback-name.jpg');
+    });
+    it('should extract basename when filename contains path separators', () => {
+        const contentDisposition = 'attachment; filename="nested/path\\name.txt"';
+        const filename = getFilenameFromContentDisposition(contentDisposition);
+        expect(filename).toBe('name.txt');
+    });
+    it('should extract basename from encoded filename* values', () => {
+        const contentDisposition = "attachment; filename*=UTF-8''nested%2Fpath%5Cname.txt";
+        const filename = getFilenameFromContentDisposition(contentDisposition);
+        expect(filename).toBe('name.txt');
+    });
+});

package/build/controller/getRequestAbortController.js

@@ -0,0 +1,13 @@
+export const getRequestAbortController = () => {
+    let abortController = new AbortController();
+    return {
+        abortAndGetNewSignal() {
+            abortController.abort();
+            abortController = new AbortController();
+            return abortController.signal;
+        },
+        abort() {
+            abortController.abort();
+        },
+    };
+};

package/build/controller/getResponseType.js

@@ -0,0 +1,35 @@
+import { isObject } from '../utils/type-validators';
+const responseTypes = ['step', 'action', 'exit', 'modal', 'subflow', 'no-op'];
+/**
+ * Returns either 'step', 'action', 'exit', 'modal', 'subflow', or 'no-op' based on the response headers and body.
+ * This function takes a response body parameter because, for legacy reasons, we still need to consider the body
+ * to determine the response type, in cases where the response headers are not set.
+ * Ideally it should just be a matter of checking the "X-Df-Response-Type" response header.
+ */
+export const getResponseType = (headers, body) => {
+    const headerResponseType = getResponseTypeFromHeader(headers);
+    if (headerResponseType) {
+        return headerResponseType;
+    }
+    if (isObject(body) && body.action) {
+        // TODO: use Zod to validate the action object
+        return 'action';
+    }
+    return 'step';
+};
+export const getResponseTypeFromHeader = (headers) => {
+    if (headers === null || headers === void 0 ? void 0 : headers.has('X-Df-Response-Type')) {
+        const type = headers.get('X-Df-Response-Type');
+        assertDFResponseType(type);
+        return type;
+    }
+    if (headers === null || headers === void 0 ? void 0 : headers.has('X-Df-Exit')) {
+        return 'exit';
+    }
+    return undefined;
+};
+function assertDFResponseType(type) {
+    if (!responseTypes.includes(type)) {
+        throw new Error("Unsupported X-Df-Response-Type. Allowed values are 'step', 'action', 'exit', 'modal', 'subflow', 'no-op'.");
+    }
+}

package/build/controller/getSafeHttpClient.js

@@ -0,0 +1,8 @@
+export const getSafeHttpClient = (httpClient) => async (input, init) => {
+    try {
+        return await httpClient(input, init);
+    }
+    catch (_a) {
+        return null;
+    }
+};

package/build/controller/getStepCounter.js

@@ -0,0 +1,16 @@
+/**
+ * To ensure there are no uid collisions between consecutive steps, we use a
+ * counter that is appended to the step id. This means that even steps with the
+ * same structure and ids will not have the same component uids.
+ */
+export const getStepCounter = () => {
+    let count = 0;
+    return {
+        increment() {
+            count = (count + 1) % 100;
+        },
+        get current() {
+            return count;
+        },
+    };
+};

package/build/controller/handleErrorResponse.js

@@ -0,0 +1,26 @@
+import { parseResponseBodyAsJsonElement, isErrorResponseBody, parseResponseBodyAsText, } from './response-utils';
+export const handleErrorResponse = async (response, actionId, trackEvent) => {
+    const body = await parseResponseBodyAsJsonElement(response.clone());
+    if (isErrorResponseBody(body)) {
+        const refreshUrl = body.refreshUrl || body.refreshFormUrl;
+        const { error, validation, analytics } = body;
+        trackEvent('Action Failed', Object.assign(Object.assign({}, analytics), { actionId, statusCode: response.status }));
+        const errors = { error, validation };
+        return refreshUrl
+            ? { type: 'refresh', body: { refreshUrl, errors } }
+            : {
+                type: 'error',
+                body: { errors, analytics },
+                httpError: { statusCode: response.status },
+            };
+    }
+    trackEvent('Action Failed', { actionId, statusCode: response.status });
+    const errorMessage = await parseResponseBodyAsText(response);
+    return {
+        type: 'error',
+        httpError: {
+            message: errorMessage || undefined,
+            statusCode: response.status,
+        },
+    };
+};

package/build/controller/makeSafeHttpClient.js

@@ -0,0 +1,8 @@
+export const makeSafeHttpClient = (httpClient) => async (...props) => {
+    try {
+        return await httpClient(...props);
+    }
+    catch (_a) {
+        return null;
+    }
+};

package/build/controller/response-utils.js

@@ -0,0 +1,72 @@
+import { validateActionResponse, validateSubflowResponse } from '@wise/dynamic-flow-types/spec';
+import { isArray, isObject } from '../utils/type-validators';
+export const parseResponseBodyAsJsonElement = async (response) => {
+    assertResponseIsValid(response);
+    try {
+        return (await response.json());
+    }
+    catch (_a) {
+        return null;
+    }
+};
+export const parseResponseBodyAsText = async (response) => {
+    try {
+        return await response.text();
+    }
+    catch (_a) {
+        return null;
+    }
+};
+export function isActionResponseBody(body) {
+    return validateActionResponse(body).valid;
+}
+export function assertActionResponseBody(body) {
+    // TODO: use zod to validate the action object instead of this
+    if (!isObject(body) || !isObject(body.action)) {
+        throw new Error('Incorrect response body in action response. Expected an object satisfying the type { action: Action }.');
+    }
+}
+// TODO make this a modal response body type
+export function assertModalResponseBody(body) {
+    if (isObject(body)) {
+        if ('content' in body && isArray(body.content)) {
+            return;
+        }
+    }
+    throw new Error('Incorrect response body in modal response. Expected an object satisfying the type { title?: string, components: Layout[] }.');
+}
+export function assertSubflowResponseBody(body) {
+    const { valid } = validateSubflowResponse(body);
+    if (valid) {
+        return;
+    }
+    throw new Error('Incorrect response body in subflow response.');
+}
+export function isErrorResponseBody(body) {
+    return Boolean(isObject(body) &&
+        (body.refreshFormUrl || body.refreshUrl || body.validation || body.error || body.analytics));
+}
+export function assertErrorResponseBody(body) {
+    // TODO: use zod to validate the error object instead of this
+    if (!isErrorResponseBody(body)) {
+        throw new Error('Incorrect error response body in error response. Expected an object with either `refreshUrl`, `validation` or `error` properties.');
+    }
+}
+export function assertStepResponseBody(body) {
+    // TODO: use zod to validate the error object instead of this
+    if (!isObject(body)) {
+        throw new Error('Incorrect response body in step response. Expected an object.');
+    }
+}
+const assertResponseIsValid = (response) => {
+    if (!isResponse(response)) {
+        throw new Error('Incorrect type of response from fetch. Expected object of type Response.');
+    }
+    if (response.bodyUsed) {
+        throw new Error('The body of the provided Response object has already been used. Every request must respond with a new Response object.');
+    }
+};
+const isResponse = (response) => typeof response === 'object' &&
+    response !== null &&
+    'clone' in response &&
+    'bodyUsed' in response;

package/build/controller/response-utils.test.js

@@ -0,0 +1,52 @@
+import { assertSubflowResponseBody } from './response-utils';
+describe('response utils', () => {
+    describe('assertSubflowResponseBody', () => {
+        it('validates a valid dynamic subflow', () => {
+            const body = {
+                referrerId: 'referrer',
+                launchConfig: {
+                    type: 'dynamic',
+                    request: {
+                        url: '/start',
+                        method: 'GET',
+                    },
+                    presentation: {
+                        type: 'modal',
+                    },
+                },
+                onCompletion: {
+                    type: 'action',
+                    action: {
+                        url: '/submit',
+                    },
+                },
+            };
+            expect(() => assertSubflowResponseBody(body)).not.toThrow();
+        });
+        it('validates a not so valid dynamic subflow with nulls instead of undefined', () => {
+            const body = {
+                referrerId: 'referrer',
+                launchConfig: {
+                    type: 'dynamic',
+                    request: {
+                        url: '/start',
+                        method: 'GET',
+                        body: null,
+                        prefetch: null,
+                    },
+                    presentation: {
+                        type: 'modal',
+                    },
+                },
+                onError: null,
+                onCompletion: {
+                    type: 'action',
+                    action: {
+                        url: '/submit',
+                    },
+                },
+            };
+            expect(() => assertSubflowResponseBody(body)).not.toThrow();
+        });
+    });
+});

package/build/domain/components/AlertComponent.js

@@ -0,0 +1,2 @@
+export const createAlertComponent = (props) => (Object.assign(Object.assign({ type: 'alert', kind: 'layout' }, props), { start() { },
+    stop() { } }));

package/build/domain/components/AllOfComponent.js

@@ -0,0 +1,47 @@
+import { getLocalValues, getSubmittableData, getSubmittableDataSync, } from '../../utils/component-utils';
+import { summariseFromChildren } from '../features/summary/summary-utils';
+import { validateComponents } from '../features/validation/validation-functions';
+export const createAllOfComponent = (props) => {
+    const { uid, schemaId, analyticsId, alert, components, control, description, help, hidden, media, title, tags, } = props;
+    const component = {
+        type: 'all-of',
+        kind: 'input',
+        uid,
+        schemaId,
+        analyticsId,
+        alert,
+        components,
+        control,
+        description,
+        help,
+        hidden,
+        media,
+        title,
+        tags,
+        getChildren() {
+            return component.components;
+        },
+        getSummary() {
+            return summariseFromChildren(component.getChildren());
+        },
+        async getSubmittableValue() {
+            return getSubmittableData(component.components);
+        },
+        getSubmittableValueSync() {
+            return getSubmittableDataSync(component.components);
+        },
+        getLocalValue() {
+            return getLocalValues(component.components);
+        },
+        validate() {
+            return hidden ? true : validateComponents(component.getChildren());
+        },
+        start() {
+            component.getChildren().forEach((child) => child.start());
+        },
+        stop() {
+            component.getChildren().forEach((child) => child.stop());
+        },
+    };
+    return component;
+};