refactor: [IOBP-1095] Replace legacy headers for IDPay screens (#6583)

## Short description This pull request focuses on refactoring multiple screens in the `IDPay` feature to use the `useHeaderSecondLevel` hook instead of the `TopScreenComponent` and `BaseScreenComponent` components. Additionally, it includes a minor update to a test file ## List of changes proposed in this pull request - Replaced `TopScreenComponent` with `useHeaderSecondLevel` hook - Replaced `BaseScreenComponent` with `useHeaderSecondLevel` hook ## How to test Ensure that all IDPay headers are fully aligned with the established design requirements --------- Co-authored-by: Alessandro <[email protected]>
pagopa · Jan 14, 2025 · b03d94e · b03d94e
1 parent 3bd912a
commit b03d94e
Show file tree

Hide file tree

Showing 17 changed files with 408 additions and 399 deletions.
diff --git a/ts/features/idpay/code/screens/IdPayCodeDisplayScreen.tsx b/ts/features/idpay/code/screens/IdPayCodeDisplayScreen.tsx
@@ -14,7 +14,7 @@ import * as React from "react";
 import { StyleSheet, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay";
-import TopScreenComponent from "../../../../components/screens/TopScreenComponent";
+import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel";
 import I18n from "../../../../i18n";
 import {
   AppParamsList,
@@ -76,35 +76,40 @@ const IdPayCodeDisplayScreen = () => {
     ? I18n.t("global.buttons.continue")
     : I18n.t("global.buttons.close");
 
+  useHeaderSecondLevel({
+    title: "",
+    canGoBack: true,
+    contextualHelp: emptyContextualHelp,
+    supportRequest: true
+  });
+
   return (
     <>
       <LoadingSpinnerOverlay isLoading={isGeneratingCode} loadingOpacity={1}>
-        <TopScreenComponent contextualHelp={emptyContextualHelp}>
-          <ContentWrapper>
-            <H2>{I18n.t("idpay.code.onboarding.header")}</H2>
-            <VSpacer size={16} />
-            <Body color="grey-700" weight="Regular">
-              {I18n.t("idpay.code.onboarding.body1")}
-            </Body>
-            <Body color="grey-700" weight="Semibold">
-              {I18n.t("idpay.code.onboarding.bodyBold")}
-            </Body>
-            <Body weight="Semibold" asLink onPress={presentCieBottomSheet}>
-              {I18n.t("idpay.code.onboarding.bodyCta")}
-            </Body>
-            <VSpacer size={24} />
-            <CodeDisplayComponent code={idPayCode} />
-            <VSpacer size={24} />
-            <Banner
-              color="neutral"
-              pictogramName="security"
-              size="big"
-              viewRef={bannerRef}
-              title={I18n.t("idpay.code.onboarding.banner.header")}
-              content={I18n.t("idpay.code.onboarding.banner.body")}
-            />
-          </ContentWrapper>
-        </TopScreenComponent>
+        <ContentWrapper>
+          <H2>{I18n.t("idpay.code.onboarding.header")}</H2>
+          <VSpacer size={16} />
+          <Body color="grey-700" weight="Regular">
+            {I18n.t("idpay.code.onboarding.body1")}
+          </Body>
+          <Body color="grey-700" weight="Semibold">
+            {I18n.t("idpay.code.onboarding.bodyBold")}
+          </Body>
+          <Body weight="Semibold" asLink onPress={presentCieBottomSheet}>
+            {I18n.t("idpay.code.onboarding.bodyCta")}
+          </Body>
+          <VSpacer size={24} />
+          <CodeDisplayComponent code={idPayCode} />
+          <VSpacer size={24} />
+          <Banner
+            color="neutral"
+            pictogramName="security"
+            size="big"
+            viewRef={bannerRef}
+            title={I18n.t("idpay.code.onboarding.banner.header")}
+            content={I18n.t("idpay.code.onboarding.banner.body")}
+          />
+        </ContentWrapper>
         <SafeAreaView style={IOStyles.horizontalContentPadding}>
           <ButtonSolid
             accessibilityLabel={buttonLabel}

diff --git a/ts/features/idpay/code/screens/IdPayCodeRenewScreen.tsx b/ts/features/idpay/code/screens/IdPayCodeRenewScreen.tsx
@@ -8,7 +8,7 @@ import {
 import { useNavigation } from "@react-navigation/native";
 import * as React from "react";
 import { Alert, View } from "react-native";
-import TopScreenComponent from "../../../../components/screens/TopScreenComponent";
+import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel";
 import I18n from "../../../../i18n";
 import {
   AppParamsList,
@@ -55,31 +55,31 @@ export const IdPayCodeRenewScreen = () => {
     );
   };
 
+  useHeaderSecondLevel({
+    title: "",
+    canGoBack: true,
+    contextualHelp: emptyContextualHelp,
+    supportRequest: true
+  });
+
   return (
     <>
-      <TopScreenComponent
-        customGoBack={false}
-        dark={false}
-        goBack={true}
-        contextualHelp={emptyContextualHelp}
-      >
-        <View style={IOStyles.horizontalContentPadding}>
-          <H2>{I18n.t("idpay.code.renew.screen.header")}</H2>
-          <VSpacer size={16} />
-          <Body>{I18n.t("idpay.code.renew.screen.body")}</Body>
-          <Body weight="Semibold" asLink onPress={presentCieBottomSheet}>
-            {I18n.t("idpay.code.renew.screen.link")}
-          </Body>
-          <VSpacer size={16} />
-          <ListItemAction
-            label={I18n.t("idpay.code.renew.screen.generateCTA")}
-            onPress={() => customAlert(handleConfirm)}
-            icon="change"
-            accessibilityLabel={I18n.t("idpay.code.renew.screen.generateCTA")}
-            variant="danger"
-          />
-        </View>
-      </TopScreenComponent>
+      <View style={IOStyles.horizontalContentPadding}>
+        <H2>{I18n.t("idpay.code.renew.screen.header")}</H2>
+        <VSpacer size={16} />
+        <Body>{I18n.t("idpay.code.renew.screen.body")}</Body>
+        <Body weight="Semibold" asLink onPress={presentCieBottomSheet}>
+          {I18n.t("idpay.code.renew.screen.link")}
+        </Body>
+        <VSpacer size={16} />
+        <ListItemAction
+          label={I18n.t("idpay.code.renew.screen.generateCTA")}
+          onPress={() => customAlert(handleConfirm)}
+          icon="change"
+          accessibilityLabel={I18n.t("idpay.code.renew.screen.generateCTA")}
+          variant="danger"
+        />
+      </View>
       {bottomSheet}
     </>
   );

diff --git a/ts/features/idpay/code/screens/__tests__/IdPayCodeDisplayScreen.test.tsx b/ts/features/idpay/code/screens/__tests__/IdPayCodeDisplayScreen.test.tsx
@@ -25,7 +25,8 @@ jest.mock("@react-navigation/native", () => {
       addListener: () => jest.fn(),
       removeListener: () => jest.fn(),
       getParent: () => undefined,
-      pop: mockPop
+      pop: mockPop,
+      setOptions: jest.fn
     })
   };
 });

diff --git a/ts/features/idpay/configuration/screens/IbanConfigurationLandingScreen.tsx b/ts/features/idpay/configuration/screens/IbanConfigurationLandingScreen.tsx
@@ -10,7 +10,7 @@ import {
 import React from "react";
 import { SafeAreaView, StyleSheet, View } from "react-native";
 import { IOStyles } from "../../../../components/core/variables/IOStyles";
-import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent";
+import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel";
 import I18n from "../../../../i18n";
 import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
 import { useIOBottomSheetAutoresizableModal } from "../../../../utils/hooks/bottomSheet";
@@ -45,12 +45,15 @@ export const IbanConfigurationLanding = () => {
     130
   );
 
+  useHeaderSecondLevel({
+    title: I18n.t("idpay.configuration.headerTitle"),
+    goBack: customGoBack,
+    contextualHelp: emptyContextualHelp,
+    supportRequest: true
+  });
+
   return (
-    <BaseScreenComponent
-      goBack={customGoBack}
-      headerTitle={I18n.t("idpay.configuration.headerTitle")}
-      contextualHelp={emptyContextualHelp}
-    >
+    <>
       <View
         style={[
           IOStyles.flex,
@@ -84,7 +87,7 @@ export const IbanConfigurationLanding = () => {
         />
       </SafeAreaView>
       {bottomSheet}
-    </BaseScreenComponent>
+    </>
   );
 };
 

diff --git a/ts/features/idpay/configuration/screens/IbanEnrollmentScreen.tsx b/ts/features/idpay/configuration/screens/IbanEnrollmentScreen.tsx
@@ -11,8 +11,8 @@ import React from "react";
 import { SafeAreaView, ScrollView, StyleSheet } from "react-native";
 import { IbanDTO } from "../../../../../definitions/idpay/IbanDTO";
 import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay";
-import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent";
 import ListItemComponent from "../../../../components/screens/ListItemComponent";
+import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel";
 import I18n from "../../../../i18n";
 import customVariables from "../../../../theme/variables";
 import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
@@ -155,32 +155,33 @@ export const IbanEnrollmentScreen = () => {
       );
     });
 
+  useHeaderSecondLevel({
+    title: I18n.t(
+      isIbanOnly
+        ? "idpay.configuration.iban.title"
+        : "idpay.configuration.headerTitle"
+    ),
+    goBack: handleBackPress,
+    contextualHelp: emptyContextualHelp,
+    supportRequest: true
+  });
+
   return (
-    <BaseScreenComponent
-      goBack={handleBackPress}
-      headerTitle={I18n.t(
-        isIbanOnly
-          ? "idpay.configuration.iban.title"
-          : "idpay.configuration.headerTitle"
-      )}
-      contextualHelp={emptyContextualHelp}
-    >
-      <LoadingSpinnerOverlay isLoading={isLoading} loadingOpacity={1}>
-        <ScrollView style={styles.container}>
-          <H2>{I18n.t("idpay.configuration.iban.enrollment.header")}</H2>
-          <VSpacer size={8} />
-          <Body>{I18n.t("idpay.configuration.iban.enrollment.subTitle")}</Body>
-          <VSpacer size={24} />
-          {renderIbanList()}
-          <VSpacer size={16} />
-          <FeatureInfo
-            iconName="profile"
-            body={I18n.t("idpay.configuration.iban.enrollment.footer")}
-          />
-        </ScrollView>
-        <SafeAreaView>{renderFooter()}</SafeAreaView>
-      </LoadingSpinnerOverlay>
-    </BaseScreenComponent>
+    <LoadingSpinnerOverlay isLoading={isLoading} loadingOpacity={1}>
+      <ScrollView style={styles.container}>
+        <H2>{I18n.t("idpay.configuration.iban.enrollment.header")}</H2>
+        <VSpacer size={8} />
+        <Body>{I18n.t("idpay.configuration.iban.enrollment.subTitle")}</Body>
+        <VSpacer size={24} />
+        {renderIbanList()}
+        <VSpacer size={16} />
+        <FeatureInfo
+          iconName="profile"
+          body={I18n.t("idpay.configuration.iban.enrollment.footer")}
+        />
+      </ScrollView>
+      <SafeAreaView>{renderFooter()}</SafeAreaView>
+    </LoadingSpinnerOverlay>
   );
 };
 

diff --git a/ts/features/idpay/configuration/screens/IbanOnboardingScreen.tsx b/ts/features/idpay/configuration/screens/IbanOnboardingScreen.tsx
@@ -1,10 +1,10 @@
 import {
   Body,
+  BodySmall,
   FooterActions,
   H2,
   HSpacer,
   Icon,
-  BodySmall,
   VSpacer
 } from "@pagopa/io-app-design-system";
 import * as O from "fp-ts/lib/Option";
@@ -14,7 +14,7 @@ import { ScrollView, View } from "react-native";
 import { Iban } from "../../../../../definitions/backend/Iban";
 import { LabelledItem } from "../../../../components/LabelledItem";
 import { IOStyles } from "../../../../components/core/variables/IOStyles";
-import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent";
+import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel";
 import I18n from "../../../../i18n";
 import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
 import { isLoadingSelector } from "../../common/machine/selectors";
@@ -23,7 +23,6 @@ import { IdPayConfigurationMachineContext } from "../machine/provider";
 export const IbanOnboardingScreen = () => {
   const machine = IdPayConfigurationMachineContext.useActorRef();
 
-  const customGoBack = () => machine.send({ type: "back" });
   const [iban, setIban] = React.useState<{
     text: string;
     value: O.Option<string>;
@@ -35,12 +34,15 @@ export const IbanOnboardingScreen = () => {
 
   const isInputValid = O.isSome(iban.value) && ibanName.length > 0;
 
+  useHeaderSecondLevel({
+    title: I18n.t("idpay.configuration.headerTitle"),
+    canGoBack: true,
+    contextualHelp: emptyContextualHelp,
+    supportRequest: true
+  });
+
   return (
-    <BaseScreenComponent
-      goBack={customGoBack}
-      headerTitle={I18n.t("idpay.configuration.headerTitle")}
-      contextualHelp={emptyContextualHelp}
-    >
+    <>
       <ScrollView style={[IOStyles.flex, IOStyles.horizontalContentPadding]}>
         <VSpacer size={16} />
         <H2>{I18n.t("idpay.configuration.iban.onboarding.header")}</H2>
@@ -111,6 +113,6 @@ export const IbanOnboardingScreen = () => {
           }
         }}
       />
-    </BaseScreenComponent>
+    </>
   );
 };