Team Workflows

apps/web/pages/event-types/index.tsx

@@ -5,10 +5,9 @@ import type { FC } from "react";
 import { useEffect, useState, memo } from "react";
 import { z } from "zod";
 
-import {
- CreateEventTypeButton,
- EventTypeDescriptionLazy as EventTypeDescription,
-} from "@calcom/features/eventtypes/components";
+import { EventTypeDescriptionLazy as EventTypeDescription } from "@calcom/features/eventtypes/components";
+import CreateEventTypeDialog from "@calcom/features/eventtypes/components/CreateEventTypeDialog";
+import { DuplicateDialog } from "@calcom/features/eventtypes/components/DuplicateDialog";
 import Shell from "@calcom/features/shell/Shell";
 import { APP_NAME, CAL_URL, WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -35,6 +34,7 @@ import {
  showToast,
  Switch,
  Tooltip,
+ CreateButton,
  HorizontalTabs,
 } from "@calcom/ui";
 import {
@@ -134,9 +134,9 @@ const Item = ({ type, group, readOnly }: { type: EventType; group: EventTypeGrou
  </small>
  ) : null}
  {readOnly && (
- <span className="items-center rounded-sm bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-800 ltr:ml-2 ltr:mr-2 rtl:ml-2">
+ <Badge variant="gray" className="ml-2">
  {t("readonly")}
- </span>
+ </Badge>
  )}
  </div>
  <EventTypeDescription
@@ -240,7 +240,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
  const openDuplicateModal = (eventType: EventType, group: EventTypeGroup) => {
  const query = {
  ...router.query,
- dialog: "duplicate-event-type",
+ dialog: "duplicate",
  title: eventType.title,
  description: eventType.description,
  slug: eventType.slug,
@@ -627,17 +627,32 @@ const CreateFirstEventTypeView = () => {
 };
 
 const CTA = () => {
+ const { t } = useLocale();
+
  const query = trpc.viewer.eventTypes.getByViewer.useQuery();
 
  if (!query.data) return null;
 
- return <CreateEventTypeButton canAddEvents={true} options={query.data.profiles} />;
+ const profileOptions = query.data.profiles
+ .filter((profile) => !profile.readOnly)
+ .map((profile) => {
+ return { teamId: profile.teamId, label: profile.name || profile.slug, image: profile.image };
+ });
+
+ return (
+ <CreateButton
+ subtitle={t("create_event_on").toUpperCase()}
+ options={profileOptions}
+ createDialog={CreateEventTypeDialog}
+ />
+ );
 };
 
 const WithQuery = withQuery(trpc.viewer.eventTypes.getByViewer);
 
 const EventTypesPage = () => {
  const { t } = useLocale();
+ const router = useRouter();
 
  const isMobile = useMediaQuery("(max-width: 768px)");
 
@@ -683,6 +698,7 @@ const EventTypesPage = () => {
  )}
 
  <EmbedDialog />
+ {router.query.dialog === "duplicate" && <DuplicateDialog />}
  </>
  )}
  />

apps/web/public/static/locales/en/common.json

@@ -598,7 +598,6 @@
  "new_event_type_heading": "Create your first event type",
  "new_event_type_description": "Event types enable you to share links that show available times on your calendar and allow people to make bookings with you.",
  "new_event_title": "Add a new event type",
- "new_event_subtitle": "Create an event type under your name or a team.",
  "new_team_event": "Add a new team event type",
  "new_event_description": "Create a new event type for people to book times with.",
  "event_type_created_successfully": "{{eventTypeTitle}} event type created successfully",
@@ -1527,6 +1526,7 @@
  "sender_name": "Sender name",
  "already_invited": "Attendee already invited",
  "no_recordings_found": "No recordings found",
+ "new_workflow_subtitle": "New workflow for...",
  "reporting": "Reporting",
  "reporting_feature": "See all incoming from data and download it as a CSV",
  "teams_plan_required": "Teams plan required",
@@ -1581,14 +1581,17 @@
  "email_no_user_step_four":"Join {{teamName}}",
  "email_no_user_signoff":"Happy Scheduling from the {{appName}} team",
  "impersonation_user_tip": "You are about to impersonate a user, which means you can make changes on their behalf. Please be careful.",
- "scheduler": "{Scheduler}",
  "available_variables": "Available variables",
+ "scheduler": "{Scheduler}",
+ "no_workflows": "No workflows",
+ "change_filter": "Change filter to see your personal and team workflows.",
  "recommended_next_steps": "Recommended next steps",
  "create_a_managed_event": "Create a managed event type",
  "meetings_are_better_with_the_right": "Meetings are better with the right team members there. Invite them now.",
  "create_a_one_one_template": "Create a one-one one template for an event type and distribute it to multiple members.",
  "collective_or_roundrobin": "Collective or round-robin",
  "book_your_team_members": "Book your team members together with collective events or cycle through to get the right person with round-robin.",
+ "create_event_on": "Create event on",
  "default_app_link_title":"Set a default app link",
  "default_app_link_description":"Setting a default app link allows all newly created event types to use the app link you set.",
  "change_default_conferencing_app":"Set as default",
@@ -1619,5 +1622,7 @@
  "select_a_router": "Select a router",
  "add_a_new_route": "Add a new Route",
  "no_responses_yet": "No responses yet",
- "this_will_be_the_placeholder": "This will be the placeholder"
+ "this_will_be_the_placeholder": "This will be the placeholder",
+ "verification_code": "Verification code",
+ "verify": "Verify"
 }

packages/features/ee/teams/pages/team-profile-view.tsx

@@ -1,13 +1,13 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import { MembershipRole, Prisma } from "@prisma/client";
+import type { Prisma } from "@prisma/client";
+import { MembershipRole } from "@prisma/client";
 import MarkdownIt from "markdown-it";
 import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
 
-import { CAL_URL } from "@calcom/lib/constants";
 import { IS_TEAM_BILLING_ENABLED, WEBAPP_URL } from "@calcom/lib/constants";
 import { getPlaceholderAvatar } from "@calcom/lib/getPlaceholderAvatar";
 import { useLocale } from "@calcom/lib/hooks/useLocale";

packages/features/ee/workflows/components/DeleteDialog.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction } from "react";
+import type { Dispatch, SetStateAction } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
@@ -30,6 +30,10 @@ export const DeleteDialog = (props: IDeleteDialog) => {
  showToast(message, "error");
  setIsOpenDialog(false);
  }
