@wise/dynamic-flow-client 5.30.1 → 5.30.2-experimental-949e5e5

package/build/stories/spec/schemas/object/MoneyInput.story.js

@@ -1,240 +0,0 @@
-import { getMockHttpClient, respondWith } from '../../../../test-utils';
-import DynamicFlowWise from '../../../../test-utils/DynamicFlowWise';
-import { renderWithStep } from '../../../utils/render-utils';
-const getHttpClient = () => getMockHttpClient({
-    '/submit': async (input, init) => {
-        // console.log(input, init && JSON.parse(init.body as string));
-        const step = getStep(`Submission Successful`, `The form was submitted with body: ${init === null || init === void 0 ? void 0 : init.body}`);
-        return respondWith(step);
-    },
-    '/refresh': async () => {
-        return respondWith(null, { status: 304 });
-    },
-});
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Schemas/Object/MoneyInput',
-    parameters: {
-        chromatic: { disableSnapshot: false },
-    },
-};
-export function Basic() {
-    return renderWithStep(getStep('Money Input', 'Basic money input: no placeholder, no default value, no model, no onChange.'), getHttpClient());
-}
-export function WithPlaceholder() {
-    const step = getStep('Money Input', 'Money input with placeholder in the amount.');
-    const schema = step.schemas[0];
-    schema.properties.amount.placeholder = '9.99';
-    return renderWithStep(step, getHttpClient());
-}
-export function WithDefaultValue() {
-    const step = getStep('Money Input', 'Money input with default value in the amount and currency.');
-    const schema = step.schemas[0];
-    schema.properties.amount.default = '49.99';
-    schema.properties.currency.default = 'GBP';
-    return renderWithStep(step, getHttpClient());
-}
-export function WithModel() {
-    const step = Object.assign(Object.assign({}, getStep('Money Input', 'Money input with model values for the amount and currency.')), { model: { currency: 'EUR', amount: '100.00' } });
-    return renderWithStep(step, getHttpClient());
-}
-export function WithOnChangeInTheAmount() {
-    const step = getStep('Money Input', 'Money input with onChange in the amount, which triggers a refresh after the debounce period.');
-    const schema = step.schemas[0];
-    schema.properties.amount.onChange = { type: 'refresh' };
-    return renderWithStep(step, getHttpClient());
-}
-export function WithOnChangeInTheCurrency() {
-    const step = getStep('Money Input', 'Money input with onChange in the currency, which triggers a refresh immediately.');
-    const schema = step.schemas[0];
-    schema.properties.currency.onChange = { type: 'refresh' };
-    return renderWithStep(step, getHttpClient());
-}
-export function WithExtraConstAndHiddenProperties() {
-    const step = getStep('Money Input', 'Money input with extra const and hidden properties in the object schema.');
-    const schema = step.schemas[0];
-    schema.properties.hiddenProp = {
-        type: 'string',
-        hidden: true,
-        const: 'hiddenValue',
-    };
-    schema.properties.constProp = {
-        const: 'constValue',
-    };
-    schema.properties.invalidSchema = {
-        type: 'number', // not hidden and not const, should be ignored
-    };
-    step.model = { amount: '99.99', currency: 'USD' };
-    return renderWithStep(step, getHttpClient());
-}
-export function WithValidationErrors() {
-    const step = getStep('Money Input', 'Money input with validation errors on the amount.');
-    step.model = { amount: '12', currency: 'EUR' };
-    step.errors = {
-        validation: {
-            amount: 'This error is in the step errors object.',
-        },
-    };
-    return renderWithStep(step, getHttpClient());
-}
-export function WithOnlyOneCurrencyOption() {
-    const step = getStep('Money Input', 'Money input with only one currency option, which should render as a const field.');
-    const schema = step.schemas[0];
-    schema.properties.currency = {
-        const: 'USD',
-        title: 'USD',
-        description: 'US Dollar',
-    };
-    step.model = { amount: '75.50', currency: 'USD' };
-    return renderWithStep(step, getHttpClient());
-}
-export function WithGroupingTags() {
-    const step = getStep('Money Input', 'Money input with grouping tags in the currency options.');
-    const schema = step.schemas[0];
-    const { oneOf } = schema.properties.currency;
-    oneOf.forEach((option, index) => {
-        const rnd = predictablyRandomNumbers[index];
-        const constSchemaOption = option;
-        constSchemaOption.tags = [];
-        if (rnd < 0.7)
-            return; // randomly skip some options
-        if (rnd >= 0.7 && rnd < 0.8) {
-            constSchemaOption.tags.push('recent');
-        }
-        if (rnd >= 0.75 && rnd < 0.85) {
-            constSchemaOption.tags.push('popular');
-        }
-        if (rnd >= 0.9) {
-            constSchemaOption.tags.push('currencies-with-account-details');
-        }
-    });
-    step.model = { amount: '150', currency: 'EUR' };
-    return renderWithStep(step, getHttpClient());
-}
-const getStep = (title, description) => ({
-    id: 'step',
-    title,
-    description,
-    layout: [
-        {
-            type: 'form',
-            schemaId: '#schema',
-        },
-        {
-            type: 'button',
-            title: 'Submit',
-            control: 'primary',
-            action: {
-                url: '/submit',
-            },
-        },
-    ],
-    schemas: [
-        {
-            $id: '#schema',
-            type: 'object',
-            title: 'Money Input (object schema title)',
-            description: 'A money input with amount and currency (object schema description)',
-            format: 'money',
-            properties: {
-                currency: {
-                    oneOf: [
-                        {
-                            const: 'USD',
-                            title: 'USD',
-                            description: 'US Dollar',
-                            keywords: ['American Dollar'],
-                        },
-                        {
-                            const: 'EUR',
-                            title: 'EUR',
-                            description: 'Euro',
-                        },
-                        {
-                            const: 'AUD',
-                            title: 'AUD',
-                            description: 'Australian Dollar',
-                            keywords: ['Aussie Dollar'],
-                        },
-                        {
-                            const: 'GBP',
-                            title: 'GBP',
-                            description: 'British Pound',
-                            keywords: ['Blighty'],
-                        },
-                        {
-                            const: 'JPY',
-                            title: 'JPY',
-                            description: 'Japanese Yen',
-                            keywords: ['Nippon Yen'],
-                        },
-                        {
-                            const: 'CAD',
-                            title: 'CAD',
-                            description: 'Canadian Dollar',
-                            keywords: ['Loonie'],
-                        },
-                        { const: 'CHF', title: 'CHF', description: 'Swiss Franc', keywords: ['Swissie'] },
-                        { const: 'CNY', title: 'CNY', description: 'Chinese Yuan', keywords: ['Renminbi'] },
-                        { const: 'INR', title: 'INR', description: 'Indian Rupee', keywords: ['Rupee'] },
-                        { const: 'MXN', title: 'MXN', description: 'Mexican Peso', keywords: ['Peso'] },
-                        {
-                            const: 'NZD',
-                            title: 'NZD',
-                            description: 'New Zealand Dollar',
-                            keywords: ['Kiwi Dollar'],
-                        },
-                        { const: 'ZAR', title: 'ZAR', description: 'South African Rand', keywords: ['Rand'] },
-                        { const: 'SEK', title: 'SEK', description: 'Swedish Krona', keywords: ['Krona'] },
-                        { const: 'NOK', title: 'NOK', description: 'Norwegian Krone', keywords: ['Krone'] },
-                        { const: 'DKK', title: 'DKK', description: 'Danish Krone', keywords: ['Krone'] },
-                        { const: 'BRL', title: 'BRL', description: 'Brazilian Real', keywords: ['Real'] },
-                        {
-                            const: 'SGD',
-                            title: 'SGD',
-                            description: 'Singapore Dollar',
-                            keywords: ['Sing Dollar'],
-                        },
-                        {
-                            const: 'HKD',
-                            title: 'HKD',
-                            description: 'Hong Kong Dollar',
-                            keywords: ['HK Dollar'],
-                        },
-                        { const: 'KRW', title: 'KRW', description: 'South Korean Won', keywords: ['Won'] },
-                        { const: 'TRY', title: 'TRY', description: 'Turkish Lira', keywords: ['Lira'] },
-                        {
-                            const: 'IDR',
-                            title: 'IDR',
-                            description: 'Indonesian Rupiah',
-                            keywords: ['Rupiah'],
-                        },
-                        { const: 'SAR', title: 'SAR', description: 'Saudi Riyal', keywords: ['Riyal'] },
-                        { const: 'AED', title: 'AED', description: 'Emirati Dirham', keywords: ['Dirham'] },
-                        {
-                            const: 'PLN',
-                            title: 'PLN',
-                            description: 'Polish Zloty',
-                            keywords: ['Zloty'],
-                        },
-                        {
-                            const: 'THB',
-                            title: 'THB',
-                            description: 'Thai Baht',
-                            keywords: ['Baht'],
-                        },
-                    ],
-                },
-                amount: { type: 'string', format: 'numeric', minLength: 5 },
-            },
-            displayOrder: ['currency', 'amount'],
-            required: ['currency', 'amount'],
-        },
-    ],
-    refreshUrl: '/refresh',
-});
-const predictablyRandomNumbers = [
-    0.25, 0.7, 0.74, 0.81, 0.87, 0.53, 0.41, 0.19, 0.18, 0.2, 0.76, 0.66, 0.52, 0.1, 0.81, 0.19, 0.19,
-    0.59, 0.9, 0.19, 0.28, 0.44, 0.01, 0.37, 0.12, 0.62, 0.37, 0.71, 0.07, 0.67, 0.82, 0.35, 0.81,
-    0.8, 0.04, 0.88, 0.99, 0.29, 0.04, 0.21, 0.46, 0.84, 0.64, 0.2, 0.02, 0.34, 0.17, 0.1, 0.91, 0.83,
-];

