V2 Workflows (#4047)

* Fix breadcrumb colors

* HorizontalTabs

* Team List Item WIP

* Horizontal Tabs

* Cards

* Remove team list item WIP

* Login Page

* Add welcome back i118n

* EventType page work

* Update EventType Icons

* WIP Availability

* Horizontal Tab Work

* Add build command for in root

* Update build DIr/command

* Add Edit Button + change buttons to v2

* Availablitiy page

* Fix IPAD

* Make mobile look a little nicer

* WIP bookingshell

* Remove list items from breaking build

* Mian bulk of Booking Page.

* Few updates to components

* Fix chormatic feedback

* Fix banner

* Fix Empty Screen

* Text area + embded window fixes

* Semi fix avatar

* Troubleshoot container + Active on count

* Improve mobile

* NITS

* Fix padding on input

* Fix icons

* Starting to move event types settings to tabs

* Begin migration to single page form

* Single page tabs

* Limits Page

* Advanced tab

* Add RHF to dependancies

* Most of advanced tab

* Solved RHF mismtach

* Build fixes

* RHF conditionals fixes

* Improved legibility

* Major refactor/organisation into optional V2 UI

* Portal EditLocationModal

* Fix dialoug form

* Update imports

* Auto Animate + custom inputs WIP

* Custom Inputs

* WIP Apps

* Fixing stories imports

* Stripe app

* Remove duplicate dialog

* Remove duplicate dialog

* add Test action button + UI improvements

* add test action functionality

* Fix embed URL

* Fix app toggles + number of active apps

* Fix container padding on disabledBorder prop

* Removes strict

* add confirmation dialog before sending SMS

* code clean up

* show error message if test action fails

* disable test action button in edit mode

* fixes SMS testing

* use updated values

* fix wrongly updated data in useEffect

* fix typo

* code clean up

* EventType Team page WIP

* Fix embed

* NIT

* Add Darkmode gray color

* V2 Shell WIP

* setup folders for v2

* add lost translations from merge

* add all files to v2 + redesign /workflows

* use custom template as default template

* add first version of v2 for workflow editing page

* Fix headings on shell V2

* Fix mobile layout with V2 shell

* V2 create event type button

* Checked Team Select

* Hidden to happen on save - not on toggle

* Team Attendee Select animation

* Fix scheduling type and remove multi select label

* Fix overflow on teams url

* use fi icon for down arrow

* add v2 shell

* add trigger badge

* Even Type move order handles

* fix save button

* enable editing of workflow name

* improve delete workflow functionality

* adjust empty screen

* make trigger start with uppercase

* change trash icon

* Fix Embed TS errors

* Fix TS errors

* Fix Eslint errors

* Fix TS errors for UI

* Fix ESLINT error

* create component for time and timeUnit input/dropdown

* add workflows to v2 early access middleware

* fix type issues

* added SidebarCard for promo to v2 and storybook (#3906)

Co-authored-by: Julian Benegas <julianbenegas99@gmail.com>
Co-authored-by: Alan <alannnc@gmail.com>
Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>

* Tooltip Provider - Wrapper due to dep upgrade

* public event type list darkmode

* V2 Color changes to public booking

* adjust delete and edit button

* create custom empty screen for worklows

* add workflow examples to empty page

* add loading state to button when creating first workflow

* Show action as workflow name when no name exists

* if no input leave name empty when updating workflow

* use reminder template when creating workflow

* improve time unit dropdown

* Remove unused component

* Fix typecheck

* add loading state to new workflow button

* add label before action dropdown

* fixing badges in worflow list

* use lighter color for untitled workflows

* fix not showing nr of active eventtypes in workflow list

* add workflows to event types

* implement v2 desing for AddActionDialog

* improve phone input

* rounded borders for phoneInput in add action dialog

* improve message input

* fix mobile view for editing page

* use md breakpoint for mobile view

* finish workflows in event type settings

* code cleanup

* code cleanup

* fix bug in testing workflow action

* add v2 design for addition inputs as variables dialog

* add V2 design for add variable dropdown

* add notification icons to trigger badge

* improve mobile version of workflows in eventtypes

* remove ring from time before input

* fix bug when workflow has no steps

* Final UI improvements/fixes

* code clean-up

* code clean-up

* code clean-up

* use v2 design for license required

* fix translation issues

* fix adding variables in different language in old design

* limit for pro users only for now

* fix import

* fix mobile view for empty screen

* ues destructive button color for deleting workfow

* remove padding at button of creation dialog

* V2 Settings - Security View (#4018)

* Create change password screen

* Add two factor auth screen

* Add two factor auth screen

* Remove header file

* Updates middleware and rewrites

* Adds Meta component to handle layout headings/metadata (#4021)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: zomars <zomars@me.com>

* fix: rate limit auth (#3820)

* fix: rate limit auth

* fix: replace lru-cache w memory-cache

* remove comments

* fix: yarn.lock

* fix: remove changes yarn lock

* fix: add missing EOL empty liune

* fix: move rate limiter so it kicks the last, limit to 10 tries per minute

* fix: move limiter w rest of code

* test: trying fix onboardong

* fix: undo changes in globalSetup.ts

* test: fix disable login for onboarding

* fix: use username instead of email for token check

* fix: tests

* fix: don't run on test

* fix: add missing comma

* fix: remove uniqueTokenPerInterval

* fix: add errorcode to packages lib auth

* Update packages/lib/rateLimit.ts

fix: improve readability

Co-authored-by: Omar López <zomars@me.com>

* Update packages/lib/rateLimit.ts

fix: no unnecessary any

Co-authored-by: Omar López <zomars@me.com>

* Update packages/lib/rateLimit.ts

fix: improve readability

Co-authored-by: Omar López <zomars@me.com>

* fix: rename interval -> intervalInMs

* fix: check user.email not username which could be empty

* fix: rateLimit update all naming

Co-authored-by: Agusti Fernandez Pardo <git@agusti.me>
Co-authored-by: Omar López <zomars@me.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>

* Adds deprecation comments

Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: zomars <zomars@me.com>
Co-authored-by: CarinaWolli <wollencarina@gmail.com>
Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>
Co-authored-by: Julian Benegas <julianbenegas99@gmail.com>
Co-authored-by: Alan <alannnc@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>
Co-authored-by: Agusti Fernandez Pardo <6601142+agustif@users.noreply.github.com>
Co-authored-by: Agusti Fernandez Pardo <git@agusti.me>

apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx

@@ -38,6 +38,7 @@ type Props = {
   team: EventTypeSetupInfered["team"];
   disableBorder?: boolean;
   enabledAppsNumber: number;
+  enabledWorkflowsNumber: number;
   formMethods: UseFormReturn<FormValues>;
 };
 
@@ -48,6 +49,7 @@ function EventTypeSingleLayout({
   team,
   disableBorder,
   enabledAppsNumber,
+  enabledWorkflowsNumber,
   formMethods,
 }: Props) {
   const utils = trpc.useContext();
@@ -113,13 +115,12 @@ function EventTypeSingleLayout({
         icon: Icon.FiGrid,
         info: `${enabledAppsNumber} Active`,
       },
-      // TODO: After V2 workflow page has been completed
-      // {
-      //   name: "workflows",
-      //   tabName: "workflows",
-      //   icon: Icon.FiCloudLightning,
-      //   info: `X Active`,
-      // },
+      {
+        name: "workflows",
+        tabName: "workflows",
+        icon: Icon.FiZap,
+        info: `${enabledWorkflowsNumber} Active`,
+      },
     ] as VerticalTabItemProps[];
 
     // If there is a team put this navigation item within the tabs
@@ -155,7 +156,7 @@ function EventTypeSingleLayout({
       heading={eventType.title}
       subtitle={eventType.description || ""}
       CTA={
-        <div className="flex  items-center justify-end">
+        <div className="flex items-center justify-end">
           <div className="hidden lg:flex lg:items-center">
             <p className="pr-2">{t("hide_from_profile")}</p>
             <Switch

apps/web/components/v2/eventtype/EventWorkfowsTab.tsx

@@ -0,0 +1 @@
+export { default } from "@calcom/features/ee/workflows/components/v2/EventWorkflowsTab";

apps/web/middleware.ts

@@ -12,6 +12,7 @@ const V2_WHITELIST = [
   "/availability",
   "/bookings",
   "/event-types",
+  "/workflows",
   // Apps contains trailing slash to prevent app overview from being rendered as v2,
   // since it doesn't exist yet.
   "/apps/",

apps/web/pages/v2/event-types/[type]/index.tsx

@@ -31,6 +31,7 @@ import { EventRecurringTab } from "@components/v2/eventtype/EventRecurringTab";
 import { EventSetupTab } from "@components/v2/eventtype/EventSetupTab";
 import { EventTeamTab } from "@components/v2/eventtype/EventTeamTab";
 import { EventTypeSingleLayout } from "@components/v2/eventtype/EventTypeSingleLayout";
+import EventWorkflowsTab from "@components/v2/eventtype/EventWorkfowsTab";
 
 import { getTranslation } from "@server/lib/i18n";
 
@@ -81,7 +82,7 @@ export type FormValues = {
 
 const querySchema = z.object({
   tabName: z
-    .enum(["setup", "availability", "apps", "limits", "recurring", "team", "advanced"])
+    .enum(["setup", "availability", "apps", "limits", "recurring", "team", "advanced", "workflows"])
     .optional()
     .default("setup"),
 });
@@ -178,15 +179,22 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
         hasGiphyIntegration={props.hasGiphyIntegration}
       />
     ),
+    workflows: (
+      <EventWorkflowsTab
+        eventType={eventType}
+        workflows={eventType.workflows.map((workflowOnEventType) => workflowOnEventType.workflow)}
+      />
+    ),
   } as const;
 
   return (
     <EventTypeSingleLayout
       enabledAppsNumber={[props.hasGiphyIntegration, props.hasPaymentIntegration].filter(Boolean).length}
+      enabledWorkflowsNumber={eventType.workflows.length}
       eventType={eventType}
       team={team}
       formMethods={formMethods}
-      disableBorder={tabName === "apps"}
+      disableBorder={tabName === "apps" || tabName === "workflows"}
       currentUserMembership={props.currentUserMembership}>
       <Form
         form={formMethods}
@@ -224,6 +232,16 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
         }}
         className="space-y-6">
         {tabMap[tabName]}
+        {tabName !== "workflows" && (
+          <div className="mt-4 flex justify-end space-x-2 rtl:space-x-reverse">
+            <Button href="/event-types" color="secondary" tabIndex={-1}>
+              {t("cancel")}
+            </Button>
+            <Button type="submit" data-testid="update-eventtype" disabled={updateMutation.isLoading}>
+              {t("update")}
+            </Button>
+          </div>
+        )}
       </Form>
     </EventTypeSingleLayout>
   );
@@ -349,6 +367,25 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       currency: true,
       destinationCalendar: true,
       seatsPerTimeSlot: true,
+      workflows: {
+        include: {
+          workflow: {
+            include: {
+              activeOn: {
+                select: {
+                  eventType: {
+                    select: {
+                      id: true,
+                      title: true,
+                    },
+                  },
+                },
+              },
+              steps: true,
+            },
+          },
+        },
+      },
     },
   });
 

apps/web/pages/v2/workflows/[workflow].tsx

@@ -0,0 +1,28 @@
+import { GetStaticPaths, GetStaticProps } from "next";
+import { z } from "zod";
+
+export { default } from "@calcom/features/ee/workflows/pages/v2/workflow";
+
+const querySchema = z.object({
+  workflow: z.string(),
+});
+
+export const getStaticProps: GetStaticProps = (ctx) => {
+  const params = querySchema.safeParse(ctx.params);
+  console.log("Built workflow page:", params);
+  if (!params.success) return { notFound: true };
+
+  return {
+    props: {
+      workflow: params.data.workflow,
+    },
+    revalidate: 10, // seconds
+  };
+};
+
+export const getStaticPaths: GetStaticPaths = () => {
+  return {
+    paths: [],
+    fallback: "blocking",
+  };
+};

apps/web/pages/v2/workflows/index.tsx

@@ -0,0 +1 @@
+export { default } from "@calcom/features/ee/workflows/pages/v2/index";

apps/web/pages/workflows/[workflow].tsx

@@ -1,3 +1,8 @@
+/**
+ * @deprecated file
+ * All new changes should be made to the V2 file in
+ * `apps/web/pages/v2/workflows/[workflow].tsx`
+ */
 import { GetStaticPaths, GetStaticProps } from "next";
 import { z } from "zod";
 

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

@@ -969,8 +969,8 @@
   "web_conference": "Webkonferenz",
   "number_for_sms_reminders": "Telefonnummer (für SMS-Erinnerungen)",
   "requires_confirmation": "Erfordert Bestätigung",
-  "nr_event_type_one": "{{count}} | Termin-Typ",
-  "nr_event_type_other": "{{count}} | Ereignis-Typen",
+  "nr_event_type_one": "{{count}} Ereignistyp",
+  "nr_event_type_other": "{{count}} Ereignistypen",
   "add_action": "Aktion hinzufügen",
   "set_whereby_link": "Whereby Link festlegen",
   "invalid_whereby_link": "Bitte geben Sie einen gültigen Whereby Link ein",
@@ -1010,8 +1010,8 @@
   "new_seat_title": "Jemand hat sich zu einem Ereignis hinzugefügt",
   "variable": "Variable",
   "event_name_workflow": "Event Name",
-  "organizer_name_workflow": "Organisator Name",
-  "attendee_name_workflow": "Teilnehmer Name",
+  "organizer_name_workflow": "Organisator",
+  "attendee_name_workflow": "Teilnehmer",
   "event_date_workflow": "Event Datum",
   "event_time_workflow": "Event Zeit",
   "location_workflow": "Ort",

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

@@ -941,7 +941,7 @@
   "sms_attendee_action": "send SMS to attendee",
   "sms_number_action": "send SMS to a specific number",
   "workflows": "Workflows",
-  "new_workflow_btn": "New workflow",
+  "new_workflow_btn": "New Workflow",
   "add_new_workflow": "Add a new workflow",
   "trigger": "Trigger",
   "triggers": "Triggers",
@@ -955,9 +955,9 @@
   "confirm_delete_workflow": "Yes, delete workflow",
   "workflow_deleted_successfully": "Workflow deleted successfully",
   "how_long_before": "How long before event starts?",
-  "day_timeUnit": "Days",
-  "hour_timeUnit": "Hours",
-  "minute_timeUnit": "Minutes",
+  "day_timeUnit": "days",
+  "hour_timeUnit": "hours",
+  "minute_timeUnit": "mins",
   "new_workflow_heading": "Create your first workflow",
   "new_workflow_description": "Workflows enable you to automate sending reminders and notifications.",
   "active_on": "Active on",
@@ -978,8 +978,8 @@
   "web_conference": "Web conference",
   "number_for_sms_reminders": "Phone number (for SMS reminders)",
   "requires_confirmation": "Requires confirmation",
-  "nr_event_type_one": "{{count}} Event Type",
-  "nr_event_type_other": "{{count}} Event Types",
+  "nr_event_type_one": "{{count}} event type",
+  "nr_event_type_other": "{{count}} event types",
   "add_action": "Add action",
   "set_whereby_link": "Set Whereby link",
   "invalid_whereby_link": "Please enter a valid Whereby Link",
@@ -991,7 +991,7 @@
   "add_exchange2013": "Connect Exchange 2013 Server",
   "add_exchange2016": "Connect Exchange 2016 Server",
   "custom_template": "Custom template",
-  "email_body": "Body",
+  "email_body": "Email body",
   "subject": "Subject",
   "text_message": "Text message",
   "specific_issue": "Have a specific issue?",
@@ -1019,8 +1019,8 @@
   "new_seat_title": "Someone has added themselves to an event",
   "variable": "Variable",
   "event_name_workflow": "Event name",
-  "organizer_name_workflow": "Organizer name",
-  "attendee_name_workflow": "Attendee name",
+  "organizer_name_workflow": "Organizer",
+  "attendee_name_workflow": "Attendee",
   "event_date_workflow": "Event date",
   "event_time_workflow": "Event time",
   "location_workflow": "Location",
@@ -1038,13 +1038,13 @@
   "current_username": "Current username",
   "example_1": "Example 1",
   "example_2": "Example 2",
-  "additional_input_label": "Additional input label",
+  "additional_input_label": "Additional Input Label",
   "company_size": "Company size",
   "what_help_needed": "What do you need help with?",
   "variable_format": "Variable format",
   "webhook_subscriber_url_reserved": "Webhook subscriber url is already defined",
   "custom_input_as_variable_info": "Ignore all special characters of the additional input label (use only letters and numbers), use uppercase for all letters and replace whitespaces with underscores.",
-  "using_additional_inputs_as_variables": "How to use additional inputs as variables?",
+  "using_additional_inputs_as_variables": "How do I use Additional Inputs as variables?",
   "download_desktop_app": "Download desktop app",
   "set_ping_link": "Set Ping link",
   "rate_limit_exceeded": "Rate limit exceeded",
@@ -1068,6 +1068,11 @@
   "select_which_cal":"Select which calendar to add bookings to",
   "custom_event_name":"Custom event name",
   "custom_event_name_description":"Create customised event names to display on calendar event",
+  "which_event_type_apply": "Which event type will this apply to?",
+  "no_workflows_description": "Workflows enable simple automation to send notifications & reminders enabling you to build processes around your events.",
+  "create_workflow": "Create a workflow",
+  "do_this": "Do this",
+  "turn_off": "Turn off",
   "settings_updated_successfully": "Settings updated successfully",
   "error_updating_settings":"Error updating settings",
   "personal_cal_url": "My personal Cal URL",

packages/features/ee/common/components/LicenseRequired.tsx

@@ -1,3 +1,8 @@
+/**
+ * @deprecated file
+ * All new changes should be made to the V2 file in
+ * `/packages/features/ee/common/components/v2/LicenseRequired.tsx`
+ */
 import { useSession } from "next-auth/react";
 import React, { AriaRole, ComponentType, Fragment } from "react";
 
@@ -13,6 +18,9 @@ type LicenseRequiredProps = {
 };
 
 /**
+ * @deprecated file
+ * All new changes should be made to the V2 file in
+ * `/packages/features/ee/common/components/v2/LicenseRequired.tsx`
  * This component will only render it's children if the installation has a valid
  * license.
  */

packages/features/ee/common/components/v2/LicenseRequired.tsx

@@ -0,0 +1,60 @@
+import { useSession } from "next-auth/react";
+import React, { AriaRole, ComponentType, Fragment } from "react";
+
+import { CONSOLE_URL } from "@calcom/lib/constants";
+import { Icon } from "@calcom/ui/Icon";
+import { EmptyScreen } from "@calcom/ui/v2";
+
+type LicenseRequiredProps = {
+  as?: keyof JSX.IntrinsicElements | "";
+  className?: string;
+  role?: AriaRole | undefined;
+  children: React.ReactNode;
+};
+
+/**
+ * This component will only render it's children if the installation has a valid
+ * license.
+ */
+const LicenseRequired = ({ children, as = "", ...rest }: LicenseRequiredProps) => {
+  const session = useSession();
+  const Component = as || Fragment;
+  return (
+    <Component {...rest}>
+      {session.data?.hasValidLicense ? (
+        children
+      ) : (
+        <EmptyScreen
+          Icon={Icon.FiAlertTriangle}
+          headline="This is an enterprise feature"
+          description={
+            <>
+              To enable this feature, get a deployment key at{" "}
+              <a href={CONSOLE_URL} target="_blank" rel="noopener noreferrer" className="underline">
+                Cal.com console
+              </a>{" "}
+              and add it to your .env as <code>CALCOM_LICENSE_KEY</code>. If your team already has a license,
+              please contact{" "}
+              <a href="mailto:peer@cal.com" className="underline">
+                peer@cal.com
+              </a>{" "}
+              for help.
+            </>
+          }
+        />
+      )}
+    </Component>
+  );
+};
+
+export const withLicenseRequired =
+  <T,>(Component: ComponentType<T>) =>
+  // eslint-disable-next-line react/display-name
+  (hocProps: T) =>
+    (
+      <LicenseRequired>
+        <Component {...hocProps} />
+      </LicenseRequired>
+    );
+
+export default LicenseRequired;

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

@@ -1,3 +1,8 @@
+/**
+ * @deprecated file
+ * All new changes should be made to the V2 file in
+ * `/packages/features/ee/workflows/components/v2/AddActionDialog.tsx`
+ */
 import { zodResolver } from "@hookform/resolvers/zod";
 import { WorkflowActions } from "@prisma/client";
 import { isValidPhoneNumber } from "libphonenumber-js";
@@ -26,6 +31,11 @@ type AddActionFormValues = {
   sendTo?: string;
 };
 
+/**
+ * @deprecated file
+ * All new changes should be made to the V2 file in
+ * `/packages/features/ee/workflows/components/v2/AddActionDialog.tsx`
+ */
 export const AddActionDialog = (props: IAddActionDialog) => {
   const { t } = useLocale();
   const { isOpenDialog, setIsOpenDialog, addAction } = props;