@planningcenter/topbar 11.2.5 → 12.0.0-qa-834.0

package/dist/topbar.umd.js

@@ -951,8 +951,8 @@
     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({
@@ -3465,40 +3465,44 @@
     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,
@@ -3513,11 +3517,10 @@
       color: "neutralDarker",
       size: 4,
       whiteSpace: "normal"
-    }, hit.title));
+    }, hitTitle(hit.hierarchy)));
   };
   const CustomSearchBox = ({
-    currentAppName,
-    indexName
+    currentAppName
   }) => {
     const {
       query,
@@ -3528,7 +3531,10 @@
       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] = [];
       }
@@ -3550,7 +3556,7 @@
         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",
@@ -3562,7 +3568,7 @@
       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, {
@@ -3575,12 +3581,12 @@
         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++
@@ -3588,8 +3594,8 @@
     })));
   };
 
+  const HELP_CENTER_INDEX = "help_center_english";
   const DocumentationSearch = ({
-    indexName,
     currentAppName
   }) => {
     const {
@@ -3600,13 +3606,13 @@
     } = 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
     }));
   };
 
@@ -3614,6 +3620,19 @@
     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,
@@ -3682,14 +3701,68 @@
         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,
@@ -4293,8 +4366,13 @@
   function NavLinkWithBadge({
     children,
     badge,
-    onClick,
-    ...rest
+    borderBottomColor,
+    borderBottomStyle,
+    borderBottomWidth,
+    color,
+    fontSize,
+    fontWeight,
+    onClick
   }) {
     return /*#__PURE__*/React.createElement(tapestryReact.StackView, {
       as: "button",
@@ -4304,7 +4382,14 @@
       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",
@@ -4356,11 +4441,55 @@
         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,