From e27a3bb851df92b4ef6298744e5b7b380806aa92 Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Wed, 3 Jul 2024 15:57:35 -0500
Subject: [PATCH] Website: Update start questionnaire CTA visibility (#20206)

Closes: #20189

Changes:
- Made the CTA for the get started questionnaire visible to users who
have completed the "Thanks for checking out Fleet" step
- Updated the background of the image in the mobile start CTA.
- Updated the get started questionnaire to take users who have completed
the "Thanks for checking out Fleet" step to either the "What did you
think?" or "How was your deployment?" steps
---
 website/api/hooks/custom/index.js           | 2 +-
 website/assets/js/pages/start.page.js       | 6 ++++++
 website/assets/styles/layout.less           | 4 ++++
 website/views/partials/continue.partial.ejs | 4 +++-
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/website/api/hooks/custom/index.js b/website/api/hooks/custom/index.js
index 7d98eca827..e82a6ba8ab 100644
--- a/website/api/hooks/custom/index.js
+++ b/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', 'thanks-for-checking-out-fleet'].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'].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.
diff --git a/website/assets/js/pages/start.page.js b/website/assets/js/pages/start.page.js
index bffd2a29ac..ac31cb69d4 100644
--- a/website/assets/js/pages/start.page.js
+++ b/website/assets/js/pages/start.page.js
@@ -309,8 +309,14 @@ parasails.registerPage('start', {
           this.formData[step] = this.previouslyAnsweredQuestions[step];
         }
         this.currentStep = this.getNextStep();
+        // If the last step was a redirect, take the user to the step they submitted previously.
         if(_.startsWith(this.currentStep, '/')){
           this.currentStep = this.me.lastSubmittedGetStartedQuestionnaireStep;
+          // If this user is coming back to the form after submitting the 'thanks-for-checking-out-fleet' step,
+          // take them back to the step they submitted before they reached that step. (Either what-did-you-think or how-was-your-deployment)
+          if(this.currentStep === 'thanks-for-checking-out-fleet'){
+            this.clickGoToPreviousStep();
+          }
         }
       }
     },
diff --git a/website/assets/styles/layout.less b/website/assets/styles/layout.less
index 51483b4804..0ac628723a 100644
--- a/website/assets/styles/layout.less
+++ b/website/assets/styles/layout.less
@@ -137,6 +137,10 @@ html, body {
     [purpose='continue-chevron'] {
       display: none;
     }
+    [purpose='banner-image-background'] {
+      background-color: #EEF9FE;
+      border-radius: 4px;
+    }
     [purpose='banner-image'] {
       height: 80px;
       min-width: 80px;
diff --git a/website/views/partials/continue.partial.ejs b/website/views/partials/continue.partial.ejs
index 7333391353..df4870b98d 100644
--- a/website/views/partials/continue.partial.ejs
+++ b/website/views/partials/continue.partial.ejs
@@ -3,7 +3,9 @@
 
   <div purpose="continue-banner" class="d-flex justify-content-end">
     <div purpose="banner-body" class="d-flex flex-row align-items-center invisible <%- collapseStartCta ? 'collapsed' : ''%>">
-      <div purpose="banner-image">
+      <div purpose="banner-image-background">
+        <div purpose="banner-image">
+        </div>
       </div>
       <div purpose="banner-text" class="d-flex flex-column justify-content-center">
         <% if(['2 - Aware', '3 - Intrigued'].includes(me.psychologicalStage)) { %>