Merge pull request #1719 from automatisch/AUT-831

refactor: rewrite useSubscription with RQ

packages/backend/src/graphql/queries/get-subscription-status.ee.js

@@ -1,17 +0,0 @@
-import appConfig from '../../config/app.js';
-
-const getSubscriptionStatus = async (_parent, _params, context) => {
-  if (!appConfig.isCloud) return;
-
-  const currentSubscription = await context.currentUser.$relatedQuery(
-    'currentSubscription'
-  );
-
-  if (!currentSubscription?.cancellationEffectiveDate) return;
-
-  return {
-    cancellationEffectiveDate: currentSubscription.cancellationEffectiveDate,
-  };
-};
-
-export default getSubscriptionStatus;

packages/backend/src/graphql/query-resolvers.js

@@ -14,7 +14,6 @@ import getPermissionCatalog from './queries/get-permission-catalog.ee.js';
 import getSamlAuthProviderRoleMappings from './queries/get-saml-auth-provider-role-mappings.ee.js';
 import getSamlAuthProvider from './queries/get-saml-auth-provider.ee.js';
 import getStepWithTestExecutions from './queries/get-step-with-test-executions.js';
-import getSubscriptionStatus from './queries/get-subscription-status.ee.js';
 import getTrialStatus from './queries/get-trial-status.ee.js';
 import getUser from './queries/get-user.js';
 import getUsers from './queries/get-users.js';
@@ -38,7 +37,6 @@ const queryResolvers = {
   getSamlAuthProvider,
   getSamlAuthProviderRoleMappings,
   getStepWithTestExecutions,
-  getSubscriptionStatus,
   getTrialStatus,
   getUser,
   getUsers,

packages/backend/src/graphql/schema.graphql

@@ -30,7 +30,6 @@ type Query {
   getNotifications: [Notification]
   getSamlAuthProvider: SamlAuthProvider
   getSamlAuthProviderRoleMappings(id: String!): [SamlAuthProvidersRoleMapping]
-  getSubscriptionStatus: GetSubscriptionStatus
   getTrialStatus: GetTrialStatus
   getUser(id: String!): User
   getUsers(limit: Int!, offset: Int!): UserConnection
@@ -609,10 +608,6 @@ type GetTrialStatus {
   expireAt: String
 }
 
-type GetSubscriptionStatus {
-  cancellationEffectiveDate: String
-}
-
 type GetBillingAndUsage {
   subscription: Subscription
   usage: Usage

packages/web/src/components/SubscriptionCancelledAlert/index.ee.jsx

@@ -1,10 +1,14 @@
 import * as React from 'react';
 import Alert from '@mui/material/Alert';
 import Typography from '@mui/material/Typography';
-import useSubscriptionStatus from 'hooks/useSubscriptionStatus.ee';
+
+import useSubscription from 'hooks/useSubscription.ee';
+
 export default function SubscriptionCancelledAlert() {
-  const subscriptionStatus = useSubscriptionStatus();
-  if (!subscriptionStatus) return <React.Fragment />;
+  const subscription = useSubscription();
+
+  if (!subscription) return <React.Fragment />;
+
   return (
     <Alert
       severity="warning"
@@ -14,7 +18,7 @@ export default function SubscriptionCancelledAlert() {
       }}
     >
       <Typography variant="subtitle2" sx={{ lineHeight: 1.5 }}>
-        {subscriptionStatus.message}
+        {subscription.message}
       </Typography>
     </Alert>
   );

packages/web/src/graphql/queries/get-subscription-status.ee.js

@@ -1,8 +0,0 @@
-import { gql } from '@apollo/client';
-export const GET_SUBSCRIPTION_STATUS = gql`
-  query GetSubscriptionStatus {
-    getSubscriptionStatus {
-      cancellationEffectiveDate
-    }
-  }
-`;

packages/web/src/hooks/useSubscription.ee.js

@@ -0,0 +1,38 @@
+import { useQuery } from '@tanstack/react-query';
+import { DateTime } from 'luxon';
+
+import useFormatMessage from './useFormatMessage';
+import api from 'helpers/api';
+
+export default function useSubscription() {
+  const formatMessage = useFormatMessage();
+
+  const { data, isLoading: isSubscriptionLoading } = useQuery({
+    queryKey: ['subscription'],
+    queryFn: async ({ signal }) => {
+      const { data } = await api.get(`/v1/users/me/subscription`, {
+        signal,
+      });
+
+      return data;
+    },
+  });
+  const subscription = data?.data;
+
+  const cancellationEffectiveDate = subscription?.cancellationEffectiveDate;
+
+  const hasCancelled = !!cancellationEffectiveDate;
+
+  if (isSubscriptionLoading || !hasCancelled) return null;
+
+  const cancellationEffectiveDateObject = DateTime.fromISO(
+    cancellationEffectiveDate,
+  );
+
+  return {
+    message: formatMessage('subscriptionCancelledAlert.text', {
+      date: cancellationEffectiveDateObject.toFormat('DDD'),
+    }),
+    cancellationEffectiveDate: cancellationEffectiveDateObject,
+  };
+}

packages/web/src/hooks/useSubscriptionStatus.ee.js

@@ -1,21 +0,0 @@
-import { useQuery } from '@apollo/client';
-import { DateTime } from 'luxon';
-import { GET_SUBSCRIPTION_STATUS } from 'graphql/queries/get-subscription-status.ee';
-import useFormatMessage from './useFormatMessage';
-export default function useSubscriptionStatus() {
-  const formatMessage = useFormatMessage();
-  const { data, loading } = useQuery(GET_SUBSCRIPTION_STATUS);
-  const cancellationEffectiveDate =
-    data?.getSubscriptionStatus?.cancellationEffectiveDate;
-  const hasCancelled = !!cancellationEffectiveDate;
-  if (loading || !hasCancelled) return null;
-  const cancellationEffectiveDateObject = DateTime.fromMillis(
-    Number(cancellationEffectiveDate),
-  ).startOf('day');
-  return {
-    message: formatMessage('subscriptionCancelledAlert.text', {
-      date: cancellationEffectiveDateObject.toFormat('DDD'),
-    }),
-    cancellationEffectiveDate: cancellationEffectiveDateObject,
-  };
-}