From 2619d419607f2c52021875abd388ead861187098 Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <1805317@kiit.ac.in>
Date: Fri, 15 Dec 2023 19:19:18 +0530
Subject: [PATCH 1/2] feat: Show Details Paymentb Enhancement

---
 .../HyperSwitch/Order/OrderUIUtils.res        |  6 +--
 src/screens/HyperSwitch/Order/ShowOrder.res   | 43 +++++++++++++-----
 .../HyperSwitch/PaymentLogs/PaymentLogs.res   | 45 +++++++++++--------
 3 files changed, 58 insertions(+), 36 deletions(-)

diff --git a/src/screens/HyperSwitch/Order/OrderUIUtils.res b/src/screens/HyperSwitch/Order/OrderUIUtils.res
index 2514bd116..49fa5ba7e 100644
--- 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
index 6a438365a..bb8945edf 100644
--- 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
index c7de1280b..c8914b75b 100644
--- 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>

From 746228afd43c17beeef791cc30c3613094856562 Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <1805317@kiit.ac.in>
Date: Fri, 15 Dec 2023 19:22:25 +0530
Subject: [PATCH 2/2] feat: dead code removal

---
 src/screens/HyperSwitch/Order/OrderEntity.res | 114 +-----------------
 1 file changed, 1 insertion(+), 113 deletions(-)

diff --git a/src/screens/HyperSwitch/Order/OrderEntity.res b/src/screens/HyperSwitch/Order/OrderEntity.res
index e169b398f..65583afef 100644
--- a/src/screens/HyperSwitch/Order/OrderEntity.res
+++ b/src/screens/HyperSwitch/Order/OrderEntity.res
@@ -1,35 +1,6 @@
 open OrderTypes
 open LogicUtils
 
-let getDateCreatedObject = () => {
-  let currentDate = Js.Date.now()
-  let filterCreatedDict = Js.Dict.empty()
-  let currentTimestamp = currentDate->Js.Date.fromFloat->Js.Date.toISOString
-  Js.Dict.set(
-    filterCreatedDict,
-    "lte",
-    Js.Json.string(currentTimestamp->TimeZoneHook.formattedISOString("YYYY-MM-DDTHH:mm:[00][Z]")),
-  )
-
-  let prevMins = {
-    let presentDayInString = Js.Date.fromFloat(currentDate)
-    let prevDateInFloat = Js.Date.getMinutes(presentDayInString) -. 30.0
-    Js.Date.setMinutes(presentDayInString, prevDateInFloat)
-  }
-
-  Js.Dict.set(
-    filterCreatedDict,
-    "gte",
-    Js.Json.string(
-      prevMins
-      ->Js.Date.fromFloat
-      ->Js.Date.toISOString
-      ->TimeZoneHook.formattedISOString("YYYY-MM-DDTHH:mm:[00][Z]"),
-    ),
-  )
-
-  Js.Json.object_(filterCreatedDict)
-}
 module CurrencyCell = {
   @react.component
   let make = (~amount, ~currency) => {
@@ -785,38 +756,7 @@ let getCell = (order, colType: colType): Table.cell => {
   }
 }
 
-let ordersDefaultCols = Recoil.atom(. "hyperSwitchOrderDefaultCols", defaultColumns)
-
-let getOptionsArr = optionObjArr => {
-  optionObjArr->Js.Array2.map(item => {
-    let temp: EntityType.optionType<'t> = {
-      urlKey: item.urlKey,
-      field: FormRenderer.makeFieldInfo(
-        ~label=item.label,
-        ~name=item.urlKey,
-        ~customInput=InputFields.textInput(),
-        (),
-      ),
-      parser: val => {
-        val
-      },
-      localFilter: None,
-    }
-    temp
-  })
-}
-
-// let options: array<EntityType.optionType<'t>> = getOptionsArr(optionObj)
-
-let getDefaultFilters = dateCreatedObject => {
-  let dict = Js.Dict.empty()
-  let filtersDict = Js.Dict.empty()
-  Js.Dict.set(filtersDict, "dateCreated", dateCreatedObject)
-  Js.Dict.set(dict, "offset", Js.Json.number(0.0))
-  Js.Dict.set(dict, "filters", Js.Json.object_(filtersDict))
-
-  Js.Json.object_(dict)
-}
+let _ = Recoil.atom(. "hyperSwitchOrderDefaultCols", defaultColumns)
 
 let itemToObjMapperForFRMDetails = dict => {
   {
@@ -888,58 +828,6 @@ let itemToObjMapper = dict => {
   }
 }
 
-let datePickerField = (~limit) => {
-  FormRenderer.makeMultiInputFieldInfo(
-    ~label="Date Range",
-    ~comboCustomInput=InputFields.dateRangeField(
-      ~startKey="filters.dateCreated.gte",
-      ~endKey="filters.dateCreated.lte",
-      ~format="YYYY-MM-DDTHH:mm:ss[Z]",
-      ~showTime=true,
-      ~disablePastDates={false},
-      ~disableFutureDates={true},
-      ~predefinedDays=[
-        Hour(0.5),
-        Hour(1.0),
-        Hour(6.0),
-        Today,
-        Yesterday,
-        Day(2.0),
-        Day(7.0),
-        Day(30.0),
-        ThisMonth,
-        LastMonth,
-      ],
-      ~numMonths=2,
-      ~disableApply=false,
-      ~dateRangeLimit=limit,
-      ~optFieldKey="filters.dateCreated.opt",
-      (),
-    ),
-    ~inputFields=[],
-    ~isRequired=true,
-    (),
-  )
-}
-
-/* let initialFilterFields: array<EntityType.initialFilters<'t>> = [
-  {
-    field: makeFieldInfo(
-      ~label="Customer Id",
-      ~name="customer_id",
-      ~customInput=orderFilterInput(),
-      ~parse=Parsers.arrayParser,
-      ~format=Formatter.numericArrayStringFormat,
-      (),
-    ),
-    localFilter: None,
-  },
-  {
-    localFilter: None,
-    field: datePickerField(~limit=7),
-  },
-] */
-
 let getOrders: Js.Json.t => array<order> = json => {
   getArrayDataFromJson(json, itemToObjMapper)
 }