feat(sdk): org delete blockers UI

web/sdk/client/components/delete-blocked-dialog/delete-blocked-dialog.module.css

@@ -0,0 +1,9 @@
+.content {
+  width: 480px !important;
+}
+
+.list {
+  margin: 0;
+  padding-left: var(--rs-space-5);
+  list-style-type: disc;
+}

web/sdk/client/components/delete-blocked-dialog/delete-blocked-dialog.tsx

@@ -0,0 +1,143 @@
+'use client';
+
+import { createContext, useContext } from 'react';
+import { AlertDialog, Button, Flex, Text } from '@raystack/apsara';
+import type {
+  DeleteBlocker,
+  DeleteBlockedContext,
+  DeleteBlockedPayload
+} from '../../../shared/types';
+import { useFrontier } from '../../contexts/FrontierContext';
+import { useTerminology } from '../../hooks/useTerminology';
+import { blockerLines } from '../../utils/delete-blockers';
+import styles from './delete-blocked-dialog.module.css';
+
+export type DeleteBlockedDialogHandle = ReturnType<
+  typeof AlertDialog.createHandle<DeleteBlockedPayload>
+>;
+
+const DEFAULT_COPY: Record<
+  DeleteBlockedPayload['entity'],
+  (entityLabel: string) => { title: string; description: string }
+> = {
+  organization: entityLabel => ({
+    title: `Unable to delete ${entityLabel}`,
+    description: `Please resolve the following issues before deleting this ${entityLabel}:`
+  })
+};
+
+const DeleteBlockedDialogContext = createContext<DeleteBlockedContext | null>(
+  null
+);
+
+export interface DeleteBlockedDialogRootProps {
+  handle: DeleteBlockedDialogHandle;
+}
+
+export function DeleteBlockedDialogRoot({
+  handle
+}: DeleteBlockedDialogRootProps) {
+  return (
+    <AlertDialog handle={handle}>
+      {({ payload }) =>
+        payload ? (
+          <DeleteBlockedContent
+            payload={payload}
+            close={() => handle.close()}
+          />
+        ) : null
+      }
+    </AlertDialog>
+  );
+}
+
+function DeleteBlockedContent({
+  payload,
+  close
+}: {
+  payload: DeleteBlockedPayload;
+  close: () => void;
+}) {
+  const t = useTerminology();
+  const { slots } = useFrontier();
+  const context: DeleteBlockedContext = {
+    ...payload,
+    entityLabel: t[payload.entity]({ case: 'lower' }),
+    close
+  };
+  const body = slots.deleteBlockedDialog?.(context);
+  const isEmpty = body == null || typeof body === 'boolean';
+  return (
+    <DeleteBlockedDialogContext.Provider value={context}>
+      {isEmpty ? <DeleteBlockedDialog /> : body}
+    </DeleteBlockedDialogContext.Provider>
+  );
+}
+
+export interface DeleteBlockedDialogProps {
+  title?: string;
+  description?: string;
+  blockers?: DeleteBlocker[];
+  messages?: Record<string, string>;
+}
+
+export function DeleteBlockedDialog({
+  title,
+  description,
+  blockers,
+  messages = {}
+}: DeleteBlockedDialogProps) {
+  const context = useContext(DeleteBlockedDialogContext);
+  const t = useTerminology();
+  const { basePlan } = useFrontier();
+  if (!context) {
+    throw new Error(
+      'DeleteBlockedDialog must be returned from the deleteBlockedDialog slot on FrontierProvider.'
+    );
+  }
+
+  const copy = DEFAULT_COPY[context.entity](context.entityLabel);
+  const lines = blockerLines(blockers ?? context.blockers, messages, {
+    organizationLabel: t.organization({ case: 'lower' }),
+    basePlanTitle: basePlan?.title
+  });
+
+  return (
+    <AlertDialog.Content className={styles.content}>
+      <AlertDialog.Header>
+        <AlertDialog.Title>{title ?? copy.title}</AlertDialog.Title>
+      </AlertDialog.Header>
+      <AlertDialog.Body>
+        <Flex direction="column" gap={5}>
+          <Text size="small" variant="secondary">
+            {description ?? copy.description}
+          </Text>
+          {lines.length > 0 && (
+            <Text
+              size="small"
+              variant="secondary"
+              render={<ul className={styles.list} />}
+            >
+              {lines.map(line => (
+                <li key={line}>{line}</li>
+              ))}
+            </Text>
+          )}
+        </Flex>
+      </AlertDialog.Body>
+      <AlertDialog.Footer>
+        <AlertDialog.Close
+          render={
+            <Button
+              variant="outline"
+              color="neutral"
+              data-test-id="frontier-sdk-delete-blocked-close-btn"
+            >
+              Close
+            </Button>
+          }
+        />
+      </AlertDialog.Footer>
+    </AlertDialog.Content>
+  );
+}

