first commit

resources/js/components/CancelInvitationModal.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { router } from '@inertiajs/vue3';
+import { ref } from 'vue';
+import { Button } from '@/components/ui/button';
+import {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import { destroy as destroyInvitation } from '@/routes/teams/invitations';
+import type { Team, TeamInvitation } from '@/types';
+
+type Props = {
+    team: Team;
+    invitation: TeamInvitation | null;
+    open: boolean;
+};
+
+const props = defineProps<Props>();
+const emit = defineEmits<{
+    'update:open': [value: boolean];
+}>();
+
+const processing = ref(false);
+
+const cancelInvitation = () => {
+    if (!props.invitation) {
+        return;
+    }
+
+    router.visit(destroyInvitation([props.team.slug, props.invitation.code]), {
+        onStart: () => (processing.value = true),
+        onFinish: () => (processing.value = false),
+        onSuccess: () => emit('update:open', false),
+    });
+};
+</script>
+
+<template>
+    <Dialog :open="props.open" @update:open="emit('update:open', $event)">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>Cancel invitation</DialogTitle>
+                <DialogDescription>
+                    Are you sure you want to cancel the invitation for
+                    <strong>{{ props.invitation?.email }}</strong
+                    >?
+                </DialogDescription>
+            </DialogHeader>
+
+            <DialogFooter class="gap-2">
+                <DialogClose as-child>
+                    <Button variant="secondary"> Keep invitation </Button>
+                </DialogClose>
+
+                <Button
+                    data-test="cancel-invitation-confirm"
+                    variant="destructive"
+                    :disabled="processing"
+                    @click="cancelInvitation"
+                >
+                    Cancel invitation
+                </Button>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
+</template>