chore: refunds analytics v2 file refactor (#1913)

src/screens/NewAnalytics/NewAnalyticsHelper.res

@@ -1,3 +1,4 @@
+let tableBorderClass = "border-2 border-solid  border-jp-gray-940 border-collapse border-opacity-30 dark:border-jp-gray-dark_table_border_color dark:border-opacity-30"
 module Card = {
   @react.component
   let make = (~children) => {
@@ -259,3 +260,51 @@ module SmartRetryToggle = {
     </div>
   }
 }
+
+module OverViewStat = {
+  open NewAnalyticsUtils
+  open NewAnalyticsTypes
+  @react.component
+  let make = (
+    ~responseKey,
+    ~data,
+    ~config: singleStatConfig,
+    ~getValueFromObj,
+    ~getStringFromVariant,
+  ) => {
+    open LogicUtils
+    let {filterValueJson} = React.useContext(FilterContext.filterContext)
+    let comparison = filterValueJson->getString("comparison", "")->DateRangeUtils.comparisonMapprer
+
+    let primaryValue = getValueFromObj(data, 0, responseKey->getStringFromVariant)
+    let secondaryValue = getValueFromObj(data, 1, responseKey->getStringFromVariant)
+
+    let (value, direction) = calculatePercentageChange(~primaryValue, ~secondaryValue)
+
+    let displyValue = valueFormatter(primaryValue, config.valueType)
+    let suffix = config.valueType == Amount ? "USD" : ""
+
+    <Card>
+      <div className="p-6 flex flex-col gap-4 justify-between h-full gap-auto relative">
+        <div className="flex justify-between w-full items-end">
+          <div className="flex gap-1 items-center">
+            <div className="font-bold text-3xl"> {`${displyValue} ${suffix}`->React.string} </div>
+            <div className="scale-[0.9]">
+              <RenderIf condition={comparison === EnableComparison}>
+                <StatisticsCard
+                  value
+                  direction
+                  tooltipValue={`${valueFormatter(secondaryValue, config.valueType)} ${suffix}`}
+                />
+              </RenderIf>
+            </div>
+          </div>
+        </div>
+        <div className={"flex flex-col gap-1  text-black"}>
+          <div className="font-semibold  dark:text-white"> {config.titleText->React.string} </div>
+          <div className="opacity-50 text-sm"> {config.description->React.string} </div>
+        </div>
+      </div>
+    </Card>
+  }
+}

src/screens/NewAnalytics/NewAnalyticsTypes.res

@@ -15,6 +15,8 @@ type dimension = [
   | #card_network
   | #authentication_type
   | #error_reason
+  | #refund_error_message
+  | #refund_reason
 ]
 type status = [#charged | #failure]
 type metrics = [
@@ -28,6 +30,13 @@ type metrics = [
   | #payments_distribution
   | #payment_success_rate
   | #failure_reasons
+  | // Refunds
+  #sessionized_refund_processed_amount
+  | #sessionized_refund_success_count
+  | #sessionized_refund_success_rate
+  | #sessionized_refund_count
+  | #sessionized_refund_error_message
+  | #sessionized_refund_reason
 ]
 type granularity = [
   | #G_ONEDAY
@@ -74,3 +83,9 @@ type valueType =
 type metricType =
   | Smart_Retry
   | Default
+
+type singleStatConfig = {
+  titleText: string,
+  description: string,
+  valueType: valueType,
+}

src/screens/NewAnalytics/NewAnalyticsUtils.res

@@ -174,6 +174,7 @@ let getToolTipConparision = (~primaryValue, ~secondaryValue) => {
 }
 
 open LogicUtils
+// removes the NA buckets
 let filterQueryData = (query, key) => {
   query->Array.filter(data => {
     let valueDict = data->getDictFromJsonObject
@@ -307,3 +308,143 @@ let bargraphTooltipFormatter = (~title, ~metricType) => {
     }
   )->asTooltipPointFormatter
 }
+
+let getColor = index => {
+  [blue, green]->Array.get(index)->Option.getOr(blue)
+}
+
+let getAmountValue = (data, ~id) => {
+  switch data->getOptionFloat(id) {
+  | Some(value) => value /. 100.0
+  | _ => 0.0
+  }
+}
+
+let getLineGraphObj = (
+  ~array: array<JSON.t>,
+  ~key: string,
+  ~name: string,
+  ~color,
+  ~isAmount=false,
+): LineGraphTypes.dataObj => {
+  let data = array->Array.map(item => {
+    let dict = item->getDictFromJsonObject
+    if isAmount {
+      dict->getAmountValue(~id=key)
+    } else {
+      dict->getFloat(key, 0.0)
+    }
+  })
+  let dataObj: LineGraphTypes.dataObj = {
+    showInLegend: true,
+    name,
+    data,
+    color,
+  }
+  dataObj
+}
+
+let getLineGraphData = (data, ~xKey, ~yKey, ~isAmount=false) => {
+  data
+  ->getArrayFromJson([])
+  ->Array.mapWithIndex((item, index) => {
+    let name = getLabelName(~key=yKey, ~index, ~points=item)
+    let color = index->getColor
+    getLineGraphObj(~array=item->getArrayFromJson([]), ~key=xKey, ~name, ~color, ~isAmount)
+  })
+}
+
+let tooltipFormatter = (
+  ~secondaryCategories,
+  ~title,
+  ~metricType,
+  ~comparison: option<DateRangeUtils.comparison>=None,
+) => {
+  open LineGraphTypes
+
+  (
+    @this
+    (this: pointFormatter) => {
+      let title = `<div style="font-size: 16px; font-weight: bold;">${title}</div>`
+
+      let defaultValue = {color: "", x: "", y: 0.0, point: {index: 0}}
+      let primartPoint = this.points->getValueFromArray(0, defaultValue)
+      let secondaryPoint = this.points->getValueFromArray(1, defaultValue)
+
+      // TODO:Currency need to be picked from filter
+      let suffix = metricType == NewAnalyticsTypes.Amount ? "USD" : ""
+
+      let getRowsHtml = (~iconColor, ~date, ~value, ~comparisionComponent="") => {
+        let valueString = valueFormatter(value, metricType)
+        `<div style="display: flex; align-items: center;">
+            <div style="width: 10px; height: 10px; background-color:${iconColor}; border-radius:3px;"></div>
+            <div style="margin-left: 8px;">${date}${comparisionComponent}</div>
+            <div style="flex: 1; text-align: right; font-weight: bold;margin-left: 25px;">${valueString} ${suffix}</div>
+        </div>`
+      }
+
+      let tableItems = [
+        getRowsHtml(
+          ~iconColor=primartPoint.color,
+          ~date=primartPoint.x,
+          ~value=primartPoint.y,
+          ~comparisionComponent={
+            switch comparison {
+            | Some(value) =>
+              value == DateRangeUtils.EnableComparison
+                ? getToolTipConparision(
+                    ~primaryValue=primartPoint.y,
+                    ~secondaryValue=secondaryPoint.y,
+                  )
+                : ""
+            | None => ""
+            }
+          },
+        ),
+        {
+          switch comparison {
+          | Some(value) =>
+            value == DateRangeUtils.EnableComparison
+              ? getRowsHtml(
+                  ~iconColor=secondaryPoint.color,
+                  ~date=secondaryCategories->getValueFromArray(secondaryPoint.point.index, ""),
+                  ~value=secondaryPoint.y,
+                )
+              : ""
+          | None => ""
+          }
+        },
+      ]->Array.joinWith("")
+
+      let content = `
+          <div style=" 
+          padding:5px 12px;
+          border-left: 3px solid #0069FD;
+          display:flex;
+          flex-direction:column;
+          justify-content: space-between;
+          gap: 7px;">
+              ${title}
+              <div style="
+                margin-top: 5px;
+                display:flex;
+                flex-direction:column;
+                gap: 7px;">
+                ${tableItems}
+              </div>
+        </div>`
+
+      `<div style="
+    padding: 10px;
+    width:fit-content;
+    border-radius: 7px;
+    background-color:#FFFFFF;
+    padding:10px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+    border: 1px solid #E5E5E5;
+    position:relative;">
+        ${content}
+    </div>`
+    }
+  )->asTooltipPointFormatter
+}

src/screens/NewAnalytics/PaymentAnalytics/FailedPaymentsDistribution/FailedPaymentsDistribution.res

@@ -20,7 +20,6 @@ module TableModule = {
       key: "",
       order: Table.INC,
     }
-    let tableBorderClass = "border-2 border-solid  border-jp-gray-940 border-collapse border-opacity-30 dark:border-jp-gray-dark_table_border_color dark:border-opacity-30"
 
     let defaultCol = isSmartRetryEnbldForFailedPmtDist(isSmartRetryEnabled)
     let visibleColumns = [selectedTab->getColumn]->Array.concat([defaultCol])

src/screens/NewAnalytics/PaymentAnalytics/FailureReasonsPayments/FailureReasonsPayments.res

@@ -13,7 +13,6 @@ module TableModule = {
       key: "",
       order: Table.INC,
     }
-    let tableBorderClass = "border-2 border-solid  border-jp-gray-940 border-collapse border-opacity-30 dark:border-jp-gray-dark_table_border_color dark:border-opacity-30"
 
     let defaultCols = [Error_Reason, Failure_Reason_Count, Reasons_Count_Ratio]
     let extraTabs = selectedTab->String.split(",")->Array.map(getColumn)

src/screens/NewAnalytics/PaymentAnalytics/NewPaymentAnalyticsUtils.res

@@ -82,102 +82,6 @@ let modifyDataWithMissingPoints = (
   })
 }
 
-let tooltipFormatter = (
-  ~secondaryCategories,
-  ~title,
-  ~metricType,
-  ~comparison: option<DateRangeUtils.comparison>=None,
-) => {
-  open LineGraphTypes
-  open NewAnalyticsUtils
-
-  (
-    @this
-    (this: pointFormatter) => {
-      let title = `<div style="font-size: 16px; font-weight: bold;">${title}</div>`
-
-      let defaultValue = {color: "", x: "", y: 0.0, point: {index: 0}}
-      let primartPoint = this.points->getValueFromArray(0, defaultValue)
-      let secondaryPoint = this.points->getValueFromArray(1, defaultValue)
-
-      // TODO:Currency need to be picked from filter
-      let suffix = metricType == NewAnalyticsTypes.Amount ? "USD" : ""
-
-      let getRowsHtml = (~iconColor, ~date, ~value, ~comparisionComponent="") => {
-        let valueString = valueFormatter(value, metricType)
-        `<div style="display: flex; align-items: center;">
-            <div style="width: 10px; height: 10px; background-color:${iconColor}; border-radius:3px;"></div>
-            <div style="margin-left: 8px;">${date}${comparisionComponent}</div>
-            <div style="flex: 1; text-align: right; font-weight: bold;margin-left: 25px;">${valueString} ${suffix}</div>
-        </div>`
-      }
-
-      let tableItems = [
-        getRowsHtml(
-          ~iconColor=primartPoint.color,
-          ~date=primartPoint.x,
-          ~value=primartPoint.y,
-          ~comparisionComponent={
-            switch comparison {
-            | Some(value) =>
-              value == DateRangeUtils.EnableComparison
-                ? getToolTipConparision(
-                    ~primaryValue=primartPoint.y,
-                    ~secondaryValue=secondaryPoint.y,
-                  )
-                : ""
-            | None => ""
-            }
-          },
-        ),
-        {
-          switch comparison {
-          | Some(value) =>
-            value == DateRangeUtils.EnableComparison
-              ? getRowsHtml(
-                  ~iconColor=secondaryPoint.color,
-                  ~date=secondaryCategories->getValueFromArray(secondaryPoint.point.index, ""),
-                  ~value=secondaryPoint.y,
-                )
-              : ""
-          | None => ""
-          }
-        },
-      ]->Array.joinWith("")
-
-      let content = `
-          <div style=" 
-          padding:5px 12px;
-          border-left: 3px solid #0069FD;
-          display:flex;
-          flex-direction:column;
-          justify-content: space-between;
-          gap: 7px;">
-              ${title}
-              <div style="
-                margin-top: 5px;
-                display:flex;
-                flex-direction:column;
-                gap: 7px;">
-                ${tableItems}
-              </div>
-        </div>`
-
-      `<div style="
-    padding: 10px;
-    width:fit-content;
-    border-radius: 7px;
-    background-color:#FFFFFF;
-    padding:10px;
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
-    border: 1px solid #E5E5E5;
-    position:relative;">
-        ${content}
-    </div>`
-    }
-  )->asTooltipPointFormatter
-}
-
 let getSmartRetryMetricType = isSmartRetryEnabled => {
   open NewAnalyticsTypes
   switch isSmartRetryEnabled {