@wise/dynamic-flow-client 5.25.2-experimental-a8a898e → 5.25.2

package/build/stories/spec/response/ActionResponse.story.js

@@ -0,0 +1,66 @@
+import { getMockHttpClient, respondWith } from '../../../test-utils';
+import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
+import { renderWithStep } from '../../utils/render-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Response',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+    argTypes: {},
+};
+export function ActionResponse() {
+    const httpClient = getMockHttpClient({
+        '/action/1234': async () => respondWith({ action: { url: '/success', data: { actionResponse: 'Action response action.data' } } }, { status: 200 }),
+        '/success': async () => respondWith(Object.assign(Object.assign({}, initialStep), { title: 'Success, try again!' })),
+    });
+    return renderWithStep(initialStep, httpClient);
+}
+const initialStep = {
+    id: 'action-response',
+    title: 'Action Response',
+    layout: [
+        {
+            type: 'box',
+            width: 'md',
+            border: true,
+            components: [
+                {
+                    type: 'form',
+                    schemaId: '#referenced-schema',
+                },
+                {
+                    type: 'button',
+                    title: 'Direct Success ("/success")',
+                    control: 'primary',
+                    action: { url: '/success', data: { direct: 'direct success button action data' } },
+                },
+                {
+                    type: 'button',
+                    title: 'Action Response ("/action/1234")',
+                    control: 'primary',
+                    action: { url: '/action/1234' },
+                },
+                { type: 'divider' },
+                {
+                    type: 'markdown',
+                    content: 'You can inspect the payload of every request using the Storybook "Actions" panel.\n\nWe expect the schema values to be part of the payload when triggering an action from a button.\n\nBut when the action is triggered as a result of an action response, only the `action.data` should be in the payload.',
+                },
+            ],
+        },
+    ],
+    schemas: [
+        {
+            $id: '#unreferenced-schema',
+            const: { unreferenced: 'schema-value' },
+        },
+        {
+            $id: '#referenced-schema',
+            type: 'object',
+            displayOrder: ['name'],
+            properties: {
+                name: { type: 'string', title: 'Name', default: 'John Doe' },
+            },
+        },
+    ],
+};

package/build/stories/spec/schemas/InlineAlert.story.js

