@wise/dynamic-flow-client 3.7.1 → 3.7.2-experimental-1ba6fef

package/build/revamp/renderers/mappers/numberInputComponentToProps.js

@@ -0,0 +1,13 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { inputComponentToProps } from './utils/inputComponentToProps';
+export var numberInputComponentToProps = function (component) { return (__assign(__assign({}, inputComponentToProps(component, 'input-number')), { onChange: component.onChange.bind(component) })); };

package/build/revamp/renderers/mappers/objectComponentToProps.js

@@ -0,0 +1,11 @@
+export var objectComponentToProps = function (_a, children) {
+    var control = _a.control, description = _a.description, help = _a.help, title = _a.title;
+    return ({
+        type: 'form-section',
+        children: children,
+        control: control,
+        description: description,
+        help: help,
+        title: title,
+    });
+};

package/build/revamp/renderers/mappers/paragraphComponentToProps.js

@@ -0,0 +1,10 @@
+export var paragraphComponentToProps = function (_a) {
+    var align = _a.align, control = _a.control, margin = _a.margin, text = _a.text;
+    return ({
+        type: 'paragraph',
+        align: align,
+        control: control,
+        margin: margin,
+        text: text,
+    });
+};

package/build/revamp/renderers/mappers/repeatableComponentToProps.js

@@ -0,0 +1,40 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+export var repeatableComponentToProps = function (component, children, editableItemChildren) {
+    var addItemTitle = component.addItemTitle, control = component.control, components = component.components, description = component.description, editItemTitle = component.editItemTitle, errors = component.errors, summaryDefaults = component.summaryDefaults, _a = component.title, title = _a === void 0 ? '' : _a, onEdit = component.onEdit, onAdd = component.onAdd, onSave = component.onSave, onRemove = component.onRemove;
+    var getSummary = function (componentSummary) {
+        var _a, _b, _c, _d;
+        return ({
+            title: (_a = componentSummary.title) !== null && _a !== void 0 ? _a : summaryDefaults.title,
+            description: (_b = componentSummary.description) !== null && _b !== void 0 ? _b : summaryDefaults.description,
+            icon: (_c = componentSummary.icon) !== null && _c !== void 0 ? _c : summaryDefaults.icon,
+            image: (_d = componentSummary.image) !== null && _d !== void 0 ? _d : summaryDefaults.image,
+        });
+    };
+    var itemProps = components.map(function (childComponent) { return (__assign(__assign({}, getSummary(childComponent.getSummary())), { id: "".concat(childComponent.uid, "-summary") })); });
+    return {
+        type: 'repeatable',
+        children: children,
+        control: control,
+        items: itemProps,
+        editableItem: editableItemChildren,
+        title: title,
+        description: description,
+        addItemTitle: addItemTitle,
+        editItemTitle: editItemTitle,
+        error: errors[0],
+        onAdd: onAdd.bind(component),
+        onEdit: onEdit.bind(component),
+        onSave: onSave.bind(component),
+        onRemove: onRemove.bind(component),
+    };
+};

package/build/revamp/renderers/mappers/reviewComponentToProps.js

@@ -0,0 +1,11 @@
+export var reviewComponentToProps = function (_a) {
+    var callToAction = _a.callToAction, control = _a.control, fields = _a.fields, margin = _a.margin, title = _a.title;
+    return ({
+        type: 'review',
+        callToAction: callToAction,
+        control: control,
+        fields: fields,
+        margin: margin,
+        title: title,
+    });
+};

package/build/revamp/renderers/mappers/searchComponentToProps.js

