snapshot

src/components/header.js

@@ -8,39 +8,38 @@ import { MiscContext } from "../state/misc"
 import BaseButton from "./baseButton"
 import ButtonCart from "./buttonCart"
 import IconBars from "./iconBars"
-
 import Search from "./search"
 
+export const getActiveSidebar = (location) => location.state?.activeSidebar
+
+export const setActiveSidebar = (location, value) => {
+  const activeSidebar = getActiveSidebar(location)
+
+  // first value (uninitialized): go, push state
+  if (activeSidebar === undefined) {
+    navigate(location.pathname, {
+      state: { activeSidebar: value },
+    })
+  }
+  // same value: go back
+  else if (activeSidebar === value) {
+    navigate(-1)
+  }
+  // new value: go, replace state
+  else {
+    navigate(location.pathname, {
+      state: { activeSidebar: value },
+      replace: true,
+    })
+  }
+}
+
 const Header = ({ location }) => {
   const [state, dispatch] = useContext(CartContext)
   const [miscState, miscDispatch] = useContext(MiscContext)
 
-  const getActiveSidebar = () => location.state?.activeSidebar
-
-  const setActiveSidebar = (value) => {
-    const activeSidebar = getActiveSidebar()
-
-    // first value (uninitialized): go, push state
-    if (activeSidebar === undefined) {
-      navigate(location.pathname, {
-        state: { activeSidebar: value },
-      })
-    }
-    // same value: go back
-    else if (activeSidebar === value) {
-      navigate(-1)
-    }
-    // new value: go, replace state
-    else {
-      navigate(location.pathname, {
-        state: { activeSidebar: value },
-        replace: true,
-      })
-    }
-  }
-
   const Logo = () =>
-    getActiveSidebar() ? (
+    getActiveSidebar(location) ? (
       <Link to="/" replace state={{ activeSidebar: null }} className="logo">
         ELSUPER
       </Link>
@@ -56,7 +55,7 @@ const Header = ({ location }) => {
         <BaseButton
           className="buttonCategories"
           aria-label="categories button"
-          onClick={() => setActiveSidebar("categoriesMenu")}
+          onClick={() => setActiveSidebar(location, "categoriesMenu")}
         >
           <IconBars />
         </BaseButton>
@@ -85,13 +84,13 @@ const Header = ({ location }) => {
         <BaseButton
           className="buttonUser"
           aria-label="my-account button"
-          onClick={() => setActiveSidebar("userAccount")}
+          onClick={() => setActiveSidebar(location, "userAccount")}
         >
           <FiUser color="white" />
         </BaseButton>
         <ButtonCart
           count={state.length}
-          onClick={() => setActiveSidebar("cart")}
+          onClick={() => setActiveSidebar(location, "cart")}
         />
       </div>
       <style jsx global>{`

src/components/inputNumber.js

@@ -186,6 +186,7 @@ const InputNumber = ({
       /* Style3 */
       .inputNumber.style3 {
         background: #fff;
+        display: inline-flex;
       }
 
       .inputNumber.style3 input {

src/components/layout.js

@@ -37,7 +37,7 @@ const Layout = ({ location, children }) => {
         </Sidepanel>
         <Sidepanel right isActive={activeSidebar === "cart"}>
           <SimpleBar style={{ maxHeight: "100%", width: "100%" }}>
-            <Cart />
+            <Cart location={location} />
           </SimpleBar>
         </Sidepanel>
         <div className="main-wrapper">

src/components/panels/cart/cart.js

@@ -4,9 +4,10 @@ import Button from "../../button"
 import CartItem from "./cartItem"
 import { CartContext } from "../../../state/cart"
 import { round } from "../../../utils"
+import { setActiveSidebar } from "../../header"
 import "../panel.css"
 
-const Cart = (props) => {
+const Cart = ({ location }) => {
   const [state, dispatch] = useContext(CartContext)
 
   const cartTotal = () => {
@@ -55,7 +56,12 @@ const Cart = (props) => {
               <div className="cart-total">Total ${cartTotal()}</div>
             </div>
             <div className="btn-wrapper">
-              <Button className="fluid primary">Proceder al pago</Button>
+              <Button
+                className="fluid primary"
+                onClick={() => setActiveSidebar(location, "userAccount")}
+              >
+                Proceder al pago
+              </Button>
             </div>
           </>
         ) : (

src/components/product/productSidebar.js

@@ -1,52 +1,108 @@
 import React from "react"
+import { MdLocalShipping } from "react-icons/md"
+import { AiFillCreditCard } from "react-icons/ai"
+import css from "styled-jsx/css"
+
+const { className, styles } = css.resolve`
+   {
+    position: absolute;
+    right: 15px;
+    color: #aaa;
+  }
+`
 
 const ProductSidebar = (props) => {
   return (
     <div className="product-sidebar">
       <div className="block">
-        <h3>Sidebar #1</h3>
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquid,
-        animi dicta dolores eaque facere in.</p>
+        <h3>
+          Envio gratis
+          <MdLocalShipping className={className} />
+        </h3>
+        <p>En tus compras con un monto minimo de $499</p>
       </div>
-
       <div className="block">
-        <h3>Sidebar #2</h3>
-      <p>Iure nemo pariatur possimus quaerat quam quidem ratione reiciendis
-        repellendus? Corporis incidunt perspiciatis quae?</p>
+        <h3>
+          Pago seguro
+          <AiFillCreditCard className={className} />
+        </h3>
+        <p>
+          Aceptamos las principales tarjetas de credito y debito. Y pago en
+          efectivo a contra-entrega
+        </p>
       </div>
 
+      {styles}
       <style jsx>{`
         .product-sidebar {
-
         }
 
         .block {
-          margin-bottom: 1rem;
           padding: 1rem;
-          background-color: #eee;
-          // box-shadow: 0 1px 2px #dfdfdf;
-          color: #666;
+          position: relative;
+          color: #888;
+          border: 1px dotted #ddd;
+          border-radius: 3px;
+        }
+        .block:first-child {
+          border-radius: 3px 3px 0 0;
+          border-bottom: 0;
+        }
+        .block:last-child {
+          border-radius: 0 0 3px 3px;
         }
 
         h3 {
           margin-bottom: 1rem;
-          font-family: Lato,Helvetica Neue,Arial,Helvetica,sans-serif;
-          color: #333;
+          text-transform: uppercase;
+          font-weight: 600 !important;
+          font-size: 14px;
+          font-family: "Source Sans Pro", HelveticaNeue-Light,
+            "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial,
+            "Lucida Grande", sans-serif;
+        }
+
+        h3 .svg {
+          position: absolute;
+          right: 15px;
+          color: #aaa;
         }
-        
+
         p {
-         margin: 0;
+          margin: 0;
         }
 
-        .shop-item .button {
-          margin-bottom: 0.3rem;
+        @media screen and (min-width: 550px) {
+          .product-sidebar {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            grid-template-rows: auto;
+            grid-column-gap: 1rem;
+            grid-row-gap: 5rem;
+          }
+
+          .block:first-child {
+            border-radius: 3px;
+            border-bottom: 1px dotted #ddd;
+          }
+          .block:last-child {
+            border-radius: 3px;
+          }
         }
 
-        @media screen and (min-width: 500px) {
-          .col-thumbs {
+        @media screen and (min-width: 1100px) {
+          .product-sidebar {
             display: block;
           }
 
+          .block:first-child {
+            border-radius: 3px 3px 0 0;
+            border-bottom: 0;
+          }
+          .block:last-child {
+            border-radius: 0 0 3px 3px;
+          }
+        }
       `}</style>
     </div>
   )

src/components/product/productSummary.js

@@ -61,7 +61,11 @@ const ProductSummary = (props) => {
           countInCart={countInCart}
         />
       </div>
-      <p className="item">{nl2br(data.description)}</p>
+      {/* <p className="item">{nl2br(data.description)}</p> */}
+      <p className="item">
+        En ELSUPER encuentras todo tipo de articulos para tu hogar y alacena.
+        Proximamente agregaremos una descripcion cool a este producto.
+      </p>
 
       <style jsx global>{`
         .productSummary .item {
@@ -90,7 +94,7 @@ const ProductSummary = (props) => {
 
         @media screen and (min-width: 1100px) {
           .productSummary .toggleButton {
-            flex: 0;
+            {/* flex: 0; */}
           }
         }
 

src/components/search.js

@@ -48,7 +48,7 @@ const Search = (props) => {
     })
   }
 
-  const results = useFlexSearch(query, index, JSON.parse(store))
+  const results = useFlexSearch(query, index, store)
 
   // const mql = window.matchMedia("(min-width: 570px)")
   // console.log("mql:")

src/templates/productView.js

@@ -49,9 +49,7 @@ const ProductView = (props) => {
         {`
           .row {}
 
-          .col {
-            // border: 1px solid red;
-          }
+          .col {}
 
           .col-a {
             margin-bottom: 1rem;