From 7bda15aaa36da00890e0ded43a4b78fc32bfa99a Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Thu, 10 Nov 2022 17:08:40 +0530
Subject: [PATCH] fix: ui of webhook segment (#5452)

* fix: ui of webhook segment

* feat: use toggle group component

* fix: default bug

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 apps/web/public/static/locales/en/common.json |  1 -
 .../webhooks/components/WebhookForm.tsx       | 40 +++++++++----------
 2 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index 87ed901013..4aa3fabc65 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -126,7 +126,6 @@
   "webhook_updated_successfully": "Webhook updated successfully!",
   "webhook_removed_successfully": "Webhook removed successfully!",
   "payload_template": "Payload Template",
-  "payload":"Payload",
   "dismiss": "Dismiss",
   "no_data_yet": "No data yet",
   "ping_test": "Ping test",
diff --git a/packages/features/webhooks/components/WebhookForm.tsx b/packages/features/webhooks/components/WebhookForm.tsx
index 8ec77d430e..fe32c2869b 100644
--- a/packages/features/webhooks/components/WebhookForm.tsx
+++ b/packages/features/webhooks/components/WebhookForm.tsx
@@ -2,13 +2,13 @@ import { WebhookTriggerEvents } from "@prisma/client";
 import { useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
-import { classNames } from "@calcom/lib";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { inferQueryOutput } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/components/button";
 import { Form, Label, TextArea, TextField } from "@calcom/ui/components/form";
 import Switch from "@calcom/ui/v2/core/Switch";
+import { ToggleGroup } from "@calcom/ui/v2/core/form/ToggleGroup";
 import Select from "@calcom/ui/v2/core/form/select";
 
 import customTemplate, { hasTemplateIntegration } from "../lib/integrationTemplate";
@@ -217,28 +217,24 @@ const WebhookForm = (props: {
           render={({ field: { value } }) => (
             <>
               <Label className="font-sm mt-8 text-gray-900">
-                <>{t("payload")}</>
+                <>{t("payload_template")}</>
               </Label>
-              <div className="flex rounded-md border">
-                <div
-                  className={classNames(
-                    "px-1/2 w-1/2 rounded-md  py-2.5 text-center font-medium text-gray-900",
-                    !useCustomTemplate && "bg-gray-200"
-                  )}
-                  onClick={() => {
-                    setUseCustomTemplate(false);
-                    formMethods.setValue("payloadTemplate", undefined);
-                  }}>
-                  <p>{t("default")}</p>
-                </div>
-                <div
-                  className={classNames(
-                    "px-1/2 w-1/2 rounded-md  py-2.5 text-center font-medium text-gray-900",
-                    useCustomTemplate && "bg-gray-200"
-                  )}
-                  onClick={() => setUseCustomTemplate(true)}>
-                  <p>{t("custom")}</p>
-                </div>
+              <div className="mb-2">
+                <ToggleGroup
+                  onValueChange={(val) => {
+                    if (val === "default") {
+                      setUseCustomTemplate(false);
+                      formMethods.setValue("payloadTemplate", undefined);
+                    } else {
+                      setUseCustomTemplate(true);
+                    }
+                  }}
+                  defaultValue={value ? "custom" : "default"}
+                  options={[
+                    { value: "default", label: t("default") },
+                    { value: "custom", label: t("custom") },
+                  ]}
+                />
               </div>
               {useCustomTemplate && (
                 <TextArea