From 84a1f995cb9df4435a217890b2715ae576054d6c Mon Sep 17 00:00:00 2001
From: Emanuele Dall'Ara <71103219+LeleDallas@users.noreply.github.com>
Date: Fri, 14 Feb 2025 14:50:08 +0100
Subject: [PATCH] fix: [PE-959,PE-960,PE-961,PE-962] Remove transparent header
 in `CGN` (#6709)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Short description
This pull request enhances the accessibility of the header in the `CGN`.
The implementation follows the same approach used in PR
https://github.com/pagopa/io-app/pull/6675


## List of changes proposed in this pull request
- Replace the `transparent` prop with `backgroundColor`
- Removed the redundant `discountColor` variable and used the new
`backgroundColor` variable directly in the component

## How to test
- Using a real device 📱, go in each of these screens:
`CGN_CATEGORIES`/`CGN_MERCHANTS_LIST_BY_CATEGORY`/`CGN_MERCHANTS_DETAIL`/`CGN_MERCHANTS_DISCOUNT_SCREEN`
- Turn on the TalkBack accessibility tool
- Ensure the header action are now reachable

---------

Co-authored-by: Alessandro <alessandro.izzo998@gmail.com>
---
 .../cgn/screens/discount/CgnDiscountDetailScreen.tsx | 12 ++++++------
 .../screens/merchants/CgnMerchantsListByCategory.tsx |  6 ++----
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/ts/features/bonus/cgn/screens/discount/CgnDiscountDetailScreen.tsx b/ts/features/bonus/cgn/screens/discount/CgnDiscountDetailScreen.tsx
index 66df1ebd725..18777c4cc17 100644
--- a/ts/features/bonus/cgn/screens/discount/CgnDiscountDetailScreen.tsx
+++ b/ts/features/bonus/cgn/screens/discount/CgnDiscountDetailScreen.tsx
@@ -191,13 +191,17 @@ const CgnDiscountDetailScreen = () => {
     }
   };
 
+  const { backgroundColor } = discountDetails?.isNew
+    ? styles.backgroundNewItem
+    : styles.backgroundDefault;
+
   useHeaderSecondLevel({
     title: discountDetails?.name || "",
     scrollValues: {
       contentOffsetY: translationY,
       triggerOffset: titleHeight
     },
-    transparent: true,
+    backgroundColor,
     canGoBack: true,
     supportRequest: true
   });
@@ -249,10 +253,6 @@ const CgnDiscountDetailScreen = () => {
     );
   };
 
-  const discountColor = discountDetails?.isNew
-    ? styles.backgroundNewItem
-    : styles.backgroundDefault;
-
   if (discountDetails && merchantDetails) {
     return (
       <>
@@ -272,7 +272,7 @@ const CgnDiscountDetailScreen = () => {
               style={{
                 position: "absolute",
                 height: 1000,
-                backgroundColor: discountColor.backgroundColor,
+                backgroundColor,
                 top: -1000,
                 right: 0,
                 left: 0
diff --git a/ts/features/bonus/cgn/screens/merchants/CgnMerchantsListByCategory.tsx b/ts/features/bonus/cgn/screens/merchants/CgnMerchantsListByCategory.tsx
index 34a0239060b..89c48d27011 100644
--- a/ts/features/bonus/cgn/screens/merchants/CgnMerchantsListByCategory.tsx
+++ b/ts/features/bonus/cgn/screens/merchants/CgnMerchantsListByCategory.tsx
@@ -152,7 +152,7 @@ const CgnMerchantsListByCategory = () => {
       contentOffsetY: translationY,
       triggerOffset: titleHeight
     },
-    transparent: true,
+    backgroundColor: categorySpecs?.colors,
     supportRequest: true,
     secondAction: {
       icon: "search",
@@ -195,14 +195,12 @@ const CgnMerchantsListByCategory = () => {
           style={[
             IOStyles.horizontalContentPadding,
             {
-              paddingTop: insets.top,
               backgroundColor: categorySpecs.colors,
               paddingBottom: 24
             }
           ]}
         >
-          <VSpacer size={48} />
-          <VSpacer size={32} />
+          <VSpacer size={24} />
           <View style={[IOStyles.row, { alignItems: "center" }]}>
             <View
               style={{