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)}

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

@@ -0,0 +1,102 @@
+import { Key, useContext, useState } from 'react';
+import {
+  Button,
+  Form,
+  FormButtons,
+  FormRow,
+  LoadingButton,
+  Loading,
+  Dropdown,
+  Item,
+  Flexbox,
+  useToasts,
+} from 'react-basics';
+import { useApi, useLogin, useMessages, useTeams } from 'components/hooks';
+import { WebsiteContext } from 'app/(main)/websites/[websiteId]/WebsiteProvider';
+import { ROLES } from 'lib/constants';
+
+export function WebsiteTransferForm({
+  websiteId,
+  onSave,
+  onClose,
+}: {
+  websiteId: string;
+  onSave?: () => void;
+  onClose?: () => void;
+}) {
+  const { user } = useLogin();
+  const website = useContext(WebsiteContext);
+  const [teamId, setTeamId] = useState<string>(null);
+  const { formatMessage, labels, messages } = useMessages();
+  const { post, useMutation } = useApi();
+  const { mutate, isPending, error } = useMutation({
+    mutationFn: (data: any) => post(`/websites/${websiteId}/transfer`, data),
+  });
+  const { result, query } = useTeams(user.id);
+  const isTeamWebsite = !!website?.teamId;
+  const { showToast } = useToasts();
+
+  const handleSubmit = async () => {
+    mutate(
+      {
+        userId: website.teamId ? user.id : undefined,
+        teamId: website.userId ? teamId : undefined,
+      },
+      {
+        onSuccess: async () => {
+          showToast({ message: formatMessage(messages.saved), variant: 'success' });
+          onSave?.();
+          onClose?.();
+        },
+      },
+    );
+  };
+
+  const handleChange = (key: Key) => {
+    setTeamId(key as string);
+  };
+
+  const renderValue = (teamId: string) => result?.data?.find(({ id }) => id === teamId)?.name;
+
+  if (query.isLoading) {
+    return <Loading icon="dots" position="center" />;
+  }
+
+  return (
+    <Form error={error}>
+      <FormRow>
+        <Flexbox direction="column" gap={20}>
+          {formatMessage(
+            isTeamWebsite ? messages.transferTeamWebsiteToUser : messages.transferUserWebsiteToTeam,
+          )}
+          {!isTeamWebsite && (
+            <Dropdown onChange={handleChange} value={teamId} renderValue={renderValue}>
+              {result.data
+                .filter(({ teamUser }) =>
+                  teamUser.find(
+                    ({ role, userId }) => role === ROLES.teamOwner && userId === user.id,
+                  ),
+                )
+                .map(({ id, name }) => {
+                  return <Item key={id}>{name}</Item>;
+                })}
+            </Dropdown>
+          )}
+        </Flexbox>
+      </FormRow>
+      <FormButtons flex>
+        <LoadingButton
+          variant="primary"
+          isLoading={isPending}
+          disabled={!isTeamWebsite && !teamId}
+          onClick={handleSubmit}
+        >
+          {formatMessage(labels.transfer)}
+        </LoadingButton>
+        <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
+      </FormButtons>
+    </Form>
+  );
+}
+
+export default WebsiteTransferForm;