@wise/dynamic-flow-client 5.8.1 → 5.9.0

package/build/stories/examples/NativeFlow.story.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { action } from 'storybook/actions';
+import DynamicFlowWise from '../../test-utils/DynamicFlowWise';
+import { useState } from 'react';
+import { Button } from '@transferwise/components';
+import { respondWith } from '../../test-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Examples',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export function NativeFlowInterop() {
+    const [screenId, setScreenId] = useState(0);
+    switch (screenId) {
+        case 0:
+            return (_jsxs(_Fragment, { children: [_jsx("h1", { children: " THIS IS A NATIVE SCREEN " }), _jsx(Button, { onClick: () => setScreenId(1), children: "Continue" })] }));
+        case 1:
+            return (_jsx(DynamicFlowWise, { flowId: "DemoFlowId", initialStep: step('Original step'), httpClient: mockHttpClient, onCompletion: () => {
+                    action('onCompletion')();
+                    setScreenId(2);
+                }, onEvent: action('onEvent'), onLog: action('onLog'), onError: (error) => {
+                    action('onError')(error);
+                    setScreenId(2);
+                    console.error(error);
+                } }));
+        case 2:
+            return (_jsxs(_Fragment, { children: [_jsx("h1", { children: " THIS IS A NATIVE SCREEN (SECOND) " }), _jsx(Button, { onClick: () => setScreenId(1), children: "Continue" })] }));
+        default:
+            return (_jsxs(_Fragment, { children: [_jsx("h1", { children: " YOU ARE IN LIMBO " }), _jsx(Button, { onClick: () => setScreenId(1), children: "Continue" })] }));
+    }
+}
+const step = (title) => ({
+    id: 'native-interop',
+    title,
+    navigation: {
+        back: {
+            action: {
+                exit: true,
+                result: {
+                    state: 0,
+                },
+            },
+        },
+    },
+    refreshUrl: '/refresh',
+    refreshAfter: new Date(Date.now() + 3000).toISOString(),
+    layout: [
+        {
+            type: 'heading',
+            text: 'This step has refreshAfter in 3s. Once it has refreshed, use the browser back button to navigate away. It will continue refreshing',
+            align: 'center',
+            margin: 'lg',
+        },
+        {
+            type: 'button',
+            title: 'Continue',
+            behavior: {
+                type: 'action',
+                action: {
+                    exit: true,
+                    result: {
+                        state: 2,
+                    },
+                },
+            },
+        },
+    ],
+    schemas: [],
+});
+const mockHttpClient = async (input, init) => {
+    console.log(input, init);
+    action('httpClient')(input, init);
+    if (input === '/refresh') {
+        return respondWith(step('This is a refreshed step'));
+    }
+    console.log('FAILING');
+    return respondWith({}, { status: 500 });
+};

package/build/stories/examples/Recipients.story.js

