pagopa · LeleDallas · Jan 3, 2025 · Jan 3, 2025 · Jan 3, 2025 · Jan 3, 2025
@@ -8,7 +8,7 @@ const Stack = createStackNavigator<IdPayBarcodeParamsList>();
 export const IdPayBarcodeNavigator = () => (
   <Stack.Navigator
     initialRouteName={IdPayBarcodeRoutes.IDPAY_BARCODE_RESULT}
-    screenOptions={{ gestureEnabled: true, headerShown: false }}
+    screenOptions={{ gestureEnabled: true }}
   >
     <Stack.Screen
       name={IdPayBarcodeRoutes.IDPAY_BARCODE_RESULT}

@@ -1,13 +1,10 @@
 import {
   Body,
-  GradientScrollView,
-  H2,
+  BodySmall,
   H3,
-  HeaderSecondLevel,
   IOColors,
   IOStyles,
   IOVisualCostants,
-  BodySmall,
   VSpacer
 } from "@pagopa/io-app-design-system";
 import * as pot from "@pagopa/ts-commons/lib/pot";
@@ -19,17 +16,18 @@ import { SafeAreaView, StyleSheet, View } from "react-native";
 import Barcode from "react-native-barcode-builder";
 import { TransactionBarCodeResponse } from "../../../../../definitions/idpay/TransactionBarCodeResponse";
 import { OperationResultScreenContent } from "../../../../components/screens/OperationResultScreenContent";
+import { IOScrollViewWithLargeHeader } from "../../../../components/ui/IOScrollViewWithLargeHeader";
 import { LoadingIndicator } from "../../../../components/ui/LoadingIndicator";
 import I18n from "../../../../i18n";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
 import { useIODispatch, useIOSelector } from "../../../../store/hooks";
 import { formatNumberCurrencyCents } from "../../common/utils/strings";
 import { IDPayDetailsRoutes } from "../../details/navigation";
 import { IdPayBarcodeExpireProgressBar } from "../components/BarcodeExpirationProgressBar";
 import { IdPayBarcodeParamsList } from "../navigation/params";
 import { idPayBarcodeByInitiativeIdSelector } from "../store";
-import { calculateIdPayBarcodeSecondsToExpire } from "../utils";
 import { idPayGenerateBarcode } from "../store/actions";
-import { useIONavigation } from "../../../../navigation/params/AppParamsList";
+import { calculateIdPayBarcodeSecondsToExpire } from "../utils";
 
 // -------------------- types --------------------
 
@@ -110,61 +108,50 @@ const SuccessContent = ({ goBack, barcode }: SuccessContentProps) => {
     return <BarcodeExpiredContent initiativeId={barcode.initiativeId} />;
   }
   return (
-    <>
-      <HeaderSecondLevel
-        backAccessibilityLabel={I18n.t("global.buttons.back")}
-        title=""
-        type="singleAction"
-        firstAction={{
-          icon: "closeLarge",
-          accessibilityLabel: I18n.t("global.buttons.close"),
-          onPress: goBack
-        }}
-        goBack={goBack}
-      />
-      <GradientScrollView
-        primaryActionProps={{
+    <IOScrollViewWithLargeHeader
+      includeContentMargins
+      actions={{
+        type: "TwoButtons",
+        primary: {
           label: I18n.t("idpay.barCode.resultScreen.success.saveImageCta"),
           accessibilityLabel: I18n.t(
             "idpay.barCode.resultScreen.success.saveImageCta"
           ),
           onPress: () => null
-        }}
-        secondaryActionProps={{
+        },
+        secondary: {
           label: I18n.t("global.buttons.close"),
           accessibilityLabel: I18n.t("global.buttons.close"),
           onPress: goBack
-        }}
-      >
-        <H2>{I18n.t("idpay.barCode.resultScreen.success.header")}</H2>
-        <VSpacer size={16} />
-        <Body>
-          {I18n.t("idpay.barCode.resultScreen.success.body", {
-            initiativeName: barcode.initiativeName
-          })}
-        </Body>
-        <VSpacer size={24} />
-        <View style={styles.barcodeContainer}>
-          <View style={[IOStyles.row, { alignSelf: "center" }]}>
-            <BodySmall weight="Regular" color="black">
-              {I18n.t("idpay.barCode.resultScreen.success.validUpTo")}
-            </BodySmall>
-            <BodySmall weight="Semibold" color="black">
-              {formatNumberCurrencyCents(barcode.residualBudgetCents)}
-            </BodySmall>
-          </View>
-          <VSpacer size={4} />
-          <Barcode format="CODE128" value={trx} />
-          <H3 style={{ alignSelf: "center" }}>{trx}</H3>
-          <VSpacer size={32} />
-          <IdPayBarcodeExpireProgressBar
-            secondsExpirationTotal={barcode.trxExpirationSeconds}
-            secondsToExpiration={secondsTillExpire}
-            setIsExpired={setIsBarcodeExpired}
-          />
+        }
+      }}
+      title={{
+        label: I18n.t("idpay.barCode.resultScreen.success.header")
+      }}
+      description={I18n.t("idpay.barCode.resultScreen.success.body", {
+        initiativeName: barcode.initiativeName
+      })}
+    >
+      <View style={styles.barcodeContainer}>
+        <View style={[IOStyles.row, { alignSelf: "center" }]}>
+          <BodySmall weight="Regular" color="black">
+            {I18n.t("idpay.barCode.resultScreen.success.validUpTo")}
+          </BodySmall>
+          <BodySmall weight="Semibold" color="black">
+            {formatNumberCurrencyCents(barcode.residualBudgetCents)}
+          </BodySmall>
         </View>
-      </GradientScrollView>
-    </>
+        <VSpacer size={4} />
+        <Barcode format="CODE128" value={trx} />
+        <H3 style={{ alignSelf: "center" }}>{trx}</H3>
+        <VSpacer size={32} />
+        <IdPayBarcodeExpireProgressBar
+          secondsExpirationTotal={barcode.trxExpirationSeconds}
+          secondsToExpiration={secondsTillExpire}
+          setIsExpired={setIsBarcodeExpired}
+        />
+      </View>
+    </IOScrollViewWithLargeHeader>
   );
 };
 
