Add contact information

css/main.css

@@ -301,7 +301,7 @@ h2 {
     color: #0C2545;
     position: relative;
     font-size: 2.5rem;
-    margin: 2rem 0;
+    margin: 1.5rem 0;
 }
 
 h2::before {
@@ -309,7 +309,7 @@ h2::before {
     content: '';
     display: block;
     height: 5rem;
-    left: -80px;
+    left: -70px;
     position: absolute;
     top: -1rem;
     width: 4rem;
@@ -335,7 +335,7 @@ h4 {
     font-weight: 600;
 }
 
-h4.product-name {
+h4.primary-title {
     color: #5A91C4;
     font-size: 1.8rem;
 }
@@ -348,6 +348,7 @@ p.product-short-desc {
     font-family: 'Raleway', sans-serif;
     font-style: italic;
     color: #0C2545;
+    margin-bottom: 0;
 }
 
 .product-short-desc,
@@ -364,10 +365,21 @@ p.product-short-desc {
 
 .product-container
 .row {
-    margin-bottom: 1rem;
+    margin-bottom: .5rem;
+}
+
+#higiene h2,
+#mascaras h2,
+#acido-hialuronico h2 {
+    page-break-before: always;
 }
+
 .collection
 .collection-item {
     padding: 0;
     line-height: 1.8rem;
+}
+
+.container {
+    width: 90%;
 }

data/products-by-category.json

@@ -1031,31 +1031,6 @@
 			"name": "Crema Antioxidante Corporal",
 			"img": "antioxidante-corporal-500"
 		},
-		{
-			"category": [
-				"Corporales"
-			],
-			"shortDesc": "Tratamiento reafirmante con alto poder nutritivo que, por su composición rica en activos compensadores, mejora en firmeza y elasticidad de la piel, recuperando toda su vitalidad y energía",
-			"fullDesc": "Espuma corporal, específicamente formulada para potenciar el tratamiento reductor, anticelulítico y tonificante corporal. Ayuda a eliminar el aspecto visible de la celulitis, mejora la tonicidad de los tejidos, disminuye la sensación de piernas cansadas. Reequilibra a la piel en oligoelementos, minerales, aminoácidos y proteínas. Piel más lisa, firme, elástica, suave y luminosa. Puede utilizarse también como apoyo domiciliario",
-			"actives": [
-				"Cafeína",
-				"Centella Asiática",
-				"Acido Lipoico",
-				"Fosfatidilcolina",
-				"Espirulina",
-				"Vitamina C Liposomada",
-				"Oligoelementos marinos + Zn + CU"
-			],
-			"application": "En gabinete, aplicar luego del Scrub, en sinergia con activos concentrados, Centella Asiática, Cafeina, Fosfatidilcolina. Puede combinarse con aparatología. Apoyo domiciliario: Aplicar antes de hacer ejercicio y después de ducharse. Indicada para todo tipo de piel.",
-			"variants": [{
-				"code": 1049,
-				"content": "160 ml.",
-				"price": 290,
-				"sellPrice": 580,
-				"img": "espuma-7"
-			}],
-			"name": "Espuma ACTIVE 7"
-		},
 		{
 			"category": [
 				"Corporales"
@@ -1112,6 +1087,31 @@
 				"img": "sos-extreme"
 			}],
 			"name": "S.O.S Extreme"
+		},
+		{
+			"category": [
+				"Corporales"
+			],
+			"shortDesc": "Tratamiento reafirmante con alto poder nutritivo que, por su composición rica en activos compensadores, mejora en firmeza y elasticidad de la piel, recuperando toda su vitalidad y energía",
+			"fullDesc": "Espuma corporal, específicamente formulada para potenciar el tratamiento reductor, anticelulítico y tonificante corporal. Ayuda a eliminar el aspecto visible de la celulitis, mejora la tonicidad de los tejidos, disminuye la sensación de piernas cansadas. Reequilibra a la piel en oligoelementos, minerales, aminoácidos y proteínas. Piel más lisa, firme, elástica, suave y luminosa. Puede utilizarse también como apoyo domiciliario",
+			"actives": [
+				"Cafeína",
+				"Centella Asiática",
+				"Acido Lipoico",
+				"Fosfatidilcolina",
+				"Espirulina",
+				"Vitamina C Liposomada",
+				"Oligoelementos marinos + Zn + CU"
+			],
+			"application": "En gabinete, aplicar luego del Scrub, en sinergia con activos concentrados, Centella Asiática, Cafeina, Fosfatidilcolina. Puede combinarse con aparatología. Apoyo domiciliario: Aplicar antes de hacer ejercicio y después de ducharse. Indicada para todo tipo de piel.",
+			"variants": [{
+				"code": 1049,
+				"content": "160 ml.",
+				"price": 290,
+				"sellPrice": 580,
+				"img": "espuma-7"
+			}],
+			"name": "Espuma ACTIVE 7"
 		}
 	]
 }

