@planningcenter/topbar 12.3.0-qa-937.2 → 12.3.0-qa-937.3

package/dist/topbar.js

@@ -33707,13 +33707,13 @@ const initialState = {
   pending: null
 };
 const reducer = (state, action) => {
-  var _a;
+  var _a, _b;
   switch (action.type) {
     case ActionType.mount:
       return {
         ...state,
         currentContent: action.payload.content,
-        pending: ((_a = state.pending) === null || _a === void 0 ? void 0 : _a.tool) === action.payload.content.name ? state.pending : null
+        pending: ((_a = state.pending) === null || _a === void 0 ? void 0 : _a.tool) === ((_b = action.payload.content) === null || _b === void 0 ? void 0 : _b.name) ? state.pending : null
       };
     case ActionType.unmount:
       return {
@@ -33750,6 +33750,176 @@ const useToolbarReducer = overrides => React__namespace.useReducer(reducer, {
 
 var styles$1 = {"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"};
 
+// PCO Box serves TLS by default, and a bare http:// frame inside an https
+// product page is blocked as mixed content, so follow the page's scheme.
+const iframeSrc = () => `${window.location.protocol}//pco.test/iframe`;
+const STAFF_PINK = "var(--t-fill-color-product-staff)";
+// The pco.test domain is only ever served by a local PCO Box, so the tool
+// stays hidden in staging and production — and on Topbar's own dev server,
+// which runs on localhost and has no pco.test to frame.
+function isPcoTestHost() {
+  const {
+    hostname
+  } = window.location;
+  return hostname === "pco.test" || hostname.endsWith(".pco.test");
+}
+// Flattened from the source artwork's two outline paths — its gradients,
+// filters and clip paths carry nothing at icon size. Those paths are authored
+// on a 128px canvas, hence the transform: it fits the pair into the same ~24px
+// optical box the sibling toolbar icons occupy. Filled explicitly rather than
+// with `currentColor` so the mark stays staff pink instead of inheriting the
+// toolbar's text color and its hover/active states.
+const WRENCH = "m22.42 17.2 12.96 12.95-2.5 8.78-8.78 2.5-12.96-12.96-5.86 5.86 14.89 21.46 17.56-3.34 61.63 65.62c9.44 9.51 22.17-4.75 13.34-12.87L46.85 42.92l4.01-17.76-22.14-14.27-6.3 6.31zm81.06 91.97c1.68-1.68 4.4-1.68 6.08 0 1.68 1.68 1.68 4.4 0 6.08-1.68 1.67-4.4 1.67-6.08 0-1.68-1.68-1.68-4.4 0-6.08z";
+const SCREWDRIVER = "m55.8 12 .76.16c8.84-2.94 28.68 8.64 24.26 18.96-1.12 1.62-.93 4.5.42 6.31L56.43 62.25c-1.39-1.39-4.48-1.36-5.9 0L9.5 101.63c-3.74 3.59-.8 6.64.78 8.25l7.36 7.36c1.61 1.6 5.86 3.76 8.88.56l38.72-40.81c1.35-1.42 1.36-4.47 0-5.87 0 0 .01-.02 0-.02l24.91-24.9c2.63 2.37 5.11 2.57 7.47 1.93 4.55-1.25 7.09 3.21 9.81 6.46l-1.23 1.21c-1.82 1.84-1.65 4.94.39 6.98s5.15 2.21 6.97.39l8.14-8.13c1.82-1.84 1.65-4.94-.4-6.97-1.84-1.85-4.51-2.09-6.37-.77-5.58-6.26-2.65-7.2-10.01-15.35L91.13 17.86C81.2 8.12 68.3 8.13 55.8 12z";
+function ToolsIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    "aria-hidden": "true",
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: STAFF_PINK,
+    transform: "translate(2.92 2.66) scale(.204)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: WRENCH
+  }), /*#__PURE__*/React.createElement("path", {
+    d: SCREWDRIVER
+  })));
+}
+// A cross-origin frame's own history object is unreachable (touching it throws
+// a SecurityError), but the frame's navigations do land in the top-level joint
+// session history, so the *parent's* back/forward traverse them while leaving
+// the host page in place. Counting frame loads tracks how deep we are, which is
+// what keeps a click on Back from stepping past the frame's first page and
+// navigating the host app instead. Loads we caused are attributed to the
+// traversal that requested them rather than counted as new navigations.
+function useFrameHistory() {
+  const [steps, setSteps] = React.useState({
+    back: 0,
+    forward: 0
+  });
+  // Traversal has to read the current counts outside of render, so the ref is
+  // the source of truth and state exists to paint the buttons.
+  const stepsRef = React.useRef(steps);
+  const pendingTraversal = React.useRef(null);
+  const frameIsLoaded = React.useRef(false);
+  const moveTo = React.useCallback(next => {
+    stepsRef.current = next;
+    setSteps(next);
+  }, []);
+  const onFrameLoad = React.useCallback(() => {
+    if (!frameIsLoaded.current) {
+      // The frame's first page is the floor, not a step.
+      frameIsLoaded.current = true;
+    } else {
+      const traversal = pendingTraversal.current;
+      pendingTraversal.current = null;
+      const {
+        back,
+        forward
+      } = stepsRef.current;
+      if (traversal === "back") {
+        moveTo({
+          back: back - 1,
+          forward: forward + 1
+        });
+      } else if (traversal === "forward") {
+        moveTo({
+          back: back + 1,
+          forward: forward - 1
+        });
+      } else {
+        moveTo({
+          back: back + 1,
+          forward: 0
+        });
+      }
+    }
+  }, [moveTo]);
+  // Guarded here rather than trusting the button's disabled state: traversing
+  // with no frame step left would navigate the host app out from under us.
+  const traverse = React.useCallback(direction => {
+    if (stepsRef.current[direction] > 0) {
+      pendingTraversal.current = direction;
+      window.history[direction]();
+    }
+  }, []);
+  return {
+    onFrameLoad,
+    steps,
+    traverse
+  };
+}
+function NavButton({
+  direction,
+  disabled,
+  onClick
+}) {
+  return /*#__PURE__*/React.createElement(tapestryReact.Button
+  // Tapestry's `disabled` suppresses the click but emits no ARIA state.
+  , {
+    "aria-disabled": disabled,
+    disabled: disabled,
+    hover: {
+      backgroundColor: "var(--t-fill-color-neutral-070)"
+    },
+    icon: {
+      fill: "var(--t-icon-color-dim)",
+      name: direction === "back" ? "general.leftChevron" : "general.rightChevron",
+      size: "md"
+    },
+    onClick: onClick,
+    opacity: disabled ? 0.35 : 1,
+    theme: false,
+    title: direction === "back" ? "Back" : "Forward"
+  });
+}
+function DeveloperToolsComponent({
+  closeDrawer
+}) {
+  const {
+    onFrameLoad,
+    steps,
+    traverse
+  } = useFrameHistory();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DrawerHeader, {
+    closeDrawer: closeDrawer
+  }, /*#__PURE__*/React.createElement(tapestryReact.StackView, {
+    alignment: "center",
+    axis: "horizontal",
+    spacing: 0.25
+  }, /*#__PURE__*/React.createElement(NavButton, {
+    direction: "back",
+    disabled: steps.back === 0,
+    onClick: () => traverse("back")
+  }), /*#__PURE__*/React.createElement(NavButton, {
+    direction: "forward",
+    disabled: steps.forward === 0,
+    onClick: () => traverse("forward")
+  }), /*#__PURE__*/React.createElement(DrawerHeading, {
+    paddingLeft: 0.5
+  }, "Developer Tools"))), /*#__PURE__*/React.createElement(tapestryReact.Box, {
+    as: "iframe",
+    border: "none",
+    flex: "1",
+    minHeight: 0,
+    onLoad: onFrameLoad,
+    src: iframeSrc(),
+    title: "Developer Tools",
+    width: "100%"
+  }));
+}
+const DeveloperTools = {
+  component: DeveloperToolsComponent,
+  icons: {
+    component: ToolsIcon
+  },
+  label: "Developer Tools",
+  // No space: `name` becomes an element id and a pendo attribute.
+  name: "DeveloperTools"
+};
+
 var styles = {"banner":"banner-YfQ37","stacked":"stacked-EwLRh","content":"content-lNjWf","icon":"icon-abz7q","iconShape":"iconShape-6uyot","iconSparkle":"iconSparkle-t0OzK","text":"text--Vlhl","title":"title-zOEOR","subtitle":"subtitle-ufLnk","chevron":"chevron-oOUA-","inlineContent":"inlineContent-h5sVl","sparkle":"sparkle-uuMBp","inlineTitle":"inlineTitle-ru2Rk","action":"action-fSY3n","actionLabel":"actionLabel-MRBjb","actionChevron":"actionChevron-DghlN"};
 
 const SPARKLE_PATH$1 = "M3.809 10.1332C3.87511 9.95596 4.12579 9.95588 4.19181 10.1332L4.63712 11.3363C4.64169 11.3487 4.65116 11.359 4.66349 11.3637L5.86661 11.809C6.04452 11.8749 6.04455 12.126 5.86661 12.1918L4.66349 12.6371C4.65134 12.6417 4.64173 12.6513 4.63712 12.6635L4.19181 13.8666C4.12597 14.0445 3.87486 14.0445 3.809 13.8666L3.36368 12.6635C3.35905 12.6512 3.3487 12.6417 3.33634 12.6371L2.13321 12.1918C1.95588 12.1258 1.95596 11.8751 2.13321 11.809L3.33634 11.3637C3.34877 11.3591 3.35908 11.3488 3.36368 11.3363L3.809 10.1332ZM8.52091 3.33341C8.68571 2.88899 9.31518 2.88891 9.47989 3.33341L10.5922 6.34122C10.6037 6.37226 10.6285 6.39712 10.6596 6.4086L13.6664 7.52091C14.1113 7.68553 14.1113 8.31528 13.6664 8.47989L10.6596 9.5922C10.6285 9.6037 10.6037 9.6285 10.5922 9.65958L9.47989 12.6664C9.31528 13.1113 8.68553 13.1113 8.52091 12.6664L7.4086 9.65958C7.39712 9.62853 7.37226 9.60371 7.34122 9.5922L4.33341 8.47989C3.88891 8.31518 3.88899 7.68571 4.33341 7.52091L7.34122 6.4086C7.3723 6.3971 7.3971 6.3723 7.4086 6.34122L8.52091 3.33341ZM3.809 2.13321C3.87511 1.95596 4.12579 1.95588 4.19181 2.13321L4.63712 3.33634C4.64169 3.3487 4.65116 3.35905 4.66349 3.36368L5.86661 3.809C6.04452 3.87486 6.04455 4.12597 5.86661 4.19181L4.66349 4.63712C4.65134 4.64173 4.64173 4.65134 4.63712 4.66349L4.19181 5.86661C4.12597 6.04455 3.87486 6.04452 3.809 5.86661L3.36368 4.66349C3.35905 4.65116 3.3487 4.64169 3.33634 4.63712L2.13321 4.19181C1.95588 4.12579 1.95596 3.87511 2.13321 3.809L3.33634 3.36368C3.34877 3.35908 3.35908 3.34877 3.36368 3.33634L3.809 2.13321Z";
