feat: Modal Dialogs Feedback Loop (#411)

src/components/ui/ModalFeedbackLoop.tsx

@@ -0,0 +1,143 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { Modal } from './Modal';
+
+export type Rating = 1 | 2 | 3 | 4 | 5;
+
+export interface ModalFeedbackLoopProps<T> {
+  isOpen: boolean;
+  title: string;
+  children: React.ReactNode;
+  /** Arbitrary context passed back via onFeedback; e.g. modal id, form values. */
+  modalData: T;
+  onFeedback: (entry: {
+    rating: Rating;
+    comment?: string;
+    sourceData: T;
+  }) => Promise<void> | void;
+  onClose: () => void;
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+}
+
+/**
+ * Modal Dialogs: Feedback Loop (#411).
+ *
+ * Wraps the existing `Modal` and queues a follow-up feedback dialog after the
+ * primary modal closes. The cycle = primary modal → feedback request → onClose,
+ * which is the "feedback loop" referenced in the issue title.
+ */
+export function ModalFeedbackLoop<T>({
+  isOpen,
+  title,
+  children,
+  modalData,
+  onFeedback,
+  onClose,
+  size = 'md',
+}: ModalFeedbackLoopProps<T>) {
+  const [awaitingFeedback, setAwaitingFeedback] = useState(false);
+  const [rating, setRating] = useState<Rating | null>(null);
+  const [comment, setComment] = useState('');
+  const [status, setStatus] = useState<'idle' | 'sending' | 'sent'>('idle');
+
+  useEffect(() => {
+    if (isOpen) {
+      setAwaitingFeedback(false);
+      setRating(null);
+      setComment('');
+      setStatus('idle');
+    }
+  }, [isOpen]);
+
+  const handlePrimaryClose = useCallback(() => {
+    setAwaitingFeedback(true);
+  }, []);
+
+  const handleSubmitFeedback = useCallback(async () => {
+    if (rating == null) return;
+    setStatus('sending');
+    try {
+      await onFeedback({
+        rating,
+        comment: comment.trim() || undefined,
+        sourceData: modalData,
+      });
+      setStatus('sent');
+      window.setTimeout(() => onClose(), 800);
+    } catch {
+      setStatus('idle');
+    }
+  }, [rating, comment, modalData, onFeedback, onClose]);
+
+  const handleSkip = useCallback(() => onClose(), [onClose]);
+
+  return (
+    <>
+      <Modal
+        isOpen={isOpen && !awaitingFeedback}
+        onClose={handlePrimaryClose}
+        title={title}
+        size={size}
+      >
+        {children}
+      </Modal>
+      <Modal
+        isOpen={isOpen && awaitingFeedback}
+        onClose={handleSkip}
+        title="Quick feedback"
+        size="sm"
+      >
+        {status === 'sent' ? (
+          <p role="status" aria-live="polite">
+            Thanks for the feedback!
+          </p>
+        ) : (
+          <>
+            <fieldset>
+              <legend>How was that experience?</legend>
+              <div>
+                {([1, 2, 3, 4, 5] as Rating[]).map((n) => (
+                  <button
+                    key={n}
+                    type="button"
+                    aria-pressed={rating === n}
+                    aria-label={`${n} of 5`}
+                    onClick={() => setRating(n)}
+                    className={rating === n ? 'font-bold underline' : ''}
+                  >
+                    {n}
+                  </button>
+                ))}
+              </div>
+            </fieldset>
+            <label className="block mt-3">
+              <span>Comment (optional)</span>
+              <textarea
+                value={comment}
+                onChange={(e) => setComment(e.target.value)}
+                maxLength={2000}
+                rows={3}
+                className="w-full"
+              />
+            </label>
+            <div className="flex justify-end gap-2 mt-4">
+              <button type="button" onClick={handleSkip}>
+                Skip
+              </button>
+              <button
+                type="button"
+                onClick={handleSubmitFeedback}
+                disabled={rating == null || status === 'sending'}
+              >
+                {status === 'sending' ? 'Sending…' : 'Send'}
+              </button>
+            </div>
+          </>
+        )}
+      </Modal>
+    </>
+  );
+}
+
+export default ModalFeedbackLoop;