@wise/dynamic-flow-client 5.27.0 → 5.28.0

package/build/domain/mappers/utils/suggestions-utils.test.js

@@ -0,0 +1,36 @@
+import { mapSuggestions } from './suggestions-utils';
+import { vi } from 'vitest';
+describe('mapSuggestions', () => {
+    it('logs a warning when the value is a not a string', () => {
+        const logEvent = vi.fn();
+        const suggestions = {
+            values: [{ value: 123, label: 'Number suggestion' }],
+        };
+        mapSuggestions(suggestions, logEvent);
+        expect(logEvent).toHaveBeenCalledWith('warning', 'Suggestion values must be of type string. Found number instead.');
+    });
+    it('logs a warning when the value is null', () => {
+        const logEvent = vi.fn();
+        const suggestions = {
+            values: [{ value: null, label: 'Null suggestion' }],
+        };
+        mapSuggestions(suggestions, logEvent);
+        expect(logEvent).toHaveBeenCalledWith('warning', 'Suggestion values must be of type string. Found object instead.');
+    });
+    it('does not log a warning when the value is a string', () => {
+        const logEvent = vi.fn();
+        const suggestions = {
+            values: [{ value: 'string', label: 'String suggestion' }],
+        };
+        mapSuggestions(suggestions, logEvent);
+        expect(logEvent).not.toHaveBeenCalled();
+    });
+    it('does not log a warning when the value is an empty string', () => {
+        const logEvent = vi.fn();
+        const suggestions = {
+            values: [{ value: '', label: 'Empty string suggestion' }],
+        };
+        mapSuggestions(suggestions, logEvent);
+        expect(logEvent).not.toHaveBeenCalled();
+    });
+});

package/build/domain/mappers/utils/tags-utils.js

@@ -0,0 +1 @@
+export const mapTags = ({ tag, tags }) => tags !== null && tags !== void 0 ? tags : (tag != null ? [tag] : undefined);

package/build/domain/mappers/utils/utils.js

@@ -0,0 +1,45 @@
+import { getDomainLayerBehavior } from './behavior-utils';
+import { getHrefWithTracking } from './getHrefWithTracking';
+import { mapLegacyContext } from './legacy-utils';
+import { getDomainLayerMedia } from './media-utils';
+export const mapInlineAlert = (alert) => {
+    return alert
+        ? {
+            content: alert.content,
+            context: alert.context ? mapLegacyContext(alert.context) : 'neutral',
+            media: getDomainLayerMedia({ media: alert.media }),
+        }
+        : undefined;
+};
+export const mapAdditionalInfo = (info, mapperProps) => {
+    const { onBehavior, trackEvent, registerSubmissionBehavior } = mapperProps;
+    if (info) {
+        const behavior = getDomainLayerBehavior(info, [], registerSubmissionBehavior);
+        const isLink = behavior.type === 'link';
+        return {
+            text: info.text,
+            href: isLink ? behavior.url : undefined,
+            hrefWithTracking: getHrefWithTracking({
+                behavior,
+                onBehavior,
+                trackEvent,
+            }),
+            accessibilityDescription: info.accessibilityDescription,
+            onClick: behavior.type === 'none'
+                ? undefined
+                : () => {
+                    void onBehavior(behavior);
+                },
+        };
+    }
+    return undefined;
+};
+export const mapSchemaAlert = (alert) => {
+    return alert
+        ? {
+            content: alert.markdown,
+            context: alert.context ? mapLegacyContext(alert.context) : 'neutral',
+            media: getDomainLayerMedia({ media: alert.media }),
+        }
+        : undefined;
+};

package/build/domain/types.js

@@ -0,0 +1 @@
+export {};

package/build/i18n/index.js

