Merge pull request #4357 from OneCommunityGlobal/development

Frontend Release to Main [4.61]

Author: one-community

…mponents/Announcements/Announcements.css …s/Announcements/Announcements.module.csssrc/components/Announcements/Announcements.css renamed to src/components/Announcements/Announcements.module.css src/components/Announcements/Announcements.css renamed to src/components/Announcements/Announcements.module.css

@@ -1,15 +1,21 @@
 /* Announcements/Announcements.jsx */
 import { useState } from 'react';
-import './Announcements.css';
+import styles from './Announcements.module.css';
 import { useSelector } from 'react-redux';
 import { Nav, NavItem, NavLink, TabContent, TabPane } from 'reactstrap';
 import classnames from 'classnames';
 import SocialMediaComposer from './SocialMediaComposer';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
+import {
+  faEnvelope,
+  faVideo,
+  faNewspaper,
+  faImage,
+  faChartLine,
+} from '@fortawesome/free-solid-svg-icons';
 import { faFacebook, faLinkedin, faMedium } from '@fortawesome/free-brands-svg-icons';
 import ReactTooltip from 'react-tooltip';
-import EmailPanel from './platforms/email'; // ← new
+import EmailPanel from './platforms/email';
 
 function Announcements({ title, email: initialEmail }) {
   const [activeTab, setActiveTab] = useState('email');
@@ -23,13 +29,24 @@ function Announcements({ title, email: initialEmail }) {
         return '#0077B5';
       case 'medium':
         return '#00ab6c';
+      case 'video':
+        return '#FF0000';
+      case 'article':
+        return '#4285f4';
+      case 'photo':
+        return '#E91E63';
+      case 'weeklyreport':
+        return '#00C853';
       default:
         return null;
     }
   };
 
   const tabs = [
-    { id: 'email', icon: faEnvelope, label: 'Email' },
+    { id: 'weeklyreport', icon: faChartLine, label: 'Weekly Report' },
+    { id: 'photo', icon: faImage, label: 'Photo' },
+    { id: 'video', icon: faVideo, label: 'Video' },
+    { id: 'article', icon: faNewspaper, label: 'Article' },
     { id: 'x', label: 'X', customIconSrc: 'social-media-logos/x_icon.png' },
     { id: 'facebook', icon: faFacebook, label: 'Facebook' },
     { id: 'linkedin', icon: faLinkedin, label: 'LinkedIn' },
@@ -42,11 +59,9 @@ function Announcements({ title, email: initialEmail }) {
     { id: 'reddit', label: 'Reddit', customIconSrc: 'social-media-logos/reddit_icon.png' },
     { id: 'tumblr', label: 'Tumblr', customIconSrc: 'social-media-logos/tumblr_icon.png' },
     { id: 'imgur', label: 'Imgur', customIconSrc: 'social-media-logos/imgur_icon.png' },
-    { id: 'diigo', label: 'Diigo', customIconSrc: 'social-media-logos/diigo_icon.png' },
     { id: 'myspace', label: 'Myspace', customIconSrc: 'social-media-logos/myspace_icon.png' },
     { id: 'medium', icon: faMedium, label: 'Medium' },
     { id: 'plurk', label: 'Plurk', customIconSrc: 'social-media-logos/plurk_icon.png' },
-    { id: 'bitily', label: 'Bitily', customIconSrc: 'social-media-logos/bitily_icon.png' },
     {
       id: 'livejournal',
       label: 'LiveJournal',
@@ -59,6 +74,7 @@ function Announcements({ title, email: initialEmail }) {
       label: 'Truth Social',
       customIconSrc: 'social-media-logos/truthsocial_icon.png',
     },
+    { id: 'email', icon: faEnvelope, label: 'Email' },
   ];
 
   const columns = Math.ceil(tabs.length / 2);
@@ -71,28 +87,34 @@ function Announcements({ title, email: initialEmail }) {
   return (
     <div className={darkMode ? 'bg-oxford-blue text-light' : ''} style={{ minHeight: '100%' }}>
       <Nav
-        className={classnames('tab-grid', { 'two-rows': columns === 2, dark: darkMode })}
+        className={classnames(styles.tabGrid, {
+          [styles.twoRows]: columns === 2,
+          [styles.dark]: darkMode,
+        })}
         style={gridStyle}
       >
         {tabs.map(({ id, icon, label, customIconSrc }) => (
-          <NavItem key={id}>
+          <NavItem key={id} className={styles.navItem}>
             <NavLink
               data-tip={label}
-              className={classnames('tab-nav-item', { active: activeTab === id, dark: darkMode })}
+              className={classnames(styles.navLink, styles.tabNavItem, {
+                [styles.active]: activeTab === id,
+                [styles.dark]: darkMode,
+              })}
               onClick={() => setActiveTab(id)}
               aria-selected={activeTab === id}
             >
-              <div className="tab-icon">
+              <div className={styles.tabIcon}>
                 {customIconSrc ? (
-                  <img src={customIconSrc} alt={`${label} icon`} className="tab-icon" />
+                  <img src={customIconSrc} alt={`${label} icon`} className={styles.tabIcon} />
                 ) : (
                   <FontAwesomeIcon
                     icon={icon}
                     style={{ width: '100%', height: '100%', color: getIconColor(id) }}
                   />
                 )}
               </div>
-              <div className="tab-label">{label}</div>
+              <div className={styles.tabLabel}>{label}</div>
             </NavLink>
           </NavItem>
         ))}
@@ -101,12 +123,26 @@ function Announcements({ title, email: initialEmail }) {
 
       <div style={{ backgroundColor: darkMode ? '#14233a' : '#fff', padding: '1rem' }}>
         <TabContent activeTab={activeTab}>
-          {/* Email tab now uses the extracted component */}
           <TabPane tabId="email">
             <EmailPanel title={title} initialEmail={initialEmail} />
           </TabPane>
 
-          {/* Platforms stay the same */}
+          <TabPane tabId="video">
+            <SocialMediaComposer platform="video" />
+          </TabPane>
+
+          <TabPane tabId="article">
+            <SocialMediaComposer platform="article" />
+          </TabPane>
+
+          <TabPane tabId="photo">
+            <SocialMediaComposer platform="photo" />
+          </TabPane>
+
+          <TabPane tabId="weeklyreport">
+            <SocialMediaComposer platform="weeklyreport" />
+          </TabPane>
+
           {[
             'x',
             'facebook',

src/components/Announcements/index.jsx

@@ -4,6 +4,7 @@ import { Editor } from '@tinymce/tinymce-react';
 import { toast } from 'react-toastify';
 import { boxStyle, boxStyleDark } from '~/styles';
 import { sendEmail, broadcastEmailsToAll } from '../../../../actions/sendEmails.jsx';
+import styles from '../../Announcements.module.css';
 
 export default function EmailPanel({ title, initialEmail }) {
   const dispatch = useDispatch();
@@ -142,8 +143,8 @@ export default function EmailPanel({ title, initialEmail }) {
   };
 
   return (
-    <div className="email-update-container">
-      <div className="editor">
+    <div className={styles.emailUpdateContainer}>
+      <div className={styles.editor}>
         {title ? <h3>{title}</h3> : <h3>Weekly Progress Editor</h3>}
         <br />
         {showEditor && (
@@ -159,15 +160,15 @@ export default function EmailPanel({ title, initialEmail }) {
           />
         )}
         <div className="send-buttons" style={{ marginTop: '1rem' }}>
-          <button type="button" onClick={handleBroadcastEmails} className="send-button">
+          <button type="button" onClick={handleBroadcastEmails} className={styles.sendButton}>
             Broadcast Weekly Update
           </button>
         </div>
       </div>
 
       {title ? null : (
         <div
-          className={`emails${darkMode ? ' bg-yinmn-blue text-light' : ''}`}
+          className={`${styles.emails}${darkMode ? ' bg-yinmn-blue text-light' : ''}`}
           style={darkMode ? boxStyleDark : boxStyle}
         >
           <label htmlFor="email-list-input" className={darkMode ? 'text-light' : 'text-dark'}>
@@ -179,13 +180,13 @@ export default function EmailPanel({ title, initialEmail }) {
             value={emailTo}
             onChange={handleEmailListChange}
             placeholder="Enter email addresses (comma-separated)"
-            className={`input-text-for-announcement ${
+            className={`${styles.inputTextForAnnouncement} ${
               darkMode ? 'bg-darkmode-liblack text-light border-0' : ''
             }`}
           />
           <button
             type="button"
-            className="send-button"
+            className={styles.sendButton}
             onClick={handleSendEmails}
             style={darkMode ? boxStyleDark : boxStyle}
           >
@@ -202,13 +203,13 @@ export default function EmailPanel({ title, initialEmail }) {
             value={headerContent}
             onChange={handleHeaderContentChange}
             placeholder="Enter header image URL"
-            className={`input-text-for-announcement ${
+            className={`${styles.inputTextForAnnouncement} ${
               darkMode ? 'bg-darkmode-liblack text-light border-0' : ''
             }`}
           />
           <button
             type="button"
-            className="send-button"
+            className={styles.sendButton}
             onClick={addHeaderToEmailContent}
             style={darkMode ? boxStyleDark : boxStyle}
           >
@@ -223,7 +224,7 @@ export default function EmailPanel({ title, initialEmail }) {
             type="file"
             id="upload-header-input"
             onChange={addImageToEmailContent}
-            className="input-file-upload"
+            className={styles.inputFileUpload}
           />
         </div>
       )}

src/components/Announcements/platforms/email/index.jsx

@@ -31,7 +31,7 @@ function PermissionWatcher() {
 
       if (!userProfile || !userProfile._id) {
         // eslint-disable-next-line no-console
-        console.error('User profile not available');
+        //console.error('User profile not available');
         setIsAckLoading(false);
         return;
       }
@@ -53,12 +53,12 @@ function PermissionWatcher() {
         })
         .catch(error => {
           // eslint-disable-next-line no-console
-          console.error('Error updating user profile:', error);
+          // console.error('Error updating user profile:', error);
           setIsAckLoading(false);
         });
     } catch (error) {
       // eslint-disable-next-line no-console
-      console.error('Error acknowledging permission changes:', error);
+      // console.error('Error acknowledging permission changes:', error);
       setIsAckLoading(false);
     }
   };