diff --git a/packages/app-store/_utils/getEventTypeAppData.ts b/packages/app-store/_utils/getEventTypeAppData.ts index 80cfe5ab78..610587c4f4 100644 --- a/packages/app-store/_utils/getEventTypeAppData.ts +++ b/packages/app-store/_utils/getEventTypeAppData.ts @@ -25,6 +25,7 @@ export const getEventTypeAppData = ( currency: eventType.currency || appMetadata.currency || null, // trackingId is legacy way to store value for TRACKING_ID. So, we need to support both. TRACKING_ID: appMetadata.TRACKING_ID || appMetadata.trackingId || null, + TRACKING_EVENT: appMetadata.trackingEvent || "Lead", } : null; } diff --git a/packages/app-store/metapixel/components/EventTypeAppSettingsInterface.tsx b/packages/app-store/metapixel/components/EventTypeAppSettingsInterface.tsx index 3ac94fcc9c..ab1132eb5f 100644 --- a/packages/app-store/metapixel/components/EventTypeAppSettingsInterface.tsx +++ b/packages/app-store/metapixel/components/EventTypeAppSettingsInterface.tsx @@ -1,5 +1,7 @@ +import { useEffect } from "react"; + import type { EventTypeAppSettingsComponent } from "@calcom/app-store/types"; -import { TextField } from "@calcom/ui/components/form"; +import { Label, Select, TextField } from "@calcom/ui/components/form"; const EventTypeAppSettingsInterface: EventTypeAppSettingsComponent = ({ getAppData, @@ -7,16 +9,47 @@ const EventTypeAppSettingsInterface: EventTypeAppSettingsComponent = ({ disabled, }) => { const trackingId = getAppData("trackingId"); + const trackingEvent = getAppData("trackingEvent"); + + type EventOption = { label: string; value: string }; + const eventOptions: EventOption[] = [ + { label: "Lead", value: "Lead" }, + { label: "Complete Registration", value: "CompleteRegistration" }, + { label: "Schedule", value: "Schedule" }, + { label: "Page View (use for custom tracking)", value: "PageView" }, + ]; + + const currentOption = eventOptions.find((e) => e.value === trackingEvent) || eventOptions[0]; + + useEffect(() => { + if (!trackingEvent) { + setAppData("trackingEvent", "Lead"); + } + }, [trackingEvent, setAppData]); return ( - { - setAppData("trackingId", e.target.value); - }} - /> +
+ { + setAppData("trackingId", e.target.value); + }} + /> +
+ +