ref: Update delete account messaging

src/pages/AccountSettings/tabs/Admin/DeletionCard/DeletionCard.spec.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react'
+import { MemoryRouter, Route } from 'react-router-dom'
+
+import DeletionCard from './DeletionCard'
+
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
+  <MemoryRouter initialEntries={['/account/gh/test-user']}>
+    <Route path="/account/:provider/:owner">{children}</Route>
+  </MemoryRouter>
+)
+
+describe('DeletionCard', () => {
+  it('renders header', () => {
+    render(<DeletionCard isPersonalSettings={true} />, { wrapper })
+
+    const header = screen.getByRole('heading', { name: 'Delete account' })
+    expect(header).toBeInTheDocument()
+  })
+
+  describe('when isPersonalSettings is true', () => {
+    it('renders account deletion message', () => {
+      render(<DeletionCard isPersonalSettings={true} />, { wrapper })
+
+      const message = screen.getByText(
+        /Erase all my personal content and projects./
+      )
+      expect(message).toBeInTheDocument()
+    })
+  })
+
+  describe('when isPersonalSettings is false', () => {
+    it('renders organization deletion message', () => {
+      render(<DeletionCard isPersonalSettings={false} />, { wrapper })
+
+      const message = screen.getByText(
+        /Erase all my organization content and projects./
+      )
+      expect(message).toBeInTheDocument()
+    })
+  })
+})

src/pages/AccountSettings/tabs/Admin/DeletionCard/DeletionCard.tsx

@@ -0,0 +1,45 @@
+import Card from 'old_ui/Card'
+import A from 'ui/A'
+
+interface EraseSectionProps {
+  isPersonalSettings: boolean
+}
+
+function EraseSection({ isPersonalSettings }: EraseSectionProps) {
+  if (isPersonalSettings) {
+    return (
+      <p>
+        Erase all my personal content and projects.{' '}
+        <A to={{ pageName: 'support' }} hook="contact-support-link" isExternal>
+          Contact support
+        </A>
+      </p>
+    )
+  }
+
+  return (
+    <p>
+      Erase all my organization content and projects.{' '}
+      <A to={{ pageName: 'support' }} hook="contact-support-link" isExternal>
+        Contact support
+      </A>
+    </p>
+  )
+}
+
+interface DeletionCardProps {
+  isPersonalSettings: boolean
+}
+
+function DeletionCard({ isPersonalSettings }: DeletionCardProps) {
+  return (
+    <div className="flex flex-col gap-4">
+      <h2 className="text-lg font-semibold">Delete account</h2>
+      <Card>
+        <EraseSection isPersonalSettings={isPersonalSettings} />
+      </Card>
+    </div>
+  )
+}
+
+export default DeletionCard