@mxenabled/connect-widget 2.5.5 → 2.6.0

package/dist/index.es.js

@@ -9164,8 +9164,27 @@ const { addVerificationData, addAggregationData, additionalProductReset } = conf
 const configSlice$1 = configSlice.reducer;
 
 const ACTIONABLE_ERROR_CODES = {
-  NO_ELIGIBLE_ACCOUNTS: 1e3
-};
+  NO_ELIGIBLE_ACCOUNTS: 1e3,
+  NO_ACCOUNTS: 1001,
+  ACCESS_DENIED: 1002,
+  INCORRECT_OTP: 2001,
+  INCORRECT_MFA: 2002,
+  MFA_TIMEOUT: 2003,
+  REAUTHORIZATION_REQUIRED: 2004,
+  INVALID_CREDENTIALS: 2005,
+  INSTITUTION_DOWN: 3e3,
+  INSTITUTION_MAINTENANCE: 3001,
+  INSTITUTION_UNAVAILABLE: 3002
+};
+const CODES_REQUIRING_CREDENTIALS = [
+  ACTIONABLE_ERROR_CODES.INVALID_CREDENTIALS,
+  ACTIONABLE_ERROR_CODES.REAUTHORIZATION_REQUIRED
+];
+const CODES_REQUIRING_MFA = [
+  ACTIONABLE_ERROR_CODES.INCORRECT_OTP,
+  ACTIONABLE_ERROR_CODES.INCORRECT_MFA,
+  ACTIONABLE_ERROR_CODES.MFA_TIMEOUT
+];
 const ACTIVE_ACTIONABLE_ERROR_CODES = Object.values(ACTIONABLE_ERROR_CODES);
 const canHandleActionableError = (errorCode, mode) => {
   if (errorCode === ACTIONABLE_ERROR_CODES.NO_ELIGIBLE_ACCOUNTS && mode !== VERIFY_MODE) {
@@ -9615,9 +9634,12 @@ function getStepFromMember(member, mode = AGG_MODE) {
   const connection_status = member.connection_status;
   if (member && memberIsBlockedForCostReasons(member)) {
     return STEPS.INSTITUTION_DISABLED;
-  } else if (member?.error?.error_code && canHandleActionableError(member?.error?.error_code, mode) || hasNoSingleAccountSelectOptions(member))
-    return STEPS.ACTIONABLE_ERROR;
-  else if (connection_status === ReadableStatuses$1.CHALLENGED)
+  } else if (member?.error?.error_code && canHandleActionableError(member?.error?.error_code, mode) || hasNoSingleAccountSelectOptions(member)) {
+    const errorCode = member?.error?.error_code;
+    if (CODES_REQUIRING_CREDENTIALS.includes(errorCode)) return STEPS.ENTER_CREDENTIALS;
+    if (CODES_REQUIRING_MFA.includes(errorCode)) return STEPS.MFA;
+    else return STEPS.ACTIONABLE_ERROR;
+  } else if (connection_status === ReadableStatuses$1.CHALLENGED)
     return STEPS.MFA;
   else if (connection_status === ReadableStatuses$1.CONNECTED)
     return STEPS.CONNECTED;
@@ -70375,8 +70397,8 @@ const VIEWS$2 = {
   GENERAL_SUPPORT: "generalSupport",
   SUCCESS: "success"
 };
-const Support = React__default.forwardRef((props, supportNavRef) => {
-  const { loadToView, onClose } = props;
+const Support$1 = React__default.forwardRef((props, supportNavRef) => {
+  const { loadToView = VIEWS$2.MENU, onClose } = props;
   const [currentView, setCurrentView] = useState(loadToView);
   const [email, setEmail] = useState("");
   const [ariaLiveRegionMessage, setAriaLiveRegionMessage] = useState("");
@@ -70469,14 +70491,11 @@ const getStyles$15 = (tokens) => ({
     margin: "0 auto 0 auto"
   }
 });
-Support.propTypes = {
+Support$1.propTypes = {
   loadToView: PropTypes$1.oneOf([VIEWS$2.MENU, VIEWS$2.REQ_INSTITUTION, VIEWS$2.GENERAL_SUPPORT]),
   onClose: PropTypes$1.func.isRequired
 };
-Support.defaultPops = {
-  loadToView: VIEWS$2.MENU
-};
-Support.displayName = "Support";
+Support$1.displayName = "Support";
 
 const focusElement = (element) => {
   if (element && "focus" in element) {
@@ -70710,7 +70729,7 @@ const Search$2 = React__default.forwardRef((props, navigationRef) => {
   }
   if (state.showSupportView) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Support,
+      Support$1,
       {
         loadToView: VIEWS$2.REQ_INSTITUTION,
         onClose: () => dispatch({ type: SEARCH_ACTIONS.HIDE_SUPPORT }),
@@ -72070,7 +72089,7 @@ const MFAStep = React__default.forwardRef((props, navigationRef) => {
   }, [isSubmitting]);
   if (showSupportView) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Support,
+      Support$1,
       {
         loadToView: VIEWS$2.GENERAL_SUPPORT,
         onClose: () => setShowSupportView(false),
@@ -75230,6 +75249,18 @@ const buildFormSchema = (loginFields) => {
     };
   }, {});
 };
+const shouldShowMessageBox = (error, currentMember, mode = AGG_MODE) => {
+  const noErrors = _isEmpty(error);
+  const isDenied = currentMember.connection_status === ReadableStatuses$1.DENIED;
+  const isErrorCodeCredentialRelated = currentMember?.error?.error_code && canHandleActionableError(currentMember?.error?.error_code, mode);
+  if (noErrors && isDenied) {
+    return true;
+  } else if (isErrorCodeCredentialRelated) {
+    return true;
+  } else {
+    return false;
+  }
+};
 
 const CREDENTIAL_FIELD_TYPES = {
   PASSWORD: 1};
@@ -75550,7 +75581,7 @@ const Credentials = React__default.forwardRef(
     ]);
     if (showSupportView) {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Support,
+        Support$1,
         {
           loadToView: VIEWS$2.MENU,
           onClose: () => setShowSupportView(false),
@@ -75636,7 +75667,7 @@ const Credentials = React__default.forwardRef(
           }
         ),
         !_isEmpty(error) && /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx(MemberError, { error, institution }) }),
-        _isEmpty(error) && currentMember.connection_status === ReadableStatuses$1.DENIED && /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        shouldShowMessageBox(error, currentMember, connectConfig.mode) && /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           MessageBox,
           {
             "data-test": "credentials-error-message-box",
@@ -77063,7 +77094,7 @@ const LoginError = React__default.forwardRef(
     const statusActions = memberStatusActionsMap[member.connection_status] || defaultMemberStatusAction;
     if (showSupportView) {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Support,
+        Support$1,
         {
           loadToView: VIEWS$2.GENERAL_SUPPORT,
           onClose: () => setShowSupportView(false),
@@ -77118,38 +77149,69 @@ LoginError.propTypes = {
 };
 LoginError.displayName = "LoginError";
 
-const ActionableError = () => {
+const useActionableErrorMap = (jobDetailCode, setShowSupport) => {
   const postMessageFunctions = useContext(PostMessageContext);
-  const institution = useSelector((state) => state.connect.selectedInstitution);
-  const currentMember = useSelector(getCurrentMember);
-  const initialConfig = useSelector(selectInitialConfig);
-  const jobDetailCode = currentMember.error.error_code;
-  const tokens = useTokens();
-  const styles = getStyles$A(tokens);
-  const getNextDelay = getDelay();
+  const initialConfig = useSelector((state) => state.connect.initialConfig);
   const dispatch = useDispatch();
+  const goToSearch = () => {
+    postMessageFunctions.onPostMessage("connect/backToSearch");
+    dispatch({
+      type: ActionTypes$2.ACTIONABLE_ERROR_CONNECT_DIFFERENT_INSTITUTION,
+      payload: initialConfig.mode
+    });
+  };
+  const goToSupport = () => setShowSupport(true);
+  const goToCredentials = () => dispatch({ type: ActionTypes$2.ACTIONABLE_ERROR_LOG_IN_AGAIN });
   const messagingMap = useMemo(
     () => ({
       [ACTIONABLE_ERROR_CODES.NO_ELIGIBLE_ACCOUNTS]: {
         title: __("No eligible accounts"),
-        primaryAction: {
-          label: __("Log in again"),
-          action: () => dispatch({ type: ActionTypes$2.ACTIONABLE_ERROR_LOG_IN_AGAIN })
-        },
-        secondaryActions: {
-          label: __("Connect a different institution"),
-          action: () => {
-            postMessageFunctions.onPostMessage("connect/backToSearch");
-            dispatch({
-              type: ActionTypes$2.ACTIONABLE_ERROR_CONNECT_DIFFERENT_INSTITUTION,
-              payload: initialConfig.mode
-            });
-          }
-        }
+        primaryAction: { label: __("Log in again"), action: goToCredentials },
+        secondaryActions: { label: __("Connect a different institution"), action: goToSearch }
+      },
+      [ACTIONABLE_ERROR_CODES.NO_ACCOUNTS]: {
+        title: __("No accounts found"),
+        primaryAction: { label: __("Return to institution selection"), action: goToSearch },
+        secondaryActions: { label: __("Get help"), action: goToSupport }
+      },
+      [ACTIONABLE_ERROR_CODES.ACCESS_DENIED]: {
+        title: __("Additional permissions needed"),
+        primaryAction: { label: __("Review instructions"), action: goToCredentials },
+        secondaryActions: { label: __("Get help"), action: goToSupport }
+      },
+      [ACTIONABLE_ERROR_CODES.INSTITUTION_DOWN]: {
+        title: __("Unable to connect"),
+        primaryAction: { label: __("Return to institution selection"), action: goToSearch },
+        secondaryActions: { label: __("Get help"), action: goToSupport }
+      },
+      [ACTIONABLE_ERROR_CODES.INSTITUTION_MAINTENANCE]: {
+        title: __("Maintenance in progress"),
+        primaryAction: { label: __("Return to institution selection"), action: goToSearch },
+        secondaryActions: { label: __("Get help"), action: goToSupport }
+      },
+      [ACTIONABLE_ERROR_CODES.INSTITUTION_UNAVAILABLE]: {
+        title: __("Unable to connect"),
+        primaryAction: { label: __("Return to institution selection"), action: goToSearch },
+        secondaryActions: { label: __("Get help"), action: goToSupport }
       }
     }),
     [dispatch]
   );
+  return messagingMap[jobDetailCode];
+};
+
+const Support = Support$1;
+const ActionableError = () => {
+  const supportNavRef = useRef(null);
+  const postMessageFunctions = useContext(PostMessageContext);
+  const institution = useSelector((state) => state.connect.selectedInstitution);
+  const currentMember = useSelector(getCurrentMember);
+  const jobDetailCode = currentMember.error.error_code;
+  const tokens = useTokens();
+  const styles = getStyles$A(tokens);
+  const getNextDelay = getDelay();
+  const [showSupport, setShowSupport] = React__default.useState(false);
+  const errorDetails = useActionableErrorMap(jobDetailCode, setShowSupport);
   useEffect(() => {
     postMessageFunctions.onPostMessage("connect/invalidData", {
       member: {
@@ -77158,7 +77220,14 @@ const ActionableError = () => {
       }
     });
   }, [jobDetailCode]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+  return showSupport ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Support,
+    {
+      loadToView: VIEWS$2.GENERAL_SUPPORT,
+      onClose: () => setShowSupport(false),
+      ref: supportNavRef
+    }
+  ) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.logoWrapper, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { badgeContent: "!", color: "error", sx: styles.badge, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       K0,
       {
@@ -77176,7 +77245,7 @@ const ActionableError = () => {
           style: styles.title,
           truncate: false,
           variant: "H2",
-          children: messagingMap[jobDetailCode].title
+          children: errorDetails?.title
         }
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -77197,10 +77266,10 @@ const ActionableError = () => {
         {
           "data-test": "actionable-error-primary-button",
           fullWidth: true,
-          onClick: messagingMap[jobDetailCode].primaryAction.action,
+          onClick: errorDetails?.primaryAction.action,
           style: { marginBottom: 8 },
           variant: "contained",
-          children: messagingMap[jobDetailCode].primaryAction.label
+          children: errorDetails?.primaryAction.label
         }
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -77208,10 +77277,10 @@ const ActionableError = () => {
         {
           "data-test": "actionable-error-secondary-button",
           fullWidth: true,
-          onClick: messagingMap[jobDetailCode].secondaryActions.action,
+          onClick: errorDetails?.secondaryActions.action,
           style: { marginBottom: 8 },
           variant: "text",
-          children: messagingMap[jobDetailCode].secondaryActions.label
+          children: errorDetails?.secondaryActions.label
         }
       )
     ] })
@@ -80828,32 +80897,32 @@ const AccountTypes = {
   CHECKING_LINE_OF_CREDIT: 12
 };
 const AccountTypeNames = [
-  __("Other"),
-  _p("AccountType", "Checking"),
-  __("Savings"),
-  __("Loan"),
-  __("Credit Card"),
-  __("Investment"),
-  __("Line of Credit"),
-  __("Mortgage"),
-  __("Property"),
-  __("Cash"),
-  __("Insurance"),
-  __("Prepaid"),
-  _p("AccountType", "Checking")
+  () => __("Other"),
+  () => _p("AccountType", "Checking"),
+  () => __("Savings"),
+  () => __("Loan"),
+  () => __("Credit Card"),
+  () => __("Investment"),
+  () => __("Line of Credit"),
+  () => __("Mortgage"),
+  () => __("Property"),
+  () => __("Cash"),
+  () => __("Insurance"),
+  () => __("Prepaid"),
+  () => _p("AccountType", "Checking")
   // Checking line of credit will be referred to as a checking account
 ];
 const PropertyTypeNames = [
-  __("Real Estate"),
-  __("Vehicle"),
-  __("Art"),
-  __("Jewelry"),
-  __("Furniture"),
-  __("Appliances"),
-  __("Computer"),
-  __("Electronics"),
-  __("Sports Equipment"),
-  __("Miscellaneous")
+  () => __("Real Estate"),
+  () => __("Vehicle"),
+  () => __("Art"),
+  () => __("Jewelry"),
+  () => __("Furniture"),
+  () => __("Appliances"),
+  () => __("Computer"),
+  () => __("Electronics"),
+  () => __("Sports Equipment"),
+  () => __("Miscellaneous")
 ];
 
 const getFormFields = (accountType) => {
@@ -80950,7 +81019,7 @@ const propertyTypeOptions = () => {
   const types = [];
   PropertyTypeNames.map((name, i) => {
     types.push({
-      label: name,
+      label: name(),
       value: i.toString()
     });
   });
@@ -81419,7 +81488,7 @@ const ManualAccountForm = React__default.forwardRef(
                 style: styles.icon
               }
             ),
-            AccountTypeNames[props.accountType || 0]
+            AccountTypeNames[props.accountType || 0]()
           ]
         }
       ) }),
@@ -81648,13 +81717,13 @@ const ManualAccountMenu = React__default.forwardRef((props, ref) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: typeList.map((account_type, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
       UtilityRow,
       {
-        "aria-label": AccountTypeNames[account_type],
+        "aria-label": AccountTypeNames[account_type](),
         borderType: "inset-left",
-        "data-test": `${AccountTypeNames[account_type].replace(/\s+/g, "-")}-button`,
+        "data-test": `${AccountTypeNames[account_type]().replace(/\s+/g, "-")}-button`,
         leftChildren: getIcon[account_type],
         onClick: () => fadeOut(ref.current, "up", 300).then(props.handleAccountTypeSelect(account_type)),
         rightChildren: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, {}),
-        title: AccountTypeNames[account_type]
+        title: AccountTypeNames[account_type]()
       },
       i
     )) })
@@ -81713,7 +81782,7 @@ const ManualAccountSuccess = (props) => {
           style: styles.title,
           truncate: false,
           variant: "H2",
-          children: __("%1 added", AccountTypeNames[props.accountType])
+          children: __("%1 added", AccountTypeNames[props.accountType]())
         }
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(