@wise/dynamic-flow-client 5.30.0-experimental-7a76ef5 → 5.30.0

package/build/domain/mappers/utils/suggestions-utils.test.js

@@ -0,0 +1,36 @@
+import { mapSuggestions } from './suggestions-utils';
+import { vi } from 'vitest';
+describe('mapSuggestions', () => {
+    it('logs a warning when the value is a not a string', () => {
+        const logEvent = vi.fn();
+        const suggestions = {
+            values: [{ value: 123, label: 'Number suggestion' }],
+        };
+        mapSuggestions(suggestions, logEvent);
+        expect(logEvent).toHaveBeenCalledWith('warning', 'Suggestion values must be of type string. Found number instead.');
+    });
+    it('logs a warning when the value is null', () => {
+        const logEvent = vi.fn();
+        const suggestions = {
+            values: [{ value: null, label: 'Null suggestion' }],
+        };
+        mapSuggestions(suggestions, logEvent);
+        expect(logEvent).toHaveBeenCalledWith('warning', 'Suggestion values must be of type string. Found object instead.');
+    });
+    it('does not log a warning when the value is a string', () => {
+        const logEvent = vi.fn();
+        const suggestions = {
+            values: [{ value: 'string', label: 'String suggestion' }],
+        };
+        mapSuggestions(suggestions, logEvent);
+        expect(logEvent).not.toHaveBeenCalled();
+    });
+    it('does not log a warning when the value is an empty string', () => {
+        const logEvent = vi.fn();
+        const suggestions = {
+            values: [{ value: '', label: 'Empty string suggestion' }],
+        };
+        mapSuggestions(suggestions, logEvent);
+        expect(logEvent).not.toHaveBeenCalled();
+    });
+});

package/build/domain/mappers/utils/tags-utils.js

@@ -0,0 +1 @@
+export const mapTags = ({ tag, tags }) => tags !== null && tags !== void 0 ? tags : (tag != null ? [tag] : undefined);

package/build/domain/mappers/utils/utils.js

@@ -0,0 +1,45 @@
+import { getDomainLayerBehavior } from './behavior-utils';
+import { getHrefWithTracking } from './getHrefWithTracking';
+import { mapLegacyContext } from './legacy-utils';
+import { getDomainLayerMedia } from './media-utils';
+export const mapInlineAlert = (alert) => {
+    return alert
+        ? {
+            content: alert.content,
+            context: alert.context ? mapLegacyContext(alert.context) : 'neutral',
+            media: getDomainLayerMedia({ media: alert.media }),
+        }
+        : undefined;
+};
+export const mapAdditionalInfo = (info, mapperProps) => {
+    const { onBehavior, trackEvent, registerSubmissionBehavior } = mapperProps;
+    if (info) {
+        const behavior = getDomainLayerBehavior(info, [], registerSubmissionBehavior);
+        const isLink = behavior.type === 'link';
+        return {
+            text: info.text,
+            href: isLink ? behavior.url : undefined,
+            hrefWithTracking: getHrefWithTracking({
+                behavior,
+                onBehavior,
+                trackEvent,
+            }),
+            accessibilityDescription: info.accessibilityDescription,
+            onClick: behavior.type === 'none'
+                ? undefined
+                : () => {
+                    void onBehavior(behavior);
+                },
+        };
+    }
+    return undefined;
+};
+export const mapSchemaAlert = (alert) => {
+    return alert
+        ? {
+            content: alert.markdown,
+            context: alert.context ? mapLegacyContext(alert.context) : 'neutral',
+            media: getDomainLayerMedia({ media: alert.media }),
+        }
+        : undefined;
+};

package/build/domain/types.js

@@ -0,0 +1 @@
+export {};

package/build/i18n/index.js

@@ -0,0 +1,40 @@
+import cs from './cs.json';
+import de from './de.json';
+import en from './en.json';
+import es from './es.json';
+import fr from './fr.json';
+import hu from './hu.json';
+import id from './id.json';
+import it from './it.json';
+import ja from './ja.json';
+import nl from './nl.json';
+import pl from './pl.json';
+import pt from './pt.json';
+import ro from './ro.json';
+import ru from './ru.json';
+import th from './th.json';
+import tr from './tr.json';
+import zhCN from './zh_CN.json';
+import zhHK from './zh_HK.json';
+const translations = {
+    cs,
+    en,
+    de,
+    es,
+    fr,
+    hu,
+    id,
+    it,
+    ja,
+    nl,
+    pl,
+    pt,
+    ro,
+    ru,
+    th,
+    tr,
+    zh: zhCN,
+    'zh-CN': zhCN,
+    'zh-HK': zhHK,
+};
+export default translations;