@@ -34993,7 +35163,6 @@ const Notifications = {
   name: "Notifications"
 };
 
-// The sparkle sits clear of the unread dot at (24, 8), so both variants match.
 const SPARKLE_PATH = "M8.7824 18.8791C8.88371 18.5973 9.26996 18.5973 9.37127 18.8791L9.94256 20.465C10.0222 20.6863 10.1914 20.8616 10.4064 20.9435L11.6779 21.4269L11.9484 21.5304L11.9963 21.5539C12.2205 21.6839 12.2047 22.039 11.9484 22.1369L11.6779 22.2394L10.4064 22.7248C10.1915 22.8068 10.0222 22.9812 9.94256 23.2023L9.37127 24.7893L9.34881 24.8381C9.23098 25.054 8.92273 25.0539 8.80486 24.8381L8.7824 24.7893L8.2111 23.2023C8.14141 23.0088 8.0029 22.8513 7.82536 22.76L7.74723 22.7248L6.47573 22.2394L6.20522 22.1369C5.93172 22.0325 5.93164 21.6347 6.20522 21.5304L6.47476 21.4269L7.74723 20.9435C7.96226 20.8616 8.13147 20.6863 8.2111 20.465L8.7824 18.8791ZM17.5706 8.11138C17.8241 7.40747 18.7928 7.40734 19.0462 8.11138L20.472 12.0782C20.6711 12.6318 21.0952 13.0687 21.6331 13.2735L25.4867 14.7413C26.1711 15.002 26.1711 15.9983 25.4867 16.2589L21.6331 17.7267C21.0952 17.9316 20.6711 18.3684 20.472 18.922L19.2649 22.2785L19.0462 22.8889L18.9905 23.0119C18.6956 23.5517 17.9212 23.5515 17.6262 23.0119L17.5706 22.8889L17.3508 22.2795L16.1448 18.922C15.9457 18.3684 15.5206 17.9316 14.9827 17.7267L11.1291 16.2589C10.4449 15.9982 10.4449 15.0021 11.1291 14.7413L14.9827 13.2735C15.4533 13.0943 15.8379 12.7376 16.0598 12.2804L16.1448 12.0782L17.5706 8.11138ZM18.0266 12.755C17.6351 13.8438 16.7916 14.7249 15.6946 15.1427L14.7551 15.5001L15.6946 15.8575C16.7916 16.2753 17.6351 17.1564 18.0266 18.2453L18.3079 19.0275L18.5891 18.2453C18.9806 17.1564 19.8242 16.2753 20.9212 15.8575L21.8597 15.5001L20.9212 15.1427C19.8242 14.7249 18.9806 13.8439 18.5891 12.755L18.3079 11.9718L18.0266 12.755ZM8.7824 6.21097C8.88388 5.9297 9.26982 5.92966 9.37127 6.21097L9.94256 7.7979C10.0222 8.01911 10.1915 8.19346 10.4064 8.27544L11.6779 8.75982L11.8322 9.16607L11.9484 8.86334C12.2218 8.96779 12.2218 9.36542 11.9484 9.46979L11.6779 9.57233L10.4064 10.0567C10.1914 10.1387 10.0222 10.3139 9.94256 10.5352L9.37127 12.1212C9.26996 12.4029 8.88371 12.4029 8.7824 12.1212L8.2111 10.5352C8.14139 10.3415 8.00304 10.1832 7.82536 10.0919L7.74723 10.0567L6.47573 9.57233L6.20522 9.46979C5.9486 9.37195 5.93265 9.01568 6.15737 8.8858L6.20522 8.86334L7.74723 8.27544C7.96214 8.19346 8.13149 8.0191 8.2111 7.7979L8.69451 6.45413L8.7824 6.21097ZM11.9484 8.86334L11.8322 9.16607L11.6779 8.75982L11.9484 8.86334Z";
 // Helpdesk reads this context off the email path to open its email form the
 // same way a handoff inside its own drawer does.
