@wise/dynamic-flow-client 3.3.2 → 3.4.0-experimental-ed080a1

package/build/legacy/step/layoutStep/LayoutStep.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useDynamicFlow, useEventDispatcher } from '../../common/contexts';
+import { useStepPolling } from '../../common/hooks';
+import { isEmpty } from '../../common/validators';
+import { DynamicLayout } from '../../layout';
+import { convertStepToLayout, inlineReferences } from './utils';
+var getComponents = function (step, options) {
+    var _a;
+    if (isEmpty(step)) {
+        return [];
+    }
+    var layout = convertStepToLayout(step, options);
+    return inlineReferences({
+        layout: layout,
+        schemas: step.schemas || [],
+        actions: step.actions || [],
+        model: (_a = step.model) !== null && _a !== void 0 ? _a : null
+    });
+};
+var LayoutStep = function (props) {
+    var stepSpecification = props.stepSpecification, stepLayoutOptions = props.stepLayoutOptions, submitted = props.submitted, model = props.model, formErrors = props.formErrors, onModelChange = props.onModelChange;
+    var components = getComponents(stepSpecification, stepLayoutOptions);
+    var _a = useDynamicFlow(), loading = _a.loading, registerPersistAsyncPromise = _a.registerPersistAsyncPromise;
+    var onEvent = useEventDispatcher();
+    var onAction = !loading
+        ? props.onAction
+        : function () {
+            onEvent('Dynamic Flow - onAction supressed', { reason: 'LayoutStep - loading state' });
+        };
+    useStepPolling(stepSpecification.polling, onAction);
+    return (_jsx(DynamicLayout, { components: components, submitted: submitted, model: model, errors: formErrors, onAction: onAction, onModelChange: onModelChange, onPersistAsync: registerPersistAsyncPromise }));
+};
+export default LayoutStep;

package/build/legacy/step/layoutStep/index.js

@@ -0,0 +1 @@
+export { default } from './LayoutStep';

package/build/legacy/step/layoutStep/utils/index.js

@@ -0,0 +1,2 @@
+export { convertStepToLayout } from './layout-utils';
+export { inlineReferences } from './inline-reference-utils';

package/build/legacy/step/layoutStep/utils/inline-reference-utils.js

