Quick Feedback input on all modals

brunolemos · brunolemos · commit 81a4f13dfad1 · 2019-11-01T20:29:40.000-03:00
diff --git a/packages/components/src/components/banners/AppBannerMessage.tsx b/packages/components/src/components/banners/AppBannerMessage.tsx
@@ -79,6 +79,7 @@ export function AppBannerMessage() {
         <Spacer width={contentPadding / 2} />
 
         <IconButton
+          family="octicon"
           name="x"
           onPress={() => closeBannerMessage(bannerMessage.id)}
           size={18}
diff --git a/packages/components/src/components/cards/CardsSearchHeader.tsx b/packages/components/src/components/cards/CardsSearchHeader.tsx
@@ -402,6 +402,7 @@ export const CardsSearchHeader = React.memo((props: CardsSearchHeaderProps) => {
               active={forceShowTextInput}
               analyticsAction="toggle"
               analyticsLabel="column_search"
+              family="octicon"
               name="search"
               onPress={() => {
                 batch(() => {
diff --git a/packages/components/src/components/columns/ColumnFiltersButton.tsx b/packages/components/src/components/columns/ColumnFiltersButton.tsx
@@ -41,6 +41,7 @@ export const ColumnFiltersButton = React.memo(
         key="column-filters-toggle-button"
         analyticsAction="toggle"
         analyticsLabel="column_filters"
+        family="octicon"
         name="settings"
         onPress={onPress}
         style={style}
diff --git a/packages/components/src/components/columns/ColumnOptions.tsx b/packages/components/src/components/columns/ColumnOptions.tsx
@@ -348,6 +348,7 @@ export const ColumnOptions = React.memo(
               columnIndex === 0 ||
               !!(plan && columnIndex + 1 > plan.featureFlags.columnsLimit)
             }
+            family="octicon"
             name="chevron-left"
             onPress={() =>
               dispatch(
@@ -373,6 +374,7 @@ export const ColumnOptions = React.memo(
               columnIndex + 1 >= constants.COLUMNS_LIMIT ||
               !!(plan && columnIndex + 1 > plan.featureFlags.columnsLimit - 1)
             }
+            family="octicon"
             name="chevron-right"
             onPress={() =>
               dispatch(
@@ -398,6 +400,7 @@ export const ColumnOptions = React.memo(
           <IconButton
             key="column-options-button-remove-column"
             analyticsLabel="remove_column"
+            family="octicon"
             name="trashcan"
             onPress={() =>
               dispatch(actions.deleteColumn({ columnId, columnIndex }))
diff --git a/packages/components/src/components/columns/ModalColumn.tsx b/packages/components/src/components/columns/ModalColumn.tsx
@@ -10,6 +10,7 @@ import * as selectors from '../../redux/selectors'
 import { sharedStyles } from '../../styles/shared'
 import { contentPadding } from '../../styles/variables'
 import { findNode, tryFocus } from '../../utils/helpers/shared'
+import { QuickFeedbackRow } from '../common/QuickFeedbackRow'
 import { Spacer } from '../common/Spacer'
 import { keyboardShortcutsById } from '../modals/KeyboardShortcutsModal'
 import { Column } from './Column'
@@ -115,7 +116,17 @@ export const ModalColumn = React.memo((props: ModalColumnProps) => {
         }
       />
 
-      {children}
+      <View style={sharedStyles.flex}>{children}</View>
+
+      <View
+        style={[
+          sharedStyles.fullWidth,
+          sharedStyles.horizontalAndVerticallyAligned,
+          sharedStyles.padding,
+        ]}
+      >
+        <QuickFeedbackRow />
+      </View>
     </Column>
   )
 })
diff --git a/packages/components/src/components/common/IconButton.tsx b/packages/components/src/components/common/IconButton.tsx
@@ -4,31 +4,31 @@ import { StyleSheet } from 'react-native'
 import { ThemeColors } from '@devhub/core'
 import { useDynamicRef } from '../../hooks/use-dynamic-ref'
 import { useHover } from '../../hooks/use-hover'
-import { OcticonIconProps, Octicons } from '../../libs/vector-icons'
 import { sharedStyles } from '../../styles/shared'
 import { contentPadding } from '../../styles/variables'
 import { getTheme } from '../context/ThemeContext'
 import { getThemeColorOrItself } from '../themed/helpers'
+import { ThemedIcon, ThemedIconProps } from '../themed/ThemedIcon'
 import { ThemedText } from '../themed/ThemedText'
 import { ThemedView } from '../themed/ThemedView'
 import {
   TouchableWithoutFeedback,
   TouchableWithoutFeedbackProps,
 } from './TouchableWithoutFeedback'
 
-export interface IconButtonProps extends TouchableWithoutFeedbackProps {
+export type IconButtonProps = TouchableWithoutFeedbackProps & {
   active?: boolean
-  name: OcticonIconProps['name']
   size?: number
   type?: 'primary' | 'neutral' | 'danger'
-}
+} & Pick<ThemedIconProps, 'family' | 'name'>
 
 export const defaultIconButtonSize = 17
 
 export function IconButton(props: IconButtonProps) {
   const {
     active,
     disabled: _disabled,
+    family,
     name,
     onPressIn,
     onPressOut,
@@ -164,8 +164,9 @@ export function IconButton(props: IconButtonProps) {
         />
 
         <ThemedText ref={textRef} color={foregroundThemeColor}>
-          <Octicons
-            name={name}
+          <ThemedIcon
+            family={family as any}
+            name={name as any}
             selectable={false}
             size={size}
             style={sharedStyles.textCenter}
diff --git a/packages/components/src/components/common/QuickFeedbackRow.tsx b/packages/components/src/components/common/QuickFeedbackRow.tsx
@@ -0,0 +1,187 @@
+import { constants } from '@devhub/core'
+import axios from 'axios'
+import React, { useEffect, useRef, useState } from 'react'
+import { View } from 'react-native'
+import { batch } from 'react-redux'
+
+import { useReduxState } from '../../hooks/use-redux-state'
+import { bugsnag } from '../../libs/bugsnag'
+import * as selectors from '../../redux/selectors'
+import { sharedStyles } from '../../styles/shared'
+import { getDefaultDevHubHeaders } from '../../utils/api'
+import { ThemedText } from '../themed/ThemedText'
+import { ThemedTextInput } from '../themed/ThemedTextInput'
+import { Link } from './Link'
+import { defaultTextInputHeight } from './TextInput'
+
+export interface QuickFeedbackRowProps {}
+
+export const quickFeedbackRowHeight = defaultTextInputHeight
+
+export function QuickFeedbackRow(_props: QuickFeedbackRowProps) {
+  const isMountedRef = useRef(true)
+
+  const [feedbackText, setFeedbackText] = useState('')
+  const [message, setMessage] = useState('')
+  const [placeholder, setPlaceholder] = useState('')
+
+  const appToken = useReduxState(selectors.appTokenSelector)
+  const currentOpenedModal = useReduxState(selectors.currentOpenedModal)
+
+  useEffect(() => {
+    isMountedRef.current = true
+
+    return () => {
+      isMountedRef.current = false
+    }
+  }, [])
+
+  async function trySendFeedback() {
+    const response = await axios.post(
+      constants.GRAPHQL_ENDPOINT,
+      {
+        query: `
+              mutation($input: SendFeedbackInput) {
+                sendFeedback(input: $input)
+              }`,
+        variables: {
+          input: {
+            feedback: feedbackText,
+            screeName: currentOpenedModal.name,
+          },
+        },
+      },
+      { headers: getDefaultDevHubHeaders({ appToken }) },
+    )
+
+    if (!isMountedRef.current) return
+
+    const { data, errors } = await response.data
+
+    if (errors && errors[0] && errors[0].message)
+      throw new Error(errors[0].message)
+
+    if (!(data && data.sendFeedback)) {
+      throw new Error('Failed to send feedback.')
+    }
+  }
+
+  async function handleSubmit() {
+    if (!isMountedRef.current) return
+
+    if (!(feedbackText && feedbackText.trim())) return
+
+    try {
+      setMessage('Sending...')
+
+      await trySendFeedback()
+      if (!isMountedRef.current) return
+
+      if (feedbackText.toLowerCase().includes('expensive')) {
+        setMessage('Got it...')
+
+        setTimeout(() => {
+          setMessage('How much would you pay?')
+          setTimeout(() => {
+            batch(() => {
+              setMessage('')
+              setFeedbackText('')
+              setPlaceholder('How much would you pay?')
+            })
+          }, 2000)
+        }, 1000)
+
+        return
+      }
+      if (feedbackText.toLowerCase().includes(' caro')) {
+        setMessage('Entendi...')
+        setTimeout(() => {
+          setMessage('Quanto você pagaria?')
+          setTimeout(() => {
+            batch(() => {
+              setMessage('')
+              setFeedbackText('')
+              setPlaceholder('Quanto você pagaria?')
+            })
+          }, 2000)
+        }, 1000)
+
+        return
+      }
+
+      setTimeout(() => {
+        setMessage('Thanks for your feedback!')
+
+        setTimeout(() => {
+          setMessage('Join our Slack to get a response.')
+
+          setTimeout(() => {
+            batch(() => {
+              setMessage('')
+              setFeedbackText('')
+              setPlaceholder('')
+            })
+          }, 8000)
+        }, 2000)
+      }, 1000)
+    } catch (error) {
+      console.error(error)
+      bugsnag.notify(error)
+
+      setMessage(`Failed to send feedback. Please contact us.`)
+
+      setTimeout(() => {
+        batch(() => {
+          setMessage('')
+          setFeedbackText('')
+          setPlaceholder('')
+        })
+      }, 2000)
+    }
+  }
+
+  return (
+    <View
+      style={[
+        sharedStyles.fullWidth,
+        sharedStyles.horizontalAndVerticallyAligned,
+        { height: quickFeedbackRowHeight },
+      ]}
+    >
+      {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>
+        ) : (
+          <ThemedText
+            color="foregroundColorMuted65"
+            style={[sharedStyles.flex, sharedStyles.textCenter]}
+          >
+            {message}
+          </ThemedText>
+        )
+      ) : (
+        <ThemedTextInput
+          textInputKey="quick-feedback-text-input"
+          onChangeText={text => {
+            setFeedbackText(text)
+          }}
+          onSubmitEditing={handleSubmit}
+          placeholder={placeholder || 'Send quick feedback'}
+          style={[sharedStyles.flex, sharedStyles.textCenter]}
+        />
+      )}
+    </View>
+  )
+}
diff --git a/packages/components/src/components/modals/ModalRenderer.tsx b/packages/components/src/components/modals/ModalRenderer.tsx
@@ -279,6 +279,7 @@ export function ModalRenderer(props: ModalRendererProps) {
           <View
             collapsable={false}
             style={[
+              sharedStyles.flex,
               sharedStyles.fullHeight,
               sharedStyles.overflowHidden,
               {
diff --git a/packages/components/src/components/themed/ThemedIcon.tsx b/packages/components/src/components/themed/ThemedIcon.tsx
@@ -24,7 +24,7 @@ export type ThemedIconProps = {
     } & Omit<MaterialIconProps, 'color' | 'style'>))
 
 export const ThemedIcon = React.memo(
-  React.forwardRef<Octicons, ThemedIconProps>((props, ref) => {
+  React.forwardRef<Octicons | MaterialIcons, ThemedIconProps>((props, ref) => {
     const {
       color: _color,
       family = 'octicon',
@@ -47,4 +47,4 @@ export const ThemedIcon = React.memo(
 
 ThemedIcon.displayName = 'ThemedIcon'
 
-export type ThemedIcon = Octicons
+export type ThemedIcon = Octicons | MaterialIcons
diff --git a/packages/components/src/hooks/use-cards-props.tsx b/packages/components/src/hooks/use-cards-props.tsx
@@ -34,13 +34,16 @@ import {
 import { EmptyCards } from '../components/cards/EmptyCards'
 import { ColumnLoadingIndicator } from '../components/columns/ColumnLoadingIndicator'
 import { Button } from '../components/common/Button'
+import { QuickFeedbackRow } from '../components/common/QuickFeedbackRow'
 import { RefreshControl } from '../components/common/RefreshControl'
+import { Spacer } from '../components/common/Spacer'
 import { useAppLayout } from '../components/context/LayoutContext'
 import { OneListProps } from '../libs/one-list'
 import { useSafeArea } from '../libs/safe-area-view'
 import * as actions from '../redux/actions'
 import * as selectors from '../redux/selectors'
 import { sharedStyles } from '../styles/shared'
+import { contentPadding } from '../styles/variables'
 import { useColumn } from './use-column'
 import { useReduxState } from './use-redux-state'
 
@@ -345,21 +348,27 @@ export function useCardsProps<ItemT extends EnhancedItem>({
             columnId={column.id}
             emoji="lock"
             errorButtonView={
-              <Button
-                analyticsCategory="plan_expired"
-                analyticsLabel="select_a_plan_button"
-                children="Select a plan"
-                onPress={() => {
-                  dispatch(
-                    actions.pushModal({
-                      name: 'PRICING',
-                      params: {
-                        highlightFeature: 'columnsLimit',
-                      },
-                    }),
-                  )
-                }}
-              />
+              <View>
+                <Button
+                  analyticsCategory="plan_expired"
+                  analyticsLabel="select_a_plan_button"
+                  children="Select a plan"
+                  onPress={() => {
+                    dispatch(
+                      actions.pushModal({
+                        name: 'PRICING',
+                        params: {
+                          highlightFeature: 'columnsLimit',
+                        },
+                      }),
+                    )
+                  }}
+                />
+
+                <Spacer height={contentPadding} />
+
+                <QuickFeedbackRow />
+              </View>
             }
             errorMessage="You need a paid plan to keep using DevHub."
             errorTitle="Free trial expired"
diff --git a/packages/core/src/types/database.ts b/packages/core/src/types/database.ts

Original file line number	Diff line number	Diff line change
`@@ -279,6 +279,7 @@ export function ModalRenderer(props: ModalRendererProps) {`
`279`	`279`	`<View`
`280`	`280`	`collapsable={false}`
`281`	`281`	`style={[`
	`282`	`+ sharedStyles.flex,`
`282`	`283`	`sharedStyles.fullHeight,`
`283`	`284`	`sharedStyles.overflowHidden,`
`284`	`285`	`{`