Order History and Order Details

/**
 * Lightweight order data for the history list.
 * Contains just enough to render an order card.
 */
interface OrderSummary {
  id: number;
  name: string; // "#1005"
  orderNumber: number;
  createdAt: string;
  customerUrl: string;
  financialStatus: FinancialStatus;
  fulfillmentStatus: FulfillmentStatus | null;
  totalPrice: string;
  itemCount: number;
  lineItemsPreview: LineItemPreview[];
  cancelled: boolean;
  cancelledAt: string | null;
}

/**
 * Full order with all details for the order page.
 * Extends OrderSummary with line items, addresses, fulfillments.
 */
interface Order extends OrderSummary {
  email: string;
  phone: string | null;
  subtotalPrice: string;
  totalShipping: string;
  totalTax: string;
  totalDiscounts: string;
  lineItems: OrderLineItem[];
  shippingAddress: Address | null;
  billingAddress: Address | null;
  fulfillments: Fulfillment[];
  discountApplications: DiscountApplication[];
  note: string | null;
}

interface OrderLineItem {
  key: string;
  title: string;
  variantTitle: string | null;
  sku: string;
  quantity: number;
  originalPrice: string;
  finalPrice: string;
  finalLinePrice: string;
  image: string | null;
  productUrl: string;
  fulfillmentStatus: string | null;
  discountAllocations: DiscountAllocation[];
}

interface LineItemPreview {
  title: string;
  image: string | null;
}

interface Fulfillment {
  createdAt: string;
  trackingCompany: string | null;
  trackingNumber: string | null;
  trackingUrl: string | null;
  lineItems: FulfillmentLineItem[];
}

type FinancialStatus = 'pending' | 'authorized' | 'paid' | 'partially_paid' | 'refunded' | 'partially_refunded' | 'voided';
type FulfillmentStatus = 'fulfilled' | 'partial' | 'unfulfilled' | 'restocked';

import { OrderCard } from './OrderCard';
import { EmptyState } from './EmptyState';
import styles from './OrderHistory.module.css';

interface OrderHistoryProps {
  orders: OrderSummary[];
  accountUrl: string;
}

export function OrderHistory({ orders, accountUrl }: OrderHistoryProps) {
  return (
    <div className={styles.container}>
      <header className={styles.header}>
        <a href={accountUrl} className={styles.backLink}>
          <ArrowLeftIcon />
          Back to Account
        </a>
        <h1 className={styles.title}>
          Order History
          {orders.length > 0 && (
            <span className={styles.count}>({orders.length})</span>
          )}
        </h1>
      </header>

      {orders.length > 0 ? (
        <div className={styles.orderList}>
          {orders.map((order) => (
            <OrderCard key={order.id} order={order} />
          ))}
        </div>
      ) : (
        <EmptyState />
      )}
    </div>
  );
}

import { StatusBadge } from './StatusBadge';
import styles from './OrderCard.module.css';

interface OrderCardProps {
  order: OrderSummary;
}

export function OrderCard({ order }: OrderCardProps) {
  const orderDate = new Date(order.createdAt).toLocaleDateString('en-US', {
    month: 'long',
    day: 'numeric',
    year: 'numeric',
  });

  // Show up to 3 thumbnails, then a "+N" indicator for the rest
  const previewCount = 3;
  const remainingItems = order.itemCount - Math.min(order.lineItemsPreview.length, previewCount);

  return (
    <article className={styles.card}>
      {/* Header: order name, date, and status */}
      <div className={styles.header}>
        <div className={styles.headerLeft}>
          <h2 className={styles.orderName}>{order.name}</h2>
          <span className={styles.orderDate}>{orderDate}</span>
        </div>
        <div className={styles.headerRight}>
          <StatusBadge status={order.financialStatus} type="financial" />
          {order.fulfillmentStatus && (
            <StatusBadge status={order.fulfillmentStatus} type="fulfillment" />
          )}
          {order.cancelled && (
            <StatusBadge status="cancelled" type="cancelled" />
          )}
        </div>
      </div>

      {/* Content: thumbnails and order summary */}
      <div className={styles.content}>
        <div className={styles.itemsPreview}>
          {order.lineItemsPreview.slice(0, previewCount).map((item, index) => (
            <div key={index} className={styles.itemThumb}>
              {item.image ? (
                <img
                  src={item.image}
                  alt={item.title}
                  className={styles.itemImage}
                  loading="lazy"
                />
              ) : (
                <div className={styles.itemPlaceholder}>
                  <ImageIcon />
                </div>
              )}
            </div>
          ))}
          {remainingItems > 0 && (
            <div className={styles.itemsMore}>+{remainingItems}</div>
          )}
        </div>

        <div className={styles.orderInfo}>
          <span className={styles.itemCount}>
            {order.itemCount} {order.itemCount === 1 ? 'item' : 'items'}
          </span>
          <span className={styles.totalPrice}>{order.totalPrice}</span>
        </div>
      </div>

      <a href={order.customerUrl} className={styles.viewLink}>
        View Order
        <ArrowRightIcon />
      </a>
    </article>
  );
}