package/build/index.js

@@ -0,0 +1,9 @@
+export { makeHttpClient } from './common/makeHttpClient';
+export { default as translations } from './i18n';
+export { findRendererPropsByType } from './renderers/utils';
+export { useDynamicFlow } from './useDynamicFlow';
+export { useDynamicFlowModal } from './useDynamicFlowModal';
+export { DynamicFlowCore as DynamicFlow } from './DynamicFlowCore';
+export { eventNames } from './domain/features/eventNames';
+export { makeRequestCache } from './domain/features/prefetch/request-cache';
+export { getDynamicSubflowRenderer } from './renderers/subflow/getDynamicSubflowRenderer';

package/build/main.css

@@ -143,13 +143,33 @@
   background-position-x: 100%;
   animation: shimmer 1s infinite linear;
   transition: background 200ms;
-  border-color: var(--color-border-neutral);
 }
 
 .df-filter-loader .np-chip>* {
   visibility: hidden;
 }
 
+/* v2 filter chips rest on a fainter border, leaving hover and press to Neptune,
+   scoped to the v2 filters as v1 shares the df-filters-container class */
+.df-filters-collapsible-content .np-chip:not(:hover, :active) {
+  border-color: var(--color-border-overlay);
+}
+
+/* selected chips keep the unselected fill, so only their border colour stands out,
+   except while loading, when every chip shares the unselected border */
+.df-filters-container:not(.df-filter-loader) .np-chip.df-chip--selected {
+  border-color: var(--color-interactive-accent);
+}
+
+.np-theme-personal .df-filters-container:not(.df-filter-loader) .np-chip.df-chip--selected:not(.disabled) {
+  border-color: var(--color-interactive-primary);
+}
+
+/* Neptune's hover and press styles don't depend on a click handler, so chips without one opt out */
+.df-filters-collapsible-content .np-chip.df-chip--static {
+  pointer-events: none;
+}
+
 @keyframes shimmer {
   to {
     background-position-x: 0%;
@@ -321,9 +341,45 @@
     width: 300px;
   }
 }
+/**
+ * FIXME: .static-spotlight is magic CSS to work around Neptune limitation
+ *   that a ListItem with Spotlight must have a control
+ */
+
+/* Hide the dummy button. */
+.static-spotlight .wds-list-item-control {
+    display: none;
+}
+
+/* Remove the clickable cursor and label interaction. */
+.static-spotlight .wds-list-item-view {
+    cursor: revert !important;
+    pointer-events: none;
+}
+
+/* Preserve real links/buttons in additional info or prompts. */
+.static-spotlight .wds-list-item-additional-info,
+.static-spotlight .wds-list-item-prompt {
+    pointer-events: auto;
+}
+
+/* Keep the resting background during hover and press. */
+.static-spotlight.wds-list-item-spotlight-active:not(.disabled):not(:disabled):is(:hover, :active) {
+    background-color: var(--color-background-neutral);
+}
+
+.static-spotlight.wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):is(:hover, :active) {
+    background-color: color-mix(
+            in srgb,
+            var(--color-background-neutral) 25%,
+            transparent
+    );
+}
+
 .df-markdown> :last-child {
   margin-bottom: 0px;
 }
+
 .df-media-layout-avatar {
   display: flex;
 }

package/build/renderers/CoreContainerRenderer.js

@@ -0,0 +1,5 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export const CoreContainerRenderer = {
+    canRenderType: 'container',
+    render: ({ children }) => _jsx(_Fragment, { children: children }),
+};

package/build/renderers/CoreRootRenderer.js

@@ -0,0 +1,12 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { findRendererPropsByType } from './utils';
+export const CoreRootRenderer = {
+    canRenderType: 'root',
+    render: ({ children, childrenProps, subflow }) => {
+        if ((subflow === null || subflow === void 0 ? void 0 : subflow.presentation.type) === 'push') {
+            return _jsx(_Fragment, { children: subflow.children });
+        }
+        const [stepProps] = findRendererPropsByType(childrenProps, 'step');
+        return (_jsxs("div", { id: stepProps === null || stepProps === void 0 ? void 0 : stepProps.id, className: "dynamic-flow-step", children: [children, (subflow === null || subflow === void 0 ? void 0 : subflow.presentation.type) === 'modal' ? subflow.children : undefined] }));
+    },
+};

package/build/renderers/EmptyLoadingStateRenderer.js

@@ -0,0 +1,5 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export const EmptyLoadingStateRenderer = {
+    canRenderType: 'loading-state',
+    render: () => _jsx(_Fragment, {}),
+};