@@ -0,0 +1,134 @@
+import { expect } from 'storybook/test';
+import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
+import { renderWithStep } from '../../utils/render-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Schemas/InlineAlert',
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    },
+};
+const inlineAlertMediaStep = {
+    id: 'inline-alert-media',
+    title: 'Inline alert media',
+    schemas: [
+        {
+            $id: '#currency',
+            type: 'string',
+            title: 'Choose a currency',
+            control: 'radio-item',
+            oneOf: [
+                {
+                    title: 'EUR',
+                    const: 'EUR',
+                    inlineAlert: {
+                        content: 'You are all set to travel!',
+                        context: 'positive',
+                        media: {
+                            type: 'avatar',
+                            content: [
+                                { type: 'uri', uri: 'urn:wise:icons:suitcase' },
+                                { type: 'uri', uri: 'urn:wise:icons:bank' },
+                            ],
+                            accessibilityDescription: 'Travel ready',
+                        },
+                    },
+                },
+                {
+                    title: 'GBP',
+                    const: 'GBP',
+                    inlineAlert: {
+                        content: 'Icon image media uses the provided icon.',
+                        context: 'neutral',
+                        media: {
+                            type: 'image',
+                            uri: 'urn:wise:icons:bank',
+                            accessibilityDescription: 'Bank details ready',
+                        },
+                    },
+                },
+                {
+                    title: 'USD',
+                    const: 'USD',
+                    inlineAlert: {
+                        content: 'An unsupported first avatar entry falls back to the default icon.',
+                        context: 'warning',
+                        media: {
+                            type: 'avatar',
+                            content: [
+                                { type: 'text', text: 'USD' },
+                                { type: 'uri', uri: 'urn:wise:icons:bank' },
+                            ],
+                            accessibilityDescription: 'Unsupported text avatar',
+                        },
+                    },
+                },
+                {
+                    title: 'AUD',
+                    const: 'AUD',
+                    inlineAlert: {
+                        content: 'Alerts without media keep their default icon.',
+                        context: 'negative',
+                    },
+                },
+                {
+                    title: 'JPY',
+                    const: 'JPY',
+                    inlineAlert: {
+                        content: 'Non-icon image media falls back to the default icon.',
+                        context: 'proposition',
+                        media: {
+                            type: 'image',
+                            uri: 'https://example.com/inline-alert.png',
+                            accessibilityDescription: 'Unsupported illustration',
+                        },
+                    },
+                },
+            ],
+        },
+    ],
+    layout: [{ type: 'form', schemaId: '#currency' }],
+};
+const checkboxMediaStep = {
+    id: 'checkbox-inline-alert-media',
+    title: 'Checkbox inline alert media',
+    schemas: [
+        {
+            $id: '#confirmation',
+            type: 'boolean',
+            control: 'checkbox-item',
+            title: 'Confirm payment details',
+            description: 'This inline alert is rendered through a checkbox ListItem.',
+            inlineAlert: {
+                content: 'Your payment details are ready to confirm.',
+                context: 'positive',
+                media: {
+                    type: 'image',
+                    uri: 'urn:wise:icons:bank',
+                    accessibilityDescription: 'Bank icon',
+                },
+            },
+        },
+    ],
+    layout: [{ type: 'form', schemaId: '#confirmation' }],
+};
+export const MediaAndFallbacks = {
+    render: () => renderWithStep(inlineAlertMediaStep),
+    play: async ({ canvas }) => {
+        await expect(canvas.getByTestId('suitcase-icon')).toBeInTheDocument();
+        await expect(canvas.getByLabelText('Travel ready')).toBeInTheDocument();
+        await expect(canvas.getByTestId('bank-icon')).toBeInTheDocument();
+        await expect(canvas.getByLabelText('Bank details ready')).toBeInTheDocument();
+        await expect(canvas.queryByLabelText('Unsupported illustration')).not.toBeInTheDocument();
+        await expect(canvas.queryByLabelText('Unsupported text avatar')).not.toBeInTheDocument();
+        await expect(canvas.getAllByTestId('status-icon')).toHaveLength(2);
+    },
+};
+export const CheckboxWithCustomMedia = {
+    render: () => renderWithStep(checkboxMediaStep),
+    play: async ({ canvas }) => {
+        await expect(canvas.getByText('Your payment details are ready to confirm.')).toBeInTheDocument();
+        await expect(canvas.getByTestId('bank-icon')).toBeInTheDocument();
+        await expect(canvas.queryByTestId('status-icon')).not.toBeInTheDocument();
+    },
+};

package/build/stories/spec/schemas/MultiSelect.story.js

