@wise/dynamic-flow-client 5.13.1 → 5.13.2

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

@@ -0,0 +1,166 @@
+import { groupLayoutByPinned } from './groupLayoutByPinned';
+describe('groupLayoutByPinned', () => {
+    it('should handle empty layouts array', () => {
+        const result = groupLayoutByPinned([]);
+        expect(result.pinned).toEqual([]);
+        expect(result.nonPinned).toEqual([]);
+    });
+    it('should leave unpinned layouts as is', () => {
+        const layouts = [
+            { type: 'button' },
+            { type: 'heading', text: 'Heading' },
+            { type: 'paragraph', text: 'Paragraph' },
+            {
+                type: 'columns',
+                left: [
+                    { type: 'button' },
+                    { type: 'heading', text: 'Heading' },
+                    { type: 'paragraph', text: 'Paragraph' },
+                ],
+                right: [
+                    { type: 'button' },
+                    { type: 'heading', text: 'Heading' },
+                    { type: 'paragraph', text: 'Paragraph' },
+                ],
+            },
+        ];
+        const result = groupLayoutByPinned(layouts);
+        expect(result.pinned).toEqual([]);
+        expect(result.nonPinned).toEqual(layouts);
+    });
+    it('should group layouts by pinned', () => {
+        const layouts = [
+            { type: 'button', pinOrder: 1 },
+            { type: 'button', pinOrder: 2 },
+            { type: 'button' },
+        ];
+        const result = groupLayoutByPinned(layouts);
+        expect(result.pinned).toEqual([
+            { type: 'button', pinOrder: 1 },
+            { type: 'button', pinOrder: 2 },
+        ]);
+        expect(result.nonPinned).toEqual([{ type: 'button' }]);
+    });
+    it('should group layouts by pinned in nested layout', () => {
+        const layouts = [
+            {
+                type: 'columns',
+                left: [
+                    {
+                        type: 'button',
+                        pinOrder: 1,
+                    },
+                    {
+                        type: 'heading',
+                        text: 'Money for here, there and everywhere',
+                    },
+                    {
+                        type: 'button',
+                        pinOrder: 2,
+                    },
+                ],
+                right: [
+                    {
+                        type: 'paragraph',
+                        text: "Sending money shouldn't cost the earth. That's why we charge you as little as possible when you transfer and exchange money internationally – you can save up to 9x compared to UK high street banks.",
+                    },
+                    {
+                        type: 'button',
+                        pinOrder: 3,
+                    },
+                ],
+            },
+            { type: 'button' },
+        ];
+        const result = groupLayoutByPinned(layouts);
+        expect(result.pinned).toEqual([
+            { type: 'button', pinOrder: 1 },
+            { type: 'button', pinOrder: 2 },
+            { type: 'button', pinOrder: 3 },
+        ]);
+        expect(result.nonPinned).toEqual([
+            {
+                type: 'columns',
+                left: [
+                    {
+                        type: 'heading',
+                        text: 'Money for here, there and everywhere',
+                    },
+                ],
+                right: [
+                    {
+                        type: 'paragraph',
+                        text: "Sending money shouldn't cost the earth. That's why we charge you as little as possible when you transfer and exchange money internationally – you can save up to 9x compared to UK high street banks.",
+                    },
+                ],
+            },
+            { type: 'button' },
+        ]);
+    });
+    it('should handle layouts with child components', () => {
+        const layouts = [
+            {
+                type: 'section',
+                title: 'Container',
+                components: [
+                    { type: 'button', pinOrder: 0 },
+                    { type: 'paragraph', text: 'Some text' },
+                    { type: 'button', pinOrder: 1 },
+                ],
+            },
+            { type: 'button' },
+        ];
+        const result = groupLayoutByPinned(layouts);
+        expect(result.pinned).toEqual([
+            { type: 'button', pinOrder: 0 },
+            { type: 'button', pinOrder: 1 },
+        ]);
+        expect(result.nonPinned).toEqual([
+            {
+                type: 'section',
+                title: 'Container',
+                components: [{ type: 'paragraph', text: 'Some text' }],
+            },
+            { type: 'button' },
+        ]);
+    });
+    it('should handle mixed nested structures', () => {
+        const layouts = [
+            {
+                type: 'columns',
+                left: [
+                    {
+                        type: 'section',
+                        title: 'Left Container',
+                        components: [
+                            { type: 'button', pinOrder: 1 },
+                            { type: 'paragraph', text: 'Left text' },
+                        ],
+                    },
+                ],
+                right: [
+                    { type: 'button', pinOrder: 2 },
+                    { type: 'paragraph', text: 'Right paragraph' },
+                ],
+            },
+        ];
+        const result = groupLayoutByPinned(layouts);
+        expect(result.pinned).toEqual([
+            { type: 'button', pinOrder: 1 },
+            { type: 'button', pinOrder: 2 },
+        ]);
+        expect(result.nonPinned).toEqual([
+            {
+                type: 'columns',
+                left: [
+                    {
+                        type: 'section',
+                        title: 'Left Container',
+                        components: [{ type: 'paragraph', text: 'Left text' }],
+                    },
+                ],
+                right: [{ type: 'paragraph', text: 'Right paragraph' }],
+            },
+        ]);
+    });
+});

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

