@o2s/blocks.order-list

A block displaying a list of orders.

The order-list block shows a paginated, filterable list of the user's orders. Customers can view order history, filter by status or date, and navigate to order details or tracking. Permissions (view, create, cancel, track) are enforced via ACL. Typically used on "My Orders" or account pages.

• Paginated list – Browse orders with pagination and filters
• Order details & tracking – Links to details and tracking (when permitted)
• Permission-based – ACL for view, create, cancel, track
• Auth-required – Orders scoped to logged-in user

Content editors place the block via CMS. Developers connect an Orders integration (e.g. Medusa.js, mocked).

Domain

Domain: Commerce

Installation

npm install @o2s/blocks.order-list

Usage

Backend (API Harmonization)

Register the block in app.module.ts:

import * as OrderList from '@o2s/blocks.order-list/api-harmonization';
import { AppConfig } from './app.config';

@Module({
    imports: [
        OrderList.Module.register(AppConfig),
    ],
})
export class AppModule {}

Frontend

Register the block in renderBlocks.tsx:

import * as OrderList from '@o2s/blocks.order-list/frontend';

export const renderBlocks = async (blocks: CMS.Model.Page.SlotBlock[]) => {
    return blocks.map((block) => {
        if (block.type === 'order-list') {
            return (
                <OrderList.OrderListRenderer
                    key={block.id}
                    id={block.id}
                    slug={slug}
                    locale={locale}
                    accessToken={session?.accessToken}
                    userId={session?.user?.id}
                    routing={routing}
                />
            );
        }
        // ... other blocks
    });
};

SDK

Use the SDK to fetch order list:

import { sdk } from '@o2s/blocks.order-list/sdk';

// SDK uses NEXT_PUBLIC_API_URL for the API base URL
const orderList = await sdk.blocks.getOrderList(
    { id: 'block-id' },
    { 'x-locale': 'en' },
    accessToken
);

Configuration

This block requires the following integrations to be configured in AppConfig:

import { Orders, CMS, Auth } from '@o2s/configs.integrations';

export const AppConfig: ApiConfig = {
    integrations: {
        orders: Orders.OrdersIntegrationConfig,  // Required
        cms: CMS.CmsIntegrationConfig,          // Required
        auth: Auth.AuthIntegrationConfig,        // Required
    },
};

Environment Variables

The required environment variables depend on which integrations you're using:

• For MedusaJS integration: See @o2s/integrations.medusajs documentation
• For mocked integration: No additional environment variables needed

API

Block Endpoint

GET /api/blocks/order-list/:id

Headers:

• x-locale: Content locale (required)

Response:

{
    id: string;
    data: {
        orders: Order[];
        pagination: Pagination;
    };
}

Related Blocks

• @o2s/blocks.order-details
• @o2s/blocks.orders-summary
• @o2s/blocks.product-list
• @o2s/blocks.product-details
• @o2s/blocks.recommended-products

About Blocks in O2S

Blocks are self-contained, reusable UI components that combine harmonizing and frontend components into a single package. Each block is independently packaged as an NPM module and includes three primary parts: API Harmonization Module, Frontend Components, and SDK Methods. Blocks allow you to quickly add or remove functionality without impacting other components of the application.

• See all blocks: Blocks Documentation
• View this block in Storybook: order-list

About O2S

Part of Open Self Service (O2S) - an open-source framework for building composable customer self-service portals. O2S simplifies integration of multiple headless APIs into a scalable frontend, providing an API-agnostic architecture with a normalization layer.

• Website: https://www.openselfservice.com/
• GitHub: https://github.com/o2sdev/openselfservice
• Documentation: https://www.openselfservice.com/docs