utm_source

kulturspektakel · Oct 6, 2023 · bd07f9a · bd07f9a
1 parent bce9167
commit bd07f9a
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 19 deletions.
diff --git 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<HeardAboutBookingFrom, string> = new Map([
   [HeardAboutBookingFrom.BYon, 'BY-on'],
@@ -27,6 +27,7 @@ const PLAYED_PREVIOUSLY: Map<PreviouslyPlayed, string> = new Map([
 
 export default function Step3() {
   const isDJ = useIsDJ();
+  const utmSource = useUtmSource();
 
   return (
     <>
@@ -78,7 +79,7 @@ export default function Step3() {
         </Field>
       </FormControl>
 
-      {!getUtmSource() && (
+      {!utmSource && (
         <FormControl id="heardAboutBookingFrom">
           <FormLabel>
             {isDJ

diff --git 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,15 +28,15 @@ 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<CreateBandApplicationInput> & {
   spotifyArtist?: SpotifyArtist;
 };
 
 export type SearchParams = {
-  applicationType: 'band' | 'dj';
+  utm_source?: string;
 };
 
 gql`
@@ -49,23 +50,19 @@ gql`
   }
 `;
 
-export function getUtmSource() {
-  if (typeof window !== 'undefined') {
-    return window.sessionStorage.getItem('utm_source');
-  }
-}
-
 const utmSourceMapping: Record<string, HeardAboutBookingFrom> = Object.freeze({
   fb: HeardAboutBookingFrom.Facebook,
   ig: HeardAboutBookingFrom.Instagram,
 });
 
 export default function () {
   const [currentStep, setCurrentStep] = useState(0);
-  const {applicationType} = useParams<SearchParams>();
+  const {applicationType} =
+    useParams<Routes['/booking/:applicationType']['params']>();
   const [create, {error}] = useCreateBandApplicationMutation();
   const isLastStep = currentStep === STEPS.length - 1;
   const navigate = useNavigate();
+  const utm_source = useUtmSource();
 
   return (
     <VStack spacing="5">
@@ -102,7 +99,7 @@ export default function () {
 
       <Formik<FormikContextT>
         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
@@ -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<EventQuery>({
     query: EventDocument,
@@ -44,6 +56,7 @@ export async function loader(args: LoaderArgs) {
 
 export default function Home() {
   const data = useTypedLoaderData<typeof loader>();
+  const utm_source = useUtmSource();
 
   return (
     <Box>
@@ -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},
+          )}
         />
       )}
     </Box>