@wise/dynamic-flow-client 5.11.0 → 5.12.0

package/build/renderers/mappers/uploadInputComponentToProps.js

@@ -1,8 +0,0 @@
-import { inputComponentToProps } from './utils/inputComponentToProps';
-export const uploadInputComponentToProps = (component, rendererMapperProps) => {
-    const { accepts, cameraConfig, maxSize, source } = component;
-    return Object.assign(Object.assign(Object.assign({}, inputComponentToProps(component, 'input-upload')), rendererMapperProps), { cameraConfig,
-        source,
-        accepts,
-        maxSize, onUpload: component.onUpload.bind(component) });
-};

package/build/renderers/mappers/upsellComponentToProps.js

@@ -1,2 +0,0 @@
-import { pick } from './utils/pick';
-export const upsellComponentToProps = (component, rendererMapperProps) => (Object.assign(Object.assign(Object.assign({}, pick(component, 'uid', 'analyticsId', 'type', 'callToAction', 'control', 'margin', 'media', 'tags', 'text')), { onDismiss: component.onDismiss ? component.onDismiss.bind(component) : undefined }), rendererMapperProps));

package/build/renderers/mappers/utils/getValidationState.js

@@ -1,12 +0,0 @@
-import { mapErrorsToValidationState } from './mapErrorsToValidationState';
-export const getValidationState = (errors, validationAsyncState) => {
-    if (validationAsyncState) {
-        if (validationAsyncState === null || validationAsyncState === void 0 ? void 0 : validationAsyncState.messages.error) {
-            return { status: 'invalid', message: validationAsyncState === null || validationAsyncState === void 0 ? void 0 : validationAsyncState.messages.error };
-        }
-        if (validationAsyncState === null || validationAsyncState === void 0 ? void 0 : validationAsyncState.messages.success) {
-            return { status: 'valid', message: validationAsyncState === null || validationAsyncState === void 0 ? void 0 : validationAsyncState.messages.success };
-        }
-    }
-    return mapErrorsToValidationState(errors);
-};

package/build/renderers/mappers/utils/inputComponentToProps.js

@@ -1,26 +0,0 @@
-import { getValidationState } from './getValidationState';
-export const inputComponentToProps = (component, type) => {
-    var _a;
-    const { uid, analyticsId, control, description, disabled, errors, help, id, media, placeholder, required, title, tags, validationAsyncState, onBlur, onFocus, } = component;
-    const { messages } = validationAsyncState !== null && validationAsyncState !== void 0 ? validationAsyncState : {};
-    return {
-        uid,
-        analyticsId,
-        type,
-        control,
-        description,
-        disabled,
-        error: (_a = messages === null || messages === void 0 ? void 0 : messages.error) !== null && _a !== void 0 ? _a : errors === null || errors === void 0 ? void 0 : errors[0],
-        help,
-        id,
-        media,
-        placeholder,
-        required,
-        title,
-        tags,
-        validationState: getValidationState(errors, validationAsyncState),
-        value: component.getLocalValue(),
-        onBlur: onBlur.bind(component),
-        onFocus: onFocus.bind(component),
-    };
-};

package/build/renderers/mappers/utils/mapErrorsToValidationState.js

@@ -1,9 +0,0 @@
-export const mapErrorsToValidationState = (errors) => {
-    if (errors) {
-        if (errors.length > 0) {
-            return { status: 'invalid', message: errors[0] };
-        }
-        return { status: 'valid' };
-    }
-    return undefined;
-};

package/build/renderers/mappers/utils/pick.js

@@ -1,8 +0,0 @@
-export function pick(obj, ...keys) {
-    const result = {};
-    keys.forEach((key) => {
-        // eslint-disable-next-line functional/immutable-data
-        result[key] = obj[key];
-    });
-    return result;
-}

package/build/renderers/mappers/utils/selectInputOptionsToProps.js

@@ -1,11 +0,0 @@
-import { componentToRendererProps } from '../componentToRendererProps';
-export const selectInputOptionsToProps = (options, children, rendererMapperProps) => {
-    return options.map((option, index) => {
-        const child = children[index];
-        const optionChildrenProps = child ? componentToRendererProps(child, rendererMapperProps) : null;
-        const optionChildren = optionChildrenProps
-            ? rendererMapperProps.render(optionChildrenProps)
-            : null;
-        return Object.assign(Object.assign({}, option), { children: optionChildren, childrenProps: optionChildrenProps });
-    });
-};

package/build/renderers/stepComponentToProps.js

