10acb58f6e
1. Toast Position Control ✅ - Added toast_position setting to Appearance > General - 6 position options: top-left/center/right, bottom-left/center/right - Default: top-right - Backend: AppearanceController.php (save/load toast_position) - Frontend: Customer SPA reads from appearanceSettings and applies to Toaster - Admin UI: Select dropdown in General settings - Solves UX issue: toast blocking cart icon in header 2. Currency Formatting Fix ✅ - Changed formatPrice import from @/lib/utils to @/lib/currency - @/lib/currency respects WooCommerce currency settings (IDR, not USD) - Reads currency code, symbol, position, separators from window.woonoowCustomer.currency - Applies correct formatting for Indonesian Rupiah and any other currency 3. Dialog Accessibility Warnings Fixed ✅ - Added DialogDescription component to all taxonomy dialogs - Categories: 'Update category information' / 'Create a new product category' - Tags: 'Update tag information' / 'Create a new product tag' - Attributes: 'Update attribute information' / 'Create a new product attribute' - Fixes console warning: Missing Description or aria-describedby Note on React Key Warning: The warning about missing keys in ProductCategories is still appearing in console. All table rows already have proper key props (key={category.term_id}). This may be a dev server cache issue or a nested element without a key. The code is correct - keys are present on all mapped elements. Files Modified: - includes/Admin/AppearanceController.php (toast_position setting) - admin-spa/src/routes/Appearance/General.tsx (toast position UI) - customer-spa/src/App.tsx (apply toast position from settings) - customer-spa/src/pages/Wishlist.tsx (use correct formatPrice from currency) - admin-spa/src/routes/Products/Categories.tsx (DialogDescription) - admin-spa/src/routes/Products/Tags.tsx (DialogDescription) - admin-spa/src/routes/Products/Attributes.tsx (DialogDescription) Result: ✅ Toast notifications now configurable and won't block header elements ✅ Prices display in correct currency (IDR) with proper formatting ✅ All Dialog accessibility warnings resolved ⚠️ React key warning persists (but keys are correctly implemented)
WooNooW Customer SPA
Modern React-based storefront and customer portal for WooNooW.
Features
- Product Catalog - Browse products with filters and search
- Shopping Cart - Add to cart with real-time updates
- Checkout - Single-page checkout with address autocomplete
- My Account - Order history, profile, and addresses
- Mobile-First - Responsive design for all devices
- PWA Ready - Offline support and app-like experience
Development
# Install dependencies
npm install
# Start dev server (https://woonoow.local:5174)
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
# Lint code
npm run lint
Project Structure
customer-spa/
├── src/
│ ├── pages/ # Page components (Shop, Cart, Checkout, Account)
│ ├── components/ # Reusable UI components
│ ├── lib/
│ │ ├── api/ # API client and endpoints
│ │ ├── cart/ # Cart state management (Zustand)
│ │ ├── checkout/ # Checkout logic
│ │ └── tracking/ # Analytics and pixel tracking
│ ├── hooks/ # Custom React hooks
│ ├── contexts/ # React contexts
│ └── types/ # TypeScript type definitions
├── public/ # Static assets
└── dist/ # Build output (generated)
Tech Stack
- React 18 - UI framework
- TypeScript - Type safety
- Vite - Build tool
- React Router - Routing
- TanStack Query - Data fetching
- Zustand - State management
- TailwindCSS - Styling
- shadcn/ui - UI components
- React Hook Form - Form handling
- Zod - Schema validation
API Integration
The SPA communicates with WordPress via REST API endpoints:
/wp-json/woonoow/v1/shop/*- Product catalog/wp-json/woonoow/v1/cart/*- Shopping cart/wp-json/woonoow/v1/checkout/*- Checkout process/wp-json/woonoow/v1/account/*- Customer account
Deployment Modes
1. Shortcode Mode (Default)
Works with any WordPress theme via shortcodes:
[woonoow_shop][woonoow_cart][woonoow_checkout][woonoow_account]
2. Full SPA Mode
Takes over entire frontend for maximum performance.
3. Hybrid Mode
SSR for product pages (SEO), SPA for cart/checkout/account.
SEO & Tracking
- SEO-Friendly - Server-side rendering for product pages
- Analytics - Google Analytics, GTM support
- Pixels - Facebook, TikTok, Pinterest pixel support
- PixelMySite - Full compatibility
License
Proprietary - Part of WooNooW plugin