1 files changed, 103 insertions, 0 deletions
diff --git a/browser/components/protections/content/vpn-card.mjs b/browser/components/protections/content/vpn-card.mjs
new file mode 100644
index 0000000000..dd2039db2e
--- /dev/null
+++ b/browser/components/protections/content/vpn-card.mjs
@@ -0,0 +1,103 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* eslint-env mozilla/remote-page */
+
+export default class VPNCard {
+  constructor(doc) {
+    this.doc = doc;
+  }
+
+  init() {
+    const vpnLink = this.doc.getElementById("get-vpn-link");
+    const vpnBannerLink = this.doc.getElementById("vpn-banner-link");
+    vpnLink.href = RPMGetStringPref(
+      "browser.contentblocking.report.vpn.url",
+      ""
+    );
+    vpnBannerLink.href = RPMGetStringPref(
+      "browser.contentblocking.report.vpn-promo.url",
+      ""
+    );
+
+    vpnLink.addEventListener("click", () => {
+      this.doc.sendTelemetryEvent("click", "vpn_card_link");
+    });
+    let androidVPNAppLink = document.getElementById(
+      "vpn-google-playstore-link"
+    );
+    androidVPNAppLink.href = RPMGetStringPref(
+      "browser.contentblocking.report.vpn-android.url"
+    );
+    androidVPNAppLink.addEventListener("click", () => {
+      document.sendTelemetryEvent("click", "vpn_app_link_android");
+    });
+    let iosVPNAppLink = document.getElementById("vpn-app-store-link");
+    iosVPNAppLink.href = RPMGetStringPref(
+      "browser.contentblocking.report.vpn-ios.url"
+    );
+    iosVPNAppLink.addEventListener("click", () => {
+      document.sendTelemetryEvent("click", "vpn_app_link_ios");
+    });
+
+    const vpnBanner = this.doc.querySelector(".vpn-banner");
+    const exitIcon = vpnBanner.querySelector(".exit-icon");
+    vpnBannerLink.addEventListener("click", () => {
+      this.doc.sendTelemetryEvent("click", "vpn_banner_link");
+    });
+    // User has closed the vpn banner, hide it.
+    exitIcon.addEventListener("click", () => {
+      vpnBanner.classList.add("hidden");
+      this.doc.sendTelemetryEvent("click", "vpn_banner_close");
+    });
+
+    this.showVPNCard();
+  }
+
+  // Show the VPN card if user is located in areas, and on platforms, it serves
+  async showVPNCard() {
+    const showVPNBanner = this.showVPNBanner.bind(this);
+    RPMSendQuery("FetchShowVPNCard", {}).then(shouldShow => {
+      if (!shouldShow) {
+        return;
+      }
+      const vpnCard = this.doc.querySelector(".vpn-card");
+
+      // add 'subscribed' class if user is subscribed to vpn
+      RPMSendQuery("FetchVPNSubStatus", {}).then(async hasVPN => {
+        if (hasVPN) {
+          vpnCard.classList.add("subscribed");
+          document.l10n.setAttributes(
+            vpnCard.querySelector(".card-title"),
+            "vpn-title-subscribed"
+          );
+
+          // hide the promo banner if the user is already subscribed to vpn
+          await RPMSetPref(
+            "browser.contentblocking.report.hide_vpn_banner",
+            true
+          );
+        }
+
+        vpnCard.classList.remove("hidden");
+        showVPNBanner();
+      });
+    });
+  }
+
+  showVPNBanner() {
+    if (
+      RPMGetBoolPref("browser.contentblocking.report.hide_vpn_banner", false) ||
+      !RPMGetBoolPref("browser.vpn_promo.enabled", false)
+    ) {
+      return;
+    }
+
+    const vpnBanner = this.doc.querySelector(".vpn-banner");
+    vpnBanner.classList.remove("hidden");
+    this.doc.sendTelemetryEvent("show", "vpn_banner");
+    // VPN banner only shows on the first visit, flip a pref so it does not show again.
+    RPMSetPref("browser.contentblocking.report.hide_vpn_banner", true);
+  }
+}