@wise/dynamic-flow-client 5.25.1 → 5.25.2

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

@@ -0,0 +1,249 @@
+import { getMockHttpClient, respondWith } from '../../../test-utils';
+import { getDummyNativeSubflowHandlers } from '../../../test-utils/dummy-native-subflows-handlers';
+import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
+import { renderWithStepAndOverrides } from '../../utils/render-utils';
+const nativeSubflowHandlers = getDummyNativeSubflowHandlers();
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Behavior/Subflow',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+const getNativesubflowBehaviorOrBody = (id) => ({
+    type: 'subflow',
+    referrerId: 'native-flow-referrer',
+    launchConfig: {
+        id,
+        payload: {},
+        type: 'native',
+    },
+    resultKey: 'subflowResult',
+    onCompletion: {
+        action: {
+            url: '/submit-subflow-result',
+            method: 'POST',
+        },
+        type: 'action',
+    },
+    onError: {
+        title: 'Subflow failed',
+        content: [
+            {
+                text: 'OH NO!',
+                type: 'paragraph',
+            },
+            {
+                title: 'Try Again (refresh behavior)',
+                behavior: {
+                    type: 'refresh',
+                },
+                type: 'button',
+            },
+        ],
+        type: 'modal',
+    },
+});
+const delay = async (ms) => new Promise((resolve) => {
+    setTimeout(resolve, ms);
+});
+const httpClient = getMockHttpClient({
+    '/initial': async () => {
+        await delay(500);
+        return respondWith(step);
+    },
+    '/get-form-step': async () => respondWith(formStep),
+    '/submit': async () => {
+        await delay(500);
+        return respondWith(Object.assign(Object.assign({}, step), { title: 'Success, try again!' }));
+    },
+    '/submit-subflow-result': async (input, init) => {
+        const initBodyString = typeof (init === null || init === void 0 ? void 0 : init.body) === 'string' ? init.body : '{}';
+        const { subflowResult } = JSON.parse(initBodyString);
+        await delay(500);
+        return respondWith({
+            id: 'subflow-result',
+            title: 'Native subflow Completed!',
+            schemas: [],
+            layout: [
+                {
+                    type: 'markdown',
+                    content: `  Subflow result:\n\n\`\`\`json\n${JSON.stringify(subflowResult, null, 2)}\n\`\`\``,
+                },
+            ],
+        });
+    },
+    '/get/subflow/response-dummy-push': async () => {
+        await delay(500);
+        return respondWith(getNativesubflowBehaviorOrBody('dummy-push'), {
+            headers: { 'X-DF-Response-Type': 'subflow' },
+        });
+    },
+    '/get/subflow/response-dummy-modal': async () => {
+        await delay(500);
+        return respondWith(getNativesubflowBehaviorOrBody('dummy-modal'), {
+            headers: { 'X-DF-Response-Type': 'subflow' },
+        });
+    },
+    '/get/subflow/response-geolocation': async () => {
+        await delay(500);
+        return respondWith(getNativesubflowBehaviorOrBody('geolocation'), {
+            headers: { 'X-DF-Response-Type': 'subflow' },
+        });
+    },
+    '/get/subflow/response-notification-permission': async () => {
+        await delay(500);
+        return respondWith(getNativesubflowBehaviorOrBody('notification-permission'), {
+            headers: { 'X-DF-Response-Type': 'subflow' },
+        });
+    },
+});
+export function NativeSubflowDummyPush() {
+    return renderWithStepAndOverrides(step, { httpClient, nativeSubflowHandlers });
+}
+const step = {
+    id: 'native-subflow-directory',
+    title: 'Subflow Behavior (native subflow launch config)',
+    description: 'Demonstrates native subflows that step out to platform-specific functionality',
+    refreshUrl: '/initial',
+    schemas: [],
+    layout: [
+        {
+            type: 'box',
+            control: 'bordered',
+            width: 'lg',
+            components: [
+                {
+                    type: 'columns',
+                    left: [
+                        {
+                            type: 'button',
+                            title: 'Dummy Push (from behavior)',
+                            control: 'primary',
+                            behavior: getNativesubflowBehaviorOrBody('dummy-push'),
+                        },
+                    ],
+                    right: [
+                        {
+                            type: 'button',
+                            title: 'Dummy Push (from response)',
+                            control: 'primary',
+                            behavior: {
+                                type: 'action',
+                                action: { url: '/get/subflow/response-dummy-push' },
+                            },
+                        },
+                    ],
+                },
+                {
+                    type: 'columns',
+                    left: [
+                        {
+                            type: 'button',
+                            title: 'Dummy Modal (from behavior)',
+                            control: 'primary',
+                            behavior: getNativesubflowBehaviorOrBody('dummy-modal'),
+                        },
+                    ],
+                    right: [
+                        {
+                            type: 'button',
+                            title: 'Dummy Modal (from response)',
+                            control: 'primary',
+                            behavior: {
+                                type: 'action',
+                                action: { url: '/get/subflow/response-dummy-modal' },
+                            },
+                        },
+                    ],
+                },
+                {
+                    type: 'columns',
+                    left: [
+                        {
+                            type: 'button',
+                            title: 'Geolocation (from behavior)',
+                            control: 'primary',
+                            behavior: getNativesubflowBehaviorOrBody('geolocation'),
+                        },
+                    ],
+                    right: [
+                        {
+                            type: 'button',
+                            title: 'Geolocation (from response)',
+                            control: 'primary',
+                            behavior: {
+                                type: 'action',
+                                action: { url: '/get/subflow/response-geolocation' },
+                            },
+                        },
+                    ],
+                },
+                {
+                    type: 'columns',
+                    left: [
+                        {
+                            type: 'button',
+                            title: 'Notification Permission (from behavior)',
+                            control: 'primary',
+                            behavior: getNativesubflowBehaviorOrBody('notification-permission'),
+                        },
+                    ],
+                    right: [
+                        {
+                            type: 'button',
+                            title: 'Notification Permission (from response)',
+                            control: 'primary',
+                            behavior: {
+                                type: 'action',
+                                action: { url: '/get/subflow/response-notification-permission' },
+                            },
+                        },
+                    ],
+                },
+                {
+                    type: 'button',
+                    title: 'Next step instead of subflow',
+                    control: 'secondary',
+                    behavior: {
+                        type: 'action',
+                        action: {
+                            url: '/get-form-step',
+                            method: 'POST',
+                        },
+                    },
+                },
+            ],
+        },
+    ],
+};
+const formStep = {
+    id: 'form-step',
+    title: 'Form Step',
+    schemas: [
+        {
+            $id: '#string',
+            type: 'string',
+            title: 'Required Input',
+            description: 'Enter any text to enable submission',
+        },
+    ],
+    layout: [
+        {
+            type: 'form',
+            schemaId: '#string',
+        },
+        {
+            type: 'button',
+            title: 'Submit',
+            control: 'primary',
+            behavior: {
+                type: 'action',
+                action: {
+                    url: '/submit-form',
+                    method: 'POST',
+                },
+            },
+        },
+    ],
+};

