feat(HelpBar): add confirmation overlay (#4648)

* feat: add confirmation page for support

* chore: update confirmation text

* chore: clean up

* feat: success confirmation page

* fix: prettier

* chore: clean up

* fix: prettier

* chore: clean up

* feat: add a type for feedback overlay param

* fix: prettier

* chore: rebase and clean up

* fix: prettier

* fix: prettier

* chore: use useDispatch instead of connect

* fix: prettier

Author: blegesse-w

src/overlays/components/OverlayController.tsx

@@ -42,6 +42,7 @@ import ShareOverlay from 'src/flows/components/ShareOverlay'
 import PayGSupportOverlay from 'src/support/components/PayGSupportOverlay'
 import FreeAccountSupportOverlay from 'src/support/components/FreeAccountSupportOverlay'
 import FeedbackQuestionsOverlay from 'src/support/components/FeedbackQuestionsOverlay'
+import ConfirmationOverlay from 'src/support/components/ConfirmationOverlay'
 
 // Actions
 import {dismissOverlay} from 'src/overlays/actions/overlays'
@@ -159,6 +160,9 @@ export const OverlayController: FunctionComponent = () => {
       case 'feedback-questions':
         activeOverlay.current = <FeedbackQuestionsOverlay onClose={onClose} />
         break
+      case 'help-bar-confirmation':
+        activeOverlay.current = <ConfirmationOverlay onClose={onClose} />
+        break
       default:
         activeOverlay.current = null
         break

src/overlays/components/index.tsx

@@ -163,3 +163,11 @@ export const FeedbackQuestionsOverlay = RouteOverlay(
     history.push(`/orgs/${params.orgID}/support`)
   }
 )
+
+export const ConfirmationOverlay = RouteOverlay(
+  OverlayHandler,
+  'help-bar-confirmation',
+  (history, params) => {
+    history.push(`/orgs/${params.orgID}/support`)
+  }
+)

src/overlays/reducers/overlays.ts

@@ -33,6 +33,7 @@ export type OverlayID =
   | 'payg-support'
   | 'free-account-support'
   | 'feedback-questions'
+  | 'help-bar-confirmation'
 
 export interface OverlayState {
   id: OverlayID | null

src/support/components/ConfirmationOverlay.tsx

@@ -0,0 +1,70 @@
+import React, {FC, useContext} from 'react'
+
+// Components
+import {
+  Button,
+  ButtonType,
+  ComponentColor,
+  Overlay,
+} from '@influxdata/clockface'
+import {SafeBlankLink} from 'src/utils/SafeBlankLink'
+
+// Contexts
+import {OverlayContext} from 'src/overlays/components/OverlayController'
+
+interface OwnProps {
+  onClose: () => void
+}
+
+const ConfirmationOverlay: FC<OwnProps> = () => {
+  const {onClose, params} = useContext(OverlayContext)
+
+  const feedbackAndQuestions = (
+    <p>
+      Thank you for your submission! Please keep a lookout in your account email
+      for confirmation and follow-up.
+    </p>
+  )
+
+  const paygSupport = (
+    <>
+      <p>
+        Your support ticket has been submitted. A Support Engineer will
+        investigate the issue and get back to you shortly. Please check your
+        account email for a confirmation and follow-up.
+      </p>
+      <p>
+        For more resources, check out{' '}
+        <SafeBlankLink href="https://support.influxdata.com">
+          {' '}
+          support.influxdata.com{' '}
+        </SafeBlankLink>
+      </p>
+    </>
+  )
+
+  return (
+    <Overlay.Container maxWidth={500}>
+      <Overlay.Header
+        testID="confirmation-overlay-header"
+        title={
+          params.type === 'PAYG' ? 'Contact Support' : 'Feedback & Questions'
+        }
+        onDismiss={onClose}
+      />
+      <Overlay.Body>
+        {params.type === 'PAYG' ? paygSupport : feedbackAndQuestions}
+      </Overlay.Body>
+      <Overlay.Footer>
+        <Button
+          text="OK"
+          color={ComponentColor.Success}
+          onClick={onClose}
+          type={ButtonType.Button}
+        />
+      </Overlay.Footer>
+    </Overlay.Container>
+  )
+}
+
+export default ConfirmationOverlay

src/support/components/FeedbackQuestionsOverlay.tsx

@@ -1,5 +1,5 @@
 import React, {FC, ChangeEvent, useContext, useState} from 'react'
-import {useSelector} from 'react-redux'
+import {useDispatch, useSelector} from 'react-redux'
 
 // Components
 import {
@@ -12,6 +12,9 @@ import {
   TextArea,
 } from '@influxdata/clockface'
 
+// Actions
+import {dismissOverlay, showOverlay} from 'src/overlays/actions/overlays'
+
 // Contexts
 import {OverlayContext} from 'src/overlays/components/OverlayController'
 
@@ -30,18 +33,25 @@ interface OwnProps {
 }
 
 const FeedbackQuestionsOverlay: FC<OwnProps> = () => {
+  const [feedbackText, setFeedbackText] = useState('')
   const {onClose} = useContext(OverlayContext)
   const {id: orgID} = useSelector(getOrg)
   const {id: meID} = useSelector(getMe)
-  const [feedbackText, setFeedbackText] = useState('')
 
-  const handleSubmit = () => {
-    // handle form submit
+  const dispatch = useDispatch()
+
+  const handleSubmit = (evt): void => {
+    evt.preventDefault()
     event(
       'helpBar.feedbackAndQuestions.submitted',
       {},
       {userID: meID, orgID: orgID}
     )
+    dispatch(
+      showOverlay('help-bar-confirmation', {type: 'feedback'}, () =>
+        dispatch(dismissOverlay)
+      )
+    )
   }
 
   const handleInputChange = (e: ChangeEvent<HTMLTextAreaElement>) => {

src/support/components/PayGSupportOverlay.tsx

@@ -1,5 +1,5 @@
 import React, {FC, ChangeEvent, useContext, useState} from 'react'
-import {useSelector} from 'react-redux'
+import {useDispatch, useSelector} from 'react-redux'
 
 // Components
 import {
@@ -12,14 +12,16 @@ import {
   Icon,
   IconFont,
   Input,
-  Method,
   Overlay,
   QuestionMarkTooltip,
   SelectDropdown,
   TextArea,
 } from '@influxdata/clockface'
 import {SafeBlankLink} from 'src/utils/SafeBlankLink'
 
+// Actions
+import {showOverlay, dismissOverlay} from 'src/overlays/actions/overlays'
+
 // Contexts
 import {OverlayContext} from 'src/overlays/components/OverlayController'
 
@@ -46,6 +48,8 @@ const PayGSupportOverlay: FC<OwnProps> = () => {
   const [textInput, setTextInput] = useState('')
   const {onClose} = useContext(OverlayContext)
 
+  const dispatch = useDispatch()
+
   const severityLevel = [
     '1 - Critical',
     '2 - High',
@@ -58,13 +62,19 @@ const PayGSupportOverlay: FC<OwnProps> = () => {
       ? ComponentStatus.Default
       : ComponentStatus.Disabled
 
+  const handleSubmit = (evt): void => {
+    evt.preventDefault()
+    event('helpBar.supportRequest.submitted', {}, {userID: meID, orgID: orgID})
+    dispatch(
+      showOverlay('help-bar-confirmation', {type: 'PAYG'}, () =>
+        dispatch(dismissOverlay)
+      )
+    )
+  }
+
   const handleInputChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
     setTextInput(event.target.value)
   }
-  const handleSubmit = (): void => {
-    // submit support form
-    event('helpBar.supportRequest.submitted', {}, {userID: meID, orgID: orgID})
-  }
 
   const handleSubjectChange = (event: ChangeEvent<HTMLInputElement>) => {
     setSubject(event.target.value)
@@ -113,11 +123,7 @@ const PayGSupportOverlay: FC<OwnProps> = () => {
         onDismiss={onClose}
       />
       <ErrorBoundary>
-        <Form
-          onSubmit={handleSubmit}
-          action="https://influxdata--full.my.salesforce.com/servlet/servlet.WebToCase?encoding=UTF-8"
-          method={Method.Post}
-        >
+        <Form>
           <Overlay.Body>
             <p className="status-page-text">
               <span>
@@ -168,24 +174,25 @@ const PayGSupportOverlay: FC<OwnProps> = () => {
               )}
             </Form.ValidationElement>
           </Overlay.Body>
-          <Overlay.Footer>
-            <Button
-              text="Cancel"
-              color={ComponentColor.Tertiary}
-              onClick={onClose}
-              type={ButtonType.Button}
-              testID="payg-contact-support--cancel"
-            />
-            <Button
-              text="Submit"
-              color={ComponentColor.Success}
-              type={ButtonType.Submit}
-              testID="payg-contact-support--submit"
-              status={submitButtonStatus}
-            />
-          </Overlay.Footer>
         </Form>
       </ErrorBoundary>
+      <Overlay.Footer>
+        <Button
+          text="Cancel"
+          color={ComponentColor.Tertiary}
+          onClick={onClose}
+          type={ButtonType.Button}
+          testID="payg-contact-support--cancel"
+        />
+        <Button
+          text="Submit"
+          color={ComponentColor.Success}
+          type={ButtonType.Submit}
+          testID="payg-contact-support--submit"
+          status={submitButtonStatus}
+          onClick={handleSubmit}
+        />
+      </Overlay.Footer>
     </Overlay.Container>
   )
 }