@wise/dynamic-flow-client 0.1.1 → 0.1.3

package/build/layout/external/useExternalStepPolling.js

@@ -0,0 +1,68 @@
+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 { useCallback, useMemo } from 'react';
+import { useFetcher } from '../../common/contexts/fetcherContext';
+import { usePolling } from '../../common/hooks/usePolling';
+export function useStepPolling(polling, onAction) {
+    var fetcher = useFetcher();
+    var asyncFn = useMemo(function () {
+        if (polling) {
+            return function () {
+                return fetcher(polling.url).then(function (response) {
+                    if (response.ok) {
+                        try {
+                            return response.json();
+                        }
+                        catch (_a) {
+                            throw new Error('failed');
+                        }
+                    }
+                    else {
+                        throw new Error('failed');
+                    }
+                });
+            };
+        }
+        else {
+            return undefined;
+        }
+    }, [polling, fetcher]);
+    var onPollingResponse = useCallback(function (pollingResponse) {
+        var responseHandlers = (polling === null || polling === void 0 ? void 0 : polling.responseHandlers) || [];
+        var responseHandler = responseHandlers.find(function (handler) { return handler.result === pollingResponse.result; });
+        if (responseHandler === null || responseHandler === void 0 ? void 0 : responseHandler.action) {
+            var action = responseHandler.action;
+            if (action.exit) {
+                var mergedResult = __assign(__assign({}, (action.result || {})), (pollingResponse.data || {}));
+                onAction(__assign(__assign({}, action), { result: mergedResult }));
+            }
+            else {
+                var mergedData = __assign(__assign({}, (action.data || {})), (pollingResponse.data || {}));
+                onAction(__assign(__assign({}, action), { data: mergedData }));
+            }
+            return false; // stop polling
+        }
+        return true; // continue polling
+    }, [polling === null || polling === void 0 ? void 0 : polling.responseHandlers, onAction]);
+    usePolling({
+        asyncFn: asyncFn,
+        interval: (polling === null || polling === void 0 ? void 0 : polling.interval) || 0,
+        maxAttempts: (polling === null || polling === void 0 ? void 0 : polling.maxAttempts) || 0,
+        maxConsecutiveFails: (polling === null || polling === void 0 ? void 0 : polling.maxConsecutiveFails) || 0,
+        onPollingResponse: onPollingResponse,
+        onFailure: useCallback(function () {
+            if (polling) {
+                onAction(polling.onError.action);
+            }
+        }, [onAction, polling])
+    });
+}

package/build/layout/form/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { FormLayout } from '../../dynamic-flow-types';
+import { CommonLayoutProps } from '../DynamicLayout';
+type Props = Omit<CommonLayoutProps, 'onAction'> & {
+    component: FormLayout;
+};
+declare const DynamicForm: (props: Props) => JSX.Element;
+export default DynamicForm;

package/build/layout/form/index.js

@@ -0,0 +1,22 @@
+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 JsonSchemaForm from '../../jsonSchemaForm';
+import { getMarginBottom } from '../utils';
+var DynamicForm = function (props) {
+    var form = props.component;
+    var formSchema = form.schema; // There should be no $ref at this point
+    return (_jsx("div", __assign({ className: getMarginBottom(form.margin || 'md') }, { children: _jsx(JsonSchemaForm, { schema: formSchema, model: props.model, submitted: props.submitted, errors: props.errors, onChange: function (parameters) {
+                props.onModelChange(__assign({ formSchema: formSchema }, parameters));
+            }, onPersistAsync: props.onPersistAsync }) })));
+};
+export default DynamicForm;

package/build/layout/heading/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { HeadingLayout } from '../../dynamic-flow-types';
+declare const DynamicHeading: (props: {
+    component: HeadingLayout;
+}) => JSX.Element;
+export default DynamicHeading;

package/build/layout/heading/index.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 } from "react/jsx-runtime";
+import { getTextAlignmentAndMargin } from '../utils';
+var DynamicHeading = function (props) {
+    var _a = props.component, text = _a.text, _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.align, align = _c === void 0 ? 'left' : _c, _d = _a.margin, margin = _d === void 0 ? 'md' : _d;
+    var classes = getTextAlignmentAndMargin({ align: align, margin: margin });
+    switch (size) {
+        case 'xs':
+            return _jsx("h5", __assign({ className: classes }, { children: text }));
+        case 'sm':
+            return _jsx("h4", __assign({ className: classes }, { children: text }));
+        case 'lg':
+            return _jsx("h2", __assign({ className: classes }, { children: text }));
+        case 'xl':
+            return _jsx("h1", __assign({ className: classes }, { children: text }));
+        case 'md':
+        default:
+            return _jsx("h3", __assign({ className: classes }, { children: text }));
+    }
+};
+export default DynamicHeading;

