From 22dcf497d165064fef6b1d95b307a6c127e7c80b Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Fri, 8 May 2026 17:00:32 +1000
Subject: [PATCH] fix(calendly): address CodeRabbit follow-ups from #750
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three issues raised after the squash-merge of the Calendly PR:

1. **(major) Stylesheet disappears after SPA navigation.** The
   `cssInjected` module-level flag short-circuited
   `ensureCalendlyStylesheet()` after first injection. But because the
   `useHead` call runs inside the composable's `setup()`, the entry is
   component-scoped — unhead removes the `<style>` on unmount. On the
   next visit the flag still says "already injected", so the widget
   loaded unstyled. Drop the flag and rely on `key` deduplication.

2. **(minor) Watch on `status` missed pre-existing error state.** A
   shared `useScriptCalendly()` instance that already failed (e.g. on a
   prior navigation) won't re-fire `status` change on a new component
   mount. Add `{ immediate: true }` so the component emits `error`
   when it encounters an already-failed instance.

3. **(minor) `CalendlyPageSettings` missing `hideGdprBanner`.**
   Calendly's SDK accepts it; the component's local copy of the
   interface had it but the registry's exported one didn't, so callers
   composing `CalendlyInlineWidgetOptions` / `CalendlyPopupWidgetOptions`
   directly couldn't pass the flag type-safely.
---
 .../src/runtime/components/ScriptCalendlyInlineWidget.vue   | 2 +-
 packages/script/src/runtime/registry/calendly.ts            | 6 ++----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/script/src/runtime/components/ScriptCalendlyInlineWidget.vue b/packages/script/src/runtime/components/ScriptCalendlyInlineWidget.vue
index e543682f..4d246453 100644
--- a/packages/script/src/runtime/components/ScriptCalendlyInlineWidget.vue
+++ b/packages/script/src/runtime/components/ScriptCalendlyInlineWidget.vue
@@ -92,7 +92,7 @@ onMounted(() => {
   watch(status, (s) => {
     if (s === 'error')
       emit('error')
-  })
+  }, { immediate: true })
 })
 
 const computedRootAttrs = computed<HTMLAttributes>(() => ({
diff --git a/packages/script/src/runtime/registry/calendly.ts b/packages/script/src/runtime/registry/calendly.ts
index c38e59f0..8ad6f28b 100644
--- a/packages/script/src/runtime/registry/calendly.ts
+++ b/packages/script/src/runtime/registry/calendly.ts
@@ -27,6 +27,7 @@ interface CalendlyPageSettings {
   backgroundColor?: string
   hideEventTypeDetails?: boolean
   hideLandingPageDetails?: boolean
+  hideGdprBanner?: boolean
   primaryColor?: string
   textColor?: string
 }
@@ -86,12 +87,9 @@ const CALENDLY_CLOSE_ICON = `data:image/svg+xml;charset=utf-8,${encodeURICompone
 
 const CALENDLY_CSS = `.calendly-badge-widget,.calendly-badge-widget *,.calendly-inline-widget,.calendly-inline-widget *,.calendly-overlay,.calendly-overlay *{font-size:16px;line-height:1.2em}.calendly-badge-widget iframe,.calendly-inline-widget iframe,.calendly-overlay iframe{display:inline;height:100%;width:100%}.calendly-popup-content{position:relative}.calendly-popup-content.calendly-mobile{-webkit-overflow-scrolling:touch;overflow-y:auto}.calendly-overlay{background-color:#a5a5a5;background-color:rgba(31,31,31,.4);bottom:0;left:0;overflow:hidden;position:fixed;right:0;top:0;z-index:9999}.calendly-overlay .calendly-close-overlay{bottom:0;left:0;position:absolute;right:0;top:0}.calendly-overlay .calendly-popup{box-sizing:border-box;height:90%;left:50%;max-height:700px!important;max-width:1000px;min-width:900px;position:absolute;top:50%;transform:translateY(-50%) translateX(-50%);width:80%}@media (max-width:975px){.calendly-overlay .calendly-popup{bottom:0;height:auto;left:0;max-height:none;min-width:0;position:fixed;right:0;top:50px;transform:none;width:100%}}.calendly-overlay .calendly-popup .calendly-popup-content{height:100%}.calendly-overlay .calendly-popup-close{background:url(${CALENDLY_CLOSE_ICON}) no-repeat;background-size:contain;color:#fff;cursor:pointer;height:19px;position:absolute;right:25px;top:25px;width:19px}@media (max-width:975px){.calendly-overlay .calendly-popup-close{right:15px;top:15px}}.calendly-badge-widget{bottom:15px;position:fixed;right:20px;z-index:9998}.calendly-badge-widget .calendly-badge-content{border-radius:25px;box-shadow:0 2px 5px rgba(0,0,0,.25);color:#fff;cursor:pointer;display:table-cell;font-family:sans-serif;font-size:14px;font-weight:700;height:45px;padding:0 30px;text-align:center;vertical-align:middle;width:auto}.calendly-badge-widget .calendly-badge-content.calendly-white{color:#666a73}.calendly-badge-widget .calendly-badge-content span{display:block;font-size:12px}.calendly-spinner{left:0;position:absolute;right:0;text-align:center;top:50%;transform:translateY(-50%);z-index:-1}.calendly-spinner>div{animation:calendly-bouncedelay 1.4s ease-in-out infinite;animation-fill-mode:both;background-color:#e1e1e1;border-radius:50%;display:inline-block;height:18px;vertical-align:middle;width:18px}.calendly-spinner .calendly-bounce1{animation-delay:-.32s}.calendly-spinner .calendly-bounce2{animation-delay:-.16s}@keyframes calendly-bouncedelay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}`
 
-let cssInjected = false
-
 function ensureCalendlyStylesheet() {
-  if (import.meta.server || cssInjected)
+  if (import.meta.server)
     return
-  cssInjected = true
   useHead({
     style: [
       {