package/build/stories/spec/layouts/Alert.story.js

@@ -0,0 +1,107 @@
+import { expect } from 'storybook/test';
+import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
+import { renderWithStep } from '../../utils/render-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Layouts/Alert',
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    },
+};
+const primaryCallToAction = {
+    title: 'Primary action',
+    behavior: { type: 'link', url: '/primary' },
+};
+const secondaryCallToAction = {
+    title: 'Secondary action',
+    behavior: { type: 'link', url: '/secondary' },
+};
+const promptForkingStep = {
+    id: 'alert-prompt-forking',
+    title: 'Alert prompt forking',
+    schemas: [],
+    layout: [
+        { type: 'heading', text: 'InfoPrompt branches' },
+        {
+            type: 'alert',
+            title: 'No actions',
+            markdown: 'No actions should render an InfoPrompt.',
+        },
+        {
+            type: 'alert',
+            title: 'Primary action only',
+            markdown: 'A primary action without the preference tag should render an InfoPrompt.',
+            callToAction: primaryCallToAction,
+        },
+        {
+            type: 'alert',
+            title: 'Secondary action only',
+            markdown: 'A secondary action should still render an InfoPrompt and be ignored.',
+            secondaryCallToAction,
+            tags: ['prefers-action-prompt'],
+        },
+        { type: 'heading', text: 'ActionPrompt branches' },
+        {
+            type: 'alert',
+            title: 'Primary and secondary actions',
+            markdown: 'Two actions should render an ActionPrompt.',
+            callToAction: primaryCallToAction,
+            secondaryCallToAction,
+        },
+        {
+            type: 'alert',
+            title: 'Preferred ActionPrompt',
+            markdown: 'A primary action with the preference tag should render an ActionPrompt.',
+            callToAction: primaryCallToAction,
+            tags: ['prefers-action-prompt'],
+        },
+    ],
+};
+const ignoredInfoPromptMediaStep = {
+    id: 'alert-info-prompt-media',
+    title: 'InfoPrompt ignores non-icon media',
+    schemas: [],
+    layout: [
+        {
+            type: 'alert',
+            title: 'Image media',
+            markdown: 'An InfoPrompt should ignore image media and use its default icon.',
+            media: {
+                type: 'image',
+                uri: 'https://example.com/prompt.png',
+                accessibilityDescription: 'Ignored prompt image',
+            },
+        },
+        {
+            type: 'alert',
+            title: 'Avatar media',
+            markdown: 'An InfoPrompt should ignore avatar media and use its default icon.',
+            media: {
+                type: 'avatar',
+                content: [
+                    {
+                        type: 'uri',
+                        uri: 'urn:wise:currencies:eur:image',
+                    },
+                ],
+                accessibilityDescription: 'Ignored prompt avatar',
+            },
+        },
+    ],
+};
+export const PromptForking = {
+    render: () => renderWithStep(promptForkingStep),
+    play: async ({ canvas }) => {
+        await expect(canvas.getAllByRole('status')).toHaveLength(3);
+        await expect(canvas.getAllByRole('region')).toHaveLength(2);
+        await expect(canvas.getAllByRole('link', { name: 'Secondary action' })).toHaveLength(1);
+    },
+};
+export const InfoPromptIgnoresNonIconMedia = {
+    render: () => renderWithStep(ignoredInfoPromptMediaStep),
+    play: async ({ canvas }) => {
+        await expect(canvas.queryByLabelText('Ignored prompt image')).not.toBeInTheDocument();
+        await expect(canvas.queryByLabelText('Ignored prompt avatar')).not.toBeInTheDocument();
+        await expect(canvas.getAllByTestId('status-icon')).toHaveLength(2);
+    },
+};

