From 231621d2cf85aae806c681018ba4934383f833e5 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Thu, 12 Sep 2024 06:18:19 +0200
Subject: [PATCH 1/7] Update apollo.js

---
 plugins/apollo.js | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/plugins/apollo.js b/plugins/apollo.js
index cc616acf..a89631c6 100644
--- a/plugins/apollo.js
+++ b/plugins/apollo.js
@@ -57,12 +57,29 @@ export default defineNuxtPlugin((nuxtApp) => {
   );
 
   // Cache implementation
-  const cache = new InMemoryCache();
+  const cache = new InMemoryCache({
+    typePolicies: {
+      Query: {
+        fields: {
+          cart: {
+            merge(existing, incoming) {
+              return incoming;
+            },
+          },
+        },
+      },
+    },
+  });
 
   // Create the apollo client
   const apolloClient = new ApolloClient({
     link: middleware.concat(afterware.concat(httpLink)),
     cache,
+    defaultOptions: {
+      watchQuery: {
+        fetchPolicy: 'cache-and-network',
+      },
+    },
   });
 
   provideApolloClient(apolloClient);

From c1a3062abad79c86ed4125348d5410e93f23add0 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Thu, 12 Sep 2024 06:18:25 +0200
Subject: [PATCH 2/7] Update useCart.js

---
 store/useCart.js | 200 ++++++++++++++++++++++++++---------------------
 1 file changed, 112 insertions(+), 88 deletions(-)

diff --git a/store/useCart.js b/store/useCart.js
index e47e2ee0..0d05db1e 100644
--- a/store/useCart.js
+++ b/store/useCart.js
@@ -1,103 +1,127 @@
 import { defineStore } from "pinia";
-
+import { useQuery, useMutation } from "@vue/apollo-composable";
+import { computed, ref, watch } from "vue";
 import ADD_TO_CART_MUTATION from "@/apollo/mutations/ADD_TO_CART_MUTATION.gql";
+import UPDATE_CART_MUTATION from "@/apollo/mutations/UPDATE_CART_MUTATION.gql";
+import GET_CART_QUERY from "@/apollo/queries/GET_CART_QUERY.gql";
 
-/**
- * Manages a shopping cart store using the Pinia library.
- *
- * @typedef {Object} CartState
- * @property {Array} cart - The array representing the cart.
- * @property {boolean} loading - The loading status of the cart.
- * @property {string|null} error - The error message, if any.
- */
+export const useCart = defineStore("cartState", () => {
+  const cart = ref([]);
+  const loading = ref(false);
+  const error = ref(null);
+  const cartTotals = ref({});
 
-const state = {
-  cart: [],
-  loading: false,
-  error: null,
-};
+  const { result: cartResult, loading: cartLoading, refetch } = useQuery(GET_CART_QUERY, null, { fetchPolicy: 'network-only' });
 
-export const useCart = defineStore("cartState", {
-  state: () => state,
-  actions: {
-    async addToCart(product) {
-      this.loading = true;
-      try {
-        const { mutate } = useMutation(ADD_TO_CART_MUTATION);
-        const response = await mutate({
-          input: {
-            productId: product.databaseId,
-            quantity: 1,
-          },
-        });
+  watch(cartResult, (newCartResult) => {
+    if (newCartResult && newCartResult.cart) {
+      cart.value = newCartResult.cart.contents.nodes.map(item => ({
+        key: item.key,
+        product: item.product.node,
+        variation: item.variation ? item.variation.node : null,
+        quantity: item.quantity,
+        total: item.total,
+        subtotal: item.subtotal,
+        subtotalTax: item.subtotalTax
+      }));
 
-        if (response.data && response.data.addToCart) {
-          this.loading = false;
-          const newCartItem = response.data.addToCart.cartItem;
-          const foundProductInCartIndex = this.cart.findIndex(
-            (cartProduct) => newCartItem.product.node.slug === cartProduct.slug
-          );
+      cartTotals.value = {
+        subtotal: newCartResult.cart.subtotal,
+        subtotalTax: newCartResult.cart.subtotalTax,
+        shippingTax: newCartResult.cart.shippingTax,
+        shippingTotal: newCartResult.cart.shippingTotal,
+        total: newCartResult.cart.total,
+        totalTax: newCartResult.cart.totalTax,
+        feeTax: newCartResult.cart.feeTax,
+        feeTotal: newCartResult.cart.feeTotal,
+        discountTax: newCartResult.cart.discountTax,
+        discountTotal: newCartResult.cart.discountTotal
+      };
+    }
+  });
 
-          if (foundProductInCartIndex > -1) {
-            this.cart[foundProductInCartIndex].quantity += 1;
-          } else {
-            // We need to construct a cart item that matches the expected structure in `this.cart`
-            const productCopy = {
-              ...newCartItem.product.node,
-              quantity: newCartItem.quantity,
-              price: newCartItem.total, // Assuming 'total' is the price for one item
-              slug: newCartItem.product.node.slug,
-            };
+  const addToCart = async (product, quantity = 1) => {
+    loading.value = true;
+    error.value = null;
+    try {
+      const { mutate } = useMutation(ADD_TO_CART_MUTATION);
+      await mutate({
+        input: {
+          productId: product.databaseId,
+          quantity: quantity,
+        },
+      });
+      await refetch();
+    } catch (err) {
+      console.error("Error adding to cart:", err);
+      error.value = err.message || "An error occurred while adding to cart.";
+    } finally {
+      loading.value = false;
+    }
+  };
 
-            this.cart.push(productCopy);
-          }
-        } else {
-          // Handle the case where the mutation does not return the expected data
-          this.error = "Did not receive expected cart data from the server.";
-        }
-      } catch (error) {
-        this.error = error.message || "An error occurred while adding to cart.";
-      } finally {
-        this.loading = false;
-      }
-    },
+  const updateCartItemQuantity = async (key, quantity) => {
+    loading.value = true;
+    error.value = null;
+    try {
+      const { mutate } = useMutation(UPDATE_CART_MUTATION);
+      await mutate({
+        input: {
+          items: [{ key, quantity }],
+        },
+      });
+      await refetch();
+    } catch (err) {
+      console.error("Error updating cart:", err);
+      error.value = err.message || "An error occurred while updating the cart.";
+    } finally {
+      loading.value = false;
+    }
+  };
 
-    removeProductFromCart(product) {
-      this.cart.splice(this.cart.indexOf(product), 1);
-    },
-    clearCart() {
-      this.cart.length = 0;
-    },
-  },
-  getters: {
-    getCartQuantity() {
-      if (!this.cart) {
-        console.error("Cart is undefined");
-        return 0;
-      }
-      return this.cart.reduce((total, product) => total + product.quantity, 0);
-    },
+  const removeProductFromCart = async (key) => {
+    return updateCartItemQuantity(key, 0);
+  };
 
-    getCartTotal() {
-      const currencySymbol = useRuntimeConfig().public.currencySymbol || "kr";
-
-      const total = this.cart.reduce((total, product) => {
-        // Assuming product.price is a string that includes the currency symbol
-        const numericPrice = product.price
-          .replace(currencySymbol, "")
-          .replace(/[^0-9.]+/g, "");
+  const clearCart = async () => {
+    loading.value = true;
+    error.value = null;
+    try {
+      for (const item of cart.value) {
+        await removeProductFromCart(item.key);
+      }
+    } catch (err) {
+      console.error("Error clearing cart:", err);
+      error.value = err.message || "An error occurred while clearing the cart.";
+    } finally {
+      loading.value = false;
+    }
+  };
 
-        // Convert the cleaned string to a floating-point number
-        const price = parseFloat(numericPrice);
+  const cartQuantity = computed(() => {
+    return cart.value.reduce((total, item) => total + item.quantity, 0);
+  });
 
-        const productTotal = price * product.quantity;
+  const cartSubtotal = computed(() => {
+    return cartTotals.value.subtotal || '0';
+  });
 
-        return total + productTotal;
-      }, 0);
+  const cartTotal = computed(() => {
+    return cartTotals.value.total || '0';
+  });
 
-      // Format the total with the currency symbol and return it
-      return `${currencySymbol} ${total.toFixed(2)}`;
-    },
-  },
-  persist: true,
+  return {
+    cart,
+    loading,
+    error,
+    cartTotals,
+    addToCart,
+    updateCartItemQuantity,
+    removeProductFromCart,
+    clearCart,
+    cartQuantity,
+    cartSubtotal,
+    cartTotal,
+    refetch,
+  };
 });

From 57ddd719a13176df00942285b3f7d6200c2667a6 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Thu, 12 Sep 2024 06:26:35 +0200
Subject: [PATCH 3/7] .

---
 components/Cart/CartContents.vue              | 57 ++++---------
 components/Cart/CartItem.vue                  | 10 ++-
 components/Layout/LayoutCart.vue              | 72 +++-------------
 components/Products/ProductsSingleProduct.vue | 26 +++---
 store/useCart.js                              | 84 ++++++++++++++-----
 5 files changed, 108 insertions(+), 141 deletions(-)

diff --git a/components/Cart/CartContents.vue b/components/Cart/CartContents.vue
index b1679adf..3aed0214 100644
--- a/components/Cart/CartContents.vue
+++ b/components/Cart/CartContents.vue
@@ -1,18 +1,18 @@
 <template>
-  <template v-if="data.cart?.contents?.nodes?.length">
+  <div v-if="cartItems.length">
     <h1 class="h-10 p-6 text-3xl font-bold text-center">Cart</h1>
     <section class="mt-10">
       <CartItem
-        v-for="product in data.cart.contents.nodes"
-        :key="product.id"
+        v-for="product in cartItems"
+        :key="product.key"
         :product="product"
         @remove="handleRemoveProduct"
       />
     </section>
-    <CommonButton link-to="/checkout" v-if="showCheckoutButton" center-button>
+    <CommonButton link-to="/checkout" center-button>
       CHECKOUT
     </CommonButton>
-  </template>
+  </div>
   <h2 v-else class="mt-64 text-3xl text-center">Cart is currently empty</h2>
 </template>
 
@@ -21,55 +21,28 @@
  * Vue.js component for handling the logic of removing a product from the cart and updating the cart state.
  *
  * @module CartContents
- * @param {Object} props - Object containing the component's properties.
- * @param {Boolean} props.showCheckoutButton - Determines whether the checkout button should be shown or not.
  * @returns {Object} The Vue.js component object.
  */
-import GET_CART_QUERY from "@/apollo/queries/GET_CART_QUERY.gql";
-import UPDATE_CART_MUTATION from "@/apollo/mutations/UPDATE_CART_MUTATION.gql";
-
+import { computed } from 'vue';
 import { useCart } from "@/store/useCart";
+import CommonButton from '@/components/common/CommonButton.vue';
 
 const cart = useCart();
 
-defineProps({
-  showCheckoutButton: { type: Boolean, required: false, default: false },
-});
-
-const { data } = await useAsyncQuery(GET_CART_QUERY);
+const cartItems = computed(() => cart.cart);
 
 /**
  * Handles the removal of a product.
  *
  * @param {Object} product - The product to be removed.
  */
-const handleRemoveProduct = (product) => {
-  const updatedItems = [];
-
-  const { key } = product;
-
-  updatedItems.push({
-    key,
-    quantity: 0,
-  });
-
-  const variables = {
-    input: {
-      items: updatedItems,
-    },
-  };
-
-  cart.removeProductFromCart(product);
-
-  const { mutate, onDone, onError } = useMutation(UPDATE_CART_MUTATION, {
-    variables,
-  });
-
-  mutate(variables);
-
-  onDone(() => {
-    document.location = "/cart";
-  });
+const handleRemoveProduct = async (product) => {
+  try {
+    await cart.removeProductFromCart(product.key);
+  } catch (error) {
+    console.error('Error removing product from cart:', error);
+    // You might want to show an error message to the user here
+  }
 };
 </script>
 
diff --git a/components/Cart/CartItem.vue b/components/Cart/CartItem.vue
index 7722cfb3..5d561fa8 100644
--- a/components/Cart/CartItem.vue
+++ b/components/Cart/CartItem.vue
@@ -15,7 +15,7 @@
     </div>
     <div class="item">
       <span class="block mt-2 font-extrabold">Name: <br /></span>
-      <span class="item-content">{{ product.product.node.name }}</span>
+      <span class="item-content">{{ product.product.name }}</span>
     </div>
     <div class="item">
       <span class="block mt-2 font-extrabold">Quantity: <br /></span>
@@ -25,7 +25,7 @@
     </div>
     <div class="item">
       <span class="block mt-2 font-extrabold">Subtotal: <br /></span>
-      <span class="item-content">{{ formatPrice(`${product.total}`) }}</span>
+      <span class="item-content">{{ formatPrice(product.total) }}</span>
     </div>
   </div>
 </template>
@@ -37,13 +37,15 @@
  * @component CartItem
  *
  * @prop {Object} product - The product object containing information about the product.
- * @prop {string} product.name - The name of the product.
+ * @prop {Object} product.product - The product details.
+ * @prop {string} product.product.name - The name of the product.
  * @prop {number} product.quantity - The quantity of the product.
- * @prop {number} product.total - The subtotal of the product.
+ * @prop {string} product.total - The subtotal of the product.
  *
  * @emits CartItem#remove - Emitted when the remove button is clicked.
  */
 
+import { ref } from 'vue';
 import { formatPrice } from "@/utils/functions";
 
 const isRemoving = ref(false);
diff --git a/components/Layout/LayoutCart.vue b/components/Layout/LayoutCart.vue
index 3bb81e9f..ae88fcaa 100644
--- a/components/Layout/LayoutCart.vue
+++ b/components/Layout/LayoutCart.vue
@@ -1,14 +1,14 @@
 <template>
-  <div v-if="remoteError">
-    <span class="text-xl text-red-500"
-      >Error fetching cart. Please refresh the page.</span
-    >
+  <div v-if="cart.error">
+    <span class="text-xl text-red-500">
+      Error fetching cart. Please refresh the page.
+    </span>
   </div>
   <div v-else class="mt-4 lg:mt-0">
     <NuxtLink to="/cart">
       <transition name="cart">
         <span
-          v-if="cartLength && !loading"
+          v-if="cartLength && !cart.loading"
           class="text-xl text-white no-underline lg:text-black is-active"
         >
           <span class="hidden lg:block">
@@ -29,14 +29,14 @@
         </span>
       </transition>
       <transition name="cart">
-        <div v-if="cartLength && !loading">
+        <div v-if="cartLength && !cart.loading">
           <span
             class="absolute w-6 h-6 pb-2 ml-16 -mt-12 text-center text-black bg-white lg:text-white lg:bg-black rounded-full lg:ml-14"
           >
             {{ cartLength }}
           </span>
           <span class="text-white lg:text-black">
-            Total: {{ formatPrice(`${subTotal}`) }}
+            Total: {{ formatPrice(cartSubtotal) }}
           </span>
         </div>
       </transition>
@@ -45,62 +45,12 @@
 </template>
 
 <script setup>
-import { ref, onBeforeMount, computed, watch } from "vue";
-
-import GET_CART_QUERY from "@/apollo/queries/GET_CART_QUERY.gql";
-import { getCookie } from "@/utils/functions";
+import { computed } from "vue";
 import { useCart } from "@/store/useCart";
+import { formatPrice } from "@/utils/functions";
 
 const cart = useCart();
-const cartChanged = ref(false);
-const loading = ref(true);
-const remoteError = ref(false);
-
-const { data, error, pending, execute } = useAsyncQuery(GET_CART_QUERY, {
-  fetchPolicy: "cache-and-network",
-});
-
-const cartContents = computed(() => data.value?.cart?.contents?.nodes || []);
-const cartLength = computed(() =>
-  cartContents.value.reduce((total, product) => total + product.quantity, 0)
-);
-const subTotal = computed(() =>
-  cartContents.value.reduce(
-    (total, product) => total + Number(product.total.replace(/[^0-9.-]+/g, "")),
-    0
-  )
-);
-
-// Watch for changes in the cart quantity and set a flag if it changes
-watch(cartLength, (newLength, oldLength) => {
-  if (newLength !== oldLength) {
-    cartChanged.value = true;
-  }
-});
-
-// Execute the query initially
-onBeforeMount(() => {
-  execute();
-});
-
-// When the component is mounted, stop the loading state
-loading.value = false;
-
-// Watch for the cartChanged flag and execute the query when it changes
-watch(cartChanged, (newValue) => {
-  if (
-    newValue &&
-    process.client &&
-    !pending.value &&
-    getCookie("woo-session")
-  ) {
-    execute();
-    cartChanged.value = false; // Reset the flag after executing the query
-  }
-});
 
-// Watch for errors from the Apollo query
-watch(error, (newError) => {
-  remoteError.value = !!newError;
-});
+const cartLength = computed(() => cart.cartQuantity);
+const cartSubtotal = computed(() => cart.cartSubtotal);
 </script>
diff --git a/components/Products/ProductsSingleProduct.vue b/components/Products/ProductsSingleProduct.vue
index 64f6443b..eaffbf5a 100644
--- a/components/Products/ProductsSingleProduct.vue
+++ b/components/Products/ProductsSingleProduct.vue
@@ -54,9 +54,10 @@
                 @common-button-click="addProductToCart(data.product)"
                 :is-loading="isLoading"
               >
-                ADD TO CART</CommonButton
-              >
+                ADD TO CART
+              </CommonButton>
             </div>
+            <p v-if="successMessage" class="mt-4 text-green-600">{{ successMessage }}</p>
           </div>
         </div>
       </div>
@@ -75,10 +76,9 @@
  * @prop {string} slug - The slug of the product to display.
  */
 
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 
 import GET_SINGLE_PRODUCT_QUERY from "@/apollo/queries/GET_SINGLE_PRODUCT_QUERY.gql";
-import ADD_TO_CART_MUTATION from "@/apollo/mutations/ADD_TO_CART_MUTATION.gql";
 
 import ProductImage from "@/components/Products/ProductImage.vue";
 import ProductPrice from "@/components/Products/ProductPrice.vue";
@@ -92,6 +92,7 @@ const cart = useCart();
 const isLoading = computed(() => cart.loading);
 
 const selectedVariation = ref(); // TODO Pass this value to addProductToCart()
+const successMessage = ref('');
 
 const props = defineProps({
   id: { type: String, required: true },
@@ -119,12 +120,15 @@ watch(
  * @return {Promise<void>} A Promise that resolves when the product has been successfully added to the cart.
  */
 const addProductToCart = async (product) => {
-  await cart.addToCart(product);
-
-  watchEffect(() => {
-    if (isLoading.value === false) {
-      window.location.reload();
-    }
-  });
+  try {
+    await cart.addToCart(product);
+    successMessage.value = 'Product added to cart successfully!';
+    setTimeout(() => {
+      successMessage.value = '';
+    }, 3000);
+  } catch (error) {
+    console.error('Error adding product to cart:', error);
+    // You might want to show an error message to the user here
+  }
 };
 </script>
diff --git a/store/useCart.js b/store/useCart.js
index 0d05db1e..387297ad 100644
--- a/store/useCart.js
+++ b/store/useCart.js
@@ -15,35 +15,49 @@ export const useCart = defineStore("cartState", () => {
 
   watch(cartResult, (newCartResult) => {
     if (newCartResult && newCartResult.cart) {
-      cart.value = newCartResult.cart.contents.nodes.map(item => ({
-        key: item.key,
-        product: item.product.node,
-        variation: item.variation ? item.variation.node : null,
-        quantity: item.quantity,
-        total: item.total,
-        subtotal: item.subtotal,
-        subtotalTax: item.subtotalTax
-      }));
-
-      cartTotals.value = {
-        subtotal: newCartResult.cart.subtotal,
-        subtotalTax: newCartResult.cart.subtotalTax,
-        shippingTax: newCartResult.cart.shippingTax,
-        shippingTotal: newCartResult.cart.shippingTotal,
-        total: newCartResult.cart.total,
-        totalTax: newCartResult.cart.totalTax,
-        feeTax: newCartResult.cart.feeTax,
-        feeTotal: newCartResult.cart.feeTotal,
-        discountTax: newCartResult.cart.discountTax,
-        discountTotal: newCartResult.cart.discountTotal
-      };
+      updateCartState(newCartResult.cart);
     }
   });
 
+  const updateCartState = (newCart) => {
+    cart.value = newCart.contents.nodes.map(item => ({
+      key: item.key,
+      product: item.product.node,
+      variation: item.variation ? item.variation.node : null,
+      quantity: item.quantity,
+      total: item.total,
+      subtotal: item.subtotal,
+      subtotalTax: item.subtotalTax
+    }));
+
+    cartTotals.value = {
+      subtotal: newCart.subtotal,
+      subtotalTax: newCart.subtotalTax,
+      shippingTax: newCart.shippingTax,
+      shippingTotal: newCart.shippingTotal,
+      total: newCart.total,
+      totalTax: newCart.totalTax,
+      feeTax: newCart.feeTax,
+      feeTotal: newCart.feeTotal,
+      discountTax: newCart.discountTax,
+      discountTotal: newCart.discountTotal
+    };
+  };
+
   const addToCart = async (product, quantity = 1) => {
     loading.value = true;
     error.value = null;
     try {
+      // Optimistically update the local state
+      const newItem = {
+        key: Date.now().toString(), // Temporary key
+        product: product,
+        quantity: quantity,
+        total: (parseFloat(product.price) * quantity).toString(),
+        subtotal: (parseFloat(product.price) * quantity).toString(),
+      };
+      cart.value.push(newItem);
+
       const { mutate } = useMutation(ADD_TO_CART_MUTATION);
       await mutate({
         input: {
@@ -55,6 +69,8 @@ export const useCart = defineStore("cartState", () => {
     } catch (err) {
       console.error("Error adding to cart:", err);
       error.value = err.message || "An error occurred while adding to cart.";
+      // Revert the optimistic update
+      cart.value = cart.value.filter(item => item.key !== Date.now().toString());
     } finally {
       loading.value = false;
     }
@@ -64,6 +80,12 @@ export const useCart = defineStore("cartState", () => {
     loading.value = true;
     error.value = null;
     try {
+      // Optimistically update the local state
+      const itemIndex = cart.value.findIndex(item => item.key === key);
+      if (itemIndex !== -1) {
+        cart.value[itemIndex].quantity = quantity;
+      }
+
       const { mutate } = useMutation(UPDATE_CART_MUTATION);
       await mutate({
         input: {
@@ -74,13 +96,29 @@ export const useCart = defineStore("cartState", () => {
     } catch (err) {
       console.error("Error updating cart:", err);
       error.value = err.message || "An error occurred while updating the cart.";
+      // Revert the optimistic update
+      await refetch();
     } finally {
       loading.value = false;
     }
   };
 
   const removeProductFromCart = async (key) => {
-    return updateCartItemQuantity(key, 0);
+    loading.value = true;
+    error.value = null;
+    try {
+      // Optimistically update the local state
+      cart.value = cart.value.filter(item => item.key !== key);
+
+      await updateCartItemQuantity(key, 0);
+    } catch (err) {
+      console.error("Error removing product from cart:", err);
+      error.value = err.message || "An error occurred while removing the product from the cart.";
+      // Revert the optimistic update
+      await refetch();
+    } finally {
+      loading.value = false;
+    }
   };
 
   const clearCart = async () => {

From f075d583a0b5870e69429fcb41d82ac7b7079cd3 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Thu, 12 Sep 2024 06:27:38 +0200
Subject: [PATCH 4/7] Update CartItem.vue

---
 components/Cart/CartItem.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/Cart/CartItem.vue b/components/Cart/CartItem.vue
index 5d561fa8..dc0a7f8a 100644
--- a/components/Cart/CartItem.vue
+++ b/components/Cart/CartItem.vue
@@ -41,6 +41,7 @@
  * @prop {string} product.product.name - The name of the product.
  * @prop {number} product.quantity - The quantity of the product.
  * @prop {string} product.total - The subtotal of the product.
+ * @prop {string} product.key - The unique key for the cart item.
  *
  * @emits CartItem#remove - Emitted when the remove button is clicked.
  */
@@ -60,10 +61,11 @@ const props = defineProps({
 const emit = defineEmits(["remove"]);
 
 /**
- * Emits a "remove" event with the `product` prop as the payload.
+ * Emits a "remove" event with the product's key as the payload.
  */
 const emitRemove = () => {
-  emit("remove", props.product);
+  isRemoving.value = true;
+  emit("remove", props.product.key);
 };
 </script>
 

From f810b1d32ce2c61db159e38b989a0f218147175c Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Thu, 12 Sep 2024 06:31:20 +0200
Subject: [PATCH 5/7] .

---
 components/Cart/CartContents.vue |  9 +++----
 store/useCart.js                 | 40 ++++++--------------------------
 2 files changed, 12 insertions(+), 37 deletions(-)

diff --git a/components/Cart/CartContents.vue b/components/Cart/CartContents.vue
index 3aed0214..4ed2873a 100644
--- a/components/Cart/CartContents.vue
+++ b/components/Cart/CartContents.vue
@@ -34,14 +34,15 @@ const cartItems = computed(() => cart.cart);
 /**
  * Handles the removal of a product.
  *
- * @param {Object} product - The product to be removed.
+ * @param {string} key - The key of the product to be removed.
  */
-const handleRemoveProduct = async (product) => {
+const handleRemoveProduct = async (key) => {
   try {
-    await cart.removeProductFromCart(product.key);
+    await cart.removeProductFromCart(key);
   } catch (error) {
     console.error('Error removing product from cart:', error);
-    // You might want to show an error message to the user here
+    // Optionally, you can add a user-friendly notification here
+    // without exposing the error details
   }
 };
 </script>
diff --git a/store/useCart.js b/store/useCart.js
index 387297ad..99a91071 100644
--- a/store/useCart.js
+++ b/store/useCart.js
@@ -11,7 +11,7 @@ export const useCart = defineStore("cartState", () => {
   const error = ref(null);
   const cartTotals = ref({});
 
-  const { result: cartResult, loading: cartLoading, refetch } = useQuery(GET_CART_QUERY, null, { fetchPolicy: 'network-only' });
+  const { result: cartResult, loading: cartLoading, refetch: refetchCart } = useQuery(GET_CART_QUERY, null, { fetchPolicy: 'network-only' });
 
   watch(cartResult, (newCartResult) => {
     if (newCartResult && newCartResult.cart) {
@@ -48,16 +48,6 @@ export const useCart = defineStore("cartState", () => {
     loading.value = true;
     error.value = null;
     try {
-      // Optimistically update the local state
-      const newItem = {
-        key: Date.now().toString(), // Temporary key
-        product: product,
-        quantity: quantity,
-        total: (parseFloat(product.price) * quantity).toString(),
-        subtotal: (parseFloat(product.price) * quantity).toString(),
-      };
-      cart.value.push(newItem);
-
       const { mutate } = useMutation(ADD_TO_CART_MUTATION);
       await mutate({
         input: {
@@ -65,12 +55,9 @@ export const useCart = defineStore("cartState", () => {
           quantity: quantity,
         },
       });
-      await refetch();
+      await refetchCart();
     } catch (err) {
       console.error("Error adding to cart:", err);
-      error.value = err.message || "An error occurred while adding to cart.";
-      // Revert the optimistic update
-      cart.value = cart.value.filter(item => item.key !== Date.now().toString());
     } finally {
       loading.value = false;
     }
@@ -80,24 +67,16 @@ export const useCart = defineStore("cartState", () => {
     loading.value = true;
     error.value = null;
     try {
-      // Optimistically update the local state
-      const itemIndex = cart.value.findIndex(item => item.key === key);
-      if (itemIndex !== -1) {
-        cart.value[itemIndex].quantity = quantity;
-      }
-
       const { mutate } = useMutation(UPDATE_CART_MUTATION);
       await mutate({
         input: {
           items: [{ key, quantity }],
         },
       });
-      await refetch();
+      await refetchCart();
     } catch (err) {
       console.error("Error updating cart:", err);
-      error.value = err.message || "An error occurred while updating the cart.";
-      // Revert the optimistic update
-      await refetch();
+      await refetchCart();
     } finally {
       loading.value = false;
     }
@@ -107,17 +86,12 @@ export const useCart = defineStore("cartState", () => {
     loading.value = true;
     error.value = null;
     try {
-      // Optimistically update the local state
-      cart.value = cart.value.filter(item => item.key !== key);
-
       await updateCartItemQuantity(key, 0);
     } catch (err) {
       console.error("Error removing product from cart:", err);
-      error.value = err.message || "An error occurred while removing the product from the cart.";
-      // Revert the optimistic update
-      await refetch();
     } finally {
       loading.value = false;
+      await refetchCart();
     }
   };
 
@@ -130,9 +104,9 @@ export const useCart = defineStore("cartState", () => {
       }
     } catch (err) {
       console.error("Error clearing cart:", err);
-      error.value = err.message || "An error occurred while clearing the cart.";
     } finally {
       loading.value = false;
+      await refetchCart();
     }
   };
 
@@ -160,6 +134,6 @@ export const useCart = defineStore("cartState", () => {
     cartQuantity,
     cartSubtotal,
     cartTotal,
-    refetch,
+    refetch: refetchCart,
   };
 });

From b56198b9bbd277188bb7a17a625c718dcc185246 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Thu, 12 Sep 2024 06:40:02 +0200
Subject: [PATCH 6/7] .

---
 components/Cart/CartContents.vue | 23 +++++++++++++++++++--
 components/Layout/LayoutCart.vue | 35 +++++++++++++++++++++++---------
 nuxt.config.js                   |  2 +-
 plugins/cartUpdater.js           | 16 +++++++++++++++
 4 files changed, 63 insertions(+), 13 deletions(-)
 create mode 100644 plugins/cartUpdater.js

diff --git a/components/Cart/CartContents.vue b/components/Cart/CartContents.vue
index 4ed2873a..cdea8f31 100644
--- a/components/Cart/CartContents.vue
+++ b/components/Cart/CartContents.vue
@@ -1,5 +1,11 @@
 <template>
-  <div v-if="cartItems.length">
+  <div v-if="isLoading">
+    <h2 class="mt-64 text-3xl text-center">Loading cart...</h2>
+  </div>
+  <div v-else-if="error">
+    <h2 class="mt-64 text-3xl text-center text-red-500">Error loading cart. Please try again.</h2>
+  </div>
+  <div v-else-if="cartItems.length">
     <h1 class="h-10 p-6 text-3xl font-bold text-center">Cart</h1>
     <section class="mt-10">
       <CartItem
@@ -23,11 +29,13 @@
  * @module CartContents
  * @returns {Object} The Vue.js component object.
  */
-import { computed } from 'vue';
+import { computed, ref, onMounted } from 'vue';
 import { useCart } from "@/store/useCart";
 import CommonButton from '@/components/common/CommonButton.vue';
 
 const cart = useCart();
+const isLoading = ref(true);
+const error = ref(null);
 
 const cartItems = computed(() => cart.cart);
 
@@ -45,6 +53,17 @@ const handleRemoveProduct = async (key) => {
     // without exposing the error details
   }
 };
+
+onMounted(async () => {
+  try {
+    await cart.refetch();
+  } catch (err) {
+    console.error('Error fetching cart:', err);
+    error.value = err;
+  } finally {
+    isLoading.value = false;
+  }
+});
 </script>
 
 <style scoped>
diff --git a/components/Layout/LayoutCart.vue b/components/Layout/LayoutCart.vue
index ae88fcaa..51b816b1 100644
--- a/components/Layout/LayoutCart.vue
+++ b/components/Layout/LayoutCart.vue
@@ -1,14 +1,17 @@
 <template>
-  <div v-if="cart.error">
-    <span class="text-xl text-red-500">
-      Error fetching cart. Please refresh the page.
-    </span>
-  </div>
-  <div v-else class="mt-4 lg:mt-0">
-    <NuxtLink to="/cart">
+  <div class="mt-4 lg:mt-0">
+    <div v-if="isLoading">
+      <span class="text-xl text-gray-500">Loading cart...</span>
+    </div>
+    <div v-else-if="error">
+      <span class="text-xl text-red-500">
+        Error fetching cart. Please refresh the page.
+      </span>
+    </div>
+    <NuxtLink v-else to="/cart">
       <transition name="cart">
         <span
-          v-if="cartLength && !cart.loading"
+          v-if="cartLength > 0"
           class="text-xl text-white no-underline lg:text-black is-active"
         >
           <span class="hidden lg:block">
@@ -29,7 +32,7 @@
         </span>
       </transition>
       <transition name="cart">
-        <div v-if="cartLength && !cart.loading">
+        <div v-if="cartLength > 0">
           <span
             class="absolute w-6 h-6 pb-2 ml-16 -mt-12 text-center text-black bg-white lg:text-white lg:bg-black rounded-full lg:ml-14"
           >
@@ -45,12 +48,24 @@
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { ref, computed, onMounted } from "vue";
 import { useCart } from "@/store/useCart";
 import { formatPrice } from "@/utils/functions";
 
 const cart = useCart();
+const isLoading = ref(true);
+const error = ref(null);
 
 const cartLength = computed(() => cart.cartQuantity);
 const cartSubtotal = computed(() => cart.cartSubtotal);
+
+onMounted(async () => {
+  try {
+    await cart.refetch();
+  } catch (err) {
+    error.value = err;
+  } finally {
+    isLoading.value = false;
+  }
+});
 </script>
diff --git a/nuxt.config.js b/nuxt.config.js
index 6294f2a7..c72c6e52 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -13,7 +13,7 @@ export default defineNuxtConfig({
     "nuxt-icon",
     "@nuxt/image",
   ],
-  plugins: ["~/plugins/apollo"],
+  plugins: ["~/plugins/apollo", "~/plugins/cartUpdater"],
   runtimeConfig: {
     public: {
       graphqlURL: process.env.PUBLIC_GRAPHQL_URL,
diff --git a/plugins/cartUpdater.js b/plugins/cartUpdater.js
new file mode 100644
index 00000000..53e00956
--- /dev/null
+++ b/plugins/cartUpdater.js
@@ -0,0 +1,16 @@
+import { useCart } from '@/store/useCart';
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.hook('app:created', () => {
+    const cart = useCart();
+    
+    // Refetch cart data on initial load
+    cart.refetch();
+
+    // Refetch cart data on route change
+    nuxtApp.$router.beforeEach((to, from, next) => {
+      cart.refetch();
+      next();
+    });
+  });
+});
\ No newline at end of file

From 1e67543c358e7b7c368740bcbbe0f69489709fab Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Thu, 12 Sep 2024 06:42:59 +0200
Subject: [PATCH 7/7] Toast

---
 components/Products/ProductsSingleProduct.vue | 10 ++-
 components/common/Toast.vue                   | 71 +++++++++++++++++++
 2 files changed, 75 insertions(+), 6 deletions(-)
 create mode 100644 components/common/Toast.vue

diff --git a/components/Products/ProductsSingleProduct.vue b/components/Products/ProductsSingleProduct.vue
index eaffbf5a..3acc5662 100644
--- a/components/Products/ProductsSingleProduct.vue
+++ b/components/Products/ProductsSingleProduct.vue
@@ -57,11 +57,11 @@
                 ADD TO CART
               </CommonButton>
             </div>
-            <p v-if="successMessage" class="mt-4 text-green-600">{{ successMessage }}</p>
           </div>
         </div>
       </div>
     </section>
+    <Toast ref="toast" />
   </template>
 </template>
 
@@ -82,6 +82,7 @@ import GET_SINGLE_PRODUCT_QUERY from "@/apollo/queries/GET_SINGLE_PRODUCT_QUERY.
 
 import ProductImage from "@/components/Products/ProductImage.vue";
 import ProductPrice from "@/components/Products/ProductPrice.vue";
+import Toast from "@/components/common/Toast.vue";
 
 import { stripHTML, filteredVariantName } from "@/utils/functions";
 
@@ -92,7 +93,7 @@ const cart = useCart();
 const isLoading = computed(() => cart.loading);
 
 const selectedVariation = ref(); // TODO Pass this value to addProductToCart()
-const successMessage = ref('');
+const toast = ref(null);
 
 const props = defineProps({
   id: { type: String, required: true },
@@ -122,10 +123,7 @@ watch(
 const addProductToCart = async (product) => {
   try {
     await cart.addToCart(product);
-    successMessage.value = 'Product added to cart successfully!';
-    setTimeout(() => {
-      successMessage.value = '';
-    }, 3000);
+    toast.value.show();
   } catch (error) {
     console.error('Error adding product to cart:', error);
     // You might want to show an error message to the user here
diff --git a/components/common/Toast.vue b/components/common/Toast.vue
new file mode 100644
index 00000000..a23133f5
--- /dev/null
+++ b/components/common/Toast.vue
@@ -0,0 +1,71 @@
+<template>
+  <Teleport to="body">
+    <transition name="toast">
+      <div v-if="isVisible" class="toast-container">
+        <div class="toast-content">
+          {{ message }}
+        </div>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+  message: {
+    type: String,
+    default: 'Product added to cart'
+  },
+  duration: {
+    type: Number,
+    default: 3000
+  }
+});
+
+const isVisible = ref(false);
+
+const show = () => {
+  isVisible.value = true;
+  setTimeout(() => {
+    isVisible.value = false;
+  }, props.duration);
+};
+
+defineExpose({ show });
+</script>
+
+<style scoped>
+.toast-container {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 9999;
+}
+
+.toast-content {
+  background-color: #4CAF50;
+  color: white;
+  padding: 16px;
+  border-radius: 4px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.toast-enter-active,
+.toast-leave-active {
+  transition: all 0.5s ease;
+}
+
+.toast-enter-from,
+.toast-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+.toast-enter-to,
+.toast-leave-from {
+  opacity: 1;
+  transform: translateX(0);
+}
+</style>
\ No newline at end of file