@wise/dynamic-flow-client 0.1.1 → 0.1.3

package/build/layout/layouts/pay-in.json.js

@@ -0,0 +1,97 @@
+var step = {
+    key: 'PAY_ID',
+    type: 'form',
+    title: 'Pay Using PayID',
+    actions: [
+        {
+            title: 'I have paid',
+            type: 'primary',
+            exit: true,
+            result: {
+                paid: 'POTENTIALLY_PAID'
+            },
+            $id: '#payNow'
+        },
+        {
+            title: "I'll transfer my money later",
+            type: 'secondary',
+            exit: true,
+            result: {
+                paid: 'NOT_PAID'
+            },
+            $id: '#payLater'
+        },
+    ],
+    schemas: [
+        {
+            title: 'Pay Using PayID',
+            type: 'string',
+            hidden: true,
+            "default": 'PayId'
+        },
+    ],
+    layout: [
+        {
+            type: 'info',
+            markdown: 'Go to your online banking and transfer **50.25 AUD** to our account using the email below.'
+        },
+        {
+            components: [
+                {
+                    context: 'neutral',
+                    markdown: "We've updated our PayID email and no longer require you to enter any reference numbers. Use this PayID going forward.",
+                    type: 'alert'
+                },
+                {
+                    type: 'review',
+                    title: 'Our Bank Details',
+                    fields: [
+                        {
+                            label: 'Email',
+                            value: 'rahul@wise.com'
+                        },
+                    ]
+                },
+                {
+                    left: [
+                        {
+                            type: 'review',
+                            fields: [
+                                {
+                                    label: 'Account Name',
+                                    value: 'Wise Australia Pty Ltd'
+                                },
+                            ]
+                        },
+                    ],
+                    right: [
+                        {
+                            type: 'review',
+                            fields: [
+                                {
+                                    label: 'Amount',
+                                    value: '50.25 AUD'
+                                },
+                            ]
+                        },
+                    ],
+                    type: 'columns'
+                },
+            ],
+            type: 'box'
+        },
+        {
+            type: 'button',
+            action: {
+                $ref: '#payNow'
+            }
+        },
+        {
+            type: 'button',
+            action: {
+                $ref: '#payLater'
+            }
+        },
+    ]
+};
+export default step;

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

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

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

@@ -0,0 +1,160 @@
+var layout = [
+    {
+        type: 'box',
+        width: 'md',
+        components: [
+            {
+                type: 'heading',
+                align: 'center',
+                margin: 'lg',
+                text: 'Review your transfer details'
+            },
+            {
+                type: 'box',
+                border: true,
+                components: [
+                    {
+                        type: 'review',
+                        title: 'Transfer details',
+                        orientation: 'horizontal',
+                        action: {
+                            title: 'Edit',
+                            url: '/edit-transfer',
+                            method: 'GET'
+                        },
+                        fields: [
+                            {
+                                label: 'You send approximately',
+                                value: '88.86 GBP'
+                            },
+                            {
+                                label: 'You send from',
+                                value: 'GBP balance'
+                            },
+                            {
+                                label: 'Estimate total fees (included)',
+                                value: '0.86 GBP'
+                            },
+                            {
+                                label: "Estimate amount we'll convert",
+                                value: '88 GBP'
+                            },
+                            {
+                                label: 'Live rate',
+                                value: '1.1363'
+                            },
+                            {
+                                label: 'Test gets exactly',
+                                value: '100 EUR'
+                            },
+                            {
+                                label: 'Should arrive',
+                                value: 'in seconds'
+                            },
+                        ]
+                    },
+                    {
+                        type: 'divider'
+                    },
+                    {
+                        type: 'review',
+                        title: 'Recipient details',
+                        orientation: 'horizontal',
+                        action: {
+                            title: 'Edit',
+                            url: '/recipient',
+                            method: 'GET'
+                        },
+                        fields: [
+                            {
+                                label: 'Name',
+                                value: 'Test Name'
+                            },
+                            {
+                                label: 'Email',
+                                value: 'test@example.com'
+                            },
+                            {
+                                label: 'Sort code',
+                                value: '12-34-56'
+                            },
+                            {
+                                label: 'Account number',
+                                value: '12345678'
+                            },
+                        ]
+                    },
+                ]
+            },
+            {
+                type: 'box',
+                border: true,
+                components: [
+                    {
+                        type: 'form',
+                        schema: {
+                            title: 'Schedule',
+                            type: 'object',
+                            displayOrder: ['date', 'frequency'],
+                            properties: {
+                                date: {
+                                    title: 'Date',
+                                    type: 'string',
+                                    format: 'date'
+                                },
+                                frequency: {
+                                    type: 'string',
+                                    title: 'Frequency',
+                                    control: 'select',
+                                    placeholder: 'How often?',
+                                    oneOf: [
+                                        {
+                                            title: 'Daily',
+                                            "const": 'day'
+                                        },
+                                        {
+                                            title: 'Weekly',
+                                            "const": 'week'
+                                        },
+                                        {
+                                            title: 'Monthly',
+                                            "const": 'month'
+                                        },
+                                    ]
+                                }
+                            }
+                        }
+                    },
+                    {
+                        type: 'alert',
+                        markdown: "We'll deduct the required amount **from your GBP balance** at the **real exchange rate** on the **28th of each month**, so that Rayna always gets exactly **100 EUR**. First **monthly** transfer will be made on **April 28, 2020 (BST)**"
+                    },
+                ]
+            },
+            {
+                type: 'form',
+                schema: {
+                    type: 'object',
+                    displayOrder: ['reference'],
+                    properties: {
+                        reference: {
+                            type: 'string',
+                            title: 'Reference',
+                            placeholder: 'Type a reference'
+                        }
+                    }
+                }
+            },
+            {
+                type: 'button',
+                action: {
+                    title: 'Create transfer',
+                    method: 'POST',
+                    url: '/final',
+                    type: 'primary'
+                }
+            },
+        ]
+    },
+];
+export default layout;

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

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

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