web/sdk/client/components/delete-blocked-dialog/index.ts

@@ -0,0 +1,8 @@
+export {
+  DeleteBlockedDialog,
+  DeleteBlockedDialogRoot
+} from './delete-blocked-dialog';
+export type {
+  DeleteBlockedDialogProps,
+  DeleteBlockedDialogHandle
+} from './delete-blocked-dialog';

web/sdk/client/contexts/FrontierContext.tsx

@@ -12,7 +12,8 @@ import { FrontierServiceQueries } from '~hooks';
 
 import {
   FrontierClientOptions,
-  FrontierProviderProps
+  FrontierProviderProps,
+  FrontierProviderSlots
 } from '../../shared/types';
 
 import {
@@ -47,6 +48,8 @@ import { useLastActiveTracker } from '../hooks/useLastActiveTracker';
 interface FrontierContextProviderProps {
   config: FrontierClientOptions;
 
+  slots: FrontierProviderSlots;
+
   organizations: Organization[];
 
   groups: Group[];
@@ -123,6 +126,8 @@ const defaultConfig: FrontierClientOptions = {
 const initialValues: FrontierContextProviderProps = {
   config: defaultConfig,
 
+  slots: {},
+
   organizations: [],
 
   groups: [],
@@ -175,7 +180,8 @@ FrontierContext.displayName = 'FrontierContext ';
 
 export const FrontierContextProvider = ({
   children,
-  config
+  config,
+  slots = {}
 }: FrontierProviderProps) => {
   const [activeOrganization, setActiveOrganization] = useState<Organization>();
   const [isActiveOrganizationLoading, setIsActiveOrganizationLoading] =
@@ -322,6 +328,7 @@ export const FrontierContextProvider = ({
           ...config,
           billing: { ...defaultConfig.billing, ...config.billing }
         },
+        slots,
         organizations,
         groups,
         user,

web/sdk/client/hooks/useDeleteCheck.ts

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+import { AlertDialog, toastManager } from '@raystack/apsara';
+import type { Blocker } from '@raystack/proton/frontier';
+import type { DeleteBlocker, DeleteBlockedPayload } from '../../shared/types';
+import type { DeleteBlockedDialogHandle } from '../components/delete-blocked-dialog';
+import {
+  GENERIC_DELETE_BLOCKED_MESSAGE,
+  blockersFromError,
+  isOrganizationDisabled,
+  toDeleteBlockers
+} from '../utils/delete-blockers';
+import { useTerminology } from './useTerminology';
+import { handleConnectError } from '~/utils/error';
+
+export interface UseDeleteCheckOptions<TPayload> {
+  entity: DeleteBlockedPayload['entity'];
+  check: (
+    payload: TPayload
+  ) => Promise<{ canDelete: boolean; blockers: Blocker[] }>;
+  confirmDialogHandle: ReturnType<typeof AlertDialog.createHandle<TPayload>>;
+  blockedDialogHandle: DeleteBlockedDialogHandle;
+}
+
+export function useDeleteCheck<TPayload>({
+  entity,
+  check,
+  confirmDialogHandle,
+  blockedDialogHandle
+}: UseDeleteCheckOptions<TPayload>) {
+  const t = useTerminology();
+  const [isChecking, setIsChecking] = useState(false);
+
+  function showBlocked(blockers: DeleteBlocker[]) {
+    confirmDialogHandle.close();
+    blockedDialogHandle.openWithPayload({ entity, blockers });
+  }
+
+  function handleDeleteError(error: unknown) {
+    handleConnectError(error, {
+      FailedPrecondition: err => {
+        if (isOrganizationDisabled(err)) {
+          const org = t.organization({ case: 'lower' });
+          toastManager.add({
+            title: `Unable to delete ${t[entity]({ case: 'lower' })}`,
+            description: `This ${org} is disabled. Contact your administrator to enable it, then try again.`,
+            type: 'error'
+          });
+          return;
+        }
+        const blockers = blockersFromError(err);
+        if (blockers.length > 0) {
+          showBlocked(blockers);
+        } else {
+          toastManager.add({
+            title: `Unable to delete ${t[entity]({ case: 'lower' })}`,
+            description: GENERIC_DELETE_BLOCKED_MESSAGE,
+            type: 'error'
+          });
+        }
+      },
+      PermissionDenied: () =>
+        toastManager.add({
+          title: "You don't have permission to perform this action",
+          type: 'error'
+        }),
+      NotFound: () =>
+        toastManager.add({
+          title: 'Not found',
+          description: `This ${t[entity]({ case: 'lower' })} no longer exists.`,
+          type: 'error'
+        }),
+      Default: () =>
+        toastManager.add({
+          title: 'Something went wrong',
+          description: 'Please try again later or contact support.',
+          type: 'error'
+        })
+    });
+  }
+
+  async function startDelete(payload: TPayload) {
+    setIsChecking(true);
+    try {
+      const { canDelete, blockers } = await check(payload);
+      if (canDelete) {
+        confirmDialogHandle.openWithPayload(payload);
+      } else {
+        showBlocked(toDeleteBlockers(blockers));
+      }
+    } catch (error) {
+      handleDeleteError(error);
+    } finally {
+      setIsChecking(false);
+    }
+  }
+
+  return { startDelete, isChecking, handleDeleteError };
+}

web/sdk/client/hooks/useTokens.ts

@@ -14,13 +14,7 @@ interface UseTokensReturn {
   fetchTokenBalance: () => Promise<any>;
 }
 
-export interface UseTokensOptions {
-  // Set this to false to skip fetching the balance. The delete dialog uses
-  // it so the balance is only fetched while the dialog is open.
-  enabled?: boolean;
-}
-
-export const useTokens = (options: UseTokensOptions = {}): UseTokensReturn => {
+export const useTokens = (): UseTokensReturn => {
   const { billingAccount } = useFrontier();
 
   const {
@@ -35,7 +29,7 @@ export const useTokens = (options: UseTokensOptions = {}): UseTokensReturn => {
       id: billingAccount?.id ?? ''
     }),
     {
-      enabled: !!billingAccount?.id && (options.enabled ?? true),
+      enabled: !!billingAccount?.id,
       retry: false
     }
   );

web/sdk/client/index.ts

@@ -3,6 +3,8 @@ export { ViewContainer } from './components/view-container';
 export { ViewHeader } from './components/view-header';
 export { AuthContainer } from './components/auth-container';
 export { AuthHeader } from './components/auth-header';
+export { DeleteBlockedDialog } from './components/delete-blocked-dialog';
+export type { DeleteBlockedDialogProps } from './components/delete-blocked-dialog';
 export { describeAuthError } from './utils/auth-error';
 export type { AuthRejection } from './utils/auth-error';
 
@@ -44,7 +46,10 @@ export { usePreferences } from './hooks/usePreferences';
 export type {
   FrontierClientOptions,
   FrontierClientBillingOptions,
-  FrontierClientCustomizationOptions
+  FrontierClientCustomizationOptions,
+  FrontierProviderSlots,
+  DeleteBlocker,
+  DeleteBlockedContext
 } from '../shared/types';
 
 export { PREFERENCE_OPTIONS } from './utils/constants';