Templatize custom strings in strings.json across application

src/client/assets/strings.json

@@ -1,8 +1,12 @@
 {
 	"FULL_NAME": "VandyHacks VI",
 	"HACKATHON_TITLE": "VandyHacks VI",
+	"SHORTENED_HACKATHON_TITLE": "VH",
+	"HACKATHON_WEBSITE": "https://vandyhacks.org",
 	"WEBSITE_HTML_TITLE": "VandyHacks VI Application Portal",
 	"DEADLINE": "October 30th, 2019 at 11:59pm (CDT)",
+	"START_DAY": "November. 1st",
+	"START_DAY_SHORT": "Nov. 1st",
 	"DARK_TEXT_COLOR": "#3f3356",
 	"DARKEST_TEXT_COLOR": "#1A051D",
 	"BASE_COLOR": "#B1D0FE",
@@ -12,26 +16,25 @@
 	"LIGHT_TEXT_COLOR": "#D0C9D6",
 	"SQUARE_LOGO_ALT_TEXT": "VH Logo",
 	"HACKER_DASHBOARD_HEADER_TEXT": "Your application status:",
-	"HACKER_TEAMS_ANNOUNCMENT_TEXT": "Create a new team or join an existing one for the weekend! Due to prize arrangments, the maximum number of hackers per team is 4.\n\nThere will also be opportunities at the event to form teams.",
+	"HACKER_TEAMS_ANNOUNCEMENT_TEXT": "Create a new team or join an existing one for the weekend! Due to prize arrangements, the maximum number of hackers per team is 4.\n\nThere will also be opportunities at the event to form teams.",
 	"HACKER_TEAMS_FOOTER_TEXT": "You can join and leave a team at any time.",
+	"APPLICATION_STATUS_SVG_ALT_TEXT": "Pink VH 8-bit computer",
 	"GRAPHQL_ORGANIZER_ERROR_MESSAGE": "There was a problem.\nPlease contact your dev team.",
 	"GRAPHQL_HACKER_ERROR_MESSAGE": "There was a problem.\nPlease contact [email protected].",
 	"HELP_TEXT": "Please contact us at [email protected] with any questions or concerns, and we'd be happy to help you!",
 	"HELP_EMAIL": "[email protected]",
-	"COLOR_PALETTE": [
-		"#D0C9D6",
-		"#DBA5F5",
-		"#FFC7A6",
-		"#FFE29D",
-		"#7DDFC3",
-		"#A5AFFB",
-		"#FDAFBB"
-	],
+	"COLOR_PALETTE": ["#D0C9D6", "#DBA5F5", "#FFC7A6", "#FFE29D", "#7DDFC3", "#A5AFFB", "#FDAFBB"],
+	"APPLICATION_INCOMPLETE_STATUSBG": "#FBE4E8",
+	"APPLICATION_INCOMPLETE_STATUSCOLOR": "#FF647C",
+	"APPLICATION_COMPLETE_STATUSBG": "#D5F2EA",
+	"APPLICATION_COMPLETE_STATUSCOLOR": "hsl(163.4,52.7%,35%)",
+	"APPLICATION_DECLINED_STATUSBG": "#9C9C9C",
+	"APPLICATION_DECLINED_STATUSCOLOR": "#FFFFFF",
 	"TEXT_AREA_MAX_LENGTH": 1500,
 	"INPUT_MAX_LENGTH": 100,
 	"SENTRY_URL": "https://[email protected]/1769889",
 	"NO_EVENTS_MESSAGE": "There are no current events.",
 	"PERMISSIONS_HACKER_TABLE": "hackertable",
 	"PERMISSIONS_RESUME": "resume",
 	"PERMISSIONS_NFC": "nfc"
-}
+}

src/client/components/Sidebar/Sidebar.tsx

@@ -130,7 +130,7 @@ const Sidebar: FC<{ setMenuOpen?: React.Dispatch<React.SetStateAction<boolean>>
 			<Layout className="sidebar">
 				<Background>
 					<Logo>
-						<img src={SqLogo} alt="VH graphic" />
+						<img src={SqLogo} alt={`${STRINGS.SHORTENED_HACKATHON_TITLE} graphic`} />
 					</Logo>
 					<HorizontalLine />
 					<SpaceBetweenColumn height="calc(100% - calc(8rem + 160px))">

src/client/routes/dashboard/HackerDash.tsx

@@ -6,7 +6,7 @@ import { FlexColumn, FlexStartColumn } from '../../components/Containers/FlexCon
 import { Title } from '../../components/Text/Title';
 import STRINGS from '../../assets/strings.json';
 import { ButtonOutline, CenterButtonText } from '../../components/Buttons/Buttons';
-import applicationIncompleteSVG from '../../assets/img/application_incomplete.svg';
+import applicationStatusSVG from '../../assets/img/application_status.svg';
 import { SmallCenteredText } from '../../components/Text/SmallCenteredText';
 import {
 	ApplicationStatus,
@@ -26,10 +26,10 @@ const statusConfig = {
 			},
 		],
 		boldText: "You haven't started your application yet.",
-		img: applicationIncompleteSVG,
+		img: applicationStatusSVG,
 		status: 'Not Started',
-		statusBG: '#FBE4E8',
-		statusColor: '#FF647C',
+		statusBG: STRINGS.APPLICATION_INCOMPLETE_STATUSBG,
+		statusColor: STRINGS.APPLICATION_INCOMPLETE_STATUSCOLOR,
 		text: `The deadline is ${STRINGS.DEADLINE}`,
 	},
 	[ApplicationStatus.Started]: {
@@ -40,10 +40,10 @@ const statusConfig = {
 			},
 		],
 		boldText: 'You still need to finish your application.',
