From 255241cf5a53d76beff78f20126aaa1c1466c4c8 Mon Sep 17 00:00:00 2001
From: Sagar naik <sagar.naik@juspay.in>
Date: Wed, 24 Jan 2024 17:30:50 +0530
Subject: [PATCH] feat: added webhooks events (#272)

Co-authored-by: Pritish Budhiraja <1805317@kiit.ac.in>
---
 public/hyperswitch/icons/solid.svg            |  15 +
 src/screens/HyperSwitch/APIUtils/APIUtils.res |  10 +
 .../HyperSwitch/APIUtils/APIUtilsTypes.res    |   2 +
 .../HyperSwitch/PaymentLogs/PaymentLogs.res   | 575 +++++++++++-------
 .../PaymentLogs/PaymentLogsTypes.res          |  11 +
 ...{PaymentUtils.res => PaymentLogsUtils.res} |  17 +
 src/utils/LogicUtils.res                      |   6 +-
 tailwindHyperSwitch.config.js                 |   1 +
 8 files changed, 412 insertions(+), 225 deletions(-)
 create mode 100644 src/screens/HyperSwitch/PaymentLogs/PaymentLogsTypes.res
 rename src/screens/HyperSwitch/PaymentLogs/{PaymentUtils.res => PaymentLogsUtils.res} (57%)

diff --git a/public/hyperswitch/icons/solid.svg b/public/hyperswitch/icons/solid.svg
index b2467c422..640d696dc 100644
--- a/public/hyperswitch/icons/solid.svg
+++ b/public/hyperswitch/icons/solid.svg
@@ -1402,6 +1402,21 @@ License)
       d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
     ></path>
   </symbol>
+  <svg id="copy-code" width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_12787_121416)">
+    <mask id="mask0_12787_121416" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
+    <rect width="16" height="16" fill="#D9D9D9"/>
+    </mask>
+    <g mask="url(#mask0_12787_121416)">
+    <path d="M3.33333 14.6654C2.96667 14.6654 2.65278 14.5348 2.39167 14.2737C2.13056 14.0126 2 13.6987 2 13.332V3.9987H3.33333V13.332H10.6667V14.6654H3.33333ZM6 11.9987C5.63333 11.9987 5.31944 11.8681 5.05833 11.607C4.79722 11.3459 4.66667 11.032 4.66667 10.6654V2.66536C4.66667 2.2987 4.79722 1.98481 5.05833 1.7237C5.31944 1.46259 5.63333 1.33203 6 1.33203H12C12.3667 1.33203 12.6806 1.46259 12.9417 1.7237C13.2028 1.98481 13.3333 2.2987 13.3333 2.66536V10.6654C13.3333 11.032 13.2028 11.3459 12.9417 11.607C12.6806 11.8681 12.3667 11.9987 12 11.9987H6ZM6 10.6654H12V2.66536H6V10.6654Z" fill="#333333"/>
+    </g>
+    </g>
+    <defs>
+    <clipPath id="clip0_12787_121416">
+    <rect width="16" height="16" fill="white"/>
+    </clipPath>
+    </defs>
+  </svg>
   <symbol id="copyright" viewBox="0 0 512 512">
     <path
       d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm117.134 346.753c-1.592 1.867-39.776 45.731-109.851 45.731-84.692 0-144.484-63.26-144.484-145.567 0-81.303 62.004-143.401 143.762-143.401 66.957 0 101.965 37.315 103.422 38.904a12 12 0 0 1 1.238 14.623l-22.38 34.655c-4.049 6.267-12.774 7.351-18.234 2.295-.233-.214-26.529-23.88-61.88-23.88-46.116 0-73.916 33.575-73.916 76.082 0 39.602 25.514 79.692 74.277 79.692 38.697 0 65.28-28.338 65.544-28.625 5.132-5.565 14.059-5.033 18.508 1.053l24.547 33.572a12.001 12.001 0 0 1-.553 14.866z"
diff --git a/src/screens/HyperSwitch/APIUtils/APIUtils.res b/src/screens/HyperSwitch/APIUtils/APIUtils.res
index c3195c77e..ae62ca1e0 100644
--- a/src/screens/HyperSwitch/APIUtils/APIUtils.res
+++ b/src/screens/HyperSwitch/APIUtils/APIUtils.res
@@ -144,6 +144,16 @@ let getURL = (
       }
     | _ => ""
     }
