@wise/dynamic-flow-client 5.8.1 → 5.9.0

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

@@ -0,0 +1,59 @@
+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 Copy() {
+    return renderWithStep(copyStep);
+}
+const copyStep = {
+    id: 'copy',
+    title: 'Copy Behavior',
+    schemas: [],
+    layout: [
+        {
+            type: 'decision',
+            control: 'with-avatar',
+            options: [
+                {
+                    title: 'Click to copy',
+                    image: {
+                        url: 'https://images.unsplash.com/photo-1542736705-53f0131d1e98?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80',
+                    },
+                    behavior: {
+                        type: 'copy',
+                        content: 'This is a decision with an image',
+                    },
+                },
+            ],
+        },
+        {
+            type: 'review',
+            title: 'Review Layout',
+            callToAction: {
+                title: 'Click to copy',
+                behavior: {
+                    type: 'copy',
+                    content: 'This is a review action',
+                },
+            },
+            fields: [
+                { label: 'Recipient', value: 'Florence Jones' },
+                { label: 'Amount', value: '$6550' },
+            ],
+        },
+        {
+            type: 'button',
+            title: 'Click to copy',
+            control: 'primary',
+            behavior: {
+                type: 'copy',
+                content: 'This is a button',
+            },
+        },
+    ],
+};

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

@@ -0,0 +1,76 @@
+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 Modal() {
+    return renderWithStep(initialStep);
+}
+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',
+            },
+        },
+    ],
+};

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