@@ -0,0 +1,66 @@
+var layout = [
+    {
+        type: 'box',
+        width: 'xs',
+        components: [
+            {
+                type: 'image',
+                url: 'https://transferwise.com/staticrab/homepage/_next/static/images/how_to_2-06281f8ea9caa50445f075d460434bcf.svg',
+                text: 'An illustration'
+            },
+        ]
+    },
+    {
+        type: 'box',
+        width: 'lg',
+        components: [
+            {
+                type: 'heading',
+                align: 'center',
+                text: "You've scheduled a monthly payment of 100 EUR to Rayna Kenter"
+            },
+        ]
+    },
+    {
+        type: 'box',
+        width: 'md',
+        components: [
+            {
+                type: 'info',
+                align: 'center',
+                markdown: 'Your first payment has been sent **now**',
+                margin: 'xs'
+            },
+            {
+                type: 'paragraph',
+                align: 'center',
+                text: 'Your next payment will be made on July 29th, 2020 (BST)'
+            },
+            {
+                type: 'columns',
+                left: [
+                    {
+                        type: 'button',
+                        action: {
+                            title: 'Check transfer details',
+                            url: '/check',
+                            method: 'GET'
+                        }
+                    },
+                ],
+                right: [
+                    {
+                        type: 'button',
+                        action: {
+                            title: 'Invite & earn',
+                            url: '/check',
+                            method: 'GET',
+                            type: 'primary'
+                        }
+                    },
+                ]
+            },
+        ]
+    },
+];
+export default layout;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Action, ListLayout } from '../../dynamic-flow-types';
+type Props = {
+    component: ListLayout;
+    onAction: (action: Action) => void;
+};
+export declare const DynamicList: ({ component }: Props) => JSX.Element;
+export {};

