1 files changed, 61 insertions, 0 deletions
diff --git a/browser/components/shopping/content/unanalyzed.mjs b/browser/components/shopping/content/unanalyzed.mjs
new file mode 100644
index 0000000000..0be85b65e4
--- /dev/null
+++ b/browser/components/shopping/content/unanalyzed.mjs
@@ -0,0 +1,61 @@
+/* -*- 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/. */
+
+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://browser/content/shopping/shopping-card.mjs";
+
+class UnanalyzedProductCard extends MozLitElement {
+  static properties = {
+    productURL: { type: String, reflect: true },
+  };
+
+  static get queries() {
+    return {
+      analysisButtonEl: "#unanalyzed-product-analysis-button",
+    };
+  }
+
+  onClickAnalysisButton() {
+    this.dispatchEvent(
+      new CustomEvent("NewAnalysisRequested", {
+        bubbles: true,
+        composed: true,
+      })
+    );
+    Glean.shopping.surfaceAnalyzeReviewsNoneAvailableClicked.record();
+  }
+
+  render() {
+    return html`
+      <link
+        rel="stylesheet"
+        href="chrome://browser/content/shopping/unanalyzed.css"
+      />
+      <shopping-card>
+        <div id="unanalyzed-product-wrapper" slot="content">
+          <img id="unanalyzed-product-icon" role="presentation" alt=""></img>
+          <div id="unanalyzed-product-message-content">
+            <h2
+              data-l10n-id="shopping-unanalyzed-product-header-2"
+            ></h2>
+            <p data-l10n-id="shopping-unanalyzed-product-message-2"></p>
+          </div>
+          <button
+            id="unanalyzed-product-analysis-button"
+            class="primary"
+            data-l10n-id="shopping-unanalyzed-product-analyze-button"
+            @click=${this.onClickAnalysisButton}
+          ></button>
+        </div>
+      </shopping-card>
+    `;
+  }
+}
+
+customElements.define("unanalyzed-product-card", UnanalyzedProductCard);