Merge pull request #909 from w3bdesign/801-react-18

Framer motion & React 18

components/Cart/AddToCartButton.component.jsx

@@ -34,6 +34,7 @@ const AddToCartButton = ({ product }) => {
   const { data, refetch } = useQuery(GET_CART, {
     notifyOnNetworkStatusChange: true,
     onCompleted: () => {
+      refetch();
       // Update cart in the localStorage.
       const updatedCart = getFormattedCart(data);
 
@@ -54,12 +55,14 @@ const AddToCartButton = ({ product }) => {
         input: productQueryInput,
       },
       onCompleted: () => {
+        console.log("Completed")
+         // Update the cart with new values in React context.
+         refetch();
         // If error.
         if (addToCartError) {
           setRequestError(addToCartError.graphQLErrors[0].message);
         }
-        // Update the cart with new values in React context.
-        refetch();
+
         // Show View Cart Button
         setShowViewCart(true);
         setshowAddToCart(true);
@@ -74,6 +77,7 @@ const AddToCartButton = ({ product }) => {
   const handleAddToCartClick = () => {
     setRequestError(null);
     addToCart();
+    refetch();
   };
 
   // Separate out conditions here for increased readability

components/Cart/CartPage/CartItem.component.jsx

@@ -49,6 +49,8 @@ const CartItem = ({
         });
       }
     }
+
+    refetch();
   };
   return (
     <tr className="bg-gray-100">

components/Cart/CartPage/CartItemsContainer.component.jsx

@@ -20,6 +20,8 @@ const CartItemsContainer = () => {
   const { data, refetch } = useQuery(GET_CART, {
     notifyOnNetworkStatusChange: true,
     onCompleted: () => {
+      refetch();
+
       // Update cart in the localStorage.
       const updatedCart = getFormattedCart(data);
       localStorage.setItem('woocommerce-cart', JSON.stringify(updatedCart));
@@ -71,6 +73,8 @@ const CartItemsContainer = () => {
         },
       });
     }
+
+    refetch();
   };
 
   useEffect(() => {