Files
calendar/apps/web/components/booking/store.ts
T
Eunjae LeeGitHubeunjae@cal.com <hey@eunjae.dev>Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
3a1e04bb42 refactor: extract booking actions dropdown to separate component (#24872)
* refactor: extract booking actions dropdown to separate component

- Created BookingActionsDropdown component with all dropdown actions and dialogs
- Component receives booking as prop and handles all action logic internally
- Removed duplicate dialog states and mutations from BookingListItem
- Fixed img tag to use Next.js Image component
- Maintains same functionality and UI while improving code reusability

Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>

* fix: restore cardCharged variable in BookingListItem

The cardCharged variable was accidentally removed during the refactoring
but is still needed for the actionContext in BookingListItem.tsx

Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>

* refactor: move BookingItemProps type to separate types.ts file

- Created types.ts to hold shared booking types
- Updated BookingListItem.tsx to import from types.ts
- Updated BookingActionsDropdown.tsx to import from types.ts
- Updated bookingActions.ts to import from types.ts
- Removed unused RouterInputs and RouterOutputs imports from BookingListItem.tsx
- Removes unwanted dependency chain where BookingActionsDropdown imported from BookingListItem

Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>

* remove unnecessary description

* extract states as a zustand store

* fix dialog issue

* fix type errors

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
2025-11-04 00:25:48 +00:00

107 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;
// 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>>;
// Rejection reason state
rejectionReason: string;
setRejectionReason: (reason: string) => void;
};
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,
// 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,
})),
// Rejection reason state
rejectionReason: "",
setRejectionReason: (reason: string) => set({ rejectionReason: reason }),
}));
};