diff --git a/apps/web/src/components/NewWorkspaceForm.tsx b/apps/web/src/components/NewWorkspaceForm.tsx index 70d501cf..a2422099 100644 --- a/apps/web/src/components/NewWorkspaceForm.tsx +++ b/apps/web/src/components/NewWorkspaceForm.tsx @@ -1,21 +1,14 @@ import { zodResolver } from "@hookform/resolvers/zod"; import { t } from "@lingui/core/macro"; import { env } from "next-runtime-env"; -import { useEffect, useState } from "react"; +import { useEffect } from "react"; import { useForm } from "react-hook-form"; -import { - HiBolt, - HiCheck, - HiCheckBadge, - HiInformationCircle, - HiXMark, -} from "react-icons/hi2"; +import { HiCheck, HiXMark } from "react-icons/hi2"; import { twMerge } from "tailwind-merge"; import { z } from "zod"; import Button from "~/components/Button"; import Input from "~/components/Input"; -import Toggle from "~/components/Toggle"; import { useDebounce } from "~/hooks/useDebounce"; import { useModal } from "~/providers/modal"; import { usePopup } from "~/providers/popup"; @@ -54,7 +47,6 @@ export function NewWorkspaceForm() { watch, trigger, clearErrors, - setValue, } = useForm({ resolver: zodResolver(schema), defaultValues: { @@ -67,16 +59,10 @@ export function NewWorkspaceForm() { const hasAvailableWorkspaces = availableWorkspaces.length > 0; - const isCloudEnv = env("NEXT_PUBLIC_KAN_ENV") === "cloud"; - const slug = watch("slug"); const [debouncedSlug] = useDebounce(slug, 500); const isTyping = slug !== debouncedSlug; - // Pro toggle state management - const [isProToggleEnabled, setIsProToggleEnabled] = useState(false); - const [lastAvailableSlug, setLastAvailableSlug] = useState(""); - // Validate slug only after debounce useEffect(() => { if (isTyping) { @@ -101,7 +87,7 @@ export function NewWorkspaceForm() { const isWorkspaceSlugAvailable = checkWorkspaceSlugAvailability.data; const createWorkspace = api.workspace.create.useMutation({ - onSuccess: async (values, variables) => { + onSuccess: (values) => { if (values.publicId && values.name) { void utils.workspace.all.invalidate(); switchWorkspace({ @@ -114,42 +100,6 @@ export function NewWorkspaceForm() { weekStartDay: 1, }); - // If in cloud and Pro toggle is enabled, create checkout session for pro - if (env("NEXT_PUBLIC_KAN_ENV") === "cloud" && isProToggleEnabled) { - try { - const response = await fetch( - "/api/stripe/create_checkout_session", - { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - slug: slug || undefined, - workspacePublicId: values.publicId, - cancelUrl: window.location.pathname + window.location.search, - successUrl: "/boards", - }), - }, - ); - - const data = await response.json(); - const url = (data as { url: string }).url; - - if (url) { - window.location.href = url; - return; // Don't close modal if redirecting to checkout - } - } catch (error) { - console.error("Error creating checkout session:", error); - showPopup({ - header: t`Error upgrading to Pro`, - message: t`Workspace created successfully. You can upgrade later in settings.`, - icon: "warning", - }); - } - } - closeModal(); } }, @@ -168,57 +118,8 @@ export function NewWorkspaceForm() { if (nameElement) nameElement.focus(); }, []); - const [shouldShowBenefits, setShouldShowBenefits] = useState(false); - const isValidSlug = slug && slug.length >= 3 && !errors.slug; - useEffect(() => { - if ( - isCloudEnv && - !checkWorkspaceSlugAvailability.isPending && - isValidSlug - ) { - const isAvailable = isWorkspaceSlugAvailable?.isAvailable === true; - setShouldShowBenefits(isAvailable); - - // Automatically enable Pro toggle when slug is available - if (isAvailable) { - setIsProToggleEnabled(true); - setLastAvailableSlug(slug); - } - } - }, [ - isValidSlug, - isWorkspaceSlugAvailable?.isAvailable, - checkWorkspaceSlugAvailability.isPending, - slug, - isCloudEnv, - ]); - - // Reset benefits when slug becomes invalid - useEffect(() => { - if (!isValidSlug) { - setShouldShowBenefits(false); - } - }, [isValidSlug]); - - // Handle Pro toggle changes - const handleProToggleChange = () => { - if (isProToggleEnabled) { - // Turning off: clear the slug and disable Pro - setValue("slug", ""); - setIsProToggleEnabled(false); - } else { - // Turning on: restore the last available slug if we have one - if (lastAvailableSlug) { - setValue("slug", lastAvailableSlug); - } - setIsProToggleEnabled(true); - } - }; - - const showProBenefits = isProToggleEnabled; - const onSubmit = (values: FormValues) => { // Don't submit if slug is provided but not available if (values.slug && isWorkspaceSlugAvailable?.isAvailable === false) { @@ -227,7 +128,7 @@ export function NewWorkspaceForm() { createWorkspace.mutate({ name: values.name, - slug: !isCloudEnv && values.slug ? values.slug : undefined, + slug: values.slug, }); }; @@ -290,11 +191,7 @@ export function NewWorkspaceForm() { ? t`This workspace URL is reserved` : undefined) } - prefix={ - env("NEXT_PUBLIC_KAN_ENV") === "cloud" - ? "kan.bn/" - : `${env("NEXT_PUBLIC_BASE_URL")}/` - } + prefix={`${env("NEXT_PUBLIC_BASE_URL")}/`} iconRight={ slug && slug.length >= 3 && !errors.slug ? ( isWorkspaceSlugAvailable?.isAvailable ? ( @@ -311,68 +208,9 @@ export function NewWorkspaceForm() { } }} /> - - {slug && slug.length >= 3 && shouldShowBenefits && ( -
- -

- {t`Custom URLs require upgrading to a Pro plan`} -

-
- )} - - {showProBenefits && ( -
-
-
-
- -
- - {t`Unlimited members`} - - - {t`Launch offer`} - -
-
-
- - - {t`Custom workspace URL`} - -
-
- -
- - {t`Board analytics`} - - - {t`Coming soon`} - -
-
-
-
-
- )} -
- {/* Pro Toggle - only show in cloud environment */} - {isCloudEnv && ( - - )} +