Website: update contact page personalization (#18332)

Related to: #18099
Changes:
- Updated the contact page to show a different message depending on
answers a user provided in the /start questionnaire.
- For users who have Fleet deployed already: "Schedule a personalized
demo for your team and get support or training."
- For users who have tried Fleet and are ready to deploy: "Let us help
you deploy and evaluate Fleet quickly for yourself. We’d love to save
you some time."
  -

website/api/controllers/view-contact.js

@@ -33,7 +33,6 @@ module.exports = {
     // Respond with view.
     return {
       formToShow,
-      prefillFormDataFromUserRecord: this.req.me ? true : false// FUTURE: move to frontend.
     };
 
   }

website/assets/js/pages/contact.page.js

@@ -31,7 +31,6 @@ parasails.registerPage('contact', {
       lastName: {required: true},
       message: {required: false},
     },
-
     formDataToPrefillForLoggedInUsers: {},
 
     // Server error state for the form
@@ -39,6 +38,9 @@ parasails.registerPage('contact', {
 
     // Success state when form has been submitted
     cloudSuccess: false,
+
+    // For personalizing the message at the top of the contact form.
+    buyingStage: undefined,
   },
 
   //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗
@@ -52,7 +54,7 @@ parasails.registerPage('contact', {
       // Note: this will be overriden if the user is logged in and has a primaryBuyingSituation set in the database.
       this.formData.primaryBuyingSituation = this.primaryBuyingSituation;
     }
-    if(this.prefillFormDataFromUserRecord){// prefill from database
+    if(this.me){// prefill from database
       this.formDataToPrefillForLoggedInUsers.emailAddress = this.me.emailAddress;
       this.formDataToPrefillForLoggedInUsers.firstName = this.me.firstName;
       this.formDataToPrefillForLoggedInUsers.lastName = this.me.lastName;
@@ -62,6 +64,23 @@ parasails.registerPage('contact', {
         this.formDataToPrefillForLoggedInUsers.primaryBuyingSituation = this.me.primaryBuyingSituation;
       }
       this.formData = _.clone(this.formDataToPrefillForLoggedInUsers);
+      // If this user has submitted the /start questionnaire, determine their buying stage based on the answers they provided
+      if(!_.isEmpty(this.me.getStartedQuestionnaireAnswers)) {
+        let getStartedQuestionnaireAnswers = _.clone(this.me.getStartedQuestionnaireAnswers);
+        if(getStartedQuestionnaireAnswers['have-you-ever-used-fleet']) {
+          // If the user has Fleet deployed, then we'll assume they're stage five.
+          if(getStartedQuestionnaireAnswers['have-you-ever-used-fleet'].fleetUseStatus === 'yes-deployed' ||
+            getStartedQuestionnaireAnswers['have-you-ever-used-fleet'].fleetUseStatus === 'yes-recently-deployed') {
+            this.buyingStage = 'five';
+          }
+        }
+        if(getStartedQuestionnaireAnswers['what-did-you-think']){
+          // If this user has completed the "What did you think" step and wants to self-host Fleet, we'll assume theyre stage four.
+          if(getStartedQuestionnaireAnswers['what-did-you-think'].whatDidYouThink === 'deploy-fleet-in-environemnt'){
+            this.buyingStage = 'four';
+          }
+        }
+      }
     }
     if(window.location.search){// auto-clear query string  (TODO: Document why we're doing this further.  I think this shouldn't exist in the frontend code, instead in the hook.  Because analytics corruption.)
       window.history.replaceState({}, document.title, '/contact' );

website/views/pages/contact.ejs

@@ -3,7 +3,9 @@
     <div class="d-flex flex-lg-row flex-column justify-content-center">
     <div purpose="form-container" v-if="!cloudSuccess">
       <h2>Get in touch</h2>
-      <p>Schedule a personalized demo, or ask us anything. We’d love to chat.</p>
+      <p v-if="!buyingStage">Schedule a personalized demo, or ask us anything. We’d love to chat.</p>
+      <p v-else-if="buyingStage === 'four'">Let us help you deploy and evaluate Fleet quickly for yourself. We’d love to save you some time.</p>
+      <p v-else-if="buyingStage === 'five'">Schedule a personalized demo for your team and get support or training.</p>
       <div purpose="contact-form-switch" class="d-flex flex-sm-row flex-column justify-content-center mx-auto">
         <div purpose="switch-option" :class="[formToDisplay === 'talk-to-us' ? 'selected' : '']" @click="clickSwitchForms('talk-to-us')">Talk to us</div>
         <div purpose="switch-option" :class="[formToDisplay === 'contact' ? 'selected' : '']" @click="clickSwitchForms('contact')">Send a message</div>