diff --git a/app/components/booking/Step3.tsx b/app/components/booking/Step3.tsx index f7b442f..528092e 100644 --- a/app/components/booking/Step3.tsx +++ b/app/components/booking/Step3.tsx @@ -7,8 +7,8 @@ import { } from '@chakra-ui/react'; import Field from './Field'; import useIsDJ from './useIsDJ'; -import {getUtmSource} from '~/routes/booking.$applicationType._index'; import {HeardAboutBookingFrom, PreviouslyPlayed} from '~/types/graphql'; +import {useUtmSource} from '~/routes/booking._index'; const HEARD_ABOUT: Map = new Map([ [HeardAboutBookingFrom.BYon, 'BY-on'], @@ -27,6 +27,7 @@ const PLAYED_PREVIOUSLY: Map = new Map([ export default function Step3() { const isDJ = useIsDJ(); + const utmSource = useUtmSource(); return ( <> @@ -78,7 +79,7 @@ export default function Step3() { - {!getUtmSource() && ( + {!utmSource && ( {isDJ diff --git a/app/routes/booking.$applicationType._index.tsx b/app/routes/booking.$applicationType._index.tsx index 2d61259..34b2fdd 100644 --- a/app/routes/booking.$applicationType._index.tsx +++ b/app/routes/booking.$applicationType._index.tsx @@ -13,6 +13,7 @@ import { } from '@chakra-ui/react'; import {useNavigate, useParams} from '@remix-run/react'; import {Steps, Step} from 'chakra-ui-steps'; +import type {Routes} from 'remix-routes'; import {$path} from 'remix-routes'; import {Formik, Form} from 'formik'; import Step1 from '~/components/booking/Step1'; @@ -27,7 +28,7 @@ import { } from '~/types/graphql'; import {gql} from '@apollo/client'; import ReloadWarning from '~/components/booking/ReloadWarning'; -import {EVENT_ID} from './booking._index'; +import {EVENT_ID, useUtmSource} from './booking._index'; const STEPS = [Step1, Step2, Step3] as const; export type FormikContextT = Partial & { @@ -35,7 +36,7 @@ export type FormikContextT = Partial & { }; export type SearchParams = { - applicationType: 'band' | 'dj'; + utm_source?: string; }; gql` @@ -49,12 +50,6 @@ gql` } `; -export function getUtmSource() { - if (typeof window !== 'undefined') { - return window.sessionStorage.getItem('utm_source'); - } -} - const utmSourceMapping: Record = Object.freeze({ fb: HeardAboutBookingFrom.Facebook, ig: HeardAboutBookingFrom.Instagram, @@ -62,10 +57,12 @@ const utmSourceMapping: Record = Object.freeze({ export default function () { const [currentStep, setCurrentStep] = useState(0); - const {applicationType} = useParams(); + const {applicationType} = + useParams(); const [create, {error}] = useCreateBandApplicationMutation(); const isLastStep = currentStep === STEPS.length - 1; const navigate = useNavigate(); + const utm_source = useUtmSource(); return ( @@ -102,7 +99,7 @@ export default function () { initialValues={{ - heardAboutBookingFrom: utmSourceMapping[getUtmSource() ?? ''], + heardAboutBookingFrom: utmSourceMapping[utm_source ?? ''], genreCategory: applicationType === 'dj' ? GenreCategory.Dj : undefined, }} diff --git a/app/routes/booking._index.tsx b/app/routes/booking._index.tsx index 4074317..c2b344b 100644 --- a/app/routes/booking._index.tsx +++ b/app/routes/booking._index.tsx @@ -5,7 +5,7 @@ import DateString from '~/components/DateString'; import apolloClient from '~/utils/apolloClient'; import type {LoaderArgs} from '@remix-run/node'; import {typedjson, useTypedLoaderData} from 'remix-typedjson'; -import {Link, Outlet} from '@remix-run/react'; +import {Link, Outlet, useSearchParams} from '@remix-run/react'; import {$path} from 'remix-routes'; import ApplicationPhase from '~/components/booking/ApplicationPhase'; @@ -27,6 +27,18 @@ gql` } `; +export function useUtmSource() { + const utm_source = useSearchParams().at(0); + console.log('asdasd', utm_source); + if ( + utm_source && + utm_source instanceof URLSearchParams && + utm_source.has('utm_source') + ) { + return utm_source.get('utm_source') ?? undefined; + } +} + export async function loader(args: LoaderArgs) { const {data} = await apolloClient.query({ query: EventDocument, @@ -44,6 +56,7 @@ export async function loader(args: LoaderArgs) { export default function Home() { const data = useTypedLoaderData(); + const utm_source = useUtmSource(); return ( @@ -80,9 +93,13 @@ export default function Home() { title="Bands" content="Ihr möchtet euch als Band für eine unserer Bühnen bewerben." buttonLabel="Als Band bewerben" - href={$path('/booking/:applicationType', { - applicationType: 'band', - })} + href={$path( + '/booking/:applicationType', + { + applicationType: 'band', + }, + {utm_source}, + )} /> )} {data.djApplicationStart && ( @@ -92,9 +109,13 @@ export default function Home() { title="DJs" content="Du möchtest dich als DJ für unsere DJ-Area bewerben." buttonLabel="Als DJ bewerben" - href={$path('/booking/:applicationType', { - applicationType: 'dj', - })} + href={$path( + '/booking/:applicationType', + { + applicationType: 'dj', + }, + {utm_source}, + )} /> )}