package/build/layout/icon/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type Props = {
+    type: string;
+};
+declare const DynamicIcon: (props: Props) => JSX.Element;
+export declare function isValidIconName(name: string): boolean;
+export default DynamicIcon;

package/build/layout/icon/index.js

@@ -0,0 +1,22 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import * as icons from '@transferwise/icons';
+var DynamicIcon = function (props) {
+    var iconName = toCapitalisedCamelCase(props.type);
+    if (!Object.keys(icons).includes(iconName)) {
+        return _jsx(_Fragment, {});
+    }
+    var Icon = icons[iconName];
+    return _jsx(Icon, { size: 24 });
+};
+function toCapitalisedCamelCase(value) {
+    return value.split('-').map(capitaliseFirstChar).join('');
+}
+function capitaliseFirstChar(value) {
+    var _a;
+    return "".concat((_a = value[0]) === null || _a === void 0 ? void 0 : _a.toUpperCase()).concat(value.slice(1));
+}
+export function isValidIconName(name) {
+    var iconName = toCapitalisedCamelCase(name);
+    return Object.keys(icons).includes(iconName);
+}
+export default DynamicIcon;

package/build/layout/image/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ImageLayout } from '../../dynamic-flow-types';
+declare const DynamicImage: (props: {
+    component: ImageLayout;
+}) => JSX.Element | null;
+export default DynamicImage;

package/build/layout/image/index.js

