import { useRouter } from "next/router"; import { useState } from "react"; import { Controller, useForm } from "react-hook-form"; import { subdomainSuffix } from "@calcom/features/ee/organizations/lib/orgDomains"; import { IS_SELF_HOSTED } from "@calcom/lib/constants"; import type { TRPCClientErrorLike } from "@calcom/trpc/client"; import type { RouterOutputs } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react"; import type { AppRouter } from "@calcom/trpc/server/routers/_app"; import useRouterQuery from "@lib/hooks/useRouterQuery"; import { PremiumTextfield } from "./PremiumTextfield"; import { UsernameTextfield } from "./UsernameTextfield"; export const UsernameAvailability = IS_SELF_HOSTED ? UsernameTextfield : PremiumTextfield; interface UsernameAvailabilityFieldProps { onSuccessMutation?: () => void; onErrorMutation?: (error: TRPCClientErrorLike) => void; } function useUserNamePrefix(organization: RouterOutputs["viewer"]["me"]["organization"]): string { return 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://", ""); } export const UsernameAvailabilityField = ({ onSuccessMutation, onErrorMutation, }: UsernameAvailabilityFieldProps) => { const router = useRouter(); const [user] = trpc.viewer.me.useSuspenseQuery(); const [currentUsernameState, setCurrentUsernameState] = useState(user.username || ""); const { username: usernameFromQuery, setQuery: setUsernameFromQuery } = useRouterQuery("username"); const { username: currentUsername, setQuery: setCurrentUsername } = router.query["username"] && user.username === null ? { username: usernameFromQuery, setQuery: setUsernameFromQuery } : { username: currentUsernameState || "", setQuery: setCurrentUsernameState }; const formMethods = useForm({ defaultValues: { username: currentUsername, }, }); const usernamePrefix = useUserNamePrefix(user.organization); return ( { return ( ); }} /> ); };