From e25aab742b938ab785a58a771ad5e5a7be4c552c Mon Sep 17 00:00:00 2001
From: Ali BARIN <ali.barin53@gmail.com>
Date: Tue, 21 Mar 2023 20:25:46 +0000
Subject: [PATCH] feat(UsageAlert): use new plan upgrade page

---
 .../src/components/UsageAlert/index.ee.tsx    |  4 ++-
 .../queries/get-payment-portal-url.ee.ts      | 10 -------
 .../web/src/hooks/usePaymentPortalUrl.ee.ts   | 16 ----------
 packages/web/src/hooks/useUsageAlert.ee.ts    | 29 ++++++++++---------
 4 files changed, 18 insertions(+), 41 deletions(-)
 delete mode 100644 packages/web/src/graphql/queries/get-payment-portal-url.ee.ts
 delete mode 100644 packages/web/src/hooks/usePaymentPortalUrl.ee.ts

diff --git a/packages/web/src/components/UsageAlert/index.ee.tsx b/packages/web/src/components/UsageAlert/index.ee.tsx
index ee6e391b..1de30f7b 100644
--- a/packages/web/src/components/UsageAlert/index.ee.tsx
+++ b/packages/web/src/components/UsageAlert/index.ee.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Link } from 'react-router-dom';
 import Alert from '@mui/material/Alert';
 import Snackbar from '@mui/material/Snackbar';
 import Typography from '@mui/material/Typography';
@@ -34,8 +35,9 @@ export default function UsageAlert() {
           </Typography>
 
           <Button
+            component={Link}
             size="small"
-            href={usageAlert.url}
+            to={usageAlert.url}
             sx={{ minWidth: 100 }}
           >
             {formatMessage('usageAlert.viewPlans')}
diff --git a/packages/web/src/graphql/queries/get-payment-portal-url.ee.ts b/packages/web/src/graphql/queries/get-payment-portal-url.ee.ts
deleted file mode 100644
index 9d7ec0da..00000000
--- a/packages/web/src/graphql/queries/get-payment-portal-url.ee.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { gql } from '@apollo/client';
-
-export const GET_PAYMENT_PORTAL_URL = gql`
-  query GetPaymentPortalUrl {
-    getPaymentPortalUrl {
-      url
-    }
-  }
-`;
-
diff --git a/packages/web/src/hooks/usePaymentPortalUrl.ee.ts b/packages/web/src/hooks/usePaymentPortalUrl.ee.ts
deleted file mode 100644
index 323cdedd..00000000
--- a/packages/web/src/hooks/usePaymentPortalUrl.ee.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { useQuery } from '@apollo/client';
-import { GET_PAYMENT_PORTAL_URL } from 'graphql/queries/get-payment-portal-url.ee';
-
-type UsePaymentPortalUrlReturn = {
-  url: string;
-  loading: boolean;
-};
-
-export default function usePaymentPortalUrl(): UsePaymentPortalUrlReturn {
-  const { data, loading } = useQuery(GET_PAYMENT_PORTAL_URL);
-
-  return {
-    url: data?.getPaymentPortalUrl?.url,
-    loading
-  };
-}
diff --git a/packages/web/src/hooks/useUsageAlert.ee.ts b/packages/web/src/hooks/useUsageAlert.ee.ts
index 2bfd802a..3764962f 100644
--- a/packages/web/src/hooks/useUsageAlert.ee.ts
+++ b/packages/web/src/hooks/useUsageAlert.ee.ts
@@ -1,33 +1,34 @@
+import * as URLS from 'config/urls';
 import useFormatMessage from './useFormatMessage';
 import useUsageData from './useUsageData.ee';
-import usePaymentPortalUrl from './usePaymentPortalUrl.ee';
 
 type UseUsageAlertReturn = {
-  showAlert: boolean;
-  hasExceededLimit?: boolean;
-  alertMessage?: string;
-  url?: string;
-  consumptionPercentage?: number;
+  showAlert: true;
+  hasExceededLimit: boolean;
+  alertMessage: string;
+  url: string;
+  consumptionPercentage: number;
 };
 
-export default function useUsageAlert(): UseUsageAlertReturn {
-  const { url, loading: paymentPortalUrlLoading } = usePaymentPortalUrl();
+type UseUsageNoAlertReturn = {
+  showAlert: false;
+};
+
+export default function useUsageAlert(): UseUsageAlertReturn | UseUsageNoAlertReturn {
   const {
     allowedTaskCount,
     consumedTaskCount,
     nextResetAt,
-    loading: usageDataLoading
+    loading
   } = useUsageData();
   const formatMessage = useFormatMessage();
 
-  if (paymentPortalUrlLoading || usageDataLoading) {
+  if (loading) {
     return { showAlert: false };
   }
 
-  const hasLoaded = !paymentPortalUrlLoading || usageDataLoading;
   const withinUsageThreshold = consumedTaskCount > allowedTaskCount * 0.7;
   const consumptionPercentage = consumedTaskCount / allowedTaskCount * 100;
-  const showAlert = hasLoaded && withinUsageThreshold;
   const hasExceededLimit = consumedTaskCount >= allowedTaskCount;
 
   const alertMessage = formatMessage('usageAlert.informationText', {
@@ -37,10 +38,10 @@ export default function useUsageAlert(): UseUsageAlertReturn {
   });
 
   return {
-    showAlert,
+    showAlert: withinUsageThreshold,
     hasExceededLimit,
     alertMessage,
     consumptionPercentage,
-    url,
+    url: URLS.SETTINGS_PLAN_UPGRADE,
   };
 }