# Storefront Frontend Features - Testing Checklist

**Last Updated:** 2026-01-08
**Total Pages:** 15+
**Status:** All Working

---

## 1. Homepage

### Homepage Display
| Test Case | Route | Method | Status |
|-----------|-------|--------|--------|
| Load homepage | `/storefront/` | GET | Working |

**UI Elements to Test:**
- [ ] Hero section with store branding
- [ ] Store name and tagline display
- [ ] Store description
- [ ] Featured categories section
- [ ] Featured products section
- [ ] "Shop Now" call-to-action button
- [ ] Dark mode toggle in header
- [ ] Responsive layout (mobile/tablet/desktop)

---

## 2. Product Catalog

### Products List
| Test Case | Route | Method | Status |
|-----------|-------|--------|--------|
| Browse all products | `/storefront/products` | GET | Working |
| API: List products | `/api/v1/storefront/products` | GET | Working |
| Filter featured products | `/api/v1/storefront/products?is_featured=true` | GET | Working |
| Pagination | `/api/v1/storefront/products?skip=&limit=` | GET | Working |

**UI Elements to Test:**
- [ ] Product grid display (2-4 columns)
- [ ] Product cards with image, name, price
- [ ] Category filter dropdown
- [ ] Sort options (newest, price low-high, price high-low, popular)
- [ ] Search input
- [ ] Pagination controls
- [ ] Add to cart from product card
- [ ] Placeholder images fallback

**Query Parameters:**
- skip (pagination offset)
- limit (items per page, default: 100, max: 1000)
- search (product name search)
- is_featured (boolean filter)

---

## 3. Product Detail

### Product Detail Page
| Test Case | Route | Method | Status |
|-----------|-------|--------|--------|
| View product details | `/storefront/products/{product_id}` | GET | Working |
| API: Get product | `/api/v1/storefront/products/{product_id}` | GET | Working |

**UI Elements to Test:**
- [ ] Main product image
- [ ] Image gallery with thumbnails
- [ ] Thumbnail navigation
- [ ] Product title
- [ ] Brand display
- [ ] Category display
- [ ] SKU display
- [ ] Regular price
- [ ] Sale price (if applicable)
- [ ] Discount badge
- [ ] Product description
- [ ] Quantity selector (+/- buttons)
- [ ] Add to Cart button
- [ ] Breadcrumb navigation
- [ ] Related products (future)

---

## 4. Search

### Product Search
| Test Case | Route | Method | Status |
|-----------|-------|--------|--------|
| Search page | `/storefront/search` | GET | Working |
| Search with query | `/storefront/search?q=` | GET | Working |
| API: Search products | `/api/v1/storefront/products/search?q=` | GET | Working |

**UI Elements to Test:**
- [ ] Search input field
- [ ] Search button
- [ ] Result count display
- [ ] Search query in header
- [ ] Product grid for results
- [ ] Empty state (no query)
- [ ] No results state
- [ ] Pagination for results

**Search Fields (Backend):**
- Product names
- Descriptions
- SKUs
- Brands
- GTINs

**Query Parameters:**
- q (search query, required, min 1 char)
- skip (pagination offset)
- limit (items per page, default: 50, max: 100)

---

## 5. Shopping Cart

### Cart Management
| Test Case | Route | Method | Status |
|-----------|-------|--------|--------|
| View cart page | `/storefront/cart` | GET | Working |
| API: Get cart | `/api/v1/storefront/cart/{session_id}` | GET | Working |
| API: Add to cart | `/api/v1/storefront/cart/{session_id}/items` | POST | Working |
| API: Update quantity | `/api/v1/storefront/cart/{session_id}/items/{product_id}` | PUT | Working |
| API: Remove item | `/api/v1/storefront/cart/{session_id}/items/{product_id}` | DELETE | Working |
| API: Clear cart | `/api/v1/storefront/cart/{session_id}` | DELETE | Working |

**UI Elements to Test:**
- [ ] Cart item list
- [ ] Product image thumbnails
- [ ] Product names (clickable)
- [ ] Unit prices
- [ ] Quantity inputs
- [ ] Increment/decrement buttons
- [ ] Remove item button
- [ ] Line totals
- [ ] Cart subtotal
- [ ] Continue shopping link
- [ ] Proceed to checkout button
- [ ] Empty cart state
- [ ] Cart count badge in header