@@ -0,0 +1,126 @@
+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";
+import { Image } from '@transferwise/components';
+import { useEffect, useState } from 'react';
+import { isRelativePath } from '../../common/api/utils';
+import { useFetcher } from '../../common/contexts/fetcherContext';
+import { getMarginBottom } from '../utils';
+var getWrapperClasses = function (component) {
+    switch (component.size) {
+        case 'xs':
+            return 'col-xs-2 col-xs-offset-5';
+        case 'sm':
+            return 'col-xs-4 col-xs-offset-4';
+        case 'md':
+            return 'col-xs-6 col-xs-offset-3';
+        case 'lg':
+            return 'col-xs-8 col-xs-offset-2';
+        case 'xl':
+        default:
+            return 'col-xs-12';
+    }
+};
+var getImageClasses = function (image) {
+    var margin = getMarginBottom(image.margin || 'lg');
+    return "img-responsive ".concat(margin);
+};
+var readImageBlobAsDataURL = function (imageBlob) {
+    // we can safely assume the type of reader.result is string
+    // because we're calling reader.readAsDataURL
+    // https://developer.mozilla.org/en-US/docs/Web/API/FileReader/result
+    return new Promise(function (resolve, reject) {
+        var reader = new FileReader();
+        reader.addEventListener('loadend', function () { return resolve(reader.result); });
+        reader.addEventListener('error', function (error) { return reject(error); });
+        reader.readAsDataURL(imageBlob);
+    });
+};
+var getImageSource = function (fetcher, imageUrl) { return __awaiter(void 0, void 0, void 0, function () {
+    var _a;
+    return __generator(this, function (_b) {
+        try {
+            if (isRelativePath(imageUrl) || (imageUrl === null || imageUrl === void 0 ? void 0 : imageUrl.indexOf("".concat((_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.origin, "/"))) === 0) {
+                return [2 /*return*/, fetcher(imageUrl, {
+                        method: 'GET',
+                        headers: { 'Content-Type': 'image/image' },
+                        credentials: 'same-origin'
+                    })
+                        .then(function (response) { return response.blob(); })
+                        .then(readImageBlobAsDataURL)];
+            }
+            return [2 /*return*/, imageUrl];
+        }
+        catch (_c) {
+            return [2 /*return*/, imageUrl];
+        }
+        return [2 /*return*/];
+    });
+}); };
+var DynamicImage = function (props) {
+    var image = props.component;
+    var fetcher = useFetcher();
+    var _a = useState(''), imageSource = _a[0], setImageSource = _a[1];
+    useEffect(function () {
+        void getImageSource(fetcher, image.url).then(setImageSource);
+    }, [image.url, fetcher]);
+    var imageProps = {
+        alt: image.text || '',
+        src: imageSource,
+        stretch: true,
+        shrink: true
+    };
+    var getImage = function () {
+        return imageSource ? _jsx(Image, __assign({ className: getImageClasses(image) }, imageProps)) : null;
+    };
+    if (!image.size || image.size === 'xl') {
+        return getImage();
+    }
+    return (_jsx("div", __assign({ className: "row m-b-0" }, { children: _jsx("div", __assign({ className: getWrapperClasses(image) }, { children: getImage() })) })));
+};
+export default DynamicImage;

package/build/layout/index.d.ts

@@ -0,0 +1 @@
+export { default } from './DynamicLayout';

package/build/layout/index.js

@@ -0,0 +1 @@
+export { default } from './DynamicLayout';

package/build/layout/info/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { InfoLayout } from '../../dynamic-flow-types';
+type Props = {
+    component: InfoLayout;
+};
+declare const DynamicInfo: ({ component }: Props) => JSX.Element;
+export default DynamicInfo;

package/build/layout/info/index.js

@@ -0,0 +1,19 @@
+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 { Markdown } from '@transferwise/components';
+import { getTextAlignmentAndMargin } from '../utils';
+var DynamicInfo = function (_a) {
+    var component = _a.component;
+    return (_jsx("div", __assign({ className: getTextAlignmentAndMargin(component) }, { children: _jsx(Markdown, __assign({ config: { link: { target: '_blank' } } }, { children: component.markdown })) })));
+};
+export default DynamicInfo;

package/build/layout/layouts/all.json.d.ts

@@ -0,0 +1,3 @@
+import { LayoutComponent } from '../../dynamic-flow-types';
+declare const layout: LayoutComponent[];
+export default layout;

package/build/layout/layouts/all.json.js

@@ -0,0 +1,176 @@
+var layout = [
+    {
+        type: 'box',
+        width: 'md',
+        components: [
+            {
+                type: 'heading',
+                text: 'This is a large heading',
+                size: 'lg',
+                align: 'center',
+                margin: 'md'
+            },
+            {
+                type: 'paragraph',
+                text: 'This is a paragraph of text. This is a paragraph of text. This is a paragraph of text.',
+                align: 'center',
+                margin: 'xl'
+            },
+            {
+                type: 'loading-indicator',
+                size: 'lg',
+                margin: 'md'
+            },
+        ]
+    },
+    {
+        type: 'columns',
+        bias: 'left',
+        left: [
+            {
+                type: 'box',
+                border: true,
+                components: [
+                    {
+                        type: 'heading',
+                        text: 'Small heading',
+                        size: 'sm',
+                        margin: 'md'
+                    },
+                    {
+                        type: 'divider',
+                        margin: 'xl'
+                    },
+                    {
+                        type: 'review',
+                        title: 'Review title',
+                        margin: 'lg',
+                        orientation: 'horizontal',
+                        action: {
+                            $id: 'edit-profile',
+                            title: 'Edit',
+                            url: '/edit',
+                            method: 'GET'
+                        },
+                        fields: [
+                            {
+                                label: 'First name',
+                                value: 'John'
+                            },
+                            {
+                                label: 'Last name',
+                                value: 'Smith'
+                            },
+                        ]
+                    },
+                    {
+                        type: 'image',
+                        text: 'An image of cascading stylesheet computer code',
+                        url: 'https://bootstrap.transferwise.com/assets/img/css2-bg.jpg',
+                        margin: 'xs'
+                    },
+                ]
+            },
+        ],
+        right: [
+            {
+                type: 'form',
+                schema: {
+                    type: 'object',
+                    title: 'Personal details',
+                    // info: {
+                    //   markdown:
+                    //     'We need to gather this data to make sure you are who you say you here [click here for more information](/somewhere)',
+                    // },
+                    alert: {
+                        markdown: 'Make sure you get this correct, or your transfer could be held up!',
+                        context: 'neutral'
+                    },
+                    displayOrder: ['firstname', 'lastname'],
+                    properties: {
+                        firstname: {
+                            type: 'string',
+                            title: 'First name',
+                            alert: {
+                                markdown: 'Please use **only** latin characters.',
+                                context: 'warning'
+                            }
+                        },
+                        lastname: {
+                            type: 'string',
+                            title: 'Last name',
+                            minLength: 3,
+                            help: {
+                                markdown: 'help!'
+                            }
+                        }
+                    }
+                }
+            },
+            {
+                type: 'alert',
+                markdown: 'This is an alert - we can use **bold** to provide emphasis.',
+                context: 'warning'
+            },
+            {
+                type: 'info',
+                markdown: '### This heading comes from markdown \n\r We can use markdown to add [links](https://transferwise.com) and _other_ **formatting** \n\r. It will also let us add simple lists: \n - one\n - two\n - #### three'
+            },
+        ]
+    },
+    {
+        type: 'box',
+        width: 'sm',
+        components: [
+            {
+                type: 'button',
+                action: {
+                    title: 'Submit',
+                    url: '',
+                    method: 'GET',
+                    data: {},
+                    type: 'primary'
+                }
+            },
+            {
+                type: 'button',
+                action: {
+                    title: 'Cancel',
+                    url: '',
+                    method: 'GET',
+                    data: {},
+                    disabled: true
+                }
+            },
+        ]
+    },
+    {
+        type: 'decision',
+        options: [
+            {
+                title: 'More information about this option',
+                icon: { name: 'profile' },
+                action: {
+                    title: 'Option 1',
+                    url: '/option1',
+                    method: 'POST',
+                    data: {
+                        a: 1
+                    }
+                }
+            },
+            {
+                title: 'More information about this option',
+                icon: { name: 'bank' },
+                action: {
+                    title: 'Option 2',
+                    url: '/option2',
+                    method: 'GET',
+                    data: {},
+                    disabled: true
+                }
+            },
+        ]
+    },
+];
+export default layout;

package/build/layout/layouts/final-step-layout.json.d.ts

@@ -0,0 +1,3 @@
+import { LayoutComponent } from '../../dynamic-flow-types';
+declare const layout: LayoutComponent[];
+export default layout;

package/build/layout/layouts/final-step-layout.json.js

@@ -0,0 +1,39 @@
+var layout = [
+    {
+        type: 'image',
+        url: 'https://via.placeholder.com/1024',
+        text: 'Image alt text',
+        margin: 'lg',
+        size: 'sm'
+    },
+    {
+        type: 'heading',
+        text: 'Image size sm',
+        size: 'lg',
+        margin: 'lg',
+        align: 'center'
+    },
+    {
+        type: 'paragraph',
+        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel ante felis. Nullam auctor posuere justo ac posuere. Nullam efficitur enim ut turpis venenatis vestibulum.',
+        align: 'center'
+    },
+    {
+        type: 'box',
+        width: 'md',
+        components: [
+            {
+                type: 'button',
+                action: {
+                    title: 'Button',
+                    type: 'primary',
+                    exit: true,
+                    data: { someKey: 'some value' },
+                    url: '/success',
+                    method: 'GET'
+                }
+            },
+        ]
+    },
+];
+export default layout;

package/build/layout/layouts/finalStep.json.d.ts

@@ -0,0 +1,3 @@
+import { Step } from '../../dynamic-flow-types';
+declare const step: Step;
+export default step;

package/build/layout/layouts/finalStep.json.js

@@ -0,0 +1,24 @@
+var step = {
+    key: 'account',
+    type: 'final',
+    success: true,
+    details: {
+        image: {
+            url: 'https://via.placeholder.com/1024',
+            text: 'Image size: sm'
+        },
+        title: 'Image size: undefined',
+        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel ante felis. Nullam auctor posuere justo ac posuere. Nullam efficitur enim ut turpis venenatis vestibulum.'
+    },
+    actions: [
+        {
+            title: 'Continue',
+            type: 'primary',
+            exit: true,
+            data: { someKey: 'some value' },
+            url: '/success',
+            method: 'GET'
+        },
+    ]
+};
+export default step;

package/build/layout/layouts/list.json.d.ts

@@ -0,0 +1,3 @@
+import { LayoutComponent } from '../../dynamic-flow-types';
+declare const layout: LayoutComponent[];
+export default layout;

package/build/layout/layouts/list.json.js

@@ -0,0 +1,33 @@
+var layout = [
+    {
+        type: 'list',
+        title: 'This is a List',
+        items: [
+            {
+                title: 'Item 1',
+                description: 'The first item is positive',
+                icon: {
+                    name: 'bank'
+                },
+                status: 'positive'
+            },
+            {
+                title: 'Item 2',
+                description: 'The second item is neutral',
+                icon: {
+                    name: 'emoji'
+                },
+                status: 'neutral'
+            },
+            {
+                title: 'Item 3',
+                description: 'The third item is warning',
+                icon: {
+                    name: 'gift-box'
+                },
+                status: 'warning'
+            },
+        ]
+    },
+];
+export default layout;

package/build/layout/layouts/pay-in.json.d.ts

@@ -0,0 +1,3 @@
+import { Step } from '../../dynamic-flow-types';
+declare const step: Step;
+export default step;