package/build/layout/list/index.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 { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+import { Summary } from '@transferwise/components';
+import DynamicIcon from '../icon';
+import { getMarginBottom } from '../utils';
+export var DynamicList = function (_a) {
+    var component = _a.component;
+    return (_jsxs("div", __assign({ className: getMarginBottom(component.margin || 'md') }, { children: [component.title ? _jsxs("h4", __assign({ className: "m-b-2" }, { children: [" ", component.title, " "] })) : null, component.items.map(mapItemToSummary)] })));
+};
+function mapItemToSummary(_a) {
+    var title = _a.title, description = _a.description, icon = _a.icon, status = _a.status;
+    var props = __assign(__assign({ key: "".concat(title, "/").concat(description || ''), title: title, description: description }, ((icon === null || icon === void 0 ? void 0 : icon.name) ? { icon: _jsx(DynamicIcon, { type: icon.name }) } : {})), (status ? { status: statusMap[status] } : {}));
+    return _jsx(Summary, __assign({}, props));
+}
+var statusMap = {
+    positive: 'done',
+    warning: 'pending',
+    neutral: 'notDone'
+};

package/build/layout/loading-indicator/index.d.ts

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

package/build/layout/loading-indicator/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Loader } from '@transferwise/components';
+import { getMarginBottom } from '../utils';
+export var DynamicLoadingIndicator = function (_a) {
+    var component = _a.component;
+    var margin = component.margin, _b = component.size, size = _b === void 0 ? 'md' : _b;
+    return (_jsx(Loader, { size: size, classNames: {
+            'tw-loader': "tw-loader m-x-auto ".concat(getMarginBottom(margin))
+        } }));
+};

package/build/layout/loading-indicator/spec.d.ts

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

package/build/layout/loading-indicator/spec.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { DynamicLoadingIndicator } from '.';
+describe('Given a component for dynamically rendering a loading indicator', function () {
+    describe('when initialised without any properties', function () {
+        it('renders a loading indicator of the default "md" size', function () {
+            var baseElement = render(_jsx(DynamicLoadingIndicator, { component: { type: 'loading-indicator' } })).baseElement;
+            expect(baseElement).toMatchInlineSnapshot("\n<body>\n  <div>\n    <div\n      class=\"tw-loader m-x-auto  tw-loader--md\"\n    >\n      <div\n        class=\"tw-loader__stripe\"\n      />\n      <div\n        class=\"tw-loader__stripe\"\n      />\n      <div\n        class=\"tw-loader__stripe\"\n      />\n      <div\n        class=\"tw-loader__stripe\"\n      />\n      <div\n        class=\"tw-loader__stripe\"\n      />\n    </div>\n  </div>\n</body>\n");
+        });
+    });
+});

package/build/layout/paragraph/DynamicParagraph.d.ts

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

package/build/layout/paragraph/DynamicParagraph.js

@@ -0,0 +1,42 @@
+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 { Button } from '@transferwise/components';
+import { useIntl } from 'react-intl';
+import { getTextAlignmentAndMargin } from '../utils';
+import messages from './DynamicParagraph.messages';
+import { useSnackBarIfAvailable } from './useSnackBarIfAvailable';
+export var DynamicParagraph = function (_a) {
+    var component = _a.component;
+    return component.control === 'copyable' ? (_jsx(CopyableDynamicParagraph, { component: component })) : (_jsx(BasicDynamicParagraph, { component: component }));
+};
+var BasicDynamicParagraph = function (_a) {
+    var component = _a.component;
+    return (_jsxs("p", __assign({ className: getTextAlignmentAndMargin(component) }, { children: [" ", component.text, " "] })));
+};
+var CopyableDynamicParagraph = function (_a) {
+    var component = _a.component;
+    var formatMessage = useIntl().formatMessage;
+    var createSnackbar = useSnackBarIfAvailable();
+    var text = component.text;
+    var copy = function () {
+        var _a;
+        (_a = navigator.clipboard) === null || _a === void 0 ? void 0 : _a.writeText(text).then(function () { return createSnackbar({ text: formatMessage(messages.copied) }); })["catch"](noop);
+    };
+    var classNames = getTextAlignmentAndMargin({ align: component.align, margin: 'sm' }) + ' form-control';
+    return (_jsxs("div", __assign({ className: getTextAlignmentAndMargin(component) }, { children: [_jsx("input", { type: "text", className: classNames, value: text, readOnly: true, 
+                // eslint-disable-next-line react/forbid-dom-props
+                style: { textOverflow: 'ellipsis' } }), _jsx(Button, __assign({ block: true, onClick: copy }, { children: formatMessage(messages.copy) }))] })));
+};
+function noop() {
+    //
+}

package/build/layout/paragraph/DynamicParagraph.messages.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+    copy: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    copied: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default _default;

