@wise/dynamic-flow-client 5.25.1 → 5.25.2

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

@@ -0,0 +1,254 @@
+import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
+import { renderWithStep } from '../../utils/render-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Behavior',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export function Download() {
+    return renderWithStep(step, httpClient);
+}
+const httpClient = async (input, init) => {
+    await new Promise((resolve) => {
+        setTimeout(resolve, 1000);
+    });
+    switch (input) {
+        case '/download/pdf': {
+            return new Response(new Uint8Array(getMinimalPDFByteArray()), {
+                headers: {
+                    'Content-Disposition': 'attachment; filename="surprise.pdf"',
+                    'Content-Type': 'application/pdf',
+                },
+            });
+        }
+        case '/download/text': {
+            return new Response('Hello world', {
+                headers: {
+                    'Content-Disposition': 'attachment; filename="hello.txt"',
+                    'Content-Type': 'text/plain',
+                },
+            });
+        }
+        case '/download/text/no-filename': {
+            return new Response('Hello world', {
+                headers: {
+                    'Content-Disposition': 'attachment',
+                    'Content-Type': 'text/plain',
+                },
+            });
+        }
+        case '/submit': {
+            return new Response(JSON.stringify(successStep));
+        }
+        default:
+            return new Response('Not found', { status: 404 });
+    }
+};
+const step = {
+    id: 'download',
+    title: 'Download Behavior',
+    schemas: [],
+    layout: [
+        {
+            type: 'decision',
+            control: 'with-avatar',
+            options: [
+                {
+                    title: 'Click to download a PDF binary file',
+                    behavior: {
+                        type: 'download',
+                        request: {
+                            url: '/download/pdf',
+                            method: 'POST',
+                        },
+                    },
+                },
+                {
+                    title: 'Click to download a TXT file',
+                    behavior: {
+                        type: 'download',
+                        request: {
+                            url: '/download/text',
+                            method: 'POST',
+                        },
+                    },
+                },
+                {
+                    title: 'Click to download a TXT file without filename in header',
+                    behavior: {
+                        type: 'download',
+                        request: {
+                            url: '/download/text/no-filename',
+                            method: 'POST',
+                        },
+                    },
+                },
+                {
+                    title: 'Click to download a 404 Error',
+                    behavior: {
+                        type: 'download',
+                        request: {
+                            url: '/download/404',
+                            method: 'POST',
+                        },
+                    },
+                },
+            ],
+        },
+        {
+            type: 'button',
+            title: 'Submit',
+            control: 'primary',
+            behavior: {
+                type: 'action',
+                action: { url: '/submit' },
+            },
+        },
+    ],
+};
+const successStep = {
+    id: 'success',
+    title: 'Success',
+    schemas: [],
+    layout: [],
+};
+function getMinimalPDFByteArray() {
+    return [
+        0x25,
+        0x50,
+        0x44,
+        0x46,
+        0x2d,
+        0x31,
+        0x2e,
+        0x34,
+        0x0a, // %PDF-1.4\n
+        0x25,
+        0xe2,
+        0xe3,
+        0xcf,
+        0xd3,
+        0x0a, // %âãÏÓ\n
+        0x31,
+        0x20,
+        0x30,
+        0x20,
+        0x6f,
+        0x62,
+        0x6a,
+        0x0a, // 1 0 obj\n
+        0x3c,
+        0x3c,
+        0x2f,
+        0x54,
+        0x79,
+        0x70,
+        0x65,
+        0x2f,
+        0x43,
+        0x61,
+        0x74,
+        0x61,
+        0x6c,
+        0x6f,
+        0x67,
+        0x3e,
+        0x3e,
+        0x0a, // <</Type/Catalog>>\n
+        0x65,
+        0x6e,
+        0x64,
+        0x6f,
+        0x62,
+        0x6a,
+        0x0a, // endobj\n
+        0x78,
+        0x72,
+        0x65,
+        0x66,
+        0x0a, // xref\n
+        0x30,
+        0x20,
+        0x32,
+        0x0a, // 0 2\n
+        0x30,
+        0x30,
+        0x30,
+        0x30,
+        0x30,
+        0x30,
+        0x30,
+        0x30,
+        0x20,
+        0x36,
+        0x35,
+        0x35,
+        0x33,
+        0x35,
+        0x20,
+        0x66,
+        0x0a, // 00000000 65535 f\n
+        0x30,
+        0x30,
+        0x30,
+        0x30,
+        0x30,
+        0x30,
+        0x30,
+        0x31,
+        0x20,
+        0x30,
+        0x30,
+        0x30,
+        0x30,
+        0x30,
+        0x20,
+        0x6e,
+        0x0a, // 00000001 00000 n\n
+        0x74,
+        0x72,
+        0x61,
+        0x69,
+        0x6c,
+        0x65,
+        0x72,
+        0x0a, // trailer\n
+        0x3c,
+        0x3c,
+        0x2f,
+        0x52,
+        0x6f,
+        0x6f,
+        0x74,
+        0x20,
+        0x31,
+        0x20,
+        0x30,
+        0x20,
+        0x52,
+        0x3e,
+        0x3e,
+        0x0a, // <</Root 1 0 R>>\n
+        0x73,
+        0x74,
+        0x61,
+        0x72,
+        0x74,
+        0x78,
+        0x72,
+        0x65,
+        0x66,
+        0x0a, // startxref\n
+        0x35,
+        0x36,
+        0x0a, // 56\n
+        0x25,
+        0x25,
+        0x45,
+        0x4f,
+        0x46,
+        0x0a, // %%EOF\n
+    ];
+}

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

