From cbd2aa668abfb7bf7207dbfe25b27d56032c2d91 Mon Sep 17 00:00:00 2001 From: Emanuele Dall'Ara <71103219+LeleDallas@users.noreply.github.com> Date: Fri, 3 Jan 2025 09:38:53 +0100 Subject: [PATCH 01/17] refactor: update idpay headers replace TopScreenComponent with useHeaderSecondLevel --- .../code/screens/IdPayCodeDisplayScreen.tsx | 59 ++++++------ .../code/screens/IdPayCodeRenewScreen.tsx | 48 +++++----- .../IdPayDiscountInstrumentsScreen.tsx | 92 ++++++++++--------- .../playgrounds/IdPayCodePlayground.tsx | 69 +++++++------- 4 files changed, 140 insertions(+), 128 deletions(-) diff --git a/ts/features/idpay/code/screens/IdPayCodeDisplayScreen.tsx b/ts/features/idpay/code/screens/IdPayCodeDisplayScreen.tsx index 7fbc2f5a4e3..6ca783999e4 100644 --- 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 ( <> - - -

{I18n.t("idpay.code.onboarding.header")}

- - - {I18n.t("idpay.code.onboarding.body1")} - - - {I18n.t("idpay.code.onboarding.bodyBold")} - - - {I18n.t("idpay.code.onboarding.bodyCta")} - - - - - - - + +

{I18n.t("idpay.code.onboarding.header")}

+ + + {I18n.t("idpay.code.onboarding.body1")} + + + {I18n.t("idpay.code.onboarding.bodyBold")} + + + {I18n.t("idpay.code.onboarding.bodyCta")} + + + + + + { ); }; + useHeaderSecondLevel({ + title: "", + canGoBack: true, + contextualHelp: emptyContextualHelp, + supportRequest: true + }); + return ( <> - - -

{I18n.t("idpay.code.renew.screen.header")}

- - {I18n.t("idpay.code.renew.screen.body")} - - {I18n.t("idpay.code.renew.screen.link")} - - - customAlert(handleConfirm)} - icon="change" - accessibilityLabel={I18n.t("idpay.code.renew.screen.generateCTA")} - variant="danger" - /> - - + +

{I18n.t("idpay.code.renew.screen.header")}

