@wise/dynamic-flow-client 5.8.1 → 5.9.0

package/build/stories/spec/schemas/features/PersistAsync.story.js

@@ -0,0 +1,176 @@
+import { getMockHttpClient, respondWith } from '../../../../test-utils';
+import { respondWithDelay } from '../../../../test-utils/fetch-utils';
+import DynamicFlowWise from '../../../../test-utils/DynamicFlowWise';
+import { renderWithStep } from '../../../utils/render-utils';
+const httpClient = getMockHttpClient({
+    '/submit': async () => respondWithDelay({
+        id: 'new-df-flow-id',
+        title: 'Success',
+        layout: [],
+        schemas: [],
+    }, 1000),
+    '/persist-async': async () => respondWith({ token: '123' }),
+    '/persist-async-delayed-2s': async () => respondWithDelay({ token: '123' }, 2000),
+    '/persist-async-delayed-5s': async () => respondWithDelay({ token: '345' }, 5000),
+    '/persist-async-generic-failure': async () => Promise.reject(new Error('Failed to persist')),
+    '/persist-async-validation-failure': async () => Promise.resolve(new Response(JSON.stringify({ validation: { param: 'Invalid field' } }), { status: 401 })),
+    '/persist-async-file-upload': async () => respondWithDelay({ token: '123' }, 1000),
+    '/persist-async-file-upload-fail': async () => respondWith({
+        validation: {
+            document: 'This is a custom, server-side, error message',
+        },
+    }, { status: 401 }),
+});
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Schemas/Features/Persist Async',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export function BasicPersistAsync() {
+    return renderWithStep(getBasicStep('/persist-async'), httpClient);
+}
+export function PersistAsyncWithDelay() {
+    return renderWithStep(getBasicStep('/persist-async-delayed-2s'), httpClient);
+}
+export function MultiplePersistAsyncWithDelay() {
+    return renderWithStep(getComplexStepWithDelay(), httpClient);
+}
+export function PersistAsyncGenericFailure() {
+    return renderWithStep(getBasicStep('/persist-async-generic-failure'), httpClient);
+}
+export function PersistAsyncValidationFailure() {
+    return renderWithStep(getBasicStep('/persist-async-validation-failure'), httpClient);
+}
+export function PersistAsyncFileUpload() {
+    return renderWithStep(getFileUploadStep(), httpClient);
+}
+export function PersistAsyncFileUploadWithAutoSubmit() {
+    return renderWithStep(getFileUploadStep(true), httpClient);
+}
+const getBasicStep = (url) => ({
+    id: 'step-id',
+    title: 'Persist async on text input',
+    schemas: [
+        {
+            $id: '#schema',
+            type: 'string',
+            persistAsync: {
+                method: 'POST',
+                url,
+                param: 'param',
+                idProperty: 'token',
+                schema: { title: 'Card number', type: 'number' },
+            },
+        },
+    ],
+    layout: [
+        { type: 'form', schemaId: '#schema' },
+        {
+            type: 'button',
+            title: 'Submit',
+            action: { url: '/submit', method: 'POST' },
+        },
+    ],
+    model: 'the-token',
+});
+const getComplexStepWithDelay = () => ({
+    id: 'step-id',
+    title: 'Persist async on text input',
+    schemas: [
+        {
+            $id: '#schema',
+            type: 'object',
+            displayOrder: ['name', 'number'],
+            properties: {
+                name: {
+                    type: 'string',
+                    persistAsync: {
+                        method: 'POST',
+                        url: '/persist-async-delayed-5s',
+                        param: 'param',
+                        idProperty: 'token',
+                        schema: { title: 'Name on card', type: 'string' },
+                    },
+                },
+                number: {
+                    type: 'string',
+                    persistAsync: {
+                        method: 'POST',
+                        url: '/persist-async-delayed-2s',
+                        param: 'param',
+                        idProperty: 'token',
+                        schema: { title: 'Card number', type: 'string' },
+                    },
+                },
+            },
+        },
+    ],
+    layout: [
+        { type: 'form', schemaId: '#schema' },
+        {
+            type: 'button',
+            title: 'Submit',
+            action: { url: '/submit', method: 'POST' },
+        },
+    ],
+});
+const getFileUploadStep = (submitOnChange = false) => ({
+    id: 'step-id',
+    title: 'Persist async on file upload',
+    schemas: [
+        {
+            $id: '#schema',
+            type: 'object',
+            displayOrder: ['okFile', 'failFile'],
+            properties: {
+                okFile: {
+                    type: 'string',
+                    persistAsync: {
+                        method: 'POST',
+                        url: '/persist-async-file-upload',
+                        param: 'document',
+                        idProperty: 'token',
+                        schema: {
+                            title: 'Upload any file',
+                            description: 'The request should succeed.',
+                            type: 'blob',
+                        },
+                    },
+                    onChange: submitOnChange
+                        ? {
+                            type: 'action',
+                            action: {
+                                url: '/submit',
+                            },
+                        }
+                        : undefined,
+                },
+                failFile: {
+                    type: 'string',
+                    persistAsync: {
+                        method: 'POST',
+                        url: '/persist-async-file-upload-fail',
+                        param: 'document',
+                        idProperty: 'token',
+                        schema: {
+                            title: 'Upload any file',
+                            description: 'The request should fail with a custom error mesage.',
+                            type: 'blob',
+                        },
+                    },
+                },
+            },
+        },
+    ],
+    layout: [
+        { type: 'form', schemaId: '#schema' },
+        {
+            type: 'button',
+            title: 'Submit',
+            control: 'primary',
+            action: { url: '/submit', method: 'POST' },
+        },
+    ],
+});