@@ -1,32 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { componentToRendererProps, } from './mappers/componentToRendererProps';
-import { pick } from './mappers/utils/pick';
-export const stepComponentToProps = (component, rendererMapperProps) => {
-    const { uid, analyticsId, back, control, description, error, step, title, tags, onBehavior } = component;
-    const { showBack } = rendererMapperProps, restMapperProps = __rest(rendererMapperProps, ["showBack"]);
-    const childrenProps = component
-        .getChildren()
-        .map((c) => componentToRendererProps(c, restMapperProps));
-    const footerProps = component.footerComponents.map((c) => componentToRendererProps(c, restMapperProps));
-    return Object.assign({ type: 'step', id: step.id, analyticsId,
-        uid, back: showBack ? back : undefined, control,
-        description, toolbar: getToolbarProps(component.toolbar, restMapperProps), error, __rawStep: step, title: restMapperProps.features.isEnabled('hideStepTitle') ? '' : title, tags, children: childrenProps.map(rendererMapperProps.render), childrenProps, footer: footerProps.map(rendererMapperProps.render), footerProps, __onAction: (action) => {
-            void onBehavior({ type: 'action', action });
-        } }, restMapperProps);
-};
-const getToolbarProps = (toolbar, rendererMapperProps) => {
-    if (!toolbar) {
-        return undefined;
-    }
-    return Object.assign(Object.assign(Object.assign({}, pick(toolbar, 'uid', 'control', 'type', 'tags')), { type: 'toolbar', items: toolbar.items.map((item) => (Object.assign(Object.assign({}, item), { disabled: item.disabled || rendererMapperProps.stepLoadingState !== 'idle' }))) }), rendererMapperProps);
-};

package/build/renderers/utils.js

@@ -1,69 +0,0 @@
-import { isArray } from '../utils/type-validators';
-/**
- * @experimental
- */
-export function findRendererPropsByType(root, type, predicate = () => true) {
-    if (isArray(root)) {
-        return root.flatMap((child) => findRendererPropsByType(child, type, predicate));
-    }
-    return [
-        ...(isType(root, type) && predicate(root) ? [root] : []),
-        ...getChildren(root).flatMap((child) => findRendererPropsByType(child, type, predicate)),
-    ];
-}
-const isType = (node, type) => node.type === type;
-const getChildren = (node) => {
-    switch (node.type) {
-        case 'root':
-        case 'box':
-        case 'container':
-        case 'form':
-        case 'form-section':
-        case 'step':
-        case 'modal':
-        case 'section':
-            return node.childrenProps;
-        case 'columns':
-            return [...node.startChildrenProps, ...node.endChildrenProps];
-        case 'modal-layout':
-            return node.content.childrenProps;
-        case 'repeatable':
-            return node.editableItemProps ? [node.editableItemProps] : [];
-        case 'input-select':
-            return node.childrenProps ? [node.childrenProps] : [];
-        case 'tabs':
-            return node.tabs.flatMap((c) => c.childrenProps);
-        case 'alert':
-        case 'button':
-        case 'input-checkbox':
-        case 'input-date':
-        case 'decision':
-        case 'divider':
-        case 'formatted-value':
-        case 'heading':
-        case 'hidden':
-        case 'image':
-        case 'loading-state':
-        case 'instructions':
-        case 'input-integer':
-        case 'list':
-        case 'loading-indicator':
-        case 'markdown':
-        case 'media':
-        case 'input-multi-select':
-        case 'input-upload-multi':
-        case 'input-number':
-        case 'money-input':
-        case 'paragraph':
-        case 'progress':
-        case 'review':
-        case 'search':
-        case 'status-list':
-        case 'input-text':
-        case 'input-upload':
-        case 'external-confirmation':
-        case 'subflow':
-        case 'upsell':
-            return [];
-    }
-};

package/build/renderers/utils.test.js

