ISA-Frontend/libs/shared/delivery/README.md

@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

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