@planningcenter/topbar 11.2.5-rc.0 → 12.0.0-qa-834.0

package/dist/topbar.js

@@ -964,8 +964,8 @@ const AppsProvider = ({
   const notificationsEnabled = !window.notificationsDisabled;
   const organizationTimeZone = ((_k = (_j = topbarResponse === null || topbarResponse === void 0 ? void 0 : topbarResponse.data) === null || _j === void 0 ? void 0 : _j.attributes) === null || _k === void 0 ? void 0 : _k.org_time_zone) || "America/Los_Angeles";
   const algoliaSearchAuth = {
-    algoliaApplicationId: (_m = (_l = topbarResponse === null || topbarResponse === void 0 ? void 0 : topbarResponse.data) === null || _l === void 0 ? void 0 : _l.attributes) === null || _m === void 0 ? void 0 : _m.algolia_application_identifier,
-    algoliaSearchOnlyApiKey: (_p = (_o = topbarResponse === null || topbarResponse === void 0 ? void 0 : topbarResponse.data) === null || _o === void 0 ? void 0 : _o.attributes) === null || _p === void 0 ? void 0 : _p.algolia_search_key
+    algoliaApplicationId: (_m = (_l = topbarResponse === null || topbarResponse === void 0 ? void 0 : topbarResponse.data) === null || _l === void 0 ? void 0 : _l.attributes) === null || _m === void 0 ? void 0 : _m.algolia_help_center_application_identifier,
+    algoliaSearchOnlyApiKey: (_p = (_o = topbarResponse === null || topbarResponse === void 0 ? void 0 : topbarResponse.data) === null || _o === void 0 ? void 0 : _o.attributes) === null || _p === void 0 ? void 0 : _p.algolia_help_center_search_key
   };
   const joltPromise = React.useMemo(() => {
     return resolveJoltPromise({
@@ -3478,40 +3478,44 @@ function buildPicobotSrc(origin, path) {
   return fragment ? `${base}#${fragment}` : base;
 }
 
-const handleSearchSelect = (hit, indexName) => {
-  const appName = indexName.split("_")[1];
-  const zendeskUrl = `https://${appName}.zendesk.com/hc/${hit.locale.locale}/articles/${hit.id}`;
-  const newTab = window.open(zendeskUrl, "_blank");
+// The article heading lives in the deepest populated hierarchy level (lvl0 is
+// always "Planning Center").
+const hitTitle = hierarchy => (hierarchy === null || hierarchy === void 0 ? void 0 : hierarchy.lvl6) || (hierarchy === null || hierarchy === void 0 ? void 0 : hierarchy.lvl5) || (hierarchy === null || hierarchy === void 0 ? void 0 : hierarchy.lvl4) || (hierarchy === null || hierarchy === void 0 ? void 0 : hierarchy.lvl3) || (hierarchy === null || hierarchy === void 0 ? void 0 : hierarchy.lvl2) || (hierarchy === null || hierarchy === void 0 ? void 0 : hierarchy.lvl1) || (hierarchy === null || hierarchy === void 0 ? void 0 : hierarchy.lvl0) || "";
+const handleSearchSelect = hit => {
+  // `url` is always absolute (it is also the basis of objectID), so open it
+  // directly. Bail out defensively if a record somehow arrives without one.
+  if (!(hit === null || hit === void 0 ? void 0 : hit.url)) return;
+  const newTab = window.open(hit.url, "_blank");
   if (newTab) {
     newTab.focus();
   }
 };
+// Mirrors @planningcenter/tapestry-react's Logo registry.
+const VALID_LOGO_NAMES = new Set(["api", "calendar", "check-ins", "church-center", "giving", "groups", "headcounts", "home", "login", "music-stand", "people", "planning-center", "publishing", "registrations", "services"]);
 const HeadingIcon = ({
-  sectionName,
-  currentAppName
+  currentAppName,
+  product
 }) => {
-  const lowerCaseSectionName = sectionName.toLowerCase();
-  if (lowerCaseSectionName === "account information" || lowerCaseSectionName === "recent updates") {
-    return /*#__PURE__*/React.createElement(tapestryReact.Icon, {
-      name: lowerCaseSectionName === "account information" ? "general.cogPerson" : "general.outlinedGenericFile",
-      color: "foregroundSecondary"
-    });
-  } else if (currentAppName === "Accounts") {
+  const appName = product || currentAppName;
+  if (!appName) return null;
+  const logoName = appName.toLowerCase().replace(/\s+/g, "-");
+  // Accounts has no tapestry Logo, so use the cog icon
+  if (logoName === "accounts") {
     return /*#__PURE__*/React.createElement(tapestryReact.Icon, {
       name: "general.cog",
       color: "foregroundSecondary"
     });
-  } else {
-    return /*#__PURE__*/React.createElement(tapestryReact.StackView, {
-      width: 2,
-      height: 2
-    }, /*#__PURE__*/React.createElement(tapestryReact.Logo, {
-      name: currentAppName.toLowerCase().replace(/[\s]/, "-"),
-      size: "sm",
-      theme: "color",
-      markOnly: true
-    }));
   }
+  if (!VALID_LOGO_NAMES.has(logoName)) return null;
+  return /*#__PURE__*/React.createElement(tapestryReact.StackView, {
+    width: 2,
+    height: 2
+  }, /*#__PURE__*/React.createElement(tapestryReact.Logo, {
+    name: logoName,
+    size: "sm",
+    theme: "color",
+    markOnly: true
+  }));
 };
 const HitResult = ({
   hit,
@@ -3526,11 +3530,10 @@ const HitResult = ({
     color: "neutralDarker",
     size: 4,
     whiteSpace: "normal"
-  }, hit.title));
+  }, hitTitle(hit.hierarchy)));
 };
 const CustomSearchBox = ({
-  currentAppName,
-  indexName
+  currentAppName
 }) => {
   const {
     query,
@@ -3541,7 +3544,10 @@ const CustomSearchBox = ({
     results
   } = reactInstantsearchCore.useHits();
   const groups = results === null || results === void 0 ? void 0 : results.hits.reduce((acc, hit) => {
-    const key = hit.category.title;
+    // A result with no url can't be opened, so don't render it at all.
+    if (!hit.url) return acc;
+    // Fall back so a record without a product never yields an "undefined" heading.
+    const key = hit.product || currentAppName || "Other";
     if (!acc[key]) {
       acc[key] = [];
     }
@@ -3563,7 +3569,7 @@ const CustomSearchBox = ({
       name: "general.search"
     }),
     onChange: e => setQuery(e.target.value),
-    onSelect: selectedValue => handleSearchSelect(selectedValue, indexName),
+    onSelect: selectedValue => handleSearchSelect(selectedValue),
     placement: "bottom-start"
   }, !hits.length && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(tapestryReact.StackView, {
     axis: "horizontal",
@@ -3575,7 +3581,7 @@ const CustomSearchBox = ({
     size: 4,
     whiteSpace: "normal"
   }, "No results match your search")))), groups && Object.keys(groups).map(key => {
-    const hits = groups[key];
+    const groupHits = groups[key];
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: key
     }, resultIndex > 0 && /*#__PURE__*/React.createElement(tapestryReact.Divider, {
@@ -3588,12 +3594,12 @@ const CustomSearchBox = ({
       paddingVertical: 1
     }, /*#__PURE__*/React.createElement(HeadingIcon, {
       currentAppName: currentAppName,
-      sectionName: key
+      product: key
     }), /*#__PURE__*/React.createElement(tapestryReact.Text, {
       size: 5,
       color: "foregroundSecondary",
       fontWeight: 500
-    }, key)), hits.map(hit => (/*#__PURE__*/React.createElement(HitResult, {
+    }, key)), groupHits.map(hit => (/*#__PURE__*/React.createElement(HitResult, {
       key: hit.objectID,
       hit: hit,
       index: resultIndex++
@@ -3601,8 +3607,8 @@ const CustomSearchBox = ({
   })));
 };
 
+const HELP_CENTER_INDEX = "help_center_english";
 const DocumentationSearch = ({
-  indexName,
   currentAppName
 }) => {
   const {
@@ -3613,13 +3619,13 @@ const DocumentationSearch = ({
   } = useStore();
   const searchClient = algoliasearch(algoliaApplicationId, algoliaSearchOnlyApiKey);
   return /*#__PURE__*/React.createElement(reactInstantsearchCore.InstantSearch, {
-    indexName: indexName,
+    indexName: HELP_CENTER_INDEX,
     searchClient: searchClient
   }, /*#__PURE__*/React.createElement(reactInstantsearchCore.Configure, {
-    hitsPerPage: 5
+    hitsPerPage: 5,
+    optionalFilters: currentAppName ? [`product:${currentAppName}`] : undefined
   }), /*#__PURE__*/React.createElement(CustomSearchBox, {
-    currentAppName: currentAppName,
-    indexName: indexName
+    currentAppName: currentAppName
   }));
 };
 
@@ -3627,6 +3633,19 @@ const {
   LoadingIndicator: LoadingIndicator$1,
   StackView: StackView$1
 } = addOns.components;
+function CalendlyWidget({
+  url,
+  pageSettings,
+  prefill,
+  styles
+}) {
+  return url ? (/*#__PURE__*/React.createElement(reactCalendly.InlineWidget, {
+    url: url,
+    pageSettings: pageSettings,
+    prefill: prefill,
+    styles: styles
+  })) : null;
+}
 function HelpdeskComponent({
   appName,
   closeDrawer,
@@ -3695,14 +3714,68 @@ 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: {
+            event: false
+          }
+        }
+      },
       DrawerHeading,
-      PicobotIframe,
+      PicobotIframe: {
+        component: PicobotIframe,
+        properties: {
+          currentPath: {
+            attribute: false
+          },
+          onChangePath: {
+            event: false,
+            type: Function
+          },
+          onMessage: {
+            event: false,
+            type: Function
+          }
+        }
+      },
       ScrollContainer,
-      SwitchView
+      SwitchView: {
+        component: SwitchView,
+        properties: {
+          activeIndex: {
+            type: Number
+          }
+        }
+      }
     },
     args: {
       appName,
@@ -4306,8 +4379,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 +4395,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 +4454,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,