feat: custom workspace slugs

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

@@ -1,7 +1,7 @@
 import Button from "~/components/Button";
 import { useModal } from "~/providers/modal";
 
-export function PremiumUsernameConfirmation({
+export function CustomURLConfirmation({
   workspacePublicId,
 }: {
   workspacePublicId: string;
@@ -16,7 +16,7 @@ export function PremiumUsernameConfirmation({
           "Content-Type": "application/json",
         },
         body: JSON.stringify({
-          username: entityId,
+          slug: entityId,
           workspacePublicId: workspacePublicId,
           cancelUrl: "/settings",
           successUrl: "/settings",
@@ -37,11 +37,11 @@ export function PremiumUsernameConfirmation({
     <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`}
+          {`Confirm URL 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."
+            "Custom URLs are a premium feature. You'll be directed to upgrade your account."
           }
         </p>
       </div>

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

@@ -14,11 +14,11 @@ const schema = z.object({
   slug: z
     .string()
     .min(3, {
-      message: "Username must be at least 3 characters long",
+      message: "URL must be at least 3 characters long",
     })
-    .max(24, { message: "Username cannot exceed 24 characters" })
+    .max(24, { message: "URL cannot exceed 24 characters" })
     .regex(/^(?![-]+$)[a-zA-Z0-9-]+$/, {
-      message: "Username can only contain letters, numbers, and hyphens",
+      message: "URL can only contain letters, numbers, and hyphens",
     }),
 });
 
@@ -62,7 +62,7 @@ const UpdateWorkspaceUrlForm = ({
     },
     onError: () => {
       showPopup({
-        header: "Error updating workspace username",
+        header: "Error updating workspace URL",
         message: "Please try again later, or contact customer support.",
         icon: "error",
       });
@@ -87,8 +87,8 @@ const UpdateWorkspaceUrlForm = ({
   const isWorkspaceSlugAvailable = checkWorkspaceSlugAvailability.data;
 
   const onSubmit = (data: FormValues) => {
-    if (isWorkspaceSlugAvailable?.isPremium && workspacePlan !== "pro")
-      return openModal("PREMIUM_USERNAME", data.slug);
+    if (isWorkspaceSlugAvailable?.isAvailable && workspacePlan !== "pro")
+      return openModal("UPDATE_WORKSPACE_URL", data.slug);
 
     updateWorkspaceSlug.mutate({
       workspacePublicId,
@@ -115,7 +115,7 @@ const UpdateWorkspaceUrlForm = ({
           }
           prefix="kan.bn/"
           iconRight={
-            isWorkspaceSlugAvailable?.isPremium ||
+            isWorkspaceSlugAvailable?.isAvailable ||
             (workspacePlan === "pro" && slug === workspaceUrl) ? (
               <HiMiniStar className="h-4 w-4 text-yellow-500" />
             ) : isWorkspaceSlugAvailable?.isAvailable ? (

apps/web/src/views/settings/index.tsx

@@ -8,8 +8,8 @@ import { useModal } from "~/providers/modal";
 import { useWorkspace } from "~/providers/workspace";
 import { api } from "~/utils/api";
 import Avatar from "./components/Avatar";
+import { CustomURLConfirmation } from "./components/CustomURLConfirmation";
 import { DeleteWorkspaceConfirmation } from "./components/DeleteWorkspaceConfirmation";
-import { PremiumUsernameConfirmation } from "./components/PremiumUsernameConfirmation";
 import UpdateWorkspaceDescriptionForm from "./components/UpdateWorkspaceDescriptionForm";
 import UpdateWorkspaceNameForm from "./components/UpdateWorkspaceNameForm";
 import UpdateWorkspaceUrlForm from "./components/UpdateWorkspaceUrlForm";
@@ -46,7 +46,7 @@ export default function SettingsPage() {
           <PageHead title={`Settings | ${workspace.name ?? "Workspace"}`} />
           <div className="px-28 py-12">
             <div className="mb-8 flex w-full justify-between">
-              <h1 className="font-medium tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
+              <h1 className="font-bold tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
                 Settings
               </h1>
             </div>
@@ -68,7 +68,7 @@ export default function SettingsPage() {
               />
 
               <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
-                Workspace username
+                Workspace URL
               </h2>
               <UpdateWorkspaceUrlForm
                 workspacePublicId={workspace.publicId}
@@ -123,10 +123,8 @@ export default function SettingsPage() {
             {modalContentType === "DELETE_WORKSPACE" && (
               <DeleteWorkspaceConfirmation />
             )}
-            {modalContentType === "PREMIUM_USERNAME" && (
-              <PremiumUsernameConfirmation
-                workspacePublicId={workspace.publicId}
-              />
+            {modalContentType === "UPDATE_WORKSPACE_URL" && (
+              <CustomURLConfirmation workspacePublicId={workspace.publicId} />
             )}
           </Modal>
         </div>