@mxenabled/connect-widget 0.10.3 → 0.11.0

package/dist/index.es.js

@@ -74061,8 +74061,10 @@ const getStyles$l = (tokens) => ({
     flexDirection: "column"
   },
   svg: {
+    display: "flex",
+    alignItems: "center",
     margin: "0 auto",
-    width: 200
+    width: 240
   },
   title: {
     marginBottom: tokens.Spacing.XSmall
@@ -74889,46 +74891,73 @@ const getViewByStatus = (status) => {
 const VerifyExistingMember = (props) => {
   useAnalyticsPath(...PageviewInfo.CONNECT_VERIFY_EXISTING_MEMBER);
   const { api } = useApi();
+  const config = useSelector(selectConfig);
   const dispatch = useDispatch();
   const { members, onAddNew } = props;
-  const iavMembers = members.filter(
-    (member) => member.verification_is_enabled && member.is_managed_by_user
-    // Only show user-managed members that support verification
-  );
-  const [selectedMember, setSelectedMember] = useState(null);
-  const [{ isLoadingInstitution, institutionError }, setInstitution] = useState({
-    isLoadingInstitution: false,
-    institutionError: null
-  });
+  const iavMembers = useMemo(() => {
+    return members.filter(
+      (member) => member.verification_is_enabled && member.is_managed_by_user
+      // Only show user-managed members that support verification
+    );
+  }, [members]);
+  const [institutions, setInstitutions] = useState(/* @__PURE__ */ new Map());
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
   const tokens = useTokens();
   const styles = getStyles$g(tokens);
-  const handleMemberClick = (selectedMember2) => {
-    setSelectedMember(selectedMember2);
-    setInstitution((state) => ({ ...state, isLoadingInstitution: true }));
-  };
+  const handleMemberClick = useCallback(
+    (selectedMember) => {
+      const institution = institutions.get(selectedMember.institution_guid);
+      if (institution) {
+        if (selectedMember.is_oauth) {
+          dispatch(startOauth$1(selectedMember, institution));
+        } else {
+          dispatch(verifyExistingConnection$1(selectedMember, institution));
+        }
+      }
+    },
+    [dispatch, institutions]
+  );
   useEffect(() => {
     focusElement(document.getElementById("connect-select-institution"));
   }, []);
   useEffect(() => {
-    if (!isLoadingInstitution || !selectedMember) return;
-    api.loadInstitutionByGuid(selectedMember.institution_guid).then((institution) => {
-      if (selectedMember.is_oauth) {
-        dispatch(startOauth$1(selectedMember, institution));
-      } else {
-        dispatch(verifyExistingConnection$1(selectedMember, institution));
+    const fetchInstitutionsProgressively = async () => {
+      setLoading(true);
+      setError(null);
+      const institutionMap = /* @__PURE__ */ new Map();
+      for (const member of iavMembers) {
+        try {
+          const institution = await api.loadInstitutionByGuid(member.institution_guid);
+          if (institution) {
+            institutionMap.set(member.institution_guid, institution);
+          }
+        } catch (err) {
+          setError(err);
+        }
       }
-    }).catch((error) => {
-      setInstitution((state) => ({
-        ...state,
-        isLoadingInstitution: false,
-        institutionError: error
-      }));
+      setInstitutions(new Map(institutionMap));
+      setLoading(false);
+    };
+    if (iavMembers.length > 0) {
+      fetchInstitutionsProgressively();
+    } else {
+      setLoading(false);
+    }
+  }, [api, iavMembers]);
+  const productSupportingMembers = useMemo(() => {
+    return iavMembers.filter((member) => {
+      const institution = institutions.get(member.institution_guid);
+      if (institution) {
+        return instutionSupportRequestedProducts(config, institution);
+      }
+      return false;
     });
-  }, [isLoadingInstitution, selectedMember]);
-  if (isLoadingInstitution) {
+  }, [config, institutions, iavMembers]);
+  if (loading) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingSpinner, { showText: true });
   }
-  if (institutionError) {
+  if (error) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       GenericError,
       {
@@ -74975,12 +75004,12 @@ const VerifyExistingMember = (props) => {
         children: _n(
           "%1 Connected institution",
           "%1 Connected institutions",
-          iavMembers.length,
-          iavMembers.length
+          productSupportingMembers.length,
+          productSupportingMembers.length
         )
       }
     ),
-    iavMembers.map((member) => {
+    productSupportingMembers.map((member) => {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         UtilityRow,
         {