feat: updated Finish Page for first mile (#4438)

Author: ChitlangeSahas

package.json

@@ -170,6 +170,7 @@
     "amplitude-js": "^8.16.1",
     "auth0-js": "^9.13.2",
     "babel-polyfill": "^6.26.0",
+    "canvas-confetti": "^1.5.1",
     "chroma-js": "^1.3.6",
     "classnames": "^2.2.3",
     "connected-react-router": "^6.8.0",

src/homepageExperience/components/FeedbackBar.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import {
+  ComponentSize,
+  FlexBox,
+  InfluxColors,
+  JustifyContent,
+} from '@influxdata/clockface'
+import {
+  ThumbsDown,
+  ThumbsUp,
+} from 'src/homepageExperience/components/HomepageIcons'
+import {event} from 'src/cloud/utils/reporting'
+
+import 'src/homepageExperience/components/HomepageExperience.scss'
+
+type OwnProps = {
+  wizardEventName: string
+}
+type State = {
+  selectedFeedback: number
+}
+
+enum feedbackValue {
+  THUMBS_DOWN,
+  THUMBS_UP,
+}
+
+export default class FeedbackBar extends React.Component<OwnProps, State> {
+  constructor(props) {
+    super(props)
+    this.state = {
+      selectedFeedback: null,
+    }
+  }
+
+  private handleThumbsUpClick = () => {
+    event(`firstMile.${this.props.wizardEventName}.thumbsUp.clicked`)
+    this.setState({selectedFeedback: feedbackValue.THUMBS_UP})
+  }
+  private handleThumbsDownClick = () => {
+    event(`firstMile.${this.props.wizardEventName}.thumbsDown.clicked`)
+    this.setState({selectedFeedback: feedbackValue.THUMBS_DOWN})
+  }
+
+  render() {
+    const {selectedFeedback} = this.state
+    return (
+      <FlexBox
+        margin={ComponentSize.Large}
+        justifyContent={JustifyContent.SpaceBetween}
+        className="feedback-bar"
+      >
+        <p>What did you think about the set up process?</p>
+        <FlexBox margin={ComponentSize.Large}>
+          <button
+            onClick={this.handleThumbsUpClick}
+            style={{
+              fill:
+                selectedFeedback === feedbackValue.THUMBS_UP
+                  ? InfluxColors.Rainforest
+                  : InfluxColors.White,
+            }}
+          >
+            {ThumbsUp}
+          </button>
+          <button
+            onClick={this.handleThumbsDownClick}
+            style={{
+              fill:
+                selectedFeedback === feedbackValue.THUMBS_DOWN
+                  ? InfluxColors.Fire
+                  : InfluxColors.White,
+            }}
+          >
+            {ThumbsDown}
+          </button>
+        </FlexBox>
+      </FlexBox>
+    )
+  }
+}

src/homepageExperience/components/HomepageExperience.scss

@@ -43,7 +43,7 @@ h1#first-mile--header {
     font-size: $cf-text-base-1;
   }
 
-  &.overviewSection {
+  &.verticallyCentered {
     margin-top: auto;
   }
 }
@@ -100,3 +100,14 @@ h1#first-mile--header {
     margin: 0;
   }
 }
+
+.feedback-bar {
+  background: linear-gradient(
+    256.11deg,
+    rgba(147, 148, 255, 0.2) 0%,
+    rgba(81, 60, 198, 0.2) 100%
+  );
+  padding-left: 16px;
+  padding-right: 16px;
+  max-width: 493px;
+}

src/homepageExperience/components/HomepageIcons.tsx

@@ -267,7 +267,7 @@ export const GoIcon = (
   </svg>
 )
 
