feat: rewards onboarding components (#37919)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
https://consensyssoftware.atlassian.net/browse/RWDS-268
Part 6 of #36827
introduces new rewards onboarding components
<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/37919?quickstart=1)

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: null

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Implements the Rewards onboarding flow (modal with steps, error
toast/banner, referral opt‑in) with full tests and new locale strings.
> 
> - **UI/Flow**:
> - Add `Rewards` onboarding modal
`ui/components/app/rewards/onboarding/OnboardingModal.tsx` with steps
`OnboardingIntroStep`, `OnboardingStep1`, `OnboardingStep2`,
`OnboardingStep3`, `OnboardingStep4` and `ProgressIndicator`.
>   - New error surfaces: `RewardsErrorBanner` and `RewardsErrorToast`.
> - **Logic**:
> - Intro step handles geo eligibility, hardware wallet checks, and
candidate subscription ID states (`pending/retry/error`) with retry
actions; advances through steps; persists modal‑shown flag.
> - Step 4 supports referral code validation UI and opt‑in action; legal
links via constants in `onboarding/constants.ts`.
> - **i18n**:
> - Add/enhance Rewards onboarding and error strings in
`app/_locales/en/messages.json` and `app/_locales/en_GB/messages.json`.
> - **Tests**:
> - Comprehensive tests for modal, steps 1–4, error banner/toast, and
progress indicator.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
978bad2. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: sophieqgu

app/_locales/en/messages.json

@@ -0,0 +1,116 @@
+import React, { Ref } from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ButtonProps } from '@metamask/design-system-react';
+import RewardsErrorBanner from './RewardsErrorBanner';
+
+// Partially mock the design-system Button to expose `isLoading` for assertions,
+// while keeping other components unchanged.
+jest.mock('@metamask/design-system-react', () => {
+  const actual = jest.requireActual('@metamask/design-system-react');
+  const ReactLib = jest.requireActual('react');
+
+  const MockButton = ReactLib.forwardRef(
+    (
+      { children, isLoading, onClick, ...rest }: ButtonProps,
+      ref: Ref<HTMLButtonElement>,
+    ) => (
+      <button
+        {...rest}
+        // Provide a stable attribute to assert loading state
+        data-loading={isLoading ? 'true' : 'false'}
+        ref={ref}
+        onClick={onClick}
+      >
+        {children}
+      </button>
+    ),
+  );
+
+  return {
+    ...actual,
+    Button: MockButton,
+  };
+});
+
+describe('RewardsErrorBanner', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders title and description', () => {
+    render(
+      <RewardsErrorBanner
+        title="Error Title"
+        description="Something went wrong"
+      />,
+    );
+
+    expect(screen.getByTestId('rewards-error-banner')).toBeInTheDocument();
+    expect(screen.getByText('Error Title')).toBeInTheDocument();
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+  });
+
+  it('does not render action buttons when no handlers provided', () => {
+    render(<RewardsErrorBanner title="T" description="D" />);
+    // No buttons should be present if both onDismiss and onConfirm are undefined
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('renders Dismiss button and calls onDismiss when clicked', () => {
+    const onDismiss = jest.fn();
+    render(
+      <RewardsErrorBanner title="T" description="D" onDismiss={onDismiss} />,
+    );
+
+    const dismissButton = screen.getByRole('button', { name: 'Dismiss' });
+    expect(dismissButton).toBeInTheDocument();
+
+    fireEvent.click(dismissButton);
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders Confirm button with default label and calls onConfirm', () => {
+    const onConfirm = jest.fn();
+    render(
+      <RewardsErrorBanner title="T" description="D" onConfirm={onConfirm} />,
+    );
+
+    const confirmButton = screen.getByRole('button', { name: 'Confirm' });
+    expect(confirmButton).toBeInTheDocument();
+
+    fireEvent.click(confirmButton);
+    expect(onConfirm).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders Confirm button with custom label when provided', () => {
+    const onConfirm = jest.fn();
+    render(
+      <RewardsErrorBanner
+        title="T"
+        description="D"
+        onConfirm={onConfirm}
+        confirmButtonLabel="Proceed"
+      />,
+    );
+
+    const confirmButton = screen.getByRole('button', { name: 'Proceed' });
+    expect(confirmButton).toBeInTheDocument();
+  });
+
+  it('sets loading state on Confirm button when onConfirmLoading is true', () => {
+    const onConfirm = jest.fn();
+    render(
+      <RewardsErrorBanner
+        title="T"
+        description="D"
+        onConfirm={onConfirm}
+        onConfirmLoading
+      />,
+    );
+
+    const confirmButton = screen.getByRole('button', { name: 'Confirm' });
+    expect(confirmButton).toBeInTheDocument();
+    // Assert the mocked Button exposes loading state via data-loading
+    expect(confirmButton).toHaveAttribute('data-loading', 'true');
+  });
+});