feat(sdk): guard the delete organization flow

web/sdk/client/hooks/useTokens.ts

@@ -11,7 +11,13 @@ interface UseTokensReturn {
   fetchTokenBalance: () => Promise<any>;
 }
 
-export const useTokens = (): UseTokensReturn => {
+export interface UseTokensOptions {
+  // when false the balance is not fetched; callers that only need the
+  // balance in a rarely-opened surface (like a dialog) gate it on that
+  enabled?: boolean;
+}
+
+export const useTokens = (options: UseTokensOptions = {}): UseTokensReturn => {
   const { billingAccount } = useFrontier();
 
   const {
@@ -25,7 +31,7 @@ export const useTokens = (): UseTokensReturn => {
       id: billingAccount?.id ?? ''
     }),
     {
-      enabled: !!billingAccount?.id,
+      enabled: !!billingAccount?.id && (options.enabled ?? true),
       retry: false
     }
   );

web/sdk/client/utils/invoice-queries.ts

@@ -0,0 +1,23 @@
+import { create } from '@bufbuild/protobuf';
+import { RQLFilterSchema } from '@raystack/proton/frontier';
+import { INVOICE_STATES } from './constants';
+
+// The one definition of "an invoice the customer still has to pay": open
+// state with a non-zero amount. The server refuses an organization delete
+// while any exist, and the billing page's payment-issue banner keys off the
+// same set — both build their queries from these filters so the two can not
+// drift apart.
+export function openInvoiceFilters() {
+  return [
+    create(RQLFilterSchema, {
+      name: 'state',
+      operator: 'eq',
+      value: { case: 'stringValue', value: INVOICE_STATES.OPEN }
+    }),
+    create(RQLFilterSchema, {
+      name: 'amount',
+      operator: 'gt',
+      value: { case: 'numberValue', value: 0 }
+    })
+  ];
+}

web/sdk/client/views/billing/components/payment-issue.tsx

@@ -6,30 +6,19 @@ import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
 import {
   Subscription,
   RQLRequestSchema,
-  RQLFilterSchema,
   RQLSortSchema
 } from '@raystack/proton/frontier';
 import { create } from '@bufbuild/protobuf';
 import { INVOICE_STATES, SUBSCRIPTION_STATES } from '../../../utils/constants';
+import { openInvoiceFilters } from '../../../utils/invoice-queries';
 import { DEFAULT_PAGE_SIZE } from '../../../utils/connect-pagination';
 import { useOrganizationInvoices } from '../../../hooks/useOrganizationInvoices';
 import styles from '../billing-view.module.css';
 
 // Open invoices with a non-zero amount, newest first — the invoice that needs
 // payment when a subscription is past due.
 const OPEN_INVOICES_QUERY = create(RQLRequestSchema, {
-  filters: [
-    create(RQLFilterSchema, {
-      name: 'state',
-      operator: 'eq',
-      value: { case: 'stringValue', value: INVOICE_STATES.OPEN }
-    }),
-    create(RQLFilterSchema, {
-      name: 'amount',
-      operator: 'gt',
-      value: { case: 'numberValue', value: 0 }
-    })
-  ],
+  filters: openInvoiceFilters(),
   sort: [create(RQLSortSchema, { name: 'created_at', order: 'desc' })],
   offset: 0,
   limit: DEFAULT_PAGE_SIZE

web/sdk/client/views/general/components/delete-organization-dialog.tsx

@@ -20,6 +20,7 @@ import {
 } from '@raystack/apsara';
 import { useFrontier } from '../../../contexts/FrontierContext';
 import { useTerminology } from '../../../hooks/useTerminology';
+import { useTokens } from '../../../hooks/useTokens';
 import { handleConnectError } from '~/utils/error';
 
 const deleteOrgSchema = yup
@@ -44,6 +45,9 @@ export const DeleteOrganizationDialog = ({
   const orgLabel = t.organization({ case: 'capital' });
   const orgLabelLower = t.organization({ case: 'lower' });
   const [isAcknowledged, setIsAcknowledged] = useState(false);
+  // fetched only while the dialog is open; the confirm button waits for the
+  // answer so the forfeit warning cannot be skipped by a slow response
+  const { tokenBalance, isTokensLoading } = useTokens({ enabled: open });
 
   const { mutateAsync: deleteOrganization } = useMutation(
     FrontierServiceQueries.deleteOrganization
@@ -83,6 +87,7 @@ export const DeleteOrganizationDialog = ({
     } catch (error) {
       handleConnectError(error, {
         PermissionDenied: () => toastManager.add({ title: "You don't have permission to perform this action", type: 'error' }),
+        FailedPrecondition: (err) => toastManager.add({ title: `Cannot delete this ${orgLabelLower} yet`, description: err.message, type: 'error' }),
         NotFound: (err) => toastManager.add({ title: 'Not found', description: err.message, type: 'error' }),
         Default: (err) => toastManager.add({ title: 'Something went wrong', description: err.message, type: 'error' }),
       });
@@ -102,6 +107,14 @@ export const DeleteOrganizationDialog = ({
                 This action can not be undone. This will permanently
                 delete all the projects and resources in {organization?.title}.
               </Text>
+              {tokenBalance > 0 ? (
+                <Text size="small" variant="danger">
+                  You have {tokenBalance.toString()} tokens remaining. Deleting
+                  the {orgLabelLower} forfeits them. Please contact support
+                  about these tokens: any amount that was purchased can be
+                  transferred to your bank account.
+                </Text>
+              ) : null}
               <Field
                 label={`Please type name of the ${orgLabel} to confirm.`}
                 error={
@@ -146,7 +159,12 @@ export const DeleteOrganizationDialog = ({
               variant="solid"
               color="danger"
               type="submit"
-              disabled={!deleteTitle || !isAcknowledged}
+              disabled={
+                !deleteTitle ||
+                !isAcknowledged ||
+                isSubmitting ||
+                isTokensLoading
+              }
               data-test-id="frontier-sdk-delete-organization-btn"
               loading={isSubmitting}
               loaderText="Deleting..."

web/sdk/client/views/general/general-view.tsx

@@ -8,12 +8,14 @@ import { create } from '@bufbuild/protobuf';
 import {
   createConnectQueryKey,
   useMutation,
+  useQuery,
   useTransport
 } from '@connectrpc/connect-query';
 import { useQueryClient } from '@tanstack/react-query';
 import {
   FrontierServiceQueries,
-  UpdateOrganizationRequestSchema
+  UpdateOrganizationRequestSchema,
+  CheckOrganizationDeleteRequestSchema
 } from '@raystack/proton/frontier';
 import {
   Button,
@@ -47,6 +49,19 @@ const generalSchema = yup
 
 type FormData = yup.InferType<typeof generalSchema>;
 
+// One short instruction per kind of delete blocker the server can report.
+// An unknown kind falls back to the server's own message.
+const BLOCKER_INSTRUCTIONS: Record<string, (count: number) => string> = {
+  ACTIVE_SUBSCRIPTION: () =>
+    'Please downgrade the subscription to the standard plan',
+  UNPAID_INVOICE: count =>
+    count > 1
+      ? `Please pay the ${count} open invoices from the billing page`
+      : 'Please pay the open invoice from the billing page',
+  NEGATIVE_TOKEN_BALANCE: () =>
+    'Please contact support to settle the token balance'
+};
+
 export interface GeneralViewProps {
   onDeleteSuccess?: () => void;
   urlPrefix?: string;
@@ -97,6 +112,35 @@ export function GeneralView({ onDeleteSuccess, urlPrefix }: GeneralViewProps = {
 
   const isLoading = !organization?.id || isActiveOrganizationLoading || isPermissionsFetching;
 
+  // the server's own answer to "would a delete go through right now" — the
+  // same blockers a real delete would refuse with. While it loads the button
+  // stays disabled rather than briefly allowing a delete the server would
+  // refuse; a failed check fails open since the server refuses independently
+  const { data: deleteCheck, isLoading: isDeleteCheckLoading } = useQuery(
+    FrontierServiceQueries.checkOrganizationDelete,
+    create(CheckOrganizationDeleteRequestSchema, {
+      id: organization?.id ?? ''
+    }),
+    {
+      enabled: canDeleteWorkspace && !!organization?.id,
+      retry: false
+    }
+  );
+  const isDeleteBlocked = !!deleteCheck && !deleteCheck.canDelete;
+  const blockerLines = useMemo(() => {
+    const blockers = deleteCheck?.blockers ?? [];
+    const counts = new Map<string, number>();
+    for (const blocker of blockers) {
+      counts.set(blocker.type, (counts.get(blocker.type) ?? 0) + 1);
+    }
+    return [...counts.entries()].map(
+      ([type, count]) =>
+        BLOCKER_INSTRUCTIONS[type]?.(count) ??
+        blockers.find(blocker => blocker.type === type)?.message ??
+        type
+    );
+  }, [deleteCheck]);
+
   // Update organization form
   const { mutateAsync: updateOrganization } = useMutation(
     FrontierServiceQueries.updateOrganization,
@@ -280,22 +324,34 @@ export function GeneralView({ onDeleteSuccess, urlPrefix }: GeneralViewProps = {
                 </Text>
                 <Tooltip>
                   <Tooltip.Trigger
-                    disabled={canDeleteWorkspace}
+                    disabled={canDeleteWorkspace && !isDeleteBlocked}
                     render={<span className={styles.fitContent} />}
                   >
                     <Button
                       variant="solid"
                       color="danger"
                       onClick={() => setShowDeleteDialog(true)}
-                      disabled={!canDeleteWorkspace}
+                      disabled={
+                        !canDeleteWorkspace ||
+                        isDeleteBlocked ||
+                        isDeleteCheckLoading
+                      }
                       data-test-id="frontier-sdk-delete-organization-btn"
                     >
                       Delete {orgLabelLower}
                     </Button>
                   </Tooltip.Trigger>
-                  {!canDeleteWorkspace && (
+                  {!canDeleteWorkspace ? (
                     <Tooltip.Content>{AuthTooltipMessage}</Tooltip.Content>
-                  )}
+                  ) : isDeleteBlocked ? (
+                    <Tooltip.Content>
+                      <Flex direction="column" gap={2}>
+                        {blockerLines.map(line => (
+                          <span key={line}>{line}</span>
+                        ))}
+                      </Flex>
+                    </Tooltip.Content>
+                  ) : null}
                 </Tooltip>
               </>
             )}

web/sdk/package.json

@@ -101,7 +101,7 @@
     "@connectrpc/connect-query": "2.1.1",
     "@connectrpc/connect-web": "2.1.1",
     "@hookform/resolvers": "^3.10.0",
-    "@raystack/proton": "0.1.0-f0b06e61f1985a9052f32744976a2b73d8c56839",
+    "@raystack/proton": "0.1.0-194685ed0280d282261bc16f708266465dd1deb1",
     "@tanstack/react-query": "^5.90.2",
     "@tanstack/react-router": "^1.168.3",
     "axios": "^1.9.0",