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

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

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)

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

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