Revert "Unify workspace dropdowns; Update layouts (#458)"

This reverts commit 4bc8448a1d.

packages/features/team-accounts/src/components/invitations/delete-invitation-dialog.tsx

@@ -1,6 +1,4 @@
-'use client';
-
-import { useAction } from 'next-safe-action/hooks';
+import { useState, useTransition } from 'react';
 
 import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
 import {
@@ -32,11 +30,11 @@ export function DeleteInvitationDialog({
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle>
-            <Trans i18nKey="teams.deleteInvitation" />
+            <Trans i18nKey="team:deleteInvitation" />
           </AlertDialogTitle>
 
           <AlertDialogDescription>
-            <Trans i18nKey="teams.deleteInvitationDialogDescription" />
+            <Trans i18nKey="team:deleteInvitationDialogDescription" />
           </AlertDialogDescription>
         </AlertDialogHeader>
 
@@ -56,34 +54,43 @@ function DeleteInvitationForm({
   invitationId: number;
   setIsOpen: (isOpen: boolean) => void;
 }) {
-  const { execute, isPending, hasErrored } = useAction(deleteInvitationAction, {
-    onSuccess: () => setIsOpen(false),
-  });
+  const [isSubmitting, startTransition] = useTransition();
+  const [error, setError] = useState<boolean>();
+
+  const onInvitationRemoved = () => {
+    startTransition(async () => {
+      try {
+        await deleteInvitationAction({ invitationId });
+
+        setIsOpen(false);
+      } catch {
+        setError(true);
+      }
+    });
+  };
 
   return (
-    <form
-      data-test={'delete-invitation-form'}
-      onSubmit={(e) => {
-        e.preventDefault();
-        execute({ invitationId });
-      }}
-    >
+    <form data-test={'delete-invitation-form'} action={onInvitationRemoved}>
       <div className={'flex flex-col space-y-6'}>
         <p className={'text-muted-foreground text-sm'}>
-          <Trans i18nKey={'common.modalConfirmationQuestion'} />
+          <Trans i18nKey={'common:modalConfirmationQuestion'} />
         </p>
 
-        <If condition={hasErrored}>
+        <If condition={error}>
           <RemoveInvitationErrorAlert />
         </If>
 
         <AlertDialogFooter>
           <AlertDialogCancel>
-            <Trans i18nKey={'common.cancel'} />
+            <Trans i18nKey={'common:cancel'} />
           </AlertDialogCancel>
 
-          <Button type={'submit'} variant={'destructive'} disabled={isPending}>
-            <Trans i18nKey={'teams.deleteInvitation'} />
+          <Button
+            type={'submit'}
+            variant={'destructive'}
+            disabled={isSubmitting}
+          >
+            <Trans i18nKey={'teams:deleteInvitation'} />
           </Button>
         </AlertDialogFooter>
       </div>
@@ -95,11 +102,11 @@ function RemoveInvitationErrorAlert() {
   return (
     <Alert variant={'destructive'}>
       <AlertTitle>
-        <Trans i18nKey={'teams.deleteInvitationErrorTitle'} />
+        <Trans i18nKey={'teams:deleteInvitationErrorTitle'} />
       </AlertTitle>
 
       <AlertDescription>
-        <Trans i18nKey={'teams.deleteInvitationErrorMessage'} />
+        <Trans i18nKey={'teams:deleteInvitationErrorMessage'} />
       </AlertDescription>
     </Alert>
   );