diff --git a/CHANGELOG.md b/CHANGELOG.md index e4e73898b5..cfeb99a4c8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,10 @@ and this project adheres to ## [Unreleased] +### Added + +- 💄(frontend) redesign email confirmation standalone page- #2601 + ## [v5.5.0] - 2026-08-24 ### Added diff --git a/src/frontend/apps/impress/src/assets/icons/ui-kit/arrow-up-circle.svg b/src/frontend/apps/impress/src/assets/icons/ui-kit/arrow-up-circle.svg index ddd0bf04f2..2457f287a6 100644 --- a/src/frontend/apps/impress/src/assets/icons/ui-kit/arrow-up-circle.svg +++ b/src/frontend/apps/impress/src/assets/icons/ui-kit/arrow-up-circle.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/src/frontend/apps/impress/src/features/auth/__tests__/UserReconciliation.test.tsx b/src/frontend/apps/impress/src/features/auth/__tests__/UserReconciliation.test.tsx index 59fb47ea0d..861e0f3484 100644 --- a/src/frontend/apps/impress/src/features/auth/__tests__/UserReconciliation.test.tsx +++ b/src/frontend/apps/impress/src/features/auth/__tests__/UserReconciliation.test.tsx @@ -7,8 +7,12 @@ import { AppWrapper } from '@/tests/utils'; import { UserReconciliation } from '../components/UserReconciliation'; -vi.mock('../assets/mail-check-filled.svg', () => ({ - default: () =>
SuccessSvg
, +vi.mock('../assets/email-confirmation.svg', () => ({ + default: () =>
EmailConfirmationSvg
, +})); + +vi.mock('../assets/email-validation-error.svg', () => ({ + default: () =>
EmailValidationErrorSvg
, })); describe('UserReconciliation', () => { @@ -38,11 +42,22 @@ describe('UserReconciliation', () => { expect(fetchMock.callHistory.calls().length).toBe(1); }); + expect( + await screen.findByRole('heading', { + level: 1, + name: /Email Address Confirmed/i, + }), + ).toBeInTheDocument(); + expect( await screen.findByText( /To complete the unification of your user accounts/i, ), ).toBeInTheDocument(); + + expect( + await screen.findByRole('button', { name: /Resend e-mail/i }), + ).toBeInTheDocument(); }); }); @@ -63,7 +78,14 @@ describe('UserReconciliation', () => { }); expect( - await screen.findByText(/An error occurred during email validation./i), + await screen.findByRole('heading', { + level: 1, + name: /An error occurred during email validation./i, + }), ).toBeInTheDocument(); + + expect( + screen.queryByRole('button', { name: /Resend e-mail/i }), + ).not.toBeInTheDocument(); }); }); diff --git a/src/frontend/apps/impress/src/features/auth/assets/email-confirmation.svg b/src/frontend/apps/impress/src/features/auth/assets/email-confirmation.svg new file mode 100644 index 0000000000..93c020a122 --- /dev/null +++ b/src/frontend/apps/impress/src/features/auth/assets/email-confirmation.svg @@ -0,0 +1,85 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/frontend/apps/impress/src/features/auth/assets/email-validation-error.svg b/src/frontend/apps/impress/src/features/auth/assets/email-validation-error.svg new file mode 100644 index 0000000000..aee910b78b --- /dev/null +++ b/src/frontend/apps/impress/src/features/auth/assets/email-validation-error.svg @@ -0,0 +1,157 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/frontend/apps/impress/src/features/auth/assets/mail-check-filled.svg b/src/frontend/apps/impress/src/features/auth/assets/mail-check-filled.svg deleted file mode 100644 index 113813e421..0000000000 --- a/src/frontend/apps/impress/src/features/auth/assets/mail-check-filled.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/src/frontend/apps/impress/src/features/auth/components/UserReconciliation.tsx b/src/frontend/apps/impress/src/features/auth/components/UserReconciliation.tsx index 5147b00a70..795335c8c3 100644 --- a/src/frontend/apps/impress/src/features/auth/components/UserReconciliation.tsx +++ b/src/frontend/apps/impress/src/features/auth/components/UserReconciliation.tsx @@ -1,11 +1,12 @@ -import Image from 'next/image'; import { useTranslation } from 'react-i18next'; +import { css } from 'styled-components'; -import error_img from '@/assets/icons/error-coffee.png'; -import { Box, Loading, Text } from '@/components'; +import { Box, BoxButton, Icon, Loading, Text } from '@/components'; +import ArrowUpCircleSvg from '@/icons/arrow-up-circle.svg'; import { useUserReconciliationsQuery } from '../api'; -import SuccessSvg from '../assets/mail-check-filled.svg'; +import EmailConfirmationSvg from '../assets/email-confirmation.svg'; +import EmailValidationErrorSvg from '../assets/email-validation-error.svg'; interface UserReconciliationProps { reconciliationId: string; @@ -33,65 +34,81 @@ export const UserReconciliation = ({ ); } - let render = ( - - - - {t('Email Address Confirmed')} - - - {t( - 'To complete the unification of your user accounts, please click the confirmation links sent to all the email addresses you provided.', - )} - - - ); - - if (isError) { - render = ( - - + return ( + + {isError ? ( +