From 318470d86602e173198c1c7476efb59042838646 Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Tue, 17 Dec 2024 14:32:38 +0530
Subject: [PATCH] fix: webhook improvement (#18220)

---
 .../developer/webhooks/new/page.tsx             | 17 ++++++++++++++++-
 .../workflows/components/TimeTimeUnitInput.tsx  |  3 ++-
 .../webhooks/components/WebhookForm.tsx         |  2 +-
 .../webhooks/pages/webhook-new-view.tsx         | 14 ++------------
 4 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/apps/web/app/settings/(settings-layout)/developer/webhooks/new/page.tsx b/apps/web/app/settings/(settings-layout)/developer/webhooks/new/page.tsx
index 98161ee6a4..a69041bb2c 100644
--- a/apps/web/app/settings/(settings-layout)/developer/webhooks/new/page.tsx
+++ b/apps/web/app/settings/(settings-layout)/developer/webhooks/new/page.tsx
@@ -1,8 +1,10 @@
 import { getTranslate, _generateMetadata } from "app/_utils";
+import { Suspense } from "react";
 
 import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
 import { NewWebhookView } from "@calcom/features/webhooks/pages/webhook-new-view";
 import { APP_NAME } from "@calcom/lib/constants";
+import { SkeletonContainer, SkeletonText } from "@calcom/ui";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
@@ -10,6 +12,17 @@ export const generateMetadata = async () =>
     (t) => t("add_webhook_description", { appName: APP_NAME })
   );
 
+const SkeletonLoader = () => {
+  return (
+    <SkeletonContainer>
+      <div className="divide-subtle border-subtle space-y-6 rounded-b-lg border border-t-0 px-6 py-4">
+        <SkeletonText className="h-8 w-full" />
+        <SkeletonText className="h-8 w-full" />
+      </div>
+    </SkeletonContainer>
+  );
+};
+
 const Page = async () => {
   const t = await getTranslate();
 
@@ -19,7 +32,9 @@ const Page = async () => {
       description={t("add_webhook_description", { appName: APP_NAME })}
       borderInShellHeader={true}
       backButton>
-      <NewWebhookView />
+      <Suspense fallback={<SkeletonLoader />}>
+        <NewWebhookView />
+      </Suspense>
     </SettingsHeader>
   );
 };
diff --git a/packages/features/ee/workflows/components/TimeTimeUnitInput.tsx b/packages/features/ee/workflows/components/TimeTimeUnitInput.tsx
index 7561d8250a..075338ee4d 100644
--- a/packages/features/ee/workflows/components/TimeTimeUnitInput.tsx
+++ b/packages/features/ee/workflows/components/TimeTimeUnitInput.tsx
@@ -17,6 +17,7 @@ const TIME_UNITS = [TimeUnit.DAY, TimeUnit.HOUR, TimeUnit.MINUTE] as const;
 
 type Props = {
   disabled: boolean;
+  defaultTime?: number;
 };
 
 const TimeUnitAddonSuffix = ({
@@ -62,7 +63,7 @@ export const TimeTimeUnitInput = (props: Props) => {
           min="1"
           label=""
           disabled={props.disabled}
-          defaultValue={form.getValues("time") || 24}
+          defaultValue={form.getValues("time") ?? props.defaultTime ?? 24}
           className="-mt-2 rounded-r-none text-sm focus:ring-0"
           {...form.register("time", { valueAsNumber: true })}
           addOnSuffix={
diff --git a/packages/features/webhooks/components/WebhookForm.tsx b/packages/features/webhooks/components/WebhookForm.tsx
index 8138021297..b9f47aa344 100644
--- a/packages/features/webhooks/components/WebhookForm.tsx
+++ b/packages/features/webhooks/components/WebhookForm.tsx
@@ -229,7 +229,7 @@ const WebhookForm = (props: {
         {showTimeSection && (
           <div className="mt-5">
             <Label>{t("how_long_after_user_no_show_minutes")}</Label>
-            <TimeTimeUnitInput disabled={false} />
+            <TimeTimeUnitInput disabled={false} defaultTime={5} />
           </div>
         )}
 
diff --git a/packages/features/webhooks/pages/webhook-new-view.tsx b/packages/features/webhooks/pages/webhook-new-view.tsx
index bbb0da3479..7fd41e41d8 100644
--- a/packages/features/webhooks/pages/webhook-new-view.tsx
+++ b/packages/features/webhooks/pages/webhook-new-view.tsx
@@ -6,22 +6,12 @@ import { useRouter } from "next/navigation";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { showToast, SkeletonContainer, SkeletonText } from "@calcom/ui";
+import { showToast } from "@calcom/ui";
 
 import type { WebhookFormSubmitData } from "../components/WebhookForm";
 import WebhookForm from "../components/WebhookForm";
 import { subscriberUrlReserved } from "../lib/subscriberUrlReserved";
 
-const SkeletonLoader = () => {
-  return (
-    <SkeletonContainer>
-      <div className="divide-subtle border-subtle space-y-6 rounded-b-lg border border-t-0 px-6 py-4">
-        <SkeletonText className="h-8 w-full" />
-        <SkeletonText className="h-8 w-full" />
-      </div>
-    </SkeletonContainer>
-  );
-};
 export const NewWebhookView = () => {
   const searchParams = useCompatSearchParams();
   const { t } = useLocale();
@@ -87,7 +77,7 @@ export const NewWebhookView = () => {
     });
   };
 
-  if (isPending) return <SkeletonLoader />;
+  if (isPending) return null;
 
   return (
     <WebhookForm