Compare commits
2 Commits
main
...
13135-cal-
Author | SHA1 | Date | |
---|---|---|---|
|
09b3424720 | ||
|
3e86dfd889 |
|
@ -0,0 +1,54 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import Head from "next/head";
|
||||||
|
|
||||||
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||||
|
import { WizardLayout, Button, CheckboxField } from "@calcom/ui";
|
||||||
|
import { ArrowRight } from "@calcom/ui/components/icon";
|
||||||
|
|
||||||
|
import PageWrapper from "@components/PageWrapper";
|
||||||
|
|
||||||
|
const MoveTeamPage = () => {
|
||||||
|
const { t } = useLocale();
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Head>
|
||||||
|
<title>{t("Select the teams")}</title>
|
||||||
|
<meta name="description" content={t("to move into your new organization")} />
|
||||||
|
</Head>
|
||||||
|
<form>
|
||||||
|
<ul className="mb-8 space-y-4">
|
||||||
|
<li>
|
||||||
|
<CheckboxField description="Team #1" />
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<CheckboxField description="Team #2" />
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<CheckboxField description="Team #3" />
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div className="flex space-x-2 rtl:space-x-reverse">
|
||||||
|
<Button color="secondary" href="/teams" className="w-full justify-center">
|
||||||
|
{t("cancel")}
|
||||||
|
</Button>
|
||||||
|
<Button color="primary" EndIcon={ArrowRight} type="submit" className="w-full justify-center">
|
||||||
|
{t("continue")}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export const LayoutWrapper = (page: React.ReactElement) => {
|
||||||
|
return (
|
||||||
|
<WizardLayout currentStep={1} maxSteps={2}>
|
||||||
|
{page}
|
||||||
|
</WizardLayout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
MoveTeamPage.getLayout = LayoutWrapper;
|
||||||
|
MoveTeamPage.PageWrapper = PageWrapper;
|
||||||
|
|
||||||
|
export default MoveTeamPage;
|
|
@ -0,0 +1,167 @@
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { Controller, useForm } from "react-hook-form";
|
||||||
|
import { z } from "zod";
|
||||||
|
|
||||||
|
import { HOSTED_CAL_FEATURES } from "@calcom/lib/constants";
|
||||||
|
import { getSafeRedirectUrl } from "@calcom/lib/getSafeRedirectUrl";
|
||||||
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||||
|
import { useParamsWithFallback } from "@calcom/lib/hooks/useParamsWithFallback";
|
||||||
|
import slugify from "@calcom/lib/slugify";
|
||||||
|
import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
|
||||||
|
import { trpc } from "@calcom/trpc/react";
|
||||||
|
import { Alert, Button, Form, TextField } from "@calcom/ui";
|
||||||
|
import { ArrowRight } from "@calcom/ui/components/icon";
|
||||||
|
|
||||||
|
import { useOrgBranding } from "../../organizations/context/provider";
|
||||||
|
import { subdomainSuffix } from "../../organizations/lib/orgDomains";
|
||||||
|
import type { NewTeamFormValues } from "../lib/types";
|
||||||
|
|
||||||
|
const querySchema = z.object({
|
||||||
|
returnTo: z.string().optional(),
|
||||||
|
slug: z.string().optional(),
|
||||||
|
});
|
||||||
|
|
||||||
|
const isTeamBillingEnabledClient = !!process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY && HOSTED_CAL_FEATURES;
|
||||||
|
const flag = isTeamBillingEnabledClient
|
||||||
|
? {
|
||||||
|
telemetryEvent: telemetryEventTypes.team_checkout_session_created,
|
||||||
|
submitLabel: "checkout",
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
telemetryEvent: telemetryEventTypes.team_created,
|
||||||
|
submitLabel: "continue",
|
||||||
|
};
|
||||||
|
|
||||||
|
export const CreateANewTeamForm = () => {
|
||||||
|
const { t, isLocaleReady } = useLocale();
|
||||||
|
const router = useRouter();
|
||||||
|
const telemetry = useTelemetry();
|
||||||
|
const params = useParamsWithFallback();
|
||||||
|
const parsedQuery = querySchema.safeParse(params);
|
||||||
|
const [serverErrorMessage, setServerErrorMessage] = useState<string | null>(null);
|
||||||
|
const orgBranding = useOrgBranding();
|
||||||
|
|
||||||
|
const returnToParam =
|
||||||
|
(parsedQuery.success ? getSafeRedirectUrl(parsedQuery.data.returnTo) : "/settings/teams") ||
|
||||||
|
"/settings/teams";
|
||||||
|
|
||||||
|
const newTeamFormMethods = useForm<NewTeamFormValues>({
|
||||||
|
defaultValues: {
|
||||||
|
slug: parsedQuery.success ? parsedQuery.data.slug : "",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const createTeamMutation = trpc.viewer.teams.create.useMutation({
|
||||||
|
onSuccess: (data) => {
|
||||||
|
telemetry.event(flag.telemetryEvent);
|
||||||
|
router.push(data.url);
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
if (err.message === "team_url_taken") {
|
||||||
|
newTeamFormMethods.setError("slug", { type: "custom", message: t("url_taken") });
|
||||||
|
} else {
|
||||||
|
setServerErrorMessage(err.message);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Form
|
||||||
|
form={newTeamFormMethods}
|
||||||
|
handleSubmit={(v) => {
|
||||||
|
if (!createTeamMutation.isLoading) {
|
||||||
|
setServerErrorMessage(null);
|
||||||
|
createTeamMutation.mutate(v);
|
||||||
|
}
|
||||||
|
}}>
|
||||||
|
<div className="mb-8">
|
||||||
|
{serverErrorMessage && (
|
||||||
|
<div className="mb-4">
|
||||||
|
<Alert severity="error" message={t(serverErrorMessage)} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Controller
|
||||||
|
name="name"
|
||||||
|
control={newTeamFormMethods.control}
|
||||||
|
defaultValue=""
|
||||||
|
rules={{
|
||||||
|
required: t("must_enter_team_name"),
|
||||||
|
}}
|
||||||
|
render={({ field: { value } }) => (
|
||||||
|
<>
|
||||||
|
<TextField
|
||||||
|
disabled={
|
||||||
|
/* E2e is too fast and it tries to fill this way before the form is ready */
|
||||||
|
!isLocaleReady || createTeamMutation.isLoading
|
||||||
|
}
|
||||||
|
className="mt-2"
|
||||||
|
placeholder="Acme Inc."
|
||||||
|
name="name"
|
||||||
|
label={t("team_name")}
|
||||||
|
defaultValue={value}
|
||||||
|
onChange={(e) => {
|
||||||
|
newTeamFormMethods.setValue("name", e?.target.value);
|
||||||
|
if (newTeamFormMethods.formState.touchedFields["slug"] === undefined) {
|
||||||
|
newTeamFormMethods.setValue("slug", slugify(e?.target.value));
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
autoComplete="off"
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-8">
|
||||||
|
<Controller
|
||||||
|
name="slug"
|
||||||
|
control={newTeamFormMethods.control}
|
||||||
|
rules={{ required: t("team_url_required") }}
|
||||||
|
render={({ field: { value } }) => (
|
||||||
|
<TextField
|
||||||
|
className="mt-2"
|
||||||
|
name="slug"
|
||||||
|
placeholder="acme"
|
||||||
|
label={t("team_url")}
|
||||||
|
addOnLeading={`${
|
||||||
|
orgBranding
|
||||||
|
? `${orgBranding.fullDomain.replace("https://", "").replace("http://", "")}/`
|
||||||
|
: `${subdomainSuffix()}/team/`
|
||||||
|
}`}
|
||||||
|
value={value}
|
||||||
|
defaultValue={value}
|
||||||
|
onChange={(e) => {
|
||||||
|
newTeamFormMethods.setValue("slug", slugify(e?.target.value, true), {
|
||||||
|
shouldTouch: true,
|
||||||
|
});
|
||||||
|
newTeamFormMethods.clearErrors("slug");
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex space-x-2 rtl:space-x-reverse">
|
||||||
|
<Button
|
||||||
|
disabled={createTeamMutation.isLoading}
|
||||||
|
color="secondary"
|
||||||
|
href={returnToParam}
|
||||||
|
className="w-full justify-center">
|
||||||
|
{t("cancel")}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
disabled={newTeamFormMethods.formState.isSubmitting || createTeamMutation.isLoading}
|
||||||
|
color="primary"
|
||||||
|
EndIcon={ArrowRight}
|
||||||
|
type="submit"
|
||||||
|
className="w-full justify-center">
|
||||||
|
{t(flag.submitLabel)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Form>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
|
@ -1,10 +1,11 @@
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
|
|
||||||
|
import { IS_CALCOM } from "@calcom/lib/constants";
|
||||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||||
import type { RouterOutputs } from "@calcom/trpc/react";
|
import type { RouterOutputs } from "@calcom/trpc/react";
|
||||||
import { trpc } from "@calcom/trpc/react";
|
import { trpc } from "@calcom/trpc/react";
|
||||||
import { Card, showToast } from "@calcom/ui";
|
import { Card, showToast } from "@calcom/ui";
|
||||||
import { UserPlus, Users, Edit } from "@calcom/ui/components/icon";
|
import { UserPlus, Building, LineChart, Paintbrush, Users, Edit } from "@calcom/ui/components/icon";
|
||||||
|
|
||||||
import TeamListItem from "./TeamListItem";
|
import TeamListItem from "./TeamListItem";
|
||||||
|
|
||||||
|
@ -42,8 +43,67 @@ export default function TeamList(props: Props) {
|
||||||
deleteTeamMutation.mutate({ teamId });
|
deleteTeamMutation.mutate({ teamId });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const hasOrgPlan = false;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ul className="bg-default divide-subtle border-subtle mb-2 divide-y overflow-hidden rounded-md border">
|
<ul className="bg-default divide-subtle border-subtle mb-2 divide-y overflow-hidden rounded-md border">
|
||||||
|
{!props.pending &&
|
||||||
|
!IS_CALCOM &&
|
||||||
|
props.teams.length > 2 &&
|
||||||
|
props.teams.map(
|
||||||
|
(team, i) =>
|
||||||
|
team.role !== "MEMBER" &&
|
||||||
|
i === 0 && (
|
||||||
|
<div className="bg-subtle p-4">
|
||||||
|
<div className="grid-col-1 grid gap-2 md:grid-cols-3">
|
||||||
|
<Card
|
||||||
|
icon={<Building className="h-5 w-5 text-red-700" />}
|
||||||
|
variant="basic"
|
||||||
|
title={t("You have a lot of teams")}
|
||||||
|
description={t(
|
||||||
|
"Consider consolidating your teams in an organisation, unify billing, admin tools and analytics."
|
||||||
|
)}
|
||||||
|
actionButton={
|
||||||
|
hasOrgPlan
|
||||||
|
? {
|
||||||
|
href: "https://cal.com/sales",
|
||||||
|
child: t("contact_sales"),
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
href: `/settings/organizations/move-teams`,
|
||||||
|
child: t("set_up_your_organization"),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
icon={<Paintbrush className="h-5 w-5 text-orange-700" />}
|
||||||
|
variant="basic"
|
||||||
|
title={t("Get a clean subdomain")}
|
||||||
|
description={t(
|
||||||
|
"Right now, team member URLs are all over the place. Get a beautiful link and turn every email address into a scheduling link: anna@acme.com → acme.cal.com/anna"
|
||||||
|
)}
|
||||||
|
actionButton={{
|
||||||
|
href: "https://www.youtube.com/watch?v=G0Jd2dp7064",
|
||||||
|
child: t("learn_more"),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
icon={<LineChart className="h-5 w-5 text-green-700" />}
|
||||||
|
variant="basic"
|
||||||
|
title={t("Admin tools and analytics")}
|
||||||
|
description={t(
|
||||||
|
"As an organization owner, you are in charge of every team account. You can make changes with admin-only tools and see organization wide analytics in one place."
|
||||||
|
)}
|
||||||
|
actionButton={{
|
||||||
|
href: "https://i.cal.com/sales/enterprise",
|
||||||
|
child: t("learn_more"),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
|
||||||
{props.teams.map((team) => (
|
{props.teams.map((team) => (
|
||||||
<TeamListItem
|
<TeamListItem
|
||||||
key={team?.id as number}
|
key={team?.id as number}
|
||||||
|
|
|
@ -202,13 +202,13 @@ export function Card({
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* TODO: this should be CardActions https://mui.com/material-ui/api/card-actions/ */}
|
{/* TODO: this should be CardActions https://mui.com/material-ui/api/card-actions/ */}
|
||||||
<div>
|
{variant === "basic" && actionButton && (
|
||||||
{variant === "basic" && (
|
<div>
|
||||||
<Button color="secondary" href={actionButton?.href} className="mt-10" EndIcon={ArrowRight}>
|
<Button color="secondary" href={actionButton?.href} className="mt-10" EndIcon={ArrowRight}>
|
||||||
{actionButton?.child}
|
{actionButton?.child}
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
</div>
|
||||||
</div>
|
)}
|
||||||
|
|
||||||
{variant === "SidebarCard" && (
|
{variant === "SidebarCard" && (
|
||||||
<div className="mt-2 flex items-center justify-between">
|
<div className="mt-2 flex items-center justify-between">
|
||||||
|
|
Loading…
Reference in New Issue
Block a user