index.html

@@ -4,14 +4,10 @@
     <meta charset="UTF-8" />  
     <meta name="viewport" content="width=device-width, initial-scale=1, minimun-scale=1">
     <title>Vademecum</title>
-    <!-- <link rel="stylesheet" href="css/bulma.min.css"> -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
     <link rel="stylesheet" href="css/main.css">
     <link href="css/fonts.css" rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-
-    <!-- Polyfill file for wkhtmltopdf -->
-    <script src="js/polyfill.min.js"></script>
     
   </head>
   <body>

js/vademecum.js

@@ -74,7 +74,7 @@ const Product = (product, key) => (
         />
       </div>
       <div class="col s10">
-        <h4 className="product-name">
+        <h4 className="primary-title">
           {product.name}
         </h4>
         <div className="product-body">
@@ -156,6 +156,93 @@ const Vademecum = (categories, products, prices) => {
   ))
 }
 
+const ContactInformation = () => (
+  <section id="contact-information">
+    <div className="container">
+      <h2 class="pagebreak">Contacto</h2>
+
+      <div class="collection">
+        <div class="collection-item">
+          <h4 className="primary-title">Argentina</h4>
+          <div class="section-container">
+            <h4 class="section-name">
+              Dirección
+            </h4>
+            <p class="section-body">
+              Leopoldo Marechal 914, Ciudad Autónoma de Buenos Aires
+            </p>
+          </div>
+          <div class="section-container">
+            <h4 class="section-name">
+              Telefono
+            </h4>
+            <p class="section-body">
+              (+5411) 4139-6860/1
+            </p>
+          </div>
+          <div class="section-container">
+            <h4 class="section-name">
+              Email
+            </h4>
+            <p class="section-body">
+              consultas@especificosba.com.ar
+            </p>
+          </div>
+        </div>
+
+        <div className="collection-item">
+          <h4 className="primary-title">México</h4>
+          <div class="section-container">
+            <h4 class="section-name">
+              Teléfono
+            </h4>
+            <p class="section-body">
+              (+5255)4170-8856
+            </p>
+          </div>
+          <div class="section-container">
+            <h4 class="section-name">
+              Email
+            </h4>
+            <p class="section-body">
+              contactos@skin-connect.com.mx
+            </p>
+          </div>
+        </div>
+
+        <div className="collection-item">
+          <h4 className="primary-title">Ecuador</h4>
+          <div class="section-container">
+            <h4 class="section-name">
+              Dirección
+            </h4>
+            <p class="section-body">
+              Luis Cordero 1254, Cuenca, Azuay
+            </p>
+          </div>
+          <div class="section-container">
+            <h4 class="section-name">
+              Teléfono
+            </h4>
+            <p class="section-body">
+              (+593)07283-5550
+              (+593)07284-1207
+            </p>
+          </div>
+          <div class="section-container">
+            <h4 class="section-name">
+              Email
+            </h4>
+            <p class="section-body">
+              casamonickaventas@yahoo.com
+            </p>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </section>
+)
 const domContainer = document.querySelector('#vademecum');
 
 const LABEL = 0,
@@ -170,6 +257,7 @@ class VademecumData extends React.Component {
       categories: config.categories,
       products: null,
     }
