bmc_hub/docs/WEBSHOP_FRONTEND_PROMPT.md

# GitHub Copilot Instructions - BMC Webshop (Frontend)

## Project Overview

BMC Webshop er en kunde-styret webshop løsning, hvor **BMC Hub** ejer indholdet, **API Gateway** (`apigateway.bmcnetworks.dk`) styrer logikken, og **Webshoppen** (dette projekt) kun viser og indsamler input.

**Tech Stack**: React/Next.js/Vue.js (vælg én), TypeScript, Tailwind CSS eller Bootstrap 5

---

## 3-Lags Arkitektur

```
┌─────────────────────────────────────────────────────────┐
│  TIER 1: BMC HUB (Admin System)                         │
│  - Administrerer webshop-opsætning                       │
│  - Pusher data til Gateway                               │
│  - Poller Gateway for nye ordrer                         │
│  https://hub.bmcnetworks.dk                              │
└─────────────────────────────────────────────────────────┘
                      ▼ (Push config)
┌─────────────────────────────────────────────────────────┐
│  TIER 2: API GATEWAY (Forretningslogik + Database)      │
│  - Modtager og gemmer webshop-config fra Hub            │
│  - Ejer PostgreSQL database med produkter, priser, ordrer│
│  - Håndterer email/OTP login                             │
│  - Beregner priser og filtrerer varer                    │
│  - Leverer sikre API'er til Webshoppen                   │
│  https://apigateway.bmcnetworks.dk                       │
└─────────────────────────────────────────────────────────┘
                      ▲ (API calls)
┌─────────────────────────────────────────────────────────┐
│  TIER 3: WEBSHOP (Dette projekt - Kun Frontend)         │
│  - Viser logo, tekster, produkter, priser                │
│  - Shopping cart (kun i frontend state)                  │
│  - Sender ordre som payload til Gateway                  │
│  - INGEN forretningslogik eller datapersistering        │
└─────────────────────────────────────────────────────────┘
```

---

## Webshoppens Ansvar

### ✅ Hvad Webshoppen GØR
- Viser kundens logo, header-tekst, intro-tekst (fra Gateway)
- Viser produktkatalog med navn, beskrivelse, pris (fra Gateway)
- Samler kurv i browser state (localStorage/React state)
- Sender ordre til Gateway ved checkout
- Email/OTP login flow (kalder Gateway's auth-endpoint)

### ❌ Hvad Webshoppen IKKE GØR
- Gemmer INGEN data (hverken kurv, produkter, eller ordrer)
- Beregner INGEN priser eller avance
- Håndterer INGEN produkt-filtrering (Gateway leverer klar liste)
- Snakker IKKE direkte med Hub eller e-conomic
- Håndterer IKKE betalingsgateway (Gateway's ansvar)

---

## API Gateway Kontrakt

Base URL: `https://apigateway.bmcnetworks.dk`

### 1. Login med Email + Engangskode

**Step 1: Anmod om engangskode**
```http
POST /webshop/auth/request-code
Content-Type: application/json

{
  "email": "kunde@firma.dk"
}

Response 200:
{
  "success": true,
  "message": "Engangskode sendt til kunde@firma.dk"
}
```

**Step 2: Verificer kode og få JWT token**
```http
POST /webshop/auth/verify-code
Content-Type: application/json

{
  "email": "kunde@firma.dk",
  "code": "123456"
}

Response 200:
{
  "success": true,
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
  "customer_id": 42,
  "expires_at": "2026-01-13T15:00:00Z"
}
```

### 2. Hent Webshop Context (Komplet Webshop-Data)

```http
GET /webshop/{customer_id}/context
Authorization: Bearer {jwt_token}

Response 200:
{
  "customer_id": 42,
  "company_name": "Advokatfirma A/S",
  "config_version": "2026-01-13T12:00:00Z",
  "branding": {
    "logo_url": "https://apigateway.bmcnetworks.dk/assets/logos/42.png",
    "header_text": "Velkommen til vores webshop",
    "intro_text": "Bestil nemt og hurtigt direkte her.",
    "primary_color": "#0f4c75",
    "accent_color": "#3282b8"
  },
  "products": [
    {
      "id": 101,
      "ean": "5711045071324",
      "product_number": "FIRE-001",
      "name": "Cisco Firewall ASA 5506-X",
      "description": "Next-generation firewall med 8 porte",
      "unit": "stk",
      "base_price": 8500.00,
      "calculated_price": 9350.00,
      "margin_percent": 10.0,
      "currency": "DKK",
      "stock_available": true,
      "category": "Network Security"
    }
  ],
  "allowed_payment_methods": ["invoice", "card"],
  "min_order_amount": 500.00,
  "shipping_cost": 0.00
}
```

### 3. Opret Ordre

```http
POST /webshop/orders
Authorization: Bearer {jwt_token}
Content-Type: application/json

{
  "customer_id": 42,
  "order_items": [
    {
      "product_id": 101,
      "quantity": 2,
      "unit_price": 9350.00
    }
  ],
  "shipping_address": {
    "company_name": "Advokatfirma A/S",
    "street": "Hovedgaden 1",
    "postal_code": "1000",
    "city": "København K",
    "country": "DK"
  },
  "delivery_note": "Levering til bagsiden, ring på døren",
  "total_amount": 18700.00
}

Response 201:
{
  "success": true,
  "order_id": "ORD-2026-00123",
  "status": "pending",
  "total_amount": 18700.00,
  "created_at": "2026-01-13T14:30:00Z",
  "message": "Ordre modtaget. Du vil modtage en bekræftelse på email."
}
```

---

## Frontend Krav

### Mandatory Features

1. **Responsive Design**
   - Mobile-first approach
   - Breakpoints: 576px (mobile), 768px (tablet), 992px (desktop)

2. **Dark Mode Support**
   - Toggle mellem light/dark theme
   - Gem præference i localStorage

3. **Shopping Cart**
   - Gem kurv i localStorage (persist ved page reload)
   - Vis antal varer i header badge
   - Real-time opdatering af total pris

4. **Login Flow**
   - Email input → Send kode
   - Vis countdown timer (5 minutter)
   - Verificer kode → Få JWT token
   - Auto-logout ved token expiry

5. **Product Catalog**
   - Vis produkter i grid layout
   - Søgning i produktnavn/beskrivelse
   - "Tilføj til kurv" knap

6. **Checkout Flow**
   - Vis kurv-oversigt
   - Leveringsadresse
   - "Bekræft ordre" knap
   - Success/error feedback

### Design Guidelines

**Stil**: Minimalistisk, clean, "Nordic" æstetik

**Farver** (kan overskrives af Gateway's branding):
- Primary: `#0f4c75` (Deep Blue)
- Accent: `#3282b8` (Bright Blue)

---

## Security

1. **HTTPS Only** - Al kommunikation med Gateway over HTTPS
2. **JWT Token** - Gem i localStorage, send i Authorization header
3. **Input Validation** - Validér email, antal, adresse
4. **CORS** - Gateway skal have CORS headers

---

## Common Pitfalls to Avoid

1. **Gem IKKE data i Webshoppen** - alt kommer fra Gateway
2. **Beregn IKKE priser selv** - Gateway leverer `calculated_price`
3. **Snakker IKKE direkte med Hub** - kun via Gateway
4. **Gem IKKE kurv i database** - kun localStorage
5. **Hardcode IKKE customer_id** - hent fra JWT token