@@ -0,0 +1,40 @@
+import cs from './cs.json';
+import de from './de.json';
+import en from './en.json';
+import es from './es.json';
+import fr from './fr.json';
+import hu from './hu.json';
+import id from './id.json';
+import it from './it.json';
+import ja from './ja.json';
+import nl from './nl.json';
+import pl from './pl.json';
+import pt from './pt.json';
+import ro from './ro.json';
+import ru from './ru.json';
+import th from './th.json';
+import tr from './tr.json';
+import zhCN from './zh_CN.json';
+import zhHK from './zh_HK.json';
+const translations = {
+    cs,
+    en,
+    de,
+    es,
+    fr,
+    hu,
+    id,
+    it,
+    ja,
+    nl,
+    pl,
+    pt,
+    ro,
+    ru,
+    th,
+    tr,
+    zh: zhCN,
+    'zh-CN': zhCN,
+    'zh-HK': zhHK,
+};
+export default translations;

package/build/index.js

@@ -0,0 +1,9 @@
+export { makeHttpClient } from './common/makeHttpClient';
+export { default as translations } from './i18n';
+export { findRendererPropsByType } from './renderers/utils';
+export { useDynamicFlow } from './useDynamicFlow';
+export { useDynamicFlowModal } from './useDynamicFlowModal';
+export { DynamicFlowCore as DynamicFlow } from './DynamicFlowCore';
+export { eventNames } from './domain/features/eventNames';
+export { makeRequestCache } from './domain/features/prefetch/request-cache';
+export { getDynamicSubflowRenderer } from './renderers/subflow/getDynamicSubflowRenderer';

package/build/main.js

@@ -1174,7 +1174,9 @@ var createRootDomainComponent = (onComponentUpdate, scrollToTop, backConfig, req
       });
       if (previousStep != null) {
         (_a = component.getStep()) == null ? void 0 : _a.start();
-        scrollToTop == null ? void 0 : scrollToTop("instant");
+        if (stepComponent.stackBehavior !== "replace-current" || shouldScrollOnStepUpdate(stepComponent, previousStep)) {
+          scrollToTop == null ? void 0 : scrollToTop("instant");
+        }
       }
     },
     clearStack() {
@@ -3103,14 +3105,24 @@ var createUpdatableComponent = (props, query, onComponentUpdate, subscribe, unsu
     abortController.abort();
     abortController = new AbortController();
     const { signal } = abortController;
+    updateComponent(component, (draft) => {
+      draft.isLoading = true;
+    });
     query({ data, signal }).then((state) => {
       component.update(state);
     }).catch(() => {
+    }).finally(() => {
+      if (!signal.aborted) {
+        updateComponent(component, (draft) => {
+          draft.isLoading = false;
+        });
+      }
     });
   };
   const component = __spreadProps(__spreadValues({}, props), {
     type: "updatable",
     kind: "layout",
+    isLoading: false,
     getChildren() {
       return component.state.components;
     },
@@ -9591,7 +9603,7 @@ var updatableComponentToProps = (component, rendererMapperProps) => {
   const childrenProps = component.state.components.map(
     (c) => componentToRendererProps(c, rendererMapperProps)
   );
-  return __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "margin", "tags")), rendererMapperProps), {
+  return __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "isLoading", "margin", "tags")), rendererMapperProps), {
     children: childrenProps.map(rendererMapperProps.render),
     childrenProps
   });

package/build/main.mjs

@@ -1143,7 +1143,9 @@ var createRootDomainComponent = (onComponentUpdate, scrollToTop, backConfig, req
       });
       if (previousStep != null) {
         (_a = component.getStep()) == null ? void 0 : _a.start();
-        scrollToTop == null ? void 0 : scrollToTop("instant");
+        if (stepComponent.stackBehavior !== "replace-current" || shouldScrollOnStepUpdate(stepComponent, previousStep)) {
+          scrollToTop == null ? void 0 : scrollToTop("instant");
+        }
       }
     },
     clearStack() {
@@ -3072,14 +3074,24 @@ var createUpdatableComponent = (props, query, onComponentUpdate, subscribe, unsu
     abortController.abort();
     abortController = new AbortController();
     const { signal } = abortController;
+    updateComponent(component, (draft) => {
+      draft.isLoading = true;
+    });
     query({ data, signal }).then((state) => {
       component.update(state);
     }).catch(() => {
+    }).finally(() => {
+      if (!signal.aborted) {
+        updateComponent(component, (draft) => {
+          draft.isLoading = false;
+        });
+      }
     });
   };
   const component = __spreadProps(__spreadValues({}, props), {
     type: "updatable",
     kind: "layout",
+    isLoading: false,
     getChildren() {
       return component.state.components;
     },
@@ -9562,7 +9574,7 @@ var updatableComponentToProps = (component, rendererMapperProps) => {
   const childrenProps = component.state.components.map(
     (c) => componentToRendererProps(c, rendererMapperProps)
   );
-  return __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "margin", "tags")), rendererMapperProps), {
+  return __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "isLoading", "margin", "tags")), rendererMapperProps), {
     children: childrenProps.map(rendererMapperProps.render),
     childrenProps
   });

