# @isa/shared/delivery

A reusable Angular component library for displaying order destination information with support for multiple delivery types (shipping, pickup, in-store, and digital downloads).

## Overview

The `@isa/shared/delivery` library provides the `OrderDestinationComponent`, a flexible component that displays order destination details including delivery type icons, recipient information, and addresses. It automatically adapts its display based on the order type (Delivery, Pickup, In-Store, Download) and supports estimated delivery date ranges.

**Key Features:**
- Automatic icon selection based on order type
- Support for shipping addresses, branch locations, and digital delivery
- Integrated address display with `@isa/shared/address`
- Estimated delivery date formatting
- Responsive layout with Tailwind CSS
- Full accessibility support (ARIA attributes, semantic HTML)
- E2E testing attributes (`data-what`)

## Installation

```ts
import { OrderDestinationComponent } from '@isa/shared/delivery';
```

## API Reference

### Components

#### `OrderDestinationComponent`

**Selector:** `shared-order-destination`

Displays order destination information with an appropriate icon and formatted address based on the order type.

**Inputs:**

| Input | Type | Required | Default | Description |
|-------|------|----------|---------|-------------|
| `orderType` | `OrderTypeFeature` | Yes | - | Type of order (Delivery, Pickup, InStore, Download, B2BShipping, DigitalShipping) |
| `shippingAddress` | `ShippingAddress` | No | - | Shipping address for delivery orders |
| `branch` | `Branch` | No | - | Branch information for pickup/in-store orders |
| `estimatedDelivery` | `EstimatedDelivery \| null` | No | - | Estimated delivery date range |
| `underline` | `boolean` | No | `false` | Whether to underline the order type label |

**Computed Properties:**

- `destinationIcon()`: Returns the appropriate icon name based on order type
- `name()`: Returns recipient name (customer for delivery, branch name for pickup, or "Hugendubel Digital" for downloads)
- `address()`: Returns the appropriate address object based on order type

### Type Definitions

#### `Address`

```ts
type Address = {
  apartment?: string;
  careOf?: string;
  city?: string;
  country?: string;
  district?: string;
  info?: string;
  po?: string;
  region?: string;
  state?: string;
  street?: string;
  streetNumber?: string;
  zipCode?: string;
};
```

#### `Branch`

```ts
type Branch = {
  name?: string;
  address?: Address;
};
```

#### `ShippingAddress`

```ts
type ShippingAddress = {
  firstName?: string;
  lastName?: string;
  address?: Address;
};
```

#### `EstimatedDelivery`

```ts
type EstimatedDelivery = {
  start: string;  // ISO date string
  stop: string | null;  // ISO date string or null for single-day delivery
};
```

## Usage Examples

### Basic Delivery Order

```html
<shared-order-destination
  [orderType]="OrderTypeFeature.Delivery"
  [shippingAddress]="{
    firstName: 'Max',
    lastName: 'Mustermann',
    address: {
      street: 'Musterstraße',
      streetNumber: '42',
      city: 'München',
      zipCode: '80331'
    }
  }"
/>
```

### Pickup Order with Branch

```html
<shared-order-destination
  [orderType]="OrderTypeFeature.Pickup"
  [branch]="{
    name: 'Hugendubel München Stachus',
    address: {
      street: 'Karlsplatz',
      streetNumber: '11-13',
      city: 'München',
      zipCode: '80335'
    }
  }"
/>
```

### Digital Download

```html
<shared-order-destination
  [orderType]="OrderTypeFeature.Download"
/>
```

### With Estimated Delivery Date Range

```html
<shared-order-destination
  [orderType]="OrderTypeFeature.Delivery"
  [estimatedDelivery]="{
    start: '2025-11-27',
    stop: '2025-11-29'
  }"
/>
```

### With Underlined Order Type

```html
<shared-order-destination
  [orderType]="OrderTypeFeature.Delivery"
  [shippingAddress]="address"
  [underline]="true"
/>
```

### In-Store Order

```html
<shared-order-destination
  [orderType]="OrderTypeFeature.InStore"
  [branch]="{
    name: 'Hugendubel Berlin Tauentzienstraße',
    address: {
      street: 'Tauentzienstraße',
      streetNumber: '13',
      city: 'Berlin',
      zipCode: '10789'
    }
  }"
/>
```

## Order Type Icons

The component automatically selects icons based on order type:

| Order Type | Icon | Display |
|------------|------|---------|
| `Delivery` | `isaDeliveryVersand` | Shipping truck icon |
| `Pickup` | `isaDeliveryRuecklage2` | Pickup box icon |
| `InStore` | `isaDeliveryRuecklage1` | Store icon |
| `Download` | `isaDeliveryDownload` | Download icon |
| `B2BShipping` | `isaDeliveryVersand` | Shipping truck icon |
| `DigitalShipping` | `isaDeliveryVersand` | Shipping truck icon |

## Display Logic

The component intelligently displays information based on order type:

**Delivery/B2BShipping/DigitalShipping:**
- Shows customer name (firstName + lastName)
- Displays shipping address

**Pickup/InStore:**
- Shows branch name
- Displays branch address

**Download:**
- Shows "Hugendubel Digital"
- No address displayed

**Estimated Delivery (fallback when no name/address):**
- Date range: "Zustellung zwischen [start date] und [stop date]"
- Single date: "Zustellung am [date]"
- Format: `EEE, dd.MM.` (e.g., "Mo, 27.11.")

## Accessibility Features

- **Semantic HTML**: Uses proper role attributes (`role="status"`, `role="region"`)
- **ARIA Labels**: Provides context for screen readers
- **Icon Hiding**: Icons are hidden from screen readers (`aria-hidden="true"`)
- **E2E Attributes**: Includes `data-what` attributes for testing:
  - `order-type-indicator`
  - `destination-details`
  - `recipient-name`
  - `destination-address`
  - `estimated-delivery`

## Styling

The component uses Tailwind CSS with ISA design system tokens:

- **Layout**: Flexbox with 2-unit gap, grows to fill available space
- **Typography**:
  - Order type: `isa-text-body-2-bold`, `text-isa-secondary-900`
  - Address details: `isa-text-body-2-regular`, `text-isa-neutral-600`
- **Address Container**: Line-clamps to 2 lines with text ellipsis for overflow

## Dependencies

### Internal Dependencies
- `@isa/shared/address` - InlineAddressComponent for formatted address display
- `@isa/icons` - Icon set (isaDeliveryVersand, isaDeliveryRuecklage1/2, isaDeliveryDownload)
- `@isa/common/data-access` - OrderTypeFeature enum
- `@isa/core/logging` - Logging infrastructure

### External Dependencies
- `@angular/core` - Angular framework
- `@angular/common` - DatePipe for date formatting
- `@angular/cdk/coercion` - Boolean property coercion
- `@ng-icons/core` - Icon display component

## Testing

The component includes comprehensive unit tests covering:
- Icon selection for all order types
- Name computation for different scenarios
- Address selection based on order type
- Branch and shipping address handling

Run tests:
```bash
nx test shared-delivery
```

## Architecture

**Library Type:** UI Component Library
**Nx Tags:** `skip:ci`
**Project Type:** Angular Library
**Prefix:** `lib`