add channels permission hints component

src/components/announcements/create/publicMessageContainer/TcPublicMessageContainer.tsx

@@ -16,6 +16,7 @@ import { ChannelContext } from '../../../../context/ChannelContext';
 import TcPlatformChannelList from '../../../communitySettings/platform/TcPlatformChannelList';
 import { IGuildChannels } from '../../../../utils/types';
 import { DiscordData } from '../../../../pages/announcements/edit-announcements';
+import TcPermissionHints from '../../../global/TcPermissionHints';
 
 export interface FlattenedChannel {
   id: string;
@@ -143,66 +144,7 @@ function TcPublicMessageContainer({
               <div className="border border-gray-300 rounded-md">
                 <TcPlatformChannelList refreshTrigger={false} />
               </div>
-              <div>
-                <Accordion disableGutters defaultExpanded={false} elevation={0}>
-                  <AccordionSummary
-                    expandIcon={
-                      <MdExpandMore color="#37474F" size={25} fill="#37474F" />
-                    }
-                  >
-                    <TcText
-                      text="Don't see a specific channel?"
-                      variant="body2"
-                      fontWeight="bold"
-                    />
-                  </AccordionSummary>
-                  <AccordionDetails>
-                    <div className="pl-1 pr-4 text-left">
-                      <TcText
-                        text="How to give access to the channel you want to import?"
-                        variant="subtitle2"
-                        fontWeight={300}
-                        className="text-gray-500"
-                      />
-                      <ol className="list-decimal text-sm pl-4">
-                        <li>
-                          Navigate to the channel you want to import on{' '}
-                          <a
-                            href="https://discord.com/"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="text-secondary font-semibold cursor-pointer"
-                          >
-                            Discord
-                          </a>
-                        </li>
-                        <li>
-                          Go to the settings for that specific channel (select
-                          the wheel on the right of the channel name)
-                        </li>
-                        <li>
-                          Select <b>Permissions</b> (left sidebar), and then in
-                          the middle of the screen check{' '}
-                          <b>Advanced permissions</b>
-                        </li>
-                        <li>
-                          With the <b>TogetherCrew Bot</b> selected, under
-                          Advanced Permissions, make sure that [View channel]
-                          and [Write Access] are marked as [✓]
-                        </li>
-                        <li>
-                          Select the plus sign to the right of Roles/Members and
-                          under members select <b>TogetherCrew bot</b>
-                        </li>
-                        <li>
-                          Click on the <b>Refresh List</b> button on this window
-                          and select the new channels
-                        </li>
-                      </ol>
-                    </div>
-                  </AccordionDetails>
-                </Accordion>
-              </div>
+              <TcPermissionHints />
             </div>
           </TcSelect>
         </FormControl>

src/components/communitySettings/platform/TcPlatformChannelList.tsx

@@ -95,7 +95,8 @@ function TcPlatformChannelList({
                       }
                       disabled={channel?.subChannels?.some(
                         (subChannel) =>
-                          !subChannel.canReadMessageHistoryAndViewChannel
+                          !subChannel.canReadMessageHistoryAndViewChannel ||
+                          !subChannel.announcementAccess
                       )}
                     />
                   }

src/components/global/TcPermissionHints/TcPermissionHints.spec.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import PermissionHints from './TcPermissionHints';
+describe('PermissionHints Component', () => {
+  test('renders PermissionHints component', () => {
+    render(<PermissionHints />);
+    expect(screen.getByText('Access Settings')).toBeInTheDocument();
+    expect(screen.getByText('Server Level')).toBeInTheDocument();
+    expect(screen.getByText('Category Level')).toBeInTheDocument();
+    expect(screen.getByText('Channel Level')).toBeInTheDocument();
+  });
+
+  test('initial active category is Access Settings', async () => {
+    render(<PermissionHints />);
+    await waitFor(() => {
+      expect(
+        screen.getByText('What does “Read” and “Write” access mean?')
+      ).toBeInTheDocument();
+    });
+  });
+
+  test('clicking on a category button changes active category to Server Level', async () => {
+    render(<PermissionHints />);
+    const serverLevelButton = screen.getByText('Server Level');
+    userEvent.click(serverLevelButton);
+    await waitFor(() => {
+      expect(
+        screen.getByText(
+          'Please note that your platform’s permission settings enable the above permission controls'
+        )
+      ).toBeInTheDocument();
+    });
+  });
+
+  test('clicking on a category button changes active category to Category Level', async () => {
+    render(<PermissionHints />);
+    const categoryLevelButton = screen.getByText('Category Level');
+    userEvent.click(categoryLevelButton);
+    await waitFor(() => {
+      expect(
+        screen.getByText(
+          'Please note that Category-level permissions override Server-level permissions'
+        )
+      ).toBeInTheDocument();
+    });
+  });
+
+  test('clicking on a category button changes active category to Channel Level', async () => {
+    render(<PermissionHints />);
+
+    const channelLevelButton = screen.getByText('Channel Level');
+
+    userEvent.click(channelLevelButton);
+
+    await waitFor(() => {
+      expect(
+        screen.getByText(
+          'Please note that Channel-level permissions override Category-level permissions, which in turn override Server-level permissions'
+        )
+      ).toBeInTheDocument();
+    });
+  });
+});