From cfb6404c664d5be9719c6c28d232b24195733411 Mon Sep 17 00:00:00 2001
From: Marina Fedyantseva <marina.fedyantzeva@singularitynet.io>
Date: Thu, 13 Feb 2025 11:30:26 +0300
Subject: [PATCH] [SPT-446] fixed getting of freecalls before calling the
 service

---
 .../Purchase/ActiveSession/index.js           | 14 ++++++--
 .../ServiceDemo/Purchase/index.js             |  2 ++
 .../AboutService/ServiceDemo/index.js         | 32 ++++++++++++-------
 3 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ActiveSession/index.js b/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ActiveSession/index.js
index b9dbf79ee..e5884173a 100644
--- a/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ActiveSession/index.js
+++ b/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ActiveSession/index.js
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { withStyles } from "@mui/styles";
 import Tooltip from "@mui/material/Tooltip";
+import CircularProgress from "@mui/material/CircularProgress";
 
 import AlertBox from "../../../../../common/AlertBox";
 import StyledButton from "../../../../../common/StyledButton";
@@ -13,7 +14,14 @@ import { currentServiceDetails } from "../../../../../../Redux/reducers/ServiceD
 import { isUndefined } from "lodash";
 import { updateMetamaskWallet } from "../../../../../../Redux/actionCreators/UserActions";
 
-const ActiveSession = ({ classes, freeCallsRemaining, handleComplete, freeCallsAllowed, isServiceAvailable }) => {
+const ActiveSession = ({
+  classes,
+  isFreecallLoading,
+  freeCallsRemaining,
+  handleComplete,
+  freeCallsAllowed,
+  isServiceAvailable,
+}) => {
   const dispatch = useDispatch();
   const { detailsTraining } = useSelector((state) => state.serviceDetailsReducer);
   const { org_id, service_id } = useSelector((state) => currentServiceDetails(state));
@@ -50,7 +58,9 @@ const ActiveSession = ({ classes, freeCallsRemaining, handleComplete, freeCallsA
       />
       <div className={classes.freeCallsInfo}>
         <span className={classes.FreeApiCallsText}>Free API Calls</span>
-        <span className={classes.ReaminaingCallsNo}>{freeCallsRemaining}</span>
+        <span className={classes.ReaminaingCallsNo}>
+          {isFreecallLoading ? <CircularProgress size="20px" /> : freeCallsRemaining}
+        </span>
         <StyledLinearProgress value={progressValue()} />
       </div>
       <Tooltip
diff --git a/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/index.js b/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/index.js
index 5e269b74f..fe828d154 100644
--- a/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/index.js
+++ b/src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/index.js
@@ -7,6 +7,7 @@ const Purchase = ({
   handleComplete,
   freeCallsRemaining,
   freeCallsAllowed,
+  isFreecallLoading,
   wallet,
   groupInfo,
   handlePurchaseError,
@@ -25,6 +26,7 @@ const Purchase = ({
   }
   return (
     <ActiveSession
+      isFreecallLoading={isFreecallLoading}
       freeCallsRemaining={freeCallsRemaining}
       freeCallsAllowed={freeCallsAllowed}
       handleComplete={handleComplete}
diff --git a/src/components/ServiceDetails/AboutService/ServiceDemo/index.js b/src/components/ServiceDetails/AboutService/ServiceDemo/index.js
index 33f04849a..acf9dc01d 100644
--- a/src/components/ServiceDetails/AboutService/ServiceDemo/index.js
+++ b/src/components/ServiceDetails/AboutService/ServiceDemo/index.js
@@ -46,11 +46,31 @@ const ServiceDemo = ({ classes, service }) => {
   const [purchaseCompleted, setPurchaseCompleted] = useState(false);
   const [isServiceExecutionComplete, setIsServiceExecutionComplete] = useState(false);
   const [alert, setAlert] = useState({});
+  const [isFreecallLoading, setIsFreecallLoading] = useState(false);
+
+  const fetchFreeCallsUsage = async () => {
+    try {
+      setIsFreecallLoading(true);
+      return await dispatch(
+        serviceDetailsActions.fetchMeteringData({
+          orgId: service.org_id,
+          serviceId: service.service_id,
+          groupId: groupInfo.group_id,
+          username: email,
+        })
+      );
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsFreecallLoading(false);
+    }
+  };
 
   useEffect(() => {
     if (process.env.REACT_APP_SANDBOX) {
       return;
     }
+    fetchFreeCallsUsage();
 
     try {
       dispatch(loaderActions.startAppLoader(LoaderContent.INIT_SERVICE_DEMO));
@@ -84,17 +104,6 @@ const ServiceDemo = ({ classes, service }) => {
     }
   };
 
-  const fetchFreeCallsUsage = () => {
-    return dispatch(
-      serviceDetailsActions.fetchMeteringData({
-        orgId: service.org_id,
-        serviceId: service.service_id,
-        groupId: groupInfo.group_id,
-        username: email,
-      })
-    );
-  };
-
   // const pollWalletDetails = async () => {
   //   const {
   //     service: { org_id: orgId },
@@ -177,6 +186,7 @@ const ServiceDemo = ({ classes, service }) => {
           handleComplete: handlePurchaseComplete,
           freeCallsRemaining: freeCalls.remaining,
           freeCallsAllowed: freeCalls.allowed,
+          isFreecallLoading,
           wallet,
           handlePurchaseError,
           isServiceAvailable: Boolean(service.is_available),