Merge pull request #4586 from OneCommunityGlobal/Manvitha-Phase-3-Feedback-Form

Sharadha taking over for Manvitha phase 3 - feedback form

Author: one-community

src/components/CommunityPortal/Activities/ActivitiesPage.jsx

@@ -1,14 +1,22 @@
+import React, { useState } from 'react';
 import RegistrationForm from './RegistrationForm';
 import ResourceMonitoring from './ResourceMonitoring';
 import LatestRegistration from './LatestRegistration';
 import MyEvent from './MyEvent';
+import ActivityFeedbackModal from '../ActivityFeedbackForm';
 import styles from './styles.module.css';
 
 function ActivitiesPage() {
+  const [showFeedback, setShowFeedback] = useState(false);
+
   return (
     <div className={`${styles.activitiesPage}`}>
       <header className={`${styles.header}`}>
         <h1 className={styles.headerTitle}>Event Registrations</h1>
+
+        <button className={styles.feedbackBtn} onClick={() => setShowFeedback(true)}>
+          Give Feedback
+        </button>
       </header>
 
       <ResourceMonitoring />
@@ -21,6 +29,7 @@ function ActivitiesPage() {
         <LatestRegistration />
         <MyEvent />
       </div>
+      {showFeedback && <ActivityFeedbackModal onClose={() => setShowFeedback(false)} />}
     </div>
   );
 }

src/components/CommunityPortal/Activities/styles.module.css

@@ -21,6 +21,20 @@
   text-align: center;
 }
 
+.feedbackBtn {
+  padding: 8px 18px;
+  background: #1f6feb;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.feedbackBtn:hover {
+  background: #1158c7;
+}
+
 .resourceTitle { 
   width: 100%;            
   display: block;         
@@ -422,4 +436,3 @@
   margin-top: 3px;
   font-size: 0.9em;
 }
-

src/components/CommunityPortal/ActivityFeedbackForm.jsx

