mxenabled · codingLogan · Oct 20, 2025
@@ -0,0 +1,58 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useTheme } from '@mui/material'
+import { TouchIndicator } from 'src/components/TouchIndicator'
+
+export const ExampleCheckbox: React.FC<
+  React.HTMLAttributes<HTMLInputElement> & {
+    pseudoFocusColor: string
+    showTouchIndicator?: boolean
+  }
+> = ({ id, showTouchIndicator, pseudoFocusColor }) => {
+  const theme = useTheme()
+  const checkboxSize = '1em'
+
+  return (
+    <div aria-hidden="true" style={{ position: 'relative' }}>
+      <input
+        aria-hidden={true}
+        className="example-checkbox"
+        defaultChecked={true}
+        id={'example-' + id}
+        name={'example-name-' + id}
+        style={{
+          accentColor: theme.palette.text.primary,
+          marginTop: '8px',
+          marginBottom: '8px',
+          marginRight: '12px',
+          width: checkboxSize,
+          height: checkboxSize,
+        }}
+        tabIndex={-1}
+        type="checkbox"
+      />
+      {/* Position the touch indicator to be centered over the checkbox */}
+      {showTouchIndicator && <TouchIndicator style={{ left: '-9px', top: '-4px' }} />}
+      {/* If we are showing the psuedo touch indicator, also show the pseudo-focus for the checkbox */}
+      {showTouchIndicator && (
+        <div
+          aria-hidden="true"
+          style={{
+            display: 'inline-block',
+            height: `calc(${checkboxSize} + 2px)`,
+            width: `calc(${checkboxSize} + 2px)`,
+            border: `1px solid ${pseudoFocusColor}`,
+            borderRadius: '3px',
+            position: 'absolute',
+            top: '6px',
+            left: '2px',
+          }}
+        />
+      )}
+    </div>
+  )
+}
+
+ExampleCheckbox.propTypes = {
+  id: PropTypes.string,
+}
@@ -0,0 +1,27 @@
+import React from 'react'
+import { useTheme } from '@mui/material'
+
+// The expectation is that this component renders a circular touch indicator
+// and it should be positioned absolutely where needed by the parent component.
+export const TouchIndicator: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  style,
+  ...props
+}) => {
+  const theme = useTheme()
+  const { hover, selected } = theme.palette.action
+
+  const styles: React.CSSProperties = {
+    position: 'absolute',
+    height: '36px',
+    width: '36px',
+    background: `radial-gradient(circle, ${hover} 0%, ${selected} 100%)`,
+    stroke: theme.palette.divider,
+    filter: 'drop-shadow(0 2px 8px rgba(0, 0, 0, 0.12))',
+    strokeWidth: '1px',
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: '50%',
+    ...style,
+  }
+
+  return <div aria-hidden="true" className="touch-indicator" style={styles} {...props} />
+}
@@ -418,6 +418,9 @@
   "I don't want this account connected here": "No quiero esta cuenta conectada aquí",
   "We're working on it. Stick around!": "Estamos trabajando en ello. ¡Quedarse!",
   "We're getting closer. Hang tight!": "Nos estamos acercando. ¡Aguanta!",
+  "Information to select on the %1 site": "Información para seleccionar en el sitio %1",
+  "Checking or savings account": "Cuenta corriente o de ahorros",
+  "Profile information": "Información del perfil",
   "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.",

@@ -1324,7 +1324,7 @@ msgid "Load more institutions"
 msgstr "Cargar más instituciones"
 
 #: src/views/oauth/OAuthDefault.js
-#: src/views/oauth/experiments/WellsFargoInstructions.tsx
+#: src/views/oauth/experiments/PredirectInstructions.tsx
 msgid "Log in at %1"
 msgstr "Iniciar sesión en %1"
 
@@ -2036,14 +2036,14 @@ msgstr ""
 "Depósitos verificados. Ya casi terminas de configurar todo. Continúa con tu "
 "institución."
 
-#: src/views/oauth/experiments/WellsFargoInstructions.tsx
+#: src/views/oauth/experiments/PredirectInstructions.tsx
 msgid ""
 "After logging in, share at least one account and %1profile information%2."
 msgstr ""
 "Después de iniciar sesión, comparta al menos una cuenta y %1información de "
 "perfil%2."
 
-#: src/views/oauth/experiments/WellsFargoInstructions.tsx
+#: src/views/oauth/experiments/PredirectInstructions.tsx
 msgid "After logging in, share at least one account."
 msgstr "Después de iniciar sesión, comparta al menos una cuenta."
 
@@ -2090,3 +2090,15 @@ msgstr "Estamos trabajando en ello. ¡Quedarse!"
 #: src/views/connecting/progress/ProgressMessage.js
 msgid "We're getting closer. Hang tight!"
 msgstr "Nos estamos acercando. ¡Aguanta!"
