Button to test a workflow action

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

@@ -1036,5 +1036,14 @@
  "using_additional_inputs_as_variables": "How to use additional inputs as variables?",
  "missing_connected_calendar": "No calendar connected",
  "download_desktop_app": "Download desktop app",
- "set_ping_link": "Set Ping link"
+ "set_ping_link": "Set Ping link",
+ "when_something_happens": "When something happens",
+ "action_is_performed": "An action is performed",
+ "test_action": "Test action",
+ "notification_sent": "Notification sent",
+ "no_input": "No input",
+ "test_workflow_action": "Test workflow action",
+ "send_sms": "Send SMS",
+ "send_sms_to_number": "Are you sure you want to send a SMS to {{number}}?"
+
 }

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

@@ -1,3 +1,4 @@
+import { ArrowDownIcon } from "@heroicons/react/outline";
 import { WorkflowActions, WorkflowTemplates } from "@prisma/client";
 import { useRouter } from "next/router";
 import { Dispatch, SetStateAction, useMemo, useState } from "react";
@@ -168,7 +169,7 @@ export default function WorkflowDetailsPage(props: Props) {
  </>
  )}
  <div className="flex justify-center">
- <div className="h-10 border-l-2 border-gray-400" />
+ <ArrowDownIcon className="my-4 h-7 stroke-1 text-gray-500" />
  </div>
  <div className="flex justify-center">
  <Button type="button" onClick={() => setIsAddActionDialogOpen(true)} color="secondary">

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

