feat: add brand_color_hex_code and oauth_predirect_instructions into the predirect page (#268)

* fix: add the optional brand_color_hex_code to the institution fields

* fix: add all supported options to the predirect screen and remove feature check

* fix: update body text and tests for PredirectInstructions

Author: codingLogan

src/const/language/es.json

@@ -406,8 +406,6 @@
   "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.",
-  "After logging in, share at least one account and %1profile information%2.": "Después de iniciar sesión, comparta al menos una cuenta y %1información de perfil%2.",
-  "After logging in, share at least one account.": "Después de iniciar sesión, comparta al menos una cuenta.",
   "Connection not supported by %1": "Conexión no compatible con %1",
   "%1 currently limits how your data can be shared. We'll enable this connection once %1 opens access.": "%1 actualmente limita cómo se pueden compartir sus datos. Habilitaremos esta conexión una vez que %1 abra el acceso.",
   "UNAVAILABLE": "INDISPONIBLE",
@@ -421,6 +419,8 @@
   "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",
+  "Account numbers": "Números de cuenta",
+  "To complete your connection, please %1share%2 the following after signing in:": "Para completar su conexión, por favor, %1comparta%2 lo siguiente después de iniciar sesió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.",

src/const/language/es.po

@@ -891,6 +891,7 @@ msgid "Basic account information"
 msgstr "Información básica de la cuenta"
 
 #: src/views/disclosure/Disclosure.js
+#: src/views/oauth/experiments/PredirectInstructions.tsx
 msgid "Tax documents"
 msgstr "Documentos fiscales"
 
@@ -1422,6 +1423,7 @@ msgstr ""
 "y descripciones."
 
 #: src/const/DataClusters.js
+#: src/views/oauth/experiments/PredirectInstructions.tsx
 msgid "Statements"
 msgstr "Declaraciones"
 
@@ -2036,17 +2038,6 @@ msgstr ""
 "Depósitos verificados. Ya casi terminas de configurar todo. Continúa con tu "
 "institución."
 
-#: 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/PredirectInstructions.tsx
-msgid "After logging in, share at least one account."
-msgstr "Después de iniciar sesión, comparta al menos una cuenta."
-
 #: src/utilities/institutionStatus.ts
 msgid "Connection not supported by %1"
 msgstr "Conexión no compatible con %1"
@@ -2102,3 +2093,14 @@ msgstr "Cuenta corriente o de ahorros"
 #: src/views/oauth/experiments/PredirectInstructions.tsx
 msgid "Profile information"
 msgstr "Información del perfil"
+
+#: src/views/oauth/experiments/PredirectInstructions.tsx
+msgid "Account numbers"
+msgstr "Números de cuenta"
+
+#: src/views/oauth/experiments/PredirectInstructions.tsx
+msgid ""
+"To complete your connection, please %1share%2 the following after signing in:"
+msgstr ""
+"Para completar su conexión, por favor, %1comparta%2 lo siguiente después de "
+"iniciar sesión:"

src/const/language/frCa.json

@@ -407,8 +407,6 @@
   "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.",
-  "After logging in, share at least one account and %1profile information%2.": "Après vous être connecté, partagez au moins un compte et %1informations de profil%2.",
-  "After logging in, share at least one account.": "Après vous être connecté, partagez au moins un compte.",
   "Connection not supported by %1": "Connexion non prise en charge par %1",
   "%1 currently limits how your data can be shared. We'll enable this connection once %1 opens access.": "%1 limite actuellement la manière dont vos données peuvent être partagées. Nous activerons cette connexion une fois que %1 ouvrira l'accès.",
   "UNAVAILABLE": "INDISPONIBLE",
@@ -422,6 +420,8 @@
   "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",
+  "Account numbers": "Numéros de compte",
+  "To complete your connection, please %1share%2 the following after signing in:": "Pour finaliser votre connexion, veuillez %1partager%2 les informations suivantes après vous être connecté :",
   "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.",

src/const/language/frCa.po

@@ -983,6 +983,7 @@ msgid "Basic account information"
 msgstr "Informations de base sur le compte"
 
 #: src/views/disclosure/Disclosure.js
+#: src/views/oauth/experiments/PredirectInstructions.tsx
 msgid "Tax documents"
 msgstr "Documents fiscaux"
 
@@ -1514,6 +1515,7 @@ msgstr ""
 "dates et descriptions."
 
 #: src/const/DataClusters.js
+#: src/views/oauth/experiments/PredirectInstructions.tsx
 msgid "Statements"
 msgstr "Déclarations"
 
@@ -2114,17 +2116,6 @@ msgstr ""
 "Dépôts vérifiés. Vous avez presque terminé la configuration. Rendez-vous "
 "dans votre établissement."
 
-#: 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/PredirectInstructions.tsx
-msgid "After logging in, share at least one account."
-msgstr "Après vous être connecté, partagez au moins un compte."
-
 #: src/utilities/institutionStatus.ts
 msgid "Connection not supported by %1"
 msgstr "Connexion non prise en charge par %1"
@@ -2180,3 +2171,14 @@ msgstr "Compte courant ou compte d'épargne"
 #: src/views/oauth/experiments/PredirectInstructions.tsx
 msgid "Profile information"
 msgstr "Informations de profil"
+
+#: src/views/oauth/experiments/PredirectInstructions.tsx
+msgid "Account numbers"
+msgstr "Numéros de compte"
+
+#: src/views/oauth/experiments/PredirectInstructions.tsx
+msgid ""
+"To complete your connection, please %1share%2 the following after signing in:"
+msgstr ""
+"Pour finaliser votre connexion, veuillez %1partager%2 les informations "
+"suivantes après vous être connecté :"

src/services/mockedData.ts

@@ -420,12 +420,13 @@ export const USER_DATA = {
   created_at: 1661194428,
 }
 
-export const FAVORITE_INSTITUTIONS = [
+export const FAVORITE_INSTITUTIONS: InstitutionResponseType[] = [
   {
     account_verification_is_enabled: true,
     account_identification_is_enabled: true,
     code: 'gringotts',
     guid: 'INS-123',
+    is_disabled_by_client: false,
     login_url: null,
     name: 'Gringotts',
     popularity: 43985,
@@ -438,6 +439,7 @@ export const FAVORITE_INSTITUTIONS = [
     account_identification_is_enabled: true,
     code: '77277',
     guid: 'INS-345',
+    is_disabled_by_client: false,
     login_url: 'https://www.americanexpress.com/en-us/account/login/',
     name: 'American Express Credit Card',
     popularity: 20,
@@ -450,6 +452,7 @@ export const FAVORITE_INSTITUTIONS = [
     account_identification_is_enabled: false,
     code: '78033',
     guid: 'INS-567',
+    is_disabled_by_client: false,
     login_url: null,
     name: 'Discover Credit Card',
     popularity: 9,
@@ -462,6 +465,7 @@ export const FAVORITE_INSTITUTIONS = [
     account_identification_is_enabled: true,
     code: '1d303f53-a9c2-4819-9469-9320b561280b',
     guid: 'INS-789',
+    is_disabled_by_client: false,
     login_url: null,
     name: 'Capital One',
     popularity: 9,
@@ -484,12 +488,13 @@ export const FAVORITE_INSTITUTIONS = [
   },
 ]
 
-export const SEARCHED_INSTITUTIONS = [
+export const SEARCHED_INSTITUTIONS: InstitutionResponseType[] = [
   {
     account_verification_is_enabled: true,
     account_identification_is_enabled: true,
     code: 'gringotts',
     guid: 'INS-f1a3285d-e855-b68f-6aa7-8ae775c0e0e9',
+    is_disabled_by_client: false,
     login_url: null,
     name: 'Gringotts',
     popularity: 43984,
@@ -502,6 +507,7 @@ export const SEARCHED_INSTITUTIONS = [
     account_identification_is_enabled: false,
     code: '043ff29f-ff1b-43ac-936f-27d26403c6aa',
     guid: 'INS-39fc8bea-4568-40ce-95d5-c2ea33a86398',
+    is_disabled_by_client: false,
     login_url: null,
     name: 'MX Bank',
     popularity: 3,
@@ -514,6 +520,7 @@ export const SEARCHED_INSTITUTIONS = [
     account_identification_is_enabled: false,
     code: '11166c24-99c4-4552-a6a2-4a4706abf9b0',
     guid: 'INS-c706ddb2-dfee-4575-a1ce-df2f907ab4af',
+    is_disabled_by_client: false,
     login_url: 'https://mx.com',
     name: 'Gringotts Oauth/MDX V50',
     popularity: 1,
@@ -526,6 +533,7 @@ export const SEARCHED_INSTITUTIONS = [
     account_identification_is_enabled: false,
     code: '4a32a8d9-44e8-4302-a1a5-e37c109eead4',
     guid: 'INS-f8968535-d8e1-45e9-8d0e-80bdcaaeb0fd',
+    is_disabled_by_client: false,
     login_url: null,
     name: 'Gringotts TEST(Clone)',
     popularity: 0,
@@ -538,6 +546,7 @@ export const SEARCHED_INSTITUTIONS = [
     account_identification_is_enabled: false,
     code: '83ee1118-4ae9-4140-a501-8b74c2f60cbe',
     guid: 'INS-83914605-0efa-45e5-b1f2-b5a9a0afa909',
+    is_disabled_by_client: false,
     login_url: null,
     name: 'Grinnell State Bank',
     popularity: 0,

src/views/oauth/OAuthDefault.js

@@ -20,25 +20,17 @@ import useAnalyticsPath from 'src/hooks/useAnalyticsPath'
 import useAnalyticsEvent from 'src/hooks/useAnalyticsEvent'
 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,
-} from 'src/views/oauth/experiments/PredirectInstructions'
+import { PredirectInstructions } from 'src/views/oauth/experiments/PredirectInstructions'
+import { isWellsFargoInstitution } from 'src/views/oauth/experiments/predirectInstructionsUtils'
 
 export const OAuthDefault = (props) => {
   // Experiment code - Remove after experiment is over
   const language = window?.app?.options?.language || 'en-US'
-  const userFeatures = useSelector(getUserFeatures)
-  const isWellsFargoInstructionsFeatureEnabled =
-    userFeatures.some(
-      (feature) =>
-        feature.feature_name === WELLS_FARGO_INSTRUCTIONS_FEATURE_NAME &&
-        feature.is_enabled === 'test',
-    ) &&
-    (props.institution.guid === 'INS-6073ad01-da9e-f6ba-dfdf-5f1500d8e867' || // Wells Fargo PROD guid
-      props.institution.guid === 'INS-f9e8d5f6-b953-da63-32e4-6e88fbe8b250') && // Wells Fargo SAND guid for testing
-    language.toLowerCase() === 'en-us'
+  const isWellsFargo = isWellsFargoInstitution(props.institution)
+
+  const hasPredirectInstructions =
+    Array.isArray(props.institution?.oauth_predirect_instructions) &&
+    props.institution?.oauth_predirect_instructions.length > 0
 
   const { api } = useApi()
   useAnalyticsPath(...PageviewInfo.CONNECT_OAUTH_INSTRUCTIONS, {
@@ -58,11 +50,12 @@ export const OAuthDefault = (props) => {
 
   return (
     <div role="alert">
-      {isWellsFargoInstructionsFeatureEnabled ? (
+      {/* This check allows us to merge our frontend code before the backend is ready.
+      Wells Fargo will continue to get the special treatment, and other institutions
+      will only start seeing the pre-redirect instructions once the backend is ready. */}
+      {isWellsFargo || hasPredirectInstructions ? (
         <>
-          {/* // This experiment removes the institution block and completely changes the instructional
-          text */}
-          <PredirectInstructions institutionName={props?.institution?.name} />
+          <PredirectInstructions institution={props?.institution} />
         </>
       ) : (
         <>