Add prices to domiciliario

css/main.css

@@ -396,6 +396,25 @@ p.product-short-desc {
     margin-bottom: .5rem;
 }
 
+.product-price {
+    display: flex;
+    align-items: baseline;
+    font-family: 'Raleway', sans-serif;
+    color: #0C2545;
+    font-size: 1.5rem;
+}
+
+.price-symbol, 
+.price-decimal {
+    font-size: 1.5rem;
+    padding: 0 .2rem;
+}
+.price-total {
+    font-weight: 900;
+    color: #0C2545;
+    font-family: 'Roboto', sans-serif;
+}
+
 #higiene h2,
 #mascaras h2,
 #acido-hialuronico h2,

js/vademecum.js

@@ -39,13 +39,40 @@ const CONFIG = {
   },
   "dom-a": {
       contactInformation: false,
-      productFilter: products => products,
+      productFilter: products => Object.keys(products).reduce((acc, x) => {
+        var filtered = products[x].filter(p => {
+                let v = p.variants.filter(v => v.code < 2000 );
+                return v.length || p.category.includes('Protección Solar');
+            });
+        return {
+            ...acc,
+            [x]: filtered, 
+        }
+    }, {}),
       prices: true,
+      categories: [
+        [ "Higiene", "higiene" ],
+        [ "Ácido Hialurónico", "acido-hialuronico" ],
+        [ "Corporales", "corporales" ],
+        [ "Hombres", "hombres" ],
+        [ "Protección Intensiva", "proteccion-intensiva" ],
+        [ "Monodosis", "monodosis" ],
+        [ "Protección Solar", "proteccion-solar" ]
+      ]
   },
-  "dom-a": {
+  "dom-b": {
       contactInformation: false,
       productFilter: products => products,
       prices: false,
+      categories: [
+        [ "Higiene", "higiene" ],
+        [ "Ácido Hialurónico", "acido-hialuronico" ],
+        [ "Corporales", "corporales" ],
+        [ "Hombres", "hombres" ],
+        [ "Protección Intensiva", "proteccion-intensiva" ],
+        [ "Monodosis", "monodosis" ],
+        [ "Protección Solar", "proteccion-solar" ]
+      ]
   },
 };
 
@@ -64,14 +91,23 @@ const Section = (title, paragraph, prepend) => (
   </div>
 );
 
