fix: remove hard-coded INS values and tests for the oauth predirect feature

Author: codingLogan

src/views/oauth/OAuthDefault.js

@@ -21,12 +21,10 @@ import useAnalyticsEvent from 'src/hooks/useAnalyticsEvent'
 import { AnalyticEvents, PageviewInfo } from 'src/const/Analytics'
 import { useApi } from 'src/context/ApiContext'
 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 isWellsFargo = isWellsFargoInstitution(props.institution)
 
   const hasPredirectInstructions =
     Array.isArray(props.institution?.oauth_predirect_instructions) &&
@@ -50,10 +48,7 @@ export const OAuthDefault = (props) => {
 
   return (
     <div role="alert">
-      {/* 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 ? (
+      {hasPredirectInstructions ? (
         <>
           <PredirectInstructions institution={props?.institution} />
         </>

src/views/oauth/experiments/PredirectInstructions.tsx

@@ -8,11 +8,9 @@ import { Divider, Paper } from '@mui/material'
 import { ExampleCheckbox } from 'src/components/ExampleCheckbox'
 import {
   getInstitutionBrandColor,
-  isWellsFargoInstitution,
   OAUTH_PREDIRECT_INSTRUCTION,
 } from 'src/views/oauth/experiments/predirectInstructionsUtils'
 
-export const WELLS_FARGO_INSTRUCTIONS_FEATURE_NAME = 'WELLS_FARGO_INSTRUCTIONS'
 export const DEFAULT_HEADER_HEX_COLOR = '#444444'
 
 function PredirectInstructions(
@@ -29,18 +27,6 @@ function PredirectInstructions(
       )
     : []
 
-  // Give Wells Fargo a default predirect instruction if none are configured, because we experimented on
-  // Wells Fargo, and want to maintain the experience, until it is fully configured in the backend.
-  if (isWellsFargoInstitution(props.institution) && configuredPredirectInstructions.length === 0) {
-    configuredPredirectInstructions.push(
-      OAUTH_PREDIRECT_INSTRUCTION.ACCOUNT_AND_TRANSACTIONS_INSTRUCTION,
-    )
-
-    configuredPredirectInstructions.push(
-      OAUTH_PREDIRECT_INSTRUCTION.PROFILE_INFORMATION_INSTRUCTION,
-    )
-  }
-
   // If the instructions are still empty, provide a default of account and transactions
   // for a better user experience.
   if (configuredPredirectInstructions.length === 0) {

src/views/oauth/experiments/__tests__/PredirectInstructions-test.tsx

@@ -7,13 +7,13 @@ import { DEFAULT_HEADER_HEX_COLOR } from 'src/views/oauth/experiments/PredirectI
 import { OAUTH_PREDIRECT_INSTRUCTION } from 'src/views/oauth/experiments/predirectInstructionsUtils'
 
 describe('<OAuthDefault /> PredirectInstructions test', () => {
-  it('wells fargo can show the instructions for verification/identity', async () => {
+  it('Any Bank can show the instructions for verification/identity', async () => {
     const onSignInClick = vi.fn()
     const onAnalyticsEvent = vi.fn()
 
     const institution = {
-      guid: 'INS-f9e8d5f6-b953-da63-32e4-6e88fbe8b250',
-      name: 'Wells Fargo',
+      guid: 'INS-123',
+      name: 'Any Bank',
       testProp: 'testValue',
       oauth_predirect_instructions: [
         OAUTH_PREDIRECT_INSTRUCTION.ACCOUNT_AND_TRANSACTIONS_INSTRUCTION,
@@ -27,7 +27,7 @@ describe('<OAuthDefault /> PredirectInstructions test', () => {
         isOauthLoading: false,
         oauthURL: 'testUrl',
         selectedInstitution: {
-          name: 'Wells Fargo',
+          name: 'Any Bank',
         },
       },
     })
@@ -52,8 +52,8 @@ describe('<OAuthDefault /> PredirectInstructions test', () => {
     )
 
     // See PredirectInstructions.tsx for the text we are verifying here
-    expect(screen.getByText('Wells Fargo')).toBeInTheDocument()
-    expect(screen.getByText('Log in at Wells Fargo', { selector: 'h2' })).toBeInTheDocument()
+    expect(screen.getByText('Any Bank')).toBeInTheDocument()
+    expect(screen.getByText('Log in at Any Bank', { selector: 'h2' })).toBeInTheDocument()
 
     expect(
       screen.getByText((content, element) => {
@@ -71,13 +71,13 @@ describe('<OAuthDefault /> PredirectInstructions test', () => {
     expect(screen.getByText('Profile information')).toBeInTheDocument()
   })
 
-  it('wells fargo can show instructions for aggregation-only', async () => {
+  it('Any Bank can show instructions for aggregation-only', async () => {
     const onSignInClick = vi.fn()
     const onAnalyticsEvent = vi.fn()
 
     const institution = {
-      guid: 'INS-f9e8d5f6-b953-da63-32e4-6e88fbe8b250',
-      name: 'Wells Fargo',
+      guid: 'INS-123',
+      name: 'Any Bank',
       testProp: 'testValue',
       oauth_predirect_instructions: [
         OAUTH_PREDIRECT_INSTRUCTION.ACCOUNT_AND_TRANSACTIONS_INSTRUCTION,
@@ -90,7 +90,7 @@ describe('<OAuthDefault /> PredirectInstructions test', () => {
         isOauthLoading: false,
         oauthURL: 'testUrl',
         selectedInstitution: {
-          name: 'Wells Fargo',
+          name: 'Any Bank',
         },
       },
     })
@@ -115,8 +115,8 @@ describe('<OAuthDefault /> PredirectInstructions test', () => {
     )
 
     // See PredirectInstructions.tsx for the text we are verifying here
-    expect(screen.getByText('Wells Fargo')).toBeInTheDocument()
-    expect(screen.getByText('Log in at Wells Fargo', { selector: 'h2' })).toBeInTheDocument()
+    expect(screen.getByText('Any Bank')).toBeInTheDocument()
+    expect(screen.getByText('Log in at Any Bank', { selector: 'h2' })).toBeInTheDocument()
 
     expect(
       screen.getByText((content, element) => {
@@ -138,7 +138,7 @@ describe('<OAuthDefault /> PredirectInstructions test', () => {
 
     const institution = {
       guid: 'INS-test',
-      name: 'Test Bank',
+      name: 'Any Bank',
       oauth_predirect_instructions: [
         OAUTH_PREDIRECT_INSTRUCTION.ACCOUNT_AND_TRANSACTIONS_INSTRUCTION,
         OAUTH_PREDIRECT_INSTRUCTION.PROFILE_INFORMATION_INSTRUCTION,
@@ -152,7 +152,7 @@ describe('<OAuthDefault /> PredirectInstructions test', () => {
         isOauthLoading: false,
         oauthURL: 'testUrl',
         selectedInstitution: {
-          name: 'Test Bank',
+          name: 'Any Bank',
         },
       },
     })
@@ -177,10 +177,10 @@ describe('<OAuthDefault /> PredirectInstructions test', () => {
     )
 
     // See PredirectInstructions.tsx for the text we are verifying here
-    const exampleWindowHeader = screen.getByText('Test Bank').closest('.institution-panel-header')
+    const exampleWindowHeader = screen.getByText('Any Bank').closest('.institution-panel-header')
     expect(exampleWindowHeader).toBeInTheDocument()
     expect(exampleWindowHeader).toHaveStyle({ backgroundColor: DEFAULT_HEADER_HEX_COLOR })
-    expect(screen.getByText('Log in at Test Bank', { selector: 'h2' })).toBeInTheDocument()
+    expect(screen.getByText('Log in at Any Bank', { selector: 'h2' })).toBeInTheDocument()
 
     expect(
       screen.getByText((content, element) => {

src/views/oauth/experiments/__tests__/predirectInstructionUtils-test.ts

@@ -1,81 +1,23 @@
 import { describe, it, expect } from 'vitest'
-import {
-  isWellsFargoInstitution,
-  getInstitutionBrandColor,
-} from 'src/views/oauth/experiments/predirectInstructionsUtils'
+import { getInstitutionBrandColor } from 'src/views/oauth/experiments/predirectInstructionsUtils'
 
 describe('predirectInstructionsUtils', () => {
-  describe('isWellsFargoInstitution', () => {
-    it('returns true for Wells Fargo PROD guid', () => {
-      const institution = {
-        guid: 'INS-6073ad01-da9e-f6ba-dfdf-5f1500d8e867',
-      } as InstitutionResponseType
-
-      expect(isWellsFargoInstitution(institution)).toBe(true)
-    })
-
-    it('returns true for Wells Fargo SAND guid', () => {
-      const institution = {
-        guid: 'INS-f9e8d5f6-b953-da63-32e4-6e88fbe8b250',
-      } as InstitutionResponseType
-
-      expect(isWellsFargoInstitution(institution)).toBe(true)
-    })
-
-    it('returns true for institution name Wells Fargo', () => {
-      const institution = {
-        guid: 'INS-other-guid',
-        name: 'Wells Fargo',
-      } as InstitutionResponseType
-
-      expect(isWellsFargoInstitution(institution)).toBe(true)
-    })
-
-    it('returns false for non-Wells Fargo institution', () => {
-      const institution = {
-        guid: 'INS-other-guid',
-        name: 'Chase Bank',
-      } as InstitutionResponseType
-
-      expect(isWellsFargoInstitution(institution)).toBe(false)
-    })
-  })
-
   describe('getInstitutionBrandColor', () => {
-    it('returns configured color for Wells Fargo when brand_color_hex_code exists', () => {
+    it('returns configured color for the INS when brand_color_hex_code exists', () => {
       const institution = {
-        guid: 'INS-6073ad01-da9e-f6ba-dfdf-5f1500d8e867',
+        guid: 'INS-test',
         brand_color_hex_code: '#D71E28',
       } as InstitutionResponseType
 
       expect(getInstitutionBrandColor(institution, '#000000')).toBe('#D71E28')
     })
 
-    it('returns Wells Fargo red when brand_color_hex_code is missing', () => {
+    it('returns the provided default color when brand_color_hex_code is missing', () => {
       const institution = {
-        guid: 'INS-6073ad01-da9e-f6ba-dfdf-5f1500d8e867',
-      } as InstitutionResponseType
-
-      expect(getInstitutionBrandColor(institution, '#000000')).toBe('#B22222')
-    })
-
-    it('returns configured color for non-Wells Fargo institution', () => {
-      const institution = {
-        guid: 'INS-other-guid',
-        name: 'Chase Bank',
-        brand_color_hex_code: '#117ACA',
-      } as InstitutionResponseType
-
-      expect(getInstitutionBrandColor(institution, '#000000')).toBe('#117ACA')
-    })
-
-    it('returns default color when brand_color_hex_code is missing for non-Wells Fargo', () => {
-      const institution = {
-        guid: 'INS-other-guid',
-        name: 'Chase Bank',
+        guid: 'INS-test',
       } as InstitutionResponseType
 
-      expect(getInstitutionBrandColor(institution, '#AABBCC')).toBe('#AABBCC')
+      expect(getInstitutionBrandColor(institution, '#000000')).toBe('#000000')
     })
 
     it('brand_color_hex_code: validates hex color format with 6 digits', () => {

src/views/oauth/experiments/predirectInstructionsUtils.ts

@@ -1,12 +1,3 @@
-export function isWellsFargoInstitution(institution: InstitutionResponseType): boolean {
-  const wellsFargoGuids = [
-    'INS-6073ad01-da9e-f6ba-dfdf-5f1500d8e867', // Wells Fargo PROD guid
-    'INS-f9e8d5f6-b953-da63-32e4-6e88fbe8b250', // Wells Fargo SAND guid for testing
-  ]
-
-  return wellsFargoGuids.includes(institution.guid) || institution.name === 'Wells Fargo'
-}
-
 export function getInstitutionBrandColor(
   institution: InstitutionResponseType,
   defaultColor: string,
@@ -15,10 +6,6 @@ export function getInstitutionBrandColor(
   const configuredInstitutionColor =
     rawColor && /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(rawColor) ? rawColor : null
 
-  if (isWellsFargoInstitution(institution)) {
-    return configuredInstitutionColor || '#B22222' // Default Wells Fargo red
-  }
-
   return configuredInstitutionColor || defaultColor
 }