add prev and next click tracking on steps

Author: MananTank

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/_common/pages.ts

@@ -0,0 +1,6 @@
+export const nftCreationPages = {
+  "collection-info": "collection-info",
+  "upload-assets": "upload-assets",
+  "sales-settings": "sales-settings",
+  "launch-nft": "launch-nft",
+} as const;

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/collection-info/nft-collection-info-fieldset.tsx

@@ -11,6 +11,7 @@ import type { ThirdwebClient } from "thirdweb";
 import { SocialUrlsFieldset } from "../../_common/SocialUrls";
 import { StepCard } from "../../_common/step-card";
 import type { NFTCollectionInfoForm } from "../_common/form";
+import { nftCreationPages } from "../_common/pages";
 
 export function NFTCollectionInfoFieldset(props: {
   client: ThirdwebClient;
@@ -24,7 +25,7 @@ export function NFTCollectionInfoFieldset(props: {
       <form onSubmit={form.handleSubmit(props.onNext)}>
         <StepCard
           tracking={{
-            page: "collection-info",
+            page: nftCreationPages["collection-info"],
             contractType: "NFTCollection",
           }}
           title="Collection Info"

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/create-nft-page-ui.tsx

@@ -16,6 +16,7 @@ import {
   nftCollectionInfoFormSchema,
   nftSalesSettingsFormSchema,
 } from "./_common/form";
+import { nftCreationPages } from "./_common/pages";
 import { NFTCollectionInfoFieldset } from "./collection-info/nft-collection-info-fieldset";
 import { LaunchNFT } from "./launch/launch-nft";
 import { SalesSettings } from "./sales/sales-settings";
@@ -30,9 +31,8 @@ export function CreateNFTPageUI(props: {
   teamSlug: string;
   projectSlug: string;
 }) {
-  const [step, setStep] = useState<
-    "collection-info" | "upload-assets" | "launch" | "sales-settings"
-  >("collection-info");
+  const [step, setStep] =
+    useState<keyof typeof nftCreationPages>("collection-info");
 
   const activeAccount = useActiveAccount();
 
@@ -54,7 +54,7 @@ export function CreateNFTPageUI(props: {
 
   return (
     <div>
-      {step === "collection-info" && (
+      {step === nftCreationPages["collection-info"] && (
         <NFTCollectionInfoFieldset
           onChainUpdated={() => {
             // reset price currency to native token when chain is updated
@@ -86,12 +86,12 @@ export function CreateNFTPageUI(props: {
           client={props.client}
           form={nftCollectionInfoForm}
           onNext={() => {
-            setStep("upload-assets");
+            setStep(nftCreationPages["upload-assets"]);
           }}
         />
       )}
 
-      {step === "upload-assets" && (
+      {step === nftCreationPages["upload-assets"] && (
         <UploadNFTsFieldset
           nftData={nftData}
           setNFTData={setNFTData}
@@ -111,15 +111,15 @@ export function CreateNFTPageUI(props: {
           form={nftSalesSettingsForm}
           client={props.client}
           onNext={() => {
-            setStep("launch");
+            setStep(nftCreationPages["launch-nft"]);
           }}
           onPrev={() => {
-            setStep("upload-assets");
+            setStep(nftCreationPages["upload-assets"]);
           }}
         />
       )}
 
-      {step === "launch" && (
+      {step === nftCreationPages["launch-nft"] && (
         <LaunchNFT
           values={{
             ...nftCollectionInfoForm.watch(),
@@ -134,7 +134,7 @@ export function CreateNFTPageUI(props: {
                   : [],
           }}
           onPrevious={() => {
-            setStep("sales-settings");
+            setStep(nftCreationPages["sales-settings"]);
           }}
           projectSlug={props.projectSlug}
           client={props.client}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/sales/sales-settings.tsx

@@ -6,6 +6,7 @@ import type { ThirdwebClient } from "thirdweb";
 import { SolidityInput } from "../../../../../../../../../../contract-ui/components/solidity-inputs";
 import { StepCard } from "../../_common/step-card";
 import type { NFTSalesSettingsFormValues } from "../_common/form";
+import { nftCreationPages } from "../_common/pages";
 
 export function SalesSettings(props: {
   onNext: () => void;
@@ -25,7 +26,7 @@ export function SalesSettings(props: {
       >
         <StepCard
           tracking={{
-            page: "sales-settings",
+            page: nftCreationPages["sales-settings"],
             contractType: "NFTCollection",
           }}
           title="Sales and Fees"

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/upload-nfts/upload-nfts.tsx

@@ -1,6 +1,9 @@
 import { TabButtons } from "@/components/ui/tabs";
+import { useTrack } from "hooks/analytics/useTrack";
 import type { ThirdwebClient } from "thirdweb";
 import { StepCard } from "../../_common/step-card";
+import { getStepCardTrackingData } from "../../token/_common/tracking";
+import { nftCreationPages } from "../_common/pages";
 import { BatchUploadNFTs } from "./batch-upload/batch-upload-nfts";
 import type {
   NFTMetadataWithPrice,
@@ -26,6 +29,30 @@ export function UploadNFTsFieldset(props: {
   nftData: NFTData;
   setNFTData: (nftData: NFTData) => void;
 }) {
+  const trackEvent = useTrack();
+
+  function handleNextClick() {
+    trackEvent(
+      getStepCardTrackingData({
+        step: nftCreationPages["upload-assets"],
+        click: "next",
+        contractType: "NFTCollection",
+      }),
+    );
+    props.onNext();
+  }
+
+  function handlePrevClick() {
+    trackEvent(
+      getStepCardTrackingData({
+        step: nftCreationPages["upload-assets"],
+        click: "prev",
+        contractType: "NFTCollection",
+      }),
+    );
+    props.onPrev();
+  }
+
   return (
     <StepCard
       title="Upload NFTs"
@@ -56,8 +83,8 @@ export function UploadNFTsFieldset(props: {
 
       {props.nftData.type === "multiple" && (
         <BatchUploadNFTs
-          onNext={props.onNext}
-          onPrev={props.onPrev}
+          onNext={handleNextClick}
+          onPrev={handlePrevClick}
           client={props.client}
           results={props.nftData.nfts}
           setResults={(results) =>
@@ -73,8 +100,8 @@ export function UploadNFTsFieldset(props: {
       {props.nftData.type === "single" && (
         <SingleUploadNFT
           client={props.client}
-          onNext={props.onNext}
-          onPrev={props.onPrev}
+          onNext={handleNextClick}
+          onPrev={handlePrevClick}
           chainId={props.chainId}
           nftData={props.nftData.nft}
           setNFTData={(nft) =>