feat: adds a new demo connect guard screen

Author: Clement Mwimo

src/components/RenderConnectStep.js

@@ -34,6 +34,7 @@ import { Microdeposits } from 'src/views/microdeposits/Microdeposits'
 import VerifyExistingMember from 'src/views/verification/VerifyExistingMember'
 import { VerifyError } from 'src/views/verification/VerifyError'
 import { ManualAccountConnect } from 'src/views/manualAccount/ManualAccountConnect'
+import { DemoConnectGuard } from 'src/views/demoConnectGuard/DemoConnectGuard'
 import AdditionalProductStep, {
   ADDITIONAL_PRODUCT_OPTIONS,
 } from 'src/views/additionalProduct/AdditionalProductStep'
@@ -110,6 +111,10 @@ const RenderConnectStep = (props) => {
       throw new Error('invalid product offer')
 
     connectStepView = <AdditionalProductStep ref={props.navigationRef} />
+  } else if (step === STEPS.DEMO_CONNECT_GUARD) {
+    connectStepView = (
+      <DemoConnectGuard institution={selectedInstitution} ref={props.navigationRef} />
+    )
   } else if (step === STEPS.ADD_MANUAL_ACCOUNT) {
     connectStepView = (
       <ManualAccountConnect

src/const/Connect.js

@@ -11,6 +11,7 @@ export const STEPS = {
   CONNECTING: 'connecting',
   CONSENT: 'consent',
   DELETE_MEMBER_SUCCESS: 'deleteMemberSuccess',
+  DEMO_CONNECT_GUARD: 'demoConnectGuard',
   DISCLOSURE: 'disclosure',
   ENTER_CREDENTIALS: 'enterCreds',
   EXISTING_MEMBER: 'existingMember',

src/hooks/useSelectInstitution.tsx

@@ -18,6 +18,7 @@ const useSelectInstitution = () => {
   const dispatch = useDispatch()
   const consentIsEnabled = useSelector((state: RootState) => isConsentEnabled(state))
   const connectConfig = useSelector(selectConnectConfig)
+  const user = useSelector((state: RootState) => state.profiles.user)
 
   const handleSelectInstitution = useCallback(
     (institution: InstitutionResponseType) => {
@@ -42,6 +43,7 @@ const useSelectInstitution = () => {
               institutionStatus,
               consentIsEnabled: consentIsEnabled || false,
               additionalProductOption: connectConfig?.additional_product_option || null,
+              user,
             },
           })
         }),

src/redux/reducers/Connect.js

@@ -278,6 +278,7 @@ const selectInstitutionSuccess = (state, action) => {
   // 2. Additional product - if the client is offering a product AND the institution has support for the product
   // 3. Consent - if the Client has enabled consent
   // 4. Institution disabled - if the institution is disabled by the client
+  // 5. Demo connect guard - if the user is a demo user but the institution is not a demo institution
   let nextStep = STEPS.ENTER_CREDENTIALS
 
   const canOfferVerification =
@@ -292,6 +293,8 @@ const selectInstitutionSuccess = (state, action) => {
       action.payload.institutionStatus === InstitutionStatus.UNAVAILABLE)
   ) {
     nextStep = STEPS.INSTITUTION_STATUS_DETAILS
+  } else if (action.payload.user?.is_demo && !action.payload.institution?.is_demo) {
+    nextStep = STEPS.DEMO_CONNECT_GUARD
   } else if (canOfferVerification || canOfferAggregation) {
     nextStep = STEPS.ADDITIONAL_PRODUCT
   } else if (action.payload.consentIsEnabled) {

src/views/demoConnectGuard/DemoConnectGuard.tsx

@@ -0,0 +1,90 @@
+import React, { useRef } from 'react'
+import { useSelector } from 'react-redux'
+import { Button } from '@mui/material'
+import { P, H2 } from '@mxenabled/mxui'
+import { Icon } from '@mxenabled/mxui'
+
+import { __ } from 'src/utilities/Intl'
+import { InstitutionLogo } from '@mxenabled/mxui'
+import { SlideDown } from 'src/components/SlideDown'
+import { getSelectedInstitution } from 'src/redux/selectors/Connect'
+
+interface DemoConnectGuardProps {
+  onReturnToSearch: () => void
+}
+
+export const DemoConnectGuard: React.FC<DemoConnectGuardProps> = ({ onReturnToSearch }) => {
+  const institution = useSelector(getSelectedInstitution)
+  const containerRef = useRef(null)
+  const styles = getStyles()
+
+  return (
+    <div ref={containerRef} style={styles.container}>
+      <SlideDown>
+        <div style={styles.logoContainer}>
+          <InstitutionLogo
+            alt={__('Logo for %1', institution.name)}
+            aria-hidden={true}
+            institutionGuid={institution.guid}
+            logoUrl={institution.logo_url}
+            size={64}
+          />
+          <Icon color="error" fill={true} name="error" size={32} sx={styles.icon} />
+        </div>
+        <H2 sx={styles.title} truncate={false}>
+          {__('Demo mode active')}
+        </H2>
+        <P sx={styles.body} truncate={false}>
+          {__(
+            'Live institutions are not available in the demo environment. Please select MX Bank to test the connection process.',
+          )}
+        </P>
+        <Button
+          data-test="done-button"
+          fullWidth={true}
+          onClick={onReturnToSearch}
+          variant="contained"
+        >
+          {__('Return to institution selection')}
+        </Button>
+      </SlideDown>
+    </div>
+  )
+}
+
+const getStyles = () => ({
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    textAlign: 'center',
+    paddingTop: 20,
+  } as React.CSSProperties,
+  logoContainer: {
+    position: 'relative',
+    display: 'inline-block',
+  } as React.CSSProperties,
+  icon: {
+    position: 'absolute',
+    top: '-16px',
+    right: '-16px',
+    background: 'white',
+    borderRadius: '50%',
+  },
+  title: {
+    marginBottom: '4px',
+    marginTop: '32px',
+    fontSize: '23px',
+    fontWeight: 700,
+    lineHeight: '32px',
+    textAlign: 'center',
+  },
+  body: {
+    textAlign: 'center',
+    marginBottom: '32px',
+    fontSize: '15px',
+    fontWeight: 400,
+    lineHeight: '24px',
+  } as React.CSSProperties,
+})