Remove invites code UI (#2851)

* Hide invite codes UI, comment in settings

* Just comment out

src/view/screens/Settings/index.tsx

@@ -41,7 +41,7 @@ import {
 import {useSession, useSessionApi, SessionAccount} from '#/state/session'
 import {useProfileQuery} from '#/state/queries/profile'
 import {useClearPreferencesMutation} from '#/state/queries/preferences'
-import {useInviteCodesQuery} from '#/state/queries/invites'
+// TODO import {useInviteCodesQuery} from '#/state/queries/invites'
 import {clear as clearStorage} from '#/state/persisted/store'
 import {clearLegacyStorage} from '#/state/persisted/legacy'
 import {STATUS_PAGE_URL} from 'lib/constants'
@@ -153,20 +153,21 @@ export function SettingsScreen({}: Props) {
   const {openModal} = useModalControls()
   const {isSwitchingAccounts, accounts, currentAccount} = useSession()
   const {mutate: clearPreferences} = useClearPreferencesMutation()
-  const {data: invites} = useInviteCodesQuery()
+  // TODO
-  const invitesAvailable = invites?.available?.length ?? 0
+  // const {data: invites} = useInviteCodesQuery()
+  // const invitesAvailable = invites?.available?.length ?? 0
   const {setShowLoggedOut} = useLoggedOutViewControls()
   const closeAllActiveElements = useCloseAllActiveElements()
   const exportCarControl = useDialogControl()
 
-  const primaryBg = useCustomPalette<ViewStyle>({
+  // const primaryBg = useCustomPalette<ViewStyle>({
-    light: {backgroundColor: colors.blue0},
+  //   light: {backgroundColor: colors.blue0},
-    dark: {backgroundColor: colors.blue6},
+  //   dark: {backgroundColor: colors.blue6},
-  })
+  // })
-  const primaryText = useCustomPalette<TextStyle>({
+  // const primaryText = useCustomPalette<TextStyle>({
-    light: {color: colors.blue3},
+  //   light: {color: colors.blue3},
-    dark: {color: colors.blue2},
+  //   dark: {color: colors.blue2},
-  })
+  // })
 
   const dangerBg = useCustomPalette<ViewStyle>({
     light: {backgroundColor: colors.red1},
@@ -209,10 +210,12 @@ export function SettingsScreen({}: Props) {
     exportCarControl.open()
   }, [exportCarControl])
 
+  /* TODO
   const onPressInviteCodes = React.useCallback(() => {
     track('Settings:InvitecodesButtonClicked')
     openModal({name: 'invite-codes'})
   }, [track, openModal])
+ */
 
   const onPressLanguageSettings = React.useCallback(() => {
     navigation.navigate('LanguageSettings')
@@ -392,51 +395,57 @@ export function SettingsScreen({}: Props) {
 
         <View style={styles.spacer20} />
 
-        <Text type="xl-bold" style={[pal.text, styles.heading]}>
+        {/* TODO (
-          <Trans>Invite a Friend</Trans>
+          <>
-        </Text>
+            <Text type="xl-bold" style={[pal.text, styles.heading]}>
+              <Trans>Invite a Friend</Trans>
+            </Text>
 
-        <TouchableOpacity
+            <TouchableOpacity
-          testID="inviteFriendBtn"
+              testID="inviteFriendBtn"
-          style={[
+              style={[
-            styles.linkCard,
+                styles.linkCard,
-            pal.view,
+                pal.view,
-            isSwitchingAccounts && styles.dimmed,
+                isSwitchingAccounts && styles.dimmed,
-          ]}
+              ]}
-          onPress={isSwitchingAccounts ? undefined : onPressInviteCodes}
+              onPress={isSwitchingAccounts ? undefined : onPressInviteCodes}
-          accessibilityRole="button"
+              accessibilityRole="button"
-          accessibilityLabel={_(msg`Invite`)}
+              accessibilityLabel={_(msg`Invite`)}
-          accessibilityHint={_(msg`Opens invite code list`)}
+              accessibilityHint={_(msg`Opens invite code list`)}
-          disabled={invites?.disabled}>
+              disabled={invites?.disabled}>
-          <View
+              <View
-            style={[
+                style={[
-              styles.iconContainer,
+                  styles.iconContainer,
-              invitesAvailable > 0 ? primaryBg : pal.btn,
+                  invitesAvailable > 0 ? primaryBg : pal.btn,
-            ]}>
+                ]}>
-            <FontAwesomeIcon
+                <FontAwesomeIcon
-              icon="ticket"
+                  icon="ticket"
-              style={
+                  style={
-                (invitesAvailable > 0
+                    (invitesAvailable > 0
-                  ? primaryText
+                      ? primaryText
-                  : pal.text) as FontAwesomeIconStyle
+                      : pal.text) as FontAwesomeIconStyle
-              }
+                  }
-            />
+                />
-          </View>
+              </View>
-          <Text type="lg" style={invitesAvailable > 0 ? pal.link : pal.text}>
+              <Text
-            {invites?.disabled ? (
+                type="lg"
-              <Trans>
+                style={invitesAvailable > 0 ? pal.link : pal.text}>
-                Your invite codes are hidden when logged in using an App
+                {invites?.disabled ? (
-                Password
+                  <Trans>
-              </Trans>
+                    Your invite codes are hidden when logged in using an App
-            ) : invitesAvailable === 1 ? (
+                    Password
-              <Trans>{invitesAvailable} invite code available</Trans>
+                  </Trans>
-            ) : (
+                ) : invitesAvailable === 1 ? (
-              <Trans>{invitesAvailable} invite codes available</Trans>
+                  <Trans>{invitesAvailable} invite code available</Trans>
-            )}
+                ) : (
-          </Text>
+                  <Trans>{invitesAvailable} invite codes available</Trans>
-        </TouchableOpacity>
+                )}
+              </Text>
+            </TouchableOpacity>
 
-        <View style={styles.spacer20} />
+            <View style={styles.spacer20} />
+          </>
+        )*/}
 
         <Text type="xl-bold" style={[pal.text, styles.heading]}>
           <Trans>Accessibility</Trans>

src/view/shell/Drawer.tsx

@@ -44,12 +44,10 @@ import {formatCountShortOnly} from 'view/com/util/numeric/format'
 import {Trans, msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useSetDrawerOpen} from '#/state/shell'
-import {useModalControls} from '#/state/modals'
 import {useSession, SessionAccount} from '#/state/session'
 import {useProfileQuery} from '#/state/queries/profile'
 import {useUnreadNotifications} from '#/state/queries/notifications/unread'
 import {emitSoftReset} from '#/state/events'
-import {useInviteCodesQuery} from '#/state/queries/invites'
 import {NavSignupCard} from '#/view/shell/NavSignupCard'
 import {TextLink} from '../com/util/Link'
 
@@ -228,8 +226,7 @@ let DrawerContent = ({}: {}): React.ReactNode => {
 
           {hasSession ? (
             <>
-              <InviteCodes />
+              <View style={{height: 16}} />
-              <View style={{height: 10}} />
               <SearchMenuItem isActive={isAtSearch} onPress={onPressSearch} />
               <HomeMenuItem isActive={isAtHome} onPress={onPressHome} />
               <NotificationsMenuItem
@@ -621,56 +618,6 @@ function MenuItem({
   )
 }
 
-let InviteCodes = ({}: {}): React.ReactNode => {
-  const {track} = useAnalytics()
-  const setDrawerOpen = useSetDrawerOpen()
-  const pal = usePalette('default')
-  const {data: invites} = useInviteCodesQuery()
-  const invitesAvailable = invites?.available?.length ?? 0
-  const {openModal} = useModalControls()
-  const {_} = useLingui()
-
-  const onPress = React.useCallback(() => {
-    track('Menu:ItemClicked', {url: '#invite-codes'})
-    setDrawerOpen(false)
-    openModal({name: 'invite-codes'})
-  }, [openModal, track, setDrawerOpen])
-
-  return (
-    <TouchableOpacity
-      testID="menuItemInviteCodes"
-      style={styles.inviteCodes}
-      onPress={onPress}
-      accessibilityRole="button"
-      accessibilityLabel={_(msg`Invite codes: ${invitesAvailable} available`)}
-      accessibilityHint={_(msg`Opens list of invite codes`)}
-      disabled={invites?.disabled}>
-      <FontAwesomeIcon
-        icon="ticket"
-        style={[
-          styles.inviteCodesIcon,
-          invitesAvailable > 0 ? pal.link : pal.textLight,
-        ]}
-        size={18}
-      />
-      <Text
-        type="lg-medium"
-        style={invitesAvailable > 0 ? pal.link : pal.textLight}>
-        {invites?.disabled ? (
-          <Trans>
-            Your invite codes are hidden when logged in using an App Password
-          </Trans>
-        ) : invitesAvailable === 1 ? (
-          <Trans>{invitesAvailable} invite code available</Trans>
-        ) : (
-          <Trans>{invitesAvailable} invite codes available</Trans>
-        )}
-      </Text>
-    </TouchableOpacity>
-  )
-}
-InviteCodes = React.memo(InviteCodes)
-
 const styles = StyleSheet.create({
   view: {
     flex: 1,

src/view/shell/desktop/RightNav.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import {StyleSheet, View} from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {usePalette} from 'lib/hooks/usePalette'
 import {DesktopSearch} from './Search'
 import {DesktopFeeds} from './Feeds'
@@ -9,12 +8,9 @@ import {TextLink} from 'view/com/util/Link'
 import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants'
 import {s} from 'lib/styles'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {formatCount} from 'view/com/util/numeric/format'
-import {useModalControls} from '#/state/modals'
 import {useLingui} from '@lingui/react'
-import {Plural, Trans, msg, plural} from '@lingui/macro'
+import {Trans, msg} from '@lingui/macro'
 import {useSession} from '#/state/session'
-import {useInviteCodesQuery} from '#/state/queries/invites'
 
 export function DesktopRightNav({routeName}: {routeName: string}) {
   const pal = usePalette('default')
@@ -103,78 +99,11 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
             />
           </View>
         </View>
-
-        {hasSession && <InviteCodes />}
       </View>
     </View>
   )
 }
 
-function InviteCodes() {
-  const pal = usePalette('default')
-  const {openModal} = useModalControls()
-  const {data: invites} = useInviteCodesQuery()
-  const invitesAvailable = invites?.available?.length ?? 0
-  const {_} = useLingui()
-
-  const onPress = React.useCallback(() => {
-    openModal({name: 'invite-codes'})
-  }, [openModal])
-
-  if (!invites) {
-    return null
-  }
-
-  if (invites?.disabled) {
-    return (
-      <View style={[styles.inviteCodes, pal.border]}>
-        <FontAwesomeIcon
-          icon="ticket"
-          style={[styles.inviteCodesIcon, pal.textLight]}
-          size={16}
-        />
-        <Text type="md-medium" style={pal.textLight}>
-          <Trans>
-            Your invite codes are hidden when logged in using an App Password
-          </Trans>
-        </Text>
-      </View>
-    )
-  }
-
-  return (
-    <TouchableOpacity
-      style={[styles.inviteCodes, pal.border]}
-      onPress={onPress}
-      accessibilityRole="button"
-      accessibilityLabel={_(
-        plural(invitesAvailable, {
-          one: 'Invite codes: # available',
-          other: 'Invite codes: # available',
-        }),
-      )}
-      accessibilityHint={_(msg`Opens list of invite codes`)}>
-      <FontAwesomeIcon
-        icon="ticket"
-        style={[
-          styles.inviteCodesIcon,
-          invitesAvailable > 0 ? pal.link : pal.textLight,
-        ]}
-        size={16}
-      />
-      <Text
-        type="md-medium"
-        style={invitesAvailable > 0 ? pal.link : pal.textLight}>
-        <Plural
-          value={formatCount(invitesAvailable)}
-          one="# invite code available"
-          other="# invite codes available"
-        />
-      </Text>
-    </TouchableOpacity>
-  )
-}
-
 const styles = StyleSheet.create({
   rightNav: {
     // @ts-ignore web only
@@ -193,18 +122,6 @@ const styles = StyleSheet.create({
   messageLine: {
     marginBottom: 10,
   },
-
-  inviteCodes: {
-    borderTopWidth: 1,
-    paddingHorizontal: 12,
-    paddingVertical: 12,
-    flexDirection: 'row',
-  },
-  inviteCodesIcon: {
-    marginTop: 2,
-    marginRight: 6,
-    flexShrink: 0,
-  },
   desktopFeedsContainer: {
     borderTopWidth: 1,
     borderBottomWidth: 1,