chore: add css ids to onboarding (#2170)

apps/web/app/(app)/onboarding/components/PathwaySelect.tsx

@@ -44,6 +44,7 @@ export default function PathwaySelect({
       />
       <div className="flex space-x-8">
         <OptionCard
+          cssId="onboarding-link-survey-card"
           size="lg"
           title="Link Surveys"
           description="Create a new survey and share a link."
@@ -53,6 +54,7 @@ export default function PathwaySelect({
           <Image src={LinkMockup} alt="" height={350} />
         </OptionCard>
         <OptionCard
+          cssId="onboarding-inapp-survey-card"
           size="lg"
           title="In-app Surveys"
           description="Run a survey on a website or in-app."

apps/web/app/(app)/onboarding/components/inapp/ConnectWithFormbricks.tsx

@@ -58,6 +58,7 @@ const ConnectedState = ({ goToProduct }) => {
       </div>
       <div className="mt-4 text-right">
         <Button
+          id="onboarding-inapp-connect-connection-successful"
           variant="minimal"
           loading={isLoading}
           onClick={() => {
@@ -91,6 +92,7 @@ const NotConnectedState = ({ environment, webAppUrl, jsPackageVersion, goToTeamI
       />
       <div className="flex justify-center">
         <Button
+          id="onboarding-inapp-connect-not-sure-how-to-do-this"
           className="opacity-0 transition-all delay-[3000ms] duration-500 ease-in-out group-hover:opacity-100"
           variant="minimal"
           onClick={goToTeamInvitePage}>

apps/web/app/(app)/onboarding/components/inapp/InviteTeamMate.tsx

@@ -105,16 +105,17 @@ export function InviteTeamMate({ team, environmentId, setCurrentStep }: InviteTe
           />
 
           <div className="flex w-full justify-between">
-            <Button variant="minimal" onClick={() => goBackToConnectPage()}>
+            <Button id="onboarding-inapp-invite-back" variant="minimal" onClick={() => goBackToConnectPage()}>
               Back
             </Button>
-            <Button variant="darkCTA" onClick={handleInvite}>
+            <Button id="onboarding-inapp-invite-send-invite" variant="darkCTA" onClick={handleInvite}>
               Invite
             </Button>
           </div>
         </div>
         <div className="mt-auto flex justify-center">
           <Button
+            id="onboarding-inapp-invite-have-a-look-first"
             className="opacity-0 transition-all delay-[3000ms] duration-500 ease-in-out group-hover:opacity-100"
             variant="minimal"
             onClick={goToProduct}

apps/web/app/(app)/onboarding/components/inapp/SetupInstructions.tsx

@@ -73,6 +73,7 @@ if (typeof window !== "undefined") {
   });
 }`}</CodeBlock>
             <Button
+              id="onboarding-inapp-connect-read-npm-docs"
               className="mt-3"
               variant="secondary"
               href="https://formbricks.com/docs/getting-started/framework-guides"
@@ -90,6 +91,7 @@ if (typeof window !== "undefined") {
             </CodeBlock>
             <div className="mt-4 space-x-2">
               <Button
+                id="onboarding-inapp-connect-copy-code"
                 variant="darkCTA"
                 onClick={() => {
                   navigator.clipboard.writeText(htmlSnippet);
@@ -98,6 +100,7 @@ if (typeof window !== "undefined") {
                 Copy code
               </Button>
               <Button
+                id="onboarding-inapp-connect-step-by-step-manual"
                 variant="secondary"
                 href="https://formbricks.com/docs/getting-started/framework-guides#html"
                 target="_blank">

apps/web/app/(app)/onboarding/components/inapp/SurveyObjective.tsx

@@ -155,7 +155,7 @@ export const Objective: React.FC<ObjectiveProps> = ({ formbricksResponseId, user
           loading={isProfileUpdating}
           disabled={!selectedChoice}
           onClick={handleNextClick}
-          id="objective-next">
+          id="onboarding-inapp-objective-next">
           Next
         </Button>
       </div>

apps/web/app/(app)/onboarding/components/inapp/SurveyRole.tsx

@@ -151,7 +151,7 @@ export const Role: React.FC<RoleProps> = ({ setFormbricksResponseId, session, se
           loading={isUpdating}
           disabled={!selectedChoice}
           onClick={handleNextClick}
-          id="role-next">
+          id="onboarding-inapp-role-next">
           Next
         </Button>
       </div>

apps/web/app/(app)/onboarding/components/link/CreateFirstSurvey.tsx

@@ -59,8 +59,10 @@ export function CreateFirstSurvey({ environmentId }: CreateFirstSurveyProps) {
       <div className="grid w-11/12 max-w-6xl grid-cols-3 grid-rows-1 gap-6">
         {filteredTemplates.map((template) => {
           const TemplateImage = templateImages[template.name];
+          const cssId = `onboarding-link-template-${template.name.toLowerCase().replace(/ /g, "-")}`;
           return (
             <OptionCard
+              cssId={cssId} // Use the generated cssId here
               size="md"
               key={template.name}
               title={template.name}
@@ -72,7 +74,9 @@ export function CreateFirstSurvey({ environmentId }: CreateFirstSurveyProps) {
           );
         })}
       </div>
+
       <Button
+        id="onboarding-start-from-scratch"
         size="lg"
         variant="secondary"
         loading={loadingTemplate === "Start from scratch"}

packages/ui/OptionCard/index.tsx

@@ -8,6 +8,7 @@ interface PathwayOptionProps {
   description: string;
   loading?: boolean;
   onSelect: () => void;
+  cssId?: string;
   children?: React.ReactNode;
 }
 
@@ -24,9 +25,11 @@ export const OptionCard: React.FC<PathwayOptionProps> = ({
   children,
   onSelect,
   loading,
+  cssId,
 }) => (
   <div className="relative">
     <div
+      id={cssId}
       className={`flex cursor-pointer flex-col items-center justify-center bg-white p-4 hover:scale-105 hover:border-slate-300 ${sizeClasses[size]}`}
       onClick={onSelect}
       role="button"