+ + {I18n.t("idpay.code.renew.screen.body")} + + {I18n.t("idpay.code.renew.screen.link")} + + + customAlert(handleConfirm)} + icon="change" + accessibilityLabel={I18n.t("idpay.code.renew.screen.generateCTA")} + variant="danger" + /> + {bottomSheet} ); diff --git a/ts/features/idpay/configuration/screens/IdPayDiscountInstrumentsScreen.tsx b/ts/features/idpay/configuration/screens/IdPayDiscountInstrumentsScreen.tsx index c42b7e749fd..fae54c3c895 100644 --- a/ts/features/idpay/configuration/screens/IdPayDiscountInstrumentsScreen.tsx +++ b/ts/features/idpay/configuration/screens/IdPayDiscountInstrumentsScreen.tsx @@ -10,7 +10,7 @@ import React from "react"; import { ScrollView, StyleSheet } from "react-native"; import { InstrumentTypeEnum } from "../../../../../definitions/idpay/InstrumentDTO"; import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay"; -import TopScreenComponent from "../../../../components/screens/TopScreenComponent"; +import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel"; import I18n from "../../../../i18n"; import { IOStackNavigationProp } from "../../../../navigation/params/AppParamsList"; import { useIODispatch, useIOSelector } from "../../../../store/hooks"; @@ -71,7 +71,7 @@ export const IdPayDiscountInstrumentsScreen = () => { const isLoadingIdPayCodeInstrument = useIOSelector(state => idPayIsLoadingInitiativeInstrumentSelector( state, - idPayCodeInstrument?.instrumentId || "" + idPayCodeInstrument?.instrumentId ?? "" ) ); @@ -97,53 +97,57 @@ export const IdPayDiscountInstrumentsScreen = () => { screen: IdPayCodeRoutes.IDPAY_CODE_ONBOARDING, params: { initiativeId } }); - } else { - if (idPayCodeInstrument && initiativeId) { - dispatch( - idpayInitiativeInstrumentDelete.request({ - initiativeId, - instrumentId: idPayCodeInstrument.instrumentId - }) - ); - } + } else if (idPayCodeInstrument && initiativeId) { + dispatch( + idpayInitiativeInstrumentDelete.request({ + initiativeId, + instrumentId: idPayCodeInstrument.instrumentId + }) + ); } }; + useHeaderSecondLevel({ + title: "", + canGoBack: true, + transparent: true, + contextualHelp: emptyContextualHelp, + supportRequest: true + }); + return ( <> - - - -

- {I18n.t("idpay.configuration.instruments.paymentMethods.header")} -

- - - {I18n.t("idpay.configuration.instruments.paymentMethods.body", { - initiativeName: initiativeName ?? "" - })} - - - - - - - - - {bottomSheet} - + + +

+ {I18n.t("idpay.configuration.instruments.paymentMethods.header")} +

+ + + {I18n.t("idpay.configuration.instruments.paymentMethods.body", { + initiativeName: initiativeName ?? "" + })} + + + + + + + + + {bottomSheet} ); }; diff --git a/ts/screens/profile/playgrounds/IdPayCodePlayground.tsx b/ts/screens/profile/playgrounds/IdPayCodePlayground.tsx index 3dc828ec7d8..818540a8cb2 100644 --- a/ts/screens/profile/playgrounds/IdPayCodePlayground.tsx +++ b/ts/screens/profile/playgrounds/IdPayCodePlayground.tsx @@ -12,11 +12,11 @@ import * as React from "react"; import { ScrollView, View } from "react-native"; import { LabelledItem } from "../../../components/LabelledItem"; import { IdPayCodeRoutes } from "../../../features/idpay/code/navigation/routes"; +import { useHeaderSecondLevel } from "../../../hooks/useHeaderSecondLevel"; import { AppParamsList, IOStackNavigationProp } from "../../../navigation/params/AppParamsList"; -import TopScreenComponent from "../../../components/screens/TopScreenComponent"; export const IdPayCodePlayGround = () => { const navigation = useNavigation>(); @@ -42,38 +42,41 @@ export const IdPayCodePlayGround = () => { }); }; + useHeaderSecondLevel({ + title: "IdPay Code Playground", + canGoBack: true + }); + return ( - - - - setInitiativeId(text), - value: initiativeId - }} - /> - - - - - - - + + + setInitiativeId(text), + value: initiativeId + }} + /> + + + + + + ); }; From aa3c517b63a5f431c2c11d44af80916e6210e633 Mon Sep 17 00:00:00 2001 From: Emanuele Dall'Ara <71103219+LeleDallas@users.noreply.github.com> Date: Fri, 3 Jan 2025 10:44:17 +0100 Subject: [PATCH 02/17] refactor: update idpay headers replace BaseScreenComponent with useHeaderSecondLevel --- .../IbanConfigurationLandingScreen.tsx | 17 +-- .../screens/IbanEnrollmentScreen.tsx | 53 ++++---- .../screens/IbanOnboardingScreen.tsx | 20 +-- .../InitiativeConfigurationIntroScreen.tsx | 119 ++++++++---------- .../screens/InstrumentsEnrollmentScreen.tsx | 79 ++++++------ .../onboarding/screens/CompletionScreen.tsx | 15 +-- .../screens/MultiValuePrerequisitesScreen.tsx | 56 ++++----- .../IDPayPaymentAuthorizationScreen.tsx | 17 +-- .../screens/IDPayPaymentCodeInputScreen.tsx | 13 +- .../UnsubscriptionConfirmationScreen.tsx | 28 ++--- .../IdPayInstrumentInitiativesScreen.tsx | 50 ++++---- .../playgrounds/IdPayOnboardingPlayground.tsx | 69 +++++----- 12 files changed, 266 insertions(+), 270 deletions(-) diff --git a/ts/features/idpay/configuration/screens/IbanConfigurationLandingScreen.tsx b/ts/features/idpay/configuration/screens/IbanConfigurationLandingScreen.tsx index c257ee96f7c..c2fcd827901 100644 --- 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 ( - + <> { /> {bottomSheet} - + ); }; diff --git a/ts/features/idpay/configuration/screens/IbanEnrollmentScreen.tsx b/ts/features/idpay/configuration/screens/IbanEnrollmentScreen.tsx index ddf9a11e27b..4595059655d 100644 --- 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 ( - - - -

