@wise/dynamic-flow-client 5.28.0 → 5.29.0-experimental-f7c2300

package/build/controller/FlowController.js

@@ -1,400 +0,0 @@
-import { getHttpClientWithCapabilities } from '../common/capabilities';
-import { createRootDomainComponent } from '../domain/components/RootDomainComponent';
-import { trackBehaviorTriggered, } from '../domain/features/events';
-import { normaliseRequestCache, } from '../domain/features/prefetch/request-cache';
-import { modalToComponent } from '../domain/mappers/layout/modalToComponent';
-import { mapStepToComponent } from '../domain/mappers/mapStepToComponent';
-import { analyseStep } from '../utils/analyse-step';
-import { getExecuteDownload } from './executeDownload';
-import { executePoll } from './executePoll';
-import { executeRefresh } from './executeRefresh';
-import { executeSubflow } from './executeSubflow';
-import { executeSubmission } from './executeSubmission';
-import { getErrorMessage } from './getErrorMessage';
-import { getRequestAbortController } from './getRequestAbortController';
-import { getStepCounter } from './getStepCounter';
-import { createExternalConfirmation } from '../domain/components/step/ExternalConfirmationComponent';
-export const createFlowController = (props) => {
-    const { flowId, initialAction, initialStep, backConfig, features, nativeSubflowHandlers, requestCache, getErrorMessageFunctions, scrollToTop, onChange, onCancellation, onCompletion, onCopy, onLink, onNotification, onError, onEvent, onLog, } = props;
-    const httpClient = getHttpClientWithCapabilities(props.httpClient, nativeSubflowHandlers);
-    const rootComponent = createRootDomainComponent(onChange, scrollToTop, backConfig, normaliseRequestCache(requestCache));
-    const stepCount = getStepCounter();
-    const refreshAbortController = getRequestAbortController();
-    const createStep = (newStep, etag) => {
-        // TODO remove, move to root domain component
-        if (rootComponent.hasStep()) {
-            stepCount.increment();
-        }
-        const component = createStepComponent(newStep, etag, null);
-        if (component) {
-            rootComponent.pushStep(component);
-            rootComponent.setLoadingState('idle');
-        }
-    };
-    const updateStep = (newStep, etag) => {
-        var _a;
-        const component = createStepComponent(newStep, etag, (_a = rootComponent.getLocalValue()) !== null && _a !== void 0 ? _a : null);
-        if (component) {
-            rootComponent.updateStep(component);
-            rootComponent.setLoadingState('idle');
-        }
-    };
-    const getMapperProps = () => ({
-        uid: `${rootComponent.uid}:${stepCount.current}`,
-        loadingState: 'idle',
-        onComponentUpdate: onChange,
-        flowRequestCache: rootComponent.requestCache,
-        getErrorMessageFunctions,
-        trackEvent,
-        logEvent,
-        features,
-        httpClient,
-        onBehavior,
-        onLink,
-        onPoll,
-    });
-    const createStepComponent = (newStep, etag, localValue) => {
-        rootComponent.stop();
-        analyseStep(newStep, logEvent);
-        try {
-            return mapStepToComponent(Object.assign({ stepLocalValue: localValue, step: newStep, etag }, getMapperProps()));
-        }
-        catch (error) {
-            closeWithError(error);
-        }
-    };
-    const getStep = () => {
-        var _a;
-        const stepComponent = rootComponent.getStep();
-        return (_a = stepComponent === null || stepComponent === void 0 ? void 0 : stepComponent.step) !== null && _a !== void 0 ? _a : initialStep;
-    };
-    const trackEvent = (eventName, properties) => {
-        var _a, _b;
-        const step = getStep();
-        const stepId = (_b = (_a = step === null || step === void 0 ? void 0 : step.id) !== null && _a !== void 0 ? _a : step === null || step === void 0 ? void 0 : step.key) !== null && _b !== void 0 ? _b : null;
-        const analytics = step === null || step === void 0 ? void 0 : step.analytics;
-        const metadata = Object.assign(Object.assign(Object.assign(Object.assign({ flowId, integrationId: flowId }, (step ? { stepCount: stepCount.current } : {})), (stepId !== null ? { stepId } : {})), analytics), properties);
-        try {
-            onEvent === null || onEvent === void 0 ? void 0 : onEvent(`Dynamic Flow - ${eventName}`, Object.assign({}, metadata));
-        }
-        catch (_c) { }
-    };
-    const trackCoreEvent = trackEvent;
-    const executeDownload = getExecuteDownload({
-        onNotification,
-        getErrorMessageFunctions,
-        trackEvent,
-    });
-    const logEvent = (level, message, properties) => {
-        var _a, _b;
-        const step = getStep();
-        const stepId = (_b = (_a = step === null || step === void 0 ? void 0 : step.id) !== null && _a !== void 0 ? _a : step === null || step === void 0 ? void 0 : step.key) !== null && _b !== void 0 ? _b : null;
-        try {
-            onLog === null || onLog === void 0 ? void 0 : onLog(level, message, Object.assign(Object.assign(Object.assign(Object.assign({}, properties), { flowId }), (stepId !== null ? { stepId } : {})), (rootComponent.hasStep() || initialStep ? { stepCount: stepCount.current } : {})));
-        }
-        catch (_c) { }
-    };
-    const closeWithError = (error, analytics, statusCode) => {
-        rootComponent.stop();
-        trackCoreEvent('Failed', Object.assign({}, analytics));
-        logEvent('error', 'Dynamic Flow failed', { errorMessage: getErrorMessage(error), analytics });
-        onError(error, statusCode);
-    };
-    const closeWithCancellation = () => {
-        trackCoreEvent('Cancelled');
-        onCancellation === null || onCancellation === void 0 ? void 0 : onCancellation();
-    };
-    const onBehavior = async (behavior) => {
-        var _a, _b;
-        trackBehaviorTriggered(trackEvent, behavior);
-        switch (behavior.type) {
-            case 'delay': {
-                return rootComponent.startDelay({
-                    duration: behavior.duration,
-                    execute: () => {
-                        void onBehavior(behavior.behavior);
-                    },
-                });
-            }
-            case 'download': {
-                try {
-                    await executeDownload(behavior.request, httpClient);
-                }
-                catch (error) {
-                    logEvent('error', 'Download failed', { errorMessage: getErrorMessage(error) });
-                }
-                break;
-            }
-            case 'back': {
-                if (behavior.action) {
-                    onAction(behavior.action, null)
-                        .then(() => {
-                        rootComponent.clearStack();
-                    })
-                        .catch(() => { });
-                    break;
-                }
-                if (features.isEnabled('nativeBack')) {
-                    if (rootComponent.stepStack.length > 1) {
-                        rootComponent.navigateBack();
-                    }
-                    else {
-                        closeWithCancellation();
-                    }
-                    rootComponent.setLoadingState('idle');
-                }
-                break;
-            }
-            case 'action': {
-                if (rootComponent.isBusy()) {
-                    return { abort: () => { } };
-                }
-                rootComponent.dismissAllModals();
-                const { action } = behavior;
-                const skipValidation = action.method === 'GET' || Boolean(action.skipValidation);
-                const canSubmit = skipValidation || rootComponent.validate();
-                try {
-                    if (canSubmit) {
-                        rootComponent.setLoadingState('submitting');
-                        const model = await rootComponent.getSubmittableValue();
-                        void onAction(action, model);
-                    }
-                    else {
-                        rootComponent.setLoadingState('idle');
-                        scrollToTop('smooth');
-                    }
-                }
-                catch (_c) {
-                    // It's ok to ignore errors here because when this only throw when persisting fails.
-                    // And when persisting fails, the UI is already showing an error.
-                    // If persisting succeeded before, then it would NOT FAIL now,
-                    // because we don't re-try persisting for successful fields when submitting.
-                    rootComponent.setLoadingState('idle');
-                }
-                break;
-            }
-            case 'copy': {
-                navigator.clipboard
-                    .writeText(behavior.content)
-                    .then(() => onCopy === null || onCopy === void 0 ? void 0 : onCopy(behavior.content))
-                    .catch(() => onCopy === null || onCopy === void 0 ? void 0 : onCopy(null));
-                break;
-            }
-            case 'non-merging-action': {
-                rootComponent.dismissAllModals();
-                const { action } = behavior;
-                rootComponent.setLoadingState('submitting');
-                void onAction(action, null);
-                break;
-            }
-            case 'refresh': {
-                rootComponent.dismissAllModals();
-                void onRefresh({ refreshUrl: behavior.url, analytics: behavior.analytics });
-                return {
-                    abort: () => {
-                        refreshAbortController.abort();
-                    },
-                };
-            }
-            case 'link': {
-                rootComponent.setExternalConfirmation(createExternalConfirmation(`${rootComponent.uid}-external-confirmation`, behavior.url, onLink, onChange));
-                break;
-            }
-            case 'modal': {
-                const currentStep = (_a = rootComponent.getStep()) === null || _a === void 0 ? void 0 : _a.step;
-                if (currentStep) {
-                    rootComponent.showModal(modalToComponent(rootComponent.uid, behavior, Object.assign(Object.assign({ step: currentStep, stepLocalValue: rootComponent.getLocalValue() }, getMapperProps()), { stepEventSubscriber: { addEventListener: () => { }, removeEventListener: () => { } }, registerSubmissionBehavior: () => { } }), rootComponent.getSchemaComponents()));
-                }
-                rootComponent.setLoadingState('idle');
-                break;
-            }
-            case 'dismiss':
-                rootComponent.dismissModal();
-                break;
-            case 'subflow': {
-                const command = await executeSubflow({
-                    behavior,
-                    rootComponent,
-                    trackEvent,
-                    onEvent,
-                    onChange,
-                });
-                switch (command.type) {
-                    case 'behavior':
-                        void onBehavior(command.behavior);
-                        break;
-                    case 'error':
-                        closeWithError(command.error, {}, command.status);
-                        break;
-                    case 'no-op':
-                        break;
-                }
-                break;
-            }
-            case 'dispatch-event': {
-                (_b = rootComponent.getStep()) === null || _b === void 0 ? void 0 : _b.dispatchStepEvent(behavior.eventName);
-                break;
-            }
-            case 'none':
-                break;
-        }
-        return { abort: () => { } };
-    };
-    const onAction = async (action, model) => {
-        var _a, _b, _c, _d, _e, _f, _g;
-        var _h, _j, _k;
-        try {
-            rootComponent.setLoadingState('submitting');
-            const command = await executeSubmission({
-                action,
-                model,
-                isInitial: !rootComponent.hasStep(),
-                requestCache: (_h = (_a = rootComponent.getStep()) === null || _a === void 0 ? void 0 : _a.requestCache) !== null && _h !== void 0 ? _h : rootComponent.requestCache,
-                httpClient,
-                trackEvent,
-                logEvent,
-            });
-            switch (command.type) {
-                case 'complete': {
-                    onCompletion(command.result);
-                    trackCoreEvent('Succeeded');
-                    if (features.isEnabled('continueAfterCompletion')) {
-                        rootComponent.setLoadingState('idle');
-                    }
-                    else {
-                        rootComponent.stop();
-                    }
-                    break;
-                }
-                case 'replace-step': {
-                    const isFirstStep = !rootComponent.hasStep();
-                    rootComponent.closeSubflow();
-                    createStep(command.step, command.etag);
-                    trackCoreEvent('Step Shown', { isFirstStep });
-                    break;
-                }
-                case 'error': {
-                    rootComponent.setLoadingState('idle');
-                    const genericErrorMessage = getErrorMessageFunctions().genericErrorWithRetry();
-                    const errors = (_j = (_b = command.body) === null || _b === void 0 ? void 0 : _b.errors) !== null && _j !== void 0 ? _j : { error: genericErrorMessage };
-                    const currentStep = rootComponent.getStep();
-                    if (currentStep) {
-                        updateStep(Object.assign(Object.assign({}, currentStep.step), { errors, // but with the new errors
-                            model, polling: undefined, external: undefined, onLoad: undefined }), (_k = (_c = rootComponent.getStep()) === null || _c === void 0 ? void 0 : _c.etag) !== null && _k !== void 0 ? _k : null);
-                    }
-                    else {
-                        const errorMessage = ((_e = (_d = command.body) === null || _d === void 0 ? void 0 : _d.errors) === null || _e === void 0 ? void 0 : _e.error) || ((_f = command.httpError) === null || _f === void 0 ? void 0 : _f.message) || 'Initial request failed';
-                        closeWithError(new Error(errorMessage, {
-                            cause: `method: ${action.method}, url: ${action.url}`,
-                        }), {}, (_g = command.httpError) === null || _g === void 0 ? void 0 : _g.statusCode);
-                    }
-                    break;
-                }
-                case 'refresh': {
-                    const { refreshUrl, errors = {} } = command.body;
-                    void onRefresh({ refreshUrl, errorsOverride: errors });
-                    break;
-                }
-                case 'behavior': {
-                    void onBehavior(command.behavior);
-                    break;
-                }
-                case 'no-op': {
-                    rootComponent.setLoadingState('idle');
-                    break;
-                }
-            }
-        }
-        catch (error) {
-            closeWithError(error);
-        }
-    };
-    const onRefresh = async ({ refreshUrl, errorsOverride, analytics, }) => {
-        var _a;
-        var _b, _c;
-        try {
-            rootComponent.setLoadingState('refreshing');
-            const model = rootComponent.getSubmittableValueSync();
-            const command = await executeRefresh({
-                abortSignal: refreshAbortController.abortAndGetNewSignal(),
-                url: (_b = refreshUrl !== null && refreshUrl !== void 0 ? refreshUrl : rootComponent.getRefreshUrl()) !== null && _b !== void 0 ? _b : '',
-                model,
-                etag: (_c = (_a = rootComponent.getStep()) === null || _a === void 0 ? void 0 : _a.etag) !== null && _c !== void 0 ? _c : null,
-                analytics,
-                httpClient,
-                trackEvent,
-                logEvent,
-            });
-            switch (command.type) {
-                case 'refresh-step':
-                    {
-                        const errors = errorsOverride !== null && errorsOverride !== void 0 ? errorsOverride : command.step.errors;
-                        updateStep(Object.assign(Object.assign({}, command.step), { errors }), command.etag);
-                    }
-                    break;
-                case 'no-op':
-                    rootComponent.setLoadingState('idle');
-                    break;
-                case 'error': {
-                    closeWithError(new Error('Failed to refresh'), command.body.analytics, command.statusCode);
-                    break;
-                }
-            }
-        }
-        catch (error) {
-            // this should never happen. executeRefresh never throws
-            closeWithError(error, undefined);
-        }
-    };
-    const onPoll = async (url, errorBehavior, signal) => {
-        const command = await executePoll({
-            httpClient,
-            url,
-            errorBehavior,
-            signal,
-            trackEvent,
-        });
-        switch (command.type) {
-            case 'replace-step':
-                createStep(command.step, command.etag);
-                trackCoreEvent('Step Shown', { isFirstStep: false });
-                return true;
-            case 'behavior':
-                void onBehavior(command.behavior);
-                return true;
-            case 'complete':
-                onCompletion(command.result);
-                return true;
-            case 'continue':
-                return false;
-        }
-    };
-    let initState = 'initial';
-    if (initialStep) {
-        initState = 'created';
-        trackCoreEvent('Initiated');
-        createStep(initialStep, null);
-        trackCoreEvent('Step Shown', { isFirstStep: true });
-    }
-    const start = () => {
-        if (initState === 'initial' && initialAction) {
-            initState = 'created';
-            trackCoreEvent('Initiated');
-            rootComponent.setLoadingState('submitting');
-            void onAction(Object.assign({ method: 'GET' }, initialAction), null).then(() => {
-                initState = 'started';
-                rootComponent.start();
-            });
-            return;
-        }
-        if (initState === 'created') {
-            initState = 'started';
-            rootComponent.start();
-        }
-    };
-    return {
-        rootComponent,
-        start,
-        cancel: closeWithCancellation,
-    };
-};