@@ -0,0 +1,272 @@
+import { respondWith, respondWithDelay } from '../../../test-utils';
+import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
+import { renderWithStepAndOverrides } from '../../utils/render-utils';
+const meta = {
+    component: DynamicFlowWise,
+    title: 'Spec/Behavior/Subflow',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+    args: {
+        onCompletion: 'action',
+        onError: 'action',
+        presentation: 'modal',
+    },
+    argTypes: {
+        presentation: {
+            options: ['modal', 'push'],
+            control: { type: 'radio' },
+        },
+        onCompletion: {
+            options: ['action', 'refresh', 'none'],
+            control: { type: 'radio' },
+        },
+        onError: {
+            options: ['action', 'refresh', 'none'],
+            control: { type: 'radio' },
+        },
+    },
+};
+export default meta;
+export function DynamicSubflow({ presentation, onCompletion, onError, }) {
+    const subflow = {
+        type: 'subflow',
+        referrerId: 'storybook-flow',
+        launchConfig: {
+            type: 'dynamic',
+            request: {
+                url: '/subflow-start',
+                prefetch: true,
+                method: 'POST',
+            },
+            presentation: { type: presentation },
+        },
+        resultKey: undefined,
+        onCompletion: onCompletions[onCompletion],
+        onError: onErrors[onError],
+    };
+    return renderWithStepAndOverrides(parentStep(subflow), {
+        httpClient: mockHttpClient(subflow),
+        features: { nativeBack: true, initialLoader: true },
+    });
+}
+const onCompletions = {
+    action: {
+        type: 'action',
+        action: {
+            url: '/some-action',
+            method: 'POST',
+            data: {
+                onCompletion: {
+                    key: 'value',
+                },
+            },
+        },
+    },
+    refresh: { type: 'refresh' },
+};
+const onErrors = {
+    action: {
+        type: 'action',
+        action: {
+            url: '/error-action',
+            method: 'POST',
+            data: {
+                onError: {
+                    key: 'value',
+                },
+            },
+        },
+    },
+    refresh: { type: 'refresh' },
+};
+let count = 0;
+const mockHttpClient = (behavior) => async (input, init) => {
+    const step = subflowStep();
+    switch (input) {
+        case '/subflow-response':
+            return respondWith(behavior, { headers: [['X-DF-Response-Type', 'subflow']] });
+        case '/subflow-start':
+            count += 1;
+            return respondWithDelay(Object.assign(Object.assign({}, step), { layout: [...step.layout, { type: 'paragraph', text: `this is some content ${count}` }], title: `This is in a subflow: ${count}` }), 5000);
+        case '/subflow-start-bad':
+            count += 1;
+            return respondWithDelay({
+                key: 'value',
+            }, 2000, { status: 400 });
+        case '/next-step':
+            return respondWith(nextStep());
+        case '/refresh':
+            return respondWith(Object.assign(Object.assign({}, parentStep(behavior)), { title: 'This has been refreshed!' }));
+        case '/bad-refresh':
+            return respondWith({}, { status: 400 });
+        case '/some-action':
+        default:
+            return respondWithDelay(subflowCompleted(init === null || init === void 0 ? void 0 : init.body), 1000);
+    }
+};
+const parentStep = (subflow) => {
+    if (subflow.launchConfig.type !== 'dynamic') {
+        throw new Error('For this story, the subflow launch config must be dynamic');
+    }
+    return {
+        id: 'parent',
+        title: 'Subflow Behavior (dynamic subflow launch config)',
+        schemas: [],
+        layout: [
+            {
+                type: 'button',
+                title: 'Click to open subflow from behavior',
+                control: 'primary',
+                behavior: subflow,
+            },
+            {
+                type: 'button',
+                title: 'Click to open subflow from a response',
+                control: 'primary',
+                behavior: {
+                    type: 'action',
+                    action: {
+                        url: '/subflow-response',
+                        method: 'POST',
+                    },
+                },
+            },
+            {
+                type: 'button',
+                title: 'Click to open "subflow" but the response is invalid',
+                control: 'primary',
+                behavior: Object.assign(Object.assign({}, subflow), { launchConfig: Object.assign(Object.assign({}, subflow.launchConfig), { request: Object.assign(Object.assign({}, subflow.launchConfig.request), { url: '/subflow-start-bad' }) }) }),
+            },
+        ],
+        refreshUrl: '/refresh',
+    };
+};
+const subflowStep = () => ({
+    id: 'subflow-step',
+    title: 'This is in a subflow',
+    // refreshAfter: new Date(Date.now() + 2000).toISOString(),
+    layout: [
+        {
+            type: 'button',
+            title: 'Another modal subflow',
+            behavior: {
+                type: 'subflow',
+                referrerId: 'nested-subflow',
+                launchConfig: {
+                    type: 'dynamic',
+                    request: {
+                        url: '/subflow-start',
+                        method: 'POST',
+                        prefetch: true,
+                    },
+                    presentation: { type: 'modal' },
+                },
+            },
+        },
+        {
+            type: 'button',
+            title: 'Another push subflow',
+            behavior: {
+                type: 'subflow',
+                referrerId: 'nested-subflow',
+                launchConfig: {
+                    type: 'dynamic',
+                    request: {
+                        url: '/subflow-start',
+                        method: 'POST',
+                    },
+                    presentation: { type: 'push' },
+                },
+            },
+        },
+        {
+            type: 'button',
+            title: 'A new step',
+            behavior: {
+                type: 'action',
+                action: {
+                    url: '/next-step',
+                },
+            },
+        },
+        {
+            type: 'button',
+            title: 'Exit with success',
+            behavior: {
+                type: 'action',
+                action: {
+                    exit: true,
+                    result: {
+                        subflowData: '123',
+                    },
+                },
+            },
+        },
+        {
+            type: 'button',
+            title: 'Trigger an error',
+            behavior: {
+                type: 'refresh',
+            },
+        },
+    ],
+    schemas: [],
+    refreshUrl: '/bad-refresh',
+});
+const nextStep = () => ({
+    id: 'subflow-step',
+    title: 'This is in a subflow, but its another step',
+    // refreshAfter: new Date(Date.now() + 2000).toISOString(),
+    layout: [
+        {
+            type: 'button',
+            title: 'Another one',
+            behavior: {
+                type: 'subflow',
+                referrerId: 'nested-subflow',
+                launchConfig: {
+                    type: 'dynamic',
+                    request: {
+                        url: '/subflow-start',
+                        method: 'POST',
+                    },
+                    presentation: { type: 'modal' },
+                },
+            },
+        },
+        {
+            type: 'button',
+            title: 'Exit with success',
+            behavior: {
+                type: 'action',
+                action: {
+                    exit: true,
+                    result: {
+                        subflowData: '123',
+                    },
+                },
+            },
+        },
+        {
+            type: 'button',
+            title: 'Trigger an error',
+            behavior: {
+                type: 'refresh',
+            },
+        },
+    ],
+    schemas: [],
+    refreshUrl: '/bad-refresh',
+});
+const subflowCompleted = (data) => ({
+    id: 'completed',
+    title: 'Subflow complete',
+    layout: [
+        {
+            type: 'paragraph',
+            text: JSON.stringify(JSON.parse(data)),
+        },
+    ],
+    schemas: [],
+});

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

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

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