-export const InfluxDBUniversityIcon = (
+export const BookIcon = (
   <svg
     width="18"
     height="20"
@@ -295,7 +295,7 @@ export const InfluxDBUniversityIcon = (
   </svg>
 )
 
-export const VSCodePluginIcon = (
+export const CodeTerminalIcon = (
   <svg
     width="21"
     height="18"
@@ -457,3 +457,25 @@ export const TelegrafIcon = (
     </defs>
   </svg>
 )
+
+export const ThumbsUp = (
+  <svg
+    width="22"
+    height="20"
+    viewBox="0 0 22 20"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M1 8.00011H4V20.0001H1C0.734784 20.0001 0.48043 19.8948 0.292893 19.7072C0.105357 19.5197 0 19.2653 0 19.0001V9.00011C0 8.73489 0.105357 8.48054 0.292893 8.293C0.48043 8.10547 0.734784 8.00011 1 8.00011ZM6.293 6.70711L12.693 0.307111C12.7781 0.221805 12.8911 0.170078 13.0112 0.161443C13.1314 0.152808 13.2506 0.187845 13.347 0.260111L14.2 0.900111C14.4369 1.07796 14.6158 1.32196 14.7143 1.60137C14.8127 1.88077 14.8262 2.18306 14.753 2.47011L13.6 7.00011H20C20.5304 7.00011 21.0391 7.21083 21.4142 7.5859C21.7893 7.96097 22 8.46968 22 9.00011V11.1041C22.0003 11.3655 21.9493 11.6244 21.85 11.8661L18.755 19.3811C18.6795 19.5643 18.5513 19.721 18.3866 19.8312C18.2219 19.9414 18.0282 20.0002 17.83 20.0001H7C6.73478 20.0001 6.48043 19.8948 6.29289 19.7072C6.10536 19.5197 6 19.2653 6 19.0001V7.41411C6.00006 7.14892 6.10545 6.8946 6.293 6.70711Z" />
+  </svg>
+)
+
+export const ThumbsDown = (
+  <svg
+    width="22"
+    height="20"
+    viewBox="0 0 22 20"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M21 12H18V0H21C21.2652 0 21.5196 0.105357 21.7071 0.292893C21.8946 0.48043 22 0.734784 22 1V11C22 11.2652 21.8946 11.5196 21.7071 11.7071C21.5196 11.8946 21.2652 12 21 12ZM15.707 13.293L9.307 19.693C9.22194 19.7783 9.10894 19.83 8.98878 19.8387C8.86862 19.8473 8.74939 19.8123 8.653 19.74L7.8 19.1C7.5631 18.9222 7.38416 18.6781 7.28575 18.3987C7.18733 18.1193 7.17385 17.8171 7.247 17.53L8.4 13H2C1.46957 13 0.96086 12.7893 0.585788 12.4142C0.210715 12.0391 1.0643e-06 11.5304 1.0643e-06 11V8.896C-0.000268556 8.63464 0.050692 8.37576 0.150001 8.134L3.246 0.62C3.32128 0.436753 3.4493 0.279995 3.6138 0.169612C3.77831 0.0592292 3.97189 0.00019547 4.17 0H15C15.2652 0 15.5196 0.105357 15.7071 0.292893C15.8946 0.48043 16 0.734784 16 1V12.586C15.9999 12.8512 15.8946 13.1055 15.707 13.293Z" />
+  </svg>
+)

src/homepageExperience/components/steps/Finish.tsx

@@ -3,71 +3,110 @@ import {
   AlignItems,
   ComponentSize,
   FlexBox,
-  Icon,
-  IconFont,
   ResourceCard,
 } from '@influxdata/clockface'
 
+import confetti from 'canvas-confetti'
+
 import {
-  InfluxDBUniversityIcon,
-  VSCodePluginIcon,
+  BookIcon,
+  CodeTerminalIcon,
 } from 'src/homepageExperience/components/HomepageIcons'
 import {SafeBlankLink} from 'src/utils/SafeBlankLink'
 
 import {event} from 'src/cloud/utils/reporting'
+import FeedbackBar from 'src/homepageExperience/components/FeedbackBar'
 
 type OwnProps = {
   wizardEventName: string
+  markStepAsCompleted: () => void
+  finishStepCompleted: boolean
+}
+
+const fireConfetti = () => {
+  const count = 200
+  const defaults = {
+    origin: {y: 0.7},
+  }
+
+  const fire = (particleRatio, options) => {
+    confetti({
+      ...defaults,
+      ...options,
+      particleCount: Math.floor(count * particleRatio),
+    })
+  }
+
+  fire(0.25, {
+    spread: 26,
+    startVelocity: 55,
+  })
+  fire(0.2, {
+    spread: 60,
+  })
+  fire(0.35, {
+    spread: 100,
+    decay: 0.91,
+    scalar: 0.8,
+  })
+  fire(0.1, {
+    spread: 120,
+    startVelocity: 25,
+    decay: 0.92,
+    scalar: 1.2,
+  })
+  fire(0.1, {
+    spread: 120,
+    startVelocity: 45,
+  })
 }
 
 export const Finish = (props: OwnProps) => {
   useEffect(() => {
-    event(`firstMile.${props.wizardEventName}.finished`)
+    // if the finish step was opened during the session,
+    // this check prevents from multiple logging of finish events
+    // in case user navigates back and forth
+    if (!props.finishStepCompleted) {
+      event(`firstMile.${props.wizardEventName}.finished`)
+      props.markStepAsCompleted()
+      fireConfetti()
+    }
   }, [])
+
   return (
     <>
       <h1>Congrats!</h1>
       <p>You completed setting up, writing, and querying data.</p>
-      <p>Curious to learn more? Try these next steps!</p>
+      <FeedbackBar wizardEventName={props.wizardEventName} />
+      <p style={{marginTop: '80px'}}>
+        Curious to learn more? Try these next steps!
+      </p>
       <FlexBox margin={ComponentSize.Medium} alignItems={AlignItems.Stretch}>
         <ResourceCard className="homepage-wizard-next-steps">
-          <SafeBlankLink href="https://influxdbu.com/">
-            <h4>{InfluxDBUniversityIcon}InfluxDB University</h4>
+          <SafeBlankLink href="https://github.com/InfluxCommunity/sample-flask/blob/main/app.py">
+            <h4>{CodeTerminalIcon}Sample App</h4>
           </SafeBlankLink>
           <p>
-            Our free hands-on courses teach you the technical skills and best
-            practices to get the most out of your real-time data with InfluxDB."
+            Play around with our template code of sample app to streamline your
+            own data into InfluxData.
           </p>
         </ResourceCard>
         <ResourceCard className="homepage-wizard-next-steps">
-          <SafeBlankLink href="https://docs.influxdata.com/influxdb/cloud/tools/flux-vscode">
-            <h4>{VSCodePluginIcon}Install VSCode Plugin</h4>
+          <SafeBlankLink href="https://docs.influxdata.com">
+            <h4>{BookIcon}Key Concepts</h4>
           </SafeBlankLink>
-          <p>Streamline your workflow even further with our VSCode plugin!</p>
+          <p>Learn about important concepts for writing time-series data.</p>
         </ResourceCard>
         <ResourceCard className="homepage-wizard-next-steps">
-          <div
-            style={{
-              display: 'flex',
-              justifyContent: 'center',
-              height: '100%',
-              textTransform: 'uppercase',
-            }}
-          >
-            <h5>
-              More Options{' '}
-              <Icon
-                glyph={IconFont.ArrowRight_New}
-                style={{marginLeft: '9px'}}
-              />
-            </h5>
-          </div>
+          <SafeBlankLink href="https://influxdbu.com/">
+            <h4>{CodeTerminalIcon}InfluxDB University</h4>
+          </SafeBlankLink>
+          <p>
+            Our free hands-on courses teach you the technical skills and best
+            practices to get the most out of your real-time data with InfluxDB.
+          </p>
         </ResourceCard>
       </FlexBox>
-
-      <p style={{marginTop: '150px'}}>
-        What did you think about the set up process? Give us feedback to improve
-      </p>
     </>
   )
 }

src/homepageExperience/containers/GoWizard.tsx

@@ -28,18 +28,24 @@ import {event} from 'src/cloud/utils/reporting'
 interface State {
   currentStep: number
   selectedBucket: string
+  finishStepCompleted: boolean
 }
 
 export class GoWizard extends PureComponent<null, State> {
   state = {
     currentStep: 1,
     selectedBucket: 'my-bucket',
+    finishStepCompleted: false,
   }
 
   private handleSelectBucket = (bucketName: string) => {
     this.setState({selectedBucket: bucketName})
   }
 
+  private handleMarkStepAsCompleted = () => {
+    this.setState({finishStepCompleted: true})
+  }
+
   handleNextClick = () => {
     this.setState(
       {
@@ -91,7 +97,13 @@ export class GoWizard extends PureComponent<null, State> {
         return <ExecuteAggregateQuery bucket={this.state.selectedBucket} />
       }
       case 8: {
-        return <Finish wizardEventName="goWizard" />
+        return (
+          <Finish
+            wizardEventName="goWizard"
+            markStepAsCompleted={this.handleMarkStepAsCompleted}
+            finishStepCompleted={this.state.finishStepCompleted}
+          />
+        )
       }
       default: {
         return <Overview />
@@ -117,7 +129,9 @@ export class GoWizard extends PureComponent<null, State> {
         <div className="homepage-wizard-container--main">
           <div
             className={classnames('homepage-wizard-container--main-wrapper', {
-              overviewSection: this.state.currentStep === 1,
+              verticallyCentered:
+                this.state.currentStep === 1 ||
+                this.state.currentStep === HOMEPAGE_NAVIGATION_STEPS.length,
             })}
           >
             {this.renderStep()}