3dcd04396e
- Added views for webshop admin interface using FastAPI and Jinja2 templates. - Created initial SQL migration for webshop configurations, products, orders, and order items. - Defined module metadata in module.json for webshop. - Implemented HTML template for the webshop index page. - Documented frontend requirements and API contracts in WEBSHOP_FRONTEND_PROMPT.md. - Introduced scripts for generating conversation summaries and testing Whisper capabilities.
242 lines
7.2 KiB
Markdown
242 lines
7.2 KiB
Markdown
# 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
|