Website transfer.

src/app/(main)/settings/websites/[websiteId]/WebsiteData.tsx

@@ -3,6 +3,7 @@ import { useRouter } from 'next/navigation';
 import { useMessages, useModified, useTeamUrl } from 'components/hooks';
 import WebsiteDeleteForm from './WebsiteDeleteForm';
 import WebsiteResetForm from './WebsiteResetForm';
+import WebsiteTransferForm from './WebsiteTransferForm';
 
 export function WebsiteData({ websiteId, onSave }: { websiteId: string; onSave?: () => void }) {
   const { formatMessage, labels, messages } = useMessages();
@@ -11,23 +12,42 @@ export function WebsiteData({ websiteId, onSave }: { websiteId: string; onSave?:
   const { touch } = useModified();
   const { teamId, renderTeamUrl } = useTeamUrl();
 
+  const handleTransfer = () => {
+    touch('websites');
+
+    router.push(renderTeamUrl(`/settings/websites`));
+  };
+
   const handleReset = async () => {
     showToast({ message: formatMessage(messages.saved), variant: 'success' });
     onSave?.();
   };
 
   const handleDelete = async () => {
+    touch('websites');
+
     if (teamId) {
-      touch('teams:websites');
       router.push(renderTeamUrl('/settings/websites'));
     } else {
-      touch('websites');
       router.push('/settings/websites');
     }
   };
 
   return (
     <>
+      <ActionForm
+        label={formatMessage(labels.transferWebsite)}
+        description={formatMessage(messages.transferWebsite)}
+      >
+        <ModalTrigger>
+          <Button variant="secondary">{formatMessage(labels.transfer)}</Button>
+          <Modal title={formatMessage(labels.transferWebsite)}>
+            {(close: () => void) => (
+              <WebsiteTransferForm websiteId={websiteId} onSave={handleTransfer} onClose={close} />
+            )}
+          </Modal>
+        </ModalTrigger>
+      </ActionForm>
       <ActionForm
         label={formatMessage(labels.resetWebsite)}
         description={formatMessage(messages.resetWebsiteWarning)}