Skip to main content

View Order Block

The ViewOrder Component is a fully customizable order display component built with React and TypeScript. It provides a complete interface for viewing order details including header, status information, and customizable information rows with modern design patterns.

πŸš€ Installation​

npm install @nodeblocks/frontend-view-order-block@0.2.0

πŸ“– Usage​

import {ViewOrder} from '@nodeblocks/frontend-view-order-block';
Live Editor
function BasicViewOrder() {
  const orderInfoRows = [
    {label: 'Order ID', value: '#12345'},
    {label: 'Customer', value: 'John Doe'},
    {label: 'Date', value: '2024-01-15'},
    {label: 'Total', value: '$199.99'},
  ];

  return (
    <ViewOrder
      headerLabel="Order Details"
      statusText="Processing"
      statusLabel="Current Status"
      infoRows={orderInfoRows}
      style={{backgroundColor: 'white', padding: '16px'}}
    >
      <ViewOrder.Header />
      <ViewOrder.InfoRowList />
    </ViewOrder>
  );
}
Result
Loading...

πŸ”§ Props Reference​

Main Component Props​

PropTypeDefaultDescription
headerLabelstring"Order Details"Label text for the order header section
statusTextstringundefinedText content for the order status display
statusLabelstring"Status"Label text for the status field
imageSrcstringundefinedSource URL for an order image (available in context)
infoRowsArray<{label: string, value: ReactNode}>[]Array of information rows to display
classNamestringundefinedAdditional CSS class name for styling the container
childrenBlocksOverrideundefinedFunction to override default blocks or custom component rendering

Note: The main component inherits MUI Stack props. Root container uses spacing={4} and sx={{ p: 3 }} by default.

Sub-Components​

The ViewOrder component provides several sub-components for different sections. All sub-components receive their default values from the main component's context and can override these values through props.

ViewOrder.Header​

Container for the order header including title and status information.

PropTypeDefaultDescription
childrenReactNodeundefinedCustom content to override default header rendering
headerLabelstringFrom contextLabel text for the header
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits MUI Stack props. Default layout is direction="row" with spacing={4}, justifyContent: 'space-between', and alignItems: 'center'.

ViewOrder.Status​

Displays the order status information with label and styled status box.

PropTypeDefaultDescription
childrenReactNodeundefinedCustom content to override default status rendering
statusLabelstringFrom contextLabel for the status field
statusTextstringFrom contextText content for the status
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits MUI Stack props. Uses spacing={1} by default. The status box has a minimum width of 200px.

ViewOrder.InfoRow​

Displays a single information row with label and value.

PropTypeDefaultDescription
labelReactNodeRequiredLabel content for the information row
valueReactNodeRequiredValue content for the information row
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits MUI Stack props. Uses direction="row" with a bottom border divider. Label has minimum width of 180px.

ViewOrder.InfoRowList​

Container that displays multiple information rows from the infoRows array.

PropTypeDefaultDescription
childrenReactNodeundefinedCustom content to override default info rows rendering
infoRowsArray<{label: string, value: ReactNode}>From contextArray of info rows to display
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits MUI Stack props. Has a top border divider by default.

🎨 Configuration examples​

Custom Styled Components​

function StyledViewOrderComponents() {
  const orderInfoRows = [
    {label: 'Order ID', value: '#12345'},
    {label: 'Status', value: 'Completed'},
  ];

  return (
    <ViewOrder headerLabel="Styled Order" statusText="Completed" statusLabel="Status" infoRows={orderInfoRows}>
      <ViewOrder.Header
        sx={{
          bgcolor: 'primary.main',
          color: 'white',
          borderRadius: 2,
          p: 3,
        }}
      />
      <ViewOrder.Status
        sx={{
          '& .nbb-view-order-status': {
            bgcolor: 'success.main',
            color: 'white',
          },
        }}
      />
      <ViewOrder.InfoRowList
        sx={{
          bgcolor: 'grey.50',
          borderRadius: 2,
          p: 2,
        }}
      />
    </ViewOrder>
  );
}

Block Override Pattern​

