Website: update contact form for Fleet premium subscribers (#26361)

Changes: - Updated the contact page to only display the "Send a message" form for users who have a Fleet premium subscription - Updated the deliver-contact-form-message action to include details about a user's subscription if the user has purchased a Fleet premium license, and to also send an email to our support email address (in addition to sending a message to our Slack)
fleetdm · Feb 17, 2025 · 9fdb2d0 · 9fdb2d0
1 parent 70d24c4
commit 9fdb2d0
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 13 deletions.
diff --git a/website/api/controllers/deliver-contact-form-message.js b/website/api/controllers/deliver-contact-form-message.js
@@ -50,18 +50,58 @@ module.exports = {
 
   fn: async function({emailAddress, firstName, lastName, message}) {
 
+
+    let userHasPremiumSubscription = false;
+    let thisSubscription;
+    if(this.req.me){
+      thisSubscription = await Subscription.findOne({user: this.req.me.id});
+      if(thisSubscription) {
+        userHasPremiumSubscription = true;
+      }
+    }
+
     if (!sails.config.custom.slackWebhookUrlForContactForm) {
       throw new Error(
         'Message not delivered: slackWebhookUrlForContactForm needs to be configured in sails.config.custom. Here\'s the undelivered message: ' +
         `Name: ${firstName + ' ' + lastName}, Email: ${emailAddress}, Message: ${message ? message : 'No message.'}`
       );
     }
+    if(userHasPremiumSubscription){
+      // If the user has a Fleet Premium subscription, prepend the message with details about their subscription.
+      let subscriptionDetails =`
+Fleet Premium subscription details:
+- Fleet Premium subscriber since: ${new Date(thisSubscription.createdAt).toISOString().split('T')[0]}
+- Next billing date: ${new Date(thisSubscription.nextBillingAt).toISOString().split('T')[0]}
+- Host count: ${thisSubscription.numberOfHosts}
+- Organization: ${this.req.me.organization}
+-----
+
+      `;
+      message = subscriptionDetails + message;
+      await sails.helpers.sendTemplateEmail.with({
+        to: sails.config.custom.fromEmailAddress,
+        replyTo: {
+          name: firstName + ' '+ lastName,
+          emailAddress: emailAddress,
+        },
+        subject: 'New contact form message',
+        layout: false,
+        template: 'email-contact-form',
+        templateData: {
+          emailAddress,
+          firstName,
+          lastName,
+          message,
+        },
+      });
+    }
 
     await sails.helpers.http.post(sails.config.custom.slackWebhookUrlForContactForm, {
       text: `New contact form message: (cc: <@U0801Q57JDU>, <@U05CS07KASK>) (Remember: we have to email back; can't just reply to this thread.)`+
       `Name: ${firstName + ' ' + lastName}, Email: ${emailAddress}, Message: ${message ? message : 'No message.'}`
     });
 
+
     sails.helpers.salesforce.updateOrCreateContactAndAccount.with({
       emailAddress: emailAddress,
       firstName: firstName,

diff --git a/website/api/controllers/view-contact.js b/website/api/controllers/view-contact.js
@@ -27,12 +27,24 @@ module.exports = {
 
     let formToShow = 'talk-to-us';
 
+    let userIsLoggedIn = !! this.req.me;
+    let userHasPremiumSubscription = false;
+    if(userIsLoggedIn) {
+      let thisSubscription = await Subscription.findOne({user: this.req.me.id});
+      if(thisSubscription){
+        formToShow = 'contact';
+        userHasPremiumSubscription = true;
+      }
+    }
+
     if(sendMessage) {
       formToShow = 'contact';
     }
     // Respond with view.
     return {
       formToShow,
+      userIsLoggedIn,
+      userHasPremiumSubscription
     };
 
   }

diff --git a/website/assets/js/pages/entrance/login.page.js b/website/assets/js/pages/entrance/login.page.js
@@ -44,6 +44,12 @@ parasails.registerPage('login', {
       this.pageToRedirectToAfterLogin = '/new-license#login';
       window.location.hash = '';
     }
+    // If we're redirecting this user to the contact form after they log in, modify the link to the /register page and the pageToRedirectToAfterLogin.
+    if(window.location.hash && window.location.hash === '#contact'){
+      this.registerSlug = '/register';
+      this.pageToRedirectToAfterLogin = '/contact?sendMessage';
+      window.location.hash = '';
+    }
   },
   mounted: async function() {
     //…

diff --git a/website/assets/styles/pages/contact.less b/website/assets/styles/pages/contact.less
@@ -27,6 +27,34 @@
     color: #515774;
     font-size: 14px;
   }
+  [purpose='note'] {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    border-radius: 8px;
+    border: 1px solid #B4B2FE;
+    background: #F7F7FC;
+    text-decoration: none;
+    padding: 16px 24px;
+    margin-bottom: 40px;
+    img {
+      height: 16px;
+      margin-right: 8px;
+    }
+    p {
+      a {
+        color: #515774;
+      }
+      color: #515774;
+      font-family: Inter;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 21px;
+      margin-bottom: 0px;
+    }
+  }
   [purpose='form-option'] {
     user-select: none;
     cursor: pointer;

diff --git a/website/assets/styles/pages/support.less b/website/assets/styles/pages/support.less
@@ -92,7 +92,7 @@
       width: 100%;
     }
     a {
-      width: 50%;
+      width: 33%;
     }
 
 
@@ -116,7 +116,7 @@
 
     [purpose='support-row'] {
       [purpose='support-card'] {
-        width: 274px;
+        width: 341px;
         height: 221px;
       }
     }

diff --git a/website/views/pages/contact.ejs b/website/views/pages/contact.ejs
@@ -3,15 +3,33 @@
     <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 v-if="psychologicalStage === '4 - Has use case'">Let us help you deploy and evaluate Fleet quickly for yourself. We’d love to save you some time.</p>
+      <p v-if="userHasPremiumSubscription" style="margin-bottom: 40px;">Dedicated professional support from the Fleet team.</p>
+      <p v-else-if="psychologicalStage === '4 - Has use case'">Let us help you deploy and evaluate Fleet quickly for yourself. We’d love to save you some time.</p>
       <p v-else-if="psychologicalStage === '5 - Personally confident'">Schedule a personalized demo for your team and get support or training.</p>
       <p v-else>Schedule a personalized demo, or ask us anything. We’d love to chat.</p>
-      <div purpose="contact-form-switch" class="d-flex flex-sm-row flex-column justify-content-center mx-auto">
+      <div purpose="contact-form-switch" class="d-flex flex-sm-row flex-column justify-content-center mx-auto" v-if="!userHasPremiumSubscription">
         <div purpose="switch-option" :class="[formToDisplay === 'talk-to-us' ? 'selected' : '']" @click="clickSwitchForms('talk-to-us')">Talk to an engineer</div>
         <div purpose="switch-option" :class="[formToDisplay === 'contact' ? 'selected' : '']" @click="clickSwitchForms('contact')">Send a message</div>
         <div purpose="switch" :class="formToDisplay+'-selected'"></div>
       </div>
       <div v-if="formToDisplay === 'contact'">
+
+
+        <div purpose="note" v-if="!userIsLoggedIn">
+          <div>
+            <img src="/images/icon-info-16x16@2x.png" alt="An icon indicating that this section has important information">
+          </div>
+          <p>Already a Fleet customer? <a href="/login#contact">Sign in</a> for Premium support</p>
+        </div>
+
+        <div purpose="note" v-if="userIsLoggedIn && !userHasPremiumSubscription">
+          <div>
+            <img src="/images/icon-info-16x16@2x.png" alt="An icon indicating that this section has important information">
+          </div>
+          <p>Already a Premium customer? Reach out to us directly or use the form below.</p>
+        </div>
+
+
         <ajax-form action="deliverContactFormMessage" class="contact" :form-errors.sync="formErrors" :form-data="formData" :form-rules="contactFormRules" :syncing.sync="syncing" :cloud-error.sync="cloudError" @submitted="submittedContactForm()">
           <div class="form-group">
             <label for="contact-email-address">Work email *</label>

diff --git a/website/views/pages/support.ejs b/website/views/pages/support.ejs
@@ -37,22 +37,13 @@
 
     <div purpose="support-cards" class="d-flex mx-auto justify-content-center">
       <div purpose="support-row" class="d-flex">
-        <a href="/handbook/company/communications#customer-support-service-level-agreements-slas">
-          <div purpose="support-card" class="card d-flex justify-content-center">
-            <img alt="Premium support" src="/images/icon-premium-support-64x64@2x.png">
-            <h3>Premium support</h3>
-            <p>Dedicated support from the Fleet team.</p>
-          </div>
-        </a>
         <a href="https://github.com/fleetdm/fleet/issues/new?assignees=&labels=bug%2C%3Areproduce&projects=&template=bug-report.md&title=" target="_blank">
           <div purpose="support-card" class="card d-flex justify-content-center">
             <img alt="Bug report" src="/images/icon-bug-64x64@2x.png">
             <h3>Bug report</h3>
             <p>Report a bug to help us improve.</p>
           </div>
         </a>
-      </div>
-      <div purpose="support-row" class="d-flex">
         <a href="https://github.com/fleetdm/fleet/issues/new?assignees=&labels=~customer+request&projects=&template=feature-request.md&title=" target="_blank">
           <div purpose="support-card" class="card d-flex justify-content-center">
             <img alt="Suggestions" src="/images/icon-suggestion-64x64@2x.png" class="mx-auto mx-sm-0">