pagopa · LeleDallas · Jan 15, 2025 · Jan 3, 2025 · Jan 3, 2025 · Jan 3, 2025
@@ -4,14 +4,14 @@ import {
   FooterActions,
   FooterActionsInline,
   H2,
+  RadioGroup,
   VSpacer
 } from "@pagopa/io-app-design-system";
 import { RouteProp, useFocusEffect, useRoute } from "@react-navigation/native";
 import React from "react";
 import { SafeAreaView, ScrollView, StyleSheet } from "react-native";
 import { IbanDTO } from "../../../../../definitions/idpay/IbanDTO";
 import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay";
-import ListItemComponent from "../../../../components/screens/ListItemComponent";
 import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel";
 import I18n from "../../../../i18n";
 import customVariables from "../../../../theme/variables";
@@ -136,24 +136,16 @@ export const IbanEnrollmentScreen = () => {
     );
   };
 
-  const renderIbanList = () =>
-    ibanList.map(iban => {
-      const isSelected = iban.iban === selectedIban?.iban;
-
-      return (
-        <ListItemComponent
-          key={iban.iban}
-          title={iban.description}
-          subTitle={iban.iban}
-          iconName={isSelected ? "legRadioOn" : "legRadioOff"}
-          smallIconSize={true}
-          accessible={true}
-          accessibilityRole={"radiogroup"}
-          accessibilityState={{ checked: true }}
-          onPress={() => !isSelected && handleSelectIban(iban)}
-        />
-      );
-    });
+  useHeaderSecondLevel({
+    title: I18n.t(
+      isIbanOnly
+        ? "idpay.configuration.iban.title"
+        : "idpay.configuration.headerTitle"
+    ),
+    goBack: handleBackPress,
+    contextualHelp: emptyContextualHelp,
+    supportRequest: true
+  });
 
   useHeaderSecondLevel({
     title: I18n.t(
@@ -173,7 +165,18 @@ export const IbanEnrollmentScreen = () => {
         <VSpacer size={8} />
         <Body>{I18n.t("idpay.configuration.iban.enrollment.subTitle")}</Body>
         <VSpacer size={24} />
-        {renderIbanList()}
+        <RadioGroup<IbanDTO>
+          type="radioListItem"
+          key="check_income"
+          items={Array.from(ibanList, el => ({
+            ...el,
+            id: el,
+            value: el.iban,
+            description: el.description
+          }))}
+          selectedItem={selectedIban}
+          onPress={iban => handleSelectIban(iban)}
+        />
         <VSpacer size={16} />
         <FeatureInfo
           iconName="profile"

@@ -2,6 +2,7 @@ import {
   Body,
   FooterActionsInline,
   H2,
+  ListItemSwitch,
   VSpacer
 } from "@pagopa/io-app-design-system";
 import React from "react";
@@ -10,7 +11,6 @@ import { ScrollView } from "react-native-gesture-handler";
 import { SelfDeclarationBoolDTO } from "../../../../../definitions/idpay/SelfDeclarationBoolDTO";
 import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay";
 import { IOStyles } from "../../../../components/core/variables/IOStyles";
-import ListItemComponent from "../../../../components/screens/ListItemComponent";
 import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel";
 import I18n from "../../../../i18n";
 import { dpr28Dec2000Url } from "../../../../urls";
@@ -71,18 +71,12 @@ const InitiativeSelfDeclarationsScreen = () => {
             {I18n.t("idpay.onboarding.boolPrerequisites.link")}
           </Body>
           <VSpacer size={24} />
-          {selfCriteriaBool.map((criteria, index) => (
+          {selfCriteriaBool.map(criteria => (
             <View key={criteria.code}>
-              <ListItemComponent
-                key={index}
-                title={criteria.description}
-                switchValue={getSelfCriteriaBoolAnswer(criteria)}
-                accessibilityRole={"switch"}
-                accessibilityState={{
-                  checked: getSelfCriteriaBoolAnswer(criteria)
-                }}
-                isLongPressEnabled={true}
-                onSwitchValueChanged={toggleCriteria(criteria)}
+              <ListItemSwitch
+                label={criteria.description}
+                onSwitchValueChange={toggleCriteria(criteria)}
+                value={getSelfCriteriaBoolAnswer(criteria)}
               />
               <VSpacer size={16} />
             </View>

@@ -4,14 +4,12 @@ import {
   FooterActionsInline,
   H1,
   H6,
-  IOColors,
   IOStyles,
-  Icon,
-  PressableListItemBase,
+  RadioGroup,
   VSpacer
 } from "@pagopa/io-app-design-system";
 import { default as React } from "react";
-import { ScrollView, StyleSheet, View } from "react-native";
+import { ScrollView, View } from "react-native";
 import PagerView from "react-native-pager-view";
 import { SelfDeclarationMultiDTO } from "../../../../../definitions/idpay/SelfDeclarationMultiDTO";
 import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel";
@@ -22,12 +20,6 @@ import {
   selectCurrentMultiSelfDeclarationPage
 } from "../machine/selectors";
 
-type ListItemProps = {
-  text: string;
-  checked: boolean;
-  onPress: () => void;
-};
-
 const MultiValuePrerequisitesScreen = () => {
   const pagerRef = React.useRef<PagerView>(null);
 
@@ -69,17 +61,17 @@ const MultiValuePrerequisiteItemScreenContent = ({
 }: MultiValuePrerequisiteItemScreenContentProps) => {
   const machine = IdPayOnboardingMachineContext.useActorRef();
 
-  const [selectedIndex, setSelectedIndex] = React.useState<number | undefined>(
+  const [selectedValue, setSelectedValue] = React.useState<string | undefined>(
     undefined
   );
 
   const handleContinuePress = () => {
-    if (selectedIndex !== undefined) {
+    if (selectedValue !== undefined) {
       machine.send({
         type: "select-multi-consent",
         data: {
           _type: selfDeclaration._type,
-          value: selfDeclaration.value[selectedIndex],
+          value: selectedValue,
           code: selfDeclaration.code
         }
       });
@@ -107,14 +99,15 @@ const MultiValuePrerequisiteItemScreenContent = ({
         <VSpacer size={24} />
         <H6>{selfDeclaration.description}</H6>
         <ScrollView>
-          {selfDeclaration.value.map((answer, index) => (
-            <CustomListItem
-              key={index}
-              text={answer}
-              checked={index === selectedIndex}
-              onPress={() => setSelectedIndex(index)}
-            />
-          ))}
+          <RadioGroup<string>
+            type="radioListItem"
+            items={selfDeclaration.value.map((answer, index) => ({
+              id: index.toString(),
+              value: answer
+            }))}
+            selectedItem={selectedValue}
+            onPress={value => setSelectedValue(value)}
+          />
         </ScrollView>
       </View>
       <FooterActionsInline
@@ -125,39 +118,12 @@ const MultiValuePrerequisiteItemScreenContent = ({
         }}
         endAction={{
           onPress: handleContinuePress,
-          disabled: selectedIndex === undefined,
+          disabled: selectedValue === undefined,
           label: I18n.t("global.buttons.continue")
         }}
       />
     </>
   );
 };
 
-const CustomListItem = ({ text, onPress, checked }: ListItemProps) => (
-  <View style={styles.outerListItem}>
-    <PressableListItemBase onPress={onPress}>
-      <View
-        style={[IOStyles.flex, IOStyles.rowSpaceBetween, styles.innerListItem]}
-      >
-        <H6 color={"bluegreyDark"}>{text}</H6>
-        <Icon
-          name={checked ? "legRadioOn" : "legRadioOff"}
-          size={24}
-          color={checked ? "blue" : "bluegrey"}
-        />
-      </View>
-    </PressableListItemBase>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  outerListItem: {
-    borderBottomWidth: 1,
-    borderBottomColor: IOColors["grey-100"]
-  },
-  innerListItem: {
-    paddingVertical: 4
-  }
-});
-
 export default MultiValuePrerequisitesScreen;