feat(rewards): add campaign opt-in flow with details, mechanics, and how-it-works views (#27619)

## Summary

- Adds `CampaignOptInSheet`, `CampaignHowItWorks`,
`CampaignDetailsView`, and `CampaignMechanicsView` components for the
campaign opt-in flow
- Wires new routes (`CampaignDetails`, `CampaignMechanics`) into
`RewardsNavigator`
- Updates `CampaignTile` and `CampaignsPreview` to support opt-in
navigation
- Extends `RewardsController` and `rewards-data-service` with
`CampaignParticipantStatus` handling and revert logic when feature flag
is off
- Adds i18n strings for all new UI

## **Changelog**

CHANGELOG entry: Added campaign opt-in flow with details and mechanics
screens in the Rewards section

## Test plan

- [ ] All 6 test suites pass (80 tests)
- [ ] `yarn format:check` passes
- [ ] ESLint: 0 errors on staged files

🤖 Generated with [Claude Code](https://claude.com/claude-code)

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Adds new Rewards campaign navigation/screens and changes campaign
opt-in API/controller behavior (including new cache/event logic and 409
handling), which could affect user enrollment state and campaign UI
across the app.
> 
> **Overview**
> Adds a new in-app **campaign opt-in flow** in Rewards, including
`CampaignDetailsView` (status/how-it-works + “Join campaign” CTA and
opt-in bottom sheet) and `CampaignMechanicsView` (expanded “how it
works” + parsed notes), plus a reusable `CampaignHowItWorks` renderer.
> 
> Wires new routes (`CAMPAIGN_DETAILS`, `CAMPAIGN_MECHANICS`) into
`RewardsNavigator`, updates `CampaignTile` to navigate to details and
show an **“Entered”** state based on participant status, and enhances
`CampaignsPreview` with loading skeleton/spinner and retryable error
banner.
> 
> Updates backend plumbing for opt-in: `rewards-data-service` treats
HTTP `409` on opt-in as “already opted in” by fetching participant
status, and `RewardsController.optInToCampaign` only emits
`campaignOptedIn` when transitioning from not-opted-in to opted-in
(reducing redundant refetches), with a small cache-write refactor for
campaigns. Adds corresponding tests and new i18n strings.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
11ee14a. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: sophieqgu <sophieqgu@gmail.com>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: 3 people

app/components/UI/Rewards/RewardsNavigator.test.tsx

@@ -69,6 +69,30 @@ jest.mock('./Views/RewardsSettingsView', () => {
   };
 });
 
+jest.mock('./Views/CampaignDetailsView', () => {
+  const ReactActual = jest.requireActual('react');
+  const { View, Text } = jest.requireActual('react-native');
+  return function MockCampaignDetailsView() {
+    return ReactActual.createElement(
+      View,
+      { testID: 'campaign-details-view' },
+      ReactActual.createElement(Text, null, 'Campaign Details View'),
+    );
+  };
+});
+
+jest.mock('./Views/CampaignMechanicsView', () => {
+  const ReactActual = jest.requireActual('react');
+  const { View, Text } = jest.requireActual('react-native');
+  return function MockCampaignMechanicsView() {
+    return ReactActual.createElement(
+      View,
+      { testID: 'campaign-mechanics-view' },
+      ReactActual.createElement(Text, null, 'Campaign Mechanics View'),
+    );
+  };
+});
+
 // Mock Skeleton component
 jest.mock(
   '../../../component-library/components-temp/Skeleton/Skeleton',
@@ -405,6 +429,19 @@ describe('RewardsNavigator', () => {
         expect(queryByTestId('rewards-dashboard-view')).toBeNull();
       });
     });
+
+    it('registers CAMPAIGN_DETAILS and CAMPAIGN_MECHANICS routes when subscription exists', async () => {
+      // Both views are registered inside the subscriptionId-guarded block,
+      // so they are present in the navigator only when the user is enrolled.
+      mockSelectRewardsSubscriptionId.mockReturnValue('test-subscription-id');
+
+      // Rendering should not throw even with the new screens registered
+      const { getByTestId } = renderWithNavigation(<RewardsNavigator />);
+
+      await waitFor(() => {
+        expect(getByTestId('rewards-dashboard-view')).toBeOnTheScreen();
+      });
+    });
   });
 
   // Note: Removed AuthErrorView tests as they don't match the actual implementation

app/components/UI/Rewards/RewardsNavigator.tsx

@@ -6,14 +6,15 @@ import RewardsDashboard from './Views/RewardsDashboard';
 import ReferralRewardsView from './Views/RewardsReferralView';
 import RewardsSettingsView from './Views/RewardsSettingsView';
 import CampaignsView from './Views/CampaignsView';
+import CampaignDetailsView from './Views/CampaignDetailsView';
+import CampaignMechanicsView from './Views/CampaignMechanicsView';
 import PreviousSeasonView from './Views/PreviousSeasonView';
 import { useSelector } from 'react-redux';
 import { selectRewardsSubscriptionId } from '../../../selectors/rewards';
 import { useCandidateSubscriptionId } from './hooks/useCandidateSubscriptionId';
 import { useNavigation } from '@react-navigation/native';
 import { useSeasonStatus } from './hooks/useSeasonStatus';
 import { useGeoRewardsMetadata } from './hooks/useGeoRewardsMetadata';
-import { useRewardCampaigns } from './hooks/useRewardCampaigns';
 const Stack = createStackNavigator();
 
 const RewardsNavigator: React.FC = () => {
@@ -29,9 +30,6 @@ const RewardsNavigator: React.FC = () => {
   // Fetch geo rewards metadata so optinAllowedForGeo is available across all rewards screens
   useGeoRewardsMetadata({});
 
-  // Fetch all campaigns
-  useRewardCampaigns();
-
   // Determine initial route - always start with onboarding intro step initially
   const getInitialRoute = () => {
     // If user has already opted in and has a valid subscription candidate ID, go to dashboard
@@ -85,6 +83,16 @@ const RewardsNavigator: React.FC = () => {
             component={PreviousSeasonView}
             options={{ headerShown: false }}
           />
+          <Stack.Screen
+            name={Routes.CAMPAIGN_DETAILS}
+            component={CampaignDetailsView}
+            options={{ headerShown: false }}
+          />
+          <Stack.Screen
+            name={Routes.CAMPAIGN_MECHANICS}
+            component={CampaignMechanicsView}
+            options={{ headerShown: false }}
+          />
         </>
       ) : null}
     </Stack.Navigator>