feat: recruitment banner for designer (#578)

src/views/components/injected/RecruitmentBanner/RecruitmentBanner.tsx

@@ -1,14 +1,49 @@
 import Link from '@views/components/common/Link';
 import Text from '@views/components/common/Text/Text';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import styles from './RecruitmentBanner.module.scss';
 
 const DISCORD_URL = 'https://discord.gg/7pQDBGdmb7';
 const GITHUB_URL = 'https://github.com/Longhorn-Developers/UT-Registration-Plus';
+const DESIGNER_APPLICATION_URL =
+    'https://docs.google.com/forms/d/e/1FAIpQLSdX1Bb37tW6s1bkdIW3GJoTGcM_Uc-2DzFOFMXxGdn1jZ3K1A/viewform';
 
-const RECRUIT_FROM_DEPARTMENTS = ['C S', 'ECE', 'MIS', 'CSE', 'EE', 'ITD', 'DES'];
+// The lists below _must_ be mutually exclusive
+const DEVELOPER_RECRUIT_FROM_DEPARTMENTS = new Set(['C S', 'ECE', 'MIS', 'CSE', 'EE', 'ITD']);
+const DESIGNER_RECRUIT_FROM_DEPARTMENTS = new Set(['I', 'DES', 'AET']);
+
+type RecruitmentType = 'DEVELOPER' | 'DESIGNER' | 'NONE';
+
+const DeveloperRecruitmentBanner = () => (
+    <div className={styles.container}>
+        <Text className='text-white'>
+            Interested in helping us develop UT Registration Plus? Check out our{' '}
+            <Link className='text-ut-orange!' href={DISCORD_URL}>
+                Discord Server
+            </Link>{' '}
+            and{' '}
+            <Link className='text-ut-orange!' href={GITHUB_URL}>
+                GitHub
+            </Link>
+            !
+        </Text>
+    </div>
+);
+
+const DesignerRecruitmentBanner = () => (
+    <div className={styles.container}>
+        <Text className='text-white'>
+            Design for thousands of UT students through Longhorn Developers on real-world projects like UT Reg.
+            Plus.—build your portfolio and collaborate in Figma. Apply{' '}
+            <Link className='text-ut-orange!' href={DESIGNER_APPLICATION_URL}>
+                here
+            </Link>
+            !
+        </Text>
+    </div>
+);
 
 /**
  * This adds a new column to the course catalog table header.
@@ -17,47 +52,37 @@ const RECRUIT_FROM_DEPARTMENTS = ['C S', 'ECE', 'MIS', 'CSE', 'EE', 'ITD', 'DES'
  */
 export default function RecruitmentBanner(): JSX.Element | null {
     const [container, setContainer] = useState<HTMLDivElement | null>(null);
+    const recruitmentType = useMemo<RecruitmentType>(getRecruitmentType, []);
 
     useEffect(() => {
-        if (!canRecruitFrom()) {
+        if (recruitmentType === 'NONE') {
             return;
         }
+
         const container = document.createElement('div');
         container.setAttribute('id', 'ut-registration-plus-table-head');
 
         const table = document.querySelector('table');
         table!.before(container);
         setContainer(container);
-    }, []);
+    }, [recruitmentType]);
 
-    if (!container) {
+    if (!container || recruitmentType === 'NONE') {
         return null;
     }
 
     return createPortal(
-        <div className={styles.container}>
+        recruitmentType === 'DEVELOPER' ? <DeveloperRecruitmentBanner /> : <DesignerRecruitmentBanner />,
-            <Text color='white'>
-                Interested in helping us develop UT Registration Plus? Check out our{' '}
-                <Link color='white' href={DISCORD_URL}>
-                    Discord Server
-                </Link>{' '}
-                and{' '}
-                <Link color='white' href={GITHUB_URL}>
-                    GitHub
-                </Link>
-                !
-            </Text>
-        </div>,
         container
     );
 }
 
 /**
- * Determines if recruitment can be done from the current department.
+ * Determines what type of recruitment can be done from the current department.
  *
- * @returns True if recruitment can be done from the current department, false otherwise.
+ * @returns 'DEVELOPER' or 'DESIGNER' if the current department recruits for that respective type, otherwise 'NONE'
  */
-export const canRecruitFrom = (): boolean => {
+export const getRecruitmentType = (): RecruitmentType => {
     const params = ['fos_fl', 'fos_cn'];
     let department = '';
     params.forEach(p => {
@@ -66,8 +91,18 @@ export const canRecruitFrom = (): boolean => {
             department = param;
         }
     });
+
     if (!department) {
-        return false;
+        return 'NONE';
     }
-    return RECRUIT_FROM_DEPARTMENTS.includes(department);
+
+    if (DEVELOPER_RECRUIT_FROM_DEPARTMENTS.has(department)) {
+        return 'DEVELOPER';
+    }
+
+    if (DESIGNER_RECRUIT_FROM_DEPARTMENTS.has(department)) {
+        return 'DESIGNER';
+    }
+
+    return 'NONE';
 };