✨ Flujo para crear una nueva orden

Klauditha · Nov 29, 2023 · 319bd12 · 319bd12
1 parent 6b8a701
commit 319bd12
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 4 deletions.
diff --git a/src/Components/CheckoutSideMenu/CheckoutSideMenu.jsx b/src/Components/CheckoutSideMenu/CheckoutSideMenu.jsx
@@ -14,6 +14,18 @@ const CheckoutSideMenu = () => {
     );
     context.setCartProducts(filteredProducts);
   };
+
+  const handleCheckout = () => {
+    const orderToAdd = {
+      date: "01.02.23",
+      products: context.cartProducts,
+      totalProducts: context.cartProducts.length,
+      totalPrice: totalPrice(context.cartProducts),
+    };
+    context.setOrder([...context.order, orderToAdd]);
+    context.setCartProducts([]);
+    context.setCount(0);
+  };
   return (
     <aside
       className={`${
@@ -29,7 +41,7 @@ const CheckoutSideMenu = () => {
           ></XMarkIcon>
         </div>
       </div>
-      <div className="px-6 overflow-y-scroll">
+      <div className="px-6 overflow-y-scroll flex-1">
         {context.cartProducts.map((product) => (
           <OrderCard
             key={product.id}
@@ -41,11 +53,19 @@ const CheckoutSideMenu = () => {
           />
         ))}
       </div>
-      <div className="px-6">
-        <p className="flex justify-between items-center">
+      <div className="px-6 mb-6">
+        <p className="flex justify-between items-center mb-2">
           <span className="font-light">Total:</span>
-          <span className="font-medium text-2xl">${totalPrice(context.cartProducts)}</span>
+          <span className="font-medium text-2xl">
+            ${totalPrice(context.cartProducts)}
+          </span>
         </p>
+        <button
+          className="w-full bg-black py-3 text-white rounded-lg"
+          onClick={() => handleCheckout()}
+        >
+          Checkout
+        </button>
       </div>
     </aside>
   );

diff --git a/src/Context/Context.jsx b/src/Context/Context.jsx
@@ -22,6 +22,9 @@ export const ShoppingCartProvider = ({ children }) => {
 
   // Shopping cart - Add product
   const [cartProducts, setCartProducts] = useState([]);
+
+  // Shopping Cart - Order
+  const [order, setOrder] = useState([]);
   return (
     <ShoppingCartContext.Provider
       value={{
@@ -37,6 +40,8 @@ export const ShoppingCartProvider = ({ children }) => {
         isCheckoutSideMenuOpen,
         openCheckoutSideMenu,
         closeCheckoutSideMenu,
+        order,
+        setOrder,
       }}
     >
       {children}