summaryrefslogtreecommitdiffstats
path: root/browser/components/protections/content/vpn-card.mjs
blob: dd2039db2eaecb156c3ef566ce5d603c61517014 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
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);
  }
}