Merge pull request mozilla#207 from mozilla/vendor-placeholder

Fix mozilla#205, fix mozilla#198: Include static vendor info in add-on.

src/background/extraction.js

@@ -21,13 +21,7 @@ import {validatePropType} from 'commerce/utils';
  * @param {MessageSender} sender
  *  The sender for the content script that extracted this product
  */
-export async function handleExtractedProductData(message, sender) {
-  // Fetch the favicon, which the content script cannot do itself.
-  const extractedProduct = {
-    ...message.extractedProduct,
-    vendorFaviconUrl: sender.tab ? sender.tab.favIconUrl : '',
-  };
-
+export async function handleExtractedProductData({extractedProduct}, sender) {
   // Do nothing if the extracted product is missing fields.
   const result = validatePropType(extractedProduct, extractedProductShape);
   if (result !== undefined) {

src/background/price_alerts.js

@@ -21,6 +21,7 @@ import {
   showPriceAlert,
 } from 'commerce/state/prices';
 import {getProduct} from 'commerce/state/products';
+import {getVendor} from 'commerce/state/vendors';
 import {recordEvent} from 'commerce/telemetry/extension';
 
 /**
@@ -48,6 +49,8 @@ export function handlePriceAlerts() {
     const product = getProduct(state, alert.productId);
     const originalPrice = getOldestPriceForProduct(state, alert.productId);
     const highPriceAmount = Dinero({amount: alert.highPriceAmount});
+    const vendor = getVendor(state, product.url);
+    const vendorName = vendor ? vendor.name : new URL(product.url).hostname;
 
     // Display notification
     const original = originalPrice.amount.toFormat('$0.00');
@@ -56,7 +59,7 @@ export function handlePriceAlerts() {
     browser.notifications.create(alert.priceId, {
       type: 'basic',
       title: `Price Alert: ${product.title}`,
-      message: `Placeholder · Originally ${original}, high of ${high}, now ${now}`,
+      message: `${vendorName} · Originally ${original}, high of ${high}, now ${now}`,
     });
 
     // Update state now that we've shown it

src/browser_action/components/ProductCard.jsx

@@ -16,6 +16,7 @@ import {
 } from 'commerce/state/prices';
 import {productShape} from 'commerce/state/products';
 import * as productActions from 'commerce/state/products';
+import {getVendor, vendorShape} from 'commerce/state/vendors';
 import {recordEvent} from 'commerce/telemetry/extension';
 
 import 'commerce/browser_action/components/ProductCard.css';
@@ -28,6 +29,7 @@ import 'commerce/browser_action/components/ProductCard.css';
     latestPrice: getLatestPriceForProduct(state, props.product.id),
     originalPrice: getOldestPriceForProduct(state, props.product.id),
     activePriceAlert: getActivePriceAlertForProduct(state, props.product.id),
+    vendor: getVendor(state, props.product.url),
   }),
   {
     setDeletionFlag: productActions.setDeletionFlag,
@@ -44,13 +46,15 @@ export default class ProductCard extends React.Component {
     latestPrice: priceWrapperShape.isRequired,
     originalPrice: priceWrapperShape.isRequired,
     activePriceAlert: priceAlertShape,
+    vendor: vendorShape,
 
     // Dispatch props
     setDeletionFlag: pt.func.isRequired,
   }
 
   static defaultProps = {
     activePriceAlert: null,
+    vendor: null,
   }
 
   /**
@@ -89,7 +93,7 @@ export default class ProductCard extends React.Component {
   }
 
   render() {
-    const {activePriceAlert, latestPrice, originalPrice, product} = this.props;
+    const {activePriceAlert, latestPrice, originalPrice, product, vendor} = this.props;
 
     if (product.isDeleted) {
       return (
@@ -131,8 +135,8 @@ export default class ProductCard extends React.Component {
         <h3 className="title" title={product.title}>{product.title}</h3>
 
         <div className="details">
-          {product.vendorFaviconUrl && (
-            <img className="vendor-favicon" src={product.vendorFaviconUrl} alt="" />
+          {vendor && vendor.faviconUrl && (
+            <img className="vendor-favicon" src={vendor.faviconUrl} alt="" />
           )}
           <span
             className={`latest-price ${priceDifference < 0 ? 'price-decrease' : ''}`}

src/state/migrations.js

@@ -71,6 +71,16 @@ const MIGRATIONS = [
       }),
     };
   },
+
+  function removeVendorFaviconUrl(state) {
+    return {
+      ...state,
+      products: state.products.map((product) => {
+        const {vendorFaviconUrl, ...newProduct} = product;
+        return newProduct;
+      }),
+    };
+  },
 ];
 
 // Actions

src/state/products.js

@@ -23,7 +23,6 @@ export const productShape = pt.shape({
   url: pt.string.isRequired,
   image: pt.string.isRequired,
   isDeleted: pt.bool.isRequired,
-  vendorFaviconUrl: pt.string.isRequired,
   anonId: pt.string.isRequired,
 });
 
@@ -38,7 +37,6 @@ export const extractedProductShape = pt.shape({
   image: pt.string.isRequired,
   price: pt.number.isRequired,
   date: pt.string.isRequired,
-  vendorFaviconUrl: pt.string,
 });
 
 
@@ -196,7 +194,6 @@ export function getProductFromExtracted(data, anonId) {
     title: data.title,
     url: data.url,
     image: data.image,
-    vendorFaviconUrl: data.vendorFaviconUrl || '',
     isDeleted: false,
     anonId,
   };

src/state/vendors.js

@@ -0,0 +1,60 @@
+/* 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/. */
+
+/**
+ * Redux duck for vendors that sell products.
+ * @module
+ */
+
+import pt from 'prop-types';
+
+// Types
+
+export const vendorShape = pt.shape({
+  name: pt.string.isRequired,
+  hostnames: pt.arrayOf(pt.string).isRequired,
+  faviconUrl: pt.string,
+});
+
+// Eventually we will dynamically extract vendor data, but for now it's
+// hard-coded.
+const VENDORS = [
+  {
+    name: 'Amazon',
+    hostnames: ['amazon.com', 'www.amazon.com', 'smile.amazon.com'],
+    faviconUrl: 'https://www.amazon.com/favicon.ico',
+  },
+  {
+    name: 'Best Buy',
+    hostnames: ['bestbuy.com', 'www.bestbuy.com'],
+    faviconUrl: 'https://www.bestbuy.com/favicon.ico',
+  },
+  {
+    name: 'eBay',
+    hostnames: ['ebay.com', 'www.ebay.com'],
+    faviconUrl: 'https://www.ebay.com/favicon.ico',
+  },
+  {
+    name: 'The Home Depot',
+    hostnames: ['homedepot.com', 'www.homedepot.com'],
+    faviconUrl: 'https://www.homedepot.com/favicon.ico',
+  },
+  {
+    name: 'Walmart',
+    hostnames: ['walmart.com', 'www.walmart.com'],
+    faviconUrl: 'https://www.walmart.com/favicon.ico',
+  },
+  {
+    name: 'mkelly Test',
+    hostnames: ['mkelly.me', 'www.mkelly.me'],
+    faviconUrl: '',
+  },
+];
+
+// Selectors
+
+export function getVendor(state, url) {
+  const hostname = new URL(url).hostname;
+  return VENDORS.find(vendor => vendor.hostnames.includes(hostname));
+}