@@ -1,70 +0,0 @@
-import { mapStepToComponent } from '../domain/mappers/mapStepToComponent';
-import { getMockRendererMapperProps, getStepMapperProps, } from '../domain/mappers/schema/tests/test-utils';
-import { findRendererPropsByType } from './utils';
-import { stepComponentToProps } from './stepComponentToProps';
-const step = {
-    id: '123',
-    title: 'Hello',
-    schemas: [
-        {
-            $id: '#form-1',
-            type: 'object',
-            displayOrder: ['name', 'surname', 'age'],
-            properties: {
-                name: {
-                    type: 'string',
-                    title: 'first name',
-                },
-                surname: {
-                    type: 'string',
-                    title: 'last name',
-                },
-                age: {
-                    type: 'number',
-                    title: 'age',
-                },
-            },
-        },
-    ],
-    layout: [
-        {
-            type: 'box',
-            components: [
-                {
-                    type: 'paragraph',
-                    text: 'Please fill in some details',
-                },
-                {
-                    type: 'form',
-                    schemaId: '#form-1',
-                },
-                {
-                    type: 'button',
-                    title: 'submit',
-                    action: {},
-                },
-            ],
-        },
-        {
-            type: 'button',
-            title: 'back',
-            action: {},
-        },
-    ],
-};
-const component = mapStepToComponent(Object.assign(Object.assign({}, getStepMapperProps()), { step }));
-const stepProps = stepComponentToProps(component, Object.assign(Object.assign({}, getMockRendererMapperProps()), { showBack: false }));
-describe('given a renderer props tree', () => {
-    describe('the findRendererPropsByType function', () => {
-        it('returns all elements that match a type', () => {
-            const textResults = findRendererPropsByType(stepProps, 'input-text');
-            expect(textResults).toHaveLength(2);
-            const buttonResults = findRendererPropsByType(stepProps, 'button');
-            expect(buttonResults).toHaveLength(2);
-        });
-        it('returns all elements that match a type and a predicate', () => {
-            const results = findRendererPropsByType(stepProps, 'input-text', (props) => props.title === 'first name');
-            expect(results).toHaveLength(1);
-        });
-    });
-});

package/build/stories/dev-tools/ContainerQueries.story.js

@@ -1,66 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from 'react/jsx-runtime';
-import { renderWithStep } from '../utils/render-utils';
-export default {
-    component: ContainerQueries,
-    title: 'Dev Tools',
-    argTypes: {
-        width: {
-            options: ['100%', '900px', '600px', '575px', '400px'],
-            control: { type: 'select' },
-            description: 'Width of the div containing the DynamicFlow component',
-        },
-    },
-    args: {
-        width: '575px',
-    },
-};
-export function ContainerQueries({ width }) {
-    return _jsx(Fragment, { children: render(imageLayoutStep, width) }, width);
-}
-function render(step, width) {
-    return (_jsxs("div", { className: "d-flex", children: [_jsx("div", { style: { flexGrow: 1, backgroundColor: '#EEE', textAlign: 'center' }, children: " NOT-DF " }), _jsx("div", { style: { width, backgroundColor: 'white' }, children: renderWithStep(step) }), _jsx("div", { style: { flexGrow: 1, backgroundColor: '#EEE', textAlign: 'center' }, children: " NOT-DF " })] }));
-}
-const imageLayoutStep = {
-    id: 'step-id',
-    title: 'Dynamic Flow Step',
-    description: 'This is a step in the dynamic flow.',
-    schemas: [],
-    layout: [
-        {
-            type: 'image',
-            size: 'xs',
-            content: {
-                uri: 'https://placehold.co/600x600?text=Cat',
-            },
-        },
-        {
-            type: 'image',
-            size: 'sm',
-            content: {
-                uri: 'https://placehold.co/600x600?text=Cat',
-            },
-        },
-        {
-            type: 'image',
-            size: 'md',
-            content: {
-                uri: 'https://placehold.co/600x600?text=Cat',
-            },
-        },
-        {
-            type: 'image',
-            size: 'lg',
-            content: {
-                uri: 'https://placehold.co/600x600?text=Cat',
-            },
-        },
-        {
-            type: 'image',
-            size: 'xl',
-            content: {
-                uri: 'https://placehold.co/600x600?text=Cat',
-            },
-        },
-    ],
-};

package/build/stories/dev-tools/Debugger.story.js

@@ -1,38 +0,0 @@
-import DynamicFlowWise from '../../test-utils/DynamicFlowWise';
-import { getMockHttpClient, respondWith } from '../../test-utils';
-import { renderWithStep } from '../utils/render-utils';
-export default {
-    component: DynamicFlowWise,
-    title: 'Dev Tools/Debugger',
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-};
-const httpClient = getMockHttpClient({
-    '/submit': async () => respondWith(Object.assign(Object.assign({}, step), { title: 'Success, try again!' })),
-});
-export function Debugger() {
-    return renderWithStep(step, httpClient);
-}
-const step = {
-    id: 'step',
-    title: 'Debugger',
-    description: 'This is here to help you debug steps.',
-    layout: [
-        {
-            type: 'paragraph',
-            text: 'Open Debugger.story.tsx and update the step object, then have fun debugging!',
-            align: 'center',
-            margin: 'lg',
-        },
-        {
-            type: 'button',
-            title: 'Submit',
-            control: 'primary',
-            action: {
-                url: '/submit',
-            },
-        },
-    ],
-    schemas: [],
-};

package/build/stories/dev-tools/FixtureSelect.story.js

