Files
calendar/apps/web/components/booking/actions/store.ts
T
Eunjae LeeandGitHub 3986d61f40 feat(bookings): improve bookings redesign (#25251)
* use booking.uid instead of booking.id for url param

* show timezone on calendar

* fix type

* restore horizontal tab and remove header and subtitle

* clean up sidebar items

* fix event propagation from attendees

* fetch all statuses except for cancelled on calendar view

* clean up styles of the badges on BookingListItem

* fix useMediaQuery

* add close button to the header

* add assignment reason to the details sheet

* use separator row

* use ToggleGroup for the top bookings tab

* move ViewToggleButton

* resize the action button

* remove wrong prop

* fix type error

* fix type error

* hide view toggle button on mobile (and fix the breakpoint)

* remove unused e2e tests

* fix e2e tests

* hide toggle button when feature flag is off

* update skeleton

* improve attendees on booking list item and slide over

* improve attendee dropdown

* fix type error

* move query to containers

* select attendee email

* infinite fetching for calendar view

* update styles

* fix compatibility

* fix: add backward compatibility for status field in getAllUserBookings

* increase calendar height

* fix type error

* support Member filter only for admin / owners

* add debug log (TEMP)

* add event border color

* show Reject / Accept buttons on BookingDetailsSheet

* move description section to the top

* update When section

* update style of Who section

* add CancelBookingDialog WIP

* fix CancelBookingDialog

* increase clickable area

* add schedule info section WIP

* fix flaky reject button

* fixing reschedule info WIP

* add fromReschedule index to Booking

* improve rescheduled information

* improve reassignment

* fix type error

* fix unit test

* respect user's weekStart value on the booking calendar view

* update debug log

* improve payment section

* clean up

* fix log message

* reposition filters on list view

* fix bookings controller api2 e2e test

* clean up file by extracting logic into custom hooks

* rename files

* merge BookingCalendar into its container

* extract logic into separate hook files

* remove redundant logic

* rearrange items on calendar view

* add WeekPicker

* extract filter button

* responsive header on list view

* horizontal scroll for ToggleGroup WIP

* fix type error

* fix cancelling recurring event

* address feedback

* fix e2e tests

* fix unit test

* fix e2e tests

* make hover style more visible for ToggleGroup

* fix margin on CancelBookingDialog

* update styles on the slide over (mostly font weight)

* update style of CancelBookingDialog

* update styles

* update margin top for the header

* refactor getBookingDetails handler

* fix gap in who section

* auto-filter the current user on the calendar view

* calculate calendar height considering top banners

* improve booking details sheet interaction without overlay

* update calendar event styles

* update reject dialog style

* put uid first in the query params

* fix class name

* memoize functions in useMediaQuery

* query attendee with id instead of email

* update margins

* replace TRPCError with ErrorWithCode

* move calculation outside loop

* remove dead code
2025-12-10 13:40:04 +00:00

106 lines
4.2 KiB
TypeScript

"use client";
import type React from "react";
import { createStore } from "zustand";
export type BookingActionsStore = {
// Dialog states
rejectionDialogIsOpen: boolean;
chargeCardDialogIsOpen: boolean;
viewRecordingsDialogIsOpen: boolean;
meetingSessionDetailsDialogIsOpen: boolean;
isNoShowDialogOpen: boolean;
isOpenRescheduleDialog: boolean;
isOpenReassignDialog: boolean;
isOpenSetLocationDialog: boolean;
isOpenAddGuestsDialog: boolean;
isOpenReportDialog: boolean;
rerouteDialogIsOpen: boolean;
isCancelDialogOpen: boolean;
// Dialog setters
setRejectionDialogIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
setChargeCardDialogIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
setViewRecordingsDialogIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
setMeetingSessionDetailsDialogIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
setIsNoShowDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
setIsOpenRescheduleDialog: React.Dispatch<React.SetStateAction<boolean>>;
setIsOpenReassignDialog: React.Dispatch<React.SetStateAction<boolean>>;
setIsOpenLocationDialog: React.Dispatch<React.SetStateAction<boolean>>;
setIsOpenAddGuestsDialog: React.Dispatch<React.SetStateAction<boolean>>;
setIsOpenReportDialog: React.Dispatch<React.SetStateAction<boolean>>;
setRerouteDialogIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
setIsCancelDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
};
export const createBookingActionsStore = () => {
return createStore<BookingActionsStore>((set) => ({
// Initial dialog states
rejectionDialogIsOpen: false,
chargeCardDialogIsOpen: false,
viewRecordingsDialogIsOpen: false,
meetingSessionDetailsDialogIsOpen: false,
isNoShowDialogOpen: false,
isOpenRescheduleDialog: false,
isOpenReassignDialog: false,
isOpenSetLocationDialog: false,
isOpenAddGuestsDialog: false,
isOpenReportDialog: false,
rerouteDialogIsOpen: false,
isCancelDialogOpen: false,
// Dialog setters
setRejectionDialogIsOpen: (isOpen) =>
set((state) => ({
rejectionDialogIsOpen: typeof isOpen === "function" ? isOpen(state.rejectionDialogIsOpen) : isOpen,
})),
setChargeCardDialogIsOpen: (isOpen) =>
set((state) => ({
chargeCardDialogIsOpen: typeof isOpen === "function" ? isOpen(state.chargeCardDialogIsOpen) : isOpen,
})),
setViewRecordingsDialogIsOpen: (isOpen) =>
set((state) => ({
viewRecordingsDialogIsOpen:
typeof isOpen === "function" ? isOpen(state.viewRecordingsDialogIsOpen) : isOpen,
})),
setMeetingSessionDetailsDialogIsOpen: (isOpen) =>
set((state) => ({
meetingSessionDetailsDialogIsOpen:
typeof isOpen === "function" ? isOpen(state.meetingSessionDetailsDialogIsOpen) : isOpen,
})),
setIsNoShowDialogOpen: (isOpen) =>
set((state) => ({
isNoShowDialogOpen: typeof isOpen === "function" ? isOpen(state.isNoShowDialogOpen) : isOpen,
})),
setIsOpenRescheduleDialog: (isOpen) =>
set((state) => ({
isOpenRescheduleDialog: typeof isOpen === "function" ? isOpen(state.isOpenRescheduleDialog) : isOpen,
})),
setIsOpenReassignDialog: (isOpen) =>
set((state) => ({
isOpenReassignDialog: typeof isOpen === "function" ? isOpen(state.isOpenReassignDialog) : isOpen,
})),
setIsOpenLocationDialog: (isOpen) =>
set((state) => ({
isOpenSetLocationDialog:
typeof isOpen === "function" ? isOpen(state.isOpenSetLocationDialog) : isOpen,
})),
setIsOpenAddGuestsDialog: (isOpen) =>
set((state) => ({
isOpenAddGuestsDialog: typeof isOpen === "function" ? isOpen(state.isOpenAddGuestsDialog) : isOpen,
})),
setIsOpenReportDialog: (isOpen) =>
set((state) => ({
isOpenReportDialog: typeof isOpen === "function" ? isOpen(state.isOpenReportDialog) : isOpen,
})),
setRerouteDialogIsOpen: (isOpen) =>
set((state) => ({
rerouteDialogIsOpen: typeof isOpen === "function" ? isOpen(state.rerouteDialogIsOpen) : isOpen,
})),
setIsCancelDialogOpen: (isOpen) =>
set((state) => ({
isCancelDialogOpen: typeof isOpen === "function" ? isOpen(state.isCancelDialogOpen) : isOpen,
})),
}));
};