From eeabb53c826413aca41a1cd9f4f6abb299957389 Mon Sep 17 00:00:00 2001 From: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com> Date: Wed, 31 Aug 2022 15:42:37 -0400 Subject: [PATCH] V2 Workflows (#4047) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 Co-authored-by: Alan 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 * 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 * Update packages/lib/rateLimit.ts fix: no unnecessary any Co-authored-by: Omar López * Update packages/lib/rateLimit.ts fix: improve readability Co-authored-by: Omar López * 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 Co-authored-by: Omar López Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Peer Richelsen * Adds deprecation comments Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Co-authored-by: Peer Richelsen Co-authored-by: zomars Co-authored-by: CarinaWolli Co-authored-by: Hariom Balhara Co-authored-by: Julian Benegas Co-authored-by: Alan 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 --- .../v2/eventtype/EventTypeSingleLayout.tsx | 17 +- .../v2/eventtype/EventWorkfowsTab.tsx | 1 + apps/web/middleware.ts | 1 + .../web/pages/v2/event-types/[type]/index.tsx | 41 +- apps/web/pages/v2/workflows/[workflow].tsx | 28 + apps/web/pages/v2/workflows/index.tsx | 1 + apps/web/pages/workflows/[workflow].tsx | 5 + apps/web/public/static/locales/de/common.json | 8 +- apps/web/public/static/locales/en/common.json | 27 +- .../ee/common/components/LicenseRequired.tsx | 8 + .../common/components/v2/LicenseRequired.tsx | 60 ++ .../workflows/components/AddActionDialog.tsx | 10 + .../components/AddVariablesDropdown.tsx | 12 +- .../workflows/components/WorkflowListPage.tsx | 9 +- .../components/v2/AddActionDialog.tsx | 147 +++++ .../components/v2/AddVariablesDropdown.tsx | 59 ++ .../workflows/components/v2/DeleteDialog.tsx | 54 ++ .../workflows/components/v2/EmptyScreen.tsx | 92 +++ .../components/v2/EventWorkflowsTab.tsx | 203 +++++++ .../components/v2/TimeTimeUnitInput.tsx | 74 +++ .../components/v2/WorkflowDetailsPage.tsx | 162 ++++++ .../components/v2/WorkflowListPage.tsx | 187 ++++++ .../components/v2/WorkflowStepContainer.tsx | 548 ++++++++++++++++++ .../ee/workflows/lib/getActionIcon.tsx | 86 +++ .../features/ee/workflows/lib/getOptions.ts | 4 +- .../lib/reminders/templates/customTemplate.ts | 6 +- .../ee/workflows/lib/variableTranslations.ts | 19 +- .../features/ee/workflows/pages/v2/index.tsx | 79 +++ .../ee/workflows/pages/v2/workflow.tsx | 240 ++++++++ .../trpc/server/routers/viewer/workflows.tsx | 82 ++- packages/ui/ConfirmationDialogContent.tsx | 10 + packages/ui/form/MultiSelectCheckboxes.tsx | 10 + packages/ui/form/PhoneInput.tsx | 4 +- .../ui/v2/core/ConfirmationDialogContent.tsx | 76 +++ packages/ui/v2/core/Dialog.tsx | 4 +- packages/ui/v2/core/EmptyScreen.tsx | 4 +- .../ui/v2/core/form/MultiSelectCheckboxes.tsx | 105 ++++ 37 files changed, 2433 insertions(+), 50 deletions(-) create mode 100644 apps/web/components/v2/eventtype/EventWorkfowsTab.tsx create mode 100644 apps/web/pages/v2/workflows/[workflow].tsx create mode 100644 apps/web/pages/v2/workflows/index.tsx create mode 100644 packages/features/ee/common/components/v2/LicenseRequired.tsx create mode 100644 packages/features/ee/workflows/components/v2/AddActionDialog.tsx create mode 100644 packages/features/ee/workflows/components/v2/AddVariablesDropdown.tsx create mode 100644 packages/features/ee/workflows/components/v2/DeleteDialog.tsx create mode 100644 packages/features/ee/workflows/components/v2/EmptyScreen.tsx create mode 100644 packages/features/ee/workflows/components/v2/EventWorkflowsTab.tsx create mode 100644 packages/features/ee/workflows/components/v2/TimeTimeUnitInput.tsx create mode 100644 packages/features/ee/workflows/components/v2/WorkflowDetailsPage.tsx create mode 100644 packages/features/ee/workflows/components/v2/WorkflowListPage.tsx create mode 100644 packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx create mode 100644 packages/features/ee/workflows/lib/getActionIcon.tsx create mode 100644 packages/features/ee/workflows/pages/v2/index.tsx create mode 100644 packages/features/ee/workflows/pages/v2/workflow.tsx create mode 100644 packages/ui/v2/core/ConfirmationDialogContent.tsx create mode 100644 packages/ui/v2/core/form/MultiSelectCheckboxes.tsx diff --git a/apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx b/apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx index abb81cf93d..1859b2d93f 100644 --- a/apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx +++ b/apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx @@ -38,6 +38,7 @@ type Props = { team: EventTypeSetupInfered["team"]; disableBorder?: boolean; enabledAppsNumber: number; + enabledWorkflowsNumber: number; formMethods: UseFormReturn; }; @@ -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={ -
+

{t("hide_from_profile")}

) => { hasGiphyIntegration={props.hasGiphyIntegration} /> ), + workflows: ( + workflowOnEventType.workflow)} + /> + ), } as const; return (
) => { }} className="space-y-6"> {tabMap[tabName]} + {tabName !== "workflows" && ( +
+ + +
+ )}
); @@ -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, + }, + }, + }, + }, }, }); diff --git a/apps/web/pages/v2/workflows/[workflow].tsx b/apps/web/pages/v2/workflows/[workflow].tsx new file mode 100644 index 0000000000..44d7bdeae3 --- /dev/null +++ b/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", + }; +}; diff --git a/apps/web/pages/v2/workflows/index.tsx b/apps/web/pages/v2/workflows/index.tsx new file mode 100644 index 0000000000..740b209b29 --- /dev/null +++ b/apps/web/pages/v2/workflows/index.tsx @@ -0,0 +1 @@ +export { default } from "@calcom/features/ee/workflows/pages/v2/index"; diff --git a/apps/web/pages/workflows/[workflow].tsx b/apps/web/pages/workflows/[workflow].tsx index 02cf9fa15b..8bd2c2363f 100644 --- a/apps/web/pages/workflows/[workflow].tsx +++ b/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"; diff --git a/apps/web/public/static/locales/de/common.json b/apps/web/public/static/locales/de/common.json index d5de56f999..bae68c2395 100644 --- a/apps/web/public/static/locales/de/common.json +++ b/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", diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json index 6d5698d71b..dbbbef9ddf 100644 --- a/apps/web/public/static/locales/en/common.json +++ b/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", diff --git a/packages/features/ee/common/components/LicenseRequired.tsx b/packages/features/ee/common/components/LicenseRequired.tsx index 7ed265a930..1ab43ce8a3 100644 --- a/packages/features/ee/common/components/LicenseRequired.tsx +++ b/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. */ diff --git a/packages/features/ee/common/components/v2/LicenseRequired.tsx b/packages/features/ee/common/components/v2/LicenseRequired.tsx new file mode 100644 index 0000000000..a453de04ea --- /dev/null +++ b/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 ( + + {session.data?.hasValidLicense ? ( + children + ) : ( + + To enable this feature, get a deployment key at{" "} + + Cal.com console + {" "} + and add it to your .env as CALCOM_LICENSE_KEY. If your team already has a license, + please contact{" "} + + peer@cal.com + {" "} + for help. + + } + /> + )} + + ); +}; + +export const withLicenseRequired = + (Component: ComponentType) => + // eslint-disable-next-line react/display-name + (hocProps: T) => + ( + + + + ); + +export default LicenseRequired; diff --git a/packages/features/ee/workflows/components/AddActionDialog.tsx b/packages/features/ee/workflows/components/AddActionDialog.tsx index ef184cf0b4..6ba545eef2 100644 --- a/packages/features/ee/workflows/components/AddActionDialog.tsx +++ b/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; diff --git a/packages/features/ee/workflows/components/AddVariablesDropdown.tsx b/packages/features/ee/workflows/components/AddVariablesDropdown.tsx index 0866becfe9..3200529a43 100644 --- a/packages/features/ee/workflows/components/AddVariablesDropdown.tsx +++ b/packages/features/ee/workflows/components/AddVariablesDropdown.tsx @@ -1,3 +1,8 @@ +/** + * @deprecated file + * All new changes should be made to the V2 file in + * `/packages/features/ee/workflows/components/v2/AddVariablesDropdown.tsx` + */ import classNames from "@calcom/lib/classNames"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown"; @@ -18,6 +23,11 @@ const variables = [ "additional_notes", ]; +/** + * @deprecated file + * All new changes should be made to the V2 file in + * `/packages/features/ee/workflows/components/v2/AddVariablesDropdown.tsx` + */ export const AddVariablesDropdown = (props: IAddVariablesDropdown) => { const { t } = useLocale(); @@ -38,7 +48,7 @@ export const AddVariablesDropdown = (props: IAddVariablesDropdown) => { key={variable} type="button" className="px-5 py-1" - onClick={() => props.addVariable(props.isEmailSubject, variable)}> + onClick={() => props.addVariable(props.isEmailSubject, t(`${variable}_workflow`))}> {t(`${variable}_workflow`)} diff --git a/packages/features/ee/workflows/components/WorkflowListPage.tsx b/packages/features/ee/workflows/components/WorkflowListPage.tsx index e5a1a75170..8b9d791da3 100644 --- a/packages/features/ee/workflows/components/WorkflowListPage.tsx +++ b/packages/features/ee/workflows/components/WorkflowListPage.tsx @@ -4,7 +4,6 @@ import { useState } from "react"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { HttpError } from "@calcom/lib/http-error"; import showToast from "@calcom/lib/notification"; -import { EventType, Workflow, WorkflowsOnEventTypes } from "@calcom/prisma/client"; import { trpc } from "@calcom/trpc/react"; import { Button, Tooltip } from "@calcom/ui"; import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent"; @@ -13,6 +12,8 @@ import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } import EmptyScreen from "@calcom/ui/EmptyScreen"; import { Icon } from "@calcom/ui/Icon"; +import { WorkflowType } from "./v2/WorkflowListPage"; + const CreateFirstWorkflowView = () => { const { t } = useLocale(); @@ -26,11 +27,7 @@ const CreateFirstWorkflowView = () => { }; interface Props { - workflows: - | (Workflow & { - activeOn: (WorkflowsOnEventTypes & { eventType: EventType })[]; - })[] - | undefined; + workflows: WorkflowType[] | undefined; } export default function WorkflowListPage({ workflows }: Props) { const { t } = useLocale(); diff --git a/packages/features/ee/workflows/components/v2/AddActionDialog.tsx b/packages/features/ee/workflows/components/v2/AddActionDialog.tsx new file mode 100644 index 0000000000..10045e3e47 --- /dev/null +++ b/packages/features/ee/workflows/components/v2/AddActionDialog.tsx @@ -0,0 +1,147 @@ +import { zodResolver } from "@hookform/resolvers/zod"; +import { WorkflowActions } from "@prisma/client"; +import { isValidPhoneNumber } from "libphonenumber-js"; +import { Dispatch, SetStateAction, useState } from "react"; +import { Controller, useForm } from "react-hook-form"; +import { z } from "zod"; + +import { useLocale } from "@calcom/lib/hooks/useLocale"; +import PhoneInput from "@calcom/ui/form/PhoneInputLazy"; +import { + Button, + Dialog, + DialogClose, + DialogContent, + DialogFooter, + DialogHeader, + Form, + Select, +} from "@calcom/ui/v2"; + +import { WORKFLOW_ACTIONS } from "../../lib/constants"; +import { getWorkflowActionOptions } from "../../lib/getOptions"; + +interface IAddActionDialog { + isOpenDialog: boolean; + setIsOpenDialog: Dispatch>; + addAction: (action: WorkflowActions, sendTo?: string) => void; +} + +type AddActionFormValues = { + action: WorkflowActions; + sendTo?: string; +}; + +export const AddActionDialog = (props: IAddActionDialog) => { + const { t } = useLocale(); + const { isOpenDialog, setIsOpenDialog, addAction } = props; + const [isPhoneNumberNeeded, setIsPhoneNumberNeeded] = useState(false); + const actionOptions = getWorkflowActionOptions(t); + + const formSchema = z.object({ + action: z.enum(WORKFLOW_ACTIONS), + sendTo: z + .string() + .refine((val) => isValidPhoneNumber(val)) + .optional(), + }); + + const form = useForm({ + mode: "onSubmit", + defaultValues: { + action: WorkflowActions.EMAIL_HOST, + }, + resolver: zodResolver(formSchema), + }); + + return ( + + +
+
+ +
{ + addAction(values.action, values.sendTo); + form.unregister("sendTo"); + form.unregister("action"); + setIsOpenDialog(false); + setIsPhoneNumberNeeded(false); + }}> +
+ + { + return ( + { + if (val) { + form.setValue("trigger", val.value); + if (val.value === WorkflowTriggerEvents.BEFORE_EVENT) { + setShowTimeSection(true); + form.setValue("time", 24); + form.setValue("timeUnit", TimeUnit.HOUR); + } else { + setShowTimeSection(false); + form.unregister("time"); + form.unregister("timeUnit"); + } + } + }} + defaultValue={selectedTrigger} + options={triggerOptions} + /> + ); + }} + /> + {showTimeSection && ( +
+ + +
+ )} +
+
+ + ); + } + + if (step && step.action) { + const selectedAction = { label: t(`${step.action.toLowerCase()}_action`), value: step.action }; + const selectedTemplate = { label: t(`${step.template.toLowerCase()}`), value: step.template }; + + return ( + <> +
+ +
+
+
+
+
+
+
+
+ {step.stepNumber + 1} +
+
+
{t("action")}
+
{t("action_is_performed")}
+
+
+
+
+ + + + + + +
+
+
+
+ + { + return ( + { + if (val) { + form.setValue(`steps.${step.stepNumber - 1}.template`, val.value); + const isCustomTemplate = val.value === WorkflowTemplates.CUSTOM; + setIsCustomReminderBodyNeeded(isCustomTemplate); + } + }} + defaultValue={selectedTemplate} + options={templateOptions} + /> + ); + }} + /> +
+ {isCustomReminderBodyNeeded && ( +
+ {isEmailSubjectNeeded && ( + <> +
+ +
+ +
+
+