feat: handle api errors on UI during subscription

test/e2e/tests/shield/shield-plan-subscription.spec.ts

@@ -92,10 +92,8 @@ describe('Shield Subscription Tests', function () {
         },
       );
     });
-  });
 
-  describe('Shield Settings Subscription', function () {
-    it('should subscribe to the shield plan from the settings > shield - annual plan', async function () {
+    it('should shield-plan page redirect to homepage when user clicks back button', async function () {
       await withFixtures(
         {
           fixtures: createShieldFixture().build(),
@@ -113,16 +111,42 @@ describe('Shield Subscription Tests', function () {
           await homePage.clickOnShieldEntryModalGetStarted();
 
           const shieldPlanPage = new ShieldPlanPage(driver);
-          await shieldPlanPage.checkPageIsLoaded();
           await shieldPlanPage.clickBackButton();
 
+          await homePage.checkShieldEntryModalIsDisplayed();
+        },
+      );
+    });
+  });
+
+  describe('Shield Settings Subscription', function () {
+    it('should subscribe to the shield plan from the settings > shield - annual plan', async function () {
+      await withFixtures(
+        {
+          fixtures: createShieldFixture().build(),
+          title: this.test?.fullTitle(),
+          testSpecificMock: (server: Mockttp) => {
+            const shieldMockttpService = new ShieldMockttpService();
+            return shieldMockttpService.setup(server, {
+              mockNotEligible: true,
+            });
+          },
+        },
+        async ({ driver }) => {
+          await loginWithBalanceValidation(driver);
+
+          const homePage = new HomePage(driver);
+
+          // open menu and settings
+          await homePage.headerNavbar.openSettingsPage();
           const settingsPage = new SettingsPage(driver);
           await settingsPage.checkPageIsLoaded();
           await settingsPage.goToTransactionShieldPage();
 
           await homePage.checkShieldEntryModalIsDisplayed();
           await homePage.clickOnShieldEntryModalGetStarted();
 
+          const shieldPlanPage = new ShieldPlanPage(driver);
           await shieldPlanPage.completeShieldPlanSubscriptionFlow('annual');
 
           const shieldDetailPage = new ShieldDetailPage(driver);
@@ -138,29 +162,62 @@ describe('Shield Subscription Tests', function () {
           title: this.test?.fullTitle(),
           testSpecificMock: (server: Mockttp) => {
             const shieldMockttpService = new ShieldMockttpService();
-            return shieldMockttpService.setup(server);
+            return shieldMockttpService.setup(server, {
+              mockNotEligible: true,
+            });
           },
         },
         async ({ driver }) => {
           await loginWithBalanceValidation(driver);
 
           const homePage = new HomePage(driver);
+
+          await homePage.headerNavbar.openSettingsPage();
+          const settingsPage = new SettingsPage(driver);
+          await settingsPage.checkPageIsLoaded();
+          await settingsPage.goToTransactionShieldPage();
+
           await homePage.checkShieldEntryModalIsDisplayed();
           await homePage.clickOnShieldEntryModalGetStarted();
 
           const shieldPlanPage = new ShieldPlanPage(driver);
-          await shieldPlanPage.checkPageIsLoaded();
-          await shieldPlanPage.clickBackButton();
+          await shieldPlanPage.completeShieldPlanSubscriptionFlow('monthly');
+
+          const shieldDetailPage = new ShieldDetailPage(driver);
+          await shieldDetailPage.validateShieldDetailPage();
+        },
+      );
+    });
+
+    it('should shield-plan page redirect to settings page when user clicks back button', async function () {
+      await withFixtures(
+        {
+          fixtures: createShieldFixture().build(),
+          title: this.test?.fullTitle(),
+          testSpecificMock: (server: Mockttp) => {
+            const shieldMockttpService = new ShieldMockttpService();
+            return shieldMockttpService.setup(server, {
+              mockNotEligible: true,
+            });
+          },
+        },
+        async ({ driver }) => {
+          await loginWithBalanceValidation(driver);
+
+          const homePage = new HomePage(driver);
 
+          await homePage.headerNavbar.openSettingsPage();
           const settingsPage = new SettingsPage(driver);
           await settingsPage.checkPageIsLoaded();
           await settingsPage.goToTransactionShieldPage();
 
+          await homePage.checkShieldEntryModalIsDisplayed();
           await homePage.clickOnShieldEntryModalGetStarted();
-          await shieldPlanPage.completeShieldPlanSubscriptionFlow('monthly');
 
-          const shieldDetailPage = new ShieldDetailPage(driver);
-          await shieldDetailPage.validateShieldDetailPage();
+          const shieldPlanPage = new ShieldPlanPage(driver);
+          await shieldPlanPage.clickBackButton();
+
+          await settingsPage.checkPageIsLoaded();
         },
       );
     });

ui/components/app/api-error-handler/api-error-handler.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import browser from 'webextension-polyfill';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import {
+  Box,
+  Button,
+  ButtonSize,
+  ButtonVariant,
+  Icon,
+  IconColor,
+  IconName,
+  Text,
+  TextVariant,
+} from '@metamask/design-system-react';
+import classnames from 'classnames';
+
+const ApiErrorHandler = ({ className = '' }: { className?: string }) => {
+  const t = useI18nContext();
+
+  return (
+    <Box
+      className={classnames(
+        'flex flex-col items-center text-center gap-4',
+        className,
+      )}
+    >
+      <Icon
+        className="w-12 h-12"
+        name={IconName.Error}
+        color={IconColor.IconAlternative}
+      />
+      <Text variant={TextVariant.BodyMd}>{t('shieldPlanErrorText')}</Text>
+      <Button
+        className="w-full"
+        size={ButtonSize.Lg}
+        variant={ButtonVariant.Primary}
+        // this reloads the entire extension
+        onClick={() => browser.runtime.reload()}
+      >
+        {t('tryAgain')}
+      </Button>
+    </Box>
+  );
+};
+
+export default ApiErrorHandler;

ui/components/app/api-error-handler/index.ts

@@ -0,0 +1 @@
+export { default } from './api-error-handler';

ui/pages/shield-plan/index.scss

@@ -3,6 +3,11 @@
 .shield-plan-page {
   max-width: 600px;
 
+  .shield-plan-page__error-content {
+    margin-top: 120px;
+  }
+
+
   .shield-plan-page__plans {
     grid-template-columns: 1fr 1fr;
   }