diff --git a/ts/components/ui/RNavScreenWithLargeHeader.tsx b/ts/components/ui/RNavScreenWithLargeHeader.tsx index 3aaa2809e54..11e012f0174 100644 --- a/ts/components/ui/RNavScreenWithLargeHeader.tsx +++ b/ts/components/ui/RNavScreenWithLargeHeader.tsx @@ -14,7 +14,11 @@ import Animated, { useSharedValue } from "react-native-reanimated"; import { useSafeAreaInsets } from "react-native-safe-area-context"; -import { HeaderActionProps, useHeaderProps } from "../../hooks/useHeaderProps"; +import { + BackProps, + HeaderActionProps, + useHeaderProps +} from "../../hooks/useHeaderProps"; import { SupportRequestParams } from "../../hooks/useStartSupportRequest"; import I18n from "../../i18n"; @@ -22,7 +26,9 @@ type Props = { children: React.ReactNode; fixedBottomSlot?: React.ReactNode; title: string; + titleTestID?: string; description?: string; + goBack?: BackProps["goBack"]; headerActionsProp?: HeaderActionProps; } & SupportRequestParams; @@ -33,6 +39,7 @@ type Props = { * @param children * @param fixedBottomSlot An optional React node that is fixed to the bottom of the screen. Useful for buttons or other actions. It will be positioned outside the main `ScrollView`. * @param title + * @param titleTestID * @param contextualHelp * @param contextualHelpMarkdown * @param faqCategories @@ -42,6 +49,8 @@ export const RNavScreenWithLargeHeader = ({ children, fixedBottomSlot, title, + titleTestID, + goBack, description, contextualHelp, contextualHelpMarkdown, @@ -65,7 +74,7 @@ export const RNavScreenWithLargeHeader = ({ const headerProps: ComponentProps = useHeaderProps({ backAccessibilityLabel: I18n.t("global.buttons.back"), - goBack: navigation.goBack, + goBack: goBack ?? navigation.goBack, title, scrollValues: { contentOffsetY: translationY, @@ -100,7 +109,7 @@ export const RNavScreenWithLargeHeader = ({ style={IOStyles.horizontalContentPadding} onLayout={getTitleHeight} > -

{title}

+

{title}

{description && ( diff --git a/ts/hooks/useHeaderProps.tsx b/ts/hooks/useHeaderProps.tsx index e033e94f7f7..d59bc4d1c33 100644 --- a/ts/hooks/useHeaderProps.tsx +++ b/ts/hooks/useHeaderProps.tsx @@ -50,7 +50,7 @@ export type HeaderActionProps = | HeaderTwoActionsProps | HeaderThreeActionsProps; -type BackProps = +export type BackProps = | { goBack: () => void; backAccessibilityLabel: string; diff --git a/ts/navigation/OnboardingNavigator.tsx b/ts/navigation/OnboardingNavigator.tsx index 9a7eca3795a..a70b89842c4 100644 --- a/ts/navigation/OnboardingNavigator.tsx +++ b/ts/navigation/OnboardingNavigator.tsx @@ -1,6 +1,6 @@ import { createStackNavigator } from "@react-navigation/stack"; import * as React from "react"; -import FingerprintScreen from "../screens/onboarding/biometric&securityChecks/FingerprintScreen"; +import { isEmailUniquenessValidationEnabledSelector } from "../features/fastLogin/store/selectors"; import OnboardingCompletedScreen from "../screens/onboarding/OnboardingCompletedScreen"; import OnboardingEmailInsertScreen from "../screens/onboarding/OnboardingEmailInsertScreen"; import OnboardingEmailReadScreen from "../screens/onboarding/OnboardingEmailReadScreen"; @@ -11,12 +11,12 @@ import OnboardingServicesPreferenceScreen from "../screens/onboarding/Onboarding import OnboardingShareDataScreen from "../screens/onboarding/OnboardingShareDataScreen"; import OnboardingTosScreen from "../screens/onboarding/OnboardingTosScreen"; import ServicePreferenceCompleteScreen from "../screens/onboarding/ServicePreferenceCompleteScreen"; -import { isGestureEnabled } from "../utils/navigation"; -import MissingDevicePinScreen from "../screens/onboarding/biometric&securityChecks/MissingDevicePinScreen"; +import FingerprintScreen from "../screens/onboarding/biometric&securityChecks/FingerprintScreen"; import MissingDeviceBiometricScreen from "../screens/onboarding/biometric&securityChecks/MissingDeviceBiometricScreen"; +import MissingDevicePinScreen from "../screens/onboarding/biometric&securityChecks/MissingDevicePinScreen"; import CduEmailInsertScreen from "../screens/profile/CduEmailInsertScreen"; import { useIOSelector } from "../store/hooks"; -import { isEmailUniquenessValidationEnabledSelector } from "../features/fastLogin/store/selectors"; +import { isGestureEnabled } from "../utils/navigation"; import { OnboardingParamsList } from "./params/OnboardingParamsList"; import ROUTES from "./routes"; @@ -31,7 +31,6 @@ const OnboardingNavigator = () => { return ( { component={OnboardingServicesPreferenceScreen} /> {isEmailUniquenessValidationEnabled ? ( ) : ( )} diff --git a/ts/screens/onboarding/OnboardingServicesPreferenceScreen.tsx b/ts/screens/onboarding/OnboardingServicesPreferenceScreen.tsx index ae93b68606e..04aa858273a 100644 --- a/ts/screens/onboarding/OnboardingServicesPreferenceScreen.tsx +++ b/ts/screens/onboarding/OnboardingServicesPreferenceScreen.tsx @@ -1,16 +1,16 @@ +import { VSpacer } from "@pagopa/io-app-design-system"; import * as pot from "@pagopa/ts-commons/lib/pot"; import * as React from "react"; -import { SafeAreaView, ScrollView } from "react-native"; +import { SafeAreaView, View } from "react-native"; import { connect, useStore } from "react-redux"; -import { VSpacer } from "@pagopa/io-app-design-system"; import { ServicesPreferencesModeEnum } from "../../../definitions/backend/ServicesPreferencesMode"; import { InfoBox } from "../../components/box/InfoBox"; +import { confirmButtonProps } from "../../components/buttons/ButtonConfigurations"; import { H5 } from "../../components/core/typography/H5"; import { IOStyles } from "../../components/core/variables/IOStyles"; import { withLoadingSpinner } from "../../components/helpers/withLoadingSpinner"; -import BaseScreenComponent from "../../components/screens/BaseScreenComponent"; import FooterWithButtons from "../../components/ui/FooterWithButtons"; -import { confirmButtonProps } from "../../components/buttons/ButtonConfigurations"; +import { RNavScreenWithLargeHeader } from "../../components/ui/RNavScreenWithLargeHeader"; import I18n from "../../i18n"; import { IOStackNavigationRouteProps } from "../../navigation/params/AppParamsList"; import { OnboardingParamsList } from "../../navigation/params/OnboardingParamsList"; @@ -24,16 +24,16 @@ import { profileServicePreferencesModeSelector } from "../../store/reducers/profile"; import { GlobalState } from "../../store/reducers/types"; +import { getFlowType } from "../../utils/analytics"; import { emptyContextualHelp } from "../../utils/emptyContextualHelp"; -import { showToast } from "../../utils/showToast"; -import { useManualConfigBottomSheet } from "../profile/components/services/ManualConfigBottomSheet"; -import ServicesContactComponent from "../profile/components/services/ServicesContactComponent"; import { useOnFirstRender } from "../../utils/hooks/useOnFirstRender"; +import { showToast } from "../../utils/showToast"; import { trackServiceConfiguration, trackServiceConfigurationScreen } from "../profile/analytics"; -import { getFlowType } from "../../utils/analytics"; +import { useManualConfigBottomSheet } from "../profile/components/services/ManualConfigBottomSheet"; +import ServicesContactComponent from "../profile/components/services/ServicesContactComponent"; export type OnboardingServicesPreferenceScreenNavigationParams = { isFirstOnboarding: boolean; @@ -114,9 +114,25 @@ const OnboardingServicesPreferenceScreen = ( // show a badge when the user is not new const showBadge = !isFirstOnboarding; return ( - + + + + } + > - + - - + + {manualConfigBottomSheet} - + ); }; diff --git a/ts/screens/onboarding/OnboardingShareDataScreen.tsx b/ts/screens/onboarding/OnboardingShareDataScreen.tsx index 96708426578..feeb6b5785b 100644 --- a/ts/screens/onboarding/OnboardingShareDataScreen.tsx +++ b/ts/screens/onboarding/OnboardingShareDataScreen.tsx @@ -1,17 +1,17 @@ -import { IOColors, VSpacer } from "@pagopa/io-app-design-system"; +import { VSpacer } from "@pagopa/io-app-design-system"; import * as React from "react"; -import { Alert, SafeAreaView, ScrollView, StatusBar } from "react-native"; +import { Alert, SafeAreaView, View } from "react-native"; import { connect, useDispatch } from "react-redux"; import { Dispatch } from "redux"; import { InfoBox } from "../../components/box/InfoBox"; -import { Label } from "../../components/core/typography/Label"; -import { IOStyles } from "../../components/core/variables/IOStyles"; -import BaseScreenComponent from "../../components/screens/BaseScreenComponent"; -import FooterWithButtons from "../../components/ui/FooterWithButtons"; import { cancelButtonProps, confirmButtonProps } from "../../components/buttons/ButtonConfigurations"; +import { Label } from "../../components/core/typography/Label"; +import { IOStyles } from "../../components/core/variables/IOStyles"; +import FooterWithButtons from "../../components/ui/FooterWithButtons"; +import { RNavScreenWithLargeHeader } from "../../components/ui/RNavScreenWithLargeHeader"; import I18n from "../../i18n"; import { setMixpanelEnabled } from "../../store/actions/mixpanel"; import { abortOnboarding } from "../../store/actions/onboarding"; @@ -69,43 +69,49 @@ const OnboardingShareDataScreen = (props: Props): React.ReactElement => { }; return ( - + { + trackMixpanelSetEnabled( + true, + getFlowType(true, isFirstOnBoarding) + ); + props.setMixpanelEnabled(true); + }, + I18n.t("profile.main.privacy.shareData.screen.cta.shareData"), + undefined, + "share-data-confirm-button" + )} + /> + + } > - - + - + - - { - trackMixpanelSetEnabled( - true, - getFlowType(true, isFirstOnBoarding) - ); - props.setMixpanelEnabled(true); - }, - I18n.t("profile.main.privacy.shareData.screen.cta.shareData"), - undefined, - "share-data-confirm-button" - )} - /> + + {bottomSheet} - + ); }; diff --git a/ts/screens/profile/ShareDataScreen.tsx b/ts/screens/profile/ShareDataScreen.tsx index 5386c7a8f46..c015e90fbd6 100644 --- a/ts/screens/profile/ShareDataScreen.tsx +++ b/ts/screens/profile/ShareDataScreen.tsx @@ -2,13 +2,13 @@ import * as React from "react"; import { SafeAreaView, View } from "react-native"; import { connect } from "react-redux"; import { Dispatch } from "redux"; -import { IOStyles } from "../../components/core/variables/IOStyles"; -import FooterWithButtons from "../../components/ui/FooterWithButtons"; -import { RNavScreenWithLargeHeader } from "../../components/ui/RNavScreenWithLargeHeader"; import { cancelButtonProps, confirmButtonProps } from "../../components/buttons/ButtonConfigurations"; +import { IOStyles } from "../../components/core/variables/IOStyles"; +import FooterWithButtons from "../../components/ui/FooterWithButtons"; +import { RNavScreenWithLargeHeader } from "../../components/ui/RNavScreenWithLargeHeader"; import I18n from "../../i18n"; import { setMixpanelEnabled } from "../../store/actions/mixpanel"; import { isMixpanelEnabled } from "../../store/reducers/persistedPreferences"; @@ -66,6 +66,7 @@ const ShareDataScreen = (props: Props): React.ReactElement => { return (