@wise/dynamic-flow-client 3.1.0 → 3.1.2

package/build/main.js

@@ -8612,7 +8612,7 @@ var translations = {
 var i18n_default = translations;
 
 // src/revamp/DynamicFlowWise.tsx
-var import_react58 = require("react");
+var import_react59 = require("react");
 var import_react_intl36 = require("react-intl");
 
 // src/revamp/wise/renderers/AlertRenderer.tsx
@@ -9977,6 +9977,7 @@ function RadioInputRendererComponent(props) {
 
 // src/revamp/wise/renderers/SelectInputRenderer/TabInputRendererComponent.tsx
 var import_components63 = require("@transferwise/components");
+var import_react55 = require("react");
 var import_jsx_runtime108 = require("react/jsx-runtime");
 function TabInputRendererComponent(props) {
   const {
@@ -9991,6 +9992,11 @@ function TabInputRendererComponent(props) {
     selectedIndex,
     onSelect
   } = props;
+  (0, import_react55.useEffect)(() => {
+    if (!isValidIndex(selectedIndex, options.length)) {
+      onSelect(0);
+    }
+  }, [selectedIndex, onSelect, options.length]);
   return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(import_jsx_runtime108.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(FieldInput_default, { id, label, help, description, error, children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
       import_components63.Tabs,
@@ -10010,6 +10016,7 @@ function TabInputRendererComponent(props) {
     children
   ] });
 }
+var isValidIndex = (index, options) => index !== null && index >= 0 && index < options;
 
 // src/revamp/wise/renderers/SelectInputRenderer/SelectInputRendererComponent.tsx
 var import_components65 = require("@transferwise/components");
@@ -10402,7 +10409,7 @@ var getWiseRenderers = () => [
 ];
 
 // src/revamp/DynamicFlowCore.tsx
-var import_react57 = require("react");
+var import_react58 = require("react");
 var import_react_intl35 = require("react-intl");
 
 // src/revamp/domain/features/events/getAnalyticsEventDispatcher.ts
@@ -10672,19 +10679,19 @@ var CoreContainerRenderer = {
 };
 
 // src/revamp/renderers/StepRenderer.tsx
-var import_react55 = require("react");
+var import_react56 = require("react");
 var import_jsx_runtime118 = require("react/jsx-runtime");
 var StepRenderer = {
   canRenderType: "step",
   render: StepRendererComponent
 };
 function StepRendererComponent({ children, loadingState }) {
-  const value = (0, import_react55.useMemo)(() => ({ loadingState }), [loadingState]);
+  const value = (0, import_react56.useMemo)(() => ({ loadingState }), [loadingState]);
   return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(LoadingContextProvider, { value, children });
 }
 
 // src/revamp/step/Step.tsx
-var import_react56 = require("react");
+var import_react57 = require("react");
 
 // src/revamp/domain/features/validation/validation-functions.ts
 var validateComponents = (components) => components.reduce((acc, component) => component.validate() && acc, true);
@@ -10887,19 +10894,22 @@ var createButtonComponent = (buttonProps) => __spreadProps(__spreadValues({
 });
 
 // src/revamp/domain/mappers/layout/buttonLayoutToComponent.ts
-var buttonLayoutToComponent = (uid, { action, context, control, disabled, margin = "md", pinOrder, size, title }, { onAction }) => createButtonComponent({
-  uid,
-  context: getButtonContext({ context, action }),
-  control: getButtonControl({ control, action }),
-  disabled: getButtonDisabled({ disabled, action }),
-  margin,
-  pinOrder,
-  size,
-  title: getButtonTitle({ title, action }),
-  onClick: () => {
-    void onAction(action);
-  }
-});
+var buttonLayoutToComponent = (uid, { action, context, control, disabled, margin = "md", pinOrder, size, title }, { onAction, step }) => {
+  const mergedAction = (action == null ? void 0 : action.$ref) ? __spreadValues(__spreadValues({}, getActionByReference(action.$ref, step == null ? void 0 : step.actions)), action) : action;
+  return createButtonComponent({
+    uid,
+    context: getButtonContext({ context, action: mergedAction }),
+    control: getButtonControl({ control, action: mergedAction }),
+    disabled: getButtonDisabled({ disabled, action: mergedAction }),
+    margin,
+    pinOrder,
+    size,
+    title: getButtonTitle({ title, action: mergedAction }),
+    onClick: () => {
+      void onAction(mergedAction);
+    }
+  });
+};
 var getButtonTitle = ({ title, action }) => {
   var _a;
   return (_a = title != null ? title : action == null ? void 0 : action.title) != null ? _a : "";
@@ -10923,6 +10933,13 @@ var getButtonContext = ({ context, action }) => {
   }
   return (action == null ? void 0 : action.type) ? mapLegacyActionTypeToContext(action.type) : "neutral";
 };
+var getActionByReference = ($ref, actions = []) => {
+  const action = actions.find((a) => a.$id === $ref);
+  if (!action) {
+    throw new Error("Action reference not found in actions array.");
+  }
+  return action;
+};
 
 // src/revamp/domain/components/ColumnsComponent.ts
 var createColumnsComponent = (columnsProps) => __spreadProps(__spreadValues({}, columnsProps), {
@@ -11060,6 +11077,7 @@ var getComponentPersistAsync = (update, performPersistAsync) => (
         }
         update((draft) => {
           draft.errors = [error.message];
+          draft.persistedState.lastSubmitted = null;
         });
         throw error;
       }
@@ -11222,6 +11240,7 @@ var createNumberInputComponent = (numberInputProps, updateComponent) => {
   if (performPersistAsync) {
     const persist = getComponentPersistAsync(update, performPersistAsync);
     return __spreadProps(__spreadValues({}, numberComponent), {
+      isPersisted: true,
       onBlur() {
         if (this.validate()) {
           persist(this.persistedState, this.getLocalValue()).catch(() => {
@@ -11932,6 +11951,7 @@ var createIntegerInputComponent = (integerInputProps, updateComponent) => {
   if (performPersistAsync) {
     const persist = getComponentPersistAsync(update, performPersistAsync);
     return __spreadProps(__spreadValues({}, integerComponent), {
+      isPersisted: true,
       onBlur() {
         if (this.validate()) {
           persist(this.persistedState, this.getLocalValue()).catch(() => {
@@ -11995,21 +12015,35 @@ var integerSchemaToComponent = (schemaMapperProps, mapperProps) => {
 };
 
 // src/revamp/domain/components/utils/isPartialLocalValueMatch.ts
-var isPartialLocalValueMatch = (partialValue, value) => {
-  if (isArray2(partialValue) && isArray2(value)) {
-    return partialValue.every(
-      (_, index) => isPartialLocalValueMatch(partialValue[index], value[index])
-    );
+var isPartialLocalValueMatch = (partialValue, component) => {
+  if (isArray2(partialValue) && component.type === "repeatable") {
+    const children = component.getChildren();
+    return partialValue.every((value, index) => {
+      const childComponent = children[index];
+      return childComponent ? isPartialLocalValueMatch(value, childComponent) : false;
+    });
   }
-  if (isObjectLocalValue(partialValue) && isObjectLocalValue(value)) {
-    const allKeys = Array.from(/* @__PURE__ */ new Set([...Object.keys(partialValue), ...Object.keys(value)]));
+  if (isObjectLocalValue(partialValue) && component.type === "object") {
+    const allKeys = Array.from(
+      /* @__PURE__ */ new Set([...Object.keys(partialValue), ...Object.keys(component.componentMap)])
+    );
     const matchingKeys = allKeys.filter(
-      (key) => !isNullish3(partialValue[key]) && !isNullish3(value[key])
+      (key) => !isNullish3(partialValue[key]) && !isNullish3(component.componentMap[key])
+    );
+    return matchingKeys.every(
+      (key) => isPartialLocalValueMatch(partialValue[key], component.componentMap[key])
     );
-    return matchingKeys.every((key) => isPartialLocalValueMatch(partialValue[key], value[key]));
   }
-  return partialValue === value;
+  const componentValue = component.getLocalValue();
+  if (partialValue instanceof File && componentValue instanceof File) {
+    return areEquivalentFiles(partialValue, componentValue);
+  }
+  if ("isPersisted" in component && component.isPersisted) {
+    return true;
+  }
+  return partialValue === componentValue;
 };
+var areEquivalentFiles = (fileA, fileB) => fileA.name === fileB.name && fileA.type === fileB.type && fileA.size === fileB.size;
 
 // src/revamp/domain/components/SelectInputComponent.ts
 var createSelectInputComponent = (selectProps, updateComponent) => {
@@ -12031,9 +12065,10 @@ var createSelectInputComponent = (selectProps, updateComponent) => {
     "summariser"
   ]);
   const children = options.map((option) => option.component);
-  const selectedIndex = options.findIndex(
-    (option) => isPartialLocalValueMatch(selectProps.initialValue, option.component.getLocalValue())
+  const matchingOptions = options.map(
+    (option) => isPartialLocalValueMatch(selectProps.initialValue, option.component)
   );
+  const selectedIndex = matchingOptions.filter(isTrue).length === 1 ? matchingOptions.indexOf(true) : null;
   const update = getInputUpdateFunction(uid, updateComponent);
   const getValidationErrors = getLocalValueValidator(checks);
   const getAndSetValidationErrors = (currentValue) => {
@@ -12100,6 +12135,7 @@ var createSelectInputComponent = (selectProps, updateComponent) => {
   }
   const persist = getComponentPersistAsync(update, performPersistAsync);
   return __spreadProps(__spreadValues({}, selectComponent), {
+    isPersisted: true,
     onSelect(updatedIndex) {
       selectComponent.onSelect.call(this, updatedIndex);
       const isValid = getValidationErrors(this.getLocalValue()).length === 0;
@@ -12113,6 +12149,7 @@ var createSelectInputComponent = (selectProps, updateComponent) => {
     }
   });
 };
+var isTrue = (value) => value;
 
 // src/revamp/domain/mappers/schema/oneOfSchemaToComponent/oneOfSchemaToComponent.ts
 var oneOfSchemaToComponent = (schemaMapperProps, mapperProps) => {
@@ -12245,6 +12282,7 @@ var createDateInputComponent = (textInputProps, updateComponent) => {
   if (performPersistAsync) {
     const persist = getComponentPersistAsync(update, performPersistAsync);
     return __spreadProps(__spreadValues({}, dateInputComponent), {
+      isPersisted: true,
       onChange(updatedValue) {
         dateInputComponent.onChange.call(this, updatedValue);
         const isValid = getValidationErrors(updatedValue).length === 0;
@@ -12394,6 +12432,7 @@ var createUploadInputComponent = (uploadInputProps, updateComponent) => {
   const persist = getComponentPersistAsync(update, performPersistAsync);
   return __spreadProps(__spreadValues({}, uploadComponent), {
     format,
+    isPersisted: true,
     async onUpload(file) {
       update((draft) => {
         draft.errors = [];
@@ -12511,6 +12550,7 @@ var createTextInputComponent = (textInputProps, updateComponent) => {
   if (performPersistAsync) {
     const persist = getComponentPersistAsync(update, performPersistAsync);
     return __spreadProps(__spreadValues({}, inputComponent), {
+      isPersisted: true,
       onBlur() {
         if (this.validate()) {
           persist(this.persistedState, this.getLocalValue()).catch(() => {
@@ -12860,6 +12900,7 @@ var createMultiUploadInputComponent = (uploadInputProps, updateComponent) => {
   const persist = getComponentMultiPersistAsync(update, performPersistAsync);
   return __spreadProps(__spreadValues({}, uploadComponent), {
     format,
+    isPersisted: true,
     async onUpload(file, fileId) {
       await uploadComponent.onUpload.call(this, file, fileId);
       const submission = format === "blob" ? file : await toBase642(file);
@@ -13010,6 +13051,7 @@ var createBooleanInputComponent = (booleanInputProps, updateComponent) => {
   if (performPersistAsync) {
     const persist = getComponentPersistAsync(update, performPersistAsync);
     return __spreadProps(__spreadValues({}, booleanComponent), {
+      isPersisted: true,
       onChange(updatedValue) {
         booleanComponent.onChange.call(this, updatedValue);
         persist(this.persistedState, this.getLocalValue()).catch(() => {
@@ -13182,12 +13224,13 @@ var createFormComponent = (formProps) => __spreadProps(__spreadValues({}, formPr
 });
 
 // src/revamp/domain/mappers/layout/formLayoutToComponent.ts
-var formLayoutToComponent = (uid, { schemaId, control, margin = "md" }, mapperProps) => {
+var formLayoutToComponent = (uid, { schemaId, schema: schemaRef, control, margin = "md" }, mapperProps) => {
   const { step, stepLocalValue } = mapperProps;
   const { model, errors, schemas } = step;
-  const schema = schemas.find((s) => s.$id === schemaId);
+  const id = schemaId != null ? schemaId : schemaRef == null ? void 0 : schemaRef.$ref;
+  const schema = schemas.find((s) => s.$id === id);
   if (!schema) {
-    throw new Error("Bad layout schemaId");
+    throw new Error("Schema not found in schemas array.");
   }
   return createFormComponent({
     uid,
@@ -13694,9 +13737,9 @@ function Step({
   triggerRefresh
 }) {
   var _a;
-  const [stepComponent, setStepComponent] = (0, import_react56.useState)(emptyStepComponent);
-  const stepComponentRef = (0, import_react56.useRef)(emptyStepComponent);
-  const updateComponent = (0, import_react56.useCallback)(
+  const [stepComponent, setStepComponent] = (0, import_react57.useState)(emptyStepComponent);
+  const stepComponentRef = (0, import_react57.useRef)(emptyStepComponent);
+  const updateComponent = (0, import_react57.useCallback)(
     (id, update) => {
       update(findComponent([stepComponentRef.current], id));
       setStepComponent(() => {
@@ -13707,14 +13750,14 @@ function Step({
     },
     []
   );
-  (0, import_react56.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     setStepComponent(() => {
       const newStepDomainComponent = __spreadProps(__spreadValues({}, stepComponentRef.current), { loadingState });
       stepComponentRef.current = newStepDomainComponent;
       return newStepDomainComponent;
     });
   }, [loadingState]);
-  const onAction = (0, import_react56.useCallback)(
+  const onAction = (0, import_react57.useCallback)(
     async (action) => {
       var _a2;
       const skipValidation = action.method === "GET" || Boolean(action.skipValidation);
@@ -13734,7 +13777,7 @@ function Step({
     },
     [triggerSubmission]
   );
-  const onRefresh = (0, import_react56.useCallback)(
+  const onRefresh = (0, import_react57.useCallback)(
     async (schemaId, url) => {
       var _a2;
       const refreshUrl = (_a2 = url != null ? url : step.refreshUrl) != null ? _a2 : step.refreshFormUrl;
@@ -13746,7 +13789,7 @@ function Step({
     },
     [step.refreshUrl, step.refreshFormUrl, triggerRefresh]
   );
-  (0, import_react56.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     const initialComponent = mapStepToComponent({
       stepLocalValue: initialLocalValue,
       step,
@@ -13776,7 +13819,7 @@ function Step({
     logEvent,
     onRefresh
   ]);
-  (0, import_react56.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     trackEvent("Step Shown");
   }, [(_a = step.id) != null ? _a : step.key]);
   return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_jsx_runtime119.Fragment, { children: render(stepComponent) });
@@ -14426,21 +14469,21 @@ function DynamicFlowCore(props) {
     onLog
   } = props;
   const { formatMessage, locale } = (0, import_react_intl35.useIntl)();
-  const getErrorMessageFunctions = (0, import_react57.useMemo)(
+  const getErrorMessageFunctions = (0, import_react58.useMemo)(
     () => getSchemaErrorMessageFunction(formatMessage, locale),
     [formatMessage, locale]
   );
-  (0, import_react57.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     var _a2;
     if (!initialStep && initialAction) {
       void triggerSubmission(initialAction, (_a2 = initialAction.data) != null ? _a2 : {}, null);
     }
   }, []);
-  const [step, setStep] = (0, import_react57.useState)(initialStep != null ? initialStep : null);
-  const localValueRef = (0, import_react57.useRef)(null);
-  const [etag, setEtag] = (0, import_react57.useState)(null);
-  const abortControllerRef = (0, import_react57.useRef)(new AbortController());
-  const [loadingState, setLoadingState] = (0, import_react57.useState)(initialStep ? "idle" : "loading");
+  const [step, setStep] = (0, import_react58.useState)(initialStep != null ? initialStep : null);
+  const localValueRef = (0, import_react58.useRef)(null);
+  const [etag, setEtag] = (0, import_react58.useState)(null);
+  const abortControllerRef = (0, import_react58.useRef)(new AbortController());
+  const [loadingState, setLoadingState] = (0, import_react58.useState)(initialStep ? "idle" : "loading");
   const abortCurrentAndGetNewAbortSignal = () => {
     abortControllerRef.current.abort();
     abortControllerRef.current = new AbortController();
@@ -14448,21 +14491,21 @@ function DynamicFlowCore(props) {
   };
   const stepId = (_a = step == null ? void 0 : step.id) != null ? _a : step == null ? void 0 : step.key;
   const stepAnalytics = step == null ? void 0 : step.analytics;
-  const trackEvent = (0, import_react57.useMemo)(
+  const trackEvent = (0, import_react58.useMemo)(
     () => getAnalyticsEventDispatcher({ flowId, stepId, analytics: stepAnalytics, onEvent }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [flowId, stepId, JSON.stringify(stepAnalytics), onEvent]
   );
-  const logEvent = (0, import_react57.useMemo)(() => getLoggingEventDispatcher(onLog), [onLog]);
-  (0, import_react57.useEffect)(() => trackEvent("Flow Started"), []);
-  const closeWithError = (0, import_react57.useCallback)(
+  const logEvent = (0, import_react58.useMemo)(() => getLoggingEventDispatcher(onLog), [onLog]);
+  (0, import_react58.useEffect)(() => trackEvent("Flow Started"), []);
+  const closeWithError = (0, import_react58.useCallback)(
     (error, analytics) => {
       trackEvent("Flow Failed", __spreadValues({}, analytics));
       onError(error);
     },
     [onError, trackEvent]
   );
-  const triggerSubmission = (0, import_react57.useCallback)(
+  const triggerSubmission = (0, import_react58.useCallback)(
     async (action, model, localValue) => {
       if (true) {
         console.log("\u23EF\uFE0F triggerSubmission", JSON.stringify({ action, model }, null, 2));
@@ -14534,7 +14577,7 @@ function DynamicFlowCore(props) {
     },
     [httpClient, trackEvent, onCompletion, getErrorMessageFunctions, step, etag, closeWithError]
   );
-  const triggerRefresh = (0, import_react57.useCallback)(
+  const triggerRefresh = (0, import_react58.useCallback)(
     async ({
       refreshUrl,
       model,
@@ -14575,11 +14618,11 @@ function DynamicFlowCore(props) {
     },
     [etag, httpClient, trackEvent, closeWithError]
   );
-  const render = (0, import_react57.useMemo)(
+  const render = (0, import_react58.useMemo)(
     () => getRenderFunction([CoreContainerRenderer, ...renderers2, StepRenderer]),
     [renderers2]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ErrorBoundary_default, { onError, children: step ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ErrorBoundary_default, { onError: closeWithError, children: step ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
     Step_default,
     {
       displayStepTitle,
@@ -14603,7 +14646,7 @@ var renderers = getWiseRenderers();
 function DynamicFlowWise(props) {
   const { httpClient } = props;
   const { locale } = (0, import_react_intl36.useIntl)();
-  const wiseHttpClient = (0, import_react58.useMemo)(
+  const wiseHttpClient = (0, import_react59.useMemo)(
     () => makeWiseHttpClient(httpClient, locale),
     [httpClient, locale]
   );