update feedback form

src/components/Contact/Contact.tsx

@@ -0,0 +1,48 @@
+import { Stack } from '@mui/material';
+import Page from 'components/Page/Page';
+import FeedbackForm from 'components/forms/FeedbackForm/FeedbackForm';
+import SocialLinks from 'components/SocialLinks/SocialLinks';
+import EmailConnect from 'components/EmailConnect/EmailConnect';
+import useIsMobile from 'hooks/useIsMobile';
+import FeedbackFormSuccess from 'components/forms/FeedbackFromSuccess/FeedbackFormSuccess';
+import useAddFeedbackMutation from 'hooks/mutations/useAddFeedbackMutation';
+
+const TITLE = 'Contact';
+
+const Contact = () => {
+  const isMobile = useIsMobile();
+  const {
+    mutate: addFeedbackMutate,
+    isPending,
+    isSuccess
+  } = useAddFeedbackMutation();
+
+  return (
+    <Page title={TITLE} data-cy="contact">
+      {isSuccess ? (
+        <FeedbackFormSuccess />
+      ) : (
+        <FeedbackForm
+          onSubmit={data => addFeedbackMutate(data)}
+          isPending={isPending}
+        />
+      )}
+
+      {(isMobile || isSuccess) && (
+        <Stack
+          gap={isMobile ? 2 : 8}
+          alignItems={isMobile ? 'center' : 'start'}
+          direction={isMobile ? 'column' : 'row'}
+          sx={{
+            width: '100%'
+          }}
+        >
+          <SocialLinks />
+          <EmailConnect />
+        </Stack>
+      )}
+    </Page>
+  );
+};
+
+export default Contact;

src/components/EmailConnect/EmailConnect.tsx

@@ -0,0 +1,19 @@
+import { Link, Stack, Typography } from '@mui/material';
+import useIsMobile from 'hooks/useIsMobile';
+
+const Connect = () => {
+  const isMobile = useIsMobile();
+  return (
+    <Stack direction="column" gap={1}>
+      {!isMobile && <Typography variant="h6">Connect</Typography>}
+      <Typography textAlign={isMobile ? 'center' : 'start'}>
+        For all other inquiries, {isMobile && <br />}email{' '}
+        <Link href="mailto:phlaskecosystem@gmail.com">
+          phlaskecosystem@gmail.com
+        </Link>
+      </Typography>
+    </Stack>
+  );
+};
+
+export default Connect;

src/components/Page/Page.tsx

