From e0dcee1143a950758d7238894aed42a6528032a4 Mon Sep 17 00:00:00 2001
From: Alessandro Izzo <alessandro.izzo998@gmail.com>
Date: Wed, 15 May 2024 10:04:44 +0200
Subject: [PATCH] fix: [PE-587,PE-589,PE-591] CGN revamp fixes (#5754)

## Short description
This PR fixes:
- Dividers between merchant categories;
- Wrong scrollbar into merchant details screen;
- Wrong badge spacing into list item nav;

## List of changes proposed in this pull request
- Added `<Divider />` component between categories list items;
- Removed the default chevron from the `ListItemNav` adding a custom one
with custom spacing

## How to test
Inside the CGN flows, open the categories list and merchant details
---
 .../merchants/CgnMerchantsListView.tsx        | 52 +++++++++----------
 .../CgnMerchantCategoriesListScreen.tsx       | 29 +++++++----
 .../merchants/CgnMerchantDetailScreen.tsx     |  2 +-
 3 files changed, 46 insertions(+), 37 deletions(-)

diff --git a/ts/features/bonus/cgn/components/merchants/CgnMerchantsListView.tsx b/ts/features/bonus/cgn/components/merchants/CgnMerchantsListView.tsx
index d5964dfd86d..437f788ec0d 100644
--- a/ts/features/bonus/cgn/components/merchants/CgnMerchantsListView.tsx
+++ b/ts/features/bonus/cgn/components/merchants/CgnMerchantsListView.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { View } from "react-native";
+import { FlatList, View } from "react-native";
 import { Badge, Divider, H6, ListItemNav } from "@pagopa/io-app-design-system";
 import { IOStyles } from "../../../../../components/core/variables/IOStyles";
 import { OfflineMerchant } from "../../../../../../definitions/cgn/merchants/OfflineMerchant";
@@ -14,32 +14,32 @@ type Props = {
 
 // Component that renders the list of merchants as a FlatList
 const CgnMerchantsListView: React.FunctionComponent<Props> = (props: Props) => (
-  <View style={[IOStyles.flex, IOStyles.horizontalContentPadding]}>
-    {props.merchantList.map((merchant, index) => (
-      <React.Fragment key={index}>
-        <ListItemNav
-          onPress={() => props.onItemPress(merchant.id)}
-          value={
-            merchant.newDiscounts ? (
-              <View style={IOStyles.rowSpaceBetween}>
-                <H6 style={{ flexGrow: 1, flexShrink: 1 }}>{merchant.name}</H6>
-                <View style={{ alignSelf: "center" }}>
-                  <Badge
-                    variant="purple"
-                    text={I18n.t("bonus.cgn.merchantsList.news")}
-                  />
-                </View>
+  <FlatList
+    style={IOStyles.horizontalContentPadding}
+    ItemSeparatorComponent={() => <Divider />}
+    scrollEnabled={false}
+    data={props.merchantList}
+    keyExtractor={item => item.id}
+    renderItem={({ item }) => (
+      <ListItemNav
+        onPress={() => props.onItemPress(item.id)}
+        value={
+          <View style={IOStyles.rowSpaceBetween}>
+            <H6 style={{ flexGrow: 1, flexShrink: 1 }}>{item.name}</H6>
+            {item.newDiscounts && (
+              <View style={[IOStyles.rowSpaceBetween, IOStyles.alignCenter]}>
+                <Badge
+                  variant="purple"
+                  text={I18n.t("bonus.cgn.merchantsList.news")}
+                />
               </View>
-            ) : (
-              merchant.name
-            )
-          }
-          accessibilityLabel={merchant.name}
-        />
-        {props.merchantList.length - 1 !== index && <Divider />}
-      </React.Fragment>
-    ))}
-  </View>
+            )}
+          </View>
+        }
+        accessibilityLabel={item.name}
+      />
+    )}
+  />
 );
 
 export default CgnMerchantsListView;
diff --git a/ts/features/bonus/cgn/screens/merchants/CgnMerchantCategoriesListScreen.tsx b/ts/features/bonus/cgn/screens/merchants/CgnMerchantCategoriesListScreen.tsx
index a9c3277baa2..ab933b895e0 100644
--- a/ts/features/bonus/cgn/screens/merchants/CgnMerchantCategoriesListScreen.tsx
+++ b/ts/features/bonus/cgn/screens/merchants/CgnMerchantCategoriesListScreen.tsx
@@ -2,6 +2,7 @@ import * as pot from "@pagopa/ts-commons/lib/pot";
 import {
   Badge,
   Body,
+  Divider,
   H6,
   IOStyles,
   IOToast,
@@ -24,12 +25,16 @@ import { cgnCategoriesListSelector } from "../../store/reducers/categories";
 import { cgnCategories } from "../../store/actions/categories";
 import CGN_ROUTES from "../../navigation/routes";
 import { useIOBottomSheetAutoresizableModal } from "../../../../../utils/hooks/bottomSheet";
+import { isDesignSystemEnabledSelector } from "../../../../../store/reducers/persistedPreferences";
 
 export const CgnMerchantCategoriesListScreen = () => {
   const insets = useSafeAreaInsets();
   const isFirstRender = React.useRef<boolean>(true);
   const dispatch = useIODispatch();
   const potCategories = useIOSelector(cgnCategoriesListSelector);
+
+  const isDesignSystemEnabled = useIOSelector(isDesignSystemEnabledSelector);
+
   const navigation =
     useNavigation<
       IOStackNavigationProp<CgnDetailsParamsList, "CGN_MERCHANTS_CATEGORIES">
@@ -97,6 +102,7 @@ export const CgnMerchantCategoriesListScreen = () => {
                 }
               );
             }}
+            iconColor="grey-300"
             icon={s.icon}
           />
         )
