## Changes Made:
### Backend (server/routes/checkout.js):
- Changed PROCESSING_FEE_PERCENT from 0.05 to 0.03
- Now calculates 3% fee instead of 5%
### Frontend (src/pages/CheckoutSuccess.tsx):
- Updated display text from "Processing Fee (5%)" to "Processing Fee (3%)"
- Receipt now shows correct percentage
## Impact:
- All new orders will have 3% processing fee
- Calculation, display, and Stripe charges all consistent at 3%
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
## Issues Fixed:
1. **Better Icon**: Replaced bell icon with leaf/plant icon for carbon offset
- More appropriate visual representation
2. **Currency Formatting**: Added thousand separators to all amounts
- Added formatCurrency() helper function
- Total now shows "$13,414.12" instead of "$13414.12"
- Applied to base amount, processing fee, and total
3. **Print Functionality**: Fixed empty page printing
- Removed "no-print" class from outer wrapper
- Only interactive elements (buttons) hidden when printing
- Receipt content now prints properly
4. **Status Display**: Shows "Confirmed" immediately after payment
- Uses Stripe session.paymentStatus for just-completed payments
- Falls back to order.status for older orders
- Prevents showing "Processing" when payment is already complete
## Technical Changes:
- CheckoutSuccess.tsx (line 27-32): Added formatCurrency helper
- CheckoutSuccess.tsx (line 120-121): Use Stripe payment status
- CheckoutSuccess.tsx (line 145): Removed no-print from wrapper
- CheckoutSuccess.tsx (line 208-210): Changed to leaf SVG icon
- CheckoutSuccess.tsx (lines 228, 234, 241): Use formatCurrency()
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
## Changes Made:
### 1. Remove Carbon Impact Comparisons from Calculator Pages
- Removed from OffsetOrder.tsx (lines 532-542)
- Removed from MobileOffsetOrder.tsx (lines 429-432)
- Keep comparisons ONLY on CheckoutSuccess receipt page per user request
### 2. Comprehensive CheckoutSuccess Page Redesign
- Add Puffin logo prominently at top of receipt
- Implement status mapping: paid/fulfilled → "Confirmed", pending → "Processing"
- Add comprehensive print CSS (@media print rules)
- Hide interactive elements (buttons) when printing
- Optimize layout and spacing for printed receipt
- Professional receipt aesthetics with enhanced design:
* Beautiful gradient header with logo
* Highlighted carbon offset display with icon
* Enhanced pricing breakdown section
* Better typography and spacing throughout
* Professional metadata section with date
* Improved button styling with gradients and hover effects
* Email confirmation notice with icon
* Footer with contact information
### Benefits:
- Cleaner calculator UX (comparisons only on success)
- Professional printable receipt
- Clear "Confirmed" status (not "PENDING")
- Beautiful modern design that matches brand
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Features:
- Add useCalculatorState hook with localStorage persistence and 1-hour expiry
- State persists through page reloads and Stripe checkout redirects
- Automatically clears state on successful payment (paid/fulfilled status)
Navigation fixes:
- Fix white page issues on checkout success/cancel pages
- Replace <a> links with button handlers for proper state-based routing
- Pass navigation handlers from App.tsx to checkout pages
State persistence integration:
- TripCalculator: Save/restore calculator inputs (fuel, distance, custom)
- MobileCalculator: Full state persistence for mobile app route
- OffsetOrder: Persist offset percentage and portfolio selection
- MobileOffsetOrder: Persist offset percentage for mobile flow
Carbon impact comparisons:
- Add varied carbon impact comparisons with random selection
- Display 3 comparisons in preview mode, 5 in success mode
- Categories: cars, flights, trees, streaming, homes
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
## Stripe Payment Integration
- Add Express.js backend server with Stripe Checkout Sessions
- Create SQLite database for order tracking
- Implement Stripe webhook handlers for payment events
- Integrate with Wren Climate API for carbon offset fulfillment
- Add CheckoutSuccess and CheckoutCancel pages
- Create checkout API client for frontend
- Update OffsetOrder component to redirect to Stripe Checkout
- Add processing fee calculation (3% of base amount)
- Implement order status tracking (pending → paid → fulfilled)
Backend (server/):
- Express server with CORS and middleware
- SQLite database with Order schema
- Stripe configuration and client
- Order CRUD operations model
- Checkout session creation endpoint
- Webhook handler for payment confirmation
- Wren API client for offset fulfillment
Frontend:
- CheckoutSuccess page with order details display
- CheckoutCancel page with retry encouragement
- Updated OffsetOrder to use Stripe checkout flow
- Added checkout routes to App.tsx
- TypeScript interfaces for checkout flow
## Visual & UX Enhancements
- Add CertificationBadge component for project verification status
- Create PortfolioDonutChart for visual portfolio allocation
- Implement RadialProgress for percentage displays
- Add reusable form components (FormInput, FormTextarea, FormSelect, FormFieldWrapper)
- Refactor OffsetOrder with improved layout and animations
- Add offset percentage slider with visual feedback
- Enhance MobileOffsetOrder with better responsive design
- Improve TripCalculator with cleaner UI structure
- Update CurrencySelect with better styling
- Add portfolio distribution visualization
- Enhance project cards with hover effects and animations
- Improve color palette and gradient usage throughout
## Configuration
- Add VITE_API_BASE_URL environment variable
- Create backend .env.example template
- Update frontend .env.example with API URL
- Add Stripe documentation references
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
