Type check fixes

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

@@ -17,11 +17,12 @@ import type { IOnboardingPageProps } from "../../../pages/getting-started/[[...s
 
 interface IUserSettingsProps {
   user: IOnboardingPageProps["user"];
+  organization: IOnboardingPageProps["organization"];
   nextStep: () => void;
 }
 
 const UserSettings = (props: IUserSettingsProps) => {
-  const { user, nextStep } = props;
+  const { user, nextStep, organization } = props;
   const { t } = useLocale();
   const [selectedTimeZone, setSelectedTimeZone] = useState(dayjs.tz.guess());
   const telemetry = useTelemetry();
@@ -69,7 +70,7 @@ const UserSettings = (props: IUserSettingsProps) => {
     <form onSubmit={onSubmit}>
       <div className="space-y-6">
         {/* Username textfield */}
-        <UsernameAvailabilityField user={user} />
+        <UsernameAvailabilityField user={user} organization={organization} />
 
         {/* Full name textfield */}
         <div className="w-full">

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

@@ -2,10 +2,12 @@ import classNames from "classnames";
 import { debounce, noop } from "lodash";
 import type { RefCallback } from "react";
 import { useEffect, useMemo, useState } from "react";
+import type z from "zod";
 
 import { subdomainSuffix } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { fetchUsername } from "@calcom/lib/fetchUsername";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import type { teamMetadataSchema } from "@calcom/prisma/zod-utils";
 import type { TRPCClientErrorLike } from "@calcom/trpc/client";
 import { trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/server/routers/_app";
@@ -20,6 +22,7 @@ interface ICustomUsernameProps {
   setInputUsernameValue: (value: string) => void;
   onSuccessMutation?: () => void;
   onErrorMutation?: (error: TRPCClientErrorLike<AppRouter>) => void;
+  organization: { slug?: string | null | undefined; metadata: z.infer<typeof teamMetadataSchema> } | null;
 }
 
 const UsernameTextfield = (props: ICustomUsernameProps) => {
@@ -32,7 +35,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
     usernameRef,
     onSuccessMutation,
     onErrorMutation,
-    user,
+    organization,
   } = props;
   const [usernameIsAvailable, setUsernameIsAvailable] = useState(false);
   const [markAsError, setMarkAsError] = useState(false);
@@ -110,10 +113,12 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
     });
   };
 
-  const usernamePrefix = user.organization
-    ? user.organization.slug
-      ? `${user.organization.slug}.${subdomainSuffix()}`
-      : `${user.organization.metadata.requestedSlug}.${subdomainSuffix()}`
+  const usernamePrefix = organization
+    ? organization.slug
+      ? `${organization.slug}.${subdomainSuffix()}`
+      : organization.metadata && organization.metadata.requestedSlug
+      ? `${organization.metadata.requestedSlug}.${subdomainSuffix()}`
+      : process.env.NEXT_PUBLIC_WEBSITE_URL.replace("https://", "").replace("http://", "")
     : process.env.NEXT_PUBLIC_WEBSITE_URL.replace("https://", "").replace("http://", "");
 
   return (

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

@@ -1,9 +1,11 @@
 import { useRouter } from "next/router";
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
+import type z from "zod";
 
 import { IS_SELF_HOSTED } from "@calcom/lib/constants";
 import type { User } from "@calcom/prisma/client";
+import type { teamMetadataSchema } from "@calcom/prisma/zod-utils";
 import type { TRPCClientErrorLike } from "@calcom/trpc/client";
 import type { AppRouter } from "@calcom/trpc/server/routers/_app";
 
@@ -18,11 +20,13 @@ interface UsernameAvailabilityFieldProps {
   onSuccessMutation?: () => void;
   onErrorMutation?: (error: TRPCClientErrorLike<AppRouter>) => void;
   user: Pick<User, "username" | "metadata">;
+  organization: { slug?: string | null | undefined; metadata: z.infer<typeof teamMetadataSchema> } | null;
 }
 export const UsernameAvailabilityField = ({
   onSuccessMutation,
   onErrorMutation,
   user,
+  organization,
 }: UsernameAvailabilityFieldProps) => {
   const router = useRouter();
   const [currentUsernameState, setCurrentUsernameState] = useState(user.username || "");
@@ -52,6 +56,7 @@ export const UsernameAvailabilityField = ({
             onSuccessMutation={onSuccessMutation}
             onErrorMutation={onErrorMutation}
             user={user}
+            organization={organization}
           />
         );
       }}

apps/web/pages/getting-started/[[...step]].tsx

@@ -47,7 +47,7 @@ const stepRouteSchema = z.object({
 // TODO: Refactor how steps work to be contained in one array/object. Currently we have steps,initalsteps,headers etc. These can all be in one place
 const OnboardingPage = (props: IOnboardingPageProps) => {
   const router = useRouter();
-  const { user } = props;
+  const { user, organization } = props;
   const { t } = useLocale();
 
   const result = stepRouteSchema.safeParse(router.query);
@@ -140,7 +140,9 @@ const OnboardingPage = (props: IOnboardingPageProps) => {
               <Steps maxSteps={steps.length} currentStep={currentStepIndex + 1} navigateToStep={goToIndex} />
             </div>
             <StepCard>
-              {currentStep === "user-settings" && <UserSettings user={user} nextStep={() => goToIndex(1)} />}
+              {currentStep === "user-settings" && (
+                <UserSettings user={user} organization={organization} nextStep={() => goToIndex(1)} />
+              )}
 
               {currentStep === "connected-calendar" && <ConnectedCalendars nextStep={() => goToIndex(2)} />}
 
@@ -240,15 +242,13 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       ...(await serverSideTranslations(context.locale ?? "", ["common"])),
       user: {
         ...user,
-        ...(user.organization && {
-          organization: {
-            ...user.organization,
-            metadata: teamMetadataSchema.parse(user.organization.metadata),
-          },
-        }),
         emailMd5: crypto.createHash("md5").update(user.email).digest("hex"),
       },
       hasPendingInvites: user.teams.find((team) => team.accepted === false) ?? false,
+      organization: {
+        ...user.organization,
+        metadata: teamMetadataSchema.parse(user.organization?.metadata),
+      },
     },
   };
 };