Add comprehensive Claude Code tooling: - Agents: docs-researcher, docs-researcher-advanced for documentation research - Commands: dev:add-e2e-attrs, docs:library, docs:refresh-reference, quality:bundle-analyze, quality:coverage - Skills: 8 specialized skills including api-change-analyzer, architecture-enforcer, library-scaffolder, and more Update documentation: - Comprehensive CLAUDE.md overhaul with library reference system - Update testing guidelines in docs/guidelines/testing.md - Update READMEs for checkout, icons, scanner, and scroll-position libraries Remove outdated checkout-completion-flow-documentation.md Update .gitignore for Claude Code files
4.7 KiB
checkout-feature-reward-order-confirmation
Overview
The @isa/checkout/feature/reward-order-confirmation library provides the reward order confirmation screen displayed after customers complete a loyalty reward redemption purchase. It shows a comprehensive summary of completed reward orders, including shipping/billing addresses, product details, loyalty points used, and delivery method information.
Type: Routed feature library with lazy-loaded components
Features
- Multi-Order Support: Display multiple orders from a single shopping cart session
- Order Type Awareness: Conditional display based on delivery method (Delivery, Pickup, In-Store)
- Address Deduplication: Smart handling of duplicate addresses across multiple orders
- Loyalty Points Display: Shows loyalty points (Lesepunkte) used for each reward item
- Product Information: Comprehensive product details including name, contributors, EAN, and quantity
- Destination Information: Delivery/pickup destination details
Main Components
RewardOrderConfirmationComponent (Main Container)
- Selector:
checkout-reward-order-confirmation - Route:
/:orderIds(accepts multiple order IDs separated by+) - Orchestrates the entire confirmation view
- Manages state via
OrderConfiramtionStore
OrderConfirmationHeaderComponent
- Selector:
checkout-order-confirmation-header - Displays header: "Prämienausgabe abgeschlossen" (Reward distribution completed)
OrderConfirmationAddressesComponent
- Selector:
checkout-order-confirmation-addresses - Displays billing addresses, shipping addresses, and pickup branch information
- Conditionally shows sections based on order type
OrderConfirmationItemListComponent
- Selector:
checkout-order-confirmation-item-list - Displays order type badge with icon (Delivery/Pickup/In-Store)
- Renders list of order items for each order
OrderConfirmationItemListItemComponent
- Selector:
checkout-order-confirmation-item-list-item - Displays individual product information, quantity, loyalty points, and destination info
ConfirmationListItemActionCardComponent
- Selector:
checkout-confirmation-list-item-action-card - Placeholder component for future action functionality
State Management
OrderConfiramtionStore (NgRx Signals)
State:
tabId: Current tab identifierorderIds: Array of order IDs to display
Computed Properties:
orders: Filtered display orders from OMS metadata serviceshoppingCart: Associated completed shopping cartpayers: Deduplicated billing addresseesshippingAddresses: Deduplicated shipping addresseestargetBranches: Deduplicated pickup brancheshasDeliveryOrderTypeFeature: Boolean indicating delivery ordershasTargetBranchFeature: Boolean indicating pickup/in-store orders
Usage
Routing Integration
// In parent routing module
{
path: 'reward-confirmation',
loadChildren: () => import('@isa/checkout/feature/reward-order-confirmation')
.then(m => m.routes)
}
URL Structure
/reward-confirmation/123+456+789
This displays confirmation for orders with IDs 123, 456, and 789.
Dependencies
Data Access:
@isa/oms/data-access- Order metadata and models@isa/checkout/data-access- Checkout metadata and order type utilities@isa/crm/data-access- Address deduplication utilities
Core:
@isa/core/tabs- Tab context management
Shared Components:
@isa/shared/address- Address rendering@isa/checkout/shared/product-info- Product and destination information
UI:
@isa/icons- Delivery method icons
Data Flow
- Route parameter (
orderIds) is parsed into array of integers - Store receives
tabIdfromTabServiceandorderIdsfrom route - Store fetches orders from
OmsMetadataServicefiltered by IDs - Store fetches completed shopping cart from
CheckoutMetadataService - Components consume computed properties from store (addresses, order items, points)
Order Type Support
The library supports three delivery methods with specific icons:
- Delivery (
isaDeliveryVersand): Shows shipping addresses - Pickup (
isaDeliveryRuecklage2): Shows pickup branch - In-Store (
isaDeliveryRuecklage1): Shows store branch
Testing
Run tests with Vitest:
npx nx test checkout-feature-reward-order-confirmation --skip-nx-cache
Test Framework: Vitest
Coverage Output: coverage/libs/checkout/feature/reward-order-confirmation
Architecture Notes
- Component Prefix:
checkout - Change Detection: All components use
OnPushstrategy - Standalone Architecture: All components are standalone with explicit imports
- Project Name:
checkout-feature-reward-order-confirmation