@@ -1,23 +0,0 @@
-import { layouts, schemas, misc, step } from '@wise/dynamic-flow-fixtures';
-import { renderWithStep } from '../utils/render-utils';
-const fixtures = Object.assign(Object.assign(Object.assign(Object.assign({}, schemas), step), layouts), misc);
-export default {
-    component: FixtureSelect,
-    title: 'Dev Tools/Fixture Select',
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-    argTypes: {
-        initialStepName: {
-            label: 'Initial Step',
-            control: 'select',
-            options: Object.keys(fixtures),
-        },
-    },
-    args: { initialStepName: Object.keys(fixtures)[0] },
-};
-export function FixtureSelect({ initialStepName = '' }) {
-    const selectedStep = fixtures[initialStepName] || {};
-    const parsedStep = typeof selectedStep === 'string' ? JSON.parse(selectedStep) : selectedStep;
-    return renderWithStep(parsedStep);
-}

package/build/stories/dev-tools/TestServer.story.js

@@ -1,32 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { action } from 'storybook/actions';
-import { makeHttpClient } from '../../common/makeHttpClient';
-import { renderWithAction } from '../utils/render-utils';
-import { Layout } from '@transferwise/navigation-ui';
-const customFetch = makeHttpClient('http://localhost:8888/');
-const httpClient = async (input, init) => {
-    action('customFetch')(input, init);
-    const response = await customFetch(input, Object.assign({}, init));
-    try {
-        action('response body')(await response.clone().json());
-    }
-    catch (_a) {
-        action('response body')('parsing response as JSON failed');
-    }
-    return response;
-};
-export default {
-    component: TestServer,
-    title: 'Dev Tools',
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-};
-export function TestServer() {
-    const initialAction = { method: 'GET', url: 'http://localhost:8888' };
-    return renderWithAction(initialAction, httpClient, { features: { nativeBack: true } });
-}
-export function TestServerWithNav() {
-    const initialAction = { method: 'GET', url: 'http://localhost:8888' };
-    return _jsx(Layout, { children: renderWithAction(initialAction, httpClient) });
-}

package/build/stories/examples/NativeFlow.story.js

@@ -1,80 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { action } from 'storybook/actions';
-import DynamicFlowWise from '../../test-utils/DynamicFlowWise';
-import { useState } from 'react';
-import { Button } from '@transferwise/components';
-import { respondWith } from '../../test-utils';
-export default {
-    component: DynamicFlowWise,
-    title: 'Examples',
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-};
-export function NativeFlowInterop() {
-    const [screenId, setScreenId] = useState(0);
-    switch (screenId) {
-        case 0:
-            return (_jsxs(_Fragment, { children: [_jsx("h1", { children: " THIS IS A NATIVE SCREEN " }), _jsx(Button, { onClick: () => setScreenId(1), children: "Continue" })] }));
-        case 1:
-            return (_jsx(DynamicFlowWise, { flowId: "DemoFlowId", initialStep: step('Original step'), httpClient: mockHttpClient, onCompletion: () => {
-                    action('onCompletion')();
-                    setScreenId(2);
-                }, onEvent: action('onEvent'), onLog: action('onLog'), onError: (error) => {
-                    action('onError')(error);
-                    setScreenId(2);
-                    console.error(error);
-                } }));
-        case 2:
-            return (_jsxs(_Fragment, { children: [_jsx("h1", { children: " THIS IS A NATIVE SCREEN (SECOND) " }), _jsx(Button, { onClick: () => setScreenId(1), children: "Continue" })] }));
-        default:
-            return (_jsxs(_Fragment, { children: [_jsx("h1", { children: " YOU ARE IN LIMBO " }), _jsx(Button, { onClick: () => setScreenId(1), children: "Continue" })] }));
-    }
-}
-const step = (title) => ({
-    id: 'native-interop',
-    title,
-    navigation: {
-        back: {
-            action: {
-                exit: true,
-                result: {
-                    state: 0,
-                },
-            },
-        },
-    },
-    refreshUrl: '/refresh',
-    refreshAfter: new Date(Date.now() + 3000).toISOString(),
-    layout: [
-        {
-            type: 'heading',
-            text: 'This step has refreshAfter in 3s. Once it has refreshed, use the browser back button to navigate away. It will continue refreshing',
-            align: 'center',
-            margin: 'lg',
-        },
-        {
-            type: 'button',
-            title: 'Continue',
-            behavior: {
-                type: 'action',
-                action: {
-                    exit: true,
-                    result: {
-                        state: 2,
-                    },
-                },
-            },
-        },
-    ],
-    schemas: [],
-});
-const mockHttpClient = async (input, init) => {
-    console.log(input, init);
-    action('httpClient')(input, init);
-    if (input === '/refresh') {
-        return respondWith(step('This is a refreshed step'));
-    }
-    console.log('FAILING');
-    return respondWith({}, { status: 500 });
-};