@wise/dynamic-flow-client 5.9.2 → 5.11.0

package/build/controller/FlowController.js

@@ -58,6 +58,7 @@ export const createFlowController = (props) => {
         features,
         httpClient,
         onBehavior,
+        onLink,
         onPoll,
         onValueChange,
     });
@@ -273,6 +274,10 @@ export const createFlowController = (props) => {
                     rootComponent.setLoadingState('idle');
                     break;
                 }
+                case 'no-op': {
+                    rootComponent.setLoadingState('idle');
+                    break;
+                }
             }
         }
         catch (error) {
@@ -301,7 +306,7 @@ export const createFlowController = (props) => {
                         updateStep(Object.assign(Object.assign({}, command.step), { errors }), command.etag);
                     }
                     break;
-                case 'noop':
+                case 'no-op':
                     rootComponent.setLoadingState('idle');
                     break;
                 case 'error': {

package/build/controller/executeRefresh.js

@@ -1,5 +1,6 @@
 import { getErrorMessage } from './getErrorMessage';
 import { assertStepResponseBody, isErrorResponseBody, parseResponseBodyAsJsonElement, } from './response-utils';
+import { getResponseType } from './getResponseType';
 export const executeRefresh = async (props) => {
     const { abortSignal, url, model, etag, analytics, httpClient, trackEvent, logEvent } = props;
     trackEvent('Refresh Triggered', analytics);
@@ -12,7 +13,7 @@ export const executeRefresh = async (props) => {
         });
         if (response.status === 304) {
             trackEvent('Refresh Succeeded', analytics);
-            return { type: 'noop' };
+            return { type: 'no-op' };
         }
         if (!response.ok) {
             const responseBody = await parseResponseBodyAsJsonElement(response).catch(() => ({}));
@@ -23,6 +24,11 @@ export const executeRefresh = async (props) => {
         }
         const newEtag = response.headers.get('etag') || null;
         const body = await parseResponseBodyAsJsonElement(response);
+        const responseType = getResponseType(response.headers, body);
+        if (responseType === 'no-op') {
+            trackEvent('Refresh Succeeded', analytics);
+            return { type: 'no-op' };
+        }
         assertStepResponseBody(body);
         trackEvent('Refresh Succeeded', analytics);
         return { type: 'refresh-step', step: body, etag: newEtag };
@@ -30,7 +36,7 @@ export const executeRefresh = async (props) => {
     catch (error) {
         if (error instanceof DOMException && error.name === 'AbortError') {
             trackEvent('Refresh Aborted', analytics);
-            return { type: 'noop' };
+            return { type: 'no-op' };
         }
         trackEvent('Refresh Failed', analytics);
         logEvent('error', 'Dynamic Flow - Refresh Failed', Object.assign(Object.assign({}, analytics), { errorMessage: getErrorMessage(error) }));

package/build/controller/executeRequest.js

@@ -60,6 +60,9 @@ export const executeRequest = async (props) => {
             assertModalResponseBody(responseBody);
             return { type: 'behavior', behavior: Object.assign(Object.assign({}, responseBody), { type: 'modal' }) };
         }
+        case 'no-op': {
+            return { type: 'no-op' };
+        }
         default: {
             throw new Error(`Unsupported response type: ${String(responseType)}`);
         }

package/build/controller/executeSubmission.js

@@ -48,6 +48,7 @@ export const executeSubmission = async (props) => {
                     trackSubmissionEvent('Action Succeeded', { actionId });
                     return Object.assign(Object.assign({}, command), { result: recursiveMerge(command.result, result) });
                 }
+                case 'no-op':
                 default: {
                     trackSubmissionEvent('Action Succeeded', { actionId });
                     return command;

package/build/controller/getResponseType.js

@@ -1,7 +1,7 @@
 import { isObject } from '../utils/type-validators';
-const responseTypes = ['step', 'action', 'exit', 'modal', 'subflow'];
+const responseTypes = ['step', 'action', 'exit', 'modal', 'subflow', 'no-op'];
 /**
- * Returns either 'step', 'action', or 'exit' based on the response headers and body.
+ * Returns either 'step', 'action', 'exit', 'modal', 'subflow', or 'no-op' based on the response headers and body.
  * This function takes a response body parameter because, for legacy reasons, we still need to consider the body
  * to determine the response type, in cases where the response headers are not set.
  * Ideally it should just be a matter of checking the "X-Df-Response-Type" response header.
@@ -30,6 +30,6 @@ export const getResponseTypeFromHeader = (headers) => {
 };
 function assertDFResponseType(type) {
     if (!responseTypes.includes(type)) {
-        throw new Error("Unsupported X-Df-Response-Type. Allowed values are 'step', 'action', 'exit', 'error', 'modal', 'subflow'.");
+        throw new Error("Unsupported X-Df-Response-Type. Allowed values are 'step', 'action', 'exit', 'modal', 'subflow', 'no-op'.");
     }
 }

package/build/domain/components/step/ExternalConfirmationComponent.js

@@ -1,5 +1,5 @@
 import { getInputUpdateFunction } from '../utils/component-utils';
-export const createExternalConfirmation = (uid, url, onComponentUpdate) => {
+export const createExternalConfirmation = (uid, url, onLink, onComponentUpdate) => {
     const update = getInputUpdateFunction(onComponentUpdate);
     return {
         type: 'external-confirmation',
@@ -7,15 +7,11 @@ export const createExternalConfirmation = (uid, url, onComponentUpdate) => {
         uid,
         url,
         status: 'initial',
-        onSuccess() {
-            update(this, (draft) => {
-                draft.status = 'success';
-            });
-        },
-        onFailure() {
-            if (this.status === 'initial') {
+        open() {
+            if (this.status === 'initial' || this.status === 'failure') {
+                const success = onLink(this.url);
                 update(this, (draft) => {
-                    draft.status = 'failure';
+                    draft.status = success ? 'success' : 'failure';
                 });
             }
         },

package/build/domain/mappers/mapStepToComponent.js

@@ -57,7 +57,7 @@ export const mapStepToComponent = (_a) => {
         : undefined;
     const stepPrefetch = getStepPrefetch(restProps.httpClient, flowRequestCache, submissionBehaviors);
     const externalConfirmation = (external === null || external === void 0 ? void 0 : external.url)
-        ? createExternalConfirmation(`${uid}-external-confirmation`, external === null || external === void 0 ? void 0 : external.url, onComponentUpdate)
+        ? createExternalConfirmation(`${uid}-external-confirmation`, external === null || external === void 0 ? void 0 : external.url, restProps.onLink, onComponentUpdate)
         : undefined;
     const mapperProps = Object.assign(Object.assign({}, restProps), { features,
         trackEvent,

package/build/domain/mappers/schema/blobSchemaToComponent.js

@@ -3,12 +3,12 @@ import { createUploadInputComponent } from '../../components/UploadInputComponen
 import { getRequiredCheck } from '../../features/validation/value-checks';
 import { mapCommonSchemaProps } from './utils/mapCommonSchemaProps';
 export const blobSchemaToComponent = (schemaMapperProps, mapperProps) => {
-    const { schema, localValue, required = false, onPersistAsync } = schemaMapperProps;
+    const { schema, localValue, model, required = false, onPersistAsync } = schemaMapperProps;
     const { accepts, cameraConfig, maxSize, source, validationMessages } = schema;
     const { getErrorMessageFunctions, onComponentUpdate, onValueChange } = mapperProps;
     const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
     const validLocalValue = isFile(localValue) ? localValue : null;
-    const value = onPersistAsync ? validLocalValue : null;
+    const value = onPersistAsync && model !== null ? validLocalValue : null;
     return createUploadInputComponent(Object.assign(Object.assign({}, mapCommonSchemaProps(schemaMapperProps)), { accepts, autoComplete: 'off', cameraConfig, format: 'blob', maxSize,
         source,
         value, checks: schema.hidden ? [] : [getRequiredCheck(required, errorMessageFunctions)], schemaOnChange: undefined, onValueChange }), onComponentUpdate);

package/build/domain/mappers/schema/tests/test-utils.js

@@ -4,7 +4,7 @@ import { mockErrorMessageFunctions } from '../../../features/validation/spec-uti
 import { FeatureFlags } from '../../utils/FeatureFlags';
 import { makeRequestCache } from '../../../features/prefetch/request-cache';
 export const getStepMapperProps = () => (Object.assign(Object.assign({}, getMockMapperProps()), { uid: 'root', flowRequestCache: makeRequestCache(), etag: null, loadingState: 'idle', trackEvent: vi.fn(), onPoll: vi.fn() }));
-export const getMockMapperProps = (mapperProps = {}) => (Object.assign({ step: {}, stepLocalValue: null, features: new FeatureFlags({}), onComponentUpdate: vi.fn(), onBehavior: vi.fn(), onValueChange: vi.fn(), getErrorMessageFunctions: vi.fn().mockReturnValue(mockErrorMessageFunctions), trackEvent: vi.fn(), logEvent: vi.fn(), httpClient: vi.fn(), registerSubmissionBehavior: vi.fn() }, mapperProps));
+export const getMockMapperProps = (mapperProps = {}) => (Object.assign({ step: {}, stepLocalValue: null, features: new FeatureFlags({}), onComponentUpdate: vi.fn(), onBehavior: vi.fn(), onLink: vi.fn(), onValueChange: vi.fn(), getErrorMessageFunctions: vi.fn().mockReturnValue(mockErrorMessageFunctions), trackEvent: vi.fn(), logEvent: vi.fn(), httpClient: vi.fn(), registerSubmissionBehavior: vi.fn() }, mapperProps));
 export const getMockSchemaMapperProps = (schemaMapperProps) => (Object.assign({ uid: getRandomId(), localValue: null, model: null, required: false, validationErrors: null }, schemaMapperProps));
 export const getMockRendererMapperProps = () => ({
     render: vi.fn(),

package/build/i18n/fr.json

@@ -24,7 +24,7 @@
   "dynamicFlows.ExternalConfirmation.open": "Ouvrir dans un nouvel onglet",
   "dynamicFlows.ExternalConfirmation.title": "Veuillez confirmer",
   "dynamicFlows.FileUploadSchema.maxFileSizeError": "Nous sommes désolés, ce fichier est trop volumineux. Veuillez télécharger un fichier plus petit.",
-  "dynamicFlows.FileUploadSchema.wrongFileTypeError": "Nous sommes désolés, ce format de fichier n'est pas pris en charge. Veuillez en télécharger un autre.",
+  "dynamicFlows.FileUploadSchema.wrongFileTypeError": "Désolé, ce format de fichier n'est pas pris en charge. Veuillez en importer un autre.",
   "dynamicFlows.Help.ariaLabel": "Cliquez ici pour plus d'informations.",
   "dynamicFlows.MultiSelect.summary": "{first} et {count} de plus",
   "dynamicFlows.MultipleFileUploadSchema.maxFileSizeError": "Nous sommes désolés, ce fichier est trop volumineux. Veuillez télécharger un fichier plus petit.",

package/build/main.css

@@ -212,6 +212,10 @@
   display: block !important;
   /* left-aligned by default */
 }
+.df-button.circular {
+  display: flex;
+  justify-content: center;
+}
 .df-button.small.align-center {
   display: block !important;
   margin-left: auto;

package/build/main.js

@@ -266,7 +266,7 @@ var fr_default = {
   "dynamicFlows.ExternalConfirmation.open": "Ouvrir dans un nouvel onglet",
   "dynamicFlows.ExternalConfirmation.title": "Veuillez confirmer",
   "dynamicFlows.FileUploadSchema.maxFileSizeError": "Nous sommes d\xE9sol\xE9s, ce fichier est trop volumineux. Veuillez t\xE9l\xE9charger un fichier plus petit.",
-  "dynamicFlows.FileUploadSchema.wrongFileTypeError": "Nous sommes d\xE9sol\xE9s, ce format de fichier n'est pas pris en charge. Veuillez en t\xE9l\xE9charger un autre.",
+  "dynamicFlows.FileUploadSchema.wrongFileTypeError": "D\xE9sol\xE9, ce format de fichier n'est pas pris en charge. Veuillez en importer un autre.",
   "dynamicFlows.Help.ariaLabel": "Cliquez ici pour plus d'informations.",
   "dynamicFlows.MultiSelect.summary": "{first} et {count} de plus",
   "dynamicFlows.MultipleFileUploadSchema.maxFileSizeError": "Nous sommes d\xE9sol\xE9s, ce fichier est trop volumineux. Veuillez t\xE9l\xE9charger un fichier plus petit.",
@@ -2496,7 +2496,7 @@ var modalToComponent = (uid, { content, title }, mapperProps, schemaComponents)
 );
 
 // src/domain/components/step/ExternalConfirmationComponent.ts
-var createExternalConfirmation = (uid, url, onComponentUpdate) => {
+var createExternalConfirmation = (uid, url, onLink, onComponentUpdate) => {
   const update = getInputUpdateFunction(onComponentUpdate);
   return {
     type: "external-confirmation",
@@ -2504,15 +2504,11 @@ var createExternalConfirmation = (uid, url, onComponentUpdate) => {
     uid,
     url,
     status: "initial",
-    onSuccess() {
-      update(this, (draft) => {
-        draft.status = "success";
-      });
-    },
-    onFailure() {
-      if (this.status === "initial") {
+    open() {
+      if (this.status === "initial" || this.status === "failure") {
+        const success = onLink(this.url);
         update(this, (draft) => {
-          draft.status = "failure";
+          draft.status = success ? "success" : "failure";
         });
       }
     },
@@ -4445,12 +4441,12 @@ var initialiseBase64Value = async (uploadComponent) => {
 
 // src/domain/mappers/schema/blobSchemaToComponent.ts
 var blobSchemaToComponent = (schemaMapperProps, mapperProps) => {
-  const { schema, localValue, required = false, onPersistAsync } = schemaMapperProps;
+  const { schema, localValue, model, required = false, onPersistAsync } = schemaMapperProps;
   const { accepts, cameraConfig, maxSize, source, validationMessages } = schema;
   const { getErrorMessageFunctions, onComponentUpdate, onValueChange } = mapperProps;
   const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
   const validLocalValue = isFile(localValue) ? localValue : null;
-  const value = onPersistAsync ? validLocalValue : null;
+  const value = onPersistAsync && model !== null ? validLocalValue : null;
   return createUploadInputComponent(
     __spreadProps(__spreadValues({}, mapCommonSchemaProps(schemaMapperProps)), {
       accepts,
@@ -6006,7 +6002,7 @@ var handleErrorResponse = async (response, actionId, trackEvent) => {
 };
 
 // src/controller/getResponseType.ts
-var responseTypes = ["step", "action", "exit", "modal", "subflow"];
+var responseTypes = ["step", "action", "exit", "modal", "subflow", "no-op"];
 var getResponseType = (headers, body) => {
   const headerResponseType = getResponseTypeFromHeader(headers);
   if (headerResponseType) {
@@ -6031,7 +6027,7 @@ var getResponseTypeFromHeader = (headers) => {
 function assertDFResponseType(type) {
   if (!responseTypes.includes(type)) {
     throw new Error(
-      "Unsupported X-Df-Response-Type. Allowed values are 'step', 'action', 'exit', 'error', 'modal', 'subflow'."
+      "Unsupported X-Df-Response-Type. Allowed values are 'step', 'action', 'exit', 'modal', 'subflow', 'no-op'."
     );
   }
 }
@@ -6109,6 +6105,9 @@ var executeRequest = async (props) => {
       assertModalResponseBody(responseBody);
       return { type: "behavior", behavior: __spreadProps(__spreadValues({}, responseBody), { type: "modal" }) };
     }
+    case "no-op": {
+      return { type: "no-op" };
+    }
     default: {
       throw new Error(`Unsupported response type: ${String(responseType)}`);
     }
@@ -6177,6 +6176,7 @@ var executeSubmission = async (props) => {
           trackSubmissionEvent("Action Succeeded", { actionId });
           return __spreadProps(__spreadValues({}, command), { result: recursiveMerge(command.result, result) });
         }
+        case "no-op":
         default: {
           trackSubmissionEvent("Action Succeeded", { actionId });
           return command;
@@ -6291,7 +6291,12 @@ var mapStepToComponent = (_a) => {
   }) : void 0;
   const stepRefreshAfter = refreshAfter ? getStepRefreshAfter({ refreshAfter, logEvent, onBehavior }) : void 0;
   const stepPrefetch = getStepPrefetch(restProps.httpClient, flowRequestCache, submissionBehaviors);
-  const externalConfirmation = (external == null ? void 0 : external.url) ? createExternalConfirmation(`${uid}-external-confirmation`, external == null ? void 0 : external.url, onComponentUpdate) : void 0;
+  const externalConfirmation = (external == null ? void 0 : external.url) ? createExternalConfirmation(
+    `${uid}-external-confirmation`,
+    external == null ? void 0 : external.url,
+    restProps.onLink,
+    onComponentUpdate
+  ) : void 0;
   const mapperProps = __spreadProps(__spreadValues({}, restProps), {
     features,
     trackEvent,
@@ -6503,7 +6508,7 @@ var executeRefresh = async (props) => {
     });
     if (response.status === 304) {
       trackEvent("Refresh Succeeded", analytics);
-      return { type: "noop" };
+      return { type: "no-op" };
     }
     if (!response.ok) {
       const responseBody = await parseResponseBodyAsJsonElement(response).catch(() => ({}));
@@ -6518,13 +6523,18 @@ var executeRefresh = async (props) => {
     }
     const newEtag = response.headers.get("etag") || null;
     const body = await parseResponseBodyAsJsonElement(response);
+    const responseType = getResponseType(response.headers, body);
+    if (responseType === "no-op") {
+      trackEvent("Refresh Succeeded", analytics);
+      return { type: "no-op" };
+    }
     assertStepResponseBody(body);
     trackEvent("Refresh Succeeded", analytics);
     return { type: "refresh-step", step: body, etag: newEtag };
   } catch (error) {
     if (error instanceof DOMException && error.name === "AbortError") {
       trackEvent("Refresh Aborted", analytics);
-      return { type: "noop" };
+      return { type: "no-op" };
     }
     trackEvent("Refresh Failed", analytics);
     logEvent("error", "Dynamic Flow - Refresh Failed", __spreadProps(__spreadValues({}, analytics), {
@@ -6640,6 +6650,7 @@ var createFlowController = (props) => {
     features,
     httpClient,
     onBehavior,
+    onLink,
     onPoll,
     onValueChange
   });
@@ -6889,6 +6900,10 @@ var createFlowController = (props) => {
           rootComponent.setLoadingState("idle");
           break;
         }
+        case "no-op": {
+          rootComponent.setLoadingState("idle");
+          break;
+        }
       }
     } catch (error) {
       closeWithError(error);
@@ -6920,7 +6935,7 @@ var createFlowController = (props) => {
             updateStep(__spreadProps(__spreadValues({}, command.step), { errors }), command.etag);
           }
           break;
-        case "noop":
+        case "no-op":
           rootComponent.setLoadingState("idle");
           break;
         case "error": {
@@ -7514,9 +7529,8 @@ var externalComponentToProps = (component, rendererMapperProps) => {
     type: "external-confirmation",
     uid: component.uid,
     url: component.url,
-    status: component.status,
-    onSuccess: component.onSuccess.bind(component),
-    onFailure: component.onFailure.bind(component),
+    visible: component.status === "failure",
+    open: component.open.bind(component),
     onCancel: component.onCancel.bind(component)
   }, rendererMapperProps);
 };

package/build/main.mjs

@@ -236,7 +236,7 @@ var fr_default = {
   "dynamicFlows.ExternalConfirmation.open": "Ouvrir dans un nouvel onglet",
   "dynamicFlows.ExternalConfirmation.title": "Veuillez confirmer",
   "dynamicFlows.FileUploadSchema.maxFileSizeError": "Nous sommes d\xE9sol\xE9s, ce fichier est trop volumineux. Veuillez t\xE9l\xE9charger un fichier plus petit.",
-  "dynamicFlows.FileUploadSchema.wrongFileTypeError": "Nous sommes d\xE9sol\xE9s, ce format de fichier n'est pas pris en charge. Veuillez en t\xE9l\xE9charger un autre.",
+  "dynamicFlows.FileUploadSchema.wrongFileTypeError": "D\xE9sol\xE9, ce format de fichier n'est pas pris en charge. Veuillez en importer un autre.",
   "dynamicFlows.Help.ariaLabel": "Cliquez ici pour plus d'informations.",
   "dynamicFlows.MultiSelect.summary": "{first} et {count} de plus",
   "dynamicFlows.MultipleFileUploadSchema.maxFileSizeError": "Nous sommes d\xE9sol\xE9s, ce fichier est trop volumineux. Veuillez t\xE9l\xE9charger un fichier plus petit.",
@@ -2466,7 +2466,7 @@ var modalToComponent = (uid, { content, title }, mapperProps, schemaComponents)
 );
 
 // src/domain/components/step/ExternalConfirmationComponent.ts
-var createExternalConfirmation = (uid, url, onComponentUpdate) => {
+var createExternalConfirmation = (uid, url, onLink, onComponentUpdate) => {
   const update = getInputUpdateFunction(onComponentUpdate);
   return {
     type: "external-confirmation",
@@ -2474,15 +2474,11 @@ var createExternalConfirmation = (uid, url, onComponentUpdate) => {
     uid,
     url,
     status: "initial",
-    onSuccess() {
-      update(this, (draft) => {
-        draft.status = "success";
-      });
-    },
-    onFailure() {
-      if (this.status === "initial") {
+    open() {
+      if (this.status === "initial" || this.status === "failure") {
+        const success = onLink(this.url);
         update(this, (draft) => {
-          draft.status = "failure";
+          draft.status = success ? "success" : "failure";
         });
       }
     },
@@ -4415,12 +4411,12 @@ var initialiseBase64Value = async (uploadComponent) => {
 
 // src/domain/mappers/schema/blobSchemaToComponent.ts
 var blobSchemaToComponent = (schemaMapperProps, mapperProps) => {
-  const { schema, localValue, required = false, onPersistAsync } = schemaMapperProps;
+  const { schema, localValue, model, required = false, onPersistAsync } = schemaMapperProps;
   const { accepts, cameraConfig, maxSize, source, validationMessages } = schema;
   const { getErrorMessageFunctions, onComponentUpdate, onValueChange } = mapperProps;
   const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
   const validLocalValue = isFile(localValue) ? localValue : null;
-  const value = onPersistAsync ? validLocalValue : null;
+  const value = onPersistAsync && model !== null ? validLocalValue : null;
   return createUploadInputComponent(
     __spreadProps(__spreadValues({}, mapCommonSchemaProps(schemaMapperProps)), {
       accepts,
@@ -5976,7 +5972,7 @@ var handleErrorResponse = async (response, actionId, trackEvent) => {
 };
 
 // src/controller/getResponseType.ts
-var responseTypes = ["step", "action", "exit", "modal", "subflow"];
+var responseTypes = ["step", "action", "exit", "modal", "subflow", "no-op"];
 var getResponseType = (headers, body) => {
   const headerResponseType = getResponseTypeFromHeader(headers);
   if (headerResponseType) {
@@ -6001,7 +5997,7 @@ var getResponseTypeFromHeader = (headers) => {
 function assertDFResponseType(type) {
   if (!responseTypes.includes(type)) {
     throw new Error(
-      "Unsupported X-Df-Response-Type. Allowed values are 'step', 'action', 'exit', 'error', 'modal', 'subflow'."
+      "Unsupported X-Df-Response-Type. Allowed values are 'step', 'action', 'exit', 'modal', 'subflow', 'no-op'."
     );
   }
 }
@@ -6079,6 +6075,9 @@ var executeRequest = async (props) => {
       assertModalResponseBody(responseBody);
       return { type: "behavior", behavior: __spreadProps(__spreadValues({}, responseBody), { type: "modal" }) };
     }
+    case "no-op": {
+      return { type: "no-op" };
+    }
     default: {
       throw new Error(`Unsupported response type: ${String(responseType)}`);
     }
@@ -6147,6 +6146,7 @@ var executeSubmission = async (props) => {
           trackSubmissionEvent("Action Succeeded", { actionId });
           return __spreadProps(__spreadValues({}, command), { result: recursiveMerge(command.result, result) });
         }
+        case "no-op":
         default: {
           trackSubmissionEvent("Action Succeeded", { actionId });
           return command;
@@ -6261,7 +6261,12 @@ var mapStepToComponent = (_a) => {
   }) : void 0;
   const stepRefreshAfter = refreshAfter ? getStepRefreshAfter({ refreshAfter, logEvent, onBehavior }) : void 0;
   const stepPrefetch = getStepPrefetch(restProps.httpClient, flowRequestCache, submissionBehaviors);
-  const externalConfirmation = (external == null ? void 0 : external.url) ? createExternalConfirmation(`${uid}-external-confirmation`, external == null ? void 0 : external.url, onComponentUpdate) : void 0;
+  const externalConfirmation = (external == null ? void 0 : external.url) ? createExternalConfirmation(
+    `${uid}-external-confirmation`,
+    external == null ? void 0 : external.url,
+    restProps.onLink,
+    onComponentUpdate
+  ) : void 0;
   const mapperProps = __spreadProps(__spreadValues({}, restProps), {
     features,
     trackEvent,
@@ -6473,7 +6478,7 @@ var executeRefresh = async (props) => {
     });
     if (response.status === 304) {
       trackEvent("Refresh Succeeded", analytics);
-      return { type: "noop" };
+      return { type: "no-op" };
     }
     if (!response.ok) {
       const responseBody = await parseResponseBodyAsJsonElement(response).catch(() => ({}));
@@ -6488,13 +6493,18 @@ var executeRefresh = async (props) => {
     }
     const newEtag = response.headers.get("etag") || null;
     const body = await parseResponseBodyAsJsonElement(response);
+    const responseType = getResponseType(response.headers, body);
+    if (responseType === "no-op") {
+      trackEvent("Refresh Succeeded", analytics);
+      return { type: "no-op" };
+    }
     assertStepResponseBody(body);
     trackEvent("Refresh Succeeded", analytics);
     return { type: "refresh-step", step: body, etag: newEtag };
   } catch (error) {
     if (error instanceof DOMException && error.name === "AbortError") {
       trackEvent("Refresh Aborted", analytics);
-      return { type: "noop" };
+      return { type: "no-op" };
     }
     trackEvent("Refresh Failed", analytics);
     logEvent("error", "Dynamic Flow - Refresh Failed", __spreadProps(__spreadValues({}, analytics), {
@@ -6610,6 +6620,7 @@ var createFlowController = (props) => {
     features,
     httpClient,
     onBehavior,
+    onLink,
     onPoll,
     onValueChange
   });
@@ -6859,6 +6870,10 @@ var createFlowController = (props) => {
           rootComponent.setLoadingState("idle");
           break;
         }
+        case "no-op": {
+          rootComponent.setLoadingState("idle");
+          break;
+        }
       }
     } catch (error) {
       closeWithError(error);
@@ -6890,7 +6905,7 @@ var createFlowController = (props) => {
             updateStep(__spreadProps(__spreadValues({}, command.step), { errors }), command.etag);
           }
           break;
-        case "noop":
+        case "no-op":
           rootComponent.setLoadingState("idle");
           break;
         case "error": {
@@ -7484,9 +7499,8 @@ var externalComponentToProps = (component, rendererMapperProps) => {
     type: "external-confirmation",
     uid: component.uid,
     url: component.url,
-    status: component.status,
-    onSuccess: component.onSuccess.bind(component),
-    onFailure: component.onFailure.bind(component),
+    visible: component.status === "failure",
+    open: component.open.bind(component),
     onCancel: component.onCancel.bind(component)
   }, rendererMapperProps);
 };

package/build/renderers/mappers/externalComponentToProps.js

@@ -1,3 +1,3 @@
 export const externalComponentToProps = (component, rendererMapperProps) => {
-    return Object.assign({ type: 'external-confirmation', uid: component.uid, url: component.url, status: component.status, onSuccess: component.onSuccess.bind(component), onFailure: component.onFailure.bind(component), onCancel: component.onCancel.bind(component) }, rendererMapperProps);
+    return Object.assign({ type: 'external-confirmation', uid: component.uid, url: component.url, visible: component.status === 'failure', open: component.open.bind(component), onCancel: component.onCancel.bind(component) }, rendererMapperProps);
 };

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

@@ -7,8 +7,11 @@ export default {
         chromatic: { disableSnapshot: true },
     },
 };
+const httpClient = async () => new Promise((resolve) => {
+    setTimeout(resolve, 1000);
+});
 export function Copy() {
-    return renderWithStep(copyStep);
+    return renderWithStep(copyStep, httpClient);
 }
 const copyStep = {
     id: 'copy',
@@ -49,11 +52,20 @@ const copyStep = {
         {
             type: 'button',
             title: 'Click to copy',
-            control: 'primary',
+            control: 'secondary',
             behavior: {
                 type: 'copy',
                 content: 'This is a button',
             },
         },
+        {
+            type: 'button',
+            title: 'Submit',
+            control: 'primary',
+            behavior: {
+                type: 'action',
+                action: { url: '/submit' },
+            },
+        },
     ],
 };

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

@@ -0,0 +1,40 @@
+import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
+import { renderWithStep } from '../../utils/render-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Behavior',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+const httpClient = async () => new Promise((resolve) => {
+    setTimeout(resolve, 1000);
+});
+export function Link() {
+    return renderWithStep(step, httpClient);
+}
+const step = {
+    id: 'copy',
+    title: 'Link Behavior',
+    schemas: [],
+    layout: [
+        {
+            type: 'button',
+            title: 'Open Google',
+            control: 'secondary',
+            behavior: {
+                type: 'link',
+                url: 'https://www.google.com',
+            },
+        },
+        {
+            type: 'button',
+            title: 'Submit',
+            control: 'primary',
+            behavior: {
+                type: 'action',
+                action: { url: '/submit' },
+            },
+        },
+    ],
+};

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

@@ -7,8 +7,11 @@ export default {
         chromatic: { disableSnapshot: true },
     },
 };
+const httpClient = async () => new Promise((resolve) => {
+    setTimeout(resolve, 1000);
+});
 export function Modal() {
-    return renderWithStep(initialStep);
+    return renderWithStep(initialStep, httpClient);
 }
 const initialStep = {
     id: 'modal',

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

@@ -33,7 +33,7 @@ const getStep = (urns, dismissable) => ({
             },
             callToAction: {
                 title: 'Do the thing!',
-                behavior: { type: 'action', action: { url: '/submit' } },
+                behavior: { type: 'link', url: 'https://google.com' },
             },
             onDismiss: dismissable ? { url: '/upsell-dismissed', method: 'POST' } : undefined,
             margin: 'lg',