@mxenabled/connect-widget 0.19.5 → 0.20.1

package/dist/index.es.js

@@ -5236,7 +5236,8 @@ const ActionTypes$2 = {
   MFA_CONNECT_SUBMIT_ERROR: "connect/mfa_connect_submit_error",
   MFA_CONNECT_SUBMIT_SUCCESS: "connect/mfa_connect_submit_success",
   LOGIN_ERROR_START_OVER: "connect/login_error_start_over",
-  CONNECT_GO_BACK: "connect/go_back"
+  CONNECT_GO_BACK: "connect/go_back",
+  REJECT_ADDITIONAL_PRODUCT: "connect/reject_additional_product"
 };
 const loadConnect$1 = (config = {}) => ({ type: ActionTypes$2.LOAD_CONNECT, payload: config });
 const loadConnectSuccess$1 = (dependencies = {}) => ({
@@ -5328,6 +5329,7 @@ const TAX_MODE = "tax";
 const STEPS = {
   ACTIONABLE_ERROR: "actionableError",
   ADD_MANUAL_ACCOUNT: "addManualAccount",
+  ADDITIONAL_PRODUCT: "additionalProduct",
   CONNECTED: "connected",
   CONNECTING: "connecting",
   CONSENT: "consent",
@@ -8973,6 +8975,185 @@ const hasNoSingleAccountSelectOptions = (member) => {
   return false;
 };
 
+const COMBO_JOB_DATA_TYPES = {
+  ACCOUNT_NUMBER: "account_verification",
+  // verification mode
+  ACCOUNT_OWNER: "identity_verification",
+  // include_identity
+  TRANSACTIONS: "transactions",
+  REWARDS: "rewards"};
+
+const initialState$5 = {
+  _initialValues: "",
+  is_mobile_webview: false,
+  target_origin_referrer: null,
+  ui_message_protocol: "post_message",
+  ui_message_version: 1,
+  ui_message_webview_url_scheme: "mx",
+  color_scheme: "light",
+  mode: AGG_MODE,
+  current_institution_code: null,
+  current_institution_guid: null,
+  current_member_guid: null,
+  current_microdeposit_guid: null,
+  enable_app2app: true,
+  disable_background_agg: null,
+  disable_institution_search: false,
+  include_identity: null,
+  include_transactions: null,
+  iso_country_code: null,
+  oauth_referral_source: REFERRAL_SOURCES.BROWSER,
+  update_credentials: false,
+  wait_for_full_aggregation: false,
+  data_request: null,
+  use_cases: null,
+  additional_product_option: null
+};
+const configSlice = createSlice({
+  name: "config",
+  initialState: initialState$5,
+  reducers: {
+    addVerificationData: (state) => {
+      if (state.mode === AGG_MODE) {
+        state.include_transactions = true;
+      }
+      state.mode = VERIFY_MODE;
+      if (Array.isArray(state.use_cases)) {
+        state.use_cases.push("MONEY_MOVEMENT");
+      } else {
+        state.use_cases = ["MONEY_MOVEMENT"];
+      }
+    },
+    addAggregationData: (state) => {
+      state.include_transactions = true;
+      if (Array.isArray(state.use_cases)) {
+        state.use_cases.push("PFM");
+      } else {
+        state.use_cases = ["PFM"];
+      }
+    },
+    additionalProductReset: _additionalProductReset
+  },
+  extraReducers(builder) {
+    builder.addCase(
+      ActionTypes$2.LOAD_CONNECT,
+      (state, action) => {
+        const productDetermineMode = getProductDeterminedMode(action.payload);
+        const ui_message_version = typeof action.payload.ui_message_version === "string" ? parseInt(action.payload.ui_message_version, 10) : action.payload.ui_message_version || state.ui_message_version;
+        const loadedState = {
+          ...state,
+          ...action.payload,
+          ui_message_version,
+          mode: productDetermineMode !== null ? productDetermineMode : action.payload.mode || state.mode
+        };
+        const { _initialValues, ...stateWithoutInitialValues } = loadedState;
+        return {
+          ...stateWithoutInitialValues,
+          // _initialValues is a reference to the values that were used to load the widget initially.
+          // It is meant to be set, and then READ ONLY after that.
+          // Example:
+          // When a user dynamically changes the mode, use_cases, or data for a connection we need to
+          // reset the mode, use_cases, and data to the initial state for the next connection attempt.
+          // JSON is used here to deeply copy the object, use a selector to get the values.
+          _initialValues: JSON.stringify(stateWithoutInitialValues)
+        };
+      }
+    );
+    builder.addCase(
+      ActionTypes$2.CONNECT_GO_BACK,
+      (state, action) => {
+        const resetSteps = [STEPS.SEARCH, STEPS.VERIFY_EXISTING_MEMBER, STEPS.ADDITIONAL_PRODUCT];
+        if (resetSteps.includes(action.payload?.previousStep)) {
+          return _additionalProductReset(state);
+        }
+        return state;
+      }
+    );
+    builder.addCase(ActionTypes$2.RESET_WIDGET_CONNECTED, (state) => {
+      return _additionalProductReset(state);
+    });
+    builder.addCase(ActionTypes$2.ACTIONABLE_ERROR_CONNECT_DIFFERENT_INSTITUTION, (state) => {
+      return _additionalProductReset(state);
+    });
+    builder.addCase(ActionTypes$2.LOGIN_ERROR_START_OVER, (state) => {
+      return _additionalProductReset(state);
+    });
+    builder.addCase(ActionTypes$2.DELETE_MEMBER_SUCCESS_RESET, (state) => {
+      return _additionalProductReset(state);
+    });
+    builder.addCase(ActionTypes$2.RESET_WIDGET_MFA_STEP, (state) => {
+      return _additionalProductReset(state);
+    });
+  }
+});
+const selectInitialConfig = createSelector(
+  (state) => state.config._initialValues,
+  (initialValues) => convertInitialValuesToObject(initialValues)
+);
+const selectConfig = (state) => state.config;
+const selectIsMobileWebView = (state) => state.config.is_mobile_webview;
+const selectUIMessageVersion = (state) => state.config.ui_message_version;
+const selectConnectConfig = createSelector(selectConfig, (config) => ({
+  mode: config.mode,
+  current_institution_code: config.current_institution_code,
+  current_institution_guid: config.current_institution_guid,
+  current_member_guid: config.current_member_guid,
+  current_microdeposit_guid: config.current_microdeposit_guid,
+  enable_app2app: config.enable_app2app,
+  disable_background_agg: config.disable_background_agg,
+  disable_institution_search: config.disable_institution_search,
+  include_identity: config.include_identity,
+  include_transactions: config.include_transactions,
+  iso_country_code: config.iso_country_code,
+  oauth_referral_source: config.oauth_referral_source,
+  update_credentials: config.update_credentials,
+  wait_for_full_aggregation: config.wait_for_full_aggregation,
+  data_request: config.data_request,
+  use_cases: config.use_cases,
+  additional_product_option: config.additional_product_option
+}));
+const selectColorScheme = (state) => state.config.color_scheme;
+const getProductDeterminedMode = (config) => {
+  const products = config?.data_request?.products;
+  if (Array.isArray(products)) {
+    if (products.includes(COMBO_JOB_DATA_TYPES.ACCOUNT_NUMBER)) {
+      return VERIFY_MODE;
+    } else if (products.includes(COMBO_JOB_DATA_TYPES.REWARDS)) {
+      return REWARD_MODE;
+    } else {
+      return AGG_MODE;
+    }
+  } else {
+    return null;
+  }
+};
+const convertInitialValuesToObject = (initialValues) => {
+  try {
+    return JSON.parse(initialValues);
+  } catch (error) {
+    return {};
+  }
+};
+function _additionalProductReset(state) {
+  const initialValuesObject = convertInitialValuesToObject(state._initialValues);
+  return {
+    ...state,
+    include_transactions: initialValuesObject?.include_transactions ?? initialState$5.include_transactions,
+    mode: initialValuesObject?.mode ?? initialState$5.mode,
+    use_cases: initialValuesObject?.use_cases ?? initialState$5.use_cases
+  };
+}
+const { addVerificationData, addAggregationData, additionalProductReset } = configSlice.actions;
+const configSlice$1 = configSlice.reducer;
+
+const ACTIONABLE_ERROR_CODES = {
+  NO_ELIGIBLE_ACCOUNTS: 1e3
+};
+const ACTIVE_ACTIONABLE_ERROR_CODES = Object.values(ACTIONABLE_ERROR_CODES);
+const canHandleActionableError = (errorCode) => {
+  return ACTIVE_ACTIONABLE_ERROR_CODES.includes(errorCode);
+};
+
 const defaultState$1 = {
   error: null,
   // The most recent job request error, if any
@@ -9165,13 +9346,33 @@ const acceptDisclosure = (state, { payload }) => {
   return { ...state, location: pushLocation(state.location, nextStep) };
 };
 const selectInstitutionSuccess = (state, action) => {
+  let nextStep = STEPS.ENTER_CREDENTIALS;
+  const canOfferVerification = action.payload.institution?.account_verification_is_enabled && action.payload.additionalProductOption === COMBO_JOB_DATA_TYPES.ACCOUNT_NUMBER;
+  const canOfferAggregation = action.payload.additionalProductOption === COMBO_JOB_DATA_TYPES.TRANSACTIONS;
+  if (canOfferVerification || canOfferAggregation) {
+    nextStep = STEPS.ADDITIONAL_PRODUCT;
+  } else if (action.payload.consentIsEnabled) {
+    nextStep = STEPS.CONSENT;
+  }
+  if (state.location.length > 0 && state.location[state.location.length - 1].step === nextStep) {
+    return {
+      ...state,
+      selectedInstitution: action.payload.institution
+    };
+  }
+  return {
+    ...state,
+    location: pushLocation(state.location, nextStep),
+    selectedInstitution: action.payload.institution
+  };
+};
+const continueAfterAdditionalProduct = (state, action) => {
   return {
     ...state,
     location: pushLocation(
       state.location,
-      action.payload.consentFlag ? STEPS.CONSENT : STEPS.ENTER_CREDENTIALS
-    ),
-    selectedInstitution: action.payload.institution
+      action.payload.consentIsEnabled ? STEPS.CONSENT : STEPS.ENTER_CREDENTIALS
+    )
   };
 };
 const startOauth = (state, action) => ({
@@ -9281,9 +9482,24 @@ const addManualAccount = (state, { payload }) => {
   return state;
 };
 const connectGoBack = (state) => {
+  const stepsWhichResetValues = [STEPS.SEARCH, STEPS.VERIFY_EXISTING_MEMBER];
+  const newLocationValues = popLocation(state);
+  if (stepsWhichResetValues.includes(newLocationValues[newLocationValues.length - 1]?.step)) {
+    return {
+      ...state,
+      location: newLocationValues,
+      currentMemberGuid: defaultState$1.currentMemberGuid,
+      error: defaultState$1.error,
+      updateCredentials: defaultState$1.updateCredentials,
+      oauthURL: defaultState$1.oauthURL,
+      oauthErrorReason: defaultState$1.oauthErrorReason,
+      jobSchedule: UNINITIALIZED$2,
+      selectedInstitution: defaultState$1.selectedInstitution
+    };
+  }
   return {
     ...state,
-    location: popLocation(state)
+    location: newLocationValues
   };
 };
 const actionableErrorConnectDifferentInstitution = (state, action) => {
@@ -9344,7 +9560,7 @@ function getStartingStep(members, member, microdeposit, config, institution, wid
 }
 function getStepFromMember(member) {
   const connection_status = member.connection_status;
-  if (member?.most_recent_job_detail_code || hasNoSingleAccountSelectOptions(member))
+  if (member?.most_recent_job_detail_code && canHandleActionableError(member?.most_recent_job_detail_code) || hasNoSingleAccountSelectOptions(member))
     return STEPS.ACTIONABLE_ERROR;
   else if (connection_status === ReadableStatuses$1.CHALLENGED)
     return STEPS.MFA;
@@ -9429,147 +9645,14 @@ const connect = createReducer(defaultState$1, {
   [ActionTypes$2.MFA_CONNECT_SUBMIT_ERROR]: mfaConnectSubmitError,
   [ActionTypes$2.ADD_MANUAL_ACCOUNT_SUCCESS]: addManualAccount,
   [ActionTypes$2.LOGIN_ERROR_START_OVER]: loginErrorStartOver,
-  [ActionTypes$2.CONNECT_GO_BACK]: connectGoBack
-});
-
-const COMBO_JOB_DATA_TYPES = {
-  ACCOUNT_NUMBER: "account_verification",
-  // verification mode
-  ACCOUNT_OWNER: "identity_verification",
-  // include_identity
-  TRANSACTIONS: "transactions",
-  REWARDS: "rewards"};
-
-const initialState$5 = {
-  _initialValues: "",
-  is_mobile_webview: false,
-  target_origin_referrer: null,
-  ui_message_protocol: "post_message",
-  ui_message_version: 1,
-  ui_message_webview_url_scheme: "mx",
-  color_scheme: "light",
-  mode: AGG_MODE,
-  current_institution_code: null,
-  current_institution_guid: null,
-  current_member_guid: null,
-  current_microdeposit_guid: null,
-  enable_app2app: true,
-  disable_background_agg: null,
-  disable_institution_search: false,
-  include_identity: null,
-  include_transactions: null,
-  iso_country_code: null,
-  oauth_referral_source: REFERRAL_SOURCES.BROWSER,
-  update_credentials: false,
-  wait_for_full_aggregation: false,
-  data_request: null,
-  use_cases: null
-};
-const configSlice = createSlice({
-  name: "config",
-  initialState: initialState$5,
-  reducers: {
-    stepUpToVerification: (state) => {
-      if (state.mode === AGG_MODE) {
-        state.include_transactions = true;
-      }
-      state.mode = VERIFY_MODE;
-      if (Array.isArray(state.use_cases)) {
-        state.use_cases.push("MONEY_MOVEMENT");
-      } else {
-        state.use_cases = ["MONEY_MOVEMENT"];
-      }
-    },
-    stepUpToAggregation: (state) => {
-      state.include_transactions = true;
-      if (Array.isArray(state.use_cases)) {
-        state.use_cases.push("PFM");
-      } else {
-        state.use_cases = ["PFM"];
-      }
-    },
-    stepUpReset: (state) => {
-      const initialValuesObject = convertInitialValuesToObject(state._initialValues);
-      return {
-        ...state,
-        include_transactions: initialValuesObject?.include_transactions ?? initialState$5.include_transactions,
-        mode: initialValuesObject?.mode ?? initialState$5.mode,
-        use_cases: initialValuesObject?.use_cases ?? initialState$5.use_cases
-      };
-    }
-  },
-  extraReducers(builder) {
-    builder.addCase(
-      ActionTypes$2.LOAD_CONNECT,
-      (state, action) => {
-        const productDetermineMode = getProductDeterminedMode(action.payload);
-        const ui_message_version = typeof action.payload.ui_message_version === "string" ? parseInt(action.payload.ui_message_version, 10) : action.payload.ui_message_version || state.ui_message_version;
-        const loadedState = {
-          ...state,
-          ...action.payload,
-          ui_message_version,
-          mode: productDetermineMode !== null ? productDetermineMode : action.payload.mode || state.mode
-        };
-        const { _initialValues, ...stateWithoutInitialValues } = loadedState;
-        return {
-          ...stateWithoutInitialValues,
-          // _initialValues is a reference to the values that were used to load the widget initially.
-          // It is meant to be set, and then READ ONLY after that.
-          // Example:
-          // When a user dynamically changes the mode, use_cases, or data for a connection we need to
-          // reset the mode, use_cases, and data to the initial state for the next connection attempt.
-          // JSON is used here to deeply copy the object, use a selector to get the values.
-          _initialValues: JSON.stringify(stateWithoutInitialValues)
-        };
-      }
-    );
-  }
+  [ActionTypes$2.CONNECT_GO_BACK]: connectGoBack,
+  // Addtional product offer / step up reducers
+  // These are here to manage changing the location/step of the widget
+  [ActionTypes$2.REJECT_ADDITIONAL_PRODUCT]: continueAfterAdditionalProduct,
+  // Listening to the step up actions from the configSlice
+  [addVerificationData().type]: continueAfterAdditionalProduct,
+  [addAggregationData().type]: continueAfterAdditionalProduct
 });
-const selectConfig = (state) => state.config;
-const selectIsMobileWebView = (state) => state.config.is_mobile_webview;
-const selectUIMessageVersion = (state) => state.config.ui_message_version;
-const selectConnectConfig = createSelector(selectConfig, (config) => ({
-  mode: config.mode,
-  current_institution_code: config.current_institution_code,
-  current_institution_guid: config.current_institution_guid,
-  current_member_guid: config.current_member_guid,
-  current_microdeposit_guid: config.current_microdeposit_guid,
-  enable_app2app: config.enable_app2app,
-  disable_background_agg: config.disable_background_agg,
-  disable_institution_search: config.disable_institution_search,
-  include_identity: config.include_identity,
-  include_transactions: config.include_transactions,
-  iso_country_code: config.iso_country_code,
-  oauth_referral_source: config.oauth_referral_source,
-  update_credentials: config.update_credentials,
-  wait_for_full_aggregation: config.wait_for_full_aggregation,
-  data_request: config.data_request,
-  use_cases: config.use_cases
-}));
-const selectColorScheme = (state) => state.config.color_scheme;
-const getProductDeterminedMode = (config) => {
-  const products = config?.data_request?.products;
-  if (Array.isArray(products)) {
-    if (products.includes(COMBO_JOB_DATA_TYPES.ACCOUNT_NUMBER)) {
-      return VERIFY_MODE;
-    } else if (products.includes(COMBO_JOB_DATA_TYPES.REWARDS)) {
-      return REWARD_MODE;
-    } else {
-      return AGG_MODE;
-    }
-  } else {
-    return null;
-  }
-};
-const convertInitialValuesToObject = (initialValues) => {
-  try {
-    return JSON.parse(initialValues);
-  } catch (error) {
-    return {};
-  }
-};
-const { stepUpToVerification, stepUpToAggregation, stepUpReset } = configSlice.actions;
-const configSlice$1 = configSlice.reducer;
 
 const initialState$4 = {
   loading: true,
@@ -71757,6 +71840,7 @@ const LoginError = React__default.forwardRef(
     const postMessageFunctions = useContext(PostMessageContext);
     const dispatch = useDispatch();
     const connectConfig = useSelector(selectConnectConfig);
+    const initialConfig = useSelector(selectInitialConfig);
     const pageViewInfo = PageviewInfo.CONNECT_LOGIN_ERROR;
     useAnalyticsPath(...pageViewInfo);
     const [isLeaving, setIsLeaving] = useState(false);
@@ -71785,7 +71869,10 @@ const LoginError = React__default.forwardRef(
         }
       });
     }, [member]);
-    const loginErrorStartOver = () => dispatch({ type: ActionTypes$2.LOGIN_ERROR_START_OVER, payload: { mode: connectConfig.mode } });
+    const loginErrorStartOver = () => dispatch({
+      type: ActionTypes$2.LOGIN_ERROR_START_OVER,
+      payload: { mode: initialConfig.mode }
+    });
     const handleOkPrimaryActionClick = () => {
       postMessageFunctions.onPostMessage("connect/memberError/primaryAction", {
         member: {
@@ -71992,14 +72079,11 @@ LoginError.propTypes = {
 };
 LoginError.displayName = "LoginError";
 
-const ACTIONABLE_ERROR_CODES = {
-  NO_ELIGIBLE_ACCOUNTS: 1e3
-};
-
 const ActionableError = () => {
   const postMessageFunctions = useContext(PostMessageContext);
   const institution = useSelector((state) => state.connect.selectedInstitution);
   const currentMember = useSelector(getCurrentMember);
+  const initialConfig = useSelector(selectInitialConfig);
   const jobDetailCode = currentMember.most_recent_job_detail_code;
   const tokens = useTokens();
   const styles = getStyles$A(tokens);
@@ -72021,7 +72105,10 @@ const ActionableError = () => {
           label: __("Connect a different institution"),
           action: () => {
             postMessageFunctions.onPostMessage("connect/backToSearch");
-            dispatch({ type: ActionTypes$2.ACTIONABLE_ERROR_CONNECT_DIFFERENT_INSTITUTION });
+            dispatch({
+              type: ActionTypes$2.ACTIONABLE_ERROR_CONNECT_DIFFERENT_INSTITUTION,
+              payload: initialConfig.mode
+            });
           }
         }
       }
@@ -76674,11 +76761,96 @@ const Actions = {
   HANDLE_SUCCESS: "manualAccount/handleSuccess"
 };
 
+const ADDITIONAL_PRODUCT_OPTIONS = [
+  COMBO_JOB_DATA_TYPES.TRANSACTIONS,
+  COMBO_JOB_DATA_TYPES.ACCOUNT_NUMBER
+];
+const AdditionalProductStep = React__default.forwardRef(
+  ({
+    additionalProductName,
+    onNoClick = () => {
+      throw new Error("onNoClick not implemented");
+    },
+    onYesClick = () => {
+      throw new Error("onYesClick not implemented");
+    }
+  }, navigationRef) => {
+    const selectedInstitution = useSelector(getSelectedInstitution);
+    useImperativeHandle(navigationRef, () => {
+      return {
+        showBackButton() {
+          return true;
+        }
+      };
+    }, []);
+    const getNextDelay = getDelay();
+    const addAggregationText = {
+      title: __("Add financial management?"),
+      body: __(
+        "You are connecting this account for payments and transfers. Would you also like to connect it for financial management to track income and spending?"
+      ),
+      acceptButtonText: __("Yes, add financial management"),
+      rejectButtonText: __("No, just transfers and payments")
+    };
+    const addVerificationText = {
+      title: __("Add transfers and payments?"),
+      body: __(
+        "You are connecting this account for financial management. Would you also like to connect it for transfers and payments to quickly move money to and from this institution?"
+      ),
+      acceptButtonText: __("Yes, add transfers and payments"),
+      rejectButtonText: __("No, just financial management")
+    };
+    const componentText = additionalProductName === COMBO_JOB_DATA_TYPES.TRANSACTIONS ? addAggregationText : addVerificationText;
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(SlideDown, { delay: getNextDelay(), children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(InstitutionBlock, { institution: selectedInstitution, style: { marginBottom: 24 } }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        x,
+        {
+          component: "h2",
+          "data-test": "additional-product__title-text",
+          style: { marginBottom: 12 },
+          truncate: false,
+          variant: "H2",
+          children: componentText.title
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(x, { component: "p", style: { marginBottom: 32 }, truncate: false, variant: "Paragraph", children: componentText.body }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button$2,
+        {
+          "data-test": "additional-product__accept-button",
+          fullWidth: true,
+          onClick: () => {
+            onYesClick();
+          },
+          style: { marginBottom: 8 },
+          variant: "contained",
+          children: componentText.acceptButtonText
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button$2,
+        {
+          "data-test": "additional-product__reject-button",
+          fullWidth: true,
+          onClick: () => {
+            onNoClick();
+          },
+          variant: "text",
+          children: componentText.rejectButtonText
+        }
+      )
+    ] });
+  }
+);
+AdditionalProductStep.displayName = "AdditionalProductStep";
+
 const useSelectInstitution = () => {
   const { api } = useApi();
   const [institutionGuid, setInstitutionGuid] = useState("");
   const dispatch = useDispatch();
   const consentIsEnabled = useSelector((state) => isConsentEnabled(state));
+  const connectConfig = useSelector(selectConnectConfig);
   const handleSelectInstitution = useCallback(
     (institutionGuid2) => {
       setInstitutionGuid(institutionGuid2);
@@ -76692,7 +76864,11 @@ const useSelectInstitution = () => {
       map((institution) => {
         return dispatch({
           type: ActionTypes$2.SELECT_INSTITUTION_SUCCESS,
-          payload: { institution, consentFlag: consentIsEnabled || false }
+          payload: {
+            institution,
+            consentIsEnabled: consentIsEnabled || false,
+            additionalProductOption: connectConfig?.additional_product_option || null
+          }
         });
       }),
       catchError((err) => {
@@ -77102,6 +77278,7 @@ DynamicDisclosure.displayName = "DynamicDisclosure";
 const RenderConnectStep = (props) => {
   const postMessageFunctions = useContext(PostMessageContext);
   const connectConfig = useSelector(selectConnectConfig);
+  const initialConfig = useSelector(selectInitialConfig);
   const uiMessageVersion = useSelector(selectUIMessageVersion);
   const isMobileWebview = useSelector(selectIsMobileWebView);
   const client = useSelector((state) => state.profiles.client);
@@ -77119,6 +77296,7 @@ const RenderConnectStep = (props) => {
   const selectedInstitution = useSelector(getSelectedInstitution);
   const updateCredentials = useSelector((state) => state.connect.updateCredentials);
   const verifyMemberError = useSelector((state) => state.connect.error);
+  const consentIsEnabled = useSelector((state) => isConsentEnabled(state));
   const { handleSelectInstitution } = useSelectInstitution();
   const dispatch = useDispatch();
   const tokens = useTokens();
@@ -77181,6 +77359,37 @@ const RenderConnectStep = (props) => {
         ref: props.navigationRef
       }
     ) });
+  } else if (step === STEPS.ADDITIONAL_PRODUCT) {
+    if (!ADDITIONAL_PRODUCT_OPTIONS.includes(connectConfig?.additional_product_option)) {
+      throw new Error("invalid product offer");
+    }
+    const onNoClick = () => {
+      dispatch({
+        type: ActionTypes$2.REJECT_ADDITIONAL_PRODUCT,
+        payload: {
+          consentIsEnabled
+        }
+      });
+    };
+    let onYesClick = null;
+    if (connectConfig?.additional_product_option === COMBO_JOB_DATA_TYPES.ACCOUNT_NUMBER) {
+      onYesClick = () => {
+        dispatch(addVerificationData({ consentIsEnabled }));
+      };
+    } else if (connectConfig?.additional_product_option === COMBO_JOB_DATA_TYPES.TRANSACTIONS) {
+      onYesClick = () => {
+        dispatch(addAggregationData({ consentIsEnabled }));
+      };
+    }
+    connectStepView = /* @__PURE__ */ jsxRuntimeExports.jsx(
+      AdditionalProductStep,
+      {
+        additionalProductName: connectConfig.additional_product_option,
+        onNoClick,
+        onYesClick,
+        ref: props.navigationRef
+      }
+    );
   } else if (step === STEPS.ADD_MANUAL_ACCOUNT) {
     connectStepView = /* @__PURE__ */ jsxRuntimeExports.jsx(
       ManualAccountConnect,
@@ -77188,7 +77397,7 @@ const RenderConnectStep = (props) => {
         availableAccountTypes: props.availableAccountTypes,
         onClose: () => dispatch({
           type: ActionTypes$2.GO_BACK_MANUAL_ACCOUNT,
-          payload: connectConfig
+          payload: initialConfig
         }),
         onManualAccountAdded: props.onManualAccountAdded,
         ref: props.navigationRef
@@ -77277,9 +77486,8 @@ const RenderConnectStep = (props) => {
       }
     );
   } else if (step === STEPS.ACTIONABLE_ERROR) {
-    connectStepView = [ACTIONABLE_ERROR_CODES.NO_ELIGIBLE_ACCOUNTS].includes(
-      currentMember?.most_recent_job_detail_code ?? -1
-    ) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ActionableError, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    const jobDetailCode = currentMember?.most_recent_job_detail_code ?? null;
+    connectStepView = canHandleActionableError(jobDetailCode) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ActionableError, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(
       LoginError,
       {
         institution: selectedInstitution,
@@ -77332,7 +77540,7 @@ const RenderConnectStep = (props) => {
           postMessageFunctions.onPostMessage(POST_MESSAGES.BACK_TO_SEARCH);
           dispatch({
             type: ActionTypes$2.DELETE_MEMBER_SUCCESS_RESET,
-            payload: connectConfig
+            payload: initialConfig
           });
         }
       }
@@ -79373,6 +79581,7 @@ const Connect$2 = ({
   ...props
 }) => {
   const connectConfig = useSelector(selectConnectConfig);
+  const initialConfig = useSelector(selectInitialConfig);
   const loadError = useSelector((state2) => state2.connect.loadError);
   const hasAtriumAPI = useSelector((state2) => state2.profiles.client.has_atrium_api);
   const isLoading = useSelector((state2) => state2.connect.isComponentLoading);
@@ -79380,6 +79589,10 @@ const Connect$2 = ({
   const step = useSelector(
     (state2) => state2.connect.location[state2.connect.location.length - 1]?.step ?? STEPS.SEARCH
   );
+  const previousStep = useSelector((state2) => {
+    if (state2.connect.location.length < 2) return null;
+    return state2.connect.location[state2.connect.location.length - 2]?.step ?? null;
+  });
   const uiMessageVersion = useSelector(selectUIMessageVersion);
   const prevProps = usePrevious({ isLoading, step, clientConfig: props.clientConfig });
   const { loadConnect } = useLoadConnect();
@@ -79393,6 +79606,16 @@ const Connect$2 = ({
     // This holds a reference to the current step component.
   });
   const consentIsEnabled = useSelector((state2) => isConsentEnabled(state2));
+  const handleGoBackWithSideEffects = () => {
+    const BACK_ACTION_WITH_PREV_STEP = {
+      type: ActionTypes$2.CONNECT_GO_BACK,
+      payload: { previousStep }
+    };
+    if (step === STEPS.SEARCH || step === STEPS.VERIFY_EXISTING_MEMBER) {
+      postMessageFunctions.onPostMessage(POST_MESSAGES.BACK_TO_SEARCH, {});
+    }
+    return BACK_ACTION_WITH_PREV_STEP;
+  };
   const dispatch = useDispatch();
   useEffect(() => {
     const [name, path] = PageviewInfo.CONNECT;
@@ -79469,7 +79692,7 @@ const Connect$2 = ({
         } else {
           dispatch({
             type: ActionTypes$2.GO_BACK_POST_MESSAGE,
-            payload: connectConfig
+            payload: initialConfig
           });
           postMessageFunctions.onPostMessage("navigation", { did_go_back: true });
         }
@@ -79483,31 +79706,33 @@ const Connect$2 = ({
     if (state.returnToMicrodeposits) {
       dispatch(stepToMicrodeposits$1());
       setState({ ...state, returnToMicrodeposits: false });
+    } else if (connectConfig.additional_product_option) {
+      dispatch(handleGoBackWithSideEffects());
     } else {
       postMessageFunctions.onPostMessage(POST_MESSAGES.BACK_TO_SEARCH, {});
-      dispatch({ type: ActionTypes$2.GO_BACK_CONSENT, payload: connectConfig });
+      dispatch({ type: ActionTypes$2.GO_BACK_CONSENT, payload: initialConfig });
     }
   };
   const _handleCredentialsGoBack = () => {
     if (state.returnToMicrodeposits) {
       dispatch(stepToMicrodeposits$1());
       setState({ ...state, returnToMicrodeposits: false });
-    } else if (consentIsEnabled) {
-      dispatch({ type: ActionTypes$2.CONNECT_GO_BACK });
+    } else if (consentIsEnabled || connectConfig.additional_product_option) {
+      dispatch(handleGoBackWithSideEffects());
     } else {
       postMessageFunctions.onPostMessage(POST_MESSAGES.BACK_TO_SEARCH, {});
-      dispatch({ type: ActionTypes$2.GO_BACK_CREDENTIALS, payload: connectConfig });
+      dispatch({ type: ActionTypes$2.GO_BACK_CREDENTIALS, payload: initialConfig });
     }
   };
   const _handleOAuthGoBack = () => {
     if (state.returnToMicrodeposits) {
       dispatch(stepToMicrodeposits$1());
       setState({ ...state, returnToMicrodeposits: false });
-    } else if (consentIsEnabled) {
-      dispatch({ type: ActionTypes$2.CONNECT_GO_BACK });
+    } else if (consentIsEnabled || connectConfig.additional_product_option) {
+      dispatch(handleGoBackWithSideEffects());
     } else {
       postMessageFunctions.onPostMessage(POST_MESSAGES.BACK_TO_SEARCH, {});
-      dispatch({ type: ActionTypes$2.GO_BACK_OAUTH, payload: connectConfig });
+      dispatch({ type: ActionTypes$2.GO_BACK_OAUTH, payload: initialConfig });
     }
   };
   const _handleStepDOMChange = useCallback((ref) => {
@@ -79563,7 +79788,7 @@ const Connect$2 = ({
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             ConnectNavigationHeader,
             {
-              connectGoBack: () => dispatch({ type: ActionTypes$2.CONNECT_GO_BACK }),
+              connectGoBack: () => dispatch(handleGoBackWithSideEffects()),
               stepComponentRef: state.stepComponentRef
             }
           ),
@@ -80072,6 +80297,15 @@ const frCa = {
 	"No eligible accounts": "Aucun compte admissible",
 	"Only checking or savings accounts can be used for transfers. If you have one at %1, make sure to select it when connecting. Otherwise, try connecting a different institution.": "Seuls les comptes chèques ou d’épargne peuvent être utilisés pour les transferts. Si vous en avez un à %1, assurez-vous de le sélectionner lors de la connexion. Sinon, essayez de connecter une autre institution.",
 	Required: Required$1,
+	"Add financial management?": "Ajouter la gestion financière ?",
+	"You are connecting this account for payments and transfers. Would you also like to connect it for financial management to track income and spending?": "Vous connectez ce compte pour les paiements et les virements. Souhaitez-vous également le connecter pour la gestion financière afin de suivre vos revenus et vos dépenses ?",
+	"Yes, add financial management": "Oui, ajoutez la gestion financière",
+	"No, just transfers and payment": "Non, juste des virements et des paiements",
+	"Add transfers and payments?": "Ajouter des transferts et des paiements ?",
+	"You are connecting this account for financial management. Would you also like to connect it for transfers and payments to quickly move money to and from this institution?": "Vous connectez ce compte pour la gestion financière. Souhaitez-vous également le connecter pour effectuer des virements et des paiements afin de transférer rapidement des fonds vers et depuis cette institution ?",
+	"Yes, add transfers and payments": "Oui, ajouter des transferts et des paiements",
+	"No, just financial management": "Non, juste la gestion financière",
+	"Select an account to connect": "Sélectionnez un compte pour vous connecter",
 	"connect/disclosure/policy/text\u0004By clicking Continue, you agree to the ": "En cliquant sur Continuer, vous acceptez la ",
 	"connect/disclosure/policy/link\u0004MX Privacy Policy.": "Politique de confidentialité de MX.",
 	"connect/disclosure/policy/link\u0004MX Privacy Policy": "Politique de confidentialité de MX.",
@@ -80559,6 +80793,15 @@ const es = {
 	"No eligible accounts": "No hay cuentas elegibles",
 	"Only checking or savings accounts can be used for transfers. If you have one at %1, make sure to select it when connecting. Otherwise, try connecting a different institution.": "Solo se pueden usar cuentas de control o ahorro para transferencias. Si tiene uno en %1, asegúrese de seleccionarlo al conectarlo. De lo contrario, intente conectar una institución diferente.",
 	Required: Required,
+	"Add financial management?": "¿Añadir gestión financiera?",
+	"You are connecting this account for payments and transfers. Would you also like to connect it for financial management to track income and spending?": "Estás conectando esta cuenta para pagos y transferencias. ¿Te gustaría conectarla también para la gestión financiera y el seguimiento de ingresos y gastos?",
+	"Yes, add financial management": "Sí, añadir gestión financiera",
+	"No, just transfers and payments": "No, solo transferencias y pagos",
+	"Add transfers and payments?": "¿Añadir transferencias y pagos?",
+	"You are connecting this account for financial management. Would you also like to connect it for transfers and payments to quickly move money to and from this institution?": "Estás conectando esta cuenta para la gestión financiera. ¿Te gustaría conectarla también para transferencias y pagos para transferir dinero rápidamente desde y hacia esta institución?",
+	"Yes, add transfers and payments": "Sí, añadir transferencias y pagos",
+	"No, just financial management": "No, sólo gestión financiera",
+	"Select an account to connect": "Seleccione una cuenta para conectarse",
 	"connect/disclosure/button\u0004Continue": "Continuar",
 	"connect/disclosure/policy/text\u0004By clicking Continue, you agree to the ": "Al hacer clic en Continuar, tu aceptas la ",
 	"connect/disclosure/policy/link\u0004MX Privacy Policy.": "Política de privacidad de Money Experience.",