114 lines
2.8 KiB
TypeScript
114 lines
2.8 KiB
TypeScript
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 { deleteInvitationAction } from '../../server/actions/team-invitations-server-actions';
|
|
|
|
export function DeleteInvitationDialog({
|
|
isOpen,
|
|
setIsOpen,
|
|
invitationId,
|
|
}: {
|
|
isOpen: boolean;
|
|
setIsOpen: (isOpen: boolean) => void;
|
|
invitationId: number;
|
|
}) {
|
|
return (
|
|
<AlertDialog open={isOpen} onOpenChange={setIsOpen}>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>
|
|
<Trans i18nKey="team:deleteInvitation" />
|
|
</AlertDialogTitle>
|
|
|
|
<AlertDialogDescription>
|
|
<Trans i18nKey="team:deleteInvitationDialogDescription" />
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
|
|
<DeleteInvitationForm
|
|
setIsOpen={setIsOpen}
|
|
invitationId={invitationId}
|
|
/>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
);
|
|
}
|
|
|
|
function DeleteInvitationForm({
|
|
invitationId,
|
|
setIsOpen,
|
|
}: {
|
|
invitationId: number;
|
|
setIsOpen: (isOpen: boolean) => void;
|
|
}) {
|
|
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'} action={onInvitationRemoved}>
|
|
<div className={'flex flex-col space-y-6'}>
|
|
<p className={'text-muted-foreground text-sm'}>
|
|
<Trans i18nKey={'common:modalConfirmationQuestion'} />
|
|
</p>
|
|
|
|
<If condition={error}>
|
|
<RemoveInvitationErrorAlert />
|
|
</If>
|
|
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel>
|
|
<Trans i18nKey={'common:cancel'} />
|
|
</AlertDialogCancel>
|
|
|
|
<Button
|
|
type={'submit'}
|
|
variant={'destructive'}
|
|
disabled={isSubmitting}
|
|
>
|
|
<Trans i18nKey={'teams:deleteInvitation'} />
|
|
</Button>
|
|
</AlertDialogFooter>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|
|
|
|
function RemoveInvitationErrorAlert() {
|
|
return (
|
|
<Alert variant={'destructive'}>
|
|
<AlertTitle>
|
|
<Trans i18nKey={'teams:deleteInvitationErrorTitle'} />
|
|
</AlertTitle>
|
|
|
|
<AlertDescription>
|
|
<Trans i18nKey={'teams:deleteInvitationErrorMessage'} />
|
|
</AlertDescription>
|
|
</Alert>
|
|
);
|
|
}
|