ISA-Frontend/libs/remission/shared/product

@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
• Quick Start
• Component API
• Usage Examples
• Component Details
• Styling and Layout
• Testing
• Architecture Notes
• 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

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

@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

@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

@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

<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

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

<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

<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 above for detailed usage examples.

Testing

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