package/build/stories/spec/layouts/Box.Container-Widths.3-sizes.story.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
+import { renderWithStepAndOverrides } from '../../utils/render-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Layouts/Box/Container Widths (grouped)',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+    argTypes: {},
+};
+const containerWidths = [420, 533, 768];
+const makeStep = (width, control) => {
+    const boxContent = Object.assign(Object.assign({ type: 'box', width }, (control && { control })), { components: [
+            {
+                type: 'heading',
+                text: 'Lorem Ipsum Dolor!',
+            },
+            {
+                type: 'paragraph',
+                text: 'Lorem ipsum dolor sitamet.',
+            },
+            Object.assign(Object.assign({ type: 'box', width }, (control && { control })), { components: [
+                    {
+                        type: 'button',
+                        title: 'Button inside box',
+                        behavior: {
+                            type: 'action',
+                            action: { url: '/button-action' },
+                        },
+                    },
+                ] }),
+        ] });
+    return {
+        id: 'box-container-widths',
+        title: `Box: width="${width}"`,
+        description: `This step demonstrates a box layout with width="${width}" and control="${control !== null && control !== void 0 ? control : 'plain'}".`,
+        layout: [boxContent],
+        schemas: [],
+    };
+};
+const makeStory = (name, width, control) => {
+    return {
+        name,
+        render: () => (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '32px' }, children: containerWidths.map((containerPxWidth) => {
+                return (_jsxs("div", { children: [_jsxs("div", { style: {
+                                marginBottom: '8px',
+                                fontSize: '12px',
+                                fontWeight: 'bold',
+                                color: '#666',
+                            }, children: ["Container: ", containerPxWidth, "px"] }), _jsx("div", { style: { width: `${containerPxWidth}px`, border: '1px solid #ccc' }, children: renderWithStepAndOverrides(makeStep(width, control), {}) })] }, containerPxWidth));
+            }) })),
+    };
+};
+export const XS = makeStory('xs', 'xs', undefined);
+export const SM = makeStory('sm', 'sm', undefined);
+export const MD = makeStory('md', 'md', undefined);
+export const LG = makeStory('lg', 'lg', undefined);
+export const XL = makeStory('xl', 'xl', undefined);

