@planningcenter/topbar 11.2.0 → 11.2.1-rc.1

package/dist/topbar.umd.js

@@ -2,7 +2,7 @@
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@planningcenter/tapestry'), require('react'), require('@planningcenter/url'), require('@planningcenter/icons/paths/general'), require('@planningcenter/jolt-client'), require('use-sync-external-store/shim'), require('@planningcenter/tapestry-react'), require('@planningcenter/add-ons'), require('@planningcenter/icons/paths/church-center'), require('@planningcenter/icons/paths/people'), require('@planningcenter/icons/paths/toolbar'), require('react-calendly'), require('algoliasearch'), require('react-instantsearch-core'), require('react-transition-group'), require('@planningcenter/datetime-fmt')) :
   typeof define === 'function' && define.amd ? define(['exports', '@planningcenter/tapestry', 'react', '@planningcenter/url', '@planningcenter/icons/paths/general', '@planningcenter/jolt-client', 'use-sync-external-store/shim', '@planningcenter/tapestry-react', '@planningcenter/add-ons', '@planningcenter/icons/paths/church-center', '@planningcenter/icons/paths/people', '@planningcenter/icons/paths/toolbar', 'react-calendly', 'algoliasearch', 'react-instantsearch-core', 'react-transition-group', '@planningcenter/datetime-fmt'], factory) :
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.PLANNINGCENTER = global.PLANNINGCENTER || {}, global.PLANNINGCENTER.Topbar = {}), global.tapestry, global.react, global.pcoUrl, global.general, global.Jolt, global.shim, global.tapestryReact, global.addOns, global.churchCenter, global.people, global.toolbar, global.reactCalendly, global.algoliasearch, global.reactInstantsearchCore, global.reactTransitionGroup, global.datetimeFmt));
-})(this, (function (exports, tapestry, React, pcoUrl, general, Jolt, shim, tapestryReact, addOns, churchCenter, people, toolbar, reactCalendly, algoliasearch, reactInstantsearchCore, reactTransitionGroup, datetimeFmt) { 'use strict';
+})(this, (function (exports, tapestry, React, pcoUrl$1, general, Jolt, shim, tapestryReact, addOns, churchCenter, people, toolbar, reactCalendly, algoliasearch, reactInstantsearchCore, reactTransitionGroup, datetimeFmt) { 'use strict';
 
   function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -461,7 +461,7 @@
           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"
       });
     }
@@ -706,7 +706,7 @@
       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.useEffect(() => {
       if (enabled) {
         subscribeToJoltChannel();
@@ -911,7 +911,7 @@
       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
       }) => {
@@ -1058,7 +1058,7 @@
     });
   }
   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: {
@@ -1076,7 +1076,7 @@
     });
   }
   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
@@ -1093,7 +1093,7 @@
       };
     }
     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
       }) => {
@@ -2152,7 +2152,7 @@
       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)"
@@ -2178,7 +2178,7 @@
         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,
@@ -2203,7 +2203,7 @@
       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)",
