@mxenabled/connect-widget 1.0.0 → 1.2.0

package/dist/index.es.js

@@ -8983,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,
@@ -9011,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) {
@@ -9138,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;
@@ -9654,7 +9654,7 @@ const connect = createReducer(defaultState$1, {
   [addAggregationData().type]: continueAfterAdditionalProduct
 });
 
-const initialState$4 = {
+const initialState$5 = {
   loading: true,
   client: {},
   clientColorScheme: {
@@ -9673,7 +9673,7 @@ const initialState$4 = {
 };
 const profilesSlice = createSlice({
   name: "profiles",
-  initialState: initialState$4,
+  initialState: initialState$5,
   reducers: {
     loadProfiles: (state, action) => {
       const {
@@ -9716,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;
@@ -13024,7 +13024,7 @@ const browser = (state = { height: 0, isMobile: false, isTablet: false, size: ""
   }
 };
 
-const initialState$2 = {
+const initialState$3 = {
   currentSession: {},
   featureVisit: {},
   path: [],
@@ -13032,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;
@@ -13056,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
 });
@@ -69363,15 +69381,23 @@ const ConnectLogoHeader = (props) => {
   const tokens = useTokens();
   const styles = getStyles$M();
   const defaultInstitutionImage = () => colorScheme === COLOR_SCHEME.LIGHT ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { borderRadius: tokens.BorderRadius.Large }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgConnectHeaderInstitutionLight, {}) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { borderRadius: tokens.BorderRadius.Large }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgConnectHeaderInstitutionDark, {}) });
+  const defaultAggregatorLogo = () => colorScheme === COLOR_SCHEME.LIGHT ? /* @__PURE__ */ jsxRuntimeExports.jsx(SvgConnectHeaderBackdropLight, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(SvgConnectHeaderBackdropDark, {});
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "aria-hidden": true, style: styles.container, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-test": "mxLogo", style: styles.backdropImage, children: colorScheme === COLOR_SCHEME.LIGHT ? /* @__PURE__ */ jsxRuntimeExports.jsx(SvgConnectHeaderBackdropLight, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(SvgConnectHeaderBackdropDark, {}) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-test": "mxLogo", style: styles.backdropImage, children: props?.institution?.aggregator_logo_url ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "img",
+      {
+        alt: "aggregator logo",
+        src: props.institution.aggregator_logo_url,
+        style: styles.aggregatorLogo
+      }
+    ) : defaultAggregatorLogo() }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.clientLogo, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ClientLogo, { alt: "Client logo", clientGuid, size: 64 }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.institutionLogo, children: props.institutionGuid ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.institutionLogo, children: props?.institution?.guid ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       De,
       {
         alt: "Institution logo",
-        institutionGuid: props.institutionGuid,
-        logoUrl: props.institutionLogo,
+        institutionGuid: props.institution.guid,
+        logoUrl: props.institution.logo_url,
         size: 64,
         style: { borderRadius: tokens.BorderRadius.Large }
       }
@@ -69411,6 +69437,12 @@ const getStyles$M = () => {
       width: maxHeight,
       marginLeft: "80px",
       zIndex: 20
+    },
+    aggregatorLogo: {
+      width: "88px",
+      height: "80px",
+      zIndex: 10,
+      position: "relative"
     }
   };
 };
@@ -69740,7 +69772,7 @@ const DisclosureInterstitial = React__default.forwardRef((props, interstitialNav
     return /* @__PURE__ */ jsxRuntimeExports.jsx(DataAvailable, {});
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.logoHeader, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ConnectLogoHeader, { institutionGuid: institution.guid }) }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.logoHeader, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ConnectLogoHeader, { institution }) }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(SlideDown, { delay: getNextDelay(), children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.flexGroup, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         x,
@@ -71554,13 +71586,7 @@ const Connecting = (props) => {
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: connectingRef, style: styles.container, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(SlideDown, { delay: getNextDelay(), children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.logoHeader, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        ConnectLogoHeader,
-        {
-          institutionGuid: institution.guid,
-          institutionLogo: institution.logo_url
-        }
-      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.logoHeader, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ConnectLogoHeader, { institution }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(x, { component: "h2", style: styles.subHeader, truncate: false, variant: "H2", children: __("Connecting to %1", institution.name) })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx(ProgressBar, { jobSchedule }) }),
@@ -76826,6 +76852,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() {
@@ -76835,20 +76862,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: [
@@ -77200,7 +77227,7 @@ const DynamicDisclosure = React__default.forwardRef(
       }
     );
     return /* @__PURE__ */ jsxRuntimeExports.jsx(StickyComponentContainer, { footer, footerStyle: { borderTop: "" }, ref: containerRef, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.logoHeader, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ConnectLogoHeader, { institutionGuid: institution.guid }) }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.logoHeader, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ConnectLogoHeader, { institution }) }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         x,
         {
@@ -81254,6 +81281,9 @@ const reducer = (state, action) => {
 
 const PostMessageContext = createContext({ onPostMessage: () => {
 } });
+function setupLocalizedContent(localizedContent) {
+  Store.dispatch(setLocalizedContent(localizedContent));
+}
 const ConnectWidget = ({
   onPostMessage = () => {
   },
@@ -81264,6 +81294,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 })