package/build/renderers/getRenderFunction.js

@@ -0,0 +1,24 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export const getRenderFunction = (renderers) => {
+    function ComponentRenderer(props) {
+        const { type } = props;
+        if (type === 'hidden') {
+            return null;
+        }
+        const renderer = renderers.find(({ canRenderType, canRender = () => true }) => 
+        // once the type is matched, we know the props are of the correct type
+        canRenderType === type && canRender(props));
+        if (!renderer) {
+            throw new Error(`Could not find a renderer for ${type}`);
+        }
+        // if renderer defined, we know props are of the correct type
+        return renderer.render(props);
+    }
+    const render = (props) => {
+        if (!props) {
+            return _jsx(_Fragment, {});
+        }
+        return _jsx(ComponentRenderer, Object.assign({}, props), props.uid);
+    };
+    return render;
+};

package/build/renderers/getSchemaErrorMessageFunction.js

@@ -0,0 +1,111 @@
+import { formatDate } from '@transferwise/formatting';
+import errorMessages from '../common/messages/validation.messages';
+import genericErrorMessages from '../common/messages/generic-error.messages';
+import arrayErrorMessages from '../common/messages/validation.array.messages';
+import fileUploadMessages from '../common/messages/file-upload.messages';
+import multiFileUploadMessages from '../common/messages/multi-file-upload.messages';
+import downloadMessages from '../common/messages/download.messages';
+export function getSchemaErrorMessageFunction(formatMessage, locale) {
+    return (validationMessages) => createErrorMessageFunctions(validationMessages !== null && validationMessages !== void 0 ? validationMessages : {}, formatMessage, locale);
+}
+const createErrorMessageFunctions = (validationMessages, formatMessage, locale) => ({
+    minimum(minimum) {
+        var _a;
+        return ((_a = validationMessages.minimum) !== null && _a !== void 0 ? _a : formatMessage(errorMessages.minimum, {
+            minimum,
+        }));
+    },
+    maximum(maximum) {
+        var _a;
+        return ((_a = validationMessages.maximum) !== null && _a !== void 0 ? _a : formatMessage(errorMessages.maximum, {
+            maximum,
+        }));
+    },
+    minimumDate(minimumDate) {
+        var _a;
+        return ((_a = validationMessages.minimum) !== null && _a !== void 0 ? _a : formatMessage(errorMessages.minimumDate, {
+            minimum: formatDate(new Date(minimumDate), locale, formatDateOptions),
+        }));
+    },
+    maximumDate(maximumDate) {
+        var _a;
+        return ((_a = validationMessages.maximum) !== null && _a !== void 0 ? _a : formatMessage(errorMessages.maximumDate, {
+            maximum: formatDate(new Date(maximumDate), locale, formatDateOptions),
+        }));
+    },
+    invalidDate() {
+        var _a;
+        return (_a = validationMessages.invalidDate) !== null && _a !== void 0 ? _a : formatMessage(errorMessages.patternDate);
+    },
+    minLength(minLength) {
+        var _a;
+        return ((_a = validationMessages.minLength) !== null && _a !== void 0 ? _a : formatMessage(errorMessages.minLength, {
+            minLength,
+        }));
+    },
+    maxLength(maxLength) {
+        var _a;
+        return ((_a = validationMessages.maxLength) !== null && _a !== void 0 ? _a : formatMessage(errorMessages.maxLength, {
+            maxLength,
+        }));
+    },
+    minItems(minItems) {
+        var _a;
+        return ((_a = validationMessages.minItems) !== null && _a !== void 0 ? _a : formatMessage(arrayErrorMessages.minItemsError, {
+            minItems,
+        }));
+    },
+    maxItems(maxItems) {
+        var _a;
+        return ((_a = validationMessages.maxItems) !== null && _a !== void 0 ? _a : formatMessage(arrayErrorMessages.maxItemsError, {
+            maxItems,
+        }));
+    },
+    minFiles(minItems) {
+        var _a;
+        return ((_a = validationMessages.minItems) !== null && _a !== void 0 ? _a : formatMessage(multiFileUploadMessages.minItemsError, {
+            minItems,
+        }));
+    },
+    maxFiles(maxItems) {
+        var _a;
+        return ((_a = validationMessages.maxItems) !== null && _a !== void 0 ? _a : formatMessage(multiFileUploadMessages.maxItemsError, {
+            maxItems,
+        }));
+    },
+    maxSize() {
+        var _a;
+        return (_a = validationMessages.maxSize) !== null && _a !== void 0 ? _a : formatMessage(fileUploadMessages.maxFileSizeError);
+    },
+    accepts() {
+        var _a;
+        return (_a = validationMessages.accepts) !== null && _a !== void 0 ? _a : formatMessage(fileUploadMessages.wrongFileTypeError);
+    },
+    pattern() {
+        var _a;
+        return (_a = validationMessages.pattern) !== null && _a !== void 0 ? _a : formatMessage(errorMessages.pattern);
+    },
+    required() {
+        var _a;
+        return (_a = validationMessages.required) !== null && _a !== void 0 ? _a : formatMessage(errorMessages.required);
+    },
+    genericError() {
+        return formatMessage(genericErrorMessages.genericError);
+    },
+    genericErrorWithRetry() {
+        return formatMessage(genericErrorMessages.genericErrorRetryHint);
+    },
+    downloadStarted() {
+        return formatMessage(downloadMessages.downloadStarted);
+    },
+    downloadFailed() {
+        return formatMessage(downloadMessages.downloadFailed);
+    },
+    downloadSuccessful() {
+        return formatMessage(downloadMessages.downloadSuccessful);
+    },
+});
+const formatDateOptions = {
+    timeZone: 'UTC',
+    dateStyle: 'long',
+};

