feat: Show Details Paymentb Enhancement

juspay · Dec 15, 2023 · 2619d41 · 2619d41
1 parent e27d91b
commit 2619d41
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 36 deletions.
diff --git a/src/screens/HyperSwitch/Order/OrderUIUtils.res b/src/screens/HyperSwitch/Order/OrderUIUtils.res
@@ -19,16 +19,12 @@ module PaymentLogs = {
   let make = (~id, ~createdAt) => {
     let {auditTrail} = HyperswitchAtom.featureFlagAtom->Recoil.useRecoilValueFromAtom
     let isSmallDevice = MatchMedia.useMatchMedia("(max-width: 700px)")
-    let showPaymentLogsComp = auditTrail
 
     <div className="overflow-x-scroll">
-      <UIUtils.RenderIf condition={!isSmallDevice && showPaymentLogsComp}>
-        {HSwitchOrderUtils.eventLogHeader}
-      </UIUtils.RenderIf>
       <UIUtils.RenderIf condition={isSmallDevice}>
         <EventLogMobileView />
       </UIUtils.RenderIf>
-      <UIUtils.RenderIf condition={!isSmallDevice && showPaymentLogsComp}>
+      <UIUtils.RenderIf condition={!isSmallDevice && auditTrail}>
         <PaymentLogs paymentId=id createdAt />
       </UIUtils.RenderIf>
     </div>

diff --git a/src/screens/HyperSwitch/Order/ShowOrder.res b/src/screens/HyperSwitch/Order/ShowOrder.res
@@ -147,17 +147,6 @@ module OrderInfo = {
           </div>
         </div>
       </UIUtils.RenderIf>
-      <UIUtils.RenderIf condition={isMetadata && !(order.metadata->LogicUtils.isEmptyDict)}>
-        <div className="mb-10">
-          <div className="bg-white p-5 border rounded-md">
-            <PaymentLogs.PrettyPrintJson
-              jsonToDisplay={order.metadata->Js.Json.stringifyAny->Belt.Option.getWithDefault("")}
-              headerText="Payment Metadata"
-              overrideBackgroundColor="bg-white"
-            />
-          </div>
-        </div>
-      </UIUtils.RenderIf>
       <UIUtils.RenderIf condition={isMetadata}>
         <div className="mb-10">
           <Details
@@ -808,7 +797,37 @@ let make = (~id) => {
           />
         </div>
         <UIUtils.RenderIf condition={featureFlagDetails.auditTrail}>
-          <OrderUIUtils.PaymentLogs id createdAt />
+          <RenderAccordian
+            accordion={[
+              {
+                title: "Events and logs",
+                renderContent: () => {
+                  <OrderUIUtils.PaymentLogs id createdAt />
+                },
+                renderContentOnTop: None,
+              },
+            ]}
+          />
+        </UIUtils.RenderIf>
+        <UIUtils.RenderIf condition={!(order.metadata->LogicUtils.isEmptyDict)}>
+          <RenderAccordian
+            accordion={[
+              {
+                title: "Payment Metadata",
+                renderContent: () => {
+                  <div className="bg-white p-2">
+                    <PaymentLogs.PrettyPrintJson
+                      jsonToDisplay={order.metadata
+                      ->Js.Json.stringifyAny
+                      ->Belt.Option.getWithDefault("")}
+                      overrideBackgroundColor="bg-white"
+                    />
+                  </div>
+                },
+                renderContentOnTop: None,
+              },
+            ]}
+          />
         </UIUtils.RenderIf>
         <RenderAccordian
           accordion={[

diff --git a/src/screens/HyperSwitch/PaymentLogs/PaymentLogs.res b/src/screens/HyperSwitch/PaymentLogs/PaymentLogs.res
@@ -6,7 +6,7 @@ module PrettyPrintJson = {
   @react.component
   let make = (
     ~jsonToDisplay,
-    ~headerText,
+    ~headerText=None,
     ~maxHeightClass="max-h-25-rem",
     ~overrideBackgroundColor="bg-hyperswitch_background",
   ) => {
@@ -34,30 +34,37 @@ module PrettyPrintJson = {
       showToast(~message="Copied to Clipboard!", ~toastType=ToastSuccess, ())
       hyperswitchMixPanel(
         ~pageName=`${url.path->getListHead}`,
-        ~contextName=`${headerText->toCamelCase}`,
+        ~contextName=`${headerText->Belt.Option.getWithDefault("")->toCamelCase}`,
         ~actionName="copied",
         (),
       )
     }
 
+    let copyParsedJson =
+      <div onClick={_ => handleOnClickCopy(~parsedValue=parsedJson)} className="cursor-pointer">
+        <img src={`/assets/CopyToClipboard.svg`} />
+      </div>
+
     <div className="flex flex-col gap-2  my-2">
       <UIUtils.RenderIf condition={parsedJson->Js.String2.length > 0}>
         {<>
-          <div className="flex justify-between items-center">
-            <p className="font-bold text-fs-16 text-jp-gray-900 text-opacity-75">
-              {headerText->React.string}
-            </p>
-            <div
-              onClick={_ => handleOnClickCopy(~parsedValue=parsedJson)} className="cursor-pointer">
-              <img src={`/assets/CopyToClipboard.svg`} />
+          <UIUtils.RenderIf condition={headerText->Belt.Option.isSome}>
+            <div className="flex justify-between items-center">
+              <p className="font-bold text-fs-16 text-jp-gray-900 text-opacity-75">
+                {headerText->Belt.Option.getWithDefault("")->React.string}
+              </p>
+              {copyParsedJson}
             </div>
+          </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`}>
+              {parsedJson->React.string}
+            </pre>
+            {copyParsedJson}
           </div>
-          <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`}>
-            {parsedJson->React.string}
-          </pre>
           <Button
             text={isTextVisible ? "Hide" : "See more"}
             customButtonStyle="h-6 w-8 flex flex-1 justify-center m-1"
@@ -68,7 +75,7 @@ module PrettyPrintJson = {
       <UIUtils.RenderIf condition={parsedJson->Js.String2.length === 0}>
         <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->React.string}
+            {headerText->Belt.Option.getWithDefault("")->React.string}
           </p>
           <p className="font-normal text-fs-14 text-jp-gray-900 text-opacity-50">
             {"Failed to load!"->React.string}
@@ -405,7 +412,7 @@ let make = (~paymentId, ~createdAt) => {
       </div>
     } else {
       <Section
-        customCssClass={`border border-jp-gray-940 border-opacity-75 bg-white dark:bg-jp-gray-lightgray_background rounded-md p-10 flex gap-16 justify-between h-48-rem !max-h-50-rem !min-w-[55rem] overflow-scroll`}>
+        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}
@@ -436,14 +443,14 @@ let make = (~paymentId, ~createdAt) => {
             <UIUtils.RenderIf condition={requestObject->Js.String2.length > 0}>
               <PrettyPrintJson
                 jsonToDisplay=requestObject
-                headerText={currentSelectedType === Payment ? "Request body" : "Event"}
+                headerText={Some(currentSelectedType === Payment ? "Request body" : "Event")}
                 maxHeightClass={responseObject->Js.String2.length > 0 ? "max-h-25-rem" : ""}
               />
             </UIUtils.RenderIf>
             <UIUtils.RenderIf condition={responseObject->Js.String2.length > 0}>
               <PrettyPrintJson
                 jsonToDisplay=responseObject
-                headerText={currentSelectedType === Payment ? "Response body" : "Metadata"}
+                headerText={Some(currentSelectedType === Payment ? "Response body" : "Metadata")}
               />
             </UIUtils.RenderIf>
           </div>