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:
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user