From 60ad1d127de7f35c2afb81e3168149f0f3941a3b Mon Sep 17 00:00:00 2001
From: Manuel Bustillo <bustikiller@bustikiller.com>
Date: Sun, 27 Oct 2024 19:24:21 +0100
Subject: [PATCH] Include transitions to confirmed and declined

---
 app/ui/guests/table.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/app/ui/guests/table.tsx b/app/ui/guests/table.tsx
index 5eb896e..f760e18 100644
--- a/app/ui/guests/table.tsx
+++ b/app/ui/guests/table.tsx
@@ -26,12 +26,15 @@ export default function guestsTable() {
       });
   };
 
+  const handleInviteGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'invited');
+  const handleConfirmGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'confirmed');
+  const handleDeclineGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'declined');
 
-  const handleInviteGuest = (e: React.MouseEvent<HTMLElement>) => {
+  const handleGuestChange = (e: React.MouseEvent<HTMLElement>, status:string) => {
     fetch("/api/guests/bulk_update.json",
       {
         method: 'POST',
-        body: JSON.stringify({ properties: { status: "invited" }, guest_ids: [e.currentTarget.getAttribute('data-guest-id')] }),
+        body: JSON.stringify({ properties: { status: status }, guest_ids: [e.currentTarget.getAttribute('data-guest-id')] }),
         headers: {
           'Content-Type': 'application/json',
           'X-CSRF-TOKEN': getCsrfToken(),
@@ -42,6 +45,7 @@ export default function guestsTable() {
   }
 
   guests.length === 0 && loadGuests();
+  const ctaClassName = "text-white py-1 px-2 mx-1 rounded";
 
   return (
     <div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
@@ -97,9 +101,15 @@ export default function guestsTable() {
                 </span>
               </td>
               <td>
-                {guest.status === 'Considered' && (<button data-guest-id={guest.id} onClick={handleInviteGuest} className="bg-blue-300 hover:bg-blue-500 text-white py-1 px-2 rounded">
+                {guest.status === 'Considered' && (<button data-guest-id={guest.id} onClick={handleInviteGuest} className={`${ctaClassName} bg-blue-400 hover:bg-blue-600`}>
                   Invite
                 </button>)}
+                {guest.status === 'Invited' && (<button data-guest-id={guest.id} onClick={handleConfirmGuest} className={`${ctaClassName} bg-green-500 hover:bg-green-600`}>
+                  Confirm
+                </button>)}
+                {guest.status === 'Invited' && (<button data-guest-id={guest.id} onClick={handleDeclineGuest} className={`${ctaClassName} bg-red-500 hover:bg-red-600`}>
+                  Decline
+                </button>)}
               </td>
             </tr>
           ))}