Refactor and reuse CommonButton

Author: w3bdesign

components/Cart/CartContents.vue

@@ -48,6 +48,7 @@
     <CommonButton
       link-to="/checkout"
       v-if="showCheckoutButton && data.cart?.contents?.nodes?.length"
+      center-button
       >CHECKOUT</CommonButton
     >
   </div>

components/Products/ProductsAddToCartButton.vue

@@ -65,7 +65,12 @@
               </select>
             </p>
             <div class="pt-1 mt-2">
-              <ProductsAddToCartButton :product="data.product" />
+              <CommonButton
+                @common-button-click="addProductToCart(data.product)"
+                :is-loading="isLoading"
+              >
+                ADD TO CART</CommonButton
+              >
             </div>
           </div>
         </div>
@@ -76,9 +81,12 @@
 
 <script setup>
 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 { stripHTML, filteredVariantPrice } from "@/utils/functions";
 
+const isLoading = useState("isLoading", () => false);
+
 const config = useRuntimeConfig();
 
 const props = defineProps({
@@ -88,4 +96,29 @@ const props = defineProps({
 
 const variables = { id: props.id, slug: props.slug };
 const { data } = await useAsyncQuery(GET_SINGLE_PRODUCT_QUERY, variables);
+
+const addProductToCart = async (product) => {
+  const productId = product.databaseId ? product.databaseId : product;
+  const productQueryInput = {
+    productId,
+  };
+
+  isLoading.value = true;
+
+  const addToCartvariables = { input: productQueryInput };
+
+  const { mutate, onDone, onError } = useMutation(ADD_TO_CART_MUTATION, {
+    addToCartvariables,
+  });
+
+  mutate(addToCartvariables);
+
+  onDone(() => {
+    isLoading.value = false;
+  });
+
+  onError(() => {
+    isLoading.value = false;
+  });
+};
 </script>

components/Products/ProductsSingleProduct.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="linkTo" class="flex justify-center">
+  <div v-if="linkTo" :class="{ center: centerButton }">
     <NuxtLink :to="linkTo" class="button-link">
       <button
         :class="{ disabled: isLoading }"
@@ -26,7 +26,7 @@
       </button>
     </NuxtLink>
   </div>
-  <div v-else class="flex justify-center">
+  <div v-else :class="{ center: centerButton }">
     <button
       :class="{ disabled: isLoading }"
       @click="$emit('CommonButtonClick')"
@@ -56,7 +56,7 @@
 <script setup>
 /*
  * Usage:
- * <CommonButton @common-button-click="functionName" is-loading="true" link-to="/link">Common button</CommonButton>
+ * <CommonButton @common-button-click="functionName" is-loading="true" center-button="false" link-to="/link">Common button</CommonButton>
  */
 
 defineEmits(["CommonButtonClick"]);
@@ -72,6 +72,7 @@ defineProps({
     required: false,
     default: "",
   },
+  centerButton: { type: Boolean, required: false, default: false },
 });
 </script>
 
@@ -87,4 +88,8 @@ button {
 .button-link {
   border-bottom: none;
 }
+
+.center {
+  @apply flex justify-center;
+}
 </style>