@@ -0,0 +1,105 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { convertStepActionToDynamicAction } from './layout-utils';
+export function inlineReferences(_a) {
+    var layout = _a.layout, schemas = _a.schemas, actions = _a.actions, model = _a.model;
+    if (!layout) {
+        return [];
+    }
+    if (!schemas) {
+        return layout;
+    }
+    return layout.map(function (component) {
+        if (component.type === 'form') {
+            return inlineFormSchema({ formComponent: component, schemas: schemas });
+        }
+        if (component.type === 'decision') {
+            return inlineDecisionActions({ decisionComponent: component, actions: actions });
+        }
+        if (component.type === 'button') {
+            return inlineAction({ actionComponent: component, actions: actions });
+        }
+        if (component.type === 'box') {
+            return __assign(__assign({}, component), { components: inlineReferences({ layout: component.components, schemas: schemas, actions: actions, model: model }) });
+        }
+        if (component.type === 'modal') {
+            return __assign(__assign({}, component), { components: inlineReferences({
+                    layout: component.content.components,
+                    schemas: schemas,
+                    actions: actions,
+                    model: model
+                }) });
+        }
+        if (component.type === 'columns') {
+            return __assign(__assign({}, component), { left: inlineReferences({ layout: component.left, schemas: schemas, actions: actions, model: model }), right: inlineReferences({ layout: component.right, schemas: schemas, actions: actions, model: model }) });
+        }
+        return component;
+    });
+}
+function inlineFormSchema(_a) {
+    var formComponent = _a.formComponent, schemas = _a.schemas;
+    if (formComponent.schemaId) {
+        return {
+            type: 'form',
+            margin: formComponent.margin,
+            schema: getSchemaById(schemas, formComponent.schemaId)
+        };
+    }
+    if (formComponent.schema && isReference(formComponent.schema) && formComponent.schema.$ref) {
+        return {
+            type: 'form',
+            margin: formComponent.margin,
+            schema: getSchemaById(schemas, formComponent.schema.$ref)
+        };
+    }
+    if (formComponent.schema && !isReference(formComponent.schema)) {
+        return __assign({}, formComponent);
+    }
+    throw new Error('Invalid form layout component. Missing "schema" or "schemaId" properties.');
+}
+function inlineDecisionActions(_a) {
+    var _b;
+    var decisionComponent = _a.decisionComponent, actions = _a.actions;
+    var newOptions = (_b = decisionComponent === null || decisionComponent === void 0 ? void 0 : decisionComponent.options) === null || _b === void 0 ? void 0 : _b.map(function (option) {
+        return option.action && isReference(option.action)
+            ? __assign(__assign({}, option), { action: getActionById(actions, option.action.$ref) }) : option;
+    });
+    return __assign(__assign({}, decisionComponent), { options: newOptions });
+}
+function inlineAction(_a) {
+    var _b;
+    var actionComponent = _a.actionComponent, actions = _a.actions;
+    if (actionComponent.action &&
+        isReference(actionComponent.action) &&
+        ((_b = actionComponent.action) === null || _b === void 0 ? void 0 : _b.$ref)) {
+        var newAction = getActionById(actions, actionComponent.action.$ref);
+        return convertStepActionToDynamicAction(newAction);
+    }
+    return actionComponent;
+}
+function getSchemaById(schemas, id) {
+    var schema = schemas.find(function (schema) { return schema.$id === id; });
+    if (!schema) {
+        throw new Error("Fatal Error. Schema not found. $id ".concat(id));
+    }
+    return schema;
+}
+function getActionById(actions, id) {
+    var action = actions.find(function (action) { return action.$id === id; });
+    if (!action) {
+        throw new Error("Fatal Error. Action not found. $id ".concat(id));
+    }
+    return action;
+}
+function isReference(block) {
+    return Object.hasOwnProperty.call(block, '$ref');
+}

package/build/legacy/step/layoutStep/utils/layout-utils.js

