Replace onMounted with initialState for orderInput & customer

Author: alexookah

woonuxt_base/app/composables/useAuth.ts

@@ -5,19 +5,27 @@ export const useAuth = () => {
   const { refreshCart } = useCart();
   const { logGQLError } = useHelpers();
 
-  const customer = useState<Customer>('customer', () => ({ billing: {}, shipping: {} }));
+  const customer = useState<Customer>('customer', () => {
+
+    if (!import.meta.env.SSR) {
+      const savedCustomer = localStorage.getItem('WooNuxtCustomer');
+      if (savedCustomer) {
+        try {
+          return JSON.parse(savedCustomer) as Customer;
+        } catch (e) {
+          localStorage.removeItem('WooNuxtCustomer');
+          console.error('Failed to parse saved customer:', e);
+        }
+      }
+    }
+    return { billing: {}, shipping: {} };
+  });
+
   const viewer = useState<Viewer | null>('viewer', () => null);
   const isPending = useState<boolean>('isPending', () => false);
   const orders = useState<Order[] | null>('orders', () => null);
   const downloads = useState<DownloadableItem[] | null>('downloads', () => null);
 
-  onMounted(() => {
-    const savedCustomer = localStorage.getItem('WooNuxtCustomer');
-    if (savedCustomer) {
-      customer.value = JSON.parse(savedCustomer);
-    }
-  });
-
   // Log in the user
   const loginUser = async (credentials: CreateAccountInput): Promise<{ success: boolean; error: any }> => {
     isPending.value = true;

woonuxt_base/app/composables/useCheckout.ts

@@ -8,6 +8,20 @@ export function useCheckout() {
   const { storeSettings } = useAppConfig();
   const errorMessage = useState<string | null>('errorMessage', () => null);
   const orderInput = useState<any>('orderInput', () => {
+
+    if (!import.meta.env.SSR) {
+      try {
+        // Try to load saved order input from localStorage
+        const savedOrderInput = localStorage.getItem('WooNuxtOrderInput');
+        if (savedOrderInput) {
+          return JSON.parse(savedOrderInput);
+        }
+      } catch (error) {
+        localStorage.removeItem('WooNuxtOrderInput');
+        console.error('Failed to load order input from localStorage:', error);
+      }
+    }
+
     return {
       customerNote: '',
       paymentMethod: '',
@@ -16,13 +30,6 @@ export function useCheckout() {
     };
   });
 
-  onMounted(() => {
-    const savedOrderInput = localStorage.getItem('WooNuxtOrderInput');
-    if (savedOrderInput) {
-      orderInput.value = JSON.parse(savedOrderInput);
-    }
-  });
-
   const isProcessingOrder = useState<boolean>('isProcessingOrder', () => false);
 
   // if Country or State are changed, calculate the shipping rates again
@@ -175,9 +182,9 @@ export function useCheckout() {
     if (error) {
       throw new CheckoutInlineError(error.message);
     }
-    
+
     const { source } = await stripe.createSource(cardElement as CreateSourceData);
-    
+
     if (source) orderInput.value.metaData.push({ key: '_stripe_source_id', value: source.id });
     if (setupIntent) orderInput.value.metaData.push({ key: '_stripe_intent_id', value: setupIntent.id });
 
@@ -251,7 +258,7 @@ export function useCheckout() {
 
       useRouter().push({ query: {} });
       manageCheckoutLocalStorage(false);
-      
+
       if (error instanceof CheckoutInlineError) {
         errorMessage.value = error.message;
       } else {