-const Product = (product, key) => (
+const Product = (product, key, prices) => (
   <div className="product-container">
-    <div className="row valign-wrapper">
+    <div className="row">
       <div class="col s2">
-        <img 
-          src={`images/_img/${product.img || product.variants[0].img}.png`}
-          className="responsive-img"
-        />
+      {
+        prices ? (
+          <img 
+            src={`images/_img/${product.variants[0].img || product.img}.png`}
+            className="responsive-img"
+          />
+        ) : (
+          <img 
+            src={`images/_img/${product.img || product.variants[0].img}.png`}
+            className="responsive-img"
+          />
+        )
+      }
       </div>
       <div class="col s10">
         <h4 className="primary-title">
@@ -81,6 +117,20 @@ const Product = (product, key) => (
           <p className="product-short-desc" lang="es">
             {product.shortDesc}
           </p>
+          {
+            prices && (
+              <div className="product-price">
+                <div className="price-tag">
+                  <h5>
+                    <span className="price-symbol">$</span> 
+                    <span className="price-total">{product.variants[0].sellPrice}</span>
+                    <sup className="price-decimal">00</sup>
+                  </h5>
+                </div>
+                <div className="product-size">Cont. {product.variants[0].content}</div>
+              </div>
+            )
+          }
         </div>
       </div>
     </div>
@@ -110,7 +160,7 @@ const Category = (category, products, prices) => (
       {
         products.map((p, i) => (
           <div className="collection-item">
-            { Product(p, i) }
+            { Product(p, i, prices) }
           </div>
         ))
       }
@@ -144,6 +194,7 @@ const ToC = (categories, products) => (
 
 
 const Vademecum = (categories, products, prices) => {
+  console.log("prices?", prices);
   return categories.map((categoryName, i) => (
     <div key={i}>
       {
@@ -262,6 +313,7 @@ class VademecumData extends React.Component {
       .then(response => response.json())
       .then(this.state.config.productFilter)
       .then(data => {
+        console.log("data", data)
         this.setState({
           products: data,
         })
@@ -270,7 +322,6 @@ class VademecumData extends React.Component {
 
   render() {
     const { categories, products, config } = this.state;
-    console.log(config.contactInformation);
     if (products) {
       return ( 
         <div>

lib/vademecum.js

@@ -18,11 +18,12 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 var dom = React.createElement;
-
-var CONFIG = _defineProperty({
+var CONFIG = {
   "prof-a": {
     contactInformation: true,
     productFilter: function productFilter(products) {
@@ -40,19 +41,30 @@ var CONFIG = _defineProperty({
     categories: [["Higiene", "higiene"], ["Máscaras", "mascaras"], ["Ácido Hialurónico", "acido-hialuronico"], ["Peeling", "peeling"], ["Corporales", "corporales"], ["Hombres", "hombres"], ["Protección Intensiva", "proteccion-intensiva"], ["Monodosis", "monodosis"], ["Activos Concentrados", "activos-concentrados"], ["Protección Solar", "proteccion-solar"]]
   },
   "dom-a": {
+    contactInformation: false,
+    productFilter: function productFilter(products) {
+      return Object.keys(products).reduce(function (acc, x) {
+        var filtered = products[x].filter(function (p) {
+          var v = p.variants.filter(function (v) {
+            return v.code < 2000;
+          });
+          return v.length || p.category.includes('Protección Solar');
+        });
+        return _objectSpread({}, acc, _defineProperty({}, x, filtered));
+      }, {});
+    },
+    prices: true,
+    categories: [["Higiene", "higiene"], ["Ácido Hialurónico", "acido-hialuronico"], ["Corporales", "corporales"], ["Hombres", "hombres"], ["Protección Intensiva", "proteccion-intensiva"], ["Monodosis", "monodosis"], ["Protección Solar", "proteccion-solar"]]
+  },
+  "dom-b": {
     contactInformation: false,
     productFilter: function productFilter(products) {
       return products;
     },
-    prices: true
+    prices: false,
+    categories: [["Higiene", "higiene"], ["Ácido Hialurónico", "acido-hialuronico"], ["Corporales", "corporales"], ["Hombres", "hombres"], ["Protección Intensiva", "proteccion-intensiva"], ["Monodosis", "monodosis"], ["Protección Solar", "proteccion-solar"]]
   }
-}, "dom-a", {
-  contactInformation: false,
-  productFilter: function productFilter(products) {
-    return products;
-  },
-  prices: false
-});
+};
 
 var Tag = function Tag(label, key, className) {
   return dom("div", {
@@ -72,14 +84,17 @@ var Section = function Section(title, paragraph, prepend) {
   }, prepend, paragraph));
 };
 
-var Product = function Product(product, key) {
+var Product = function Product(product, key, prices) {
   return dom("div", {
     className: "product-container"
   }, dom("div", {
-    className: "row valign-wrapper"
+    className: "row"
   }, dom("div", {
     class: "col s2"
-  }, dom("img", {
+  }, prices ? dom("img", {
+    src: "images/_img/".concat(product.variants[0].img || product.img, ".png"),
+    className: "responsive-img"
+  }) : dom("img", {
     src: "images/_img/".concat(product.img || product.variants[0].img, ".png"),
     className: "responsive-img"
   })), dom("div", {
@@ -91,7 +106,19 @@ var Product = function Product(product, key) {
   }, dom("p", {
     className: "product-short-desc",
     lang: "es"
-  }, product.shortDesc)))), dom("div", null, product.fullDesc && Section('Descripción', product.fullDesc), product.application && Section('Aplicación', product.application), product.actives && Section('', product.actives.map(function (p) {
+  }, product.shortDesc), prices && dom("div", {
+    className: "product-price"
+  }, dom("div", {
+    className: "price-tag"
+  }, dom("h5", null, dom("span", {
+    className: "price-symbol"
+  }, "$"), dom("span", {
+    className: "price-total"
+  }, product.variants[0].sellPrice), dom("sup", {
+    className: "price-decimal"
+  }, "00"))), dom("div", {
+    className: "product-size"
+  }, "Cont. ", product.variants[0].content))))), dom("div", null, product.fullDesc && Section('Descripción', product.fullDesc), product.application && Section('Aplicación', product.application), product.actives && Section('', product.actives.map(function (p) {
     return Tag(p);
   }), product.ph && Tag("PH ".concat(product.ph), null, 'is-ph'))));
 };
@@ -107,7 +134,7 @@ var Category = function Category(category, products, prices) {
   }, products.map(function (p, i) {
     return dom("div", {
       className: "collection-item"
-    }, Product(p, i));
+    }, Product(p, i, prices));
   })));
 };
 
@@ -131,6 +158,7 @@ var ToC = function ToC(categories, products) {
 };
 
 var Vademecum = function Vademecum(categories, products, prices) {
+  console.log("prices?", prices);
   return categories.map(function (categoryName, i) {
     return dom("div", {
       key: i
@@ -225,7 +253,7 @@ function (_React$Component) {
     _classCallCheck(this, VademecumData);
 
     _this = _possibleConstructorReturn(this, _getPrototypeOf(VademecumData).call(this, props));
-    var config = CONFIG["prof-a"];
+    var config = CONFIG["dom-a"];
     _this.state = {
       config: config,
       categories: config.categories,
@@ -243,6 +271,8 @@ function (_React$Component) {
       fetch('data/products-by-category.json').then(function (response) {
         return response.json();
       }).then(this.state.config.productFilter).then(function (data) {
+        console.log("data", data);
+
         _this2.setState({
           products: data
         });
@@ -255,7 +285,6 @@ function (_React$Component) {
           categories = _this$state.categories,
           products = _this$state.products,
           config = _this$state.config;
-      console.log(config.contactInformation);
 
       if (products) {
         return dom("div", null, ToC(categories, products), Vademecum(categories, products, config.prices), config.contactInformation && ContactInformation());