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

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`

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`

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

`ShippingAddress`

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

`EstimatedDelivery`

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

Usage Examples

Basic Delivery Order

<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

<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

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

With Estimated Delivery Date Range

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

With Underlined Order Type

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

In-Store Order

<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:

nx test shared-delivery

Architecture

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