**Add to Cart Request:**
```json
{
  "product_id": 123,
  "quantity": 1
}
```

**Update Quantity Request:**
```json
{
  "quantity": 2
}
```

---

## 6. Checkout

### Checkout Process
| Test Case | Route | Method | Status |
|-----------|-------|--------|--------|
| Checkout page | `/storefront/checkout` | GET | Working |
| API: Place order | `/api/v1/storefront/orders` | POST | Working |

### Step 1: Contact & Shipping
**Form Fields:**
- [ ] Email address (required)
- [ ] First name (required)
- [ ] Last name (required)
- [ ] Phone number
- [ ] Shipping address line 1 (required)
- [ ] Shipping address line 2
- [ ] Postal code (required)
- [ ] City (required)
- [ ] Country selector (required)

### Step 2: Billing & Shipping Method
**Form Fields:**
- [ ] Same as shipping checkbox
- [ ] Billing address line 1
- [ ] Billing address line 2
- [ ] Billing postal code
- [ ] Billing city
- [ ] Billing country
- [ ] Shipping method selector

### Step 3: Order Review
**UI Elements:**
- [ ] Order items summary
- [ ] Quantities and prices
- [ ] Subtotal
- [ ] Shipping cost
- [ ] Tax amount
- [ ] Order total
- [ ] Terms acceptance checkbox
- [ ] Place order button
- [ ] Loading state during submission

**Place Order Request:**
```json
{
  "email": "customer@example.com",
  "first_name": "John",
  "last_name": "Doe",
  "phone": "+352123456",
  "ship_address_line_1": "123 Main St",
  "ship_postal_code": "1234",
  "ship_city": "Luxembourg",
  "ship_country": "LU",
  "bill_address_line_1": "123 Main St",
  "bill_postal_code": "1234",
  "bill_city": "Luxembourg",
  "bill_country": "LU",
  "session_id": "cart-session-id"
}
```

---

## 7. Authentication

### Login
| Test Case | Route | Method | Status |
|-----------|-------|--------|--------|
| Login page | `/storefront/account/login` | GET | Working |
| API: Login | `/api/v1/storefront/auth/login` | POST | Working |

**Form Fields:**
- [ ] Email/username (required)
- [ ] Password (required)
- [ ] Forgot password link
- [ ] Register link

**Login Request:**
```json
{
  "email_or_username": "customer@example.com",
  "password": "password123"
}
```

**Response:**
- access_token
- token_type ("bearer")
- expires_in (seconds)
- user (profile object)

### Registration
| Test Case | Route | Method | Status |
|-----------|-------|--------|--------|
| Register page | `/storefront/account/register` | GET | Working |
| API: Register | `/api/v1/storefront/auth/register` | POST | Working |

**Form Fields:**
- [ ] First name (required)
- [ ] Last name (required)
- [ ] Email (required, unique per store)
- [ ] Password (required, min 8 chars, letter + digit)
- [ ] Confirm password (required, must match)
- [ ] Phone (optional)
- [ ] Login link

**Validation Tests:**
- [ ] Email already exists error
- [ ] Password too short error
- [ ] Password missing letter/digit error
- [ ] Passwords don't match error

**Registration Request:**
```json
{
  "email": "newcustomer@example.com",
  "password": "password123",
  "first_name": "Jane",
  "last_name": "Doe",
  "phone": "+352123456"
}
```

### Forgot Password
| Test Case | Route | Method | Status |
|-----------|-------|--------|--------|
| Forgot password page | `/storefront/account/forgot-password` | GET | Working |
| API: Request reset | `/api/v1/storefront/auth/forgot-password` | POST | Working |

**Form Fields:**
- [ ] Email (required)
- [ ] Submit button
- [ ] Back to login link

**Request:**
```json
{
  "email": "customer@example.com"
}
```

**Note:** Returns generic message regardless of email existence (security).

### Reset Password
| Test Case | Route | Method | Status |
|-----------|-------|--------|--------|
| Reset password page | `/storefront/account/reset-password` | GET | Working |
| API: Reset password | `/api/v1/storefront/auth/reset-password` | POST | Working |

**Form Fields:**
- [ ] Reset token (auto-filled from URL)
- [ ] New password (required)
- [ ] Confirm password (required)

