@wise/dynamic-flow-client 3.5.0-experimental-6654c72 → 3.5.0-experimental-63c768d

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/ExternalConfirmationDialog.js

@@ -0,0 +1,31 @@
+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 { 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", __assign({ className: "df-box-renderer-fixed-width" }, { children: _jsxs("div", __assign({ className: "df-box-renderer-width-lg" }, { children: [_jsx("h2", __assign({ className: "text-xs-center m-b-5" }, { children: formatMessage(messages.title) })), _jsx(Markdown, __assign({ config: { link: { target: '_blank' } }, className: "text-xs-center m-b-5" }, { children: formatMessage(messages.description, { origin: getOrigin(external.url) }) })), _jsx("div", __assign({ className: "df-box-renderer-fixed-width" }, { children: _jsxs("div", __assign({ className: "df-box-renderer-width-lg" }, { children: [_jsx(Button, __assign({ block: true, className: "m-b-2", priority: "primary", size: "md", onClick: function () {
+                                    window.open(external.url);
+                                    onClose();
+                                } }, { children: formatMessage(messages.open) })), _jsx(Button, __assign({ 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,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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { LoadingContextProvider } from '../LoadingContext';
+import { useExternal } from './useExternal';
+import { ExternalConfirmationDialog } from './ExternalConfirmationDialog';
+export var StepRenderer = {
+    canRenderType: 'step',
+    render: StepRendererComponent
+};
+function StepRendererComponent(_a) {
+    var children = _a.children, external = _a.external, loadingState = _a.loadingState;
+    var value = useMemo(function () { return ({ loadingState: loadingState }); }, [loadingState]);
+    var _b = useExternal(external === null || external === void 0 ? void 0 : external.url), requiresUserConfirmation = _b.requiresUserConfirmation, dismissConfirmation = _b.dismissConfirmation;
+    if ((external === null || external === void 0 ? void 0 : external.url) && requiresUserConfirmation) {
+        return _jsx(ExternalConfirmationDialog, { external: external, onClose: dismissConfirmation });
+    }
+    return _jsx(LoadingContextProvider, __assign({ value: value }, { children: children }));
+}

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,9 @@
+export var stepComponentToProps = function (_a, children) {
+    var external = _a.external, loadingState = _a.loadingState;
+    return ({
+        type: 'step',
+        external: external,
+        loadingState: loadingState,
+        children: children
+    });
+};

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

@@ -0,0 +1,304 @@
+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, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable no-console */
+import { action } from '@storybook/addon-actions';
+import DynamicFlowWise from '../../DynamicFlowWise';
+import { fixtureHttpClient } from '../utils/fixtureHttpClient';
+import { mockSearchHandler } from '../utils/mockSearchHandler';
+import { features } from '@wise/dynamic-flow-fixtures';
+export default {
+    component: DynamicFlowWise,
+    title: 'Revamp/Dev Tools',
+    parameters: {
+        chromatic: { disableSnapshot: true }
+    }
+};
+export function ExampleStep() {
+    var step = getBasicStep();
+    return renderWithStep(step);
+}
+export function Modal() {
+    return renderWithStep(features.modal);
+}
+export var ModelStep = function () {
+    var step = getModelStep();
+    return renderWithStep(step);
+};
+export function GlobalErrorStep() {
+    var step = getGlobalErrorStep();
+    return renderWithStep(step);
+}
+export function Search() {
+    var step = getSearchStep();
+    return (_jsxs(_Fragment, { children: [_jsx("div", __assign({ style: { display: 'flex', justifyContent: 'center' } }, { children: _jsxs("ul", { children: [_jsx("li", { children: "If your search term has 3 or fewer characters, the search results will take 2 seconds to load." }), _jsx("li", { children: "If your search term has more than 3 characters, the search results will take 1 second to load." }), _jsx("li", { children: "If your search term is \"nothing\", then the search results will take 1 second to load, but will be empty." }), _jsx("li", { children: "If your search term is \"error\", then the search results will take 1 second to load, with a status 500." })] }) })), _jsx(DynamicFlowWise, { flowId: "new-df-flow-id", httpClient: mockSearchHandler, initialStep: step, onCompletion: action('onCompletion'), onEvent: action('onEvent'), onError: function (error) {
+                    action('onError');
+                    console.error(error);
+                }, onLog: action('onLog') })] }));
+}
+var renderWithStep = function (step, httpClient) {
+    if (httpClient === void 0) { httpClient = fixtureHttpClient; }
+    return (_jsx(DynamicFlowWise, { flowId: "new-df-flow-id", httpClient: httpClient, initialStep: step, onCompletion: action('onCompletion'), onEvent: action('onEvent'), onError: function (error) {
+            action('onError');
+            console.error(error);
+        }, onLog: action('onLog') }));
+};
+var getBasicStep = function () { return ({
+    id: 'new-df-initial-step',
+    title: 'Revamped Dynamic Flow',
+    schemas: [
+        {
+            $id: '#personal-details',
+            type: 'object',
+            title: 'Personal details object',
+            description: 'Personal details schema description',
+            displayOrder: ['name', 'date', 'occupation', 'age', 'money', 'profileId'],
+            alert: {
+                type: 'alert',
+                markdown: 'Please enter the correct details here'
+            },
+            properties: {
+                profileId: { "const": 12345678 },
+                name: {
+                    title: 'Full name',
+                    type: 'string',
+                    minLength: 3,
+                    maxLength: 50,
+                    help: { markdown: 'Put your name here' },
+                    validationMessages: {
+                        required: 'Name is required',
+                        minLength: 'Name is too short',
+                        maxLength: 'Name is too long'
+                    }
+                },
+                occupation: {
+                    title: 'Occupation',
+                    type: 'string'
+                },
+                date: {
+                    title: 'Date',
+                    type: 'string',
+                    format: 'date',
+                    control: 'date-lookup',
+                    minimum: '2023-01-01',
+                    maximum: '2023-12-31'
+                },
+                age: {
+                    title: 'Age',
+                    type: 'integer',
+                    minimum: 10,
+                    maximum: 99,
+                    help: { markdown: 'Put your age here' },
+                    validationMessages: {
+                        required: 'Age is required',
+                        minimum: 'Age is too low',
+                        maximum: 'Age is too high'
+                    },
+                    alert: { type: 'alert', markdown: 'You must be over 18' }
+                },
+                money: {
+                    title: 'How much money would you like?',
+                    type: 'number',
+                    minimum: 0,
+                    maximum: 9999,
+                    validationMessages: {
+                        required: 'Money is required',
+                        minimum: 'Money is too low',
+                        maximum: 'Money is too high'
+                    }
+                }
+            },
+            required: ['name', 'age']
+        },
+        {
+            $id: '#bank-info',
+            type: 'object',
+            title: 'Bank info object',
+            description: 'Bank info schema description',
+            displayOrder: ['currency', 'complexOneOf'],
+            required: ['currency', 'complexOneOf'],
+            properties: {
+                currency: {
+                    description: 'Currency schema description.',
+                    help: { markdown: 'Currency schema help' },
+                    control: 'select',
+                    autocompleteHint: ['transaction-currency'],
+                    placeholder: 'This is a placeholder',
+                    disabled: false,
+                    validationMessages: { required: 'Please select an option' },
+                    "default": 'EUR',
+                    oneOf: [
+                        {
+                            title: 'EUR',
+                            icon: { name: 'flag-eur' },
+                            description: 'Euro (schema default)',
+                            "const": 'EUR'
+                        },
+                        {
+                            title: 'GBP',
+                            icon: { name: 'flag-gbp' },
+                            description: 'British pound',
+                            "const": { gbp: 'GBP' }
+                        },
+                        {
+                            title: 'USD',
+                            icon: { name: 'flag-usd' },
+                            description: 'United States dollar',
+                            "const": 'USD'
+                        },
+                    ]
+                },
+                complexOneOf: {
+                    title: 'Complex oneOf',
+                    description: 'Complex oneOf schema description blah blah blah blah.',
+                    control: 'tab',
+                    "default": { type: 'type-a', accountNumber: '12345678' },
+                    oneOf: [
+                        {
+                            type: 'object',
+                            title: 'Option A (schema default)',
+                            icon: { name: 'flag-ars' },
+                            description: 'Option A description',
+                            displayOrder: ['type', 'accountNumber', 'sortCodeA'],
+                            required: ['sortCodeA'],
+                            properties: {
+                                type: { "const": 'type-a' },
+                                accountNumber: {
+                                    title: '(A) Account number',
+                                    type: 'string'
+                                },
+                                sortCodeA: {
+                                    title: '(A) Sort code',
+                                    type: 'string'
+                                }
+                            }
+                        },
+                        {
+                            type: 'object',
+                            title: 'Option B',
+                            icon: { name: 'flag-brl' },
+                            description: 'Option B description',
+                            displayOrder: ['type', 'accountNumber', 'sortCodeB'],
+                            properties: {
+                                type: { "const": 'type-b' },
+                                accountNumber: {
+                                    title: '(B) Account number',
+                                    type: 'string'
+                                },
+                                sortCodeB: {
+                                    title: '(B) Sort code',
+                                    type: 'string'
+                                }
+                            }
+                        },
+                    ]
+                }
+            }
+        },
+    ],
+    layout: [
+        { type: 'heading', text: 'Welcome to the revamped Dynamic Flow', size: 'sm' },
+        {
+            type: 'alert',
+            markdown: 'If you can see this, things are going **well**.',
+            context: 'positive'
+        },
+        {
+            type: 'columns',
+            left: [
+                {
+                    type: 'form',
+                    schemaId: '#personal-details'
+                },
+            ],
+            right: [
+                {
+                    type: 'form',
+                    schemaId: '#bank-info'
+                },
+            ]
+        },
+        {
+            type: 'columns',
+            bias: 'left',
+            left: [
+                {
+                    type: 'paragraph',
+                    text: "Starting paragraph: The Wise account is the universal way for you to manage money internationally. It's made for the world. And it's built to save your money and time, so you can do more of the things you love."
+                },
+            ],
+            right: [
+                {
+                    type: 'paragraph',
+                    text: "Ending paragraph: The Wise account is the universal way for you to manage money internationally. It's made for the world. And it's built to save your money and time, so you can do more of the things you love."
+                },
+            ]
+        },
+        {
+            type: 'box',
+            border: true,
+            width: 'md',
+            components: [
+                {
+                    type: 'paragraph',
+                    text: "The Wise account is the universal way for you to manage money internationally. It's made for the world. And it's built to save your money and time, so you can do more of the things you love.",
+                    align: 'center'
+                },
+            ]
+        },
+        {
+            type: 'button',
+            title: 'Submit',
+            control: 'primary',
+            action: {
+                url: '/submit',
+                method: 'POST'
+            }
+        },
+        {
+            type: 'button',
+            title: 'Cancel',
+            control: 'secondary',
+            action: {
+                url: '/cancel',
+                method: 'POST'
+            }
+        },
+    ]
+}); };
+var getModelStep = function () { return (__assign(__assign({}, getBasicStep()), { model: {
+        name: 'John Smith',
+        currency: 'USD',
+        complexOneOf: { type: 'type-a', accountNumber: '12345678', sortCodeA: '123456' }
+    } })); };
+var getSearchStep = function () { return ({
+    id: 'new-df-initial-step',
+    title: 'Revamped Dynamic Flow',
+    schemas: [],
+    layout: [
+        {
+            type: 'search',
+            title: 'What is your company name?',
+            method: 'GET',
+            emptyMessage: 'No results found',
+            url: '/search/',
+            param: 'query'
+        },
+    ]
+}); };
+var getGlobalErrorStep = function () { return (__assign(__assign({}, getBasicStep()), { errors: {
+        error: 'This is a global error',
+        validation: {
+            name: "I don't like your name",
+            complexOneOf: { sortCodeB: 'This is a validation error' }
+        }
+    } })); };

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

@@ -0,0 +1,71 @@
+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";
+/* eslint-disable no-console */
+/* eslint-disable react/forbid-dom-props */
+import { action } from '@storybook/addon-actions';
+import { layouts, schemas, examples, features } from '@wise/dynamic-flow-fixtures';
+import { useMemo, useState } from 'react';
+import DynamicFlowWise from '../../DynamicFlowWise';
+import { fixtureHttpClient } from '../utils/fixtureHttpClient';
+var fixtures = __assign(__assign(__assign(__assign({}, features), schemas), layouts), examples);
+export function EditableStep(_a) {
+    var _b = _a.initialStepName, initialStepName = _b === void 0 ? '' : _b;
+    var selectedStep = fixtures[initialStepName] || {};
+    var selectedInitialStep = JSON.stringify(selectedStep, null, 2);
+    return _jsx(InteractiveDemo, { selectedInitialStep: selectedInitialStep }, selectedInitialStep);
+}
+function InteractiveDemo(_a) {
+    var selectedInitialStep = _a.selectedInitialStep;
+    var _b = useState(200), initialStatusCode = _b[0], setInitialStatusCode = _b[1];
+    var _c = useState(selectedInitialStep), initialStep = _c[0], setInitialStep = _c[1];
+    var onTextAreaChange = function (event) {
+        setInitialStep(event.target.value);
+    };
+    return (_jsxs("div", __assign({ style: { display: 'flex', gap: '1em' } }, { children: [_jsxs("div", __assign({ style: { flexBasis: '50%' } }, { children: [_jsx("h3", { children: "Revamp Editable Demo" }), _jsxs("p", { children: ["You can specify a response status code and body, and DF will load your step.", _jsx("br", {}), "(for ideas, you can select an initial step from the drop down in the controls panel)"] }), _jsxs("fieldset", { children: [_jsx("label", __assign({ htmlFor: "status-code" }, { children: "Response Status code: " })), _jsx(StatusCodeSelect, { id: "status-code", state: [initialStatusCode, setInitialStatusCode] })] }), _jsxs("fieldset", { children: [_jsx("label", __assign({ htmlFor: "textarea" }, { children: "Response Body:" })), _jsx(InvalidJsonWarning, { initialStep: initialStep }), _jsx("textarea", { id: "textarea", wrap: "off", rows: 40, style: { fontFamily: 'monospace', fontSize: '0.9em', width: '100%' }, value: initialStep, onChange: onTextAreaChange })] })] })), _jsx("div", __assign({ style: { flexBasis: '50%' } }, { children: _jsx(DynamicFlowWise, { flowId: "the-flow-id", initialStep: JSON.parse(initialStep), httpClient: fixtureHttpClient, onCompletion: action('onCompletion'), onError: function (error) {
+                        action('onError');
+                        console.error(error);
+                    }, onEvent: action('onEvent'), onLog: action('onLog') }, "".concat(initialStep, "-").concat(initialStatusCode)) }))] })));
+}
+function InvalidJsonWarning(_a) {
+    var initialStep = _a.initialStep;
+    var validJson = useMemo(function () { return isValidJson(initialStep); }, [initialStep]);
+    return !validJson ? (_jsx("p", { children: "\u274C Invalid syntax or missing elements are preventing the JSON code you entered from being parsed." })) : null;
+}
+var isValidJson = function (value) {
+    try {
+        JSON.parse(value);
+        return true;
+    }
+    catch (_a) {
+        return false;
+    }
+};
+function StatusCodeSelect(_a) {
+    var id = _a.id, _b = _a.state, value = _b[0], setValue = _b[1];
+    return (_jsxs("select", __assign({ id: id, value: value, onChange: function (event) { return setValue(Number.parseInt(event.target.value, 10)); } }, { children: [_jsx("option", { children: "200" }), _jsx("option", { children: "400" }), _jsx("option", { children: "500" })] })));
+}
+export default {
+    component: EditableStep,
+    title: 'Revamp/Dev Tools',
+    parameters: {
+        chromatic: { disableSnapshot: true }
+    },
+    argTypes: {
+        initialStepName: {
+            label: 'Initial Step',
+            control: 'select',
+            options: Object.keys(fixtures)
+        }
+    },
+    args: { initialStepName: Object.keys(fixtures)[0] }
+};