import styles from './StatusBadge.module.css';

interface StatusBadgeProps {
  status: string;
  type: 'financial' | 'fulfillment' | 'cancelled';
}

export function StatusBadge({ status, type }: StatusBadgeProps) {
  const getStatusClass = (): string => {
    if (type === 'cancelled') return styles.cancelled;

    const statusMap: Record<string, string> = {
      // Financial
      paid: styles.success,
      authorized: styles.success,
      pending: styles.warning,
      partially_paid: styles.warning,
      refunded: styles.error,
      partially_refunded: styles.warning,
      voided: styles.error,
      // Fulfillment
      fulfilled: styles.success,
      partial: styles.warning,
      unfulfilled: styles.default,
      restocked: styles.error,
    };

    return statusMap[status] || styles.default;
  };

  // Format "partially_paid" as "Partially Paid"
  const label = status
    .split('_')
    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
    .join(' ');

  return (
    <span className={`${styles.badge} ${getStatusClass()}`}>
      {label}
    </span>
  );
}

import styles from './EmptyState.module.css';

export function EmptyState() {
  return (
    <div className={styles.empty}>
      <div className={styles.icon}>
        <ShoppingBagIcon />
      </div>
      <h2 className={styles.title}>No orders yet</h2>
      <p className={styles.description}>
        You haven't placed any orders yet. Start shopping to see your orders here.
      </p>
      <a href="/collections/all" className={styles.button}>
        Start Shopping
      </a>
    </div>
  );
}

import { OrderDetailHeader } from './OrderDetailHeader';
import { OrderLineItems } from './OrderLineItems';
import { OrderSummaryCard } from './OrderSummaryCard';
import { FulfillmentCard } from './FulfillmentCard';
import { AddressCard } from './AddressCard';
import styles from './OrderDetail.module.css';

interface OrderDetailProps {
  order: Order;
  ordersUrl: string;
}

export function OrderDetail({ order, ordersUrl }: OrderDetailProps) {
  return (
    <div className={styles.container}>
      <OrderDetailHeader order={order} ordersUrl={ordersUrl} />

      <div className={styles.layout}>
        {/* Main content: products and shipments */}
        <div className={styles.main}>
          <OrderLineItems items={order.lineItems} />

          {/* Only show fulfillments section if there are shipments */}
          {order.fulfillments.length > 0 && (
            <div className={styles.fulfillments}>
              <h2 className={styles.sectionTitle}>Shipments</h2>
              {order.fulfillments.map((fulfillment, index) => (
                <FulfillmentCard
                  key={index}
                  fulfillment={fulfillment}
                  shipmentNumber={index + 1}
                />
              ))}
            </div>
          )}
        </div>

        {/* Sidebar: summary and addresses */}
        <aside className={styles.sidebar}>
          <OrderSummaryCard order={order} />

          {order.shippingAddress && (
            <AddressCard
              title="Shipping Address"
              address={order.shippingAddress}
            />
          )}

          {order.billingAddress && (
            <AddressCard
              title="Billing Address"
              address={order.billingAddress}
            />
          )}
        </aside>
      </div>
    </div>
  );
}

import styles from './OrderLineItems.module.css';

interface OrderLineItemsProps {
  items: OrderLineItem[];
}

export function OrderLineItems({ items }: OrderLineItemsProps) {
  return (
    <div className={styles.lineItems}>
      <h2 className={styles.title}>Items</h2>
      <div className={styles.list}>
        {items.map((item) => (
          <LineItem key={item.key} item={item} />
        ))}
      </div>
    </div>
  );
}

