feat(HelpBar): Display support overlays for payg and free accounts (#4382)

* feat: create overlays for contact support page

* feat: render overlays depending on user account

* chore: clean up

* feat: free account overlay

* feat: pay g overlay

* feat: add mstp to access state

Author: blegesse-w

src/overlays/components/OverlayController.tsx

@@ -39,6 +39,8 @@ import NewRuleOverlay from 'src/notifications/rules/components/NewRuleOverlay'
 import CreateSecretOverlay from 'src/secrets/components/CreateSecret/CreateSecretOverlay'
 import VariableImportOverlay from 'src/variables/components/VariableImportOverlay'
 import ShareOverlay from 'src/flows/components/ShareOverlay'
+import PayGSupportOverlay from 'src/support/components/PayGSupportOverlay'
+import FreeAccountSupportOverlay from 'src/support/components/FreeAccountSupportOverlay'
 
 // Actions
 import {dismissOverlay} from 'src/overlays/actions/overlays'
@@ -147,6 +149,12 @@ export const OverlayController: FunctionComponent = () => {
       case 'share-overlay':
         activeOverlay.current = <ShareOverlay />
         break
+      case 'payg-support':
+        activeOverlay.current = <PayGSupportOverlay onClose={onClose} />
+        break
+      case 'free-account-support':
+        activeOverlay.current = <FreeAccountSupportOverlay onClose={onClose} />
+        break
       default:
         activeOverlay.current = null
         break

src/overlays/components/index.tsx

@@ -139,3 +139,19 @@ export const ExportVariableOverlay = RouteOverlay(
     history.push(`/orgs/${params.orgID}/settings/variables`)
   }
 )
+
+export const PayGSupportOverlay = RouteOverlay(
+  OverlayHandler,
+  'payg-support',
+  (history, params) => {
+    history.push(`/orgs/${params.orgID}/support`)
+  }
+)
+
+export const FreeAccountSupportOverlay = RouteOverlay(
+  OverlayHandler,
+  'free-account-support',
+  (history, params) => {
+    history.push(`/orgs/${params.orgID}/support`)
+  }
+)

src/overlays/reducers/overlays.ts

@@ -30,6 +30,8 @@ export type OverlayID =
   | 'create-rule'
   | 'create-secret'
   | 'share-overlay'
+  | 'payg-support'
+  | 'free-account-support'
 
 export interface OverlayState {
   id: OverlayID | null

src/pageLayout/containers/TreeNav.tsx

@@ -2,6 +2,8 @@
 import React, {FC, useContext, useEffect} from 'react'
 import {Link} from 'react-router-dom'
 import {useSelector} from 'react-redux'
+import {connect, ConnectedProps} from 'react-redux'
+import {withRouter, RouteComponentProps} from 'react-router-dom'
 
 // Components
 import {Icon, IconFont, TreeNav} from '@influxdata/clockface'
@@ -22,12 +24,22 @@ import {SafeBlankLink} from 'src/utils/SafeBlankLink'
 
 // Types
 import {NavItem, NavSubItem} from 'src/pageLayout/constants/navigationHierarchy'
+import {AppState} from 'src/types'
 
-const TreeSidebar: FC = () => {
-  const org = useSelector(getOrg)
+import {showOverlay, dismissOverlay} from 'src/overlays/actions/overlays'
+
+type ReduxProps = ConnectedProps<typeof connector>
+
+const TreeSidebar: FC<ReduxProps & RouteComponentProps> = ({
+  showOverlay,
+  dismissOverlay,
+  quartzMe,
+}) => {
   const {presentationMode, navbarMode, setNavbarMode} = useContext(
     AppSettingContext
   )
+  const org = useSelector(getOrg)
+
   useEffect(() => {
     if (isFlagEnabled('helpBar')) {
       const helpBarMenu = document.querySelectorAll<HTMLElement>(
@@ -54,6 +66,17 @@ const TreeSidebar: FC = () => {
     }
   }
 
+  const handleSelect = (): void => {
+    const accountType = quartzMe?.accountType ?? 'free'
+    const isPayGCustomer = accountType !== 'free'
+
+    if (isPayGCustomer) {
+      showOverlay('payg-support', null, dismissOverlay)
+    } else {
+      showOverlay('free-account-support', null, dismissOverlay)
+    }
+  }
+
   return (
     <OrgSettings>
       <TreeNav
@@ -151,7 +174,7 @@ const TreeSidebar: FC = () => {
                 id="contactSupport"
                 label="Contact Support"
                 testID="nav-subitem-contact-support"
-                linkElement={className => <Link className={className} to="" />}
+                onClick={handleSelect}
               />
               <TreeNav.SubHeading label="Community" />
               <TreeNav.SubItem
@@ -185,4 +208,15 @@ const TreeSidebar: FC = () => {
   )
 }
 
-export default TreeSidebar
+const mstp = (state: AppState) => {
+  return {quartzMe: state.me.quartzMe}
+}
+
+const mdtp = {
+  showOverlay,
+  dismissOverlay,
+}
+
+const connector = connect(mstp, mdtp)
+
+export default connector(withRouter(TreeSidebar))

src/support/components/FreeAccountSupportOverlay.tsx

@@ -0,0 +1,35 @@
+import React, {FC, useContext} from 'react'
+
+// Components
+import {Overlay} from '@influxdata/clockface'
+
+// Contexts
+import {OverlayContext} from 'src/overlays/components/OverlayController'
+
+// Components
+import CloudUpgradeButton from 'src/shared/components/CloudUpgradeButton'
+
+interface OwnProps {
+  onClose: () => void
+}
+
+const FreeAccountSupportOverlay: FC<OwnProps> = () => {
+  const {onClose} = useContext(OverlayContext)
+
+  return (
+    <Overlay.Container maxWidth={550}>
+      <Overlay.Header
+        testID="free-support-overlay-header"
+        title="Contact Support"
+        onDismiss={onClose}
+      />
+
+      <Overlay.Body></Overlay.Body>
+      <Overlay.Footer>
+        <CloudUpgradeButton />
+      </Overlay.Footer>
+    </Overlay.Container>
+  )
+}
+
+export default FreeAccountSupportOverlay

src/support/components/PayGSupportOverlay.tsx

@@ -0,0 +1,34 @@
+import React, {FC, useContext} from 'react'
+
+// Components
+import {Overlay} from '@influxdata/clockface'
+
+// Contexts
+import {OverlayContext} from 'src/overlays/components/OverlayController'
+
+// Types
+import ErrorBoundary from 'src/shared/components/ErrorBoundary'
+
+interface OwnProps {
+  onClose: () => void
+}
+
+const PayGSupportOverlay: FC<OwnProps> = () => {
+  const {onClose} = useContext(OverlayContext)
+
+  return (
+    <Overlay.Container maxWidth={500}>
+      <Overlay.Header
+        testID="payg-support-overlay-header"
+        title="Contact Support"
+        onDismiss={onClose}
+      />
+
+      <ErrorBoundary>
+        <Overlay.Body></Overlay.Body>
+      </ErrorBoundary>
+    </Overlay.Container>
+  )
+}
+
+export default PayGSupportOverlay