package/build/stories/spec/layouts/Box.Container-Widths.story.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
+import { renderWithStepAndOverrides } from '../../utils/render-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Layouts/Box/Container Widths (md)',
+    parameters: {
+        layout: 'fullscreen',
+        chromatic: { disableSnapshot: false },
+    },
+    globals: { viewport: { value: 'desktop1' } },
+    argTypes: {},
+};
+const makeStep = (containerPxWidth) => {
+    const boxContent = {
+        type: 'box',
+        width: 'md',
+        components: [
+            {
+                type: 'heading',
+                text: 'Lorem Ipsum Dolor!',
+            },
+            {
+                type: 'paragraph',
+                text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            {
+                type: 'box',
+                width: 'md',
+                components: [
+                    {
+                        type: 'button',
+                        title: 'Button inside box',
+                        behavior: {
+                            type: 'action',
+                            action: { url: '/button-action' },
+                        },
+                    },
+                ],
+            },
+        ],
+    };
+    return {
+        id: 'box-container-widths',
+        title: `Box: width="md" (${containerPxWidth}px)`,
+        description: `This step demonstrates a box layout with width="md" inside a container with a width of ${containerPxWidth}px.`,
+        layout: [boxContent],
+        schemas: [],
+    };
+};
+const makeStory = (name, containerPxWidth) => ({
+    name,
+    render: () => (_jsx("div", { style: { width: `${containerPxWidth}px`, border: '1px solid #ccc' }, children: renderWithStepAndOverrides(makeStep(containerPxWidth), {}) })),
+});
+export const _420px = makeStory('420px', 420);
+export const _533px = makeStory('533px', 533);
+export const _768px = makeStory('768px', 768);

package/build/stories/spec/layouts/Box.Viewport-Widths.story.js

@@ -0,0 +1,64 @@
+import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
+import { renderWithStepAndOverrides } from '../../utils/render-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Layouts/Box/Viewport Widths',
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    },
+    argTypes: {},
+};
+const makeStep = (width, control) => {
+    const boxContent = Object.assign(Object.assign({ type: 'box', width }, (control && { control })), { components: [
+            {
+                type: 'heading',
+                text: 'Lorem Ipsum Dolor!',
+            },
+            {
+                type: 'paragraph',
+                text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            },
+            Object.assign(Object.assign({ type: 'box', width }, (control && { control })), { components: [
+                    {
+                        type: 'button',
+                        title: 'Button inside box',
+                        behavior: {
+                            type: 'action',
+                            action: { url: '/button-action' },
+                        },
+                    },
+                ] }),
+        ] });
+    return {
+        id: 'box-widths',
+        title: `Box: width="${width}"`,
+        description: `This step demonstrates a box layout with width="${width}" and control="${control !== null && control !== void 0 ? control : 'plain'}".`,
+        layout: [boxContent],
+        schemas: [],
+    };
+};
+const makeStory = (name, width, viewport, control) => {
+    return {
+        name,
+        globals: { viewport: { value: viewport } },
+        render: () => renderWithStepAndOverrides(makeStep(width, control), {}),
+    };
+};
+// mobile2 (narrow, <768px)
+export const _414pxXS = makeStory('xs-mobile2-Plain', 'xs', 'mobile2', undefined);
+export const _414pxSM = makeStory('sm-mobile2-Plain', 'sm', 'mobile2', undefined);
+export const _414pxMD = makeStory('md-mobile2-Plain', 'md', 'mobile2', undefined);
+export const _414pxLG = makeStory('lg-mobile2-Plain', 'lg', 'mobile2', undefined);
+export const _414pxXL = makeStory('xl-mobile2-Plain', 'xl', 'mobile2', undefined);
+// ipad (768px - 989px)
+export const _768pxXS = makeStory('xs-ipad-Plain', 'xs', 'ipad', undefined);
+export const _768pxSM = makeStory('sm-ipad-Plain', 'sm', 'ipad', undefined);
+export const _768pxMD = makeStory('md-ipad-Plain', 'md', 'ipad', undefined);
+export const _768pxLG = makeStory('lg-ipad-Plain', 'lg', 'ipad', undefined);
+export const _768pxXL = makeStory('xl-ipad-Plain', 'xl', 'ipad', undefined);
+// desktop1 (wide, >=990px)
+export const _1366pxXS = makeStory('xs-desktop1-Plain', 'xs', 'desktop1', undefined);
+export const _1366pxSM = makeStory('sm-desktop1-Plain', 'sm', 'desktop1', undefined);
+export const _1366pxMD = makeStory('md-desktop1-Plain', 'md', 'desktop1', undefined);
+export const _1366pxLG = makeStory('lg-desktop1-Plain', 'lg', 'desktop1', undefined);
+export const _1366pxXL = makeStory('xl-desktop1-Plain', 'xl', 'desktop1', undefined);