package/build/renderers/CoreContainerRenderer.js

@@ -0,0 +1,5 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export const CoreContainerRenderer = {
+    canRenderType: 'container',
+    render: ({ children }) => _jsx(_Fragment, { children: children }),
+};

package/build/renderers/CoreRootRenderer.js

@@ -0,0 +1,12 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { findRendererPropsByType } from './utils';
+export const CoreRootRenderer = {
+    canRenderType: 'root',
+    render: ({ children, childrenProps, subflow }) => {
+        if ((subflow === null || subflow === void 0 ? void 0 : subflow.presentation.type) === 'push') {
+            return _jsx(_Fragment, { children: subflow.children });
+        }
+        const [stepProps] = findRendererPropsByType(childrenProps, 'step');
+        return (_jsxs("div", { id: stepProps === null || stepProps === void 0 ? void 0 : stepProps.id, className: "dynamic-flow-step", children: [children, (subflow === null || subflow === void 0 ? void 0 : subflow.presentation.type) === 'modal' ? subflow.children : undefined] }));
+    },
+};

package/build/renderers/EmptyLoadingStateRenderer.js

@@ -0,0 +1,5 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export const EmptyLoadingStateRenderer = {
+    canRenderType: 'loading-state',
+    render: () => _jsx(_Fragment, {}),
+};

package/build/renderers/getRenderFunction.js

@@ -0,0 +1,24 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export const getRenderFunction = (renderers) => {
+    function ComponentRenderer(props) {
+        const { type } = props;
+        if (type === 'hidden') {
+            return null;
+        }
+        const renderer = renderers.find(({ canRenderType, canRender = () => true }) => 
+        // once the type is matched, we know the props are of the correct type
+        canRenderType === type && canRender(props));
+        if (!renderer) {
+            throw new Error(`Could not find a renderer for ${type}`);
+        }
+        // if renderer defined, we know props are of the correct type
+        return renderer.render(props);
+    }
+    const render = (props) => {
+        if (!props) {
+            return _jsx(_Fragment, {});
+        }
+        return _jsx(ComponentRenderer, Object.assign({}, props), props.uid);
+    };
+    return render;
+};

package/build/renderers/getSchemaErrorMessageFunction.js