@@ -0,0 +1,568 @@
+import DynamicFlowWise from '../../test-utils/DynamicFlowWise';
+import { renderWithStep } from '../utils/render-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Examples/Recipients',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export function RecipientUpdate() {
+    return renderWithStep(updateStep);
+}
+export function RecipientCreation() {
+    return renderWithStep(creationStep);
+}
+export function RecipientCreationWithInitialModel() {
+    return renderWithStep(Object.assign(Object.assign({}, creationStep), { model: {
+            name: {
+                fullName: 'Name Outside Europe',
+            },
+            ownedByCustomer: false,
+            details: {
+                bic: 'WRONGBIC',
+            },
+            type: 'SwiftCode',
+            currency: 'EUR',
+        } }));
+}
+const creationStep = {
+    id: 'Examples/Recipient Creation',
+    title: 'Recipient Creation Example',
+    schemas: [
+        {
+            $id: '#new-recipient',
+            allOf: [
+                {
+                    type: 'object',
+                    displayOrder: ['profileId', 'currency', 'legalEntityType', 'email'],
+                    properties: {
+                        profileId: {
+                            hidden: true,
+                            const: 123456789,
+                        },
+                        currency: {
+                            title: 'Currency',
+                            analyticsId: 'currency',
+                            oneOf: [
+                                {
+                                    title: 'EUR',
+                                    analyticsId: 'currency-eur',
+                                    icon: {
+                                        name: 'flag-eur',
+                                    },
+                                    description: 'Euro',
+                                    const: 'EUR',
+                                },
+                                {
+                                    title: 'GBP',
+                                    analyticsId: 'currency-gbp',
+                                    icon: {
+                                        name: 'flag-gbp',
+                                    },
+                                    description: 'British pound',
+                                    const: 'GBP',
+                                },
+                                {
+                                    title: 'INR',
+                                    analyticsId: 'currency-inr',
+                                    icon: {
+                                        name: 'flag-inr',
+                                    },
+                                    description: 'Indian rupee',
+                                    const: 'INR',
+                                },
+                                {
+                                    title: 'USD',
+                                    analyticsId: 'currency-usd',
+                                    icon: {
+                                        name: 'flag-usd',
+                                    },
+                                    description: 'United States dollar',
+                                    const: 'USD',
+                                },
+                            ],
+                            validationMessages: {
+                                required: 'Please enter currency.',
+                            },
+                            default: 'EUR',
+                            refreshStepOnChange: true,
+                        },
+                        legalEntityType: {
+                            title: 'Select recipient type',
+                            analyticsId: 'legalEntityType',
+                            oneOf: [
+                                {
+                                    title: 'Person',
+                                    analyticsId: 'legalEntityType-person',
+                                    const: 'PERSON',
+                                },
+                                {
+                                    title: 'Business',
+                                    analyticsId: 'legalEntityType-business',
+                                    const: 'INSTITUTION',
+                                },
+                            ],
+                            validationMessages: {
+                                required: 'Please specify the type of recipient.',
+                            },
+                            refreshStepOnChange: true,
+                        },
+                        email: {
+                            title: 'Their email',
+                            type: 'string',
+                            analyticsId: 'email',
+                            placeholder: 'example@example.ex',
+                            validationMessages: {
+                                maxLength: 'The email you have entered is too long.',
+                                pattern: 'The email address is invalid.',
+                            },
+                            refreshStepOnChange: true,
+                            autofillProvider: 'contact',
+                            autofillKey: 'contact.email',
+                            refreshUrl: '/steps/recipient',
+                            pattern: "\\s*[a-zA-Z0-9.!#$%&'*+\\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+\\s*",
+                            maxLength: 255,
+                        },
+                    },
+                    required: ['currency', 'legalEntityType'],
+                },
+                {
+                    title: 'Bank details',
+                    analyticsId: 'bank-details',
+                    oneOf: [
+                        {
+                            title: 'Inside Europe',
+                            analyticsId: 'bank-details-europe',
+                            type: 'object',
+                            displayOrder: ['name', 'ownedByCustomer', 'details', 'type'],
+                            properties: {
+                                name: {
+                                    type: 'object',
+                                    displayOrder: ['fullName'],
+                                    properties: {
+                                        fullName: {
+                                            title: 'Full name of the account holder',
+                                            type: 'string',
+                                            validationMessages: {
+                                                minLength: 'Name needs to be between 2 and 140 characters long.',
+                                                maxLength: 'Recipient name cannot be longer than 140 characters.',
+                                                pattern: 'This recipient name contains invalid characters. Please use latin characters only.',
+                                                required: 'Name cannot be empty.',
+                                            },
+                                            autofillProvider: 'contact',
+                                            autofillKey: 'contact.fullName',
+                                            pattern: '^[0-9A-Za-zÀ-ÖØ-öø-ÿ-_()\'*,.%#^@&{}~<>+$"\\[\\]\\\\ ]+$',
+                                            minLength: 2,
+                                            maxLength: 140,
+                                        },
+                                    },
+                                    required: ['fullName'],
+                                },
+                                ownedByCustomer: {
+                                    title: 'My own Account',
+                                    hidden: true,
+                                    const: false,
+                                },
+                                details: {
+                                    type: 'object',
+                                    displayOrder: ['bic', 'iban'],
+                                    properties: {
+                                        bic: {
+                                            title: 'Bank code (BIC/SWIFT)',
+                                            type: 'string',
+                                            placeholder: 'BARCGB22XXX',
+                                            hidden: true,
+                                            validationMessages: {
+                                                minLength: 'The BIC you have entered is too short.',
+                                                maxLength: 'The BIC you have entered is too long.',
+                                                pattern: 'Please specify a valid BIC.',
+                                            },
+                                            pattern: '^[A-Za-z]{6}[A-Za-z\\d]{2}([A-Za-z\\d]{3})?$',
+                                            minLength: 8,
+                                            maxLength: 11,
+                                        },
+                                        iban: {
+                                            title: 'IBAN',
+                                            type: 'string',
+                                            placeholder: 'DE12345678901234567890',
+                                            displayFormat: '**** **** **** **** **** **** **** ****',
+                                            help: {
+                                                markdown: 'IBANs are long account numbers used by banks for cross-border transfers. Each country structures this number differently, but it always starts with a 2 digit country code (e.g. DE for Germany).',
+                                            },
+                                            validationMessages: {
+                                                minLength: 'The IBAN you have entered is too short.',
+                                                maxLength: 'The IBAN you have entered is too long.',
+                                                pattern: 'Please specify a valid IBAN.',
+                                                required: 'Please specify an IBAN.',
+                                            },
+                                            refreshStepOnChange: true,
+                                            pattern: '^[a-zA-Z]{2}[a-zA-Z0-9 ]{12,40}$',
+                                            minLength: 14,
+                                            maxLength: 42,
+                                        },
+                                    },
+                                    required: ['iban'],
+                                },
+                                type: {
+                                    title: 'Type',
+                                    hidden: true,
+                                    const: 'Iban',
+                                },
+                            },
+                            required: ['type', 'name', 'details'],
+                            icon: {
+                                name: 'bank',
+                            },
+                        },
+                        {
+                            title: 'Outside Europe',
+                            analyticsId: 'bank-details-outside-europe',
+                            type: 'object',
+                            displayOrder: ['name', 'ownedByCustomer', 'details', 'type'],
+                            properties: {
+                                name: {
+                                    type: 'object',
+                                    displayOrder: ['fullName'],
+                                    properties: {
+                                        fullName: {
+                                            title: 'Full name of the account holder',
+                                            type: 'string',
+                                            validationMessages: {
+                                                minLength: 'Name needs to be between 2 and 140 characters long.',
+                                                maxLength: 'Recipient name cannot be longer than 140 characters.',
+                                                pattern: 'This recipient name contains invalid characters. Please use latin characters only.',
+                                                required: 'Name cannot be empty.',
+                                            },
+                                            autofillProvider: 'contact',
+                                            autofillKey: 'contact.fullName',
+                                            pattern: '^[0-9A-Za-zÀ-ÖØ-öø-ÿ-_()\'*,.%#^@&{}~<>+$"\\[\\]\\\\ ]+$',
+                                            minLength: 2,
+                                            maxLength: 140,
+                                        },
+                                    },
+                                    required: ['fullName'],
+                                },
+                                ownedByCustomer: {
+                                    title: 'My own Account',
+                                    hidden: true,
+                                    const: false,
+                                },
+                                details: {
+                                    type: 'object',
+                                    displayOrder: ['bic', 'accountNumber'],
+                                    properties: {
+                                        bic: {
+                                            title: 'SWIFT / BIC code',
+                                            type: 'string',
+                                            placeholder: 'BUKBGB22',
+                                            validationMessages: {
+                                                minLength: 'The BIC you have entered is too short.',
+                                                maxLength: 'The BIC you have entered is too long.',
+                                                pattern: 'Please specify a valid BIC.',
+                                                required: 'Please specify a BIC.',
+                                            },
+                                            pattern: '^[a-zA-Z]{6}(([a-zA-Z0-9]{2})|([a-zA-Z0-9]{5}))$',
+                                            minLength: 8,
+                                            maxLength: 11,
+                                        },
+                                        accountNumber: {
+                                            title: 'IBAN / Account Number',
+                                            type: 'string',
+                                            placeholder: '123456789012',
+                                            validationMessages: {
+                                                minLength: 'Account number is too short.',
+                                                maxLength: 'Account number is too large.',
+                                                pattern: 'Please enter a valid account number.',
+                                                required: 'Please enter an IBAN or account number.',
+                                            },
+                                            pattern: '^[a-zA-Z0-9]{4,34}$',
+                                            minLength: 4,
+                                            maxLength: 34,
+                                        },
+                                    },
+                                    required: ['bic', 'accountNumber'],
+                                },
+                                type: {
+                                    title: 'Type',
+                                    hidden: true,
+                                    const: 'SwiftCode',
+                                },
+                            },
+                            required: ['type', 'name', 'details'],
+                            icon: {
+                                name: 'bank',
+                            },
+                            alert: {
+                                type: 'alert',
+                                context: 'warning',
+                                markdown: "To send EUR to this account, we need to use the SWIFT network. It's slower, so the transfer might take a day or two longer. Also note that intermediary banks and your recipient's bank might charge extra fees to the amount received.",
+                            },
+                        },
+                    ],
+                    control: 'tab',
+                    placeholder: 'Please select where you are sending to...',
+                },
+            ],
+        },
+    ],
+    refreshUrl: '/steps/recipient',
+    layout: [
+        {
+            type: 'form',
+            schemaId: '#new-recipient',
+        },
+        {
+            type: 'button',
+            title: 'Confirm',
+            control: 'primary',
+            action: {
+                url: '/v2/accounts',
+                method: 'POST',
+            },
+        },
+    ],
+    model: {
+        ownedByCustomer: false,
+        details: {},
+    },
+};
+const updateStep = {
+    id: 'Examples/Recipient Update',
+    title: 'Edit recipient',
+    schemas: [
+        {
+            $id: '#form',
+            allOf: [
+                {
+                    type: 'object',
+                    displayOrder: ['currency'],
+                    properties: {
+                        currency: {
+                            title: 'Currency',
+                            analyticsId: 'currency-select',
+                            oneOf: [
+                                {
+                                    title: 'GBP',
+                                    analyticsId: 'GBP',
+                                    icon: {
+                                        name: 'flag-gbp',
+                                    },
+                                    description: 'British pound',
+                                    const: 'GBP',
+                                },
+                            ],
+                            disabled: true,
+                        },
+                    },
+                    required: [],
+                },
+                {
+                    title: 'Bank details',
+                    type: 'object',
+                    analyticsId: 'SortCode',
+                    icon: {
+                        name: 'bank',
+                    },
+                    displayOrder: ['name', 'details', 'address'],
+                    properties: {
+                        name: {
+                            type: 'object',
+                            displayOrder: ['fullName'],
+                            properties: {
+                                fullName: {
+                                    title: 'Full name of the account holder',
+                                    type: 'string',
+                                    disabled: true,
+                                    validationMessages: {
+                                        minLength: 'Name needs to be between 2 and 140 characters long.',
+                                        maxLength: 'Recipient name cannot be longer than 140 characters.',
+                                        pattern: 'This recipient name may contain invalid characters or is not the full name. Please try again.',
+                                    },
+                                    autofillProvider: 'contact',
+                                    autofillKey: 'contact.fullName',
+                                    pattern: "^[0-9A-Za-zÀ-ÖØ-öø-ÿ-_()'*,.]+ +[0-9A-Za-zÀ-ÖØ-öø-ÿ-_()'*,.]+([0-9A-Za-zÀ-ÖØ-öø-ÿ-_()'*,. ]*)$",
+                                    minLength: 2,
+                                    maxLength: 140,
+                                },
+                            },
+                            required: [],
+                        },
+                        details: {
+                            type: 'object',
+                            displayOrder: ['sortCode', 'accountNumber'],
+                            properties: {
+                                sortCode: {
+                                    title: 'UK sort code',
+                                    type: 'string',
+                                    placeholder: '40-30-20',
+                                    disabled: true,
+                                    validationMessages: {
+                                        pattern: 'Please enter a valid bank code.',
+                                    },
+                                    pattern: '^\\d{2}-?\\d{2}-?\\d{2}$',
+                                    minLength: 6,
+                                    maxLength: 8,
+                                    format: 'numeric',
+                                    displayFormat: '**-**-**',
+                                },
+                                accountNumber: {
+                                    title: 'Account number',
+                                    type: 'string',
+                                    placeholder: '12345678',
+                                    disabled: true,
+                                    validationMessages: {
+                                        minLength: 'Account number is too short.',
+                                        maxLength: 'Account number is too large.',
+                                        pattern: 'Please enter a valid account number.',
+                                    },
+                                    pattern: '[0-9]{8}',
+                                    minLength: 8,
+                                    maxLength: 8,
+                                    format: 'numeric',
+                                },
+                            },
+                            required: [],
+                        },
+                        address: {
+                            title: 'Recipient address',
+                            type: 'object',
+                            displayOrder: ['country', 'city', 'firstLine', 'postCode'],
+                            properties: {
+                                country: {
+                                    title: 'Country',
+                                    placeholder: 'Choose a country',
+                                    oneOf: [
+                                        { title: 'Argentina', const: 'AR' },
+                                        { title: 'Brazil', const: 'BR' },
+                                        { title: 'Canada', const: 'CA' },
+                                        { title: 'Denmark', const: 'DK' },
+                                        { title: 'Egypt', const: 'EG' },
+                                        { title: 'France', const: 'FR' },
+                                        { title: 'Germany', const: 'DE' },
+                                        { title: 'Honduras', const: 'HN' },
+                                        { title: 'Italy', const: 'IT' },
+                                        { title: 'Japan', const: 'JP' },
+                                        { title: 'Korea, Republic of', const: 'KR' },
+                                        { title: 'Liberia', const: 'LR' },
+                                        { title: 'Morocco', const: 'MA' },
+                                        { title: 'New Zealand', const: 'NZ' },
+                                        { title: 'Oman', const: 'OM' },
+                                        { title: 'Peru', const: 'PE' },
+                                        { title: 'Qatar', const: 'QA' },
+                                        { title: 'Russian Federation', const: 'RU' },
+                                        { title: 'Spain', const: 'ES' },
+                                        { title: 'Turkey', const: 'TR' },
+                                        {
+                                            title: 'United Kingdom of Great Britain and Northern Ireland',
+                                            const: 'GB',
+                                        },
+                                        { title: 'United States of America', const: 'US' },
+                                        { title: 'Viet Nam', const: 'VN' },
+                                        { title: 'Yemen', const: 'YE' },
+                                        { title: 'Zimbabwe', const: 'ZW' },
+                                    ],
+                                    validationMessages: {
+                                        required: 'Please select a country.',
+                                    },
+                                    autofillProvider: 'contact',
+                                    autofillKey: 'contact.countryCode',
+                                },
+                                city: {
+                                    title: 'City',
+                                    type: 'string',
+                                    autofillProvider: 'contact',
+                                    autofillKey: 'contact.city',
+                                    pattern: '^.{1,255}$',
+                                    minLength: 1,
+                                    maxLength: 255,
+                                },
+                                firstLine: {
+                                    title: 'Recipient address',
+                                    type: 'string',
+                                    autofillProvider: 'contact',
+                                    autofillKey: 'contact.firstLine',
+                                    pattern: '^.{1,255}$',
+                                    minLength: 1,
+                                    maxLength: 255,
+                                },
+                                postCode: {
+                                    title: 'Post code',
+                                    type: 'string',
+                                    validationMessages: {
+                                        pattern: 'Please specify a valid post code.',
+                                        required: "Please specify the recipient's post code.",
+                                    },
+                                    autofillProvider: 'contact',
+                                    autofillKey: 'contact.postalCode',
+                                    pattern: '^.{1,32}$',
+                                    minLength: 1,
+                                    maxLength: 32,
+                                },
+                            },
+                            required: ['country', 'city', 'firstLine', 'postCode'],
+                            help: {
+                                markdown: "For legal reasons, we need to ask for the recipient's address (not the bank's address). Don't worry, they won't get any post from us.",
+                            },
+                        },
+                    },
+                    required: ['address'],
+                },
+            ],
+        },
+    ],
+    errors: {
+        validation: {
+            address: {
+                country: 'Please select a country.',
+                city: 'Please enter a city.',
+                postCode: 'Please enter a post code.',
+                firstLine: 'Please enter a residential address.',
+            },
+        },
+    },
+    refreshUrl: '/steps/recipientUpdate/?refresh',
+    model: {
+        country: 'GB',
+        ownedByCustomer: false,
+        creatorId: 5465158,
+        accountSummary: '(04-00-04) 27832001',
+        active: true,
+        longAccountSummary: 'GBP account ending in 2001',
+        type: 'SortCode',
+        isInternal: false,
+        profileId: 5461759,
+        legalEntityType: 'PERSON',
+        name: {
+            fullName: 'Fergus Jordan',
+        },
+        currency: 'GBP',
+        details: {
+            accountNumber: '27832001',
+            sortCode: '040004',
+            hashedByLooseHashAlgorithm: '5c577703b845c613532bf0e08bbb38ce37644f76af58e1af6fa7447df7041a27',
+        },
+        id: 67912450,
+        hash: 'fe319d809ce8a4f155412afe1b62bc2f1abf6e4af89f762a85a47811f54dab53',
+        commonFieldMap: {
+            bankCodeField: 'sortCode',
+            accountNumberField: 'accountNumber',
+        },
+    },
+    layout: [
+        {
+            type: 'form',
+            schemaId: '#form',
+        },
+        {
+            type: 'button',
+            title: 'Update',
+            control: 'primary',
+            action: {
+                id: 'submit',
+                method: 'PATCH',
+                url: '/responses/recipientUpdate/?delay=5000',
+            },
+        },
+    ],
+};