Wes/powered by aggregator

package.json

@@ -27,8 +27,8 @@
     "publish:major": "npm run testAndBuild && npm version major && git push && git push origin --tags && npm publish"
   },
   "dependencies": {
-    "@emotion/react": "^11.13.0",
-    "@emotion/styled": "^11.13.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
     "@kyper/button": "^4.0.0",
     "@kyper/hooks": "^1.0.0",
     "@kyper/icon": "^1.18.1",

src/ConnectWidget.tsx

@@ -9,6 +9,7 @@ import { initGettextLocaleData } from 'src/utilities/Personalization'
 import { ConnectedTokenProvider } from 'src/ConnectedTokenProvider'
 import { TooSmallDialog } from 'src/components/app/TooSmallDialog'
 import { setLocalizedContent } from 'src/redux/reducers/localizedContentSlice'
+import './sharedVariables.css'
 
 interface PostMessageContextType {
   postMessageEventOverrides?: PostMessageEventOverrides

src/ConnectedTokenProvider.tsx

@@ -4,7 +4,6 @@ import { useSelector } from 'react-redux'
 
 import { Theme, ThemeProvider } from '@mui/material'
 import { deepmerge } from '@mui/utils'
-
 import { createMXTheme, Icon, IconWeight } from '@mxenabled/mxui'
 import { TokenProvider, THEMES } from '@kyper/tokenprovider'
 

src/components/ConnectLogoHeader.tsx

@@ -17,11 +17,8 @@ import ConnectHeaderBackdropDark from 'src/images/header/ConnectHeaderBackdropDa
 import ConnectHeaderBackdropLight from 'src/images/header/ConnectHeaderBackdropLight.svg'
 
 interface ConnectLogoHeaderProps {
-  institution?: {
-    guid?: string
-    logo_url?: string
-    aggregator_logo_url?: string
-  }
+  institutionGuid?: string
+  institutionLogo?: string
 }
 
 export const ConnectLogoHeader: React.FC<ConnectLogoHeaderProps> = (props) => {
@@ -40,34 +37,24 @@ export const ConnectLogoHeader: React.FC<ConnectLogoHeaderProps> = (props) => {
       </div>
     )
 
-  const defaultAggregatorLogo = () =>
-    colorScheme === COLOR_SCHEME.LIGHT ? (
-      <ConnectHeaderBackdropLight />
-    ) : (
-      <ConnectHeaderBackdropDark />
-    )
   return (
     <div aria-hidden={true} style={styles.container}>
       <div data-test="mxLogo" style={styles.backdropImage}>
-        {props?.institution?.aggregator_logo_url ? (
-          <img
-            alt="aggregator logo"
-            src={props.institution.aggregator_logo_url}
-            style={styles.aggregatorLogo}
-          />
+        {colorScheme === COLOR_SCHEME.LIGHT ? (
+          <ConnectHeaderBackdropLight />
         ) : (
-          defaultAggregatorLogo()
+          <ConnectHeaderBackdropDark />
         )}
       </div>
       <div style={styles.clientLogo}>
         <ClientLogo alt="Client logo" clientGuid={clientGuid} size={64} />
       </div>
       <div style={styles.institutionLogo}>
-        {props?.institution?.guid ? (
+        {props.institutionGuid ? (
           <InstitutionLogo
             alt="Institution logo"
-            institutionGuid={props.institution.guid}
-            logoUrl={props.institution.logo_url}
+            institutionGuid={props.institutionGuid}
+            logoUrl={props.institutionLogo}
             size={64}
             style={{ borderRadius: tokens.BorderRadius.Large }}
           />
@@ -114,11 +101,5 @@ const getStyles = () => {
       marginLeft: '80px',
       zIndex: 20,
     },
-    aggregatorLogo: {
-      width: '88px',
-      height: '80px',
-      zIndex: 10,
-      position: 'relative',
-    } as React.CSSProperties,
   }
 }

src/components/__tests__/ConnectLogoHeader-test.tsx

@@ -43,7 +43,7 @@ describe('ConnectLogoHeader', () => {
   it('renders a custom logoUrl if an institutionGuid and institutionLogo was passed in props', () => {
     const logoUrl = 'testUrl'
 
-    render(<ConnectLogoHeader institution={{ guid: 'INS-123', logo_url: logoUrl }} />, {
+    render(<ConnectLogoHeader institutionGuid="INS-123" institutionLogo={logoUrl} />, {
       preloadedState: initialState,
     })
 
@@ -53,7 +53,7 @@ describe('ConnectLogoHeader', () => {
 
   it('renders an InstitutionLogo if an institutionGuid was passed in props', () => {
     const institutionGuid = 'INS-123'
-    render(<ConnectLogoHeader institution={{ guid: institutionGuid }} />, {
+    render(<ConnectLogoHeader institutionGuid={institutionGuid} />, {
       preloadedState: initialState,
     })
 
@@ -67,13 +67,4 @@ describe('ConnectLogoHeader', () => {
     render(<ConnectLogoHeader />, { preloadedState: initialState })
     expect(screen.queryAllByTestId('svg-image').length).toBe(2)
   })
-
-  it('renders the aggregatorHeaderOverride when provided', () => {
-    const overrideUrl = 'https://example.com/logo.png'
-
-    render(<ConnectLogoHeader institution={{ aggregator_logo_url: overrideUrl }} />)
-
-    const img = screen.getByAltText('aggregator logo')
-    expect(img.getAttribute('src')).toEqual(overrideUrl)
-  })
 })

src/const/language/es.json

@@ -184,7 +184,7 @@
   "Enter account information": "Introduzca la información de la cuenta",
   "Verification must be enabled to use this feature.": "La verificación debe estar habilitada para usar esta función.",
   "Please try again or come back later.": "Inténtalo de nuevo o vuelve más tarde.",
-  "Connecting to %1": "Conectarse a %1",
+  "Connecting to": "Conectarse a",
   "Manual Institution": "Institución Manual",
   "Verify identity": "Verificar identidad",
   "Payment due day": "Día de vencimiento del pago",

src/const/language/es.po

@@ -933,8 +933,8 @@ msgid "Please try again or come back later."
 msgstr "Inténtalo de nuevo o vuelve más tarde."
 
 #: src/views/connecting/Connecting.js
-msgid "Connecting to %1"
-msgstr "Conectarse a %1"
+msgid "Connecting to"
+msgstr "Conectarse a"
 
 #: src/components/InstitutionBlock.js
 msgid "Manual Institution"

src/const/language/frCa.json

@@ -188,7 +188,7 @@
   "Enter account information": "Saisir les informations du compte",
   "Verification must be enabled to use this feature.": "La vérification doit être activée pour utiliser cette fonctionnalité.",
   "Please try again or come back later.": "Veuillez réessayer ou revenir plus tard.",
-  "Connecting to %1": "Se connecter à %1",
+  "Connecting to": "Se connecter à",
   "Manual Institution": "Établissement manuel",
   "Verify identity": "Vérifier l'identité",
   "Payment due day": "Jour d'échéance du paiement",

src/const/language/frCa.po

@@ -1023,8 +1023,8 @@ msgid "Please try again or come back later."
 msgstr "Veuillez réessayer ou revenir plus tard."
 
 #: src/views/connecting/Connecting.js
-msgid "Connecting to %1"
-msgstr "Se connecter à %1"
+msgid "Connecting to"
+msgstr "Se connecter à"
 
 #: src/components/InstitutionBlock.js
 msgid "Manual Institution"

src/redux/reducers/configSlice.ts

@@ -1,7 +1,14 @@
 import { RootState } from 'src/redux/Store'
 import { createSelector, createSlice, PayloadAction } from '@reduxjs/toolkit'
 import { ActionTypes as ConnectActionTypes } from 'src/redux/actions/Connect'
-import { AGG_MODE, REFERRAL_SOURCES, VERIFY_MODE, REWARD_MODE, STEPS } from 'src/const/Connect'
+import {
+  AGG_MODE,
+  REFERRAL_SOURCES,
+  VERIFY_MODE,
+  REWARD_MODE,
+  STEPS,
+  COLOR_SCHEME,
+} from 'src/const/Connect'
 import { COMBO_JOB_DATA_TYPES } from 'src/const/comboJobDataTypes'
 
 export const initialState: ClientConfigType = {
@@ -178,6 +185,11 @@ export const selectConnectConfig = createSelector(selectConfig, (config) => ({
 
 export const selectColorScheme = (state: RootState) => state.config.color_scheme
 
+export const getIsLightColorScheme = createSelector(
+  selectColorScheme,
+  (colorScheme) => colorScheme === COLOR_SCHEME.LIGHT,
+)
+
 // Helpers
 const getProductDeterminedMode = (config: {
   data_request?: { products?: string[] | null } | null

src/redux/reducers/profilesSlice.tsx

@@ -1,4 +1,4 @@
-import { createSlice } from '@reduxjs/toolkit'
+import { createSelector, createSlice } from '@reduxjs/toolkit'
 
 const initialState: ProfilesTypes = {
   loading: true,
@@ -56,3 +56,12 @@ const profilesSlice = createSlice({
 export const { loadProfiles, loadWidgetProfile, updateUserProfile } = profilesSlice.actions
 
 export default profilesSlice.reducer
+
+export const getProfilesSlice = createSelector(
+  (state) => state,
+  (state) => state.profiles,
+)
+
+export const getClient = createSelector(getProfilesSlice, (profiles) => profiles.client)
+
+export const getClientGuid = createSelector(getClient, (client) => client.guid)

src/sharedVariables.css

@@ -0,0 +1,3 @@
+:root {
+  --progress-bar-background-image-height: 80px;
+}

src/views/connecting/Connecting.js

@@ -21,7 +21,6 @@ import { SlideDown } from 'src/components/SlideDown'
 import { getDelay } from 'src/utilities/getDelay'
 import { pollMember, CONNECTING_MESSAGES } from 'src/utilities/pollers'
 import { STEPS } from 'src/const/Connect'
-import { ConnectLogoHeader } from 'src/components/ConnectLogoHeader'
 import { ProgressBar } from 'src/views/connecting/progress/ProgressBar'
 import * as JobSchedule from 'src/utilities/JobSchedule'
 import { AriaLive } from 'src/components/AriaLive'
@@ -47,6 +46,7 @@ import useAnalyticsEvent from 'src/hooks/useAnalyticsEvent'
 import { POST_MESSAGES } from 'src/const/postMessages'
 import { AnalyticContext } from 'src/Connect'
 import { PostMessageContext } from 'src/ConnectWidget'
+import { Stack } from '@mui/material'
 
 export const Connecting = (props) => {
   const {
@@ -337,16 +337,15 @@ export const Connecting = (props) => {
   return (
     <div ref={connectingRef} style={styles.container}>
       <SlideDown delay={getNextDelay()}>
-        <div style={styles.logoHeader}>
-          <ConnectLogoHeader institution={institution} />
-        </div>
-        <Text component="h2" style={styles.subHeader} truncate={false} variant="H2">
-          {__('Connecting to %1', institution.name)}
-        </Text>
-      </SlideDown>
-
-      <SlideDown delay={getNextDelay()}>
-        <ProgressBar jobSchedule={jobSchedule} />
+        <Stack spacing="32px">
+          <Stack spacing="2px">
+            <Text color="text.secondary" truncate={false} variant="subtitle2">
+              {__('Connecting to')}
+            </Text>
+            <Text variant="H2">{institution.name}</Text>
+          </Stack>
+          <ProgressBar institution={institution} jobSchedule={jobSchedule} />
+        </Stack>
       </SlideDown>
       <AriaLive level="assertive" message={message} timeout={500} />
     </div>
@@ -355,18 +354,12 @@ export const Connecting = (props) => {
 
 const getStyles = (tokens) => ({
   container: {
+    marginTop: 16,
     textAlign: 'center',
   },
-  logoHeader: {
-    marginTop: tokens.Spacing.Medium,
-    marginBottom: tokens.Spacing.Small,
-  },
   message: {
     marginTop: tokens.Spacing.XLarge,
   },
-  subHeader: {
-    paddingTop: tokens.Spacing.Large,
-  },
   spinner: {
     marginTop: tokens.Spacing.XLarge,
   },

src/views/connecting/progress/ProgressBackgroundImage.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { getIsLightColorScheme } from 'src/redux/reducers/configSlice'
+import ProgressBackdropDark from './ProgressBackdropDark.svg'
+import ProgressBackdropLight from './ProgressBackdropLight.svg'
+
+export const ProgressBackgroundImage = ({ className }: { className: string }) => {
+  const isLightColorScheme = useSelector(getIsLightColorScheme)
+
+  return (
+    <div className={className}>
+      {isLightColorScheme ? <ProgressBackdropLight /> : <ProgressBackdropDark />}
+    </div>
+  )
+}