ISA-Frontend/libs/checkout/feature/reward-order-confirmation/README.md

@isa/checkout/feature/reward-order-confirmation

A feature library providing a comprehensive order confirmation page for reward orders with support for printing, address display, and loyalty reward collection.

Overview

This feature provides a complete order confirmation experience after a reward order has been placed. It displays order details grouped by delivery destination, shows payer and shipping information, and enables users with appropriate permissions to print order confirmations. For items with the 'Rücklage' (layaway) feature, it provides an action card that allows staff to collect loyalty rewards in various ways (collect, donate, or cancel).

The library uses NgRx Signal Store for reactive state management, integrating with the OMS (Order Management System) API to load and display order data. It supports multiple orders being displayed simultaneously by accepting comma-separated display order IDs in the route parameter.

Architecture

State Management

The library uses a signalStore (OrderConfiramtionStore) that:

• Loads display orders via DisplayOrdersResource
• Computes derived state (payers, shipping addresses, target branches)
• Determines which order type features are present (delivery, pickup, in-store)
• Provides reactive data to all child components

Route Configuration

The feature is accessible via the route pattern: :displayOrderIds

Example: /order-confirmation/1234,5678 displays orders with display IDs 1234 and 5678.

The route includes:

• OMS action handlers for command execution
• Tab cleanup on deactivation
• Lazy-loaded main component

Components

RewardOrderConfirmationComponent

Selector: checkout-reward-order-confirmation

Main container component that orchestrates the order confirmation page.

Key Responsibilities:

• Parses display order IDs from route parameters (comma-separated)
• Initializes the store with tab ID and order IDs
• Triggers display order loading via DisplayOrdersResource
• Composes child components (header, addresses, item list)

Effects:

• Updates store state when route parameters or tab ID change
• Loads display orders when order IDs change

OrderConfirmationHeaderComponent

Selector: checkout-order-confirmation-header

Displays the page header with print functionality.

Features:

• Print button that triggers CheckoutPrintFacade.printOrderConfirmation()
• Role-based access control (print feature restricted by role)
• Integrates with the ISA printing system

Dependencies:

• @isa/common/print - Print button and printer selection
• @isa/core/auth - Role-based directive (*ifRole)

OrderConfirmationAddressesComponent

Selector: checkout-order-confirmation-addresses

Displays payer and destination information based on order types.

Displayed Information:

• Payers: Deduplicated list of buyers across all orders
• Shipping Addresses: Shown only if orders have delivery features (Delivery, DigitalShipping, B2BShipping)
• Target Branches: Shown only if orders have in-store features (InStore, Pickup)

Dependencies:

• @isa/shared/address - Address display component
• @isa/crm/data-access - Customer name formatting and address deduplication

OrderConfirmationItemListComponent

Selector: checkout-order-confirmation-item-list

Groups and displays order items by delivery destination and type.

Key Features:

• Groups items using groupItemsByDeliveryDestination() helper
• Displays delivery type icons (Versand, Rücklage, B2B Versand)
• Optimized rendering with trackBy function for item groups

Grouping Logic: Items are grouped by:

1. Order type (e.g., Delivery, Pickup, InStore)
2. Shipping address (for delivery orders)
3. Target branch (for pickup/in-store orders)

OrderConfirmationItemListItemComponent

Selector: checkout-order-confirmation-item-list-item

Displays individual order item details within a group.

Inputs:

• item (required): DisplayOrderItemDTO - The order item to display
• order (required): OrderItemGroup - The group containing delivery type and destination

Features:

• Product information display via ProductInfoComponent
• Destination information via DisplayOrderDestinationInfoComponent
• Action card for loyalty reward collection (conditional)
• Loyalty points display

ConfirmationListItemActionCardComponent

Selector: checkout-confirmation-list-item-action-card

Provides loyalty reward collection interface for layaway items.

Inputs:

• item (required): DisplayOrderItem - The order item with loyalty information

Display Conditions: The action card is displayed when ALL of the following are met:

• Item has the 'Rücklage' (layaway) order type feature
• AND either:
  • Item has a loyalty collect command available, OR
  • Item processing is already complete

Features:

• Action Selection: Dropdown to choose collection type:
  • Collect - Collect loyalty points for customer
  • Donate - Donate points to charity
  • Cancel - Cancel the reward collection
• Processing States: Shows current processing status (Ordered, InProgress, Complete)
• Command Execution: Integrates with OMS command system for reward collection
• Loading States: Displays loading indicators during API calls
• Completion Status: Shows check icon when processing is complete

Role-Based Access: Collection functionality is restricted by role permissions.

Dependencies:

• @isa/oms/data-access - Order reward collection facade and command handling
• @isa/ui/buttons - Button and dropdown components
• @isa/checkout/data-access - Order type feature detection and item utilities

Routes

export const routes: Routes = [
  {
    path: ':displayOrderIds',
    loadComponent: () => import('./reward-order-confirmation.component'),
    canDeactivate: [canDeactivateTabCleanup],
    providers: [CoreCommandModule.forChild(OMS_ACTION_HANDLERS)]
  }
];

Route Parameters:

• displayOrderIds - Comma-separated list of display order IDs (e.g., "1234,5678")

Usage

Importing Routes

import { routes as rewardOrderConfirmationRoutes } from '@isa/checkout/feature/reward-order-confirmation';

const appRoutes: Routes = [
  {
    path: 'order-confirmation',
    children: rewardOrderConfirmationRoutes
  }
];

Navigation Example

// Navigate to confirmation for single order
router.navigate(['/order-confirmation', '1234']);

// Navigate to confirmation for multiple orders
router.navigate(['/order-confirmation', '1234,5678,9012']);

Dependencies

Core Angular & NgRx

• @angular/core - Angular framework
• @angular/router - Routing
• @ngrx/signals - Signal-based state management

ISA Libraries

Data Access

• @isa/checkout/data-access - Order type features, grouping utilities
• @isa/oms/data-access - Display orders resource, reward collection, command handling
• @isa/crm/data-access - Customer name formatting, address/branch deduplication

Shared Components

• @isa/checkout/shared/product-info - Product display components
• @isa/shared/address - Address display component
• @isa/common/print - Print button and printer integration
• @isa/ui/buttons - Button components
• @isa/ui/input-controls - Dropdown components

Core Services

• @isa/core/tabs - Tab service and cleanup guard
• @isa/core/auth - Role-based access control
• @isa/core/command - Command module integration

Icons

• @isa/icons - ISA custom icon set
• @ng-icons/core - Icon component

Generated APIs

• @generated/swagger/oms-api - OMS API types (DisplayOrderItemDTO)

Testing

The library uses Vitest for testing with comprehensive coverage of:

• Component rendering and interactions
• State management and computed signals
• Route parameter parsing
• Reward collection workflows
• Conditional display logic

Run tests:

nx test checkout-feature-reward-order-confirmation

Key Features Summary

1. Multi-Order Support: Display confirmation for multiple orders simultaneously
2. Smart Grouping: Items grouped by delivery destination for clarity
3. Conditional Displays: Address sections shown based on order type features
4. Print Integration: Role-based printing with printer selection
5. Loyalty Rewards: In-page reward collection for layaway items
6. Reactive State: Signal-based state management with computed values
7. Tab Integration: Proper cleanup on tab deactivation
8. Role-Based Access: Permissions enforced for sensitive operations

Related Libraries

• @isa/checkout/feature/checkout-process - Main checkout flow
• @isa/oms/data-access - Order management system integration
• @isa/checkout/data-access - Checkout domain logic and utilities