package/build/renderers/mappers/alertComponentToProps.js

@@ -0,0 +1,3 @@
+import { mapCallToActionOptional } from './utils/mapCallToAction';
+import { pick } from './utils/pick';
+export const alertComponentToProps = (component, rendererMapperProps) => (Object.assign(Object.assign(Object.assign({}, pick(component, 'uid', 'analyticsId', 'type', 'context', 'control', 'margin', 'markdown', 'media', 'tags', 'title')), { callToAction: mapCallToActionOptional(component.callToAction), onDismiss: component.dismiss, secondaryCallToAction: mapCallToActionOptional(component.secondaryCallToAction) }), rendererMapperProps));

package/build/renderers/mappers/allOfComponentToProps.js

@@ -0,0 +1,6 @@
+import { componentToRendererProps } from './componentToRendererProps';
+import { pick } from './utils/pick';
+export const allOfComponentToProps = (component, rendererMapperProps) => {
+    const childrenProps = component.components.map((c) => componentToRendererProps(c, rendererMapperProps));
+    return Object.assign(Object.assign(Object.assign({ type: 'form-section' }, pick(component, 'uid', 'analyticsId', 'control', 'description', 'help', 'media', 'tags', 'title')), rendererMapperProps), { children: childrenProps.map(rendererMapperProps.render), childrenProps });
+};

package/build/renderers/mappers/booleanInputComponentToProps.js

@@ -0,0 +1,3 @@
+import { inputComponentToProps } from './utils/inputComponentToProps';
+import { pick } from './utils/pick';
+export const booleanInputComponentToProps = (component, rendererMapperProps) => { var _a; return (Object.assign(Object.assign(Object.assign(Object.assign({}, inputComponentToProps(component, 'input-checkbox')), rendererMapperProps), pick(component, 'additionalText', 'supportingValues', 'inlineAlert')), { onChange: component.setValue, value: (_a = component.value) !== null && _a !== void 0 ? _a : false })); };

package/build/renderers/mappers/boxComponentToProps.js

@@ -0,0 +1,13 @@
+import { componentToRendererProps } from './componentToRendererProps';
+import { pick } from './utils/pick';
+export const boxComponentToProps = (component, rendererMapperProps) => {
+    const childrenProps = component.components.map((c) => componentToRendererProps(c, rendererMapperProps));
+    const { border, control } = component;
+    return Object.assign(Object.assign(Object.assign({}, pick(component, 'uid', 'analyticsId', 'type', 'control', 'width', 'margin', 'tags')), rendererMapperProps), { control: mapBoxControl({ border, control }), children: childrenProps.map(rendererMapperProps.render), childrenProps });
+};
+const mapBoxControl = ({ border, control, }) => {
+    if (border && control == null) {
+        return 'bordered';
+    }
+    return control;
+};

package/build/renderers/mappers/buttonComponentToProps.js

@@ -0,0 +1,4 @@
+import { pick } from './utils/pick';
+export const buttonComponentToProps = (component, rendererMapperProps) => {
+    return Object.assign(Object.assign(Object.assign({ type: 'button' }, pick(component, 'uid', 'analyticsId', 'title', 'control', 'context', 'margin', 'media', 'pinOrder', 'size', 'onClick', 'tags')), { disabled: component.disabled || rendererMapperProps.stepLoadingState !== 'idle' }), rendererMapperProps);
+};

package/build/renderers/mappers/collectionComponentToProps.js