@@ -0,0 +1,182 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import styles from './FeedbackModal.module.css';
+
+const ActivityFeedbackModal = ({ onClose }) => {
+  const [rating, setRating] = useState(0);
+  const [hover, setHover] = useState(0);
+  const [comment, setComment] = useState('');
+  const [moreDetails, setMoreDetails] = useState('');
+  const [showMore, setShowMore] = useState(false);
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+
+  const darkMode = useSelector(state => state.theme.darkMode);
+
+  const modalRef = useRef(null);
+  const errorRef = useRef(null);
+
+  useEffect(() => {
+    const getFocusableElements = () =>
+      Array.from(modalRef.current?.querySelectorAll('button, textarea, [role="button"]') || []);
+
+    modalRef.current?.focus();
+
+    const trap = e => {
+      if (e.key !== 'Tab') return;
+      const focusable = getFocusableElements();
+      const firstEl = focusable[0];
+      const lastEl = focusable[focusable.length - 1];
+
+      if (!firstEl || !lastEl) return;
+
+      if (e.shiftKey && document.activeElement === firstEl) {
+        e.preventDefault();
+        lastEl.focus();
+      } else if (!e.shiftKey && document.activeElement === lastEl) {
+        e.preventDefault();
+        firstEl.focus();
+      }
+    };
+
+    const escClose = e => {
+      if (e.key === 'Escape') onClose();
+    };
+
+    document.addEventListener('keydown', trap);
+    document.addEventListener('keydown', escClose);
+
+    return () => {
+      document.removeEventListener('keydown', trap);
+      document.removeEventListener('keydown', escClose);
+    };
+  }, [onClose]);
+
+  const handleSubmit = () => {
+    if (!rating) {
+      setError('Please select a rating.');
+      setTimeout(() => errorRef.current?.scrollIntoView({ behavior: 'smooth' }), 100);
+      return;
+    }
+
+    setError('');
+    setLoading(true);
+
+    setTimeout(() => {
+      setSubmitted(true);
+      setLoading(false);
+      setTimeout(() => onClose(), 1200);
+    }, 900);
+  };
+
+  const FilledStar = (
+    <svg viewBox="0 0 24 24" className={styles.starFilled}>
+      <path d="M12 .587l3.668 7.568L24 9.748l-6 5.848L19.335 24 12 19.897 4.665 24 6 15.596 0 9.748l8.332-1.593z" />
+    </svg>
+  );
+
+  const EmptyStar = (
+    <svg viewBox="0 0 24 24" className={styles.starEmpty}>
+      <path
+        d="M12 .587l3.668 7.568L24 9.748l-6 5.848L19.335 24 12 19.897 4.665 24 6 15.596 0 9.748l8.332-1.593z"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+
+  return (
+    <div
+      className={styles.overlay}
+      role="presentation"
+      onMouseDown={e => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div
+        ref={modalRef}
+        className={darkMode ? styles.modalDark : styles.modalLight}
+        role="dialog"
+        aria-modal="true"
+        tabIndex={-1}
+      >
+        <button className={styles.closeBtn} onClick={onClose} aria-label="Close feedback form">
+          ✕
+        </button>
+
+        <h2 className={styles.heading}>Activity Feedback</h2>
+
+        {submitted && <div className={styles.success}>Feedback submitted!</div>}
+
+        <div className={styles.starContainer}>
+          {[1, 2, 3, 4, 5].map(star => {
+            const filled = star <= (hover || rating);
+            return (
+              <span
+                key={star}
+                className={styles.starWrapper}
+                tabIndex={0}
+                role="button"
+                aria-label={`Rate ${star} stars`}
+                onMouseEnter={() => setHover(star)}
+                onMouseLeave={() => setHover(0)}
+                onClick={() => {
+                  setRating(star);
+                  setError('');
+                }}
+                onKeyDown={e => {
+                  if (e.key === 'ArrowRight' && rating < 5) setRating(rating + 1);
+                  if (e.key === 'ArrowLeft' && rating > 1) setRating(rating - 1);
+                  if (e.key === 'Enter') setRating(star);
+                }}
+              >
+                {filled ? FilledStar : EmptyStar}
+              </span>
+            );
+          })}
+        </div>
+
+        {error && (
+          <div ref={errorRef} className={styles.error}>
+            {error}
+          </div>
+        )}
+
+        <textarea
+          className={styles.commentBox}
+          maxLength={300}
+          placeholder="Optional: Add your feedback"
+          value={comment}
+          onChange={e => setComment(e.target.value)}
+        />
+
+        <div className={comment.length > 250 ? styles.charCountWarning : styles.charCount}>
+          {comment.length}/300
+        </div>
+
+        <button className={styles.moreDetailsBtn} onClick={() => setShowMore(!showMore)}>
+          {showMore ? 'Hide Additional Details' : 'Add More Details'}
+        </button>
+
+        {showMore && (
+          <textarea
+            className={styles.moreDetailsBox}
+            placeholder="Additional optional information..."
+            value={moreDetails}
+            onChange={e => setMoreDetails(e.target.value)}
+          />
+        )}
+
+        <button
+          className={rating ? styles.submitButton : styles.submitButtonDisabled}
+          onClick={handleSubmit}
+          aria-disabled={loading || !rating}
+        >
+          {loading ? 'Submitting...' : 'Submit Feedback'}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ActivityFeedbackModal;

src/components/CommunityPortal/ActivityFeedbackForm.test.jsx

@@ -0,0 +1,66 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { vi } from 'vitest';
+import { Provider } from 'react-redux';
+import { configureStore } from 'redux-mock-store';
+import ActivityFeedbackModal from './ActivityFeedbackForm';
+
+const mockStore = configureStore([]);
+
+vi.useFakeTimers();
+
+describe('ActivityFeedbackModal', () => {
+  const setup = ({ darkMode = false } = {}) => {
+    const store = mockStore({
+      theme: { darkMode },
+    });
+
+    const onClose = vi.fn();
+
+    render(
+      <Provider store={store}>
+        <ActivityFeedbackModal onClose={onClose} />
+      </Provider>,
+    );
+
+    return { onClose };
+  };
+
+  afterEach(() => {
+    vi.clearAllTimers();
+  });
+
+  test('renders modal title', () => {
+    setup();
+    expect(screen.getByText('Activity Feedback')).toBeInTheDocument();
+  });
+
+  test('focuses the dialog when opened', () => {
+    setup();
+    expect(screen.getByRole('dialog')).toHaveFocus();
+  });
+
+  test('uses dark modal styling when dark mode is enabled', () => {
+    setup({ darkMode: true });
+    expect(screen.getByRole('dialog').className).toContain('modalDark');
+  });
+
+  test('requires rating before submission', () => {
+    setup();
+    fireEvent.click(screen.getByText('Submit Feedback'));
+    expect(screen.getByText('Please select a rating.')).toBeInTheDocument();
+  });
+
+  test('closes after successful submit', () => {
+    const { onClose } = setup();
+
+    fireEvent.click(screen.getByLabelText('Rate 5 stars'));
+    fireEvent.click(screen.getByText('Submit Feedback'));
+
+    vi.advanceTimersByTime(900);
+    expect(screen.getByText('Feedback submitted!')).toBeInTheDocument();
+
+    vi.advanceTimersByTime(1200);
+    expect(onClose).toHaveBeenCalled();
+  });
+});