@@ -179,6 +166,7 @@ const BarcodeExpiredContent = ({
   };
   return (
     <OperationResultScreenContent
+      isHeaderVisible
       title={I18n.t("idpay.barCode.resultScreen.success.expired.header")}
       action={{
         label: I18n.t("idpay.barCode.resultScreen.success.expired.CTA"),

@@ -16,7 +16,7 @@ const Stack = createStackNavigator<IdPayCodeParamsList>();
 export const IdPayCodeNavigator = () => (
   <Stack.Navigator
     initialRouteName={IdPayCodeRoutes.IDPAY_CODE_ONBOARDING}
-    screenOptions={{ gestureEnabled: false, headerShown: false }}
+    screenOptions={{ gestureEnabled: false }}
   >
     <Stack.Screen
       name={IdPayCodeRoutes.IDPAY_CODE_ONBOARDING}
@@ -32,6 +32,7 @@ export const IdPayCodeNavigator = () => (
       component={IdPayCodeRenewScreen}
     />
     <Stack.Screen
+      options={{ headerShown: false }}
       name={IdPayCodeRoutes.IDPAY_CODE_RESULT}
       component={IdPayCodeResultScreen}
     />

@@ -1,20 +1,9 @@
-import {
-  Banner,
-  Body,
-  ButtonSolid,
-  ContentWrapper,
-  H2,
-  H3,
-  IOColors,
-  IOStyles,
-  VSpacer
-} from "@pagopa/io-app-design-system";
+import { Banner, H3, IOColors, VSpacer } from "@pagopa/io-app-design-system";
 import { RouteProp, useNavigation, useRoute } from "@react-navigation/native";
 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 { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel";
+import { IOScrollViewWithLargeHeader } from "../../../../components/ui/IOScrollViewWithLargeHeader";
 import I18n from "../../../../i18n";
 import {
   AppParamsList,
@@ -76,52 +65,56 @@ const IdPayCodeDisplayScreen = () => {
     ? I18n.t("global.buttons.continue")
     : I18n.t("global.buttons.close");
 
-  useHeaderSecondLevel({
-    title: "",
-    canGoBack: true,
-    contextualHelp: emptyContextualHelp,
-    supportRequest: true
-  });
-
   return (
-    <>
+    <IOScrollViewWithLargeHeader
+      title={{
+        label: I18n.t("idpay.code.onboarding.header")
+      }}
+      description={[
+        { text: I18n.t("idpay.code.onboarding.body1") },
+        {
+          text: "\n"
+        },
+        {
+          text: I18n.t("idpay.code.onboarding.bodyBold"),
+          weight: "Semibold"
+        },
+        {
+          text: "\n"
+        },
+        {
+          text: I18n.t("idpay.code.onboarding.bodyCta"),
+          weight: "Semibold",
+          asLink: true,
+          onPress: presentCieBottomSheet
+        }
+      ]}
+      contextualHelp={emptyContextualHelp}
+      headerActionsProp={{ showHelp: true }}
+      actions={{
+        type: "SingleButton",
+        primary: {
+          label: buttonLabel,
+          onPress: handleContinue,
+          testID: "actionButtonTestID"
+        }
+      }}
+      includeContentMargins
+    >
       <LoadingSpinnerOverlay isLoading={isGeneratingCode} loadingOpacity={1}>
-        <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}
-            label={buttonLabel}
-            fullWidth={true}
-            onPress={handleContinue}
-            testID="actionButtonTestID"
-          />
-        </SafeAreaView>
+        <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")}
+        />
       </LoadingSpinnerOverlay>
       {bottomSheet}
-    </>
+    </IOScrollViewWithLargeHeader>
   );
 };
 

@@ -1,13 +1,8 @@
-import {
-  Body,
-  H2,
-  IOStyles,
-  ListItemAction,
-  VSpacer
-} from "@pagopa/io-app-design-system";
+import { ListItemAction } from "@pagopa/io-app-design-system";
 import { useNavigation } from "@react-navigation/native";
 import * as React from "react";
-import { Alert, View } from "react-native";
+import { Alert } from "react-native";
+import { IOScrollViewWithLargeHeader } from "../../../../components/ui/IOScrollViewWithLargeHeader";
 import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel";
 import I18n from "../../../../i18n";
 import {
@@ -63,25 +58,33 @@ export const IdPayCodeRenewScreen = () => {
   });
 
   return (
-    <>
-      <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>
+    <IOScrollViewWithLargeHeader
+      title={{
+        label: I18n.t("idpay.code.renew.screen.header")
+      }}
+      description={[
+        { text: I18n.t("idpay.code.renew.screen.body") },
+        { text: "\n" },
+        {
+          text: I18n.t("idpay.code.renew.screen.link"),
+          onPress: presentCieBottomSheet,
+          weight: "Semibold",
+          asLink: true
+        }
+      ]}
+      contextualHelp={emptyContextualHelp}
+      headerActionsProp={{ showHelp: true }}
+      includeContentMargins
+    >
+      <ListItemAction
+        label={I18n.t("idpay.code.renew.screen.generateCTA")}
+        onPress={() => customAlert(handleConfirm)}
+        icon="change"
+        accessibilityLabel={I18n.t("idpay.code.renew.screen.generateCTA")}
+        variant="danger"
+      />
       {bottomSheet}
-    </>
+    </IOScrollViewWithLargeHeader>
   );
 };
 

@@ -63,9 +63,12 @@ describe("IdPayCodeDisplayScreen", () => {
 
       fireEvent(button, "onPress");
 
-      expect(mockReplace).toBeCalledWith(IdPayCodeRoutes.IDPAY_CODE_MAIN, {
-        screen: IdPayCodeRoutes.IDPAY_CODE_RESULT
-      });
+      expect(mockReplace).toHaveBeenCalledWith(
+        IdPayCodeRoutes.IDPAY_CODE_MAIN,
+        {
+          screen: IdPayCodeRoutes.IDPAY_CODE_RESULT
+        }
+      );
     });
   });
 
@@ -83,7 +86,7 @@ describe("IdPayCodeDisplayScreen", () => {
 
       fireEvent(button, "onPress");
 
-      expect(mockPop).toBeCalled();
+      expect(mockPop).toHaveBeenCalled();
     });
   });
 });