@mxenabled/connect-widget 0.20.7 → 1.1.0

package/dist/index.es.js

@@ -5087,23 +5087,39 @@ function baseFindIndex$2(array, predicate, fromIndex, fromRight) {
 }
 var _baseFindIndex = baseFindIndex$2;
 
-var reWhitespace = /\s/;
-function trimmedEndIndex$1(string) {
-  var index = string.length;
-  while (index-- && reWhitespace.test(string.charAt(index))) {
-  }
-  return index;
+var _trimmedEndIndex;
+var hasRequired_trimmedEndIndex;
+
+function require_trimmedEndIndex () {
+	if (hasRequired_trimmedEndIndex) return _trimmedEndIndex;
+	hasRequired_trimmedEndIndex = 1;
+	var reWhitespace = /\s/;
+	function trimmedEndIndex(string) {
+	  var index = string.length;
+	  while (index-- && reWhitespace.test(string.charAt(index))) {
+	  }
+	  return index;
+	}
+	_trimmedEndIndex = trimmedEndIndex;
+	return _trimmedEndIndex;
 }
-var _trimmedEndIndex = trimmedEndIndex$1;
 
-var trimmedEndIndex = _trimmedEndIndex;
-var reTrimStart = /^\s+/;
-function baseTrim$1(string) {
-  return string ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, "") : string;
+var _baseTrim;
+var hasRequired_baseTrim;
+
+function require_baseTrim () {
+	if (hasRequired_baseTrim) return _baseTrim;
+	hasRequired_baseTrim = 1;
+	var trimmedEndIndex = require_trimmedEndIndex();
+	var reTrimStart = /^\s+/;
+	function baseTrim(string) {
+	  return string ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, "") : string;
+	}
+	_baseTrim = baseTrim;
+	return _baseTrim;
 }
-var _baseTrim = baseTrim$1;
 
-var baseTrim = _baseTrim, isObject$7 = isObject_1, isSymbol$1 = isSymbol_1;
+var baseTrim = require_baseTrim(), isObject$7 = isObject_1, isSymbol$1 = isSymbol_1;
 var NAN = 0 / 0;
 var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
 var reIsBinary = /^0b[01]+$/i;
