Update CheckoutForm.vue

Author: w3bdesign

components/Checkout/CheckoutForm.vue

@@ -36,7 +36,7 @@
 <script setup>
 import { Form, Field, ErrorMessage } from "vee-validate";
 import { uid } from "uid";
-import { ref, onMounted } from "vue";
+import { onMounted } from "vue";
 import { useCart } from "@/store/useCart";
 
 import { BILLING_FIELDS, BILLING_SCHEMA } from "./constants/BILLING_FIELDS";
@@ -54,8 +54,6 @@ const upperCaseFirstChar = (input) =>
 
 const paymentMethod = "cod";
 const cart = useCart();
-const orderData = ref(null);
-const isLoading = ref(false);
 
 // Clear WooCommerce session
 const clearWooCommerceSession = () => {
@@ -65,61 +63,15 @@ const clearWooCommerceSession = () => {
   }
 };
 
-// Set up mutation with variables
-const { mutate, onDone, onError } = useMutation(CHECKOUT_MUTATION, {
-  variables: computed(() => ({ input: orderData.value })),
-});
-
-onDone(async (result) => {
-  const { data } = result;
-  clearWooCommerceSession();
-  isLoading.value = false;
-  
-  if (data?.checkout?.result === "success") {
-    await cart.refetch();
-    await navigateTo("/success");
-  } else {
-    alert("Error, order not placed. Please try again.");
-    await cart.refetch();
-  }
-});
-
-onError(async (error) => {
-  console.error("Checkout error:", error);
-  isLoading.value = false;
-  
-  if (error.message.includes("session")) {
-    clearWooCommerceSession();
-    alert("Your session has expired. Please refresh the page and try again.");
-  } else {
-    alert("An unexpected error occurred. Please try again.");
-  }
-  
-  await cart.refetch();
-});
-
 // Ensure cart is loaded on mount
 onMounted(async () => {
   await cart.refetch();
 });
 
-// Watch for orderData changes and trigger mutation
-watch(orderData, (newOrderData) => {
-  if (newOrderData) {
-    isLoading.value = true;
-    mutate();
-    
-    // Refetch after a delay
-    setTimeout(() => {
-      cart.refetch();
-    }, 2000);
-  }
-}, { deep: true });
-
 /**
  * Handles the submission of a checkout form with the provided user information.
  */
-const handleSubmit = ({
+const handleSubmit = async ({
   firstName,
   lastName,
   address1,
@@ -156,6 +108,32 @@ const handleSubmit = ({
     transactionId: "hjkhjkhsdsdiui",
   };
 
-  orderData.value = checkoutData;
+  try {
+    const { mutate } = useMutation(CHECKOUT_MUTATION);
+    
+    const result = await mutate({
+      input: checkoutData,
+    });
+
+    if (result?.data?.checkout?.result === "success") {
+      clearWooCommerceSession();
+      await cart.refetch();
+      await navigateTo("/success");
+    } else {
+      alert("Error, order not placed. Please try again.");
+      await cart.refetch();
+    }
+  } catch (error) {
+    console.error("Checkout error:", error);
+    
+    if (error.message.includes("session")) {
+      clearWooCommerceSession();
+      alert("Your session has expired. Please refresh the page and try again.");
+    } else {
+      alert("An unexpected error occurred. Please try again.");
+    }
+    
+    await cart.refetch();
+  }
 };
 </script>