@@ -128,17 +134,20 @@ export const CgnMerchantCategoriesListScreen = () => {
             onRefresh={loadCategories}
           />
         }
+        ItemSeparatorComponent={() => <Divider />}
         ListFooterComponent={
-          <ListItemAction
-            onPress={present}
-            accessibilityLabel={I18n.t(
-              "bonus.cgn.merchantsList.categoriesList.bottomSheet.cta"
-            )}
-            label={I18n.t(
-              "bonus.cgn.merchantsList.categoriesList.bottomSheet.cta"
-            )}
-            variant="primary"
-          />
+          isDesignSystemEnabled ? (
+            <ListItemAction
+              onPress={present}
+              accessibilityLabel={I18n.t(
+                "bonus.cgn.merchantsList.categoriesList.bottomSheet.cta"
+              )}
+              label={I18n.t(
+                "bonus.cgn.merchantsList.categoriesList.bottomSheet.cta"
+              )}
+              variant="primary"
+            />
+          ) : null
         }
       />
     </>
diff --git a/ts/features/bonus/cgn/screens/merchants/CgnMerchantDetailScreen.tsx b/ts/features/bonus/cgn/screens/merchants/CgnMerchantDetailScreen.tsx
index 68d9131f411..c077f6be958 100644
--- a/ts/features/bonus/cgn/screens/merchants/CgnMerchantDetailScreen.tsx
+++ b/ts/features/bonus/cgn/screens/merchants/CgnMerchantDetailScreen.tsx
@@ -188,9 +188,9 @@ const CgnMerchantDetailScreen = () => {
             style={{ flexGrow: 1 }}
             onScroll={scrollHandler}
             scrollEventThrottle={8}
+            scrollIndicatorInsets={{ right: 1 }}
             snapToOffsets={[0]}
             snapToEnd={false}
-            scrollIndicatorInsets={{ right: 1 }}
             contentContainerStyle={{
               flexGrow: 1,
               paddingBottom: safeBottomAreaHeight