+    console.log(config);
   }
 
   componentDidMount() {
@@ -185,11 +273,13 @@ class VademecumData extends React.Component {
 
   render() {
     const { categories, products, config } = this.state;
+    console.log(config.contactInformation);
     if (products) {
       return ( 
         <div>
           { ToC(categories, products) }
           { Vademecum(categories, products, config.prices) }
+          { config.contactInformation && ContactInformation() }
         </div>
       )
     } else {

lib/vademecum.js

@@ -85,7 +85,7 @@ var Product = function Product(product, key) {
   })), dom("div", {
     class: "col s10"
   }, dom("h4", {
-    className: "product-name"
+    className: "primary-title"
   }, product.name), dom("div", {
     className: "product-body"
   }, dom("p", {
@@ -140,6 +140,78 @@ var Vademecum = function Vademecum(categories, products, prices) {
   });
 };
 
+var ContactInformation = function ContactInformation() {
+  return dom("section", {
+    id: "contact-information"
+  }, dom("div", {
+    className: "container"
+  }, dom("h2", {
+    class: "pagebreak"
+  }, "Contacto"), dom("div", {
+    class: "collection"
+  }, dom("div", {
+    class: "collection-item"
+  }, dom("h4", {
+    className: "primary-title"
+  }, "Argentina"), dom("div", {
+    class: "section-container"
+  }, dom("h4", {
+    class: "section-name"
+  }, "Direcci\xF3n"), dom("p", {
+    class: "section-body"
+  }, "Leopoldo Marechal 914, Ciudad Aut\xF3noma de Buenos Aires")), dom("div", {
+    class: "section-container"
+  }, dom("h4", {
+    class: "section-name"
+  }, "Telefono"), dom("p", {
+    class: "section-body"
+  }, "(+5411) 4139-6860/1")), dom("div", {
+    class: "section-container"
+  }, dom("h4", {
+    class: "section-name"
+  }, "Email"), dom("p", {
+    class: "section-body"
+  }, "consultas@especificosba.com.ar"))), dom("div", {
+    className: "collection-item"
+  }, dom("h4", {
+    className: "primary-title"
+  }, "M\xE9xico"), dom("div", {
+    class: "section-container"
+  }, dom("h4", {
+    class: "section-name"
+  }, "Tel\xE9fono"), dom("p", {
+    class: "section-body"
+  }, "(+5255)4170-8856")), dom("div", {
+    class: "section-container"
+  }, dom("h4", {
+    class: "section-name"
+  }, "Email"), dom("p", {
+    class: "section-body"
+  }, "contactos@skin-connect.com.mx"))), dom("div", {
+    className: "collection-item"
+  }, dom("h4", {
+    className: "primary-title"
+  }, "Ecuador"), dom("div", {
+    class: "section-container"
+  }, dom("h4", {
+    class: "section-name"
+  }, "Direcci\xF3n"), dom("p", {
+    class: "section-body"
+  }, "Luis Cordero 1254, Cuenca, Azuay")), dom("div", {
+    class: "section-container"
+  }, dom("h4", {
+    class: "section-name"
+  }, "Tel\xE9fono"), dom("p", {
+    class: "section-body"
+  }, "(+593)07283-5550 (+593)07284-1207")), dom("div", {
+    class: "section-container"
+  }, dom("h4", {
+    class: "section-name"
+  }, "Email"), dom("p", {
+    class: "section-body"
+  }, "casamonickaventas@yahoo.com"))))));
+};
+
 var domContainer = document.querySelector('#vademecum');
 var LABEL = 0,
     TAG = 1;
@@ -161,6 +233,7 @@ function (_React$Component) {
       categories: config.categories,
       products: null
     };
+    console.log(config);
     return _this;
   }
 
@@ -184,9 +257,10 @@ 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));
+        return dom("div", null, ToC(categories, products), Vademecum(categories, products, config.prices), config.contactInformation && ContactInformation());
       } else {
         return dom("div", null);
       }

pdf-maker.js

@@ -7,9 +7,12 @@ const puppeteer = require('puppeteer');
   //await page.emulateMedia('screen');
   await page.pdf({
       path: 'pdf/vademecum-profesional-mobile.pdf',
-      // height: '1450',
-      height: 640,
+      height: '1450',
       printBackground: true,
+      margin: {
+        top: '16px',
+        bottom: '16px'
+      }
     });
     // displayHeaderFooter 
   await browser.close();