feat: payments overview section (#1552)

juspay · Oct 7, 2024 · 06dae63 · 06dae63
1 parent 6a9e9ab
commit 06dae63
Show file tree

Hide file tree

Showing 14 changed files with 506 additions and 82 deletions.
diff --git a/cypress/e2e/connector/connector.cy.js b/cypress/e2e/connector/connector.cy.js
@@ -29,20 +29,14 @@ describe("connector", () => {
   it("Create a dummy connector", () => {
     cy.url().should("include", "/dashboard/home");
 
-    cy.get('[data-form-label="Business name"]').should(
-      "exist",
-    );
-    cy.get("[data-testid=merchant_name]").type(
-      "test_business",
-    );
+    cy.get('[data-form-label="Business name"]').should("exist");
+    cy.get("[data-testid=merchant_name]").type("test_business");
     cy.get("[data-button-for=startExploring]").click();
     cy.reload(true);
     cy.get("[data-testid=connectors]").click();
     cy.get("[data-testid=paymentprocessors]").click();
     cy.contains("Payment Processors").should("be.visible");
-    cy.contains("Connect a Dummy Processor").should(
-      "be.visible",
-    );
+    cy.contains("Connect a Dummy Processor").should("be.visible");
     cy.get("[data-button-for=connectNow]").click({
       force: true,
     });
@@ -52,9 +46,7 @@ describe("connector", () => {
       .find("button")
       .should("have.length", 4);
     cy.contains("Stripe Dummy").should("be.visible");
-    cy.get('[data-testid="stripe_test"]')
-      .find("button")
-      .click({ force: true });
+    cy.get('[data-testid="stripe_test"]').find("button").click({ force: true });
     cy.url().should("include", "/dashboard/connectors");
     cy.contains("Credentials").should("be.visible");
     cy.get("[name=connector_account_details\\.api_key]")

diff --git a/public/hyperswitch/assets/smart-retry.svg b/public/hyperswitch/assets/smart-retry.svg
diff --git a/src/entryPoints/AuthModule/Common/CommonAuth.res b/src/entryPoints/AuthModule/Common/CommonAuth.res
@@ -1,24 +1,24 @@
 module TermsAndCondition = {
   @react.component
   let make = () => {
-  <AddDataAttributes attributes=[("data-testid", "tc-text")]>
-    <div id="tc-text" className="text-center text-sm text-gray-300">
-      {"By continuing, you agree to our "->React.string}
-      <a
-        className="underline cursor-pointer"
-        href="https://hyperswitch.io/terms-of-services"
-        target="__blank">
-        {"Terms of Service"->React.string}
-      </a>
-      {" & "->React.string}
-      <a
-        className="underline cursor-pointer"
-        href="https://hyperswitch.io/privacyPolicy"
-        target="__blank">
-        {"Privacy Policy"->React.string}
-      </a>
-    </div>
-   </AddDataAttributes>
+    <AddDataAttributes attributes=[("data-testid", "tc-text")]>
+      <div id="tc-text" className="text-center text-sm text-gray-300">
+        {"By continuing, you agree to our "->React.string}
+        <a
+          className="underline cursor-pointer"
+          href="https://hyperswitch.io/terms-of-services"
+          target="__blank">
+          {"Terms of Service"->React.string}
+        </a>
+        {" & "->React.string}
+        <a
+          className="underline cursor-pointer"
+          href="https://hyperswitch.io/privacyPolicy"
+          target="__blank">
+          {"Privacy Policy"->React.string}
+        </a>
+      </div>
+    </AddDataAttributes>
   }
 }
 
@@ -28,12 +28,12 @@ module PageFooterSection = {
     <div
       className="justify-center text-base flex flex-col md:flex-row md:gap-3 items-center py-5 md:py-7">
       <AddDataAttributes attributes=[("data-testid", "footer")]>
-          <div id="footer" className="flex items-center gap-2">
-            {"An open-source initiative by "->React.string}
-            <a href="https://juspay.in/" target="__blank">
-              <img alt="juspay-logo" src={`/icons/juspay-logo-dark.svg`} className="h-3" />
-            </a>
-          </div>
+        <div id="footer" className="flex items-center gap-2">
+          {"An open-source initiative by "->React.string}
+          <a href="https://juspay.in/" target="__blank">
+            <img alt="juspay-logo" src={`/icons/juspay-logo-dark.svg`} className="h-3" />
+          </a>
+        </div>
       </AddDataAttributes>
     </div>
   }
@@ -82,17 +82,17 @@ module Header = {
       <div className="flex text-sm items-center gap-2">
         <div className="text-grey-650"> {prefix->React.string} </div>
         <AddDataAttributes attributes=[("data-testid", "card-subtitle")]>
-            <div
-              onClick={_ => {
-                form.resetFieldState("email")
-                form.reset(JSON.Encode.object(Dict.make())->Nullable.make)
-                setAuthType(_ => authType)
-                GlobalVars.appendDashboardPath(~url=path)->RescriptReactRouter.push
-              }}
-              id="card-subtitle"
-              className={`font-semibold ${textColor.primaryNormal} cursor-pointer`}>
-              {sufix->React.string}
-            </div>
+          <div
+            onClick={_ => {
+              form.resetFieldState("email")
+              form.reset(JSON.Encode.object(Dict.make())->Nullable.make)
+              setAuthType(_ => authType)
+              GlobalVars.appendDashboardPath(~url=path)->RescriptReactRouter.push
+            }}
+            id="card-subtitle"
+            className={`font-semibold ${textColor.primaryNormal} cursor-pointer`}>
+            {sufix->React.string}
+          </div>
         </AddDataAttributes>
       </div>
     }
@@ -119,9 +119,9 @@ module Header = {
         </div>
       </RenderIf>
       <AddDataAttributes attributes=[("data-testid", "card-header")]>
-          <h1 id="card-header" className="font-semibold text-xl md:text-2xl">
-            {cardHeaderText->React.string}
-          </h1>
+        <h1 id="card-header" className="font-semibold text-xl md:text-2xl">
+          {cardHeaderText->React.string}
+        </h1>
       </AddDataAttributes>
       {switch authType {
       | LoginWithPassword | LoginWithEmail =>

diff --git a/src/entryPoints/AuthModule/TwoFaAuth/TwoFaAuth.res b/src/entryPoints/AuthModule/TwoFaAuth/TwoFaAuth.res
@@ -292,24 +292,24 @@ let make = (~setAuthStatus, ~authType, ~setAuthType) => {
           | _ => React.null
           }}
           <AddDataAttributes attributes=[("data-testid", "auth-submit-btn")]>
-              <div id="auth-submit-btn" className="flex flex-col gap-2">
-                {switch authType {
-                | LoginWithPassword
-                | LoginWithEmail
-                | ResetPassword
-                | ForgetPassword
-                | ResendVerifyEmail
-                | SignUP =>
-                  <FormRenderer.SubmitButton
-                    customSumbitButtonStyle="!w-full !rounded"
-                    text=submitBtnText
-                    userInteractionRequired=true
-                    showToolTip=false
-                    loadingText="Loading..."
-                  />
-                | _ => React.null
-                }}
-              </div>
+            <div id="auth-submit-btn" className="flex flex-col gap-2">
+              {switch authType {
+              | LoginWithPassword
+              | LoginWithEmail
+              | ResetPassword
+              | ForgetPassword
+              | ResendVerifyEmail
+              | SignUP =>
+                <FormRenderer.SubmitButton
+                  customSumbitButtonStyle="!w-full !rounded"
+                  text=submitBtnText
+                  userInteractionRequired=true
+                  showToolTip=false
+                  loadingText="Loading..."
+                />
+              | _ => React.null
+              }}
+            </div>
           </AddDataAttributes>
           <AddDataAttributes attributes=[("data-testid", "card-foot-text")]>
             <div> {note} </div>

diff --git a/src/screens/NewAnalytics/NewAnalyticsHelper.res b/src/screens/NewAnalytics/NewAnalyticsHelper.res
@@ -173,10 +173,13 @@ module StatisticsCard = {
     | Upward => ("bg-green-light", "text-green-dark")
     | Downward => ("bg-red-light", "text-red-dark")
     }
+
     <div className={`${bgColor} ${textColor} w-fit h-fit rounded-2xl flex px-2 pt-0.5`}>
       <div className="-mb-0.5 flex">
         <Icon className="mt-1 -mr-1" name="arrow-increasing" size=25 />
-        <div className="font-semibold"> {`${value}%`->React.string} </div>
+        <div className="font-semibold">
+          {`${value->NewAnalyticsUtils.valueFormatter(Rate)}`->React.string}
+        </div>
       </div>
     </div>
   }
@@ -206,7 +209,7 @@ module GraphHeader = {
     <div className="w-full px-7 py-8 flex justify-between">
       <div className="flex gap-2 items-center">
         <div className="text-3xl font-600"> {title->React.string} </div>
-        <StatisticsCard value="8" direction={Upward} />
+        <StatisticsCard value=8.8 direction={Upward} />
       </div>
       <RenderIf condition={showTabSwitch}>
         <div className="flex gap-2">

diff --git a/src/screens/NewAnalytics/NewAnalyticsTypes.res b/src/screens/NewAnalytics/NewAnalyticsTypes.res
@@ -4,7 +4,7 @@ type statisticsDirection = Upward | Downward
 
 type analyticsPagesRoutes = | @as("new-analytics-payment") NewAnalyticsPayment
 
-type domain = [#payments]
+type domain = [#payments | #refunds | #disputes]
 type dimension = [
   | #connector
   | #payment_method
@@ -23,6 +23,10 @@ type metrics = [
   | #payment_method_type
   | #card_network
   | #authentication_type
+  | #smart_retried_amount
+  | #payments_success_rate
+  | #refund_success_count
+  | #dispute_status_metric
 ]
 type granularity = [
   | #G_ONEDAY
@@ -50,3 +54,11 @@ type chartEntity<'t, 'chartOption, 'data> = {
 }
 
 type optionType = {label: string, value: string}
+
+type valueType =
+  | Amount
+  | Rate
+  | Volume
+  | Latency
+  | LatencyMs
+  | No_Type
diff --git a/src/screens/NewAnalytics/NewAnalyticsUtils.res b/src/screens/NewAnalytics/NewAnalyticsUtils.res
@@ -72,6 +72,22 @@ let requestBody = (
   ]->JSON.Encode.array
 }
 
+let valueFormatter = (value, statType: valueType) => {
+  open LogicUtils
+
+  let percentFormat = value => {
+    `${Float.toFixedWithPrecision(value, ~digits=2)}%`
+  }
+
+  switch statType {
+  | Amount => value->indianShortNum
+  | Rate => value->Js.Float.isNaN ? "-" : value->percentFormat
+  | Volume => value->indianShortNum
+  | Latency => latencyShortNum(~labelValue=value)
+  | LatencyMs => latencyShortNum(~labelValue=value, ~includeMilliseconds=true)
+  | No_Type => value->Float.toString
+  }
+}
 let getComparisionTimePeriod = (~startDate, ~endDate) => {
   let startingPoint = startDate->DayJs.getDayJsForString
   let endingPoint = endDate->DayJs.getDayJsForString

diff --git a/src/screens/NewAnalytics/PaymentAnalytics/NewPaymentAnalytics.res b/src/screens/NewAnalytics/PaymentAnalytics/NewPaymentAnalytics.res
@@ -3,6 +3,7 @@ let make = () => {
   open NewPaymentAnalyticsEntity
 
   <div className="flex flex-col gap-14 mt-5 pt-7">
+    <NewPaymentsOverviewSection entity={overviewSectionEntity} />
     <PaymentsLifeCycle
       entity={paymentsLifeCycleEntity} chartEntity={paymentsLifeCycleChartEntity}
     />

diff --git a/src/screens/NewAnalytics/PaymentAnalytics/NewPaymentAnalyticsEntity.res b/src/screens/NewAnalytics/PaymentAnalytics/NewPaymentAnalyticsEntity.res
@@ -1,4 +1,14 @@
 open NewAnalyticsTypes
+// OverView section
+let overviewSectionEntity: moduleEntity = {
+  requestBodyConfig: {
+    delta: true,
+    metrics: [],
+  },
+  title: "OverView Section",
+  domain: #payments,
+}
+
 // Payments Lifecycle
 let paymentsLifeCycleEntity: moduleEntity = {
   requestBodyConfig: {

diff --git a/src/screens/NewAnalytics/PaymentAnalytics/NewPaymentAnalyticsUtils.res b/src/screens/NewAnalytics/PaymentAnalytics/NewPaymentAnalyticsUtils.res
@@ -131,15 +131,15 @@ let calculatePercentageChange = (~primaryValue, ~secondaryValue) => {
   open NewAnalyticsTypes
   let change = secondaryValue -. primaryValue
 
-  if change > 0.0 {
+  if primaryValue === 0.0 || change === 0.0 {
+    (0.0, Upward)
+  } else if change > 0.0 {
     let diff = change /. primaryValue
     let percentage = diff *. 100.0
-    (percentage->Float.toString, Upward)
-  } else if change < 0.0 {
+    (percentage, Upward)
+  } else {
     let diff = change *. -1.0 /. primaryValue
     let percentage = diff *. 100.0
-    (percentage->Float.toString, Downward)
-  } else {
-    ("0", Upward)
+    (percentage, Downward)
   }
 }