@wise/dynamic-flow-client 5.25.1 → 5.25.2

package/build/domain/components/TextInputComponent.js

@@ -0,0 +1,77 @@
+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 { getDebouncedSchemaOnChange } from '../features/schema-on-change/getDebouncedSchemaOnChange';
+import { getLocalValueValidator } from '../features/validation/validation-functions';
+import { getDebouncedComponentValidationAsync } from '../features/validationAsync/getComponentValidationAsync';
+import { getInputUpdateFunction } from './utils/component-utils';
+import { debounce } from './utils/debounce';
+export const createTextInputComponent = (props, onComponentUpdate) => {
+    const { uid, id, checks, schemaOnChange, performValidationAsync, onValueChange, onPersistAsync, summariser, value } = props, rest = __rest(props, ["uid", "id", "checks", "schemaOnChange", "performValidationAsync", "onValueChange", "onPersistAsync", "summariser", "value"]);
+    const update = getInputUpdateFunction(onComponentUpdate);
+    const onValueChangeDebounced = debounce(onValueChange, 1000);
+    const getValidationErrors = getLocalValueValidator(checks);
+    const performOnChange = getDebouncedSchemaOnChange(schemaOnChange, getValidationErrors);
+    const validateAsync = performValidationAsync
+        ? getDebouncedComponentValidationAsync(update, performValidationAsync)
+        : undefined;
+    const component = Object.assign(Object.assign({ type: 'text', kind: 'input', uid,
+        id,
+        value,
+        onBlur() {
+            const isValid = component.validate();
+            performOnChange === null || performOnChange === void 0 ? void 0 : performOnChange.flush();
+            if (isValid) {
+                void (onPersistAsync === null || onPersistAsync === void 0 ? void 0 : onPersistAsync().catch(() => { }));
+                validateAsync === null || validateAsync === void 0 ? void 0 : validateAsync.flush();
+            }
+            onValueChangeDebounced.flush();
+        },
+        onFocus() { }, // Noop
+        setValue(updatedValue) {
+            const prevValue = component.value;
+            update(component, (draft) => {
+                draft.errors = [];
+                draft.validationAsyncState.messages = {};
+                draft.value = updatedValue;
+            });
+            performOnChange === null || performOnChange === void 0 ? void 0 : performOnChange(prevValue, updatedValue);
+            const isValid = getValidationErrors(updatedValue).length === 0;
+            if (isValid) {
+                validateAsync === null || validateAsync === void 0 ? void 0 : validateAsync(component, updatedValue);
+            }
+            if (!updatedValue) {
+                validateAsync === null || validateAsync === void 0 ? void 0 : validateAsync.cancel();
+            }
+            onValueChangeDebounced();
+        },
+        async getSubmittableValue() {
+            return component.getSubmittableValueSync();
+        },
+        getSubmittableValueSync() {
+            return component.getLocalValue() || null;
+        },
+        getSummary() {
+            return summariser(component.getLocalValue());
+        },
+        getLocalValue() {
+            return component.value;
+        },
+        validate() {
+            const errors = getValidationErrors(component.getLocalValue());
+            update(component, (draft) => {
+                draft.errors = errors;
+            });
+            return errors.length === 0;
+        } }, rest), { start() { },
+        stop() { } });
+    return component;
+};

package/build/domain/components/TupleComponent.js

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

package/build/domain/components/UploadInputComponent.js

