Merge branch 'main' into refactor/workspace-form

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 {
+import { HiCheck, HiXMark } from "react-icons/hi2";
-  HiBolt,
-  HiCheck,
-  HiCheckBadge,
-  HiInformationCircle,
-  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<FormValues>({
     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<string>("");
-
   // 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({
@@ -132,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) {
@@ -191,7 +128,7 @@ export function NewWorkspaceForm() {
 
     createWorkspace.mutate({
       name: values.name,
-      slug: !isCloudEnv && values.slug ? values.slug : undefined,
+      slug: values.slug,
     });
   };
 
@@ -254,11 +191,7 @@ export function NewWorkspaceForm() {
                   ? t`This workspace URL is reserved`
                   : undefined)
             }
-            prefix={
+            prefix={`${env("NEXT_PUBLIC_BASE_URL")}/`}
-              env("NEXT_PUBLIC_KAN_ENV") === "cloud"
-                ? "kan.bn/"
-                : `${env("NEXT_PUBLIC_BASE_URL")}/`
-            }
             iconRight={
               slug && slug.length >= 3 && !errors.slug ? (
                 isWorkspaceSlugAvailable?.isAvailable ? (
@@ -275,68 +208,9 @@ export function NewWorkspaceForm() {
               }
             }}
           />
-
-          {slug && slug.length >= 3 && shouldShowBenefits && (
-            <div className="mt-2 flex items-center gap-1">
-              <HiInformationCircle className="h-4 w-4 text-dark-900" />
-              <p className="text-xs text-gray-500 dark:text-dark-900">
-                {t`Custom URLs require upgrading to a Pro plan`}
-              </p>
-            </div>
-          )}
         </div>
-
-        {showProBenefits && (
-          <div className="mt-6">
-            <div className="rounded-md bg-light-100 p-3 text-xs text-light-900 dark:bg-dark-200 dark:text-dark-900">
-              <div className="space-y-3">
-                <div className="flex items-center space-x-3">
-                  <HiCheckBadge className="h-[18px] w-[18px] flex-shrink-0 text-light-1000 dark:text-dark-950" />
-                  <div className="flex items-center space-x-2">
-                    <span className="text-xs text-neutral-900 dark:text-dark-1000">
-                      {t`Unlimited members`}
-                    </span>
-                    <span className="inline-flex items-center rounded-full bg-emerald-500/10 px-2 py-0.5 text-[10px] font-medium text-emerald-600 ring-1 ring-inset ring-emerald-500/20 dark:text-emerald-400 sm:text-[10px]">
-                      {t`Launch offer`}
-                    </span>
-                  </div>
-                </div>
-                <div className="flex items-center space-x-3">
-                  <HiCheckBadge className="h-[18px] w-[18px] flex-shrink-0 text-light-1000 dark:text-dark-950" />
-                  <span className="text-xs text-neutral-900 dark:text-dark-1000">
-                    {t`Custom workspace URL`}
-                  </span>
-                </div>
-                <div className="flex items-center space-x-3">
-                  <HiCheckBadge className="h-[18px] w-[18px] flex-shrink-0 text-light-1000 dark:text-dark-950" />
-                  <div className="flex items-center space-x-2">
-                    <span className="text-xs text-neutral-900 dark:text-dark-1000">
-                      {t`Board analytics`}
-                    </span>
-                    <span className="inline-flex items-center rounded-full bg-gray-500/10 px-2 py-0.5 text-[10px] font-medium text-gray-600 ring-1 ring-inset ring-gray-500/20 dark:text-gray-400 sm:text-[10px]">
-                      {t`Coming soon`}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
       </div>
-      <div
+      <div className="mt-6 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
-        className={twMerge(
-          "mt-6 flex items-center justify-end space-x-4 border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600",
-          !showProBenefits && "mt-12",
-        )}
-      >
-        {/* Pro Toggle - only show in cloud environment */}
-        {isCloudEnv && (
-          <Toggle
-            isChecked={isProToggleEnabled}
-            onChange={handleProToggleChange}
-            label={t`Upgrade to Pro ($29/month)`}
-          />
-        )}
         <div>
           <Button
             type="submit"

apps/web/src/views/onboarding/workspace-details/index.tsx

@@ -41,6 +41,7 @@ export default function WorkspaceNameView() {
   const returnUrl = searchParams.get("returnUrl") ?? "/boards";
   const { showPopup } = usePopup();
   const [isProToggle, setIsProToggle] = useState(plan === "pro");
+  const effectivePlan = isProToggle ? "pro" : plan;
 
   const [name, setName] = useState("");
   const [slug, setSlug] = useState("");
@@ -109,7 +110,7 @@ export default function WorkspaceNameView() {
   const handleContinue = async () => {
     if (!name.trim()) return;
 
-    if (plan === "solo") {
+    if (effectivePlan === "solo") {
       createWorkspace.mutate({
         name: name.trim(),
         ...(description.trim() && { description: description.trim() }),
@@ -128,11 +129,11 @@ export default function WorkspaceNameView() {
           ...(description.trim() && {
             workspaceDescription: description.trim(),
           }),
-          ...(plan === "pro" && slug ? { workspaceSlug: slug } : {}),
+          ...(effectivePlan === "pro" && slug ? { workspaceSlug: slug } : {}),
-          cancelUrl: window.location.pathname + window.location.search,
+          cancelUrl: `${window.location.pathname}?plan=${effectivePlan}&billing=${billing}&returnUrl=${encodeURIComponent(returnUrl)}`,
           successUrl: "/boards",
           billing,
-          plan,
+          plan: effectivePlan,
         }),
       });
       const data = await response.json();
@@ -268,7 +269,7 @@ export default function WorkspaceNameView() {
                   variant="ghost"
                   onClick={() =>
                     router.replace(
-                      `/onboarding/select-plan?plan=${plan}&billing=${billing}&returnUrl=${encodeURIComponent(returnUrl)}`,
+                      `/onboarding/select-plan?plan=${effectivePlan}&billing=${billing}&returnUrl=${encodeURIComponent(returnUrl)}`,
                     )
                   }
                 >