User Experience Patterns

// Example: Rich waiting experience with progress updates
function WaitingExperience({ queueStatus }) {
  return (
    <div className="waiting-experience">
      {/* Position indicator */}
      <PositionDisplay
        position={queueStatus.position}
        total={queueStatus.totalAhead}
      />

      {/* Progress visualization */}
      <ProgressBar progress={queueStatus.progressPercent} />

      {/* Estimated time */}
      <TimeEstimate minutes={queueStatus.estimatedWaitMinutes} />

      {/* Engagement content */}
      <ProductPreview product={product} />
      <BrandContent />
    </div>
  );
}

function PositionDisplay({ position, total }) {
  // For small queues, show exact position
  if (total <= 100) {
    return (
      <div className="position">
        <span className="position-number">{position}</span>
        <span className="position-label">of {total} in line</span>
      </div>
    );
  }

  // For large queues, use percentile or rounded numbers
  const percentile = Math.round((1 - position / total) * 100);
  return (
    <div className="position">
      <span className="position-percent">Top {100 - percentile}%</span>
      <span className="position-label">You're ahead of most people</span>
    </div>
  );
}

function TimeEstimate({ minutes }) {
  if (minutes === null || minutes === undefined) {
    return <p>Calculating estimated wait...</p>;
  }

  if (minutes < 1) {
    return <p>Almost there! Just a moment...</p>;
  }

  if (minutes < 5) {
    return (
      <p>
        About {minutes} minute{minutes > 1 ? "s" : ""} remaining
      </p>
    );
  }

  // Round to 5-minute increments for longer waits
  const rounded = Math.ceil(minutes / 5) * 5;
  return <p>Approximately {rounded} minutes remaining</p>;
}

function QueueProgress({ position, initialPosition }) {
  const progress = initialPosition > 0 ? ((initialPosition - position) / initialPosition) * 100 : 0;

  return (
    <div className="queue-progress">
      <div className="progress-bar" style={{ width: `${progress}%` }} />
      <span className="progress-text">{Math.round(progress)}% of the way there</span>
    </div>
  );
}

function DrawRegistration({ drawStatus }) {
  return (
    <div className="draw-registration">
      <CheckCircleIcon className="success-icon" />
      <h2>You're registered!</h2>
      <p>Draw #{drawStatus.entryNumber}</p>

      <div className="draw-details">
        <p>
          <strong>Draw time:</strong> {formatDateTime(drawStatus.drawTime)}
        </p>
        <p>
          <strong>Total entries:</strong> {drawStatus.totalEntries.toLocaleString()}
        </p>
      </div>

      <p className="instructions">We'll notify you when the draw is complete. No need to stay on this page.</p>
    </div>
  );
}

function DrawResults({ result }) {
  if (result.isWinner) {
    return (
      <div className="draw-result winner">
        <ConfettiAnimation />
        <h2>Congratulations! You've been selected!</h2>
        <p>You have {result.timeRemaining} to complete your purchase.</p>
        <CountdownTimer deadline={result.deadline} />
        <Button onClick={result.proceedToCheckout}>Complete Purchase</Button>
      </div>
    );
  }

  return (
    <div className="draw-result not-selected">
      <h2>Not selected this time</h2>
      <p>Thank you for participating. Better luck next time!</p>
      {result.waitlistAvailable && <Button onClick={result.joinWaitlist}>Join Waitlist for Updates</Button>}
    </div>
  );
}

function BidStatus({ auction, userBid }) {
  const isWinning = userBid?.amount === auction.currentBid;
  const isOutbid = userBid && !isWinning;

  return (
    <div className={`bid-status ${isWinning ? "winning" : ""} ${isOutbid ? "outbid" : ""}`}>
      {isWinning && (
        <>
          <TrophyIcon />
          <p>You're the highest bidder!</p>
        </>
      )}
      {isOutbid && (
        <>
          <AlertIcon />
          <p>You've been outbid. Place a new bid to stay in the running.</p>
        </>
      )}
      {!userBid && <p>Place a bid to participate</p>}
    </div>
  );
}

const ERROR_MESSAGES = {
  NETWORK_ERROR: {
    title: "Connection issue",
    message: "Please check your internet connection and try again.",
    action: "Retry",
  },
  RATE_LIMITED: {
    title: "Too many requests",
    message: "Please wait a moment before trying again.",
    action: "Wait",
  },
  SESSION_EXPIRED: {
    title: "Session expired",
    message: "Your session has expired. Please refresh the page.",
    action: "Refresh",
  },
  QUEUE_FULL: {
    title: "Queue is full",
    message: "This experience has reached capacity. Join the waitlist for future access.",
    action: "Join Waitlist",
  },
};

function ErrorDisplay({ error, onRetry }) {
  const errorInfo = ERROR_MESSAGES[error.code] || {
    title: "Something went wrong",
    message: "Please try again or contact support if the problem persists.",
    action: "Try Again",
  };

  return (
    <div className="error-display">
      <h3>{errorInfo.title}</h3>
      <p>{errorInfo.message}</p>
      <Button onClick={onRetry}>{errorInfo.action}</Button>
    </div>
  );
}

function LoadingState({ operation }) {
  const messages = {
    entering: "Joining the queue...",
    checking: "Checking your position...",
    processing: "Processing your request...",
  };

  return (
    <div className="loading-state">
      <Spinner />
      <p>{messages[operation] || "Loading..."}</p>
    </div>
  );
}

.queue-status {
  /* Mobile-first base styles */
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;

  /* Larger screens */
  @media (min-width: 768px) {
    flex-direction: row;
    padding: 2rem;
  }
}

.position-number {
  font-size: 3rem;

  @media (min-width: 768px) {
    font-size: 4rem;
  }
}

.action-button {
  /* Minimum touch target size */
  min-height: 44px;
  min-width: 44px;
  padding: 12px 24px;

  /* Clear visual feedback */
  &:active {
    transform: scale(0.98);
  }
}

function QueuePosition({ position }) {
  return (
    <div role="status" aria-live="polite" aria-atomic="true">
      <span className="visually-hidden">Your current position in the queue is</span>
      <span className="position-number">{position}</span>
    </div>
  );
}

function ActionButton({ onClick, children }) {
  return (
    <button
      onClick={onClick}
      onKeyDown={(e) => {
        if (e.key === "Enter" || e.key === " ") {
          e.preventDefault();
          onClick();
        }
      }}
    >
      {children}
    </button>
  );
}

function ProductShowcase({ product }) {
  return (
    <div className="product-showcase">
      <h3>While you wait...</h3>
      <ImageCarousel images={product.images} />
      <ProductDetails details={product.details} />
      <SizeGuide />
    </div>
  );
}

function BrandContent() {
  return (
    <div className="brand-content">
      <video autoPlay muted loop playsInline src="/brand-video.mp4" />
      <div className="brand-story">
        <h3>About the Collection</h3>
        <p>Learn about the inspiration behind this release...</p>
      </div>
    </div>
  );
}