package/build/stories/spec/schemas/features/ValidationAsync.story.js

@@ -0,0 +1,103 @@
+import { getMockHttpClient, respondWith, respondWithEmptyOk } from '../../../../test-utils';
+import DynamicFlowWise from '../../../../test-utils/DynamicFlowWise';
+import { renderWithStep } from '../../../utils/render-utils';
+const validationAsyncConfig = {
+    method: 'POST',
+    url: '/validate',
+    param: 'param',
+};
+const getHttpClient = (validateAsync = 'failValidation') => getMockHttpClient({
+    '/submit': async (input, init) => {
+        console.log(input, init && JSON.parse(init.body));
+        return respondWith({
+            title: 'Success',
+            schemas: [],
+            layout: [{ type: 'heading', title: 'Success' }],
+        });
+    },
+    '/validate': async (input, init) => {
+        switch (validateAsync) {
+            case 'failGenerically':
+                return Promise.reject(new Error('Failed to validate'));
+            case 'failValidation':
+                return Promise.resolve(new Response(JSON.stringify({ message: 'This field is invalid' }), {
+                    status: 422,
+                }));
+            case 'succeedWithMessage':
+                return respondWith({ message: 'This field is super valid' });
+            case 'succeed':
+            default:
+                return respondWithEmptyOk();
+        }
+    },
+    '/persist-async': async (input, init) => {
+        return respondWith({ token: '123' });
+    },
+});
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Schemas/Features/Validation Async',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+    argTypes: {
+        validateAsync: {
+            options: ['succeed', 'succeedWithMessage', 'failGenerically', 'failValidation'],
+            type: 'select',
+            defaultValue: 'failValidation',
+        },
+    },
+};
+export const BasicTypes = {
+    args: { validateAsync: 'failValidation' },
+    render: ({ validateAsync }) => renderWithStep(getBasicTypesStep(), getHttpClient(validateAsync)),
+};
+const getBasicTypesStep = () => getStep('Basic inputs with validation async', {
+    $id: '#the-schema',
+    type: 'object',
+    displayOrder: ['name', 'boolean', 'rate', 'age'],
+    properties: {
+        name: {
+            type: 'string',
+            title: 'Name',
+            validationAsync: validationAsyncConfig,
+        },
+        boolean: {
+            type: 'boolean',
+            title: 'I accept the terms and conditions',
+            validationAsync: validationAsyncConfig,
+        },
+        rate: {
+            title: 'Conversion rate',
+            type: 'number',
+            validationAsync: validationAsyncConfig,
+        },
+        age: {
+            title: 'Age',
+            type: 'integer',
+            validationAsync: validationAsyncConfig,
+        },
+    },
+});
+const getStep = (title, schema) => ({
+    id: 'step-id',
+    title,
+    schemas: [
+        {
+            $id: '#schema',
+            type: 'object',
+            properties: {
+                schema,
+            },
+            displayOrder: ['schema'],
+        },
+    ],
+    layout: [
+        { type: 'form', schemaId: '#schema' },
+        {
+            type: 'button',
+            title: 'Submit',
+            action: { url: '/submit', method: 'POST' },
+        },
+    ],
+});

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

