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