@wise/dynamic-flow-client 5.27.0 → 5.28.0

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

@@ -0,0 +1,230 @@
+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 () => respondWithDelay({ validation: { param: 'Invalid field' } }, 2000, { 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 PersistAsyncValidationFailureWithObjectSchemaWrapper() {
+    return renderWithStep(getBasicStepWithObjectWrapper('/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',
+                    inlineAlert: {
+                        content: 'Guess what!!?',
+                    },
+                },
+            },
+        },
+    ],
+    layout: [
+        { type: 'form', schemaId: '#schema' },
+        {
+            type: 'button',
+            title: 'Submit',
+            action: { url: '/submit', method: 'POST' },
+        },
+    ],
+    model: 'the-token',
+});
+const getBasicStepWithObjectWrapper = (url) => ({
+    id: 'step-id',
+    title: 'Persist async on text input',
+    schemas: [
+        {
+            $id: '#schema',
+            type: 'object',
+            displayOrder: ['field'],
+            properties: {
+                field: {
+                    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',
+                            inlineAlert: {
+                                content: "We'll store this securely, we promise!",
+                            },
+                        },
+                    },
+                },
+            },
+        },
+    ],
+    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'],
+            required: ['okFile'],
+            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',
+                            inlineAlert: {
+                                content: 'Guess what!!?',
+                            },
+                        },
+                    },
+                    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,137 @@
+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 wait = async (ms) => new Promise((resolve) => {
+    setTimeout(resolve, ms);
+});
+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 () => {
+        switch (validateAsync) {
+            case 'failGenerically':
+                await wait(200);
+                return Promise.reject(new Error('Failed to validate'));
+            case 'failValidation':
+                await wait(3000);
+                return Promise.resolve(new Response(JSON.stringify({ message: 'This field is invalid' }), {
+                    status: 422,
+                }));
+            case 'succeedWithMessage':
+                await wait(1000);
+                return respondWith({ message: 'This field is super valid' });
+            case 'succeed':
+            default:
+                await wait(500);
+                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', 'date'],
+    properties: {
+        name: {
+            type: 'string',
+            title: 'Full Name',
+            description: 'Please enter your full name',
+            inlineAlert: {
+                content: `This is an inline alert with a neutral context.`,
+                context: 'neutral',
+            },
+            validationAsync: validationAsyncConfig,
+        },
+        boolean: {
+            type: 'boolean',
+            title: 'I accept the terms and conditions',
+            inlineAlert: {
+                content: `This is an inline alert with an info context.`,
+                context: 'info',
+            },
+            validationAsync: validationAsyncConfig,
+        },
+        rate: {
+            title: 'Conversion rate',
+            type: 'number',
+            inlineAlert: {
+                content: `This is an inline alert with a positive context.`,
+                context: 'positive',
+            },
+            validationAsync: validationAsyncConfig,
+        },
+        age: {
+            title: 'Age',
+            type: 'integer',
+            inlineAlert: {
+                content: `This is an inline alert with a negative context.`,
+                context: 'negative',
+            },
+            validationAsync: validationAsyncConfig,
+        },
+        date: {
+            type: 'string',
+            format: 'date',
+            title: 'Date of Birth',
+            inlineAlert: {
+                content: `This is an inline with a warning context.`,
+                context: 'warning',
+            },
+            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() });
+}