Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: no show status conflict #18667

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

fix: no show status conflict #18667

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5fedc6e
fix: no show status conflict
MehulZR Jan 15, 2025
3f03854
Merge branch 'main' into HEAD
MehulZR Jan 15, 2025
3856b96
fix: noShowAttendeesDialog closing preemptively
MehulZR Jan 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
159 changes: 97 additions & 62 deletions apps/web/components/booking/BookingListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,8 @@ import { ReassignDialog } from "@components/dialog/ReassignDialog";
import { RerouteDialog } from "@components/dialog/RerouteDialog";
import { RescheduleDialog } from "@components/dialog/RescheduleDialog";

import { BOOKING_LIST_LIMIT } from "~/bookings/views/bookings-listing-view";

type BookingListingStatus = RouterInputs["viewer"]["bookings"]["get"]["filters"]["status"];

type BookingItem = RouterOutputs["viewer"]["bookings"]["get"]["bookings"][number];
Expand All @@ -68,6 +70,7 @@ type BookingItemProps = BookingItem & {
userTimeFormat: number | null | undefined;
userEmail: string | undefined;
};
bookingListFilters: RouterInputs["viewer"]["bookings"]["get"]["filters"];
};

type ParsedBooking = ReturnType<typeof buildParsedBooking>;
Expand Down Expand Up @@ -133,6 +136,53 @@ function BookingListItem(booking: BookingItemProps) {
utils.viewer.bookings.invalidate();
},
});
const noShowMutation = trpc.viewer.markNoShow.useMutation({
onSuccess: async (data, { bookingUid }) => {
utils.viewer.bookings.get.setInfiniteData(
{
limit: BOOKING_LIST_LIMIT,
filters: booking.bookingListFilters,
},
(prevData) => {
if (!prevData) return { pages: [], pageParams: [] };

return {
...prevData,
pages: prevData.pages.map((page) => {
return {
...page,
bookings: page.bookings.map((booking) => {
if (bookingUid !== booking.uid) return booking;

return {
...booking,
attendees: booking.attendees.map((attendee) => {
const affectedAttendee = data.attendees.find((val) => {
return val.email === attendee.email;
});

return {
...attendee,
noShow: affectedAttendee ? affectedAttendee.noShow : attendee.noShow,
};
}),
};
}),
};
}),
};
}
);

showToast(t(data.message), "success");
},
onError: (err) => {
showToast(err.message, "error");
},
});
const noShowMutationHelper = (input: RouterInputs["viewer"]["markNoShow"]) => {
return noShowMutation.mutate(input);
};

