refactor: [IOBP-1170] Align IDPay screen to design requirements

ts/features/idpay/details/components/InitiativeRulesInfoBox.tsx

@@ -1,7 +1,6 @@
 import {
   Body,
-  ButtonSolid,
-  ContentWrapper,
+  FooterActions,
   H6,
   HSpacer,
   IOColors,
@@ -29,21 +28,17 @@ const InitiativeRulesInfoBox = (props: Props) => {
       component: <IOMarkdown content={content} />,
       title: I18n.t("idpay.initiative.beneficiaryDetails.infoModal.title"),
       footer: (
-        // TODO: Replace this chunk of code using `FooterActions`
-        <ContentWrapper>
-          <VSpacer size={24} />
-          <ButtonSolid
-            label={I18n.t(
-              "idpay.initiative.beneficiaryDetails.infoModal.button"
-            )}
-            onPress={() => dismiss()}
-            accessibilityLabel={I18n.t(
-              "idpay.initiative.beneficiaryDetails.infoModal.button"
-            )}
-            fullWidth={true}
-          />
-          <VSpacer size={24} />
-        </ContentWrapper>
+        <FooterActions
+          actions={{
+            type: "SingleButton",
+            primary: {
+              label: I18n.t(
+                "idpay.initiative.beneficiaryDetails.infoModal.button"
+              ),
+              onPress: () => dismiss()
+            }
+          }}
+        />
       )
     },
     170

ts/features/idpay/onboarding/screens/PDNDPrerequisitesScreen.tsx

@@ -1,6 +1,5 @@
 import {
-  ButtonSolid,
-  ContentWrapper,
+  FooterActions,
   ModuleSummary,
   VSpacer
 } from "@pagopa/io-app-design-system";
@@ -57,21 +56,17 @@ export const PDNDPrerequisitesScreen = () => {
         />
       ),
       footer: (
-        // TODO: Replace this chunk of code using `FooterActions`
-        <ContentWrapper>
-          <VSpacer size={16} />
-          <ButtonSolid
-            fullWidth
-            label={I18n.t(
-              "idpay.onboarding.PDNDPrerequisites.prerequisites.info.understoodCTA"
-            )}
-            accessibilityLabel={I18n.t(
-              "idpay.onboarding.PDNDPrerequisites.prerequisites.info.understoodCTA"
-            )}
-            onPress={() => dismiss()}
-          />
-          <VSpacer size={16} />
-        </ContentWrapper>
+        <FooterActions
+          actions={{
+            primary: {
+              label: I18n.t(
+                "idpay.onboarding.PDNDPrerequisites.prerequisites.info.understoodCTA"
+              ),
+              onPress: () => dismiss()
+            },
+            type: "SingleButton"
+          }}
+        />
       )
     },
     162

ts/features/idpay/payment/navigation/navigator.tsx

