From 2c4050451c6f6a7c1ef6a311cf96aa10ad09b45c Mon Sep 17 00:00:00 2001
From: Dwindi Ramadhana <dwindown@DwMacMiniM4.local>
Date: Tue, 30 Dec 2025 20:34:40 +0700
Subject: [PATCH] feat: Customer SPA reads initial route from data attribute
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changes:
- App.tsx reads data-initial-route attribute from #woonoow-customer-app
- Root route (/) redirects to initial route based on SPA mode
- Fallback route (*) also redirects to initial route
- Full SPA mode: initial route = /shop
- Checkout Only mode: initial route = /cart

Flow:
1. User visits /store page (SPA entry page)
2. PHP template sets data-initial-route based on spa_mode setting
3. React reads attribute and navigates to correct initial route
4. HashRouter handles rest: /#/product/123, /#/checkout, etc.

Example:
- Full SPA: /store loads → redirects to /#/shop
- Checkout Only: /store loads → redirects to /#/cart
- User can navigate: /#/product/abc, /#/checkout, etc.

Next: Add direct-to-cart functionality with product parameter
---
 customer-spa/src/App.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/customer-spa/src/App.tsx b/customer-spa/src/App.tsx
index f9bb995..097d35f 100644
--- a/customer-spa/src/App.tsx
+++ b/customer-spa/src/App.tsx
@@ -56,14 +56,25 @@ function App() {
   const appearanceSettings = getAppearanceSettings();
   const toastPosition = (appearanceSettings?.general?.toast_position || 'top-right') as any;
   
+  // Get initial route from data attribute (set by PHP based on SPA mode)
+  const getInitialRoute = () => {
+    const appEl = document.getElementById('woonoow-customer-app');
+    const initialRoute = appEl?.getAttribute('data-initial-route');
+    return initialRoute || '/shop'; // Default to shop if not specified
+  };
+  
+  const initialRoute = getInitialRoute();
+  
   return (
     <QueryClientProvider client={queryClient}>
       <ThemeProvider config={themeConfig}>
         <HashRouter>
           <BaseLayout>
             <Routes>
+              {/* Root route redirects to initial route based on SPA mode */}
+              <Route path="/" element={<Navigate to={initialRoute} replace />} />
+              
               {/* Shop Routes */}
-              <Route path="/" element={<Shop />} />
               <Route path="/shop" element={<Shop />} />
               <Route path="/product/:slug" element={<Product />} />
               
@@ -78,8 +89,8 @@ function App() {
               {/* My Account */}
               <Route path="/my-account/*" element={<Account />} />
               
-              {/* Fallback */}
-              <Route path="*" element={<Navigate to="/shop" replace />} />
+              {/* Fallback to initial route */}
+              <Route path="*" element={<Navigate to={initialRoute} replace />} />
             </Routes>
           </BaseLayout>
         </HashRouter>