Update support links (#977)

* Add the new zendesk feedback form URL

* Dont wrap handle or display name in the drawer

* Add help link

* Tune drawer footer layout

* Type fixes

* make helpdesk urls more composable for future

* fix typo

---------

Co-authored-by: Ansh Nanda <anshnanda10@gmail.com>

src/lib/analytics/types.ts

@@ -79,6 +79,7 @@ interface TrackPropertiesMap {
   // MENU events
   'Menu:ItemClicked': {url: string}
   'Menu:FeedbackClicked': {}
+  'Menu:HelpClicked': {}
   // MOBILE SHELL events
   'MobileShell:MyProfileButtonPressed': {}
   'MobileShell:HomeButtonPressed': {}

src/lib/constants.ts

@@ -1,5 +1,23 @@
-export const FEEDBACK_FORM_URL =
-  'https://docs.google.com/forms/d/e/1FAIpQLSdavFRXTdB6tRobaFrRR2A1gv3b-IBHwQkBmNZTRpoqmcrPrQ/viewform?usp=sf_link'
+const HELP_DESK_LANG = 'en-us'
+export const HELP_DESK_URL = `https://blueskyweb.zendesk.com/hc/${HELP_DESK_LANG}`
+
+const BASE_FEEDBACK_FORM_URL = `${HELP_DESK_URL}/requests/new`
+export function FEEDBACK_FORM_URL({
+  email,
+  handle,
+}: {
+  email?: string
+  handle?: string
+}): string {
+  let str = BASE_FEEDBACK_FORM_URL
+  if (email) {
+    str += `?tf_anonymous_requester_email=${encodeURIComponent(email)}`
+    if (handle) {
+      str += `&tf_17205412673421=${encodeURIComponent(handle)}`
+    }
+  }
+  return str
+}
 
 export const MAX_DISPLAY_NAME = 64
 export const MAX_DESCRIPTION = 256

src/view/shell/Drawer.tsx

@@ -16,7 +16,7 @@ import {
   FontAwesomeIconStyle,
 } from '@fortawesome/react-native-fontawesome'
 import {s, colors} from 'lib/styles'
-import {FEEDBACK_FORM_URL} from 'lib/constants'
+import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants'
 import {useStores} from 'state/index'
 import {
   HomeIcon,
@@ -116,8 +116,19 @@ export const DrawerContent = observer(() => {
 
   const onPressFeedback = React.useCallback(() => {
     track('Menu:FeedbackClicked')
-    Linking.openURL(FEEDBACK_FORM_URL)
+    Linking.openURL(
+      FEEDBACK_FORM_URL({
+        email: store.session.currentSession?.email,
+        handle: store.session.currentSession?.handle,
+      }),
+    )
+  }, [track, store.session.currentSession])
+
+  const onPressHelp = React.useCallback(() => {
+    track('Menu:HelpClicked')
+    Linking.openURL(HELP_DESK_URL)
   }, [track])
+
   // rendering
   // =
 
@@ -138,10 +149,14 @@ export const DrawerContent = observer(() => {
             <UserAvatar size={80} avatar={store.me.avatar} />
             <Text
               type="title-lg"
-              style={[pal.text, s.bold, styles.profileCardDisplayName]}>
+              style={[pal.text, s.bold, styles.profileCardDisplayName]}
+              numberOfLines={1}>
               {store.me.displayName || store.me.handle}
             </Text>
-            <Text type="2xl" style={[pal.textLight, styles.profileCardHandle]}>
+            <Text
+              type="2xl"
+              style={[pal.textLight, styles.profileCardHandle]}
+              numberOfLines={1}>
               @{store.me.handle}
             </Text>
             <Text
@@ -299,7 +314,7 @@ export const DrawerContent = observer(() => {
           <TouchableOpacity
             accessibilityRole="link"
             accessibilityLabel="Send feedback"
-            accessibilityHint="Opens Google Forms feedback link"
+            accessibilityHint=""
             onPress={onPressFeedback}
             style={[
               styles.footerBtn,
@@ -310,13 +325,23 @@ export const DrawerContent = observer(() => {
             ]}>
             <FontAwesomeIcon
               style={pal.link as FontAwesomeIconStyle}
-              size={19}
+              size={18}
               icon={['far', 'message']}
             />
-            <Text type="2xl-medium" style={[pal.link, s.pl10]}>
+            <Text type="lg-medium" style={[pal.link, s.pl10]}>
               Feedback
             </Text>
           </TouchableOpacity>
+          <TouchableOpacity
+            accessibilityRole="link"
+            accessibilityLabel="Send feedback"
+            accessibilityHint=""
+            onPress={onPressHelp}
+            style={[styles.footerBtn]}>
+            <Text type="lg-medium" style={[pal.link, s.pl10]}>
+              Help
+            </Text>
+          </TouchableOpacity>
         </View>
       </SafeAreaView>
     </View>
@@ -495,8 +520,8 @@ const styles = StyleSheet.create({
 
   footer: {
     flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingRight: 30,
+    gap: 8,
+    paddingRight: 20,
     paddingTop: 20,
     paddingLeft: 20,
   },
@@ -507,7 +532,7 @@ const styles = StyleSheet.create({
     borderRadius: 25,
   },
   footerBtnFeedback: {
-    paddingHorizontal: 24,
+    paddingHorizontal: 20,
   },
   footerBtnFeedbackLight: {
     backgroundColor: '#DDEFFF',

src/view/shell/desktop/RightNav.tsx

@@ -6,7 +6,7 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {DesktopSearch} from './Search'
 import {Text} from 'view/com/util/text/Text'
 import {TextLink} from 'view/com/util/Link'
-import {FEEDBACK_FORM_URL} from 'lib/constants'
+import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants'
 import {s} from 'lib/styles'
 import {useStores} from 'state/index'
 import {pluralize} from 'lib/strings/helpers'
@@ -37,7 +37,10 @@ export const DesktopRightNav = observer(function DesktopRightNav() {
           <TextLink
             type="md"
             style={pal.link}
-            href={FEEDBACK_FORM_URL}
+            href={FEEDBACK_FORM_URL({
+              email: store.session.currentSession?.email,
+              handle: store.session.currentSession?.handle,
+            })}
             text="Send feedback"
           />
           <Text type="md" style={pal.textLight}>
@@ -47,7 +50,7 @@ export const DesktopRightNav = observer(function DesktopRightNav() {
             type="md"
             style={pal.link}
             href="https://blueskyweb.xyz/support/privacy-policy"
-            text="Privacy Policy"
+            text="Privacy"
           />
           <Text type="md" style={pal.textLight}>
             &nbsp;&middot;&nbsp;
@@ -58,6 +61,15 @@ export const DesktopRightNav = observer(function DesktopRightNav() {
             href="https://blueskyweb.xyz/support/tos"
             text="Terms"
           />
+          <Text type="md" style={pal.textLight}>
+            &nbsp;&middot;&nbsp;
+          </Text>
+          <TextLink
+            type="md"
+            style={pal.link}
+            href={HELP_DESK_URL}
+            text="Help"
+          />
         </View>
       </View>
       <InviteCodes />