Website: Pre-fill launch-party form from personalized email links (#10907)

https://fleetdm.slack.com/archives/C01ALP02RB5/p1680103400723359

Changes:
- Updated `imagine/view-launch-party.js` to accept optional inputs
provided via a query string parameter and send two variables to the
page: `showFormOnPageLoad` and `formDataToPrefill`.
- Updated the launch-party page script to use the variables sent from
the view action to show the form when the page loads and pre-fill the
form inputs.
- Updated the launch-party waitlist form's submit button to say "RSVP"
if form inputs are pre-filled.

website/api/controllers/imagine/view-launch-party.js

@@ -7,6 +7,27 @@ module.exports = {
   description: 'Display "Launch party" page.',
 
 
+  inputs: {
+    showForm: {
+      type: 'boolean',
+      description: 'An optional boolean that if provided with other',
+      defaultsTo: false
+    },
+    emailAddress: {
+      type: 'string',
+      description: 'If provided, this value will be used to prefill the emailAddress field in the waitlist form'
+    },
+    firstName: {
+      type: 'string',
+      description: 'If provided, this value will be used to prefill the first name field in the waitlist form'
+    },
+    lastName: {
+      type: 'string',
+      description: 'If provided, this value will be used to prefill the last name field in the waitlist form'
+    }
+  },
+
+
   exits: {
 
     success: {
@@ -16,10 +37,27 @@ module.exports = {
   },
 
 
-  fn: async function () {
+  fn: async function ({showForm, emailAddress, firstName, lastName}) {
+
+    // If form inputs are provided via query string we'll prefill the inputs in the waitlist form. (e.g., A user is coming to this page from a personalized link in an email)
+    let formDataToPrefill = {};
+    if(emailAddress){// Email address will always be provided if a user is coming here from an email link.
+      formDataToPrefill.emailAddress = emailAddress;
+    }
+    // If the first name provided is not '?' or Outreach's first name template, we'll prefill the first name in the waitlist form.
+    if(firstName && firstName !== '?' && firstName !== '{{first_name}}') {
+      formDataToPrefill.firstName = firstName;
+    }
+    // If the last name provided is not '?' or Outreach's last name template, we'll prefill the last name in the waitlist form.
+    if(lastName && lastName !== '?' && lastName !== '{{last_name}}') {
+      formDataToPrefill.lastName = lastName;
+    }
 
     // Respond with view.
-    return {};
+    return {
+      showForm,
+      formDataToPrefill,
+    };
 
   }
 

website/assets/js/pages/imagine/launch-party.page.js

@@ -22,6 +22,7 @@ parasails.registerPage('launch-party', {
     // Modal
 
     modal: '',
+    showAlternateWaitlistText: false,
   },
 
   //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗
@@ -33,8 +34,13 @@ parasails.registerPage('launch-party', {
   },
   mounted: async function() {
 
-    if(window.location.search && window.location.search === '?showForm') {
+    if(this.showForm) {
       this.modal = 'happy-hour-waitlist';
+      if(!_.isEmpty(this.formDataToPrefill)){
+        // If the user came here via a personalized link in an email, we'll prefill the form with the user information (if provided)
+        this.formData = this.formDataToPrefill;
+        this.showAlternateWaitlistText = true;
+      }
     }
 
   },

website/views/pages/imagine/launch-party.ejs

@@ -92,7 +92,10 @@
           </div>
           <cloud-error v-if="cloudError"></cloud-error>
         <div class="border-0 justify-content-center">
-          <ajax-button purpose="submit-button" spinner="true" type="submit" :syncing="syncing" class="btn btn-sm btn-block btn-primary">Join the wait list</ajax-button>
+          <ajax-button purpose="submit-button" spinner="true" type="submit" :syncing="syncing" class="btn btn-sm btn-block btn-primary">
+            <span v-if="!showAlternateWaitlistText">Join the wait list</span>
+            <span v-else>RSVP</span>
+          </ajax-button>
         </div>
       </ajax-form>
       </div>