function LineItem({ item }: { item: OrderLineItem }) {
  return (
    <div className={styles.item}>
      {/* Product image with quantity badge */}
      <div className={styles.imageWrapper}>
        {item.image ? (
          <img src={item.image} alt={item.title} className={styles.image} loading="lazy" />
        ) : (
          <div className={styles.imagePlaceholder}><ImageIcon /></div>
        )}
        <span className={styles.quantity}>{item.quantity}</span>
      </div>

      {/* Product details */}
      <div className={styles.details}>
        <a href={item.productUrl} className={styles.productTitle}>
          {item.title}
        </a>
        {item.variantTitle && (
          <p className={styles.variantTitle}>{item.variantTitle}</p>
        )}
        {item.sku && (
          <p className={styles.sku}>SKU: {item.sku}</p>
        )}

        {/* Line-level discounts */}
        {item.discountAllocations.length > 0 && (
          <div className={styles.discounts}>
            {item.discountAllocations.map((allocation, index) => (
              <span key={index} className={styles.discount}>
                -{allocation.amount} ({allocation.discountApplication.title})
              </span>
            ))}
          </div>
        )}
      </div>

      {/* Pricing */}
      <div className={styles.pricing}>
        <span className={styles.unitPrice}>
          {item.finalPrice} × {item.quantity}
        </span>
        <span className={styles.lineTotal}>{item.finalLinePrice}</span>
      </div>
    </div>
  );
}

import styles from './OrderSummaryCard.module.css';

interface OrderSummaryCardProps {
  order: Order;
}

export function OrderSummaryCard({ order }: OrderSummaryCardProps) {
  return (
    <div className={styles.card}>
      <h2 className={styles.title}>Order Summary</h2>

      <dl className={styles.summary}>
        <div className={styles.row}>
          <dt>Subtotal</dt>
          <dd>{order.subtotalPrice}</dd>
        </div>

        {/* Discounts shown in green */}
        {order.discountApplications.map((discount, index) => (
          <div key={index} className={`${styles.row} ${styles.discount}`}>
            <dt>{discount.title}</dt>
            <dd>-{discount.value}</dd>
          </div>
        ))}

        <div className={styles.row}>
          <dt>Shipping</dt>
          <dd>{order.totalShipping}</dd>
        </div>

        <div className={styles.row}>
          <dt>Tax</dt>
          <dd>{order.totalTax}</dd>
        </div>

        <div className={`${styles.row} ${styles.total}`}>
          <dt>Total</dt>
          <dd>{order.totalPrice}</dd>
        </div>
      </dl>
    </div>
  );
}

import styles from './FulfillmentCard.module.css';

interface FulfillmentCardProps {
  fulfillment: Fulfillment;
  shipmentNumber: number;
}

export function FulfillmentCard({ fulfillment, shipmentNumber }: FulfillmentCardProps) {
  const shippedDate = new Date(fulfillment.createdAt).toLocaleDateString('en-US', {
    month: 'long',
    day: 'numeric',
    year: 'numeric',
  });

  return (
    <div className={styles.card}>
      <div className={styles.header}>
        <h3 className={styles.title}>Shipment {shipmentNumber}</h3>
        <span className={styles.date}>Shipped {shippedDate}</span>
      </div>

      {/* Tracking info with link to carrier */}
      {fulfillment.trackingNumber && (
        <div className={styles.tracking}>
          <span className={styles.carrier}>
            {fulfillment.trackingCompany || 'Carrier'}
          </span>
          <span className={styles.trackingNumber}>
            {fulfillment.trackingNumber}
          </span>
          {fulfillment.trackingUrl && (
            <a
              href={fulfillment.trackingUrl}
              target="_blank"
              rel="noopener noreferrer"
              className={styles.trackLink}
            >
              Track Package
              <ExternalLinkIcon />
            </a>
          )}
        </div>
      )}

      {/* Which items are in this shipment */}
      {fulfillment.lineItems.length > 0 && (
        <div className={styles.items}>
          <p className={styles.itemsLabel}>Items in this shipment:</p>
          <div className={styles.itemsGrid}>
            {fulfillment.lineItems.map((item, index) => (
              <div key={index} className={styles.itemThumb} title={item.title}>
                {item.image ? (
                  <img src={item.image} alt={item.title} className={styles.itemImage} />
                ) : (
                  <div className={styles.itemPlaceholder}><PackageIcon /></div>
                )}
                {item.quantity > 1 && (
                  <span className={styles.itemQty}>{item.quantity}</span>
                )}
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}