feat(suite-native): analytics consent screen redesign

suite-native/intl/src/en.ts

@@ -803,8 +803,9 @@ export const en = {
             },
         },
         analyticsConsentScreen: {
-            title: 'Better with you',
-            subtitle: 'Improve Trezor Suite Lite with your anonymous data.',
+            title: 'Better—with you.',
+            subtitle:
+                'Help us shape a better experience for you by allowing anonymous data collection.',
             bulletPoints: {
                 privacy: {
                     title: 'Your data is private',
@@ -818,6 +819,11 @@ export const en = {
                 },
             },
             helpSwitchTitle: 'Help us anonymously',
+            learnMoreButton: 'More about privacy',
+
+            // TODO: this should be removed when is the new onboarding enabled by default
+            titleLegacy: 'Better with you',
+            subtitleLegacy: 'Improve Trezor Suite Lite with your anonymous data.',
             learnMore: '<securityLink>More</securityLink> about privacy',
         },
     },

suite-native/module-onboarding-legacy/src/screens/AnalyticsConsentScreen.tsx

@@ -140,10 +140,10 @@ export const AnalyticsConsentScreen = () => {
             >
                 <Icon size="extraLarge" name="trezorLogo" color="iconDefault" />
                 <Text variant="titleMedium" style={applyStyle(titleStyle)}>
-                    <Translation id="moduleOnboarding.analyticsConsentScreen.title" />
+                    <Translation id="moduleOnboarding.analyticsConsentScreen.titleLegacy" />
                 </Text>
                 <Text color="textSubdued" style={applyStyle(subtitleStyle)}>
-                    <Translation id="moduleOnboarding.analyticsConsentScreen.subtitle" />
+                    <Translation id="moduleOnboarding.analyticsConsentScreen.subtitleLegacy" />
                 </Text>
                 <VStack style={applyStyle(analyticsConsentStyle)}>
                     <Stack spacing="sp24" paddingBottom="sp16">

suite-native/module-onboarding/src/components/AnalyticsInfoRow.tsx

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+
+import { Icon, IconName } from '@suite-native/icons';
+import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
+import { Box, HStack, Text, VStack } from '@suite-native/atoms';
+
+type AnalyticsInfoRowProps = {
+    iconName: IconName;
+    title: ReactNode;
+    description: ReactNode;
+};
+
+const WRAPPER_SIZE = 36;
+
+const iconWrapper = prepareNativeStyle(utils => ({
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: WRAPPER_SIZE,
+    height: WRAPPER_SIZE,
+    backgroundColor: utils.colors.backgroundSurfaceElevation2,
+    borderRadius: utils.borders.radii.r12,
+    borderWidth: 1,
+    borderColor: utils.colors.backgroundTertiaryDefaultOnElevation0,
+}));
+
+export const AnalyticsInfoRow = ({ iconName, title, description }: AnalyticsInfoRowProps) => {
+    const { applyStyle } = useNativeStyles();
+
+    return (
+        <HStack spacing="sp12" flexDirection="row" alignItems="center">
+            <Box style={applyStyle(iconWrapper)}>
+                <Icon name={iconName} size="mediumLarge" />
+            </Box>
+            <VStack spacing="sp4" flex={1}>
+                <Text variant="highlight">{title}</Text>
+                <Text variant="hint" color="textSubdued">
+                    {description}
+                </Text>
+            </VStack>
+        </HStack>
+    );
+};

suite-native/module-onboarding/src/navigation/OnboardingStackNavigator.tsx

@@ -7,6 +7,7 @@ import {
 } from '@suite-native/navigation';
 
 import { WelcomeScreen } from '../screens/WelcomeScreen';
+import { AnalyticsConsentScreen } from '../screens/AnalyticsConsentScreen';
 
 export const OnboardingStack = createNativeStackNavigator<OnboardingStackParamList>();
 
@@ -16,5 +17,9 @@ export const OnboardingStackNavigator = () => (
         screenOptions={stackNavigationOptionsConfig}
     >
         <OnboardingStack.Screen name={OnboardingStackRoutes.Welcome} component={WelcomeScreen} />
+        <OnboardingStack.Screen
+            name={OnboardingStackRoutes.AnalyticsConsent}
+            component={AnalyticsConsentScreen}
+        />
     </OnboardingStack.Navigator>
 );

suite-native/module-onboarding/src/screens/AnalyticsConsentScreen.tsx

@@ -0,0 +1,129 @@
+import { useState } from 'react';
+
+import { Screen } from '@suite-native/navigation';
+import { Box, Button, Card, Switch, Text, TitleHeader, VStack } from '@suite-native/atoms';
+import { Translation } from '@suite-native/intl';
+import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
+import { EventType, analytics } from '@suite-native/analytics';
+import { useOpenLink } from '@suite-native/link';
+import { useToast } from '@suite-native/toasts';
+
+import { AnalyticsInfoRow } from '../components/AnalyticsInfoRow';
+
+const LEARN_MORE_LINK = 'https://data.trezor.io/legal/privacy-policy.html';
+
+const consentWrapperStyle = prepareNativeStyle(utils => ({
+    padding: utils.spacings.sp16,
+    borderRadius: utils.borders.radii.r16,
+    backgroundColor: utils.colors.backgroundTertiaryDefaultOnElevation1,
+}));
+
+const reportAnalyticsOnboardingCompleted = (isTrackingAllowed: boolean) => {
+    // For users who have not allowed tracking, enable analytics just for reporting
+    // the OnboardingCompleted event and then disable it again.
+    if (!isTrackingAllowed) analytics.enable();
+    analytics.report({
+        type: EventType.OnboardingCompleted,
+        payload: { analyticsPermission: isTrackingAllowed },
+    });
+    if (!isTrackingAllowed) analytics.disable();
+};
+
+export const AnalyticsConsentScreen = () => {
+    const { showToast } = useToast();
+    const [isEnabled, setIsEnabled] = useState(true);
+
+    const { applyStyle } = useNativeStyles();
+
+    const handleOpenLink = useOpenLink();
+
+    const handleRedirect = () => {
+        reportAnalyticsOnboardingCompleted(isEnabled);
+
+        showToast({ variant: 'warning', message: 'TODO: implement next screen' });
+        // navigation.navigate(OnboardingStackRoutes.Biometrics);
+    };
+
+    const handleAnalyticsConsent = () => {
+        analytics.enable();
+        handleRedirect();
+    };
+
+    const handleClickOnLearMoreLink = () => {
+        handleOpenLink(LEARN_MORE_LINK);
+    };
+
+    return (
+        <Screen>
+            <VStack justifyContent="space-between" flex={1}>
+                <VStack spacing="sp24" paddingTop="sp32">
+                    <TitleHeader
+                        title={<Translation id="moduleOnboarding.analyticsConsentScreen.title" />}
+                        titleVariant="titleMedium"
+                        subtitle={
+                            <Translation id="moduleOnboarding.analyticsConsentScreen.subtitle" />
+                        }
+                        titleSpacing="sp12"
+                    />
+                    <Card>
+                        <Box>
+                            <VStack flex={1}>
+                                <VStack spacing="sp24" paddingBottom="sp16">
+                                    <AnalyticsInfoRow
+                                        iconName="eyeSlash"
+                                        title={
+                                            <Translation id="moduleOnboarding.analyticsConsentScreen.bulletPoints.privacy.title" />
+                                        }
+                                        description={
+                                            <Translation id="moduleOnboarding.analyticsConsentScreen.bulletPoints.privacy.description" />
+                                        }
+                                    />
+                                    <AnalyticsInfoRow
+                                        iconName="bugBeetle"
+                                        title={
+                                            <Translation id="moduleOnboarding.analyticsConsentScreen.bulletPoints.dataCollection.title" />
+                                        }
+                                        description={
+                                            <Translation id="moduleOnboarding.analyticsConsentScreen.bulletPoints.dataCollection.description" />
+                                        }
+                                    />
+                                </VStack>
+                                <Box
+                                    flexDirection="row"
+                                    alignItems="center"
+                                    justifyContent="space-between"
+                                    style={applyStyle(consentWrapperStyle)}
+                                >
+                                    <Text>
+                                        <Translation id="moduleOnboarding.analyticsConsentScreen.helpSwitchTitle" />
+                                    </Text>
+                                    <Switch
+                                        isChecked={isEnabled}
+                                        onChange={enabled => {
+                                            setIsEnabled(enabled);
+                                        }}
+                                    />
+                                </Box>
+                            </VStack>
+                        </Box>
+                    </Card>
+                </VStack>
+                <VStack spacing="sp12">
+                    <Button
+                        testID="@onboarding/UserDataConsent/allow"
+                        onPress={isEnabled ? handleAnalyticsConsent : handleRedirect}
+                    >
+                        <Translation id="generic.buttons.confirm" />
+                    </Button>
+                    <Button
+                        colorScheme="tertiaryElevation0"
+                        testID="@onboarding/UserDataConsent/allow"
+                        onPress={handleClickOnLearMoreLink}
+                    >
+                        <Translation id="moduleOnboarding.analyticsConsentScreen.learnMoreButton" />
+                    </Button>
+                </VStack>
+            </VStack>
+        </Screen>
+    );
+};

suite-native/module-onboarding/src/screens/WelcomeScreen.tsx

@@ -2,14 +2,18 @@ import { ImageBackground, StyleSheet } from 'react-native';
 
 import { LinearGradient } from 'expo-linear-gradient';
 
-import { Screen } from '@suite-native/navigation';
+import {
+    OnboardingStackParamList,
+    OnboardingStackRoutes,
+    Screen,
+    StackProps,
+} from '@suite-native/navigation';
 import { Box, Button, Text, VStack } from '@suite-native/atoms';
 import { Translation } from '@suite-native/intl';
 import { Icon } from '@suite-native/icons';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 import { hexToRgba } from '@suite-common/suite-utils';
 import { getWindowHeight } from '@trezor/env-utils';
-import { useToast } from '@suite-native/toasts';
 import { colorVariants } from '@trezor/theme';
 
 const GRADIENT_HEIGHT = getWindowHeight() / 3;
@@ -29,14 +33,18 @@ const textColorStyle = prepareNativeStyle(() => ({
     color: colorVariants.dark.textDefault,
 }));
 
-export const WelcomeScreen = () => {
-    const { showToast } = useToast();
-
+export const WelcomeScreen = ({
+    navigation,
+}: StackProps<OnboardingStackParamList, OnboardingStackRoutes.Welcome>) => {
     const { applyStyle } = useNativeStyles();
 
     // 'transparent' color is not working in context of LinearGradient on iOS. RGBA has to be used instead.
     const transparentColor = hexToRgba('#000000', 0.01);
 
+    const navigateToAnalyticsConsent = () => {
+        navigation.navigate(OnboardingStackRoutes.AnalyticsConsent);
+    };
+
     return (
         <>
             <ImageBackground
@@ -69,14 +77,7 @@ export const WelcomeScreen = () => {
                         </Box>
                     </VStack>
                     <Box style={applyStyle(buttonWrapperStyle)}>
-                        <Button
-                            onPress={() =>
-                                showToast({
-                                    variant: 'warning',
-                                    message: 'TODO: implement next screen',
-                                })
-                            }
-                        >
+                        <Button onPress={navigateToAnalyticsConsent}>
                             <Translation id="moduleOnboarding.welcomeScreen.button" />
                         </Button>
                     </Box>

suite-native/navigation/src/navigators.ts

@@ -114,6 +114,7 @@ export type LegacyOnboardingStackParamList = {
 
 export type OnboardingStackParamList = {
     [OnboardingStackRoutes.Welcome]: undefined;
+    [OnboardingStackRoutes.AnalyticsConsent]: undefined;
 };
 
 export type AccountsImportStackParamList = {

suite-native/navigation/src/routes.ts

@@ -35,6 +35,7 @@ export enum LegacyOnboardingStackRoutes {
 
 export enum OnboardingStackRoutes {
     Welcome = 'Welcome',
+    AnalyticsConsent = 'AnalyticsConsent',
 }
 
 export enum AccountsImportStackRoutes {