{I18n.t("idpay.configuration.iban.enrollment.header")}

- - {I18n.t("idpay.configuration.iban.enrollment.subTitle")} - - {renderIbanList()} - - - - {renderFooter()} - - + + +

{I18n.t("idpay.configuration.iban.enrollment.header")}

+ + {I18n.t("idpay.configuration.iban.enrollment.subTitle")} + + {renderIbanList()} + + + + {renderFooter()} + ); }; diff --git a/ts/features/idpay/configuration/screens/IbanOnboardingScreen.tsx b/ts/features/idpay/configuration/screens/IbanOnboardingScreen.tsx index 0b0cb80d3ef..dd3dbd7faea 100644 --- 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; @@ -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 ( - + <>

{I18n.t("idpay.configuration.iban.onboarding.header")}

@@ -111,6 +113,6 @@ export const IbanOnboardingScreen = () => { } }} /> - + ); }; diff --git a/ts/features/idpay/configuration/screens/InitiativeConfigurationIntroScreen.tsx b/ts/features/idpay/configuration/screens/InitiativeConfigurationIntroScreen.tsx index dec945fd448..ad10c84dbc4 100644 --- a/ts/features/idpay/configuration/screens/InitiativeConfigurationIntroScreen.tsx +++ b/ts/features/idpay/configuration/screens/InitiativeConfigurationIntroScreen.tsx @@ -1,5 +1,6 @@ import { Body, + BodySmall, FooterActions, H1, H6, @@ -7,21 +8,14 @@ import { IOIcons, IOStyles, Icon, - BodySmall, VSpacer, useIOTheme } from "@pagopa/io-app-design-system"; -import { - RouteProp, - useFocusEffect, - useNavigation, - useRoute -} from "@react-navigation/native"; +import { RouteProp, useFocusEffect, useRoute } from "@react-navigation/native"; import React from "react"; import { SafeAreaView, ScrollView, StyleSheet, View } from "react-native"; import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay"; -import TouchableDefaultOpacity from "../../../../components/TouchableDefaultOpacity"; -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"; @@ -40,7 +34,6 @@ type RouteProps = RouteProp< >; export const InitiativeConfigurationIntroScreen = () => { - const navigation = useNavigation(); const { params } = useRoute(); const { initiativeId, mode } = params; const { useActorRef, useSelector } = IdPayConfigurationMachineContext; @@ -52,12 +45,6 @@ export const InitiativeConfigurationIntroScreen = () => { machine.send({ type: "next" }); }; - const customGoBack = ( - - - - ); - useFocusEffect( React.useCallback(() => { if (!!initiativeId && !!mode) { @@ -70,58 +57,56 @@ export const InitiativeConfigurationIntroScreen = () => { }, [machine, initiativeId, mode]) ); + useHeaderSecondLevel({ + title: I18n.t("idpay.configuration.headerTitle"), + canGoBack: true, + contextualHelp: emptyContextualHelp, + supportRequest: true + }); + return ( - - - - - - -

{I18n.t("idpay.configuration.intro.title")}

- - {I18n.t("idpay.configuration.intro.body")} - -
- {I18n.t("idpay.configuration.intro.requiredData.title")} -
- - - - - - - - - + + + + + +

{I18n.t("idpay.configuration.intro.title")}

+ + {I18n.t("idpay.configuration.intro.body")} + +
+ {I18n.t("idpay.configuration.intro.requiredData.title")} +
+ + + + + + + + ); }; diff --git a/ts/features/idpay/configuration/screens/InstrumentsEnrollmentScreen.tsx b/ts/features/idpay/configuration/screens/InstrumentsEnrollmentScreen.tsx index 5aa3a619cbb..9d9c18a3113 100644 --- a/ts/features/idpay/configuration/screens/InstrumentsEnrollmentScreen.tsx +++ b/ts/features/idpay/configuration/screens/InstrumentsEnrollmentScreen.tsx @@ -13,7 +13,7 @@ import { pipe } from "fp-ts/lib/function"; import React from "react"; import { ScrollView } from "react-native"; import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay"; -import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent"; +import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel"; import I18n from "../../../../i18n"; import { useIONavigation } from "../../../../navigation/params/AppParamsList"; import { Wallet } from "../../../../types/pagopa"; @@ -222,48 +222,47 @@ export const InstrumentsEnrollmentScreen = () => { O.toUndefined ); + useHeaderSecondLevel({ + title: I18n.t( + isInstrumentsOnlyMode + ? "idpay.configuration.instruments.title" + : "idpay.configuration.headerTitle" + ), + goBack: handleBackPress, + contextualHelp: emptyContextualHelp, + supportRequest: true + }); + return ( <> - - - - -

{I18n.t("idpay.configuration.instruments.header")}

- - - {I18n.t("idpay.configuration.instruments.body", { - initiativeName - })} - - - {walletInstruments.map(walletInstrument => ( - - ))} - - + + +

{I18n.t("idpay.configuration.instruments.header")}

+ + + {I18n.t("idpay.configuration.instruments.body", { + initiativeName + })} + + + {walletInstruments.map(walletInstrument => ( + - - - {renderFooterButtons()} - - + ))} + + + + + {renderFooterButtons()} + {enrollmentBottomSheetModal.bottomSheet} ); diff --git a/ts/features/idpay/onboarding/screens/CompletionScreen.tsx b/ts/features/idpay/onboarding/screens/CompletionScreen.tsx index 04934d1a450..e0723efb190 100644 --- a/ts/features/idpay/onboarding/screens/CompletionScreen.tsx +++ b/ts/features/idpay/onboarding/screens/CompletionScreen.tsx @@ -9,7 +9,7 @@ import React from "react"; import { SafeAreaView, StyleSheet, View } from "react-native"; import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay"; import { IOStyles } from "../../../../components/core/variables/IOStyles"; -import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent"; +import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel"; import I18n from "../../../../i18n"; import themeVariables from "../../../../theme/variables"; import { isLoadingSelector } from "../../common/machine/selectors"; @@ -23,15 +23,16 @@ const CompletionScreen = () => { const handleClosePress = () => machine.send({ type: "close" }); + useHeaderSecondLevel({ + title: I18n.t("idpay.onboarding.headerTitle"), + canGoBack: isLoading, + headerShown: isLoading + }); + if (isLoading) { return ( - - - + ); } diff --git a/ts/features/idpay/onboarding/screens/MultiValuePrerequisitesScreen.tsx b/ts/features/idpay/onboarding/screens/MultiValuePrerequisitesScreen.tsx index 090cc33e6c6..a83d1dd6bb2 100644 --- a/ts/features/idpay/onboarding/screens/MultiValuePrerequisitesScreen.tsx +++ b/ts/features/idpay/onboarding/screens/MultiValuePrerequisitesScreen.tsx @@ -14,7 +14,7 @@ import { default as React } from "react"; import { ScrollView, StyleSheet, View } from "react-native"; import PagerView from "react-native-pager-view"; import { SelfDeclarationMultiDTO } from "../../../../../definitions/idpay/SelfDeclarationMultiDTO"; -import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent"; +import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel"; import I18n from "../../../../i18n"; import { IdPayOnboardingMachineContext } from "../machine/provider"; import { @@ -87,36 +87,36 @@ const MultiValuePrerequisiteItemScreenContent = ({ }; const handleGoBack = () => machine.send({ type: "back" }); + useHeaderSecondLevel({ + title: I18n.t("idpay.onboarding.headerTitle"), + goBack: handleGoBack + }); + return ( <> - - -

{I18n.t("idpay.onboarding.multiPrerequisites.header")}

- - {I18n.t("idpay.onboarding.multiPrerequisites.body")} - {/* TODO: Add a proper `onPress` function to the following link. + +

{I18n.t("idpay.onboarding.multiPrerequisites.header")}

+ + {I18n.t("idpay.onboarding.multiPrerequisites.body")} + {/* TODO: Add a proper `onPress` function to the following link. It was a `` without anything else before */} - {/* eslint-disable-next-line @typescript-eslint/no-empty-function */} - {}}> - {I18n.t("idpay.onboarding.multiPrerequisites.link")} - - -
{selfDeclaration.description}
- - {selfDeclaration.value.map((answer, index) => ( - setSelectedIndex(index)} - /> - ))} - - - + {/* eslint-disable-next-line @typescript-eslint/no-empty-function */} + {}}> + {I18n.t("idpay.onboarding.multiPrerequisites.link")} + + +
{selfDeclaration.description}
+ + {selfDeclaration.value.map((answer, index) => ( + setSelectedIndex(index)} + /> + ))} + + { return ; }; + useHeaderSecondLevel({ + title: "Autorizza operazione", + canGoBack: false, + contextualHelp: emptyContextualHelp, + supportRequest: true + }); + return ( - + <> @@ -122,7 +125,7 @@ const IDPayPaymentAuthorizationScreen = () => { disabled: isLoading }} /> - + ); }; diff --git a/ts/features/idpay/payment/screens/IDPayPaymentCodeInputScreen.tsx b/ts/features/idpay/payment/screens/IDPayPaymentCodeInputScreen.tsx index 1f3ba4f5c89..e5a89d2fe03 100644 --- a/ts/features/idpay/payment/screens/IDPayPaymentCodeInputScreen.tsx +++ b/ts/features/idpay/payment/screens/IDPayPaymentCodeInputScreen.tsx @@ -14,7 +14,7 @@ import * as O from "fp-ts/lib/Option"; import { pipe } from "fp-ts/lib/function"; import React from "react"; import { SafeAreaView, StatusBar, StyleSheet, View } from "react-native"; -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"; @@ -46,8 +46,15 @@ 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 ( - + <> { }} /> - + ); }; diff --git a/ts/features/idpay/unsubscription/screens/UnsubscriptionConfirmationScreen.tsx b/ts/features/idpay/unsubscription/screens/UnsubscriptionConfirmationScreen.tsx index 0bc9a47b189..0bbf7182f40 100644 --- a/ts/features/idpay/unsubscription/screens/UnsubscriptionConfirmationScreen.tsx +++ b/ts/features/idpay/unsubscription/screens/UnsubscriptionConfirmationScreen.tsx @@ -3,7 +3,6 @@ import { ContentWrapper, FooterActionsInline, H2, - IconButton, VSpacer } from "@pagopa/io-app-design-system"; import { RouteProp, useRoute } from "@react-navigation/native"; @@ -13,8 +12,8 @@ import { ScrollView } from "react-native-gesture-handler"; import { InitiativeRewardTypeEnum } from "../../../../../definitions/idpay/InitiativeDTO"; import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay"; import { IOStyles } from "../../../../components/core/variables/IOStyles"; -import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent"; import { useConfirmationChecks } from "../../../../hooks/useConfirmationChecks"; +import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel"; import I18n from "../../../../i18n"; import { useIONavigation } from "../../../../navigation/params/AppParamsList"; import { useIODispatch, useIOSelector } from "../../../../store/hooks"; @@ -102,15 +101,6 @@ const UnsubscriptionConfirmationScreen = () => { } }, [navigation, isFailure, isSuccess]); - const closeButton = ( - - ); - const confirmModal = useIOBottomSheetAutoresizableModal( { title: I18n.t("idpay.unsubscription.modal.title", { initiativeName }), @@ -180,18 +170,20 @@ const UnsubscriptionConfirmationScreen = () => { ); + useHeaderSecondLevel({ + title: I18n.t("idpay.unsubscription.headerTitle"), + goBack: handleClosePress, + contextualHelp: emptyContextualHelp, + supportRequest: true + }); + return ( - + <> {!isLoading && body} {confirmModal.bottomSheet} - + ); }; diff --git a/ts/features/idpay/wallet/screens/IdPayInstrumentInitiativesScreen.tsx b/ts/features/idpay/wallet/screens/IdPayInstrumentInitiativesScreen.tsx index 27357752e93..d4e4c1f830e 100644 --- a/ts/features/idpay/wallet/screens/IdPayInstrumentInitiativesScreen.tsx +++ b/ts/features/idpay/wallet/screens/IdPayInstrumentInitiativesScreen.tsx @@ -1,14 +1,14 @@ import * as pot from "@pagopa/ts-commons/lib/pot"; import * as O from "fp-ts/lib/Option"; +import { H2, H6, HSpacer, VSpacer } from "@pagopa/io-app-design-system"; +import { Route, useRoute } from "@react-navigation/native"; import { pipe } from "fp-ts/lib/function"; import React from "react"; import { ScrollView, StyleSheet, View } from "react-native"; -import { H2, H6, HSpacer, VSpacer } from "@pagopa/io-app-design-system"; -import { Route, useRoute } from "@react-navigation/native"; import { IOStyles } from "../../../../components/core/variables/IOStyles"; -import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent"; import { LogoPaymentWithFallback } from "../../../../components/ui/utils/components/LogoPaymentWithFallback"; +import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel"; import TypedI18n from "../../../../i18n"; import { useIODispatch, useIOSelector } from "../../../../store/hooks"; import customVariables from "../../../../theme/variables"; @@ -54,29 +54,29 @@ export const IdPayInstrumentInitiativesScreen = () => { ) ) ?? [undefined, undefined, []]; + useHeaderSecondLevel({ + title: TypedI18n.t("idpay.wallet.initiativePairing.navigation"), + canGoBack: true + }); + return ( - - -

{TypedI18n.t("idpay.wallet.initiativePairing.header")}

- - {maskedPan && ( - - - -
•••• {maskedPan}
- - )} - - - - - + +

{TypedI18n.t("idpay.wallet.initiativePairing.header")}

+ + {maskedPan && ( + + + +
•••• {maskedPan}
+ + )} + + + + ); }; diff --git a/ts/screens/profile/playgrounds/IdPayOnboardingPlayground.tsx b/ts/screens/profile/playgrounds/IdPayOnboardingPlayground.tsx index b5c97421a27..90475a64052 100644 --- a/ts/screens/profile/playgrounds/IdPayOnboardingPlayground.tsx +++ b/ts/screens/profile/playgrounds/IdPayOnboardingPlayground.tsx @@ -1,9 +1,9 @@ import { Body, BodyMonospace, + BodySmall, H4, IOColors, - BodySmall, PressableListItemBase, VSpacer } from "@pagopa/io-app-design-system"; @@ -12,8 +12,8 @@ import React from "react"; import { Button, ScrollView, View } from "react-native"; import { LabelledItem } from "../../../components/LabelledItem"; import { IOStyles } from "../../../components/core/variables/IOStyles"; -import BaseScreenComponent from "../../../components/screens/BaseScreenComponent"; import { IdPayOnboardingRoutes } from "../../../features/idpay/onboarding/navigation/routes"; +import { useHeaderSecondLevel } from "../../../hooks/useHeaderSecondLevel"; import { AppParamsList, IOStackNavigationProp @@ -39,38 +39,41 @@ const IdPayOnboardingPlayground = () => { } }; + useHeaderSecondLevel({ + title: "Playground", + canGoBack: true + }); + return ( - - - setServiceId(text), - value: serviceId - }} - /> - -