Travel Checkout Demo - Enhanced Security

\n \n \n \n \n \n \n \n \n \n \n\n`,\n {\n headers: {\n \"Content-Type\": \"text/html; charset=utf-8\",\n },\n },\n );\n}",[],[270],{"_107":279,"_100":280,"_151":281,"_153":-5,"_154":138,"_155":282,"_157":158,"_109":283,"_104":284,"_161":175,"_163":285,"_164":27,"_165":-5,"_166":286,"_103":287},"eef5b552-5a71-11f0-bf8d-f69ea79377d9","plan.md","fbbf312e-5a5c-11f0-86be-f69ea79377d9",123,["D",1751810583530],20,"# Travel Checkout App Refactoring Plan\n\n## Overview\nTransform the current checkout app into a modern, realistic demo with proper data management, improved UX, and better code organization.\n\n## 🚀 Current Status\n- **✅ Application Restored**: Working React-based travel checkout app with demo modal and 3-tour landing page\n- **✅ Task 1.1 Completed**: Configuration file created and implemented\n- **✅ Task 1.2 Completed**: Utility functions implemented with Base64 encoding, localStorage helpers, image caching, and comprehensive error handling\n- **✅ Task 1.3 Completed**: Full demo modal implementation with first-time visitor detection, encoded localStorage, fade animations, accessibility features, and comprehensive event handling\n- **🧪 Test Mode Added**: Click \"🧪 Test Utility Functions\" on landing page to verify utility functions work correctly\n- **📱 Current Features**: Demo modal (first-time only) → Landing page with 3 tours → Tour selection → Basic navigation\n- **🎯 Phase 1 Complete**: Infrastructure & Configuration phase fully implemented\n\n## API Flow Understanding\n**Server Base URL**: `https://server.zenithpayments.support`\n**User Journey**: Landing Page → Tour Selection → Form Page → Payment Flow\n**API Calls**: \n1. `GET https://server.zenithpayments.support/api/v1/tour/{id}` - Load tour + set security cookies\n2. `POST https://server.zenithpayments.support/api/v1/create-nonce` - Get single-use nonce (CSRF + bot check) \n3. `POST https://server.zenithpayments.support/api/v1/payment/exchange-nonce` - Get payment fingerprint\n4. Client-side ZenPay initialization\n5. Server callback (no frontend involvement)\n\n---\n\n## PHASE 1: INFRASTRUCTURE & CONFIGURATION\n\n### ✅ Task 1.1: Create Configuration File\n**File**: `/js/config.js`\n\n**Subtasks:**\n- [x] Create config.js file with export structure\n- [x] Add server configuration:\n - [x] `SERVER_BASE_URL: 'https://server.zenithpayments.support'`\n - [x] `API_BASE_PATH: '/api/v1'`\n- [x] Update API endpoints:\n - [x] `TOUR_ENDPOINT: '/tour/'` (will be: `/api/v1/tour/{id}`)\n - [x] `NONCE_ENDPOINT: '/create-nonce'` (will be: `/api/v1/create-nonce`)\n - [x] `EXCHANGE_ENDPOINT: '/payment/exchange-nonce'` (will be: `/api/v1/payment/exchange-nonce`)\n- [x] Move external library URLs:\n - [x] jQuery URL: `'https://code.jquery.com/jquery-3.6.0.min.js'`\n - [x] Bootstrap CSS: `'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css'`\n - [x] Bootstrap JS: `'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js'`\n - [x] ZenPay plugin URL: `'https://payuat.travelpay.com.au/online/v5/js/zp-payment-bs5.js'`\n - [x] ZenPay CSS: `'https://payuat.travelpay.com.au/online/v5/css/zp-payment-bs5.css'`\n- [x] Add default form values:\n - [x] Default payment mode, display mode\n - [x] Default customer data structure\n - [x] Merchant configuration\n- [x] Add demo modal configuration:\n - [x] Modal title, message text\n - [x] Storage keys for demo acknowledgment\n - [x] Modal styling configuration\n- [x] Add tour configuration:\n - [x] Default tour IDs for landing page\n - [x] Image cache settings (expiration time, max size)\n - [x] Loading states configuration\n- [x] Export configuration object as default export\n\n### ✅ Task 1.2: Create Utilities File\n**File**: `/js/utils.js`\n\n**Subtasks:**\n- [x] Create utils.js file with proper exports\n- [x] Implement encoding/decoding functions:\n - [x] `encodeForStorage(data)` - Base64 encoding only (no obfuscation as requested)\n - [x] `decodeFromStorage(encodedData)` - Reverse decoding with error handling\n - [x] Add validation for corrupted data (Base64 format validation)\n- [x] Implement localStorage helpers:\n - [x] `setStorageItem(key, value, encode=true)` - Store with optional encoding\n - [x] `getStorageItem(key, decode=true)` - Retrieve with optional decoding\n - [x] `removeStorageItem(key)` - Safe removal with error handling\n - [x] `clearAllStorageItems(prefix)` - Clear items by prefix (returns count)\n- [x] Implement image caching utilities:\n - [x] `cacheImage(url, key)` - Fetch image, convert to base64, store (500KB limit)\n - [x] `getCachedImage(key)` - Retrieve base64 image from storage\n - [x] `isCacheExpired(key, maxAge)` - Check if cached item is expired (default 7 days)\n - [x] `clearImageCache()` - Remove all cached images\n - [x] `getCacheSize()` - Calculate total cache size in bytes\n- [x] Implement cookie utilities:\n - [x] `getCookie(name)` - Extract cookie value by name\n - [x] `getXSRFToken()` - Specifically get XSRF-TOKEN cookie\n - [x] `parseCookies()` - Parse all cookies into object\n- [x] Implement API helpers:\n - [x] `buildApiUrl(endpoint)` - Construct full API URL\n - [x] `getDefaultHeaders()` - Get common request headers\n - [x] `handleApiError(response)` - Standardized error handling\n- [x] Implement validation utilities:\n - [x] `validateEmail(email)` - Email format validation\n - [x] `validatePhone(phone)` - Phone number validation\n - [x] `validateRequired(value)` - Required field validation\n- [x] Export all utility functions\n\n**✅ COMPLETED** - All utility functions implemented with Base64-only encoding, comprehensive error handling, and test functionality added to main app.\n\n### ✅ Task 1.3: Demo Modal Implementation\n**Location**: Main app initialization\n\n**Subtasks:**\n- [x] Create demo modal component in main app:\n - [x] Add modal HTML structure using React.createElement\n - [x] Create dark overlay (position: fixed, z-index: 9999)\n - [x] Center modal container with responsive sizing\n- [x] Implement first-time visitor detection:\n - [x] Check encoded localStorage for demo acknowledgment\n - [x] Use storage key: `btoa('zenith_demo_ack_v1')`\n - [x] Handle corrupted/invalid storage data gracefully\n- [x] Create modal UI elements:\n - [x] Modal header with title: \"ZenPay Security Demo\"\n - [x] Modal body with explanation text (see content below)\n - [x] Modal footer with \"Got it!\" button\n - [x] Close button (X) in top-right corner\n - [x] Professional styling matching app theme\n- [x] Implement modal logic:\n - [x] Show modal before any other UI renders\n - [x] Prevent background interaction (pointer-events: none)\n - [x] Store acknowledgment when dismissed\n - [x] Fade-in/fade-out animations (CSS transitions)\n- [x] Add demo explanation content:\n - [x] \"This is a demonstration of ZenPay's secure payment flow\"\n - [x] \"You'll see how single-use nonces and CSRF tokens protect transactions\"\n - [x] \"This is a safe testing environment - no real payments will be processed\"\n - [x] \"Click 'Got it!' to continue to the tour selection\"\n- [x] Add modal event handlers:\n - [x] Button click handler to dismiss modal\n - [x] Escape key handler to close modal\n - [x] Click outside modal to close (optional)\n- [x] Add accessibility features:\n - [x] Focus trap within modal (body overflow hidden)\n - [x] ARIA labels and roles (dialog, modal, labelledby, describedby)\n - [x] Keyboard navigation support (Escape key)\n\n**✅ COMPLETED** - Full demo modal implementation with first-time visitor detection, encoded localStorage, fade animations, accessibility features, and comprehensive event handling.\n\n---\n\n## PHASE 2: FILE STRUCTURE REORGANIZATION\n\n### ✅ Task 2.1: Split Landing Page Component\n**File**: `/js/landing-page.js`\n\n**Subtasks:**\n- [ ] Create landing-page.js file with proper imports\n- [ ] Import required dependencies:\n - [ ] Import config from './config.js'\n - [ ] Import utils from './utils.js'\n - [ ] Import React components from window.TravelCheckout\n- [ ] Define tour data structure:\n - [ ] Create array of 3 tour objects with IDs\n - [ ] Tour IDs: 'tour_paris_explorer', 'tour_tokyo_adventure', 'tour_sydney_harbor'\n - [ ] Include fallback data for offline mode\n- [ ] Implement tour data loading:\n - [ ] `loadTourData(tourId)` function\n - [ ] Call `GET https://server.zenithpayments.support/api/v1/tour/{id}`\n - [ ] Handle CORS and credentials properly\n - [ ] Store response data in component state\n - [ ] Cache successful responses\n- [ ] Create 3-card layout structure:\n - [ ] Container div with 100% width\n - [ ] CSS Grid: `grid-template-columns: 1fr 1fr 1fr`\n - [ ] Equal height cards with `align-items: stretch`\n - [ ] Responsive breakpoints for mobile/tablet\n- [ ] Implement individual card component:\n - [ ] Card container with hover detection\n - [ ] Hero image with lazy loading\n - [ ] Title, description, price display\n - [ ] \"Select Tour\" call-to-action button\n - [ ] Loading state placeholder\n- [ ] Add hover effects:\n - [ ] CSS transitions: `transition: all 0.3s ease`\n - [ ] Hovered card: `transform: scale(1.02)`, enhanced shadow\n - [ ] Non-hovered cards: `opacity: 0.6`, reduced scale\n - [ ] Smooth state transitions\n- [ ] Implement image caching:\n - [ ] Check localStorage before fetching images\n - [ ] Convert images to base64 and cache\n - [ ] Handle cache expiration (7 days)\n - [ ] Fallback to direct URL if caching fails\n- [ ] Add loading states:\n - [ ] Skeleton cards while loading tour data\n - [ ] Progressive image loading\n - [ ] Error states for failed API calls\n- [ ] Implement click handlers:\n - [ ] Card click handler to select tour\n - [ ] Pass selected tour data to parent component\n - [ ] Trigger navigation to form page\n- [ ] Add responsive design:\n - [ ] Mobile: Single column layout\n - [ ] Tablet: Two column layout\n - [ ] Desktop: Three column layout\n - [ ] Touch-friendly sizing for mobile\n- [ ] Export `renderLandingPage(onTourSelect, loadingState)` function\n\n### ✅ Task 2.2: Split Form Page Component \n**File**: `/js/form-page.js`\n\n**Subtasks:**\n- [ ] Create form-page.js file with proper imports\n- [ ] Import required dependencies:\n - [ ] Import config from './config.js'\n - [ ] Import utils from './utils.js'\n - [ ] Import React components from window.TravelCheckout\n- [ ] Move traveler information form from checkout-steps.js:\n - [ ] Copy existing form structure\n - [ ] Update to use new component structure\n - [ ] Maintain existing form validation\n- [ ] Implement split layout structure:\n - [ ] Container with CSS Grid: `grid-template-columns: 1fr 1fr`\n - [ ] Left column: Form section (50% width)\n - [ ] Right column: Tour details section (50% width)\n - [ ] Responsive breakpoints for mobile (stack vertically)\n- [ ] Create form section:\n - [ ] Form container with proper spacing\n - [ ] Input fields: Name, Email, Phone, Customer Reference\n - [ ] Form validation indicators\n - [ ] Continue button with validation state\n- [ ] Create tour details section:\n - [ ] Hero image display with fallback\n - [ ] Tour title with emoji\n - [ ] Description text with proper typography\n - [ ] Price and currency display\n - [ ] Duration information\n - [ ] Available dates list\n - [ ] Inclusions list with bullet points\n - [ ] Exclusions list with bullet points\n- [ ] Implement form validation:\n - [ ] Real-time validation on input change\n - [ ] Required field validation (name, email)\n - [ ] Email format validation using utils\n - [ ] Phone number format validation\n - [ ] Visual validation feedback (red/green borders)\n - [ ] Error message display\n- [ ] Add form state management:\n - [ ] Handle input changes\n - [ ] Maintain form data in parent state\n - [ ] Validate form before allowing continue\n - [ ] Reset form functionality\n- [ ] Implement tour data display:\n - [ ] Use tour data passed from landing page\n - [ ] Handle missing or incomplete data gracefully\n - [ ] Format price with currency symbol\n - [ ] Format dates in readable format\n - [ ] Handle empty inclusions/exclusions arrays\n- [ ] Add loading states:\n - [ ] Form loading skeleton\n - [ ] Tour details loading placeholder\n - [ ] Image loading states\n- [ ] Add responsive design:\n - [ ] Mobile: Stack form above tour details\n - [ ] Tablet: Maintain side-by-side layout\n - [ ] Desktop: Full side-by-side layout\n - [ ] Proper spacing and padding for all sizes\n- [ ] Export `renderFormPage(tourData, formData, onInputChange, onContinue, onBack)` function\n\n### ✅ Task 2.3: Update Payment Page Component\n**File**: `/js/payment-page.js` (rename from checkout-steps.js)\n\n**Subtasks:**\n- [ ] Rename checkout-steps.js to payment-page.js\n- [ ] Remove landing and form page functions\n- [ ] Keep only payment/review functionality\n- [ ] Update function names for clarity\n- [ ] Export `renderPaymentPage()` function\n\n### ✅ Task 2.4: Update Main App File\n**File**: `/js/checkout-app.js`\n\n**Subtasks:**\n- [ ] Add imports for all new modules:\n - [ ] `import config from './config.js'`\n - [ ] `import * as utils from './utils.js'`\n - [ ] `import { renderLandingPage } from './landing-page.js'`\n - [ ] `import { renderFormPage } from './form-page.js'`\n - [ ] `import { renderPaymentPage } from './payment-page.js'`\n - [ ] Keep existing payment handler imports\n- [ ] Replace hardcoded values with config:\n - [ ] Replace all URL constants with config values\n - [ ] Update API endpoints to use config\n - [ ] Replace default form values with config\n- [ ] Update state management:\n - [ ] Add `showDemoModal` state\n - [ ] Add `tourData` state for selected tour\n - [ ] Add `loadingStates` for different components\n - [ ] Maintain existing payment-related states\n- [ ] Implement demo modal logic:\n - [ ] Check for demo acknowledgment on app init\n - [ ] Show modal if first visit\n - [ ] Handle modal dismissal\n - [ ] Store acknowledgment using utils\n- [ ] Update step rendering logic:\n - [ ] Step 0: Show demo modal OR landing page\n - [ ] Step 1: Show form page with tour data\n - [ ] Step 2: Show payment page (existing)\n - [ ] Handle transitions between steps\n- [ ] Add tour selection handler:\n - [ ] Handle tour selection from landing page\n - [ ] Store selected tour data\n - [ ] Trigger API call to load full tour details\n - [ ] Navigate to form page\n- [ ] Update navigation handlers:\n - [ ] Handle back navigation between steps\n - [ ] Maintain tour data across navigation\n - [ ] Handle browser back button\n- [ ] Add error handling:\n - [ ] Global error boundary for component failures\n - [ ] API error handling and user feedback\n - [ ] Network failure recovery\n- [ ] Add loading state management:\n - [ ] Show loading indicators during API calls\n - [ ] Handle concurrent loading states\n - [ ] Prevent user interaction during loading\n- [ ] Update initialization logic:\n - [ ] Initialize demo modal check\n - [ ] Load cached tour data if available\n - [ ] Set up global error handlers\n- [ ] Maintain existing functionality:\n - [ ] Keep all payment-related logic intact\n - [ ] Preserve form data handling\n - [ ] Maintain script loading logic\n\n---\n\n## PHASE 3: BACKEND INTEGRATION & API UPDATES\n\n### ✅ Task 3.1: Update API Endpoints\n**File**: `/js/payment-handlers.js`\n\n**Subtasks:**\n- [ ] Import config and utils:\n - [ ] `import config from './config.js'`\n - [ ] `import { buildApiUrl, getXSRFToken, handleApiError } from './utils.js'`\n- [ ] Update nonce request function:\n - [ ] Change URL to use `config.SERVER_BASE_URL + config.API_BASE_PATH + config.NONCE_ENDPOINT`\n - [ ] Update request headers:\n - [ ] Add `'Content-Type': 'application/json'`\n - [ ] Add `'X-XSRF-TOKEN': getXSRFToken()` from cookies\n - [ ] Add `'Origin': window.location.origin`\n - [ ] Add `'Referer': window.location.href`\n - [ ] Update request body format:\n ```json\n {\n \"tourId\": \"\",\n \"cfToken\": \"\"\n }\n ```\n - [ ] Add proper error handling for CSRF failures\n - [ ] Handle 429 rate limiting responses\n- [ ] Update fingerprint exchange function:\n - [ ] Change URL to use `config.SERVER_BASE_URL + config.API_BASE_PATH + config.EXCHANGE_ENDPOINT`\n - [ ] Update headers:\n - [ ] Keep `'Content-Type': 'application/json'`\n - [ ] Change to `'X-Payment-Nonce': ` (remove Authorization header)\n - [ ] Add `'Origin': window.location.origin`\n - [ ] Add `'Referer': window.location.href`\n - [ ] Update request body format:\n ```json\n {\n \"apiKey\": \"\",\n \"mode\": \"\",\n \"paymentAmount\": \"\",\n \"merchantUniquePaymentId\": \"\",\n \"timestamp\": \"\"\n }\n ```\n - [ ] Remove backend API key requirement\n - [ ] Update error handling for nonce validation failures\n- [ ] Add cookie handling:\n - [ ] Ensure cookies are sent with credentials: 'include'\n - [ ] Handle missing XSRF token gracefully\n - [ ] Add cookie validation before API calls\n- [ ] Update error handling:\n - [ ] Handle network failures with retry logic\n - [ ] Parse error responses properly\n - [ ] Provide user-friendly error messages\n - [ ] Handle nonce expiration (60 seconds)\n- [ ] Add request timeout handling:\n - [ ] Set reasonable timeouts for API calls\n - [ ] Handle timeout errors gracefully\n - [ ] Provide timeout feedback to users\n- [ ] Update function signatures:\n - [ ] Include tourId parameter in nonce request\n - [ ] Remove unnecessary parameters\n - [ ] Update callback functions accordingly\n\n### ✅ Task 3.2: Implement Tour Data Loading\n**File**: `/js/landing-page.js`\n\n**Subtasks:**\n- [ ] Create `loadTourData(tourId)` function:\n - [ ] Build full API URL: `https://server.zenithpayments.support/api/v1/tour/${tourId}`\n - [ ] Configure fetch request:\n - [ ] Method: 'GET'\n - [ ] Headers: `{ 'Accept': 'application/json' }`\n - [ ] Credentials: 'include' (for cookies)\n - [ ] Mode: 'cors'\n - [ ] Handle response:\n - [ ] Check response.ok status\n - [ ] Parse JSON response\n - [ ] Extract tour data from response.body\n - [ ] Validate required fields exist\n- [ ] Add response data processing:\n - [ ] Parse JSON from response.body string\n - [ ] Map API response to internal tour object structure\n - [ ] Handle missing optional fields gracefully\n - [ ] Validate required fields (tourId, title, price, etc.)\n- [ ] Implement error handling:\n - [ ] Network failure handling (offline, timeout)\n - [ ] HTTP error status handling (404, 500, etc.)\n - [ ] Invalid JSON response handling\n - [ ] Missing required data handling\n - [ ] Provide fallback data for demo purposes\n- [ ] Add loading state management:\n - [ ] Track loading state per tour\n - [ ] Show loading indicators during fetch\n - [ ] Handle concurrent requests properly\n - [ ] Prevent duplicate requests for same tour\n- [ ] Implement caching strategy:\n - [ ] Cache successful API responses in memory\n - [ ] Use sessionStorage for tour data persistence\n - [ ] Check cache before making API calls\n - [ ] Implement cache expiration (30 minutes)\n - [ ] Clear cache on page refresh\n- [ ] Add tour data validation:\n - [ ] Validate tour object structure\n - [ ] Ensure required fields are present\n - [ ] Validate data types (price as number, etc.)\n - [ ] Sanitize text fields for XSS prevention\n- [ ] Handle cookies and security:\n - [ ] Ensure SESSION and XSRF-TOKEN cookies are set\n - [ ] Store cookies for subsequent API calls\n - [ ] Handle cookie expiration gracefully\n- [ ] Add retry logic:\n - [ ] Retry failed requests (max 3 attempts)\n - [ ] Exponential backoff for retries\n - [ ] Different retry strategies for different error types\n- [ ] Create tour loading orchestration:\n - [ ] Load all 3 tours concurrently\n - [ ] Handle partial failures (some tours load, others fail)\n - [ ] Provide feedback for each tour's loading state\n - [ ] Allow user interaction with successfully loaded tours\n\n### ✅ Task 3.3: Update Security Token Handling\n**File**: `/js/payment-handlers.js`\n\n**Subtasks:**\n- [ ] Implement XSRF token extraction:\n - [ ] Read XSRF-TOKEN from cookies\n - [ ] Add to request headers\n- [ ] Add Cloudflare Turnstile integration:\n - [ ] Ensure turnstile token is captured\n - [ ] Include in nonce request\n- [ ] Update error handling:\n - [ ] Handle 429 rate limiting\n - [ ] Handle CSRF token errors\n - [ ] Handle nonce expiration (60 seconds)\n\n---\n\n## PHASE 4: MODERN UI IMPLEMENTATION\n\n### ✅ Task 4.1: Design Landing Page Cards\n**File**: `/js/landing-page.js` + CSS\n\n**Subtasks:**\n- [ ] Create modern card design:\n - [ ] Card container: `border-radius: 12px`, `box-shadow: 0 4px 6px rgba(0,0,0,0.1)`\n - [ ] Background: `background: white`, `border: 1px solid #e5e7eb`\n - [ ] Padding: `padding: 1.5rem`\n - [ ] Height: `min-height: 400px` for consistency\n- [ ] Style card images:\n - [ ] Image container: `aspect-ratio: 16/9`, `border-radius: 8px`\n - [ ] Image: `object-fit: cover`, `width: 100%`\n - [ ] Loading placeholder with skeleton animation\n - [ ] Error fallback with icon/text\n- [ ] Design typography:\n - [ ] Title: `font-size: 1.5rem`, `font-weight: 600`, `color: #1f2937`\n - [ ] Description: `font-size: 0.875rem`, `color: #6b7280`, `line-height: 1.5`\n - [ ] Price: `font-size: 1.25rem`, `font-weight: 700`, `color: #059669`\n- [ ] Create call-to-action button:\n - [ ] Button: `background: #3b82f6`, `color: white`, `padding: 0.75rem 1.5rem`\n - [ ] Border radius: `border-radius: 6px`\n - [ ] Hover state: `background: #2563eb`, `transform: translateY(-1px)`\n - [ ] Transition: `transition: all 0.2s ease`\n- [ ] Implement hover animations:\n - [ ] Card hover: `transform: translateY(-4px) scale(1.02)`\n - [ ] Shadow enhancement: `box-shadow: 0 10px 25px rgba(0,0,0,0.15)`\n - [ ] Transition: `transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)`\n- [ ] Add sibling card effects:\n - [ ] Non-hovered cards: `opacity: 0.6`, `transform: scale(0.98)`\n - [ ] Smooth transition back to normal state\n - [ ] Use CSS `:hover` and `:not(:hover)` selectors\n- [ ] Implement responsive design:\n - [ ] Mobile (< 768px): Single column, full width cards\n - [ ] Tablet (768px - 1024px): Two column grid\n - [ ] Desktop (> 1024px): Three column grid\n - [ ] Use CSS Grid with `grid-template-columns`\n- [ ] Add loading states:\n - [ ] Skeleton card animation using CSS keyframes\n - [ ] Shimmer effect for loading images\n - [ ] Progressive content loading\n- [ ] Optimize for performance:\n - [ ] Use `will-change: transform` for animated elements\n - [ ] GPU acceleration with `transform3d(0,0,0)`\n - [ ] Debounce hover effects to prevent jank\n- [ ] Add accessibility features:\n - [ ] Focus states with `outline` and `box-shadow`\n - [ ] Keyboard navigation support\n - [ ] ARIA labels for screen readers\n - [ ] High contrast mode support\n\n### ✅ Task 4.2: Style Form Page Layout\n**File**: `/js/form-page.js` + CSS\n\n**Subtasks:**\n- [ ] Create split-screen layout:\n - [ ] Container: `display: grid`, `grid-template-columns: 1fr 1fr`\n - [ ] Gap: `gap: 2rem`\n - [ ] Min height: `min-height: calc(100vh - 4rem)`\n- [ ] Style form section:\n - [ ] Form container: `background: white`, `padding: 2rem`, `border-radius: 12px`\n - [ ] Box shadow: `box-shadow: 0 4px 6px rgba(0,0,0,0.05)`\n - [ ] Form spacing: `space-y: 1.5rem` between elements\n- [ ] Design form inputs:\n - [ ] Input styling: `border: 2px solid #e5e7eb`, `border-radius: 8px`\n - [ ] Padding: `padding: 0.75rem 1rem`\n - [ ] Focus state: `border-color: #3b82f6`, `outline: none`, `box-shadow: 0 0 0 3px rgba(59,130,246,0.1)`\n - [ ] Error state: `border-color: #ef4444`, red focus ring\n - [ ] Success state: `border-color: #10b981`, green focus ring\n- [ ] Style form labels:\n - [ ] Label: `font-weight: 500`, `color: #374151`, `margin-bottom: 0.5rem`\n - [ ] Required indicator: red asterisk\n - [ ] Helper text: `font-size: 0.875rem`, `color: #6b7280`\n- [ ] Design validation feedback:\n - [ ] Error messages: `color: #ef4444`, `font-size: 0.875rem`\n - [ ] Success indicators: green checkmark icons\n - [ ] Real-time validation styling\n- [ ] Style continue button:\n - [ ] Primary button: `background: #059669`, `color: white`\n - [ ] Full width: `width: 100%`, `padding: 1rem`\n - [ ] Disabled state: `opacity: 0.5`, `cursor: not-allowed`\n - [ ] Loading state: spinner animation\n- [ ] Style tour details section:\n - [ ] Container: `background: #f9fafb`, `padding: 2rem`, `border-radius: 12px`\n - [ ] Sticky positioning: `position: sticky`, `top: 2rem`\n- [ ] Design tour image display:\n - [ ] Hero image: `aspect-ratio: 16/9`, `border-radius: 8px`\n - [ ] Image: `object-fit: cover`, `width: 100%`\n - [ ] Loading placeholder with blur effect\n- [ ] Style tour information:\n - [ ] Title: `font-size: 1.75rem`, `font-weight: 700`, `color: #1f2937`\n - [ ] Description: `color: #4b5563`, `line-height: 1.6`\n - [ ] Price: `font-size: 1.5rem`, `font-weight: 700`, `color: #059669`\n- [ ] Design lists (inclusions/exclusions):\n - [ ] List container: `background: white`, `border-radius: 8px`, `padding: 1rem`\n - [ ] List items: `padding: 0.5rem 0`, bullet points or checkmarks\n - [ ] Alternating background colors for readability\n- [ ] Add responsive design:\n - [ ] Mobile: Stack form above tour details\n - [ ] Tablet: Maintain side-by-side with adjusted proportions\n - [ ] Desktop: Full side-by-side layout\n - [ ] Proper touch targets for mobile (min 44px)\n- [ ] Implement loading states:\n - [ ] Form skeleton with animated placeholders\n - [ ] Tour details skeleton matching content structure\n - [ ] Progressive loading of images and content\n- [ ] Add micro-interactions:\n - [ ] Input focus animations\n - [ ] Button hover effects\n - [ ] Form submission feedback\n - [ ] Smooth transitions between states\n\n### ✅ Task 4.3: Enhance Payment Page Styling\n**File**: `/js/payment-page.js` + CSS\n\n**Subtasks:**\n- [ ] Update existing payment page styling:\n - [ ] Maintain current functionality\n - [ ] Apply consistent design system\n - [ ] Match landing and form page aesthetics\n- [ ] Style review cards:\n - [ ] Consistent card styling with other pages\n - [ ] Clear information hierarchy\n - [ ] Proper spacing and typography\n- [ ] Enhance payment buttons:\n - [ ] Primary action styling for \"Pay Now\"\n - [ ] Secondary styling for \"Back\" button\n - [ ] Loading states and disabled states\n- [ ] Style error and success states:\n - [ ] Consistent alert styling\n - [ ] Clear visual hierarchy for different message types\n - [ ] Proper spacing and readability\n- [ ] Add responsive design:\n - [ ] Mobile-optimized payment flow\n - [ ] Touch-friendly button sizing\n - [ ] Readable text on small screens\n\n---\n\n## PHASE 5: TESTING & OPTIMIZATION\n\n### ✅ Task 5.1: Image Caching Implementation\n**File**: `/js/utils.js`\n\n**Subtasks:**\n- [ ] Implement robust image caching:\n - [ ] `cacheImage(url, key)` function:\n - [ ] Fetch image with proper error handling\n - [ ] Convert to base64 using FileReader or canvas\n - [ ] Compress images if too large (>500KB)\n - [ ] Store with timestamp for expiration\n - [ ] `getCachedImage(key)` function:\n - [ ] Retrieve from localStorage\n - [ ] Check expiration timestamp\n - [ ] Return base64 data URL or null\n - [ ] `isCacheExpired(key, maxAge)` function:\n - [ ] Compare stored timestamp with current time\n - [ ] Default expiration: 7 days\n - [ ] Handle corrupted timestamp data\n- [ ] Add cache management:\n - [ ] `getCacheSize()` - Calculate total cache size in bytes\n - [ ] `clearExpiredCache()` - Remove expired items\n - [ ] `clearImageCache()` - Remove all cached images\n - [ ] `getCacheStats()` - Return cache statistics\n- [ ] Implement cache size limits:\n - [ ] Maximum cache size: 50MB\n - [ ] LRU (Least Recently Used) eviction policy\n - [ ] Automatic cleanup when approaching limits\n - [ ] User notification when cache is full\n- [ ] Add cache optimization:\n - [ ] Image compression before caching\n - [ ] Progressive JPEG support\n - [ ] WebP format detection and support\n - [ ] Fallback to original URL if caching fails\n- [ ] Test caching performance:\n - [ ] Measure cache hit/miss ratios\n - [ ] Test cache persistence across browser sessions\n - [ ] Verify cache invalidation works correctly\n - [ ] Test cache behavior with network failures\n\n### ✅ Task 5.2: Error Handling & Recovery\n**All Files**\n\n**Subtasks:**\n- [ ] Add comprehensive error boundaries:\n - [ ] Network failure handling:\n - [ ] Detect offline/online status\n - [ ] Queue requests when offline\n - [ ] Retry when connection restored\n - [ ] Show appropriate offline messages\n - [ ] API error responses:\n - [ ] Parse error messages from API responses\n - [ ] Handle different HTTP status codes appropriately\n - [ ] Provide user-friendly error messages\n - [ ] Log errors for debugging\n - [ ] Invalid data handling:\n - [ ] Validate API response structure\n - [ ] Handle missing required fields\n - [ ] Sanitize user inputs\n - [ ] Prevent XSS attacks\n- [ ] Implement retry mechanisms:\n - [ ] Automatic retry for transient failures:\n - [ ] Network timeouts\n - [ ] 5xx server errors\n - [ ] Rate limiting (429) with backoff\n - [ ] Manual retry options:\n - [ ] \"Try Again\" buttons for failed operations\n - [ ] \"Refresh\" options for stale data\n - [ ] Clear instructions for users\n - [ ] Exponential backoff:\n - [ ] Start with 1 second delay\n - [ ] Double delay for each retry\n - [ ] Maximum delay of 30 seconds\n - [ ] Maximum of 3 retry attempts\n- [ ] Add user feedback systems:\n - [ ] Loading indicators:\n - [ ] Skeleton screens for content loading\n - [ ] Spinner animations for actions\n - [ ] Progress bars for multi-step processes\n - [ ] Error messages:\n - [ ] Clear, actionable error descriptions\n - [ ] Suggestions for resolution\n - [ ] Contact information for support\n - [ ] Success confirmations:\n - [ ] Visual feedback for completed actions\n - [ ] Clear next steps for users\n - [ ] Celebration animations for major milestones\n- [ ] Implement graceful degradation:\n - [ ] Fallback content when APIs fail\n - [ ] Offline mode with cached data\n - [ ] Progressive enhancement approach\n - [ ] Accessibility in error states\n\n### ✅ Task 5.3: Final Integration Testing\n**All Files**\n\n**Subtasks:**\n- [ ] Test complete user flow:\n - [ ] Demo modal functionality:\n - [ ] Shows on first visit\n - [ ] Doesn't show on subsequent visits\n - [ ] Properly stores acknowledgment\n - [ ] Handles corrupted storage data\n - [ ] Landing page functionality:\n - [ ] All 3 tours load correctly\n - [ ] Hover effects work smoothly\n - [ ] Images cache and load from cache\n - [ ] Tour selection navigates correctly\n - [ ] Form page functionality:\n - [ ] Form validation works correctly\n - [ ] Tour details display properly\n - [ ] Navigation between steps works\n - [ ] Data persists across navigation\n - [ ] Payment flow functionality:\n - [ ] All API calls work with new endpoints\n - [ ] CSRF tokens are handled correctly\n - [ ] Nonce exchange works properly\n - [ ] ZenPay integration still functions\n- [ ] Test caching functionality:\n - [ ] Images cache on first load\n - [ ] Cached images load on subsequent visits\n - [ ] Cache expiration works correctly\n - [ ] Cache cleanup functions properly\n - [ ] Demo acknowledgment persists correctly\n- [ ] Performance testing:\n - [ ] Page load times under 3 seconds\n - [ ] Smooth animations (60fps)\n - [ ] Memory usage stays reasonable\n - [ ] No memory leaks during navigation\n - [ ] Image loading doesn't block UI\n- [ ] Cross-browser testing:\n - [ ] Chrome (latest 2 versions)\n - [ ] Firefox (latest 2 versions)\n - [ ] Safari (latest 2 versions)\n - [ ] Edge (latest 2 versions)\n - [ ] Mobile browsers (iOS Safari, Chrome Mobile)\n- [ ] Responsive design testing:\n - [ ] Mobile phones (320px - 768px)\n - [ ] Tablets (768px - 1024px)\n - [ ] Desktop (1024px+)\n - [ ] Ultra-wide screens (1440px+)\n- [ ] Accessibility testing:\n - [ ] Keyboard navigation works throughout\n - [ ] Screen reader compatibility\n - [ ] Color contrast meets WCAG standards\n - [ ] Focus indicators are visible\n- [ ] Security testing:\n - [ ] XSS prevention in user inputs\n - [ ] CSRF tokens work correctly\n - [ ] No sensitive data in localStorage\n - [ ] Proper cookie handling\n- [ ] Error scenario testing:\n - [ ] Network failures at each step\n - [ ] Invalid API responses\n - [ ] Corrupted cache data\n - [ ] Browser storage limitations\n\n---\n\n## IMPLEMENTATION ORDER\n\n1. **Phase 1**: Infrastructure (Config, Utils, Demo Modal) - **~15 tasks**\n2. **Phase 2**: File Reorganization (Split components) - **~25 tasks** \n3. **Phase 3**: API Integration (Update endpoints, security) - **~20 tasks**\n4. **Phase 4**: UI Implementation (Modern design, animations) - **~30 tasks**\n5. **Phase 5**: Testing & Optimization (Caching, error handling) - **~35 tasks**\n\n**Total: ~125 actionable tasks**\n\n---\n\n## SUCCESS CRITERIA\n\n- [ ] Demo modal shows once per user, stored encoded in localStorage\n- [ ] 3-card landing page with smooth hover effects and real images\n- [ ] Real tour data loaded from `https://server.zenithpayments.support/api/v1/tour/{id}`\n- [ ] Proper security flow with CSRF tokens and nonce handling\n- [ ] Images cached in localStorage with expiration and size management\n- [ ] No breaking changes to existing payment flow\n- [ ] Modern, professional UI/UX with consistent design system\n- [ ] Responsive design works on mobile, tablet, and desktop\n- [ ] Comprehensive error handling provides good user experience\n- [ ] All API calls use correct endpoints with proper headers\n- [ ] Form validation works with real-time feedback\n- [ ] Performance optimized with caching and lazy loading\n- [ ] Cross-browser compatibility verified\n- [ ] Accessibility standards met (WCAG compliance)\n\n---\n\n## FRONTEND-SPECIFIC NOTES\n\n✅ **What Frontend Handles:**\n- All UI components and user interactions\n- API calls to backend endpoints\n- Client-side caching and storage\n- Form validation and user feedback\n- Image loading and caching\n- Browser compatibility and responsive design\n- Error handling and retry logic\n- Demo modal and user onboarding\n\n❌ **What Backend Handles (NOT in this plan):**\n- API endpoint implementation\n- Database operations\n- Server-side validation\n- Payment processing callbacks\n- Security token generation\n- CORS configuration\n- Cookie management (server-side)\n\n---\n\n**Ready to start implementation once this task list is approved!**",[],[280],"files",[148,168,180,187,198,208,218,228,238,247,257,268,278],"counts",{"_292":31,"_293":160,"_294":31,"_295":31},"pulls","branches","forks","envVars","contents",[298,301,304,307],{"_107":149,"_100":150,"_151":152,"_153":-5,"_154":138,"_155":156,"_157":158,"_109":299,"_104":160,"_161":162,"_163":-5,"_164":27,"_165":-5,"_103":300},["D",1751796984794],[150],{"_107":181,"_100":182,"_151":183,"_153":-5,"_154":138,"_155":184,"_157":158,"_109":302,"_104":160,"_161":162,"_163":-5,"_164":27,"_165":-5,"_103":303},["D",1751796976981],[182],{"_107":269,"_100":270,"_151":271,"_153":-5,"_154":138,"_155":137,"_157":158,"_109":305,"_104":273,"_161":274,"_163":275,"_164":27,"_165":-5,"_103":306},["D",1751833139120],[270],{"_107":279,"_100":280,"_151":281,"_153":-5,"_154":138,"_155":282,"_157":158,"_109":308,"_104":284,"_161":175,"_163":285,"_164":27,"_165":-5,"_103":309},["D",1751810583530],[280],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","routes/_app.x.$handle.$name.branches",{"_98":99,"_100":101,"_105":316,"_293":320},{"_107":108,"_100":101,"_109":317,"_111":-5,"_112":27,"_113":114,"_115":-5,"_116":-5,"_12":117,"_118":-5,"_119":27,"_120":-5,"_121":31,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_131":27,"_21":318,"_135":319},["D",1751609016214],{"_98":99,"_133":134},{"_104":137,"_100":42,"_107":138,"_139":108,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":101,"_145":99},[321],{"_107":138,"_109":322,"_323":324,"_100":42,"_139":108,"_104":137,"_140":-5,"_141":-5,"_325":326,"_111":-5},["D",1751609016214],"updatedAt",["D",1751833139120],"lockfileKey","1751833139517-esm.town_v_ianmenethil_TP-Token-Demo-Frontend@256-main","routes/_app","actionData","errors"]

Branches1

Branches
1