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 ( +