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