127 lines
3.9 KiB
TypeScript
127 lines
3.9 KiB
TypeScript
const searchParams = new URL(document.URL).searchParams;
|
|
const embedType = searchParams.get("embedType");
|
|
const calLink = searchParams.get("calLink");
|
|
const bookerUrl = searchParams.get("bookerUrl");
|
|
const embedLibUrl = searchParams.get("embedLibUrl");
|
|
if (!bookerUrl || !embedLibUrl) {
|
|
throw new Error('Can\'t Preview: Missing "bookerUrl" or "embedLibUrl" query parameter');
|
|
}
|
|
// TODO: Reuse the embed code snippet from the embed-snippet package - Not able to use it because of circular dependency
|
|
// Install Cal Embed Code Snippet
|
|
(function (C, A, L) {
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
//@ts-ignore
|
|
const p = function (a, ar) {
|
|
a.q.push(ar);
|
|
};
|
|
const d = C.document;
|
|
C.Cal =
|
|
C.Cal ||
|
|
function () {
|
|
const cal = C.Cal;
|
|
|
|
// eslint-disable-next-line prefer-rest-params
|
|
const ar = arguments;
|
|
if (!cal.loaded) {
|
|
cal.ns = {};
|
|
cal.q = cal.q || [];
|
|
d.head.appendChild(d.createElement("script")).src = A;
|
|
cal.loaded = true;
|
|
}
|
|
if (ar[0] === L) {
|
|
const api = function () {
|
|
// eslint-disable-next-line prefer-rest-params
|
|
p(api, arguments);
|
|
};
|
|
const namespace = ar[1];
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
//@ts-ignore
|
|
api.q = api.q || [];
|
|
if (typeof namespace === "string") {
|
|
// Make sure that even after re-execution of the snippet, the namespace is not overridden
|
|
cal.ns[namespace] = cal.ns[namespace] || api;
|
|
p(cal.ns[namespace], ar);
|
|
p(cal, ["initNamespace", namespace]);
|
|
} else p(cal, ar);
|
|
return;
|
|
}
|
|
p(cal, ar);
|
|
};
|
|
})(window, embedLibUrl, "init");
|
|
const previewWindow = window;
|
|
previewWindow.Cal.fingerprint = process.env.EMBED_PUBLIC_EMBED_FINGER_PRINT as string;
|
|
|
|
previewWindow.Cal("init", {
|
|
origin: bookerUrl,
|
|
});
|
|
|
|
if (!calLink) {
|
|
throw new Error('Missing "calLink" query parameter');
|
|
}
|
|
if (embedType === "inline") {
|
|
previewWindow.Cal("inline", {
|
|
elementOrSelector: "#my-embed",
|
|
calLink: calLink,
|
|
});
|
|
} else if (embedType === "floating-popup") {
|
|
previewWindow.Cal("floatingButton", {
|
|
calLink: calLink,
|
|
attributes: {
|
|
id: "my-floating-button",
|
|
},
|
|
});
|
|
} else if (embedType === "element-click") {
|
|
const button = document.createElement("button");
|
|
button.setAttribute("data-cal-link", calLink);
|
|
button.innerHTML = "I am a button that exists on your website";
|
|
document.body.appendChild(button);
|
|
}
|
|
|
|
previewWindow.addEventListener("message", (e) => {
|
|
const data = e.data;
|
|
if (data.mode !== "cal:preview") {
|
|
return;
|
|
}
|
|
|
|
const globalCal = window.Cal;
|
|
if (!globalCal) {
|
|
throw new Error("Cal is not defined yet");
|
|
}
|
|
if (data.type == "instruction") {
|
|
globalCal(data.instruction.name, data.instruction.arg);
|
|
}
|
|
if (data.type == "inlineEmbedDimensionUpdate") {
|
|
const inlineEl = document.querySelector<HTMLElement>("#my-embed");
|
|
if (inlineEl) {
|
|
inlineEl.style.width = data.data.width;
|
|
inlineEl.style.height = data.data.height;
|
|
}
|
|
}
|
|
});
|
|
|
|
function makePreviewPageUseSystemPreference() {
|
|
const colorSchemeQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
|
|
function handleColorSchemeChange(e: MediaQueryListEvent) {
|
|
if (e.matches) {
|
|
// Dark color scheme
|
|
document.body.classList.remove("light");
|
|
document.body.classList.add("dark");
|
|
} else {
|
|
// Light color scheme
|
|
document.body.classList.add("light");
|
|
document.body.classList.remove("dark");
|
|
}
|
|
}
|
|
|
|
colorSchemeQuery.addEventListener("change", handleColorSchemeChange);
|
|
|
|
// Initial check
|
|
handleColorSchemeChange(new MediaQueryListEvent("change", { matches: colorSchemeQuery.matches }));
|
|
}
|
|
|
|
// This makes preview page behave like a website that has system preference enabled. This provides a better experience of preview when user switch their system theme to dark
|
|
makePreviewPageUseSystemPreference();
|
|
|
|
export {};
|