Skip to main content

View Order Block

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

πŸš€ Installation​

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

πŸ“– Usage​

import {ViewOrder} from '@nodeblocks/frontend-view-order-block';
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=""
      statusText="Processing"
      statusLabel="Current Status"
      titleLabel=""
      titleText="Premium Product Package"
      titleLink="#orders/12345"
      imageSrc="/img/icon.png"
      infoRows={orderInfoRows}>
      <ViewOrder.Header />
      <ViewOrder.DetailsRow />
      <ViewOrder.InfoRowList />
    </ViewOrder>
  );
}

πŸ”§ Props Reference​

Main Component Props​

PropTypeDefaultDescription
headerLabelstringundefinedLabel text for the order header section
statusTextstringundefinedText content for the order status display
statusLabelstringundefinedLabel text for the status field
titleLabelstringundefinedLabel text for the order title field
titleTextstringundefinedText content for the order title
titleLinkstringundefinedURL link for the order title
imageSrcstringundefinedSource URL for the order image
infoRowsArray<{label: string, value: ReactNode}>undefinedArray of information rows to display
classNamestringundefinedAdditional CSS class name for styling the container
childrenBlocksOverrideundefinedCustom block components to override default rendering

Note: This component inherits all HTML div element props.

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
childrenReactNodeFrom contextCustom content to override default header content
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all HTML div element props.

ViewOrder.DetailsRow​

Container for the main order details including title and image.

PropTypeDefaultDescription
childrenReactNodeFrom contextCustom content to override default details row content
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all HTML div element props.

ViewOrder.Status​

Displays the order status information.

PropTypeDefaultDescription
childrenReactNodeFrom contextCustom content to override default status content
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all HTML div element props.

ViewOrder.Title​

Displays the order title as a clickable link.

PropTypeDefaultDescription
childrenReactNodeFrom contextCustom content to override default title content
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all HTML a element props.

ViewOrder.Image​

Displays the order image.

PropTypeDefaultDescription
classNamestringundefinedAdditional CSS class name for styling
srcstringFrom contextSource URL for the order image

Note: This component inherits all HTML img element props.

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 all HTML div element props.

ViewOrder.InfoRowList​

Container that displays multiple information rows from the infoRows array.

PropTypeDefaultDescription
childrenReactNodeFrom contextCustom content to override default info rows rendering
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all HTML div element props.

πŸ”§ TypeScript Support​

Full TypeScript support with comprehensive type definitions:

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

interface OrderInfoRow {
  label: string;
  value: ReactNode;
}

interface ViewOrderProps {
  headerLabel?: string;
  statusText?: string;
  statusLabel?: string;
  titleLabel?: string;
  titleText?: string;
  titleLink?: string;
  imageSrc?: string;
  infoRows?: OrderInfoRow[];
  className?: string;
  children?: ReactNode;
}

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;
  };
}

const OrderDetailsView = () => {
  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.00 }
    ],
    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: 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"
      titleLabel="Order Details"
      titleText={`Order ${orderData.orderId}`}
      titleLink={`/orders/${orderData.orderId}`}
      imageSrc="/order-preview.jpg"
      infoRows={orderInfoRows}
      className="custom-order-view">
      <ViewOrder.Header />
      <ViewOrder.DetailsRow />
      <ViewOrder.InfoRowList />
    </ViewOrder>
  );
};

Built with ❀️ using React, TypeScript, and modern web standards.