diff --git a/apps/web/pages/signup.tsx b/apps/web/pages/signup.tsx index 4f20a459e8..3874828955 100644 --- a/apps/web/pages/signup.tsx +++ b/apps/web/pages/signup.tsx @@ -1,5 +1,5 @@ import { zodResolver } from "@hookform/resolvers/zod"; -import { CalendarHeart, Clock, Info, Loader2, ShieldCheckIcon, StarIcon } from "lucide-react"; +import { CalendarHeart, Clock, Info, ShieldCheckIcon, StarIcon } from "lucide-react"; import type { GetServerSidePropsContext } from "next"; import { signIn } from "next-auth/react"; import Link from "next/link"; @@ -19,7 +19,7 @@ import { isSAMLLoginEnabled } from "@calcom/features/ee/sso/lib/saml"; import { useFlagMap } from "@calcom/features/flags/context/provider"; import { getFeatureFlagMap } from "@calcom/features/flags/server/utils"; import { classNames } from "@calcom/lib"; -import { IS_CALCOM, IS_SELF_HOSTED, WEBAPP_URL, WEBSITE_URL } from "@calcom/lib/constants"; +import { APP_NAME, IS_CALCOM, IS_SELF_HOSTED, WEBAPP_URL, WEBSITE_URL } from "@calcom/lib/constants"; import { fetchUsername } from "@calcom/lib/fetchUsername"; import { useDebounce } from "@calcom/lib/hooks/useDebounce"; import { useLocale } from "@calcom/lib/hooks/useLocale"; @@ -59,35 +59,33 @@ const FEATURES = [ description: "schedule_for_your_team_description", icon: Clock, }, - { - title: "scheduling_for_your_team", - description: "schedule_for_your_team_description", - icon: Clock, - }, ]; function UsernameField({ username, setPremium, premium, + setUsernameTaken, + usernameTaken, ...props }: React.ComponentProps & { username: string; setPremium: (value: boolean) => void; premium: boolean; + usernameTaken: boolean; + setUsernameTaken: (value: boolean) => void; }) { const { t } = useLocale(); - const { watch, register, formState } = useFormContext(); - const [taken, setTaken] = useState(false); + const { register, formState } = useFormContext(); const [loading, setLoading] = useState(false); - const debouncedUsername = useDebounce(username, 500); + const debouncedUsername = useDebounce(username, 700); useEffect(() => { async function checkUsername() { if (!debouncedUsername) { setLoading(false); setPremium(false); - setTaken(false); + setUsernameTaken(false); return; } setLoading(true); @@ -95,7 +93,7 @@ function UsernameField({ .then(({ data }) => { setPremium(data.premium); if (!data.available) { - setTaken(true); + setUsernameTaken(true); } }) .finally(() => { @@ -103,23 +101,23 @@ function UsernameField({ }); } checkUsername(); - }, [debouncedUsername, setPremium, setTaken]); + }, [debouncedUsername, setPremium, setUsernameTaken]); return (
- + {!formState.isSubmitting && (

- {loading ? ( - <> - - {t("loading")} - - ) : taken ? ( + {usernameTaken ? (

- {t("already_taken")} + {t("already_in_use_error")}
) : premium ? (
@@ -138,6 +136,7 @@ function UsernameField({ export default function Signup({ prepopulateFormValues, token, orgSlug }: SignupProps) { const [premiumUsername, setPremiumUsername] = useState(false); + const [usernameTaken, setUsernameTaken] = useState(false); const searchParams = useSearchParams(); const telemetry = useTelemetry(); @@ -228,7 +227,9 @@ export default function Signup({ prepopulateFormValues, token, orgSlug }: Signup

{t("cal_signup_description")}

) : (

- Meet all your scheduling needs{" "} + {t("calcom_explained", { + appName: APP_NAME, + })}

)}
@@ -245,6 +246,8 @@ export default function Signup({ prepopulateFormValues, token, orgSlug }: Signup label={t("username")} username={watch("username")} premium={premiumUsername} + usernameTaken={usernameTaken} + setUsernameTaken={(value) => setUsernameTaken(value)} data-testid="signup-usernamefield" setPremium={(value) => setPremiumUsername(value)} addOnLeading={ @@ -268,8 +271,18 @@ export default function Signup({ prepopulateFormValues, token, orgSlug }: Signup {...register("password")} hintErrors={["caplow", "min", "num"]} /> - {/* Continue with Social Logins */} @@ -283,7 +296,7 @@ export default function Signup({ prepopulateFormValues, token, orgSlug }: Signup
{/* Social Logins */} -
+