shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: premium workspace usernames

Browse Source
This commit is contained in:
Henry
2025-01-02 20:40:29 +00:00
parent b5dc9433db
commit 67e714b8b0
41 changed files with 1767 additions and 9088 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
apps/web/src/views/members/index.tsx
View File

@@ -1,19 +1,16 @@
import { HiOutlinePlusSmall, HiEllipsisHorizontal } from "react-icons/hi2";
import { HiEllipsisHorizontal, HiOutlinePlusSmall } from "react-icons/hi2";
import { twMerge } from "tailwind-merge";
import Dropdown from "~/components/Dropdown";
import Modal from "~/components/modal";
import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
import { PageHead } from "~/components/PageHead";
import { useModal } from "~/providers/modal";
import { useWorkspace } from "~/providers/workspace";
import { PageHead } from "~/components/PageHead";
import Modal from "~/components/modal";
import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
import { InviteMemberForm } from "./components/InviteMemberForm";
import { DeleteMemberConfirmation } from "./components/DeleteMemberConfirmation";
import Dropdown from "~/components/Dropdown";
import { api } from "~/utils/api";
import { getInitialsFromName, inferInitialsFromEmail } from "~/utils/helpers";
import { DeleteMemberConfirmation } from "./components/DeleteMemberConfirmation";
import { InviteMemberForm } from "./components/InviteMemberForm";
export default function MembersPage() {
const { modalContentType, openModal } = useModal();
@@ -24,6 +21,25 @@ export default function MembersPage() {
// { enabled: workspace?.publicId ? true : false },
);
const handleUpgrade = async () => {
try {
const response = await fetch("/api/stripe/create_checkout_session", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
});
const { url } = (await response.json()) as { url: string };
if (url) {
window.location.href = url;
}
} catch (error) {
console.error("Error creating checkout session:", error);
}
};
const TableRow = ({
memberPublicId,
memberName,
@@ -139,7 +155,7 @@ export default function MembersPage() {
return (
<>
<PageHead title={`Members | ${workspace?.name ?? "Workspace"}`} />
<PageHead title={`Members | ${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]">
@@ -149,7 +165,7 @@ export default function MembersPage() {
<button
type="button"
className="flex items-center gap-x-1.5 rounded-md bg-light-1000 px-3 py-2 text-sm font-semibold text-light-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:bg-dark-1000 dark:text-dark-50"
onClick={() => openModal("INVITE_MEMBER")}
onClick={() => handleUpgrade()}
>
<div className="h-5 w-5 items-center">
<HiOutlinePlusSmall
@@ -189,8 +205,8 @@ export default function MembersPage() {
<TableRow
key={member.publicId}
memberPublicId={member.publicId}
memberName={member?.user?.name}
memberEmail={member?.user?.email}
memberName={member.user?.name}
memberEmail={member.user?.email}
memberRole={member.role}
memberStatus={member.status}
isLastRow={index === data.members.length - 1}

56
apps/web/src/views/settings/components/PremiumUsernameConfirmation.tsx Normal file
View File

@@ -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>
);
}

66
apps/web/src/views/settings/components/UpdateWorkspaceUrlForm.tsx
View File

@@ -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

8
apps/web/src/views/settings/index.tsx
View File

@@ -4,6 +4,7 @@ import { PageHead } from "~/components/PageHead";
import { useModal } from "~/providers/modal";
import { useWorkspace } from "~/providers/workspace";
import { DeleteWorkspaceConfirmation } from "./components/DeleteWorkspaceConfirmation";
import { PremiumUsernameConfirmation } from "./components/PremiumUsernameConfirmation";
import UpdateWorkspaceNameForm from "./components/UpdateWorkspaceNameForm";
import UpdateWorkspaceUrlForm from "./components/UpdateWorkspaceUrlForm";
@@ -31,7 +32,7 @@ export default function SettingsPage() {
/>
<h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
Workspace URL
Workspace username
</h2>
<UpdateWorkspaceUrlForm
workspacePublicId={workspace.publicId}
@@ -59,6 +60,11 @@ export default function SettingsPage() {
{modalContentType === "DELETE_WORKSPACE" && (
<DeleteWorkspaceConfirmation />
)}
{modalContentType === "PREMIUM_USERNAME" && (
<PremiumUsernameConfirmation
workspacePublicId={workspace.publicId}
/>
)}
</Modal>
</div>
</>