package/build/stories/spec/schemas/oneOf/OneOfInitialisation.story.js

@@ -1,55 +0,0 @@
-import DynamicFlowWise from '../../../../test-utils/DynamicFlowWise';
-import { renderWithStep } from '../../../utils/render-utils';
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Schemas/OneOf',
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-};
-export function AllOfAndOneOfInitialisation() {
-    return renderWithStep(allOfAndOneOfStep);
-}
-const allOfAndOneOfStep = {
-    id: 'step-id',
-    title: 'Step Title',
-    schemas: [
-        {
-            $id: '#root',
-            allOf: [
-                {
-                    type: 'object',
-                    displayOrder: ['email'],
-                    properties: { email: { type: 'string', title: 'Email' } },
-                },
-                {
-                    control: 'radio',
-                    oneOf: [
-                        {
-                            title: 'Iban',
-                            type: 'object',
-                            displayOrder: ['iban', 'type'],
-                            properties: { iban: { type: 'string', title: 'IBAN' }, type: { const: 'IBAN' } },
-                        },
-                        {
-                            title: 'Bic',
-                            type: 'object',
-                            displayOrder: ['bic', 'type'],
-                            properties: { bic: { type: 'string', title: 'BIC' }, type: { const: 'BIC' } },
-                        },
-                    ],
-                },
-            ],
-        },
-    ],
-    layout: [
-        {
-            type: 'form',
-            schemaId: '#root',
-        },
-    ],
-    model: {
-        email: 'marty.mcfly@wise.com',
-        type: 'IBAN',
-    },
-};

