feat(mobile): add real privacy policy (#234)

apps/mobile/app/(app)/(tabs)/settings.tsx

@@ -30,6 +30,7 @@ import {
   LogOutIcon,
   MessageSquareQuoteIcon,
   ScanFaceIcon,
+  ScrollTextIcon,
   ShapesIcon,
   Share2Icon,
   StarIcon,
@@ -172,6 +173,15 @@ export default function SettingsScreen() {
             {t(i18n)`Others`}
           </Text>
           <View>
+            <Link href="/privacy-policy" asChild>
+              <MenuItem
+                label={t(i18n)`Privacy policy`}
+                icon={ScrollTextIcon}
+                rightSection={
+                  <ChevronRightIcon className="h-5 w-5 text-primary" />
+                }
+              />
+            </Link>
             <Link href="/feedback" asChild disabled>
               <MenuItem
                 label={t(i18n)`Send feedback`}
@@ -241,18 +251,6 @@ export default function SettingsScreen() {
               ? `(${Constants.expoConfig.ios.buildNumber})`
               : ''}
           </Text>
-          <View className="flex-row gap-6">
-            <Link href="/terms-of-service">
-              <Text className="text-muted-foreground text-sm">
-                {t(i18n)`Terms of use`}
-              </Text>
-            </Link>
-            <Link href="/privacy-policy">
-              <Text className="text-muted-foreground text-sm">
-                {t(i18n)`Privacy policy`}
-              </Text>
-            </Link>
-          </View>
         </View>
       </ScrollView>
       <LinearGradient

apps/mobile/app/(auth)/login.tsx

@@ -45,18 +45,16 @@ export default function LoginScreen() {
         <Separator className="mx-auto my-3 w-[70%]" />
         {withEmail && <AuthEmail />}
       </View>
-      <Trans>
-        <Text className="mx-auto mt-4 px-4 text-center font-sans text-muted-foreground text-xs">
-          By continuing, you acknowledge that you understand and agree to the{' '}
-          <Link href="/terms-of-service">
-            <Text className="text-primary text-xs">Terms & Conditions</Text>
-          </Link>{' '}
-          and{' '}
-          <Link href="/privacy-policy">
-            <Text className="text-primary text-xs">Privacy Policy</Text>
-          </Link>
-        </Text>
-      </Trans>
+      <View className="px-4">
+        <Trans>
+          <Text className="mx-auto text-center font-sans text-muted-foreground text-xs">
+            By continuing, you acknowledge that you understand and agree to our{' '}
+            <Link href="/privacy-policy">
+              <Text className="text-primary text-xs">Privacy Policy</Text>
+            </Link>
+          </Text>
+        </Trans>
+      </View>
     </ScrollView>
   )
 }

apps/mobile/app/(aux)/_layout.tsx

@@ -4,42 +4,45 @@ import { theme } from '@/lib/theme'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
 import { Stack } from 'expo-router'
+import { SafeAreaView } from 'react-native'
 
 export default function AuxiliaryLayout() {
   const { colorScheme } = useColorScheme()
   const { i18n } = useLingui()
   return (
-    <Stack
-      screenOptions={{
-        headerShown: true,
-        headerBackTitleVisible: false,
-        headerTintColor: theme[colorScheme ?? 'light'].primary,
-        headerShadowVisible: false,
-        headerTitleStyle: {
-          fontFamily: 'Inter Medium',
-          fontSize: 16,
-          color: theme[colorScheme ?? 'light'].primary,
-        },
-        headerStyle: {
-          backgroundColor: theme[colorScheme ?? 'light'].background,
-        },
-        headerLeft: () => <BackButton />,
-      }}
-    >
-      <Stack.Screen
-        name="privacy-policy"
-        options={{
-          presentation: 'modal',
-          headerTitle: t(i18n)`Privacy Policy`,
+    <SafeAreaView className="flex-1 bg-card">
+      <Stack
+        screenOptions={{
+          headerShown: true,
+          headerBackTitleVisible: false,
+          headerTintColor: theme[colorScheme ?? 'light'].primary,
+          headerShadowVisible: false,
+          headerTitleStyle: {
+            fontFamily: 'Inter Medium',
+            fontSize: 16,
+            color: theme[colorScheme ?? 'light'].primary,
+          },
+          headerStyle: {
+            backgroundColor: theme[colorScheme ?? 'light'].background,
+          },
+          headerLeft: () => <BackButton />,
         }}
-      />
-      <Stack.Screen
-        name="terms-of-service"
-        options={{
-          presentation: 'modal',
-          headerTitle: t(i18n)`Terms & Conditions`,
-        }}
-      />
-    </Stack>
+      >
+        <Stack.Screen
+          name="privacy-policy"
+          options={{
+            presentation: 'modal',
+            headerTitle: t(i18n)`Privacy Policy`,
+          }}
+        />
+        <Stack.Screen
+          name="terms-of-service"
+          options={{
+            presentation: 'modal',
+            headerTitle: t(i18n)`Terms & Conditions`,
+          }}
+        />
+      </Stack>
+    </SafeAreaView>
   )
 }

apps/mobile/app/(aux)/privacy-policy.tsx

@@ -1,15 +1,80 @@
-import { Text } from 'react-native'
+import { Separator } from '@/components/ui/separator'
+import { Text } from '@/components/ui/text'
+import * as Linking from 'expo-linking'
+import { ScrollView, View } from 'react-native'
 
 export default function PrivacyScreen() {
   return (
-    <Text className="m-4 font-sans">
-      lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
-      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-      est laborum.
-    </Text>
+    <ScrollView className="bg-card" contentContainerClassName="px-6 py-3 gap-2">
+      <Text>
+        Hey there! Thanks for using 6pm. Here's the lowdown on what data we
+        collect, how we use it, and how we keep it safe. We aim to be as
+        transparent as possible, so let's dive in!
+      </Text>
+
+      <Text className="mt-2 font-semibold text-xl">What Info We Collect</Text>
+      <Text>To get you up and running, we collect some basic information:</Text>
+      <View className="gap-2 px-2">
+        <Text>✳︎ Email address</Text>
+        <Text>✳︎ Profile picture</Text>
+      </View>
+
+      <Text className="mt-2 font-semibold text-xl">How We Use Your Info</Text>
+      <Text>
+        We use the collected info to make sure everything runs smoothly. Here's
+        how:
+      </Text>
+      <View className="gap-2 px-2">
+        <Text>
+          ✳︎ Your email and avatar help us authenticate and identify you.
+        </Text>
+        <Text>
+          ✳︎ We share your user identity with Sentry for crash reporting and with
+          Posthog for product analytics. This helps us make the app better for
+          you and everyone else.
+        </Text>
+      </View>
+
+      <Text className="mt-2 font-semibold text-xl">
+        No Sharing of Transaction Records
+      </Text>
+      <Text>
+        Rest assured, your transaction records stay with us. We don't share them
+        with any third-party services.
+      </Text>
+
+      <Text className="mt-2 font-semibold text-xl">
+        Future Plans: End-to-End Encryption
+      </Text>
+      <Text>
+        We're all about keeping your data secure. We're planning to implement
+        end-to-end encryption soon to make sure your information is even safer.
+      </Text>
+
+      <Text className="mt-2 font-semibold text-xl">Data Security</Text>
+      <Text>
+        We take data security seriously and use various measures to protect your
+        info. However, keep in mind that no method of transmission over the
+        Internet or electronic storage is 100% secure. But we're doing our best!
+      </Text>
+
+      <Text className="mt-2 font-semibold text-xl">Contact Us</Text>
+      <Text>
+        Got any questions or concerns? Feel free to reach out to us at:
+      </Text>
+      <Text>
+        Email:{' '}
+        <Text
+          className="text-blue-600"
+          onPress={() => Linking.openURL('mailto:support@get6pm.com')}
+        >
+          support@get6pm.com
+        </Text>
+      </Text>
+      <Separator className="mx-auto my-3 w-[70%]" />
+      <Text className="text-center text-muted-foreground">
+        Last updated: 7/8/2024
+      </Text>
+    </ScrollView>
   )
 }

apps/mobile/components/transaction/scanner.tsx

@@ -126,7 +126,7 @@ export function Scanner({
     return (
       <View className="flex-1 items-center gap-4 bg-muted p-4">
         <ChevronsUpIcon className="size-10 text-muted-foreground" />
-        <Text>{t(i18n)`Swift up to scan transaction`}</Text>
+        <Text>{t(i18n)`Swipe up to scan transaction`}</Text>
       </View>
     )
   }