**Request:**
```json
{
  "reset_token": "token-from-email",
  "new_password": "newpassword123"
}
```

**Validation Tests:**
- [ ] Invalid/expired token error
- [ ] Password too weak error
- [ ] Passwords don't match error

### Logout
| Test Case | Route | Method | Status |
|-----------|-------|--------|--------|
| API: Logout | `/api/v1/storefront/auth/logout` | POST | Working |

---

## 8. Customer Dashboard

### Account Dashboard
| Test Case | Route | Method | Status |
|-----------|-------|--------|--------|
| Dashboard page | `/storefront/account/dashboard` | GET | Working |
| API: Get profile | `/api/v1/storefront/profile` | GET | Working |

**UI Elements to Test:**
- [ ] Welcome message with name
- [ ] Orders card (count, link)
- [ ] Profile card (email, link)
- [ ] Addresses card (link)
- [ ] Messages card (unread count badge, link)
- [ ] Quick stats display

---

## 9. Customer Profile

### Profile Management
| Test Case | Route | Method | Status |
|-----------|-------|--------|--------|
| Profile page | `/storefront/account/profile` | GET | Working |
| API: Get profile | `/api/v1/storefront/profile` | GET | Working |
| API: Update profile | `/api/v1/storefront/profile` | PUT | Working |

**Profile Form Fields:**
- [ ] First name
- [ ] Last name
- [ ] Email (with uniqueness validation)
- [ ] Phone
- [ ] Preferred language selector (en, fr, de, lb)
- [ ] Marketing consent toggle
- [ ] Save button

**Update Profile Request:**
```json
{
  "email": "newemail@example.com",
  "first_name": "John",
  "last_name": "Doe",
  "phone": "+352123456",
  "marketing_consent": true,
  "preferred_language": "en"
}
```

### Change Password
| Test Case | Route | Method | Status |
|-----------|-------|--------|--------|
| API: Change password | `/api/v1/storefront/profile/password` | PUT | Working |

**Password Change Form:**
- [ ] Current password (required)
- [ ] New password (required, min 8 chars)
- [ ] Confirm password (required)
- [ ] Save button

**Request:**
```json
{
  "current_password": "oldpassword123",
  "new_password": "newpassword123",
  "confirm_password": "newpassword123"
}
```

---

## 10. Address Management

### Address List
| Test Case | Route | Method | Status |
|-----------|-------|--------|--------|
| Addresses page | `/storefront/account/addresses` | GET | Working |
| API: List addresses | `/api/v1/storefront/addresses` | GET | Working |

**UI Elements to Test:**
- [ ] Address cards grid
- [ ] Shipping/Billing type badges
- [ ] Default indicator
- [ ] Add address button
- [ ] Edit button per address
- [ ] Delete button per address
- [ ] Empty state

### Address CRUD
| Test Case | Route | Method | Status |
|-----------|-------|--------|--------|
| API: Get single address | `/api/v1/storefront/addresses/{address_id}` | GET | Working |
| API: Create address | `/api/v1/storefront/addresses` | POST | Working |
| API: Update address | `/api/v1/storefront/addresses/{address_id}` | PUT | Working |
| API: Set as default | `/api/v1/storefront/addresses/{address_id}/default` | PUT | Working |
| API: Delete address | `/api/v1/storefront/addresses/{address_id}` | DELETE | Working |

**Address Form Fields:**
- [ ] Address type (shipping/billing)
- [ ] First name (required)
- [ ] Last name (required)
- [ ] Merchant (optional)
- [ ] Address line 1 (required)
- [ ] Address line 2 (optional)
- [ ] Postal code (required)
- [ ] City (required)
- [ ] Country selector (required)
- [ ] Phone (optional)
- [ ] Set as default checkbox

**Create Address Request:**
```json
{
  "address_type": "shipping",
  "first_name": "John",
  "last_name": "Doe",
  "merchant": "ACME Inc",
  "address_line_1": "123 Main St",
  "address_line_2": "Apt 4",
  "postal_code": "1234",
  "city": "Luxembourg",
  "country": "LU",
  "phone": "+352123456",
  "is_default": true
}
```

**Limit:** Max 10 addresses per customer

---

## 11. Order History

