refactor: migrated the ThankYou screen to use MXUI Icon instead of Ch…

src/components/ThankYouMessage.module.css

@@ -0,0 +1,21 @@
+.container {
+  background-color: var(--mui-palette-background-paper);
+  box-sizing: border-box;
+  height: 100%;
+  padding-left: var(--spacing-3);
+  padding-right: var(--spacing-3);
+  padding-top: calc(var(--mui-spacing) * 10);
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 100;
+}
+
+.content:global(.MuiStack-root) {
+  max-width: 400px;
+  width: -webkit-fill-available;
+}
+
+.message {
+  text-align: center;
+}

src/components/ThankYouMessage.test.tsx

@@ -0,0 +1,80 @@
+import React from 'react'
+
+import { render, screen } from 'src/utilities/testingLibrary'
+
+import RenderConnectStep from 'src/components/RenderConnectStep'
+import { AnalyticContext } from 'src/Connect'
+import { STEPS } from 'src/const/Connect'
+import { createRenderConnectStepInitialState } from 'src/utilities/test/createRenderConnectStepInitialState'
+import { institutionData } from 'src/services/mockedData'
+
+vi.mock('react-confetti', () => ({ default: () => null }))
+
+describe('<ThankYouMessage />', () => {
+  const defaultProps = {
+    availableAccountTypes: [],
+    handleConsentGoBack: vi.fn(),
+    handleCredentialsGoBack: vi.fn(),
+    handleOAuthGoBack: vi.fn(),
+    navigationRef: React.createRef(),
+    onManualAccountAdded: vi.fn(),
+    onSuccessfulAggregation: vi.fn(),
+    onUpsertMember: vi.fn(),
+    setConnectLocalState: vi.fn(),
+  }
+
+  const institution = institutionData.institution
+
+  const renderConnectedStep = () => {
+    const mockMember = { guid: 'MEM-123', name: 'Test Member' }
+    const baseState = createRenderConnectStepInitialState(STEPS.CONNECTED, institution)
+    const preloadedState = {
+      ...baseState,
+      connect: {
+        ...baseState.connect,
+        currentMemberGuid: mockMember.guid,
+        members: [mockMember],
+      },
+    }
+
+    const portalTarget = document.createElement('div')
+    portalTarget.id = 'connect-wrapper'
+    document.body.appendChild(portalTarget)
+
+    return render(
+      <AnalyticContext.Provider
+        value={{
+          onAnalyticEvent: () => {},
+          onAnalyticPageview: () => {},
+          onShowConnectSuccessSurvey: () => {},
+          onSubmitConnectSuccessSurvey: () => {},
+        }}
+      >
+        <RenderConnectStep {...defaultProps} />
+      </AnalyticContext.Provider>,
+      { preloadedState },
+    )
+  }
+
+  it('shows the thank you confirmation after submitting feedback and returns the user to search when Done is pressed', async () => {
+    const { user } = renderConnectedStep()
+
+    await user.click(await screen.findByRole('button', { name: /give feedback/i }))
+    await user.click(screen.getByRole('button', { name: '4' }))
+    await user.click(screen.getByRole('button', { name: /continue/i }))
+    await user.click(screen.getByRole('button', { name: '4' }))
+    await user.click(screen.getByRole('button', { name: /continue/i }))
+    await user.click(screen.getByRole('button', { name: /send feedback/i }))
+
+    expect(
+      await screen.findByRole('heading', { name: 'Thank you for your feedback' }),
+    ).toBeInTheDocument()
+
+    await user.click(screen.getByRole('button', { name: 'Done' }))
+
+    expect(await screen.findByText('Select your institution')).toBeInTheDocument()
+    expect(
+      screen.queryByRole('heading', { name: 'Thank you for your feedback' }),
+    ).not.toBeInTheDocument()
+  })
+})

src/components/ThankYouMessage.tsx

@@ -3,12 +3,11 @@ import { createPortal } from 'react-dom'
 
 import { __ } from 'src/utilities/Intl'
 
-import { Text } from '@mxenabled/mxui'
-import { Button } from '@mui/material'
-import { CheckmarkFilled } from '@kyper/icon/CheckmarkFilled'
-import { useTokens } from '@kyper/tokenprovider'
+import { Icon, Text } from '@mxenabled/mxui'
+import { Button, Stack } from '@mui/material'
 
 import { SlideDown } from 'src/components/SlideDown'
+import styles from 'src/components/ThankYouMessage.module.css'
 
 interface ThankYouMessageProps {
   handleDone: () => void
@@ -19,56 +18,24 @@ export const ThankYouMessage: React.FC<ThankYouMessageProps> = ({
   handleDone,
   portalTo = 'connect-wrapper',
 }) => {
-  const tokens = useTokens()
-  const styles = getStyles(tokens)
   return createPortal(
-    <div style={styles.container}>
-      <div style={styles.thankYouContainer}>
+    <Stack alignItems="center" className={styles.container}>
+      <Stack className={styles.content} spacing={3}>
         <SlideDown>
-          <div style={styles.checkMarkIcon}>
-            <CheckmarkFilled color="#12875E" size={80} />
-          </div>
+          <Stack alignItems="center">
+            <Icon color="success" fill={true} name="check_circle" size={80} />
+          </Stack>
         </SlideDown>
-        <Text component="h2" style={styles.thankYouMessage} truncate={false} variant="H2">
-          {__('Thank you for your feedback')}
-        </Text>
-        <Button fullWidth={true} onClick={handleDone} style={styles.button} variant="contained">
-          {__('Done')}
-        </Button>
-      </div>
-    </div>,
+        <Stack spacing={4}>
+          <Text className={styles.message} component="h2" truncate={false} variant="H2">
+            {__('Thank you for your feedback')}
+          </Text>
+          <Button fullWidth={true} onClick={handleDone} variant="contained">
+            {__('Done')}
+          </Button>
+        </Stack>
+      </Stack>
+    </Stack>,
     document.getElementById(portalTo)!,
   )
 }
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const getStyles = (tokens: any) => ({
-  container: {
-    top: 0,
-    margin: '0 auto',
-    height: '100%',
-    width: '100%',
-    position: 'absolute',
-    zIndex: tokens.ZIndex.Modal,
-    backgroundColor: tokens.BackgroundColor.Container,
-  } as React.CSSProperties,
-  checkMarkIcon: {
-    display: 'flex',
-    justifyContent: 'center',
-  },
-  thankYouContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    maxWidth: '400px',
-    margin: '80px auto 0',
-    padding: '0 24px',
-  } as React.CSSProperties,
-  thankYouMessage: {
-    marginTop: '24px',
-  },
-  button: {
-    marginTop: '32px',
-  },
-})