wip

apps/companion/renderer/components/CheckoutConfirmationDialog.tsx

@@ -0,0 +1,116 @@
+/**
+ * CheckoutConfirmationDialog component
+ * Displays checkout information and requests user confirmation before proceeding.
+ */
+
+import React, { useEffect, useState } from 'react';
+
+interface CheckoutConfirmationRequest {
+  price: string;
+  state: 'ready' | 'insufficient_funds';
+  sessionMetadata: {
+    sessionName: string;
+    trackId: string;
+    carIds: string[];
+  };
+  timeoutMs: number;
+}
+
+interface CheckoutConfirmationDialogProps {
+  request: CheckoutConfirmationRequest;
+}
+
+export const CheckoutConfirmationDialog: React.FC<CheckoutConfirmationDialogProps> = ({
+  request,
+}) => {
+  const [remainingSeconds, setRemainingSeconds] = useState(
+    Math.floor(request.timeoutMs / 1000)
+  );
+
+  useEffect(() => {
+    // Countdown timer
+    const intervalId = setInterval(() => {
+      setRemainingSeconds((prev) => {
+        if (prev <= 1) {
+          clearInterval(intervalId);
+          window.electronAPI.confirmCheckout('timeout');
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
+  const handleConfirm = () => {
+    window.electronAPI.confirmCheckout('confirmed');
+  };
+
+  const handleCancel = () => {
+    window.electronAPI.confirmCheckout('cancelled');
+  };
+
+  return (
+    <div className="checkout-confirmation-dialog">
+      <div className="dialog-overlay">
+        <div className="dialog-content">
+          <h2>Confirm Checkout</h2>
+
+          <div className="checkout-details">
+            <div className="price-section">
+              <span className="price-label">Price:</span>
+              <span className="price-value">{request.price}</span>
+            </div>
+
+            {request.state === 'insufficient_funds' && (
+              <div className="warning-section">
+                <span className="warning-text">⚠️ Insufficient funds</span>
+              </div>
+            )}
+
+            <div className="session-info">
+              <div className="info-row">
+                <span className="info-label">Session:</span>
+                <span className="info-value">{request.sessionMetadata.sessionName}</span>
+              </div>
+              <div className="info-row">
+                <span className="info-label">Track:</span>
+                <span className="info-value">{request.sessionMetadata.trackId}</span>
+              </div>
+              <div className="info-row">
+                <span className="info-label">Cars:</span>
+                <span className="info-value">
+                  {request.sessionMetadata.carIds.join(', ')}
+                </span>
+              </div>
+            </div>
+
+            <div className="countdown-section">
+              <span className="countdown-text">
+                Time remaining: {remainingSeconds}s
+              </span>
+            </div>
+          </div>
+
+          <div className="dialog-actions">
+            <button
+              type="button"
+              className="btn btn-cancel"
+              onClick={handleCancel}
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              className="btn btn-confirm"
+              onClick={handleConfirm}
+            >
+              Confirm
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};