# @isa/remission/shared/product

A collection of Angular standalone components for displaying product information in remission workflows, including product details, stock information, and shelf metadata.

## Overview

The Remission Shared Product library provides three specialized presentation components designed for remission list views and return receipt workflows. These components display comprehensive product information including images, pricing, stock levels, shelf locations, and product group classifications. All components follow OnPush change detection for optimal performance and use Angular signals for reactive data management.

## Table of Contents

- [Features](#features)
- [Quick Start](#quick-start)
- [Component API](#component-api)
- [Usage Examples](#usage-examples)
- [Component Details](#component-details)
- [Styling and Layout](#styling-and-layout)
- [Testing](#testing)
- [Architecture Notes](#architecture-notes)
- [Dependencies](#dependencies)

## Features

- **Product Information Display** - Comprehensive product presentation with image, contributors, name, price, format, and EAN
- **Stock Information Tracking** - Real-time stock display with current, remit, target, and ZOB quantities
- **Shelf Metadata Presentation** - Department, shelf label, product group, assortment, and return reason display
- **Flexible Orientation** - Horizontal or vertical layout options for product info component
- **Loading States** - Skeleton loader support for stock information during fetch operations
- **Responsive Design** - Tailwind CSS with ISA design system integration
- **E2E Testing Attributes** - Comprehensive data-* attributes for automated testing
- **Type-Safe Inputs** - Angular signal-based inputs with proper type definitions
- **OnPush Change Detection** - Optimized performance with OnPush strategy
- **Standalone Components** - All components are standalone with explicit imports

## Quick Start

### 1. Import Components

```typescript
import {
  ProductInfoComponent,
  ProductStockInfoComponent,
  ProductShelfMetaInfoComponent
} from '@isa/remission/shared/product';

@Component({
  selector: 'app-remission-item',
  imports: [
    ProductInfoComponent,
    ProductStockInfoComponent,
    ProductShelfMetaInfoComponent
  ],
  template: '...'
})
export class RemissionItemComponent {
  // Component logic
}
```

### 2. Display Product Information

```typescript
@Component({
  template: `
    <remi-product-info
      [item]="remissionItem()"
      [orientation]="'horizontal'"
    ></remi-product-info>
  `
})
export class MyComponent {
  remissionItem = signal<ProductInfoItem>({
    product: {
      ean: '9781234567890',
      name: 'Product Name',
      contributors: 'Author Name',
      format: 'Hardcover',
      formatDetail: '256 pages'
    },
    retailPrice: {
      value: { value: 29.99, currency: 'EUR', currencySymbol: '€' },
      vat: { value: 4.78, inPercent: 19, label: '19%', vatType: 1 }
    },
    tag: 'Prio 1'
  });
}
```

### 3. Display Stock Information

```typescript
@Component({
  template: `
    <remi-product-stock-info
      [availableStock]="45"
      [stockToRemit]="10"
      [targetStock]="35"
      [zob]="20"
      [stockFetching]="loading()"
    ></remi-product-stock-info>
  `
})
export class MyComponent {
  loading = signal(false);
}
```

### 4. Display Shelf Metadata

```typescript
@Component({
  template: `
    <remi-product-shelf-meta-info
      [department]="'Reise'"
      [shelfLabel]="'Europa'"
      [productGroupKey]="'RG001'"
      [productGroupValue]="'Reiseführer'"
      [assortment]="'Basissortiment|BPrämienartikel|n'"
      [returnReason]="'Überbestand'"
    ></remi-product-shelf-meta-info>
  `
})
export class MyComponent {}
```

## Component API

### ProductInfoComponent

Display component for comprehensive product information with image, pricing, and metadata.

#### Selector

```html
<remi-product-info></remi-product-info>
```

#### Inputs

| Input | Type | Required | Default | Description |
|-------|------|----------|---------|-------------|
| `item` | `ProductInfoItem` | Yes | - | Product data including product details, price, and tag |
| `orientation` | `'horizontal' \| 'vertical'` | No | `'horizontal'` | Layout orientation for product display |
| `innerGridClass` | `string` | No | `'grid-cols-[minmax(20rem,1fr),auto]'` | Custom grid CSS classes for inner layout |

#### ProductInfoItem Type

```typescript
type ProductInfoItem = Pick<RemissionItem, 'product' | 'retailPrice' | 'tag'>;

// Full structure:
{
  product: {
    ean: string;
    name: string;
    contributors: string;
    format: string;
    formatDetail?: string;
  };
  retailPrice?: {
    value: { value: number; currency: string; currencySymbol: string };
    vat: { value: number; inPercent: number; label: string; vatType: number };
  };
  tag?: 'Prio 1' | 'Prio 2' | 'Pflicht';
}
```

### ProductStockInfoComponent

Display component for product stock information including current, remit, target, and ZOB quantities.

#### Selector

```html
<remi-product-stock-info></remi-product-stock-info>
```

#### Inputs

| Input | Type | Required | Default | Description |
|-------|------|----------|---------|-------------|
| `stockFetching` | `boolean` | No | `false` | Loading state indicator for skeleton loader |
| `availableStock` | `number` | No | `0` | Current available stock after removals |
| `stockToRemit` | `number` | No | `0` | Remission quantity |
| `targetStock` | `number` | No | `0` | Remaining stock after predefined return |
| `zob` | `number` | No | `0` | Min Stock Category Management |

### ProductShelfMetaInfoComponent

Display component for product shelf metadata including department, location, product group, assortment, and return reason.

#### Selector

```html
<remi-product-shelf-meta-info></remi-product-shelf-meta-info>
```

#### Inputs

| Input | Type | Required | Default | Description |
|-------|------|----------|---------|-------------|
| `department` | `string` | No | `''` | Department name |
| `shelfLabel` | `string` | No | `''` | Shelf label |
| `productGroupKey` | `string` | No | `''` | Product group key |
| `productGroupValue` | `string` | No | `''` | Product group value |
| `assortment` | `string` | No | `''` | Assortment string (pipe-delimited) |
| `returnReason` | `string` | No | `''` | Return reason |

## Usage Examples

See the [full documentation](#quick-start) above for detailed usage examples.

## Testing

```bash
# Run tests
npx nx test remission-shared-product --skip-nx-cache

# Run tests with coverage
npx nx test remission-shared-product --code-coverage --skip-nx-cache
```

## Architecture Notes

All components are pure presentation components following OnPush change detection strategy. They use Angular signals for reactive state management and include comprehensive E2E testing attributes.

## Dependencies

- `@angular/core` - Angular framework
- `@isa/remission/data-access` - RemissionItem types
- `@isa/shared/product-image` - Product image directive
- `@isa/ui/label` - Label component
- `@isa/ui/skeleton-loader` - Loading skeleton
- `@isa/icons` - Icon library

## License

Internal ISA Frontend library - not for external distribution.