+ if (err.data?.code === "UNAUTHORIZED") {
+ const message = `${err.data.code}: You are not authorized to delete this workflow`;
+ showToast(message, "error");
+ }
  },
  });
 

packages/features/ee/workflows/components/EmptyScreen.tsx

@@ -1,9 +1,11 @@
-import React from "react";
+import { useRouter } from "next/router";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { SVGComponent } from "@calcom/types/SVGComponent";
-import { Button } from "@calcom/ui";
-import { FiSmartphone, FiMail, FiPlus } from "@calcom/ui/components/icon";
+import { HttpError } from "@calcom/lib/http-error";
+import { trpc } from "@calcom/trpc/react";
+import type { SVGComponent } from "@calcom/types/SVGComponent";
+import { CreateButton, showToast, EmptyScreen as ClassicEmptyScreen } from "@calcom/ui";
+import { FiSmartphone, FiMail, FiZap } from "@calcom/ui/components/icon";
 
 type WorkflowExampleType = {
  Icon: SVGComponent;
@@ -31,24 +33,33 @@ function WorkflowExample(props: WorkflowExampleType) {
  );
 }
 
-export default function EmptyScreen({
- IconHeading,
- headline,
- description,
- buttonText,
- buttonOnClick,
- isLoading,
- showExampleWorkflows,
-}: {
- IconHeading: SVGComponent;
- headline: string;
- description: string | React.ReactElement;
- buttonText?: string;
- buttonOnClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
- isLoading: boolean;
- showExampleWorkflows: boolean;
+export default function EmptyScreen(props: {
+ profileOptions: {
+ label: string | null;
+ image?: string | null;
+ teamId: number | null | undefined;
+ }[];
+ isFilteredView: boolean;
 }) {
  const { t } = useLocale();
+ const router = useRouter();
+
+ const createMutation = trpc.viewer.workflows.create.useMutation({
+ onSuccess: async ({ workflow }) => {
+ await router.replace("/workflows/" + workflow.id);
+ },
+ onError: (err) => {
+ if (err instanceof HttpError) {
+ const message = `${err.statusCode}: ${err.message}`;
+ showToast(message, "error");
+ }
+
+ if (err.data?.code === "UNAUTHORIZED") {
+ const message = `${err.data.code}: You are not authorized to create this workflow`;
+ showToast(message, "error");
+ }
+ },
+ });
 
  const workflowsExamples = [
  { icon: FiSmartphone, text: t("workflow_example_1") },
@@ -60,38 +71,39 @@ export default function EmptyScreen({
  ];
  // new workflow example when 'after meetings ends' trigger is implemented: Send custom thank you email to attendee after event (FiSmile icon),
 
+ if (props.isFilteredView) {
+ return <ClassicEmptyScreen Icon={FiZap} headline={t("no_workflows")} description={t("change_filter")} />;
+ }
+
  return (
  <>
  <div className="min-h-80 flex w-full flex-col items-center justify-center rounded-md ">
  <div className="flex h-[72px] w-[72px] items-center justify-center rounded-full bg-gray-200 dark:bg-white">
- <IconHeading className="inline-block h-10 w-10 stroke-[1.3px] dark:bg-gray-900 dark:text-gray-600" />
+ <FiZap className="inline-block h-10 w-10 stroke-[1.3px] dark:bg-gray-900 dark:text-gray-600" />
  </div>
  <div className="max-w-[420px] text-center">
- <h2 className="text-semibold font-cal mt-6 text-xl dark:text-gray-300">{headline}</h2>
+ <h2 className="text-semibold font-cal mt-6 text-xl dark:text-gray-300">{t("workflows")}</h2>
  <p className="line-clamp-2 mt-3 text-sm font-normal leading-6 text-gray-700 dark:text-gray-300">
- {description}
+ {t("no_workflows_description")}
  </p>
- {buttonOnClick && buttonText && (
- <Button
- type="button"
- StartIcon={FiPlus}
- onClick={(e) => buttonOnClick(e)}
- loading={isLoading}
- className="mx-auto mt-8">
- {buttonText}
- </Button>
- )}
+ <div className="mt-8 ">
+ <CreateButton
+ subtitle={t("new_workflow_subtitle").toUpperCase()}
+ options={props.profileOptions}
+ createFunction={(teamId?: number) => createMutation.mutate({ teamId })}
+ buttonText={t("create_workflow")}
+ isLoading={createMutation.isLoading}
+ />
+ </div>
  </div>
  </div>
- {showExampleWorkflows && (
- <div className="flex flex-row items-center justify-center">
- <div className="grid-cols-none items-center lg:grid lg:grid-cols-3 xl:mx-20">
- {workflowsExamples.map((example, index) => (
- <WorkflowExample key={index} Icon={example.icon} text={example.text} />
- ))}
- </div>
+ <div className="flex flex-row items-center justify-center">
+ <div className="grid-cols-none items-center lg:grid lg:grid-cols-3 xl:mx-20">
+ {workflowsExamples.map((example, index) => (
+ <WorkflowExample key={index} Icon={example.icon} text={example.text} />
+ ))}
  </div>
- )}
+ </div>
  </>
  );
 }

packages/features/ee/workflows/components/EventWorkflowsTab.tsx

@@ -13,7 +13,7 @@ import { FiExternalLink, FiZap } from "@calcom/ui/components/icon";
 import LicenseRequired from "../../common/components/v2/LicenseRequired";
 import { getActionIcon } from "../lib/getActionIcon";
 import SkeletonLoader from "./SkeletonLoaderEventWorkflowsTab";
-import { WorkflowType } from "./WorkflowListPage";
+import type { WorkflowType } from "./WorkflowListPage";
 
 type ItemProps = {
  workflow: WorkflowType;
@@ -65,6 +65,11 @@ const WorkflowListItem = (props: ItemProps) => {
  const message = `${err.statusCode}: ${err.message}`;
  showToast(message, "error");
  }
+ if (err.data?.code === "UNAUTHORIZED") {
+ // TODO: Add missing translation
+ const message = `${err.data.code}: You are not authorized to enable or disable this workflow`;
+ showToast(message, "error");
+ }
  },
  });
 
@@ -148,14 +153,21 @@ type Props = {
  eventType: {
  id: number;
  title: string;
+ userId: number | null;
+ team: {
+ id?: number;
+ } | null;
  };
  workflows: WorkflowType[];
 };
 
 function EventWorkflowsTab(props: Props) {
- const { workflows } = props;
+ const { workflows, eventType } = props;
  const { t } = useLocale();
- const { data, isLoading } = trpc.viewer.workflows.list.useQuery();
+ const { data, isLoading } = trpc.viewer.workflows.list.useQuery({
+ teamId: eventType.team?.id,
+ userId: eventType.userId || undefined,
+ });
  const router = useRouter();
  const [sortedWorkflows, setSortedWorkflows] = useState<Array<WorkflowType>>([]);
 
@@ -176,7 +188,7 @@ function EventWorkflowsTab(props: Props) {
  }
  }, [isLoading]);
 
- const createMutation = trpc.viewer.workflows.createV2.useMutation({
+ const createMutation = trpc.viewer.workflows.create.useMutation({
  onSuccess: async ({ workflow }) => {
  await router.replace("/workflows/" + workflow.id);
  },
@@ -212,7 +224,7 @@ function EventWorkflowsTab(props: Props) {
  <Button
  target="_blank"
  color="secondary"
- onClick={() => createMutation.mutate()}
+ onClick={() => createMutation.mutate({ teamId: eventType.team?.id })}
  loading={createMutation.isLoading}>
  {t("create_workflow")}
  </Button>