package/build/controller/executeDownload.js

@@ -1,86 +0,0 @@
-import { getFilenameFromContentDisposition } from './getFilenameFromContentDisposition';
-export const getExecuteDownload = ({ onNotification, getErrorMessageFunctions, trackEvent, // TODO: add analytics after aligning with other client platforms
- }) => {
-    const pendingRequests = createPendingRequestsSet();
-    const executeDownload = async (request, httpClient) => {
-        if (pendingRequests.has(request)) {
-            return;
-        }
-        pendingRequests.add(request);
-        onNotification === null || onNotification === void 0 ? void 0 : onNotification({ text: getErrorMessageFunctions().downloadStarted() });
-        // trackEvent('Download Started'); // TODO: add analytics after aligning with other client platforms
-        return fetchDownloadRequest(request, httpClient)
-            .then(saveBlob)
-            .then(() => {
-            onNotification === null || onNotification === void 0 ? void 0 : onNotification({ text: getErrorMessageFunctions().downloadSuccessful() });
-            // trackEvent('Download Succeeded'); // TODO: add analytics after aligning with other client platforms
-        })
-            .catch((error) => {
-            onNotification === null || onNotification === void 0 ? void 0 : onNotification({ text: getErrorMessageFunctions().downloadFailed() });
-            // trackEvent('Download Failed'); // TODO: add analytics after aligning with other client platforms
-            throw error;
-        })
-            .finally(() => {
-            pendingRequests.remove(request);
-        });
-    };
-    return executeDownload;
-};
-const fetchDownloadRequest = async (request, httpClient) => {
-    const { url, method, body, headers } = request;
-    const requestBody = method === 'GET' ? undefined : JSON.stringify(body);
-    const requestHeaders = filterForbiddenHeaders(headers);
-    if (requestBody) {
-        requestHeaders.set('Content-Type', 'application/json');
-    }
-    const response = await httpClient(url, { method, body: requestBody, headers: requestHeaders });
-    if (!response.ok) {
-        throw new Error(`Download failed with status ${response.status}`);
-    }
-    const contentDisposition = response.headers.get('Content-Disposition');
-    const filename = getFilenameFromContentDisposition(contentDisposition);
-    const blob = await response.blob();
-    return { filename, blob };
-};
-const saveBlob = async ({ blob, filename = '' }) => {
-    const blobUrl = URL.createObjectURL(blob);
-    const link = Object.assign(document.createElement('a'), {
-        href: blobUrl,
-        download: filename,
-    });
-    document.body.appendChild(link);
-    link.click();
-    await wait();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(blobUrl);
-};
-const filterForbiddenHeaders = (headers) => {
-    const forbiddenHeaders = ['authorization', 'cookie', 'host'];
-    const filteredHeaders = Object.entries(headers !== null && headers !== void 0 ? headers : {}).map(([key, value]) => [
-        key.trim().toLowerCase(),
-        value,
-    ]).filter(([key]) => !forbiddenHeaders.includes(key));
-    return new Headers(filteredHeaders);
-};
-const wait = async () => new Promise((resolve) => {
-    setTimeout(resolve, 0);
-});
-const createPendingRequestsSet = () => {
-    const pendingRequests = new Set();
-    return {
-        add: (request) => {
-            const requestKey = JSON.stringify(request);
-            // eslint-disable-next-line functional/immutable-data
-            pendingRequests.add(requestKey);
-        },
-        remove: (request) => {
-            const requestKey = JSON.stringify(request);
-            // eslint-disable-next-line functional/immutable-data
-            pendingRequests.delete(requestKey);
-        },
-        has: (request) => {
-            const requestKey = JSON.stringify(request);
-            return pendingRequests.has(requestKey);
-        },
-    };
-};

