From e7dc217a975888daa7ae151a05000cb7e58e3636 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Sat, 28 Jun 2025 23:11:33 +0200
Subject: [PATCH 1/2] Update CheckoutForm.vue

---
 components/Checkout/CheckoutForm.vue | 88 ++++++++++++++++++++--------
 1 file changed, 65 insertions(+), 23 deletions(-)

diff --git a/components/Checkout/CheckoutForm.vue b/components/Checkout/CheckoutForm.vue
index a58c96b4..8f05a965 100644
--- a/components/Checkout/CheckoutForm.vue
+++ b/components/Checkout/CheckoutForm.vue
@@ -36,6 +36,8 @@
 <script setup>
 import { Form, Field, ErrorMessage } from "vee-validate";
 import { uid } from "uid";
+import { ref, onMounted } from "vue";
+import { useCart } from "@/store/useCart";
 
 import { BILLING_FIELDS, BILLING_SCHEMA } from "./constants/BILLING_FIELDS";
 
@@ -51,6 +53,68 @@ const upperCaseFirstChar = (input) =>
   input.charAt(0).toUpperCase() + input.slice(1);
 
 const paymentMethod = "cod";
+const cart = useCart();
+const orderData = ref(null);
+const isLoading = ref(false);
+
+// Clear WooCommerce session
+const clearWooCommerceSession = () => {
+  if (process.client) {
+    localStorage.removeItem("woo-session");
+    localStorage.removeItem("woocommerce-cart");
+  }
+};
+
+// 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.
@@ -92,28 +156,6 @@ const handleSubmit = ({
     transactionId: "hjkhjkhsdsdiui",
   };
 
-  const { mutate, onDone, onError } = useMutation(CHECKOUT_MUTATION);
-
-  mutate({ input: checkoutData });
-
-  onDone(async (result) => {
-    const { data } = result;
-    if (data?.checkout?.result === "success") {
-      await navigateTo("/success");
-    } else {
-      alert("Error, order not placed. Please try again.");
-    }
-  });
-
-  onError((error) => {
-    console.error("Checkout error:", error);
-    if (error.message.includes("session")) {
-      alert(
-        "Your session has expired. Please refresh the page and try again.",
-      );
-    } else {
-      alert("An unexpected error occurred. Please try again.");
-    }
-  });
+  orderData.value = checkoutData;
 };
 </script>

From 6c9ca8db59715189480bc904d2959a20c6a116f6 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Sat, 28 Jun 2025 23:13:38 +0200
Subject: [PATCH 2/2] Update CheckoutForm.vue

---
 components/Checkout/CheckoutForm.vue | 80 ++++++++++------------------
 1 file changed, 29 insertions(+), 51 deletions(-)

diff --git a/components/Checkout/CheckoutForm.vue b/components/Checkout/CheckoutForm.vue
index 8f05a965..9a0ca9a4 100644
--- a/components/Checkout/CheckoutForm.vue
+++ b/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>