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

@@ -15,7 +15,7 @@ import { makeMoneyFormatter, getStoreCurrency } from '@/lib/currency';
import { useQuery } from '@tanstack/react-query';
import { api, ProductsApi, CustomersApi } from '@/lib/api';
import { cn } from '@/lib/utils';
import { __, sprintf } from '@/lib/i18n';
import { __ } from '@/lib/i18n';
import { toast } from 'sonner';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
@@ -107,7 +107,7 @@ export default function OrderForm({
shippings = [],
onSubmit,
className,
leftTop,
leftTop: _leftTop,
rightTop,
itemsEditable = true,
showCoupons = true,
@@ -169,7 +169,6 @@ export default function OrderForm({
const [submitting, setSubmitting] = React.useState(false);
const [items, setItems] = React.useState<LineItem[]>(initial?.items || []);
const [coupons, setCoupons] = React.useState('');
const [couponInput, setCouponInput] = React.useState('');
const [validatedCoupons, setValidatedCoupons] = React.useState<any[]>([]);
const [couponValidating, setCouponValidating] = React.useState(false);