Merge pull request #146 from GTBitsOfGood/holiday_banner

Add holiday banner

mobile/screens/Admin/AdminDashboardScreen.tsx

@@ -12,6 +12,7 @@ import { adminGetAnnouncements } from "../../actions/Announcement";
 import { userGetUserInfo } from "../../actions/User";
 import BaseOverlay from "../../components/Overlays/BaseOverlay";
 import DashboardHeader from "../../components/DashboardHeader";
+import HolidayBanner from "../Banners/HolidayBanner";
 import { endOfExecutionHandler, ErrorWrapper } from "../../utils/error";
 import ErrorBox from "../../components/ErrorBox";
 import shadowStyle from "../../utils/styles";
@@ -66,6 +67,7 @@ export default function AdminDashboardScreen(props: any) {
       }
       body={
         <View style={styles.container}>
+          <HolidayBanner />
           <Text style={styles.label}>Announcements</Text>
           <View style={styles.announcementContainer}>
             <TouchableOpacity

mobile/screens/Banners/HolidayBanner.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { HOLIDAYS } from '../../utils/types';
+
+const HolidayBanner = () => {
+  const [holidayBanner, setHolidayBanner] = useState<{ name: string, message: string } | null>(null);
+
+  useEffect(() => {
+    function checkForHoliday() {
+      const today = new Date();
+      const holiday = HOLIDAYS.find(
+        (holiday) =>
+          holiday.month === today.getMonth() && holiday.day === today.getDate()
+      );
+      if (holiday) {
+        setHolidayBanner({ name: holiday.name, message: holiday.message });
+      } else {
+        setHolidayBanner(null);
+      }
+    }
+
+    checkForHoliday();
+  }, []);
+
+  if (!holidayBanner) return null;
+
+  return (
+    <View style={styles.holidayBanner}>
+      <Text style={styles.holidayTitle}>{holidayBanner.name}!</Text>
+      {holidayBanner.message ? (
+        <Text style={styles.holidayMessage}>{holidayBanner.message}</Text>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  holidayBanner: {
+    borderRadius: 10,
+    backgroundColor: "#3F3BED",
+    marginBottom: 10,
+    padding: 10,
+    display: "flex",
+    flexDirection: "column",
+    gap: 5,
+    opacity: 0.9
+  },
+  holidayTitle: {
+    color: "white",
+    fontSize: 14,
+    fontWeight: "700",
+    textAlign: "center"
+  },
+  holidayMessage: {
+    color: "white",
+    fontSize: 12,
+    fontWeight: "400",
+    textAlign: "center"
+  },
+});
+
+export default HolidayBanner;

mobile/screens/User/UserDashboardScreen.tsx

@@ -27,6 +27,7 @@ import { calculateAge } from "../../utils/helper";
 import { getFile } from "../../utils/storage";
 import { userGetTrainingLogs } from "../../actions/TrainingLog";
 import { userGetAnnouncements } from "../../actions/Announcement";
+import HolidayBanner from "../Banners/HolidayBanner";
 import BaseOverlay from "../../components/Overlays/BaseOverlay";
 import DashboardHeader from "../../components/DashboardHeader";
 import { endOfExecutionHandler, ErrorWrapper } from "../../utils/error";
@@ -107,6 +108,7 @@ export default function UserDashboardScreen(props: any) {
       }
       body={
         <View style={styles.container}>
+          <HolidayBanner />
           <Modal
             animationType="fade"
             transparent={true}

mobile/utils/types.ts

@@ -233,3 +233,10 @@ export interface Analytics {
 
   currentYear: number;
 }
+
+export const HOLIDAYS = [
+  { name: "National Donut Day!", message: "It is national donut day! The office would appreciate donuts!", month: 5, day: 6 },
+  { name: "Happy Memorial Day!", message: "Remember those who sacrificed for our freedom", month: 4, day: 26 },
+  { name: "Happy 4th of July!", message: "", month: 6, day: 4 },
+  { name: "Happy Veterans Day!", message: "Thank you to all those who sacrificed for us", month: 10, day: 11 },
+];