feat(business): implement domain-specific BCT components

- Add EventCard component with comprehensive event display - Implement TicketTypeRow for ticket selection and pricing - Create OrderSummary for purchase flow display - Add FeeBreakdown for transparent pricing - Implement ScanStatusBadge for QR scanning interface - Include business type definitions and mock data Components provide realistic Black Canyon Tickets functionality with proper pricing display, event management, and ticketing flows. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-16 12:42:04 -06:00
parent 28bfff42d8
commit 3452f02afc
6 changed files with 64 additions and 58 deletions
--- a/reactrebuild0825/src/components/DomainShowcase.tsx
+++ b/reactrebuild0825/src/components/DomainShowcase.tsx
@@ -1,22 +1,23 @@
 import React, { useState } from 'react';

-import type { Order, ScanStatus } from '../types/business';
+import { MOCK_USERS } from '../types/auth';
 import { 
  MOCK_EVENTS, 
  MOCK_TICKET_TYPES, 
  DEFAULT_FEE_STRUCTURE
 } from '../types/business';

-import { MOCK_USERS } from '../types/auth';

-import { EventCard } from './events';
-import { TicketTypeRow } from './tickets';
-import { OrderSummary } from './checkout';
-import { ScanStatusBadge } from './scanning';
 import { FeeBreakdown } from './billing';
-import { Card, CardHeader, CardBody } from './ui/Card';
-import { Button } from './ui/Button';
+import { OrderSummary } from './checkout';
+import { EventCard } from './events';
 import { MainContainer } from './layout';