@@ -0,0 +1,212 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+export function convertStepToLayout(step, _a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.displayStepTitle, displayStepTitle = _c === void 0 ? true : _c;
+    // This condition is meant as a temporary hack until mobile platforms will be refactored to fully support the layout property
+    if (step.layout) {
+        return addMissingTitleAndDescriptionToStep(step, displayStepTitle);
+    }
+    switch (step.type) {
+        case 'final':
+            return convertFinalStepToDynamicLayout(step);
+        case 'decision':
+            return convertDecisionStepToDynamicLayout(step);
+        case 'external':
+            return convertExternalStepToDynamicLayout(step);
+        default:
+            return convertFormStepToDynamicLayout(step);
+    }
+}
+function convertCommonComponents(step) {
+    var layout = [];
+    if (step.title) {
+        layout.push(convertStepTitleToDynamicHeading(step.title));
+    }
+    if (step.image) {
+        var image = convertStepImageToDynamicImage(step.image);
+        layout.push(image);
+    }
+    if (step.description) {
+        layout.push(convertStepDescriptionToDynamicParagraph(step.description));
+    }
+    return layout;
+}
+function convertExternalStepToDynamicLayout(step) {
+    return __spreadArray(__spreadArray([], convertCommonComponents(step), true), [convertStepToExternalComponent(step)], false);
+}
+function convertStepToExternalComponent(step) {
+    return {
+        type: 'external',
+        requestUrl: step.requestUrl,
+        polling: step.polling,
+        responseHandlers: step.responseHandlers,
+        retryTitle: step.retryTitle
+    };
+}
+function convertFormStepToDynamicLayout(step) {
+    var layout = convertCommonComponents(step);
+    if (step.reviewFields) {
+        layout.push(convertStepReviewToDynamicReview(step.reviewFields));
+    }
+    if (step.schemas) {
+        layout.push.apply(layout, getSchemaLayout(step));
+    }
+    if (step.actions) {
+        var actions = step.actions.map(convertStepActionToDynamicAction);
+        layout.push(dynamicBox(actions, 'md'));
+    }
+    return layout;
+}
+function convertFinalStepToDynamicLayout(step) {
+    var layout = [];
+    if (step.details) {
+        if (step.details.image) {
+            var image = convertFinalStepImageToDynamicImage(step.details.image);
+            layout.push(image);
+        }
+        if (step.details.title) {
+            layout.push(convertStepTitleToDynamicHeading(step.details.title));
+        }
+        if (step.details.description) {
+            layout.push(convertStepDescriptionToDynamicParagraph(step.details.description));
+        }
+    }
+    if (step.actions) {
+        var actions = step.actions.map(function (action) {
+            return convertStepActionToDynamicAction(__assign(__assign({}, action), { type: action.type || 'primary' }));
+        });
+        layout.push(dynamicBox(actions, 'md'));
+    }
+    return layout;
+}
+function convertDecisionStepToDynamicLayout(step) {
+    var layout = convertCommonComponents(step);
+    if (step.options) {
+        layout.push(convertStepDecisionToDynamicDecision(step.options));
+    }
+    return layout;
+}
+function dynamicBox(components, size) {
+    return {
+        type: 'box',
+        width: size || 'md',
+        components: components
+    };
+}
+function convertStepTitleToDynamicHeading(title) {
+    return {
+        type: 'heading',
+        text: title,
+        size: 'lg',
+        margin: 'lg',
+        align: 'center'
+    };
+}
+function convertStepDescriptionToDynamicParagraph(description) {
+    return {
+        type: 'paragraph',
+        text: description,
+        align: 'center'
+    };
+}
+function convertStepSchemaToDynamicForm(schema) {
+    return { type: 'form', schema: schema };
+}
+function convertStepDecisionToDynamicDecision(options) {
+    return {
+        type: 'decision',
+        options: options.map(convertStepDecisionOption)
+    };
+}
+function convertStepDecisionOption(option) {
+    return {
+        title: option.title,
+        description: option.description,
+        action: {
+            title: option.title,
+            method: 'GET',
+            url: option.url,
+            disabled: option.disabled
+        }
+    };
+}
+function convertStepImageToDynamicImage(image) {
+    return {
+        type: 'image',
+        url: image.url,
+        text: image.text,
+        margin: image.margin || 'lg',
+        size: image.size || 'md'
+    };
+}
+function convertFinalStepImageToDynamicImage(image) {
+    return typeof image === 'string'
+        ? {
+            type: 'image',
+            url: image,
+            text: undefined,
+            margin: 'lg',
+            size: 'md'
+        }
+        : convertStepImageToDynamicImage(image);
+}
+export function convertStepActionToDynamicAction(action) {
+    var newAction = __assign(__assign({}, action), { title: action.title });
+    return {
+        type: 'button',
+        action: newAction
+    };
+}
+function convertStepReviewToDynamicReview(reviewFields) {
+    return {
+        type: 'review',
+        title: reviewFields.title,
+        fields: reviewFields.fields.map(convertReviewFieldToDefinition)
+    };
+}
+function convertReviewFieldToDefinition(reviewField) {
+    return {
+        label: reviewField.title,
+        value: reviewField.value
+    };
+}
+function getSchemaLayout(step) {
+    var layout = [];
+    if (step.schemas && step.schemas[0]) {
+        var schema = step.schemas[0];
+        var dynamicForm = convertStepSchemaToDynamicForm(schema);
+        if (isWideForm()) {
+            layout.push(dynamicForm);
+        }
+        else {
+            layout.push(dynamicBox([dynamicForm], 'md'));
+        }
+    }
+    return layout;
+}
+function isWideForm() {
+    // For the time being we won't support automatically widening forms
+    // Unlike it V2, there is no way to easily iterate and identify narrow fields
+    return false;
+}
+function addMissingTitleAndDescriptionToStep(step, displayStepTitle) {
+    return __spreadArray(__spreadArray(__spreadArray([], (displayStepTitle && step.title ? [convertStepTitleToDynamicHeading(step.title)] : []), true), (step.description ? [convertStepDescriptionToDynamicParagraph(step.description)] : []), true), (step.layout || []), true);
+}

