Source code
Revision control
Copy as Markdown
Other Tools
/* -*- 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
/* eslint-env mozilla/remote-page */
// eslint-disable-next-line import/no-unassigned-import
const SHOPPING_SIDEBAR_ACTIVE_PREF = "browser.shopping.experience2023.active";
const SHOW_KEEP_SIDEBAR_CLOSED_MESSAGE_PREF =
"browser.shopping.experience2023.showKeepSidebarClosedMessage";
const SHOPPING_AUTO_OPEN_SIDEBAR_PREF =
"browser.shopping.experience2023.autoOpen.userEnabled";
class ShoppingMessageBar extends MozLitElement {
#MESSAGE_TYPES_RENDER_TEMPLATE_MAPPING = new Map([
["stale", () => this.staleWarningTemplate()],
["generic-error", () => this.genericErrorTemplate()],
["not-enough-reviews", () => this.notEnoughReviewsTemplate()],
["product-not-available", () => this.productNotAvailableTemplate()],
["thanks-for-reporting", () => this.thanksForReportingTemplate()],
[
"product-not-available-reported",
() => this.productNotAvailableReportedTemplate(),
],
["analysis-in-progress", () => this.analysisInProgressTemplate()],
["reanalysis-in-progress", () => this.reanalysisInProgressTemplate()],
["page-not-supported", () => this.pageNotSupportedTemplate()],
["thank-you-for-feedback", () => this.thankYouForFeedbackTemplate()],
["keep-closed", () => this.keepClosedTemplate()],
]);
static properties = {
type: { type: String },
productUrl: { type: String, reflect: true },
progress: { type: Number, reflect: true },
};
static get queries() {
return {
reAnalysisButtonEl: "#message-bar-reanalysis-button",
productAvailableBtnEl: "#message-bar-report-product-available-btn",
yesKeepClosedButtonEl: "#yes-keep-closed-button",
noThanksButtonEl: "#no-thanks-button",
};
}
onClickAnalysisButton() {
this.dispatchEvent(
new CustomEvent("ReanalysisRequested", {
bubbles: true,
composed: true,
})
);
Glean.shopping.surfaceReanalyzeClicked.record();
}
onClickProductAvailable() {
this.dispatchEvent(
new CustomEvent("ReportedProductAvailable", {
bubbles: true,
composed: true,
})
);
}
handleNoThanksClick() {
RPMSetPref(SHOPPING_SIDEBAR_ACTIVE_PREF, false);
RPMSetPref(SHOW_KEEP_SIDEBAR_CLOSED_MESSAGE_PREF, false);
this.dispatchEvent(
new CustomEvent("HideKeepClosedMessage", {
bubbles: true,
composed: true,
})
);
Glean.shopping.surfaceNoThanksButtonClicked.record();
}
handleKeepClosedClick() {
RPMSetPref(SHOPPING_SIDEBAR_ACTIVE_PREF, false);
RPMSetPref(SHOW_KEEP_SIDEBAR_CLOSED_MESSAGE_PREF, false);
RPMSetPref(SHOPPING_AUTO_OPEN_SIDEBAR_PREF, false);
this.dispatchEvent(
new CustomEvent("HideKeepClosedMessage", {
bubbles: true,
composed: true,
})
);
Glean.shopping.surfaceYesKeepClosedButtonClicked.record();
}
staleWarningTemplate() {
return html`<div class="shopping-message-bar">
<span class="icon"></span>
<article id="message-bar-container" aria-labelledby="header">
<span
data-l10n-id="shopping-message-bar-warning-stale-analysis-message-2"
></span>
<button
id="message-bar-reanalysis-button"
class="small-button shopping-button"
data-l10n-id="shopping-message-bar-warning-stale-analysis-button"
@click=${this.onClickAnalysisButton}
></button>
</article>
</div>`;
}
genericErrorTemplate() {
return html`<moz-message-bar
data-l10n-attrs="heading, message"
type="warning"
data-l10n-id="shopping-message-bar-generic-error"
>
</moz-message-bar>`;
}
notEnoughReviewsTemplate() {
return html`<moz-message-bar
data-l10n-attrs="heading, message"
type="warning"
data-l10n-id="shopping-message-bar-warning-not-enough-reviews"
>
</moz-message-bar>`;
}
productNotAvailableTemplate() {
return html`<moz-message-bar
data-l10n-attrs="heading, message"
type="warning"
data-l10n-id="shopping-message-bar-warning-product-not-available"
>
<button
slot="actions"
id="message-bar-report-product-available-btn"
class="small-button shopping-button"
data-l10n-id="shopping-message-bar-warning-product-not-available-button2"
@click=${this.onClickProductAvailable}
></button>
</moz-message-bar>`;
}
thanksForReportingTemplate() {
return html`<moz-message-bar
data-l10n-attrs="heading, message"
type="info"
data-l10n-id="shopping-message-bar-thanks-for-reporting"
>
</moz-message-bar>`;
}
productNotAvailableReportedTemplate() {
return html`<moz-message-bar
data-l10n-attrs="heading, message"
type="warning"
data-l10n-id="shopping-message-bar-warning-product-not-available-reported"
>
</moz-message-bar>`;
}
analysisInProgressTemplate() {
return html`<div
class="shopping-message-bar analysis-in-progress"
style=${styleMap({
"--analysis-progress-pcent": `${this.progress}%`,
})}
>
<span class="icon"></span>
<article
id="message-bar-container"
aria-labelledby="header"
type="analysis"
>
<strong
id="header"
data-l10n-id="shopping-message-bar-analysis-in-progress-with-amount"
data-l10n-args="${JSON.stringify({
percentage: Math.round(this.progress),
})}"
></strong>
<span
data-l10n-id="shopping-message-bar-analysis-in-progress-message2"
></span>
</article>
</div>`;
}
reanalysisInProgressTemplate() {
return html`<div
class="shopping-message-bar"
id="reanalysis-in-progress-message"
style=${styleMap({
"--analysis-progress-pcent": `${this.progress}%`,
})}
>
<span class="icon"></span>
<article
id="message-bar-container"
aria-labelledby="header"
type="re-analysis"
>
<span
id="header"
data-l10n-id="shopping-message-bar-analysis-in-progress-with-amount"
data-l10n-args="${JSON.stringify({
percentage: Math.round(this.progress),
})}"
></span>
</article>
</div>`;
}
pageNotSupportedTemplate() {
return html`<moz-message-bar
data-l10n-attrs="heading, message"
type="warning"
data-l10n-id="shopping-message-bar-page-not-supported"
>
</moz-message-bar>`;
}
thankYouForFeedbackTemplate() {
return html`<moz-message-bar
data-l10n-attrs="heading"
type="success"
dismissable
data-l10n-id="shopping-survey-thanks"
>
</moz-message-bar>`;
}
keepClosedTemplate() {
return html`<moz-message-bar
data-l10n-attrs="heading, message"
type="info"
data-l10n-id="shopping-message-bar-keep-closed-header"
>
<moz-button-group slot="actions">
<button
id="no-thanks-button"
class="small-button shopping-button"
data-l10n-id="shopping-message-bar-keep-closed-dismiss-button"
@click=${this.handleNoThanksClick}
></button>
<button
id="yes-keep-closed-button"
class="primary small-button shopping-button"
data-l10n-id="shopping-message-bar-keep-closed-accept-button"
@click=${this.handleKeepClosedClick}
></button>
</moz-button-group>
</moz-message-bar>`;
}
render() {
let messageBarTemplate = this.#MESSAGE_TYPES_RENDER_TEMPLATE_MAPPING.get(
this.type
)();
if (messageBarTemplate) {
if (this.type == "stale") {
Glean.shopping.surfaceStaleAnalysisShown.record();
}
return html`
<link
rel="stylesheet"
/>
<link
rel="stylesheet"
/>
${messageBarTemplate}
`;
}
return null;
}
}
customElements.define("shopping-message-bar", ShoppingMessageBar);