@wise/dynamic-flow-client 3.9.0 → 3.9.1-experimental-152372b

package/build/main.mjs

@@ -1132,7 +1132,6 @@ var i18n_default = translations;
 
 // src/revamp/DynamicFlowWise.tsx
 import { useMemo as useMemo5 } from "react";
-import { useIntl as useIntl8 } from "react-intl";
 
 // src/common/httpClientContext/HttpClientContext.tsx
 import { createContext, useContext, useMemo } from "react";
@@ -12146,19 +12145,10 @@ import { jsx as jsx57 } from "react/jsx-runtime";
 var wiseRenderers = getWiseRenderers();
 function DynamicFlowWise(props) {
   const { httpClient, renderers } = props;
-  const { locale } = useIntl8();
-  const wiseHttpClient = useMemo5(
-    () => makeWiseHttpClient(httpClient, locale),
-    [httpClient, locale]
-  );
   const mergedRenderers = useMemo5(() => [...renderers != null ? renderers : [], ...wiseRenderers], [renderers]);
-  return /* @__PURE__ */ jsx57(HttpClientProvider, { httpClient: wiseHttpClient, children: /* @__PURE__ */ jsx57(DynamicFlowCore, __spreadProps(__spreadValues({}, props), { renderers: mergedRenderers })) });
+  return /* @__PURE__ */ jsx57(HttpClientProvider, { httpClient, children: /* @__PURE__ */ jsx57(DynamicFlowCore, __spreadProps(__spreadValues({}, props), { renderers: mergedRenderers })) });
 }
 var DynamicFlowWise_default = DynamicFlowWise;
-var makeWiseHttpClient = (httpClient, locale) => async (input, init) => httpClient(
-  input,
-  mergeRequestInit(init, { credentials: "include", headers: { "accept-language": locale } })
-);
 
 // src/revamp/DynamicFragmentWise.tsx
 import { forwardRef as forwardRef3, useImperativeHandle, useMemo as useMemo6 } from "react";
