@planningcenter/topbar 11.2.4 → 11.2.5-qa-827.0

package/dist/topbar.js

@@ -3466,12 +3466,16 @@ var styles = {"toolbar":"toolbar-KHJR5","toolbar-button":"toolbar-button-Ye4h5",
 
 const pcoUrl = pcoUrl$1;
 
+// The route rides in the iframe URL fragment (`…/topbar#conversations/abc`),
+// not the path, so updating it is a same-document navigation that doesn't
+// reload the iframe, but also lets the route survive a forced reload (e.g.
+// Turbo re-parenting the topbar).
 function buildPicobotSrc(origin, path) {
   const [rawPath, queryPart] = path.replace(/^\/+/, "").split("?", 2);
   const safePath = rawPath.split("/").filter(segment => segment && segment !== "." && segment !== "..").join("/");
-  const pathWithPrefix = ["topbar", safePath].filter(Boolean).join("/");
-  const relativePath = queryPart !== undefined ? `${pathWithPrefix}?${queryPart}` : pathWithPrefix;
-  return new URL(relativePath, origin).toString();
+  const fragment = queryPart !== undefined ? `${safePath}?${queryPart}` : safePath;
+  const base = new URL("topbar", origin).toString();
+  return fragment ? `${base}#${fragment}` : base;
 }
 
 const handleSearchSelect = (hit, indexName) => {
@@ -3623,6 +3627,11 @@ const {
   LoadingIndicator: LoadingIndicator$1,
   StackView: StackView$1
 } = addOns.components;
+function CalendlyWidget(props) {
+  return props.url ? /*#__PURE__*/React.createElement(reactCalendly.InlineWidget, {
+    ...props
+  }) : null;
+}
 function HelpdeskComponent({
   appName,
   closeDrawer,
@@ -3639,13 +3648,10 @@ function HelpdeskComponent({
       onMessage
     }) {
       const ref = React.useRef(null);
-      const initialPath = iframePath || "";
-      // Tracks the path picobot last reported via postMessage so an
-      // incoming currentPath that matches it doesn't trigger a reload.
-      // Picobot sends a bare relative path (e.g. "conversations/abc") with
-      // no leading slash or /topbar prefix—buildPicobotSrc adds those.
-      const lastReportedPathRef = React.useRef(initialPath);
-      const [loadedPath, setLoadedPath] = React.useState(initialPath);
+      // Keep the fragment in sync in both directions—external opens (deeplink /
+      // Contact support) and picobot's own NEW_ROUTE_RENDERED reports—so it
+      // always reflects the live conversation. See buildPicobotSrc.
+      const [loadedPath, setLoadedPath] = React.useState(iframePath || "");
       React.useEffect(() => {
         if (!onIframeChangePath && !onMessage) return undefined;
         const handler = e => {
@@ -3655,7 +3661,7 @@ function HelpdeskComponent({
           if (e.source !== ref.current.contentWindow) return;
           if (((_a = e.data) === null || _a === void 0 ? void 0 : _a.type) === "NEW_ROUTE_RENDERED" && onIframeChangePath) {
             const reportedPath = String((_b = e.data.payload) !== null && _b !== void 0 ? _b : "");
-            lastReportedPathRef.current = reportedPath;
+            setLoadedPath(reportedPath);
             onIframeChangePath(reportedPath);
           }
           if (onMessage) onMessage(e.data);
@@ -3664,9 +3670,7 @@ function HelpdeskComponent({
         return () => window.removeEventListener("message", handler);
       }, [onIframeChangePath, onMessage]);
       React.useEffect(() => {
-        const incomingPath = iframePath || "";
-        if (lastReportedPathRef.current === incomingPath) return;
-        setLoadedPath(incomingPath);
+        setLoadedPath(iframePath || "");
       }, [iframePath]);
       const iframeSrc = buildPicobotSrc(picobotOrigin, loadedPath);
       return /*#__PURE__*/React.createElement("iframe", {
@@ -3696,14 +3700,69 @@ function HelpdeskComponent({
       spacing: 1
     }, /*#__PURE__*/React.createElement(DrawerHeading, null, "Help and support"), /*#__PURE__*/React.createElement(LoadingIndicator$1, null)))),
     additionalComponents: {
-      // @ts-expect-error TODO: Relax type specification in add-ons-js to not require children
-      CalendlyWidget: reactCalendly.InlineWidget,
-      DocumentationSearch,
-      DrawerHeader,
+      CalendlyWidget: {
+        component: CalendlyWidget,
+        properties: {
+          pageSettings: {
+            attribute: false
+          },
+          prefill: {
+            attribute: false
+          },
+          styles: {
+            attribute: false
+          },
+          url: {
+            type: String
+          }
+        }
+      },
+      DocumentationSearch: {
+        component: DocumentationSearch,
+        properties: {
+          currentAppName: {
+            type: String
+          },
+          indexName: {
+            type: String
+          }
+        }
+      },
+      DrawerHeader: {
+        component: DrawerHeader,
+        properties: {
+          closeDrawer: {
+            type: Function,
+            event: false
+          }
+        }
+      },
       DrawerHeading,
-      PicobotIframe,
+      PicobotIframe: {
+        component: PicobotIframe,
+        properties: {
+          currentPath: {
+            attribute: false
+          },
+          onChangePath: {
+            type: Function,
+            event: false
+          },
+          onMessage: {
+            type: Function,
+            event: false
+          }
+        }
+      },
       ScrollContainer,
-      SwitchView
+      SwitchView: {
+        component: SwitchView,
+        properties: {
+          activeIndex: {
+            type: Number
+          }
+        }
+      }
     },
     args: {
       appName,
@@ -3721,7 +3780,8 @@ const Helpdesk = {
     staticDotPath: "",
     staticPath: "M16 10C14.9391 10 13.9217 10.4214 13.1716 11.1716C12.4214 11.9217 12 12.9391 12 14H14C14 13.4696 14.2107 12.9609 14.5858 12.5858C14.9609 12.2107 15.4696 12 16 12C16.5304 12 17.0391 12.2107 17.4142 12.5858C17.7893 12.9609 18 13.4696 18 14C18 16 15 15.75 15 19H17C17 16.75 20 16.5 20 14C20 12.9391 19.5786 11.9217 18.8284 11.1716C18.0783 10.4214 17.0609 10 16 10ZM16 24C14.4178 24 12.871 23.5308 11.5554 22.6518C10.2399 21.7727 9.21447 20.5233 8.60897 19.0615C8.00347 17.5997 7.84504 15.9911 8.15372 14.4393C8.4624 12.8874 9.22433 11.462 10.3432 10.3431C11.462 9.22433 12.8874 8.4624 14.4393 8.15372C15.9911 7.84504 17.5997 8.00346 19.0615 8.60896C20.5233 9.21446 21.7727 10.2398 22.6518 11.5554C23.5308 12.871 24 14.4177 24 16C23.9974 18.1209 23.1537 20.1542 21.6539 21.6539C20.1542 23.1537 18.1209 23.9974 16 24ZM16 6C14.0222 6 12.0888 6.58649 10.4443 7.6853C8.79981 8.78412 7.51809 10.3459 6.76121 12.1732C6.00433 14.0004 5.8063 16.0111 6.19215 17.9509C6.578 19.8907 7.53041 21.6725 8.92894 23.0711C10.3275 24.4696 12.1093 25.422 14.0491 25.8079C15.9889 26.1937 17.9996 25.9957 19.8268 25.2388C21.6541 24.4819 23.2159 23.2002 24.3147 21.5557C25.4135 19.9112 26 17.9778 26 16C26 13.3478 24.9464 10.8043 23.0711 8.92893C21.1957 7.05357 18.6522 6 16 6V6ZM15 22H17V20H15V22Z"
   },
-  name: "Helpdesk"
+  name: "Helpdesk",
+  storageExemptPaths: ["email", "phone"]
 };
 
 const Eyebrow = ({
@@ -4306,8 +4366,13 @@ const {
 function NavLinkWithBadge({
   children,
   badge,
-  onClick,
-  ...rest
+  borderBottomColor,
+  borderBottomStyle,
+  borderBottomWidth,
+  color,
+  fontSize,
+  fontWeight,
+  onClick
 }) {
   return /*#__PURE__*/React.createElement(tapestryReact.StackView, {
     as: "button",
@@ -4317,7 +4382,14 @@ function NavLinkWithBadge({
     paddingBottom: 0.75,
     onClick: () => onClick(),
     spacing: 1,
-    ...rest
+    ...{
+      borderBottomColor,
+      borderBottomStyle,
+      borderBottomWidth,
+      color,
+      fontSize,
+      fontWeight
+    }
   }, children, badge && /*#__PURE__*/React.createElement(tapestryReact.Badge, {
     size: "sm",
     fontWeight: "600",
@@ -4369,11 +4441,55 @@ function TasksComponent({
       spacing: 1
     }, /*#__PURE__*/React.createElement(DrawerHeading, null, "To do"), /*#__PURE__*/React.createElement(LoadingIndicator, null)))),
     additionalComponents: {
-      DrawerHeader,
+      DrawerHeader: {
+        component: DrawerHeader,
+        properties: {
+          closeDrawer: {
+            event: false,
+            type: Function
+          }
+        }
+      },
       DrawerHeading,
-      NavLinkWithBadge,
+      NavLinkWithBadge: {
+        component: NavLinkWithBadge,
+        properties: {
+          badge: {
+            attribute: false
+          },
+          borderBottomColor: {
+            type: String
+          },
+          borderBottomStyle: {
+            type: String
+          },
+          borderBottomWidth: {
+            type: String
+          },
+          color: {
+            type: String
+          },
+          fontSize: {
+            attribute: false
+          },
+          fontWeight: {
+            attribute: false
+          },
+          onClick: {
+            event: false,
+            type: Function
+          }
+        }
+      },
       ScrollContainer,
-      SwitchView
+      SwitchView: {
+        component: SwitchView,
+        properties: {
+          activeIndex: {
+            type: Number
+          }
+        }
+      }
     },
     args: {
       closeDrawer,
@@ -4652,6 +4768,13 @@ function isToolPathExemptFromStorage(toolName, path) {
   const tool = toolsRouteMap[toolName];
   return (_b = (_a = tool === null || tool === void 0 ? void 0 : tool.storageExemptPaths) === null || _a === void 0 ? void 0 : _a.includes(path)) !== null && _b !== void 0 ? _b : false;
 }
+function scrollToolDrawerToTop(toolName) {
+  var _a;
+  (_a = document.getElementById(`toolbarDrawer${toolName}`)) === null || _a === void 0 ? void 0 : _a.scrollTo({
+    behavior: "smooth",
+    top: 0
+  });
+}
 const TOOLS_MAP = {
   Chat,
   Helpdesk,
@@ -4721,17 +4844,21 @@ function Toolbar({
       unsubscribe();
     };
   }, [open, clearRoute]);
+  const openHelpdeskAtRoot = React.useCallback(() => {
+    onChangeToolbarFragmentRoute(Helpdesk.name.toLowerCase(), "");
+    scrollToolDrawerToTop(Helpdesk.name);
+  }, [onChangeToolbarFragmentRoute]);
   React.useEffect(() => {
     window.topbar = window.topbar || {};
     window.topbar.openProfile = () => handleToolOnClick(Profile);
-    window.topbar.openHelpdesk = () => handleToolOnClick(Helpdesk);
+    window.topbar.openHelpdesk = openHelpdeskAtRoot;
     window.openHelpdesk = window.topbar.openHelpdesk; /* TODO: Remove when products have migrated to window.topbar.openHelpdesk */
     return () => {
       delete window.topbar.openProfile;
       delete window.topbar.openHelpdesk;
       delete window.openHelpdesk; /* TODO: Remove when products have migrated to window.topbar.openHelpdesk */
     };
-  }, [Helpdesk, Profile]);
+  }, [Profile, openHelpdeskAtRoot]);
   const loginSettingsUrl = getLoginProfilePath({
     appName: appName.replace(/[\s-]/, ""),
     env: env,
@@ -4813,12 +4940,8 @@ function Toolbar({
   });
   const TOOLS = [Notifications, Tasks, displayChatIcon && Chat].filter(Boolean);
   const handleToolOnClick = tool => {
-    var _a;
     toggleDrawer(tool);
-    (_a = document.getElementById(`toolbarDrawer${tool.name}`)) === null || _a === void 0 ? void 0 : _a.scrollTo({
-      behavior: "smooth",
-      top: 0
-    });
+    scrollToolDrawerToTop(tool.name);
   };
   const toolSpecificProps = {
     Profile: {