@wise/dynamic-flow-client 5.11.0 → 5.12.0

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

@@ -1,568 +0,0 @@
-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',
-            },
-        },
-    ],
-};

package/build/stories/spec/behavior/Copy.story.js

@@ -1,71 +0,0 @@
-import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
-import { renderWithStep } from '../../utils/render-utils';
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Behavior',
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-};
-const httpClient = async () => new Promise((resolve) => {
-    setTimeout(resolve, 1000);
-});
-export function Copy() {
-    return renderWithStep(copyStep, httpClient);
-}
-const copyStep = {
-    id: 'copy',
-    title: 'Copy Behavior',
-    schemas: [],
-    layout: [
-        {
-            type: 'decision',
-            control: 'with-avatar',
-            options: [
-                {
-                    title: 'Click to copy',
-                    image: {
-                        url: 'https://images.unsplash.com/photo-1542736705-53f0131d1e98?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80',
-                    },
-                    behavior: {
-                        type: 'copy',
-                        content: 'This is a decision with an image',
-                    },
-                },
-            ],
-        },
-        {
-            type: 'review',
-            title: 'Review Layout',
-            callToAction: {
-                title: 'Click to copy',
-                behavior: {
-                    type: 'copy',
-                    content: 'This is a review action',
-                },
-            },
-            fields: [
-                { label: 'Recipient', value: 'Florence Jones' },
-                { label: 'Amount', value: '$6550' },
-            ],
-        },
-        {
-            type: 'button',
-            title: 'Click to copy',
-            control: 'secondary',
-            behavior: {
-                type: 'copy',
-                content: 'This is a button',
-            },
-        },
-        {
-            type: 'button',
-            title: 'Submit',
-            control: 'primary',
-            behavior: {
-                type: 'action',
-                action: { url: '/submit' },
-            },
-        },
-    ],
-};

package/build/stories/spec/behavior/Link.story.js

@@ -1,40 +0,0 @@
-import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
-import { renderWithStep } from '../../utils/render-utils';
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Behavior',
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-};
-const httpClient = async () => new Promise((resolve) => {
-    setTimeout(resolve, 1000);
-});
-export function Link() {
-    return renderWithStep(step, httpClient);
-}
-const step = {
-    id: 'copy',
-    title: 'Link Behavior',
-    schemas: [],
-    layout: [
-        {
-            type: 'button',
-            title: 'Open Google',
-            control: 'secondary',
-            behavior: {
-                type: 'link',
-                url: 'https://www.google.com',
-            },
-        },
-        {
-            type: 'button',
-            title: 'Submit',
-            control: 'primary',
-            behavior: {
-                type: 'action',
-                action: { url: '/submit' },
-            },
-        },
-    ],
-};