@@ -0,0 +1,54 @@
+import { componentToRendererProps } from './componentToRendererProps';
+import { pick } from './utils/pick';
+import { mapAdditionalInfo, mapCallToActionOptional } from './utils/mapCallToAction';
+export const collectionComponentToProps = (component, rendererMapperProps) => {
+    const { stack } = component;
+    return Object.assign(Object.assign(Object.assign({}, pick(component, 'uid', 'analyticsId', 'type', 'control', 'margin', 'tags', 'fork', 'pop')), rendererMapperProps), { state: mapCollectionState(component, component.getActiveState(), rendererMapperProps), onSearchChange: (query) => component.search(component.getActiveState(), query), depth: stack.length - 1 });
+};
+const mapCollectionState = (component, state, rendererMapperProps) => {
+    var _a, _b;
+    var _c, _d;
+    const { render } = rendererMapperProps;
+    const { search } = state;
+    const beforeSectionsProps = (_c = (_a = state.beforeSections) === null || _a === void 0 ? void 0 : _a.map((child) => componentToRendererProps(child, rendererMapperProps))) !== null && _c !== void 0 ? _c : [];
+    const afterSectionsProps = (_d = (_b = state.afterSections) === null || _b === void 0 ? void 0 : _b.map((child) => componentToRendererProps(child, rendererMapperProps))) !== null && _d !== void 0 ? _d : [];
+    return {
+        id: state.id,
+        status: mapStatus(component, state),
+        sections: mapSections(state.sections, rendererMapperProps),
+        filters: mapFilters(component, state),
+        beforeSectionsProps,
+        beforeSections: beforeSectionsProps.map(render),
+        afterSectionsProps,
+        afterSections: afterSectionsProps.map(render),
+        search: search
+            ? Object.assign(Object.assign({}, pick(search, 'title', 'hint', 'hints', 'query')), { initialSections: search.initialSections
+                    ? mapSections(search.initialSections, rendererMapperProps)
+                    : undefined }) : undefined,
+    };
+};
+// TODO update renderers to use a different structure, this is just to avoid breaking them
+const mapStatus = (component, state) => {
+    const { status } = state;
+    switch (status.type) {
+        case 'idle':
+            return {
+                type: 'idle',
+                loadMore: state.nextCursor ? () => component.loadMore(state) : undefined,
+            };
+        case 'loading':
+            return status;
+        case 'error':
+            return Object.assign(Object.assign({}, status), { retry: () => component.retry(state) });
+    }
+};
+const mapFilters = (component, state) => { var _a; return ((_a = state.filters) !== null && _a !== void 0 ? _a : []).map((filter, filterIndex) => (Object.assign(Object.assign({}, filter), { options: filter.options.map((option, optionIndex) => (Object.assign(Object.assign({}, option), { onSelect: () => component.selectFilter(state, filterIndex, optionIndex) }))) }))); };
+const mapSections = (sections, rendererMapperProps) => sections.map((section) => mapSection(section, rendererMapperProps));
+const mapSection = (section, rendererMapperProps) => {
+    const baseProps = Object.assign(Object.assign({}, section), { callToAction: mapCallToActionOptional(section.callToAction) });
+    if (section.type === 'layout') {
+        const childrenProps = section.components.map((child) => componentToRendererProps(child, rendererMapperProps));
+        return Object.assign(Object.assign({}, baseProps), { type: 'layout', childrenProps, children: childrenProps.map(rendererMapperProps.render) });
+    }
+    return Object.assign(Object.assign({}, baseProps), { type: 'items', items: section.items.map((item) => (Object.assign(Object.assign({}, item), { callToAction: mapCallToActionOptional(item.callToAction), additionalInfo: mapAdditionalInfo(item.additionalInfo), disabled: rendererMapperProps.stepLoadingState !== 'idle' || item.disabled }))) });
+};

package/build/renderers/mappers/columnsComponentToProps.js

@@ -0,0 +1,8 @@
+import { componentToRendererProps } from './componentToRendererProps';
+import { pick } from './utils/pick';
+export const columnsComponentToProps = (component, rendererMapperProps) => {
+    const startChildrenProps = component.startComponents.map((c) => componentToRendererProps(c, rendererMapperProps));
+    const endChildrenProps = component.endComponents.map((c) => componentToRendererProps(c, rendererMapperProps));
+    return Object.assign(Object.assign(Object.assign({}, rendererMapperProps), pick(component, 'uid', 'analyticsId', 'type', 'bias', 'control', 'margin', 'tags')), { startChildren: startChildrenProps.map(rendererMapperProps.render), endChildren: endChildrenProps.map(rendererMapperProps.render), startChildrenProps,
+        endChildrenProps });
+};