diff --git a/src/components/ticket-page/InnerTicketInfo.tsx b/src/components/ticket-page/InnerTicketInfo.tsx index 5c5db38..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(null); const [usersInGroup, setUsersInGroup] = useState([]); const [showEditTicketModal, setShowEditTicketModal] = useState(false); @@ -231,7 +233,7 @@ const InnerTicketInfo = (props: InnerTicketInfoProps) => { isGetUsersLoading={isGetUsersLoading} userRole={userRole} isCurrentUserInGroup={isCurrentUserInGroup} - setShowConfetti={setShowConfetti} + setConfettiMode={setConfettiMode} /> { setShowConfetti(false)} + 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) => { + setConfettiMode(null); + confetti?.reset(); + }} /> 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"); })(); };