Merge pull request #1375 from jpt1729/main

Preventing adults from joining the slack

components/slack/join-form.js

@@ -32,6 +32,8 @@ const JoinForm = ({ sx = {}, router }) => {
 
   const eventReferrer = useField('event').value
 
+  const isAdult = useField('year').value === 'tertiary'
+  
   return (
     <Card sx={{ maxWidth: 'narrow', mx: 'auto', label: { mb: 3 }, ...sx }}>
       <form {...formProps}>
@@ -100,7 +102,7 @@ const JoinForm = ({ sx = {}, router }) => {
             required
           />
         </Label>
-        {/*{isAdult && (
+        {isAdult && (
           <Text
             variant="caption"
             color="secondary"
@@ -114,7 +116,7 @@ const JoinForm = ({ sx = {}, router }) => {
             a email at{' '}
             <Link href="mailto:team@hackclub.com">team@hackclub.com</Link>.
           </Text>
-        )}*/}
+        )}
         <Box>
           <Submit
             status={status}
@@ -126,7 +128,7 @@ const JoinForm = ({ sx = {}, router }) => {
                 ? "You're on the Waitlist!"
                 : 'Check your email for invite!'
             }}
-            disabled={status === 'loading' || status === 'success'}
+            disabled={status === 'loading' || status === 'success' || isAdult}
           />
           {status === 'success' && !useWaitlist && (
             <Text

components/submit.js

@@ -18,6 +18,10 @@ const bg = {
     bg: 'orange',
     backgroundImage: theme.util.gx('orange', 'red'),
     boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`
+  },
+  disabled: {
+    bg: 'gray',
+    backgroundImage: theme.util.gx('gray', 'gray'),
   }
 }
 
@@ -37,6 +41,7 @@ const Submit = ({
   },
   width = '100%',
   sx,
+  disabled,
   ...props
 }) => (
   <Button
@@ -48,10 +53,10 @@ const Submit = ({
       mt: 3,
       fontSize: 2,
       width,
-      ...(status === 'submitting' ? submitting : bg[status]),
+      ...(disabled ? bg['disabled'] : (status === 'submitting' ? submitting : bg[status])),
       ...sx
     }}
-    disabled={status === 'submitting'}
+    disabled={status === 'submitting' || disabled}
     {...props}
   >
     {status === 'submitting' ? 'Submitting…' : labels[status]}