feat(sdk): user delete blockers UI

web/apps/client-demo/src/pages/settings/Profile.tsx

@@ -1,5 +1,12 @@
 import { ProfileView } from '@raystack/frontier/client';
 
 export default function Profile() {
-  return <ProfileView />;
+  return (
+    <ProfileView
+      enableUserDelete
+      onDeleteSuccess={() => {
+        window.location.href = '/login';
+      }}
+    />
+  );
 }

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

@@ -2,6 +2,10 @@
   width: 480px !important;
 }
 
+.description {
+  white-space: pre-line;
+}
+
 .list {
   margin: 0;
   padding-left: var(--rs-space-5);

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

@@ -8,27 +8,71 @@ import type {
   DeleteBlockedPayload
 } from '../../../shared/types';
 import { useFrontier } from '../../contexts/FrontierContext';
-import { useTerminology } from '../../hooks/useTerminology';
-import { blockerLines } from '../../utils/delete-blockers';
+import {
+  useTerminology,
+  type TerminologyMap
+} from '../../hooks/useTerminology';
+import {
+  GENERIC_DELETE_BLOCKED_MESSAGE,
+  blockerLines,
+  type BlockerWording
+} 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}:`
-  }),
-  project: entityLabel => ({
-    title: `Unable to delete ${entityLabel}`,
-    description: `This ${entityLabel} cannot be deleted because it contains resources that need to be addressed first.`
-  })
-};
+function defaultContent(
+  context: DeleteBlockedContext,
+  t: TerminologyMap,
+  messages: Record<string, string>,
+  wording: BlockerWording
+): { title: string; description: string; lines: string[] } {
+  const { entityLabel } = context;
+  switch (context.entity) {
+    case 'organization':
+      return {
+        title: `Unable to delete ${entityLabel}`,
+        description: `Please resolve the following issues before deleting this ${entityLabel}:`,
+        lines: blockerLines(context.blockers, messages, wording)
+      };
+    case 'project':
+      return {
+        title: `Unable to delete ${entityLabel}`,
+        description: `This ${entityLabel} cannot be deleted because it contains resources that need to be addressed first.`,
+        lines: blockerLines(context.blockers, messages, wording)
+      };
+    case 'user': {
+      const org = t.organization({ case: 'lower' });
+      const blockers = context.organizationsToDelete.flatMap(
+        organization => organization.blockers
+      );
+      if (blockers.length === 0 && context.soleOwnerOf.length > 0) {
+        return {
+          title: `Transfer ${org} ownership`,
+          description: `You’re the only owner of one or more ${t.organization({
+            case: 'lower',
+            plural: true
+          })}. Before deleting your account, transfer ownership of each affected ${org} to another member.\n\nOnce ownership has been transferred, you can proceed with account deletion.`,
+          lines: []
+        };
+      }
+      const orgs = t.organization({
+        case: 'lower',
+        plural: context.organizationsToDelete.length > 1
+      });
+      return {
+        title: 'Unable to delete account',
+        description: `Please resolve the following issues in your ${orgs} before deleting your account:`,
+        lines:
+          blockers.length > 0
+            ? blockerLines(blockers, messages, wording)
+            : [GENERIC_DELETE_BLOCKED_MESSAGE]
+      };
+    }
+  }
+}
 
 const DeleteBlockedDialogContext = createContext<DeleteBlockedContext | null>(
   null
@@ -55,7 +99,7 @@ export function DeleteBlockedDialogRoot({
   );
 }
 
-function DeleteBlockedContent({
+export function DeleteBlockedContent({
   payload,
   close
 }: {
@@ -100,21 +144,28 @@ export function DeleteBlockedDialog({
     );
   }
 
-  const copy = DEFAULT_COPY[context.entity](context.entityLabel);
-  const lines = blockerLines(blockers ?? context.blockers, messages, {
-    organizationLabel: t.organization({ case: 'lower' }),
+  const severalOrgs =
+    context.entity === 'user' && context.organizationsToDelete.length > 1;
+  const wording = {
+    organizationRef: severalOrgs
+      ? `your ${t.organization({ case: 'lower', plural: true })}`
+      : `this ${t.organization({ case: 'lower' })}`,
     basePlanTitle: basePlan?.title
-  });
+  };
+  const content = defaultContent(context, t, messages, wording);
+  const lines = blockers
+    ? blockerLines(blockers, messages, wording)
+    : content.lines;
 
   return (
     <AlertDialog.Content className={styles.content}>
       <AlertDialog.Header>
-        <AlertDialog.Title>{title ?? copy.title}</AlertDialog.Title>
+        <AlertDialog.Title>{title ?? content.title}</AlertDialog.Title>
       </AlertDialog.Header>
       <AlertDialog.Body>
         <Flex direction="column" gap={5}>
-          <Text size="small" variant="secondary">
-            {description ?? copy.description}
+          <Text size="small" variant="secondary" className={styles.description}>
+            {description ?? content.description}
           </Text>
           {lines.length > 0 && (
             <Text

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

@@ -1,4 +1,5 @@
 export {
+  DeleteBlockedContent,
   DeleteBlockedDialog,
   DeleteBlockedDialogRoot
 } from './delete-blocked-dialog';

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

@@ -0,0 +1,3 @@
+.content {
+  width: 480px !important;
+}

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

@@ -0,0 +1,226 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { useMutation } from '@connectrpc/connect-query';
+import { FrontierServiceQueries } from '@raystack/proton/frontier';
+import {
+  AlertDialog,
+  Button,
+  Checkbox,
+  Field,
+  Flex,
+  Input,
+  Text,
+  toastManager
+} from '@raystack/apsara';
+import type { DeleteBlockedPayload, Slot } from '../../../shared/types';
+import { useFrontier } from '../../contexts/FrontierContext';
+import {
+  GENERIC_DELETE_BLOCKED_MESSAGE,
+  toUserDeleteBlocked
+} from '../../utils/delete-blockers';
+import { DeleteBlockedContent } from '../delete-blocked-dialog';
+import { handleConnectError } from '~/utils/error';
+import styles from './delete-user-dialog.module.css';
+
+const showErrorToast = () =>
+  toastManager.add({
+    title: 'Something went wrong',
+    description: 'Please try again later or contact support.',
+    type: 'error'
+  });
+
+type DeleteUserPayload =
+  | { step: 'confirm' }
+  | {
+      step: 'blocked';
+      blocked: Extract<DeleteBlockedPayload, { entity: 'user' }>;
+    };
+
+export interface DeleteUserDialogHandle {
+  open: () => void;
+}
+
+const deleteStarters = new WeakMap<DeleteUserDialogHandle, () => void>();
+
+const createDeleteUserDialogHandle = (): DeleteUserDialogHandle => {
+  const handle: DeleteUserDialogHandle = {
+    open: () => deleteStarters.get(handle)?.()
+  };
+  return handle;
+};
+
+export interface DeleteUserDialogProps {
+  trigger?: Slot<{ onClick: () => void; loading: boolean }>;
+  handle?: DeleteUserDialogHandle;
+  onDeleted: () => void;
+}
+
+export function DeleteUserDialog({
+  trigger,
+  handle,
+  onDeleted
+}: DeleteUserDialogProps) {
+  const [dialogHandle] = useState(() =>
+    AlertDialog.createHandle<DeleteUserPayload>()
+  );
+  const { mutateAsync: checkCurrentUserDelete, isPending: isChecking } =
+    useMutation(FrontierServiceQueries.checkCurrentUserDelete);
+
+  const checkAndOpen = useCallback(async () => {
+    try {
+      const check = await checkCurrentUserDelete({});
+      dialogHandle.openWithPayload(
+        check.canDelete
+          ? { step: 'confirm' }
+          : { step: 'blocked', blocked: toUserDeleteBlocked(check) }
+      );
+      return check.canDelete;
+    } catch {
+      dialogHandle.close();
+      showErrorToast();
+      return false;
+    }
+  }, [checkCurrentUserDelete, dialogHandle]);
+
+  const startDelete = useCallback(() => {
+    void checkAndOpen();
+  }, [checkAndOpen]);
+
+  useEffect(() => {
+    if (!handle) return;
+    deleteStarters.set(handle, startDelete);
+    return () => {
+      deleteStarters.delete(handle);
+    };
+  }, [handle, startDelete]);
+
+  async function onDeleteRefused() {
+    if (await checkAndOpen()) {
+      toastManager.add({
+        title: 'Unable to delete account',
+        description: GENERIC_DELETE_BLOCKED_MESSAGE,
+        type: 'error'
+      });
+    }
+  }
+
+  return (
+    <>
+      {trigger?.({ onClick: startDelete, loading: isChecking })}
+      <AlertDialog handle={dialogHandle}>
+        {({ payload }) => {
+          if (!payload) return null;
+          return payload.step === 'blocked' ? (
+            <DeleteBlockedContent
+              payload={payload.blocked}
+              close={() => dialogHandle.close()}
+            />
+          ) : (
+            <AlertDialog.Content className={styles.content}>
+              <DeleteUserForm
+                onDeleted={() => {
+                  dialogHandle.close();
+                  onDeleted();
+                }}
+                onDeleteRefused={onDeleteRefused}
+              />
+            </AlertDialog.Content>
+          );
+        }}
+      </AlertDialog>
+    </>
+  );
+}
+
+DeleteUserDialog.createHandle = createDeleteUserDialogHandle;
+
+interface DeleteUserFormProps {
+  onDeleted: () => void;
+  onDeleteRefused: () => void;
+}
+
+function DeleteUserForm({ onDeleted, onDeleteRefused }: DeleteUserFormProps) {
+  const { user } = useFrontier();
+  const [email, setEmail] = useState('');
+  const [isAcknowledged, setIsAcknowledged] = useState(false);
+  const { mutateAsync: deleteCurrentUser, isPending } = useMutation(
+    FrontierServiceQueries.deleteCurrentUser
+  );
+  const isEmailConfirmed =
+    !!user?.email && email.trim().toLowerCase() === user.email.toLowerCase();
+
+  async function onDelete() {
+    try {
+      await deleteCurrentUser({});
+      toastManager.add({ title: 'Account deleted', type: 'success' });
+      onDeleted();
+    } catch (error) {
+      handleConnectError(error, {
+        FailedPrecondition: onDeleteRefused,
+        Default: showErrorToast
+      });
+    }
+  }
+
+  return (
+    <>
+      <AlertDialog.Header>
+        <AlertDialog.Title>Delete Account</AlertDialog.Title>
+      </AlertDialog.Header>
+      <AlertDialog.Body>
+        <Flex direction="column" gap={6}>
+          <Text size="small" variant="secondary">
+            This action is irreversible. Deleting your account will permanently
+            remove your account and associated data. Do you want to continue?
+          </Text>
+          <Field label="Please type your email id.">
+            <Input
+              size="large"
+              type="email"
+              value={email}
+              onChange={event => setEmail(event.target.value)}
+              data-test-id="frontier-sdk-delete-account-email-input"
+            />
+          </Field>
+          <Flex gap={3} align="start" render={<label />}>
+            <Checkbox
+              checked={isAcknowledged}
+              onCheckedChange={(checked: boolean) => setIsAcknowledged(checked)}
+              data-test-id="frontier-sdk-delete-account-checkbox"
+            />
+            <Text size="small" variant="secondary">
+              I acknowledge that I understand my account and associated data
+              will be permanently deleted and want to proceed
+            </Text>
+          </Flex>
+        </Flex>
+      </AlertDialog.Body>
+      <AlertDialog.Footer>
+        <AlertDialog.Close
+          render={
+            <Button
+              variant="outline"
+              color="neutral"
+              disabled={isPending}
+              data-test-id="frontier-sdk-delete-account-cancel-btn"
+            >
+              Cancel
+            </Button>
+          }
+        />
+        <Button
+          variant="solid"
+          color="danger"
+          onClick={onDelete}
+          disabled={!isEmailConfirmed || !isAcknowledged || isPending}
+          loading={isPending}
+          loaderText="Deleting..."
+          data-test-id="frontier-sdk-delete-account-btn"
+        >
+          Delete
+        </Button>
+      </AlertDialog.Footer>
+    </>
+  );
+}

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

@@ -0,0 +1,5 @@
+export { DeleteUserDialog } from './delete-user-dialog';
+export type {
+  DeleteUserDialogProps,
+  DeleteUserDialogHandle
+} from './delete-user-dialog';