@@ -12506,7 +12496,6 @@ function isReference(block) {
 
 // src/legacy/dynamicFlow/DynamicFlow.tsx
 import { useCallback as useCallback11, useEffect as useEffect25, useMemo as useMemo22, useState as useState34 } from "react";
-import { useIntl as useIntl25 } from "react-intl";
 
 // src/legacy/common/contexts/dynamicFlowContexts/DynamicFlowContexts.tsx
 import { createContext as createContext4, useContext as useContext5, useMemo as useMemo7 } from "react";
@@ -13427,11 +13416,11 @@ function useExternalStepPolling(polling, onAction) {
 
 // src/legacy/common/hooks/usePersistAsync/usePersistAsync.ts
 import { useState as useState28 } from "react";
-import { useIntl as useIntl20 } from "react-intl";
+import { useIntl as useIntl19 } from "react-intl";
 
 // src/legacy/jsonSchemaForm/persistAsyncSchema/persistAsyncBasicSchema/PersistAsyncBasicSchema.tsx
 import { useEffect as useEffect17, useState as useState27 } from "react";
-import { useIntl as useIntl19 } from "react-intl";
+import { useIntl as useIntl18 } from "react-intl";
 
 // src/legacy/common/constants/DateMode.ts
 var DateMode = {
@@ -13827,7 +13816,7 @@ var DynamicDivider_default = DynamicDivider;
 // src/legacy/layout/external/DynamicExternal.tsx
 import { Button as Button7, Loader as Loader2, Size as Size2 } from "@transferwise/components";
 import { useCallback as useCallback6, useEffect as useEffect7 } from "react";
-import { useIntl as useIntl9 } from "react-intl";
+import { useIntl as useIntl8 } from "react-intl";
 
 // src/legacy/layout/external/DynamicExternal.messages.ts
 import { defineMessages as defineMessages9 } from "react-intl";
@@ -13843,7 +13832,7 @@ var DynamicExternal_messages_default = defineMessages9({
 import { Fragment as Fragment10, jsx as jsx73, jsxs as jsxs24 } from "react/jsx-runtime";
 var DynamicExternal = ({ component, onAction }) => {
   const { requestUrl, responseHandlers, polling, retryTitle } = component;
-  const intl = useIntl9();
+  const intl = useIntl8();
   const openExternalUrl = useCallback6(
     () => window.open(requestUrl, "df-external-window"),
     [requestUrl]
@@ -13925,7 +13914,7 @@ import { useMemo as useMemo11, useState as useState13 } from "react";
 // src/legacy/jsonSchemaForm/controlFeedback/ControlFeedback.tsx
 import { InlineAlert as InlineAlert4 } from "@transferwise/components";
 import { formatDate as formatDate3 } from "@transferwise/formatting";
-import { useIntl as useIntl10 } from "react-intl";
+import { useIntl as useIntl9 } from "react-intl";
 import { jsx as jsx75, jsxs as jsxs26 } from "react/jsx-runtime";
 function ControlFeedback(props) {
   var _a;
@@ -13951,7 +13940,7 @@ ControlFeedback.defaultProps = {
   validationAsyncSuccessMessage: null
 };
 function useDefaultValidationMessages(schema) {
-  const { formatMessage, locale } = useIntl10();
+  const { formatMessage, locale } = useIntl9();
   const formattedMessages = {
     type: formatMessage(validation_messages_default.type),
     minimum: formatMessage(validation_messages_default.minimum, {
@@ -14038,7 +14027,7 @@ function constructUploadError(response) {
 }
 
 // src/legacy/jsonSchemaForm/arrayTypeSchema/arrayListSchema/multipleFileUploadSchema/utils/useFormattedDefaultErrorMessages.tsx
-import { useIntl as useIntl11 } from "react-intl";
+import { useIntl as useIntl10 } from "react-intl";
 
 // src/legacy/common/messages.ts
 import { defineMessages as defineMessages10 } from "react-intl";
@@ -14055,7 +14044,7 @@ function useFormattedDefaultErrorMessages({
   maxItems,
   minItems
 }) {
-  const { formatMessage } = useIntl11();
+  const { formatMessage } = useIntl10();
   const { maxFileSizeError, maxItemsError, minItemsError } = multi_file_upload_messages_default;
   return {
     maxFileSizeErrorMessage: formatMessage(maxFileSizeError),
@@ -14175,7 +14164,7 @@ function getValidationMessages(schema, required, defaultErrorMessages) {
 var import_classnames9 = __toESM(require_classnames());
 import { SelectInput as SelectInput2, SelectInputOptionContent as SelectInputOptionContent2 } from "@transferwise/components";
 import { useEffect as useEffect8, useMemo as useMemo12, useState as useState14 } from "react";
-import { useIntl as useIntl12 } from "react-intl";
+import { useIntl as useIntl11 } from "react-intl";
 
 // src/legacy/jsonSchemaForm/schemaFormControl/utils/mapping-utils.tsx
 import { Avatar as Avatar6, AvatarType as AvatarType5 } from "@transferwise/components";
@@ -14288,7 +14277,7 @@ function MultiSelectSchema({
   errors,
   onChange
 }) {
-  const { formatMessage, locale } = useIntl12();
+  const { formatMessage, locale } = useIntl11();
   const { disabled, items, validationMessages, placeholder } = schema;
   const options = items.oneOf.map((item) => mapConstSchemaToOption(item, "select"));
   const id = useMemo12(() => schema.$id || generateRandomId(), [schema.$id]);
@@ -14384,7 +14373,7 @@ var getInitialModelIndices = (model, options) => {
 import { Header as Header7, Modal as Modal3, NavigationOption as NavigationOption6 } from "@transferwise/components";
 import { Plus as Plus2 } from "@transferwise/icons";
 import { useMemo as useMemo13, useState as useState16 } from "react";
-import { useIntl as useIntl14 } from "react-intl";
+import { useIntl as useIntl13 } from "react-intl";
 
 // src/legacy/jsonSchemaForm/arrayTypeSchema/arrayListSchema/repeatableSchema/ItemSummary.tsx
 import { NavigationOption as NavigationOption5 } from "@transferwise/components";
@@ -14404,7 +14393,7 @@ function ItemSummaryOption2({ item, onClick }) {
 
 // src/legacy/jsonSchemaForm/arrayTypeSchema/arrayListSchema/repeatableSchema/RepeatableSchemaStep.tsx
 import { useState as useState15 } from "react";
-import { useIntl as useIntl13 } from "react-intl";
+import { useIntl as useIntl12 } from "react-intl";
 import { jsx as jsx80 } from "react/jsx-runtime";
 function RepeatableSchemaStep({
   type,
@@ -14415,7 +14404,7 @@ function RepeatableSchemaStep({
   onModelChange,
   onAction
 }) {
-  const { formatMessage } = useIntl13();
+  const { formatMessage } = useIntl12();
   const [filename, setFilename] = useState15(void 0);
   const step = {
     layout: [
@@ -14722,7 +14711,7 @@ function RepeatableSchema({
     setEditableItem({ item: null, model: null });
     setOpenModalType(null);
   };
-  const { formatMessage } = useIntl14();
+  const { formatMessage } = useIntl13();
   const validations = getValidationFailures(model, schema, required);
   const base64ValidationMessages = useFormattedDefaultErrorMessages({
     minItems: schema.minItems,
@@ -14938,10 +14927,10 @@ import { useEffect as useEffect11, useMemo as useMemo14, useState as useState18
 
 // src/legacy/jsonSchemaForm/help/Help.tsx
 import { Markdown as Markdown6, Info as Info2 } from "@transferwise/components";
-import { useIntl as useIntl15 } from "react-intl";
+import { useIntl as useIntl14 } from "react-intl";
 import { jsx as jsx85 } from "react/jsx-runtime";
 function Help2(props) {
-  const intl = useIntl15();
+  const intl = useIntl14();
   return /* @__PURE__ */ jsx85(
     Info2,
     {
@@ -16184,7 +16173,7 @@ var PromotedOneOfSchema_default = PromotedOneOfSchema;
 
 // src/legacy/jsonSchemaForm/readOnlySchema/ReadOnlySchema.tsx
 import { DefinitionList as DefinitionList2, Layout } from "@transferwise/components";
-import { useIntl as useIntl16 } from "react-intl";
+import { useIntl as useIntl15 } from "react-intl";
 
 // src/legacy/jsonSchemaForm/readOnlySchema/ReadOnlySchema.messages.ts
 import { defineMessages as defineMessages12 } from "react-intl";
@@ -16205,7 +16194,7 @@ var ReadOnlySchema_messages_default = defineMessages12({
 import { Fragment as Fragment17, jsx as jsx96, jsxs as jsxs35 } from "react/jsx-runtime";
 function ReadOnlySchema({ schema, model }) {
   const { title = "" } = schema;
-  const { formatMessage } = useIntl16();
+  const { formatMessage } = useIntl15();
   const value = getValueForSchema({ schema, model, formatMessage });
   return /* @__PURE__ */ jsx96(DefinitionList2, { layout: Layout.VERTICAL_ONE_COLUMN, definitions: [{ title, value, key: "" }] });
 }
@@ -16706,7 +16695,7 @@ var DynamicLoadingIndicator_default = DynamicLoadingIndicator;
 
 // src/legacy/layout/paragraph/DynamicParagraph.tsx
 import { Button as Button8 } from "@transferwise/components";
-import { useIntl as useIntl17 } from "react-intl";
+import { useIntl as useIntl16 } from "react-intl";
 
 // src/legacy/layout/paragraph/useSnackBarIfAvailable.ts
 import { SnackbarContext as SnackbarContext2 } from "@transferwise/components";
@@ -16731,7 +16720,7 @@ function BasicDynamicParagraph({ component }) {
   ] });
 }
 function CopyableDynamicParagraph({ component }) {
-  const { formatMessage } = useIntl17();
+  const { formatMessage } = useIntl16();
   const createSnackbar = useSnackBarIfAvailable2();
   const { text } = component;
   const copy = () => {
@@ -16834,7 +16823,7 @@ var SearchInput = ({ title, value, onFocus, onChange }) => {
 
 // src/legacy/layout/search/SearchResults.tsx
 import { NavigationOption as NavigationOption7, NavigationOptionsList as NavigationOptionsList4 } from "@transferwise/components";
-import { useIntl as useIntl18 } from "react-intl";
+import { useIntl as useIntl17 } from "react-intl";
 import { jsx as jsx110, jsxs as jsxs41 } from "react/jsx-runtime";
 function SearchResults2({ results, emptyMessage, onSelect }) {
   if (results.length === 0) {
@@ -16854,7 +16843,7 @@ function SearchResults2({ results, emptyMessage, onSelect }) {
   )) });
 }
 function ErrorResult2({ onRetrySearch }) {
-  const intl = useIntl18();
+  const intl = useIntl17();
   return /* @__PURE__ */ jsxs41("p", { className: "m-t-2", children: [
     intl.formatMessage(generic_error_messages_default.genericError),
     "\xA0",
@@ -17221,7 +17210,7 @@ var controlTypesWithPersistOnChange = /* @__PURE__ */ new Set([
 ]);
 function PersistAsyncBasicSchema(props) {
   const { schema, required, submitted, errors, onChange, onPersistAsync } = props;
-  const intl = useIntl19();
+  const intl = useIntl18();
   const httpClient = useHttpClient();
   const onEvent = useEventDispatcher();
   const [persistAsyncModel, setPersistAsyncModel] = useState27(null);
@@ -17319,7 +17308,7 @@ var PersistAsyncBasicSchema_default = PersistAsyncBasicSchema;
 var usePersistAsync = (persistAsync) => {
   const [abortController, setAbortController] = useState28(null);
   const httpClient = useHttpClient();
-  const intl = useIntl20();
+  const intl = useIntl19();
   const { schema } = persistAsync;
   async function handlePersistAsync(model) {
     const isInvalidSchema = model instanceof Blob ? !isBlobSchema2(schema) : !isValidSchema(model, schema);
@@ -17550,7 +17539,7 @@ import { useEffect as useEffect24, useState as useState31 } from "react";
 
 // src/legacy/step/cameraStep/cameraCapture/CameraCapture.tsx
 import { useCallback as useCallback10, useEffect as useEffect23, useMemo as useMemo20, useRef as useRef8, useState as useState30 } from "react";
-import { useIntl as useIntl23 } from "react-intl";
+import { useIntl as useIntl22 } from "react-intl";
 import Webcam from "react-webcam";
 
 // src/legacy/step/cameraStep/cameraCapture/CameraCapture.messages.ts
@@ -17615,14 +17604,14 @@ var CameraCapture_messages_default = defineMessages13({
 
 // src/legacy/step/cameraStep/cameraCapture/components/bottomBar/BottomBar.tsx
 import { Button as Button10, ControlType, Priority, Size as Size3 } from "@transferwise/components";
-import { useIntl as useIntl21 } from "react-intl";
+import { useIntl as useIntl20 } from "react-intl";
 import { jsx as jsx116, jsxs as jsxs45 } from "react/jsx-runtime";
 var CaptureBottomBar = ({ onCapture }) => /* @__PURE__ */ jsx116("div", { className: "bottom-bar", children: /* @__PURE__ */ jsx116(CaptureButton, { onClick: onCapture }) });
 var ReviewBottomBar = ({
   onSubmit,
   onRetry
 }) => {
-  const intl = useIntl21();
+  const intl = useIntl20();
   return /* @__PURE__ */ jsx116("div", { className: "bottom-bar p-x-2", children: /* @__PURE__ */ jsx116("div", { className: "row", children: /* @__PURE__ */ jsxs45("div", { className: "col-xs-12 col-md-6 col-md-offset-3", children: [
     /* @__PURE__ */ jsx116(
       Button10,
@@ -17661,7 +17650,7 @@ var CaptureButton = ({ onClick }) => /* @__PURE__ */ jsx116(
 );
 
 // src/legacy/step/cameraStep/cameraCapture/components/orientationLockOverlay/OrientationLockOverlay.tsx
-import { useIntl as useIntl22 } from "react-intl";
+import { useIntl as useIntl21 } from "react-intl";
 
 // src/legacy/step/cameraStep/cameraCapture/components/orientationLockOverlay/OrientationLockOverlay.messages.ts
 import { defineMessages as defineMessages14 } from "react-intl";
@@ -17676,7 +17665,7 @@ var OrientationLockOverlay_messages_default = defineMessages14({
 // src/legacy/step/cameraStep/cameraCapture/components/orientationLockOverlay/OrientationLockOverlay.tsx
 import { jsx as jsx117, jsxs as jsxs46 } from "react/jsx-runtime";
 function OrientationLockOverlay() {
-  const intl = useIntl22();
+  const intl = useIntl21();
   return /* @__PURE__ */ jsxs46("div", { className: "orientation-lock-overlay", children: [
     /* @__PURE__ */ jsx117(
       "img",
@@ -17963,7 +17952,7 @@ function CameraCapture({
     shouldLockOrientation,
     onEvent
   );
-  const intl = useIntl23();
+  const intl = useIntl22();
   const handleCapture = useCallback10(async () => {
     var _a, _b, _c, _d, _e, _f;
     if (((_a = webcamReference == null ? void 0 : webcamReference.current) == null ? void 0 : _a.video) && ((_c = (_b = webcamReference == null ? void 0 : webcamReference.current) == null ? void 0 : _b.video) == null ? void 0 : _c.readyState) >= 3) {
@@ -18186,12 +18175,12 @@ function getFirstAction(step) {
 }
 
 // src/legacy/step/externalConfirmationStep/ExternalConfirmationStep.tsx
-import { useIntl as useIntl24 } from "react-intl";
+import { useIntl as useIntl23 } from "react-intl";
 import { jsx as jsx122 } from "react/jsx-runtime";
 var noop6 = () => {
 };
 function ExternalConfirmationStep({ url, onClose }) {
-  const { formatMessage } = useIntl24();
+  const { formatMessage } = useIntl23();
   return /* @__PURE__ */ jsx122(
     DynamicLayout_default,
     {
@@ -18580,7 +18569,6 @@ var DynamicFlowComponent = ({
   onEvent = noop7,
   onLog = noop7
 }) => {
-  const { locale } = useIntl25();
   const {
     formErrors,
     globalError,
@@ -18632,15 +18620,12 @@ var DynamicFlowComponent = ({
       return httpClient(url != null ? url : "", {
         method,
         headers: __spreadValues({
-          "accept-language": locale,
-          // FIXME move this out of the library https://transferwise.atlassian.net/browse/MC-3286
           "Content-Type": "application/json"
         }, etag2 ? { "If-None-Match": etag2 } : {}),
-        credentials: "include",
         body: method === "GET" ? void 0 : JSON.stringify(data)
       });
     },
-    [httpClient, locale]
+    [httpClient]
   );
   const performAction = async (action, data = {}) => {
     cancelPendingRefreshes();
@@ -18697,7 +18682,7 @@ var DynamicFlowComponent = ({
     if (initialStep) {
       warnIfNoStepLayout(initialStep);
     }
-  }, [httpClient, locale, JSON.stringify(initialStep), JSON.stringify(initialAction)]);
+  }, [httpClient, JSON.stringify(initialStep), JSON.stringify(initialAction)]);
   const handleResponse = async (response, fetchType) => {
     try {
       if (response.status === 304) {

package/build/revamp/DynamicFlowCore.js

@@ -0,0 +1,26 @@
+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));
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { CoreContainerRenderer } from './renderers/CoreContainerRenderer';
+import { getRenderFunction } from './renderers/getRenderFunction';
+import { StepRenderer } from './renderers/step/StepRenderer';
+import { useDynamicFlowCore } from './useDynamicFlowCore';
+import ErrorBoundary from '../common/errorBoundary/ErrorBoundary';
+export function DynamicFlowCore(props) {
+    var stepComponentRef = useDynamicFlowCore(props).stepComponentRef;
+    var renderers = props.renderers, onEvent = props.onEvent, onError = props.onError;
+    var render = useMemo(function () { return getRenderFunction(__spreadArray(__spreadArray([CoreContainerRenderer], renderers, true), [StepRenderer], false)); }, [renderers]);
+    return (_jsx(ErrorBoundary, { onError: function (error) {
+            onEvent === null || onEvent === void 0 ? void 0 : onEvent('Dynamic Flow - Failed', { error: error });
+            onError === null || onError === void 0 ? void 0 : onError(error);
+        }, children: stepComponentRef.current ? render(stepComponentRef.current) : null // TODO: render loader instead?
+     }));
+}

package/build/revamp/DynamicFlowWise.js

@@ -0,0 +1,32 @@
+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));
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { HttpClientProvider } from '../common/httpClientContext';
+import { DynamicFlowCore } from './DynamicFlowCore';
+import { getWiseRenderers } from './wise/renderers/getWiseRenderers';
+var wiseRenderers = getWiseRenderers();
+function DynamicFlowWise(props) {
+    var httpClient = props.httpClient, renderers = props.renderers;
+    var mergedRenderers = useMemo(function () { return __spreadArray(__spreadArray([], (renderers !== null && renderers !== void 0 ? renderers : []), true), wiseRenderers, true); }, [renderers]);
+    return (_jsx(HttpClientProvider, { httpClient: httpClient, children: _jsx(DynamicFlowCore, __assign({}, props, { renderers: mergedRenderers })) }));
+}
+export default DynamicFlowWise;

package/build/revamp/DynamicFlowWise.spec.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 { jsx as _jsx } from "react/jsx-runtime";
+import { screen } from '@testing-library/react';
+import { getMockHttpClient, renderWithProviders } from '../test-utils';
+import DynamicFlowWise from './DynamicFlowWise';
+describe('DynamicFlow', function () {
+    var makeDefaultProps = function () { return ({
+        httpClient: getMockHttpClient({}),
+        onCompletion: jest.fn(),
+        onError: jest.fn(),
+        onEvent: jest.fn(),
+        onLog: jest.fn(),
+    }); };
+    beforeEach(function () {
+        jest.clearAllMocks();
+    });
+    describe('initial step', function () {
+        it('renders an initial step with title', function () {
+            var step = {
+                id: 'new-df-initial-step',
+                title: 'Dynamic Flow',
+                schemas: [],
+                layout: [
+                    { type: 'alert', markdown: 'This is an alert.', context: 'positive' },
+                    { type: 'paragraph', text: 'Please fill in the form below.', align: 'center' },
+                ],
+            };
+            renderWithProviders(_jsx(DynamicFlowWise, __assign({ flowId: "new-df-flow-id" }, makeDefaultProps(), { initialStep: step })));
+            expect(screen.getByText('Dynamic Flow')).toBeInTheDocument();
+            expect(screen.getByText('This is an alert.')).toBeInTheDocument();
+            expect(screen.getByText('Please fill in the form below.')).toBeInTheDocument();
+        });
+    });
+    describe('initial step with initial model', function () {
+        it('renders the step with relevant fields filled in', function () {
+            var step = {
+                id: 'new-df-initial-step',
+                title: 'Dynamic Flow',
+                schemas: [
+                    {
+                        $id: '#schema',
+                        type: 'object',
+                        title: 'Object schema title',
+                        description: 'Object schema description',
+                        displayOrder: ['name', 'occupation'],
+                        properties: {
+                            name: {
+                                title: 'Full name',
+                                type: 'string',
+                            },
+                            occupation: {
+                                title: 'Occupation',
+                                type: 'string',
+                            },
+                        },
+                    },
+                ],
+                layout: [{ type: 'form', schemaId: '#schema' }],
+                model: { name: 'John Smith' },
+            };
+            renderWithProviders(_jsx(DynamicFlowWise, __assign({ flowId: "new-df-flow-id" }, makeDefaultProps(), { initialStep: step })));
+            expect(screen.getByDisplayValue('John Smith')).toBeInTheDocument();
+        });
+    });
+    describe('Events', function () {
+        describe('when the flow starts with flowId and stepId', function () {
+            it('emits a flow started event containing those values', function () {
+                var props = __assign(__assign({}, makeDefaultProps()), { initialStep: {
+                        id: 'ny-initial-step-id',
+                        title: 'Dynamic Flow',
+                        schemas: [],
+                        layout: [],
+                    } });
+                renderWithProviders(_jsx(DynamicFlowWise, __assign({ flowId: "my-flow-id" }, props)));
+                expect(props.onEvent).toHaveBeenCalledWith('Dynamic Flow - Initiated', expect.objectContaining({
+                    flowId: 'my-flow-id',
+                    stepId: 'ny-initial-step-id',
+                }));
+            });
+            it('emits a step shown event containing those values', function () {
+                var props = __assign(__assign({}, makeDefaultProps()), { initialStep: {
+                        id: 'ny-initial-step-id',
+                        title: 'Dynamic Flow',
+                        schemas: [],
+                        layout: [],
+                    } });
+                renderWithProviders(_jsx(DynamicFlowWise, __assign({ flowId: "my-flow-id" }, props)));
+                expect(props.onEvent).toHaveBeenCalledWith('Dynamic Flow - Step Shown', expect.objectContaining({
+                    flowId: 'my-flow-id',
+                    stepId: 'ny-initial-step-id',
+                }));
+            });
+        });
+    });
+});

package/build/revamp/DynamicFragmentWise.js

@@ -0,0 +1,83 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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));
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useMemo } from 'react';
+import ErrorBoundary from '../common/errorBoundary/ErrorBoundary';
+import { HttpClientProvider } from '../common/httpClientContext';
+import { CoreContainerRenderer } from './renderers/CoreContainerRenderer';
+import { getRenderFunction } from './renderers/getRenderFunction';
+import { StepRenderer } from './renderers/step/StepRenderer';
+import { useDynamicFlowCore } from './useDynamicFlowCore';
+import { getWiseRenderers } from './wise/renderers/getWiseRenderers';
+var wiseRenderers = getWiseRenderers();
+/**
+ * DynamicFragmentWise is like DynamicFlowWise, but it also accepts a ForwardedRef.
+ * This ref conforms to the DynamicFragmentController type, containing two functions: `getValue` and `validate`.
+ * @experimental This component may be changed in the future without notice.
+ */
+var DynamicFragmentWise = forwardRef(function DynamicFragmentWise(props, ref) {
+    var _this = this;
+    var httpClient = props.httpClient, onEvent = props.onEvent, onError = props.onError, renderers = props.renderers;
+    var mergedRenderers = useMemo(function () { return __spreadArray(__spreadArray([], (renderers !== null && renderers !== void 0 ? renderers : []), true), wiseRenderers, true); }, [renderers]);
+    var stepComponentRef = useDynamicFlowCore(props).stepComponentRef;
+    useImperativeHandle(ref, function () { return ({
+        getValue: function () { return __awaiter(_this, void 0, void 0, function () { var _a, _b; return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0: return [4 /*yield*/, ((_a = stepComponentRef.current) === null || _a === void 0 ? void 0 : _a.getSubmittableValue())];
+                case 1: return [2 /*return*/, (_b = (_c.sent())) !== null && _b !== void 0 ? _b : null];
+            }
+        }); }); },
+        validate: function () { var _a, _b; return (_b = (_a = stepComponentRef.current) === null || _a === void 0 ? void 0 : _a.validate()) !== null && _b !== void 0 ? _b : false; },
+    }); }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    var render = useMemo(function () { return getRenderFunction(__spreadArray(__spreadArray([CoreContainerRenderer], mergedRenderers, true), [StepRenderer], false)); }, [mergedRenderers]);
+    return (_jsx(ErrorBoundary, { onError: function (error) {
+            onEvent === null || onEvent === void 0 ? void 0 : onEvent('Dynamic Flow - Failed');
+            onError(error);
+        }, children: _jsx(HttpClientProvider, { httpClient: httpClient, children: stepComponentRef.current ? render(stepComponentRef.current) : null }) }));
+});
+export default DynamicFragmentWise;

package/build/revamp/domain/components/AlertComponent.js

@@ -0,0 +1,50 @@
+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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+export var createAlertComponent = function (alertProps) { return (__assign(__assign({ type: 'alert' }, alertProps), { getSubmittableValue: function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        return [2 /*return*/, null];
+    }); }); }, getLocalValue: function () { return null; }, getSummary: function () { return ({}); }, validate: function () { return true; } })); };