feat: implement automatic subscription cancellation on last workspace deletion (#18324)

Author: letiescanciano

airbyte-webapp/src/core/api/hooks/workspaces.ts

@@ -13,11 +13,12 @@ import {
   getWorkspace,
   listAccessInfoByWorkspaceId,
   listWorkspacesByUser,
+  listWorkspacesInOrganization,
   updateWorkspace,
   updateWorkspaceName,
   webBackendGetWorkspaceState,
 } from "../generated/AirbyteClient";
-import { SCOPE_USER, SCOPE_WORKSPACE } from "../scopes";
+import { SCOPE_USER, SCOPE_WORKSPACE, SCOPE_ORGANIZATION } from "../scopes";
 import {
   ConsumptionTimeWindow,
   WorkspaceCreate,
@@ -89,7 +90,7 @@ export const useDeleteWorkspace = () => {
   const queryClient = useQueryClient();
 
   return useMutation(async (workspaceId: string) => deleteWorkspace({ workspaceId }, requestOptions), {
-    onSuccess: (_, workspaceId) => {
+    onSuccess: async (_, workspaceId) => {
       queryClient.setQueryData(workspaceKeys.detail(workspaceId), null);
       queryClient.resetQueries(organizationKeys.firstWorkspace(organizationId));
       queryClient.resetQueries(organizationKeys.workspacesList(organizationId));
@@ -207,6 +208,52 @@ export const useWorkspaceCount = () => {
   );
 };
 
+/**
+ * Hook to check if a workspace is the last active workspace in an organization.
+ * This is useful for billing-related operations like subscription cancellation.
+ */
+export const useIsLastWorkspaceInOrganization = (
+  organizationId: string | undefined,
+  workspaceId: string | undefined
+): { isLastWorkspace: boolean; isLoading: boolean; error: Error | null } => {
+  const requestOptions = useRequestOptions();
+
+  // We'll use a query to get all workspaces in the organization and check if the given workspace is the only one
+  const queryKey = [SCOPE_ORGANIZATION, "checkLastWorkspace", organizationId, workspaceId];
+
+  const { data, isLoading, error } = useQuery<boolean, Error>(
+    queryKey,
+    async () => {
+      if (!organizationId || !workspaceId) {
+        return false;
+      }
+
+      const { workspaces } = await listWorkspacesInOrganization(
+        {
+          organizationId,
+          pagination: { pageSize: 100, rowOffset: 0 },
+        },
+        requestOptions
+      );
+
+      // Count active workspaces (those that are not the one being deleted)
+      const activeWorkspaces = workspaces.filter((ws) => ws.workspaceId !== workspaceId);
+
+      return activeWorkspaces.length === 0;
+    },
+    {
+      enabled: Boolean(organizationId && workspaceId),
+      staleTime: 30000, // 30 seconds
+    }
+  );
+
+  return {
+    isLastWorkspace: data ?? false,
+    isLoading,
+    error: error ?? null,
+  };
+};
+
 export const useUpdateWorkspace = () => {
   const requestOptions = useRequestOptions();
   const queryClient = useQueryClient();

airbyte-webapp/src/locales/en.json

@@ -2243,6 +2243,9 @@
   "settings.workspaceSettings.delete.confirmation.submitButtonText": "Delete workspace",
   "settings.workspaceSettings.deleteWorkspace.confirmation.title": "Delete workspace: <b>{name}</b>",
   "settings.workspaceSettings.deleteWorkspace.confirmation.text": "Deleting this workspace will remove it for all users and cancel all pending syncs. To confirm deletion, type the name of the workspace in the input field.",
+  "settings.workspaceSettings.deleteLastWorkspace.confirmation": "This is your only workspace. If you delete this workspace, you will also cancel your subscription to the <b>{planName}</b> plan. Your last charge for this account will be {date}.",
+  "settings.workspaceSettings.delete.success.withSubscriptionCancellation": "Workspace deleted and subscription cancelled successfully",
+  "settings.workspaceSettings.delete.warning.subscriptionCancellationFailed": "Workspace deleted successfully, but subscription cancellation failed. Please contact support or cancel your subscription manually from the billing settings.",
   "settings.workspaceSettings.delete.permissionsError": "You do not have sufficient permissions to delete this workspace. Please consult with the workspace owner.",
   "settings.integrationSettings": "Integrations",
   "settings.integrationSettings.dbtCloudSettings": "dbt Cloud Integration",

airbyte-webapp/src/pages/SettingsPage/components/DeleteWorkspace.module.scss

@@ -0,0 +1,8 @@
+@use "scss/colors";
+@use "scss/variables";
+
+.warningBox {
+  padding: variables.$spacing-sm variables.$spacing-md;
+  background-color: colors.$yellow-50;
+  border-radius: variables.$border-radius-md;
+}

airbyte-webapp/src/pages/SettingsPage/components/DeleteWorkspace.tsx

@@ -1,25 +1,104 @@
 import { FormattedMessage, useIntl } from "react-intl";
 import { useNavigate } from "react-router-dom";
 
+import { Box } from "components/ui/Box";
 import { Button } from "components/ui/Button";
 
-import { useCurrentWorkspace, useDeleteWorkspace } from "core/api";
+import { useCurrentOrganizationId } from "area/organization/utils";
+import {
+  useCurrentWorkspace,
+  useDeleteWorkspace,
+  useIsLastWorkspaceInOrganization,
+  useGetOrganizationSubscriptionInfo,
+  useCancelSubscription,
+} from "core/api";
+import { OrganizationPaymentConfigReadSubscriptionStatus } from "core/api/types/AirbyteClient";
+import { useOrganizationSubscriptionStatus } from "core/utils/useOrganizationSubscriptionStatus";
 import { useConfirmationModalService } from "hooks/services/ConfirmationModal";
 import { useNotificationService } from "hooks/services/Notification";
 import { RoutePaths } from "pages/routePaths";
 
+import styles from "./DeleteWorkspace.module.scss";
+
 export const DeleteWorkspace: React.FC = () => {
   const workspace = useCurrentWorkspace();
-  const { mutateAsync: deleteWorkspace, isLoading: isDeletingWorkspace } = useDeleteWorkspace();
+  const organizationId = useCurrentOrganizationId();
+  const { mutateAsync: cancelSubscription, isLoading: isCancellingSubscription } = useCancelSubscription(
+    organizationId || ""
+  );
   const { registerNotification } = useNotificationService();
   const navigate = useNavigate();
-  const { formatMessage } = useIntl();
+  const { formatMessage, formatDate } = useIntl();
   const { openConfirmationModal, closeConfirmationModal } = useConfirmationModalService();
   const redirectPathAfterDeletion = `/${RoutePaths.Organization}/${workspace.organizationId}`;
+  const { subscriptionStatus, isStandardPlan } = useOrganizationSubscriptionStatus();
+
+  // Check if this is the last workspace in the organization
+  const { isLastWorkspace, isLoading: isCheckingLastWorkspace } = useIsLastWorkspaceInOrganization(
+    organizationId,
+    workspace.workspaceId
+  );
+
+  // Fetch subscription info only if this is the last workspace
+  const { data: subscriptionInfo } = useGetOrganizationSubscriptionInfo(organizationId || "", isLastWorkspace);
+  const hasActiveSubscription = subscriptionStatus === OrganizationPaymentConfigReadSubscriptionStatus.subscribed;
+  const shouldShowCancelSubscriptionWarning = isLastWorkspace && hasActiveSubscription && isStandardPlan;
+
+  // Handle subscription cancellation after workspace deletion
+  const handleCancelSubscription = async () => {
+    // Only attempt subscription cancellation if this is the last workspace, the organization has an active subscription, and is on Standard plan
+    if (organizationId && shouldShowCancelSubscriptionWarning) {
+      try {
+        await cancelSubscription();
+        registerNotification({
+          id: "settings.workspace.delete.success",
+          text: formatMessage({
+            id: "settings.workspaceSettings.delete.success.withSubscriptionCancellation",
+          }),
+          type: "success",
+        });
+      } catch (subscriptionError) {
+        registerNotification({
+          id: "settings.workspace.delete.subscription.cancellation.failed",
+          text: formatMessage({
+            id: "settings.workspaceSettings.delete.warning.subscriptionCancellationFailed",
+          }),
+          type: "warning",
+        });
+      }
+    } else {
+      registerNotification({
+        id: "settings.workspace.delete.success",
+        text: formatMessage({ id: "settings.workspaceSettings.delete.success" }),
+        type: "success",
+      });
+    }
+  };
+
+  const { mutateAsync: deleteWorkspace, isLoading: isDeletingWorkspace } = useDeleteWorkspace();
+
+  const cancellationDate = subscriptionInfo?.upcomingInvoice?.dueDate
+    ? formatDate(new Date(subscriptionInfo.upcomingInvoice.dueDate), { dateStyle: "medium" })
+    : "";
+
+  const onRemoveWorkspaceClick = () => {
+    const modalText = shouldShowCancelSubscriptionWarning ? (
+      <Box className={styles.warningBox}>
+        <Box pb="md">
+          <FormattedMessage id="settings.workspaceSettings.deleteWorkspace.confirmation.text" />
+        </Box>
+
+        <FormattedMessage
+          id="settings.workspaceSettings.deleteLastWorkspace.confirmation"
+          values={{ planName: subscriptionInfo?.name ?? "", date: cancellationDate }}
+        />
+      </Box>
+    ) : (
+      "settings.workspaceSettings.deleteWorkspace.confirmation.text"
+    );
 
-  const onRemoveWorkspaceClick = () =>
     openConfirmationModal({
-      text: `settings.workspaceSettings.deleteWorkspace.confirmation.text`,
+      text: modalText,
       title: (
         <FormattedMessage
           id="settings.workspaceSettings.deleteWorkspace.confirmation.title"
@@ -30,19 +109,20 @@ export const DeleteWorkspace: React.FC = () => {
       confirmationText: workspace.name,
       onSubmit: async () => {
         await deleteWorkspace(workspace.workspaceId);
-        registerNotification({
-          id: "settings.workspace.delete.success",
-          text: formatMessage({ id: "settings.workspaceSettings.delete.success" }),
-          type: "success",
-        });
+        await handleCancelSubscription();
         navigate(redirectPathAfterDeletion);
         closeConfirmationModal();
       },
       submitButtonDataId: "reset",
     });
+  };
 
   return (
-    <Button isLoading={isDeletingWorkspace} variant="danger" onClick={onRemoveWorkspaceClick}>
+    <Button
+      isLoading={isCheckingLastWorkspace || isDeletingWorkspace || isCancellingSubscription}
+      variant="danger"
+      onClick={onRemoveWorkspaceClick}
+    >
       <FormattedMessage id="settings.workspaceSettings.deleteLabel" />
     </Button>
   );