warning

Author: Osamah Ahmad

src/pages/Landing.tsx

@@ -527,8 +527,7 @@ const Landing: React.FC<LandingProps> = () => {
             </Card>
             <Card className={sections[4]} variant='outlined'>
                 <Typography level='h2' color='success'>{sectionTitles[sections[4]]}</Typography>
-                <Button color='success' sx={{ width: 'fit-content' }} onClick={() => navigate(Paths.QuestionBank)}>Access the Question Bank</Button>
-                {auth && auth.currentUser && <Typography>You're currently signed in as {auth.currentUser.email}. <Link onClick={() => auth.signOut()}>Sign Out</Link>.</Typography>}
+                <Button color='success' sx={{ width: 'fit-content' }} onClick={() => navigate(auth.currentUser ? Paths.QuestionBank : Paths.SignUp)}>{auth.currentUser ? 'Access' : 'Sign up to'} the Question Bank</Button>
             </Card>
             <footer>
                 <Typography>

src/pages/QuestionBank.tsx

@@ -156,6 +156,7 @@ const QuestionBank: React.FC = ({ }) => {
 
     /* subscription */
     const [subscriptionChecked, setSubscriptionChecked] = useState<boolean>(false);
+    const [subscriptionWillRenew, setSubscriptionWillRenew] = useState<boolean>();
     const [subscriptionExpiryDate, setSubscriptionExpiryDate] = useState<Date>();
 
     const checkSubscription = useCallback(async () => {
@@ -178,6 +179,7 @@ const QuestionBank: React.FC = ({ }) => {
     }, [checkSubscription]);
 
     const hasSubscriptionExpired = subscriptionExpiryDate && (subscriptionExpiryDate < new Date(Date.now()));
+    const willSubscriptionExpireThisWeek = !subscriptionWillRenew && subscriptionExpiryDate && (subscriptionExpiryDate < new Date(Date.now() + (7 * 86400000)));
 
     /* parse data */
     const [paragraphs, setParagraphs] = useState<string[]>([]);
@@ -213,16 +215,16 @@ const QuestionBank: React.FC = ({ }) => {
             )}
             {subscriptionExpiryDate && (
                 <>
-                    <Alert color={hasSubscriptionExpired ? 'danger' : 'success'}>
+                    <Alert color={hasSubscriptionExpired ? 'danger' : (willSubscriptionExpireThisWeek ? 'warning' : 'success')}>
                         <Typography
                             level="body-sm"
                             sx={{ color: "inherit", display: "flex", gap: ".25em", alignItems: "center" }}
                         >
-                            Your subscription {hasSubscriptionExpired ? 'expired' : 'will renew'} on {
+                            Your subscription {hasSubscriptionExpired ? 'expired' : (subscriptionWillRenew ? 'will renew' : 'will expire')} at {
                                 subscriptionExpiryDate && (
                                     subscriptionExpiryDate.toLocaleString('en-GB', {
-                                        hour: '2-digit',
-                                        minute: '2-digit',
+                                        hour: 'numeric',
+                                        minute: 'numeric',
                                         hour12: true
                                     }) +
                                     ' on ' +
@@ -233,6 +235,7 @@ const QuestionBank: React.FC = ({ }) => {
                                         year: 'numeric'
                                     }))
                             }.
+                            {subscriptionWillRenew && <Typography><Link>Cancel Renewal</Link>.</Typography>}
                         </Typography>
                     </Alert>
                     {paragraphs.map((paragraph, index) => (

src/resources/Strings.ts

@@ -1,7 +1,8 @@
 enum Strings {
     AppName = 'Radiology Interview Prep.',
     TermsOfService = 'Terms of Service',
-    PrivacyPolicy = 'Privacy Policy'
+    PrivacyPolicy = 'Privacy Policy',
+    SignUp = 'Create Account'
 }
 
 export default Strings;