page.tsx

Go to the documentation of this file.

"use client";
 
import { useEffect, useState } from 'react';
import Image from 'next/image';
import { useStore } from '@/contexts/StoreContext';
 
interface CartItem {
  id: number;
  name: string;
  price: number;
  quantity: number;
}
 
interface DisplayData {
  type: 'cart-update' | 'clear';
  cart?: CartItem[];
  total?: number;
  subtotal?: number;
  tax?: number;
  customer?: { name: string } | null;
}
 
export default function CustomerDisplayPage() {
  const { storeName, session } = useStore();
  const [cart, setCart] = useState<CartItem[]>([]);
  const [total, setTotal] = useState(0);
  const [subtotal, setSubtotal] = useState(0);
  const [tax, setTax] = useState(0);
  const [customer, setCustomer] = useState<{ name: string } | null>(null);
  const [connected, setConnected] = useState(false);
 
  const displayStoreName = storeName || session?.store?.name || 'Cartridge World';
 
  useEffect(() => {
    // Check if BroadcastChannel is supported
    if (typeof BroadcastChannel === 'undefined') {
      console.error('BroadcastChannel not supported');
      return;
    }
 
    const channel = new BroadcastChannel('pos-display');
    setConnected(true);
 
    channel.onmessage = (event: MessageEvent<DisplayData>) => {
      const data = event.data;
      
      if (data.type === 'cart-update') {
        setCart(data.cart || []);
        setTotal(data.total || 0);
        setSubtotal(data.subtotal || 0);
        setTax(data.tax || 0);
        setCustomer(data.customer || null);
      } else if (data.type === 'clear') {
        setCart([]);
        setTotal(0);
        setSubtotal(0);
        setTax(0);
        setCustomer(null);
      }
    };
 
    // Send ready signal
    channel.postMessage({ type: 'display-ready' });
 
    return () => {
      channel.close();
    };
  }, []);
 
  return (
    <div className="min-h-screen bg-bg p-8">
      <div className="max-w-4xl mx-auto">
        {/* Header */}
        <div className="mb-8 text-center">
          <h1 className="text-5xl font-bold text-text mb-4">{displayStoreName}</h1>
          <div className="flex items-center justify-center gap-2">
            <div className={`w-3 h-3 rounded-full ${connected ? 'bg-success' : 'bg-danger'}`} />
            <span className="text-muted text-sm">
              {connected ? 'Connected to POS' : 'Disconnected'}
            </span>
          </div>
        </div>
 
        {/* Customer Info */}
        {customer && (
          <div className="bg-info/10 border border-info/30 rounded-lg p-4 mb-6">
            <p className="text-lg font-semibold text-info">Customer: {customer.name}</p>
          </div>
        )}
 
        {/* Cart Items */}
        <div className="bg-surface rounded-lg shadow-lg p-6 mb-6">
          <h2 className="text-2xl font-bold text-text mb-4">Items</h2>
          
          {cart.length === 0 ? (
            <div className="text-center py-12">
              <p className="text-muted text-xl">Waiting for items...</p>
            </div>
          ) : (
            <div className="space-y-4">
              {cart.map((item, index) => (
                <div 
                  key={`${item.id}-${index}`}
                  className="flex justify-between items-center py-4 border-b border-border last:border-0"
                >
                  <div className="flex-1">
                    <p className="text-xl font-semibold text-text">{item.name}</p>
                    <p className="text-muted">Qty: {item.quantity}</p>
                  </div>
                  <div className="text-right">
                    <p className="text-2xl font-bold text-brand">
                      ${(item.price * item.quantity).toFixed(2)}
                    </p>
                    <p className="text-sm text-muted">
                      ${item.price.toFixed(2)} each
                    </p>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
 
        {/* Total */}
        {cart.length > 0 && (
          <div className="bg-surface rounded-lg shadow-lg p-6">
            <div className="space-y-3">
              <div className="flex justify-between text-lg">
                <span className="text-muted">Subtotal:</span>
                <span className="font-semibold text-text">${subtotal.toFixed(2)}</span>
              </div>
              <div className="flex justify-between text-lg">
                <span className="text-muted">Tax:</span>
                <span className="font-semibold text-text">${tax.toFixed(2)}</span>
              </div>
              <div className="border-t border-border pt-3">
                <div className="flex justify-between items-center">
                  <span className="text-2xl font-bold text-text">Total:</span>
                  <span className="text-4xl font-bold text-brand">${total.toFixed(2)}</span>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}