@@ -0,0 +1,267 @@
+import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
+import { renderWithStepAndOverrides } from '../../utils/render-utils';
+import { respondWith, respondWithDelay } from '../../../test-utils';
+const meta = {
+    component: DynamicFlowWise,
+    title: 'Spec/Behavior',
+    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 Subflow({ 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) => ({
+    id: 'parent',
+    title: 'Subflow Behavior',
+    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/layouts/Decision.story.js

@@ -0,0 +1,241 @@
+import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
+import { renderWithStep } from '../../utils/render-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Layouts/Decision',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+    argTypes: {
+        groupTag: {
+            control: {
+                type: 'select',
+            },
+            options: ['popular', 'recent', 'currencies-with-account-details'],
+            description: 'Group tag for decision options',
+        },
+    },
+    args: {
+        groupTag: 'popular',
+    },
+};
+export const Basic = {
+    parameters: {
+        controls: { disable: true },
+    },
+    render: () => renderWithStep(getDecisionStep()),
+};
+export const Filtered = {
+    parameters: {
+        controls: { disable: true },
+    },
+    render: () => renderWithStep(getDecisionStep('filtered')),
+};
+export const Grouped = {
+    args: {
+        groupTag: 'popular',
+    },
+    render: ({ groupTag }) => renderWithStep(getDecisionStep(undefined, groupTag)),
+};
+export const FilteredAndGrouped = {
+    args: {
+        groupTag: 'popular',
+    },
+    render: ({ groupTag }) => renderWithStep(getDecisionStep('filtered', groupTag)),
+};
+const getDecisionStep = (decisionControl, groupTag) => ({
+    id: `bank-country${decisionControl}${groupTag}`,
+    title: 'Choose the country of your bank',
+    schemas: [],
+    layout: [
+        {
+            type: 'decision',
+            control: decisionControl,
+            options: [
+                {
+                    title: 'France',
+                    description: "Caisse d'Epargne, Crédit Agricole, Crédit Mutuel, Société Générale",
+                    additionalText: 'France is a lovely country to cycle in',
+                    supportingValues: {
+                        value: 'EUR',
+                        subvalue: 'Paris',
+                    },
+                    keywords: ['euro', 'francais', 'french'],
+                    action: {
+                        url: '/payin',
+                        method: 'POST',
+                        data: {
+                            countryCode: 'FR',
+                        },
+                    },
+                    icon: {
+                        name: 'flag-fr',
+                    },
+                    tag: groupTag,
+                },
+                {
+                    title: 'Germany',
+                    description: 'Commerzbank, Deutsche Bank, Hypotheke, Landesbank, Sparkasse, Volksbank',
+                    additionalText: 'Germany has lots of impressive castles',
+                    supportingValues: {
+                        value: 'EUR',
+                        subvalue: 'Berlin',
+                    },
+                    keywords: ['euro', 'german', 'berlin'],
+                    action: {
+                        url: '/payin',
+                        method: 'POST',
+                        data: {
+                            countryCode: 'DE',
+                        },
+                    },
+                    icon: {
+                        name: 'flag-de',
+                    },
+                },
+                {
+                    title: 'Ireland',
+                    description: 'Bank of Ireland, Irish Nationwide Building Society',
+                    additionalText: 'Ireland has some beautiful countryside',
+                    supportingValues: {
+                        value: 'EUR',
+                        subvalue: 'Dublin',
+                    },
+                    keywords: ['euro', 'ireland', 'dublin'],
+                    action: {
+                        url: '/payin',
+                        method: 'POST',
+                        data: {
+                            countryCode: 'IE',
+                        },
+                    },
+                    icon: {
+                        name: 'flag-ie',
+                    },
+                },
+                {
+                    title: 'Italy',
+                    description: 'Banco BPM, BPER',
+                    additionalText: 'Italy has lots of beautiful beaches',
+                    supportingValues: {
+                        value: 'EUR',
+                        subvalue: 'Rome',
+                    },
+                    keywords: ['euro', 'italian', 'rome'],
+                    action: {
+                        url: '/payin',
+                        method: 'POST',
+                        data: {
+                            countryCode: 'IT',
+                        },
+                    },
+                    icon: {
+                        name: 'flag-it',
+                    },
+                },
+                {
+                    title: 'New Zealand',
+                    description: 'ASB, Kiwibank, Westpac, ANZ',
+                    additionalText: 'But New Zealand is pretty much the best',
+                    supportingValues: {
+                        value: 'NZD',
+                        subvalue: 'Wellington',
+                    },
+                    keywords: ['dollar', 'new zealand', 'wellington'],
+                    action: {
+                        url: '/payin',
+                        method: 'POST',
+                        data: {
+                            countryCode: 'NZ',
+                        },
+                    },
+                    icon: {
+                        name: 'flag-nz',
+                    },
+                },
+                {
+                    title: 'Netherlands',
+                    description: 'ABN AMRO, ING, Rabobank, Triodos Bank',
+                    additionalText: 'The Netherlands is full of very nice Dutch people',
+                    supportingValues: {
+                        value: 'EUR',
+                        subvalue: 'Amsterdam',
+                    },
+                    keywords: ['euro', 'dutch', 'amsterdam'],
+                    action: {
+                        url: '/payin',
+                        method: 'POST',
+                        data: {
+                            countryCode: 'NL',
+                        },
+                    },
+                    icon: {
+                        name: 'flag-nl',
+                    },
+                },
+                {
+                    title: 'Portugal',
+                    description: 'Banco BPM, BPER',
+                    additionalText: 'Portugal is home to the delicious Pastéis de Nata',
+                    supportingValues: {
+                        value: 'EUR',
+                        subvalue: 'Lisbon',
+                    },
+                    keywords: ['euro', 'portuguese', 'lisbon'],
+                    action: {
+                        url: '/payin',
+                        method: 'POST',
+                        data: {
+                            countryCode: 'PT',
+                        },
+                    },
+                    icon: {
+                        name: 'flag-pt',
+                    },
+                },
+                {
+                    title: 'Spain',
+                    description: 'Bankia, Bankinter, Bank of Spain',
+                    additionalText: 'Spain has centuries of history',
+                    supportingValues: {
+                        value: 'EUR',
+                        subvalue: 'Madrid',
+                    },
+                    keywords: ['euro', 'spanish', 'madrid'],
+                    action: {
+                        url: '/payin',
+                        method: 'POST',
+                        data: {
+                            countryCode: 'ES',
+                        },
+                    },
+                    icon: {
+                        name: 'flag-es',
+                    },
+                    tag: groupTag,
+                },
+                {
+                    title: 'United Kingdom',
+                    description: 'HSBC, Lloyds, Monzo, NatWest, Santander',
+                    additionalText: 'The UK has a lot of hedgerows',
+                    supportingValues: {
+                        value: 'GBP',
+                        subvalue: 'London',
+                    },
+                    keywords: ['pound', 'great british pound', 'sterling', 'english', 'london'],
+                    action: {
+                        url: '/payin',
+                        method: 'POST',
+                        data: {
+                            countryCode: 'GB',
+                        },
+                    },
+                    icon: {
+                        name: 'flag-gb',
+                    },
+                    tag: groupTag,
+                },
+            ],
+        },
+    ],
+});

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

@@ -0,0 +1,42 @@
+import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
+import { renderWithStep } from '../../utils/render-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Layouts/Image',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+    argTypes: {
+        urn: {
+            control: {
+                type: 'text',
+            },
+        },
+    },
+    args: {
+        urn: 'urn:wise:illustrations:globe?+type=animated',
+    },
+};
+const step = (urn) => ({
+    id: 'illustration',
+    title: 'Illustrations',
+    layout: [
+        {
+            type: 'heading',
+            text: `An ImageLayout with urn: ${urn}`,
+            align: 'center',
+            margin: 'lg',
+        },
+        {
+            type: 'image',
+            content: {
+                accessibilityDescription: 'plane',
+                uri: urn,
+            },
+        },
+    ],
+    schemas: [],
+});
+export function ImageWithIllustration({ urn }) {
+    return renderWithStep(step(urn));
+}