-		img: applicationIncompleteSVG,
+		img: applicationStatusSVG,
 		status: 'Incomplete',
-		statusBG: '#FBE4E8',
-		statusColor: '#FF647C',
+		statusBG: STRINGS.APPLICATION_INCOMPLETE_STATUSBG,
+		statusColor: STRINGS.APPLICATION_INCOMPLETE_STATUSCOLOR,
 		text: `The deadline is ${STRINGS.DEADLINE}`,
 	},
 	[ApplicationStatus.Submitted]: {
@@ -54,19 +54,19 @@ const statusConfig = {
 			},
 		],
 		boldText: "Thanks for applying! We'll get back to you with a decision shortly.",
-		img: applicationIncompleteSVG,
+		img: applicationStatusSVG,
 		status: 'Submitted',
-		statusBG: '#D5F2EA',
-		statusColor: 'hsl(163.4,52.7%,35%)',
+		statusBG: STRINGS.APPLICATION_COMPLETE_STATUSBG,
+		statusColor: STRINGS.APPLICATION_COMPLETE_STATUSCOLOR,
 		text: "You may update your responses at any time by re-visiting the application.'",
 	},
 	[ApplicationStatus.Confirmed]: {
 		actions: [],
-		boldText: "Whoo hoo! We'll see you Nov. 1st!",
-		img: applicationIncompleteSVG,
+		boldText: `Whoo hoo! We'll see you ${STRINGS.START_DAY}!`,
+		img: applicationStatusSVG,
 		status: 'Confirmed',
-		statusBG: '#D5F2EA',
-		statusColor: 'hsl(163.4,52.7%,35%)',
+		statusBG: STRINGS.APPLICATION_COMPLETE_STATUSBG,
+		statusColor: STRINGS.APPLICATION_COMPLETE_STATUSCOLOR,
 		text: "If you don't have a team, you can form one when you get here!",
 	},
 	[ApplicationStatus.Accepted]: {
@@ -81,28 +81,28 @@ const statusConfig = {
 			},
 		],
 		boldText: "You've been accepted!",
-		img: applicationIncompleteSVG,
+		img: applicationStatusSVG,
 		status: 'Accepted',
-		statusBG: '#D5F2EA',
-		statusColor: 'hsl(163.4,52.7%,35%)',
+		statusBG: STRINGS.APPLICATION_COMPLETE_STATUSBG,
+		statusColor: STRINGS.APPLICATION_COMPLETE_STATUSCOLOR,
 		text: "Confirm your spot to let us know you'll be coming",
 	},
 	[ApplicationStatus.Declined]: {
 		actions: [],
 		boldText: "You've declined.",
-		img: applicationIncompleteSVG,
+		img: applicationStatusSVG,
 		status: 'Declined',
-		statusBG: '#9C9C9C',
-		statusColor: '#FFFFFF',
-		text: ' Changed your mind? Email [email protected]',
+		statusBG: STRINGS.APPLICATION_DECLINED_STATUSBG,
+		statusColor: STRINGS.APPLICATION_DECLINED_STATUSCOLOR,
+		text: `Changed your mind? Email ${STRINGS.HELP_EMAIL}`,
 	},
 	[ApplicationStatus.Rejected]: {
 		actions: [],
 		boldText: "Unfortunately, we couldn't offer you a spot this year :(",
-		img: applicationIncompleteSVG,
+		img: applicationStatusSVG,
 		status: 'Denied',
-		statusBG: '#FBE4E8',
-		statusColor: '#FF647C',
+		statusBG: STRINGS.APPLICATION_INCOMPLETE_STATUSBG,
+		statusColor: STRINGS.APPLICATION_INCOMPLETE_STATUSCOLOR,
 		text: '',
 	},
 };
