feat: prefill campaign application organizer form values from current…

… user

src/components/client/campaign-application/CampaignApplicationForm.tsx

@@ -1,6 +1,6 @@
-import { useCallback, useState } from 'react'
-
+import { useCallback, useMemo, useState } from 'react'
 import { Grid, StepLabel } from '@mui/material'
+import { PersonResponse } from 'gql/person'
 
 import {
   CampaignApplicationFormData,
@@ -25,17 +25,6 @@ import {
   StyledStepConnector,
 } from './helpers/campaignApplication.styled'
 
-const initialValues: CampaignApplicationFormData = {
-  organizer: {
-    name: '',
-    phone: '',
-    email: '',
-    acceptTermsAndConditions: false,
-    transparencyTermsAccepted: false,
-    personalInformationProcessingAccepted: false,
-  },
-}
-
 const steps: StepType[] = [
   {
     title: 'campaign-application:steps.organizer.title',
@@ -51,9 +40,27 @@ const steps: StepType[] = [
   },
 ]
 
-export default function CampaignApplicationForm() {
+type Props = {
+  person: PersonResponse
+}
+
+export default function CampaignApplicationForm({ person }: Props) {
   const [activeStep, setActiveStep] = useState<Steps>(Steps.ORGANIZER)
 
+  const initialValues: CampaignApplicationFormData = useMemo(
+    () => ({
+      organizer: {
+        name: `${person?.firstName} ${person?.lastName}` ?? '',
+        phone: person?.phone ?? '',
+        email: person?.email ?? '',
+        acceptTermsAndConditions: false,
+        transparencyTermsAccepted: false,
+        personalInformationProcessingAccepted: false,
+      },
+    }),
+    [person],
+  )
+
   const handleSubmit = () => {
     stepsHandler({ activeStep, setActiveStep })
   }

src/components/client/campaign-application/CampaignApplicationPage.tsx

@@ -1,10 +1,24 @@
+import { CircularProgress, Grid } from '@mui/material'
+import { useSession } from 'next-auth/react'
+import { useViewPersonByKeylockId } from 'common/hooks/person'
 import Layout from '../layout/Layout'
 import CampaignApplicationForm from './CampaignApplicationForm'
 
 export default function CampaignApplicationPage() {
+  const { data: session } = useSession()
+  const { data: person, isLoading } = useViewPersonByKeylockId(session?.user?.sub as string)
+
+  if (isLoading) {
+    return (
+      <Grid container justifyContent="center" alignContent="center" sx={{ height: '100vh' }}>
+        <CircularProgress />
+      </Grid>
+    )
+  }
+
   return (
     <Layout maxWidth="md" sx={{ paddingInline: 5 }}>
-      <CampaignApplicationForm />
+      {person && <CampaignApplicationForm person={person} />}
     </Layout>
   )
 }