chore: some minor QA fixes (#22727)

* Various fixes

* Remove tooltip

* another string change

* Fix width of custom event name modal to prevent overflow

* Booking questions fixes

* minor string fix

* checkbox alignment

* padding in reassign dialog

* fix: update FormBuilder tests for checkbox UI changes

- Updated test utilities to work with CheckboxField instead of BooleanToggleGroupField
- Fixed badge expectations to check for 'optional' instead of 'required'
- Updated dialog interaction methods to use checkbox.checked instead of button text
- All 13 FormBuilder tests now pass successfully

Fixes failing tests in PR #22727 caused by UI changes from toggle buttons to checkboxes for required field selection.

Co-Authored-By: amit@cal.com <samit91848@gmail.com>

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: amit@cal.com <samit91848@gmail.com>
Co-authored-by: Alex van Andel <me@alexvanandel.com>

Author: 4 people

apps/web/app/providers.tsx

@@ -2,6 +2,7 @@
 
 import { TrpcProvider } from "app/_trpc/trpc-provider";
 import { SessionProvider } from "next-auth/react";
+import { usePathname } from "next/navigation";
 import CacheProvider from "react-inlinesvg/provider";
 
 import { WebPushProvider } from "@calcom/features/notifications/WebPushContext";
@@ -17,11 +18,13 @@ type ProvidersProps = {
 };
 export function Providers({ isEmbed, children, nonce }: ProvidersProps) {
   const isBookingPage = useIsBookingPage();
+  const pathname = usePathname();
+  const isOnboardingPage = pathname?.startsWith("/getting-started");
 
   return (
     <SessionProvider>
       <TrpcProvider>
-        {!isBookingPage ? <PlainChat nonce={nonce} /> : null}
+        {!isBookingPage && !isOnboardingPage ? <PlainChat nonce={nonce} /> : null}
         {!isEmbed && !isBookingPage && <NotificationSoundHandler />}
         {/* @ts-expect-error FIXME remove this comment when upgrading typescript to v5 */}
         <CacheProvider>

apps/web/components/dialog/ReassignDialog.tsx

@@ -218,7 +218,7 @@ export const ReassignDialog = ({
                     placeholder={t("search")}
                     onChange={(e) => setSearchTerm(e.target.value)}
                   />
-                  <div className="scroll-bar flex h-[150px] flex-col gap-0.5 overflow-y-scroll rounded-md border p-1">
+                  <div className="scroll-bar mt-2 flex h-[150px] flex-col gap-0.5 overflow-y-scroll rounded-md border p-1">
                     {teamMemberOptions.map((member) => (
                       <label
                         key={member.value}

apps/web/components/getting-started/components/AppConnectionItem.tsx

@@ -84,6 +84,7 @@ const AppConnectionItem = (props: IAppConnectionItem) => {
                           {t("this_app_requires_connected_account", {
                             appName: title,
                             dependencyName: dependency.name,
+                            interpolation: { escapeValue: false },
                           })}
                         </span>
 

apps/web/components/getting-started/steps-views/ConnectCalendars.tsx

@@ -92,7 +92,7 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
         loading={isPageLoading}
         onClick={() => nextStep()}
         disabled={disabledNextButton}>
-        {firstCalendar ? `${t("continue")}` : `${t("next_step_text")}`}
+        {firstCalendar ? `${t("connect_your_video")}` : `${t("connect_calendar_first")}`}
       </Button>
     </>
   );

apps/web/components/getting-started/steps-views/ConnectedVideoStep.tsx

@@ -105,7 +105,7 @@ const ConnectedVideoStep = (props: ConnectedAppStepProps) => {
         disabled={!hasAnyInstalledVideoApps}
         loading={isPageLoading}
         onClick={() => nextStep()}>
-        {t("next_step_text")}
+        {t("set_availability")}
       </Button>
     </>
   );

apps/web/components/getting-started/steps-views/SetupAvailability.tsx

@@ -81,7 +81,7 @@ const SetupAvailability = (props: ISetupAvailabilityProps) => {
           className="mt-2 w-full justify-center p-2 text-sm sm:mt-8"
           loading={availabilityForm.formState.isSubmitting}
           disabled={availabilityForm.formState.isSubmitting}>
-          {t("next_step_text")}
+          {t("complete_profile")}
         </Button>
       </div>
     </Form>

apps/web/components/getting-started/steps-views/UserProfile.tsx

@@ -164,7 +164,7 @@ const UserProfile = ({ user }: UserProfileProps) => {
         EndIcon="arrow-right"
         type="submit"
         className="mt-8 w-full items-center justify-center">
-        {t("finish")}
+        {t("finish_and_start")}
       </Button>
     </form>
   );

apps/web/components/getting-started/steps-views/UserSettings.tsx

@@ -88,6 +88,7 @@ const UserSettings = (props: IUserSettingsProps) => {
             id="name"
             name="name"
             type="text"
+            placeholder="John Doe"
             autoComplete="off"
             autoCorrect="off"
           />
@@ -121,7 +122,7 @@ const UserSettings = (props: IUserSettingsProps) => {
         className="mt-8 flex w-full flex-row justify-center"
         loading={mutation.isPending}
         disabled={mutation.isPending}>
-        {t("next_step_text")}
+        {t("connect_your_calendar")}
       </Button>
     </form>
   );

apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx

@@ -120,6 +120,7 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.Component
           <TextField
             ref={usernameRef}
             name="username"
+            placeholder="john"
             value={inputUsernameValue}
             autoComplete="none"
             autoCapitalize="none"

apps/web/modules/getting-started/[[...step]]/onboarding-view.tsx

@@ -42,7 +42,7 @@ const getStepsAndHeadersForUser = (t: TFunction) => {
   }[] = [
     {
       title: t("welcome_to_cal_header", { appName: APP_NAME }),
-      subtitle: [t("we_just_need_basic_info"), t("edit_form_later_subtitle")],
+      subtitle: [t("we_just_need_basic_info")],
     },
     {
       title: t("connect_your_calendar"),
@@ -57,8 +57,9 @@ const getStepsAndHeadersForUser = (t: TFunction) => {
     {
       title: t("set_availability"),
       subtitle: [
-        t("set_availability_getting_started_subtitle_1"),
-        t("set_availability_getting_started_subtitle_2"),
+        `${t("set_availability_getting_started_subtitle_1")} ${t(
+          "set_availability_getting_started_subtitle_2"
+        )}`,
       ],
     },
     {