chore: [PE-562] Refactor bonus information screen to use new DS compo…

…nents (#5617)

> [!note]
> This PR Depends on pagopa/io-services-metadata#771 and
pagopa/io-dev-api-server#357

## Short description
This PR refactors the CGN Bonus information screen to proper use new DS
components and UI.

## List of changes proposed in this pull request
- Changed CGN navigator to use navigation header
- Refactor on BonusInformationScreen to use DS components
- Extended RNavScreenWithLargeHeader to include a possible Hero cover
image

## How to test
Using the dev-server on code from pagopa/io-dev-api-server#357 navigate
to CGN initial activation screen to check the new UI.

Here the
[Figma](https://www.figma.com/file/yOoBGDr1MJpa0LY5lDUFSd/IOapp_CartaGiovaniNazionale?type=design&node-id=4403-98761&mode=design&t=uFMW3F4RlE3uLlU4-4)
for reference.

| Experimental DS ✅  | Experimental DS ❌  |
|---|---|
| <img
src="https://github.com/pagopa/io-app/assets/3959405/9212ed58-dc30-450d-b478-f870633b207e"
height="700"/> | <img
src="https://github.com/pagopa/io-app/assets/3959405/adc1cbcd-db68-4914-927b-21c468847f57"
height="700"/> |

---------

Co-authored-by: Alessandro Izzo <[email protected]>

package.json

@@ -3,7 +3,7 @@
   "version": "2.59.0-rc.2",
   "io_backend_api": "https://raw.githubusercontent.com/pagopa/io-backend/v13.32.1-RELEASE/api_backend.yaml",
   "io_public_api": "https://raw.githubusercontent.com/pagopa/io-backend/v13.32.1-RELEASE/api_public.yaml",
-  "io_content_specs": "https://raw.githubusercontent.com/pagopa/io-services-metadata/1.0.30/definitions.yml",
+  "io_content_specs": "https://raw.githubusercontent.com/pagopa/io-services-metadata/1.0.31/definitions.yml",
   "io_cgn_specs": "https://raw.githubusercontent.com/pagopa/io-backend/v13.32.1-RELEASE/api_cgn.yaml",
   "io_cgn_merchants_specs": "https://raw.githubusercontent.com/pagopa/io-backend/v13.29.2-RELEASE/api_cgn_operator_search.yaml",
   "api_fci": "https://raw.githubusercontent.com/pagopa/io-backend/v13.32.1-RELEASE/api_io_sign.yaml",

ts/features/bonus/cgn/navigation/navigator.tsx

@@ -50,38 +50,45 @@ const ActivationStack = createStackNavigator<CgnActivationParamsList>();
 export const CgnActivationNavigator = () => (
   <ActivationStack.Navigator
     initialRouteName={CGN_ROUTES.ACTIVATION.INFORMATION_TOS}
-    screenOptions={{ gestureEnabled: isGestureEnabled, headerShown: false }}
+    screenOptions={{ gestureEnabled: isGestureEnabled, headerMode: "screen" }}
   >
     <ActivationStack.Screen
       name={CGN_ROUTES.ACTIVATION.INFORMATION_TOS}
       component={CgnInformationScreen}
     />
     <ActivationStack.Screen
       name={CGN_ROUTES.ACTIVATION.LOADING}
+      options={{ headerShown: false }}
       component={CgnActivationLoadingScreen}
     />
     <ActivationStack.Screen
       name={CGN_ROUTES.ACTIVATION.PENDING}
+      options={{ headerShown: false }}
       component={CgnActivationPendingScreen}
     />
     <ActivationStack.Screen
       name={CGN_ROUTES.ACTIVATION.EXISTS}
+      options={{ headerShown: false }}
       component={CgnAlreadyActiveScreen}
     />
     <ActivationStack.Screen
       name={CGN_ROUTES.ACTIVATION.TIMEOUT}
+      options={{ headerShown: false }}
       component={CgnActivationTimeoutScreen}
     />
     <ActivationStack.Screen
       name={CGN_ROUTES.ACTIVATION.INELIGIBLE}
+      options={{ headerShown: false }}
       component={CgnActivationIneligibleScreen}
     />
     <ActivationStack.Screen
       name={CGN_ROUTES.ACTIVATION.COMPLETED}
+      options={{ headerShown: false }}
       component={CgnActivationCompletedScreen}
     />
     <ActivationStack.Screen
       name={CGN_ROUTES.ACTIVATION.CTA_START_CGN}
+      options={{ headerShown: false }}
       component={CgnCTAStartActivationScreen}
     />
   </ActivationStack.Navigator>