refactor: [IOBP-1115] Replace deprecated components and functions for…

… IDPay (#6586) ## Short description This PR is replacing legacy components for IDPay screens to align them with design standards > [!WARNING] > This PR depends on #6584 ## List of changes proposed in this pull request - Import `FooterActions` from design system - Replace `RNavScreenWithLargeHeader` with `IOScrollViewWithLargeHeader` - Replace `GradientScrollView` with `IOScrollViewWithLargeHeader` (thanks @dmnplb) - Replace `jest` deprecated functions (`toBeCalledWith`, `toBeCalledTimes` and `toBeCalled`) - Replace deprecated `Layout` of `react-native-reanimated` with `LinearTransition` - Remove `back` button in onboarding screens with `IOScrollViewWithLargeHeader` - Replace all scrollview with `IOScrollViewWithLargeHeader` ## How to test Ensure that all legacy components are replaced and properly aligned with standards ## Preview | Old | New | |--------|--------| | <video src="https://github.com/user-attachments/assets/42a300ba-c1ec-4dfd-b647-062b46c07773"> | <video src="https://github.com/user-attachments/assets/b8d0a8b7-7b6e-4e14-94d1-672c2601cd16"> | | <video src="https://github.com/user-attachments/assets/93951690-9b9a-4978-aa42-344e47f33cc9"> | <video src="https://github.com/user-attachments/assets/a773d730-19b1-44ac-b3ac-7f1a01a1905f"> | | <video src="https://github.com/user-attachments/assets/ecb84428-0cbe-48f4-beb3-82988a7df429"> | <video src="https://github.com/user-attachments/assets/881bf976-4bef-495f-918c-86c01c4ede1c"> | | <video src="https://github.com/user-attachments/assets/7fad0a6d-1cb1-4073-bd26-e63753ed8490"> | <video src="https://github.com/user-attachments/assets/ea01e06b-8c2b-4fec-8a78-21f654cab03f"> |
pagopa · Jan 16, 2025 · 70e552c · 70e552c
1 parent c3b2f95
commit 70e552c
Show file tree

Hide file tree

Showing 25 changed files with 615 additions and 837 deletions.
diff --git a/ts/features/idpay/barcode/navigation/navigator.tsx b/ts/features/idpay/barcode/navigation/navigator.tsx
@@ -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}

diff --git a/ts/features/idpay/barcode/screens/IdPayBarcodeResultScreen.tsx b/ts/features/idpay/barcode/screens/IdPayBarcodeResultScreen.tsx
@@ -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"),

diff --git a/ts/features/idpay/code/navigation/navigator.tsx b/ts/features/idpay/code/navigation/navigator.tsx
@@ -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}
     />

diff --git a/ts/features/idpay/code/screens/IdPayCodeDisplayScreen.tsx b/ts/features/idpay/code/screens/IdPayCodeDisplayScreen.tsx
@@ -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>
   );
 };
 

diff --git a/ts/features/idpay/code/screens/IdPayCodeRenewScreen.tsx b/ts/features/idpay/code/screens/IdPayCodeRenewScreen.tsx
@@ -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>
   );
 };
 

diff --git a/ts/features/idpay/code/screens/__tests__/IdPayCodeDisplayScreen.test.tsx b/ts/features/idpay/code/screens/__tests__/IdPayCodeDisplayScreen.test.tsx
@@ -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();
     });
   });
 });