@@ -0,0 +1,53 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+export var searchComponentToProps = function (component) {
+    var uid = component.uid, control = component.control, emptyMessage = component.emptyMessage, error = component.error, isLoading = component.isLoading, margin = component.margin, query = component.query, results = component.results, title = component.title;
+    var onChange = component.onChange.bind(component);
+    var onSelect = component.onSelect.bind(component);
+    var state = getSearchState({
+        emptyMessage: emptyMessage,
+        error: error,
+        isLoading: isLoading,
+        query: query,
+        results: results,
+        onChange: onChange,
+        onSelect: onSelect,
+    });
+    return {
+        type: 'search',
+        id: uid,
+        control: control,
+        isLoading: isLoading,
+        margin: margin,
+        query: query,
+        state: state,
+        title: title,
+        onChange: onChange,
+    };
+};
+var getSearchState = function (_a) {
+    var emptyMessage = _a.emptyMessage, error = _a.error, isLoading = _a.isLoading, query = _a.query, results = _a.results, onChange = _a.onChange, onSelect = _a.onSelect;
+    if (!query || isLoading) {
+        return { type: 'pending' };
+    }
+    if (error) {
+        return { type: 'error', onRetry: function () { return onChange(query); } };
+    }
+    if (results.length === 0) {
+        return { type: 'noResults', message: emptyMessage };
+    }
+    var rendererResults = results.map(function (result) {
+        var _a;
+        return (__assign(__assign({}, result), { id: result.type === 'action' ? (_a = result.value.id) !== null && _a !== void 0 ? _a : result.value.$id : undefined, onClick: function () { return onSelect(result); } }));
+    });
+    return { type: 'results', results: rendererResults };
+};

package/build/revamp/renderers/mappers/selectInputComponentToProps.js

@@ -0,0 +1,29 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 { inputComponentToProps } from './utils/inputComponentToProps';
+export var selectInputComponentToProps = function (component, children) {
+    var _a;
+    var options = component.options, selectedIndex = component.selectedIndex, onSelect = component.onSelect;
+    var _b = inputComponentToProps(component, 'input-select'), value = _b.value, props = __rest(_b, ["value"]);
+    return __assign(__assign({}, props), { options: options, selectedIndex: selectedIndex, onSelect: onSelect.bind(component), children: (_a = children[selectedIndex !== null && selectedIndex !== void 0 ? selectedIndex : -1]) !== null && _a !== void 0 ? _a : null });
+};

package/build/revamp/renderers/mappers/statusListComponentToProps.js

@@ -0,0 +1,10 @@
+export var statusListComponentToProps = function (_a) {
+    var control = _a.control, items = _a.items, margin = _a.margin, title = _a.title;
+    return ({
+        type: 'status-list',
+        control: control,
+        items: items,
+        margin: margin,
+        title: title,
+    });
+};

package/build/revamp/renderers/mappers/textInputComponentToProps.js

@@ -0,0 +1,13 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { inputComponentToProps } from './utils/inputComponentToProps';
+export var textInputComponentToProps = function (component) { return (__assign(__assign({}, inputComponentToProps(component, 'input-text')), { displayFormat: component.displayFormat, onChange: component.onChange.bind(component) })); };

package/build/revamp/renderers/mappers/uploadInputComponentToProps.js

@@ -0,0 +1,16 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { inputComponentToProps } from './utils/inputComponentToProps';
+export var uploadInputComponentToProps = function (component) {
+    var accepts = component.accepts, maxSize = component.maxSize;
+    return __assign(__assign({}, inputComponentToProps(component, 'input-upload')), { accepts: accepts, maxSize: maxSize, onUpload: component.onUpload.bind(component) });
+};

package/build/revamp/renderers/mappers/utils/inputComponentToProps.js