### Orders List
| Test Case | Route | Method | Status |
|-----------|-------|--------|--------|
| Orders page | `/storefront/account/orders` | GET | Working |
| API: List orders | `/api/v1/storefront/orders` | GET | Working |

**UI Elements to Test:**
- [ ] Order cards list
- [ ] Order number display
- [ ] Order date
- [ ] Order total
- [ ] Status badge (color-coded)
- [ ] View details button
- [ ] Download invoice button
- [ ] Pagination
- [ ] Empty state

**Order Statuses:**
- [ ] pending (yellow)
- [ ] processing (blue)
- [ ] shipped (purple)
- [ ] delivered (green)
- [ ] cancelled (red)
- [ ] refunded (gray)

### Order Detail
| Test Case | Route | Method | Status |
|-----------|-------|--------|--------|
| Order detail page | `/storefront/account/orders/{order_id}` | GET | Working |
| API: Get order | `/api/v1/storefront/orders/{order_id}` | GET | Working |

**UI Elements to Test:**
- [ ] Order header (number, date, status)
- [ ] Order items list
- [ ] Item names and quantities
- [ ] Unit prices
- [ ] Line totals
- [ ] Shipping address
- [ ] Order summary (subtotal, shipping, tax, total)
- [ ] Download invoice button
- [ ] Back to orders link

### Invoice Download
| Test Case | Route | Method | Status |
|-----------|-------|--------|--------|
| API: Download invoice | `/api/v1/storefront/orders/{order_id}/invoice` | GET | Working |

**Note:** Only available for orders with status: processing, partially_shipped, shipped, delivered, completed

---

## 12. Customer Messaging

### Messages List
| Test Case | Route | Method | Status |
|-----------|-------|--------|--------|
| Messages page | `/storefront/account/messages` | GET | Working |
| API: List conversations | `/api/v1/storefront/messages` | GET | Working |
| API: Get unread count | `/api/v1/storefront/messages/unread-count` | GET | Working |

**UI Elements to Test:**
- [ ] Conversation list
- [ ] Filter tabs (All, Open, Closed)
- [ ] Subject display
- [ ] Last message time
- [ ] Unread badge
- [ ] Participant name
- [ ] Pagination
- [ ] Empty state

### Conversation Detail
| Test Case | Route | Method | Status |
|-----------|-------|--------|--------|
| API: Get conversation | `/api/v1/storefront/messages/{conversation_id}` | GET | Working |
| API: Send message | `/api/v1/storefront/messages/{conversation_id}/messages` | POST | Working |
| API: Mark as read | `/api/v1/storefront/messages/{conversation_id}/read` | PUT | Working |

**UI Elements to Test:**
- [ ] Message thread display
- [ ] Sender names and timestamps
- [ ] Message content
- [ ] Attachments with download links
- [ ] Image thumbnails
- [ ] Reply text area
- [ ] File attachment button
- [ ] Send button
- [ ] Closed conversation indicator

**Send Message Request:**
```json
{
  "content": "Hello, I have a question about my order..."
}
```
(with optional file attachments as multipart/form-data)

### Attachment Download
| Test Case | Route | Method | Status |
|-----------|-------|--------|--------|
| API: Download attachment | `/api/v1/storefront/messages/{conversation_id}/attachments/{attachment_id}` | GET | Working |
| API: Get thumbnail | `/api/v1/storefront/messages/{conversation_id}/attachments/{attachment_id}/thumbnail` | GET | Working |

---

## 13. Content Pages (CMS)

### CMS Pages
| Test Case | Route | Method | Status |
|-----------|-------|--------|--------|
| View content page | `/storefront/page/{slug}` | GET | Working |
| API: Get navigation | `/api/v1/storefront/content-pages/navigation` | GET | Working |
| API: Get page content | `/api/v1/storefront/content-pages/{slug}` | GET | Working |

**Common Pages to Test:**
- [ ] About Us (`/storefront/about`)
- [ ] Contact (`/storefront/contact`)
- [ ] Terms & Conditions (`/storefront/terms`)
- [ ] Privacy Policy (`/storefront/privacy`)
- [ ] Return Policy (`/storefront/returns`)
- [ ] FAQ (`/storefront/faq`)