package/build/controller/executePoll.js

@@ -1,65 +0,0 @@
-import { normaliseBehavior } from '../domain/mappers/utils/behavior-utils';
-import { getResponseTypeFromHeader } from './getResponseType';
-import { assertActionResponseBody, assertModalResponseBody, assertStepResponseBody, assertSubflowResponseBody, isActionResponseBody, parseResponseBodyAsJsonElement, } from './response-utils';
-export const executePoll = async (props) => {
-    const { errorBehavior, signal, url, httpClient, trackEvent } = props;
-    try {
-        const response = await httpClient(url !== null && url !== void 0 ? url : '', {
-            method: 'GET',
-            signal,
-        });
-        if (!response.ok) {
-            trackEvent('Polling Failed', { url, statusCode: response.status, variant: 'revamp' });
-            return { type: 'behavior', behavior: errorBehavior };
-        }
-        const responseType = getResponseTypeFromHeader(response.headers);
-        const body = await parseResponseBodyAsJsonElement(response);
-        try {
-            switch (responseType) {
-                case 'step': {
-                    const etag = response.headers.get('etag') || null;
-                    assertStepResponseBody(body);
-                    return { type: 'replace-step', step: body, etag };
-                }
-                case 'exit': {
-                    return { type: 'complete', result: body };
-                }
-                case 'action': {
-                    assertActionResponseBody(body);
-                    return { type: 'behavior', behavior: actionResponseBodyToBehavior(body) };
-                }
-                case 'modal': {
-                    assertModalResponseBody(body);
-                    return { type: 'behavior', behavior: Object.assign(Object.assign({ type: 'modal' }, body), { track: false }) };
-                }
-                case 'no-op': {
-                    return { type: 'behavior', behavior: { type: 'none', track: false } };
-                }
-                case 'subflow': {
-                    assertSubflowResponseBody(body);
-                    return {
-                        type: 'behavior',
-                        behavior: normaliseBehavior(Object.assign({ type: 'subflow' }, body), []),
-                    };
-                }
-                case undefined: {
-                    if (isActionResponseBody(body)) {
-                        return { type: 'behavior', behavior: actionResponseBodyToBehavior(body) };
-                    }
-                    return { type: 'continue' };
-                }
-            }
-        }
-        catch (_a) {
-            return { type: 'behavior', behavior: errorBehavior };
-        }
-    }
-    catch (_b) {
-        return { type: 'continue' };
-    }
-};
-const actionResponseBodyToBehavior = (body) => ({
-    type: 'non-merging-action',
-    action: body.action,
-    track: false,
-});

