@planningcenter/topbar 12.0.0 → 12.1.0

package/dist/topbar.module.js

@@ -940,8 +940,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 = useMemo(() => {
     return resolveJoltPromise({
@@ -3454,40 +3454,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__default.createElement(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__default.createElement(Icon, {
       name: "general.cog",
       color: "foregroundSecondary"
     });
-  } else {
-    return /*#__PURE__*/React__default.createElement(StackView$2, {
-      width: 2,
-      height: 2
-    }, /*#__PURE__*/React__default.createElement(Logo, {
-      name: currentAppName.toLowerCase().replace(/[\s]/, "-"),
-      size: "sm",
-      theme: "color",
-      markOnly: true
-    }));
   }
+  if (!VALID_LOGO_NAMES.has(logoName)) return null;
+  return /*#__PURE__*/React__default.createElement(StackView$2, {
+    width: 2,
+    height: 2
+  }, /*#__PURE__*/React__default.createElement(Logo, {
+    name: logoName,
+    size: "sm",
+    theme: "color",
+    markOnly: true
+  }));
 };
 const HitResult = ({
   hit,
@@ -3502,11 +3506,10 @@ const HitResult = ({
     color: "neutralDarker",
     size: 4,
     whiteSpace: "normal"
-  }, hit.title));
+  }, hitTitle(hit.hierarchy)));
 };
 const CustomSearchBox = ({
-  currentAppName,
-  indexName
+  currentAppName
 }) => {
   const {
     query,
@@ -3517,7 +3520,10 @@ const CustomSearchBox = ({
     results
   } = 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] = [];
     }
@@ -3539,7 +3545,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__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StackView$2, {
     axis: "horizontal",
@@ -3551,7 +3557,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__default.createElement(React__default.Fragment, {
       key: key
     }, resultIndex > 0 && /*#__PURE__*/React__default.createElement(Divider, {
@@ -3564,12 +3570,12 @@ const CustomSearchBox = ({
       paddingVertical: 1
     }, /*#__PURE__*/React__default.createElement(HeadingIcon, {
       currentAppName: currentAppName,
-      sectionName: key
+      product: key
     }), /*#__PURE__*/React__default.createElement(Text, {
       size: 5,
       color: "foregroundSecondary",
       fontWeight: 500
-    }, key)), hits.map(hit => (/*#__PURE__*/React__default.createElement(HitResult, {
+    }, key)), groupHits.map(hit => (/*#__PURE__*/React__default.createElement(HitResult, {
       key: hit.objectID,
       hit: hit,
       index: resultIndex++
@@ -3577,8 +3583,8 @@ const CustomSearchBox = ({
   })));
 };
 
+const HELP_CENTER_INDEX = "help_center_english";
 const DocumentationSearch = ({
-  indexName,
   currentAppName
 }) => {
   const {
@@ -3589,13 +3595,13 @@ const DocumentationSearch = ({
   } = useStore();
   const searchClient = algoliasearch(algoliaApplicationId, algoliaSearchOnlyApiKey);
   return /*#__PURE__*/React__default.createElement(InstantSearch, {
-    indexName: indexName,
+    indexName: HELP_CENTER_INDEX,
     searchClient: searchClient
   }, /*#__PURE__*/React__default.createElement(Configure, {
-    hitsPerPage: 5
+    hitsPerPage: 5,
+    optionalFilters: currentAppName ? [`product:${currentAppName}`] : undefined
   }), /*#__PURE__*/React__default.createElement(CustomSearchBox, {
-    currentAppName: currentAppName,
-    indexName: indexName
+    currentAppName: currentAppName
   }));
 };
 
@@ -3706,9 +3712,6 @@ function HelpdeskComponent({
         properties: {
           currentAppName: {
             type: String
-          },
-          indexName: {
-            type: String
           }
         }
       },