@@ -2310,7 +2310,7 @@
     setUserMenuVisible,
     userMenuVisible
   }) => {
-    const logoutUrl = `${pcoUrl(env)("login")}/logout`;
+    const logoutUrl = `${pcoUrl$1(env)("login")}/logout`;
     return /*#__PURE__*/React.createElement(PopupRoot, null, /*#__PURE__*/React.createElement(Popup, {
       component: Outsider,
       onOutsideClick: () => setUserMenuVisible(false),
@@ -2583,7 +2583,7 @@
     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.createElement("div", {
       className: styles$4.avatar,
       style: {
@@ -2617,7 +2617,7 @@
       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.createElement("svg", {
       "aria-hidden": "true",
       height: 24,
@@ -2759,7 +2759,7 @@
         "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.createElement(UserMenuAppLockup, {
         appName: homeProduct ? homeProduct.name : props.appName
       })), /*#__PURE__*/React.createElement("div", {
@@ -2778,7 +2778,7 @@
         "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.createElement(UserMenuAppLockup, {
         appName: name
       }))))), accountsProduct && (/*#__PURE__*/React.createElement("li", {
@@ -2823,7 +2823,7 @@
     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();
@@ -2898,7 +2898,7 @@
     const key = "toolbar";
     const [toolbarFragment, updateFragment] = useFragmentKey(key);
     const onChangeRoute = React.useCallback((tool, path = "") => {
-      const nextHash = `#${key}=${tool}/${path}`;
+      const nextHash = `#${key}=${tool}/${encodeQueryString(path)}`;
       history.replaceState(undefined, "", nextHash);
       updateFragment(nextHash);
     }, [updateFragment]);
@@ -2906,7 +2906,7 @@
       if (toolbarFragment) {
         const [tool, ...rest] = toolbarFragment.split("/");
         return {
-          path: rest.join("/"),
+          path: decodeQueryString(rest.join("/")),
           tool
         };
       } else {
@@ -2919,6 +2919,18 @@
     }, []);
     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
@@ -3439,6 +3451,16 @@
 
   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}`;
@@ -3591,9 +3613,62 @@
   function HelpdeskComponent({
     appName,
     closeDrawer,
+    currentPath,
     env,
-    helpdeskConfig
+    helpdeskConfig,
+    onChangePath
   }) {
+    const PicobotIframe = React.useMemo(() => {
+      const picobotOrigin = pcoUrl(env)("picobot");
+      return function PicobotIframe({
+        currentPath: iframePath,
+        onChangePath: onIframeChangePath,
+        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);
+        React.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.useEffect(() => {
+          const incomingPath = iframePath || "";
+          if (lastReportedPathRef.current === incomingPath) return;
+          setLoadedPath(incomingPath);
+        }, [iframePath]);
+        const iframeSrc = buildPicobotSrc(picobotOrigin, loadedPath);
+        return /*#__PURE__*/React.createElement("iframe", {
+          ref: ref,
+          src: iframeSrc,
+          style: {
+            border: 0,
+            flex: 1,
+            height: "100%",
+            width: "100%"
+          },
+          title: "Picobot"
+        });
+      };
+    }, [env]);
     return /*#__PURE__*/React.createElement(addOns.UiExtensionFirstPartyComponent, {
       grow: 1,
       display: "flex",
@@ -3613,6 +3688,7 @@
         DocumentationSearch,
         DrawerHeader,
         DrawerHeading,
+        PicobotIframe,
         ScrollContainer,
         SwitchView
       },
@@ -3620,7 +3696,9 @@
         appName,
         closeDrawer,
         currentPageParams: location.search,
-        helpdeskConfig
+        currentPath,
+        helpdeskConfig,
+        onChangePath
       }
     });
   }
@@ -3929,7 +4007,7 @@
         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: {},
@@ -3959,7 +4037,7 @@
       });
     };
     const handleCreateTask = React.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: {
@@ -4415,38 +4493,29 @@
     setFragmentRoute,
     env
   }) {
-    const unencodedCurrentPath = decodeQueryString(currentPath || "");
-    const [iframeSrcPath, setIframeSrcPath] = React.useState(unencodedCurrentPath);
-    const internalPathOfChatRef = React.useRef(unencodedCurrentPath);
-    const chatBaseURL = pcoUrl(env)("chat");
+    const initialPath = currentPath || "";
+    const [iframeSrcPath, setIframeSrcPath] = React.useState(initialPath);
+    const internalPathOfChatRef = React.useRef(initialPath);
+    const chatBaseURL = pcoUrl$1(env)("chat");
     const updateFragmentRouteAndInternalPath = React.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"
     });
     React.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,
@@ -4461,7 +4530,7 @@
       setFragmentRoute: onChangePath
     });
     useHandleMessageFromChildFrame(closeDrawer, {
-      allowedOrigin: pcoUrl(env)("chat"),
+      allowedOrigin: pcoUrl$1(env)("chat"),
       messageType: "CLOSE_DRAWER"
     });
     if (currentPath === "blankstate") {
@@ -4572,6 +4641,7 @@
   }
   const TOOLS_MAP = {
     Chat,
+    Helpdesk,
     Notifications,
     Profile,
     Tasks
@@ -4654,7 +4724,7 @@
       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 = React.useCallback(content => {