@mxenabled/connect-widget 2.11.1 → 2.12.0

package/dist/index.es.js

@@ -78423,7 +78423,6 @@ const getStyles$J = (tokens) => {
       height: "24px",
       width: "24px",
       minWidth: "24px",
-      padding: "2px",
       zIndex: 20,
       display: "flex",
       alignItems: "center",
@@ -78510,7 +78509,7 @@ const ProgressMessage = ({ allDone, jobType }) => {
 };
 ProgressMessage.propTypes = {
   allDone: PropTypes$1.bool,
-  jobType: PropTypes$1.string
+  jobType: PropTypes$1.number
 };
 
 const ProgressLogo = ({ children }) => {
@@ -78524,15 +78523,14 @@ const getStyles$H = (tokens) => {
       backgroundColor: tokens.BackgroundColor.Container,
       borderRadius: "8px",
       display: "flex",
-      padding: "2px",
       zIndex: 11
     }
   };
 };
 
-const SvgProgressBackdropDark = (props) => /* @__PURE__ */ React$1.createElement("svg", { width: 80, height: 80, viewBox: "0 0 80 80", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "image", ...props }, /* @__PURE__ */ React$1.createElement("circle", { cx: 40, cy: 40, r: 23.5, stroke: "white", strokeOpacity: 0.45 }), /* @__PURE__ */ React$1.createElement("circle", { cx: 40, cy: 40, r: 31.5, stroke: "white", strokeOpacity: 0.3 }), /* @__PURE__ */ React$1.createElement("circle", { cx: 40, cy: 40, r: 39.5, stroke: "white", strokeOpacity: 0.15 }));
+const SvgProgressBackdropDark = (props) => /* @__PURE__ */ React$1.createElement("svg", { width: 80, height: 80, viewBox: "0 0 80 80", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "image", "aria-hidden": "true", ...props }, /* @__PURE__ */ React$1.createElement("circle", { cx: 40, cy: 40, r: 23.5, stroke: "white", strokeOpacity: 0.45 }), /* @__PURE__ */ React$1.createElement("circle", { cx: 40, cy: 40, r: 31.5, stroke: "white", strokeOpacity: 0.3 }), /* @__PURE__ */ React$1.createElement("circle", { cx: 40, cy: 40, r: 39.5, stroke: "white", strokeOpacity: 0.15 }));
 
