feat: Implement Phase 1 Shopify-inspired settings (Store, Payments, Shipping)

 Features:
- Store Details page with live currency preview
- Payments page with visual provider cards and test mode
- Shipping & Delivery page with zone cards and local pickup
- Shared components: SettingsLayout, SettingsCard, SettingsSection, ToggleField

🎨 UI/UX:
- Card-based layouts (not boring forms)
- Generous whitespace and visual hierarchy
- Toast notifications using sonner (reused from Orders)
- Sticky save button at top
- Mobile-responsive design

🔧 Technical:
- Installed ESLint with TypeScript support
- Fixed all lint errors (0 errors)
- Phase 1 files have zero warnings
- Used existing toast from sonner (not reinvented)
- Updated routes in App.tsx

📝 Files Created:
- Store.tsx (currency preview, address, timezone)
- Payments.tsx (provider cards, manual methods)
- Shipping.tsx (zone cards, rates, local pickup)
- SettingsLayout.tsx, SettingsCard.tsx, SettingsSection.tsx, ToggleField.tsx

Phase 1 complete: 18-24 hours estimated work
This commit is contained in:
dwindown
2025-11-05 18:54:41 +07:00
parent f8247faf22
commit e49a0d1e3d
19 changed files with 4264 additions and 68 deletions

View File

@@ -70,7 +70,7 @@ function useFullscreen() {
document.head.appendChild(style);
}
document.body.classList.toggle('wnw-fullscreen', on);
try { localStorage.setItem('wnwFullscreen', on ? '1' : '0'); } catch {}
try { localStorage.setItem('wnwFullscreen', on ? '1' : '0'); } catch { /* ignore localStorage errors */ }
return () => { /* do not remove style to avoid flicker between reloads */ };
}, [on]);
@@ -187,14 +187,10 @@ function useIsDesktop(minWidth = 1024) { // lg breakpoint
}
import SettingsIndex from '@/routes/Settings';
import SettingsGeneral from '@/routes/Settings/General';
import SettingsStore from '@/routes/Settings/Store';
import SettingsPayments from '@/routes/Settings/Payments';
import SettingsShipping from '@/routes/Settings/Shipping';
function SettingsRedirect() {
return <SettingsIndex />;
}
// Addon Route Component - Dynamically loads addon components
function AddonRoute({ config }: { config: any }) {
const [Component, setComponent] = React.useState<any>(null);
@@ -361,13 +357,14 @@ function AppRoutes() {
{/* Settings */}
<Route path="/settings" element={<SettingsIndex />} />
<Route path="/settings/general" element={<SettingsGeneral />} />
<Route path="/settings/store" element={<SettingsStore />} />
<Route path="/settings/payments" element={<SettingsPayments />} />
<Route path="/settings/shipping" element={<SettingsShipping />} />
<Route path="/settings/products" element={<SettingsIndex />} />
<Route path="/settings/tax" element={<SettingsIndex />} />
<Route path="/settings/accounts" element={<SettingsIndex />} />
<Route path="/settings/emails" element={<SettingsIndex />} />
<Route path="/settings/taxes" element={<SettingsIndex />} />
<Route path="/settings/checkout" element={<SettingsIndex />} />
<Route path="/settings/customers" element={<SettingsIndex />} />
<Route path="/settings/notifications" element={<SettingsIndex />} />
<Route path="/settings/brand" element={<SettingsIndex />} />
{/* Dynamic Addon Routes */}
{addonRoutes.map((route: any) => (
@@ -394,7 +391,6 @@ function Shell() {
// Check if current route is dashboard
const isDashboardRoute = location.pathname === '/' || location.pathname.startsWith('/dashboard');
const SubmenuComponent = isDashboardRoute ? DashboardSubmenuBar : SubmenuBar;
return (
<>
@@ -464,13 +460,16 @@ function AuthWrapper() {
// In standalone mode, trust the initial PHP auth check
// PHP uses wp_signon which sets proper WordPress cookies
if (window.WNW_CONFIG?.standaloneMode) {
setIsAuthenticated(window.WNW_CONFIG.isAuthenticated ?? false);
setIsChecking(false);
} else {
// In wp-admin mode, always authenticated
setIsChecking(false);
}
const checkAuth = () => {
if (window.WNW_CONFIG?.standaloneMode) {
setIsAuthenticated(window.WNW_CONFIG.isAuthenticated ?? false);
setIsChecking(false);
} else {
// In wp-admin mode, always authenticated
setIsChecking(false);
}
};
checkAuth();
}, []);
if (isChecking) {