+
+#: src/views/oauth/experiments/PredirectInstructions.tsx
+msgid "Information to select on the %1 site"
+msgstr "Información para seleccionar en el sitio %1"
+
+#: src/views/oauth/experiments/PredirectInstructions.tsx
+msgid "Checking or savings account"
+msgstr "Cuenta corriente o de ahorros"
+
+#: src/views/oauth/experiments/PredirectInstructions.tsx
+msgid "Profile information"
+msgstr "Información del perfil"
@@ -419,6 +419,9 @@
   "I don't want this account connected here": "Je ne veux pas ce compte connecté ici",
   "We're working on it. Stick around!": "Nous y travaillons. Rester dans les parages!",
   "We're getting closer. Hang tight!": "Nous nous rapprochons. Tenir fermement!",
+  "Information to select on the %1 site": "Informations à sélectionner sur le site %1.",
+  "Checking or savings account": "Compte courant ou compte d'épargne",
+  "Profile information": "Informations de profil",
   "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.",

@@ -1417,7 +1417,7 @@ msgid "Load more institutions"
 msgstr "Charger plus d'institutions"
 
 #: src/views/oauth/OAuthDefault.js
-#: src/views/oauth/experiments/WellsFargoInstructions.tsx
+#: src/views/oauth/experiments/PredirectInstructions.tsx
 msgid "Log in at %1"
 msgstr "Connectez-vous à %1"
 
@@ -2114,14 +2114,14 @@ msgstr ""
 "Dépôts vérifiés. Vous avez presque terminé la configuration. Rendez-vous "
 "dans votre établissement."
 
-#: src/views/oauth/experiments/WellsFargoInstructions.tsx
+#: src/views/oauth/experiments/PredirectInstructions.tsx
 msgid ""
 "After logging in, share at least one account and %1profile information%2."
 msgstr ""
 "Après vous être connecté, partagez au moins un compte et %1informations de "
 "profil%2."
 
-#: src/views/oauth/experiments/WellsFargoInstructions.tsx
+#: src/views/oauth/experiments/PredirectInstructions.tsx
 msgid "After logging in, share at least one account."
 msgstr "Après vous être connecté, partagez au moins un compte."
 
@@ -2168,3 +2168,15 @@ msgstr "Nous y travaillons. Rester dans les parages!"
 #: src/views/connecting/progress/ProgressMessage.js
 msgid "We're getting closer. Hang tight!"
 msgstr "Nous nous rapprochons. Tenir fermement!"
