feat: [PE-551] Category detail screen (#5693)

## Short description This PR implements the new DS on CGN category detail screen. ## List of changes proposed in this pull request - Adds the new design elements on `CgnMerchantsListByCategory` > [!note] > Categories list and all merchants list has been refactored on #5668 ## How to test Navigate to CGN categories and check the detail of a single category. https://github.com/pagopa/io-app/assets/3959405/3f7e6d42-77e1-4d8d-9325-0917c55a25ad --------- Co-authored-by: Alessandro Izzo <[email protected]> Co-authored-by: Fabio Bombardi <[email protected]>
pagopa · May 7, 2024 · 789dbdc · 789dbdc
1 parent e92e650
commit 789dbdc
Show file tree

Hide file tree

Showing 7 changed files with 219 additions and 159 deletions.
diff --git a/ts/features/bonus/cgn/components/merchants/CgnMerchantCategoryItem.tsx b/ts/features/bonus/cgn/components/merchants/CgnMerchantCategoryItem.tsx
@@ -1,18 +1,15 @@
 import * as React from "react";
-import { ComponentProps } from "react";
-import LinearGradient from "react-native-linear-gradient";
 import { View, StyleSheet } from "react-native";
 import { widthPercentageToDP } from "react-native-responsive-screen";
 import customVariables from "../../../../../theme/variables";
 import TouchableDefaultOpacity from "../../../../../components/TouchableDefaultOpacity";
 import { IOStyles } from "../../../../../components/core/variables/IOStyles";
 import { H2 } from "../../../../../components/core/typography/H2";
-import { CATEGORY_GRADIENT_ANGLE } from "../../utils/filters";
 
 type Props = {
   onPress?: () => void;
   title: string;
-  colors: ComponentProps<typeof LinearGradient>["colors"];
+  colors: string;
   child?: React.ReactElement;
 };
 
@@ -31,12 +28,7 @@ const styles = StyleSheet.create({
 });
 
 const CgnMerchantCategoryItem = (props: Props) => (
-  <LinearGradient
-    colors={props.colors}
-    useAngle={true}
-    angle={CATEGORY_GRADIENT_ANGLE}
-    style={styles.body}
-  >
+  <View style={[styles.body, { backgroundColor: props.colors }]}>
     <TouchableDefaultOpacity
       accessibilityRole={"button"}
       style={[IOStyles.flex, styles.container]}
@@ -47,7 +39,7 @@ const CgnMerchantCategoryItem = (props: Props) => (
       </View>
       {props.child}
     </TouchableDefaultOpacity>
-  </LinearGradient>
+  </View>
 );
 
 export default CgnMerchantCategoryItem;
diff --git a/ts/features/bonus/cgn/components/merchants/CgnMerchantsListView.tsx b/ts/features/bonus/cgn/components/merchants/CgnMerchantsListView.tsx
@@ -1,9 +1,7 @@
 import * as React from "react";
-import { View, FlatList, ListRenderItemInfo, Platform } from "react-native";
-import { Badge, H6, ListItemNav } from "@pagopa/io-app-design-system";
+import { View } from "react-native";
+import { Badge, Divider, H6, ListItemNav } from "@pagopa/io-app-design-system";
 import { IOStyles } from "../../../../../components/core/variables/IOStyles";
-import ItemSeparatorComponent from "../../../../../components/ItemSeparatorComponent";
-import { EdgeBorderComponent } from "../../../../../components/screens/EdgeBorderComponent";
 import { OfflineMerchant } from "../../../../../../definitions/cgn/merchants/OfflineMerchant";
 import { OnlineMerchant } from "../../../../../../definitions/cgn/merchants/OnlineMerchant";
 import { Merchant } from "../../../../../../definitions/cgn/merchants/Merchant";
@@ -12,60 +10,36 @@ import I18n from "../../../../../i18n";
 type Props = {
   merchantList: ReadonlyArray<OfflineMerchant | OnlineMerchant>;
   onItemPress: (id: Merchant["id"]) => void;
-  onRefresh: () => void;
-  refreshing: boolean;
 };
 
 // Component that renders the list of merchants as a FlatList
-const CgnMerchantsListView: React.FunctionComponent<Props> = (props: Props) => {
-  const renderListItem = (
-    listItem: ListRenderItemInfo<OfflineMerchant | OnlineMerchant>
-  ) => (
-    <>
-      <ListItemNav
-        onPress={() => props.onItemPress(listItem.item.id)}
-        value={
-          listItem.item.newDiscounts ? (
-            <View style={IOStyles.rowSpaceBetween}>
-              <H6 style={{ flexGrow: 1, flexShrink: 1 }}>
-                {listItem.item.name}
-              </H6>
-              <View style={{ alignSelf: "center" }}>
-                <Badge
-                  variant="purple"
-                  text={I18n.t("bonus.cgn.merchantsList.news")}
-                />
+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>
               </View>
-            </View>
-          ) : (
-            listItem.item.name
-          )
-        }
-        accessibilityLabel={listItem.item.name}
-      />
-    </>
-  );
-
-  return (
-    <View style={[IOStyles.flex, IOStyles.horizontalContentPadding]}>
-      <FlatList
-        showsVerticalScrollIndicator={Platform.OS !== "ios"}
-        scrollEnabled={true}
-        data={props.merchantList}
-        ItemSeparatorComponent={() => (
-          <ItemSeparatorComponent noPadded={true} />
-        )}
-        refreshing={props.refreshing}
-        onRefresh={props.onRefresh}
-        renderItem={renderListItem}
-        keyExtractor={c => c.id}
-        keyboardShouldPersistTaps={"handled"}
-        ListFooterComponent={
-          props.merchantList.length > 0 ? <EdgeBorderComponent /> : null
-        }
-      />
-    </View>
-  );
-};
+            ) : (
+              merchant.name
+            )
+          }
+          accessibilityLabel={merchant.name}
+        />
+        {props.merchantList.length - 1 !== index && <Divider />}
+      </React.Fragment>
+    ))}
+  </View>
+);
 
 export default CgnMerchantsListView;
diff --git a/ts/features/bonus/cgn/navigation/navigator.tsx b/ts/features/bonus/cgn/navigation/navigator.tsx
@@ -108,11 +108,12 @@ export const CgnDetailsNavigator = () => (
     />
     <DetailStack.Screen
       name={CGN_ROUTES.DETAILS.MERCHANTS.CATEGORIES}
+      options={{ headerShown: true }}
       component={CgnMerchantsCategoriesSelectionScreen}
     />
     <DetailStack.Screen
       name={CGN_ROUTES.DETAILS.MERCHANTS.LIST_BY_CATEGORY}
-      options={{ headerShown: false }}
+      options={{ headerShown: true }}
       component={CgnMerchantsListByCategory}
     />
     <DetailStack.Screen