Feature/button addto cart

README.MD

@@ -0,0 +1,26 @@
+### STORE-THEME CORELABIZ ###
+
+- todas as features custom, estão atreladas a branch develop.
+Todas as branchs devem ser criadas partindo da develop.
+As demais branchs devem ser atualizadas com a develop.
+
+***- Testar atualizações.***
+Em caso de teste em todas as ramificações, testar na banch develop.
+Usar ws: https://updateDevelop--corelabiz.myvtex.com
+
+***- Vendor and name:***
+Foi gerado novas configurações para o uso.
+o vendor permanece vinculado a corebizlab.
+
+name: tratado com store-tami e version 0.0.0
+
+*** O uso da ws update reflete no teste, devido a mudança do name.***
+Sempre que usar uma nova ws, será necessário consigurar as páginas
+no /admin para [email protected]:store.custom#nome-da-pagina
+
+Se existir alguma página com erro de carregamento, verificar no admin a configuração
+da pagina que deseja testar.
+ex: [email protected]:store.custom#nome-da-pagina.
+
+*** VTEX LINK ***
+Para testar loja atualizada, rodar vtex link na ws: https://updateDevelop--corelabiz.myvtex.com

manifest.json

@@ -1,12 +1,13 @@
 {
-  "vendor": "vtex",
-  "name": "store-theme",
-  "version": "5.1.0",
+  "vendor": "corelabiz",
+  "name": "store-tamii",
+  "version": "0.0.0",
   "builders": {
     "styles": "2.x",
     "store": "0.x",
     "sitemap": "0.x",
-    "docs": "0.x"
+    "docs": "0.x",
+    "react": "3.x"
   },
   "mustUpdateAt": "2018-09-05",
   "scripts": {
@@ -44,6 +45,10 @@
     "vtex.telemarketing": "2.x",
     "vtex.order-placed": "2.x",
     "vtex.checkout-summary": "0.x",
+    "vtex.checkout": "1.x",
+    "vtex.checkout-graphql": "0.x",
+    "vtex.checkout-cart": "0.x",
+    "vtex.checkout-resources": "0.x",
     "vtex.product-list": "0.x",
     "vtex.add-to-cart-button": "0.x",
     "vtex.product-bookmark-interfaces": "1.x",
@@ -62,7 +67,13 @@
     "vtex.product-specifications": "1.x",
     "vtex.tab-layout": "0.x",
     "vtex.condition-layout": "2.x",
-    "vtex.css-handles": "1.x"
+    "vtex.css-handles": "1.x",
+    "vtex.search-graphql": "0.x",
+    "vtex.format-currency": "0.x",
+    "vtex.device-detector": "0.x",
+    "vtex.product-context": "0.x",
+    "vtex.order-manager": "0.x",
+    "vtex.order-items": "0.x"
   },
   "peerDependencies": {
     "vtex.reviews-and-ratings": "3.x"

react/ButtonAddtoCart.jsx

@@ -0,0 +1,2 @@
+import ButtonAddtoCart from "./components/ButtonAddtoCart";
+export default ButtonAddtoCart

react/ShelfCustom.jsx

@@ -0,0 +1,2 @@
+import ShelfCustom from "./components/ShelfCustom/ShelfCustom";
+export default ShelfCustom

react/components/ButtonAddtoCart/index.jsx

@@ -0,0 +1,142 @@
+import React, { useEffect, useState } from "react";
+
+import { Button } from "vtex.styleguide";
+import { NumericStepper } from "vtex.styleguide";
+import styles from "../../styles/components/ButtonAddtoCart/styles.css";
+
+import { useOrderItems } from "vtex.order-items/OrderItems";
+
+const ButtonAddtoCart = ({ valor }) => {
+  const [addItem, setAddItem] = useState({ isLoading2: false });
+  const [numericStepper, setNumericStepper] = useState({
+    quantityNumericStepper: 1,
+  });
+
+  const [showNumeriStepper, setShowNumericStepper] = useState(false);
+  const [showButton, setShowButton] = useState(true);
+  const [label, setLabel] = useState({ labelText: `Item` });
+
+  const [productDetailsItem, setProductDetailsItem] = useState({});
+  console.log("🚀 ~ ButtonAddtoCart ~ productDetailsItem:", productDetailsItem);
+  const selectedItemQuantity = numericStepper.quantityNumericStepper;
+
+  useEffect(() => {
+    if (showNumeriStepper === true) {
+      setAddItem({ isLoading2: false });
+      setShowButton(false);
+    }
+  }, [showNumeriStepper]);
+
+  //   controle de exibição do btn add
+  useEffect(() => {
+    if (numericStepper.quantityNumericStepper === 0) {
+      setShowButton(true);
+      setShowNumericStepper(false);
+      setNumericStepper({ quantityNumericStepper: 1 });
+    }
+  }, [numericStepper.quantityNumericStepper]);
+
+  //   modifica texto do label ao add quantidade de item > 1
+  useEffect(() => {
+    const itemsText = "Items";
+    if (numericStepper.quantityNumericStepper > 1) {
+      setLabel({ labelText: `${itemsText}` });
+    } else if (numericStepper.quantityNumericStepper <= 0) {
+      setLabel({ labelText: `Item` });
+    }
+  }, [numericStepper.quantityNumericStepper]);
+
+  // add item
+  const { addItems } = useOrderItems();
+  const skuItem = [
+    {
+      id: valor[0]?.itemId,
+      seller: "1",
+      quantity: 1,
+    },
+  ];
+  const addToCartItem = async () => {
+    try {
+      await addItems(skuItem);
+    } catch (error) {
+      console.error("erro ao add produti", error);
+    }
+  };
+
+  // remover item
+  const skuItemRemove = [
+    {
+      id: valor[0]?.itemId,
+      seller: "1",
+      quantity: -1,
+    },
+  ];
+  const removerCartItem = async () => {
+    try {
+      await addItems(skuItemRemove);
+    } catch (error) {
+      console.error("erro ao add produti", error);
+    }
+  };
+
+
+  // precisa tratar update quantity
+  const skuItemUpdate = [
+    {
+      id: valor[0]?.itemId,
+      seller: "1",
+      quantity: +1,
+    },
+  ];
+  const updateCartItems = async() => {
+    try{
+      await addItem(skuItemUpdate)
+    }catch (error) {
+      console.error("erro ao add produti", error);
+    }
+  }
+
+  return (
+    <>
+      <div className="col-xs-12 col-sm-6 col-md-8">
+        <div className={styles.content_btnAddToCart_custom}>
+          {showButton && (
+            <div className="mt4">
+              <Button
+                variation="primary"
+                onClick={() => {
+                  setAddItem({ isLoading2: !addItem.isLoading2 });
+                  setShowNumericStepper(true);
+                  setProductDetailsItem({ ...valor, selectedItemQuantity });
+                  addToCartItem();
+                }}
+                isLoading={addItem.isLoading2}
+              >
+                ADICIONAR AO CARRINHO
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+      {showNumeriStepper && (
+        <div className="mb5">
+          <div className={styles.content_btnAddToCart_custom}>
+            <NumericStepper
+              label={`${label.labelText} add ao carrinho ${numericStepper.quantityNumericStepper}`}
+              // minValue={1}
+              defaultValue={0}
+              maxValue={50}
+              lean
+              value={numericStepper.quantityNumericStepper}
+              onChange={(event) =>
+                setNumericStepper({ quantityNumericStepper: event.value })
+              }
+              onClick={numericStepper.quantityNumericStepper < 1 ? removerCartItem() : updateCartItems()}
+            />
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+export default ButtonAddtoCart;