Website: add step to the /start questionnaire for users who don't want to use Fleet (#19514)

Closes: https://github.com/fleetdm/confidential/issues/6287

Changes:
- Added a new page to the /start questionnaire where users can let us
know they're not interested in using Fleet.

website/api/controllers/save-questionnaire-progress.js

@@ -28,6 +28,7 @@ module.exports = {
         'self-hosted-deploy',
         'whats-left-to-get-you-set-up',
         'how-was-your-deployment',
+        'thanks-for-checking-out-fleet',
       ]
     },
     formData: {
@@ -211,6 +212,8 @@ module.exports = {
         } else if(['yes-recently-deployed'].includes(hasUsedFleetAnswer)){
           psychologicalStage = '5 - Personally confident';
         } else { require('assert')(false, 'This should never happen.'); }
+      } else if(currentStep === 'thanks-for-checking-out-fleet') {
+        psychologicalStage = '2 - Aware';
       }//fi
     }//fi
 

website/api/hooks/custom/index.js

@@ -290,7 +290,7 @@ will be disabled and/or hidden in the UI.
               // > The code below is so we don't bother users who have completed the questionnaire
 
               // Determine if this user should see the CTA to bring them to the /start questionnaire using the user's last submitted questionnaire answer.
-              res.locals.showStartCta = !['how-many-hosts','will-you-be-self-hosting','managed-cloud-for-growing-deployments','self-hosted-deploy', 'whats-left-to-get-you-set-up'].includes(req.me.lastSubmittedGetStartedQuestionnaireStep);
+              res.locals.showStartCta = !['how-many-hosts','will-you-be-self-hosting','managed-cloud-for-growing-deployments','self-hosted-deploy', 'whats-left-to-get-you-set-up', 'thanks-for-checking-out-fleet'].includes(req.me.lastSubmittedGetStartedQuestionnaireStep);
               //  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * //
 
               // If an expandCtaAt timestamp is set in the user's sesssion, check the value to see if we should expand the CTA.

website/assets/js/pages/start.page.js

