Merge pull request #1288 from w3bdesign/dev

Dev

Author: w3bdesign

components/Cart/CartContents.vue

@@ -30,8 +30,6 @@ import UPDATE_CART_MUTATION from "@/apollo/mutations/UPDATE_CART_MUTATION.gql";
 
 import { useCart } from "@/store/useCart";
 
-const isRemoving = useState("isRemoving", () => false);
-
 const cart = useCart();
 
 defineProps({
@@ -55,8 +53,6 @@ const handleRemoveProduct = (product) => {
     quantity: 0,
   });
 
-  isRemoving.value = true;
-
   const variables = {
     input: {
       items: updatedItems,
@@ -72,11 +68,8 @@ const handleRemoveProduct = (product) => {
   mutate(variables);
 
   onDone(() => {
-    isRemoving.value = false;
     document.location = "/cart";
   });
-
-  onError(() => (isRemoving.value = false));
 };
 </script>
 

components/Cart/CartItem.vue

@@ -46,7 +46,7 @@
 
 import { formatPrice } from "@/utils/functions";
 
-const isRemoving = useState("isRemoving", () => false);
+const isRemoving = useRef(false);
 
 const props = defineProps({
   product: {

components/Products/ProductsSingleProduct.vue

@@ -52,7 +52,7 @@
             <div class="pt-1 mt-2">
               <CommonButton
                 @common-button-click="addProductToCart(data.product)"
-                :is-loading="isTestLoading"
+                :is-loading="isLoading"
               >
                 ADD TO CART</CommonButton
               >
@@ -89,8 +89,7 @@ import { useCart } from "@/store/useCart";
 
 const cart = useCart();
 
-// You can now access the loading state directly from the cart store
-const isTestLoading = computed(() => cart.loading);
+const isLoading = computed(() => cart.loading);
 
 const selectedVariation = ref(); // TODO Pass this value to addProductToCart()
 
@@ -123,7 +122,7 @@ const addProductToCart = async (product) => {
   cart.addToCart(product);
 
   watchEffect(() => {
-    if (isTestLoading.value === false) {
+    if (isLoading.value === false) {
       window.location.reload();
     }
   });

components/common/CommonButton.vue

@@ -2,8 +2,9 @@
   <div v-if="linkTo" :class="{ center: centerButton }">
     <NuxtLink :to="linkTo" class="button-link">
       <button
+        :disabled="isLoading"
         :class="{ disabled: isLoading }"
-        @click="$emit('CommonButtonClick')"
+        @click.stop="$emit('CommonButtonClick')"
         type="submit"
       >
         <slot />
@@ -28,8 +29,9 @@
   </div>
   <div v-else :class="{ center: centerButton }">
     <button
+      :disabled="isLoading"
       :class="{ disabled: isLoading }"
-      @click="$emit('CommonButtonClick')"
+      @click.stop="$emit('CommonButtonClick')"
       type="submit"
     >
       <slot />
@@ -80,6 +82,10 @@ defineProps({
 </script>
 
 <style scoped>
+button.disabled {
+  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded opacity-50 cursor-not-allowed;
+}
+
 .disabled {
   @apply bg-blue-500 text-white font-bold py-2 px-4 rounded opacity-50 cursor-not-allowed;
 }

store/useCart.js

@@ -23,9 +23,6 @@ export const useCart = defineStore("cartState", {
     async addToCart(product) {
       this.loading = true;
       try {
-        console.log("Adding to cart:", product);
-        console.log("Adding product.databaseId to cart:", product.databaseId);
-
         const { mutate } = useMutation(ADD_TO_CART_MUTATION);
         const response = await mutate({
           input: {
@@ -35,7 +32,6 @@ export const useCart = defineStore("cartState", {
         });
 
         if (response.data && response.data.addToCart) {
-          console.log("Response from Add To Cart mutation:", response);
           this.loading = false;
           // Assuming the response returns the updated cart item, we need to handle it properly
           const newCartItem = response.data.addToCart.cartItem;
@@ -74,18 +70,7 @@ export const useCart = defineStore("cartState", {
     },
   },
   getters: {
-    /*    
-    
     getCartQuantity() {
-      return this.cart.reduce((total, product) => total + product.quantity, 0);
-    },
-    */
-
-    getCartQuantity() {
-
-      //console.log("Cart is:", this.cart);
-      
-
       if (!this.cart) {
         console.error("Cart is undefined");
         return 0;