Fix button roundtrip in editor, alignment persistence, and test email rendering

customer-spa/src/hooks/useAppearanceSettings.ts

@@ -37,25 +37,35 @@ interface AppearanceSettings {
     thankyou: any;
     account: any;
   };
+  menus: {
+    primary: Array<{
+      id: string;
+      label: string;
+      type: 'page' | 'custom';
+      value: string;
+      target: '_self' | '_blank';
+    }>;
+    mobile: Array<any>;
+  };
 }
 
 export function useAppearanceSettings() {
   const apiRoot = (window as any).woonoowCustomer?.apiRoot || '/wp-json/woonoow/v1';
-  
+
   // Get preloaded settings from window object
   const preloadedSettings = (window as any).woonoowCustomer?.appearanceSettings;
-  
+
   return useQuery<AppearanceSettings>({
     queryKey: ['appearance-settings'],
     queryFn: async () => {
       const response = await fetch(`${apiRoot}/appearance/settings`, {
         credentials: 'include',
       });
-      
+
       if (!response.ok) {
         throw new Error('Failed to fetch appearance settings');
       }
-      
+
       const data = await response.json();
       return data.data;
     },
@@ -68,7 +78,7 @@ export function useAppearanceSettings() {
 
 export function useShopSettings() {
   const { data, isLoading } = useAppearanceSettings();
-  
+
   const defaultSettings = {
     layout: {
       grid_columns: '3' as string,
@@ -93,7 +103,7 @@ export function useShopSettings() {
       show_icon: true,
     },
   };
-  
+
   return {
     layout: { ...defaultSettings.layout, ...(data?.pages?.shop?.layout || {}) },
     elements: { ...defaultSettings.elements, ...(data?.pages?.shop?.elements || {}) },
@@ -105,7 +115,7 @@ export function useShopSettings() {
 
 export function useProductSettings() {
   const { data, isLoading } = useAppearanceSettings();
-  
+
   const defaultSettings = {
     layout: {
       image_position: 'left' as string,
@@ -127,7 +137,7 @@ export function useProductSettings() {
       hide_if_empty: true,
     },
   };
-  
+
   return {
     layout: { ...defaultSettings.layout, ...(data?.pages?.product?.layout || {}) },
     elements: { ...defaultSettings.elements, ...(data?.pages?.product?.elements || {}) },
@@ -139,7 +149,7 @@ export function useProductSettings() {
 
 export function useCartSettings() {
   const { data, isLoading } = useAppearanceSettings();
-  
+
   const defaultSettings = {
     layout: {
       style: 'fullwidth' as string,
@@ -152,7 +162,7 @@ export function useCartSettings() {
       shipping_calculator: false,
     },
   };
-  
+
   return {
     layout: { ...defaultSettings.layout, ...(data?.pages?.cart?.layout || {}) },
     elements: { ...defaultSettings.elements, ...(data?.pages?.cart?.elements || {}) },
@@ -162,7 +172,7 @@ export function useCartSettings() {
 
 export function useCheckoutSettings() {
   const { data, isLoading } = useAppearanceSettings();
-  
+
   const defaultSettings = {
     layout: {
       style: 'two-column' as string,
@@ -178,7 +188,7 @@ export function useCheckoutSettings() {
       payment_icons: true,
     },
   };
-  
+
   return {
     layout: { ...defaultSettings.layout, ...(data?.pages?.checkout?.layout || {}) },
     elements: { ...defaultSettings.elements, ...(data?.pages?.checkout?.elements || {}) },
@@ -188,7 +198,7 @@ export function useCheckoutSettings() {
 
 export function useThankYouSettings() {
   const { data, isLoading } = useAppearanceSettings();
-  
+
   const defaultSettings = {
     template: 'basic',
     header_visibility: 'show',
@@ -201,7 +211,7 @@ export function useThankYouSettings() {
       related_products: false,
     },
   };
-  
+
   return {
     template: data?.pages?.thankyou?.template || defaultSettings.template,
     headerVisibility: data?.pages?.thankyou?.header_visibility || defaultSettings.header_visibility,
@@ -215,7 +225,7 @@ export function useThankYouSettings() {
 
 export function useAccountSettings() {
   const { data, isLoading } = useAppearanceSettings();
-  
+
   const defaultSettings = {
     layout: {
       navigation_style: 'sidebar' as string,
@@ -228,7 +238,7 @@ export function useAccountSettings() {
       account_details: true,
     },
   };
-  
+
   return {
     layout: { ...defaultSettings.layout, ...(data?.pages?.account?.layout || {}) },
     elements: { ...defaultSettings.elements, ...(data?.pages?.account?.elements || {}) },
@@ -238,7 +248,7 @@ export function useAccountSettings() {
 
 export function useHeaderSettings() {
   const { data, isLoading } = useAppearanceSettings();
-  
+
   return {
     style: data?.header?.style ?? 'classic',
     sticky: data?.header?.sticky ?? true,
@@ -261,7 +271,7 @@ export function useHeaderSettings() {
 
 export function useFooterSettings() {
   const { data, isLoading } = useAppearanceSettings();
-  
+
   return {
     columns: data?.footer?.columns ?? '4',
     style: data?.footer?.style ?? 'detailed',
@@ -293,4 +303,15 @@ export function useFooterSettings() {
     },
     isLoading,
   };
+};
+
+
+export function useMenuSettings() {
+  const { data, isLoading } = useAppearanceSettings();
+
+  return {
+    primary: data?.menus?.primary ?? [],
+    mobile: data?.menus?.mobile ?? [],
+    isLoading,
+  };
 }