@@ -0,0 +1,111 @@
+import { formatDate } from '@transferwise/formatting';
+import errorMessages from '../common/messages/validation.messages';
+import genericErrorMessages from '../common/messages/generic-error.messages';
+import arrayErrorMessages from '../common/messages/validation.array.messages';
+import fileUploadMessages from '../common/messages/file-upload.messages';
+import multiFileUploadMessages from '../common/messages/multi-file-upload.messages';
+import downloadMessages from '../common/messages/download.messages';
+export function getSchemaErrorMessageFunction(formatMessage, locale) {
+    return (validationMessages) => createErrorMessageFunctions(validationMessages !== null && validationMessages !== void 0 ? validationMessages : {}, formatMessage, locale);
+}
+const createErrorMessageFunctions = (validationMessages, formatMessage, locale) => ({
+    minimum(minimum) {
+        var _a;
+        return ((_a = validationMessages.minimum) !== null && _a !== void 0 ? _a : formatMessage(errorMessages.minimum, {
+            minimum,
+        }));
+    },
+    maximum(maximum) {
+        var _a;
+        return ((_a = validationMessages.maximum) !== null && _a !== void 0 ? _a : formatMessage(errorMessages.maximum, {
+            maximum,
+        }));
+    },
+    minimumDate(minimumDate) {
+        var _a;
+        return ((_a = validationMessages.minimum) !== null && _a !== void 0 ? _a : formatMessage(errorMessages.minimumDate, {
+            minimum: formatDate(new Date(minimumDate), locale, formatDateOptions),
+        }));
+    },
+    maximumDate(maximumDate) {
+        var _a;
+        return ((_a = validationMessages.maximum) !== null && _a !== void 0 ? _a : formatMessage(errorMessages.maximumDate, {
+            maximum: formatDate(new Date(maximumDate), locale, formatDateOptions),
+        }));
+    },
+    invalidDate() {
+        var _a;
+        return (_a = validationMessages.invalidDate) !== null && _a !== void 0 ? _a : formatMessage(errorMessages.patternDate);
+    },
+    minLength(minLength) {
+        var _a;
+        return ((_a = validationMessages.minLength) !== null && _a !== void 0 ? _a : formatMessage(errorMessages.minLength, {
+            minLength,
+        }));
+    },
+    maxLength(maxLength) {
+        var _a;
+        return ((_a = validationMessages.maxLength) !== null && _a !== void 0 ? _a : formatMessage(errorMessages.maxLength, {
+            maxLength,
+        }));
+    },
+    minItems(minItems) {
+        var _a;
+        return ((_a = validationMessages.minItems) !== null && _a !== void 0 ? _a : formatMessage(arrayErrorMessages.minItemsError, {
+            minItems,
+        }));
+    },
+    maxItems(maxItems) {
+        var _a;
+        return ((_a = validationMessages.maxItems) !== null && _a !== void 0 ? _a : formatMessage(arrayErrorMessages.maxItemsError, {
+            maxItems,
+        }));
+    },
+    minFiles(minItems) {
+        var _a;
+        return ((_a = validationMessages.minItems) !== null && _a !== void 0 ? _a : formatMessage(multiFileUploadMessages.minItemsError, {
+            minItems,
+        }));
+    },
+    maxFiles(maxItems) {
+        var _a;
+        return ((_a = validationMessages.maxItems) !== null && _a !== void 0 ? _a : formatMessage(multiFileUploadMessages.maxItemsError, {
+            maxItems,
+        }));
+    },
+    maxSize() {
+        var _a;
+        return (_a = validationMessages.maxSize) !== null && _a !== void 0 ? _a : formatMessage(fileUploadMessages.maxFileSizeError);
+    },
+    accepts() {
+        var _a;
+        return (_a = validationMessages.accepts) !== null && _a !== void 0 ? _a : formatMessage(fileUploadMessages.wrongFileTypeError);
+    },
+    pattern() {
+        var _a;
+        return (_a = validationMessages.pattern) !== null && _a !== void 0 ? _a : formatMessage(errorMessages.pattern);
+    },
+    required() {
+        var _a;
+        return (_a = validationMessages.required) !== null && _a !== void 0 ? _a : formatMessage(errorMessages.required);
+    },
+    genericError() {
+        return formatMessage(genericErrorMessages.genericError);
+    },
+    genericErrorWithRetry() {
+        return formatMessage(genericErrorMessages.genericErrorRetryHint);
+    },
+    downloadStarted() {
+        return formatMessage(downloadMessages.downloadStarted);
+    },
+    downloadFailed() {
+        return formatMessage(downloadMessages.downloadFailed);
+    },
+    downloadSuccessful() {
+        return formatMessage(downloadMessages.downloadSuccessful);
+    },
+});
+const formatDateOptions = {
+    timeZone: 'UTC',
+    dateStyle: 'long',
+};

package/build/renderers/mappers/alertComponentToProps.js

