Vibes logo

Order Details Section

Installation

Run the following command

npx vibes@latest add order-details-section

Usage

import { OrderDetailsSection } from '@/vibes/soul/sections/order-details-section';function Usage() {  return (      <OrderDetailsSection order={order} prevHref="#" />  );}const lineItems = [  {    id: '1',    title: 'Mini Bar Bag',    subtitle: 'Blue/Black/Green',    price: '$65',    image: {      src: 'https://storage.googleapis.com/s.mkswft.com/RmlsZTo1YzIwNTljMi04NzcwLTRiM2ItYmIzMy02ZTk0ODNkY2M5MDk=/mini-bar-bag.jpeg',      alt: 'Mini Bar Bag',    },    href: '#',    rating: 4.3,    quantity: 1,  },  {    id: '2',    title: 'Mini Bar Bag',    subtitle: 'Blue/Black/Green',    price: '$65',    image: {      src: 'https://storage.googleapis.com/s.mkswft.com/RmlsZTphOTFmNjU3Ny0zMDMxLTQzNjYtOWUzNC02MjRkYWQ4OTkzOWI=/mini-bar-bag-2.jpeg',      alt: 'Mini Bar Bag',    },    href: '#',    rating: 4.5,    quantity: 2,  }];const destination1 = {  id: '1',  title: 'Destination 1/2',  address: {    name: 'John Doe',    street1: '1000 San Marcos Ave',    city: 'Austin',    state: 'TX',    zipcode: '78702',    country: 'United States',  },  shipments: [    {      tracking: {        number: '1Z370170375602560',      },      name: 'UPS Ground',      status: 'Delivered on May 15, 2024',    },  ],  lineItems: lineItems.slice(0, 3),};const subtotal = [destination1, destination2].reduce((acc, destination) => {  return (    acc +    destination.lineItems.reduce(      (accInner, lineItem) => accInner + parseInt(lineItem.price.slice(1), 10) * lineItem.quantity,      0,    )  );}, 0);const discount = 10;const shipping = 20;const tax = subtotal * 0.08;const total = subtotal - discount + shipping + tax;const order = {  id: '1',  status: 'Delivered',  statusColor: 'success' as const,  date: '2021-01-01',  destinations: [destination1],  summary: {    lineItems: [      { label: 'Subtotal', value: "$" +  subtotal.toFixed(2) },      { label: 'Discount', value: "-$" + discount.toFixed(2) },      { label: 'Shipping', value: "$" +  shipping.toFixed(2), subtext: 'Ground' },      { label: 'Tax', value: "$" + tax.toFixed(2) },    ],    total: "$" + total.toFixed(2),  },};

API Reference

OrderDetailsSectionProps

PropTypeDefault
order*
Order
title
string
Order #
shipmentAddressLabel
string
shipmentMethodLabel
string
summaryTotalLabel
string
prevHref
string
'/orders'

Order

PropTypeDefault
id*
string
status*
string
statusColor?
'success' | 'warning' | 'error' | 'info'
date*
string
destinations*
Destination[]
summary*
Summary

Destination

PropTypeDefault
id*
string
title*
string
address*
Address
shipments*
Shipment[]
lineItems*
ShipmentLineItem[]

Summary

PropTypeDefault
lineItems*
Array<{label: string; value: string; subtext?: string; }>
total*
string

Address

PropTypeDefault
name
string
street1*
string
street2
string
city*
string
state*
string
zipcode
string
country
string

Shipment

PropTypeDefault
name*
string
status*
string
tracking
TrackingWithUrl | TrackingWithNumber | TrackingWithUrlAndNumber

ShipmentLineItem

PropTypeDefault
id*
string
title*
string
subtitle
string
price*
string
href*
string
image
{ src: string; alt: string }
quantity*
number
metadata
Array<{ label: string; value: string }>

TrackingWithUrl

PropTypeDefault
url*
string

TrackingWithNumber

PropTypeDefault
number*
string

TrackingWithUrlAndNumber

PropTypeDefault
url*
string
number*
string

CSS Variables

This component supports various CSS variables for theming. Here's a comprehensive list.

:root {  --order-details-section-focus: var(--primary);  --order-details-section-font-family: var(--font-family-body);  --order-details-section-title-font-family: var(--font-family-heading);  --order-details-text-primary: var(--foreground);  --order-details-text-secondary: var(--contrast-500);  --order-details-section-border: var(--contrast-100);  --order-details-section-button-border: var(--contrast-100);  --order-details-section-button-border-hover: var(--contrast-200);  --order-details-section-button-icon: var(--foreground);  --order-details-section-button-background: var(--background);  --order-details-section-button-background-hover: var(--contrast-100);  --order-details-section-image-background: var(--contrast-100);  --order-details-section-line-item: var(--contrast-300);  --order-details-section-line-item-subtitle: var(--contrast-500);  --order-details-section-line-item-subtext: var(--contrast-400);}