feat: premium workspace usernames

apps/web/src/views/settings/components/PremiumUsernameConfirmation.tsx

@@ -0,0 +1,56 @@
+import Button from "~/components/Button";
+import { useModal } from "~/providers/modal";
+
+export function PremiumUsernameConfirmation({
+  workspacePublicId,
+}: {
+  workspacePublicId: string;
+}) {
+  const { closeModal, entityId } = useModal();
+
+  const handleUpgrade = async () => {
+    try {
+      const response = await fetch("/api/stripe/create_checkout_session", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          username: entityId,
+          workspacePublicId: workspacePublicId,
+          cancelUrl: "/settings",
+          successUrl: "/settings",
+        }),
+      });
+
+      const { url } = (await response.json()) as { url: string };
+
+      if (url) {
+        window.location.href = url;
+      }
+    } catch (error) {
+      console.error("Error creating checkout session:", error);
+    }
+  };
+
+  return (
+    <div className="p-5">
+      <div className="flex w-full flex-col justify-between pb-4">
+        <h2 className="text-md pb-4 font-medium text-neutral-900 dark:text-dark-1000">
+          {`Confirm username change`}
+        </h2>
+        <p className="text-sm font-medium text-light-900 dark:text-dark-900">
+          {
+            "As you are changing from a standard to a premium username, you will be taken to the checkout to upgrade."
+          }
+        </p>
+      </div>
+      <div className="mt-5 flex justify-end space-x-2 sm:mt-6">
+        <Button onClick={() => closeModal()} variant="secondary">
+          Cancel
+        </Button>
+        <Button onClick={handleUpgrade}>Upgrade</Button>
+      </div>
+    </div>
+  );
+}

apps/web/src/views/settings/components/UpdateWorkspaceUrlForm.tsx

@@ -1,17 +1,25 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
+import { HiCheck, HiMiniStar } from "react-icons/hi2";
 import { z } from "zod";
 
 import Button from "~/components/Button";
 import Input from "~/components/Input";
+import { useDebounce } from "~/hooks/useDebounce";
+import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
 import { api } from "~/utils/api";
 
 const schema = z.object({
   slug: z
     .string()
-    .min(3, { message: "Workspace URL must be at least 3 characters long" })
-    .max(24, { message: "Workspace URL cannot exceed 24 characters" }),
+    .min(3, {
+      message: "Username must be at least 3 characters long",
+    })
+    .max(24, { message: "Username cannot exceed 24 characters" })
+    .regex(/^(?![-]+$)[a-zA-Z0-9-]+$/, {
+      message: "Username can only contain letters, numbers, and hyphens",
+    }),
 });
 
 type FormValues = z.infer<typeof schema>;
@@ -25,17 +33,22 @@ const UpdateWorkspaceUrlForm = ({
 }) => {
   const utils = api.useUtils();
   const { showPopup } = usePopup();
+  const { openModal } = useModal();
   const {
     register,
     handleSubmit,
     formState: { isDirty, errors },
+    watch,
   } = useForm<FormValues>({
     resolver: zodResolver(schema),
     values: {
       slug: workspaceUrl,
     },
+    mode: "onChange",
   });
 
+  const slug = watch("slug");
+
   const updateWorkspaceSlug = api.workspace.update.useMutation({
     onSuccess: async () => {
       try {
@@ -47,13 +60,33 @@ const UpdateWorkspaceUrlForm = ({
     },
     onError: () => {
       showPopup({
-        header: "Error updating workspace URL",
+        header: "Error updating workspace username",
         message: "Please try again later, or contact customer support.",
       });
     },
   });
 
+  const [debouncedSlug] = useDebounce(slug, 500);
+
+  const isTyping = slug !== debouncedSlug;
+
+  const checkWorkspaceSlugAvailability =
+    api.workspace.checkSlugAvailability.useQuery(
+      {
+        workspaceSlug: debouncedSlug,
+      },
+      {
+        enabled:
+          !!debouncedSlug && debouncedSlug !== workspaceUrl && !errors.slug,
+      },
+    );
+
+  const isWorkspaceSlugAvailable = checkWorkspaceSlugAvailability.data;
+
   const onSubmit = (data: FormValues) => {
+    if (isWorkspaceSlugAvailable?.isPremium)
+      return openModal("PREMIUM_USERNAME", data.slug);
+
     updateWorkspaceSlug.mutate({
       workspacePublicId,
       slug: data.slug,
@@ -65,14 +98,35 @@ const UpdateWorkspaceUrlForm = ({
       <div className="mb-4 flex max-w-[350px] items-center gap-2">
         <Input
           {...register("slug")}
-          errorMessage={errors.slug?.message}
-          prefix="kanbn.com/"
+          className={`${
+            isWorkspaceSlugAvailable?.isPremium ? "focus:ring-yellow-500" : ""
+          }`}
+          errorMessage={
+            errors.slug?.message ||
+            (isWorkspaceSlugAvailable?.isAvailable === false
+              ? "This workspace username has already been taken"
+              : undefined)
+          }
+          prefix="kan.bn/"
+          iconRight={
+            isWorkspaceSlugAvailable?.isPremium ? (
+              <HiMiniStar className="h-4 w-4 text-yellow-500" />
+            ) : isWorkspaceSlugAvailable?.isAvailable ? (
+              <HiCheck className="h-4 w-4" />
+            ) : null
+          }
         />
       </div>
       <Button
         onClick={handleSubmit(onSubmit)}
         variant="primary"
-        disabled={!isDirty || updateWorkspaceSlug.isPending}
+        disabled={
+          !isDirty ||
+          updateWorkspaceSlug.isPending ||
+          checkWorkspaceSlugAvailability.isPending ||
+          isWorkspaceSlugAvailable?.isAvailable === false ||
+          isTyping
+        }
         isLoading={updateWorkspaceSlug.isPending}
       >
         Update