@@ -183,9 +183,12 @@ export const HackerDash: FunctionComponent = (): JSX.Element => {
 								<img
 									src={statusInfo.img}
 									height="200px"
-									alt="Man wearing hoodie at holographic computer"
+									alt={`${STRINGS.APPLICATION_STATUS_SVG_ALT_TEXT}`}
 								/>
-								<SmallCenteredText color="#3F3356" fontSize="1rem" margin="1.4rem">
+								<SmallCenteredText
+									color={`${STRINGS.DARK_TEXT_COLOR}`}
+									fontSize="1rem"
+									margin="1.4rem">
 									<span style={{ fontWeight: 'bold' }}>{statusInfo.boldText}</span>
 									<br />
 									{statusInfo.text}

src/client/routes/manageSponsor/CreateSponsor.tsx

@@ -13,6 +13,7 @@ import {
 	useTiersQuery,
 } from '../../generated/graphql';
 import Spinner from '../../components/Loading/Spinner';
+import STRINGS from '../../assets/strings.json';
 
 const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
 
@@ -53,11 +54,11 @@ const CreateCompany: React.FunctionComponent = (): JSX.Element => {
 	const onCreateCompany = async (): Promise<void> => {
 		try {
 			createCompany().catch(res => {
-				setCreateCompanyMsg(`Sorry. ${res.graphQLErrors[0].message} Try again :-)`);
+				setCreateCompanyMsg(`Sorry. ${res.graphQLErrors[0].message} Please try again :-)`);
 			});
 		} catch (err) {
 			console.error(err);
-			setCreateCompanyMsg(`Sorry. Something bad happens.`);
+			setCreateCompanyMsg(STRINGS.GRAPHQL_ORGANIZER_ERROR_MESSAGE);
 		}
 	};
 
@@ -89,7 +90,7 @@ const CreateCompany: React.FunctionComponent = (): JSX.Element => {
 					<p style={{ fontSize: '1.2rem' }}>Create</p>
 				</HeaderButton>
 			</FlexRow>
-			<SmallCenteredText color="#3F3356" fontSize="1rem" margin="0.8em">
+			<SmallCenteredText color={STRINGS.DARK_TEXT_COLOR} fontSize="1rem" margin="0.8em">
 				<span style={{ fontWeight: 'lighter' }}>{createCompanyMsg}</span>
 			</SmallCenteredText>
 		</>
@@ -108,11 +109,11 @@ const CreateTier: React.FunctionComponent = (): JSX.Element => {
 	const onCreateTier = async (): Promise<void> => {
 		try {
 			createTier().catch(res => {
-				setCreateTierMsg(`Sorry. ${res.graphQLErrors[0].message} Try again :-)`);
+				setCreateTierMsg(`Sorry. ${res.graphQLErrors[0].message} Please try again :-)`);
 			});
 		} catch (err) {
 			console.error(err);
-			setCreateTierMsg(`Sorry. Something bad happens.`);
+			setCreateTierMsg(STRINGS.GRAPHQL_ORGANIZER_ERROR_MESSAGE);
 		}
 	};
 
@@ -163,13 +164,13 @@ const CreateSponsor: React.FunctionComponent = (): JSX.Element => {
 				console.log(sponsorEmail);
 				console.log(sponsorName);
 				createSponsor().catch(res => {
-					setCreateSponsorMsg(`Sorry. ${res.graphQLErrors[0].message} Try again :-)`);
+					setCreateSponsorMsg(`Sorry. ${res.graphQLErrors[0].message} Please try again :-)`);
 				});
 				// create sponsor in the database
 				// already created or not
 			} catch (err) {
 				console.error(err);
-				setCreateSponsorMsg(`Sorry. Something bad happens.`);
+				setCreateSponsorMsg(STRINGS.GRAPHQL_ORGANIZER_ERROR_MESSAGE);
 			}
 		} else {
 			setCreateSponsorMsg(`Email '${sponsorEmail}' is not valid when creating sponsor`);

src/client/routes/team/Team.tsx

@@ -3,7 +3,7 @@ import FloatingPopup from '../../components/Containers/FloatingPopup';
 import { JoinTeam } from './JoinTeam';
 import { ViewTeam } from './ViewTeam';
 import { FlexColumn } from '../../components/Containers/FlexContainers';
-import Announcment from '../../components/Text/Announcment';
+import { Announcement } from '../../components/Text/Announcement';
 import STRINGS from '../../assets/strings.json';
 import { GraphQLErrorMessage } from '../../components/Text/ErrorMessage';
 import Spinner from '../../components/Loading/Spinner';
@@ -23,7 +23,7 @@ export const Team: FC = () => {
 
 	return (
 		<FlexColumn>
-			<Announcment value={STRINGS.HACKER_TEAMS_ANNOUNCMENT_TEXT} />
+			<Announcement value={STRINGS.HACKER_TEAMS_ANNOUNCEMENT_TEXT} />
 			<FloatingPopup borderRadius="1rem" width="35rem" backgroundOpacity="1" padding="1.5rem">
 				{!team || !team.name ? <JoinTeam /> : <ViewTeam teamName={team.name} />}
 			</FloatingPopup>

src/server/mail/handlers.ts

@@ -2,6 +2,7 @@ import { RequestHandler } from 'express';
 import { ObjectID } from 'mongodb';
 import { Models } from '../models';
 import logger from '../logger';
+import STRINGS from '../../client/assets/strings.json';
 
 export const UnsubscribeHandler = (models: Models): RequestHandler => {
 	return async (req, res) => {
@@ -13,7 +14,7 @@ export const UnsubscribeHandler = (models: Models): RequestHandler => {
 			)
 				.then(response => {
 					logger.info('Unsubscribed user from emails', response);
-					return res.redirect(301, 'https://vandyhacks.org');
+					return res.redirect(301, STRINGS.HACKATHON_WEBSITE);
 				})
 				.catch(logger.error);
 		} else {