Commit Graph

19 Commits

Author SHA1 Message Date
Dwindi Ramadhana
a0b5f8496d feat: Implement OAuth license activation flow
- Add LicenseConnect.tsx focused OAuth confirmation page in customer SPA
- Add /licenses/oauth/validate and /licenses/oauth/confirm API endpoints
- Update App.tsx to render license-connect outside BaseLayout (no header/footer)
- Add license_activation_method field to product settings in Admin SPA
- Create LICENSING_MODULE.md with comprehensive OAuth flow documentation
- Update API_ROUTES.md with license module endpoints
2026-01-31 22:22:22 +07:00
Dwindi Ramadhana
d80f34c8b9 finalizing subscription moduile, ready to test 2026-01-29 11:54:42 +07:00
Dwindi Ramadhana
6d2136d3b5 Fix button roundtrip in editor, alignment persistence, and test email rendering 2026-01-17 13:10:50 +07:00
Dwindi Ramadhana
749cfb3f92 feat: Page Editor Phase 1 - React DynamicPageRenderer
- Add DynamicPageRenderer component for structural pages and CPT content
- Add 6 section components:
  - HeroSection with multiple layout variants
  - ContentSection for rich text/HTML content
  - ImageTextSection with image-left/right layouts
  - FeatureGridSection with grid-2/3/4 layouts
  - CTABannerSection with color schemes
  - ContactFormSection with webhook POST and redirect
- Add dynamic routes to App.tsx for /:slug and /:pathBase/:slug
- Build customer-spa successfully
2026-01-11 22:35:15 +07:00
Dwindi Ramadhana
1ff9a36af3 fix: React Router basename - use ?? instead of || for empty string support
When SPA is frontpage, basePath is empty string. JavaScript || treats '' as falsy
and falls back to /store. Changed to ?? (nullish coalescing) so empty string works.
2026-01-10 01:00:46 +07:00
Dwindi Ramadhana
3357fbfcf1 feat: Dynamic SPA slug, field label storage, and SPA frontpage support (WIP) 2026-01-10 00:50:32 +07:00
Dwindi Ramadhana
75a82cf16c feat: add dynamic meta tags for social sharing (Phase 4-5)
Phase 4: Dynamic Meta Tags
- Added react-helmet-async dependency
- Created SEOHead component with Open Graph and Twitter Card support
- Added HelmetProvider wrapper to App.tsx
- Integrated SEOHead in Product page (title, description, image, product info)
- Integrated SEOHead in Shop page (basic meta tags)

Phase 5: Auto-Flush Permalinks
- Enhanced settings change handler to only flush when spa_mode,
  spa_page, or use_browser_router changes
- Plugin already flushes on activation (Installer.php)

