Files
WooNooW/customer-spa
Dwindi Ramadhana 78d7bc1161 fix: auto-login after checkout, ThankYou guest buttons, forgot password page
1. Auto-login after checkout:
   - Added wp_set_auth_cookie() and wp_set_current_user() in CheckoutController
   - Auto-registered users are now logged in when thank-you page loads

2. ThankYou page guest buttons:
   - Added 'Login / Create Account' button for guests
   - Shows for both receipt and basic templates
   - No more dead-end after placing order as guest

3. Forgot password flow:
   - Created ForgotPassword page component (/forgot-password route)
   - Added forgot_password API endpoint in AuthController
   - Uses WordPress retrieve_password() for reset email
   - Replaced wp-login.php link in Login page
2026-01-01 17:36:40 +07:00
..

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