@@ -8559,7 +8575,7 @@ var hasRequiredTrim;
 function requireTrim () {
 	if (hasRequiredTrim) return trim_1;
 	hasRequiredTrim = 1;
-	var baseToString = _baseToString, baseTrim = _baseTrim, castSlice = require_castSlice(), charsEndIndex = require_charsEndIndex(), charsStartIndex = require_charsStartIndex(), stringToArray = require_stringToArray(), toString = toString_1;
+	var baseToString = _baseToString, baseTrim = require_baseTrim(), castSlice = require_castSlice(), charsEndIndex = require_charsEndIndex(), charsStartIndex = require_charsStartIndex(), stringToArray = require_stringToArray(), toString = toString_1;
 	function trim(string, chars, guard) {
 	  string = toString(string);
 	  if (string && (guard || chars === void 0)) {
@@ -8967,7 +8983,7 @@ const COMBO_JOB_DATA_TYPES = {
   TRANSACTIONS: "transactions",
   REWARDS: "rewards"};
 
-const initialState$5 = {
+const initialState$6 = {
   _initialValues: "",
   is_mobile_webview: false,
   target_origin_referrer: null,
@@ -8995,7 +9011,7 @@ const initialState$5 = {
 };
 const configSlice = createSlice({
   name: "config",
-  initialState: initialState$5,
+  initialState: initialState$6,
   reducers: {
     addVerificationData: (state) => {
       if (state.mode === AGG_MODE) {
@@ -9122,9 +9138,9 @@ 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
+    include_transactions: initialValuesObject?.include_transactions ?? initialState$6.include_transactions,
+    mode: initialValuesObject?.mode ?? initialState$6.mode,
+    use_cases: initialValuesObject?.use_cases ?? initialState$6.use_cases
   };
 }
 const { addVerificationData, addAggregationData, additionalProductReset } = configSlice.actions;
@@ -9175,7 +9191,7 @@ const loadConnect = (state, { payload }) => {
 };
 const loadConnectSuccess = (state, action) => {
   const {
-    members,
+    members = [],
     member,
     microdeposit,
     config = {},
@@ -9544,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 && canHandleActionableError(member?.most_recent_job_detail_code) || hasNoSingleAccountSelectOptions(member))
+  if (member?.error?.error_code && canHandleActionableError(member?.error?.error_code) || hasNoSingleAccountSelectOptions(member))
     return STEPS.ACTIONABLE_ERROR;
   else if (connection_status === ReadableStatuses$1.CHALLENGED)
     return STEPS.MFA;
@@ -9638,7 +9654,7 @@ const connect = createReducer(defaultState$1, {
   [addAggregationData().type]: continueAfterAdditionalProduct
 });
 
-const initialState$4 = {
+const initialState$5 = {
   loading: true,
   client: {},
   clientColorScheme: {
@@ -9657,7 +9673,7 @@ const initialState$4 = {
 };
 const profilesSlice = createSlice({
   name: "profiles",
-  initialState: initialState$4,
+  initialState: initialState$5,
   reducers: {
     loadProfiles: (state, action) => {
       const {
@@ -9700,12 +9716,12 @@ const isFeatureEnabled = (userFeatures, featureName) => {
 const CONNECT_COMBO_JOBS = "CONNECT_COMBO_JOBS";
 const CONNECT_CONSENT = "CONNECT_CONSENT";
 
-const initialState$3 = {
+const initialState$4 = {
   items: []
 };
 const userFeaturesSlice = createSlice({
   name: "userFeatures",
-  initialState: initialState$3,
+  initialState: initialState$4,
   reducers: {
     loadUserFeatures(state, action) {
       state.items = action.payload;
@@ -13008,7 +13024,7 @@ const browser = (state = { height: 0, isMobile: false, isTablet: false, size: ""
   }
 };
 
-const initialState$2 = {
+const initialState$3 = {
   currentSession: {},
   featureVisit: {},
   path: [],
@@ -13016,7 +13032,7 @@ const initialState$2 = {
 };
 const analyticsSlice = createSlice({
   name: "analytics",
-  initialState: initialState$2,
+  initialState: initialState$3,
   reducers: {
     analyticsSessionInitialized: (state, action) => {
       state.currentSession = action.payload;
@@ -13040,12 +13056,30 @@ const {
 } = analyticsSlice.actions;
 const analyticsSlice$1 = analyticsSlice.reducer;
 
+const initialState$2 = {};
+const localizedContentSlice = createSlice({
+  name: "localizedContent",
+  initialState: initialState$2,
+  reducers: {
+    setLocalizedContent(_state, action) {
+      return action.payload;
+    }
+  }
+});
+const { setLocalizedContent } = localizedContentSlice.actions;
+const localizedContentSlice$1 = localizedContentSlice.reducer;
+const selectLocalizedContent = createSelector(
+  (state) => state.localizedContent,
+  (localizedContent) => localizedContent
+);
+
 const rootReducer = combineReducers({
   analytics: analyticsSlice$1,
   app,
   browser,
   config: configSlice$1,
   connect,
+  localizedContent: localizedContentSlice$1,
   profiles: profilesSlice$1,
   userFeatures: userFeaturesSlice$1
 });
@@ -68906,13 +68940,13 @@ const DEFAULT_POLLING_STATE = {
   userMessage: CONNECTING_MESSAGES.STARTING
   // message to show the end user
 };
-function pollMember(memberGuid, api, onPostMessage, sendPosthogEvent) {
+function pollMember(memberGuid, api, onPostMessage, sendPosthogEvent, clientLocale) {
   return interval(3e3).pipe(
     switchMap(
       () => (
         // Poll the currentMember. Catch errors but don't handle it here
         // the scan will handle it below
-        defer(() => api.loadMemberByGuid(memberGuid)).pipe(
+        defer(() => api.loadMemberByGuid(memberGuid, clientLocale)).pipe(
           mergeMap(
             (member) => defer(() => api.loadJob(member.most_recent_job_guid)).pipe(
               map((job) => {
@@ -70908,6 +70942,9 @@ const CreateMemberForm = (props) => {
   const config = useSelector(selectConfig);
   const isHuman = useSelector((state2) => state2.app.humanEvent);
   const currentMembers = useSelector((state2) => state2.connect.members);
+  const clientLocale = useMemo(() => {
+    return document.querySelector("html")?.getAttribute("lang") || "en";
+  }, [document.querySelector("html")?.getAttribute("lang")]);
   const [isCreatingMember, setIsCreatingMember] = useState(false);
   const [memberCreateError, setMemberCreateError] = useState(null);
   const [userCredentials, setUserCredentials] = useState(null);
@@ -70990,7 +71027,7 @@ const CreateMemberForm = (props) => {
               };
             })
           );
-          return defer(() => api.loadMemberByGuid(memberGuid)).pipe(
+          return defer(() => api.loadMemberByGuid(memberGuid, clientLocale)).pipe(
             mergeMap((member) => {
               const shouldStepToMFA = member.connection_status === ReadableStatuses$1.CHALLENGED;
               return shouldStepToMFA ? stepToMFA$(member) : updateMember$;
@@ -71354,6 +71391,9 @@ const Connecting = (props) => {
   } = props;
   const selectedInstitution = useSelector(getSelectedInstitution);
   const sendPosthogEvent = useAnalyticsEvent();
+  const clientLocale = useMemo(() => {
+    return document.querySelector("html")?.getAttribute("lang") || "en";
+  }, [document.querySelector("html")?.getAttribute("lang")]);
   const currentMember = useSelector(getCurrentMember);
   const isComboJobsEnabled = useSelector(isConnectComboJobsEnabled);
   const jobSchedule = useSelector((state) => state.connect.jobSchedule);
@@ -71479,7 +71519,7 @@ const Connecting = (props) => {
       const startJob$ = defer(
         () => api.runJob(activeJob?.type, currentMember.guid, connectConfig, true)
       ).pipe(
-        mergeMap(() => api.loadMemberByGuid(currentMember.guid)),
+        mergeMap(() => api.loadMemberByGuid(currentMember.guid, clientLocale)),
         catchError((error) => {
           const isSafeConflictError = error?.response?.status === 409;
           if (isSafeConflictError) {
@@ -71492,7 +71532,7 @@ const Connecting = (props) => {
       return needsJobStarted ? startJob$ : of(currentMember);
     }).pipe(
       concatMap(
-        (member) => pollMember(member.guid, api, onPostMessage, sendPosthogEvent).pipe(
+        (member) => pollMember(member.guid, api, onPostMessage, sendPosthogEvent, clientLocale).pipe(
           tap((pollingState) => handleMemberPoll(pollingState)),
           filter((pollingState) => pollingState.jobIsDone),
           pluck("currentResponse"),
@@ -72118,7 +72158,7 @@ const ActionableError = () => {
   const institution = useSelector((state) => state.connect.selectedInstitution);
   const currentMember = useSelector(getCurrentMember);
   const initialConfig = useSelector(selectInitialConfig);
-  const jobDetailCode = currentMember.most_recent_job_detail_code;
+  const jobDetailCode = currentMember.error.error_code;
   const tokens = useTokens();
   const styles = getStyles$A(tokens);
   const getNextDelay = getDelay();
@@ -72127,10 +72167,6 @@ const ActionableError = () => {
     () => ({
       [ACTIONABLE_ERROR_CODES.NO_ELIGIBLE_ACCOUNTS]: {
         title: __("No eligible accounts"),
-        userMessage: (institution2) => __(
-          "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.",
-          institution2.name
-        ),
         primaryAction: {
           label: __("Log in again"),
           action: () => dispatch({ type: ActionTypes$2.ACTIONABLE_ERROR_LOG_IN_AGAIN })
@@ -72186,7 +72222,7 @@ const ActionableError = () => {
           style: styles.paragraph,
           truncate: false,
           variant: "Paragraph",
-          children: messagingMap[jobDetailCode].userMessage(institution)
+          children: currentMember.error.user_message
         }
       )
     ] }),
@@ -76175,6 +76211,9 @@ const ManualAccountForm = React__default.forwardRef(
     useAnalyticsPath(name, path);
     const { api } = useApi();
     const members = useSelector(getMembers);
+    const clientLocale = useMemo(() => {
+      return document.querySelector("html")?.getAttribute("lang") || "en";
+    }, [document.querySelector("html")?.getAttribute("lang")]);
     const [saving, setSaving] = useState(false);
     const [isPersonal, setIsPersonal] = useState(true);
     const [returnField, setReturnField] = useState(null);
@@ -76262,7 +76301,7 @@ const ManualAccountForm = React__default.forwardRef(
             return of(addManualAccountSuccess(savedAccount));
           }
           return zip(
-            from(api.loadMemberByGuid(savedAccount.member_guid)),
+            from(api.loadMemberByGuid(savedAccount.member_guid, clientLocale)),
             from(api.loadInstitutionByGuid(savedAccount.institution_guid))
           ).pipe(
             map(([loadedMember, loadedInstitution]) => {
@@ -76805,6 +76844,7 @@ const AdditionalProductStep = React__default.forwardRef(
     }
   }, navigationRef) => {
     const selectedInstitution = useSelector(getSelectedInstitution);
+    const { add_aggregation = {}, add_verification = {} } = useSelector(selectLocalizedContent)?.connect?.additional_product_screen || {};
     useImperativeHandle(navigationRef, () => {
       return {
         showBackButton() {
@@ -76814,20 +76854,20 @@ const AdditionalProductStep = React__default.forwardRef(
     }, []);
     const getNextDelay = getDelay();
     const addAggregationText = {
-      title: __("Add financial management?"),
-      body: __(
+      title: add_aggregation?.title || __("Add financial management?"),
+      body: add_aggregation?.body || __(
         "You're connecting this account for payments and transfers. Would you like to also enable financial management so you can track your income and spending?"
       ),
-      acceptButtonText: __("Yes, add financial management"),
-      rejectButtonText: __("No, only add transfers and payments")
+      acceptButtonText: add_aggregation?.button_1 || __("Yes, add financial management"),
+      rejectButtonText: add_aggregation?.button_2 || __("No, only add transfers and payments")
     };
     const addVerificationText = {
-      title: __("Add transfers and payments?"),
-      body: __(
+      title: add_verification?.title || __("Add transfers and payments?"),
+      body: add_verification?.body || __(
         "You're connecting this account for financial management. Would you like to also enable transfers and payments so you can quickly move money to and from this institution?"
       ),
-      acceptButtonText: __("Yes, add transfers and payments"),
-      rejectButtonText: __("No, only add financial management")
+      acceptButtonText: add_verification?.button_1 || __("Yes, add transfers and payments"),
+      rejectButtonText: add_verification?.button_2 || __("No, only add financial management")
     };
     const componentText = additionalProductName === COMBO_JOB_DATA_TYPES.TRANSACTIONS ? addAggregationText : addVerificationText;
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(SlideDown, { delay: getNextDelay(), children: [
@@ -77515,8 +77555,8 @@ const RenderConnectStep = (props) => {
       }
     );
   } else if (step === STEPS.ACTIONABLE_ERROR) {
-    const jobDetailCode = currentMember?.most_recent_job_detail_code ?? null;
-    connectStepView = canHandleActionableError(jobDetailCode) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ActionableError, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    const errorCode = currentMember?.error?.error_code ?? null;
+    connectStepView = canHandleActionableError(errorCode) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ActionableError, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(
       LoginError,
       {
         institution: selectedInstitution,
@@ -79432,6 +79472,9 @@ const getErrorResource = (err) => {
 const useLoadConnect = () => {
   const { api } = useApi();
   const profiles = useSelector((state) => state.profiles);
+  const clientLocale = useMemo(() => {
+    return document.querySelector("html")?.getAttribute("lang") || "en";
+  }, [document.querySelector("html")?.getAttribute("lang")]);
   const [config, setConfig] = useState({});
   const dispatch = useDispatch();
   const loadConnect = useCallback((config2) => setConfig(config2), [config]);
@@ -79441,7 +79484,7 @@ const useLoadConnect = () => {
     dispatch(loadConnect$1(config));
     let request$;
     if (config.current_member_guid) {
-      request$ = loadConnectFromMemberConfig(config, api);
+      request$ = loadConnectFromMemberConfig(config, api, clientLocale);
     } else if (config.current_institution_guid || config.current_institution_code) {
       request$ = loadConnectFromInstitutionConfig(config, api);
     } else if (config.mode === VERIFY_MODE && config.current_microdeposit_guid) {
@@ -79452,9 +79495,9 @@ const useLoadConnect = () => {
     const requestSubscription$ = request$.pipe(
       mergeMap((dependencies) => {
         if (clientSupportRequestedProducts(config, profiles.clientProfile)) {
-          return from(api.loadMembers()).pipe(
+          return from(api.loadMembers(clientLocale)).pipe(
             map(
-              (members) => loadConnectSuccess$1({
+              (members = []) => loadConnectSuccess$1({
                 members,
                 widgetProfile: profiles.widgetProfile,
                 ...dependencies
@@ -79507,8 +79550,8 @@ const useLoadConnect = () => {
   }, [config]);
   return { loadConnect };
 };
-function loadConnectFromMemberConfig(config, api) {
-  return from(api.loadMemberByGuid(config.current_member_guid)).pipe(
+function loadConnectFromMemberConfig(config, api, clientLocale) {
+  return from(api.loadMemberByGuid(config.current_member_guid, clientLocale)).pipe(
     mergeMap((member) => {
       return defer(() => api.loadInstitutionByGuid(member.institution_guid)).pipe(
         map((institution) => {
@@ -80324,11 +80367,9 @@ const frCa = {
 	"Log in again": "Connectez-vous à nouveau",
 	"Connect a different institution": "Mettre en relation un autre établissement",
 	"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 ?",
 	"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 ?",
 	"Yes, add transfers and payments": "Oui, ajouter des transferts et des paiements",
 	"Select an account to connect": "Sélectionnez un compte pour vous connecter",
@@ -80821,7 +80862,6 @@ const es = {
 	"Log in again": "Inicie sesión nuevamente",
 	"Connect a different institution": "Conecte una institución diferente",
 	"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?",
 	"Yes, add financial management": "Sí, añadir gestión financiera",
@@ -81233,6 +81273,9 @@ const reducer = (state, action) => {
 
 const PostMessageContext = createContext({ onPostMessage: () => {
 } });
+function setupLocalizedContent(localizedContent) {
+  Store.dispatch(setLocalizedContent(localizedContent));
+}
 const ConnectWidget = ({
   onPostMessage = () => {
   },
@@ -81243,6 +81286,9 @@ const ConnectWidget = ({
   ...props
 }) => {
   initGettextLocaleData(props.language);
+  useEffect(() => {
+    setupLocalizedContent(props?.language?.localizedContent || {});
+  }, []);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Provider_default, { store: Store, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ConnectedTokenProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(PostMessageContext.Provider, { value: { onPostMessage, postMessageEventOverrides }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(WidgetDimensionObserver, { heightOffset: 0, children: [
     showTooSmallDialog && /* @__PURE__ */ jsxRuntimeExports.jsx(TooSmallDialog, { onAnalyticPageview }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Connect$2, { onAnalyticPageview, ...props })