Implement invitation renewal and optimize revalidation function

This commit adds a new function to renew team invitations and a central function for revalidating member page. It also removes redundant revalidations across different actions. The renew invitation function and UI elements are introduced including a new dialog for confirming the renewal action. Furthermore, function revalidateMemberPage() is added to abstract the revalidation path used multiple times in different functions. The code readability and maintainability have thus been improved.
2024-03-29 11:14:55 +08:00
parent 7495dae062
commit 778cfde625
11 changed files with 326 additions and 40 deletions
--- a/packages/features/team-accounts/src/components/invitations/renew-invitation-dialog.tsx
+++ b/packages/features/team-accounts/src/components/invitations/renew-invitation-dialog.tsx
@@ -0,0 +1,112 @@
+import { useState, useTransition } from 'react';
+
+import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@kit/ui/alert-dialog';
+import { Button } from '@kit/ui/button';
+import { If } from '@kit/ui/if';
+import { Trans } from '@kit/ui/trans';
+
+import { renewInvitationAction } from '../../server/actions/team-invitations-server-actions';
+
+export const RenewInvitationDialog: React.FC<{
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  invitationId: number;
+  email: string;
+}> = ({ isOpen, setIsOpen, invitationId, email }) => {
+  return (
+    <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            <Trans i18nKey="team:renewInvitation" />
+          </AlertDialogTitle>
+
+          <AlertDialogDescription>
+            <Trans
+              i18nKey="team:renewInvitationDialogDescription"
+              values={{ email }}
+            />
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+
+        <RenewInvitationForm
+          setIsOpen={setIsOpen}
+          invitationId={invitationId}
+        />
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
+
+function RenewInvitationForm({
+  invitationId,
+  setIsOpen,
+}: {
+  invitationId: number;
+  setIsOpen: (isOpen: boolean) => void;
+}) {
+  const [isSubmitting, startTransition] = useTransition();
+  const [error, setError] = useState<boolean>();
+
+  const inInvitationRenewed = () => {
+    startTransition(async () => {
+      try {
+        await renewInvitationAction({ invitationId });
+
+        setIsOpen(false);
+      } catch (e) {
+        setError(true);
+      }
+    });
+  };
+
+  return (
+    <form action={inInvitationRenewed}>
+      <div className={'flex flex-col space-y-6'}>
+        <p className={'text-muted-foreground text-sm'}>
+          <Trans i18nKey={'common:modalConfirmationQuestion'} />
+        </p>
+
+        <If condition={error}>
+          <RenewInvitationErrorAlert />
+        </If>
+
+        <AlertDialogFooter>
+          <AlertDialogCancel>
+            <Trans i18nKey={'common:cancel'} />
+          </AlertDialogCancel>
+
+          <Button
+            data-test={'confirm-renew-invitation'}
+            disabled={isSubmitting}
+          >
+            <Trans i18nKey={'teams:renewInvitation'} />
+          </Button>
+        </AlertDialogFooter>
+      </div>
+    </form>
+  );
+}
+
+function RenewInvitationErrorAlert() {
+  return (
+    <Alert variant={'destructive'}>
+      <AlertTitle>
+        <Trans i18nKey={'teams:renewInvitationErrorTitle'} />
+      </AlertTitle>
+
+      <AlertDescription>
+        <Trans i18nKey={'teams:renewInvitationErrorDescription'} />
+      </AlertDescription>
+    </Alert>
+  );
+}