---
id: task-5
title: Build purchaser/shop page
status: Done
assignee: []
created_date: '2026-01-12 15:29'
updated_date: '2026-02-13 19:47'
labels: []
dependencies: []
priority: medium
---

## Description

<!-- SECTION:DESCRIPTION:BEGIN -->
Implement the purchaser page that displays products and allows customers to browse and purchase items.
<!-- SECTION:DESCRIPTION:END -->

## Acceptance Criteria
<!-- AC:BEGIN -->
- [x] #1 Set up project with chosen framework
- [x] #2 Create product listing component
- [x] #3 Create product detail view
- [x] #4 Integrate Zettle/Airtable product data
- [x] #5 Implement shopping cart functionality
- [x] #6 Integrate payment processing
<!-- AC:END -->

## Implementation Notes

<!-- SECTION:NOTES:BEGIN -->
Created Next.js 15 project with Directus SDK integration

Built components: ArtworkCard, ArtworkGrid, Navigation, Footer

Created pages: Home, Gallery, Gallery Detail, Series, Shop, Events, About, Contact

Connected to Directus CMS at https://katheryn-cms.jeffemmett.com

## 2026-02-04 Update

- Store page now uses dynamic rendering (force-dynamic) for reliable Directus data fetching
- 1700+ artwork images rendering correctly on store
- Field mapping in place: Directus `name` -> frontend `title`, `price_gbp`/`price_usd` -> `price`
- Cart functionality working with add-to-cart on artwork cards

## 2026-02-13 - Checkout, Shipping & Payment Complete

### Implemented:
- **Flat-rate shipping** by region: UK £10, Europe £25, International £40
  - New `/src/lib/shipping.ts` utility (single source of truth for rates)
  - Checkout page shows shipping cost dynamically based on country selection
  - Server-side recalculation prevents tampering
- **PayPal integration** fully wired:
  - PayPal sandbox credentials configured
  - Order creation API verifies prices against Directus, creates PayPal order with item_total + shipping breakdown
  - Capture API marks artworks as sold, updates order status
- **Order confirmation emails** via SMTP:
  - Created `orders@katheryntrenshaw.com` mailbox on Mailcow
  - Customer receives HTML confirmation with order breakdown
  - Katheryn receives notification email with customer/shipping details
  - Subtotal + shipping + total shown in both emails
- **Order confirmation page** shows full breakdown (subtotal, shipping, total)
- **Secret management**: Moved all credentials to `/opt/secrets/katheryn-website/.env`, docker-compose uses `env_file:` directive

### Files added/modified:
- `src/lib/shipping.ts` (new)
- `src/lib/paypal.ts`, `src/lib/email.ts`, `src/lib/directus-admin.ts`
- `src/app/api/orders/create/route.ts`, `src/app/api/orders/capture/route.ts`
- `src/components/paypal-checkout.tsx`
- `src/app/checkout/page.tsx`, `src/app/order-confirmation/page.tsx`
- `docker-compose.yml` (security hardening + env_file)

### Commits:
- 2b5f2cf Add flat-rate shipping, PayPal checkout, and order confirmation emails
- 2196cad Move secrets to env_file, add security hardening to docker-compose
- f90b35d Update env_file path to /opt/secrets/katheryn-website/.env
- 2966e3e Add PayPal/nodemailer deps and Order/OrderItem types
<!-- SECTION:NOTES:END -->