package/build/stories/spec/schemas/oneOf/OneOfWithSingleOption.story.js

@@ -1,114 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getMockHttpClient, respondWith } from '../../../../test-utils';
-import DynamicFlowWise from '../../../../test-utils/DynamicFlowWise';
-import { renderWithStepAndOverrides } from '../../../utils/render-utils';
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Schemas/OneOf',
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-};
-const httpClient = getMockHttpClient({
-    '/submit': async () => respondWith({}, { status: 404 }),
-});
-export function SingleOptionOneOfs() {
-    const optionSchemasByType = {
-        object: {
-            type: 'object',
-            title: 'Object Schema Option',
-            displayOrder: ['accountId'],
-            properties: {
-                accountId: {
-                    title: 'Account Number',
-                    type: 'string',
-                    placeholder: '12345678',
-                },
-            },
-        },
-        const: {
-            title: 'Const Schema Option',
-            const: 'fixedValue',
-            layout: [
-                {
-                    type: 'alert',
-                    markdown: 'This is a const schema with a fixed value of "fixedValue"',
-                },
-            ],
-        },
-    };
-    const rootLevel = [true, false];
-    const withId = [true, false];
-    const required = [true, false];
-    const optionSchemaType = Object.keys(optionSchemasByType);
-    const examples = [];
-    rootLevel.forEach((isRootLevel) => {
-        withId.forEach((hasId) => {
-            required.forEach((isRequired) => {
-                optionSchemaType.forEach((optionType) => {
-                    const step = getStep(isRootLevel, isRequired, hasId, optionSchemasByType[optionType]);
-                    if (!isRequired && isRootLevel) {
-                        return null;
-                    }
-                    if (!hasId && isRootLevel) {
-                        return null;
-                    }
-                    examples.push(_jsx("div", { className: "m-b-3", children: _jsx(BeforeAndAfter, { step: step, configuration: _jsx(ConfigurationTable, { ordinal: examples.length + 1, step: step, configuration: {
-                                    isRootLevel,
-                                    isRequired,
-                                    withId: hasId,
-                                    optionType,
-                                } }) }) }, `${isRootLevel}-${isRequired}-${hasId}-${optionType}`));
-                });
-            });
-        });
-    });
-    return examples;
-}
-const getStep = (rootLevel, required, withId, singleOption) => {
-    const oneOfSchema = {
-        $id: withId && rootLevel ? '#oneOfSchemaId' : undefined,
-        title: 'One Of Schema Title',
-        placeholder: 'Select an option',
-        oneOf: [singleOption],
-        // control: 'tab',
-    };
-    const objectSchemaWrapper = {
-        type: 'object',
-        $id: '#objectSchemaWrapper',
-        title: 'Object Schema Wrapper Title',
-        displayOrder: ['childSchema'],
-        properties: {
-            childSchema: oneOfSchema,
-        },
-        required: required ? ['childSchema'] : [],
-    };
-    return {
-        id: 'step-id',
-        title: 'Step Title',
-        schemas: [rootLevel ? oneOfSchema : objectSchemaWrapper],
-        layout: [
-            {
-                type: 'form',
-                schemaId: rootLevel ? '#oneOfSchemaId' : '#objectSchemaWrapper',
-            },
-            {
-                type: 'button',
-                title: 'Submit',
-                behavior: { type: 'action', action: { url: '/submit' } },
-            },
-        ],
-    };
-};
-function ConfigurationTable({ configuration, ordinal, step, }) {
-    return (_jsxs(_Fragment, { children: [_jsxs("h4", { children: ["Configuration ", String(ordinal)] }), _jsxs("ul", { style: { paddingLeft: '16px', marginBottom: '4px' }, children: [_jsxs("li", { children: ["OneOf is at ", _jsxs("strong", { children: ["root level: ", configuration.isRootLevel ? 'Yes' : 'No'] })] }), _jsxs("li", { children: ["OneOf is ", _jsxs("strong", { children: ["required: ", configuration.isRequired ? 'Yes' : 'No'] })] }), _jsxs("li", { children: ["OneOf has ", _jsxs("strong", { children: ["$id: ", configuration.withId ? 'Yes' : 'No'] })] }), _jsxs("li", { children: ["Option Schema Type: ", _jsx("strong", { children: configuration.optionType })] })] }), _jsxs("details", { children: [_jsx("summary", { children: "Step JSON" }), _jsx("pre", { children: JSON.stringify(step, null, 2) })] })] }));
-}
-function BeforeAndAfter({ configuration, step }) {
-    return (_jsxs("div", { style: { display: 'flex', gap: '16px' }, children: [_jsx("div", { style: { flex: 1, padding: '8px' }, children: configuration }), _jsxs("div", { style: { flex: 2, border: '1px dashed #999', borderRadius: '8px', padding: '8px' }, children: [_jsx("strong", { children: "Before" }), _jsx("br", {}), renderWithStepAndOverrides(step, {
-                        httpClient,
-                        features: { bugfix: false },
-                    })] }), _jsxs("div", { style: { flex: 2, border: '1px dashed #999', borderRadius: '8px', padding: '8px' }, children: [_jsx("strong", { children: "After" }), _jsx("br", {}), renderWithStepAndOverrides(step, {
-                        httpClient,
-                        features: { bugfix: true },
-                    })] })] }));
-}

