diff --git a/apps/web/modules/onboarding/getting-started/onboarding-view.tsx b/apps/web/modules/onboarding/getting-started/onboarding-view.tsx index 3530a618a4..ab39c3db59 100644 --- a/apps/web/modules/onboarding/getting-started/onboarding-view.tsx +++ b/apps/web/modules/onboarding/getting-started/onboarding-view.tsx @@ -2,6 +2,7 @@ import { AnimatePresence } from "framer-motion"; import { useRouter } from "next/navigation"; +import posthog from "posthog-js"; import { useEffect, useRef, useTransition } from "react"; import { useTeamInvites } from "@calcom/features/billing/hooks/useHasPaidPlan"; @@ -69,6 +70,11 @@ export const OnboardingView = ({ userEmail }: OnboardingViewProps) => { }, [selectedPlan]); const handleContinue = () => { + if (selectedPlan) { + posthog.capture("onboarding_plan_continue_clicked", { + plan_type: selectedPlan, + }); + } startTransition(() => { if (selectedPlan === "organization") { router.push("/onboarding/organization/details"); @@ -157,7 +163,13 @@ export const OnboardingView = ({ userEmail }: OnboardingViewProps) => { {/* Plan options */} setSelectedPlan(value as PlanType)} + onValueChange={(value) => { + const planType = value as PlanType; + setSelectedPlan(planType); + posthog.capture("onboarding_plan_selected", { + plan_type: planType, + }); + }} className="flex w-full flex-col gap-1 rounded-[10px]"> {plans.map((plan) => { const isSelected = selectedPlan === plan.id; diff --git a/apps/web/modules/onboarding/organization/brand/organization-brand-view.tsx b/apps/web/modules/onboarding/organization/brand/organization-brand-view.tsx index fc95555faa..3b32381750 100644 --- a/apps/web/modules/onboarding/organization/brand/organization-brand-view.tsx +++ b/apps/web/modules/onboarding/organization/brand/organization-brand-view.tsx @@ -1,6 +1,7 @@ "use client"; import { useRouter } from "next/navigation"; +import posthog from "posthog-js"; import { useEffect, useRef, useState } from "react"; import { useLocale } from "@calcom/lib/hooks/useLocale"; @@ -72,6 +73,11 @@ export const OrganizationBrandView = ({ userEmail }: OrganizationBrandViewProps) }; const handleContinue = () => { + posthog.capture("onboarding_organization_brand_continue_clicked", { + has_logo: !!logoPreview, + has_banner: !!bannerPreview, + has_custom_color: brandColor !== "#000000", + }); // Save to store (already saved on change, but ensure it's persisted) setOrganizationBrand({ logo: logoPreview, @@ -82,6 +88,7 @@ export const OrganizationBrandView = ({ userEmail }: OrganizationBrandViewProps) }; const handleSkip = () => { + posthog.capture("onboarding_organization_brand_skip_clicked"); // Skip brand customization and go to teams router.push("/onboarding/organization/teams"); }; @@ -97,7 +104,10 @@ export const OrganizationBrandView = ({ userEmail }: OrganizationBrandViewProps)
diff --git a/apps/web/modules/onboarding/organization/details/organization-details-view.tsx b/apps/web/modules/onboarding/organization/details/organization-details-view.tsx index 93ff339df1..b69fcaba24 100644 --- a/apps/web/modules/onboarding/organization/details/organization-details-view.tsx +++ b/apps/web/modules/onboarding/organization/details/organization-details-view.tsx @@ -1,6 +1,7 @@ "use client"; import { useRouter } from "next/navigation"; +import posthog from "posthog-js"; import { useEffect, useState } from "react"; import { useLocale } from "@calcom/lib/hooks/useLocale"; @@ -67,6 +68,10 @@ export const OrganizationDetailsView = ({ userEmail }: OrganizationDetailsViewPr return; } + posthog.capture("onboarding_organization_details_continue_clicked", { + has_bio: !!organizationBio, + }); + // Save to store setOrganizationDetails({ name: organizationName, @@ -87,7 +92,10 @@ export const OrganizationDetailsView = ({ userEmail }: OrganizationDetailsViewPr diff --git a/apps/web/modules/onboarding/organization/teams/organization-teams-view.tsx b/apps/web/modules/onboarding/organization/teams/organization-teams-view.tsx index 181f5cf2e7..267ad36aa6 100644 --- a/apps/web/modules/onboarding/organization/teams/organization-teams-view.tsx +++ b/apps/web/modules/onboarding/organization/teams/organization-teams-view.tsx @@ -2,6 +2,7 @@ import { zodResolver } from "@hookform/resolvers/zod"; import { useRouter } from "next/navigation"; +import posthog from "posthog-js"; import { useForm, useFieldArray } from "react-hook-form"; import { z } from "zod"; @@ -49,12 +50,17 @@ export const OrganizationTeamsView = ({ userEmail }: OrganizationTeamsViewProps) }); const handleContinue = (data: FormValues) => { + const validTeams = data.teams.filter((team) => team.name.trim().length > 0); + posthog.capture("onboarding_organization_teams_continue_clicked", { + team_count: validTeams.length, + }); // Save teams to store setTeams(data.teams); router.push("/onboarding/organization/invite/email"); }; const handleSkip = () => { + posthog.capture("onboarding_organization_teams_skip_clicked"); // Skip teams and go to invite router.push("/onboarding/organization/invite/email"); }; @@ -76,7 +82,10 @@ export const OrganizationTeamsView = ({ userEmail }: OrganizationTeamsViewProps) type="button" color="minimal" className="rounded-[10px]" - onClick={() => router.push("/onboarding/organization/brand")}> + onClick={() => { + posthog.capture("onboarding_organization_teams_back_clicked"); + router.push("/onboarding/organization/brand"); + }}> {t("back")}
@@ -121,7 +130,12 @@ export const OrganizationTeamsView = ({ userEmail }: OrganizationTeamsViewProps) size="sm" className="h-7 w-7" disabled={fields.length === 1} - onClick={() => remove(index)}> + onClick={() => { + posthog.capture("onboarding_organization_teams_remove_clicked", { + team_count: fields.length, + }); + remove(index); + }}>
@@ -135,7 +149,12 @@ export const OrganizationTeamsView = ({ userEmail }: OrganizationTeamsViewProps) size="sm" StartIcon="plus" className="w-fit" - onClick={() => append({ name: "" })}> + onClick={() => { + posthog.capture("onboarding_organization_teams_add_clicked", { + team_count: fields.length, + }); + append({ name: "" }); + }}> {t("add")}
diff --git a/apps/web/modules/onboarding/teams/details/team-details-view.tsx b/apps/web/modules/onboarding/teams/details/team-details-view.tsx index bbc55295f5..2caf133f66 100644 --- a/apps/web/modules/onboarding/teams/details/team-details-view.tsx +++ b/apps/web/modules/onboarding/teams/details/team-details-view.tsx @@ -1,6 +1,7 @@ "use client"; import { useRouter } from "next/navigation"; +import posthog from "posthog-js"; import { useEffect, useRef, useState, type FormEvent } from "react"; import { useLocale } from "@calcom/lib/hooks/useLocale"; @@ -72,6 +73,11 @@ export const TeamDetailsView = ({ userEmail }: TeamDetailsViewProps) => { return; } + posthog.capture("onboarding_team_details_continue_clicked", { + has_logo: !!teamLogo, + has_bio: !!teamBio, + }); + setTeamDetails({ name: teamName, slug: teamSlug, @@ -102,7 +108,10 @@ export const TeamDetailsView = ({ userEmail }: TeamDetailsViewProps) => { type="button" color="minimal" className="rounded-[10px]" - onClick={() => router.push("/onboarding/getting-started")}> + onClick={() => { + posthog.capture("onboarding_team_details_back_clicked"); + router.push("/onboarding/getting-started"); + }}> {t("back")}