Merge pull request #1471 from w3bdesign/dev

Fix checkout

Author: w3bdesign

components/Checkout/CheckoutForm.vue

@@ -36,6 +36,8 @@
 <script setup>
 import { Form, Field, ErrorMessage } from "vee-validate";
 import { uid } from "uid";
+import { onMounted } from "vue";
+import { useCart } from "@/store/useCart";
 
 import { BILLING_FIELDS, BILLING_SCHEMA } from "./constants/BILLING_FIELDS";
 
@@ -51,11 +53,25 @@ const upperCaseFirstChar = (input) =>
   input.charAt(0).toUpperCase() + input.slice(1);
 
 const paymentMethod = "cod";
+const cart = useCart();
+
+// Clear WooCommerce session
+const clearWooCommerceSession = () => {
+  if (process.client) {
+    localStorage.removeItem("woo-session");
+    localStorage.removeItem("woocommerce-cart");
+  }
+};
+
+// Ensure cart is loaded on mount
+onMounted(async () => {
+  await cart.refetch();
+});
 
 /**
  * Handles the submission of a checkout form with the provided user information.
  */
-const handleSubmit = ({
+const handleSubmit = async ({
   firstName,
   lastName,
   address1,
@@ -92,28 +108,32 @@ const handleSubmit = ({
     transactionId: "hjkhjkhsdsdiui",
   };
 
-  const { mutate, onDone, onError } = useMutation(CHECKOUT_MUTATION);
+  try {
+    const { mutate } = useMutation(CHECKOUT_MUTATION);
+    
+    const result = await mutate({
+      input: checkoutData,
+    });
 
-  mutate({ input: checkoutData });
-
-  onDone(async (result) => {
-    const { data } = result;
-    if (data?.checkout?.result === "success") {
+    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();
     }
-  });
-
-  onError((error) => {
+  } catch (error) {
     console.error("Checkout error:", error);
+    
     if (error.message.includes("session")) {
-      alert(
-        "Your session has expired. Please refresh the page and try again.",
-      );
+      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>