From 37610eb3bf2da37ca05c0bf69095d17e00300b56 Mon Sep 17 00:00:00 2001
From: aguirrekarina <karina.aguirre.9491656@usalesiana.edu.bo>
Date: Mon, 28 Oct 2024 23:32:14 -0400
Subject: [PATCH] feat: shopping cart with discount visibility

---
 .../components/ProductCardCompleteInfo.jsx    | 113 +++++++++++++-----
 Frontend/src/components/ShoppingCart.jsx      |  27 +++--
 Frontend/src/components/ShoppingCartItem.jsx  |  75 ++++++++----
 Frontend/src/context/ProductsContext.jsx      |  79 +++++-------
 Frontend/src/pages/CompleteOrder.jsx          |  63 +++++-----
 .../styles/components/shoppingCartItem.css    | 112 +++++++++++++++--
 6 files changed, 316 insertions(+), 153 deletions(-)

diff --git a/Frontend/src/components/ProductCardCompleteInfo.jsx b/Frontend/src/components/ProductCardCompleteInfo.jsx
index 3a49fd3..7410c6a 100644
--- a/Frontend/src/components/ProductCardCompleteInfo.jsx
+++ b/Frontend/src/components/ProductCardCompleteInfo.jsx
@@ -1,19 +1,31 @@
-import React, {useContext} from "react";
-import {ProductsContext} from "../context/ProductsContext.jsx";
+import React, { useContext } from "react";
+import { ProductsContext } from "../context/ProductsContext.jsx";
+import { FaRegTrashAlt, FaTag } from "react-icons/fa";
 