+
+#: src/views/oauth/experiments/PredirectInstructions.tsx
+msgid "Information to select on the %1 site"
+msgstr "Informations à sélectionner sur le site %1."
+
+#: src/views/oauth/experiments/PredirectInstructions.tsx
+msgid "Checking or savings account"
+msgstr "Compte courant ou compte d'épargne"
+
+#: src/views/oauth/experiments/PredirectInstructions.tsx
+msgid "Profile information"
+msgstr "Informations de profil"
@@ -4,7 +4,7 @@ import { CONNECT_COMBO_JOBS, CONNECT_CONSENT } from 'src/const/UserFeatures'
 import { RootState } from 'src/redux/Store'
 
 type UserFeaturesSlice = {
-  items: { feature_name: string; is_enabled: boolean }[]
+  items: { feature_name: string; is_enabled: boolean | string }[]
 }
 
 export const initialState: UserFeaturesSlice = {

@@ -22,9 +22,9 @@ import { AnalyticEvents, PageviewInfo } from 'src/const/Analytics'
 import { useApi } from 'src/context/ApiContext'
 import { getUserFeatures } from 'src/redux/reducers/userFeaturesSlice'
 import {
+  PredirectInstructions,
   WELLS_FARGO_INSTRUCTIONS_FEATURE_NAME,
-  WellsFargoInstructions,
-} from 'src/views/oauth/experiments/WellsFargoInstructions'
+} from 'src/views/oauth/experiments/PredirectInstructions'
 
 export const OAuthDefault = (props) => {
   // Experiment code - Remove after experiment is over
@@ -62,7 +62,7 @@ export const OAuthDefault = (props) => {
         <>
           {/* // This experiment removes the institution block and completely changes the instructional
           text */}
-          <WellsFargoInstructions institutionName={props?.institution?.name} />
+          <PredirectInstructions institutionName={props?.institution?.name} />
         </>
       ) : (
         <>

@@ -0,0 +1,67 @@
+.institution-panel-wrapper {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  padding-top: 32px;
+  padding-bottom: 8px;
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 8px;
+}
+
+.institution-panel-wrapper div.MuiPaper-root {
+  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
+}
+
+.institution-panel {
+  width: 300px;
+  pointer-events: none;
+}
+.institution-panel-header {
+  font-weight: 600;
+  border-radius: 8px 8px 0 0;
+  font-size: 18px;
+  height: 34px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+.institution-panel-body {
+  position: relative;
+  padding: 0 16px;
+  font-size: 13px;
+}
+.institution-panel-body ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+.institution-panel-body li {
+  display: flex;
+  align-items: center;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+li span.MuiCheckbox-root {
+  padding-left: 0px;
+}
+
+.predirect-instruction-text-wrapper {
+  position: relative;
+}
+
+.predirect-instruction-text-wrapper .MuiSvgIcon-root {
+  position: absolute;
+  bottom: 2px;
+}
+.predirect-instruction-text {
+  display: inline;
+}
+
+.psuedo-checkbox-label {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
@@ -0,0 +1,109 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+
+import 'src/views/oauth/experiments/PredirectInstructions.css'
+
+import { selectConnectConfig } from 'src/redux/reducers/configSlice'
+
+import { Icon, IconWeight, Text } from '@mxenabled/mxui'
+import { __ } from 'src/utilities/Intl'
+import { Divider, Paper } from '@mui/material'
+import { ExampleCheckbox } from 'src/components/ExampleCheckbox'
+
+export const WELLS_FARGO_INSTRUCTIONS_FEATURE_NAME = 'WELLS_FARGO_INSTRUCTIONS'
+
+function PredirectInstructions(props: React.FunctionComponent & { institutionName: string }) {
+  const config = useSelector(selectConnectConfig)
+  const products = config?.data_request?.products || []
+  const showProfileSelection =
+    products.includes('account_verification') || products.includes('identity_verification')
+
+  const institutionColor = '#d9181f' // Wells Fargo red
+
+  const uiElementTypes = {
+    CHECKING_OR_SAVINGS_ACCOUNT: 'checking-or-savings-account',
+    DIVIDER: 'divider',
+    PROFILE_INFORMATION: 'profile',
+  }
+  const checkboxItems = [uiElementTypes.CHECKING_OR_SAVINGS_ACCOUNT]
+
+  if (showProfileSelection) {
+    checkboxItems.push(uiElementTypes.DIVIDER)
+    checkboxItems.push(uiElementTypes.PROFILE_INFORMATION)
+  }
+
+  /* Bold text is needed. The styles applied to this text prevent server-provided styles from ruining strong elements */
+  const instructionText = showProfileSelection
+    ? __(
+        'After logging in, share at least one account and %1profile information%2.',
+        "<strong style='font-weight: bold;'>",
+        '</strong>',
+      )
+    : __('After logging in, share at least one account.')
+
+  return (
+    <>
+      <Text bold={true} component="h2" sx={{ mb: 12 }} truncate={false} variant="H2">
+        {__('Log in at %1', props.institutionName)}
+      </Text>
+      <div className="predirect-instruction-text-wrapper">
+        <Text
+          className="predirect-instruction-text"
+          color="textSecondary"
+          dangerouslySetInnerHTML={{
+            __html: instructionText,
+          }}
+          truncate={false}
+          variant="body1"
+        />
+        {showProfileSelection && (
+          <Icon color="secondary" name="info" size={20} weight={IconWeight.Dark} />
+        )}
+      </div>
+
+      <div className="institution-panel-wrapper">
+        <Paper className="institution-panel" elevation={2}>
+          {/* Inline color and font styles on the header and text because this is a dynamic area */}
+          <div className="institution-panel-header" style={{ backgroundColor: institutionColor }}>
+            <Text aria-hidden="true" sx={{ fontWeight: 600, color: 'white' }} uppercase={true}>
+              {props.institutionName}
+            </Text>
+          </div>
+          <div className="institution-panel-body">
+            <ul aria-label={__('Information to select on the %1 site', props.institutionName)}>
+              {checkboxItems.map((item, index) => {
+                if (item === uiElementTypes.DIVIDER) {
+                  return <Divider key={`divider-${index}`} />
+                } else {
+                  let text = ''
+                  if (item === uiElementTypes.CHECKING_OR_SAVINGS_ACCOUNT) {
+                    text = __('Checking or savings account')
+                  } else if (item === uiElementTypes.PROFILE_INFORMATION) {
+                    text = __('Profile information')
+                  }
+
+                  const isLastItem = index === checkboxItems.length - 1
+
+                  return (
+                    <li key={item}>
+                      <ExampleCheckbox
+                        id={item}
+                        pseudoFocusColor={institutionColor}
+                        showTouchIndicator={isLastItem}
+                      />
+                      <Text className="psuedo-checkbox-label" variant="body1">
+                        {text}
+                      </Text>
+                    </li>
+                  )
+                }
+              })}
+            </ul>
+          </div>
+        </Paper>
+      </div>
+    </>
+  )
+}
+
+export { PredirectInstructions }