Order Module – Low Level Design

📦 Step 8: Order Module – Low Level Design (LLD)

This document covers the low-level design of the order feature module responsible for order history, details, and tracking in the Angular e-commerce frontend.

📦 Module Structure

src/
├── app/
│   └── features/
│       └── order/
│           ├── components/
│           │   ├── order-list/
│           │   ├── order-details/
│           │   └── order-tracking/
│           ├── services/
│           │   └── order.service.ts
│           ├── store/
│           │   ├── order.actions.ts
│           │   ├── order.reducer.ts
│           │   ├── order.effects.ts
│           │   └── order.selectors.ts
│           ├── models/
│           │   └── order.model.ts
│           ├── order-routing.module.ts
│           └── order.module.ts

🧱 Component Breakdown

📋 OrderListComponent

• Displays paginated list of user orders
• Shows order summary: order ID, date, status, total
• Click to view order details

📄 OrderDetailsComponent

• Detailed view of a selected order
• Lists products, quantities, prices, shipping info
• Shows payment status and delivery tracking link

🚚 OrderTrackingComponent

• Displays current shipping status and estimated delivery date
• Integrates with third-party tracking APIs

🧪 Service: OrderService

Handles API calls related to orders and tracking.

@Injectable({ providedIn: "root" })
export class OrderService {
  private orderUrl = "/api/orders";

  constructor(private http: HttpClient) {}

  getOrders(
    userId: string,
    page: number = 1,
    limit: number = 10
  ): Observable<OrderPage> {
    return this.http.get<OrderPage>(
      `${this.orderUrl}?userId=${userId}&page=${page}&limit=${limit}`
    );
  }

  getOrderById(orderId: string): Observable<Order> {
    return this.http.get<Order>(`${this.orderUrl}/${orderId}`);
  }

  getTrackingStatus(orderId: string): Observable<TrackingStatus> {
    return this.http.get<TrackingStatus>(
      `${this.orderUrl}/${orderId}/tracking`
    );
  }
}

🧩 NgRx Store (optional)

✅ Actions – order.actions.ts

export const loadOrders = createAction(
  "[Order] Load Orders",
  props<{ userId: string; page?: number }>()
);
export const loadOrdersSuccess = createAction(
  "[Order] Load Orders Success",
  props<{ ordersPage: OrderPage }>()
);
export const loadOrderDetails = createAction(
  "[Order] Load Order Details",
  props<{ orderId: string }>()
);
export const loadOrderDetailsSuccess = createAction(
  "[Order] Load Order Details Success",
  props<{ order: Order }>()
);
export const loadTrackingStatus = createAction(
  "[Order] Load Tracking Status",
  props<{ orderId: string }>()
);
export const loadTrackingStatusSuccess = createAction(
  "[Order] Load Tracking Status Success",
  props<{ status: TrackingStatus }>()
);

🔁 Reducer – order.reducer.ts

Handles order lists, details, and tracking status updates.

🌐 Effects – order.effects.ts

Triggers async API calls for loading orders, details, and tracking info.

🔍 Selectors – order.selectors.ts

export const selectOrdersPage = createSelector(
  selectOrderState,
  (state) => state.ordersPage
);
export const selectOrderDetails = createSelector(
  selectOrderState,
  (state) => state.selectedOrder
);
export const selectTrackingStatus = createSelector(
  selectOrderState,
  (state) => state.trackingStatus
);

🔄 API Contracts

📐 Models

export interface OrderItem {
  productId: string;
  name: string;
  price: number;
  quantity: number;
  imageUrl: string;
}

export interface Order {
  id: string;
  userId: string;
  items: OrderItem[];
  total: number;
  status: string;
  orderDate: string;
  shippingAddress: Address;
  paymentStatus: string;
}

export interface OrderPage {
  orders: Order[];
  currentPage: number;
  totalPages: number;
  totalOrders: number;
}

export interface TrackingStatus {
  orderId: string;
  currentStatus: string;
  estimatedDelivery: string;
  history: { date: string; status: string }[];
}

export interface Address {
  fullName: string;
  street: string;
  city: string;
  state: string;
  zip: string;
  country: string;
  phone: string;
}

🚦 Routing & Guards

const routes: Routes = [
  { path: "list", component: OrderListComponent, canActivate: [AuthGuard] },
  {
    path: "details/:id",
    component: OrderDetailsComponent,
    canActivate: [AuthGuard],
  },
  {
    path: "tracking/:id",
    component: OrderTrackingComponent,
    canActivate: [AuthGuard],
  },
];

🔐 Security & UX

• Protect all routes with AuthGuard
• Paginate order list for performance
• Show loading spinner during API calls
• Display clear error messages on failure
• Provide user-friendly tracking updates

✅ Responsibilities Summary