Premium username fixes
parent
f72ea54b52
commit
9d53103fe9
|
@ -5,7 +5,7 @@ import { signIn } from "next-auth/react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { useRouter, useSearchParams } from "next/navigation";
|
import { useRouter, useSearchParams } from "next/navigation";
|
||||||
import type { CSSProperties } from "react";
|
import type { CSSProperties } from "react";
|
||||||
import { useState } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import type { SubmitHandler } from "react-hook-form";
|
import type { SubmitHandler } from "react-hook-form";
|
||||||
import { useForm, useFormContext } from "react-hook-form";
|
import { useForm, useFormContext } from "react-hook-form";
|
||||||
import { Trans } from "react-i18next";
|
import { Trans } from "react-i18next";
|
||||||
|
@ -20,6 +20,7 @@ import { useFlagMap } from "@calcom/features/flags/context/provider";
|
||||||
import { getFeatureFlagMap } from "@calcom/features/flags/server/utils";
|
import { getFeatureFlagMap } from "@calcom/features/flags/server/utils";
|
||||||
import { classNames } from "@calcom/lib";
|
import { classNames } from "@calcom/lib";
|
||||||
import { IS_CALCOM, IS_SELF_HOSTED, WEBAPP_URL, WEBSITE_URL } from "@calcom/lib/constants";
|
import { 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 { useDebounce } from "@calcom/lib/hooks/useDebounce";
|
||||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||||
import slugify from "@calcom/lib/slugify";
|
import slugify from "@calcom/lib/slugify";
|
||||||
|
@ -66,34 +67,43 @@ const FEATURES = [
|
||||||
];
|
];
|
||||||
|
|
||||||
function UsernameField({
|
function UsernameField({
|
||||||
|
username,
|
||||||
setPremium,
|
setPremium,
|
||||||
premium,
|
premium,
|
||||||
...props
|
...props
|
||||||
}: React.ComponentProps<typeof TextField> & { setPremium: (value: boolean) => void; premium: boolean }) {
|
}: React.ComponentProps<typeof TextField> & {
|
||||||
|
username: string;
|
||||||
|
setPremium: (value: boolean) => void;
|
||||||
|
premium: boolean;
|
||||||
|
}) {
|
||||||
const { t } = useLocale();
|
const { t } = useLocale();
|
||||||
const { watch, register, formState } = useFormContext<FormValues>();
|
const { watch, register, formState } = useFormContext<FormValues>();
|
||||||
const [taken, setTaken] = useState(false);
|
const [taken, setTaken] = useState(false);
|
||||||
const watchedUsername = watch("username");
|
const [loading, setLoading] = useState(false);
|
||||||
const debouncedUsername = useDebounce(watchedUsername, 500);
|
const debouncedUsername = useDebounce(username, 500);
|
||||||
// const { isFetching } = useQuery({
|
|
||||||
// queryKey: ["username"],
|
|
||||||
// queryFn: async () => await fetchUsername(debouncedUsername),
|
|
||||||
// refetchOnWindowFocus: false,
|
|
||||||
// onSuccess: ({ data }) => {
|
|
||||||
// setPremium(data.premium);
|
|
||||||
// if (!data.available) {
|
|
||||||
// setTaken(true);
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// enabled: debouncedUsername?.length > 0 || false,
|
|
||||||
// });
|
|
||||||
|
|
||||||
// useEffect(() => {
|
useEffect(() => {
|
||||||
// if (!debouncedUsername) {
|
async function checkUsername() {
|
||||||
// setTaken(false);
|
if (!debouncedUsername) {
|
||||||
// setPremium(false);
|
setLoading(false);
|
||||||
// }
|
setPremium(false);
|
||||||
// }, [debouncedUsername, setPremium, setTaken]);
|
setTaken(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setLoading(true);
|
||||||
|
fetchUsername(debouncedUsername)
|
||||||
|
.then(({ data }) => {
|
||||||
|
setPremium(data.premium);
|
||||||
|
if (!data.available) {
|
||||||
|
setTaken(true);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
setLoading(false);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
checkUsername();
|
||||||
|
}, [debouncedUsername, setPremium, setTaken]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
@ -101,7 +111,7 @@ function UsernameField({
|
||||||
{!formState.isSubmitting && (
|
{!formState.isSubmitting && (
|
||||||
<div className="text-gray text-default flex items-center text-sm">
|
<div className="text-gray text-default flex items-center text-sm">
|
||||||
<p className="flex items-center text-sm ">
|
<p className="flex items-center text-sm ">
|
||||||
{false ? (
|
{loading ? (
|
||||||
<>
|
<>
|
||||||
<Loader2 className="mr-1 inline-block h-4 w-4 animate-spin" />
|
<Loader2 className="mr-1 inline-block h-4 w-4 animate-spin" />
|
||||||
{t("loading")}
|
{t("loading")}
|
||||||
|
@ -140,7 +150,7 @@ export default function Signup({ prepopulateFormValues, token, orgSlug }: Signup
|
||||||
});
|
});
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
|
watch,
|
||||||
formState: { isSubmitting, errors },
|
formState: { isSubmitting, errors },
|
||||||
} = formMethods;
|
} = formMethods;
|
||||||
|
|
||||||
|
@ -233,6 +243,7 @@ export default function Signup({ prepopulateFormValues, token, orgSlug }: Signup
|
||||||
{/* Username */}
|
{/* Username */}
|
||||||
<UsernameField
|
<UsernameField
|
||||||
label={t("username")}
|
label={t("username")}
|
||||||
|
username={watch("username")}
|
||||||
premium={premiumUsername}
|
premium={premiumUsername}
|
||||||
data-testid="signup-usernamefield"
|
data-testid="signup-usernamefield"
|
||||||
setPremium={(value) => setPremiumUsername(value)}
|
setPremium={(value) => setPremiumUsername(value)}
|
||||||
|
|
Loading…
Reference in New Issue