@@ -35041,8 +35210,9 @@ function PicobotComponent({
         },
         type: "LOAD_CONVERSATION"
       });
-    }
-    if (draft) {
+    } else if (draft) {
+      // Not both: Picobot cancels a conversation load when a prefill
+      // starts a new conversation.
       (_b = picobotRef.current) === null || _b === void 0 ? void 0 : _b.postMessage({
         payload: {
           source: "email_form",
@@ -35533,19 +35703,25 @@ const picobotFetch = (url, opts) => defaultFetch(url, {
     "X-PCO-API-Version": "2026-08-11"
   }
 });
+// Routes wait on the gate, so a slow Picobot can't hold them up for long.
+const GATE_TIMEOUT_MS = 3000;
 const usePicobotConfig = ({
   isEnabled
 }) => {
   // Undefined until Picobot answers.
   const [panelEnabled, setPanelEnabled] = React.useState();
   React.useEffect(() => {
-    if (!isEnabled) return;
+    if (!isEnabled) return undefined;
+    // Whatever settles first wins, so a late answer can't reopen the gate.
+    const settle = enabled => setPanelEnabled(current => current !== null && current !== void 0 ? current : enabled);
+    const timeout = setTimeout(() => settle(false), GATE_TIMEOUT_MS);
     apiRequest(picobotFetch, `${window.location.origin}/~api/picobot/v2/me`).then(({
       json
     }) => {
       var _a, _b;
-      return setPanelEnabled(((_b = (_a = json === null || json === void 0 ? void 0 : json.data) === null || _a === void 0 ? void 0 : _a.attributes) === null || _b === void 0 ? void 0 : _b.picobot_panel_enabled) === true);
-    }).catch(() => setPanelEnabled(false));
+      return settle(((_b = (_a = json === null || json === void 0 ? void 0 : json.data) === null || _a === void 0 ? void 0 : _a.attributes) === null || _b === void 0 ? void 0 : _b.picobot_panel_enabled) === true);
+    }).catch(() => settle(false)).finally(() => clearTimeout(timeout));
+    return () => clearTimeout(timeout);
   }, [isEnabled]);
   return {
     displayPicobotIcon: panelEnabled === true,
@@ -35798,8 +35974,13 @@ function Toolbar({
       picobot: picobot || helpdesk
     });
   }, [displayPicobotIcon, toolStateCookie]);
-  const openPicobot = React.useCallback(options => openTool(Picobot.name, "", options), [openTool]);
-  // Like Helpdesk's openPicobot arg, this only exists when the panel does.
+  const openPicobot = React.useCallback(options => {
+    var _a;
+    // Moving an open Picobot off its path reloads or navigates the iframe,
+    // which would race the options it's being handed.
+    const path = currentContent === Picobot ? (_a = toolbarFragmentRoute === null || toolbarFragmentRoute === void 0 ? void 0 : toolbarFragmentRoute.path) !== null && _a !== void 0 ? _a : "" : "";
+    openTool(Picobot.name, path, options);
+  }, [openTool, currentContent, toolbarFragmentRoute === null || toolbarFragmentRoute === void 0 ? void 0 : toolbarFragmentRoute.path]);
   React.useEffect(() => {
     if (!displayPicobotIcon) return undefined;
     window.topbar = window.topbar || {};
@@ -35808,7 +35989,7 @@ function Toolbar({
       delete window.topbar.openPicobot;
     };
   }, [displayPicobotIcon, openPicobot]);
-  const TOOLS = [Notifications, Tasks, displayChatIcon && Chat, displayPicobotIcon && Picobot].filter(Boolean);
+  const TOOLS = [Notifications, Tasks, displayChatIcon && Chat, displayPicobotIcon && Picobot, isPcoTestHost() && DeveloperTools].filter(Boolean);
   const handleToolOnClick = tool => {
     toggleDrawer(tool);
     scrollToolDrawerToTop(tool.name);
@@ -35878,21 +36059,20 @@ function Toolbar({
     name: "toolbar.planningCenter",
     size: "24px"
   })), [HelpDeskTool, ...TOOLS].map(tool => {
+    var _a;
     const current = open && currentContent === tool;
     const indicator = indicatorState[tool.name];
     return /*#__PURE__*/React.createElement(ToolbarButton, {
       current: current,
       onClick: () => handleToolOnClick(tool),
       id: getDataPendoAttribute(tool.name),
-      "aria-label": `Open ${tool.name} drawer`,
+      "aria-label": `Open ${(_a = tool.label) !== null && _a !== void 0 ? _a : tool.name} drawer`,
       "data-pendo": getDataPendoAttribute(tool.name),
       key: tool.name
-    }, !indicator && (/*#__PURE__*/React.createElement(ToolbarButtonIcon, {
-      path: tool.icons.staticPath
-    })), indicator && (/*#__PURE__*/React.createElement(ToolbarButtonIcon, {
-      path: tool.icons.staticDotPath,
-      dot: true
-    })));
+    }, /*#__PURE__*/React.createElement(ToolbarToolIcon, {
+      icons: tool.icons,
+      dot: !!indicator
+    }));
   })), /*#__PURE__*/React.createElement(DrawerWrap, {
     isVisible: open
   }, mounted && (/*#__PURE__*/React.createElement(Drawer, {
@@ -35916,6 +36096,19 @@ const ToolbarButton = ({
     ...restProps
   }, children);
 };
+function ToolbarToolIcon({
+  dot,
+  icons
+}) {
+  if ("component" in icons) {
+    return /*#__PURE__*/React.createElement(icons.component, null);
+  } else {
+    return /*#__PURE__*/React.createElement(ToolbarButtonIcon, {
+      path: dot ? icons.staticDotPath : icons.staticPath,
+      dot: dot
+    });
+  }
+}
 function ToolbarButtonIcon({
   dot,
   path