@@ -0,0 +1,206 @@
+import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
+import { renderWithStep } from '../../utils/render-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Schemas/MultiSelect',
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    },
+};
+export function MultiSelect() {
+    return renderWithStep(getStep(undefined));
+}
+export function InlineMultiSelect() {
+    return renderWithStep(getStep('inline'));
+}
+export function InlineCheckboxMultiSelect() {
+    return renderWithStep(getStep('inline-checkbox-group'));
+}
+export function InlineCheckboxMultiSelect2() {
+    return renderWithStep({
+        id: 'multi-select',
+        title: 'Select the statements that apply',
+        layout: [
+            {
+                type: 'form',
+                schemaId: '#schema',
+                margin: 'sm',
+            },
+            { type: 'button', action: { url: '/cancel' }, title: 'Cancel transfer', control: 'primary' },
+            {
+                type: 'button',
+                action: { url: '/continue' },
+                title: 'Continue',
+                control: 'secondary-neutral',
+            },
+        ],
+        schemas: [
+            {
+                $id: '#schema',
+                type: 'array',
+                control: 'inline-checkbox-group',
+                validationMessages: {
+                    required: 'Please select at least one option. (required)',
+                },
+                addItemTitle: '',
+                editItemTitle: '',
+                items: {
+                    title: 'Select the statements that apply', // not visible
+                    oneOf: [
+                        {
+                            title: "I haven't seen the property in person",
+                            const: 'not-seen',
+                        },
+                        {
+                            title: 'I have to pay quickly to take the property off the market',
+                            const: 'pay-quickly',
+                        },
+                        {
+                            title: 'The property is a good deal compared with others in the area',
+                            const: 'good-deal',
+                        },
+                        {
+                            title: 'None of the above',
+                            const: 'none',
+                        },
+                    ],
+                },
+            },
+        ],
+        model: {},
+    });
+}
+const getStep = (arraySchemaControl) => ({
+    id: 'multi-select',
+    title: 'A multiselect example',
+    layout: [
+        {
+            type: 'form',
+            schemaId: '#schema',
+        },
+        { type: 'button', action: { url: '/submit' }, title: 'Submit' },
+    ],
+    schemas: [
+        {
+            $id: '#schema',
+            type: 'object',
+            displayOrder: ['arrayField'],
+            required: ['arrayField'],
+            properties: {
+                arrayField: {
+                    validationMessages: {
+                        required: 'Please select at least two options. (required)',
+                    },
+                    type: 'array',
+                    control: arraySchemaControl,
+                    title: 'Select between two and four options',
+                    minItems: 2,
+                    maxItems: 4,
+                    description: 'This is an example of an array schema with const options.',
+                    addItemTitle: '',
+                    editItemTitle: '',
+                    tags: ['filtered'],
+                    validationAsync: {
+                        url: '/validate',
+                        method: 'POST',
+                        param: 'value',
+                    },
+                    items: {
+                        title: 'Select with few options',
+                        description: 'A description of the select.',
+                        oneOf: [
+                            {
+                                title: 'EUR',
+                                description: 'Euro',
+                                icon: { name: 'flag-eur' },
+                                const: 'EUR',
+                                inlineAlert: {
+                                    context: 'info',
+                                    content: 'This is an inline alert',
+                                },
+                                supportingValues: {
+                                    value: '0.05%',
+                                    subvalue: 'Fee',
+                                },
+                            },
+                            {
+                                title: 'GBP',
+                                description: 'British pound',
+                                icon: { name: 'flag-gbp' },
+                                const: 'GBP',
+                                disabled: true,
+                                supportingValues: {
+                                    value: '0.00%',
+                                    subvalue: 'Fee',
+                                },
+                            },
+                            {
+                                title: 'USD',
+                                description: 'US dollar',
+                                icon: { name: 'flag-usd' },
+                                const: 'USD',
+                                supportingValues: {
+                                    value: '0.08%',
+                                    subvalue: 'Fee',
+                                },
+                                inlineAlert: {
+                                    context: 'warning',
+                                    content: 'This is a warning inline alert',
+                                },
+                            },
+                            {
+                                title: 'AUD',
+                                description: 'Australian dollar',
+                                icon: { name: 'flag-aud' },
+                                const: 'AUD',
+                                additionalText: 'Additional text can be long in Australia.',
+                                supportingValues: {
+                                    value: '0.08%',
+                                    subvalue: 'Fee',
+                                },
+                            },
+                            {
+                                title: 'NZD',
+                                description: 'New Zealand dollar',
+                                icon: { name: 'flag-nzd' },
+                                const: 'NZD',
+                                supportingValues: {
+                                    value: '0.08%',
+                                    subvalue: 'Fee',
+                                },
+                            },
+                            {
+                                title: 'CNY',
+                                description: 'Chinese yuan',
+                                icon: { name: 'flag-cny' },
+                                const: 'CNY',
+                                supportingValues: {
+                                    value: '0.08%',
+                                    subvalue: 'Fee',
+                                },
+                            },
+                            {
+                                title: 'JPY',
+                                description: 'Japanese yen',
+                                icon: { name: 'flag-jpy' },
+                                const: 'JPY',
+                            },
+                            {
+                                title: 'HUF',
+                                description: 'Hungarian Forint',
+                                icon: { name: 'flag-huf' },
+                                const: 'HUF',
+                                supportingValues: {
+                                    value: '0.08%',
+                                    subvalue: 'Fee',
+                                },
+                            },
+                        ],
+                    },
+                },
+            },
+        },
+    ],
+    model: { arrayField: ['USD'] },
+    errors: { validation: { arrayField: 'This is an error message from the step' } },
+});

