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

@@ -16,7 +16,7 @@ export const api = {
try {
const text = await res.text();
responseData = text ? JSON.parse(text) : null;
} catch {}
} catch { /* ignore JSON parse errors */ }
if (window.WNW_API?.isDev) {
console.error('[WooNooW] API error', { url, status: res.status, statusText: res.statusText, data: responseData });

View File

@@ -150,7 +150,6 @@ export function makeMoneyFormatter(opts: MoneyOptions) {
* Use inside components to avoid repeating memo logic.
*/
export function useMoneyFormatter(opts: MoneyOptions) {
// eslint-disable-next-line react-hooks/rules-of-hooks
// Note: file lives in /lib so we keep dependency-free; simple memo by JSON key is fine.
const key = JSON.stringify({
c: opts.currency,
@@ -162,7 +161,6 @@ export function useMoneyFormatter(opts: MoneyOptions) {
ds: opts.decimalSep,
pos: opts.position,
});
// eslint-disable-next-line react-hooks/rules-of-hooks
const ref = (globalThis as any).__wnw_money_cache || ((globalThis as any).__wnw_money_cache = new Map());
if (!ref.has(key)) ref.set(key, makeMoneyFormatter(opts));
return ref.get(key) as (v: MoneyInput) => string;