feat: workflows v3 UI (calcom#22772)

* early UI refresher of workflows using v3 designs. needs tons of testing, might have broken

* Delete .claude/settings.local.json

* fix: bunch of design fixes, merge conflict fixes

* fix: e2e and type-check

* fix: await button click

* review fixes

* code rabbit fixes

* fix styles in variables dropdown

* fix text truncate

* fix: unit tests

* fix: unit tests

* chore: add missing i18n

* review fixes

* review fixes

* fix testing info message

* move timeSectionText up

* fix which team does this apply to info message

* disable set up agent button with read only

* fix: cal.ai breaking on mobile screen

---------

Co-authored-by: Amit Sharma <74371312+Amit91848@users.noreply.github.com>
Co-authored-by: Udit Takkar <udit222001@gmail.com>
Co-authored-by: CarinaWolli <wollencarina@gmail.com>

Author: 4 people

apps/web/app/(use-page-wrapper)/settings/(admin-layout)/AdminLayoutAppDirClient.tsx

@@ -12,7 +12,7 @@ export type AdminLayoutProps = {
   children: React.ReactNode;
   userRole: UserPermissionRole | "INACTIVE_ADMIN" | undefined;
 } & ComponentProps<typeof Shell>;
-export default function AdminLayoutAppDirClient({ userRole, children }: AdminLayoutProps) {
+export default function AdminLayoutAppDirClient({ children }: AdminLayoutProps) {
   const pathname = usePathname();
 
   const isAppsPage = pathname?.startsWith("/settings/admin/apps");

apps/web/playwright/fixtures/workflows.ts

@@ -46,7 +46,8 @@ export function createWorkflowPageFixture(page: Page) {
 
   const saveWorkflow = async () => {
     const submitPromise = page.waitForResponse("/api/trpc/workflows/update?batch=1");
-    await page.getByTestId("save-workflow").click();
+    const saveButton = await page.getByTestId("save-workflow");
+    await saveButton.click();
     const response = await submitPromise;
     expect(response.status()).toBe(200);
     const responseData = await response.json();
@@ -61,7 +62,9 @@ export function createWorkflowPageFixture(page: Page) {
   };
 
   const fillNameInput = async (name: string) => {
+    await page.getByTestId("edit-workflow-name-button").click();
     await page.getByTestId("workflow-name").fill(name);
+    await page.keyboard.press("Enter");
   };
 
   const editSelectedWorkflow = async (name: string) => {

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

@@ -846,6 +846,7 @@
   "phone_number_subscription_cancelled_successfully": "Phone number subscription canceled successfully",
   "updating": "Updating",
   "round_robin": "Round Robin",
+  "hi_how_are_you_doing": "Hi, how are you doing?",
   "round_robin_description": "Cycle meetings between multiple team members.",
   "managed_event": "Managed Event",
   "username_placeholder": "username",
@@ -2341,7 +2342,6 @@
   "could_not_charge_card": "Could not charge card for payment.",
   "insights": "Insights",
   "routing_forms": "Routing Forms",
-  "testing_workflow_info_message": "When testing this workflow, be aware that Emails and SMS can only be scheduled at least 1 hour in advance",
   "insights_no_data_found_for_filter": "No data found for the selected filter or selected dates.",
   "acknowledge_booking_no_show_fee": "I acknowledge that if I do not attend this event that a {{amount, currency}} no show fee will be applied to my card.",
   "days": "days",
@@ -3594,6 +3594,7 @@
   "webhook_trigger_event": "The name of the trigger event (e.g., BOOKING_CREATED, BOOKING_CANCELLED)",
   "webhook_created_at": "The time of the webhook",
   "webhook_type": "The event type slug",
+  "set_up_agent": "Set up Agent",
   "webhook_title": "The event type name",
   "webhook_start_time": "The event's start time",
   "webhook_end_time": "The event's end time",
@@ -3652,5 +3653,6 @@
   "before_scheduled_start_time": "Before scheduled start time",
   "cancel_booking_acknowledge_no_show_fee": "I acknowledge that by cancelling the booking within {{timeValue}} {{timeUnit}} of the start time I will be charged the no show fee of {{amount, currency}}",
   "contact_organizer": "If you have any questions, please contact the organizer.",
+  "testing_sms_workflow_info_message": "When testing this workflow, be aware that SMS need to be scheduled at least 15 minutes in advance",
   "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }

apps/web/test/lib/confirm.handler.test.ts

@@ -10,8 +10,8 @@ import { describe, it, beforeEach, vi, expect } from "vitest";
 
 import * as handleConfirmationModule from "@calcom/features/bookings/lib/handleConfirmation";
 import { BookingStatus } from "@calcom/prisma/enums";
-import type { TrpcSessionUser } from "@calcom/trpc/server/types";
 import { confirmHandler } from "@calcom/trpc/server/routers/viewer/bookings/confirm.handler";
+import type { TrpcSessionUser } from "@calcom/trpc/server/types";
 
 describe("confirmHandler", () => {
   beforeEach(() => {

packages/app-store/routing-forms/pages/form-edit/[...appPages].tsx

@@ -9,7 +9,7 @@ import { v4 as uuidv4 } from "uuid";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import classNames from "@calcom/ui/classNames";
 import { Button } from "@calcom/ui/components/button";
-import { FormCard } from "@calcom/ui/components/card";
+import { FormCard, FormCardBody } from "@calcom/ui/components/card";
 import {
   BooleanToggleGroupField,
   Label,
@@ -90,7 +90,7 @@ function Field({
           router ? { text: router.name, variant: "gray", href: `${appUrl}/form-edit/${router.id}` } : null
         }
         deleteField={router ? null : deleteField}>
-        <div className="bg-default border-default w-full gap-3 rounded-2xl border p-3">
+        <FormCardBody>
           <div className="mb-3 w-full">
             <TextField
               data-testid={`${hookFieldNamespace}.label`}
@@ -211,7 +211,7 @@ function Field({
               }}
             />
           </div>
-        </div>
+        </FormCardBody>
       </FormCard>
     </div>
   );

packages/features/components/phone-input/PhoneInput.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { isSupportedCountry } from "libphonenumber-js";
+import type { CSSProperties } from "react";
 import { useState, useEffect } from "react";
 import PhoneInput from "react-phone-input-2";
 import "react-phone-input-2/lib/style.css";
@@ -19,6 +20,8 @@ export type PhoneInputProps = {
   disabled?: boolean;
   onChange: (value: string) => void;
   defaultCountry?: string;
+  inputStyle?: CSSProperties;
+  flagButtonStyle?: CSSProperties;
 };
 
 function BasePhoneInput({
@@ -45,6 +48,7 @@ function BasePhoneInput({
     if (value !== sanitized) {
       onChange(sanitized);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   if (!isPlatform) {
@@ -97,6 +101,8 @@ function BasePhoneInputWeb({
   className = "",
   onChange,
   value,
+  inputStyle,
+  flagButtonStyle,
   ...rest
 }: Omit<PhoneInputProps, "defaultCountry">) {
   const defaultCountry = useDefaultCountry();
@@ -122,9 +128,10 @@ function BasePhoneInputWeb({
       )}
       inputClass="text-sm focus:ring-0 !bg-default text-default placeholder:text-muted"
       buttonClass="text-emphasis !bg-default hover:!bg-emphasis"
+      buttonStyle={{ ...flagButtonStyle }}
       searchClass="!text-default !bg-default hover:!bg-emphasis"
       dropdownClass="!text-default !bg-default"
-      inputStyle={{ width: "inherit", border: 0 }}
+      inputStyle={{ width: "inherit", border: 0, ...inputStyle }}
       searchStyle={{
         display: "flex",
         flexDirection: "row",

packages/features/ee/workflows/api/scheduleEmailReminders.ts

@@ -71,6 +71,7 @@ export async function handler(req: NextRequest) {
     //cancel reminders for cancelled/rescheduled bookings that are scheduled within the next hour
     const remindersToCancel: { referenceId: string | null; id: number }[] = await getAllRemindersToCancel();
 
+    //eslint-disable-next-line @typescript-eslint/no-explicit-any
     const cancelUpdatePromises: Promise<any>[] = [];
 
     for (const reminder of remindersToCancel) {
@@ -98,6 +99,7 @@ export async function handler(req: NextRequest) {
   }
 
   // schedule all unscheduled reminders within the next 72 hours
+  //eslint-disable-next-line @typescript-eslint/no-explicit-any
   const sendEmailPromises: Promise<any>[] = [];
 
   const unscheduledReminders = await getAllUnscheduledReminders();

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

@@ -3,19 +3,8 @@ import { SkeletonText, SkeletonContainer } from "@calcom/ui/components/skeleton"
 function SkeletonLoader() {
   return (
     <SkeletonContainer>
-      <div className="ml-2 mt-10 md:flex">
-        <div className="mr-6 flex flex-col md:flex-none">
-          <SkeletonText className="h-4 w-28" />
-          <SkeletonText className="mb-6 mt-2 h-8 w-full md:w-64" />
-          <SkeletonText className="h-4 w-28" />
-          <SkeletonText className="mt-2 h-8 w-full md:w-64" />
-          <SkeletonText className="mt-8 hidden h-0.5 w-full md:block" />
-          <SkeletonText className="mb-6 mt-8 h-8 w-40" />
-        </div>
-        <div className="hidden flex-grow md:flex">
-          <SkeletonText className="h-64 w-full" />
-        </div>
-      </div>
+      <SkeletonText className="mx-auto my-8 h-48 w-full max-w-4xl" />
+      <SkeletonText className="mx-auto my-8 h-80 w-full max-w-4xl" />
     </SkeletonContainer>
   );
 }