+  | WEBHOOKS_EVENT_LOGS =>
+    switch id {
+    | Some(payment_id) => `analytics/v1/outgoing_webhook_event_logs?payment_id=${payment_id}`
+    | None => ""
+    }
+  | CONNECTOR_EVENT_LOGS =>
+    switch id {
+    | Some(payment_id) => `analytics/v1/connector_event_logs?type=Payment&payment_id=${payment_id}`
+    | None => ""
+    }
   | USERS =>
     let userUrl = `user`
     switch userType {
diff --git a/src/screens/HyperSwitch/APIUtils/APIUtilsTypes.res b/src/screens/HyperSwitch/APIUtils/APIUtilsTypes.res
index d0b8eddef..46056dfbf 100644
--- a/src/screens/HyperSwitch/APIUtils/APIUtilsTypes.res
+++ b/src/screens/HyperSwitch/APIUtils/APIUtilsTypes.res
@@ -17,6 +17,8 @@ type entityName =
   | ANALYTICS_SYSTEM_METRICS
   | PAYMENT_LOGS
   | SDK_EVENT_LOGS
+  | WEBHOOKS_EVENT_LOGS
+  | CONNECTOR_EVENT_LOGS
   | GENERATE_SAMPLE_DATA
   | USERS
   | RECON
diff --git a/src/screens/HyperSwitch/PaymentLogs/PaymentLogs.res b/src/screens/HyperSwitch/PaymentLogs/PaymentLogs.res
index f7644cf63..55a3d89e7 100644
--- a/src/screens/HyperSwitch/PaymentLogs/PaymentLogs.res
+++ b/src/screens/HyperSwitch/PaymentLogs/PaymentLogs.res
@@ -1,8 +1,20 @@
-open OrderUtils
-open APIUtils
-open LogicUtils
 @module("js-sha256") external sha256: string => string = "sha256"
+
+open PaymentLogsTypes
+let getLogType = dict => {
+  if dict->Dict.get("connector_name")->Option.isSome {
+    CONNECTOR
+  } else if dict->Dict.get("request_id")->Option.isSome {
+    PAYMENTS
+  } else if dict->Dict.get("component")->Option.isSome {
+    SDK
+  } else {
+    WEBHOOKS
+  }
+}
+
 module PrettyPrintJson = {
+  open LogicUtils
   @react.component
   let make = (
     ~jsonToDisplay,
@@ -13,7 +25,6 @@ module PrettyPrintJson = {
     let showToast = ToastState.useShowToast()
     let (isTextVisible, setIsTextVisible) = React.useState(_ => false)
     let (parsedJson, setParsedJson) = React.useState(_ => "")
-
     let parseJsonValue = () => {
       try {
         let parsedValue = jsonToDisplay->Js.Json.parseExn->Js.Json.stringifyWithSpace(3)
@@ -34,11 +45,11 @@ module PrettyPrintJson = {
 
     let copyParsedJson =
       <div onClick={_ => handleOnClickCopy(~parsedValue=parsedJson)} className="cursor-pointer">
-        <img src={`/assets/CopyToClipboard.svg`} />
+        <Icon name="copy-code" />
       </div>
 
-    <div className="flex flex-col gap-2  my-2">
-      <UIUtils.RenderIf condition={parsedJson->String.length > 0}>
+    <div className="flex flex-col gap-2">
+      <UIUtils.RenderIf condition={parsedJson->isNonEmptyString}>
         {<>
           <UIUtils.RenderIf condition={headerText->Option.isSome}>
             <div className="flex justify-between items-center">
@@ -50,12 +61,9 @@ module PrettyPrintJson = {
           </UIUtils.RenderIf>
           <div className="flex items-start justify-between">
             <pre
-              className={`${overrideBackgroundColor} p-3 text-jp-gray-900 dark:bg-jp-gray-950 dark:bg-opacity-100 ${isTextVisible
-                  ? "overflow-visible "
-                  : `overflow-clip  h-fit ${maxHeightClass}`} text-fs-13 text font-medium`}>
+              className={`${overrideBackgroundColor} p-3 text-jp-gray-900 dark:bg-jp-gray-950 dark:bg-opacity-100 text-fs-13 text font-medium`}>
               {parsedJson->React.string}
             </pre>
-            {copyParsedJson}
           </div>
           <Button
             text={isTextVisible ? "Hide" : "See more"}
@@ -64,7 +72,7 @@ module PrettyPrintJson = {
           />
         </>}
       </UIUtils.RenderIf>
-      <UIUtils.RenderIf condition={parsedJson->String.length === 0}>
+      <UIUtils.RenderIf condition={parsedJson->isEmptyString}>
         <div className="flex flex-col justify-start items-start gap-2 h-25-rem">
           <p className="font-bold text-fs-16 text-jp-gray-900 text-opacity-75">
             {headerText->Option.getWithDefault("")->React.string}
@@ -78,125 +86,167 @@ module PrettyPrintJson = {
   }
 }
 
-type logType = Sdk | Payment
-
 module ApiDetailsComponent = {
+  open LogicUtils
+  open PaymentLogsUtils
   @react.component
   let make = (
     ~paymentDetailsValue,
-    ~setRequestObject,
-    ~setResponseObject,
-    ~setCurrentSelected,
-    ~setCurrentSelectedType,
-    ~currentSelected,
+    ~setLogDetails,
+    ~setSelectedOption,
+    ~currentSelected: int,
     ~paymentId,
     ~index,
     ~logsDataLength,
   ) => {
-    let headerStyle = "text-fs-13 font-medium text-grey-700 break-all"
-    let logType = paymentDetailsValue->Dict.get("request_id")->Option.isSome ? Payment : Sdk
+    let headerStyle = "text-sm font-medium text-gray-700 break-all"
+    let logType = paymentDetailsValue->getLogType
     let apiName = switch logType {
-    | Payment => paymentDetailsValue->getString("api_flow", "default value")->camelCaseToTitle
-    | Sdk => paymentDetailsValue->getString("event_name", "default value")
-    }->PaymentUtils.nameToURLMapper(~payment_id=paymentId, ())
+    | PAYMENTS => paymentDetailsValue->getString("api_flow", "default value")->camelCaseToTitle
+    | SDK => paymentDetailsValue->getString("event_name", "default value")
+    | CONNECTOR => paymentDetailsValue->getString("flow", "default value")->camelCaseToTitle
+    | WEBHOOKS => paymentDetailsValue->getString("outgoing_webhook_event_type", "default value")
+    }->nameToURLMapper(~payment_id=paymentId, ())
     let createdTime = paymentDetailsValue->getString("created_at", "00000")
-    let requestId = switch logType {
-    | Payment => paymentDetailsValue->getString("request_id", "")
-    | Sdk => paymentDetailsValue->getString("event_id", "")
-    }
-
-    let filteredKeys = [
-      "value",
-      "merchant_id",
-      "created_at_precise",
-      "component",
-      "platform",
-      "version",
-    ]
     let requestObject = switch logType {
-    | Payment => paymentDetailsValue->getString("request", "")
-    | Sdk =>
+    | PAYMENTS | CONNECTOR => paymentDetailsValue->getString("request", "")
+    | SDK =>
       paymentDetailsValue
       ->Dict.toArray
       ->Array.filter(entry => {
         let (key, _) = entry
         filteredKeys->Array.includes(key)->not
       })
-      ->Dict.fromArray
-      ->Js.Json.object_
+      ->getJsonFromArrayOfJson
       ->Js.Json.stringify
+    | WEBHOOKS => paymentDetailsValue->getString("outgoing_webhook_event_type", "")
     }
 
     let responseObject = switch logType {
-    | Payment => paymentDetailsValue->getString("response", "")
-    | Sdk => {
+    | PAYMENTS | CONNECTOR => paymentDetailsValue->getString("response", "")
+    | SDK => {
         let isErrorLog = paymentDetailsValue->getString("log_type", "") === "ERROR"
         isErrorLog ? paymentDetailsValue->getString("value", "") : ""
       }
+    | WEBHOOKS => paymentDetailsValue->getString("content", "")
     }
 
     let statusCode = switch logType {
-    | Payment => paymentDetailsValue->getInt("status_code", 200)->Belt.Int.toString
-    | Sdk => paymentDetailsValue->getString("log_type", "INFO")
+    | PAYMENTS | CONNECTOR => paymentDetailsValue->getInt("status_code", 200)->Int.toString
+    | SDK => paymentDetailsValue->getString("log_type", "INFO")
+    | WEBHOOKS => paymentDetailsValue->getBool("is_error", false) ? "500" : "200"
     }
 
     let method = switch logType {
-    | Payment => paymentDetailsValue->getString("http_method", "")
-    | Sdk => ""
+    | PAYMENTS => paymentDetailsValue->getString("http_method", "")
+    | CONNECTOR => paymentDetailsValue->getString("method", "")
+    | SDK => ""
+    | WEBHOOKS => "POST"
     }
 
     let apiPath = switch logType {
-    | Payment => paymentDetailsValue->getString("url_path", "")
-    | Sdk => ""
+    | PAYMENTS => paymentDetailsValue->getString("url_path", "")
+    | CONNECTOR => paymentDetailsValue->getString("flow", "")
+    | WEBHOOKS =>
+      paymentDetailsValue->getString("outgoing_webhook_event_type", "")->String.toLocaleUpperCase
+    | SDK => ""
+    }
+
+    let background_color = switch logType {
+    | SDK =>
+      switch statusCode {
+      | "INFO" => "blue-700"
+      | "ERROR" => "red-400"
+      | "WARNING" => "yellow-800"
+      | _ => "gray-700 opacity-50"
+      }
+    | WEBHOOKS =>
+      switch statusCode {
+      | "200" => "green-700"
+      | "500" | _ => "gray-700 opacity-50"
+      }
+    | PAYMENTS | CONNECTOR =>
+      switch statusCode {
+      | "200" => "green-700"
+      | "500" => "gray-700 opacity-50"
+      | "400" => "yellow-800"
+      | _ => "gray-700 opacity-50"
+      }
     }
 
-    let background_color = switch (logType, statusCode) {
-    | (Sdk, "INFO") => "blue-700"
-    | (Payment, "200") => "green-700"
-    | (Sdk, "WARNING")
-    | (Payment, "400") => "yellow-800"
-    | (Sdk, "ERROR")
-    | (Payment, "500") => "red-800"
-    | _ => "grey-700 opacity-50"
+    let isSelected = currentSelected === index
+    let stepColor = isSelected ? background_color : "gray-300"
+
+    let boxShadowOnSelection = isSelected
+      ? "border border-blue-700 rounded-md"
+      : "border border-transparent"
+
+    let codeBg = switch logType {
+    | SDK =>
+      switch statusCode {
+      | "INFO" => "blue-100"
+      | "ERROR" => "red-200"
+      | "WARNING" => "yellow-100"
+      | _ => "gray-100"
+      }
+    | WEBHOOKS =>
+      switch statusCode {
+      | "200" => "green-200"
+      | "500" | _ => "gray-100"
+      }
+    | PAYMENTS | CONNECTOR =>
+      switch statusCode {
+      | "200" => "green-200"
+      | "500" => "gray-100"
+      | "400" => "yellow-100"
+      | _ => "gray-100"
+      }
     }
-    let stepColor =
-      currentSelected->String.length > 0 && currentSelected === requestId
-        ? background_color
-        : "gray-300 "
-    let boxShadowOnSelection =
-      currentSelected->String.length > 0 && currentSelected === requestId
-        ? "border border-blue-700 rounded-md shadow-paymentLogsShadow"
-        : "border border-transparent"
 
     <div className="flex items-start gap-4">
       <div className="flex flex-col items-center h-full">
-        <div className={`w-fit h-fit p-1.5  border rounded-full bg-${stepColor} border-gray-300`} />
+        <div className={`w-fit h-fit p-1  border rounded-md bg-${stepColor} border-gray-300`} />
         <UIUtils.RenderIf condition={index !== logsDataLength}>
-          <div className={`h-full bg-${stepColor} w-0.5 my-1`} />
+          <div
+            className={`h-full border-${stepColor} border-dashed rounded divide-x-2 border-2 my-1`}
+          />
         </UIUtils.RenderIf>
       </div>
       <div
-        className={`flex gap-6 items-start w-full p-4 cursor-pointer ${boxShadowOnSelection} -mt-8 mb-8`}
-        key={currentSelected}
+        className={`flex gap-6 items-start w-full py-3 px-3 cursor-pointer ${boxShadowOnSelection} -mt-5 mb-8`}
+        key={currentSelected->string_of_int}
         onClick={_ => {
-          setCurrentSelected(_ => requestId)
-          setRequestObject(_ => requestObject)
-          setResponseObject(_ => responseObject)
-          setCurrentSelectedType(_ => logType)
+          setLogDetails(_ => {
+            response: responseObject,
+            request: requestObject,
+          })
+          setSelectedOption(_ => {
+            value: index,
+            optionType: logType,
+          })
         }}>
         <div className="flex flex-col gap-1">
-          <div className=" flex gap-2">
-            <p className={`text-${background_color} font-bold `}> {statusCode->React.string} </p>
+          <div className=" flex gap-3">
+            <div className={`bg-${codeBg} h-fit w-fit px-2 py-1 rounded-md`}>
+              <p className={`text-${background_color} text-sm opacity-100  font-bold `}>
+                {statusCode->React.string}
+              </p>
+            </div>
             {switch logType {
-            | Sdk => <p className=headerStyle> {apiName->React.string} </p>
-            | Payment =>
-              <p className=headerStyle>
-                <span className="font-bold mr-2"> {method->String.toUpperCase->React.string} </span>
-                <span> {apiPath->React.string} </span>
+            | SDK =>
+              <p className={`${headerStyle} mt-1 ${isSelected ? "" : "opacity-80"}`}>
+                {apiName->camelCaseToTitle->React.string}
+              </p>
+            | PAYMENTS | WEBHOOKS | CONNECTOR =>
+              <p className={`${headerStyle} ${isSelected ? "" : "opacity-80"}`}>
+                <span className="mr-3 border-2 px-1 py-0.5 rounded text-sm">
+                  {method->String.toUpperCase->React.string}
+                </span>
+                <span className="leading-7"> {apiPath->React.string} </span>
               </p>
             }}
           </div>
-          <div className={`${headerStyle} opacity-50`}>
+          <div className={`${headerStyle} opacity-40`}>
             {createdTime->Js.Date.fromString->Js.Date.toUTCString->React.string}
           </div>
         </div>
@@ -204,71 +254,97 @@ module ApiDetailsComponent = {
     </div>
   }
 }
+
 @react.component
 let make = (~paymentId, ~createdAt) => {
+  open APIUtils
+  open LogicUtils
+  open PaymentLogsUtils
   let fetchDetails = useGetMethod(~showErrorToast=false, ())
   let fetchPostDetils = useUpdateMethod()
-  let (paymentLogsData, setPaymentLogsData) = React.useState(_ => [])
-  let (sdkLogsData, setSdkLogsData) = React.useState(_ => [])
-  let (allLogsData, setAllLogsData) = React.useState(_ => [])
-  let (responseObject, setResponseObject) = React.useState(_ => "")
-  let (requestObject, setRequestObject) = React.useState(_ => "")
-  let (currentSelected, setCurrentSelected) = React.useState(_ => "")
-  let (currentSelectedType, setCurrentSelectedType) = React.useState(_ => Payment)
-  let (screenState1, setScreenState1) = React.useState(_ => PageLoaderWrapper.Loading)
-  let (screenState2, setScreenState2) = React.useState(_ => PageLoaderWrapper.Loading)
+  let logs = React.useMemo0(() => {ref([])})
+  let (logDetails, setLogDetails) = React.useState(_ => {
+    response: "",
+    request: "",
+  })
+  let (selectedOption, setSelectedOption) = React.useState(_ => {
+    value: 0,
+    optionType: PAYMENTS,
+  })
+  let (screenState, setScreenState) = React.useState(_ => PageLoaderWrapper.Loading)
 
   let fetchPaymentLogsData = async _ => {
     try {
-      setScreenState1(_ => PageLoaderWrapper.Loading)
-      let paymentLogsUrl = APIUtils.getURL(
+      let paymentLogsUrl = getURL(
         ~entityName=PAYMENT_LOGS,
         ~methodType=Get,
         ~id=Some(paymentId),
         (),
       )
       let paymentLogsArray = (await fetchDetails(paymentLogsUrl))->getArrayFromJson([])
-      setPaymentLogsData(_ => paymentLogsArray)
-
-      // setting initial data
-      let initialData =
-        paymentLogsArray
-        ->Belt.Array.get(0)
-        ->Option.getWithDefault(Js.Json.null)
-        ->getDictFromJsonObject
-      let intialValueRequest = initialData->getString("request", "")
-
-      let intialValueResponse = initialData->getString("response", "")
-      setRequestObject(_ => intialValueRequest)
-      setResponseObject(_ => intialValueResponse)
-      setCurrentSelected(_ => initialData->getString("request_id", ""))
-
-      setScreenState1(_ => PageLoaderWrapper.Success)
+      logs.contents = logs.contents->Array.concat(paymentLogsArray)
+
+      PageLoaderWrapper.Success
     } catch {
     | Js.Exn.Error(e) =>
       let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
-      setScreenState1(_ => PageLoaderWrapper.Error(err))
+      PageLoaderWrapper.Error(err)
     }
   }
 
-  let sourceMapper = source => {
-    switch source {
-    | "ORCA-LOADER" => "HYPERLOADER"
-    | "ORCA-PAYMENT-PAGE"
-    | "STRIPE_PAYMENT_SHEET" => "PAYMENT_SHEET"
-    | other => other
+  let fetchWebhooksLogsData = async _ => {
+    try {
+      let webhooksLogsUrl = getURL(
+        ~entityName=WEBHOOKS_EVENT_LOGS,
+        ~methodType=Get,
+        ~id=Some(paymentId),
+        (),
+      )
+      let webhooksLogsArray = (await fetchDetails(webhooksLogsUrl))->getArrayFromJson([])
+      switch webhooksLogsArray->Array.get(0) {
+      | Some(val) => logs.contents = logs.contents->Array.concat([val])
+      | _ => ()
+      }
+
+      PageLoaderWrapper.Success
+    } catch {
+    | Js.Exn.Error(e) =>
+      let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+      PageLoaderWrapper.Error(err)
     }
   }
 
-  let fetchSdkLogsData = async _ => {
+  let fetchConnectorLogsData = async _ => {
     try {
-      setScreenState2(_ => PageLoaderWrapper.Loading)
-      let url = APIUtils.getURL(
-        ~entityName=SDK_EVENT_LOGS,
-        ~methodType=Post,
+      let connectorLogsUrl = getURL(
+        ~entityName=CONNECTOR_EVENT_LOGS,
+        ~methodType=Get,
         ~id=Some(paymentId),
         (),
       )
+      let connectorLogsArray = (await fetchDetails(connectorLogsUrl))->getArrayFromJson([])
+      logs.contents = logs.contents->Array.concat(connectorLogsArray)
+
+      PageLoaderWrapper.Success
+    } catch {
+    | Js.Exn.Error(e) =>
+      let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
+      PageLoaderWrapper.Error(err)
+    }
+  }
+
+  let fetchSdkLogsData = async _ => {
+    let sourceMapper = source => {
+      switch source {
+      | "ORCA-LOADER" => "HYPERLOADER"
+      | "ORCA-PAYMENTS-PAGE"
+      | "STRIPE_PAYMENT_SHEET" => "PAYMENT_SHEET"
+      | other => other
+      }
+    }
+
+    try {
+      let url = getURL(~entityName=SDK_EVENT_LOGS, ~methodType=Post, ~id=Some(paymentId), ())
       let startTime = createdAt->Js.Date.fromString->Js.Date.getTime -. 1000. *. 60. *. 5.
       let startTime = startTime->Js.Date.fromFloat->Js.Date.toISOString
 
@@ -323,87 +399,180 @@ let make = (~paymentId, ~createdAt) => {
           eventDict->Dict.set("created_at", timestamp->Js.Json.string)
           eventDict->Js.Json.object_
         })
-      setSdkLogsData(_ =>
-        sdkLogsArray->Array.filter(sdkLog => {
-          let eventDict = sdkLog->getDictFromJsonObject
-          let eventName = eventDict->getString("event_name", "")
-          let filteredEventNames = ["StripeElementsCalled"]
-          filteredEventNames->Array.includes(eventName)->not
-        })
-      )
-
-      // setting initial data
-      let initialData =
-        sdkLogsArray->Belt.Array.get(0)->Option.getWithDefault(Js.Json.null)->getDictFromJsonObject
-      let intialValueRequest = initialData->getString("event_name", "")
-
-      let intialValueResponse = initialData->getString("response", "")
-      setRequestObject(_ => intialValueRequest)
-      setResponseObject(_ => intialValueResponse)
-      setCurrentSelected(_ => initialData->getString("event_id", ""))
+      let logsArr = sdkLogsArray->Array.filter(sdkLog => {
+        let eventDict = sdkLog->getDictFromJsonObject
+        let eventName = eventDict->getString("event_name", "")
+        let filteredEventNames = ["StripeElementsCalled"]
+        filteredEventNames->Array.includes(eventName)->not
+      })
+      logs.contents = logs.contents->Array.concat(logsArr)
 
-      setScreenState2(_ => PageLoaderWrapper.Success)
+      PageLoaderWrapper.Success
     } catch {
     | Js.Exn.Error(e) =>
       let err = Js.Exn.message(e)->Option.getWithDefault("Failed to Fetch!")
-      setScreenState2(_ => PageLoaderWrapper.Error(err))
+      PageLoaderWrapper.Error(err)
     }
   }
+
   let getDetails = async () => {
-    try {
-      let _ = await Window.connectorWasmInit()
-      if !(paymentId->HSwitchOrderUtils.isTestPayment) {
-        fetchPaymentLogsData()->ignore
-        fetchSdkLogsData()->ignore
-      } else {
-        setScreenState1(_ => PageLoaderWrapper.Success)
-        setScreenState2(_ => PageLoaderWrapper.Success)
-      }
-    } catch {
-    | Js.Exn.Error(e) => {
-        let err = Js.Exn.message(e)->Option.getWithDefault("Something went wrong")
-        setScreenState1(_ => PageLoaderWrapper.Error(err))
-        setScreenState2(_ => PageLoaderWrapper.Error(err))
-      }
-    }
-  }
+    if !(paymentId->HSwitchOrderUtils.isTestPayment) {
+      let apiLogsStatus = await fetchPaymentLogsData()
+      let sdkLogsStatus = await fetchSdkLogsData()
+      let webhooksStatus = await fetchWebhooksLogsData()
+      let connectorStatus = await fetchConnectorLogsData()
 
-  let sortByCreatedAt = (log1: Js.Json.t, log2: Js.Json.t) => {
-    let keyA = log1->getDictFromJsonObject->getString("created_at", "")->Js.Date.fromString
-    let keyB = log2->getDictFromJsonObject->getString("created_at", "")->Js.Date.fromString
-    if keyA < keyB {
-      1
-    } else if keyA > keyB {
-      -1
+      let screenState = switch (apiLogsStatus, sdkLogsStatus, webhooksStatus, connectorStatus) {
+      | (
+          PageLoaderWrapper.Error(_),
+          PageLoaderWrapper.Error(_),
+          PageLoaderWrapper.Error(_),
+          PageLoaderWrapper.Error(_),
+        ) =>
+        PageLoaderWrapper.Error("Failed to Fetch!")
+      | _ => PageLoaderWrapper.Success
+      }
+      setScreenState(_ => screenState)
     } else {
-      0
+      setScreenState(_ => PageLoaderWrapper.Custom)
     }
   }
 
-  let screenState = React.useMemo2(() => {
-    setAllLogsData(_ =>
-      sdkLogsData->Array.concat(paymentLogsData)->Js.Array2.sortInPlaceWith(sortByCreatedAt)
-    )
-    switch (screenState1, screenState2) {
-    | (PageLoaderWrapper.Success, _)
-    | (_, PageLoaderWrapper.Success) =>
-      PageLoaderWrapper.Success
-    | (PageLoaderWrapper.Loading, _)
-    | (_, PageLoaderWrapper.Loading) =>
-      PageLoaderWrapper.Loading
-    | (PageLoaderWrapper.Error(err), PageLoaderWrapper.Error(_)) => PageLoaderWrapper.Error(err)
-    | _ => PageLoaderWrapper.Loading
+  let screenState = React.useMemo1(() => {
+    logs.contents = logs.contents->Js.Array2.sortInPlaceWith(sortByCreatedAt)
+
+    switch logs.contents->Array.get(0) {
+    | Some(value) => {
+        let initialData = value->getDictFromJsonObject
+        switch initialData->getLogType {
+        | PAYMENTS => {
+            let request = initialData->getString("request", "")
+            let response = initialData->getString("response", "")
+            setLogDetails(_ => {
+              response,
+              request,
+            })
+            setSelectedOption(_ => {
+              value: 0,
+              optionType: PAYMENTS,
+            })
+          }
+        | SDK => {
+            let request =
+              initialData
+              ->Dict.toArray
+              ->Array.filter(entry => {
+                let (key, _) = entry
+                filteredKeys->Array.includes(key)->not
+              })
+              ->getJsonFromArrayOfJson
+              ->Js.Json.stringify
+            let response =
+              initialData->getString("log_type", "") === "ERROR"
+                ? initialData->getString("value", "")
+                : ""
+            setLogDetails(_ => {
+              response,
+              request,
+            })
+            setSelectedOption(_ => {
+              value: 0,
+              optionType: SDK,
+            })
+          }
+        | CONNECTOR => {
+            let request = initialData->getString("request", "")
+            let response = initialData->getString("response", "")
+            setLogDetails(_ => {
+              response,
+              request,
+            })
+            setSelectedOption(_ => {
+              value: 0,
+              optionType: CONNECTOR,
+            })
+          }
+        | WEBHOOKS => {
+            let request = initialData->getString("outgoing_webhook_event_type", "")
+            let response = initialData->getString("content", "")
+            setLogDetails(_ => {
+              response,
+              request,
+            })
+            setSelectedOption(_ => {
+              value: 0,
+              optionType: WEBHOOKS,
+            })
+          }
+        }
+      }
+    | _ => ()
     }
-  }, (screenState1, screenState2))
+
+    screenState
+  }, [screenState])
 
   React.useEffect0(() => {
     getDetails()->ignore
     None
   })
 
+  let headerText = switch selectedOption.optionType {
+  | PAYMENTS | CONNECTOR => "Response body"
+  | WEBHOOKS => "Request body"
+  | SDK => "Metadata"
+  }->Some
+
+  let timeLine =
+    <div className="flex flex-col w-2/5 overflow-y-scroll pt-7 pl-5">
+      <div className="flex flex-col">
+        {logs.contents
+        ->Array.mapWithIndex((paymentDetailsValue, index) => {
+          <ApiDetailsComponent
+            key={index->string_of_int}
+            paymentDetailsValue={paymentDetailsValue->getDictFromJsonObject}
+            setLogDetails
+            setSelectedOption
+            currentSelected=selectedOption.value
+            paymentId
+            index
+            logsDataLength={logs.contents->Array.length - 1}
+          />
+        })
+        ->React.array}
+      </div>
+    </div>
+
+  let requestHeader = switch selectedOption.optionType {
+  | PAYMENTS | CONNECTOR => "Request body"
+  | SDK => "Event"
+  | WEBHOOKS => ""
+  }
+
+  let codeBlock =
+    <UIUtils.RenderIf
+      condition={logDetails.response->isNonEmptyString || logDetails.request->isNonEmptyString}>
+      <div
+        className="flex flex-col gap-4 border-l-1 border-border-light-grey show-scrollbar scroll-smooth overflow-scroll px-5 py-3 w-3/5">
+        <UIUtils.RenderIf
+          condition={logDetails.request->isNonEmptyString &&
+            selectedOption.optionType !== WEBHOOKS}>
+          <PrettyPrintJson
+            jsonToDisplay=logDetails.request
+            headerText={requestHeader->Some}
+            maxHeightClass={logDetails.response->String.length > 0 ? "max-h-25-rem" : ""}
+          />
+        </UIUtils.RenderIf>
+        <UIUtils.RenderIf condition={logDetails.response->isNonEmptyString}>
+          <PrettyPrintJson jsonToDisplay={logDetails.response} headerText />
+        </UIUtils.RenderIf>
+      </div>
+    </UIUtils.RenderIf>
+
+  open OrderUtils
   <PageLoaderWrapper
     screenState customUI={<NoDataFound message="No logs available for this payment" />}>
-    {if paymentId->HSwitchOrderUtils.isTestPayment {
+    {if paymentId->HSwitchOrderUtils.isTestPayment || logs.contents->Array.length === 0 {
       <div
         className="flex items-center gap-2 bg-white w-full border-2 p-3 !opacity-100 rounded-lg text-md font-medium">
         <Icon name="info-circle-unfilled" size=16 />
@@ -413,49 +582,9 @@ let make = (~paymentId, ~createdAt) => {
       </div>
     } else {
       <Section
-        customCssClass={`bg-white dark:bg-jp-gray-lightgray_background rounded-md pt-2 pb-4 px-10 flex gap-16 justify-between h-48-rem !max-h-50-rem !min-w-[55rem] overflow-scroll`}>
-        <div className="flex flex-col w-1/2 gap-12 overflow-y-scroll">
-          <p className="text-lightgray_background font-semibold text-fs-16">
-            {"Audit Trail"->React.string}
-          </p>
-          <div className="flex flex-col">
-            {allLogsData
-            ->Array.mapWithIndex((paymentDetailsValue, index) => {
-              <ApiDetailsComponent
-                key={index->string_of_int}
-                paymentDetailsValue={paymentDetailsValue->getDictFromJsonObject}
-                setResponseObject
-                setRequestObject
-                currentSelected
-                setCurrentSelected
-                setCurrentSelectedType
-                paymentId
-                index
-                logsDataLength={allLogsData->Array.length - 1}
-              />
-            })
-            ->React.array}
-          </div>
-        </div>
-        <UIUtils.RenderIf
-          condition={responseObject->String.length > 0 || requestObject->String.length > 0}>
-          <div
-            className="flex flex-col gap-4 bg-hyperswitch_background rounded show-scrollbar scroll-smooth overflow-scroll px-8 py-4 w-1/2">
-            <UIUtils.RenderIf condition={requestObject->String.length > 0}>
-              <PrettyPrintJson
-                jsonToDisplay=requestObject
-                headerText={Some(currentSelectedType === Payment ? "Request body" : "Event")}
-                maxHeightClass={responseObject->String.length > 0 ? "max-h-25-rem" : ""}
-              />
-            </UIUtils.RenderIf>
-            <UIUtils.RenderIf condition={responseObject->String.length > 0}>
-              <PrettyPrintJson
-                jsonToDisplay=responseObject
-                headerText={Some(currentSelectedType === Payment ? "Response body" : "Metadata")}
-              />
-            </UIUtils.RenderIf>
-          </div>
-        </UIUtils.RenderIf>
+        customCssClass={`bg-white dark:bg-jp-gray-lightgray_background rounded-md pt-2 pb-4 flex gap-7 justify-between h-48-rem !max-h-50-rem !min-w-[55rem] max-w-[72rem] overflow-scroll`}>
+        {timeLine}
+        {codeBlock}
       </Section>
     }}
   </PageLoaderWrapper>
diff --git a/src/screens/HyperSwitch/PaymentLogs/PaymentLogsTypes.res b/src/screens/HyperSwitch/PaymentLogs/PaymentLogsTypes.res
new file mode 100644
index 000000000..433c8e72b
--- /dev/null
+++ b/src/screens/HyperSwitch/PaymentLogs/PaymentLogsTypes.res
@@ -0,0 +1,11 @@
+type logType = SDK | PAYMENTS | WEBHOOKS | CONNECTOR
+
+type logDetails = {
+  response: string,
+  request: string,
+}
+
+type selectedObj = {
+  value: int,
+  optionType: logType,
+}
diff --git a/src/screens/HyperSwitch/PaymentLogs/PaymentUtils.res b/src/screens/HyperSwitch/PaymentLogs/PaymentLogsUtils.res
similarity index 57%
rename from src/screens/HyperSwitch/PaymentLogs/PaymentUtils.res
rename to src/screens/HyperSwitch/PaymentLogs/PaymentLogsUtils.res
index c0b1be064..a5b5a3191 100644
--- a/src/screens/HyperSwitch/PaymentLogs/PaymentUtils.res
+++ b/src/screens/HyperSwitch/PaymentLogs/PaymentLogsUtils.res
@@ -10,3 +10,20 @@ let nameToURLMapper = (urlName, ~payment_id, ~merchant_id="", ()) => {
   | _ => urlName
   }
 }
+
+let filteredKeys = [
+  "value",
+  "merchant_id",
+  "created_at_precise",
+  "component",
+  "platform",
+  "version",
+]
+
+let sortByCreatedAt = (log1: Js.Json.t, log2: Js.Json.t) => {
+  open LogicUtils
+  let getKey = dict => dict->getDictFromJsonObject->getString("created_at", "")->Js.Date.fromString
+  let keyA = log1->getKey
+  let keyB = log2->getKey
+  compareLogic(keyA, keyB)
+}
diff --git a/src/utils/LogicUtils.res b/src/utils/LogicUtils.res
index 617268ce6..7fbdc57a9 100644
--- a/src/utils/LogicUtils.res
+++ b/src/utils/LogicUtils.res
@@ -492,6 +492,8 @@ let isEmptyDict = dict => {
 
 let isEmptyString = str => str->String.length === 0
 
+let isNonEmptyString = str => str->String.length > 0
+
 let stringReplaceAll = (str, old, new) => {
   str->String.split(old)->Array.joinWith(new)
 }
@@ -587,8 +589,8 @@ let getJsonFromStr = data => {
 external toExnJson: exn => Js.Json.t = "%identity"
 
 let compareLogic = (firstValue, secondValue) => {
-  let (temp1, _) = firstValue
-  let (temp2, _) = secondValue
+  let temp1 = firstValue
+  let temp2 = secondValue
   if temp1 == temp2 {
     0
   } else if temp1 > temp2 {
diff --git a/tailwindHyperSwitch.config.js b/tailwindHyperSwitch.config.js
index 3766ecf0b..b01ead6f6 100644
--- a/tailwindHyperSwitch.config.js
+++ b/tailwindHyperSwitch.config.js
@@ -413,6 +413,7 @@ module.exports = {
           1000: "#A7A0A0",
           failed_page_bg: "#FDEDE8",
         },
+        "error-red": "#DA0E0F",
         "status-green": "#36AF47",
         "popover-background": "#334264",
         "popover-background-hover": "#2E3B58",