Dwindi Ramadhana
90169b508d
feat: product page layout toggle (flat/card), fix email shortcode rendering
...
- Add layout_style setting (flat default) to product appearance
- AppearanceController: sanitize & persist layout_style, add to default settings
- Admin SPA: Layout Style select in Appearance > Product
- Customer SPA: useEffect targets <main> bg-white in flat mode (full-width),
card mode uses per-section white floating cards on gray background
- Accordion sections styled per mode: flat=border-t dividers, card=white cards
- Fix email shortcode gaps (EmailRenderer, EmailManager)
- Add missing variables: return_url, contact_url, account_url (alias),
payment_error_reason, order_items_list (alias for order_items_table)
- Fix customer_note extra_data key mismatch (note → customer_note)
- Pass low_stock_threshold via extra_data in low_stock email send
2026-03-04 01:14:56 +07:00
dwindown
342104eeab
feat: Initialize customer-spa project structure
...
Sprint 1 - Foundation Setup:
Created customer-spa/ folder structure:
```
customer-spa/
├── src/
│ ├── pages/ # Customer pages (Shop, Cart, Checkout, Account)
│ ├── components/ # Reusable components
│ ├── lib/
│ │ ├── api/ # API client
│ │ ├── cart/ # Cart state management
│ │ ├── checkout/ # Checkout logic
│ │ └── tracking/ # Analytics & pixel tracking
│ ├── hooks/ # Custom React hooks
│ ├── contexts/ # React contexts
│ └── types/ # TypeScript types
├── public/ # Static assets
├── package.json # Dependencies
├── vite.config.ts # Vite configuration (port 5174)
├── tsconfig.json # TypeScript configuration
├── tailwind.config.js # TailwindCSS configuration
├── postcss.config.js # PostCSS configuration
└── .eslintrc.cjs # ESLint configuration
```
Configuration:
✅ Vite dev server on port 5174 (admin-spa uses 5173)
✅ HTTPS with shared SSL cert
✅ TypeScript + React 18
✅ TailwindCSS + shadcn/ui
✅ React Query for data fetching
✅ Zustand for state management
✅ React Hook Form + Zod for forms
✅ React Router for routing
Dependencies Added:
- Core: React 18, React DOM, React Router
- UI: Radix UI components, Lucide icons
- State: Zustand, TanStack Query
- Forms: React Hook Form, Zod, @hookform/resolvers
- Styling: TailwindCSS, class-variance-authority
- Utils: clsx, tailwind-merge, sonner (toast)
Next Steps:
- Create main.tsx entry point
- Create App.tsx with routing
- Create base layout components
- Setup API client
- Implement cart state management
Ready for Sprint 1 implementation!
2025-11-21 13:05:04 +07:00