package/build/stories/spec/schemas/Upload.story.js

@@ -0,0 +1,168 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { action } from 'storybook/actions';
+import { getMockHttpClient, respondWith } from '../../../test-utils';
+import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
+const wait = async (ms) => new Promise((resolve) => {
+    setTimeout(resolve, ms);
+});
+const persistAsyncConfig = {
+    method: 'POST',
+    url: '/persist-async',
+    param: 'param',
+    idProperty: 'token',
+};
+const uploadConfig = {
+    title: 'Upload label (from innner schema title)',
+    accepts: ['image/png', 'image/jpeg', 'application/pdf'],
+    validationMessages: {
+        maxSize: 'Your file is too large',
+        required: 'Please enter a valid file (uploadConfig).',
+    },
+};
+const multiFileConfig = {
+    title: 'Upload label (from innner schema title)',
+    maxItems: 5,
+    addItemTitle: 'Add',
+    editItemTitle: 'Edit',
+    summary: {
+        defaultTitle: 'File',
+        defaultDescription: 'Click to edit or remove',
+        defaultIcon: { name: 'document', type: 'icon' },
+    },
+};
+const logPersistAsync = (input, init) => {
+    if (init && init.body instanceof FormData) {
+        console.log(input, init.body.get(persistAsyncConfig.param));
+    }
+    else {
+        console.log(input, init && JSON.parse(init.body));
+    }
+};
+const getHttpClient = (persistAsync = 'succeed') => getMockHttpClient({
+    '/submit': async (input, init) => {
+        console.log(input, init && JSON.parse(init.body));
+        return respondWith({
+            id: 'success',
+            title: 'Submission successful',
+            description: 'Your file has been uploaded successfully.',
+            schemas: [],
+            layout: [
+                { type: 'paragraph', text: 'Refresh the page to start again.', align: 'center' },
+            ],
+        }, { status: 200 });
+    },
+    '/persist-async': async (input, init) => {
+        logPersistAsync(input, init);
+        switch (persistAsync) {
+            case 'rejectPromise':
+                return Promise.reject(new Error('Failed to persist async'));
+            case 'failGenerically':
+                await wait(1000);
+                return Promise.resolve(new Response(null, { status: 404 }));
+            case 'failValidation':
+                await wait(1000);
+                return Promise.resolve(new Response(JSON.stringify({ validation: { param: 'Error message from the server.' } }), { status: 422 }));
+            case 'succeed':
+            default:
+                await wait(1000);
+                return respondWith({ token: '123' });
+        }
+    },
+});
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Schemas/Upload',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+    argTypes: {
+        persistAsync: {
+            options: ['succeed', 'rejectPromise', 'failGenerically', 'failValidation'],
+            type: 'select',
+            defaultValue: 'succeed',
+        },
+    },
+};
+export function Base64Upload() {
+    return renderWithStep(getBase64UploadStep());
+}
+export function Base64UploadLarge() {
+    return renderWithStep(getBase64UploadStepLarge());
+}
+export function Base64UploadWithPersistAsync({ persistAsync }) {
+    return renderWithStep(getBase64UploadWithPersistAsync(), persistAsync);
+}
+export function BlobUploadWithPersistAsync({ persistAsync }) {
+    return renderWithStep(getBlobUploadWithPersistAsync(), persistAsync);
+}
+export function BlobUploadWithPersistAsyncLarge({ persistAsync }) {
+    return renderWithStep(getBlobUploadWithPersistAsyncLarge(), persistAsync);
+}
+export function MultiBase64Upload() {
+    return renderWithStep(getMultiBase64Upload());
+}
+export function MultiBase64UploadWithPersistAsync({ persistAsync }) {
+    return renderWithStep(getMultiBase64UploadWithPersistAsync(), persistAsync);
+}
+export function MultiBlobUploadWithPersistAsync({ persistAsync }) {
+    return renderWithStep(getMultiBlobUploadWithPersistAsync(), persistAsync);
+}
+const renderWithStep = (step, persistAsync = 'succeed') => (_jsx(DynamicFlowWise, { flowId: "new-df-flow-id", httpClient: getHttpClient(persistAsync), initialStep: step, features: { nativeBack: true }, onCompletion: action('onCompletion'), onEvent: action('onEvent'), onLog: action('onLog'), onError: (error) => {
+        action('onError');
+        console.error(error);
+    } }));
+const getBase64UploadStep = () => getStep('Base64 Upload', Object.assign({ $id: '#schema', type: 'string', format: 'base64url' }, uploadConfig));
+const getBase64UploadStepLarge = () => getStep('Base64 Upload (Large)', Object.assign({ $id: '#schema', type: 'string', control: 'upload-large', format: 'base64url' }, uploadConfig));
+const getBase64UploadWithPersistAsync = () => getStep('Base64 Upload (Persist Async)', {
+    $id: '#schema',
+    type: 'string',
+    persistAsync: Object.assign(Object.assign({}, persistAsyncConfig), { schema: Object.assign({ type: 'string', format: 'base64url' }, uploadConfig) }),
+});
+const getBlobUploadWithPersistAsync = () => getStep('Blob Upload (Persist Async)', {
+    $id: '#schema',
+    type: 'string',
+    validationMessages: { required: 'Please enter a valid file.' },
+    persistAsync: Object.assign(Object.assign({}, persistAsyncConfig), { schema: Object.assign({ type: 'blob', source: 'file' }, uploadConfig) }),
+});
+const getBlobUploadWithPersistAsyncLarge = () => getStep('Blob Upload (Persist Async, Large)', {
+    $id: '#schema',
+    type: 'string',
+    validationMessages: { required: 'Please enter a valid file.' },
+    persistAsync: Object.assign(Object.assign({}, persistAsyncConfig), { schema: Object.assign({ type: 'blob', control: 'upload-large', source: 'file' }, uploadConfig) }),
+});
+const getMultiBase64Upload = () => getStep('Base64 Upload (Multiple)', Object.assign(Object.assign({ $id: '#schema', type: 'array' }, multiFileConfig), { items: Object.assign({ type: 'string', format: 'base64url' }, uploadConfig) }));
+const getMultiBase64UploadWithPersistAsync = () => getStep('Base64 Upload (Multiple, Persist Async)', Object.assign(Object.assign({ $id: '#schema', type: 'array' }, multiFileConfig), { items: {
+        $id: '#id',
+        type: 'string',
+        persistAsync: Object.assign(Object.assign({}, persistAsyncConfig), { schema: Object.assign({ type: 'string', format: 'base64url' }, uploadConfig) }),
+    } }));
+const getMultiBlobUploadWithPersistAsync = () => getStep('Blob Upload (Multiple, Persist Async)', Object.assign(Object.assign({ type: 'array', $id: '#schema' }, multiFileConfig), { items: {
+        $id: '#id',
+        type: 'string',
+        persistAsync: Object.assign(Object.assign({}, persistAsyncConfig), { schema: Object.assign({ type: 'blob', source: 'file' }, uploadConfig) }),
+    } }));
+const getStep = (title, schema) => {
+    const objectSchema = {
+        type: 'object',
+        $id: '#object-schema',
+        displayOrder: ['fileUpload', 'thing'],
+        required: ['fileUpload'],
+        properties: {
+            thing: { const: 'hidden-value' },
+            fileUpload: schema,
+        },
+    };
+    return {
+        id: 'step-id',
+        title,
+        schemas: [objectSchema],
+        layout: [
+            { type: 'form', schemaId: '#object-schema' },
+            {
+                type: 'button',
+                title: 'Submit',
+                action: { url: '/submit', method: 'POST' },
+            },
+        ],
+    };
+};