@@ -0,0 +1,78 @@
+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 { getLocalValueValidator } from '../features/validation/validation-functions';
+import { getInputUpdateFunction } from './utils/component-utils';
+import { toBase64 } from './utils/file-utils';
+export const createUploadInputComponent = (props, onComponentUpdate) => {
+    const { uid, id, checks, format, value, schemaOnChange, onValueChange, onPersistAsync, summariser } = props, rest = __rest(props, ["uid", "id", "checks", "format", "value", "schemaOnChange", "onValueChange", "onPersistAsync", "summariser"]);
+    const update = getInputUpdateFunction(onComponentUpdate);
+    const getValidationErrors = getLocalValueValidator(checks);
+    const component = Object.assign(Object.assign({ type: 'upload', kind: 'input', uid,
+        id,
+        format,
+        value, base64Value: null, onBlur() {
+            component.validate();
+        },
+        onFocus() { }, // Noop
+        async setValue(updatedValue) {
+            const base64Value = component.format === 'base64' && updatedValue ? await toBase64(updatedValue) : null;
+            update(component, (draft) => {
+                draft.errors = [];
+                draft.value = updatedValue;
+                draft.base64Value = base64Value;
+            });
+            void (schemaOnChange === null || schemaOnChange === void 0 ? void 0 : schemaOnChange());
+            onValueChange();
+            await (onPersistAsync === null || onPersistAsync === void 0 ? void 0 : onPersistAsync().catch((e) => {
+                update(component, (draft) => {
+                    draft.value = null;
+                });
+                throw e;
+            }));
+        },
+        async getSubmittableValue() {
+            const file = component.getLocalValue();
+            if (component.format === 'base64' && file) {
+                return toBase64(file);
+            }
+            return null;
+        },
+        getSubmittableValueSync() {
+            return component.base64Value;
+        },
+        getSummary() {
+            var _a;
+            var _b;
+            return summariser((_b = (_a = component.getLocalValue()) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : null);
+        },
+        getLocalValue() {
+            return component.value;
+        },
+        validate() {
+            const errors = getValidationErrors(component.getLocalValue());
+            update(component, (draft) => {
+                draft.errors = errors;
+            });
+            return errors.length === 0;
+        } }, rest), { start() { },
+        stop() { } });
+    if (format === 'base64' && value && !onPersistAsync) {
+        void toBase64(value).then((base64Value) => {
+            if (base64Value) {
+                update(component, (draft) => {
+                    draft.base64Value = base64Value;
+                });
+            }
+        });
+    }
+    return component;
+};

package/build/domain/components/UpsellComponent.js

@@ -0,0 +1,26 @@
+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 { getInputUpdateFunction } from './utils/component-utils';
+export const createUpsellComponent = (props, onComponentUpdate) => {
+    const update = getInputUpdateFunction(onComponentUpdate);
+    const { dismiss } = props, restProps = __rest(props, ["dismiss"]);
+    const component = Object.assign(Object.assign({ type: 'upsell', kind: 'layout' }, restProps), { visible: true, dismiss: dismiss
+            ? () => {
+                update(component, (draft) => {
+                    draft.visible = false;
+                });
+                dismiss();
+            }
+            : undefined, start() { },
+        stop() { } });
+    return component;
+};

package/build/domain/components/collectionComponent/CollectionComponent.js

@@ -0,0 +1,174 @@
+import { getInputUpdateFunction } from '../utils/component-utils';
+import { debounce } from '../utils/debounce';
+import { recursiveMerge } from '../../../utils/recursiveMerge';
+const DEBOUNCE_TIME = 800;
+export const createCollectionComponent = (props, onComponentUpdate, queryFunction, trackEvent) => {
+    const { uid, analyticsId, control, margin, tags, state } = props;
+    const update = getInputUpdateFunction(onComponentUpdate);
+    let abortController = new AbortController();
+    const trackCollectionEvent = (source, status) => trackEvent(getEventName(source, status), component.state.analytics);
+    const query = (mode, source) => {
+        var _a, _b;
+        abortController.abort();
+        abortController = new AbortController();
+        const { signal } = abortController;
+        trackCollectionEvent(source !== null && source !== void 0 ? source : mode, 'Triggered');
+        queryFunction({
+            searchParam: (_a = component.state.search) === null || _a === void 0 ? void 0 : _a.param,
+            query: (_b = component.state.search) === null || _b === void 0 ? void 0 : _b.query,
+            cursor: mode === 'pagination' ? component.state.nextCursor : undefined,
+            signal,
+            filters: component.state.filters,
+        })
+            .then((response) => {
+            if (!response) {
+                return;
+            }
+            update(component, (draft) => {
+                draft.state = mergeState(mode, component.state, response);
+                draft.status = {
+                    type: 'idle',
+                    loadMore: response.nextCursor ? paginate : undefined,
+                };
+            });
+            trackCollectionEvent(source !== null && source !== void 0 ? source : mode, 'Succeeded');
+        })
+            .catch(() => {
+            if (!signal.aborted) {
+                const retry = () => {
+                    update(component, (draft) => {
+                        draft.status = { type: 'loading', reason: mode };
+                    });
+                    query(mode, source);
+                };
+                update(component, (draft) => {
+                    if (mode === 'search') {
+                        draft.state.sections = [];
+                    }
+                    draft.status = { type: 'error', reason: mode, retry };
+                });
+                trackCollectionEvent(source !== null && source !== void 0 ? source : mode, 'Failed');
+            }
+        });
+    };
+    const debouncedQuery = debounce(query, DEBOUNCE_TIME);
+    const search = () => {
+        abortController.abort();
+        debouncedQuery('search');
+    };
+    const filter = () => {
+        debouncedQuery('search', 'filter');
+        debouncedQuery.flush();
+    };
+    const paginate = () => query('pagination');
+    const mergeState = (mode, original, incoming) => { var _a, _b; return ({
+        sections: mode === 'pagination'
+            ? mergeSections(original.sections, incoming.sections)
+            : incoming.sections,
+        nextCursor: incoming.nextCursor,
+        filters: incoming.filters ? mapFilters(incoming.filters) : original.filters,
+        search: incoming.search ? mapSearch(incoming.search) : original.search,
+        beforeSections: (_a = incoming.beforeSections) !== null && _a !== void 0 ? _a : original.beforeSections,
+        afterSections: (_b = incoming.afterSections) !== null && _b !== void 0 ? _b : original.afterSections,
+        analytics: mode === 'pagination'
+            ? recursiveMerge(original.analytics, incoming.analytics)
+            : incoming.analytics,
+    }); };
+    const selectFilter = (filterIndex, optionIndex) => {
+        var _a;
+        const selected = (_a = component.state.filters) === null || _a === void 0 ? void 0 : _a[filterIndex];
+        if (!selected) {
+            return;
+        }
+        const currentValue = selected.options[optionIndex].selected;
+        update(component, (draft) => {
+            if (!draft.state.filters) {
+                return;
+            }
+            const draftFilter = draft.state.filters[filterIndex];
+            if (selected.multiSelect) {
+                draftFilter.options[optionIndex].selected = !currentValue;
+            }
+            else {
+                draftFilter.options.forEach((draftOption, index) => {
+                    // eslint-disable-next-line no-param-reassign
+                    draftOption.selected = index === optionIndex ? !currentValue : false;
+                });
+            }
+            draft.status = { type: 'loading', reason: 'search' };
+        });
+        filter();
+    };
+    const mapFilters = (filters) => filters === null || filters === void 0 ? void 0 : filters.map((f, filterIndex) => { var _a; return (Object.assign(Object.assign({}, f), { options: (_a = f.options) === null || _a === void 0 ? void 0 : _a.map((option, optionIndex) => { var _a; return (Object.assign(Object.assign({}, option), { selected: (_a = option.selected) !== null && _a !== void 0 ? _a : false, onSelect: () => selectFilter(filterIndex, optionIndex) })); }) })); });
+    const mapSearch = (searchConfig) => searchConfig
+        ? Object.assign(Object.assign({ query: '' }, searchConfig), { onChange(value) {
+                update(component, (draft) => {
+                    if (draft.state.search) {
+                        draft.state.search.query = value;
+                        draft.status = { type: 'loading', reason: 'search' };
+                    }
+                });
+                search();
+            } }) : undefined;
+    const component = {
+        type: 'collection',
+        kind: 'layout',
+        uid,
+        analyticsId,
+        control,
+        margin,
+        tags,
+        getChildren() {
+            var _a, _b;
+            var _c, _d;
+            return [
+                ...((_c = (_a = component.state) === null || _a === void 0 ? void 0 : _a.beforeSections) !== null && _c !== void 0 ? _c : []),
+                ...((_d = (_b = component.state) === null || _b === void 0 ? void 0 : _b.afterSections) !== null && _d !== void 0 ? _d : []),
+            ];
+        },
+        status: {
+            type: 'idle',
+            loadMore: state.nextCursor ? () => query('pagination') : undefined,
+        },
+        state: Object.assign(Object.assign({}, state), { filters: mapFilters(state.filters), search: mapSearch(props.search) }),
+        start() {
+            component.getChildren().forEach((child) => child.start());
+        },
+        stop() {
+            component.getChildren().forEach((child) => child.stop());
+        },
+    };
+    return component;
+};
+const mergeSections = (existing, incoming) => {
+    const knownIds = new Set(existing.map((section) => section.id));
+    const newSections = incoming.filter((section) => !knownIds.has(section.id));
+    const merged = existing.map((section) => {
+        var _a, _b, _c, _d;
+        const match = incoming.find((s) => s.id === section.id);
+        if (!match)
+            return section;
+        return {
+            id: match.id,
+            title: (_a = match.title) !== null && _a !== void 0 ? _a : section.title,
+            callToAction: (_b = match.callToAction) !== null && _b !== void 0 ? _b : section.callToAction,
+            help: (_c = match.help) !== null && _c !== void 0 ? _c : section.help,
+            inlineAlert: (_d = match.inlineAlert) !== null && _d !== void 0 ? _d : section.inlineAlert,
+            items: [...section.items, ...match.items],
+        };
+    });
+    return [...merged, ...newSections];
+};
+const getEventName = (mode, state) => {
+    const getMode = () => {
+        switch (mode) {
+            case 'pagination':
+                return 'Pagination';
+            case 'search':
+                return 'Search';
+            case 'filter':
+                return 'Filter';
+        }
+    };
+    return `Collection ${getMode()} ${state}`;
+};