This enables proper link previews when sharing product URLs
on Facebook, Twitter, Slack, etc.
2026-01-04 10:40:10 +07:00
Dwindi Ramadhana
45fcbf9d29 feat: migrate from HashRouter to BrowserRouter for SEO
Phase 1: WordPress Rewrite Rules
- Add rewrite rule for /store/* to serve SPA page
- Add use_browser_router setting toggle (default: true)
- Flush rewrite rules on settings change

Phase 2: React Router Migration
- Add BrowserRouter with basename from WordPress config
- Pass basePath and useBrowserRouter to frontend
- Conditional router based on setting

Phase 3: Hash Route Migration
- Update EmailManager.php reset password URL
- Update EmailRenderer.php login URL
- Update TemplateOverride.php WC redirects
- All routes now use path format by default

This enables proper SEO indexing as search engines
can now crawl individual product/page URLs.
2026-01-03 20:01:32 +07:00
Dwindi Ramadhana
a98217897c fix: use customer-spa for password reset page
Changed reset link URL from admin SPA to customer-spa:
- Old: /wp-admin/admin.php?page=woonoow#/reset-password?key=...
- New: /my-account#/reset-password?key=...

This fixes the login redirect issue - the customer-spa is publicly
accessible so users can reset their password without logging in first.

Added:
- customer-spa/src/pages/ResetPassword/index.tsx
- Route /reset-password in customer-spa App.tsx

EmailManager.php now:
- Uses wc_get_page_id('myaccount') to get my-account page URL
- Falls back to home_url if my-account page not found
2026-01-03 17:09:00 +07:00
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
Dwindi Ramadhana
56042d4b8e feat: add customer login page in SPA
- Created Login/index.tsx with styled form
- Added /auth/customer-login API endpoint (no admin perms required)
- Registered route in Routes.php
- Added /login route in customer-spa App.tsx
- Account page now redirects to SPA login instead of wp-login.php
- Login supports redirect param for post-login navigation
2025-12-31 22:43:13 +07:00
Dwindi Ramadhana
82399d4ddf fix: WP-Admin CSS conflicts and add-to-cart redirect
- Fix CSS conflicts between WP-Admin and SPA (radio buttons, chart text)
- Add Tailwind important selector scoped to #woonoow-admin-app
- Remove overly aggressive inline SVG styles from Assets.php
- Add targeted WordPress admin CSS overrides in index.css
- Fix add-to-cart redirect to use woocommerce_add_to_cart_redirect filter
- Let WooCommerce handle cart operations natively for proper session management
- Remove duplicate tailwind.config.cjs
2025-12-31 14:06:04 +07:00
Dwindi Ramadhana
93523a74ac feat: Add-to-cart from URL parameters
Implements direct-to-cart functionality for landing page CTAs.

Features:
- Parse URL parameters: ?add-to-cart=123
- Support simple products: ?add-to-cart=123
- Support variable products: ?add-to-cart=123&variation_id=456
- Support quantity: ?add-to-cart=123&quantity=2
- Auto-navigate to cart after adding
- Clean URL after adding (remove parameters)
- Toast notification on success/error

Usage examples:
1. Simple product:
   https://site.com/store?add-to-cart=332

2. Variable product:
   https://site.com/store?add-to-cart=332&variation_id=456

3. With quantity:
   https://site.com/store?add-to-cart=332&quantity=3

Flow:
- User clicks CTA on landing page
- Redirects to SPA with add-to-cart parameter
- SPA loads, hook detects parameter
- Adds product to cart via API
- Navigates to cart page
- Shows success toast

Works with both SPA modes:
- Full SPA: loads shop, adds to cart, navigates to cart
- Checkout Only: loads cart, adds to cart, stays on cart
2025-12-30 20:54:54 +07:00
Dwindi Ramadhana
2c4050451c feat: Customer SPA reads initial route from data attribute
Changes:
- App.tsx reads data-initial-route attribute from #woonoow-customer-app
- Root route (/) redirects to initial route based on SPA mode
- Fallback route (*) also redirects to initial route
- Full SPA mode: initial route = /shop
- Checkout Only mode: initial route = /cart

Flow:
1. User visits /store page (SPA entry page)
2. PHP template sets data-initial-route based on spa_mode setting
3. React reads attribute and navigates to correct initial route
4. HashRouter handles rest: /#/product/123, /#/checkout, etc.

Example:
- Full SPA: /store loads → redirects to /#/shop
- Checkout Only: /store loads → redirects to /#/cart
- User can navigate: /#/product/abc, /#/checkout, etc.

Next: Add direct-to-cart functionality with product parameter
2025-12-30 20:34:40 +07:00
Dwindi Ramadhana
10acb58f6e feat: Toast position control + Currency formatting + Dialog accessibility fixes
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)
2025-12-27 00:12:44 +07:00
Dwindi Ramadhana
9214172c79 feat: Public guest wishlist page + Dashboard Overview debug
Issue 1 - Dashboard > Overview Never Active:
Added debug logging to investigate why Overview submenu never shows active
- Console logs path, pathname, and isActive state
- Will help identify the root cause

Issue 2 - Guest Wishlist Public Page:
Problem: Guests couldn't access wishlist (redirected to login)
Solution: Created public /wishlist route accessible to all users

Implementation:
1. New Public Wishlist Page:
   - Route: /wishlist (not /my-account/wishlist)
   - Accessible to guests and logged-in users
   - Guest mode: Shows product IDs from localStorage
   - Logged-in mode: Shows full product details from API
   - Guests can view and remove items

2. Updated All Header Links:
   - ClassicLayout: /wishlist
   - ModernLayout: /wishlist
   - BoutiqueLayout: /wishlist
   - No more wp-login redirect for guests

3. Guest Experience:
   - See list of wishlisted product IDs
   - Click to view product details
   - Remove items from wishlist
   - Prompt to login for full details

Issue 3 - Wishlist Page Selector Setting:
Status: Deprecated/unused for SPA architecture
- SPA uses React Router, not WordPress pages
- Setting saved but has no effect
- Shareable wishlist would also be SPA route
- No need for page CPT selection

Files Modified:
- customer-spa/src/pages/Wishlist.tsx (new public page)
- customer-spa/src/App.tsx (added /wishlist route)
- customer-spa/src/hooks/useWishlist.ts (export productIds)
- customer-spa/src/layouts/BaseLayout.tsx (all themes use /wishlist)
- customer-spa/dist/app.js (rebuilt)
- admin-spa/src/components/nav/SubmenuBar.tsx (debug logging)
- admin-spa/dist/app.js (rebuilt)

Result:
 Guests can access wishlist page
 Guests can view and manage localStorage wishlist
 No login redirect for guest wishlist
 Debug logging added for Overview issue
2025-12-26 23:16:40 +07:00
Dwindi Ramadhana
9ac09582d2 feat: implement header/footer visibility controls for checkout and thankyou pages
- Created LayoutWrapper component to conditionally render header/footer based on route
- Created MinimalHeader component (logo only)
- Created MinimalFooter component (trust badges + policy links)
- Created usePageVisibility hook to get visibility settings per page
- Wrapped ClassicLayout with LayoutWrapper for conditional rendering
- Header/footer visibility now controlled directly in React SPA
- Settings: show/minimal/hide for both header and footer
- Background color support for checkout and thankyou pages
2025-12-25 22:20:48 +07:00
Dwindi Ramadhana
f397ef850f feat: Add product images support with WP Media Library integration
- Add WP Media Library integration for product and variation images
- Support images array (URLs) conversion to attachment IDs
- Add images array to API responses (Admin & Customer SPA)
- Implement drag-and-drop sortable images in Admin product form
- Add image gallery thumbnails in Customer SPA product page
- Initialize WooCommerce session for guest cart operations
- Fix product variations and attributes display in Customer SPA
- Add variation image field in Admin SPA

Changes:
- includes/Api/ProductsController.php: Handle images array, add to responses
- includes/Frontend/ShopController.php: Add images array for customer SPA
- includes/Frontend/CartController.php: Initialize WC session for guests
- admin-spa/src/lib/wp-media.ts: Add openWPMediaGallery function
- admin-spa/src/routes/Products/partials/tabs/GeneralTab.tsx: WP Media + sortable images
- admin-spa/src/routes/Products/partials/tabs/VariationsTab.tsx: Add variation image field
- customer-spa/src/pages/Product/index.tsx: Add gallery thumbnails display
2025-11-26 16:18:43 +07:00
dwindown
909bddb23d feat: Create customer-spa core foundation (Sprint 1)
Sprint 1 - Foundation Complete! 

Created Core Files:
 src/main.tsx - Entry point
 src/App.tsx - Main app with routing
 src/index.css - Global styles (TailwindCSS)
 index.html - Development HTML

Pages Created (Placeholders):
 pages/Shop/index.tsx - Product listing
 pages/Product/index.tsx - Product detail
 pages/Cart/index.tsx - Shopping cart
 pages/Checkout/index.tsx - Checkout process
 pages/Account/index.tsx - My Account with sub-routes

Library Setup:
 lib/api/client.ts - API client with endpoints
 lib/cart/store.ts - Cart state management (Zustand)
 types/index.ts - TypeScript definitions

Configuration:
 .gitignore - Ignore node_modules, dist, logs
 README.md - Documentation

Features Implemented:

1. Routing (React Router v7)
   - /shop - Product listing
   - /shop/product/:id - Product detail
   - /shop/cart - Shopping cart
   - /shop/checkout - Checkout
   - /shop/account/* - My Account (dashboard, orders, profile)

2. API Client
   - Fetch wrapper with error handling
   - WordPress nonce authentication
   - Endpoints for shop, cart, checkout, account
   - TypeScript typed responses

3. Cart State (Zustand)
   - Add/update/remove items
   - Cart drawer (open/close)
   - LocalStorage persistence
   - Quantity management
   - Coupon support

4. Type Definitions
   - Product, Order, Customer types
   - Address, ShippingMethod, PaymentMethod
   - Cart, CartItem types
   - Window interface for WordPress globals

5. React Query Setup
   - QueryClient configured
   - 5-minute stale time
   - Retry on error
   - No refetch on window focus

6. Toast Notifications
   - Sonner toast library
   - Top-right position
   - Rich colors

Tech Stack:
- React 18 + TypeScript
- Vite (port 5174)
- React Router v7
- TanStack Query
- Zustand (state)
- TailwindCSS
- shadcn/ui
- React Hook Form + Zod

Dependencies Installed:
 437 packages installed
 All peer dependencies resolved
 Ready for development

Next Steps (Sprint 2):
- Implement Shop page with product grid
- Create ProductCard component
- Add filters and search
- Implement pagination
- Connect to WordPress API

Ready to run:
```bash
cd customer-spa
npm run dev
# Opens https://woonoow.local:5174
```
2025-11-21 13:53:38 +07:00