Show "Send via twitter" after quick feedback (in addition to Slack)

[Mobile] Fix quick feedback text alignment

Author: brunolemos

landing/src/components/common/QuickFeedbackInput.tsx

@@ -150,7 +150,7 @@ export function QuickFeedbackInput(props: QuickFeedbackInputProps) {
           setFeedbackText('')
           setPlaceholder('')
         })
-      }, 2000)
+      }, 3000)
     }
   }
 

packages/components/src/components/common/Link.tsx

@@ -27,8 +27,9 @@ export interface LinkProps extends Partial<TouchableProps> {
   backgroundThemeColor?: keyof ThemeColors | ((theme: Theme) => string)
   enableBackgroundHover?: boolean
   enableForegroundHover?: boolean
-  enableUnderlineHover?: boolean
   enableTextWrapper?: boolean
+  enableUnderlineHover?: boolean
+  forceOpenOutsideApp?: boolean
   hoverBackgroundThemeColor?: keyof ThemeColors | ((theme: Theme) => string)
   hoverForegroundThemeColor?: keyof ThemeColors | ((theme: Theme) => string)
   href?: string
@@ -47,8 +48,9 @@ export const Link = React.forwardRef<Touchable, LinkProps>((props, ref) => {
     backgroundThemeColor,
     enableBackgroundHover: _enableBackgroundHover,
     enableForegroundHover: _enableForegroundHover,
-    enableUnderlineHover: _enableUnderlineHover,
     enableTextWrapper,
+    enableUnderlineHover: _enableUnderlineHover,
+    forceOpenOutsideApp,
     hoverBackgroundThemeColor: _hoverBackgroundThemeColor,
     hoverForegroundThemeColor: _hoverForegroundThemeColor,
     href,
@@ -199,7 +201,8 @@ export const Link = React.forwardRef<Touchable, LinkProps>((props, ref) => {
             if (onPress) onPress(e)
 
             if (href) {
-              if (href.startsWith('http')) Browser.openURL(href)
+              if (!forceOpenOutsideApp && href.startsWith('http'))
+                Browser.openURL(href)
               else if (!href.startsWith('javascript:')) Linking.openURL(href)
             }
 

packages/components/src/components/common/QuickFeedbackRow.tsx

@@ -22,7 +22,7 @@ export function QuickFeedbackRow(_props: QuickFeedbackRowProps) {
   const isMountedRef = useRef(true)
 
   const [feedbackText, setFeedbackText] = useState('')
-  const [message, setMessage] = useState('')
+  const [message, setMessage] = useState<React.ReactNode>('')
   const [placeholder, setPlaceholder] = useState('')
 
   const appToken = useReduxState(selectors.appTokenSelector)
@@ -115,7 +115,49 @@ export function QuickFeedbackRow(_props: QuickFeedbackRowProps) {
         setMessage('Thanks for your feedback!')
 
         setTimeout(() => {
-          setMessage('Join our Slack to get a response.')
+          setMessage(
+            <View
+              style={[
+                sharedStyles.flex,
+                sharedStyles.flexWrap,
+                sharedStyles.horizontal,
+                sharedStyles.alignSelfCenter,
+                sharedStyles.justifyContentCenter,
+              ]}
+            >
+              <Link
+                analyticsLabel="send_feedback_via_twitter"
+                enableUnderlineHover
+                forceOpenOutsideApp
+                href={`https://twitter.com/messages/compose?recipient_id=1013342195087224832&text=${
+                  typeof encodeURIComponent === 'function'
+                    ? encodeURIComponent(feedbackText)
+                    : feedbackText
+                }`}
+                openOnNewTab
+                textProps={{
+                  color: 'foregroundColorMuted65',
+                }}
+              >
+                Send via Twitter
+              </Link>
+              <ThemedText color="foregroundColorMuted65">{' or '}</ThemedText>
+              <Link
+                analyticsLabel="join_slack_after_feedback"
+                enableUnderlineHover
+                href={constants.DEVHUB_LINKS.SLACK_INVITATION}
+                openOnNewTab
+                textProps={{
+                  color: 'foregroundColorMuted65',
+                }}
+              >
+                join Slack
+              </Link>
+              <ThemedText color="foregroundColorMuted65">
+                {' to get a response.'}
+              </ThemedText>
+            </View>,
+          )
 
           setTimeout(() => {
             batch(() => {
@@ -138,7 +180,7 @@ export function QuickFeedbackRow(_props: QuickFeedbackRowProps) {
           setFeedbackText('')
           setPlaceholder('')
         })
-      }, 2000)
+      }, 3000)
     }
   }
 
@@ -151,27 +193,15 @@ export function QuickFeedbackRow(_props: QuickFeedbackRowProps) {
       ]}
     >
       {message ? (
-        message.toLowerCase().includes('slack') ? (
-          <Link
-            analyticsLabel="join_slack_after_feedback"
-            enableUnderlineHover
-            href={constants.DEVHUB_LINKS.SLACK_INVITATION}
-            openOnNewTab
-            textProps={{
-              color: 'foregroundColorMuted65',
-              style: [sharedStyles.flex, sharedStyles.textCenter],
-            }}
-            style={sharedStyles.flex}
-          >
-            {message}
-          </Link>
-        ) : (
+        typeof message === 'string' ? (
           <ThemedText
             color="foregroundColorMuted65"
             style={[sharedStyles.flex, sharedStyles.textCenter]}
           >
             {message}
           </ThemedText>
+        ) : (
+          message
         )
       ) : (
         <ThemedTextInput