# 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.

## Sprint 11 - Product Experience 2.0

Sprint 11 extends Product Details UX with reusable modules and config-driven behavior. Architecture, Widget Manifest, Section Engine, bootstrap loading, authentication, and payment logic remain unchanged.

### New Reusable Modules

- Product Actions module
	- `Add to Cart`, `Buy Now`, `Wishlist`, `Compare`, `Share`, `Notify Me`
	- `productPage.actions` controls visibility of each action
- Product Gallery upgrade
	- Media renderer by type (`image`, `video`, `pdf`, `manual`, `warranty`)
	- Thumbnail strip + active media
	- Mobile swipe support
	- Zoom/fullscreen extension events (`zoomRequested`, `fullscreenRequested`)
- Product Specifications upgrade
	- Grouped attributes via `specificationGroups`
	- Translated labels via `labels` map
	- Backward-compatible fallback to `descriptionFields` and `attributes`
- Variant Selector upgrade
	- Dynamic option groups via `variantOptions`
	- No hardcoded variant keys required
	- Backward-compatible color/size fallback
- Reviews upgrade
	- Existing pagination preserved
	- Optional `load-more` mode added via config
	- Review form adds explicit validation and success state
- Questions & Answers upgrade
	- Existing list/answers/accepted-answer behavior preserved
	- Submission can be toggled off while component remains future-ready
- Related Products upgrade
	- Supports multiple backend-provided collections
	- Falls back to previous single related collection behavior

### Config Additions (backward-compatible)

`productPage` supports new optional keys:

```json
{
	"reviews": {
		"mode": "pages"
	},
	"questions": {
		"allowSubmission": true
	},
	"actions": {
		"enabled": true,
		"addToCart": true,
		"buyNow": true,
		"wishlist": true,
		"compare": true,
		"share": true,
		"notifyMe": true
	}
}
```

### Product JSON Extension Example

```json
{
	"itemID": 7812,
	"name": "Laptop Pro 14",
	"media": [
		{ "type": "image", "url": "https://cdn.example.com/items/7812/main.jpg" },
		{ "type": "video", "url": "https://cdn.example.com/items/7812/demo.mp4" },
		{ "type": "pdf", "url": "https://cdn.example.com/items/7812/spec.pdf" },
		{ "type": "manual", "url": "https://cdn.example.com/items/7812/manual.pdf" },
		{ "type": "warranty", "url": "https://cdn.example.com/items/7812/warranty.pdf" }
	],
	"specificationGroups": [
		{
			"key": "display",
			"label": "Display",
			"labels": { "en": "Display", "ru": "Экран", "hy": "Էկրան" },
			"attributes": [
				{ "key": "size", "value": "14", "unit": "inch", "labels": { "en": "Size", "ru": "Диагональ", "hy": "Չափ" } },
				{ "key": "resolution", "value": "2880x1800", "labels": { "en": "Resolution", "ru": "Разрешение", "hy": "Լուծաչափ" } }
			]
		}
	],
	"variantOptions": [
		{
			"key": "storage",
			"label": "Storage",
			"options": [
				{ "value": "256GB" },
				{ "value": "512GB" }
			]
		}
	],
	"relatedCollections": [
		{
			"id": "frequently-bought-together",
			"title": "Frequently bought together",
			"titles": { "ru": "Покупают вместе", "hy": "Հաճախ գնում են միասին" },
			"products": [9021, 9022, 9023]
		},
		{
			"id": "similar-products",
			"title": "Similar products",
			"products": [9030, 9031]
		}
	]
}
```

### Extension Points

- Gallery overlays can subscribe to `zoomRequested` and `fullscreenRequested` without changing gallery internals.
- Variant logic can add new option groups from backend by extending `variantOptions` only.
- Specifications can add locale labels without frontend refactor.
- Related collections can add campaign-specific blocks without changing section engine.
- Action visibility and review mode can be tuned from config without component rewrites.
