From 745dc1640c56c5bad746a28006d3fda488920277 Mon Sep 17 00:00:00 2001
From: Jerry Xu <jerryxu@berkeley.edu>
Date: Sat, 16 Dec 2023 22:06:39 +0000
Subject: [PATCH 1/2] Fix confetti reset

Confetti was not being reset, so it would only appear the first time
---
 src/components/ticket-page/InnerTicketInfo.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/ticket-page/InnerTicketInfo.tsx b/src/components/ticket-page/InnerTicketInfo.tsx
index 5c5db38..86d8a60 100644
--- a/src/components/ticket-page/InnerTicketInfo.tsx
+++ b/src/components/ticket-page/InnerTicketInfo.tsx
@@ -263,9 +263,11 @@ const InnerTicketInfo = (props: InnerTicketInfoProps) => {
 
       <Confetti
         recycle={false}
-        numberOfPieces={200}
-        run={showConfetti}
-        onConfettiComplete={() => setShowConfetti(false)}
+        numberOfPieces={showConfetti ? 200 : 0}
+        onConfettiComplete={(confetti) => {
+          setShowConfetti(false);
+          confetti?.reset();
+        }}
       />
 
       <EditTicketModal

From 4321b5d4ab6fa77f14cce27f3f29ef634b085903 Mon Sep 17 00:00:00 2001
From: Jerry Xu <jerryxu@berkeley.edu>
Date: Sat, 16 Dec 2023 22:07:55 +0000
Subject: [PATCH 2/2] Add reverse confetti

When reopening a ticket, confetti should be taken back
---
 src/components/ticket-page/InnerTicketInfo.tsx | 13 +++++++++----
 src/components/ticket-page/TicketButtons.tsx   |  8 +++++---
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/ticket-page/InnerTicketInfo.tsx b/src/components/ticket-page/InnerTicketInfo.tsx
index 86d8a60..2de95ac 100644
--- a/src/components/ticket-page/InnerTicketInfo.tsx
+++ b/src/components/ticket-page/InnerTicketInfo.tsx
@@ -13,6 +13,8 @@ import TicketButtons from './TicketButtons';
 import Countdown from './Countdown';
 import EditTicketModal from '../modals/EditTicketModal';
 
+export type ConfettiMode = "down" | "up" | null;
+
 interface InnerTicketInfoProps {
   ticket: TicketWithNames;
   userRole: UserRole;
@@ -25,7 +27,7 @@ interface InnerTicketInfoProps {
 const InnerTicketInfo = (props: InnerTicketInfoProps) => {
   const { ticket, userRole, userId } = props;
 
-  const [showConfetti, setShowConfetti] = useState(false);
+  const [confettiMode, setConfettiMode] = useState<ConfettiMode>(null);
   const [usersInGroup, setUsersInGroup] = useState<User[]>([]);
   const [showEditTicketModal, setShowEditTicketModal] = useState(false);
 
@@ -231,7 +233,7 @@ const InnerTicketInfo = (props: InnerTicketInfoProps) => {
         isGetUsersLoading={isGetUsersLoading}
         userRole={userRole}
         isCurrentUserInGroup={isCurrentUserInGroup}
-        setShowConfetti={setShowConfetti}
+        setConfettiMode={setConfettiMode}
       />
       <StaffNotes ticket={ticket} userRole={userRole} />
       <Flex
@@ -263,9 +265,12 @@ const InnerTicketInfo = (props: InnerTicketInfoProps) => {
 
       <Confetti
         recycle={false}
-        numberOfPieces={showConfetti ? 200 : 0}
+        numberOfPieces={confettiMode ? 200 : 0}
+        confettiSource={confettiMode === "up" ? { x: 0, y: window.innerHeight, w: window.innerWidth, h: 0 } : undefined}
+        gravity={confettiMode === "up" ? -0.1 : undefined}
+        initialVelocityY={confettiMode === "up" ? -10 : undefined}
         onConfettiComplete={(confetti) => {
-          setShowConfetti(false);
+          setConfettiMode(null);
           confetti?.reset();
         }}
       />
diff --git a/src/components/ticket-page/TicketButtons.tsx b/src/components/ticket-page/TicketButtons.tsx
index f23bdc0..017fc74 100644
--- a/src/components/ticket-page/TicketButtons.tsx
+++ b/src/components/ticket-page/TicketButtons.tsx
@@ -5,6 +5,7 @@ import { TicketWithNames } from '../../server/trpc/router/ticket';
 import { trpc } from '../../utils/trpc';
 import useSiteSettings from '../../utils/hooks/useSiteSettings';
 import { SiteSettings, SiteSettingsValues } from '@prisma/client';
+import { ConfettiMode } from './InnerTicketInfo';
 
 interface TicketCardProps {
   ticket: TicketWithNames;
@@ -12,7 +13,7 @@ interface TicketCardProps {
   userRole: UserRole;
   isGetUsersLoading: boolean;
   isCurrentUserInGroup: boolean;
-  setShowConfetti: (showConfetti: boolean) => void;
+  setConfettiMode: (confettiMode: ConfettiMode) => void;
 }
 
 export const BUTTONS_DISABLED_WAIT_TIME = 3000;
@@ -23,7 +24,7 @@ export const BUTTONS_DISABLED_WAIT_MSG = 'Please wait 3 seconds before clicking
  * because InnerTicketInfo was getting too big.
  */
 const TicketButtons = (props: TicketCardProps) => {
-  const { ticket, userId, userRole, isCurrentUserInGroup, isGetUsersLoading, setShowConfetti } = props;
+  const { ticket, userId, userRole, isCurrentUserInGroup, isGetUsersLoading, setConfettiMode } = props;
 
   const [areButtonsLoading, setAreButtonsLoading] = useState(false);
   const [areButtonsDisabled, setAreButtonsDisabled] = useState(false);
@@ -67,13 +68,14 @@ const TicketButtons = (props: TicketCardProps) => {
   const handleResolveTicket = async () => {
     onClickWrapper(async () => {
       await resolveTicketsMutation.mutateAsync({ ticketIds: [ticket.id] });
-      setShowConfetti(true);
+      setConfettiMode("down");
     })();
   };
 
   const handleRequeueTicket = async () => {
     onClickWrapper(async () => {
       await requeueTicketsMutation.mutateAsync({ ticketIds: [ticket.id] });
+      setConfettiMode("up");
     })();
   };