@@ -0,0 +1,92 @@
+import { 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';
+/**
+ * There is no default renderer for formatted-value on web,
+ * so we create a simple one here for testing purposes.
+ */
+const FormattedValueRenderer = {
+    canRenderType: 'formatted-value',
+    render: (props) => {
+        const onBlur = (event) => {
+            try {
+                const newValue = JSON.parse(event.target.value);
+                props.onChange(newValue);
+            }
+            catch (_a) {
+                // ignore JSON parse errors
+            }
+        };
+        return (_jsxs("div", { children: [_jsx("p", { children: "This is a testing-only renderer for formatted-value. It is not available in the released packages." }), _jsx("p", { children: "Note that the value is not passed from the step model to the renderer. Only from the renderer to the domain layer component. If you need an example, you can copy-paste the following JSON:" }), _jsx("pre", { children: `{ "some-key": "some-value" }` }), _jsx("textarea", { style: { width: '100%', height: '200px' }, onBlur: onBlur }), "If the text is not valid JSON, onChange will not be triggered."] }));
+    },
+};
+const renderers = [FormattedValueRenderer];
+const getStep = (title, description, onChange) => ({
+    id: 'step',
+    title,
+    description,
+    layout: [
+        {
+            type: 'form',
+            schemaId: '#schema',
+        },
+        {
+            type: 'button',
+            title: 'Submit',
+            control: 'primary',
+            action: {
+                url: '/submit',
+            },
+        },
+    ],
+    schemas: [
+        {
+            type: 'object',
+            $id: '#schema',
+            title: 'Formatted Value',
+            properties: {},
+            displayOrder: [],
+            format: 'banana',
+            onChange,
+        },
+    ],
+    model: {
+        'model-key': 'model-value',
+    },
+});
+const getHttpClient = () => getMockHttpClient({
+    '/submit': async (input, init) => {
+        const payload = JSON.parse(init === null || init === void 0 ? void 0 : init.body);
+        return respondWith({
+            id: 'next-step',
+            title: 'Submission successful',
+            layout: [
+                {
+                    type: 'markdown',
+                    content: `You have successfully submitted the form with a formatted value.\n\`\`\`\n${JSON.stringify(payload, null, 2)}\n\`\`\``,
+                },
+            ],
+            schemas: [],
+        });
+    },
+    '/refresh': async () => {
+        return respondWith(null, { status: 304 });
+    },
+});
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Schemas/Object/FormattedValue',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export function Basic() {
+    return renderWithStepAndOverrides(getStep('Formatted Value', 'Example of FormattedValue with a fake renderer.'), { renderers, httpClient: getHttpClient() });
+}
+export function WithOnChange() {
+    return renderWithStepAndOverrides(getStep('Formatted Value with onChange', 'Modify the JSON value and then click outside the textarea to trigger onChange. No need to click submit.', {
+        type: 'action',
+        action: { url: '/submit' },
+    }), { renderers, httpClient: getHttpClient() });
+}

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

@@ -0,0 +1,240 @@
+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

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