summaryrefslogtreecommitdiffstats
path: root/browser/components/protections/content/vpn-card.mjs
diff options
context:
space:
mode:
Diffstat (limited to 'browser/components/protections/content/vpn-card.mjs')
-rw-r--r--browser/components/protections/content/vpn-card.mjs103
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);
+ }
+}