package/build/stories/spec/schemas/string/SsnInput.story.js

@@ -1,38 +0,0 @@
-import DynamicFlowWise from '../../../../test-utils/DynamicFlowWise';
-import { renderWithStep } from '../../../utils/render-utils';
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Schemas/String/SSN Input',
-    parameters: {
-        chromatic: { disableSnapshot: false },
-    },
-};
-const step = {
-    id: 'ssn-input',
-    title: 'Verify your identity',
-    schemas: [
-        {
-            $id: '#identity',
-            type: 'object',
-            displayOrder: ['ssn'],
-            required: ['ssn'],
-            properties: {
-                ssn: {
-                    type: 'string',
-                    title: 'Social Security number',
-                    description: 'Enter your 9-digit Social Security number.',
-                    control: 'ssn-input',
-                    displayFormat: '***-**-****',
-                },
-            },
-        },
-    ],
-    layout: [
-        { type: 'form', schemaId: '#identity' },
-        { type: 'button', action: { url: '/submit' }, title: 'Submit' },
-    ],
-    model: { ssn: '123456789' },
-};
-export const SsnInput = {
-    render: () => renderWithStep(step),
-};

package/build/stories/spec/step/Controls.story.js

@@ -1,110 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FlowNavigation } from '@transferwise/components';
-import { ThemeProvider } from '@wise/components-theming';
-import { action } from 'storybook/actions';
-import { respondWith } from '../../../test-utils';
-import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Step/Controls',
-    parameters: {
-        layout: 'fullscreen',
-    },
-};
-export function Splash() {
-    return render('splash');
-}
-export function SplashCelebration() {
-    return render('splash-celebration');
-}
-export function SplashInteractive() {
-    return (_jsx(ThemeProvider, { theme: "personal", className: "animate-theme", children: _jsxs("div", { style: {
-                width: '100%',
-                height: '100vh',
-            }, children: [_jsx(FlowNavigation, { steps: [], onClose: () => { } }), _jsx("div", { style: {
-                        maxWidth: '546px',
-                        margin: 'auto',
-                        paddingTop: '48px',
-                    }, children: _jsx(DynamicFlowWise, { flowId: "splash", httpClient: async (input) => {
-                            if (input === '/continue') {
-                                return respondWith(step('splash-celebration'));
-                            }
-                            return respondWith({
-                                id: 'next',
-                                title: 'This is the step after the splash',
-                                description: 'The theme should be reset to personal',
-                                layout: [],
-                                schemas: [],
-                            });
-                        }, initialStep: {
-                            title: 'Click the button to continue',
-                            id: 'step',
-                            layout: [
-                                {
-                                    type: 'button',
-                                    title: 'Continue',
-                                    behavior: {
-                                        type: 'action',
-                                        action: {
-                                            url: '/continue',
-                                        },
-                                    },
-                                },
-                            ],
-                            schemas: [],
-                        }, onCompletion: action('onCompletion'), onEvent: action('onEvent'), onError: (error) => {
-                            action('onError');
-                            console.error(error);
-                        }, onLog: action('onLog') }) })] }) }));
-}
-SplashInteractive.parameters = {
-    chromatic: { disableSnapshot: true },
-};
-const render = (control) => {
-    return (_jsx("div", { style: {
-            width: '60%',
-            margin: 'auto',
-        }, children: _jsx(DynamicFlowWise, { flowId: "splash", httpClient: fetch, initialStep: step(control), onCompletion: action('onCompletion'), onEvent: action('onEvent'), onError: (error) => {
-                action('onError');
-                console.error(error);
-            }, onLog: action('onLog') }) }));
-};
-const step = (control) => ({
-    id: 'splash',
-    title: 'Step title',
-    description: 'Step description',
-    layout: [
-        {
-            type: 'image',
-            content: {
-                accessibilityDescription: 'plane',
-                uri: 'urn:wise:illustrations:plane',
-            },
-        },
-        {
-            type: 'heading',
-            control: 'display',
-            text: 'Almost there',
-            align: 'center',
-            margin: 'lg',
-        },
-        {
-            type: 'markdown',
-            content: "Your money should arrive **by Wednesday**. We'll keep you posted.",
-            align: 'center',
-            margin: 'lg',
-        },
-        {
-            type: 'button',
-            title: 'Track your transfer',
-            behavior: {
-                type: 'action',
-                action: {
-                    url: '/submit',
-                },
-            },
-        },
-    ],
-    schemas: [],
-    control,
-});