package/build/controller/executeRefresh.js

@@ -1,45 +0,0 @@
-import { getErrorMessage } from './getErrorMessage';
-import { assertStepResponseBody, isErrorResponseBody, parseResponseBodyAsJsonElement, } from './response-utils';
-import { getResponseType } from './getResponseType';
-export const executeRefresh = async (props) => {
-    const { abortSignal, url, model, etag, analytics, httpClient, trackEvent, logEvent } = props;
-    trackEvent('Refresh Triggered', analytics);
-    try {
-        const response = await httpClient(url !== null && url !== void 0 ? url : '', {
-            method: 'POST',
-            body: JSON.stringify(model),
-            headers: Object.assign({ 'Content-Type': 'application/json' }, (etag ? { 'If-None-Match': etag } : {})),
-            signal: abortSignal,
-        });
-        if (response.status === 304) {
-            trackEvent('Refresh Succeeded', analytics);
-            return { type: 'no-op' };
-        }
-        if (!response.ok) {
-            const responseBody = await parseResponseBodyAsJsonElement(response).catch(() => ({}));
-            const body = isErrorResponseBody(responseBody) ? responseBody : {};
-            trackEvent('Refresh Failed', Object.assign(Object.assign(Object.assign({}, analytics), body.analytics), { statusCode: response.status }));
-            logEvent('error', 'Dynamic Flow - Refresh Failed', Object.assign(Object.assign({}, analytics), { statusCode: response.status }));
-            return { type: 'error', body, statusCode: response.status };
-        }
-        const newEtag = response.headers.get('etag') || null;
-        const body = await parseResponseBodyAsJsonElement(response);
-        const responseType = getResponseType(response.headers, body);
-        if (responseType === 'no-op') {
-            trackEvent('Refresh Succeeded', analytics);
-            return { type: 'no-op' };
-        }
-        assertStepResponseBody(body);
-        trackEvent('Refresh Succeeded', analytics);
-        return { type: 'refresh-step', step: body, etag: newEtag };
-    }
-    catch (error) {
-        if (error instanceof DOMException && error.name === 'AbortError') {
-            trackEvent('Refresh Aborted', analytics);
-            return { type: 'no-op' };
-        }
-        trackEvent('Refresh Failed', analytics);
-        logEvent('error', 'Dynamic Flow - Refresh Failed', Object.assign(Object.assign({}, analytics), { errorMessage: getErrorMessage(error) }));
-        return { type: 'error', body: {} };
-    }
-};