chore: update generic error message component for cashier and wallets (…

…#17810)
deriv-com · Dec 19, 2024 · 6e582cf · 6e582cf
1 parent c5bc484
commit 6e582cf
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 23 deletions.
diff --git a/packages/cashier/src/components/error-state/error-state.tsx b/packages/cashier/src/components/error-state/error-state.tsx
@@ -7,19 +7,19 @@ type TProps = {
 };
 
 const ErrorState: React.FC<TProps> = ({ error }) => {
-    let message = localize('Something went wrong. Please refresh the page and try again.');
+    let message = localize('Please refresh the page and try again.');
 
     if (error && typeof error === 'object' && 'message' in error && typeof error.message === 'string') {
         message = error.message;
     }
 
     return (
         <EmptyState
-            icon='IcCashierError'
-            title={localize('Oops, something went wrong!')}
+            icon='IcTriangleExclamationXl'
+            title={localize('Something went wrong')}
             description={message}
             action={{
-                label: localize('Try again'),
+                label: localize('Refresh page'),
                 onClick: () => window.location.reload(),
                 tertiary: true,
             }}

diff --git a/packages/components/src/components/icon/common/ic-triangle-exclamation-xl.svg b/packages/components/src/components/icon/common/ic-triangle-exclamation-xl.svg
diff --git a/packages/wallets/src/components/WalletsErrorScreen/__tests__/WalletsErrorScreen.spec.tsx b/packages/wallets/src/components/WalletsErrorScreen/__tests__/WalletsErrorScreen.spec.tsx
@@ -21,10 +21,10 @@ describe('WalletsErrorScreen', () => {
         render(
             <WalletsErrorScreen
                 message='Sorry an error occurred. Please try accessing our cashier again.'
-                title='Oops, something went wrong!'
+                title='Something went wrong'
             />
         );
-        expect(screen.getByText('Oops, something went wrong!')).toBeInTheDocument();
+        expect(screen.getByText('Something went wrong')).toBeInTheDocument();
         expect(
             screen.getByText('Sorry an error occurred. Please try accessing our cashier again.')
         ).toBeInTheDocument();

diff --git a/packages/wallets/src/features/cashier/screens/DepositErrorScreen/DepositErrorScreen.tsx b/packages/wallets/src/features/cashier/screens/DepositErrorScreen/DepositErrorScreen.tsx
@@ -32,10 +32,10 @@ const DepositErrorScreen: React.FC<TProps> = ({ error }) => {
     }, [currentLang, i18nLanguage]);
 
     const defaultContent: TErrorContent = {
-        buttonText: <Localize i18n_default_text='Try again' />,
+        buttonText: <Localize i18n_default_text='Refresh page' />,
         message: error.message,
         onClick: () => window.location.reload(),
-        title: <Localize i18n_default_text='Oops, something went wrong!' />,
+        title: <Localize i18n_default_text='Something went wrong' />,
     };
 
     const depositErrorCodeHandlers: TErrorCodeHandlers = {

diff --git a/...ets/src/features/cashier/screens/DepositErrorScreen/__tests__/DepositErrorScreen.spec.tsx b/...ets/src/features/cashier/screens/DepositErrorScreen/__tests__/DepositErrorScreen.spec.tsx
@@ -21,9 +21,9 @@ describe('DepositErrorScreen', () => {
 
         render(<DepositErrorScreen error={error} />);
 
-        expect(screen.getByText('Oops, something went wrong!')).toBeInTheDocument();
+        expect(screen.getByText('Something went wrong')).toBeInTheDocument();
         expect(screen.getByText('Error message')).toBeInTheDocument();
-        expect(screen.getByRole('button', { name: 'Try again' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Refresh page' })).toBeInTheDocument();
     });
 
     it('should show correct deposit error screen for crypto suspended currency error', () => {
@@ -89,9 +89,9 @@ describe('DepositErrorScreen', () => {
 
         render(<DepositErrorScreen error={error} />);
 
-        expect(screen.getByText('Oops, something went wrong!')).toBeInTheDocument();
+        expect(screen.getByText('Something went wrong')).toBeInTheDocument();
         expect(screen.getByText('Error message')).toBeInTheDocument();
-        const ReloadButton = screen.getByRole('button', { name: 'Try again' });
+        const ReloadButton = screen.getByRole('button', { name: 'Refresh page' });
 
         fireEvent.click(ReloadButton);
         expect(reloadMock).toHaveBeenCalled();
@@ -106,8 +106,8 @@ describe('DepositErrorScreen', () => {
 
         render(<DepositErrorScreen error={error} />);
 
-        expect(screen.getByText('Oops, something went wrong!')).toBeInTheDocument();
+        expect(screen.getByText('Something went wrong')).toBeInTheDocument();
         expect(screen.getByText('Error message')).toBeInTheDocument();
-        expect(screen.getByRole('button', { name: 'Try again' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Refresh page' })).toBeInTheDocument();
     });
 });
diff --git a/...ages/wallets/src/features/cashier/screens/WithdrawalErrorScreen/WithdrawalErrorScreen.tsx b/...ages/wallets/src/features/cashier/screens/WithdrawalErrorScreen/WithdrawalErrorScreen.tsx
@@ -38,11 +38,11 @@ const WithdrawalErrorScreen: React.FC<TProps> = ({ error, resetError, setResendE
     }, [currentLang, i18nLanguage]);
 
     const defaultContent: TErrorContent = {
-        buttonText: <Localize i18n_default_text='Try again' />,
+        buttonText: <Localize i18n_default_text='Refresh page' />,
         buttonVariant: 'ghost',
         message: error.message,
         onClick: () => window.location.reload(),
-        title: <Localize i18n_default_text='Oops, something went wrong!' />,
+        title: <Localize i18n_default_text='Something went wrong' />,
     };
 
     const withdrawalErrorCodeHandlers: TErrorCodeHandlers = {

diff --git a/...c/features/cashier/screens/WithdrawalErrorScreen/__tests__/WithdrawalErrorScreen.spec.tsx b/...c/features/cashier/screens/WithdrawalErrorScreen/__tests__/WithdrawalErrorScreen.spec.tsx
@@ -62,9 +62,9 @@ describe('WithdrawalErrorScreen', () => {
 
         render(<WithdrawalErrorScreen error={error} resetError={resetError} setResendEmail={setResendEmail} />);
 
-        expect(screen.getByText('Oops, something went wrong!')).toBeInTheDocument();
+        expect(screen.getByText('Something went wrong')).toBeInTheDocument();
         expect(screen.getByText('Error message')).toBeInTheDocument();
-        expect(screen.getByRole('button', { name: 'Try again' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Refresh page' })).toBeInTheDocument();
     });
 
     it('should show correct withdrawal error screen for crypto suspended currency error', () => {
@@ -158,9 +158,9 @@ describe('WithdrawalErrorScreen', () => {
 
         render(<WithdrawalErrorScreen error={error} resetError={resetError} setResendEmail={setResendEmail} />);
 
-        expect(screen.getByText('Oops, something went wrong!')).toBeInTheDocument();
+        expect(screen.getByText('Something went wrong')).toBeInTheDocument();
         expect(screen.getByText('Error message')).toBeInTheDocument();
-        const ReloadButton = screen.getByRole('button', { name: 'Try again' });
+        const ReloadButton = screen.getByRole('button', { name: 'Refresh page' });
 
         await userEvent.click(ReloadButton);
         expect(reloadMock).toHaveBeenCalled();
@@ -176,7 +176,7 @@ describe('WithdrawalErrorScreen', () => {
 
         expect(screen.getByText('Error')).toBeInTheDocument();
         expect(screen.getByText('Crypto Invalid Address')).toBeInTheDocument();
-        const ReloadButton = screen.getByRole('button', { name: 'Try again' });
+        const ReloadButton = screen.getByRole('button', { name: 'Refresh page' });
 
         await userEvent.click(ReloadButton);
         expect(resetError).toHaveBeenCalledTimes(1);
@@ -191,9 +191,9 @@ describe('WithdrawalErrorScreen', () => {
 
         render(<WithdrawalErrorScreen error={error} resetError={resetError} setResendEmail={setResendEmail} />);
 
-        expect(screen.getByText('Oops, something went wrong!')).toBeInTheDocument();
+        expect(screen.getByText('Something went wrong')).toBeInTheDocument();
         expect(screen.getByText('Error message')).toBeInTheDocument();
-        expect(screen.getByRole('button', { name: 'Try again' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Refresh page' })).toBeInTheDocument();
     });
 
     it('should render without crashing when optional parameters are not received', async () => {