public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

CAL-2126 url layout query param is source of truth for layout (#10100) 

Co-authored-by: Satya Nishanth <satya@Satyas-MacBook-Pro.local>
pull/10190/head^2
Satya Nishanth 2023-07-17 17:46:50 +05:30 committed by GitHub
parent 8dd2135656
commit 4c54e9c384
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/features/bookings/Booker/Booker.tsx
View File

@ -23,6 +23,7 @@ import { useBookerStore, useInitializeBookerStore } from "./store";
import type { BookerLayout, BookerProps } from "./types";
import { useEvent } from "./utils/event";
import { validateLayout } from "./utils/layout";
import { getQueryParam } from './utils/query-param';
import { useBrandColors } from "./utils/use-brand-colors";
const PoweredBy = dynamic(() => import("@calcom/ee/components/PoweredBy"));
@ -108,6 +109,21 @@ const BookerComponent = ({
}
}, [isMobile, setLayout, layout, defaultLayout]);
//setting layout from query param
useEffect(() => {
const layout = getQueryParam("layout") as BookerLayouts;
if (
!isMobile &&
!isEmbed &&
validateLayout(layout) &&
bookerLayouts?.enabledLayouts?.length &&
layout !== _layout
) {
const validLayout = bookerLayouts.enabledLayouts.find((userLayout) => userLayout === layout);
validLayout && setLayout(validLayout)
}
}, [bookerLayouts, validateLayout, setLayout,_layout]);
useEffect(() => {
if (event.isLoading) return setBookerState("loading");
if (!selectedDate) return setBookerState("selecting_date");
@ -286,4 +302,4 @@ export const Booker = (props: BookerProps) => {
<BookerComponent {...props} />
</LazyMotion>
);
};
};

5
packages/features/bookings/Booker/store.ts
View File

@ -121,13 +121,14 @@ export type BookerStore = {
export const useBookerStore = create<BookerStore>((set, get) => ({
state: "loading",
setState: (state: BookerState) => set({ state }),
layout: validateLayout(getQueryParam("layout") as BookerLayouts) || BookerLayouts.MONTH_VIEW,
layout: BookerLayouts.MONTH_VIEW,
setLayout: (layout: BookerLayout) => {
// If we switch to a large layout and don't have a date selected yet,
// we selected it here, so week title is rendered properly.
if (["week_view", "column_view"].includes(layout) && !get().selectedDate) {
set({ selectedDate: dayjs().format("YYYY-MM-DD") });
}
updateQueryParam("layout", layout)
return set({ layout });
},
selectedDate: getQueryParam("date") || null,
@ -222,7 +223,7 @@ export const useBookerStore = create<BookerStore>((set, get) => ({
// force clear this.
if (rescheduleUid && bookingData) set({ selectedTimeslot: null });
if (month) set({ month });
removeQueryParam("layout");
//removeQueryParam("layout");
},
selectedDuration: Number(getQueryParam("duration")) || null,
setSelectedDuration: (selectedDuration: number | null) => {