added layouts for moving teams step
This commit is contained in:
Peer Richelsen
parent
74748a6183
commit
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 { IS_CALCOM } from "@calcom/lib/constants";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import type { RouterOutputs } from "@calcom/trpc/react";
|
||||
import { trpc } from "@calcom/trpc/react";
|
||||
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";
|
||||
|
||||
|
|
@ -42,8 +43,67 @@ export default function TeamList(props: Props) {
|
|||
deleteTeamMutation.mutate({ teamId });
|
||||
}
|
||||
|
||||
const hasOrgPlan = false;
|
||||
|
||||
return (
|
||||
<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) => (
|
||||
<TeamListItem
|
||||
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/ */}
|
||||
<div>
|
||||
{variant === "basic" && (
|
||||
{variant === "basic" && actionButton && (
|
||||
<div>
|
||||
<Button color="secondary" href={actionButton?.href} className="mt-10" EndIcon={ArrowRight}>
|
||||
{actionButton?.child}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{variant === "SidebarCard" && (
|
||||
<div className="mt-2 flex items-center justify-between">
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user