const isUpcoming = new Date(booking.endTime) >= new Date();
const isOngoing = isUpcoming && new Date() >= new Date(booking.startTime);
Expand Down Expand Up @@ -480,6 +530,7 @@ function BookingListItem(booking: BookingItemProps) {
attendees={attendeeList}
setIsOpen={setIsNoShowDialogOpen}
isOpen={isNoShowDialogOpen}
noShowMutationHelper={noShowMutationHelper}
/>
)}
<Dialog open={rejectionDialogIsOpen} onOpenChange={setRejectionDialogIsOpen}>
Expand Down Expand Up @@ -639,6 +690,7 @@ function BookingListItem(booking: BookingItemProps) {
currentEmail={userEmail}
bookingUid={booking.uid}
isBookingInPast={isBookingInPast}
noShowMutationHelper={noShowMutationHelper}
/>
)}
{isCancelled && booking.rescheduled && (
Expand Down Expand Up @@ -865,32 +917,25 @@ type NoShowProps = {
isBookingInPast: boolean;
};

const Attendee = (attendeeProps: AttendeeProps & NoShowProps) => {
const { email, name, bookingUid, isBookingInPast, noShow: noShowAttendee, phoneNumber } = attendeeProps;
const Attendee = ({
noShowMutationHelper,
...attendeeProps
}: AttendeeProps &
NoShowProps & { noShowMutationHelper: (input: RouterInputs["viewer"]["markNoShow"]) => void }) => {
const { email, name, bookingUid, isBookingInPast, noShow, phoneNumber } = attendeeProps;
const { t } = useLocale();

const [noShow, setNoShow] = useState(noShowAttendee);
const [openDropdown, setOpenDropdown] = useState(false);
const { copyToClipboard, isCopied } = useCopy();

const noShowMutation = trpc.viewer.markNoShow.useMutation({
onSuccess: async (data) => {
showToast(data.message, "success");
},
onError: (err) => {
showToast(err.message, "error");
},
});

function toggleNoShow({
attendee,
bookingUid,
}: {
attendee: { email: string; noShow: boolean };
bookingUid: string;
}) {
noShowMutation.mutate({ bookingUid, attendees: [attendee] });
setNoShow(!noShow);
noShowMutationHelper({ bookingUid, attendees: [attendee] });
}

return (
Expand Down Expand Up @@ -975,25 +1020,15 @@ type GroupedAttendeeProps = {
bookingUid: string;
};

const GroupedAttendees = (groupedAttendeeProps: GroupedAttendeeProps) => {
const { bookingUid } = groupedAttendeeProps;
const attendees = groupedAttendeeProps.attendees.map((attendee) => {
return {
id: attendee.id,
email: attendee.email,
name: attendee.name,
noShow: attendee.noShow || false,
};
});
const GroupedAttendees = ({
noShowMutationHelper,
...groupedAttendeeProps
}: GroupedAttendeeProps & {
noShowMutationHelper: (input: RouterInputs["viewer"]["markNoShow"]) => void;
}) => {
const { bookingUid, attendees } = groupedAttendeeProps;
const { t } = useLocale();
const noShowMutation = trpc.viewer.markNoShow.useMutation({
onSuccess: async (data) => {
showToast(t(data.message), "success");
},
onError: (err) => {
showToast(err.message, "error");
},
});

const { control, handleSubmit } = useForm<{
attendees: AttendeeProps[];
}>({
Expand All @@ -1010,7 +1045,7 @@ const GroupedAttendees = (groupedAttendeeProps: GroupedAttendeeProps) => {

const onSubmit = (data: { attendees: AttendeeProps[] }) => {
const filteredData = data.attendees.slice(1);
noShowMutation.mutate({ bookingUid, attendees: filteredData });
noShowMutationHelper({ bookingUid, attendees: filteredData });
setOpenDropdown(false);
};

Expand Down Expand Up @@ -1073,46 +1108,25 @@ const NoShowAttendeesDialog = ({
isOpen,
setIsOpen,
bookingUid,
noShowMutationHelper,
}: {
attendees: AttendeeProps[];
isOpen: boolean;
setIsOpen: (value: boolean) => void;
bookingUid: string;
noShowMutationHelper: (input: RouterInputs["viewer"]["markNoShow"]) => void;
}) => {
const { t } = useLocale();
const [noShowAttendees, setNoShowAttendees] = useState(
attendees.map((attendee) => ({
id: attendee.id,
email: attendee.email,
name: attendee.name,
noShow: attendee.noShow || false,
}))
);

const noShowMutation = trpc.viewer.markNoShow.useMutation({
onSuccess: async (data) => {
const newValue = data.attendees[0];
setNoShowAttendees((old) =>
old.map((attendee) =>
attendee.email === newValue.email ? { ...attendee, noShow: newValue.noShow } : attendee
)
);
showToast(t(data.message), "success");
},
onError: (err) => {
showToast(err.message, "error");
},
});

return (
<Dialog open={isOpen} onOpenChange={() => setIsOpen(false)}>
<DialogContent title={t("mark_as_no_show_title")} description={t("no_show_description")}>
{noShowAttendees.map((attendee) => (
{attendees.map((attendee) => (
<form
key={attendee.id}
onSubmit={(e) => {
e.preventDefault();
noShowMutation.mutate({
noShowMutationHelper({
bookingUid,
attendees: [{ email: attendee.email, noShow: !attendee.noShow }],
});
Expand Down Expand Up @@ -1206,12 +1220,14 @@ const DisplayAttendees = ({
currentEmail,
bookingUid,
isBookingInPast,
noShowMutationHelper,
}: {
attendees: AttendeeProps[];
user: UserProps | null;
currentEmail?: string | null;
bookingUid: string;
isBookingInPast: boolean;
noShowMutationHelper: (inputs: RouterInputs["viewer"]["markNoShow"]) => void;
}) => {
const { t } = useLocale();
attendees.sort((a, b) => a.id - b.id);
Expand All @@ -1220,25 +1236,44 @@ const DisplayAttendees = ({
<div className="text-emphasis text-sm">
{user && <FirstAttendee user={user} currentEmail={currentEmail} />}
{attendees.length > 1 ? <span>,&nbsp;</span> : <span>&nbsp;{t("and")}&nbsp;</span>}
<Attendee {...attendees[0]} bookingUid={bookingUid} isBookingInPast={isBookingInPast} />
<Attendee
{...attendees[0]}
bookingUid={bookingUid}
isBookingInPast={isBookingInPast}
noShowMutationHelper={noShowMutationHelper}
/>
{attendees.length > 1 && (
<>
<div className="text-emphasis inline-block text-sm">&nbsp;{t("and")}&nbsp;</div>
{attendees.length > 2 ? (
<Tooltip
content={attendees.slice(1).map((attendee) => (
<p key={attendee.email}>
<Attendee {...attendee} bookingUid={bookingUid} isBookingInPast={isBookingInPast} />
<Attendee
{...attendee}
bookingUid={bookingUid}
isBookingInPast={isBookingInPast}
noShowMutationHelper={noShowMutationHelper}
/>
</p>
))}>
{isBookingInPast ? (
<GroupedAttendees attendees={attendees} bookingUid={bookingUid} />
<GroupedAttendees
attendees={attendees}
bookingUid={bookingUid}
noShowMutationHelper={noShowMutationHelper}
/>
) : (
<GroupedGuests guests={attendees} />
)}
</Tooltip>
) : (
<Attendee {...attendees[1]} bookingUid={bookingUid} isBookingInPast={isBookingInPast} />
<Attendee
{...attendees[1]}
bookingUid={bookingUid}
isBookingInPast={isBookingInPast}
noShowMutationHelper={noShowMutationHelper}
/>
)}
</>
)}
Expand Down
15 changes: 10 additions & 5 deletions apps/web/modules/bookings/views/bookings-listing-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ import SkeletonLoader from "@components/booking/SkeletonLoader";

import type { validStatuses } from "~/bookings/lib/validStatuses";

export const BOOKING_LIST_LIMIT = 10;

type BookingListingStatus = z.infer<NonNullable<typeof filterQuerySchema>>["status"];
type BookingOutput = RouterOutputs["viewer"]["bookings"]["get"]["bookings"][0];

Expand Down Expand Up @@ -74,13 +76,14 @@ export default function Bookings({ status }: { status: (typeof validStatuses)[nu
const user = useMeQuery().data;
const [isFiltersVisible, setIsFiltersVisible] = useState<boolean>(false);

const bookingListFilters = {
...filterQuery,
status: filterQuery.status ?? status,
};
const query = trpc.viewer.bookings.get.useInfiniteQuery(
{
limit: 10,
filters: {
...filterQuery,
status: filterQuery.status ?? status,
},
limit: BOOKING_LIST_LIMIT,
filters: bookingListFilters,
},
{
enabled: true,
Expand Down Expand Up @@ -173,6 +176,7 @@ export default function Bookings({ status }: { status: (typeof validStatuses)[nu
}}
listingStatus={status}
recurringInfo={recurringInfoToday}
bookingListFilters={bookingListFilters}
{...booking}
/>
))}
Expand Down Expand Up @@ -203,6 +207,7 @@ export default function Bookings({ status }: { status: (typeof validStatuses)[nu
}}
listingStatus={status}
recurringInfo={recurringInfo}
bookingListFilters={bookingListFilters}
{...booking}
/>
);
Expand Down
Loading