# Pricing Page Validation Checklist

**Last Updated:** 2025-01-27

## Overview

This document provides a comprehensive validation checklist for the new pricing page (`v2/pages/static_pricing_new.php`).

## Code Review Status

### ✅ Completed Implementation

1. **Page Structure**

   - ✅ Basic PHP structure with session and helpers
   - ✅ Proper DOCTYPE and HTML lang attribute
   - ✅ Complete head section with meta tags
   - ✅ Schema markup (Product, BreadcrumbList, WebPage)
   - ✅ Header and footer includes

2. **Sections Implemented**

   - ✅ Hero section with OMR badges
   - ✅ Pricing toggle (monthly/yearly)
   - ✅ Pricing cards (Starter, Plus, Pro)
   - ✅ Enterprise section with modal
   - ✅ Add-ons section with modals
   - ✅ Feature comparison table (integrated from original)
   - ✅ Customer testimonials (NEW)
   - ✅ FAQ section with accordion (NEW)
   - ✅ Company logos section
   - ✅ Final CTA section

3. **JavaScript Functionality**

   - ✅ Pricing toggle logic (`switchPricing`)
   - ✅ Enterprise modal functions (`openEnterpriseModal`, `closeEnterpriseModal`)
   - ✅ Proper initialization on page load
   - ✅ URL parameter handling
   - ✅ Analytics tracking integration
   - ✅ Functions exposed globally

4. **CSS Styling**

   - ✅ Dedicated pricing page CSS file
   - ✅ Pricing toggle styles
   - ✅ Modal styles
   - ✅ FAQ accordion styles
   - ✅ Logo slider animation
   - ✅ Screen reader only class
   - ✅ Minified (4.3 KB → 3.1 KB)

5. **Image Optimization**

   - ✅ OMR badges: WebP format, proper dimensions, fetchpriority="high" for hero
   - ✅ Company logos: Proper dimensions, lazy loading
   - ✅ Decoding="async" for performance
   - ✅ Proper alt text for all images

6. **Accessibility**

   - ✅ ARIA labels on interactive elements
   - ✅ Proper heading structure (h1, h2 with IDs)
   - ✅ Screen reader support (sr-only class)
   - ✅ Keyboard navigation support
   - ✅ Focus indicators
   - ✅ Semantic HTML

7. **Performance**
   - ✅ CSS minified
   - ✅ JavaScript minified
   - ✅ Images optimized
   - ✅ Lazy loading for below-fold images
   - ✅ Eager loading for hero images

## Manual Testing Required

### Functional Testing

- [ ] **Pricing Toggle**

  - [ ] Monthly/yearly toggle switches correctly
  - [ ] Prices update with animation
  - [ ] URL parameter updates (`?p=monthly` or `?p=yearly`)
  - [ ] Initial state respects URL parameter
  - [ ] Analytics tracking fires on toggle

- [ ] **Enterprise Modal**

  - [ ] Modal opens when "Anfrage stellen" clicked
  - [ ] Modal closes on X button
  - [ ] Modal closes on overlay click
  - [ ] Modal closes on Escape key
  - [ ] Form pre-fills with enterprise message
  - [ ] Form submission works
  - [ ] UTM tracking included in submission
  - [ ] Success message displays

- [ ] **Add-ons Modals**

  - [ ] Each add-on opens its respective modal
  - [ ] Modals close properly
  - [ ] Form submissions work
  - [ ] UTM tracking included

- [ ] **Feature Comparison Table**

  - [ ] Sticky header works on scroll
  - [ ] Collapsible sections expand/collapse
  - [ ] Mobile experience is usable
  - [ ] All features display correctly

- [ ] **FAQ Section**

  - [ ] Accordion items expand/collapse
  - [ ] Keyboard navigation works
  - [ ] Screen reader announces state changes
  - [ ] Smooth animations

- [ ] **Forms & Integrations**
  - [ ] HubSpot integration works (if applicable)
  - [ ] UTM tracking captures correctly
  - [ ] Form validation works
  - [ ] Error handling works

### Visual Testing

- [ ] **Desktop Browsers**

  - [ ] Chrome (latest)
  - [ ] Firefox (latest)
  - [ ] Safari (latest)
  - [ ] Edge (latest)

- [ ] **Mobile Devices**

  - [ ] iOS Safari
  - [ ] Android Chrome
  - [ ] Responsive breakpoints (320px, 768px, 1024px, 1280px)

- [ ] **Design Consistency**
  - [ ] Matches Ordio branding
  - [ ] Colors consistent
  - [ ] Typography consistent
  - [ ] Spacing consistent
  - [ ] Animations smooth

### Performance Testing

- [ ] **PageSpeed Insights**

  - [ ] Mobile score > 90
  - [ ] Desktop score > 90
  - [ ] LCP < 2.5s
  - [ ] FID < 100ms
  - [ ] CLS < 0.1

- [ ] **Loading Times**

  - [ ] First Contentful Paint < 1.8s
  - [ ] Time to Interactive < 3.8s
  - [ ] Total page load < 3s

- [ ] **Resource Optimization**
  - [ ] CSS file size reasonable
  - [ ] JavaScript file size reasonable
  - [ ] Images optimized
  - [ ] No render-blocking resources

### Accessibility Testing

- [ ] **Automated Tools**

  - [ ] WAVE accessibility checker
  - [ ] axe DevTools
  - [ ] Lighthouse accessibility audit

- [ ] **Manual Testing**

  - [ ] Screen reader (NVDA/JAWS/VoiceOver)
  - [ ] Keyboard navigation (Tab, Enter, Escape)
  - [ ] Color contrast (WCAG AA)
  - [ ] Focus indicators visible

- [ ] **WCAG Compliance**
  - [ ] Level A compliance
  - [ ] Level AA compliance (target)

## Known Issues / Notes

1. **Feature Comparison Table**: Uses dynamic file reading from original page. Consider extracting to separate include file for better maintainability.

2. **Enterprise Modal**: JavaScript handlers are in `enterprise-box.php`. The `openEnterpriseModal` function in `pricing-page.js` provides global access, but form submission logic remains in the include file.

3. **Company Logos**: Some logos are PNG format. Consider converting to WebP if file sizes are large.

## Deployment Checklist

- [ ] All files committed to version control
- [ ] Minified files generated (`npm run minify`)
- [ ] Test on staging environment (if available)
- [ ] Verify all includes load correctly
- [ ] Check for console errors
- [ ] Verify analytics tracking
- [ ] Test form submissions
- [ ] Monitor error logs after deployment

## Post-Deployment Monitoring

- [ ] Monitor analytics for pricing toggle usage
- [ ] Monitor form submission rates
- [ ] Check for JavaScript errors
- [ ] Monitor page load times
- [ ] Check for accessibility issues reported by users

## Next Steps

1. Complete manual testing checklist
2. Run PageSpeed Insights and optimize based on results
3. Run accessibility audit and fix any issues
4. Test on actual devices (not just browser dev tools)
5. Get stakeholder approval
6. Plan deployment strategy
7. Monitor post-deployment metrics