From ba3440b8eb6700ed1023b4fd2e68143779200ac2 Mon Sep 17 00:00:00 2001
From: Vladimir Khvan <vladimirkhvan23@gmail.com>
Date: Wed, 7 Jun 2023 22:24:01 +0500
Subject: [PATCH] isJSON validation was added

---
 .../sub-components/RequestDetails.js          | 33 ++++++++++++++-----
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/RequestDetails.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/RequestDetails.js
index e3304dc2c7..e7c2121d55 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/RequestDetails.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/RequestDetails.js
@@ -10,6 +10,10 @@ import { useTranslation } from "react-i18next";
 const DetailsWrapper = styled.div`
   width: 100%;
 
+  .textareaBody {
+    height: 50vh !important;
+  }
+
   .mt-7 {
     margin-top: 7px;
   }
@@ -44,6 +48,15 @@ const ErrorMessageTooltip = styled.div`
   }
 `;
 
+function isJSON(jsonString) {
+  try {
+    const parsedJson = JSON.parse(jsonString);
+    return parsedJson && typeof parsedJson === "object";
+  } catch (e) {}
+
+  return false;
+}
+
 const RequestDetails = ({ eventDetails }) => {
   const { t } = useTranslation(["Webhooks"]);
 
@@ -74,14 +87,18 @@ const RequestDetails = ({ eventDetails }) => {
       <Text as="h3" fontWeight={600} className="mb-4 mt-16">
         {t("RequestPostBody")}
       </Text>
-      <Textarea
-        value={eventDetails.requestPayload}
-        isJSONField
-        enableCopy
-        hasNumeration
-        isFullHeight
-        copyInfoText={t("RequestBodyCopied")}
-      />
+      {isJSON(eventDetails.requestPayload) ? (
+        <Textarea
+          value={eventDetails.requestPayload}
+          isJSONField
+          enableCopy
+          hasNumeration
+          isFullHeight
+          copyInfoText={t("RequestBodyCopied")}
+        />
+      ) : (
+        <Textarea value={eventDetails.requestPayload} heightScale className="textareaBody" />
+      )}
     </DetailsWrapper>
   );
 };