function BlockOverrideViewOrder() {
  const orderInfoRows = [
    {label: 'Order ID', value: '#12345'},
    {label: 'Total', value: '$99.99'},
  ];

  return (
    <ViewOrder headerLabel="Order" statusText="Pending" statusLabel="Status" infoRows={orderInfoRows}>
      {({defaultBlocks, defaultBlockOrder}) => ({
        blocks: {
          header: {
            ...defaultBlocks.header,
            props: {
              ...defaultBlocks.header.props,
              sx: {background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'},
            },
          },
        },
        blockOrder: defaultBlockOrder,
      })}
    </ViewOrder>
  );
}

Complete Order Details​

function CompleteOrderDetails() {
  const orderItems = [
    {name: 'Product A', qty: 2, price: 49.99},
    {name: 'Product B', qty: 1, price: 89.99},
    {name: 'Shipping', qty: 1, price: 9.99},
  ];

  const orderInfoRows = [
    {
      label: 'Order Number',
      value: (
        <span
          style={{
            fontFamily: 'monospace',
            fontWeight: 'bold',
            color: '#3b82f6',
          }}
        >
          #ORD-2024-12345
        </span>
      ),
    },
    {label: 'Date Placed', value: 'January 15, 2024'},
    {label: 'Payment Method', value: 'Credit Card (****1234)'},
    {
      label: 'Items',
      value: (
        <div style={{display: 'flex', flexDirection: 'column', gap: '4px'}}>
          {orderItems.map((item, index) => (
            <div
              key={index}
              style={{
                display: 'flex',
                justifyContent: 'space-between',
                fontSize: '14px',
              }}
            >
              <span>
                {item.name} Γ— {item.qty}
              </span>
              <span style={{fontWeight: '500'}}>${item.price.toFixed(2)}</span>
            </div>
          ))}
        </div>
      ),
    },
    {
      label: 'Subtotal',
      value: (
        <span style={{fontWeight: '600'}}>
          ${orderItems.reduce((sum, item) => sum + item.price * item.qty, 0).toFixed(2)}
        </span>
      ),
    },
    {
      label: 'Shipping Address',
      value: (
        <div style={{fontSize: '14px', lineHeight: '1.5'}}>
          John Doe
          <br />
          123 Main Street
          <br />
          New York, NY 10001
          <br />
          United States
        </div>
      ),
    },
  ];

  return (
    <ViewOrder
      headerLabel="Order Confirmation"
      statusText="Shipped"
      statusLabel="Delivery Status"
      infoRows={orderInfoRows}
    >
      <ViewOrder.Header />
      <ViewOrder.InfoRowList />
    </ViewOrder>
  );
}

πŸ”§ TypeScript Support​

Full TypeScript support with comprehensive type definitions:

import {ViewOrder} from '@nodeblocks/frontend-view-order-block';
import {ReactNode} from 'react';

// Info row interface
interface OrderInfoRow {
  label: string;
  value: ReactNode;
}

// Custom order data interface
interface CustomOrderData {
  orderId: string;
  customerName: string;
  status: 'pending' | 'processing' | 'shipped' | 'delivered' | 'cancelled';
  total: number;
  items: {
    id: string;
    name: string;
    quantity: number;
    price: number;
  }[];
  shippingAddress: {
    street: string;
    city: string;
    country: string;
  };
}

function TypedViewOrderExample() {
  const orderData: CustomOrderData = {
    orderId: 'ORD-2024-001',
    customerName: 'John Doe',
    status: 'processing',
    total: 299.99,
    items: [
      {id: '1', name: 'Premium Headphones', quantity: 1, price: 199.99},
      {id: '2', name: 'USB Cable', quantity: 2, price: 50.0},
    ],
    shippingAddress: {
      street: '123 Main St',
      city: 'New York',
      country: 'USA',
    },
  };

  const orderInfoRows: OrderInfoRow[] = [
    {label: 'Order ID', value: orderData.orderId},
    {label: 'Customer', value: orderData.customerName},
    {label: 'Total Amount', value: `$${orderData.total}`},
    {label: 'Items Count', value: String(orderData.items.length)},
    {
      label: 'Shipping Address',
      value: `${orderData.shippingAddress.street}, ${orderData.shippingAddress.city}, ${orderData.shippingAddress.country}`,
    },
  ];

  return (
    <ViewOrder
      headerLabel="Order Information"
      statusText={orderData.status.charAt(0).toUpperCase() + orderData.status.slice(1)}
      statusLabel="Current Status"
      infoRows={orderInfoRows}
      className="custom-order-view"
    >
      <ViewOrder.Header />
      <ViewOrder.InfoRowList />
    </ViewOrder>
  );
}

πŸ“ Notes​

  • The root component uses MUI's Stack with default spacing={4} and sx={{ p: 3 }} padding
  • Default header label is "Order Details" if not provided
  • Default status label is "Status" if not provided
  • The imageSrc prop is available in context but not used by default sub-components (available for custom implementations)
  • ViewOrder.Header renders a title Typography and ViewOrder.Status by default
  • ViewOrder.Status displays a styled box with minimum width of 200px and centered text
  • ViewOrder.InfoRow has a label column with minimum width of 180px
  • ViewOrder.InfoRowList has a top border and renders all infoRows using ViewOrder.InfoRow
  • All sub-components inherit MUI Stack props and support the sx prop for styling
  • Block override pattern allows customizing, replacing, or reordering default blocks

Built with ❀️ using React, TypeScript, and MUI.