@@ -10,12 +10,16 @@ type PageProps = {
 const Page = ({ children, title, 'data-cy': dataCy }: PageProps) => {
   return (
     <Stack
-      sx={{
+      sx={theme => ({
         color: '#60718c',
-        maxHeight: '55vh',
         overflowY: 'auto',
-        gap: '2.5rem'
-      }}
+        width: '100%',
+        gap: '2.5rem',
+        maxHeight: '85vh',
+        [theme.breakpoints.up('md')]: {
+          maxHeight: '55vh'
+        }
+      })}
     >
       <Typography
         sx={{ fontWeight: 600, lineHeight: '30px', fontSize: 24 }}

src/components/SocialLinks/SocialLinks.tsx

@@ -0,0 +1,44 @@
+import { Link, Stack, Typography } from '@mui/material';
+import { SocialFacebook, SocialInstagram, SocialLinkedin } from 'icons';
+
+const SocialContacts = () => {
+  return (
+    <Stack direction="column" alignItems="center" gap={1}>
+      <Typography variant="h6">Follow PHLASK</Typography>
+      <Stack direction={'row'} gap={4}>
+        <Link
+          sx={theme => ({
+            fontSize: theme.typography.pxToRem(48)
+          })}
+          href="https://www.facebook.com/PHLASKecosystem/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <SocialFacebook />
+        </Link>
+        <Link
+          sx={theme => ({
+            fontSize: theme.typography.pxToRem(48)
+          })}
+          href="https://www.instagram.com/phlaskecosystem/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <SocialInstagram />
+        </Link>
+        <Link
+          sx={theme => ({
+            fontSize: theme.typography.pxToRem(48)
+          })}
+          href="https://www.linkedin.com/company/phlask/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <SocialLinkedin />
+        </Link>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default SocialContacts;

src/components/forms/FeedbackForm/FeedbackForm.tsx

@@ -0,0 +1,111 @@
+import { Stack, Button, Typography } from '@mui/material';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { FormProvider, useForm, type SubmitHandler } from 'react-hook-form';
+import feedbackFormSchema, {
+  type FeedbackFormValues
+} from 'schemas/feedbackFormSchema';
+import FormTextField from 'components/forms/FormTextField/FormTextField';
+import FormCheckboxField from 'components/forms/FormCheckboxField/FormCheckboxField';
+
+type FormValues = FeedbackFormValues;
+
+type FeedbackFormProps = {
+  onSubmit: (data: FormValues) => void;
+  isPending: boolean;
+};
+
+const SCHEMA = feedbackFormSchema;
+
+const FeedbackForm = ({ onSubmit, isPending }: FeedbackFormProps) => {
+  const methods = useForm<FormValues>({
+    defaultValues: {
+      name: '',
+      email: '',
+      feedback: '',
+      is_interested_in_contributing: false
+    },
+    resolver: zodResolver(SCHEMA)
+  });
+
+  const { handleSubmit } = methods;
+
+  const handleFormSubmit: SubmitHandler<FormValues> = feedbackData => {
+    onSubmit(feedbackData);
+  };
+
+  return (
+    <FormProvider {...methods}>
+      <Typography variant="h6">Share Feedback</Typography>
+      <form onSubmit={handleSubmit(handleFormSubmit)}>
+        <Stack
+          gap={2}
+          sx={{
+            marginBottom: 4
+          }}
+        >
+          <FormTextField<FormValues>
+            name="name"
+            label="Name"
+            placeholder="Enter Your Name"
+            required
+            fullWidth
+            sx={theme => ({
+              [theme.breakpoints.up('md')]: {
+                width: '50%'
+              }
+            })}
+          />
+
+          <FormTextField<FormValues>
+            name="email"
+            label="Email"
+            placeholder="example@email.com"
+            required
+            fullWidth
+            sx={theme => ({
+              [theme.breakpoints.up('md')]: {
+                width: '50%'
+              }
+            })}
+          />
+
+          <FormTextField<FormValues>
+            name="feedback"
+            label="Feedback"
+            placeholder="Share your feedback and thoughts"
+            multiline
+            minRows={3}
+            required
+            fullWidth
+            helperText="Please do not include any sensitive personal information."
+          />
+
+          <FormCheckboxField<FormValues>
+            name="is_interested_in_contributing"
+            label="I'm interested in helping PHLASK with future research"
+            labelPlacement="end"
+          />
+
+          <Button
+            type="submit"
+            variant="contained"
+            loading={isPending}
+            sx={theme => ({
+              backgroundColor: '#10B6FF',
+              borderRadius: '8px',
+              alignSelf: 'center',
+              [theme.breakpoints.up('md')]: {
+                width: '50%',
+                alignSelf: 'flex-start'
+              }
+            })}
+          >
+            Submit Feedback
+          </Button>
+        </Stack>
+      </form>
+    </FormProvider>
+  );
+};
+
+export default FeedbackForm;

src/components/forms/FeedbackFromSuccess/FeedbackFormSuccess.tsx

@@ -0,0 +1,28 @@
+import { Stack, Typography } from '@mui/material';
+import { PhillySkyline } from 'icons';
+
+const FeedbackFormSuccess = () => {
+  return (
+    <Stack
+      sx={{
+        height: '100%',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        textAlign: 'center',
+        paddingBlock: '20px'
+      }}
+    >
+      <Typography
+        variant="h2" // @ts-expect-error Need to fix theme declaration
+        sx={theme => ({ color: theme.palette.global.darkUI.darkGrey2 })}
+      >
+        Thank you for your feedback!
+      </Typography>
+      <Stack sx={{ width: '100%', paddingInline: '21px' }}>
+        <PhillySkyline width="100%" height="306.02" />
+      </Stack>
+    </Stack>
+  );
+};
+
+export default FeedbackFormSuccess;

src/components/forms/FormCheckboxField/FormCheckboxField.tsx

@@ -0,0 +1,28 @@
+import { Checkbox, FormControl, FormControlLabel } from '@mui/material';
+import { useFormContext, type FieldValues, type Path } from 'react-hook-form';
+
+type FormCheckboxFieldProps<Values extends FieldValues> = {
+  name: Path<Values>;
+  label: string;
+  labelPlacement?: 'bottom' | 'end' | 'start' | 'top';
+};
+
+const FormCheckboxField = <Values extends FieldValues>({
+  name,
+  label,
+  labelPlacement = 'end'
+}: FormCheckboxFieldProps<Values>) => {
+  const { register } = useFormContext<Values>();
+
+  return (
+    <FormControl>
+      <FormControlLabel
+        control={<Checkbox {...register(name)} />}
+        label={label}
+        labelPlacement={labelPlacement}
+      />
+    </FormControl>
+  );
+};
+
+export default FormCheckboxField;