Add the brand_color_hex_code into the predirect page

[codingLogan]

Dependency

✅ The code has been merged - 🚫 This was blocked by #267 🚫

The refactor in 267 must be merged first

Feature Summary

1. (new) brand_color_hex_code can return as part of the institutions/GUID-CODE API response
2. (new) oauth_predirect_instructions can return as part of the institutions/GUID-CODE API response
3. (same) Wells Fargo's oauth experience will still see the two checkboxes, and have a red color, even when the API does not have values yet.

Institution Brand Color

Institutions can have a defined hex code for their brand. Eventually, it will be an option of a few colors in Batcave chosen by someone at MX. When picked, that color should show up in the widget header on the OAuth predirect page for that institution:

For instance... if Wells Fargo has one of our red colors selected it will show up like this:

Internal Jira reference: https://mxcom.atlassian.net/browse/CTT-76

Institution Aggregator Instructions

Institution Aggregators can display multiple checkboxes to instruct the user what to do on external websites. When configured by MX, the options can look like this:

Internal Jira reference: https://mxcom.atlassian.net/browse/CTT-77

Testing Instructions

To test this new OAuth functionality, the code-base that is using the npm package must start sending oauth_predirect_instructions and brand_color_hex_code values in the response to the API request for an institution. This can be hard-coded for testing purposes, because the configuration backend is not yet ready.

Note - Wells Fargo will always show the new experience with a red color and ACCOUNT_AND_TRANSACTIONS_INSTRUCTION and PROFILE_INFORMATION_INSTRUCTION, unless the API response comes back with values, in which case, the specific values will be used.

// Inside the implementing code, the two new fields may be provided.  If they aren't it is still handled gracefully.

 loadInstitutionByGuid(guid) {
    return this.axios.get(ApiEndpoints.INSTITUTIONS + '/' + guid).then(response => ({
      ...response.data.institution,
      brand_color_hex_code: "#f20098", // < ==== null, or any custom hex color
      oauth_predirect_instructions: null, // <===== null, array of integers (0-4 are the only accepted values)
      ...
    }))
  }

Each oauth_predirect_instructions value matches up accordingly:

  /*
  oauth_predirect_instructions values are expected values from the backend, and are in the npm package.
  see: src/views/oauth/experiments/predirectInstructionsUtils.ts

  Invalid values will be ignored by the frontend

  export const OAUTH_PREDIRECT_INSTRUCTION = {
    ACCOUNT_AND_TRANSACTIONS_INSTRUCTION: 0,
    ACCOUNT_NUMBERS_INSTRUCTION: 1,
    PROFILE_INFORMATION_INSTRUCTION: 2,
    STATEMENTS_INSTRUCTION: 3,
    TAX_INSTRUCTION: 4,
  }
*/

[ash-wright123]

I tried testing this and I am not seeing the new pre-direct screen am I supposed to turn on a feature flag for my client to see this new screen?

[codingLogan]

I tried testing this and I am not seeing the new pre-direct screen am I supposed to turn on a feature flag for my client to see this new screen?

I need to write up the specific instructions on how to test this. I'll reach out when I have those ready, and request a review then. Thank you @ash-wright123 !

[codingLogan]

I tried testing this and I am not seeing the new pre-direct screen am I supposed to turn on a feature flag for my client to see this new screen?

I need to write up the specific instructions on how to test this. I'll reach out when I have those ready, and request a review then. Thank you @ash-wright123 !

@ash-wright123 this now has more specific instructions in how to test it.

[platypus801]

looks good

[ash-wright123]

This tested well for me LGTM

[Jameson13B]

This looks great! Good work Logan!

[github-actions]

🎉 This PR is included in version 2.17.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