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 4 commits into
base: main
Choose a base branch
from
+142 −89
Open

fix: no show status conflict #18667

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 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
3a48a96
Merge branch 'main' into fix_no_show_status_conflict
MehulZR Feb 5, 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
206 changes: 126 additions & 80 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) => {
Copy link
Contributor

@TusharBhatt1 TusharBhatt1 Feb 9, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why looping through all the pages ?
Instead , we can find the index of the page containing the booking using findIndex()

Also can we make noShowMutation function more readable

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");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we make it t(err.message)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are no translations for the message returned by the backend.

},
});
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 @@ -641,6 +692,7 @@ function BookingListItem(booking: BookingItemProps) {
currentEmail={userEmail}
bookingUid={booking.uid}
isBookingInPast={isBookingInPast}
noShowMutationHelper={noShowMutationHelper}
/>
)}
{isCancelled && booking.rescheduled && (
Expand Down Expand Up @@ -867,32 +919,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 @@ -977,25 +1022,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 @@ -1012,7 +1047,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 @@ -1075,63 +1110,53 @@ 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");
},
});
const [noShowAttendees, setNoShowAttendees] = useState(attendees);

return (
<Dialog open={isOpen} onOpenChange={() => setIsOpen(false)}>
<DialogContent title={t("mark_as_no_show_title")} description={t("no_show_description")}>
{noShowAttendees.map((attendee) => (
<form
key={attendee.id}
onSubmit={(e) => {
e.preventDefault();
noShowMutation.mutate({
bookingUid,
attendees: [{ email: attendee.email, noShow: !attendee.noShow }],
});
}}>
<div className="bg-muted flex items-center justify-between rounded-md px-4 py-2">
<span className="text-emphasis flex flex-col text-sm">
{attendee.name}
{attendee.email && <span className="text-muted">({attendee.email})</span>}
</span>
<Button color="minimal" type="submit" StartIcon={attendee.noShow ? "eye-off" : "eye"}>
{attendee.noShow ? t("unmark_as_no_show") : t("mark_as_no_show")}
</Button>
</div>
</form>
<div key={attendee.id} className="bg-muted flex items-center justify-between rounded-md px-4 py-2">
<span className="text-emphasis flex flex-col text-sm">
{attendee.name}
{attendee.email && <span className="text-muted">({attendee.email})</span>}
</span>
<Button
color="minimal"
StartIcon={attendee.noShow ? "eye-off" : "eye"}
onClick={() => {
const updatedNoShowAttendees = noShowAttendees.map((a) => {
return {
...a,
noShow: a.id === attendee.id ? !attendee.noShow : a.noShow,
};
});

setNoShowAttendees(updatedNoShowAttendees);
}}>
{attendee.noShow ? t("unmark_as_no_show") : t("mark_as_no_show")}
</Button>
</div>
))}
<DialogFooter>
<DialogClose>{t("done")}</DialogClose>
<DialogClose
onClick={() =>
noShowMutationHelper({
bookingUid,
attendees: noShowAttendees,
})
}>
{t("done")}
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
Expand Down Expand Up @@ -1208,12 +1233,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 @@ -1222,25 +1249,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
Loading
Loading