Merge pull request #167 from w3bdesign/development

Development

Author: w3bdesign

README.md

@@ -17,8 +17,8 @@ You can also import default Woocommerce products that come with wooCommerce Plug
 
 2. Clone or fork the repo and modify ```nextConfig.js```
 3. Modify the values according to your setup
-
-Start the server with ```npm run dev ```
+4. Start the server with ```npm run dev ```
+5. Enable COD (Cash On Demand) payment method in WooCommerce
 
 ## Features
 

components/Cart/CartPage/CartItem.component.jsx

@@ -1,10 +1,56 @@
 import { useState } from 'react';
+import { v4 } from 'uuid';
 
 import SVGX from 'components/SVG/SVGX.component';
 
-const CartItem = ({ item, products, handleRemoveProductClick }) => {
+import { getUpdatedItems } from '../../../utils/functions/functions';
+
+const CartItem = ({
+  item,
+  products,
+  handleRemoveProductClick,  
+  updateCart,
+}) => {
   const [productCount, setProductCount] = useState(item.qty);
 
+  console.log("Update cart: ");
+  console.log(updateCart);
+
+  /*
+   * When user changes the quantity, update the cart in localStorage
+   * Also update the cart in the global Context
+   *
+   * @param {Object} event cartKey
+   *
+   * @return {void}
+   */
+  const handleQuantityChange = (event, cartKey) => {
+    if (process.browser) {
+      event.stopPropagation();
+      // If the previous update cart mutation request is still processing, then return.
+      
+      /*if (updateCartProcessing) {
+        return;
+      }*/
+      // If the user tries to delete the count of product, set that to 1 by default ( This will not allow him to reduce it less than zero )
+      const newQty = event.target.value ? parseInt(event.target.value) : 1;
+      // Set the new qty in state.
+      setProductCount(newQty);
+      if (products.length) {
+        const updatedItems = getUpdatedItems(products, newQty, cartKey);
+
+        updateCart({
+          variables: {
+            input: {
+              clientMutationId: v4(),
+              items: updatedItems,
+            },
+          },
+        });
+      }
+    }
+  };
+
   return (
     <tr className="bg-gray-100">
       <td className="px-4 py-2 border">
@@ -35,9 +81,7 @@ const CartItem = ({ item, products, handleRemoveProductClick }) => {
           type="number"
           min="1"
           defaultValue={productCount}
-          onChange={() => {
-            console.log('Changed quantity ...');
-          }}
+          onChange={(event) => handleQuantityChange(event, item.cartKey)}
         />
       </td>
 

components/Cart/CartPage/CartItemsContainer.component.jsx

@@ -68,6 +68,7 @@ const CartItemsContainer = () => {
   };
 
   const { loading, error, data, refetch } = useQuery(GET_CART, {
+    notifyOnNetworkStatusChange: true,
     onCompleted: () => {
       // Update cart in the localStorage.
       const updatedCart = getFormattedCart(data);
@@ -80,7 +81,6 @@ const CartItemsContainer = () => {
       setRequestError(error);
     },
   });
-  // TODO Add more functionality
 
   return (
     <>
@@ -91,11 +91,15 @@ const CartItemsContainer = () => {
               <PageTitle title="Handlekurv" />
               <RegularCart
                 cart={cart}
-                handleRemoveProductClick={handleRemoveProductClick}
+                updateCartProcessing={updateCartProcessing}
+                handleRemoveProductClick={handleRemoveProductClick} 
+                updateCart={updateCart}               
               />
               <MobileCart
                 cart={cart}
-                handleRemoveProductClick={handleRemoveProductClick}
+                updateCartProcessing={updateCartProcessing}
+                handleRemoveProductClick={handleRemoveProductClick}  
+                updateCart={updateCart}              
               />
               <div className="mt-4">
                 <Link href="/kasse">
@@ -106,7 +110,7 @@ const CartItemsContainer = () => {
               </div>
               {updateCartProcessing && (
                 <>
-                  <div className="mt-4 text-xl text-left">
+                  <div className="mt-4 text-xl text-center">
                     Oppdaterer antall, vennligst vent ...
                     <br />
                   </div>

components/Cart/CartPage/MobileCart.component.jsx

@@ -1,6 +1,6 @@
 import MobileCartItem from './MobileCartItem.component';
 
-const MobileCart = ({ cart, handleRemoveProductClick }) => {
+const MobileCart = ({ cart, handleRemoveProductClick, updateCart }) => {
   return (
     <section
       //className="container mx-auto bg-white md:hidden lg:hidden xl:hidden"
@@ -124,6 +124,7 @@ const MobileCart = ({ cart, handleRemoveProductClick }) => {
               item={item}
               products={cart.products}
               handleRemoveProductClick={handleRemoveProductClick}
+              updateCart={updateCart}
             />
           ))}
       </div>

components/Cart/CartPage/RegularCart.component.jsx

@@ -1,6 +1,6 @@
 import CartItem from './CartItem.component';
 
-const RegularCart = ({ cart, handleRemoveProductClick }) => {
+const RegularCart = ({ cart, handleRemoveProductClick, updateCart }) => {
   return (
     <table className="hidden table-auto md:block lg:block xl:block">
       <thead>
@@ -28,7 +28,8 @@ const RegularCart = ({ cart, handleRemoveProductClick }) => {
               key={item.productId}
               item={item}
               products={cart.products}
-              handleRemoveProductClick={handleRemoveProductClick}
+              handleRemoveProductClick={handleRemoveProductClick}              
+              updateCart={updateCart}
             />
           ))}
       </tbody>

components/Category/Categories.component.jsx

@@ -8,15 +8,12 @@ import { v4 as uuidv4 } from 'uuid';
 const Categories = ({ categories }) => {
   return (
     <>
-    
       <section className="container mx-auto bg-white">
-      
         <div className="flex ">
-        
           {categories.map(({ name }) => (
             <div
               key={uuidv4()}
-              className="flex flex-col justify-around p-6 xs:w-1/2 md:w-1/3 xl:w-1/4"
+              className="flex flex-col justify-around p-6 cursor-pointer xs:w-1/2 md:w-1/3 xl:w-1/4"
             >
               <div className="flex items-center justify-center w-full h-16 text-center border border-gray-300 rounded-lg shadow hover:shadow-outline">
                 <p className="text-lg">{name}</p>

components/Checkout/Billing.component.jsx

@@ -108,6 +108,7 @@ const Billing = ({ input, handleOnChange }) => {
                   name="paymentMethod"
                   type="radio"
                   checked
+                  readOnly
                 />
               </div>
               <div className="w-full p-2">

utils/const/GQL_QUERIES.js

@@ -107,10 +107,12 @@ export const FETCH_ALL_PRODUCTS_QUERY = gql`
  * Fetch all categories from GraphQL
  */
 export const FETCH_ALL_CATEGORIES_QUERY = gql`
-  query MyQuery {
-    productCategories {
+  query Categories {
+    productCategories(first: 10) {
       nodes {
+        id
         name
+        slug
       }
     }
   }