diff options
Diffstat (limited to '')
-rw-r--r-- | browser/components/shopping/content/settings.mjs | 210 |
1 files changed, 210 insertions, 0 deletions
diff --git a/browser/components/shopping/content/settings.mjs b/browser/components/shopping/content/settings.mjs new file mode 100644 index 0000000000..7619bbb131 --- /dev/null +++ b/browser/components/shopping/content/settings.mjs @@ -0,0 +1,210 @@ +/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- + * 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 */ + +import { html } from "chrome://global/content/vendor/lit.all.mjs"; + +import { MozLitElement } from "chrome://global/content/lit-utils.mjs"; + +// eslint-disable-next-line import/no-unassigned-import +import "chrome://global/content/elements/moz-toggle.mjs"; + +class ShoppingSettings extends MozLitElement { + static properties = { + adsEnabled: { type: Boolean }, + adsEnabledByUser: { type: Boolean }, + autoOpenEnabled: { type: Boolean }, + autoOpenEnabledByUser: { type: Boolean }, + hostname: { type: String }, + }; + + static get queries() { + return { + wrapperEl: "#shopping-settings-wrapper", + recommendationsToggleEl: "#shopping-settings-recommendations-toggle", + autoOpenToggleEl: "#shopping-settings-auto-open-toggle", + autoOpenToggleDescriptionEl: "#shopping-auto-open-description", + dividerEl: ".divider", + sidebarEnabledStateEl: "#shopping-settings-sidebar-enabled-state", + optOutButtonEl: "#shopping-settings-opt-out-button", + shoppingCardEl: "shopping-card", + adsLearnMoreLinkEl: "#shopping-ads-learn-more-link", + fakespotLearnMoreLinkEl: "#powered-by-fakespot-link", + }; + } + + onToggleRecommendations() { + this.adsEnabledByUser = this.recommendationsToggleEl.pressed; + let action = this.adsEnabledByUser ? "enabled" : "disabled"; + Glean.shopping.surfaceAdsSettingToggled.record({ action }); + RPMSetPref( + "browser.shopping.experience2023.ads.userEnabled", + this.adsEnabledByUser + ); + } + + onToggleAutoOpen() { + this.autoOpenEnabledByUser = this.autoOpenToggleEl.pressed; + let action = this.autoOpenEnabledByUser ? "enabled" : "disabled"; + Glean.shopping.surfaceAutoOpenSettingToggled.record({ action }); + RPMSetPref( + "browser.shopping.experience2023.autoOpen.userEnabled", + this.autoOpenEnabledByUser + ); + if (!this.autoOpenEnabledByUser) { + RPMSetPref("browser.shopping.experience2023.active", false); + } + } + + onDisableShopping() { + window.dispatchEvent( + new CustomEvent("DisableShopping", { bubbles: true, composed: true }) + ); + Glean.shopping.surfaceOptOutButtonClicked.record(); + } + + fakespotLinkClicked(e) { + if (e.target.localName == "a" && e.button == 0) { + Glean.shopping.surfacePoweredByFakespotLinkClicked.record(); + } + } + + render() { + // Whether we show recommendations at all (including offering a user + // control for them) is controlled via a nimbus-enabled pref. + let canShowRecommendationToggle = this.adsEnabled; + + let adsToggleMarkup = canShowRecommendationToggle + ? html` + <div class="shopping-settings-toggle-option-wrapper"> + <moz-toggle + id="shopping-settings-recommendations-toggle" + ?pressed=${this.adsEnabledByUser} + data-l10n-id="shopping-settings-recommendations-toggle" + data-l10n-attrs="label" + @toggle=${this.onToggleRecommendations}> + </moz-toggle/> + <span id="shopping-ads-learn-more" data-l10n-id="shopping-settings-recommendations-learn-more2"> + <a + id="shopping-ads-learn-more-link" + target="_blank" + href="${window.RPMGetFormatURLPref( + "app.support.baseURL" + )}review-checker-review-quality?utm_campaign=learn-more&utm_medium=inproduct&utm_term=core-sidebar#w_ads_for_relevant_products" + data-l10n-name="review-quality-url" + ></a> + </span> + </div>` + : null; + + /* Auto-open experiment changes how the settings card appears by: + * 1. Showing a new toggle for enabling/disabling auto-open behaviour + * 2. Adding a divider between the toggles and opt-out button + * 3. Showing text indicating that Review Checker is enabled (not opted-out) above the opt-out button + * + * Only show if `browser.shopping.experience2023.autoOpen.enabled` is true. + */ + let autoOpenDescriptionL10nId; + let autoOpenDescriptionL10nArgs; + + switch (this.hostname) { + case "www.amazon.fr": + case "www.amazon.de": + autoOpenDescriptionL10nId = + "shopping-settings-auto-open-description-single-site"; + autoOpenDescriptionL10nArgs = { + currentSite: "Amazon", + }; + break; + default: + autoOpenDescriptionL10nId = + "shopping-settings-auto-open-description-three-sites"; + autoOpenDescriptionL10nArgs = { + firstSite: "Amazon", + secondSite: "Best Buy", + thirdSite: "Walmart", + }; + } + + let autoOpenToggleMarkup = this.autoOpenEnabled + ? html` <div class="shopping-settings-toggle-option-wrapper"> + <moz-toggle + id="shopping-settings-auto-open-toggle" + ?pressed=${this.autoOpenEnabledByUser} + data-l10n-id="shopping-settings-auto-open-toggle" + data-l10n-attrs="label" + @toggle=${this.onToggleAutoOpen} + > + </moz-toggle> + <span + id="shopping-auto-open-description" + data-l10n-id=${autoOpenDescriptionL10nId} + data-l10n-args=${JSON.stringify(autoOpenDescriptionL10nArgs)} + ></span> + </div>` + : null; + + return html` + <link + rel="stylesheet" + href="chrome://browser/content/shopping/settings.css" + /> + <link + rel="stylesheet" + href="chrome://browser/content/shopping/shopping-page.css" + /> + <shopping-card + data-l10n-id="shopping-settings-label" + data-l10n-attrs="label" + type=${!this.autoOpenEnabled ? "accordion" : ""} + > + <div + id="shopping-settings-wrapper" + class=${this.autoOpenEnabled + ? "shopping-settings-auto-open-ui-enabled" + : ""} + slot="content" + > + <section id="shopping-settings-toggles-section"> + ${adsToggleMarkup} ${autoOpenToggleMarkup} + </section> + ${this.autoOpenEnabled + ? html`<span class="divider" role="separator"></span>` + : null} + <section id="shopping-settings-opt-out-section"> + ${this.autoOpenEnabled + ? html`<span + id="shopping-settings-sidebar-enabled-state" + data-l10n-id="shopping-settings-sidebar-enabled-state" + ></span>` + : null} + <button + class="shopping-button" + id="shopping-settings-opt-out-button" + data-l10n-id="shopping-settings-opt-out-button" + @click=${this.onDisableShopping} + ></button> + </section> + </div> + </shopping-card> + <p + id="powered-by-fakespot" + class="deemphasized" + data-l10n-id="powered-by-fakespot" + @click=${this.fakespotLinkClicked} + > + <a + id="powered-by-fakespot-link" + data-l10n-name="fakespot-link" + target="_blank" + href="https://www.fakespot.com/our-mission?utm_source=review-checker&utm_campaign=fakespot-by-mozilla&utm_medium=inproduct&utm_term=core-sidebar" + ></a> + </p> + `; + } +} + +customElements.define("shopping-settings", ShoppingSettings); |