-const SvgProgressBackdropLight = (props) => /* @__PURE__ */ React$1.createElement("svg", { width: 80, height: 80, viewBox: "0 0 80 80", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "image", ...props }, /* @__PURE__ */ React$1.createElement("circle", { cx: 40, cy: 40, r: 23.5, stroke: "black", strokeOpacity: 0.25 }), /* @__PURE__ */ React$1.createElement("circle", { cx: 40, cy: 40, r: 31.5, stroke: "black", strokeOpacity: 0.1 }), /* @__PURE__ */ React$1.createElement("circle", { cx: 40, cy: 40, r: 39.5, stroke: "black", strokeOpacity: 0.05 }));
+const SvgProgressBackdropLight = (props) => /* @__PURE__ */ React$1.createElement("svg", { width: 80, height: 80, viewBox: "0 0 80 80", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "image", "aria-hidden": "true", ...props }, /* @__PURE__ */ React$1.createElement("circle", { cx: 40, cy: 40, r: 23.5, stroke: "black", strokeOpacity: 0.25 }), /* @__PURE__ */ React$1.createElement("circle", { cx: 40, cy: 40, r: 31.5, stroke: "black", strokeOpacity: 0.1 }), /* @__PURE__ */ React$1.createElement("circle", { cx: 40, cy: 40, r: 39.5, stroke: "black", strokeOpacity: 0.05 }));
 
 const ProgressBackgroundImage = ({ style }) => {
   const isLightColorScheme = useSelector(getIsLightColorScheme);
@@ -78581,7 +78579,8 @@ const ProgressBar = ({
 const getStyles$G = () => {
   return {
     container: {
-      textAlign: "center"
+      textAlign: "center",
+      width: "100%"
     },
     backgroundImage: {
       height: "80px",
@@ -78601,9 +78600,7 @@ const getStyles$G = () => {
       alignItems: "center",
       boxSizing: "border-box",
       display: "flex",
-      justifyContent: "space-between",
-      paddingLeft: "28px",
-      paddingRight: "28px",
+      justifyContent: "space-around",
       position: "absolute",
       width: "100%"
     }
@@ -80583,8 +80580,8 @@ const Connected = React__default.forwardRef(
     const continueButtonRef = useRef(null);
     const connectSuccessSurveyRef = useRef(null);
     const postMessageFunctions = useContext(PostMessageContext);
-    const appName = useSelector((state) => state.profiles.client.oauth_app_name || null);
     const { onShowConnectSuccessSurvey } = useContext(AnalyticContext);
+    const clientGuid = useSelector(getClientGuid);
     const tokens = useTokens();
     const styles = getStyles$x(tokens);
     const getNextDelay = getDelay();
@@ -80614,7 +80611,7 @@ const Connected = React__default.forwardRef(
     useEffect(() => {
       focusElement(continueButtonRef.current);
     }, [institutionName]);
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: containerRef, children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: containerRef, style: styles.pageContainer, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ReactConfetti,
         {
@@ -80629,82 +80626,139 @@ const Connected = React__default.forwardRef(
           style: { zIndex: 3e3 }
         }
       ),
-      showFeedBack ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-        ConnectSuccessSurvey,
-        {
-          handleBack: () => setShowFeedBack(false),
-          handleDone,
-          ref: connectSuccessSurveyRef
-        }
-      ) : /* @__PURE__ */ jsxRuntimeExports.jsxs(React__default.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.header, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          M,
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: styles.content, children: [
+        showFeedBack ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ConnectSuccessSurvey,
           {
-            className: "material-symbols-rounded",
-            color: "success",
-            fill: true,
-            name: "check_circle",
-            size: 80,
-            weight: Fe.Dark
+            handleBack: () => setShowFeedBack(false),
+            handleDone,
+            ref: connectSuccessSurveyRef
           }
-        ) }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(SlideDown, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ) : /* @__PURE__ */ jsxRuntimeExports.jsxs(React__default.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             D,
             {
-              component: "h2",
+              component: "h1",
               "data-test": "connected-header",
               style: styles.title,
               truncate: false,
               variant: "H2",
-              children: __("Success")
+              children: __("Success!")
             }
-          ),
-          appName && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(D, { component: "p", "data-test": "connected-secondary-text", style: styles.body, children: __("You have successfully connected %1 to %2.", institutionName, appName) }) }),
-          !appName && /* @__PURE__ */ jsxRuntimeExports.jsx(D, { component: "p", "data-test": "connected-secondary-text", style: styles.body, children: __("You have successfully connected to %1.", institutionName) })
+          ) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.progressBarContainer, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: styles.barContainer, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: styles.logosContainer, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(ProgressLogo, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                ClientLogo,
+                {
+                  alt: "Client logo",
+                  clientGuid,
+                  size: 64,
+                  style: styles.logo
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(ProgressBackgroundImage, { style: styles.backgroundImage }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(ProgressLogo, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                K0,
+                {
+                  alt: "Institution logo",
+                  institutionGuid: institution.guid,
+                  logoUrl: institution.logo_url || "",
+                  size: 64,
+                  style: styles.logo
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ProgressLine, { isActive: true }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ProgressCheckMark, {}),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ProgressLine, { isActive: true, isCentralLine: true }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ProgressCheckMark, {}),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ProgressLine, { isActive: true, isCentralLine: true }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ProgressCheckMark, {}),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ProgressLine, { isActive: true })
+          ] }) }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button$2,
+            {
+              "data-test": "done-button",
+              fullWidth: true,
+              onClick: handleDone,
+              ref: continueButtonRef,
+              style: styles.button,
+              variant: "contained",
+              children: __("Done")
+            }
+          ) }),
+          typeof onShowConnectSuccessSurvey === "function" && /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button$2,
+            {
+              "data-test": "give-feedback",
+              fullWidth: true,
+              onClick: () => {
+                onShowConnectSuccessSurvey();
+                setShowFeedBack(true);
+              },
+              style: styles.feedbackButton,
+              variant: "text",
+              children: __("Give feedback")
+            }
+          ) })
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Button$2,
-          {
-            "data-test": "done-button",
-            fullWidth: true,
-            onClick: handleDone,
-            ref: continueButtonRef,
-            style: styles.button,
-            variant: "contained",
-            children: __("Done")
-          }
-        ) }),
-        typeof onShowConnectSuccessSurvey === "function" && /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Button$2,
-          {
-            "data-test": "give-feedback",
-            fullWidth: true,
-            onClick: () => {
-              onShowConnectSuccessSurvey();
-              setShowFeedBack(true);
-            },
-            variant: "text",
-            children: __("Give feedback")
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx(PrivateAndSecure, {}) })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(AriaLive, { level: "assertive", message: ariaLiveRegionMessage, timeout: 100 })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(AriaLive, { level: "assertive", message: ariaLiveRegionMessage, timeout: 100 })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.footer, children: /* @__PURE__ */ jsxRuntimeExports.jsx(PoweredByFooter, { aggregator: institution.aggregatorDisplayName }) })
     ] });
   }
 );
 const getStyles$x = (tokens) => {
   return {
+    pageContainer: {
+      display: "flex",
+      flexDirection: "column",
+      minHeight: "100%"
+    },
+    content: {
+      flex: 1,
+      display: "flex",
+      flexDirection: "column"
+    },
     header: {
       display: "flex",
       justifyContent: "center",
       marginTop: "20px",
       marginBottom: tokens.Spacing.Large
     },
+    progressBarContainer: {
+      marginBottom: "48px",
+      textAlign: "center",
+      width: "100%"
+    },
+    barContainer: {
+      alignItems: "center",
+      display: "flex",
+      height: "80px",
+      justifyContent: "center"
+    },
+    logosContainer: {
+      alignItems: "center",
+      boxSizing: "border-box",
+      display: "flex",
+      justifyContent: "space-around",
+      position: "absolute",
+      width: "100%"
+    },
+    logo: {
+      borderRadius: "8px"
+    },
+    backgroundImage: {
+      height: "80px",
+      width: "80px",
+      zIndex: 1
+    },
     title: {
       textAlign: "center",
-      marginBottom: tokens.Spacing.Tiny
+      marginBottom: tokens.Spacing.XLarge,
+      marginTop: tokens.Spacing.XLarge
     },
     body: {
       textAlign: "center",
@@ -80713,6 +80767,13 @@ const getStyles$x = (tokens) => {
     },
     button: {
       marginBottom: tokens.Spacing.Small
+    },
+    feedbackButton: {
+      color: tokens.Color.Primary300
+    },
+    footer: {
+      marginTop: "24px",
+      marginBottom: "24px"
     }
   };
 };
@@ -87515,7 +87576,6 @@ const Edge$1 = "Edge";
 const Chrome$1 = "Chrome";
 const Firefox$1 = "Firefox";
 const Dismiss$1 = "Rejeter";
-const Success$1 = "Succès";
 const Spanish$1 = "Espagnol";
 const French$1 = "Français";
 const English$1 = "Anglais";
@@ -87856,9 +87916,6 @@ const frCa = {
 	"Please try linking a checking or savings account.": "Veuillez essayer de lier un compte courant ou un compte d'épargne.",
 	"Choose an institution that’s already connected and select accounts to share, or search for a different one.": "Choisissez une institution déjà connectée et sélectionnez les comptes à partager, ou recherchez-en un autre.",
 	"You have successfully connected to %1": "Vous vous êtes connecté avec succès à %1",
-	Success: Success$1,
-	"You have successfully connected to %1.": "Vous vous êtes connecté avec succès à %1.",
-	"You have successfully connected %1 to %2.": "Vous avez réussi à connecter %1 à %2",
 	"Go back": "Retourner",
 	"Account Information": "Informations sur le compte",
 	"Account type and description": "Type de compte et description",
@@ -87938,6 +87995,14 @@ const frCa = {
 	"Logo for %1": "Logo pour %1",
 	"Free %1 Connections Are No Longer Available": "Les connexions gratuites %1 ne sont plus disponibles",
 	"%1 now charges a fee for us to access your account data. To avoid passing that cost on to you, we no longer support %1 connections.": "$1 facture désormais des frais pour accéder à vos données de compte. Pour éviter de vous les répercuter, nous ne prenons plus en charge les connexions $1.",
+	"Success!": "Succès!",
+	"No accounts found": "Aucun compte trouvé",
+	"Return to institution selection": "Retour à la sélection des établissements",
+	"Additional permissions needed": "Autorisations supplémentaires nécessaires",
+	"Review instructions": "Instructions de révision",
+	"Unable to connect": "Impossible de se connecter",
+	"Maintenance in progress": "Entretien en cours",
+	"Deposits verified. You're almost done setting things up. Continue to your institution.": "Dépôts vérifiés. Vous avez presque terminé la configuration. Rendez-vous dans votre établissement.",
 	"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.",
@@ -88012,7 +88077,6 @@ const Edge = "Edge";
 const Chrome = "Chrome";
 const Firefox = "Firefox";
 const Dismiss = "Descartar";
-const Success = "Éxito";
 const Spanish = "Español";
 const French = "Francés";
 const English = "Inglés";
@@ -88356,9 +88420,6 @@ const es = {
 	"Please try linking a checking or savings account.": "Intente vincular una cuenta corriente o de ahorros.",
 	"Choose an institution that’s already connected and select accounts to share, or search for a different one.": "Elija una institución que ya esté conectada y seleccione cuentas para compartir. o buscar uno diferente.",
 	"You have successfully connected to %1": "Te has conectado correctamente a %1",
-	Success: Success,
-	"You have successfully connected to %1.": "Te has conectado correctamente a %1.",
-	"You have successfully connected %1 to %2.": "Has conectado correctamente %1 a %2.",
 	"Account Information": "Información de la cuenta",
 	"Account type and description": "Tipo de cuenta y descripción",
 	"Credit limits": "Límites de crédito",
@@ -88437,6 +88498,14 @@ const es = {
 	"Logo for %1": "Logotipo de %1",
 	"Free %1 Connections Are No Longer Available": "Las conexiones gratuitas de %1 ya no están disponibles",
 	"%1 now charges a fee for us to access your account data. To avoid passing that cost on to you, we no longer support %1 connections.": "%1 ahora cobra una comisión por acceder a los datos de su cuenta. Para evitar que usted pague ese costo, ya no ofrecemos conexiones con %1.",
+	"Success!": "¡Éxito!",
+	"No accounts found": "No se encontraron cuentas",
+	"Return to institution selection": "Volver a la selección de instituciones",
+	"Additional permissions needed": "Se necesitan permisos adicionales",
+	"Review instructions": "Revisar instrucciones",
+	"Unable to connect": "No se puede conectar",
+	"Maintenance in progress": "Mantenimiento en curso",
+	"Deposits verified. You're almost done setting things up. Continue to your institution.": "Depósitos verificados. Ya casi terminas de configurar todo. Continúa con tu institución.",
 	"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.",