@@ -0,0 +1,79 @@
+import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
+import { renderWithStep } from '../../utils/render-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Behavior',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+const httpClient = async () => new Promise((resolve) => {
+    setTimeout(resolve, 1000);
+});
+export function Modal() {
+    return renderWithStep(initialStep, httpClient);
+}
+const initialStep = {
+    id: 'modal',
+    title: 'Modal Behavior',
+    schemas: [
+        {
+            $id: '#main-schema',
+            type: 'object',
+            required: ['country'],
+            displayOrder: ['country'],
+            properties: {
+                country: {
+                    title: 'Some very important question',
+                    type: 'string',
+                },
+            },
+        },
+        {
+            $id: '#modal-schema',
+            type: 'object',
+            displayOrder: ['name'],
+            properties: {
+                name: {
+                    title: 'Name',
+                    type: 'string',
+                },
+            },
+        },
+    ],
+    layout: [
+        {
+            type: 'button',
+            title: 'Open behavior modal',
+            behavior: {
+                type: 'modal',
+                content: [
+                    {
+                        type: 'form',
+                        schemaId: '#main-schema',
+                    },
+                    {
+                        type: 'paragraph',
+                        text: 'Welcome to our application. If you continue to browse and use this application, you are agreeing to comply with and be bound by the following terms and conditions of use, which together with our privacy policy govern our relationship with you in relation to this application.',
+                    },
+                    {
+                        type: 'button',
+                        title: 'Submit in Modal',
+                        action: {
+                            url: '/submit',
+                            method: 'POST',
+                        },
+                    },
+                ],
+            },
+        },
+        {
+            type: 'button',
+            title: 'Submit out of Modal',
+            action: {
+                url: '/submit',
+                method: 'POST',
+            },
+        },
+    ],
+};