Skip to content

Commit 6f7ce32

Browse files
committed
Add donation banners
1 parent 67ec4b0 commit 6f7ce32

File tree

5 files changed

+4858
-106
lines changed

5 files changed

+4858
-106
lines changed
+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import React, { useEffect, useState } from 'react';
2+
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
3+
import { Linking } from 'react-native';
4+
import dayjs from 'dayjs';
5+
import { DONATIONS } from '../../utils/types';
6+
import weekOfYear from 'dayjs/plugin/weekOfYear';
7+
8+
const donationBanner = () => {
9+
const [donationBanner, setDonationBanner] = useState<{ name: string, message: string } | null>(null);
10+
11+
useEffect(() => {
12+
function updateDonationMessage() {
13+
const today = new Date();
14+
dayjs.extend(weekOfYear);
15+
16+
const week = dayjs(today).week();
17+
const donation = DONATIONS[week % DONATIONS.length]
18+
if (donation) {
19+
setDonationBanner({ name: donation.name, message: donation.message });
20+
} else {
21+
setDonationBanner(null);
22+
}
23+
}
24+
25+
updateDonationMessage();
26+
}, []);
27+
28+
if (!donationBanner) return null;
29+
30+
return (
31+
<View style={styles.donationBanner}>
32+
<Text style={styles.donationTitle}>{donationBanner.name}!</Text>
33+
{donationBanner.message ? (
34+
<Text style={styles.donationMessage}>{donationBanner.message}</Text>
35+
) : null}
36+
<TouchableOpacity
37+
style={styles.button}
38+
onPress={() => Linking.openURL('https://www.paypal.me/Healing4Heroes?locale.x=en_US')}>
39+
<Text style={styles.buttonText}>Paypal</Text>
40+
</TouchableOpacity>
41+
<TouchableOpacity
42+
style={styles.button}
43+
onPress={() => Linking.openURL('https://venmo.com/u/HealingForHeroes-Nonprofit')}>
44+
<Text style={styles.buttonText}>Venmo</Text>
45+
</TouchableOpacity>
46+
</View>
47+
);
48+
};
49+
50+
const styles = StyleSheet.create({
51+
donationBanner: {
52+
borderRadius: 10,
53+
backgroundColor: "#3F3BED",
54+
marginBottom: 10,
55+
padding: 10,
56+
display: "flex",
57+
flexDirection: "column",
58+
gap: 5,
59+
opacity: 0.9
60+
},
61+
donationTitle: {
62+
color: "white",
63+
fontSize: 14,
64+
fontWeight: "700",
65+
textAlign: "center"
66+
},
67+
donationMessage: {
68+
color: "white",
69+
fontSize: 12,
70+
fontWeight: "400",
71+
textAlign: "center"
72+
},
73+
button: {
74+
backgroundColor: '#807efb',
75+
padding: 5,
76+
borderRadius: 5,
77+
alignItems: 'center',
78+
marginVertical: 3,
79+
paddingHorizontal: 30,
80+
},
81+
buttonText: {
82+
color: 'white',
83+
fontSize: 13,
84+
},
85+
});
86+
87+
export default donationBanner;
88+

mobile/screens/User/UserDashboardScreen.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import { getFile } from "../../utils/storage";
2828
import { userGetTrainingLogs } from "../../actions/TrainingLog";
2929
import { userGetAnnouncements } from "../../actions/Announcement";
3030
import HolidayBanner from "../Banners/HolidayBanner";
31+
import DonationBanner from "../Banners/DonationBanner";
3132
import BaseOverlay from "../../components/Overlays/BaseOverlay";
3233
import DashboardHeader from "../../components/DashboardHeader";
3334
import { endOfExecutionHandler, ErrorWrapper } from "../../utils/error";
@@ -166,6 +167,7 @@ export default function UserDashboardScreen(props: any) {
166167
<View style={styles.container}>
167168
{/* birthday reminder */}
168169
<HolidayBanner />
170+
<DonationBanner />
169171
<Modal
170172
animationType="fade"
171173
transparent={true}
@@ -429,4 +431,4 @@ const styles = StyleSheet.create({
429431
flexDirection: "row",
430432
justifyContent: "space-between",
431433
},
432-
});
434+
});

mobile/utils/types.ts

+9
Original file line numberDiff line numberDiff line change
@@ -244,3 +244,12 @@ export const HOLIDAYS = [
244244
{ name: "Happy 4th of July!", message: "", month: 6, day: 4 },
245245
{ name: "Happy Veterans Day!", message: "Thank you to all those who sacrificed for us", month: 10, day: 11 },
246246
];
247+
248+
export const DONATIONS = [
249+
{ 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."},
250+
{ 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!"},
251+
{ name: "Donate a Collar", message: "Help our service dogs stay safe and stylish with a new collar! Every little bit makes a big difference."},
252+
{ name: "Buy the Office Donuts", message: "Yum! The office would appreciate donuts!"},
253+
{ name: "Donate Dog Treats", message: "Fuel their training with delicious treats! Your donation will bring smiles (and tail wags) to our hardworking service dogs."},
254+
{ name: "Donate a Rabies Shot", message: "Show some love and buy service dogs their rabies shot! Anything is appreciated."}
255+
];

package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"start:mobile-tunnel": "cd mobile && npx expo start --tunnel"
2323
},
2424
"dependencies": {
25-
"concurrently": "^7.3.0"
25+
"concurrently": "^7.3.0",
26+
"expo-linking": "^6.3.1"
2627
}
2728
}

0 commit comments

Comments
 (0)