create a account-archived page on web for archived users to export data

packages/web/components/templates/ExportDataForm.tsx

@@ -0,0 +1,51 @@
+import { useState } from 'react'
+import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
+import { Button } from '../elements/Button'
+
+export function ExportDataButton(): JSX.Element {
+ const [disabledState, setDisabledState] = useState<boolean>(false)
+
+ const handleExportClick = async () => {
+ setDisabledState(true)
+
+ try {
+ // Make a GET request to the /export endpoint
+ const response = await fetch('/api/export', {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ })
+
+ if (!response.ok) {
+ throw new Error('Failed to fetch export data')
+ }
+ } catch (error) {
+ console.error('Error exporting data:', error)
+ showErrorToast('Failed to export data')
+
+ setDisabledState(false)
+ return
+ }
+
+ showSuccessToast(
+ 'Started exporting data. You will receive an email shortly.'
+ )
+ }
+
+ return (
+ <Button
+ type="submit"
+ style={disabledState ? 'ctaGray' : 'ctaOmnivoreYellow'}
+ css={{
+ padding: '10px 50px',
+ }}
+ disabled={disabledState}
+ onClick={() => {
+ handleExportClick()
+ }}
+ >
+ Export My Data
+ </Button>
+ )
+}

packages/web/pages/account-archived.tsx

@@ -0,0 +1,16 @@
+import { VStack } from '../components/elements/LayoutPrimitives'
+import { ExportDataButton } from '../components/templates/ExportDataForm'
+
+export default function AccountArchivedPage(): JSX.Element {
+ return (
+ <VStack alignment="center" distribution="center">
+ <h1>Your account has been archived</h1>
+ <p>
+ Your account has been archived. If you would like to reactivate your
+ account, please contact support.
+ </p>
+
+ <ExportDataButton />
+ </VStack>
+ )
+}