@@ -0,0 +1,27 @@
+export var inputComponentToProps = function (component, type) {
+    var _a, _b;
+    var autoComplete = component.autoComplete, control = component.control, description = component.description, disabled = component.disabled, errors = component.errors, help = component.help, id = component.id, placeholder = component.placeholder, required = component.required, title = component.title, onBlur = component.onBlur, onFocus = component.onFocus;
+    var validationState = componentHasValidationState(component)
+        ? component.validationState
+        : undefined;
+    var messages = (validationState !== null && validationState !== void 0 ? validationState : {}).messages;
+    return {
+        type: type,
+        autoComplete: autoComplete,
+        control: control,
+        description: (_a = messages === null || messages === void 0 ? void 0 : messages.success) !== null && _a !== void 0 ? _a : description,
+        disabled: disabled,
+        error: (_b = messages === null || messages === void 0 ? void 0 : messages.error) !== null && _b !== void 0 ? _b : errors[0],
+        help: help,
+        id: id,
+        label: title,
+        placeholder: placeholder,
+        required: required,
+        value: component.getLocalValue(),
+        onBlur: onBlur.bind(component),
+        onFocus: onFocus.bind(component),
+    };
+};
+var componentHasValidationState = function (component) {
+    return Boolean('validationState' in component && component.validationState);
+};

package/build/revamp/renderers/step/BackButton.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar } from '@transferwise/components';
+import { ArrowLeft } from '@transferwise/icons';
+function BackButton(_a) {
+    var title = _a.title, onClick = _a.onClick;
+    return (_jsxs("a", { href: "/", className: "df-back-btn", "aria-label": title, onClick: function (event) {
+            event.preventDefault();
+            onClick();
+        }, children: [_jsx("span", { className: "sr-only", children: title }), _jsx(Avatar, { type: "icon", children: _jsx(ArrowLeft, { size: "24" }) })] }));
+}
+export default BackButton;

package/build/revamp/renderers/step/ExternalConfirmationDialog.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useIntl } from 'react-intl';
+import messages from '../../../common/messages/external-confirmation.messages';
+import { Button, Markdown } from '@transferwise/components';
+export function ExternalConfirmationDialog(_a) {
+    var external = _a.external, onClose = _a.onClose;
+    var formatMessage = useIntl().formatMessage;
+    return (_jsx("div", { className: "df-box-renderer-fixed-width", children: _jsxs("div", { className: "df-box-renderer-width-lg", children: [_jsx("h2", { className: "text-xs-center m-b-5", children: formatMessage(messages.title) }), _jsx(Markdown, { config: { link: { target: '_blank' } }, className: "text-xs-center m-b-5", children: formatMessage(messages.description, { origin: getOrigin(external.url) }) }), _jsx("div", { className: "df-box-renderer-fixed-width", children: _jsxs("div", { className: "df-box-renderer-width-lg", children: [_jsx(Button, { block: true, className: "m-b-2", priority: "primary", size: "md", onClick: function () {
+                                    window.open(external.url);
+                                    onClose();
+                                }, children: formatMessage(messages.open) }), _jsx(Button, { block: true, className: "m-b-2", priority: "tertiary", size: "md", onClick: onClose, children: formatMessage(messages.cancel) })] }) })] }) }));
+}
+function getOrigin(url) {
+    try {
+        return new URL(url).origin;
+    }
+    catch (_a) {
+        return url;
+    }
+}

package/build/revamp/renderers/step/StepRenderer.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { ExternalConfirmationDialog } from './ExternalConfirmationDialog';
+import { StepRendererContextProvider } from './StepRendererContext';
+import { useExternal } from './useExternal';
+import BackButton from './BackButton';
+export var StepRenderer = {
+    canRenderType: 'step',
+    render: StepRendererComponent,
+};
+function StepRendererComponent(props) {
+    var back = props.back, loadingState = props.loadingState, external = props.external, trackEvent = props.trackEvent, children = props.children;
+    var value = useMemo(function () { return ({ loadingState: loadingState, trackEvent: trackEvent }); }, [loadingState, trackEvent]);
+    var _a = useExternal(external === null || external === void 0 ? void 0 : external.url), requiresUserConfirmation = _a.requiresUserConfirmation, dismissConfirmation = _a.dismissConfirmation;
+    if ((external === null || external === void 0 ? void 0 : external.url) && requiresUserConfirmation) {
+        return _jsx(ExternalConfirmationDialog, { external: external, onClose: dismissConfirmation });
+    }
+    return (_jsxs(StepRendererContextProvider, { value: value, children: [back ? _jsx(BackButton, __assign({}, back)) : null, children] }));
+}