package/build/main.js

@@ -13973,13 +13973,13 @@ function DynamicFlowCore(props) {
     return abortControllerRef.current.signal;
   };
   (0, import_react58.useEffect)(() => {
-    trackEvent("Flow Started");
+    trackEvent("Initiated");
     if (!initialStep && initialAction) {
       void onAction(initialAction);
     }
     if (initialStep && !initialAction) {
       initialiseWithStep(initialStep, null);
-      trackEvent("Step Shown");
+      trackEvent("Step Shown", { isFirstStep: true });
     }
   }, []);
   const initialiseWithStep = (0, import_react58.useCallback)(
@@ -14051,14 +14051,14 @@ function DynamicFlowCore(props) {
   );
   const closeWithError = (0, import_react58.useCallback)(
     (error, analytics) => {
-      trackEvent("Flow Failed", __spreadValues({}, analytics));
+      trackEvent("Failed", __spreadValues({}, analytics));
       onError(error);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
   const onAction = (0, import_react58.useCallback)(async (action) => {
-    var _a2, _b, _c, _d, _e;
+    var _a2, _b, _c, _d;
     try {
       (_a2 = stepComponentRef.current) == null ? void 0 : _a2.setLoadingState("loading");
       const model = (_c = await ((_b = stepComponentRef.current) == null ? void 0 : _b.getSubmittableValue())) != null ? _c : null;
@@ -14073,12 +14073,13 @@ function DynamicFlowCore(props) {
       switch (command.type) {
         case "complete": {
           onCompletion(command.result);
-          trackEvent("Flow Succeeded");
+          trackEvent("Succeeded");
           break;
         }
         case "replace-step": {
+          const isFirstStep = stepRef.current === null;
           initialiseWithStep(command.step, command.etag);
-          trackEvent("Step Shown");
+          trackEvent("Step Shown", { isFirstStep });
           break;
         }
         case "error": {
@@ -14093,26 +14094,7 @@ function DynamicFlowCore(props) {
         }
         case "refresh": {
           const { refreshUrl, errors = {} } = command.body;
-          try {
-            (_e = stepComponentRef.current) == null ? void 0 : _e.setLoadingState("loading");
-            const refreshCommand = await executeRefresh({
-              abortSignal: abortCurrentAndGetNewAbortSignal(),
-              url: refreshUrl,
-              model,
-              etag: etagRef.current,
-              httpClient,
-              trackEvent
-            });
-            switch (refreshCommand.type) {
-              case "refresh-step":
-                initialiseWithStep(__spreadProps(__spreadValues({}, refreshCommand.step), { errors }), refreshCommand.etag);
-                break;
-              default:
-                throw new Error("Failed to refresh");
-            }
-          } catch (e) {
-            closeWithError(e, {});
-          }
+          void onRefresh(void 0, refreshUrl, errors);
           break;
         }
       }
@@ -14121,7 +14103,7 @@ function DynamicFlowCore(props) {
     }
   }, []);
   const onRefresh = (0, import_react58.useCallback)(
-    async (schemaId, refreshUrl = "") => {
+    async (schemaId, refreshUrl = "", errorsOverride) => {
       var _a2, _b, _c, _d;
       try {
         (_a2 = stepComponentRef.current) == null ? void 0 : _a2.setLoadingState("loading");
@@ -14137,7 +14119,10 @@ function DynamicFlowCore(props) {
         });
         switch (command.type) {
           case "refresh-step":
-            initialiseWithStep(command.step, command.etag);
+            {
+              const errors = errorsOverride != null ? errorsOverride : command.step.errors;
+              initialiseWithStep(__spreadProps(__spreadValues({}, command.step), { errors }), command.etag);
+            }
             break;
           case "error": {
             closeWithError(new Error("Failed to refresh"), command.body.analytics);