complete announcement feature

src/components/announcements/TcAnnouncementsAlert.spec.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import TcAnnouncementsAlert from './TcAnnouncementsAlert';
+
+const mockGrantWritePermissions = jest.fn();
+
+jest.mock('../../store/useStore', () => () => ({
+  grantWritePermissions: mockGrantWritePermissions,
+}));
+
+jest.mock('../../context/TokenContext', () => ({
+  useToken: () => ({
+    community: {
+      platforms: [
+        { id: '1', disconnectedAt: null, metadata: { id: '3123141414221' } },
+      ],
+    },
+  }),
+}));
+
+describe('TcAnnouncementsAlert', () => {
+  it('renders correctly', () => {
+    render(<TcAnnouncementsAlert />);
+    expect(
+      screen.getByText(/Announcements needs write access at the server-level/i)
+    ).toBeInTheDocument();
+  });
+});

src/components/announcements/TcAnnouncementsAlert.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import TcAlert from '../shared/TcAlert';
+import TcCollapse from '../shared/TcCollapse';
+import TcText from '../shared/TcText';
+import TcButton from '../shared/TcButton';
+import useAppStore from '../../store/useStore';
+import { useToken } from '../../context/TokenContext';
+
+function TcAnnouncementsAlert() {
+  const { grantWritePermissions } = useAppStore();
+
+  const { community } = useToken();
+
+  const handleGrantAccess = () => {
+    const guildId = community?.platforms.find(
+      (platform) => platform.disconnectedAt === null
+    )?.metadata.id;
+
+    if (guildId)
+      grantWritePermissions({
+        platformType: 'discord',
+        moduleType: 'Announcement',
+        id: guildId,
+      });
+  };
+  return (
+    <TcCollapse
+      in={true}
+      sx={{
+        position: 'sticky',
+        top: 0,
+        zIndex: 999,
+        '&:MuiPaper-root': {
+          display: 'flex',
+          justifyContent: 'center',
+        },
+      }}
+    >
+      <TcAlert
+        variant="filled"
+        className={'bg-error-500'}
+        icon={false}
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          paddingY: 0,
+        }}
+      >
+        <div className="md:space-x-3 flex flex-col md:flex-row items-center justify-center p-0">
+          <TcText
+            text={
+              'Announcements needs write access at the server-level (i.e. Send Message, Send Messages in Threads, Create Public Threads, Create Private Threads, etc)'
+            }
+            color={'white'}
+            variant={'subtitle1'}
+          />
+          <TcButton
+            text="Update Permissions"
+            onClick={handleGrantAccess}
+            className="text-white"
+          />
+        </div>
+      </TcAlert>
+    </TcCollapse>
+  );
+}
+
+export default TcAnnouncementsAlert;