Add donation banners

Author: pennonshue

mobile/screens/Banners/DonationBanner.tsx

@@ -0,0 +1,88 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { Linking } from 'react-native';
+import dayjs from 'dayjs';
+import { DONATIONS } from '../../utils/types';
+import weekOfYear from 'dayjs/plugin/weekOfYear';
+
+const donationBanner = () => {
+  const [donationBanner, setDonationBanner] = useState<{ name: string, message: string } | null>(null);
+
+  useEffect(() => {
+    function updateDonationMessage() {
+        const today = new Date();
+        dayjs.extend(weekOfYear);
+
+        const week = dayjs(today).week();
+        const donation = DONATIONS[week % DONATIONS.length]
+        if (donation) {
+            setDonationBanner({ name: donation.name, message: donation.message });
+        } else {
+            setDonationBanner(null);
+        }
+    }
+
+    updateDonationMessage();
+  }, []);
+
+  if (!donationBanner) return null;
+
+  return (
+    <View style={styles.donationBanner}>
+      <Text style={styles.donationTitle}>{donationBanner.name}!</Text>
+      {donationBanner.message ? (
+        <Text style={styles.donationMessage}>{donationBanner.message}</Text>
+      ) : null}
+      <TouchableOpacity
+        style={styles.button}
+        onPress={() => Linking.openURL('https://www.paypal.me/Healing4Heroes?locale.x=en_US')}>
+            <Text style={styles.buttonText}>Paypal</Text>
+      </TouchableOpacity>
+      <TouchableOpacity
+        style={styles.button}
+        onPress={() => Linking.openURL('https://venmo.com/u/HealingForHeroes-Nonprofit')}>
+            <Text style={styles.buttonText}>Venmo</Text>
+      </TouchableOpacity>
+   </View>
+  );
+};
+ 
+const styles = StyleSheet.create({
+    donationBanner: {
+        borderRadius: 10,
+        backgroundColor: "#3F3BED",
+        marginBottom: 10,
+        padding: 10,
+        display: "flex",
+        flexDirection: "column",
+        gap: 5,
+        opacity: 0.9
+    },
+    donationTitle: {
+        color: "white",
+        fontSize: 14,
+        fontWeight: "700",
+        textAlign: "center"
+    },
+    donationMessage: {
+        color: "white",
+        fontSize: 12,
+        fontWeight: "400",
+        textAlign: "center"
+    },
+    button: {
+        backgroundColor: '#807efb',
+        padding: 5,
+        borderRadius: 5,
+        alignItems: 'center',
+        marginVertical: 3,
+        paddingHorizontal: 30,
+    },
+    buttonText: {
+        color: 'white',
+        fontSize: 13,
+    },
+  });
+  
+  export default donationBanner;
+  

mobile/screens/User/UserDashboardScreen.tsx

@@ -28,6 +28,7 @@ import { getFile } from "../../utils/storage";
 import { userGetTrainingLogs } from "../../actions/TrainingLog";
 import { userGetAnnouncements } from "../../actions/Announcement";
 import HolidayBanner from "../Banners/HolidayBanner";
+import DonationBanner from "../Banners/DonationBanner";
 import BaseOverlay from "../../components/Overlays/BaseOverlay";
 import DashboardHeader from "../../components/DashboardHeader";
 import { endOfExecutionHandler, ErrorWrapper } from "../../utils/error";
@@ -166,6 +167,7 @@ export default function UserDashboardScreen(props: any) {
         <View style={styles.container}>
           {/* birthday reminder */}
           <HolidayBanner />
+          <DonationBanner />
           <Modal
             animationType="fade"
             transparent={true}
@@ -429,4 +431,4 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     justifyContent: "space-between",
   },
-});
+});

mobile/utils/types.ts

@@ -244,3 +244,12 @@ export const HOLIDAYS = [
   { 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 },
 ];
+
+export const DONATIONS = [
+  { name: "Donate a Leash", message: "Help keep our service dogs on the right path! Donate a leash and make their walks and training sessions even smoother."},
+  { name: "Donate a Crate", message: "Give our service dogs a comfy, secure place to rest. Donate a crate today and make their training journey even better!"},
+  { name: "Donate a Collar", message: "Help our service dogs stay safe and stylish with a new collar! Every little bit makes a big difference."},
+  { name: "Buy the Office Donuts", message: "Yum! The office would appreciate donuts!"},
+  { name: "Donate Dog Treats", message: "Fuel their training with delicious treats! Your donation will bring smiles (and tail wags) to our hardworking service dogs."},
+  { name: "Donate a Rabies Shot", message: "Show some love and buy service dogs their rabies shot! Anything is appreciated."}
+];

package.json

@@ -22,6 +22,7 @@
     "start:mobile-tunnel": "cd mobile && npx expo start --tunnel"
   },
   "dependencies": {
-    "concurrently": "^7.3.0"
+    "concurrently": "^7.3.0",
+    "expo-linking": "^6.3.1"
   }
 }