From 39199e515ef1cba67658a1e3968f0c1214966494 Mon Sep 17 00:00:00 2001 From: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com> Date: Wed, 13 Jul 2022 20:10:45 -0400 Subject: [PATCH] Workflows (#3236) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * build basic database structure and basic design * create simple workflow list * add editing dots to list * add mutation to create workflows * add createMutation on submit + redirect to editing page * redirect to edit page when clicking on row * add functionality to delete workflow * add timeUnit + input validation * add empty screen view * add time before it triggers to description * add multi select with checkboxes * remove getServerSideProps * set default time period to 24 * fetch eventypes and display in dropdown * add functionality to update workflows + many-to-many relationship * fix all checked event types * add SMS reminders * fix bug with trigger + relocate sms template * clean code * add model for unscheduled reminders * fix selected eventTypes * fixing value to show how many event types selected * fix plural of event types in select * add onDelete cascade for all relations * fix errors * add functionality to send SMS to specific number * fix type error for timeUnit * set default value for time unit + fix type issues * remove console.logs * fix error in checking if scheduled date is more than 1h in advance * fix build errors * add migration for workflows * add basic UI for editing workflow steps * add formSchema * improve functionality to update a step * remove console logs * fix issue with active event types * allow null value for time and timeUnit * sort steps asc step number * add action to workflow (frontend) * add phone number input for SMS to specific number * use PhoneInput for number input + input validation * improve invalid input for phone number * improve UI of phoneInput * Improve design and validation * fix undefined error * set default action when adding action * include all team event types * fix phone number input for editing steps * fix update muation to add steps * remove console logs * fix order of steps * functionality to delete steps * add trigger when event is cancelled * add custom email body * sms and email reminder updates * add custom emails * add custom email subject * send reminder email to all attendees * update migration * fix default value for time and timeUnit * save email reminders to database * clean code * add custom template to SMS actions * schedule emails with sendgrid * clean code * add workflow templates * keep custom template saved when changing templates * create reminder template for email * add dot at the end of sentace for email template * fix merge error * fix issue that template was not saved * include sending emails for when event is cancelled * fix bug that email was always sent * add templates to sms reminders * add info that sending sms to attendees won't trigger for already exisitng bookings * only schedule sms for attendees when smsReminderNumber exists * only schedule sms for attendees when smsReminderNumber exists * set scheduled of workflow reminder to false when longer than 72 hours * add cron for email scheduling + fixes for for sms an email scheduling * adjust step number when deleting a step * cast to boolean with !! * update cron job for email reminders * update sms template * send reminder email not to guests * remove sendTo from workflow reminder * fixes sending sms without name + removing sendTo everywhere * fix undefined name in sms template * set user name to undefined for sending sms to a specific number * fix singular and plural for time unit * set to edit mode when changing action and custom template is selected * delete reminders when booking cancelled or not active anymore * fix type errors * fix error that deleted reminders twice * create booking reminders for existing bookings when eventType is set active * improve email and sms templates * use BookingInfo type instead of calendarEvent for reminder emails * schedule emails for already existing bookings * add and remove reminders for new active event types and cancelled events * connect add action button with last step * fix step container width for mobile view * helper functions that return options for select * fix typo and remove comment * clean code * add/improve error messages for forms * fix typo * clean code * improve email template * clean code * fix missing prop * save reference id when scheduling reminder * fix step not added because of changed id for new steps * small fixes + code cleanup * code cleanup * show error message when number is invalid * fix typo * fix phone number input when location is already phone * set multi select checkbox to read only * change email scheduling in cron job from 7 days to 72 hours * show active event types in workflow list * fix trigger information for workflow list * improve layout for small screens in workflow list * remove optional from zod type for workflow name * order workflows by id * use link icon to show active event types * fix plural and add translation for showing nr of active eventtypes * fix text for sms reminder template * add reminders for added steps * remove optional for activeOn * improve reminder templates * improve design of custom input fields * set edit mode to false when phone number isn't needed anymore * set sendTo in workflow step only for SMS_NUMBER action * set email body and subject only when custom template * only delete reminders that belong to workflow steps * improve text for new event book trigger * move reminders folder to workflows * fix issue that save button was sometimes enabled in edit mode * fix form issues for send to * delete all scheduled reminders when workflow is deleted * use enum for method * fix imports for workflow methods * add missing import * fix edit mode * create reminders when event is confirmed * add reminderScheduler to reduce duplicate code * make workflow enterprise and pro only feature * move all files to /ee/ folder * move package.json change to /ee/ folder * add pro badge to shell * set to edit mode to true if email subject is missing when action changes * fix loading bug * add migration * fix old imports * don't schedule reminders for opt-ins * fix style of email body * code clean up * Update yarn.lock * fix isLoading for active on dropdown * update import for prisma Co-authored-by: Omar López * update imports * remove console * use session to check if user has valid license * use defaultHandler * clean up code * Create db-staging-snapshot.yml * move LisenceRequired inside shell * update import for FormValues * fix phone input design * fix disabled save button for edit mode * squah all migration into a single one * use isAfter and isBefore instead of isBetween * import dayjs from @calcom * validate phone number for sms reminders when booking event * Allows auto approvals for crowdin Co-authored-by: CarinaWolli Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: zomars --- .env.example | 11 + apps/web/components/Shell.tsx | 14 + .../components/booking/pages/BookingPage.tsx | 51 +- .../ui/form/MultiSelectCheckboxes.tsx | 94 +++ .../components/workflows/AddActionDialog.tsx | 140 ++++ .../workflows/NewWorkflowButton.tsx | 254 +++++++ .../workflows/WorkflowDetailsPage.tsx | 192 +++++ .../components/workflows/WorkflowListPage.tsx | 168 +++++ .../workflows/WorkflowStepContainer.tsx | 432 ++++++++++++ apps/web/ee/lib/workflows/constants.ts | 21 + apps/web/ee/lib/workflows/getOptions.ts | 32 + .../reminders/emailReminderManager.ts | 145 ++++ .../workflows/reminders/reminderScheduler.ts | 129 ++++ .../reminders/smsProviders/twilioProvider.ts | 39 ++ .../workflows/reminders/smsReminderManager.ts | 115 +++ .../templates/emailReminderTemplate.ts | 21 + .../templates/smsReminderTemplate.ts | 28 + .../cron/workflows/scheduleEmailReminders.ts | 134 ++++ .../cron/workflows/scheduleSMSReminders.ts | 103 +++ apps/web/ee/pages/workflows/[workflow].tsx | 184 +++++ apps/web/ee/pages/workflows/index.tsx | 51 ++ apps/web/lib/types/booking.ts | 1 + apps/web/pages/api/book/confirm.ts | 16 + apps/web/pages/api/book/event.ts | 18 + apps/web/pages/api/cancel.ts | 53 +- apps/web/pages/team/[slug]/book.tsx | 9 + apps/web/pages/workflows/[workflow].tsx | 1 + apps/web/pages/workflows/index.tsx | 1 + apps/web/public/static/locales/en/common.json | 52 +- apps/web/server/routers/viewer.tsx | 2 + apps/web/server/routers/viewer/workflows.tsx | 661 ++++++++++++++++++ packages/ee/package.json | 5 +- packages/emails/email-manager.ts | 14 +- .../templates/workflow-reminder-email.ts | 46 ++ packages/lib/defaultEvents.ts | 1 + .../migration.sql | 86 +++ packages/prisma/schema.prisma | 109 ++- packages/prisma/selects/event-types.ts | 9 + packages/prisma/zod-utils.ts | 1 + packages/ui/form/fields.tsx | 6 +- yarn.lock | 526 +++++++++++++- 41 files changed, 3943 insertions(+), 32 deletions(-) create mode 100644 apps/web/components/ui/form/MultiSelectCheckboxes.tsx create mode 100644 apps/web/ee/components/workflows/AddActionDialog.tsx create mode 100644 apps/web/ee/components/workflows/NewWorkflowButton.tsx create mode 100644 apps/web/ee/components/workflows/WorkflowDetailsPage.tsx create mode 100644 apps/web/ee/components/workflows/WorkflowListPage.tsx create mode 100644 apps/web/ee/components/workflows/WorkflowStepContainer.tsx create mode 100644 apps/web/ee/lib/workflows/constants.ts create mode 100644 apps/web/ee/lib/workflows/getOptions.ts create mode 100644 apps/web/ee/lib/workflows/reminders/emailReminderManager.ts create mode 100644 apps/web/ee/lib/workflows/reminders/reminderScheduler.ts create mode 100644 apps/web/ee/lib/workflows/reminders/smsProviders/twilioProvider.ts create mode 100644 apps/web/ee/lib/workflows/reminders/smsReminderManager.ts create mode 100644 apps/web/ee/lib/workflows/reminders/templates/emailReminderTemplate.ts create mode 100644 apps/web/ee/lib/workflows/reminders/templates/smsReminderTemplate.ts create mode 100644 apps/web/ee/pages/api/cron/workflows/scheduleEmailReminders.ts create mode 100644 apps/web/ee/pages/api/cron/workflows/scheduleSMSReminders.ts create mode 100644 apps/web/ee/pages/workflows/[workflow].tsx create mode 100644 apps/web/ee/pages/workflows/index.tsx create mode 100644 apps/web/pages/workflows/[workflow].tsx create mode 100644 apps/web/pages/workflows/index.tsx create mode 100644 apps/web/server/routers/viewer/workflows.tsx create mode 100644 packages/emails/templates/workflow-reminder-email.ts create mode 100644 packages/prisma/migrations/20220711182928_add_workflows/migration.sql diff --git a/.env.example b/.env.example index c621143796..d2da9e421c 100644 --- a/.env.example +++ b/.env.example @@ -77,6 +77,17 @@ NEXT_PUBLIC_HELPSCOUT_KEY= # Inbox to send user feedback SEND_FEEDBACK_EMAIL= +# Sengrid +# Used for email reminders in workflows +SENDGRID_API_KEY= +SENDGRID_EMAIL= + +# Twilio +# Used to send SMS reminders in workflows +TWILIO_SID= +TWILIO_TOKEN= +TWILIO_MESSAGING_SID= + # This is used so we can bypass emails in auth flows for E2E testing # Set it to "1" if you need to run E2E tests locally NEXT_PUBLIC_IS_E2E= diff --git a/apps/web/components/Shell.tsx b/apps/web/components/Shell.tsx index aad0dc2603..f0b5234a18 100644 --- a/apps/web/components/Shell.tsx +++ b/apps/web/components/Shell.tsx @@ -11,6 +11,7 @@ import { MoonIcon, ViewGridIcon, QuestionMarkCircleIcon, + LightningBoltIcon, } from "@heroicons/react/solid"; import { UserPlan } from "@prisma/client"; import { SessionContextValue, signOut, useSession } from "next-auth/react"; @@ -43,6 +44,7 @@ import { trpc } from "@lib/trpc"; import CustomBranding from "@components/CustomBranding"; import Loader from "@components/Loader"; import { HeadSeo } from "@components/seo/head-seo"; +import Badge from "@components/ui/Badge"; import ImpersonatingBanner from "@components/ui/ImpersonatingBanner"; import pkg from "../package.json"; @@ -143,6 +145,13 @@ const Layout = ({ icon: ClockIcon, current: router.asPath.startsWith("/availability"), }, + { + name: t("workflows"), + href: "/workflows", + icon: LightningBoltIcon, + current: router.asPath.startsWith("/workflows"), + pro: true, + }, { name: t("apps"), href: "/apps", @@ -225,6 +234,11 @@ const Layout = ({ aria-hidden="true" /> {item.name} + {item.pro && ( + + {plan === "FREE" && PRO} + + )} {item.child && diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx index affcee9ccd..23427d206b 100644 --- a/apps/web/components/booking/pages/BookingPage.tsx +++ b/apps/web/components/booking/pages/BookingPage.tsx @@ -9,7 +9,7 @@ import { RefreshIcon, } from "@heroicons/react/solid"; import { zodResolver } from "@hookform/resolvers/zod"; -import { EventTypeCustomInputType } from "@prisma/client"; +import { EventTypeCustomInputType, WorkflowActions } from "@prisma/client"; import { useContracts } from "contexts/contractsContext"; import { isValidPhoneNumber } from "libphonenumber-js"; import { useSession } from "next-auth/react"; @@ -88,6 +88,7 @@ type BookingFormValues = { [key: string]: string | boolean; }; rescheduleReason?: string; + smsReminderNumber?: string; }; const BookingPage = ({ @@ -283,6 +284,10 @@ const BookingPage = ({ .string() .refine((val) => isValidPhoneNumber(val)) .optional(), + smsReminderNumber: z + .string() + .refine((val) => isValidPhoneNumber(val)) + .optional(), }) .passthrough(); @@ -396,6 +401,8 @@ const BookingPage = ({ })), hasHashedBookingLink, hashedLink, + smsReminderNumber: + selectedLocation === LocationType.Phone ? booking.phone : booking.smsReminderNumber, })); recurringMutation.mutate(recurringBookings); } else { @@ -421,6 +428,8 @@ const BookingPage = ({ })), hasHashedBookingLink, hashedLink, + smsReminderNumber: + selectedLocation === LocationType.Phone ? booking.phone : booking.smsReminderNumber, }); } }; @@ -430,6 +439,21 @@ const BookingPage = ({ const inputClassName = "focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black disabled:bg-gray-200 disabled:hover:cursor-not-allowed dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500 sm:text-sm"; + let isSmsReminderNumberNeeded = false; + + if (eventType.workflows.length > 0) { + eventType.workflows.forEach((workflowReference) => { + if (workflowReference.workflow.steps.length > 0) { + workflowReference.workflow.steps.forEach((step) => { + if (step.action === WorkflowActions.SMS_ATTENDEE) { + isSmsReminderNumberNeeded = true; + return; + } + }); + } + }); + } + return (
@@ -803,6 +827,31 @@ const BookingPage = ({ )}
)} + {isSmsReminderNumberNeeded && selectedLocation !== LocationType.Phone && ( +
+ +
+ + control={bookingForm.control} + name="smsReminderNumber" + placeholder={t("enter_phone_number")} + id="smsReminderNumber" + required + disabled={disableInput} + /> +
+ {bookingForm.formState.errors.smsReminderNumber && ( +
+ +

{t("invalid_number")}

+
+ )} +
+ )}
+ {isPhoneNumberNeeded && ( +
+ +
+ + control={form.control} + name="sendTo" + placeholder={t("enter_phone_number")} + id="sendTo" + required + /> + {form.formState.errors.sendTo && ( +

{form.formState.errors.sendTo.message}

+ )} +
+
+ )} + + + + + + + + + + + + ); +}; diff --git a/apps/web/ee/components/workflows/NewWorkflowButton.tsx b/apps/web/ee/components/workflows/NewWorkflowButton.tsx new file mode 100644 index 0000000000..ee1473cdfa --- /dev/null +++ b/apps/web/ee/components/workflows/NewWorkflowButton.tsx @@ -0,0 +1,254 @@ +import { PlusIcon } from "@heroicons/react/solid"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { WorkflowTriggerEvents, WorkflowActions, TimeUnit } from "@prisma/client"; +import { isValidPhoneNumber } from "libphonenumber-js"; +import { useRouter } from "next/router"; +import { useState } from "react"; +import { useForm, Controller } from "react-hook-form"; +import { z } from "zod"; + +import { useLocale } from "@calcom/lib/hooks/useLocale"; +import showToast from "@calcom/lib/notification"; +import { Button } from "@calcom/ui"; +import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui/Dialog"; +import { Form, TextField } from "@calcom/ui/form/fields"; +import { TIME_UNIT, WORKFLOW_ACTIONS, WORKFLOW_TRIGGER_EVENTS } from "@ee/lib/workflows/constants"; +import { + getWorkflowActionOptions, + getWorkflowTimeUnitOptions, + getWorkflowTriggerOptions, +} from "@ee/lib/workflows/getOptions"; + +import { HttpError } from "@lib/core/http/error"; +import { trpc } from "@lib/trpc"; + +import PhoneInput from "@components/ui/form/PhoneInput"; +import Select from "@components/ui/form/Select"; + +type WorkflowFormValues = { + name: string; + trigger: WorkflowTriggerEvents; + action: WorkflowActions; + time?: number; + timeUnit?: TimeUnit; + sendTo?: string; +}; + +export function NewWorkflowButton() { + const { t } = useLocale(); + const router = useRouter(); + const [showTimeSection, setShowTimeSection] = useState(false); + const [isPhoneNumberNeeded, setIsPhoneNumberNeeded] = useState(false); + const triggerOptions = getWorkflowTriggerOptions(t); + const actionOptions = getWorkflowActionOptions(t); + const timeUnitOptions = getWorkflowTimeUnitOptions(t); + + const formSchema = z.object({ + name: z.string().nonempty(), + trigger: z.enum(WORKFLOW_TRIGGER_EVENTS), + action: z.enum(WORKFLOW_ACTIONS), + time: z.number().min(1).optional(), + timeUnit: z.enum(TIME_UNIT).optional(), + sendTo: z + .string() + .refine((val) => isValidPhoneNumber(val)) + .optional(), + }); + + const form = useForm({ + defaultValues: { + timeUnit: TimeUnit.HOUR, + }, + mode: "onSubmit", + resolver: zodResolver(formSchema), + }); + + const createMutation = trpc.useMutation("viewer.workflows.create", { + onSuccess: async ({ workflow }) => { + await router.replace("/workflows/" + workflow.id); + setIsPhoneNumberNeeded(false); + setShowTimeSection(false); + showToast(t("workflow_created_successfully", { workflowName: workflow.name }), "success"); + }, + 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 able to create this event`; + showToast(message, "error"); + } + }, + }); + + return ( + + + + + +
+ +
+
{ + form.clearErrors(); + createMutation.mutate(values); + }}> + <> +
+ +
+
+ + { + return ( + +
+ { + return ( + { + if (val) { + form.setValue("action", val.value); + form.clearErrors("action"); + if (val.value === WorkflowActions.SMS_NUMBER) { + setIsPhoneNumberNeeded(true); + } else { + setIsPhoneNumberNeeded(false); + form.unregister("sendTo"); + } + } + }} + options={actionOptions} + /> + ); + }} + /> + {form.formState.errors.action && ( +

{form.formState.errors.action.message}

+ )} +
+ {isPhoneNumberNeeded && ( +
+ +
+ + control={form.control} + name="sendTo" + placeholder={t("enter_phone_number")} + id="sendTo" + required + /> +
+ {form.formState.errors.sendTo && ( +

{form.formState.errors.sendTo.message}

+ )} +
+ )} + +
+ + + + +
+ + +
+ ); +} diff --git a/apps/web/ee/components/workflows/WorkflowDetailsPage.tsx b/apps/web/ee/components/workflows/WorkflowDetailsPage.tsx new file mode 100644 index 0000000000..4641815922 --- /dev/null +++ b/apps/web/ee/components/workflows/WorkflowDetailsPage.tsx @@ -0,0 +1,192 @@ +import { WorkflowActions, WorkflowTemplates } from "@prisma/client"; +import { useRouter } from "next/router"; +import { useState, useEffect, Dispatch, SetStateAction } from "react"; +import { Controller, UseFormReturn } from "react-hook-form"; + +import { useLocale } from "@calcom/lib/hooks/useLocale"; +import { HttpError } from "@calcom/lib/http-error"; +import showToast from "@calcom/lib/notification"; +import { Button } from "@calcom/ui"; +import { Form } from "@calcom/ui/form/fields"; +import { AddActionDialog } from "@ee/components/workflows/AddActionDialog"; +import WorkflowStepContainer from "@ee/components/workflows/WorkflowStepContainer"; +import { Option, FormValues } from "@ee/pages/workflows/[workflow]"; + +import { trpc } from "@lib/trpc"; + +import MultiSelectCheckboxes from "@components/ui/form/MultiSelectCheckboxes"; + +interface Props { + form: UseFormReturn; + workflowId: number; + selectedEventTypes: Option[]; + setSelectedEventTypes: Dispatch>; +} + +export default function WorkflowDetailsPage(props: Props) { + const { form, workflowId, selectedEventTypes, setSelectedEventTypes } = props; + const { t } = useLocale(); + const router = useRouter(); + const utils = trpc.useContext(); + + const [evenTypeOptions, setEventTypeOptions] = useState([]); + const [isAddActionDialogOpen, setIsAddActionDialogOpen] = useState(false); + const [reload, setReload] = useState(false); + const [editCounter, setEditCounter] = useState(0); + + const { data, isLoading } = trpc.useQuery(["viewer.eventTypes"]); + + useEffect(() => { + if (data) { + let options: Option[] = []; + data.eventTypeGroups.forEach((group) => { + const eventTypeOptions = group.eventTypes.map((eventType) => { + return { value: String(eventType.id), label: eventType.title }; + }); + options = [...options, ...eventTypeOptions]; + }); + setEventTypeOptions(options); + } + }, [isLoading]); + + const updateMutation = trpc.useMutation("viewer.workflows.update", { + onSuccess: async ({ workflow }) => { + if (workflow) { + await utils.setQueryData(["viewer.workflows.get", { id: +workflow.id }], workflow); + + showToast( + t("workflow_updated_successfully", { + workflowName: workflow.name, + }), + "success" + ); + } + await router.push("/workflows"); + }, + onError: (err) => { + if (err instanceof HttpError) { + const message = `${err.statusCode}: ${err.message}`; + showToast(message, "error"); + } + }, + }); + + const addAction = (action: WorkflowActions, sendTo?: string) => { + const steps = form.getValues("steps"); + const id = + steps && steps.length > 0 + ? steps.sort((a, b) => { + return a.id - b.id; + })[0].id - 1 + : 0; + + const step = { + id: id > 0 ? 0 : id, //id of new steps always <= 0 + action, + stepNumber: + steps && steps.length > 0 + ? steps.sort((a, b) => { + return a.stepNumber - b.stepNumber; + })[steps.length - 1].stepNumber + 1 + : 1, + sendTo: sendTo || null, + workflowId: workflowId, + reminderBody: null, + emailSubject: null, + template: WorkflowTemplates.REMINDER, + }; + steps?.push(step); + form.setValue("steps", steps); + }; + + return ( +
+
{ + let activeOnEventTypeIds: number[] = []; + if (values.activeOn) { + activeOnEventTypeIds = values.activeOn.map((option) => { + return parseInt(option.value, 10); + }); + } + updateMutation.mutate({ + id: parseInt(router.query.workflow as string, 10), + name: values.name, + activeOn: activeOnEventTypeIds, + steps: values.steps, + trigger: values.trigger, + time: values.time || null, + timeUnit: values.timeUnit || null, + }); + }}> +
+ + { + return ( + { + form.setValue("activeOn", s); + }} + /> + ); + }} + /> +
+ + {/* Workflow Trigger Event & Steps */} +
+ {form.getValues("trigger") && ( +
+ +
+ )} + {form.getValues("steps") && ( + <> + {form.getValues("steps")?.map((step) => { + return ( + + ); + })} + + )} +
+
+
+
+ +
+
+ +
+
+ + +
+ ); +} diff --git a/apps/web/ee/components/workflows/WorkflowListPage.tsx b/apps/web/ee/components/workflows/WorkflowListPage.tsx new file mode 100644 index 0000000000..c04cd19b8f --- /dev/null +++ b/apps/web/ee/components/workflows/WorkflowListPage.tsx @@ -0,0 +1,168 @@ +import { LightningBoltIcon } from "@heroicons/react/outline"; +import { DotsHorizontalIcon, PencilIcon, TrashIcon, LinkIcon } from "@heroicons/react/solid"; +import Link from "next/link"; +import { useState } from "react"; + +import { useLocale } from "@calcom/lib/hooks/useLocale"; +import showToast from "@calcom/lib/notification"; +import { EventType, Workflow, WorkflowsOnEventTypes } from "@calcom/prisma/client"; +import { Button, Tooltip } from "@calcom/ui"; +import { Dialog } from "@calcom/ui/Dialog"; +import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown"; +import EmptyScreen from "@calcom/ui/EmptyScreen"; + +import { HttpError } from "@lib/core/http/error"; +import { trpc } from "@lib/trpc"; + +import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent"; + +const CreateFirstWorkflowView = () => { + const { t } = useLocale(); + + return ( + + ); +}; + +interface Props { + workflows: + | (Workflow & { + activeOn: (WorkflowsOnEventTypes & { eventType: EventType })[]; + })[] + | undefined; +} +export default function WorkflowListPage({ workflows }: Props) { + const { t } = useLocale(); + const utils = trpc.useContext(); + const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); + const [deleteDialogTypeId, setDeleteDialogTypeId] = useState(0); + + const query = trpc.useQuery(["viewer.workflows.list"]); + + const deleteMutation = trpc.useMutation("viewer.workflows.delete", { + onSuccess: async () => { + await utils.invalidateQueries(["viewer.workflows.list"]); + showToast(t("workflow_deleted_successfully"), "success"); + setDeleteDialogOpen(false); + }, + onError: (err) => { + if (err instanceof HttpError) { + const message = `${err.statusCode}: ${err.message}`; + showToast(message, "error"); + setDeleteDialogOpen(false); + } + }, + }); + + async function deleteWorkflowHandler(id: number) { + const payload = { id }; + deleteMutation.mutate(payload); + } + + return ( + <> + {workflows && workflows.length > 0 ? ( +
+ + + + { + e.preventDefault(); + deleteWorkflowHandler(deleteDialogTypeId); + }}> + {t("delete_workflow_description")} + + +
+ ) : ( + + )} + + ); +} diff --git a/apps/web/ee/components/workflows/WorkflowStepContainer.tsx b/apps/web/ee/components/workflows/WorkflowStepContainer.tsx new file mode 100644 index 0000000000..c303b7f3b8 --- /dev/null +++ b/apps/web/ee/components/workflows/WorkflowStepContainer.tsx @@ -0,0 +1,432 @@ +import { DotsHorizontalIcon, TrashIcon } from "@heroicons/react/solid"; +import { + TimeUnit, + WorkflowStep, + WorkflowTriggerEvents, + WorkflowActions, + WorkflowTemplates, +} from "@prisma/client"; +import { isValidPhoneNumber } from "libphonenumber-js"; +import { Dispatch, SetStateAction, useState } from "react"; +import { Controller, UseFormReturn } from "react-hook-form"; +import PhoneInput from "react-phone-number-input"; + +import { Button } from "@calcom/ui"; +import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown"; +import Select from "@calcom/ui/form/Select"; +import { TextField, TextArea } from "@calcom/ui/form/fields"; +import { + getWorkflowActionOptions, + getWorkflowTemplateOptions, + getWorkflowTimeUnitOptions, + getWorkflowTriggerOptions, +} from "@ee/lib/workflows/getOptions"; +import { FormValues } from "@ee/pages/workflows/[workflow]"; + +import classNames from "@lib/classNames"; +import { useLocale } from "@lib/hooks/useLocale"; + +type WorkflowStepProps = { + step?: WorkflowStep; + form: UseFormReturn; + reload?: boolean; + setReload?: Dispatch>; + editCounter: number; + setEditCounter: Dispatch>; +}; + +export default function WorkflowStepContainer(props: WorkflowStepProps) { + const { t } = useLocale(); + const { step, form, reload, setReload, editCounter, setEditCounter } = props; + + const [editNumberMode, setEditNumberMode] = useState( + step?.action === WorkflowActions.SMS_NUMBER && !step?.sendTo ? true : false + ); + const [editEmailBodyMode, setEditEmailBodyMode] = useState(false); + const [sendTo, setSendTo] = useState(step?.sendTo || ""); + const [errorMessageNumber, setErrorMessageNumber] = useState(""); + const [errorMessageCustomInput, setErrorMessageCustomInput] = useState(""); + + const [isPhoneNumberNeeded, setIsPhoneNumberNeeded] = useState( + step?.action === WorkflowActions.SMS_NUMBER ? true : false + ); + + const [isCustomReminderBodyNeeded, setIsCustomReminderBodyNeeded] = useState( + step?.template === WorkflowTemplates.CUSTOM ? true : false + ); + + const [isEmailSubjectNeeded, setIsEmailSubjectNeeded] = useState( + step?.action === WorkflowActions.EMAIL_ATTENDEE || step?.action === WorkflowActions.EMAIL_HOST + ? true + : false + ); + + const [showTimeSection, setShowTimeSection] = useState( + form.getValues("trigger") === WorkflowTriggerEvents.BEFORE_EVENT ? true : false + ); + + const actionOptions = getWorkflowActionOptions(t); + const triggerOptions = getWorkflowTriggerOptions(t); + const timeUnitOptions = getWorkflowTimeUnitOptions(t); + const templateOptions = getWorkflowTemplateOptions(t); + + //trigger + if (!step) { + const trigger = form.getValues("trigger"); + const timeUnit = form.getValues("timeUnit"); + + const selectedTrigger = { label: t(`${trigger.toLowerCase()}_trigger`), value: trigger }; + const selectedTimeUnit = timeUnit + ? { label: t(`${timeUnit.toLowerCase()}_timeUnit`), value: timeUnit } + : undefined; + + return ( + <> +
+
+
{t("triggers")}:
+ { + return ( + +
+ { + return ( + { + if (val) { + if (val.value === WorkflowActions.SMS_NUMBER) { + setIsPhoneNumberNeeded(true); + setEditNumberMode(true); + setEditCounter(editCounter + 1); + } else { + setIsPhoneNumberNeeded(false); + setEditNumberMode(false); + setEditCounter(editCounter - 1); + } + + if ( + val.value === WorkflowActions.EMAIL_ATTENDEE || + val.value === WorkflowActions.EMAIL_HOST + ) { + setIsEmailSubjectNeeded(true); + if (!form.getValues(`steps.${step.stepNumber - 1}.emailSubject`)) { + setEditEmailBodyMode(true); + setEditCounter(editCounter + 1); + } + } else { + setIsEmailSubjectNeeded(false); + } + form.setValue(`steps.${step.stepNumber - 1}.action`, val.value); + setErrorMessageNumber(""); + setErrorMessageCustomInput(""); + } + }} + defaultValue={selectedAction} + options={actionOptions} + /> + ); + }} + /> + {form.getValues(`steps.${step.stepNumber - 1}.action`) === WorkflowActions.SMS_ATTENDEE && ( +

{t("not_triggering_existing_bookings")}

+ )} +
+ {isPhoneNumberNeeded && ( + <> + +
+
+ { + if (newValue) { + setSendTo(newValue); + setErrorMessageNumber(""); + } + }} + placeholder={t("enter_phone_number")} + id="sendTo" + disabled={!editNumberMode} + required + countrySelectProps={{ className: "text-black" }} + numberInputProps={{ className: "border-0 text-sm focus:ring-0 dark:bg-gray-700" }} + className={classNames( + "border-1 focus-within:border-brand block w-full rounded-sm border border-gray-300 py-px pl-3 shadow-sm ring-black focus-within:ring-1 disabled:text-gray-500 disabled:opacity-50 dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500", + !editNumberMode ? "text-gray-500 dark:text-gray-500" : "" + )} + /> +
+ {!editNumberMode ? ( + + ) : ( + + )} +
+ {errorMessageNumber &&

{errorMessageNumber}

} + + )} +
+ + { + return ( +