Website: add swag request CTA to /better (#23108)

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

Changes:
- Added a swag request CTA to the /better page that is visible to users
visiting the website from the contiguous US.

website/api/controllers/view-transparency.js

@@ -16,8 +16,17 @@ module.exports = {
 
 
   fn: async function () {
+
+    let showSwagForm = false;
+    // Due to shipping costs, we'll check the requesting user's cf-ipcountry to see if they're in the US, and their cf-iplongitude header to see if they're in the contiguous US.
+    if(this.req.get('cf-ipcountry') === 'US' && this.req.get('cf-iplongitude') > -125) {
+      showSwagForm = true;
+    }
     // Respond with view.
-    return {showSecureframeBanner: this.req.param('utm_content') === 'secureframe'};
+    return {
+      showSecureframeBanner: this.req.param('utm_content') === 'secureframe',
+      showSwagForm,
+    };
 
   }
 

website/assets/styles/pages/transparency.less

@@ -83,6 +83,30 @@
       line-height: @text-lineheight;
     }
   }
+  [purpose='swag-cta'] {
+    display: flex;
+    width: 263px;
+    // padding: 16px 24px;
+    align-items: center;
+    text-decoration: none;
+    border-radius: 6px;
+    border: 1px solid var(--UI-Gray, #E3E3E3);
+    background: #FFF;
+    box-shadow: 1px 2px 2px 0px rgba(197, 199, 209, 0.20);
+    font-size: 14px;
+    [purpose='swag-link'] {
+      padding: 16px 24px;
+      display: block;
+    }
+    strong {
+      font-weight: 800;
+    }
+    img {
+      width: 55px;
+      height: 51px;
+      margin-right: 24px;
+    }
+  }
   [purpose='feature'] {
     padding-top: 64px;
     padding-bottom: 64px;

website/views/pages/transparency.ejs

@@ -9,7 +9,18 @@
       <div purpose="feature-text" class="d-flex flex-column">
         <h3>How does it affect me?</h3>
         <p>Your IT team has to maintain your computer and keep it compliant with with a bunch of security requirements. But they also realize you have a job to do. So they want to be as un-intrusive as possible.</p>
-        <p class="mb-0">That’s why they chose Fleet. It’s compatible with everything, including Linux, so it doesn’t limit what operating system you use. And it’s open source, meaning if you want to, you can <a href="https://github.com/fleetdm/fleet" target="_blank">take it apart</a> and see what it’s doing to your computer.</p>
+        <p>That’s why they chose Fleet. It’s compatible with everything, including Linux, so it doesn’t limit what operating system you use. And it’s open source, meaning if you want to, you can <a href="https://github.com/fleetdm/fleet" target="_blank">take it apart</a> and see what it’s doing to your computer.</p>
+        <div purpose="swag-cta" v-if="showSwagForm">
+          <a purpose="swag-link" style="text-decoration: none;" class="d-inline" href="https://kqphpqst851.typeform.com/to/Whm2imZc">
+          <div class="d-flex flex-row justify-content-center align-items-center">
+          <div><img alt="A tumbler with a Fleet logo" src="/images/icon-fleet-tumbler-55x51@2x.png"></div>
+          <div class="d-flex flex-column">
+            <strong>Get a Fleet tumbler</strong>
+            <animated-arrow-button target="_blank" style="font-weight: 400;">It's free</animated-arrow-button>
+          </div>
+          </div>
+          </a>
+        </div>
       </div>
       <div purpose="feature-image">
         <img alt="Information about a users device in Fleet." src="/images/better-hero-image-468x380@2x.png">