Merge branch 'main' into add-email-support

CHANGELOG.md

@@ -3,6 +3,38 @@ All notable changes to this project will be documented in this file. See [conven
 
 - - -
 
+## 2025.01.20.1
+
+### Features
+
+- New analytics filters feature flag ([#2084](https://github.com/juspay/hyperswitch-control-center/pull/2084)) ([`b60da23`](https://github.com/juspay/hyperswitch-control-center/commit/b60da231df1ad01e073e9f2d6334e7a0724ab739))
+
+**Full Changelog:** [`2025.01.20.0...2025.01.20.1`](https://github.com/juspay/hyperswitch-control-center/compare/2025.01.20.0...2025.01.20.1)
+
+- - -
+
+## 2025.01.20.0
+
+### Features
+
+- Sidebar changes for modularity ([#2063](https://github.com/juspay/hyperswitch-control-center/pull/2063)) ([`5073b70`](https://github.com/juspay/hyperswitch-control-center/commit/5073b70bd0515f5ea0d78411845fd10b0142fee2))
+
+### Bug Fixes
+
+- Invitation error message ([#2076](https://github.com/juspay/hyperswitch-control-center/pull/2076)) ([`08cfdf9`](https://github.com/juspay/hyperswitch-control-center/commit/08cfdf9f5c43e9d6bdf436390e2de18e4fc275a3))
+
+### Refactors
+
+- Moved Graphs folder to components ([#2079](https://github.com/juspay/hyperswitch-control-center/pull/2079)) ([`6dda7ad`](https://github.com/juspay/hyperswitch-control-center/commit/6dda7ad09b17b1c3d2710f9732c485efaa8b3f56))
+
+### Miscellaneous Tasks
+
+- Change Bar graph component ([#2081](https://github.com/juspay/hyperswitch-control-center/pull/2081)) ([`280bb72`](https://github.com/juspay/hyperswitch-control-center/commit/280bb72fc88d2f53c0a90dd8923f877efa25e964))
+
+**Full Changelog:** [`2025.01.17.0...2025.01.20.0`](https://github.com/juspay/hyperswitch-control-center/compare/2025.01.17.0...2025.01.20.0)
+
+- - -
+
 ## 2025.01.17.0
 
 ### Features

config/config.toml

@@ -47,6 +47,7 @@ performance_monitor=false
 new_analytics=false
 new_analytics_smart_retries=false
 new_analytics_refunds=false
+new_analytics_filters=false
 down_time=false
 dev_theme_feature=false
 tax_processor=true

src/components/CardTable.res

@@ -1,9 +1,11 @@
 module TextCard = {
   @react.component
   let make = (~text) => {
-    if String.length(String.trim(text)) > 0 {
+    if text->LogicUtils.isNonEmptyString {
       <p className="break-words font-semibold">
-        {React.string(String.length(String.trim(text)) > 0 ? text : "N/A")}
+        <HelperComponents.EllipsisText
+          endValue=10 displayValue={text->LogicUtils.isNonEmptyString ? text : "N/A"} showCopy=false
+        />
       </p>
     } else {
       React.string("-")

src/components/Graphs/BarGraph/BarGraph.res

@@ -0,0 +1,7 @@
+external barGraphOptionsToJson: BarGraphTypes.barGraphOptions => JSON.t = "%identity"
+@react.component
+let make = (~options: BarGraphTypes.barGraphOptions, ~className="") => {
+  <div className>
+    <Highcharts.Chart options={options->barGraphOptionsToJson} highcharts={Highcharts.highcharts} />
+  </div>
+}

src/screens/NewAnalytics/Graphs/BarGraph/BarGraphUtils.res → src/components/Graphs/BarGraph/BarGraphUtils.res

@@ -2,7 +2,6 @@
 let fontFamily = "Arial, sans-serif"
 let darkGray = "#666666"
 let gridLineColor = "#e6e6e6"
-
 open BarGraphTypes
 let getBarGraphOptions = (barGraphOptions: barGraphPayload) => {
   let {categories, data, title, tooltipFormatter} = barGraphOptions

src/components/LoadedTable.res

@@ -896,15 +896,13 @@ let make = (
           <AdvancedSearchModal searchFields url=searchUrl entity />
         </RenderIf>
       }}
-      <DesktopView>
-        {switch tableActions {
-        | Some(actions) =>
-          <LoadedTableContext value={actualData->LoadedTableContext.toInfoData}>
-            <div className=filterBottomPadding> actions </div>
-          </LoadedTableContext>
-        | None => React.null
-        }}
-      </DesktopView>
+      {switch tableActions {
+      | Some(actions) =>
+        <LoadedTableContext value={actualData->LoadedTableContext.toInfoData}>
+          <div className=filterBottomPadding> actions </div>
+        </LoadedTableContext>
+      | None => React.null
+      }}
     </div>
 
   let addDataAttributesClass = if isHighchartLegend {
@@ -988,10 +986,10 @@ let make = (
             : tableDataBackgroundClass}`}>
         paginationUI
         {
-          let topBottomActions = if bottomActions->Option.isSome || !isMobileView {
+          let topBottomActions = if bottomActions->Option.isSome{
             bottomActions
           } else {
-            tableActions
+            None
           }
 
           switch topBottomActions {

src/entryPoints/FeatureFlagUtils.res

@@ -39,6 +39,7 @@ type featureFlag = {
   newAnalytics: bool,
   newAnalyticsSmartRetries: bool,
   newAnalyticsRefunds: bool,
+  newAnalyticsFilters: bool,
   downTime: bool,
   taxProcessor: bool,
   xFeatureRoute: bool,
@@ -90,6 +91,7 @@ let featureFlagType = (featureFlags: JSON.t) => {
     newAnalytics: dict->getBool("new_analytics", false),
     newAnalyticsSmartRetries: dict->getBool("new_analytics_smart_retries", false),
     newAnalyticsRefunds: dict->getBool("new_analytics_refunds", false),
+    newAnalyticsFilters: dict->getBool("new_analytics_filters", false),
     downTime: dict->getBool("down_time", false),
     taxProcessor: dict->getBool("tax_processor", false),
     xFeatureRoute: dict->getBool("x_feature_route", false),

src/screens/Developer/APIKeys/KeyManagement.res

@@ -181,14 +181,18 @@ module ApiKeyAddBtn = {
     let (showModal, setShowModal) = React.useState(_ => false)
     let initialValues = Dict.make()
     initialValues->Dict.set("expiration", Never->getStringFromRecordType->JSON.Encode.string)
+    let isMobileView = MatchMedia.useMobileChecker()
+
 
     <>
       <ApiEditModal showModal setShowModal initialValues getAPIKeyDetails />
       <ACLButton
         text="Create New API Key"
         leftIcon={CustomIcon(
           <Icon
-            name="plus" size=12 className="jp-gray-900 fill-opacity-50 dark:jp-gray-text_darktheme"
+            name="plus"
+            size=12
+            className="jp-gray-900 fill-opacity-50 mr-2 mb-1 dark:jp-gray-text_darktheme"
           />,
         )}
         // TODO: Remove `MerchantDetailsManage` permission in future
@@ -197,7 +201,8 @@ module ApiKeyAddBtn = {
           userHasAccess(~groupAccess=AccountManage),
         )}
         buttonType=Secondary
-        buttonSize=Small
+        buttonSize={isMobileView ? XSmall : Small}
+        customTextSize={isMobileView ? "text-xs" : ""}
         onClick={_ => {
           mixpanelEvent(~eventName="create_new_api_key")
           setShowModal(_ => true)
@@ -354,7 +359,7 @@ module ApiKeysTable = {
     <PageLoaderWrapper screenState>
       {<div className="relative mt-10 md:mt-0">
         <h2
-          className="font-bold absolute top-0 md:top-10 left-0 text-xl pb-3 text-black text-opacity-75 dark:text-white dark:text-opacity-75">
+          className="font-bold absolute top-2 md:top-6 left-0 text-xl text-black text-opacity-75 dark:text-white dark:text-opacity-75">
           {"API Keys"->React.string}
         </h2>
         <LoadedTable
@@ -368,7 +373,7 @@ module ApiKeysTable = {
           offset
           setOffset
           currrentFetchCount={data->Array.length}
-          tableActions={<div className="mt-5">
+          tableActions={<div className="mt-0 md:mt-5">
             <ApiKeyAddBtn getAPIKeyDetails />
           </div>}
         />

src/screens/Developer/APIKeys/PublishableAndHashKeySection.res

@@ -37,7 +37,7 @@ let make = () => {
       <div
         className="px-2 py-4 border border-jp-gray-500 dark:border-jp-gray-960 bg-white dark:bg-jp-gray-lightgray_background rounded-md">
         <FormRenderer.DesktopRow>
-          <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-1 md:gap-4 mb-4 md:mb-0">
             <div className="flex">
               <div className="break-all text-md text-base text-grey-700 font-semibold">
                 {"Publishable Key"->React.string}
@@ -59,18 +59,18 @@ let make = () => {
             </div>
             <HelperComponents.CopyTextCustomComp
               displayValue={merchantInfo.publishable_key}
-              customTextCss="break-all text-sm font-semibold text-jp-gray-800 text-opacity-75"
+              customTextCss="break-all text-sm truncate md:whitespace-normal font-semibold text-jp-gray-800 text-opacity-75"
               customParentClass="flex items-center gap-5"
             />
           </div>
           <RenderIf condition={paymentResponsHashKey->String.length !== 0}>
-            <div className="flex flex-col gap-4">
+            <div className="flex flex-col gap-2 md:gap-4">
               <div className="break-all text-md text-base text-grey-700 font-semibold">
                 {"Payment Response Hash Key"->React.string}
               </div>
               <HelperComponents.CopyTextCustomComp
                 displayValue={paymentResponsHashKey}
-                customTextCss="break-all text-sm font-semibold text-jp-gray-800 text-opacity-75"
+                customTextCss="break-all truncate md:whitespace-normal text-sm font-semibold text-jp-gray-800 text-opacity-75"
                 customParentClass="flex items-center gap-5"
               />
             </div>

src/screens/Helpers/HelperComponents.res

@@ -72,11 +72,13 @@ module EllipsisText = {
           <p className="">
             {`${displayValue->String.slice(~start=0, ~end=endValue)}`->React.string}
           </p>
-          <span
-            className={`flex text-blue-811 text-sm font-extrabold ${customTextStyle}`}
-            onClick={ev => handleClick(ev)}>
-            {"..."->React.string}
-          </span>
+          <RenderIf condition={displayValue->String.length > endValue}>
+            <span
+              className={`flex text-blue-811 text-sm font-extrabold ${customTextStyle}`}
+              onClick={ev => handleClick(ev)}>
+              {"..."->React.string}
+            </span>
+          </RenderIf>
         </div>
       </RenderIf>
     </div>

src/screens/NewAnalytics/NewRefundsAnalytics/FailedRefundsDistribution/FailedRefundsDistribution.res

@@ -144,6 +144,8 @@ let make = (
     yKey: Connector->getStringFromVariant,
   }
 
+  let options = chartEntity.getChatOptions(chartEntity.getObjects(~params))
+
   <div>
     <ModuleHeader title={entity.title} />
     <Card>
@@ -152,10 +154,7 @@ let make = (
         <FailedRefundsDistributionHeader viewType setViewType />
         <div className="mb-5">
           {switch viewType {
-          | Graph =>
-            <BarGraph
-              entity={chartEntity} object={chartEntity.getObjects(~params)} className="mr-3"
-            />
+          | Graph => <BarGraph options className="mr-3" />
           | Table => <TableModule data={refundsDistribution} className="mx-7" />
           }}
         </div>

src/screens/NewAnalytics/NewRefundsAnalytics/NewRefundsAnalytics.res

@@ -1,11 +1,14 @@
 @react.component
 let make = () => {
   open NewRefundsAnalyticsEntity
+  let {newAnalyticsFilters} = HyperswitchAtom.featureFlagAtom->Recoil.useRecoilValueFromAtom
 
   <div className="flex flex-col gap-14 mt-5 pt-7">
-    <div className="flex gap-2">
-      <NewAnalyticsFilters domain={#refunds} entityName={ANALYTICS_REFUNDS} />
-    </div>
+    <RenderIf condition={newAnalyticsFilters}>
+      <div className="flex gap-2">
+        <NewAnalyticsFilters domain={#refunds} entityName={ANALYTICS_REFUNDS} />
+      </div>
+    </RenderIf>
     <RefundsOverviewSection entity={overviewSectionEntity} />
     <RefundsProcessed entity={refundsProcessedEntity} chartEntity={refundsProcessedChartEntity} />
     <RefundsSuccessRate

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

@@ -121,6 +121,8 @@ let make = (
     yKey: Connector->getStringFromVariant,
   }
 
+  let options = chartEntity.getChatOptions(chartEntity.getObjects(~params))
+
   <div>
     <ModuleHeader title={entity.title} />
     <Card>
@@ -129,10 +131,7 @@ let make = (
         <SuccessfulRefundsDistributionHeader viewType setViewType />
         <div className="mb-5">
           {switch viewType {
-          | Graph =>
-            <BarGraph
-              entity={chartEntity} object={chartEntity.getObjects(~params)} className="mr-3"
-            />
+          | Graph => <BarGraph options className="mr-3" />
           | Table => <TableModule data={refundsDistribution} className="mx-7" />
           }}
         </div>

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

@@ -4,6 +4,7 @@ open NewPaymentAnalyticsEntity
 open BarGraphTypes
 open FailedPaymentsDistributionUtils
 open NewPaymentAnalyticsUtils
+
 module TableModule = {
   @react.component
   let make = (~data, ~className="", ~selectedTab: string) => {
@@ -137,11 +138,15 @@ let make = (
     }
     None
   }, [startTimeVal, endTimeVal, groupBy.value, currency])
+
   let params = {
     data: failedPaymentsDistribution,
     xKey: Payments_Failure_Rate_Distribution->getKeyForModule(~isSmartRetryEnabled),
     yKey: groupBy.value,
   }
+
+  let options = chartEntity.getChatOptions(chartEntity.getObjects(~params))
+
   <div>
     <ModuleHeader title={entity.title} />
     <Card>
@@ -150,10 +155,7 @@ let make = (
         <FailedPaymentsDistributionHeader viewType setViewType groupBy setGroupBy />
         <div className="mb-5">
           {switch viewType {
-          | Graph =>
-            <BarGraph
-              entity={chartEntity} object={chartEntity.getObjects(~params)} className="mr-3"
-            />
+          | Graph => <BarGraph options className="mr-3" />
           | Table =>
             <TableModule
               data={failedPaymentsDistribution} className="mx-7" selectedTab={groupBy.value}

src/screens/NewAnalytics/PaymentAnalytics/NewPaymentAnalytics.res

@@ -1,11 +1,14 @@
 @react.component
 let make = () => {
   open NewPaymentAnalyticsEntity
+  let {newAnalyticsFilters} = HyperswitchAtom.featureFlagAtom->Recoil.useRecoilValueFromAtom
 
   <div className="flex flex-col gap-14 mt-5 pt-7">
     <div className="flex gap-2">
       <NewAnalyticsHelper.SmartRetryToggle />
-      <NewAnalyticsFilters domain={#payments} entityName={ANALYTICS_PAYMENTS} />
+      <RenderIf condition={newAnalyticsFilters}>
+        <NewAnalyticsFilters domain={#payments} entityName={ANALYTICS_PAYMENTS} />
+      </RenderIf>
     </div>
     <NewPaymentsOverviewSection entity={overviewSectionEntity} />
     <PaymentsLifeCycle

src/screens/NewAnalytics/PaymentAnalytics/SuccessfulPaymentsDistribution/SuccessfulPaymentsDistribution.res

@@ -4,6 +4,7 @@ open NewPaymentAnalyticsEntity
 open BarGraphTypes
 open SuccessfulPaymentsDistributionUtils
 open NewPaymentAnalyticsUtils
+
 module TableModule = {
   open LogicUtils
   @react.component
@@ -142,6 +143,8 @@ let make = (
     yKey: groupBy.value,
   }
 
+  let options = chartEntity.getChatOptions(chartEntity.getObjects(~params))
+
   <div>
     <ModuleHeader title={entity.title} />
     <Card>
@@ -150,10 +153,7 @@ let make = (
         <SuccessfulPaymentsDistributionHeader viewType setViewType groupBy setGroupBy />
         <div className="mb-5">
           {switch viewType {
-          | Graph =>
-            <BarGraph
-              entity={chartEntity} object={chartEntity.getObjects(~params)} className="mr-3"
-            />
+          | Graph => <BarGraph options className="mr-3" />
           | Table =>
             <TableModule data={paymentsDistribution} className="mx-7" selectedTab={groupBy.value} />
           }}