@@ -0,0 +1,3 @@
+import { mapCallToActionOptional } from './utils/mapCallToAction';
+import { pick } from './utils/pick';
+export const alertComponentToProps = (component, rendererMapperProps) => (Object.assign(Object.assign(Object.assign({}, pick(component, 'uid', 'analyticsId', 'type', 'context', 'control', 'margin', 'markdown', 'media', 'tags', 'title')), { callToAction: mapCallToActionOptional(component.callToAction), onDismiss: component.dismiss, secondaryCallToAction: mapCallToActionOptional(component.secondaryCallToAction) }), rendererMapperProps));

package/build/renderers/mappers/allOfComponentToProps.js

@@ -0,0 +1,6 @@
+import { componentToRendererProps } from './componentToRendererProps';
+import { pick } from './utils/pick';
+export const allOfComponentToProps = (component, rendererMapperProps) => {
+    const childrenProps = component.components.map((c) => componentToRendererProps(c, rendererMapperProps));
+    return Object.assign(Object.assign(Object.assign({ type: 'form-section' }, pick(component, 'uid', 'analyticsId', 'control', 'description', 'help', 'media', 'tags', 'title')), rendererMapperProps), { children: childrenProps.map(rendererMapperProps.render), childrenProps });
+};

package/build/renderers/mappers/booleanInputComponentToProps.js

@@ -0,0 +1,3 @@
+import { inputComponentToProps } from './utils/inputComponentToProps';
+import { pick } from './utils/pick';
+export const booleanInputComponentToProps = (component, rendererMapperProps) => { var _a; return (Object.assign(Object.assign(Object.assign(Object.assign({}, inputComponentToProps(component, 'input-checkbox')), rendererMapperProps), pick(component, 'additionalText', 'supportingValues', 'inlineAlert')), { onChange: component.setValue, value: (_a = component.value) !== null && _a !== void 0 ? _a : false })); };

package/build/renderers/mappers/boxComponentToProps.js

@@ -0,0 +1,13 @@
+import { componentToRendererProps } from './componentToRendererProps';
+import { pick } from './utils/pick';
+export const boxComponentToProps = (component, rendererMapperProps) => {
+    const childrenProps = component.components.map((c) => componentToRendererProps(c, rendererMapperProps));
+    const { border, control } = component;
+    return Object.assign(Object.assign(Object.assign({}, pick(component, 'uid', 'analyticsId', 'type', 'control', 'width', 'margin', 'tags')), rendererMapperProps), { control: mapBoxControl({ border, control }), children: childrenProps.map(rendererMapperProps.render), childrenProps });
+};
+const mapBoxControl = ({ border, control, }) => {
+    if (border && control == null) {
+        return 'bordered';
+    }
+    return control;
+};

package/build/renderers/mappers/buttonComponentToProps.js

@@ -0,0 +1,4 @@
+import { pick } from './utils/pick';
+export const buttonComponentToProps = (component, rendererMapperProps) => {
+    return Object.assign(Object.assign(Object.assign({ type: 'button' }, pick(component, 'uid', 'analyticsId', 'title', 'control', 'context', 'margin', 'media', 'pinOrder', 'size', 'onClick', 'tags')), { disabled: component.disabled || rendererMapperProps.stepLoadingState !== 'idle' }), rendererMapperProps);
+};

package/build/renderers/mappers/collectionComponentToProps.js

