@planningcenter/topbar 11.2.0 → 11.2.1-rc.1

package/dist/topbar.module.js

@@ -1,7 +1,7 @@
 import { Link } from '@planningcenter/tapestry';
 import * as React from 'react';
 import React__default, { useState, useEffect, useMemo, useLayoutEffect, useCallback, useRef } from 'react';
-import pcoUrl from '@planningcenter/url';
+import pcoUrl$1 from '@planningcenter/url';
 import * as general from '@planningcenter/icons/paths/general';
 import Jolt from '@planningcenter/jolt-client';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
@@ -450,7 +450,7 @@ class Provider extends React__default.Component {
         announcements: newAnnouncements
       };
     });
-    return apiRequest(this.props.configuredFetch || defaultFetch, `${pcoUrl(this.props.env)("api")}/people/v2/me/platform_notifications/${id}/dismiss`, {
+    return apiRequest(this.props.configuredFetch || defaultFetch, `${pcoUrl$1(this.props.env)("api")}/people/v2/me/platform_notifications/${id}/dismiss`, {
       method: "POST"
     });
   }
@@ -695,7 +695,7 @@ const useJoltChannelSubscription = ({
     const channel = joltIsV2(jolt) ? buildJoltChannel(jolt, channelName, fetchSubscribeTokenFn) : buildLegacyJoltChannel(jolt, channelName, fetchSubscribeTokenFn);
     setJoltChannel(channel);
     setJoltInstance(jolt);
-  }, [apiRequest, channelName, env, pcoUrl, railsCsrfFetch]);
+  }, [apiRequest, channelName, env, pcoUrl$1, railsCsrfFetch]);
   React__default.useEffect(() => {
     if (enabled) {
       subscribeToJoltChannel();
@@ -900,7 +900,7 @@ const useTopbarAPI = ({
     fetch();
   }, []);
   const fetch = () => {
-    apiRequest(configuredFetch, `${pcoUrl(env)("api")}/people/v2/me/topbar`).then(({
+    apiRequest(configuredFetch, `${pcoUrl$1(env)("api")}/people/v2/me/topbar`).then(({
       json,
       ok
     }) => {
@@ -1047,7 +1047,7 @@ function setConnectedPeopleInStore(connectedPeople) {
   });
 }
 function switchConnectedPerson(env, toId, returnPath) {
-  apiRequest(railsCsrfFetch, `${pcoUrl(env)("api")}/login/v2/me/switch_connected_person`, {
+  apiRequest(railsCsrfFetch, `${pcoUrl$1(env)("api")}/login/v2/me/switch_connected_person`, {
     data: {
       data: {
         attributes: {
@@ -1065,7 +1065,7 @@ function switchConnectedPerson(env, toId, returnPath) {
   });
 }
 function unlinkConnectedPeople(env) {
-  apiRequest(railsCsrfFetch, `${pcoUrl(env)("api")}/login/v2/me/unlink`, {
+  apiRequest(railsCsrfFetch, `${pcoUrl$1(env)("api")}/login/v2/me/unlink`, {
     method: "POST"
   }).then(({
     json
@@ -1082,7 +1082,7 @@ class ConnectedPeopleProvider extends React__default.Component {
     };
   }
   fetch() {
-    apiRequest(this.props.configuredFetch, `${pcoUrl(this.props.env)("api")}/login/v2/me/connected_people`).then(({
+    apiRequest(this.props.configuredFetch, `${pcoUrl$1(this.props.env)("api")}/login/v2/me/connected_people`).then(({
       json,
       ok
     }) => {
@@ -2141,7 +2141,7 @@ const AppsMenu = ({
     component: "a",
     "data-pendo": `app-switcher--change-app--${homeProduct.name}`,
     "data-turbolinks": false,
-    href: appName === homeProduct.name ? `${pcoUrl(env)("accounts")}/apps/${appName}` : pcoUrl(env)("accounts") + getAppsSwitchProductPath(homeProduct.name),
+    href: appName === homeProduct.name ? `${pcoUrl$1(env)("accounts")}/apps/${appName}` : pcoUrl$1(env)("accounts") + getAppsSwitchProductPath(homeProduct.name),
     style: {
       ...listItemProps,
       borderBottom: "1px solid var(--t-border-color)"
@@ -2167,7 +2167,7 @@ const AppsMenu = ({
       component: "a",
       "data-pendo": `app-switcher--change-app--${name}`,
       "data-turbolinks": false,
-      href: name === appName ? `${pcoUrl(env)("accounts")}/apps/${name.toLowerCase()}` : pcoUrl(env)("accounts") + getAppsSwitchProductPath(name),
+      href: name === appName ? `${pcoUrl$1(env)("accounts")}/apps/${name.toLowerCase()}` : pcoUrl$1(env)("accounts") + getAppsSwitchProductPath(name),
       key: name,
       style: {
         ...listItemProps,
@@ -2192,7 +2192,7 @@ const AppsMenu = ({
     component: "a",
     "data-pendo": `app-switcher--change-app--${accountsProduct.name}`,
     "data-turbolinks": false,
-    href: pcoUrl(env)("accounts") + getAppsSwitchProductPath(accountsProduct.name),
+    href: pcoUrl$1(env)("accounts") + getAppsSwitchProductPath(accountsProduct.name),
     style: {
       ...listItemProps,
       borderTop: "1px solid var(--t-border-color)",
@@ -2299,7 +2299,7 @@ const UserMenu = ({
   setUserMenuVisible,
   userMenuVisible
 }) => {
-  const logoutUrl = `${pcoUrl(env)("login")}/logout`;
+  const logoutUrl = `${pcoUrl$1(env)("login")}/logout`;
   return /*#__PURE__*/React__default.createElement(PopupRoot, null, /*#__PURE__*/React__default.createElement(Popup, {
     component: Outsider,
     onOutsideClick: () => setUserMenuVisible(false),
@@ -2572,7 +2572,7 @@ function Avatar({
   style,
   ...nativeProps
 }) {
-  const url = incomingUrl || `${pcoUrl(env)("people")}/static/no_photo_thumbnail_gray.svg`;
+  const url = incomingUrl || `${pcoUrl$1(env)("people")}/static/no_photo_thumbnail_gray.svg`;
   return /*#__PURE__*/React__default.createElement("div", {
     className: styles$4.avatar,
     style: {
@@ -2606,7 +2606,7 @@ function AccountSettingsLink({
     className: classnames(styles$3["appmenu-list-a"], styles$3["appmenu-list-a--bottom"]),
     "data-pendo": `app-switcher--change-app--${accountsName}`,
     "data-turbolinks": false,
-    href: pcoUrl(env)(accountsName) + getAppsSwitchProductPath(accountsName)
+    href: pcoUrl$1(env)(accountsName) + getAppsSwitchProductPath(accountsName)
   }, /*#__PURE__*/React__default.createElement("svg", {
     "aria-hidden": "true",
     height: 24,
@@ -2748,7 +2748,7 @@ const SmallTopbar = ({
       "data-pendo": `app-switcher--change-app--${homeProduct === null || homeProduct === void 0 ? void 0 : homeProduct.name}`,
       "data-turbolinks": false,
       className: classnames(styles$3["appmenu-list-a"], styles$3["appmenu-list-a--top"]),
-      href: homeProduct ? pcoUrl(props.env)("accounts") + getAppsSwitchProductPath(homeProduct === null || homeProduct === void 0 ? void 0 : homeProduct.name) : undefined
+      href: homeProduct ? pcoUrl$1(props.env)("accounts") + getAppsSwitchProductPath(homeProduct === null || homeProduct === void 0 ? void 0 : homeProduct.name) : undefined
     }, /*#__PURE__*/React__default.createElement(UserMenuAppLockup, {
       appName: homeProduct ? homeProduct.name : props.appName
     })), /*#__PURE__*/React__default.createElement("div", {
@@ -2767,7 +2767,7 @@ const SmallTopbar = ({
       "data-pendo": `app-switcher--change-app--${name}`,
       "data-turbolinks": false,
       className: styles$3["appmenu-list-a"],
-      href: pcoUrl(props.env)("accounts") + getAppsSwitchProductPath(name)
+      href: pcoUrl$1(props.env)("accounts") + getAppsSwitchProductPath(name)
     }, /*#__PURE__*/React__default.createElement(UserMenuAppLockup, {
       appName: name
     }))))), accountsProduct && (/*#__PURE__*/React__default.createElement("li", {
@@ -2812,7 +2812,7 @@ function getLoginProfilePath({
   userId
 }) {
   var _a, _b;
-  const basePath = pcoUrl(env)("login") + `/people/AC${userId}`;
+  const basePath = pcoUrl$1(env)("login") + `/people/AC${userId}`;
   const pathname = (_b = (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.pathname) === null || _b === void 0 ? void 0 : _b.toString();
   if (!pathname) return basePath;
   const params = new URLSearchParams();
@@ -2887,7 +2887,7 @@ function useFragmentRouting() {
   const key = "toolbar";
   const [toolbarFragment, updateFragment] = useFragmentKey(key);
   const onChangeRoute = useCallback((tool, path = "") => {
-    const nextHash = `#${key}=${tool}/${path}`;
+    const nextHash = `#${key}=${tool}/${encodeQueryString(path)}`;
     history.replaceState(undefined, "", nextHash);
     updateFragment(nextHash);
   }, [updateFragment]);
@@ -2895,7 +2895,7 @@ function useFragmentRouting() {
     if (toolbarFragment) {
       const [tool, ...rest] = toolbarFragment.split("/");
       return {
-        path: rest.join("/"),
+        path: decodeQueryString(rest.join("/")),
         tool
       };
     } else {
@@ -2908,6 +2908,18 @@ function useFragmentRouting() {
   }, []);
   return [route, onChangeRoute, clearRoute];
 }
+// The fragment value is parsed with /toolbar=([^&]+)/, so any "&" in a
+// tool-reported path would silently truncate the route. We encode just the
+// query portion on the way into the hash and decode on the way out, so
+// callers can pass and receive raw paths.
+function encodeQueryString(path) {
+  const [pathPart, queryPart] = path.split("?", 2);
+  return queryPart ? `${pathPart}?${encodeURIComponent(queryPart)}` : pathPart;
+}
+function decodeQueryString(path) {
+  const [pathPart, queryPart] = path.split("?", 2);
+  return queryPart ? `${pathPart}?${decodeURIComponent(queryPart)}` : pathPart;
+}
 
 const {
   generateColorScale
@@ -3428,6 +3440,16 @@ const useToolbarReducer = overrides => React.useReducer(reducer, {
 
 var styles = {"toolbar":"toolbar-KHJR5","toolbar-button":"toolbar-button-Ye4h5","is-current":"is-current-DZK47","toolbar-button--avatar":"toolbar-button--avatar-5FUik","toolbar-button--home":"toolbar-button--home-Pthd0"};
 
+const pcoUrl = pcoUrl$1;
+
+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 handleSearchSelect = (hit, indexName) => {
   const appName = indexName.split("_")[1];
   const zendeskUrl = `https://${appName}.zendesk.com/hc/${hit.locale.locale}/articles/${hit.id}`;
@@ -3580,9 +3602,62 @@ const {
 function HelpdeskComponent({
   appName,
   closeDrawer,
+  currentPath,
   env,
-  helpdeskConfig
+  helpdeskConfig,
+  onChangePath
 }) {
+  const PicobotIframe = React__default.useMemo(() => {
+    const picobotOrigin = pcoUrl(env)("picobot");
+    return function PicobotIframe({
+      currentPath: iframePath,
+      onChangePath: onIframeChangePath,
+      onMessage
+    }) {
+      const ref = React__default.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__default.useRef(initialPath);
+      const [loadedPath, setLoadedPath] = React__default.useState(initialPath);
+      React__default.useEffect(() => {
+        if (!onIframeChangePath && !onMessage) return undefined;
+        const handler = e => {
+          var _a, _b;
+          if (e.origin !== picobotOrigin) return;
+          if (!e.source || !ref.current) return;
+          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;
+            onIframeChangePath(reportedPath);
+          }
+          if (onMessage) onMessage(e.data);
+        };
+        window.addEventListener("message", handler);
+        return () => window.removeEventListener("message", handler);
+      }, [onIframeChangePath, onMessage]);
+      React__default.useEffect(() => {
+        const incomingPath = iframePath || "";
+        if (lastReportedPathRef.current === incomingPath) return;
+        setLoadedPath(incomingPath);
+      }, [iframePath]);
+      const iframeSrc = buildPicobotSrc(picobotOrigin, loadedPath);
+      return /*#__PURE__*/React__default.createElement("iframe", {
+        ref: ref,
+        src: iframeSrc,
+        style: {
+          border: 0,
+          flex: 1,
+          height: "100%",
+          width: "100%"
+        },
+        title: "Picobot"
+      });
+    };
+  }, [env]);
   return /*#__PURE__*/React__default.createElement(UiExtensionFirstPartyComponent, {
     grow: 1,
     display: "flex",
@@ -3602,6 +3677,7 @@ function HelpdeskComponent({
       DocumentationSearch,
       DrawerHeader,
       DrawerHeading,
+      PicobotIframe,
       ScrollContainer,
       SwitchView
     },
@@ -3609,7 +3685,9 @@ function HelpdeskComponent({
       appName,
       closeDrawer,
       currentPageParams: location.search,
-      helpdeskConfig
+      currentPath,
+      helpdeskConfig,
+      onChangePath
     }
   });
 }
@@ -3918,7 +3996,7 @@ const useNotifications = ({
       id,
       type: "graph_notification"
     }], []);
-    return apiRequest(railsCsrfFetch, `${pcoUrl(env)("api")}/notifications/v2/me/bulk_update`, {
+    return apiRequest(railsCsrfFetch, `${pcoUrl$1(env)("api")}/notifications/v2/me/bulk_update`, {
       data: {
         data: {
           attributes: {},
@@ -3948,7 +4026,7 @@ const useNotifications = ({
     });
   };
   const handleCreateTask = useCallback(async notification => {
-    return apiRequest(railsCsrfFetch, `${pcoUrl(env)("api")}/home/v2/me/task_lists/inbox/tasks`, {
+    return apiRequest(railsCsrfFetch, `${pcoUrl$1(env)("api")}/home/v2/me/task_lists/inbox/tasks`, {
       data: {
         data: {
           attributes: {
@@ -4404,38 +4482,29 @@ function useStableIframeSrcAttributeAndSyncFragmentRoute({
   setFragmentRoute,
   env
 }) {
-  const unencodedCurrentPath = decodeQueryString(currentPath || "");
-  const [iframeSrcPath, setIframeSrcPath] = useState(unencodedCurrentPath);
-  const internalPathOfChatRef = useRef(unencodedCurrentPath);
-  const chatBaseURL = pcoUrl(env)("chat");
+  const initialPath = currentPath || "";
+  const [iframeSrcPath, setIframeSrcPath] = useState(initialPath);
+  const internalPathOfChatRef = useRef(initialPath);
+  const chatBaseURL = pcoUrl$1(env)("chat");
   const updateFragmentRouteAndInternalPath = useCallback(event => {
-    const unencodedPath = event.data.payload.replace(/^\/?topbar/, "") // Maybe this should happen on the child side of things?
+    const reportedPath = event.data.payload.replace(/^\/?topbar/, "") // Maybe this should happen on the child side of things?
     .replace(/^\/+/, "");
-    internalPathOfChatRef.current = unencodedPath;
-    // URL encode the payload's query string for the fragment route
-    // so possible query params don't get dropped by the fragment router
-    setFragmentRoute(encodeQueryString(unencodedPath));
+    internalPathOfChatRef.current = reportedPath;
+    setFragmentRoute(reportedPath);
   }, [setFragmentRoute]);
   useHandleMessageFromChildFrame(updateFragmentRouteAndInternalPath, {
     allowedOrigin: chatBaseURL,
     messageType: "NEW_ROUTE_RENDERED"
   });
   useEffect(() => {
-    if (internalPathOfChatRef.current !== unencodedCurrentPath) {
-      setIframeSrcPath(unencodedCurrentPath);
+    const incomingPath = currentPath || "";
+    if (internalPathOfChatRef.current !== incomingPath) {
+      setIframeSrcPath(incomingPath);
     }
   }, [currentPath]);
   const iframeSrc = [chatBaseURL, "topbar", iframeSrcPath].filter(Boolean).join("/");
   return iframeSrc;
 }
-function encodeQueryString(path) {
-  const [pathPart, queryPart] = path.split("?", 2);
-  return queryPart ? `${pathPart}?${encodeURIComponent(queryPart)}` : pathPart;
-}
-function decodeQueryString(path) {
-  const [pathPart, queryPart] = path.split("?", 2);
-  return queryPart ? `${pathPart}?${decodeURIComponent(queryPart)}` : pathPart;
-}
 
 function ChatTool({
   env,
@@ -4450,7 +4519,7 @@ function ChatTool({
     setFragmentRoute: onChangePath
   });
   useHandleMessageFromChildFrame(closeDrawer, {
-    allowedOrigin: pcoUrl(env)("chat"),
+    allowedOrigin: pcoUrl$1(env)("chat"),
     messageType: "CLOSE_DRAWER"
   });
   if (currentPath === "blankstate") {
@@ -4561,6 +4630,7 @@ function isToolPathExemptFromStorage(toolName, path) {
 }
 const TOOLS_MAP = {
   Chat,
+  Helpdesk,
   Notifications,
   Profile,
   Tasks
@@ -4643,7 +4713,7 @@ function Toolbar({
     env: env,
     userId: userId
   });
-  const logoutUrl = `${pcoUrl(env)("login")}/logout`;
+  const logoutUrl = `${pcoUrl$1(env)("login")}/logout`;
   const profileUrl = `/people/AC${userId}`;
   const HelpDeskTool = Helpdesk;
   const setToolAndOpenDrawer = useCallback(content => {