feat(UsageAlert): use new plan upgrade page

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')}

packages/web/src/graphql/queries/get-payment-portal-url.ee.ts

@@ -1,10 +0,0 @@
-import { gql } from '@apollo/client';
-
-export const GET_PAYMENT_PORTAL_URL = gql`
-  query GetPaymentPortalUrl {
-    getPaymentPortalUrl {
-      url
-    }
-  }
-`;
-

packages/web/src/hooks/usePaymentPortalUrl.ee.ts

@@ -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
-  };
-}

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;
+  showAlert: true;
-  hasExceededLimit?: boolean;
+  hasExceededLimit: boolean;
-  alertMessage?: string;
+  alertMessage: string;
-  url?: string;
+  url: string;
-  consumptionPercentage?: number;
+  consumptionPercentage: number;
 };
 
-export default function useUsageAlert(): UseUsageAlertReturn {
+type UseUsageNoAlertReturn = {
-  const { url, loading: paymentPortalUrlLoading } = usePaymentPortalUrl();
+  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,
   };
 }