**UI Elements to Test:**
- [ ] Page title
- [ ] Page content (HTML/Markdown rendered)
- [ ] Meta tags in head
- [ ] Breadcrumb navigation
- [ ] Last updated timestamp
- [ ] Navigation links in header/footer

---

## 14. Language Switching

### Language Selection
| Test Case | Route | Method | Status |
|-----------|-------|--------|--------|
| API: Set language | `/api/v1/language/set` | POST | Working |

**UI Elements to Test:**
- [ ] Language dropdown in header
- [ ] Current language flag/name
- [ ] Language options (EN, FR, DE, LB)
- [ ] Page reload after selection

**Supported Languages:**
- [ ] English (en) - GB flag
- [ ] French (fr) - FR flag
- [ ] German (de) - DE flag
- [ ] Luxembourgish (lb) - LU flag

---

## 15. Theme & Branding

### Visual Elements
**UI Elements to Test:**
- [ ] Dark/Light mode toggle
- [ ] Store logo display (light variant)
- [ ] Store logo display (dark variant)
- [ ] Custom favicon
- [ ] Primary brand color applied
- [ ] Hover states with dark variant
- [ ] Custom CSS applied
- [ ] Responsive design
- [ ] Mobile menu

---

## 16. Error Pages

### Error Handling
| Test Case | Route | Status |
|-----------|-------|--------|
| 400 Bad Request | Any invalid request | Working |
| 401 Unauthorized | Protected route without auth | Working |
| 403 Forbidden | Insufficient permissions | Working |
| 404 Not Found | Invalid URL | Working |
| 422 Unprocessable Entity | Validation errors | Working |
| 429 Too Many Requests | Rate limited | Working |
| 500 Server Error | Backend error | Working |
| 502 Bad Gateway | Proxy error | Working |

**Error Page Elements:**
- [ ] Error code display
- [ ] Error message
- [ ] Back to home link
- [ ] Consistent styling

---

## Summary

| Functional Area | Pages | Endpoints | Status |
|-----------------|-------|-----------|--------|
| Homepage | 1 | - | Working |
| Product Catalog | 1 | 2 | Working |
| Product Detail | 1 | 1 | Working |
| Search | 1 | 1 | Working |
| Shopping Cart | 1 | 5 | Working |
| Checkout | 1 | 1 | Working |
| Login | 1 | 1 | Working |
| Registration | 1 | 1 | Working |
| Password Reset | 2 | 2 | Working |
| Logout | - | 1 | Working |
| Dashboard | 1 | 1 | Working |
| Profile | 1 | 2 | Working |
| Addresses | 1 | 5 | Working |
| Orders | 2 | 3 | Working |
| Messages | 1 | 5 | Working |
| Content Pages | Dynamic | 2 | Working |
| Language | - | 1 | Working |
| Error Pages | 8 | - | Working |
| **TOTAL** | **15+** | **34** | **All Working** |

---

## Integration Test Flows

### Flow 1: Guest Checkout
1. [ ] Browse products on homepage
2. [ ] View product detail
3. [ ] Add to cart
4. [ ] View cart
5. [ ] Proceed to checkout
6. [ ] Fill shipping info
7. [ ] Fill billing info
8. [ ] Review order
9. [ ] Place order
10. [ ] Verify cart cleared

### Flow 2: Registered User Checkout
1. [ ] Register new account
2. [ ] Verify redirect to login
3. [ ] Login with new credentials
4. [ ] Add saved address
5. [ ] Browse and add products to cart
6. [ ] Checkout with saved address
7. [ ] Place order
8. [ ] View order in order history
9. [ ] Download invoice

### Flow 3: Password Reset
1. [ ] Go to forgot password
2. [ ] Submit email
3. [ ] Check for reset email
4. [ ] Click reset link
5. [ ] Enter new password
6. [ ] Verify redirect to login
7. [ ] Login with new password

### Flow 4: Customer Messaging
1. [ ] Login to account
2. [ ] Go to messages
3. [ ] View conversation
4. [ ] Send reply
5. [ ] Attach file
6. [ ] Verify message sent
7. [ ] Check unread count updates

### Flow 5: Search & Filter
1. [ ] Use search bar
2. [ ] Verify results
3. [ ] Apply sort option
4. [ ] Clear search
5. [ ] Use category filter
6. [ ] Verify filtered results