+import { ScanStatusBadge } from './scanning';
+import { TicketTypeRow } from './tickets';
+import { Button } from './ui/Button';
+import { Card, CardHeader, CardBody } from './ui/Card';
+
+import type { Order, ScanStatus } from '../types/business';

 const DomainShowcase: React.FC = () => {
  const [currentUser] = useState(MOCK_USERS[1]); // Organizer user
@@ -76,15 +77,15 @@ const DomainShowcase: React.FC = () => {
    updatedAt: new Date().toISOString()
  };

-  const handleEventAction = (action: string, eventId: string) => {
+  const handleEventAction = (_action: string, _eventId: string) => {
    // Handle event actions in real application
  };

-  const handleTicketAction = (action: string, ticketTypeId: string, value?: unknown) => {
+  const handleTicketAction = (_action: string, _ticketTypeId: string, _value?: unknown) => {
    // Handle ticket type actions in real application
  };

-  const handlePromoCode = async (code: string) => {
+  const handlePromoCode = async (_code: string) => {
    // Apply promo code in real application
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 1000));
@@ -92,11 +93,12 @@ const DomainShowcase: React.FC = () => {
  };

  const simulateScan = () => {
+    const isValid = Math.random() > 0.5;
    const newStatus: ScanStatus = {
-      isValid: Math.random() > 0.5,
+      isValid,
      status: Math.random() > 0.7 ? 'valid' : 'invalid',
      timestamp: new Date().toISOString(),
-      errorMessage: Math.random() > 0.5 ? 'Invalid QR format' : undefined,
+      ...(isValid ? {} : { errorMessage: 'Invalid QR format' }),
      ticketInfo: {
        eventTitle: 'Contemporary Dance Showcase',
        ticketTypeName: 'General Admission',
@@ -129,7 +131,7 @@ const DomainShowcase: React.FC = () => {
              <EventCard
                key={event.id}
                event={event}
-                currentUser={currentUser}
+                {...(currentUser && { currentUser })}
                onView={(id) => handleEventAction('view', id)}
                onEdit={(id) => handleEventAction('edit', id)}
                onManage={(id) => handleEventAction('manage', id)}
@@ -154,7 +156,7 @@ const DomainShowcase: React.FC = () => {
                  key={ticketType.id}
                  ticketType={ticketType}
                  layout="card"
-                  currentUser={currentUser}
+                  {...(currentUser && { currentUser })}
                  onEdit={(tt) => handleTicketAction('edit', tt.id)}
                  onDelete={(id) => handleTicketAction('delete', id)}
                  onToggleStatus={(id, status) => handleTicketAction('toggle-status', id, status)}
@@ -190,7 +192,7 @@ const DomainShowcase: React.FC = () => {
                          key={ticketType.id}
                          ticketType={ticketType}
                          layout="table"
-                          currentUser={currentUser}
+                          {...(currentUser && { currentUser })}
                          onEdit={(tt) => handleTicketAction('edit', tt.id)}
                          onDelete={(id) => handleTicketAction('delete', id)}
                          onToggleStatus={(id, status) => handleTicketAction('toggle-status', id, status)}
@@ -289,21 +291,21 @@ const DomainShowcase: React.FC = () => {
            <h3 className="text-lg font-medium text-fg-primary">Badge Sizes</h3>
            <div className="flex flex-wrap gap-4 items-center">
              <ScanStatusBadge
-                scanStatus={scanStatuses[0]}
+                scanStatus={scanStatuses[0]!}
                size="sm"
                showTimestamp={false}
                showTicketInfo={false}
                animated={false}
              />
              <ScanStatusBadge
-                scanStatus={scanStatuses[0]}
+                scanStatus={scanStatuses[0]!}
                size="md"
                showTimestamp={false}
                showTicketInfo={false}
                animated={false}
              />
              <ScanStatusBadge
-                scanStatus={scanStatuses[0]}
+                scanStatus={scanStatuses[0]!}
                size="lg"
                showTimestamp={false}
                showTicketInfo={false}
--- a/reactrebuild0825/src/components/billing/FeeBreakdown.tsx
+++ b/reactrebuild0825/src/components/billing/FeeBreakdown.tsx
@@ -1,8 +1,11 @@
 import React, { useState } from 'react';
-import { FeeStructure, Order, DEFAULT_FEE_STRUCTURE } from '../../types/business';
-import { Card, CardHeader, CardBody } from '../ui/Card';
-import { Button } from '../ui/Button';
+
+import { DEFAULT_FEE_STRUCTURE } from '../../types/business';
 import { Badge } from '../ui/Badge';
+import { Button } from '../ui/Button';
+import { Card, CardHeader, CardBody } from '../ui/Card';
+
+import type { FeeStructure, Order} from '../../types/business';

 export interface FeeBreakdownProps {
  order: Order;
@@ -37,7 +40,7 @@ const Tooltip: React.FC<TooltipProps> = ({ content, children }) => {
      {isVisible && (
        <div className="absolute z-10 bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 bg-bg-primary border border-border-subtle rounded-lg shadow-lg text-sm text-fg-secondary max-w-xs">
          {content}
-          <div className="absolute top-full left-1/2 transform -translate-x-1/2 border-4 border-transparent border-t-bg-primary"></div>
+          <div className="absolute top-full left-1/2 transform -translate-x-1/2 border-4 border-transparent border-t-bg-primary" />
        </div>
      )}
    </div>
@@ -56,21 +59,17 @@ const FeeBreakdown: React.FC<FeeBreakdownProps> = ({
  const [isExpanded, setIsExpanded] = useState(layout === 'detailed');

  // Format currency helper
-  const formatCurrency = (amountInCents: number) => {
-    return new Intl.NumberFormat('en-US', {
+  const formatCurrency = (amountInCents: number) => new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD'
    }).format(amountInCents / 100);
-  };

  // Format percentage helper
-  const formatPercentage = (rate: number) => {
-    return `${(rate * 100).toFixed(2)}%`;
-  };
+  const formatPercentage = (rate: number) => `${(rate * 100).toFixed(2)}%`;

  // Calculate fee breakdown details
  const calculateFeeDetails = () => {
-    const subtotal = order.subtotal;
+    const {subtotal} = order;
    
    // Platform fee breakdown
    const platformFeeVariable = Math.round(subtotal * feeStructure.platformFeeRate);
@@ -115,13 +114,11 @@ const FeeBreakdown: React.FC<FeeBreakdownProps> = ({
  const feeDetails = calculateFeeDetails();

  // Compliance information
-  const getComplianceInfo = () => {
-    return {
+  const getComplianceInfo = () => ({
      platformFee: "Service fee for platform usage, event management tools, and customer support.",
      processingFee: "Credit card processing fee charged by payment processor for secure transaction handling.",
      tax: "Local sales tax as required by applicable tax authorities. Tax-exempt organizations may qualify for reduced rates."
-    };
-  };
+    });

  const compliance = getComplianceInfo();

@@ -275,12 +272,12 @@ const FeeBreakdown: React.FC<FeeBreakdownProps> = ({
              <td className="border border-border-subtle px-4 py-2 font-semibold text-fg-primary">
                Total Fees & Taxes
              </td>
-              <td className="border border-border-subtle px-4 py-2"></td>
+              <td className="border border-border-subtle px-4 py-2" />
              <td className="border border-border-subtle px-4 py-2 text-right font-bold text-accent-primary">
                {formatCurrency(order.platformFee + order.processingFee + order.tax)}
              </td>
              {showCalculations && (
-                <td className="border border-border-subtle px-4 py-2"></td>
+                <td className="border border-border-subtle px-4 py-2" />
              )}
            </tr>
          </tbody>
--- a/reactrebuild0825/src/components/checkout/OrderSummary.tsx
+++ b/reactrebuild0825/src/components/checkout/OrderSummary.tsx
@@ -1,10 +1,13 @@
 import React, { useState } from 'react';
-import { Order, FeeStructure, PromoCode, DEFAULT_FEE_STRUCTURE } from '../../types/business';
-import { Card, CardHeader, CardBody, CardFooter } from '../ui/Card';
-import { Button } from '../ui/Button';
-import { Input } from '../ui/Input';
-import { Badge } from '../ui/Badge';
+
+import { DEFAULT_FEE_STRUCTURE } from '../../types/business';
 import { Alert } from '../ui/Alert';
+import { Badge } from '../ui/Badge';
+import { Button } from '../ui/Button';
+import { Card, CardHeader, CardBody, CardFooter } from '../ui/Card';
+import { Input } from '../ui/Input';
+
+import type { Order, FeeStructure, PromoCode} from '../../types/business';

 export interface OrderSummaryProps {
  order: Order;
@@ -31,16 +34,14 @@ const OrderSummary: React.FC<OrderSummaryProps> = ({
  const [showFeeBreakdown, setShowFeeBreakdown] = useState(false);

  // Format currency helper
-  const formatCurrency = (amountInCents: number) => {
-    return new Intl.NumberFormat('en-US', {
+  const formatCurrency = (amountInCents: number) => new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD'
    }).format(amountInCents / 100);
-  };

  // Handle promo code application
  const handleApplyPromo = async () => {
-    if (!promoCodeInput.trim() || !onPromoCodeApply) return;
+    if (!promoCodeInput.trim() || !onPromoCodeApply) {return;}

    setIsApplyingPromo(true);
    setPromoError(null);
--- a/reactrebuild0825/src/components/events/EventCard.tsx
+++ b/reactrebuild0825/src/components/events/EventCard.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
-import { Event, EventStats } from '../../types/business';
-import { User } from '../../types/auth';
-import { Card, CardBody, CardFooter } from '../ui/Card';
-import { Button } from '../ui/Button';
+
 import { Badge } from '../ui/Badge';
+import { Button } from '../ui/Button';
+import { Card, CardBody, CardFooter } from '../ui/Card';
+
+import type { User } from '../../types/auth';
+import type { Event, EventStats } from '../../types/business';

 export interface EventCardProps {
  event: Event;
--- a/reactrebuild0825/src/components/scanning/ScanStatusBadge.tsx
+++ b/reactrebuild0825/src/components/scanning/ScanStatusBadge.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { ScanStatus } from '../../types/business';
+
+import type { ScanStatus } from '../../types/business';

 export interface ScanStatusBadgeProps {
  scanStatus: ScanStatus;
@@ -30,6 +31,7 @@ const ScanStatusBadge: React.FC<ScanStatusBadgeProps> = ({
      const timer = setTimeout(() => setIsAnimating(false), 600);
      return () => clearTimeout(timer);
    }
+    return undefined;
  }, [scanStatus, animated]);

  // Handle accessibility announcements
@@ -57,7 +59,7 @@ const ScanStatusBadge: React.FC<ScanStatusBadgeProps> = ({

  // Format timestamp
  const formatTimestamp = (timestamp?: string) => {
-    if (!timestamp) return null;
+    if (!timestamp) {return null;}
    
    const date = new Date(timestamp);
    const now = new Date();
@@ -66,10 +68,10 @@ const ScanStatusBadge: React.FC<ScanStatusBadgeProps> = ({
    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));

-    if (diffMins < 1) return 'Just now';
-    if (diffMins < 60) return `${diffMins}m ago`;
-    if (diffHours < 24) return `${diffHours}h ago`;
-    if (diffDays < 7) return `${diffDays}d ago`;
+    if (diffMins < 1) {return 'Just now';}
+    if (diffMins < 60) {return `${diffMins}m ago`;}
+    if (diffHours < 24) {return `${diffHours}h ago`;}
+    if (diffDays < 7) {return `${diffDays}d ago`;}
    
    return date.toLocaleDateString('en-US', {
      month: 'short',
--- a/reactrebuild0825/src/components/tickets/TicketTypeRow.tsx
+++ b/reactrebuild0825/src/components/tickets/TicketTypeRow.tsx
@@ -1,10 +1,12 @@
 import React, { useState } from 'react';
-import { TicketType, TicketTypeStats } from '../../types/business';
-import { User } from '../../types/auth';
-import { Button } from '../ui/Button';
+
 import { Badge } from '../ui/Badge';
+import { Button } from '../ui/Button';
 import { Input } from '../ui/Input';

+import type { User } from '../../types/auth';
+import type { TicketType, TicketTypeStats } from '../../types/business';
+
 export interface TicketTypeRowProps {
  ticketType: TicketType;
  stats?: TicketTypeStats;