[C-2851] Add privacy policy to settings page (#3741)

AudiusProject · Jul 14, 2023 · 9468b70 · 9468b70
1 parent bb67f44
commit 9468b70
Show file tree

Hide file tree

Showing 10 changed files with 109 additions and 127 deletions.
diff --git a/packages/mobile/src/hooks/useIsOfflineModeEnabled.ts b/packages/mobile/src/hooks/useIsOfflineModeEnabled.ts
@@ -1,37 +1,7 @@
 import { FeatureFlags } from '@audius/common'
-import AsyncStorage from '@react-native-async-storage/async-storage'
-import { useAsync } from 'react-use'
 
 import { useFeatureFlag } from './useRemoteConfig'
 
-const OFFLINE_OVERRIDE_ASYNC_STORAGE_KEY = 'offline_mode_release_local_override'
-
-// DO NOT CHECK IN VALUE: true
-const hardCodeOverride = false
-let asyncOverride = false
-
-export const toggleLocalOfflineModeOverride = () => {
-  asyncOverride = !asyncOverride
-  AsyncStorage.setItem(
-    OFFLINE_OVERRIDE_ASYNC_STORAGE_KEY,
-    asyncOverride.toString()
-  )
-  alert(`Offline mode ${asyncOverride ? 'enabled' : 'disabled'}`)
-}
-
-export const useReadOfflineOverride = () =>
-  useAsync(async () => {
-    try {
-      asyncOverride =
-        (await AsyncStorage.getItem(OFFLINE_OVERRIDE_ASYNC_STORAGE_KEY)) ===
-        'true'
-    } catch (e) {
-      console.log('error reading local offline mode override')
-    }
-  })
-
 // TODO: remove helpers when feature is shipped
 export const useIsOfflineModeEnabled = () =>
-  useFeatureFlag(FeatureFlags.OFFLINE_MODE_RELEASE).isEnabled ||
-  asyncOverride ||
-  hardCodeOverride
+  useFeatureFlag(FeatureFlags.OFFLINE_MODE_RELEASE).isEnabled
diff --git a/packages/mobile/src/screens/favorites-screen/FavoritesScreen.tsx b/packages/mobile/src/screens/favorites-screen/FavoritesScreen.tsx
@@ -5,7 +5,6 @@ import IconPlaylists from 'app/assets/images/iconPlaylists.svg'
 import { Screen, ScreenContent, ScreenHeader } from 'app/components/core'
 import { TopTabNavigator } from 'app/components/top-tab-bar'
 import { useAppTabScreen } from 'app/hooks/useAppTabScreen'
-import { useReadOfflineOverride } from 'app/hooks/useIsOfflineModeEnabled'
 
 import { AlbumsTab } from './AlbumsTab'
 import { FavoritesDownloadSection } from './FavoritesDownloadSection'
@@ -36,7 +35,6 @@ const favoritesScreens = [
 
 export const FavoritesScreen = () => {
   useAppTabScreen()
-  useReadOfflineOverride()
 
   return (
     <Screen>

diff --git a/packages/mobile/src/screens/settings-screen/AboutScreen.tsx b/packages/mobile/src/screens/settings-screen/AboutScreen.tsx
@@ -1,8 +1,17 @@
-import { useCallback, useEffect, useState } from 'react'
-
 import { COPYRIGHT_TEXT } from 'audius-client/src/utils/copyright'
-import { View, Image, TouchableWithoutFeedback } from 'react-native'
+import {
+  AUDIUS_CAREERS_LINK,
+  AUDIUS_CONTACT_EMAIL_LINK,
+  AUDIUS_DISCORD_LINK,
+  AUDIUS_HELP_LINK,
+  AUDIUS_INSTAMGRAM_LINK,
+  AUDIUS_TWITTER_LINK,
+  PRIVACY_POLICY,
+  TERMS_OF_SERVICE
+} from 'audius-client/src/utils/route'
+import { View, Image } from 'react-native'
 import codePush from 'react-native-code-push'
+import { useAsync } from 'react-use'
 
 import appIcon from 'app/assets/images/appIcon.png'
 import IconCareers from 'app/assets/images/iconCareers.svg'
@@ -11,7 +20,6 @@ import IconDiscord from 'app/assets/images/iconDiscord.svg'
 import IconInstagram from 'app/assets/images/iconInstagram.svg'
 import IconTwitter from 'app/assets/images/iconTwitterBird.svg'
 import { Screen, ScreenContent, Text } from 'app/components/core'
-import { toggleLocalOfflineModeOverride } from 'app/hooks/useIsOfflineModeEnabled'
 import { makeStyles } from 'app/styles'
 
 import packageInfo from '../../../package.json'
@@ -33,7 +41,8 @@ const messages = {
   contact: 'Contact Us',
   careers: 'Careers at Audius',
   help: 'Help / FAQ',
-  terms: 'Terms & Privacy Policy'
+  terms: 'Terms of Service',
+  privacy: 'Privacy Policy'
 }
 
 const useStyles = makeStyles(({ spacing }) => ({
@@ -52,66 +61,51 @@ const useStyles = makeStyles(({ spacing }) => ({
 
 export const AboutScreen = () => {
   const styles = useStyles()
-  const [clickCount, setClickCount] = useState(0)
-  const [codepushUpdateNumber, setCodepushUpdateNumber] = useState<
-    string | null
-  >(null)
-  const handleTitleClick = useCallback(() => {
-    if (clickCount >= 19) {
-      toggleLocalOfflineModeOverride()
-      setClickCount(0)
-    } else {
-      setClickCount(clickCount + 1)
-    }
-  }, [clickCount])
-  useEffect(() => {
-    codePush.getUpdateMetadata().then((res) => {
-      if (res) {
-        setCodepushUpdateNumber(res?.label)
-      }
-    })
-  }, [])
+
+  const { value: codePushLabel } = useAsync(async () => {
+    const metadata = await codePush.getUpdateMetadata()
+    return metadata?.label
+  })
 
   return (
     <Screen variant='secondary' title={messages.title} topbarRight={null}>
       <ScreenContent isOfflineCapable>
         <View style={styles.header}>
           <Image source={appIcon} style={styles.appIcon} />
           <View>
-            <TouchableWithoutFeedback onPress={handleTitleClick}>
-              <Text variant='h2'>{messages.appName}</Text>
-            </TouchableWithoutFeedback>
+            <Text variant='h2'>{messages.appName}</Text>
             <Text variant='body2'>
               {messages.version} {appVersion}
-              {codepushUpdateNumber == null
-                ? null
-                : ` c${codepushUpdateNumber}`}
+              {!codePushLabel ? null : ` c${codePushLabel}`}
             </Text>
             <Text variant='body2'>{messages.copyright}</Text>
           </View>
         </View>
-        <SettingsRow url='https://discordapp.com/invite/yNUg2e2' firstItem>
+        <SettingsRow url={AUDIUS_DISCORD_LINK} firstItem>
           <SettingsRowLabel label={messages.discord} icon={IconDiscord} />
         </SettingsRow>
-        <SettingsRow url='https://twitter.com/AudiusProject'>
+        <SettingsRow url={AUDIUS_TWITTER_LINK}>
           <SettingsRowLabel label={messages.twitter} icon={IconTwitter} />
         </SettingsRow>
-        <SettingsRow url='https://www.instagram.com/audiusmusic/'>
+        <SettingsRow url={AUDIUS_INSTAMGRAM_LINK}>
           <SettingsRowLabel label={messages.instagram} icon={IconInstagram} />
         </SettingsRow>
-        <SettingsRow url='mailto:contact@audius.co'>
+        <SettingsRow url={AUDIUS_CONTACT_EMAIL_LINK}>
           <SettingsRowLabel label={messages.contact} icon={IconContact} />
         </SettingsRow>
-        <SettingsRow url='https://jobs.lever.co/audius'>
+        <SettingsRow url={AUDIUS_CAREERS_LINK}>
           <SettingsRowLabel label={messages.careers} icon={IconCareers} />
         </SettingsRow>
         <Divider />
-        <SettingsRow url='https://help.audius.co/'>
+        <SettingsRow url={AUDIUS_HELP_LINK}>
           <SettingsRowLabel label={messages.help} />
         </SettingsRow>
-        <SettingsRow url='https://audius.co/legal/terms-of-use'>
+        <SettingsRow url={`https://audius.co${TERMS_OF_SERVICE}`}>
           <SettingsRowLabel label={messages.terms} />
         </SettingsRow>
+        <SettingsRow url={`https://audius.co${PRIVACY_POLICY}`}>
+          <SettingsRowLabel label={messages.privacy} />
+        </SettingsRow>
       </ScreenContent>
     </Screen>
   )

diff --git a/packages/web/src/components/groupable-list/Row.module.css b/packages/web/src/components/groupable-list/Row.module.css
@@ -40,6 +40,7 @@
   align-items: center;
   font-size: var(--font-s);
   font-weight: var(--font-medium);
+  color: var(--neutral);
 }
 
 .title i {

diff --git a/packages/web/src/components/groupable-list/Row.tsx b/packages/web/src/components/groupable-list/Row.tsx
@@ -1,6 +1,7 @@
-import { ReactNode } from 'react'
+import { ComponentType, ReactNode } from 'react'
 
 import cn from 'classnames'
+import { Link, LinkProps } from 'react-router-dom'
 
 import { ReactComponent as IconCaretRight } from 'assets/img/iconCaretRight.svg'
 
@@ -18,7 +19,7 @@ type RowProps = {
   includeSpacing?: boolean
   // Adds an arrow to the row component if `onClick` is provided
   onClick?: () => void
-}
+} & Omit<Partial<LinkProps>, 'prefix'>
 
 /**
  * A row component to be used within a <Grouping />
@@ -29,16 +30,32 @@ const Row = ({
   body,
   children,
   onClick,
-  includeSpacing = true
+  href,
+  to,
+  includeSpacing = true,
+  ...other
 }: RowProps) => {
+  const RootComponent = (href ? 'a' : to ? Link : 'div') as ComponentType<any>
+
+  const rootProps = href
+    ? {
+        target: '_blank',
+        rel: 'norefferer'
+      }
+    : {}
+
   return (
-    <div
+    <RootComponent
       className={cn(styles.row, {
         [styles.isClickable]: !!onClick,
         [styles.hasBody]: !!children,
         [styles.includeSpacing]: includeSpacing
       })}
+      to={to}
+      href={href}
       onClick={onClick}
+      {...rootProps}
+      {...other}
     >
       <div className={styles.content}>
         {title && (
@@ -55,7 +72,7 @@ const Row = ({
         )}
       </div>
       {onClick && <IconCaretRight className={styles.iconCaretRight} />}
-    </div>
+    </RootComponent>
   )
 }
 

diff --git a/packages/web/src/pages/settings-page/components/desktop/SettingsPage.module.css b/packages/web/src/pages/settings-page/components/desktop/SettingsPage.module.css
@@ -53,11 +53,11 @@
   line-height: 20px;
 }
 
-.terms {
+.link {
   color: var(--neutral-light-5);
 }
 
-.terms:hover {
+.link:hover {
   color: var(--neutral-light-2);
 }
 

diff --git a/packages/web/src/pages/settings-page/components/desktop/SettingsPage.tsx b/packages/web/src/pages/settings-page/components/desktop/SettingsPage.tsx
@@ -46,7 +46,7 @@ import DownloadApp from 'services/download-app/DownloadApp'
 import { isMobile, isElectron, getOS } from 'utils/clientUtil'
 import { COPYRIGHT_TEXT } from 'utils/copyright'
 import { useSelector } from 'utils/reducer'
-import { TERMS_OF_SERVICE } from 'utils/route'
+import { PRIVACY_POLICY, TERMS_OF_SERVICE } from 'utils/route'
 
 import packageInfo from '../../../../../package.json'
 
@@ -71,6 +71,7 @@ const messages = {
   version: 'Audius Version',
   copyright: COPYRIGHT_TEXT,
   terms: 'Terms of Service',
+  privacy: 'Privacy Policy',
   emailSent: 'Email Sent!',
   emailNotSent: 'Something broke! Please try again!',
   darkModeOn: 'Dark',
@@ -448,12 +449,21 @@ export const SettingsPage = (props: SettingsPageProps) => {
         <span>
           {messages.copyright} -{' '}
           <Link
-            className={styles.terms}
+            className={styles.link}
             to={TERMS_OF_SERVICE}
             target='_blank'
             rel='noreferrer'
           >
             {messages.terms}
+          </Link>{' '}
+          -{' '}
+          <Link
+            className={styles.link}
+            to={PRIVACY_POLICY}
+            target='_blank'
+            rel='noreferrer'
+          >
+            {messages.privacy}
           </Link>
         </span>
       </div>