@@ -0,0 +1,11 @@
+import { componentToRendererProps } from './componentToRendererProps';
+import { pick } from './utils/pick';
+import { mapAdditionalInfo, mapCallToActionOptional } from './utils/mapCallToAction';
+export const collectionComponentToProps = (component, rendererMapperProps) => {
+    var _a, _b;
+    var _c, _d, _e;
+    const { render } = rendererMapperProps;
+    const beforeSectionsProps = (_c = (_a = component.state.beforeSections) === null || _a === void 0 ? void 0 : _a.map((child) => componentToRendererProps(child, rendererMapperProps))) !== null && _c !== void 0 ? _c : [];
+    const afterSectionsProps = (_d = (_b = component.state.afterSections) === null || _b === void 0 ? void 0 : _b.map((child) => componentToRendererProps(child, rendererMapperProps))) !== null && _d !== void 0 ? _d : [];
+    return Object.assign(Object.assign(Object.assign({}, pick(component, 'uid', 'analyticsId', 'type', 'control', 'margin', 'tags')), rendererMapperProps), { status: component.status, state: Object.assign(Object.assign({}, component.state), { filters: (_e = component.state.filters) !== null && _e !== void 0 ? _e : [], sections: component.state.sections.map((section) => (Object.assign(Object.assign({}, section), { callToAction: mapCallToActionOptional(section.callToAction), items: section.items.map((item) => (Object.assign(Object.assign({}, item), { callToAction: mapCallToActionOptional(item.callToAction), additionalInfo: mapAdditionalInfo(item.additionalInfo), disabled: rendererMapperProps.stepLoadingState !== 'idle' || item.disabled }))) }))), beforeSectionsProps, beforeSections: beforeSectionsProps.map(render), afterSectionsProps, afterSections: afterSectionsProps.map(render) }) });
+};

package/build/renderers/mappers/columnsComponentToProps.js

@@ -0,0 +1,8 @@
+import { componentToRendererProps } from './componentToRendererProps';
+import { pick } from './utils/pick';
+export const columnsComponentToProps = (component, rendererMapperProps) => {
+    const startChildrenProps = component.startComponents.map((c) => componentToRendererProps(c, rendererMapperProps));
+    const endChildrenProps = component.endComponents.map((c) => componentToRendererProps(c, rendererMapperProps));
+    return Object.assign(Object.assign(Object.assign({}, rendererMapperProps), pick(component, 'uid', 'analyticsId', 'type', 'bias', 'control', 'margin', 'tags')), { startChildren: startChildrenProps.map(rendererMapperProps.render), endChildren: endChildrenProps.map(rendererMapperProps.render), startChildrenProps,
+        endChildrenProps });
+};

package/build/renderers/mappers/componentToRendererProps.js