@@ -24,7 +24,7 @@ const InnerNavigation = () => {
     <IdPayPaymentMachineProvider>
       <Stack.Navigator
         initialRouteName={IdPayPaymentRoutes.IDPAY_PAYMENT_CODE_INPUT}
-        screenOptions={{ gestureEnabled: false, headerShown: false }}
+        screenOptions={{ gestureEnabled: false }}
         screenListeners={{
           beforeRemove: () => {
             // Read more on https://reactnavigation.org/docs/preventing-going-back/
@@ -46,6 +46,7 @@ const InnerNavigation = () => {
         <Stack.Screen
           name={IdPayPaymentRoutes.IDPAY_PAYMENT_RESULT}
           component={IDPayPaymentResultScreen}
+          options={{ headerShown: false }}
         />
       </Stack.Navigator>
     </IdPayPaymentMachineProvider>

ts/features/idpay/payment/screens/IDPayPaymentAuthorizationScreen.tsx

@@ -1,7 +1,5 @@
 import {
-  ContentWrapper,
   Divider,
-  FooterActionsInline,
   H2,
   H6,
   ListItemHeader,
@@ -12,10 +10,10 @@ import { RouteProp, useRoute } from "@react-navigation/native";
 import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
 import { useEffect } from "react";
-import { SafeAreaView, View } from "react-native";
+import { View } from "react-native";
 import { AuthPaymentResponseDTO } from "../../../../../definitions/idpay/AuthPaymentResponseDTO";
 import { IOStyles } from "../../../../components/core/variables/IOStyles";
-import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel";
+import { IOScrollViewWithLargeHeader } from "../../../../components/ui/IOScrollViewWithLargeHeader";
 import I18n from "../../../../i18n";
 import { identificationRequest } from "../../../../store/actions/identification";
 import { useIODispatch } from "../../../../store/hooks";
@@ -91,40 +89,31 @@ const IDPayPaymentAuthorizationScreen = () => {
     return <AuthorizationScreenSkeleton />;
   };
 
-  useHeaderSecondLevel({
-    title: "Autorizza operazione",
-    canGoBack: false,
-    contextualHelp: emptyContextualHelp,
-    supportRequest: true
-  });
-
   return (
-    <>
-      <SafeAreaView style={IOStyles.flex}>
-        <View style={IOStyles.flex}>
-          <ContentWrapper>
-            <H2>{I18n.t("idpay.payment.authorization.header")}</H2>
-            <VSpacer size={24} />
-            {renderContent()}
-          </ContentWrapper>
-        </View>
-      </SafeAreaView>
-      <FooterActionsInline
-        startAction={{
-          color: "primary",
-          label: isCancelling ? "" : I18n.t("global.buttons.deny"),
-          onPress: handleCancel,
-          disabled: isLoading
-        }}
-        endAction={{
-          color: "primary",
+    <IOScrollViewWithLargeHeader
+      canGoback={false}
+      contextualHelp={emptyContextualHelp}
+      headerActionsProp={{ showHelp: true }}
+      title={{
+        label: I18n.t("idpay.payment.authorization.header")
+      }}
+      actions={{
+        type: "TwoButtons",
+        primary: {
           label: I18n.t("global.buttons.confirm"),
           onPress: handleConfirm,
-          loading: isAuthorizing,
-          disabled: isLoading
-        }}
-      />
-    </>
+          disabled: isLoading || isAuthorizing
+        },
+        secondary: {
+          label: I18n.t("global.buttons.deny"),
+          onPress: handleCancel,
+          disabled: isLoading || isCancelling
+        }
+      }}
+      includeContentMargins
+    >
+      {renderContent()}
+    </IOScrollViewWithLargeHeader>
   );
 };
 
@@ -161,15 +150,10 @@ const AuthorizationScreenContent = ({
     />
 
     <VSpacer size={24} />
-
-    {/* TODO:: will be removed in favor of LIST_GROUP_HEADING in future updates */}
     <ListItemHeader
       label={I18n.t("idpay.payment.authorization.infoDivider")}
       iconName="initiatives"
     />
-
-    <VSpacer size={16} />
-
     <ListItemInfo
       label={I18n.t("idpay.payment.authorization.initiativeName")}
       value={data.initiativeName || "-"}

ts/features/idpay/payment/screens/IDPayPaymentCodeInputScreen.tsx

@@ -1,20 +1,10 @@
-import {
-  Body,
-  FooterActions,
-  H2,
-  IOColors,
-  IOStyles,
-  IOVisualCostants,
-  TextInput,
-  VSpacer
-} from "@pagopa/io-app-design-system";
+import { TextInput } from "@pagopa/io-app-design-system";
 import { NonEmptyString } from "@pagopa/ts-commons/lib/strings";
 import * as E from "fp-ts/lib/Either";
 import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
 import { useState } from "react";
-import { SafeAreaView, StatusBar, StyleSheet, View } from "react-native";
-import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel";
+import { IOScrollViewWithLargeHeader } from "../../../../components/ui/IOScrollViewWithLargeHeader";
 import I18n from "../../../../i18n";
 import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
 import { isLoadingSelector } from "../../common/machine/selectors";
@@ -46,67 +36,49 @@ const IDPayPaymentCodeInputScreen = () => {
       O.map(trxCode => machine.send({ type: "authorize-payment", trxCode }))
     );
 
-  useHeaderSecondLevel({
-    title: I18n.t("idpay.payment.manualInput.title"),
-    canGoBack: true,
-    contextualHelp: emptyContextualHelp,
-    supportRequest: true
-  });
-
   return (
-    <>
-      <StatusBar
-        barStyle={"dark-content"}
-        translucent={false}
-        backgroundColor={IOColors.white}
+    <IOScrollViewWithLargeHeader
+      title={{
+        label: I18n.t("idpay.payment.manualInput.title")
+      }}
+      description={I18n.t("idpay.payment.manualInput.subtitle")}
+      actions={{
+        type: "SingleButton",
+        primary: {
+          label: I18n.t("idpay.payment.manualInput.button"),
+          disabled: !isInputValid || isLoading,
+          onPress: navigateToPaymentAuthorization,
+          loading: isLoading
+        }
+      }}
+      contextualHelp={emptyContextualHelp}
+      headerActionsProp={{ showHelp: true }}
+      includeContentMargins
+    >
+      <TextInput
+        textInputProps={{
+          inputMode: "text",
+          autoCapitalize: "characters",
+          autoCorrect: false
+        }}
+        onChangeText={value => {
+          setInputState({
+            value,
+            code: pipe(
+              value,
+              O.fromNullable,
+              O.filter(NonEmptyString.is),
+              O.map(IDPayTransactionCode.decode)
+            )
+          });
+        }}
+        placeholder={I18n.t("idpay.payment.manualInput.input")}
+        accessibilityLabel={I18n.t("idpay.payment.manualInput.input")}
+        value={inputState.value ?? ""}
+        counterLimit={8}
       />
-      <SafeAreaView style={IOStyles.flex}>
-        <View style={styles.wrapper}>
-          <H2>{I18n.t("idpay.payment.manualInput.title")}</H2>
-          <VSpacer size={16} />
-          <Body>{I18n.t("idpay.payment.manualInput.subtitle")}</Body>
-          <VSpacer size={40} />
-          <TextInput
-            textInputProps={{
-              inputMode: "text",
-              autoCapitalize: "characters",
-              autoCorrect: false
-            }}
-            onChangeText={value => {
-              setInputState({
-                value,
-                code: pipe(
-                  value,
-                  O.fromNullable,
-                  O.filter(NonEmptyString.is),
-                  O.map(IDPayTransactionCode.decode)
-                )
-              });
-            }}
-            placeholder={I18n.t("idpay.payment.manualInput.input")}
-            accessibilityLabel={I18n.t("idpay.payment.manualInput.input")}
-            value={inputState.value ?? ""}
-            counterLimit={8}
-          />
-        </View>
-        <FooterActions
-          actions={{
-            type: "SingleButton",
-            primary: {
-              label: I18n.t("idpay.payment.manualInput.button"),
-              disabled: !isInputValid || isLoading,
-              onPress: navigateToPaymentAuthorization,
-              loading: isLoading
-            }
-          }}
-        />
-      </SafeAreaView>
-    </>
+    </IOScrollViewWithLargeHeader>
   );
 };
 
-const styles = StyleSheet.create({
-  wrapper: { flex: 1, marginHorizontal: IOVisualCostants.appMarginDefault }
-});
-
 export { IDPayPaymentCodeInputScreen };

ts/features/idpay/unsubscription/navigation/navigator.tsx

@@ -11,7 +11,6 @@ export const IdPayUnsubscriptionNavigator = () => (
     initialRouteName={
       IdPayUnsubscriptionRoutes.IDPAY_UNSUBSCRIPTION_CONFIRMATION
     }
-    screenOptions={{ headerShown: false }}
   >
     <Stack.Screen
       name={IdPayUnsubscriptionRoutes.IDPAY_UNSUBSCRIPTION_CONFIRMATION}
@@ -20,6 +19,7 @@ export const IdPayUnsubscriptionNavigator = () => (
     <Stack.Screen
       name={IdPayUnsubscriptionRoutes.IDPAY_UNSUBSCRIPTION_RESULT}
       component={UnsubscriptionResultScreen}
+      options={{ headerShown: false }}
     />
   </Stack.Navigator>
 );