@@ -21,6 +21,7 @@ parasails.registerPage('start', {
       'is-it-any-good': {stepCompleted: true},
       'what-did-you-think': {},
       'deploy-fleet-in-your-environment': {stepCompleted: true},
+      'thanks-for-checking-out-fleet': {stepCompleted: true},
       'how-was-your-deployment': {},
       'whats-left-to-get-you-set-up': {},
     },
@@ -177,6 +178,13 @@ parasails.registerPage('start', {
         case 'whats-left-to-get-you-set-up':
           this.currentStep = 'how-was-your-deployment';
           break;
+        case 'thanks-for-checking-out-fleet':
+          if(this.formData['what-did-you-think'].whatDidYouThink === 'let-me-think-about-it'){
+            this.currentStep = 'what-did-you-think';
+          } else {
+            this.currentStep = 'how-was-your-deployment';
+          }
+          break;
       }
     },
     getNextStep: function() {
@@ -246,7 +254,7 @@ parasails.registerPage('start', {
           break;
         case 'what-did-you-think':
           if(this.formData['what-did-you-think'].whatDidYouThink === 'let-me-think-about-it'){
-            nextStepInForm = '/announcements';
+            nextStepInForm = 'thanks-for-checking-out-fleet';
           } else if(this.formData['what-did-you-think'].whatDidYouThink === 'host-fleet-for-me') {
             nextStepInForm = 'how-many-hosts';
           } else {
@@ -256,6 +264,9 @@ parasails.registerPage('start', {
         case 'deploy-fleet-in-your-environment':
           nextStepInForm = 'how-was-your-deployment';
           break;
+        case 'thanks-for-checking-out-fleet':
+          nextStepInForm = '/announcements';
+          break;
         case 'how-was-your-deployment':
           if(this.formData['how-was-your-deployment'].howWasYourDeployment === 'up-and-running') {
             nextStepInForm = 'whats-left-to-get-you-set-up';
@@ -266,7 +277,7 @@ parasails.registerPage('start', {
           } else if(this.formData['how-was-your-deployment'].howWasYourDeployment === 'changed-mind-want-managed-deployment'){
             nextStepInForm = 'how-many-hosts';
           } else if(this.formData['how-was-your-deployment'].howWasYourDeployment === 'decided-to-not-use-fleet'){
-            nextStepInForm = '/';
+            nextStepInForm = 'thanks-for-checking-out-fleet';
           }
           break;
         case 'whats-left-to-get-you-set-up':

website/views/pages/start.ejs

@@ -556,7 +556,7 @@
       //   ║║├┤ ├─┘│  │ │└┬┘  ├┤ │  ├┤ ├┤  │   ││││  └┬┘│ ││ │├┬┘  ├┤ │││└┐┌┘│├┬┘│ │││││││├┤ │││ │
       //  ═╩╝└─┘┴  ┴─┘└─┘ ┴   └  ┴─┘└─┘└─┘ ┴   ┴┘└┘   ┴ └─┘└─┘┴└─  └─┘┘└┘ └┘ ┴┴└─└─┘┘└┘┴ ┴└─┘┘└┘ ┴%>
     <div v-if="currentStep === 'deploy-fleet-in-your-environment'">
-      <ajax-form :handle-submitting="handleSubmittingForm" :form-errors.sync="formErrors" :form-data="formData['what-did-you-think']" :form-rules="formRules" :syncing.sync="syncing" :cloud-error.sync="cloudError">
+      <ajax-form :handle-submitting="handleSubmittingForm" :form-errors.sync="formErrors" :form-data="formData['deploy-fleet-in-your-environment']" :form-rules="formRules" :syncing.sync="syncing" :cloud-error.sync="cloudError">
         <div purpose="progress-bar-container">
           <div purpose="form-progress-bar"><div purpose="current-progress" style="width: 80%"></div></div>
           <img purpose="success-icon" alt="🏆" src="/images/icon-form-success-12x12@2x.png">
@@ -759,6 +759,21 @@
         <a purpose="back-button" @click="clickGoToPreviousStep()">Back</a>
       </div>
     </div>
+    <%//  ┌┬┐┬ ┬┌─┐┌┐┌┬┌─┌─┐  ┌─┐┌─┐┬─┐  ┌─┐┬ ┬┌─┐┌─┐┬┌─┬┌┐┌┌─┐  ┌─┐┬ ┬┌┬┐  ╔═╗┬  ┌─┐┌─┐┌┬┐
+      //   │ ├─┤├─┤│││├┴┐└─┐  ├┤ │ │├┬┘  │  ├─┤├┤ │  ├┴┐│││││ ┬  │ ││ │ │   ╠╣ │  ├┤ ├┤  │
+      //   ┴ ┴ ┴┴ ┴┘└┘┴ ┴└─┘  └  └─┘┴└─  └─┘┴ ┴└─┘└─┘┴ ┴┴┘└┘└─┘  └─┘└─┘ ┴   ╚  ┴─┘└─┘└─┘ ┴ %>
+    <div v-if="currentStep === 'thanks-for-checking-out-fleet'">
+      <ajax-form :handle-submitting="handleSubmittingForm" :form-errors.sync="formErrors" :form-data="formData['thanks-for-checking-out-fleet']" :form-rules="formRules" :syncing.sync="syncing" :cloud-error.sync="cloudError">
+        <div style="padding-top: 50px;" class="mx-auto">
+          <h2>Thanks for checking out Fleet</h2>
+          <p>Come back at any time to pick up where you left off.</p>
+        </div>
+        <div purpose="form-buttons">
+          <a purpose="back-button" @click="clickGoToPreviousStep()">Back</a>
+          <ajax-button type="submit" purpose="submit-button" class="btn btn-primary" :syncing="syncing">Done</ajax-button>
+        </div>
+      </ajax-form>
+    </div>
     </div>
   </div>
 </div>