@@ -0,0 +1,168 @@
+import { isHiddenComponent } from '../../utils/type-utils';
+import { alertComponentToProps } from './alertComponentToProps';
+import { allOfComponentToProps } from './allOfComponentToProps';
+import { booleanInputComponentToProps } from './booleanInputComponentToProps';
+import { boxComponentToProps } from './boxComponentToProps';
+import { collectionComponentToProps } from './collectionComponentToProps';
+import { buttonComponentToProps } from './buttonComponentToProps';
+import { columnsComponentToProps } from './columnsComponentToProps';
+import { constComponentToProps } from './constComponentToProps';
+import { containerComponentToProps } from './containerComponentToProps';
+import { dateInputComponentToProps } from './dateInputComponentToProps';
+import { decisionComponentToProps } from './decisionComponentToProps';
+import { dividerComponentToProps } from './dividerComponentToProps';
+import { externalComponentToProps } from './externalComponentToProps';
+import { formattedValueComponentToProps } from './formattedValueComponentToProps';
+import { formComponentToProps } from './formComponentToProps';
+import { headingComponentToProps } from './headingComponentToProps';
+import { hiddenComponentToProps } from './hiddenComponentToProps';
+import { imageComponentToProps } from './imageComponentToProps';
+import { instructionsComponentToProps } from './instructionsComponentToProps';
+import { integerInputComponentToProps } from './integerInputComponentToProps';
+import { listComponentToProps } from './listComponentToProps';
+import { loadingIndicatorComponentToProps } from './loadingIndicatorComponentToProps';
+import { markdownComponentToProps } from './markdownComponentToProps';
+import { mediaComponentToProps } from './mediaComponentToProps';
+import { modalComponentToProps } from './modalComponentToProps';
+import { modalLayoutComponentToProps } from './modalLayoutComponentToProps';
+import { moneyInputComponentToProps } from './moneyInputComponentToProps';
+import { multiSelectInputComponentToProps } from './multiSelectComponentToProps';
+import { multiUploadInputComponentToProps } from './multiUploadInputComponentToProps';
+import { numberInputComponentToProps } from './numberInputComponentToProps';
+import { objectComponentToProps } from './objectComponentToProps';
+import { paragraphComponentToProps } from './paragraphComponentToProps';
+import { persistAsyncComponentToProps } from './persistAsyncComponentToProps';
+import { progressComponentToProps } from './progressComponentToProps';
+import { repeatableComponentToProps } from './repeatableComponentToProps';
+import { reviewComponentToProps } from './reviewComponentToProps';
+import { searchComponentToProps } from './searchComponentToProps';
+import { sectionComponentToProps } from './sectionComponentToProps';
+import { selectInputComponentToProps } from './selectInputComponentToProps';
+import { statusListComponentToProps } from './statusListComponentToProps';
+import { tabsComponentToProps } from './tabsComponentToProps';
+import { textInputComponentToProps } from './textInputComponentToProps';
+import { tupleComponentToProps } from './tupleComponentToProps';
+import { uploadInputComponentToProps } from './uploadInputComponentToProps';
+import { updatableComponentToProps } from './updatableComponentToProps';
+import { upsellComponentToProps } from './upsellComponentToProps';
+export const componentToRendererProps = (component, mapperProps) => {
+    const trackEventWithLayoutId = ((eventName, properties) => mapperProps.trackEvent(eventName, Object.assign({ layoutId: component.analyticsId }, properties)));
+    const rendererMapperProps = component.kind === 'layout'
+        ? Object.assign(Object.assign({}, mapperProps), { trackEvent: trackEventWithLayoutId }) : mapperProps;
+    if (isHiddenComponent(component)) {
+        // Any component that is hidden is mapped to the same HiddenRendererProps, and won't be rendered
+        return hiddenComponentToProps(component, rendererMapperProps);
+    }
+    const componentProps = getComponentProps(component, rendererMapperProps);
+    const alertProps = getComponentAlertProps(component, rendererMapperProps);
+    if (alertProps) {
+        // A component with an alert is mapped to a container with the alert and the component
+        const childrenProps = [alertProps, componentProps];
+        return Object.assign({ type: 'container', uid: `${component.uid}-wrapper`, children: childrenProps.map(rendererMapperProps.render), childrenProps }, rendererMapperProps);
+    }
+    return componentProps;
+};
+const getComponentProps = (component, rendererMapperProps) => {
+    switch (component.type) {
+        case 'alert':
+            return alertComponentToProps(component, rendererMapperProps);
+        case 'all-of':
+            return allOfComponentToProps(component, rendererMapperProps);
+        case 'boolean':
+            return booleanInputComponentToProps(component, rendererMapperProps);
+        case 'box':
+            return boxComponentToProps(component, rendererMapperProps);
+        case 'button':
+            return buttonComponentToProps(component, rendererMapperProps);
+        case 'collection':
+            return collectionComponentToProps(component, rendererMapperProps);
+        case 'columns':
+            return columnsComponentToProps(component, rendererMapperProps);
+        case 'container':
+            return containerComponentToProps(component, rendererMapperProps);
+        case 'date':
+            return dateInputComponentToProps(component, rendererMapperProps);
+        case 'decision':
+            return decisionComponentToProps(component, rendererMapperProps);
+        case 'divider':
+            return dividerComponentToProps(component, rendererMapperProps);
+        case 'external-confirmation':
+            return externalComponentToProps(component, rendererMapperProps);
+        case 'formatted-value':
+            return formattedValueComponentToProps(component, rendererMapperProps);
+        case 'form':
+            return formComponentToProps(component, rendererMapperProps);
+        case 'heading':
+            return headingComponentToProps(component, rendererMapperProps);
+        case 'const':
+            return constComponentToProps(component, rendererMapperProps);
+        case 'image':
+            return imageComponentToProps(component, rendererMapperProps);
+        case 'instructions':
+            return instructionsComponentToProps(component, rendererMapperProps);
+        case 'integer':
+            return integerInputComponentToProps(component, rendererMapperProps);
+        case 'list':
+            return listComponentToProps(component, rendererMapperProps);
+        case 'loading-indicator':
+            return loadingIndicatorComponentToProps(component, rendererMapperProps);
+        case 'markdown':
+            return markdownComponentToProps(component, rendererMapperProps);
+        case 'media':
+            return mediaComponentToProps(component, rendererMapperProps);
+        case 'modal-layout':
+            return modalLayoutComponentToProps(component, rendererMapperProps);
+        case 'modal':
+            return modalComponentToProps(component, rendererMapperProps);
+        case 'money-input':
+            return moneyInputComponentToProps(component, rendererMapperProps);
+        case 'multi-select':
+            return multiSelectInputComponentToProps(component, rendererMapperProps);
+        case 'multi-upload':
+            return multiUploadInputComponentToProps(component, rendererMapperProps);
+        case 'number':
+            return numberInputComponentToProps(component, rendererMapperProps);
+        case 'object':
+            return objectComponentToProps(component, rendererMapperProps);
+        case 'paragraph':
+            return paragraphComponentToProps(component, rendererMapperProps);
+        case 'progress':
+            return progressComponentToProps(component, rendererMapperProps);
+        case 'repeatable':
+            return repeatableComponentToProps(component, rendererMapperProps);
+        case 'review':
+            return reviewComponentToProps(component, rendererMapperProps);
+        case 'search':
+            return searchComponentToProps(component, rendererMapperProps);
+        case 'section':
+            return sectionComponentToProps(component, rendererMapperProps);
+        case 'select':
+            return selectInputComponentToProps(component, rendererMapperProps);
+        case 'status-list':
+            return statusListComponentToProps(component, rendererMapperProps);
+        case 'tabs':
+            return tabsComponentToProps(component, rendererMapperProps);
+        case 'text':
+            return textInputComponentToProps(component, rendererMapperProps);
+        case 'tuple':
+            return tupleComponentToProps(component, rendererMapperProps);
+        case 'upload':
+            return uploadInputComponentToProps(component, rendererMapperProps);
+        case 'upsell':
+            return upsellComponentToProps(component, rendererMapperProps);
+        case 'updatable':
+            return updatableComponentToProps(component, rendererMapperProps);
+        case 'persist-async':
+            return persistAsyncComponentToProps(component, rendererMapperProps);
+        case 'root':
+            throw new Error('Root components are only mapped from rootComponentToProps');
+        case 'step':
+            throw new Error('Step components are only mapped from rootComponentToProps');
+        case 'subflow':
+            throw new Error('Subflow components are only mapped from rootComponentToProps');
+        default:
+            throw new Error('Unknown component type');
+    }
+};
+const getComponentAlertProps = (component, rendererMapperProps) => 'alert' in component && component.alert
+    ? Object.assign({ type: 'alert', uid: `${component.uid}-alert`, margin: 'md', context: component.alert.context, markdown: component.alert.content }, rendererMapperProps) : null;

package/build/renderers/mappers/constComponentToProps.js

@@ -0,0 +1,5 @@
+import { componentToRendererProps } from './componentToRendererProps';
+export const constComponentToProps = (component, rendererMapperProps) => {
+    const childrenProps = component.layout.map((c) => componentToRendererProps(c, rendererMapperProps));
+    return Object.assign({ type: 'container', uid: `${component.uid}-wrapper`, childrenProps, children: childrenProps.map(rendererMapperProps.render) }, rendererMapperProps);
+};

package/build/renderers/mappers/containerComponentToProps.js

@@ -0,0 +1,8 @@
+import { componentToRendererProps } from './componentToRendererProps';
+import { pick } from './utils/pick';
+export const containerComponentToProps = (component, rendererMapperProps) => {
+    const childrenProps = component
+        .getChildren()
+        .map((c) => componentToRendererProps(c, rendererMapperProps));
+    return Object.assign(Object.assign(Object.assign({}, pick(component, 'type', 'uid')), { children: childrenProps.map(rendererMapperProps.render), childrenProps }), rendererMapperProps);
+};