♻️ 🧹 Corrigindo Bug: Erro de soma no Carrinho #54

src/pages/checkout/Checkout.tsx

@@ -1,5 +1,5 @@
 import { useContext, useEffect, useState } from "react";
-import {Link, useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { AuthContext } from "../../contexts/AuthContext";
 import { CartContext } from "../../contexts/CartContext";
 import { toastAlerta } from "../../utils/toastAlerta";
@@ -17,31 +17,29 @@ export default function Checkout() {
 
   const [total, setTotal] = useState(
     produtosNoCarrinho.reduce((acumulador, produto) => {
-      return acumulador + parseFloat(String(produto.preco));
+      return acumulador + produto.preco * produto.quantidade;
     }, 0)
   );
 
   useEffect(() => {
     setTotal(
       produtosNoCarrinho.reduce((acumulador, produto) => {
-        return (
-          acumulador + parseFloat(String(produto.preco)) * produto.quantidade
-        );
+        return acumulador + produto.preco * produto.quantidade;
       }, 0)
     );
   }, [produtosNoCarrinho, usuario.token, navigate, setTotal]);
-  useEffect(() => {
-    const novoTotal = produtosNoCarrinho.reduce((acumulador, produto) => {
-      return (
-        acumulador + parseFloat(String(produto.preco)) * produto.quantidade
-      );
-    }, 0);
+  // useEffect(() => {
+  //   const novoTotal = produtosNoCarrinho.reduce((acumulador, produto) => {
+  //     return (
+  //       acumulador + parseFloat(String(produto.preco)) * produto.quantidade
+  //     );
+  //   }, 0);
 
-    setTotal(novoTotal);
-  }, [produtosNoCarrinho, usuario.token, navigate]);
+  //   setTotal(novoTotal);
+  // }, [produtosNoCarrinho, usuario.token, navigate]);
   const pagar = () => {
     if (usuario.nome == "") {
-      toastAlerta("Voce precisa estar logado para concluir a compra", "info");
+      toastAlerta("Você precisa estar logado para concluir a compra", "info");
       navigate("/login");
     } else {
       toastAlerta("Produto comprado", "sucesso");
@@ -50,6 +48,7 @@ export default function Checkout() {
   };
 
   const frete = 9.99;
+
   return produtosNoCarrinho.length ? (
     <div className="flex flex-grow bg-green-100 pt-52">
       <div className="mx-auto max-w-5xl justify-center px-6 md:flex md:space-x-6 xl:px-0">
@@ -67,7 +66,7 @@ export default function Checkout() {
               </div>
               <div className="text-right">
                 <p className="text-lg font-bold">
-                  R${Number(produto.preco).toFixed(2)}
+                  R${produto.preco.toFixed(2).replace(".", ",")}
                 </p>
                 <button
                   onClick={() => removeProdutosNoCarrinho(produto.id)}
@@ -82,18 +81,22 @@ export default function Checkout() {
         <div className="mt-6 h-full rounded-lg border bg-white p-6 shadow-md md:mt-0 md:w-1/3">
           <div className="mb-2 flex justify-between">
             <p className="text-gray-600">Subtotal</p>
-            <p className="text-gray-600">{total}</p>
+            <p className="text-gray-600">
+              R${total.toFixed(2).replace(".", ",")}
+            </p>
           </div>
           <div className="flex justify-between">
             <p className="text-gray-600">Frete</p>
-            <p className="text-gray-600">R${frete}</p>
+            <p className="text-gray-600">
+              R${frete.toFixed(2).replace(".", ",")}
+            </p>
           </div>
           <hr className="my-4" />
           <div className="flex justify-between">
             <p className="text-lg font-bold">Total</p>
             <div className="">
               <p className="mb-1 text-lg font-bold">
-                {(total + frete).toFixed(2).replace(".", ",")}
+                R${(total + frete).toFixed(2).replace(".", ",")}
               </p>
               <p className="text-sm text-gray-600">+ Impostos</p>
             </div>
@@ -117,17 +120,15 @@ export default function Checkout() {
       </div>
     </div>
   ) : (
-    <div className="flex justify-center p-2 flex-grow flex-col  bg-white items-center">
-      <div className="flex items-centerjustify-center px-6 md:flex md:space-x-6 xl:px-0">
-      </div>
+    <div className="flex justify-center p-2 flex-grow flex-col bg-white items-center">
+      <div className="flex items-center justify-center px-6 md:flex md:space-x-6 xl:px-0"></div>
       <div className="fundoCarrinhoVazio hidden lg:block"></div>
       <Link
-                to="/produtos"
-                className="flex items-center justify-center hover:bg-secondary bg-primary w-1/6 h-20 py-2 rounded-md font-semibold hover:transition-colors hover:ease-in hover:duration-300"
-              >
-
-      <button className=" text-white ">Ir para produtos</button>
-              </Link>
+        to="/produtos"
+        className="flex items-center justify-center hover:bg-secondary bg-primary w-1/6 h-20 py-2 rounded-md font-semibold hover:transition-colors hover:ease-in hover:duration-300"
+      >
+        <button className="text-white">Ir para produtos</button>
+      </Link>
     </div>
   );
 }