Merge pull request #301 from w3bdesign/develop

Update tested with versions

Author: w3bdesign

README.md

@@ -17,9 +17,9 @@ Optional plugin:
 
 The current release has been tested and is confirmed working with the following versions:
 
-- WordPress version 5.5.1
-- WooCommerce version 4.6.1
-- WP GraphQL version 0.13.3
+- WordPress version 5.5.3
+- WooCommerce version 4.8.0
+- WP GraphQL version 1.0.3
 - WooGraphQL version 0.6.1
 
 2. For debugging and testing, install either:

components/Cart/AddToCartButton.component.jsx

@@ -1,7 +1,5 @@
 import { useState, useContext } from 'react';
-
 import { v4 as uuidv4 } from 'uuid';
-
 import { useQuery, useMutation } from '@apollo/client';
 
 import { AppContext } from 'utils/context/AppContext';
@@ -18,9 +16,9 @@ import { getFormattedCart } from 'utils/functions/functions';
  * @param {Object} product
  */
 const AddToCartButton = ({ product }) => {
-  const [cart, setCart] = useContext(AppContext);
-  const [requestError, setRequestError] = useState(null);
-  const [showViewCart, setShowViewCart] = useState(false);
+  const [, setCart] = useContext(AppContext);
+  const [, setRequestError] = useState(null);
+  const [, setShowViewCart] = useState(false);
   const [showAddToCart, setshowAddToCart] = useState(false);
 
   const productId = product.databaseId ? product.databaseId : product;
@@ -31,7 +29,7 @@ const AddToCartButton = ({ product }) => {
   };
 
   // Get Cart Data.
-  const { loading, error, data, refetch } = useQuery(GET_CART, {
+  const { data, refetch } = useQuery(GET_CART, {
     notifyOnNetworkStatusChange: true,
     onCompleted: () => {
       // Update cart in the localStorage.
@@ -44,12 +42,12 @@ const AddToCartButton = ({ product }) => {
 
   const [
     addToCart,
-    { data: addToCartRes, loading: addToCartLoading, error: addToCartError },
+    { loading: addToCartLoading, error: addToCartError },
   ] = useMutation(ADD_TO_CART, {
     variables: {
       input: productQueryInput,
     },
-    onCompleted: (data) => {
+    onCompleted: () => {
       // If error.
       if (addToCartError) {
         setRequestError(addToCartError.graphQLErrors[0].message);

components/Cart/CartPage/CartItem.component.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { v4 } from 'uuid';
+import { v4 as uuidv4 } from 'uuid';
 
 import SVGX from 'components/SVG/SVGX.component';
 import { getUpdatedItems } from 'utils/functions/functions';
@@ -39,7 +39,7 @@ const CartItem = ({
         updateCart({
           variables: {
             input: {
-              clientMutationId: v4(),
+              clientMutationId: uuidv4(),
               items: updatedItems,
             },
           },

components/Cart/CartPage/CartItemsContainer.component.jsx

@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { v4 } from 'uuid';
+import { v4 as uuidv4 } from 'uuid';
 import { useContext, useState } from 'react';
 import { useQuery, useMutation } from '@apollo/client';
 
@@ -50,7 +50,7 @@ const CartItemsContainer = () => {
       updateCart({
         variables: {
           input: {
-            clientMutationId: v4(),
+            clientMutationId: uuidv4(),
             items: updatedItems,
           },
         },

components/Cart/CartPage/MobileCart.component.jsx

@@ -1,4 +1,4 @@
-import { v4 } from 'uuid';
+import { v4 as uuidv4 } from 'uuid';
 
 import MobileCartItem from './MobileCartItem.component';
 
@@ -12,7 +12,7 @@ const MobileCart = ({ cart, handleRemoveProductClick, updateCart }) => {
               {cart.products.length &&
                 cart.products.map(() => (
                   <tr
-                    key={v4()}
+                    key={uuidv4()}
                     className="flex flex-col mb-2 bg-white border border-gray-300 rounded-l-lg flex-no wrap sm:table-row sm:rounded-none sm:mb-0"
                   >
                     <th className="p-3 text-left">Fjern</th>
@@ -27,7 +27,7 @@ const MobileCart = ({ cart, handleRemoveProductClick, updateCart }) => {
               {cart.products.length &&
                 cart.products.map((item) => (
                   <MobileCartItem
-                    key={item}
+                    key={uuidv4()}
                     item={item}
                     products={cart.products}
                     handleRemoveProductClick={handleRemoveProductClick}

components/Cart/CartPage/MobileCartItem.component.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { v4 } from 'uuid';
+import { v4 as uuidv4 } from 'uuid';
 
 import SVGX from 'components/SVG/SVGX.component';
 import { getUpdatedItems } from 'utils/functions/functions';
@@ -37,7 +37,7 @@ const MobileCartItem = ({
         updateCart({
           variables: {
             input: {
-              clientMutationId: v4(),
+              clientMutationId: uuidv4(),
               items: updatedItems,
             },
           },
@@ -58,7 +58,8 @@ const MobileCartItem = ({
         </td>
         <td className="h-12 p-3">{item.name}</td>
         <td className="h-12 p-3">
-          kr{'string' !== typeof item.price ? item.price.toFixed(2) : item.price}
+          kr
+          {'string' !== typeof item.price ? item.price.toFixed(2) : item.price}
         </td>
         <td className="h-12 p-3">
           <input

components/Category/Categories.component.jsx

@@ -10,23 +10,21 @@ const Categories = ({ categories }) => {
   return (
     <>
       <section className="container mx-auto bg-white">
-      <div className="grid gap-2 px-2 pt-2 pb-2 lg:px-0 xl:px-0 md:px-0 lg:grid-cols-4 sm:grid-cols-2 md:grid-cols-3 xs:grid-cols-3">
+        <div className="grid gap-2 px-2 pt-2 pb-2 lg:px-0 xl:px-0 md:px-0 lg:grid-cols-4 sm:grid-cols-2 md:grid-cols-3 xs:grid-cols-3">
           {categories.map(({ id, name, slug }) => (
             <Link
               key={uuidv4()}
               as={`/kategori/${slug}?id=${id}`}
               href="/kategori/[id]"
             >
-              <div                
-                className="p-6 cursor-pointer"
-              >
+              <div className="p-6 cursor-pointer">
                 <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>
                 </div>
               </div>
             </Link>
           ))}
-       </div>
+        </div>
       </section>
     </>
   );

components/Checkout/MobileOrderDetails.component.jsx

@@ -1,4 +1,4 @@
-import { v4 } from 'uuid';
+import { v4 as uuidv4 } from 'uuid';
 
 import MobileOrderDetailsItem from './MobileOrderDetailsItem.component';
 
@@ -12,7 +12,7 @@ const MobileOrderDetails = ({ cart }) => {
               {cart.products.length &&
                 cart.products.map(() => (
                   <tr
-                    key={v4()}
+                    key={uuidv4()}
                     className="flex flex-col mb-2 bg-white rounded-l-lg flex-no wrap sm:table-row sm:rounded-none sm:mb-0"
                   >
                     <th className="p-3 text-left">Navn</th>

utils/functions/functions.js

@@ -1,4 +1,4 @@
-import { v4 } from 'uuid';
+import { v4 as uuidv4 } from 'uuid';
 
 import WOO_CONFIG from 'utils/config/nextConfig';
 
@@ -239,7 +239,7 @@ export const getFormattedCart = (data) => {
 
 export const createCheckoutData = (order) => {
   const checkoutData = {
-    clientMutationId: v4(),
+    clientMutationId: uuidv4(),
 
     billing: {
       firstName: order.firstName,