@@ -1,3 +1,4 @@
+import { ArrowDownIcon } from "@heroicons/react/outline";
 import {
  TimeUnit,
  WorkflowActions,
@@ -13,7 +14,12 @@ import "react-phone-number-input/style.css";
 
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { HttpError } from "@calcom/lib/http-error";
+import showToast from "@calcom/lib/notification";
+import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui";
+import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent";
+import { Dialog } from "@calcom/ui/Dialog";
 import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
 import { Icon } from "@calcom/ui/Icon";
 import Select from "@calcom/ui/form/Select";
@@ -49,6 +55,8 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
  const [errorMessageNumber, setErrorMessageNumber] = useState("");
  const [errorMessageCustomInput, setErrorMessageCustomInput] = useState("");
  const [isInfoParagraphOpen, setIsInfoParagraphOpen] = useState(false);
+ const [confirmationDialogOpen, setConfirmationDialogOpen] = useState(false);
+ const [isTestActionDisabled, setIsTestActionDisabled] = useState(false);
 
  const [translatedReminderBody, setTranslatedReminderBody] = useState(
  getTranslatedText((step ? form.getValues(`steps.${step.stepNumber - 1}.reminderBody`) : "") || "", {
@@ -114,6 +122,18 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
  }
  };
 
+ const testActionMutation = trpc.useMutation("viewer.workflows.testAction", {
+ onSuccess: async () => {
+ showToast(t("notification_sent"), "success");
+ },
+ onError: (err) => {
+ if (err instanceof HttpError) {
+ const message = `${err.statusCode}: ${err.message}`;
+ showToast(message, "error");
+ }
+ },
+ });
+
  //trigger
  if (!step) {
  const trigger = form.getValues("trigger");
@@ -127,16 +147,18 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
  return (
  <>
  <div className="flex justify-center">
- <div className=" min-w-80 w-[50rem] rounded border-2 border-gray-400 bg-gray-50 px-10 pb-9 pt-5">
- <div className="font-bold">{t("triggers")}:</div>
+ <div className=" min-w-80 w-[50rem] rounded border border-gray-200 bg-white pl-10 pr-12 pb-9 pt-5">
+ <div className="text-base font-bold">{t("trigger")}</div>
+ <div className="text-sm text-gray-600">{t("when_something_happens")}</div>
+ <div className="my-7 border-t border-gray-200" />
  <Controller
  name="trigger"
  control={form.control}
  render={() => {
  return (
  <Select
  isSearchable={false}
- className="flex-1 block w-full min-w-0 mt-3 text-sm rounded-sm"
+ className="mt-3 block w-full min-w-0 flex-1 rounded-sm text-sm"
  onChange={(val) => {
  if (val) {
  form.setValue("trigger", val.value);
@@ -159,15 +181,15 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
  />
  {showTimeSection && (
  <div className="mt-5 space-y-1">
- <label htmlFor="label" className="block mb-2 text-sm font-medium text-gray-700">
+ <label htmlFor="label" className="mb-2 block text-sm font-medium text-gray-700">
  {t("how_long_before")}
  </label>
  <div className="flex">
  <input
  type="number"
  min="1"
  defaultValue={form.getValues("time") || 24}
- className="block w-20 px-3 py-2 mr-5 text-sm border-gray-300 rounded-sm marker:border focus:border-neutral-800 focus:outline-none focus:ring-1 focus:ring-neutral-800"
+ className="mr-5 block w-20 rounded-sm border-gray-300 px-3 py-2 text-sm marker:border focus:border-neutral-800 focus:outline-none focus:ring-1 focus:ring-neutral-800"
  {...form.register("time", { valueAsNumber: true })}
  />
  <div className="w-28">
@@ -178,7 +200,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
  return (
  <Select
  isSearchable={false}
- className="flex-1 block min-w-0 text-sm rounded-sm"
+ className="block min-w-0 flex-1 rounded-sm text-sm"
  onChange={(val) => {
  if (val) {
  form.setValue("timeUnit", val.value);
@@ -206,13 +228,15 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
 
  return (
  <>
- <div className="flex justify-center">
- <div className="h-10 border-l-2 border-gray-400" />
+ <div className="flex justify-center ">
+ <ArrowDownIcon className="my-4 h-7 stroke-1 text-gray-500" />
  </div>
  <div className="flex justify-center">
- <div className="min-w-80 flex w-[50rem] rounded border-2 border-gray-400 bg-gray-50 pl-10 pb-9 ">
+ <div className=" min-w-80 flex w-[50rem] rounded border border-gray-200 bg-white px-10 pb-9 pt-5 pr-3">
  <div className="w-full pt-5">
- <div className="font-bold">{t("action")}:</div>
+ <div className="text-base font-bold">{t("action")}</div>
+ <div className="text-sm text-gray-600">{t("action_is_performed")}</div>
+ <div className="my-7 border-t border-gray-200" />
  <div>
  <Controller
  name={`steps.${step.stepNumber - 1}.action`}
@@ -221,27 +245,27 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
  return (
  <Select
  isSearchable={false}
- className="flex-1 block w-full min-w-0 mt-3 text-sm rounded-sm"
+ className="mt-3 block w-full min-w-0 flex-1 rounded-sm text-sm"
  onChange={(val) => {
  if (val) {
  let counter = 0;
  if (val.value === WorkflowActions.SMS_NUMBER) {
  setIsPhoneNumberNeeded(true);
  setEditNumberMode(true);
  counter = counter + 1;
+ setIsTestActionDisabled(true);
  } else {
  setIsPhoneNumberNeeded(false);
  setEditNumberMode(false);
  }
-
  if (
  form.getValues(`steps.${step.stepNumber - 1}.template`) ===
  WorkflowTemplates.CUSTOM
  ) {
  setEditEmailBodyMode(true);
  counter = counter + 1;
+ setIsTestActionDisabled(true);
  }
-
  if (
  val.value === WorkflowActions.EMAIL_ATTENDEE ||
  val.value === WorkflowActions.EMAIL_HOST
@@ -270,7 +294,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
  <>
  <label
  htmlFor="sendTo"
- className="block mt-5 text-sm font-medium text-gray-700 dark:text-white">
+ className="mt-5 block text-sm font-medium text-gray-700 dark:text-white">
  {t("phone_number")}
  </label>
  <div className="flex space-y-1">
@@ -281,8 +305,10 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
  onChange={(newValue) => {
  if (newValue) {
  setSendTo(newValue);
- setErrorMessageNumber("");
+ } else {
+ setSendTo("");
  }
+ setErrorMessageNumber("");
  }}
  placeholder={t("enter_phone_number")}
  id="sendTo"
@@ -291,7 +317,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
  countrySelectProps={{ className: "text-black" }}
  numberInputProps={{ className: "border-0 text-sm focus:ring-0 dark:bg-gray-700" }}
  className={classNames(
- "order-1 focus-within:border-brand block w-full rounded-sm border border-gray-300 py-px pl-3 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",
+ "focus-within:border-brand order-1 block w-full rounded-sm border border-gray-300 py-px pl-3 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" : ""
  )}
  />
@@ -303,6 +329,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
  onClick={() => {
  setEditNumberMode(true);
  setEditCounter(editCounter + 1);
+ setIsTestActionDisabled(true);
  }}>
  {t("edit")}
  </Button>
@@ -312,13 +339,18 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
  color="primary"
  onClick={async () => {
  if (sendTo) {
- form.setValue(`steps.${step.stepNumber - 1}.sendTo`, sendTo);
  if (isValidPhoneNumber(sendTo)) {
+ form.setValue(`steps.${step.stepNumber - 1}.sendTo`, sendTo);
  setEditNumberMode(false);
  setEditCounter(editCounter - 1);
+ if (!editEmailBodyMode) {
+ setIsTestActionDisabled(false);
+ }
  } else {
  setErrorMessageNumber(t("invalid_input"));
  }
+ } else {
+ setErrorMessageNumber(t("no_input"));
  }
  }}>
  {t("save")}
@@ -329,7 +361,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
  </>
  )}
  <div className="mt-5">
- <label htmlFor="label" className="block mt-5 text-sm font-medium text-gray-700">
+ <label htmlFor="label" className="mt-5 block text-sm font-medium text-gray-700">
  {t("choose_template")}
  </label>
  <Controller
@@ -339,7 +371,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
  return (
  <Select
  isSearchable={false}
- className="flex-1 block w-full min-w-0 mt-3 text-sm rounded-sm"
+ className="mt-3 block w-full min-w-0 flex-1 rounded-sm text-sm"
  onChange={(val) => {
  if (val) {
  form.setValue(`steps.${step.stepNumber - 1}.template`, val.value);
@@ -367,10 +399,10 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
  <>
  {isEmailSubjectNeeded && (
  <div className="mt-5 mb-2 ">
- <label className="block mt-3 mb-1 text-sm font-medium text-gray-700">
+ <label className="mt-3 mb-1 block text-sm font-medium text-gray-700">
  {t("subject")}
  </label>
- <div className="bg-white border border-gray-300 rounded-sm mtext-sm border-1 focus-within:border-1 focus-within:border-black">
+ <div className="mtext-sm border-1 focus-within:border-1 rounded-sm border border-gray-300 bg-white focus-within:border-black">
  <AddVariablesDropdown
  disabled={!editEmailBodyMode}
  addVariable={addVariable}
@@ -396,10 +428,10 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
  </div>
  </div>
  )}
- <label className="block mt-3 mb-1 text-sm font-medium text-gray-700 dark:text-white">
+ <label className="mt-3 mb-1 block text-sm font-medium text-gray-700 dark:text-white">
  {isEmailSubjectNeeded ? t("email_body") : t("text_message")}
  </label>
- <div className="mb-2 text-sm bg-white border border-gray-300 rounded-sm border-1 focus-within:border-1 focus-within:border-black">
+ <div className="border-1 focus-within:border-1 mb-2 rounded-sm border border-gray-300 bg-white text-sm focus-within:border-black">
  <AddVariablesDropdown
  disabled={!editEmailBodyMode}
  addVariable={addVariable}
@@ -429,14 +461,14 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
  type="button"
  onClick={() => setIsInfoParagraphOpen(!isInfoParagraphOpen)}>
  {isInfoParagraphOpen ? (
- <Icon.FiChevronDown className="h-5 text-gray-700 w5" />
+ <Icon.FiChevronDown className="w5 h-5 text-gray-700" />
  ) : (
- <Icon.FiChevronRight className="h-5 text-gray-700 w5" />
+ <Icon.FiChevronRight className="w5 h-5 text-gray-700" />
  )}
  <span className="text-sm">{t("using_additional_inputs_as_variables")}</span>
  </button>
  {isInfoParagraphOpen && (
- <div className="w-full pr-6 mt-4 ml-6 text-sm">
+ <div className="mt-4 ml-6 w-full pr-6 text-sm">
  <div className="lg:flex">
  <div className="lg:w-1/2">
  <p className="font-medium">{t("example_1")}:</p>
@@ -474,6 +506,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
  onClick={() => {
  setEditEmailBodyMode(true);
  setEditCounter(editCounter + 1);
+ setIsTestActionDisabled(true);
  }}>
  {t("edit")}
  </Button>
@@ -482,8 +515,6 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
  type="button"
  color="primary"
  onClick={async () => {
- const reminderBody = form.getValues(`steps.${step.stepNumber - 1}.reminderBody`);
- const emailSubject = form.getValues(`steps.${step.stepNumber - 1}.emailSubject`);
  let isEmpty = false;
  let errorMessage = "";
 
@@ -507,6 +538,9 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
  if (!isEmpty) {
  setEditEmailBodyMode(false);
  setEditCounter(editCounter - 1);
+ if (!editNumberMode) {
+ setIsTestActionDisabled(false);
+ }
  }
  setErrorMessageCustomInput(errorMessage);
  }}>
@@ -515,6 +549,29 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
  )}
  </>
  )}
+ {form.getValues(`steps.${step.stepNumber - 1}.action`) !== WorkflowActions.SMS_ATTENDEE && (
+ <Button
+ type="button"
+ className="mt-7 w-full"
+ disabled={isTestActionDisabled}
+ onClick={() => {
+ if (
+ form.getValues(`steps.${step.stepNumber - 1}.action`) !== WorkflowActions.SMS_NUMBER
+ ) {
+ testActionMutation.mutate({
+ action: step.action,
+ emailSubject: step.emailSubject || "",
+ reminderBody: step.reminderBody || "",
+ template: step.template,
+ });
+ } else {
+ setConfirmationDialogOpen(true);
+ }
+ }}
+ color="secondary">
+ <div className="w-full">{t("test_action")}</div>
+ </Button>
+ )}
  </div>
  <div>
  <Dropdown>
@@ -552,6 +609,25 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
  </div>
  </div>
  </div>
+ <Dialog open={confirmationDialogOpen} onOpenChange={setConfirmationDialogOpen}>
+ <ConfirmationDialogContent
+ variety="warning"
+ title={t("test_workflow_action")}
+ confirmBtnText={t("send_sms")}
+ onConfirm={(e) => {
+ e.preventDefault();
+ testActionMutation.mutate({
+ action: step.action,
+ emailSubject: step.emailSubject || "",
+ reminderBody: step.reminderBody || "",
+ template: step.template,
+ sendTo: step.sendTo || "",
+ });
+ setConfirmationDialogOpen(false);
+ }}>
+ {t("send_sms_to_number", { number: sendTo })}
+ </ConfirmationDialogContent>
+ </Dialog>
  </>
  );
  }