@@ -0,0 +1,9 @@
+export const mapSpecImage = (image) => {
+    var _a, _b, _c;
+    return image
+        ? {
+            uri: (_b = (_a = image.uri) !== null && _a !== void 0 ? _a : image.url) !== null && _b !== void 0 ? _b : '',
+            accessibilityDescription: (_c = image.accessibilityDescription) !== null && _c !== void 0 ? _c : image.text,
+        }
+        : undefined;
+};

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

@@ -0,0 +1,11 @@
+/**
+ * Normalizes the margin of the last layout component in the container by removing its margin if it is not explicitly set.
+ * @param container The array of layout components.
+ * @returns The array of layout components with the last component's margin normalized if needed.
+ */
+export const normaliseMarginInLastComponent = (container) => {
+    return container.map((component, index) => {
+        const shouldRemoveMargin = index === container.length - 1 && component.margin === undefined;
+        return shouldRemoveMargin ? Object.assign(Object.assign({}, component), { margin: 'xs' }) : component;
+    });
+};

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

@@ -0,0 +1,49 @@
+export const mapLegacyContext = (context) => {
+    switch (context) {
+        case 'success':
+            return 'positive';
+        case 'failure':
+            return 'negative';
+        case 'info':
+        case 'primary':
+            return 'neutral';
+        default:
+            return context;
+    }
+};
+export const mapLegacyBias = (bias) => {
+    switch (bias) {
+        case 'left':
+            return 'start';
+        case 'right':
+            return 'end';
+        default:
+            return bias;
+    }
+};
+export const mapLegacyAlign = (align) => {
+    switch (align) {
+        case 'left':
+            return 'start';
+        case 'right':
+            return 'end';
+        default:
+            return align;
+    }
+};
+const legacyActionTypeToContext = {
+    positive: 'positive',
+    negative: 'negative',
+    primary: 'neutral',
+    secondary: 'neutral',
+    link: 'neutral',
+};
+export const mapLegacyActionTypeToContext = (type) => type && type in legacyActionTypeToContext ? legacyActionTypeToContext[type] : 'neutral';
+const legacyActionTypeToControl = {
+    primary: 'primary',
+    secondary: 'secondary',
+    link: 'tertiary',
+    positive: 'primary',
+    negative: 'primary',
+};
+export const mapLegacyActionTypeToControl = (type) => type && type in legacyActionTypeToControl ? legacyActionTypeToControl[type] : 'secondary';

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

@@ -0,0 +1,14 @@
+import { mapSpecImage } from './image';
+export const getDomainLayerMedia = ({ icon, image, media }) => {
+    if (media) {
+        return media;
+    }
+    if (icon || image) {
+        return {
+            type: 'legacy',
+            icon,
+            image: mapSpecImage(image),
+        };
+    }
+    return undefined;
+};