package/build/layout/paragraph/DynamicParagraph.messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl';
+export default defineMessages({
+    copy: {
+        id: 'dynamicFlows.DynamicParagraph.copy',
+        defaultMessage: 'Copy',
+        description: 'Copy to clipboard button label.'
+    },
+    copied: {
+        id: 'dynamicFlows.DynamicParagraph.copied',
+        defaultMessage: 'Copied to clipboard',
+        description: 'Appears in a snackbar when the copy operation succeeds.'
+    }
+});

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

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

package/build/layout/paragraph/index.js

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

package/build/layout/paragraph/useSnackBarIfAvailable.d.ts

@@ -0,0 +1,10 @@
+type CreateSnackbar = (options: {
+    text: string;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    theme?: 'light' | 'dark';
+}) => void;
+export declare function useSnackBarIfAvailable(): CreateSnackbar;
+export {};

package/build/layout/paragraph/useSnackBarIfAvailable.js

@@ -0,0 +1,9 @@
+import { SnackbarContext } from '@transferwise/components';
+import { useContext } from 'react';
+export function useSnackBarIfAvailable() {
+    var context = useContext(SnackbarContext);
+    return context ? context.createSnackbar : noop;
+}
+function noop() {
+    //
+}

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ReviewLayout } from '../../dynamic-flow-types';
+import { OnAction } from '../../schema';
+type Props = {
+    component: ReviewLayout;
+    onAction: OnAction;
+};
+declare const DynamicReview: (props: Props) => JSX.Element;
+export default DynamicReview;

package/build/layout/review/index.js

@@ -0,0 +1,33 @@
+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";
+import { DefinitionList } from '@transferwise/components';
+import { getMarginBottom } from '../utils';
+var mapFieldsToDefinitions = function (_a, index) {
+    var label = _a.label, value = _a.value;
+    return { key: String(index), title: label, value: value };
+};
+var getReviewLayout = function (orientation) {
+    return orientation === 'horizontal' ? 'HORIZONTAL_RIGHT_ALIGNED' : 'VERTICAL_ONE_COLUMN';
+};
+var DynamicReview = function (props) {
+    var review = props.component;
+    var margin = getMarginBottom(review.margin || 'xs');
+    var getReviewAction = function (action) {
+        return (_jsx("a", __assign({ href: action.url, className: "pull-right", role: "button", onClick: function (event) {
+                event.preventDefault();
+                props.onAction(action);
+            } }, { children: action.title })));
+    };
+    return (_jsxs(_Fragment, { children: [review.title && (_jsxs("h6", __assign({ className: "m-b-2" }, { children: [review.title, review.action && getReviewAction(review.action)] }))), _jsx("div", __assign({ className: margin }, { children: _jsx(DefinitionList, { layout: getReviewLayout(review.orientation), definitions: review.fields.map(mapFieldsToDefinitions) }) }))] }));
+};
+export default DynamicReview;

package/build/layout/utils.d.ts

@@ -0,0 +1,7 @@
+import { Align, Size } from '../dynamic-flow-types';
+declare const getMarginBottom: (size: Size | undefined) => "" | "m-b-0" | "m-b-1" | "m-b-2" | "m-b-3" | "m-b-5";
+declare const getTextAlignmentAndMargin: (component: {
+    align?: Align;
+    margin?: Size;
+}) => string;
+export { getMarginBottom, getTextAlignmentAndMargin };

package/build/layout/utils.js

@@ -0,0 +1,31 @@
+var getMarginBottom = function (size) {
+    switch (size) {
+        case 'xs':
+            return 'm-b-0';
+        case 'sm':
+            return 'm-b-1';
+        case 'md':
+            return 'm-b-2';
+        case 'lg':
+            return 'm-b-3';
+        case 'xl':
+            return 'm-b-5';
+        default:
+            return '';
+    }
+};
+var getTextAlignment = function (align) {
+    switch (align) {
+        case 'right':
+            return 'text-xs-right';
+        case 'center':
+            return 'text-xs-center';
+        case 'left':
+        default:
+            return '';
+    }
+};
+var getTextAlignmentAndMargin = function (component) {
+    return "".concat(getTextAlignment(component.align), " ").concat(getMarginBottom(component.margin));
+};
+export { getMarginBottom, getTextAlignmentAndMargin };