product details implementation

docs/Product-Details-Report.md

@@ -0,0 +1,157 @@
+# Product Details Report
+
+## Scope
+
+Sprint 6 implemented the product details route and UI using the frozen architecture and the existing Product Domain. No authentication, payment, bootstrap, or backend API contracts were changed.
+
+The route and UI consume ProductFacade only. The new product details module does not use DTOs, HttpClient, environment configuration, or storage.
+
+## Implemented Route
+
+- `/product/:id`
+
+Legacy `/item/:id` now redirects to `/product/:id` for compatibility.
+
+## Implemented Module
+
+### Product Details Container
+
+- `src/app/features/website/product/containers/product-details-container.component.ts`
+- `src/app/features/website/product/containers/product-details-container.component.html`
+- `src/app/features/website/product/containers/product-details-container.component.scss`
+
+Responsibilities implemented:
+
+- Reads the route id.
+- Loads the product through `ProductFacade` only.
+- Handles loading, error, and missing-product states.
+- Computes and passes the Product Domain Model to reusable child components.
+- Loads related products from the same category through `ProductFacade`.
+- Supports variant selection and computed price/stock updates.
+
+### Reusable Components
+
+#### Product Gallery
+
+- `src/app/features/website/product/components/product-gallery/product-gallery.component.ts`
+- `src/app/features/website/product/components/product-gallery/product-gallery.component.html`
+- `src/app/features/website/product/components/product-gallery/product-gallery.component.scss`
+
+Features:
+
+- Main image
+- Thumbnail list
+- Video-aware media rendering
+- Future multi-image support through the existing media array shape
+
+#### Product Information
+
+- `src/app/features/website/product/components/product-information/product-information.component.ts`
+- `src/app/features/website/product/components/product-information/product-information.component.html`
+- `src/app/features/website/product/components/product-information/product-information.component.scss`
+
+Features:
+
+- Title
+- Price
+- Discount
+- Badges
+- Stock
+- Add-to-cart output
+
+#### Variant Selector
+
+- `src/app/features/website/product/components/variant-selector/variant-selector.component.ts`
+- `src/app/features/website/product/components/variant-selector/variant-selector.component.html`
+- `src/app/features/website/product/components/variant-selector/variant-selector.component.scss`
+
+Features:
+
+- Color selection
+- Size selection
+- Fallback display for single-variant products
+
+#### Delivery Information
+
+- `src/app/features/website/product/components/delivery-information/delivery-information.component.ts`
+- `src/app/features/website/product/components/delivery-information/delivery-information.component.html`
+- `src/app/features/website/product/components/delivery-information/delivery-information.component.scss`
+
+Features:
+
+- Digital delivery state
+- Delivery option list
+- Currency display
+
+#### Product Description
+
+- `src/app/features/website/product/components/product-description/product-description.component.ts`
+- `src/app/features/website/product/components/product-description/product-description.component.html`
+- `src/app/features/website/product/components/product-description/product-description.component.scss`
+
+Features:
+
+- Simple description
+- Structured specification fields
+- Plain description fallback
+
+#### Related Products
+
+- `src/app/features/website/product/components/related-products/related-products.component.ts`
+- `src/app/features/website/product/components/related-products/related-products.component.html`
+- `src/app/features/website/product/components/related-products/related-products.component.scss`
+
+Features:
+
+- Uses existing ProductFacade results
+- Excludes the current product
+- Reuses the shared product card
+
+## Product Domain Usage
+
+All product details UI code uses Product Domain models and ProductFacade. Backend DTOs remain isolated to the domain/provider layer.
+
+The container derives all view state locally from the product model:
+
+- selected color
+- selected size
+- effective price
+- effective currency
+- effective remaining stock
+- gallery selection
+- related products
+
+## Navigation Updates
+
+Updated links to use the new route surface:
+
+- product card navigation
+- carousel item links
+- cart item links
+- category item links
+- catalog module product navigation
+
+## Validation
+
+Completed checks:
+
+- Product loads through `ProductFacade`.
+- Variant changes update displayed price.
+- Stock changes correctly when variant selection changes.
+- Gallery works with primary and thumbnail media.
+- Related products work through the same-category product query.
+- Components are reusable and input/output-only.
+- No DTO usage in the new product details module.
+- No `HttpClient` in the new product details UI.
+- No storage or environment usage in the new product details UI.
+- Build passes.
+
+Build validation:
+
+```bash
+npm run build
+```
+
+## Stop Point
+
+Product Details Module implementation is complete for Sprint 6. Stop here for approval before starting any further module work.