-const _ComboBoxVariants = ({attributesMap, productId}) => {
+const _ComboBoxVariants = ({ attributesMap = {}, productId }) => {
     const { handleAttributeChange } = useContext(ProductsContext);
+
+    // Si no hay attributesMap o está vacío, no renderizamos nada
+    if (!attributesMap || Object.keys(attributesMap).length === 0) {
+        return null;
+    }
+
     return (
         <form>
             {Object.keys(attributesMap).map(key => (
                 <div className="bg-transparent flex flex-row justify-between space-x-3" key={key}>
                     <label>{key}: </label>
                     <select
-                        className="bg-white" name={key}
-                        onChange={(e) => handleAttributeChange(key+'-'+productId, e.target.value)}>
+                        className="bg-white" 
+                        name={key}
+                        onChange={(e) => handleAttributeChange(key+'-'+productId, e.target.value)}
+                    >
                         <option value="">Select {key}</option>
-                        {attributesMap[key].map(variant => (
-                            <option key={key+variant.attributes[0].value} value={variant.attributes[0].value}>
+                        {attributesMap[key]?.map(variant => (
+                            <option 
+                                key={key+variant.attributes[0].value} 
+                                value={variant.attributes[0].value}
+                            >
                                 {variant.attributes[0].value}
                             </option>
                         ))}
@@ -26,6 +38,17 @@ const _ComboBoxVariants = ({attributesMap, productId}) => {
 
 const ProductCardCompleteInfo = ({ product, onDelete }) => {
     const { selectedAttributes, handleIncreaseQuantity, handleDecreaseQuantity } = useContext(ProductsContext);
+    
+    // Validamos que product tenga todas las propiedades necesarias
+    if (!product || !product.image || !product.image[0]) {
+        return null;
+    }
+
+    const priceWithDiscount = product.discountPercentage 
+        ? product.price * (1 - product.discountPercentage / 100)
+        : product.price;
+
+    const subtotalWithDiscount = priceWithDiscount * product.quantity;
 
     return (
         <div className="flex justify-between p-6 border rounded-lg">
@@ -34,34 +57,68 @@ const ProductCardCompleteInfo = ({ product, onDelete }) => {
                 alt={product.name}
                 width="124"
                 height="124"
+                className="object-cover"
             />
             <div className="flex flex-row items-center">
                 <div className="flex flex-col p-6 text-right items-end">
-                    <h4 className="font-bold ">{product.name}</h4>
-                    <_ComboBoxVariants attributesMap={product.attributesMap} productId={product.id}></_ComboBoxVariants>
+                    <h4 className="font-bold">{product.name}</h4>
+                    
+                    {/* Solo renderizamos _ComboBoxVariants si product.attributesMap existe */}
+                    {product.attributesMap && (
+                        <_ComboBoxVariants 
+                            attributesMap={product.attributesMap} 
+                            productId={product.id}
+                        />
+                    )}
+                    
                     <div className="flex flex-row h-fit justify-between w-20">
-                      <button
-                          className="border border-violet-600 pr-2 pl-2 pt-0.5 pb-0.5 rounded-md"
-                          onClick={() => handleIncreaseQuantity(product.id)}
-                      >+</button>
-                      <label className="font-bold text-lg">{product.quantity}</label>
-                      <button
-                          className="border border-violet-600 pr-2 pl-2 pt-0.5 pb-0.5 rounded-md"
-                          onClick={() => handleDecreaseQuantity(product.id)}
-                      >-</button>
+                        <button
+                            className="border border-violet-600 pr-2 pl-2 pt-0.5 pb-0.5 rounded-md hover:bg-violet-100"
+                            onClick={() => handleIncreaseQuantity(product.id)}
+                        >
+                            +
+                        </button>
+                        <label className="font-bold text-lg">
+                            {product.quantity}
+                        </label>
+                        <button
+                            className="border border-violet-600 pr-2 pl-2 pt-0.5 pb-0.5 rounded-md hover:bg-violet-100"
+                            onClick={() => handleDecreaseQuantity(product.id)}
+                        >
+                            -
+                        </button>
                     </div>
-                    <p className="text-gray-600">
-                        ${product.price.toFixed(2)} x {product.quantity}
-                    </p>
-                    <b>Subtotal: ${product.price * product.quantity}</b>
+
+                    {product.discountPercentage ? (
+                        <div className="flex flex-col items-end">
+                            <p className="text-gray-600 line-through">
+                                ${product.price.toFixed(2)} x {product.quantity}
+                            </p>
+                            <div className="flex items-center text-red-500 text-sm font-bold">
+                                <FaTag className="mr-1" />
+                                {product.discountPercentage}% OFF
+                            </div>
+                            <p className="text-gray-600">
+                                ${priceWithDiscount.toFixed(2)} x {product.quantity}
+                            </p>
+                            <b>Subtotal: ${subtotalWithDiscount.toFixed(2)}</b>
+                        </div>
+                    ) : (
+                        <div className="flex flex-col items-end">
+                            <p className="text-gray-600">
+                                ${product.price.toFixed(2)} x {product.quantity}
+                            </p>
+                            <b>Subtotal: ${(product.price * product.quantity).toFixed(2)}</b>
+                        </div>
+                    )}
                 </div>
-                <img
-                    src="https://cdn-icons-png.flaticon.com/512/3405/3405244.png"
-                    alt="Delete icon"
-                    width="24"
-                    height="24"
+                
+                <button
+                    className="p-2 hover:bg-gray-100 rounded-full"
                     onClick={onDelete}
-                />
+                >
+                    <FaRegTrashAlt className="w-6 h-6 text-gray-600" />
+                </button>
             </div>
         </div>
     );
diff --git a/Frontend/src/components/ShoppingCart.jsx b/Frontend/src/components/ShoppingCart.jsx
index 114347a..c0dfd7b 100644
--- a/Frontend/src/components/ShoppingCart.jsx
+++ b/Frontend/src/components/ShoppingCart.jsx
@@ -7,7 +7,6 @@ import { ProductsContext } from "../context/ProductsContext";
 
 export function ShoppingCart() {
   const [isOpen, setIsOpen] = useState(false);
-
   const { products } = useContext(ProductsContext);
 
   const openMenu = () => {
@@ -37,20 +36,28 @@ export function ShoppingCart() {
                   image={item.image[0].url}
                   quantity={item.quantity}
                   isAvailableStock={item.stock > item.quantity}
+                  discountPercentage={item.discountPercentage || 0}
+                  priceWithDiscount={
+                    item.discountPercentage 
+                      ? item.price * (1 - item.discountPercentage / 100) 
+                      : item.price
+                  }
                 />
               ))
             )
           }
         </div>
-        <a href={products.length > 0 ? "/complete-order" : "#"} className={`shopping-cart-go-button ${products.length > 0 ? 'active' : 'disabled'}`}>
-
-        {products.length > 0 ? (
-          <>
-            <FaShoppingCart /> Go to checkout
-          </>
-        ) : (
-          "Add items to cart"
-        )}
+        <a 
+          href={products.length > 0 ? "/complete-order" : "#"} 
+          className={`shopping-cart-go-button ${products.length > 0 ? 'active' : 'disabled'}`}
+        >
+          {products.length > 0 ? (
+            <>
+              <FaShoppingCart /> Go to checkout
+            </>
+          ) : (
+            "Add items to cart"
+          )}
         </a>
       </div>
     </>
diff --git a/Frontend/src/components/ShoppingCartItem.jsx b/Frontend/src/components/ShoppingCartItem.jsx
index 9061510..9efa818 100644
--- a/Frontend/src/components/ShoppingCartItem.jsx
+++ b/Frontend/src/components/ShoppingCartItem.jsx
@@ -1,35 +1,64 @@
 import PropTypes from "prop-types";
 import '../styles/components/shoppingCartItem.css';
-import { FaRegTrashAlt } from "react-icons/fa";
+import { FaRegTrashAlt, FaTag } from "react-icons/fa";
 import { StockQuantityInput } from "./StockQuantityInput";
 import { useContext } from "react";
 import { ProductsContext } from "../context/ProductsContext";
 
+export function ShoppingCartItem({ 
+    id, 
+    name, 
+    image, 
+    price, 
+    quantity, 
+    isAvailableStock, 
+    discountPercentage, 
+    priceWithDiscount 
+}) {
+    const { removeProductById, handleDecreaseQuantity, handleIncreaseQuantity } = useContext(ProductsContext);
 
-export function ShoppingCartItem({ id, name, image, price, quantity , isAvailableStock}) {
-  const { removeProductById, handleDecreaseQuantity, handleIncreaseQuantity } = useContext(ProductsContext);
+    return (
+        <div className="shopping-cart-item">
+            <img src={image} alt={`Product item ${name}`} className="shopping-cart-item-image" />
+            <div className="shopping-cart-item-information">
+                <p className="shopping-cart-item-name">{name}</p>
+                {discountPercentage > 0 ? (
+                    <div className="shopping-cart-item-price-container">
+                        <p className="shopping-cart-item-original-price">${price.toFixed(2)}</p>
+                        <p className="shopping-cart-item-discount">
+                            <FaTag className="discount-icon" /> {discountPercentage}% OFF
+                        </p>
+                        <p className="shopping-cart-item-final-price">${priceWithDiscount.toFixed(2)}</p>
+                    </div>
+                ) : (
+                    <p className="shopping-cart-item-price">${price.toFixed(2)}</p>
+                )}
+            </div>
 
-  return (
-    <div className="shopping-cart-item">
-      <img src={image} alt={`Product item ${name}`} className="shopping-cart-item-image" />
-      <div className="shopping-cart-item-information">
-        <p className="shopping-cart-item-name">{name}</p>
-        <p className="shopping-cart-item-price">${price.toFixed(2)}</p>
-      </div>
-
-
-      <StockQuantityInput id={id} quantity={quantity} increse={handleIncreaseQuantity} decrese={handleDecreaseQuantity} isAvailableStock={isAvailableStock} />
-      <button className="shopping-cart-item-delete-to-cart" onClick={() => removeProductById(id)}>
-        <FaRegTrashAlt />
-      </button>
-    </div>
-  );
+            <StockQuantityInput 
+                id={id} 
+                quantity={quantity} 
+                increse={handleIncreaseQuantity} 
+                decrese={handleDecreaseQuantity} 
+                isAvailableStock={isAvailableStock} 
+            />
+            <button 
+                className="shopping-cart-item-delete-to-cart" 
+                onClick={() => removeProductById(id)}
+            >
+                <FaRegTrashAlt />
+            </button>
+        </div>
+    );
 }
 
 ShoppingCartItem.propTypes = {
-  id: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  image: PropTypes.string.isRequired,
-  price: PropTypes.number.isRequired,
-  quantity: PropTypes.number.isRequired
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    image: PropTypes.string.isRequired,
+    price: PropTypes.number.isRequired,
+    quantity: PropTypes.number.isRequired,
+    isAvailableStock: PropTypes.bool.isRequired,
+    discountPercentage: PropTypes.number,
+    priceWithDiscount: PropTypes.number
 };
diff --git a/Frontend/src/context/ProductsContext.jsx b/Frontend/src/context/ProductsContext.jsx
index 511de72..beed889 100644
--- a/Frontend/src/context/ProductsContext.jsx
+++ b/Frontend/src/context/ProductsContext.jsx
@@ -1,4 +1,4 @@
-import React, {createContext, useEffect, useState} from 'react';
+import React, { createContext, useEffect, useState } from 'react';
 
 export const ProductsContext = createContext();
 
@@ -11,83 +11,51 @@ export const ProductsProvider = ({ children }) => {
     const [selectedAttributes, setSelectedAttributes] = useState({});
 
     const handleAttributeChange = (attributeName, value) => {
-        const prevState = selectedAttributes;
-        prevState[attributeName] = value
-        setSelectedAttributes(prevState);
-        console.log(prevState);
+        setSelectedAttributes(prev => ({
+            ...prev,
+            [attributeName]: value
+        }));
     };
 
-    // This will trigger whenever `products` changes
     useEffect(() => {
         localStorage.setItem('products', JSON.stringify(products));
     }, [products]);
 
     const addProduct = (newProduct) => {
-        const attributesMap = getAttributesMap(newProduct.variants);
-        const variantName = Object.keys(attributesMap).map(key => {
-                                        const firstValue = attributesMap[key][0];
-                                        return `${key}: ${firstValue.attributes.value}`;
-                                    }).join(', ');
         const productToStore = {
             id: newProduct.id,
             name: newProduct.name,
             price: newProduct.price,
             image: newProduct.images,
-            variant: variantName,
-            attributesMap: attributesMap,
             quantity: 1,
-            stock : newProduct.stock
+            stock: newProduct.stock,
+            discountPercentage: newProduct.discountPercentage,
+            priceWithDiscount: newProduct.priceWithDiscount
         };
+
         const productExists = products.find(item => item.id === productToStore.id);
         if (!productExists) {
             if (productToStore.stock <= 0) {
                 return;
             }
-            setProducts((prevProducts) => {
-                return [...prevProducts, productToStore];
-            });
+            setProducts((prevProducts) => [...prevProducts, productToStore]);
         }
     };
 
-    const getAttributesMap = (variants) => {
-        const attributesMap = {};
-
-        variants.forEach(variant => {
-            variant.attributes.forEach(attribute => {
-                if (attributesMap[attribute.name]) {
-                    if (!attributesMap[attribute.name].includes(variant)) {
-                        attributesMap[attribute.name].push(variant);
-                    }
-                } else {
-                    attributesMap[attribute.name] = [variant];
-                }
-            });
-        });
-
-        return attributesMap;
-    }
-
-    const getAttributesSet = (id, attributesMap) =>  {
-        return Object.keys(attributesMap).map(key => {
-            return selectedAttributes[key+'-'+id];
-        }).join(',');
-    }
-
     const removeProductById = (id) => {
-        setProducts((prevProducts) => {
-            return prevProducts.filter(item => item.id !== id);
-        });
+        setProducts((prevProducts) => 
+            prevProducts.filter(item => item.id !== id)
+        );
     };
 
     const handleDecreaseQuantity = (id) => {
         setProducts((prevProducts) =>
-            prevProducts
-                .map(item => {
-                    if (item.id === id) {
-                        return { ...item, quantity: item.quantity > 1 ? item.quantity - 1 : 1 };
-                    }
-                    return item;
-                })
+            prevProducts.map(item => {
+                if (item.id === id) {
+                    return { ...item, quantity: item.quantity > 1 ? item.quantity - 1 : 1 };
+                }
+                return item;
+            })
         );
     };
 
@@ -102,6 +70,13 @@ export const ProductsProvider = ({ children }) => {
         );
     };
 
+    const getTotalAmount = () => {
+        return products.reduce((total, item) => {
+            const itemPrice = item.priceWithDiscount || item.price;
+            return total + (itemPrice * item.quantity);
+        }, 0);
+    };
+
     return (
         <ProductsContext.Provider value={{
             products,
@@ -111,7 +86,7 @@ export const ProductsProvider = ({ children }) => {
             handleIncreaseQuantity,
             selectedAttributes,
             handleAttributeChange,
-            getAttributesSet
+            getTotalAmount
         }}>
             {children}
         </ProductsContext.Provider>
diff --git a/Frontend/src/pages/CompleteOrder.jsx b/Frontend/src/pages/CompleteOrder.jsx
index 8cd6a8a..ede33f5 100644
--- a/Frontend/src/pages/CompleteOrder.jsx
+++ b/Frontend/src/pages/CompleteOrder.jsx
@@ -1,64 +1,69 @@
 import { loadStripe } from "@stripe/stripe-js";
-import ProductCardCompleteInfo  from "../components/ProductCardCompleteInfo";
+import ProductCardCompleteInfo from "../components/ProductCardCompleteInfo";
 import { useContext } from "react";
 import { ProductsContext } from "../context/ProductsContext";
 
-
 function CompleteOrder() {
-
     const { products, removeProductById } = useContext(ProductsContext);
 
-      const shoppingCartDtoList = products.map(item => ({
+    const shoppingCartDtoList = products.map(item => ({
         id: item.id,
         name: item.name,
         price: item.price,
         imageUrl: item.image.length > 0 ? item.image[0].url : '',
-        quantity: item.quantity
-      }));
+        quantity: item.quantity,
+        discountPercentage: item.discountPercentage || 0,
+        priceWithDiscount: item.discountPercentage 
+            ? item.price * (1 - item.discountPercentage / 100)
+            : item.price
+    }));
 
-      const onSubmitCart = async () => {
+    const onSubmitCart = async () => {
         const stripe = await loadStripe("pk_test_51Q81UpP3WBhplXYwggVU8aKSusfUgfjKqFPz6amcMmjkcnJSJVOL22DHfqQiyou6mtPlbTpOtehXhG0wFRFIo47l00rb1JJ1Qc");
         const response = await fetch('http://localhost:5163/api/Checkout/submit-cart', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(shoppingCartDtoList)
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(shoppingCartDtoList)
         });
 
         if (!response.ok) {
-          const errorMessage = await response.text();
-          console.error("Error from API:", errorMessage);
-          return;
+            const errorMessage = await response.text();
+            console.error("Error from API:", errorMessage);
+            return;
         }
 
         const session = await response.json();
         const result = stripe.redirectToCheckout({
-          sessionId: session.id
+            sessionId: session.id
         });
         if (result.error) {
-          console.log(result.error);
+            console.log(result.error);
         }
-      };
+    };
 
     const calculateTotalAmount = (products) => {
         if (!Array.isArray(products)) {
-          console.error("The products parameter is not an array", products);
-          return 0; // O cualquier valor por defecto
+            console.error("The products parameter is not an array", products);
+            return 0;
         }
 
         return products.reduce((total, product) => {
-          return total + (product.price * product.quantity);
+            const priceToUse = product.discountPercentage 
+                ? product.price * (1 - product.discountPercentage / 100)
+                : product.price;
+            return total + (priceToUse * product.quantity);
         }, 0);
-      };
+    };
 
     const totalAmount = calculateTotalAmount(products);
 
     return (
         <div className="m-6 flex flex-row justify-between space-x-6 bg-white text-black p-6 border rounded-lg">
             <div className="w-full">
-                <h3 className="font-bold text-2xl">Shoping Cart</h3>
+                <h3 className="font-bold text-2xl">Shopping Cart</h3>
                 <h4 className="font-bold text-lg">Order Details</h4>
                 <div>
-                    {products.map((item, index) => (
+                    {products.map((item) => (
                         <ProductCardCompleteInfo
                             key={item.id}
                             product={item}
@@ -66,12 +71,16 @@ function CompleteOrder() {
                         />
                     ))}
                 </div>
-                <h3 className="pt-4 font-bold text-lg justify-self-end">Total: {totalAmount.toFixed(2)} $</h3>
+                <h3 className="pt-4 font-bold text-lg justify-self-end">
+                    Total: ${totalAmount.toFixed(2)}
+                </h3>
                 <div className="justify-self-end mt-2">
-                  <button
-                      className="justify-self-end rounded-md bg-violet-500 text-white pr-5 pl-5 pt-2 pb-2"
-                      onClick={onSubmitCart}
-                  >Go to Checkout</button>
+                    <button
+                        className="justify-self-end rounded-md bg-violet-500 text-white pr-5 pl-5 pt-2 pb-2"
+                        onClick={onSubmitCart}
+                    >
+                        Go to Checkout
+                    </button>
                 </div>
             </div>
         </div>
diff --git a/Frontend/src/styles/components/shoppingCartItem.css b/Frontend/src/styles/components/shoppingCartItem.css
index d73c4d7..26e7a0b 100644
--- a/Frontend/src/styles/components/shoppingCartItem.css
+++ b/Frontend/src/styles/components/shoppingCartItem.css
@@ -1,12 +1,14 @@
 .shopping-cart-item {
-    width: fit-content;
-    height: fit-content;
-    display: grid;
-    grid-template-columns: 20% 30% 15% 15% 20%;
-    align-items: center;
-    background-color: #f1f4ff;
-    border-radius: 10px;
-    color: #5275F5;
+  width: fit-content;
+  height: fit-content;
+  display: grid;
+  grid-template-columns: 20% 30% 15% 15% 20%;
+  align-items: center;
+  background-color: #f1f4ff;
+  border-radius: 10px;
+  color: #5275F5;
+  padding: 10px;
+  gap: 10px;
 }
 
 .shopping-cart-item-image {
@@ -15,7 +17,7 @@
   width: auto;
   height: auto;
   object-fit: cover;
-  margin-right: 10px;
+  margin: auto;
 }
 
 .shopping-cart-item-information {
@@ -24,19 +26,51 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  gap: 8px;
 }
 
 .shopping-cart-item-name {
   font-size: 20px;
+  margin: 0;
+  text-align: center;
 }
 
-.shopping-cart-item-price {
+.shopping-cart-item-price-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.shopping-cart-item-original-price {
+  text-decoration: line-through;
+  color: #8094db;
   font-size: 14px;
+  margin: 0;
+}
+
+.shopping-cart-item-discount {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: #ff4646;
+  font-size: 14px;
+  font-weight: bold;
+  margin: 0;
+}
+
+.shopping-cart-item-final-price {
+  color: #5275F5;
+  font-weight: bold;
+  font-size: 16px;
+  margin: 0;
 }
 
-.shopping-cart-item-name,
 .shopping-cart-item-price {
-  text-align: left;
+  font-size: 14px;
+  color: #5275F5;
+  margin: 0;
+  text-align: center;
 }
 
 .shopping-cart-item-delete-to-cart {
@@ -53,13 +87,65 @@
   border-radius: 10px;
   margin: auto;
   cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.shopping-cart-item-delete-to-cart:hover {
+  background-color: #3d5ed9;
 }
 
+.stock-quantity-input {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.quantity-input {
+  width: 40px;
+  text-align: center;
+  border: 2px solid #5275F5;
+  border-radius: 5px;
+  padding: 4px;
+  color: #5275F5;
+  background-color: white;
+}
+
+.quantity-input-decrese-button,
+.quantity-input-increse-button {
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #5275F5;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.quantity-input-decrese-button:hover,
+.quantity-input-increse-button:hover {
+  background-color: #3d5ed9;
+}
+
+.quantity-input-increse-button.disabled {
+  background-color: #a8b8f3;
+  cursor: not-allowed;
+}
+
+.discount-icon {
+  font-size: 12px;
+}
+
+/* Mantener márgenes automáticos para elementos principales */
 .shopping-cart-item-image,
 .shopping-cart-item-name,
 .shopping-cart-item-price,
 .shopping-cart-item-delete-to-cart {
-margin: auto;
+  margin: auto;
 }
 
 #item-quantity {