- Fix: Redirect users back to product page after login by passing 'next' parameter
in LoginPromptModal. Previously users were redirected to /account and lost
design context. Now they return to where they started (e.g., /made-to-order/
classic-t-shirt) where design drafts are restored from localStorage.
- Fix: Clear design draft from localStorage only AFTER successful cart addition,
not immediately. This ensures draft persists if user needs to login mid-design.
- Feature: Add Font Properties boxes (Font 1, Font 2, etc.) similar to Image
Dimensions. Each text element now displays with editable controls for:
• Text content
• Font family (dropdown with all fonts)
• Font size (slider 10-80pt with display)
• Text color (color picker)
• Rotation (slider 0-360 degrees)
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Remove Reference Size input fields from customer design page
- Rulers now use product.referenceWidthCm and product.referenceHeightCm
- Reference size is set by admin when editing product (not customer)
- Simplify Add to bag validation - only check for design elements
- Remove reference size state from DesignCanvas component
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Add Reference Size (cm) section with Width and Height inputs
- Rulers now use reference size instead of product print area dimensions
- Measurements scale to garment size specified by user
- Add to bag button disabled until reference sizes are provided
- Rulers span full canvas and show custom scale (e.g., 0-40cm x 0-60cm)
- Reference size required for personalization checkout
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Add printAreaWidthMm and printAreaHeightMm to ProductDTO type
- Include these fields in toProductDTO conversion function
- Refactor ruler calculations to use simple for loops
- Rulers now display correctly showing 2cm increments on both axes
- Position & Size panel now shows accurate cm measurements
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Add product parameter to PrintSurface component props
- Pass product to both front and back PrintSurface calls
- Allows rulers to access product.printAreaWidthMm for cm calculations
- Fixes ReferenceError: product is not defined
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Display ruler marks every 2cm on X and Y axes
- Labels show cm measurements on spec sheet
- Rulers persist on downloaded/printed spec sheets
- Helps manufacturers verify placement and dimensions
Rulers are now visible both during personalization and on final spec sheet.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Display X and Y rulers with 2cm increments
- Show position and size in centimeters (cm) instead of pixels
- Calculate cmPerPx from product print area for accurate conversion
- Rulers positioned above and to the left of design canvas
- Labels show cm measurements for easy reference while personalizing
Users can now see exact placement and dimensions in cm during design,
with visual ruler guides for precise positioning.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Display X and Y coordinates of selected elements
- Show width and height of selected images in pixels
- Add "Position & Size" panel below design controls
- Helps users understand exact placement during design
Users can now see precise measurements while personalizing
instead of guessing or calculating after the fact.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Remove hardcoded and incorrectly calculated dimension measurements
- Focus on design spec as reference document for manufacturing
- Prepare for adding measurement tools to personalization page instead
Next: Add rulers and size display to DesignCanvas so users see exact
measurements and dimensions while designing (not after the fact).
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Remove incorrect canvas-based scaling that was producing wrong measurements
- Use visually-measured distances from design center to garment edges
- Measurements now display: 4.00" from top, 2.00" from right side
- Dimension lines positioned adjacent to design badge on shirt image
TODO: Implement dynamic measurement calculation based on:
- Actual placement preview image dimensions
- Garment width and height stored in product data
- Proper scale factor between design canvas and placement image
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Reposition dimension lines to start from badge center instead of extending to image edges
- Vertical line extends upward 30px above badge showing distance to top
- Horizontal line extends rightward 40px from badge showing distance to right
- Labels now clearly visible adjacent to design element on garment image
Measurements now display correctly:
- T: 1.27" (center to top of garment)
- R: 11.70" (center to right edge of garment)
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Fix print area calculation: percentages stored as decimals (0.43125), not percentages
- Expand SVG viewBox to display dimension lines and measurements
- Add brown dimension lines showing distance from garment edges to design center
- Convert measurements from centimeters to inches for clarity
- Fix element center calculation to properly center markers and lines
- Update legend to explain all visual guides
- Add pixel columns to measurements table for manufacturing reference
The design spec now displays professional technical drawing format with:
- Horizontal dimension line at top showing distance from left edge
- Vertical dimension line at right showing distance from top edge
- All measurements overlaid on the actual garment placement image
- Element markers centered at actual design position
Fixes measurement accuracy and improves usability for manufacturers.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Use cmPerPx = (printAreaWidthMm / printAreaWidthPx) / 10
- Simplify dimension conversion: just multiply by cmPerPx
- Use separate convertPositionToCm function for positions (subtract offset first)
- Fix font size calculation using proper conversion factor
- Measurements now show correct values (e.g., 2.6 cm not 471.5 cm)
- Fixed conversion formula for accurate CM measurements
- Add red dashed border around print area
- Add blue X-axis line (horizontal, 0cm at left)
- Add green Y-axis line (vertical, 0cm at top)
- Add orange circles marking design element positions
- Add reference legend explaining all visual guides
- Element labels changed from E1, E2 for clarity
- Add printAreaWidthMm and printAreaHeightMm fields to Product model
- Create API endpoint to generate design specs with CM measurements
- Add download button to order detail page
- Specs include design elements with positions/sizes in centimeters
The outer try block (starting at line 32) was missing its closing catch block.
Added catch block to properly close the outer try statement.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Split layout: image + info with left border accent
- Product names prominently displayed using serif font
- Unique left border that animates on hover
- Better visual hierarchy and spacing
- Smooth animations (scale, color transitions)
- Clear "Explore" CTA with arrow
- Distinctive design that stands out from generic e-commerce sites
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Add mounted state to prevent hydration mismatches
- Only render component after hydration completes
- Close logout dialog when clicking outside
- Prevent logout dialog from showing unexpectedly
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
The logout API was deleting 'session' but the actual customer session
cookie is named 'customer_session' (from auth.ts SESSION_COOKIE).
This fix ensures the logout properly clears the customer session, so users
are actually logged out when the browser closes.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Use empty dependency array to ensure clear() runs once on mount.
Add logging and also clear isCheckingOut flag.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
The handleCheckout function on the cart page was navigating to /checkout
without setting the isCheckingOut flag, causing LogoutOnUnload to clear the
cart during navigation.
Now sets the flag BEFORE navigating so LogoutOnUnload skips clearing the cart.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Add emoji-prefixed logs to make debugging easier:
- 💳 Checkout button clicked
- ✓ Flag set/skipped actions
- 🚪 LogoutOnUnload handler
- 📡 API fetch
- 📦 API response
- 🔗 Stripe redirect
- 🗑️ Cart clearing
This makes it much easier to see the flow in the console.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Add console logs to track:
- When isCheckingOut flag is set in checkout button
- When LogoutOnUnload handleUnload is called
- Whether isCheckingOut flag is detected
- When redirecting to Stripe URL
This helps diagnose why cart is still being cleared during checkout.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Add suppressHydrationWarning to body element in addition to html element
to properly suppress dark theme class mismatch warnings during React hydration.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Prevents ReferenceError when sessionStorage is accessed during SSR or
server-side rendering contexts. Wraps all sessionStorage calls in
typeof window !== 'undefined' checks.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Guest checkout handler was missing the sessionStorage flag that prevents
LogoutOnUnload from clearing cart during Stripe redirect. Adds flag before
API call and removes on error.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Use sessionStorage flag to prevent LogoutOnUnload from clearing cart and logging
out when navigating to Stripe checkout.
Changes:
- Checkout button sets 'isCheckingOut' flag in sessionStorage before API call
- LogoutOnUnload checks this flag and skips logout if checkout in progress
- Flag is removed if API returns an error
- Flag persists during navigation to Stripe URL
This ensures cart and login persist through Stripe payment flow.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Add suppressHydrationWarning to html element to prevent hydration mismatch
caused by theme script setting dark class before React hydration completes.
The hydration errors were preventing checkout and other interactive features
from working properly. This tells React to ignore the mismatch on the html
element since we intentionally modify it before hydration.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Added console.log statements to track:
- Client: API response status, data, and errors
- Server: Stripe configuration check, rate limiting, order creation, Stripe session creation
This will help identify exactly where the checkout flow is failing.
Check browser console for client-side errors and server logs for API errors.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