package/build/stories/spec/step/DFModal.story.js

@@ -1,58 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Layout } from '@transferwise/navigation-ui';
-import { action } from 'storybook/actions';
-import { DynamicFlowWiseModal } from '../../../test-utils/DynamicFlowWiseModal';
-export default {
-    component: DynamicFlowWiseModal,
-    title: 'Spec/Step/DFModal',
-    parameters: {
-        layout: 'fullscreen',
-    },
-};
-const httpClient = async (input, init) => {
-    action('httpClient')(input, init);
-    const url = typeof input === 'string' ? input : '';
-    const match = /\/submit\/(\d+)/.exec(url);
-    if (!match) {
-        return new Response('Not Found', { status: 404 });
-    }
-    const index = match[1];
-    action('httpClient response index')(index);
-    return new Response(JSON.stringify(getStep(index)));
-};
-export function DFModalExample() {
-    return (_jsx(Layout, { children: _jsx(DynamicFlowWiseModal, { flowId: "df-modal-story", initialStep: getStep('1'), features: {
-                nativeBack: true,
-                hideStepTitle: false,
-            }, httpClient: httpClient, onCompletion: action('onCompletion'), onAnalytics: action('onAnalytics'), onCancellation: action('onCancellation'), onEvent: action('onEvent'), onError: (error) => {
-                action('onError');
-                console.error(error);
-            }, onLog: action('onLog') }) }));
-}
-const getStep = (index) => {
-    return {
-        id: 'step',
-        title: `Step title ${index}`,
-        description: 'This is a description of the step.',
-        schemas: [],
-        layout: [
-            {
-                type: 'markdown',
-                content: 'The title is now missing from the layout, and only visible in the modal header. This is because we are using the hideStepTitle to hide it.',
-                align: 'left',
-                margin: 'xl',
-            },
-            {
-                type: 'button',
-                title: 'Continue',
-                behavior: {
-                    type: 'action',
-                    action: {
-                        url: `/submit/${Number(index) + 1}`,
-                    },
-                },
-            },
-        ],
-        tags: ['root-screen'],
-    };
-};