package/build/domain/mappers/utils/suggestions-utils.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 { getDomainLayerMedia } from './media-utils';
+import { mapTags } from './tags-utils';
+export const mapStringSchemaSuggestions = (suggestions, logEvent) => {
+    if (!suggestions)
+        return undefined;
+    return {
+        values: suggestions.values.map((_a) => {
+            var { icon, image, media, value } = _a, rest = __rest(_a, ["icon", "image", "media", "value"]);
+            if (typeof value !== 'string') {
+                logEvent('warning', `Suggestion values for string schemas must be of type string. Found ${typeof value} instead.`);
+            }
+            return Object.assign(Object.assign({}, rest), { media: getDomainLayerMedia({ icon, image, media }), value, tags: mapTags(rest) });
+        }),
+    };
+};

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

@@ -0,0 +1,36 @@
+import { mapStringSchemaSuggestions } from './suggestions-utils';
+import { vi } from 'vitest';
+describe('mapStringSchemaSuggestions', () => {
+    it('logs a warning when the value is a not a string', () => {
+        const logEvent = vi.fn();
+        const suggestions = {
+            values: [{ value: 123, label: 'Number suggestion' }],
+        };
+        mapStringSchemaSuggestions(suggestions, logEvent);
+        expect(logEvent).toHaveBeenCalledWith('warning', 'Suggestion values for string schemas 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' }],
+        };
+        mapStringSchemaSuggestions(suggestions, logEvent);
+        expect(logEvent).toHaveBeenCalledWith('warning', 'Suggestion values for string schemas 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' }],
+        };
+        mapStringSchemaSuggestions(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' }],
+        };
+        mapStringSchemaSuggestions(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,35 @@
+import { getDomainLayerBehavior } from './behavior-utils';
+import { mapLegacyContext } from './legacy-utils';
+export const mapInlineAlert = (alert) => {
+    return alert
+        ? {
+            content: alert.content,
+            context: alert.context ? mapLegacyContext(alert.context) : 'neutral',
+        }
+        : undefined;
+};
+export const mapAdditionalInfo = (info, mapperProps) => {
+    const { onBehavior, registerSubmissionBehavior } = mapperProps;
+    if (info) {
+        const behavior = getDomainLayerBehavior(info, [], registerSubmissionBehavior);
+        return {
+            text: info.text,
+            href: behavior.type === 'link' ? behavior.url : undefined,
+            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',
+        }
+        : undefined;
+};

package/build/domain/types.js

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

package/build/getSubflowCallbacks.js

@@ -0,0 +1,38 @@
+import { recursiveMerge } from './utils/recursiveMerge';
+export const getSubflowCallbacks = ({ behavior, close, restart, onBehavior, onError, onEvent, }) => {
+    const { onCompletion: onCompletionBehavior, onError: onErrorBehavior, referrerId, resultKey, } = behavior;
+    return {
+        onCompletion: (result) => {
+            var _a;
+            restart();
+            if (!onCompletionBehavior) {
+                close();
+                return;
+            }
+            if (onCompletionBehavior.type === 'action') {
+                const newActionData = recursiveMerge((_a = onCompletionBehavior.action.data) !== null && _a !== void 0 ? _a : null, resultKey ? { [resultKey]: result } : result);
+                void onBehavior(Object.assign(Object.assign({}, onCompletionBehavior), { action: Object.assign(Object.assign({}, onCompletionBehavior.action), { data: newActionData }) }));
+                return;
+            }
+            void onBehavior(onCompletionBehavior);
+            close();
+        },
+        onError: (error, status) => {
+            if (!onErrorBehavior) {
+                onError(error, {}, status);
+                close();
+                return;
+            }
+            restart();
+            void onBehavior(onErrorBehavior);
+            close();
+        },
+        onEvent: (name, properties) => {
+            onEvent(name, Object.assign({ referrerId }, properties));
+        },
+        onCancellation: () => {
+            restart();
+            close();
+        },
+    };
+};

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,8 @@
+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 { makeRequestCache } from './domain/features/prefetch/request-cache';
+export { eventNames } from './domain/features/eventNames';

package/build/main.js

@@ -2650,6 +2650,7 @@ var getStepPolling = ({
   const { interval, delay = interval, maxAttempts, url, onError } = pollingConfig;
   let abortController = new AbortController();
   let intervalRef = null;
+  let hasCompleted = false;
   if (delay == null) {
     throw new Error("Polling configuration must include delay or interval");
   }
@@ -2662,18 +2663,24 @@ var getStepPolling = ({
     const { signal } = abortController;
     onPoll(url, onErrorBehavior, signal).then((result) => {
       if (result) {
-        stop();
+        complete();
         return;
       }
       if (attempts >= maxAttempts && !signal.aborted) {
+        complete();
         void onBehavior(onErrorBehavior);
-        stop();
       }
     }).catch(() => {
     });
   };
+  const complete = () => {
+    hasCompleted = true;
+    stop();
+  };
   const start = () => {
-    attempts = 0;
+    if (hasCompleted) {
+      return;
+    }
     intervalRef = setInterval(poll, delay * 1e3);
     poll();
   };
@@ -2682,7 +2689,7 @@ var getStepPolling = ({
       logEvent("warning", "Attempted to stop polling but it was not started");
       return;
     }
-    clearTimeout(intervalRef);
+    clearInterval(intervalRef);
     abortController.abort();
   };
   return { start, stop };
@@ -6821,7 +6828,12 @@ var createFlowController = (props) => {
         const { request, presentation } = launchConfig;
         const callbacks = getSubflowCallbacks({
           behavior,
-          close: () => rootComponent.closeSubflow(),
+          close: () => {
+            var _a3;
+            if (((_a3 = rootComponent.subflow) == null ? void 0 : _a3.uid) === component.uid) {
+              rootComponent.closeSubflow();
+            }
+          },
           onBehavior,
           onError: closeWithError,
           onEvent: onEvent != null ? onEvent : noop2,

package/build/main.mjs

@@ -2620,6 +2620,7 @@ var getStepPolling = ({
   const { interval, delay = interval, maxAttempts, url, onError } = pollingConfig;
   let abortController = new AbortController();
   let intervalRef = null;
+  let hasCompleted = false;
   if (delay == null) {
     throw new Error("Polling configuration must include delay or interval");
   }
@@ -2632,18 +2633,24 @@ var getStepPolling = ({
     const { signal } = abortController;
     onPoll(url, onErrorBehavior, signal).then((result) => {
       if (result) {
-        stop();
+        complete();
         return;
       }
       if (attempts >= maxAttempts && !signal.aborted) {
+        complete();
         void onBehavior(onErrorBehavior);
-        stop();
       }
     }).catch(() => {
     });
   };
+  const complete = () => {
+    hasCompleted = true;
+    stop();
+  };
   const start = () => {
-    attempts = 0;
+    if (hasCompleted) {
+      return;
+    }
     intervalRef = setInterval(poll, delay * 1e3);
     poll();
   };
@@ -2652,7 +2659,7 @@ var getStepPolling = ({
       logEvent("warning", "Attempted to stop polling but it was not started");
       return;
     }
-    clearTimeout(intervalRef);
+    clearInterval(intervalRef);
     abortController.abort();
   };
   return { start, stop };
@@ -6791,7 +6798,12 @@ var createFlowController = (props) => {
         const { request, presentation } = launchConfig;
         const callbacks = getSubflowCallbacks({
           behavior,
-          close: () => rootComponent.closeSubflow(),
+          close: () => {
+            var _a3;
+            if (((_a3 = rootComponent.subflow) == null ? void 0 : _a3.uid) === component.uid) {
+              rootComponent.closeSubflow();
+            }
+          },
           onBehavior,
           onError: closeWithError,
           onEvent: onEvent != null ? onEvent : noop2,

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;
+};