@planningcenter/topbar 12.2.3 → 12.2.4-qa-881.0

package/dist/topbar.js

@@ -41,7 +41,7 @@ var churchCenter__namespace = /*#__PURE__*/_interopNamespaceDefault(churchCenter
 var people__namespace = /*#__PURE__*/_interopNamespaceDefault(people);
 var toolbar__namespace = /*#__PURE__*/_interopNamespaceDefault(toolbar);
 
-var styles$d = {"accessibility-toolbar":"accessibility-toolbar-jgjUG"};
+var styles$e = {"accessibility-toolbar":"accessibility-toolbar-jgjUG"};
 
 const AccessibilityToolbar = ({
   children
@@ -53,7 +53,7 @@ const AccessibilityToolbar = ({
     (_a = document.getElementById("main-content")) === null || _a === void 0 ? void 0 : _a.focus();
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$d["accessibility-toolbar"]
+    className: styles$e["accessibility-toolbar"]
   }, /*#__PURE__*/React.createElement(tapestry.Link, {
     href: "#main-content",
     kind: "primary",
@@ -370,11 +370,11 @@ const X = ({
   fill: fill
 })));
 
-var styles$c = {"announcement":"announcement-pI5tM","announcement--platform":"announcement--platform-EcUn2","announcement--promo":"announcement--promo-FarUk","announcement-icon":"announcement-icon-Ov39-","announcement-content":"announcement-content-q2ad6","dismiss":"dismiss-wUAoU","dismiss--promo":"dismiss--promo-7zvO4"};
+var styles$d = {"announcement":"announcement-pI5tM","announcement--platform":"announcement--platform-EcUn2","announcement--promo":"announcement--promo-FarUk","announcement-icon":"announcement-icon-Ov39-","announcement-content":"announcement-content-q2ad6","dismiss":"dismiss-wUAoU","dismiss--promo":"dismiss--promo-7zvO4"};
 
 function AnnouncementIcon() {
   return /*#__PURE__*/React.createElement("svg", {
-    className: styles$c["announcement-icon"],
+    className: styles$d["announcement-icon"],
     width: "16",
     height: "16",
     viewBox: "0 0 16 16",
@@ -499,7 +499,7 @@ let StyledAnnouncement$1 = class StyledAnnouncement extends React.Component {
     } = this.props;
     const isPromo = variant === "promo";
     return /*#__PURE__*/React.createElement("div", {
-      className: classnames(styles$c["announcement"], styles$c[`announcement--${variant !== null && variant !== void 0 ? variant : "platform"}`]),
+      className: classnames(styles$d["announcement"], styles$d[`announcement--${variant !== null && variant !== void 0 ? variant : "platform"}`]),
       "data-announcement-variant": variant !== null && variant !== void 0 ? variant : "platform",
       style: isPromo ? {
         backgroundImage: promoBackgroundUrl,
@@ -508,7 +508,7 @@ let StyledAnnouncement$1 = class StyledAnnouncement extends React.Component {
         backgroundSize: "cover"
       } : undefined
     }, !isPromo && /*#__PURE__*/React.createElement(AnnouncementIcon, null), /*#__PURE__*/React.createElement("div", {
-      className: styles$c["announcement-content"],
+      className: styles$d["announcement-content"],
       style: style,
       ...platformProps
     }));
@@ -557,7 +557,7 @@ function StyledDismissButton$1({
   const isPromo = variant === "promo";
   return /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: classnames(styles$c.dismiss, isPromo && styles$c["dismiss--promo"]),
+    className: classnames(styles$d.dismiss, isPromo && styles$d["dismiss--promo"]),
     ...props
   }, /*#__PURE__*/React.createElement(X, {
     fill: isPromo ? "currentColor" : "white",
@@ -637,9 +637,9 @@ class StyledAnnouncement extends React.Component {
       ...platformProps
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: styles$c["announcement"]
+      className: styles$d["announcement"]
     }, /*#__PURE__*/React.createElement(AnnouncementIcon, null), /*#__PURE__*/React.createElement("div", {
-      className: styles$c["announcement-content"],
+      className: styles$d["announcement-content"],
       style: style,
       ...platformProps
     }));
@@ -650,7 +650,7 @@ function StyledDismissButton({
 }) {
   return /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: styles$c.dismiss,
+    className: styles$d.dismiss,
     ...props
   }, /*#__PURE__*/React.createElement(X, {
     fill: "white",
@@ -1897,7 +1897,7 @@ function MonoAppName({
   })) : (/*#__PURE__*/React.createElement("div", null, "appName not supported"));
 }
 
-var styles$b = {"unbutton":"unbutton-lEbTR"};
+var styles$c = {"unbutton":"unbutton-lEbTR"};
 
 function Unbutton({
   className,
@@ -1906,7 +1906,7 @@ function Unbutton({
   ...nativeProps
 }) {
   return /*#__PURE__*/React.createElement("button", {
-    className: classnames(styles$b.unbutton, className),
+    className: classnames(styles$c.unbutton, className),
     style: {
       ...style
     },
@@ -1915,7 +1915,7 @@ function Unbutton({
   });
 }
 
-var styles$a = {"button":"button-XMbeQ","button-accounts":"button-accounts-nNh-z","chevron":"chevron-RRg9k","is-expanded":"is-expanded-zD0A0"};
+var styles$b = {"button":"button-XMbeQ","button-accounts":"button-accounts-nNh-z","chevron":"chevron-RRg9k","is-expanded":"is-expanded-zD0A0"};
 
 const AppsButton = ({
   appName,
@@ -1930,8 +1930,8 @@ const AppsButton = ({
     "aria-haspopup": "true",
     "aria-label": `App switcher: ${appName}`,
     onClick: onClick,
-    className: classnames(styles$a.button, {
-      [styles$a["is-expanded"]]: expanded
+    className: classnames(styles$b.button, {
+      [styles$b["is-expanded"]]: expanded
     }),
     type: "button",
     style: style,
@@ -1940,7 +1940,7 @@ const AppsButton = ({
     appName: "Accounts",
     colors: colors
   }), /*#__PURE__*/React.createElement("div", {
-    className: styles$a["button-accounts"]
+    className: styles$b["button-accounts"]
   }, "Account settings"))) : (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorAppIcon, {
     appName: appName.replace(/[\s-]/, "")
   }), /*#__PURE__*/React.createElement(MonoAppName, {
@@ -1948,7 +1948,7 @@ const AppsButton = ({
     key: "mono-app-name",
     size: 24
   }))), /*#__PURE__*/React.createElement(DisclosureChevronIcon, {
-    className: styles$a.chevron,
+    className: styles$b.chevron,
     key: "disclosure-chevron-icon"
   }));
 };
@@ -2036,7 +2036,7 @@ const IEFlex1 = {
   flex: "1 1 auto"
 };
 
-var styles$9 = {"popup":"popup-sJ-Nv"};
+var styles$a = {"popup":"popup-sJ-Nv"};
 
 const HoverableListItem = ({
   active = false,
@@ -2093,7 +2093,7 @@ class Outsider extends React.Component {
   }
 }
 
-var styles$8 = {"popup-root":"popup-root-SeL5u","popup":"popup-nQXYW","is-visible":"is-visible-3DAUP"};
+var styles$9 = {"popup-root":"popup-root-SeL5u","popup":"popup-nQXYW","is-visible":"is-visible-3DAUP"};
 
 const Popup = ({
   className,
@@ -2101,8 +2101,8 @@ const Popup = ({
   isVisible,
   ...nativeProps
 }) => (/*#__PURE__*/React.createElement(C, {
-  className: classnames(styles$8.popup, {
-    [styles$8["is-visible"]]: isVisible
+  className: classnames(styles$9.popup, {
+    [styles$9["is-visible"]]: isVisible
   }, className),
   ...nativeProps
 }));
@@ -2110,7 +2110,7 @@ const Popup = ({
 const PopupRoot = ({
   ...nativeProps
 }) => (/*#__PURE__*/React.createElement("div", {
-  className: styles$8["popup-root"],
+  className: styles$9["popup-root"],
   ...nativeProps
 }));
 
@@ -2150,7 +2150,7 @@ const AppsMenu = ({
     cleanup: !visible,
     component: Outsider,
     onOutsideClick: toggle,
-    className: styles$9.popup,
+    className: styles$a.popup,
     isVisible: visible
   }, /*#__PURE__*/React.createElement("menu", {
     ref: menuRef,
@@ -3046,9 +3046,9 @@ function StyledRoot({
     `), children);
 }
 
-var styles$7 = {"route":"route--8BWe","is-active":"is-active-FsU9Y","apps-routes-separator":"apps-routes-separator-Nlm-N"};
+var styles$8 = {"route":"route--8BWe","is-active":"is-active-FsU9Y","apps-routes-separator":"apps-routes-separator-Nlm-N"};
 
-var styles$6 = {"popup":"popup-mDNKn","trigger-wrap":"trigger-wrap-Jd-KR","trigger":"trigger-WgRT5","is-visible":"is-visible-GZC0-","trigger-orgname":"trigger-orgname-TDHCc"};
+var styles$7 = {"popup":"popup-mDNKn","trigger-wrap":"trigger-wrap-Jd-KR","trigger":"trigger-WgRT5","is-visible":"is-visible-GZC0-","trigger-orgname":"trigger-orgname-TDHCc"};
 
 const UserMenu = ({
   appName,
@@ -3067,7 +3067,7 @@ const UserMenu = ({
     component: Outsider,
     onOutsideClick: () => setUserMenuVisible(false),
     cleanup: !userMenuVisible,
-    className: styles$6.popup,
+    className: styles$7.popup,
     isVisible: userMenuVisible
   }, /*#__PURE__*/React.createElement("div", null, hasConnectedPeople ? (/*#__PURE__*/React.createElement("div", {
     style: {
@@ -3211,11 +3211,11 @@ const UserMenuTrigger = ({
   userMenuVisible
 }) => {
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$6["trigger-wrap"],
+    className: styles$7["trigger-wrap"],
     "data-pendo": "topbar-org-switcher"
   }, /*#__PURE__*/React.createElement(Hoverable, {
-    className: classnames(styles$6["trigger"], {
-      [styles$6["is-visible"]]: userMenuVisible
+    className: classnames(styles$7["trigger"], {
+      [styles$7["is-visible"]]: userMenuVisible
     }),
     component: "button",
     type: "button",
@@ -3227,7 +3227,7 @@ const UserMenuTrigger = ({
       requestConnectedPeopleFetch();
     }
   }, showOrgName && (/*#__PURE__*/React.createElement("span", {
-    className: styles$6["trigger-orgname"]
+    className: styles$7["trigger-orgname"]
   }, orgName)), /*#__PURE__*/React.createElement(DisclosureChevronIcon, null)));
 };
 
@@ -3284,7 +3284,7 @@ const NotSmallTopbar = ({
     },
     appName: props.appName
   }), /*#__PURE__*/React.createElement("div", {
-    className: styles$7["apps-routes-separator"]
+    className: styles$8["apps-routes-separator"]
   }), routesVisible && props.routes, /*#__PURE__*/React.createElement("div", {
     style: {
       margin: "auto"
@@ -3322,12 +3322,12 @@ const NotSmallRoute = ({
   ...nativeProps
 }) => {
   return /*#__PURE__*/React.createElement("a", {
-    className: classnames(styles$7["route"], className, active && styles$7["is-active"]),
+    className: classnames(styles$8["route"], className, active && styles$8["is-active"]),
     ...nativeProps
   });
 };
 
-var styles$5 = {"avatar":"avatar-tW-wn"};
+var styles$6 = {"avatar":"avatar-tW-wn"};
 
 function Avatar({
   env,
@@ -3337,7 +3337,7 @@ function Avatar({
 }) {
   const url = incomingUrl || `${pcoUrl$1(env)("people")}/static/no_photo_thumbnail_gray.svg`;
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$5.avatar,
+    className: styles$6.avatar,
     style: {
       backgroundImage: `url(${url})`,
       ...style
@@ -3359,14 +3359,14 @@ ClientStorage.defaultProps = {
   method: "localStorage"
 };
 
-var styles$4 = {"appmenu-button":"appmenu-button-b0UvT","appmenu-layer":"appmenu-layer-0IQpN","appmenu-container":"appmenu-container-gackd","appmenu-scroll":"appmenu-scroll-mPSx0","appmenu-list":"appmenu-list-h7clX","appmenu-list-a":"appmenu-list-a-rGIQN","appmenu-list-a--top":"appmenu-list-a--top-RT-2F","appmenu-list-a--bottom":"appmenu-list-a--bottom-YDeBC","appmenu-close-button":"appmenu-close-button-vv9bV","current-route":"current-route-wpJgz","is-active":"is-active-wy8Bg","routes":"routes-Nmt1S","route":"route-kkknQ","profile-button":"profile-button-a2WO2"};
+var styles$5 = {"appmenu-button":"appmenu-button-b0UvT","appmenu-layer":"appmenu-layer-0IQpN","appmenu-container":"appmenu-container-gackd","appmenu-scroll":"appmenu-scroll-mPSx0","appmenu-list":"appmenu-list-h7clX","appmenu-list-a":"appmenu-list-a-rGIQN","appmenu-list-a--top":"appmenu-list-a--top-RT-2F","appmenu-list-a--bottom":"appmenu-list-a--bottom-YDeBC","appmenu-close-button":"appmenu-close-button-vv9bV","current-route":"current-route-wpJgz","is-active":"is-active-wy8Bg","routes":"routes-Nmt1S","route":"route-kkknQ","profile-button":"profile-button-a2WO2"};
 
 function AccountSettingsLink({
   env
 }) {
   const accountsName = "accounts";
   return /*#__PURE__*/React.createElement("a", {
-    className: classnames(styles$4["appmenu-list-a"], styles$4["appmenu-list-a--bottom"]),
+    className: classnames(styles$5["appmenu-list-a"], styles$5["appmenu-list-a--bottom"]),
     "data-pendo": `app-switcher--change-app--${accountsName}`,
     "data-turbolinks": false,
     href: pcoUrl$1(env)(accountsName) + getAppsSwitchProductPath(accountsName)
@@ -3389,7 +3389,7 @@ const CloseMenuButton = ({
 }) => (/*#__PURE__*/React.createElement("button", {
   "aria-label": "Close menu",
   type: "button",
-  className: styles$4["appmenu-close-button"],
+  className: styles$5["appmenu-close-button"],
   style: style
 }, /*#__PURE__*/React.createElement(X, {
   fill: color,
@@ -3470,7 +3470,7 @@ const SmallTopbar = ({
     "aria-haspopup": "true",
     "aria-label": `App switcher: ${props.appName}`,
     type: "button",
-    className: styles$4["appmenu-button"],
+    className: styles$5["appmenu-button"],
     onClick: () => {
       props.requestAppsFetch();
       props.requestConnectedPeopleFetch();
@@ -3480,12 +3480,12 @@ const SmallTopbar = ({
   }, /*#__PURE__*/React.createElement(ColorAppIcon, {
     appName: props.appName.replace(/[\s-]/, "")
   })), routesMenuVisible && (/*#__PURE__*/React.createElement("div", {
-    className: styles$4["routes"]
+    className: styles$5["routes"]
   }, props.routes)), /*#__PURE__*/React.createElement(ClientStorage, {
     item: "Topbar:Small:Menus:Products:visibility",
     render: () => (/*#__PURE__*/React.createElement("div", {
       ref: appMenuRef,
-      className: styles$4["appmenu-layer"],
+      className: styles$5["appmenu-layer"],
       style: {
         ...(productSwitcherVisible && {
           display: "block"
@@ -3504,44 +3504,44 @@ const SmallTopbar = ({
           e.stopPropagation();
         }
       },
-      className: styles$4["appmenu-container"]
+      className: styles$5["appmenu-container"]
     }, /*#__PURE__*/React.createElement("a", {
       "aria-current": props.appName === (homeProduct === null || homeProduct === void 0 ? void 0 : homeProduct.name) ? "page" : undefined,
       "aria-label": homeProduct ? homeProduct.name : props.appName,
       "data-pendo": `app-switcher--change-app--${homeProduct === null || homeProduct === void 0 ? void 0 : homeProduct.name}`,
       "data-turbolinks": false,
-      className: classnames(styles$4["appmenu-list-a"], styles$4["appmenu-list-a--top"]),
+      className: classnames(styles$5["appmenu-list-a"], styles$5["appmenu-list-a--top"]),
       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", {
-      className: styles$4["appmenu-scroll"]
+      className: styles$5["appmenu-scroll"]
     }, /*#__PURE__*/React.createElement("ul", {
       "data-pendo": "app-switcher",
-      className: styles$4["appmenu-list"]
+      className: styles$5["appmenu-list"]
     }, appsMenuFormatter(restProducts).map(({
       name
     }) => (/*#__PURE__*/React.createElement("li", {
       key: name,
-      className: styles$4["appmenu-list-li"]
+      className: styles$5["appmenu-list-li"]
     }, /*#__PURE__*/React.createElement("a", {
       "aria-current": name === props.appName ? "page" : undefined,
       "aria-label": name,
       "data-pendo": `app-switcher--change-app--${name}`,
       "data-turbolinks": false,
-      className: styles$4["appmenu-list-a"],
+      className: styles$5["appmenu-list-a"],
       href: pcoUrl$1(props.env)("accounts") + getAppsSwitchProductPath(name)
     }, /*#__PURE__*/React.createElement(UserMenuAppLockup, {
       appName: name
     }))))), accountsProduct && (/*#__PURE__*/React.createElement("li", {
-      className: styles$4["appmenu-list-li"]
+      className: styles$5["appmenu-list-li"]
     }, /*#__PURE__*/React.createElement(AccountSettingsLink, {
       env: props.env
     }))))))))
   }), /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: classnames(styles$4["current-route"], {
-      [styles$4["is-active"]]: routesMenuVisible
+    className: classnames(styles$5["current-route"], {
+      [styles$5["is-active"]]: routesMenuVisible
     }),
     onClick: props.routes.length > 0 ? () => {
       setProductSwitcherVisible(false);
@@ -3549,7 +3549,7 @@ const SmallTopbar = ({
     } : null
   }, /*#__PURE__*/React.createElement(CurrentRouteComponent, null, capitalize(currentRouteText)), props.routes.length > 0 && /*#__PURE__*/React.createElement(DisclosureChevronIcon, null)), /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: styles$4["profile-button"],
+    className: styles$5["profile-button"],
     onClick: () => {
       var _a, _b;
       props.requestConnectedPeopleFetch();
@@ -3565,7 +3565,7 @@ const SmallRoute = ({
   className,
   ...props
 }) => (/*#__PURE__*/React.createElement("a", {
-  className: classnames(styles$4["route"], className, active && styles$4["is-active"]),
+  className: classnames(styles$5["route"], className, active && styles$5["is-active"]),
   ...props
 }));
 
@@ -3704,6 +3704,124 @@ const topbarTheme = {
   id: "topbar"
 };
 
+function parseValue(element) {
+  const datatype = element.getAttribute("datatype");
+  switch (datatype) {
+    case "boolean":
+      return element.content === "true" || element.content === "1";
+    default:
+      return element.content;
+  }
+}
+function getAllPcoMeta() {
+  const elements = document.head.querySelectorAll(`meta[property^="pco:"]`);
+  const meta = {};
+  elements.forEach(e => {
+    const property = e.getAttribute("property");
+    meta[property.substring("pco:".length)] = parseValue(e);
+  });
+  return meta;
+}
+const store = createStore(getAllPcoMeta());
+const observer = new MutationObserver(() => {
+  const prevState = store.getState();
+  const nextState = getAllPcoMeta();
+  if (!shallowCompare(prevState, nextState)) store.setState(nextState);
+});
+let hasTriggeredObserve = false;
+function observe() {
+  if (hasTriggeredObserve) return;
+  hasTriggeredObserve = true;
+  observer.observe(document.head, {
+    attributes: true,
+    childList: true,
+    subtree: true
+  });
+}
+function usePcoMeta() {
+  observe();
+  return shim.useSyncExternalStore(store.subscribe, () => store.getState());
+}
+
+var styles$4 = {"debug-pco-resource":"debug-pco-resource-sLteM","debug-pco-resource-label":"debug-pco-resource-label-59ELk","debug-pco-resource-value":"debug-pco-resource-value-8IHn8","debug-pco-resource-json":"debug-pco-resource-json-Rx-JI"};
+
+function describeResource(resource) {
+  if (resource === undefined) return "No pco:resource meta tag found on this page";
+  if (resource.trim() === "") return "pco:resource meta tag is present but malformed (empty)";
+  return resource;
+}
+// A `pco:resource` value looks like `<product>/v2/<resource_type>/<id>`. The
+// product segment doubles as the API subdomain/path, so a lookup only needs it.
+function pcrlLookupUrl(resource, env) {
+  const [product] = resource.split("/");
+  if (!product) return null;
+  const apiRoot = pcoUrl$1.pcoApiUrl(product, {
+    env,
+    squiggly: false
+  });
+  const params = new URLSearchParams({
+    "where[pcrl]": resource
+  });
+  return `${apiRoot}/pcrl_lookup?${params.toString()}`;
+}
+function DebugPcoResource({
+  env
+}) {
+  const {
+    resource
+  } = usePcoMeta();
+  const [lookup, setLookup] = React.useState({
+    status: "idle"
+  });
+  React.useEffect(() => {
+    const url = resource && resource.trim() !== "" ? pcrlLookupUrl(resource, env) : null;
+    if (!url) {
+      setLookup({
+        status: "idle"
+      });
+      return undefined;
+    }
+    let cancelled = false;
+    setLookup({
+      status: "loading"
+    });
+    apiRequest(defaultFetch, url).then(({
+      json,
+      ok,
+      response
+    }) => {
+      if (cancelled) return;
+      if (ok) {
+        setLookup({
+          json,
+          status: "loaded"
+        });
+      } else {
+        setLookup({
+          message: `pcrl_lookup request failed${response ? ` (${response.status})` : ""}`,
+          status: "error"
+        });
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [resource, env]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles$4["debug-pco-resource"]
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles$4["debug-pco-resource-label"]
+  }, "Debug: pco:resource"), /*#__PURE__*/React.createElement("span", {
+    className: styles$4["debug-pco-resource-value"]
+  }, describeResource(resource)), lookup.status === "loading" && (/*#__PURE__*/React.createElement("span", {
+    className: styles$4["debug-pco-resource-value"]
+  }, "Looking up resource\u2026")), lookup.status === "error" && (/*#__PURE__*/React.createElement("span", {
+    className: styles$4["debug-pco-resource-value"]
+  }, lookup.message)), lookup.status === "loaded" && (/*#__PURE__*/React.createElement("pre", {
+    className: styles$4["debug-pco-resource-json"]
+  }, JSON.stringify(lookup.json, null, 2))));
+}
+
 var styles$3 = {"drawer-wrap":"drawer-wrap-J0rSL","is-visible":"is-visible-KTME8","drawer":"drawer-j7f4l"};
 
 function Drawer({
@@ -4104,7 +4222,9 @@ function UserProfile({
   }, "Log out"), /*#__PURE__*/React.createElement(tapestryReact.Icon, {
     name: "general.intoBox",
     fill: "var(--t-icon-color-secondary)"
-  })))), hasConnectedPeople && (/*#__PURE__*/React.createElement(tapestryReact.StackView, {
+  })))), env !== "production" && /*#__PURE__*/React.createElement(DebugPcoResource, {
+    env: env
+  }), hasConnectedPeople && (/*#__PURE__*/React.createElement(tapestryReact.StackView, {
     mediaQueries: {
       sm: {
         display: "none"
@@ -5324,45 +5444,6 @@ const Notifications = {
   name: "Notifications"
 };
 
-function parseValue(element) {
-  const datatype = element.getAttribute("datatype");
-  switch (datatype) {
-    case "boolean":
-      return element.content === "true" || element.content === "1";
-    default:
-      return element.content;
-  }
-}
-function getAllPcoMeta() {
-  const elements = document.head.querySelectorAll(`meta[property^="pco:"]`);
-  const meta = {};
-  elements.forEach(e => {
-    const property = e.getAttribute("property");
-    meta[property.substring("pco:".length)] = parseValue(e);
-  });
-  return meta;
-}
-const store = createStore(getAllPcoMeta());
-const observer = new MutationObserver(() => {
-  const prevState = store.getState();
-  const nextState = getAllPcoMeta();
-  if (!shallowCompare(prevState, nextState)) store.setState(nextState);
-});
-let hasTriggeredObserve = false;
-function observe() {
-  if (hasTriggeredObserve) return;
-  hasTriggeredObserve = true;
-  observer.observe(document.head, {
-    attributes: true,
-    childList: true,
-    subtree: true
-  });
-}
-function usePcoMeta() {
-  observe();
-  return shim.useSyncExternalStore(store.subscribe, () => store.getState());
-}
-
 const {
   LoadingIndicator,
   StackView
@@ -5704,10 +5785,10 @@ const useChatConfig = ({
   userId
 }) => {
   const [displayChatIcon, setDisplayChatIcon] = React.useState(false);
-  const [unreadMessages, setUnreadMessages] = React.useState(false);
+  const [hasUnread, setHasUnread] = React.useState(false);
   const fetchChatPerson = async () => {
     const url = `${window.location.origin}/~api/chat/v2/me`;
-    const personFields = ["can_chat_pending_age_check", "unread_messages"].join(",");
+    const personFields = ["can_chat_pending_age_check", "unread_messages", "unread_reactions"].join(",");
     const query = `?fields[Person]=${personFields}`;
     const {
       json
@@ -5719,9 +5800,10 @@ const useChatConfig = ({
   }) => {
     const {
       can_chat_pending_age_check,
-      unread_messages
+      unread_messages,
+      unread_reactions
     } = data.attributes;
-    setUnreadMessages(unread_messages);
+    setHasUnread(unread_messages || unread_reactions);
     setDisplayChatIcon(can_chat_pending_age_check);
   }).catch(noop);
   const chatJoltChannel = useJoltChannelSubscription({
@@ -5753,7 +5835,7 @@ const useChatConfig = ({
   }, [isEnabled]);
   return {
     displayChatIcon,
-    unreadIndicator: unreadMessages
+    unreadIndicator: hasUnread
   };
 };