feat: refunds success distribution (#1935)

src/screens/NewAnalytics/NewRefundsAnalytics/NewRefundsAnalytics.res

@@ -8,6 +8,10 @@ let make = () => {
     <RefundsSuccessRate
       entity={refundsSuccessRateEntity} chartEntity={refundsSuccessRateChartEntity}
     />
+    <SuccessfulRefundsDistribution
+      entity={successfulRefundsDistributionEntity}
+      chartEntity={successfulRefundsDistributionChartEntity}
+    />
     <RefundsReasons entity={refundsReasonsEntity} />
   </div>
 }

src/screens/NewAnalytics/NewRefundsAnalytics/NewRefundsAnalyticsEntity.res

@@ -59,6 +59,39 @@ let refundsSuccessRateChartEntity: chartEntity<
   getObjects: RefundsSuccessRateUtils.refundsSuccessRateMapper,
   getChatOptions: LineGraphUtils.getLineGraphOptions,
 }
+// Successful Refunds Distribution
+let successfulRefundsDistributionEntity: moduleEntity = {
+  requestBodyConfig: {
+    delta: false,
+    groupBy: [#connector],
+    metrics: [#sessionized_refund_count, #sessionized_refund_success_count],
+  },
+  title: "Successful Refunds Distribution By Connector",
+  domain: #refunds,
+}
+
+let successfulRefundsDistributionChartEntity: chartEntity<
+  BarGraphTypes.barGraphPayload,
+  BarGraphTypes.barGraphOptions,
+  JSON.t,
+> = {
+  getObjects: SuccessfulRefundsDistributionUtils.successfulRefundsDistributionMapper,
+  getChatOptions: BarGraphUtils.getBarGraphOptions,
+}
+
+let successfulRefundsDistributionTableEntity = {
+  open SuccessfulRefundsDistributionUtils
+  EntityType.makeEntity(
+    ~uri=``,
+    ~getObjects,
+    ~dataKey="queryData",
+    ~defaultColumns=[],
+    ~requiredSearchFieldsList=[],
+    ~allColumns=[],
+    ~getCell,
+    ~getHeading,
+  )
+}
 
 // Refunds Reasons
 let refundsReasonsEntity: moduleEntity = {

src/screens/NewAnalytics/NewRefundsAnalytics/SuccessfulRefundsDistribution/SuccessfulRefundsDistribution.res

@@ -0,0 +1,139 @@
+open NewAnalyticsTypes
+open NewAnalyticsHelper
+open NewRefundsAnalyticsEntity
+open BarGraphTypes
+open SuccessfulRefundsDistributionUtils
+open SuccessfulRefundsDistributionTypes
+
+module TableModule = {
+  @react.component
+  let make = (~data, ~className="") => {
+    let (offset, setOffset) = React.useState(_ => 0)
+    let defaultSort: Table.sortedObject = {
+      key: "",
+      order: Table.INC,
+    }
+
+    let visibleColumns = [Connector, Refunds_Success_Rate]
+    let tableData = getTableData(data)
+
+    <div className>
+      <LoadedTable
+        visibleColumns
+        title=" "
+        hideTitle=true
+        actualData={tableData}
+        entity=successfulRefundsDistributionTableEntity
+        resultsPerPage=10
+        totalResults={tableData->Array.length}
+        offset
+        setOffset
+        defaultSort
+        currrentFetchCount={tableData->Array.length}
+        tableLocalFilter=false
+        tableheadingClass=tableBorderClass
+        tableBorderClass
+        ignoreHeaderBg=true
+        tableDataBorderClass=tableBorderClass
+        isAnalyticsModule=true
+      />
+    </div>
+  }
+}
+
+module SuccessfulRefundsDistributionHeader = {
+  @react.component
+  let make = (~viewType, ~setViewType) => {
+    let setViewType = value => {
+      setViewType(_ => value)
+    }
+
+    <div className="w-full px-8 pt-3 pb-3  flex justify-end">
+      <div className="flex gap-2">
+        <TabSwitch viewType setViewType />
+      </div>
+    </div>
+  }
+}
+
+@react.component
+let make = (
+  ~entity: moduleEntity,
+  ~chartEntity: chartEntity<barGraphPayload, barGraphOptions, JSON.t>,
+) => {
+  open LogicUtils
+  open APIUtils
+  let getURL = useGetURL()
+  let updateDetails = useUpdateMethod()
+  let {filterValueJson} = React.useContext(FilterContext.filterContext)
+  let (screenState, setScreenState) = React.useState(_ => PageLoaderWrapper.Loading)
+  let (refundsDistribution, setrefundsDistribution) = React.useState(_ => JSON.Encode.array([]))
+  let (viewType, setViewType) = React.useState(_ => Graph)
+  let startTimeVal = filterValueJson->getString("startTime", "")
+  let endTimeVal = filterValueJson->getString("endTime", "")
+
+  let getRefundsDistribution = async () => {
+    setScreenState(_ => PageLoaderWrapper.Loading)
+    try {
+      let url = getURL(
+        ~entityName=ANALYTICS_REFUNDS,
+        ~methodType=Post,
+        ~id=Some((entity.domain: domain :> string)),
+      )
+
+      let body = NewAnalyticsUtils.requestBody(
+        ~startTime=startTimeVal,
+        ~endTime=endTimeVal,
+        ~delta=entity.requestBodyConfig.delta,
+        ~metrics=entity.requestBodyConfig.metrics,
+        ~groupByNames=[Connector->getStringFromVariant]->Some,
+      )
+
+      let response = await updateDetails(url, body, Post)
+
+      let responseData =
+        response->getDictFromJsonObject->getArrayFromDict("queryData", [])->modifyQuery
+
+      if responseData->Array.length > 0 {
+        setrefundsDistribution(_ => responseData->JSON.Encode.array)
+        setScreenState(_ => PageLoaderWrapper.Success)
+      } else {
+        setScreenState(_ => PageLoaderWrapper.Custom)
+      }
+    } catch {
+    | _ => setScreenState(_ => PageLoaderWrapper.Custom)
+    }
+  }
+
+  React.useEffect(() => {
+    if startTimeVal->isNonEmptyString && endTimeVal->isNonEmptyString {
+      getRefundsDistribution()->ignore
+    }
+    None
+  }, [startTimeVal, endTimeVal])
+
+  let params = {
+    data: refundsDistribution,
+    xKey: Refunds_Success_Rate->getStringFromVariant,
+    yKey: Connector->getStringFromVariant,
+  }
+
+  <div>
+    <ModuleHeader title={entity.title} />
+    <Card>
+      <PageLoaderWrapper
+        screenState customLoader={<Shimmer layoutId=entity.title />} customUI={<NoData />}>
+        <SuccessfulRefundsDistributionHeader viewType setViewType />
+        <div className="mb-5">
+          {switch viewType {
+          | Graph =>
+            <BarGraph
+              entity={chartEntity} object={chartEntity.getObjects(~params)} className="mr-3"
+            />
+          | Table => <TableModule data={refundsDistribution} className="mx-7" />
+          }}
+        </div>
+      </PageLoaderWrapper>
+    </Card>
+  </div>
+}

src/screens/NewAnalytics/NewRefundsAnalytics/SuccessfulRefundsDistribution/SuccessfulRefundsDistributionTypes.res

@@ -0,0 +1,12 @@
+type successfulRefundsDistributionTypes =
+  | Refunds_Success_Rate
+  | Refund_Count
+  | Refund_Success_Count
+  | Connector
+
+type successfulRefundsDistributionObject = {
+  refund_count: int,
+  refund_success_count: int,
+  refunds_success_rate: float,
+  connector: string,
+}

src/screens/NewAnalytics/NewRefundsAnalytics/SuccessfulRefundsDistribution/SuccessfulRefundsDistributionUtils.res

@@ -0,0 +1,108 @@
+open NewAnalyticsUtils
+open LogicUtils
+open SuccessfulRefundsDistributionTypes
+
+let getStringFromVariant = value => {
+  switch value {
+  | Refunds_Success_Rate => "refunds_success_rate"
+  | Refund_Count => "refund_count"
+  | Refund_Success_Count => "refund_success_count"
+  | Connector => "connector"
+  }
+}
+
+let successfulRefundsDistributionMapper = (
+  ~params: NewAnalyticsTypes.getObjects<JSON.t>,
+): BarGraphTypes.barGraphPayload => {
+  open BarGraphTypes
+  let {data, xKey, yKey} = params
+  let categories = [data]->JSON.Encode.array->getCategories(0, yKey)
+
+  let barGraphData = getBarGraphObj(
+    ~array=data->getArrayFromJson([]),
+    ~key=xKey,
+    ~name=xKey->snakeToTitle,
+    ~color=barGreenColor,
+  )
+
+  let title = {
+    text: "",
+  }
+
+  let tooltipFormatter = bargraphTooltipFormatter(
+    ~title="Successful Refunds Distribution",
+    ~metricType=Rate,
+  )
+
+  {
+    categories,
+    data: [barGraphData],
+    title,
+    tooltipFormatter,
+  }
+}
+
+let tableItemToObjMapper: Dict.t<JSON.t> => successfulRefundsDistributionObject = dict => {
+  {
+    refund_count: dict->getInt(Refund_Count->getStringFromVariant, 0),
+    refund_success_count: dict->getInt(Refund_Success_Count->getStringFromVariant, 0),
+    refunds_success_rate: dict->getFloat(Refunds_Success_Rate->getStringFromVariant, 0.0),
+    connector: dict->getString(Connector->getStringFromVariant, ""),
+  }
+}
+
+let getObjects: JSON.t => array<successfulRefundsDistributionObject> = json => {
+  json
+  ->LogicUtils.getArrayFromJson([])
+  ->Array.map(item => {
+    tableItemToObjMapper(item->getDictFromJsonObject)
+  })
+}
+
+let getHeading = colType => {
+  switch colType {
+  | Refunds_Success_Rate =>
+    Table.makeHeaderInfo(
+      ~key=Refunds_Success_Rate->getStringFromVariant,
+      ~title="Refunds Success Rate",
+      ~dataType=TextType,
+    )
+  | Connector =>
+    Table.makeHeaderInfo(
+      ~key=Connector->getStringFromVariant,
+      ~title="Connector",
+      ~dataType=TextType,
+    )
+  | _ => Table.makeHeaderInfo(~key="", ~title="", ~dataType=TextType)
+  }
+}
+
+let getCell = (obj, colType): Table.cell => {
+  switch colType {
+  | Refunds_Success_Rate => Text(obj.refunds_success_rate->valueFormatter(Rate))
+  | Connector => Text(obj.connector)
+  | _ => Text("")
+  }
+}
+
+let getTableData = json => {
+  json->getArrayDataFromJson(tableItemToObjMapper)->Array.map(Nullable.make)
+}
+
+let modifyQuery = query => {
+  query->Array.map(value => {
+    let valueDict = value->getDictFromJsonObject
+    let refund_count = valueDict->getInt(Refund_Count->getStringFromVariant, 0)->Int.toFloat
+    let refund_success_count =
+      valueDict->getInt(Refund_Success_Count->getStringFromVariant, 0)->Int.toFloat
+
+    let refunds_success_rate = refund_success_count /. refund_count *. 100.0
+
+    valueDict->Dict.set(
+      Refunds_Success_Rate->getStringFromVariant,
+      refunds_success_rate->JSON.Encode.float,
+    )
+
+    valueDict->JSON.Encode.object
+  })
+}