package/build/revamp/renderers/step/StepRendererContext.js

@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'react';
+var StepRendererContext = createContext({ loadingState: 'idle', trackEvent: function () { } });
+export var StepRendererContextProvider = StepRendererContext.Provider;
+export var useLoadingContext = function () {
+    var loadingState = useContext(StepRendererContext).loadingState;
+    return { loadingState: loadingState, isLoading: loadingState !== 'idle' };
+};
+export var useTrackEvent = function () {
+    var trackEvent = useContext(StepRendererContext).trackEvent;
+    return trackEvent;
+};

package/build/revamp/renderers/step/useExternal.js

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react';
+export function useExternal(url) {
+    // If we fail to open the window, the user will need to open this on their own
+    var _a = useState(null), externalWindow = _a[0], setExternalWindow = _a[1];
+    var _b = useState(false), hasDismissed = _b[0], setHasDismissed = _b[1];
+    var dismissConfirmation = function () { return setHasDismissed(true); };
+    useEffect(function () {
+        if (url) {
+            setHasDismissed(false);
+            setExternalWindow(window.open(url, '_blank'));
+        }
+    }, [url]);
+    var requiresUserConfirmation = Boolean(url && !externalWindow && !hasDismissed);
+    return { requiresUserConfirmation: requiresUserConfirmation, dismissConfirmation: dismissConfirmation };
+}

package/build/revamp/renderers/stepComponentToProps.js

@@ -0,0 +1,11 @@
+export var stepComponentToProps = function (_a, children) {
+    var back = _a.back, external = _a.external, loadingState = _a.loadingState, trackEvent = _a.trackEvent;
+    return ({
+        type: 'step',
+        back: back,
+        external: external,
+        loadingState: loadingState,
+        trackEvent: trackEvent,
+        children: children,
+    });
+};

package/build/revamp/renderers/types.js

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

package/build/revamp/stories/dev-tools/ActionResponse.story.js

@@ -0,0 +1,101 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable no-console */
+import { action } from '@storybook/addon-actions';
+import { getMockHttpClient, respondWith } from '../../../test-utils';
+import DynamicFlowWise from '../../DynamicFlowWise';
+export default {
+    component: DynamicFlowWise,
+    title: 'Revamp/Features/Action Response',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+    argTypes: {},
+};
+export function ActionResponse() {
+    var _this = this;
+    var httpClient = getMockHttpClient({
+        '/action/1234': function () { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) {
+            return [2 /*return*/, respondWith({ action: { url: '/success', data: { foo: 'bar' } } }, { status: 200 })];
+        }); }); },
+        '/success': function () { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) {
+            return [2 /*return*/, respondWith(__assign(__assign({}, initialStep), { title: 'Success, try again!' }))];
+        }); }); },
+    });
+    return (_jsx(DynamicFlowWise, { flowId: "DemoFlowId", initialStep: initialStep, httpClient: function (input, init) { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                action('httpClient')(input, init);
+                return [2 /*return*/, httpClient(input, init)];
+            });
+        }); }, onCompletion: action('onCompletion'), onEvent: action('onEvent'), onLog: action('onLog'), onError: function (error) {
+            action('onError')(error);
+            console.error(error);
+        } }));
+}
+var initialStep = {
+    id: 'action-response',
+    title: 'Action Response',
+    layout: [
+        {
+            type: 'box',
+            width: 'md',
+            border: true,
+            components: [
+                { type: 'paragraph', text: 'Click a button below and see the request payload.' },
+                {
+                    type: 'button',
+                    title: 'Direct Success',
+                    action: { url: '/success', data: { abc: 123 } },
+                },
+                { type: 'button', title: 'Action Response', action: { url: '/action/1234' } },
+            ],
+        },
+    ],
+    schemas: [],
+};