@planningcenter/cc-nav - npm Package Compare versions

Comparing version 4.3.0 to 4.3.1

CHANGELOG.md

@@ -8,2 +8,8 @@ # Changelog
 
+## [4.3.1] - 2023-04-04
+
+### Changed
+
+- Removed theming and notification inbox flipper logic
+
 ## [4.3.0] - 2023-01-23
@@ -10,0 +16,0 @@

dist/nav.js

@@ -1,2 +0,2 @@
-var e=require("@planningcenter/cc-api-client");require("color");var n=require("prop-types"),t=require("react"),i=require("@planningcenter/icons/sprites/groups.svg"),a=require("@planningcenter/symbol"),r=require("@reach/menu-button"),o=require("@planningcenter/jolt-client");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=/*#__PURE__*/l(t),c=/*#__PURE__*/l(i),d=/*#__PURE__*/l(o);function u(){return u=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e},u.apply(this,arguments)}function f(e,n){if(null==e)return{};var t,i,a={},r=Object.keys(e);for(i=0;i<r.length;i++)n.indexOf(t=r[i])>=0||(a[t]=e[t]);return a}var m=["key"],g=["key"],p=["key"],h=["as"];function v(e){var n,i,a,r,o=e.links,l=e.loginLink,c=e.myChurchCenterLink,d=e.notificationCount,f=e.notificationIconPathPrefix,m=void 0===f?"":f,g=e.notificationLink,p=e.organizationDisplayName,h=e.organizationImageUrl,v=e.organizationLink,_=e.personDisplayName,x=e.personIdentified,w=e.personImageUrl,E=(i=(n=s.default.useState(window.innerWidth))[0],r=s.default.useCallback(function(){return a(window.innerWidth)},[a=n[1]]),s.default.useEffect(function(){return window.addEventListener("resize",r),window.addEventListener("orientationchange",r),function(){window.removeEventListener("resize",r),window.removeEventListener("orientationchange",r)}},[r]),i>=720),I=t.useState(0),L=I[0],P=I[1],C=s.default.useCallback(function(){var e=window.pageYOffset;P(e)},[P]);return t.useEffect(function(){return window.addEventListener("scroll",C,{passive:!0}),function(){window.removeEventListener("scroll",C)}},[C]),/*#__PURE__*/s.default.createElement(s.default.Fragment,null,/*#__PURE__*/s.default.createElement(N,null),L>136&&/*#__PURE__*/s.default.createElement("div",{className:"condensed-header-placeholder"}),/*#__PURE__*/s.default.createElement("header",{className:"Header "+(L>136&&"condensed-header")},/*#__PURE__*/s.default.createElement("div",{className:"Header__layout"},/*#__PURE__*/s.default.createElement("div",{className:"Header__org-wrapper"},/*#__PURE__*/s.default.createElement(k,u({},v,{className:"Header__org-link"}),h?/*#__PURE__*/s.default.createElement("img",{src:h,alt:p,className:"Header__org-avatar"}):/*#__PURE__*/s.default.createElement("h1",{className:"Header__org-name"},p))),E?/*#__PURE__*/s.default.createElement(b,{links:o,loginLink:l,myChurchCenterLink:c,notificationCount:d,notificationIconPathPrefix:m,notificationLink:g,personDisplayName:_,personIdentified:x,personImageUrl:w}):/*#__PURE__*/s.default.createElement(y,{links:o,loginLink:l,myChurchCenterLink:c,notificationCount:d,notificationIconPathPrefix:m,notificationLink:g,personDisplayName:_,personIdentified:x,personImageUrl:w,scrollLimit:136,scrollPosition:L}))))}function b(e){var n,t,i=e.links,a=e.loginLink,o=e.myChurchCenterLink,l=e.notificationCount,c=e.notificationIconPathPrefix,d=void 0===c?"":c,p=e.notificationLink,h=e.personDisplayName,v=e.personIdentified,b=e.personImageUrl;return i.length>5?(n=i.slice(0,4),t=i.slice(4)):n=i,/*#__PURE__*/s.default.createElement("nav",{className:"Navigation d-n@iframe"},n.map(function(e){var n=e.key,t=f(e,m);/*#__PURE__*/return s.default.createElement(k,u({className:"Navigation__link",key:n},t))}),t&&/*#__PURE__*/s.default.createElement(r.Menu,null,function(e){/*#__PURE__*/return s.default.createElement(s.default.Fragment,null,/*#__PURE__*/s.default.createElement(r.MenuButton,{className:"Navigation__more-button Navigation__link"},"More",/*#__PURE__*/s.default.createElement("span",{className:"Navigation__more-button-toggle"},/*#__PURE__*/s.default.createElement(E,{style:{transform:e.isOpen?"scaleY(-1)":"scaleY(1)",transition:"transform 0.2s"}}))),/*#__PURE__*/s.default.createElement(r.MenuList,{className:"Navigation-menu"},t.map(function(e){var n=e.key,t=f(e,g);/*#__PURE__*/return s.default.createElement(r.MenuLink,u({className:"Navigation-link",key:n},t))})))}),v?/*#__PURE__*/s.default.createElement(s.default.Fragment,null,/*#__PURE__*/s.default.createElement(x,{notificationCount:l,notificationIconPathPrefix:d,notificationLink:p}),/*#__PURE__*/s.default.createElement(k,u({className:"Navigation__link"},o),/*#__PURE__*/s.default.createElement(I,{displayName:h,imageUrl:b}))):/*#__PURE__*/s.default.createElement(k,u({className:"Navigation__link"},a)))}function y(e){var n=e.links,t=e.loginLink,i=e.myChurchCenterLink,a=e.notificationIconPathPrefix,o=e.personDisplayName,l=e.personIdentified,c=e.personImageUrl;/*#__PURE__*/return s.default.createElement("nav",{className:"AltNavigation d-n@iframe"},l&&/*#__PURE__*/s.default.createElement(s.default.Fragment,null,/*#__PURE__*/s.default.createElement(x,{notificationCount:e.notificationCount,notificationIconPathPrefix:void 0===a?"":a,notificationLink:e.notificationLink}),/*#__PURE__*/s.default.createElement(k,u({className:"Navigation__link"},i),/*#__PURE__*/s.default.createElement("img",{src:c,alt:o+"'s avatar",className:"AltNavigation__person-avatar"}))),/*#__PURE__*/s.default.createElement(r.Menu,null,function(){/*#__PURE__*/return s.default.createElement(s.default.Fragment,null,/*#__PURE__*/s.default.createElement(_,null),/*#__PURE__*/s.default.createElement(r.MenuList,{className:"AltNavigation__layout"},/*#__PURE__*/s.default.createElement("div",{className:"AltNavigation__person-box "+(l&&"logged-in")},/*#__PURE__*/s.default.createElement("div",{className:"display-flex align-items-center justify-content-space-between"},/*#__PURE__*/s.default.createElement("div",{className:"AltNavigation__person"}),/*#__PURE__*/s.default.createElement(_,null))),n.map(function(e){var n=e.key,t=f(e,p);/*#__PURE__*/return s.default.createElement(r.MenuLink,u({className:"AltNavigation__link",key:n},t))}),!l&&/*#__PURE__*/s.default.createElement(r.MenuLink,u({className:"AltNavigation__link"},t))))}))}function _(){/*#__PURE__*/return s.default.createElement(r.MenuButton,{className:"AltNavigation__trigger"},/*#__PURE__*/s.default.createElement("div",{className:"icon"},/*#__PURE__*/s.default.createElement("span",{className:"line"}),/*#__PURE__*/s.default.createElement("span",{className:"line"}),/*#__PURE__*/s.default.createElement("span",{className:"line"})))}function N(){/*#__PURE__*/return s.default.createElement("style",null,'\n  /* Header */\n  .Header {\n    background-color: var(--color-tint9);\n    border-bottom: 1px solid var(--color-tint7);\n    height: 136px;\n    padding: 1.5rem 2rem 1.5rem 1.5rem;\n    z-index: 1000; /* Thanks to Vimeo for setting their z-index to 999 😠*/\n  }\n\n  .iframed .Header { position: relative }\n\n  @media (min-width: 720px) {\n    .Header { padding: 1.5rem 2rem }\n  }\n\n  .Header__layout {\n    align-items: center;\n    display: flex;\n    height: 100%;\n    justify-content: space-between;\n    margin: 0 auto;\n    max-width: 900px;\n    width: 100%;\n  }\n  .Header__org-wrapper {\n    padding-right: 2rem;\n  }\n  .Header__org-link {\n    display: block;\n  }\n  .Header__org-name {\n    font-size: 18px;\n    line-height: 1.2;\n    margin: 0;\n    max-width: 220px;\n  }\n  .Header__org-avatar {\n    max-height: 80px;\n  }\n  [data-color-scheme="dark"][data-contrast="low"] .Header__org-avatar {\n    background-color: var(--color-tint0);\n    border-radius: 4px;\n    padding: 2px;\n  }\n\n  /* Condensed Header */\n  .condensed-header {\n    border-bottom-color: var(--color-tint6);\n    height: 68px;\n    position: fixed;\n    top: 0;\n    width: 100%;\n    animation: fade-in 0.25s;\n  }\n\n  .condensed-header-placeholder {\n    height: 136px; /* this keeps the browser from jumping when scrolling to the bottom of a short page  */\n  }\n  .condensed-header .Navigation-wrapper,\n  .condensed-header .Navigation-button {\n    height: 34px;\n  }\n  .condensed-header .Navigation-avatar {\n    height: 34px;\n    width: 34px;\n    min-width: 34px;\n  }\n  .condensed-header .Navigation-displayName {\n    font-size: 12px;\n  }\n\n  .condensed-header .Header__org-avatar {\n    max-height: 48px;\n  }\n\n  .condensed-header .Navigation__link {\n    font-size: 0.875rem;\n  }\n\n  .condensed-header .AltNavigation__trigger .icon .line {\n    height: 3px;\n    margin: 4px auto;\n    width: 28px;\n    transition: all 0.2s;\n  }\n\n  @keyframes fade-in {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  /* Navigation */\n  .Navigation {\n    align-items: center;\n    display: flex;\n    justify-content: flex-end;\n    white-space: nowrap;\n  }\n  .Navigation__link {\n    color: var(--color-tint2);\n    margin-right: 1.5rem;\n  }\n  .Navigation__link[aria-current=true],\n  .Navigation__link[aria-current=page] {\n    color: var(--color-tint1);\n    font-weight: 600;\n  }\n  .Navigation__more-button {\n    background-color: transparent;\n    border: 0;\n    font-weight: 400;\n    padding: 0;\n  }\n  .Navigation__more-button-toggle {\n    font-size: 10px;\n    padding-left: 2px;\n  }\n\n  /* AltNavigation */\n  .AltNavigation {\n    align-items: center;\n    display: flex;\n  }\n  .AltNavigation .NotificationBell {\n    top: 2px;\n    padding: 4px;\n  }\n  .AltNavigation .NotificationBell:after {\n    right: 4px;\n    top: 8px;\n  }\n  .AltNavigation__layout[data-reach-menu-list]{\n    animation: slide-in 0.3s ease;\n    background: var(--color-tint9);\n    border: 0;\n    border-left: 1px solid var(--color-tint5);\n    bottom: 0;\n    box-shadow: -2px 0 6px rgba(0,0,0,0.1);\n    overflow: auto;\n    padding: 0;\n    position: fixed;\n    right: 0;\n    top: 0;\n    width: 280px;\n    z-index: 998;\n  }\n  .AltNavigation__layout [data-reach-menu-item] { outline: none }\n  .AltNavigation__link {\n    color: var(--color-tint1);\n    display: block;\n    border-bottom: 1px solid var(--color-tint6);\n    padding: 1rem;\n  }\n  .AltNavigation__link[data-selected] {\n    background: var(--color-tint7);\n    color: var(--color-tint1);\n  }\n  .AltNavigation__trigger {\n    background: transparent;\n    border: 0;\n    padding: 0;\n  }\n  .AltNavigation__person-box {\n    border-bottom: 1px solid var(--color-tint5);\n    display: flex;\n    flex-direction: column;\n    height: 136px;\n    justify-content: center;\n    padding: 0 1.5rem;\n  }\n  .AltNavigation__person-box.logged-in {\n    justify-content: space-between;\n    padding: 2rem 1.5rem 0 1.5rem;\n  }\n  .AltNavigation__person {\n    align-items: center;\n    display: flex;\n    flex-wrap: wrap;\n  }\n  .AltNavigation__person-avatar {\n    border-radius: 100%;\n    width: 40px;\n  }\n  .AltNavigation__person-name,\n  .AltNavigation__person-name[data-selected] {\n    background: transparent;\n    color: var(--color-tint1);\n    font-size: 1rem;\n    font-weight: 500;\n    padding-left: 1rem;\n  }\n  .AltNavigation__person-actions {\n    font-size: 0.875rem;\n    padding-top: 0.5rem;\n  }\n  .AltNavigation__trigger .icon .line {\n    background-color: var(--color-tint3);\n    border-radius: 4px;\n    display: block;\n    height: 4px;\n    margin: 6px auto;\n    -webkit-transition: all 0.3s ease-in-out;\n    -o-transition: all 0.3s ease-in-out;\n    transition: all 0.3s ease-in-out;\n    width: 32px;\n  }\n  .AltNavigation__trigger .icon .line:nth-child(3){ margin-bottom: 0 }\n  .AltNavigation__trigger .icon:hover { cursor: pointer }\n  .AltNavigation__trigger[aria-expanded=true] .icon .line:nth-child(2) {\n    opacity: 0;\n  }\n  .AltNavigation__trigger[aria-expanded=true] .icon .line:nth-child(1) {\n    -webkit-transform: translateY(10px) rotate(45deg);\n    -ms-transform: translateY(10px) rotate(45deg);\n    -o-transform: translateY(10px) rotate(45deg);\n    transform: translateY(10px) rotate(45deg);\n  }\n  .AltNavigation__trigger[aria-expanded=true] .icon .line:nth-child(3) {\n    -webkit-transform: translateY(-10px) rotate(-45deg);\n    -ms-transform: translateY(-10px) rotate(-45deg);\n    -o-transform: translateY(-10px) rotate(-45deg);\n    transform: translateY(-10px) rotate(-45deg);\n  }\n  @keyframes slide-in {\n    0% { transform: translateX(100%) }\n    100% { transform: translateX(0) }\n  }\n\n  /* LoggedInLinks */\n  .LoggedInLinks {\n    align-items: flex-start;\n    display: flex;\n    margin: 0 -1.5rem\n  }\n  .LoggedInLinks > * { flex: 1 }\n  .LoggedInLinks > div:last-child { border-left: 1px solid var(--color-tint5) }\n  .LoggedInLinks [data-reach-menu-item],\n  .LoggedInLinks [data-selected] {\n    background: var(--color-tint7);\n    color: var(--color-tint1);\n    display: block;\n    flex: 1;\n    font-size: 0.875rem;\n    line-height: 1;\n    padding: 0.75rem;\n    text-align: center;\n  }\n\n  /* NotificationBell */\n  .NotificationBell--has-notifications {\n    position: relative;\n  }\n\n  .NotificationBell--has-notifications:after {\n    background-color: var(--color-ruby);\n    border-radius: 100%;\n    border: 1px solid var(--color-tint10);\n    content: "";\n    position: absolute;\n    height: 7px;\n    right: 0;\n    top: 4px;\n    width: 7px;\n  }\n\n  /* utility */\n  .display-flex { display: flex }\n  .align-items-center { align-items: center }\n  .justify-content-space-between { justify-content: space-between }\n')}function k(e){var n=e.as,t=void 0===n?"a":n,i=f(e,h);/*#__PURE__*/return s.default.createElement(t,i)}function x(e){var n=e.notificationCount,t=e.notificationIconPathPrefix,i=void 0===t?"":t,a=e.notificationLink;return a?/*#__PURE__*/s.default.createElement(k,u({},a,{className:"Navigation__link NotificationBell "+(n>0&&"NotificationBell--has-notifications")}),/*#__PURE__*/s.default.createElement("span",null,/*#__PURE__*/s.default.createElement(w,{pathPrefix:i,notificationCount:n}))):null}function w(e){var n=e.pathPrefix;/*#__PURE__*/return s.default.createElement(a.Symbol,{symbol:""+(void 0===n?"":n)+c.default+"#notification",className:"p-r t-2p notification-icon","aria-label":e.notificationCount+" notifications"})}function E(e){var n=e.style;/*#__PURE__*/return s.default.createElement("svg",{className:"symbol",role:"img",title:"down-chevron icon",style:void 0===n?{}:n},/*#__PURE__*/s.default.createElement("symbol",{xmlns:"http://www.w3.org/2000/svg",id:"Navigation-svg-symbol-down-chevron",viewBox:"0 0 16 16"},/*#__PURE__*/s.default.createElement("title",null,"down-chevron"),/*#__PURE__*/s.default.createElement("polygon",{points:"8.003 14.068 0.005 6.07 1.782 4.293 8.003 10.514 14.223 4.293 16 6.07 8.003 14.068"})),/*#__PURE__*/s.default.createElement("use",{href:"#Navigation-svg-symbol-down-chevron"}))}function I(e){var n=e.displayName,t=e.imageUrl;/*#__PURE__*/return s.default.createElement("div",null,/*#__PURE__*/s.default.createElement("style",null,"\n    .Navigation-avatar {\n      border-radius: 100%;\n      height: 40px;\n      width: 40px;\n      min-width: 40px;\n    }\n  "),/*#__PURE__*/s.default.createElement("img",{className:"Navigation-avatar",width:40,height:40,alt:n+"'s avatar",src:t}))}function L(e,n){var t=s.default.useState(function(){try{var t=window.localStorage.getItem(e);return t?JSON.parse(t):n}catch(e){return n}}),i=t[0],a=t[1],r=s.default.useCallback(function(n){try{var t=n instanceof Function?n(i):n;a(t),window.localStorage.setItem(e,JSON.stringify(t))}catch(e){console.log(e)}},[a]);return[i,r]}v.propTypes={links:n.arrayOf(n.object).isRequired,loginLink:n.object.isRequired,myChurchCenterLink:n.object.isRequired,notificationCount:n.number,notificationIconPathPrefix:n.string,notificationLink:n.object.isRequired,organizationDisplayName:n.string.isRequired,organizationImageUrl:n.string,organizationLink:n.object.isRequired,personDisplayName:n.string.isRequired,personIdentified:n.bool.isRequired,personImageUrl:n.string.isRequired},b.propTypes={links:n.arrayOf(n.object).isRequired,loginLink:n.object.isRequired,myChurchCenterLink:n.object.isRequired,notificationCount:n.number,notificationIconPathPrefix:n.string,notificationLink:n.object.isRequired,personDisplayName:n.string.isRequired,personIdentified:n.bool.isRequired,personImageUrl:n.string.isRequired},y.propTypes={links:n.arrayOf(n.object).isRequired,loginLink:n.object.isRequired,myChurchCenterLink:n.object.isRequired,notificationCount:n.number,notificationIconPathPrefix:n.string,notificationLink:n.object.isRequired,personDisplayName:n.string.isRequired,personIdentified:n.bool.isRequired,personImageUrl:n.string.isRequired,scrollLimit:n.number.isRequired,scrollPosition:n.number.isRequired},k.propTypes={as:n.any},x.propTypes={notificationCount:n.number.isRequired,notificationIconPathPrefix:n.string,notificationLink:n.object.isRequired},w.propTypes={notificationCount:n.number.isRequired,pathPrefix:n.string},I.propTypes={displayName:n.string,imageUrl:n.string.isRequired};var P=function(n,t){try{return Promise.resolve(e.sessionApiClient.post("/notifications/v2/me/jolt_subscribe",{data:{attributes:{channel:n,connection_id:t}}})).then(function(e){return e.data.id})}catch(e){return Promise.reject(e)}},C=function(){try{return Promise.resolve(e.sessionApiClient.post("/global/v2/jolt_connect")).then(function(e){return e.data.id})}catch(e){return Promise.reject(e)}},q=function(){try{var n={ChurchCenterWebMenu:["items"],Organization:["avatar_url","name"],Person:["avatar_url","first_name"],ThemeSettings:["primary_color","theme_enabled","version"],WebBoot:["current_organization","current_person","features","jolt_websocket_url","published_menu","published_theme_settings"]},t="/publishing/v2/web_boot?include="+["current_organization","current_person","published_menu","published_theme_settings"]+"&"+Object.keys(n).map(function(e){return"fields["+e+"]="+n[e]}).join("&");return Promise.resolve(e.sessionApiClient.get(t)).then(function(e){var n=function(n){var t,i,a,r,o=null==(t=e.data.relationships[n].data)||null==(i=t[0])?void 0:i.type,l=null==(a=e.data.relationships[n].data)||null==(r=a[0])?void 0:r.id;return e.included.find(function(e){return e.type===o&&e.id===l})},t=n("published_menu").attributes.items.map(function(e){return{children:e.label,href:e.uri}}),i=n("current_organization"),a=n("current_person"),r=i.attributes.name,o=i.attributes.avatar_url,l=a.attributes.first_name,s=a.attributes.avatar_url+"?g=120x120%23",c="anonymous"!==a.id,d=n("published_theme_settings");return{flipperFeatureThemingEnabled:e.data.attributes.features.ROLLOUT_church_center_theming,joltWebsocketUrl:e.data.attributes.jolt_websocket_url,links:t,notificationsInboxEnabled:e.data.attributes.features.ROLLOUT_notifications_inbox,organizationDisplayName:r,organizationImageUrl:o,personDisplayName:l,personId:c?a.id:null,personIdentified:c,personImageUrl:s,publishedThemeSettings:d}})}catch(e){return Promise.reject(e)}},j=["@churchcenter/nav:SelfHydratingNavitar","@churchcenter/nav@2.0.0:SelfHydratingHeader","@planningcenter/cc-nav@2.0.0:SelfHydratingHeader"],R=function(){return null},z=/*#__PURE__*/s.default.createRef();function A(e){var n=e.defaultLinks,i=e.mapLinkProps,a=void 0===i?H:i,r=L("@planningcenter/cc-nav@4.2.5:SelfHydratingHeader",{flipperFeatureThemingEnabled:!1,joltWebsocketUrl:null,links:void 0===n?[]:n,notificationsInboxEnabled:!1,organizationDisplayName:e.defaultOrganizationDisplayName,organizationImageUrl:e.defaultOrganizationImageUrl,personDisplayName:e.defaultPersonDisplayName,personId:null,personIdentified:e.defaultPersonIdentified,personImageUrl:e.defaultPersonImageUrl,publishedThemeSettings:{attributes:{primary_color:null,theme_enabled:!1}}}),o=r[0],l=r[1],c=o.publishedThemeSettings,f=(c=void 0===c?{attributes:{primary_color:null,theme_enabled:!1}}:c).attributes,m=f.primary_color,g=f.theme_enabled,p=null==o?void 0:o.flipperFeatureThemingEnabled;s.default.useEffect(function(){j.forEach(function(e){return window.localStorage.removeItem(e)})});var h=s.default.useState(500),b=h[0],y=h[1];s.default.useEffect(function(){var e,n=!0;return q().then(function(e){n&&l(e)}).catch(function(n){console.error("Refetching header props:",n),e=window.setTimeout(function(){return y(b+100)},b)}),function(){n=!1,e&&window.clearTimeout(e)}},[b,y]),t.useEffect(function(){p&&m&&g?(document.body.style.setProperty("--color-brand-light",m),document.body.style.setProperty("--color-brand-dark",m),document.body.style.setProperty("--color-brand-gradient-start","var(--color-brand)"),document.body.style.setProperty("--color-brand-gradient-end","var(--color-brand)")):(document.body.style.setProperty("--color-brand-light","var(--color-turquoise)"),document.body.style.setProperty("--color-brand-dark","var(--color-turquoise)"),document.body.style.setProperty("--color-brand-gradient-start","var(--color-topaz)"),document.body.style.setProperty("--color-brand-gradient-end","var(--color-emerald)"))},[m,g]);var _=s.default.useCallback(function(){window.localStorage.removeItem("@planningcenter/cc-nav@4.2.5:SelfHydratingHeader"),window.localStorage.removeItem("@planningcenter/cc-nav:useNotificationCount")});z.current=_,s.default.useEffect(function(){return function(){return z.current=R}},[]);var N=function(e){"/logout"===new URL(e.target.href).pathname&&_()},k=["/profile","/logout","/login"],x=o.links.filter(function(e){return!k.includes(e.href)}).map(a).map(function(e){return u({},e,{onClick:N})}),w=a({children:"Log in",href:"/login",onClick:function(e){e.target.href="/login?return="+encodeURIComponent(window.location.href)}}),E=function(e){var n=e.joltWebsocketUrl,t=e.personId,i=s.default.useState(null),a=i[0],r=i[1],o=s.default.useState(null),l=o[0],c=o[1];return s.default.useEffect(function(){var e=n&&t?new d.default(n,{fetchAuthTokenFn:C}):null;return r(e),function(){return e&&e.disconnect()}},[n,t]),s.default.useEffect(function(){var e=null,n=t?"church_center.notifications.people."+t:null;return a&&n&&(e=a.subscribe(n,{fetchSubscribeTokenFn:P})),c(e),function(){e&&a.unsubscribe(n)}},[a,t]),l}({joltWebsocketUrl:o.joltWebsocketUrl,personId:o.personId}),I=S({notificationsChannel:E,personIdentified:o.notificationsInboxEnabled&&o.personIdentified}),A=o.notificationsInboxEnabled?a({href:"/notifications"}):null,U=a({href:"/me"}),O="/"+window.location.pathname.split("/")[1];/*#__PURE__*/return s.default.createElement(s.default.Fragment,null,/*#__PURE__*/s.default.createElement(v,{links:x,loginLink:w,myChurchCenterLink:U,notificationCount:I,notificationIconPathPrefix:O,notificationLink:A,organizationDisplayName:o.organizationDisplayName,organizationImageUrl:o.organizationImageUrl,organizationLink:a({href:"/home"}),personDisplayName:o.personDisplayName,personIdentified:o.personIdentified,personImageUrl:o.personImageUrl}))}function U(e,n){try{return e.split("/")[1]===n.split("/")[1]}catch(e){return!1}}z.current=R,A.propTypes={defaultLinks:n.arrayOf(n.shape({children:n.any.isRequired,href:n.string.isRequired})),defaultOrganizationDisplayName:n.string.isRequired,defaultOrganizationImageUrl:n.string,defaultPersonDisplayName:n.string.isRequired,defaultPersonIdentified:n.bool.isRequired,defaultPersonImageUrl:n.string.isRequired,mapLinkProps:n.func};var H=function(e){return u({},e,{"aria-current":U(window.location.pathname,e.href)?"true":null,key:e.href})};function S(n){var t=n.personIdentified,i=n.notificationsChannel,a=n.notificationDelay,r=void 0===a?1e3:a,o=s.default.useState(0),l=o[0],c=o[1],d=L("@planningcenter/cc-nav:useNotificationCount",0),u=d[0],f=d[1];s.default.useEffect(function(){if(t){var n=!0,i=window.setTimeout(function(){e.sessionApiClient.get("/notifications/v2/me/notifications?where[read_at]=&per_page=0").then(function(e){return n&&f(e.meta.total_count)}).catch(function(){return f(null)})},r);return function(){n=!1,window.clearTimeout(i)}}},[t,l,r]);var m=s.default.useCallback(function(){return c(function(e){return e+1})},[c]);return s.default.useEffect(function(){if(i&&t){var e=["notifications.v2.events.notification.updated","notifications.v2.events.notification.created","notifications.v2.events.notification.destroyed"].map(function(e){return i.bind(e,m)});return function(){return e.forEach(function(e){return e()})}}},[i,t]),u}exports.BringYourOwnPropsHeader=v,exports.SelfHydratingHeader=A,exports.fetchHeaderProps=q,exports.resetCache=function(){z.current()},exports.useNotificationCount=S;
+var e=require("@planningcenter/cc-api-client"),n=require("prop-types"),t=require("react"),i=require("@planningcenter/icons/sprites/groups.svg"),a=require("@planningcenter/symbol"),r=require("@reach/menu-button"),o=require("@planningcenter/jolt-client");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=/*#__PURE__*/l(t),c=/*#__PURE__*/l(i),d=/*#__PURE__*/l(o);function u(){return u=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e},u.apply(this,arguments)}function f(e,n){if(null==e)return{};var t,i,a={},r=Object.keys(e);for(i=0;i<r.length;i++)n.indexOf(t=r[i])>=0||(a[t]=e[t]);return a}var m=["key"],g=["key"],p=["key"],h=["as"];function v(e){var n,i,a,r,o=e.links,l=e.loginLink,c=e.myChurchCenterLink,d=e.notificationCount,f=e.notificationIconPathPrefix,m=void 0===f?"":f,g=e.notificationLink,p=e.organizationDisplayName,h=e.organizationImageUrl,v=e.organizationLink,_=e.personDisplayName,x=e.personIdentified,w=e.personImageUrl,E=(i=(n=s.default.useState(window.innerWidth))[0],r=s.default.useCallback(function(){return a(window.innerWidth)},[a=n[1]]),s.default.useEffect(function(){return window.addEventListener("resize",r),window.addEventListener("orientationchange",r),function(){window.removeEventListener("resize",r),window.removeEventListener("orientationchange",r)}},[r]),i>=720),I=t.useState(0),L=I[0],P=I[1],C=s.default.useCallback(function(){var e=window.pageYOffset;P(e)},[P]);return t.useEffect(function(){return window.addEventListener("scroll",C,{passive:!0}),function(){window.removeEventListener("scroll",C)}},[C]),/*#__PURE__*/s.default.createElement(s.default.Fragment,null,/*#__PURE__*/s.default.createElement(N,null),L>136&&/*#__PURE__*/s.default.createElement("div",{className:"condensed-header-placeholder"}),/*#__PURE__*/s.default.createElement("header",{className:"Header "+(L>136&&"condensed-header")},/*#__PURE__*/s.default.createElement("div",{className:"Header__layout"},/*#__PURE__*/s.default.createElement("div",{className:"Header__org-wrapper"},/*#__PURE__*/s.default.createElement(k,u({},v,{className:"Header__org-link"}),h?/*#__PURE__*/s.default.createElement("img",{src:h,alt:p,className:"Header__org-avatar"}):/*#__PURE__*/s.default.createElement("h1",{className:"Header__org-name"},p))),E?/*#__PURE__*/s.default.createElement(b,{links:o,loginLink:l,myChurchCenterLink:c,notificationCount:d,notificationIconPathPrefix:m,notificationLink:g,personDisplayName:_,personIdentified:x,personImageUrl:w}):/*#__PURE__*/s.default.createElement(y,{links:o,loginLink:l,myChurchCenterLink:c,notificationCount:d,notificationIconPathPrefix:m,notificationLink:g,personDisplayName:_,personIdentified:x,personImageUrl:w,scrollLimit:136,scrollPosition:L}))))}function b(e){var n,t,i=e.links,a=e.loginLink,o=e.myChurchCenterLink,l=e.notificationCount,c=e.notificationIconPathPrefix,d=void 0===c?"":c,p=e.notificationLink,h=e.personDisplayName,v=e.personIdentified,b=e.personImageUrl;return i.length>5?(n=i.slice(0,4),t=i.slice(4)):n=i,/*#__PURE__*/s.default.createElement("nav",{className:"Navigation d-n@iframe"},n.map(function(e){var n=e.key,t=f(e,m);/*#__PURE__*/return s.default.createElement(k,u({className:"Navigation__link",key:n},t))}),t&&/*#__PURE__*/s.default.createElement(r.Menu,null,function(e){/*#__PURE__*/return s.default.createElement(s.default.Fragment,null,/*#__PURE__*/s.default.createElement(r.MenuButton,{className:"Navigation__more-button Navigation__link"},"More",/*#__PURE__*/s.default.createElement("span",{className:"Navigation__more-button-toggle"},/*#__PURE__*/s.default.createElement(E,{style:{transform:e.isOpen?"scaleY(-1)":"scaleY(1)",transition:"transform 0.2s"}}))),/*#__PURE__*/s.default.createElement(r.MenuList,{className:"Navigation-menu"},t.map(function(e){var n=e.key,t=f(e,g);/*#__PURE__*/return s.default.createElement(r.MenuLink,u({className:"Navigation-link",key:n},t))})))}),v?/*#__PURE__*/s.default.createElement(s.default.Fragment,null,/*#__PURE__*/s.default.createElement(x,{notificationCount:l,notificationIconPathPrefix:d,notificationLink:p}),/*#__PURE__*/s.default.createElement(k,u({className:"Navigation__link"},o),/*#__PURE__*/s.default.createElement(I,{displayName:h,imageUrl:b}))):/*#__PURE__*/s.default.createElement(k,u({className:"Navigation__link"},a)))}function y(e){var n=e.links,t=e.loginLink,i=e.myChurchCenterLink,a=e.notificationIconPathPrefix,o=e.personDisplayName,l=e.personIdentified,c=e.personImageUrl;/*#__PURE__*/return s.default.createElement("nav",{className:"AltNavigation d-n@iframe"},l&&/*#__PURE__*/s.default.createElement(s.default.Fragment,null,/*#__PURE__*/s.default.createElement(x,{notificationCount:e.notificationCount,notificationIconPathPrefix:void 0===a?"":a,notificationLink:e.notificationLink}),/*#__PURE__*/s.default.createElement(k,u({className:"Navigation__link"},i),/*#__PURE__*/s.default.createElement("img",{src:c,alt:o+"'s avatar",className:"AltNavigation__person-avatar"}))),/*#__PURE__*/s.default.createElement(r.Menu,null,function(){/*#__PURE__*/return s.default.createElement(s.default.Fragment,null,/*#__PURE__*/s.default.createElement(_,null),/*#__PURE__*/s.default.createElement(r.MenuList,{className:"AltNavigation__layout"},/*#__PURE__*/s.default.createElement("div",{className:"AltNavigation__person-box "+(l&&"logged-in")},/*#__PURE__*/s.default.createElement("div",{className:"display-flex align-items-center justify-content-space-between"},/*#__PURE__*/s.default.createElement("div",{className:"AltNavigation__person"}),/*#__PURE__*/s.default.createElement(_,null))),n.map(function(e){var n=e.key,t=f(e,p);/*#__PURE__*/return s.default.createElement(r.MenuLink,u({className:"AltNavigation__link",key:n},t))}),!l&&/*#__PURE__*/s.default.createElement(r.MenuLink,u({className:"AltNavigation__link"},t))))}))}function _(){/*#__PURE__*/return s.default.createElement(r.MenuButton,{className:"AltNavigation__trigger"},/*#__PURE__*/s.default.createElement("div",{className:"icon"},/*#__PURE__*/s.default.createElement("span",{className:"line"}),/*#__PURE__*/s.default.createElement("span",{className:"line"}),/*#__PURE__*/s.default.createElement("span",{className:"line"})))}function N(){/*#__PURE__*/return s.default.createElement("style",null,'\n  /* Header */\n  .Header {\n    background-color: var(--color-tint9);\n    border-bottom: 1px solid var(--color-tint7);\n    height: 136px;\n    padding: 1.5rem 2rem 1.5rem 1.5rem;\n    z-index: 1000; /* Thanks to Vimeo for setting their z-index to 999 😠*/\n  }\n\n  .iframed .Header { position: relative }\n\n  @media (min-width: 720px) {\n    .Header { padding: 1.5rem 2rem }\n  }\n\n  .Header__layout {\n    align-items: center;\n    display: flex;\n    height: 100%;\n    justify-content: space-between;\n    margin: 0 auto;\n    max-width: 900px;\n    width: 100%;\n  }\n  .Header__org-wrapper {\n    padding-right: 2rem;\n  }\n  .Header__org-link {\n    display: block;\n  }\n  .Header__org-name {\n    font-size: 18px;\n    line-height: 1.2;\n    margin: 0;\n    max-width: 220px;\n  }\n  .Header__org-avatar {\n    max-height: 80px;\n  }\n  [data-color-scheme="dark"][data-contrast="low"] .Header__org-avatar {\n    background-color: var(--color-tint0);\n    border-radius: 4px;\n    padding: 2px;\n  }\n\n  /* Condensed Header */\n  .condensed-header {\n    border-bottom-color: var(--color-tint6);\n    height: 68px;\n    position: fixed;\n    top: 0;\n    width: 100%;\n    animation: fade-in 0.25s;\n  }\n\n  .condensed-header-placeholder {\n    height: 136px; /* this keeps the browser from jumping when scrolling to the bottom of a short page  */\n  }\n  .condensed-header .Navigation-wrapper,\n  .condensed-header .Navigation-button {\n    height: 34px;\n  }\n  .condensed-header .Navigation-avatar {\n    height: 34px;\n    width: 34px;\n    min-width: 34px;\n  }\n  .condensed-header .Navigation-displayName {\n    font-size: 12px;\n  }\n\n  .condensed-header .Header__org-avatar {\n    max-height: 48px;\n  }\n\n  .condensed-header .Navigation__link {\n    font-size: 0.875rem;\n  }\n\n  .condensed-header .AltNavigation__trigger .icon .line {\n    height: 3px;\n    margin: 4px auto;\n    width: 28px;\n    transition: all 0.2s;\n  }\n\n  @keyframes fade-in {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  /* Navigation */\n  .Navigation {\n    align-items: center;\n    display: flex;\n    justify-content: flex-end;\n    white-space: nowrap;\n  }\n  .Navigation__link {\n    color: var(--color-tint2);\n    margin-right: 1.5rem;\n  }\n  .Navigation__link[aria-current=true],\n  .Navigation__link[aria-current=page] {\n    color: var(--color-tint1);\n    font-weight: 600;\n  }\n  .Navigation__more-button {\n    background-color: transparent;\n    border: 0;\n    font-weight: 400;\n    padding: 0;\n  }\n  .Navigation__more-button-toggle {\n    font-size: 10px;\n    padding-left: 2px;\n  }\n\n  /* AltNavigation */\n  .AltNavigation {\n    align-items: center;\n    display: flex;\n  }\n  .AltNavigation .NotificationBell {\n    top: 2px;\n    padding: 4px;\n  }\n  .AltNavigation .NotificationBell:after {\n    right: 4px;\n    top: 8px;\n  }\n  .AltNavigation__layout[data-reach-menu-list]{\n    animation: slide-in 0.3s ease;\n    background: var(--color-tint9);\n    border: 0;\n    border-left: 1px solid var(--color-tint5);\n    bottom: 0;\n    box-shadow: -2px 0 6px rgba(0,0,0,0.1);\n    overflow: auto;\n    padding: 0;\n    position: fixed;\n    right: 0;\n    top: 0;\n    width: 280px;\n    z-index: 998;\n  }\n  .AltNavigation__layout [data-reach-menu-item] { outline: none }\n  .AltNavigation__link {\n    color: var(--color-tint1);\n    display: block;\n    border-bottom: 1px solid var(--color-tint6);\n    padding: 1rem;\n  }\n  .AltNavigation__link[data-selected] {\n    background: var(--color-tint7);\n    color: var(--color-tint1);\n  }\n  .AltNavigation__trigger {\n    background: transparent;\n    border: 0;\n    padding: 0;\n  }\n  .AltNavigation__person-box {\n    border-bottom: 1px solid var(--color-tint5);\n    display: flex;\n    flex-direction: column;\n    height: 136px;\n    justify-content: center;\n    padding: 0 1.5rem;\n  }\n  .AltNavigation__person-box.logged-in {\n    justify-content: space-between;\n    padding: 2rem 1.5rem 0 1.5rem;\n  }\n  .AltNavigation__person {\n    align-items: center;\n    display: flex;\n    flex-wrap: wrap;\n  }\n  .AltNavigation__person-avatar {\n    border-radius: 100%;\n    width: 40px;\n  }\n  .AltNavigation__person-name,\n  .AltNavigation__person-name[data-selected] {\n    background: transparent;\n    color: var(--color-tint1);\n    font-size: 1rem;\n    font-weight: 500;\n    padding-left: 1rem;\n  }\n  .AltNavigation__person-actions {\n    font-size: 0.875rem;\n    padding-top: 0.5rem;\n  }\n  .AltNavigation__trigger .icon .line {\n    background-color: var(--color-tint3);\n    border-radius: 4px;\n    display: block;\n    height: 4px;\n    margin: 6px auto;\n    -webkit-transition: all 0.3s ease-in-out;\n    -o-transition: all 0.3s ease-in-out;\n    transition: all 0.3s ease-in-out;\n    width: 32px;\n  }\n  .AltNavigation__trigger .icon .line:nth-child(3){ margin-bottom: 0 }\n  .AltNavigation__trigger .icon:hover { cursor: pointer }\n  .AltNavigation__trigger[aria-expanded=true] .icon .line:nth-child(2) {\n    opacity: 0;\n  }\n  .AltNavigation__trigger[aria-expanded=true] .icon .line:nth-child(1) {\n    -webkit-transform: translateY(10px) rotate(45deg);\n    -ms-transform: translateY(10px) rotate(45deg);\n    -o-transform: translateY(10px) rotate(45deg);\n    transform: translateY(10px) rotate(45deg);\n  }\n  .AltNavigation__trigger[aria-expanded=true] .icon .line:nth-child(3) {\n    -webkit-transform: translateY(-10px) rotate(-45deg);\n    -ms-transform: translateY(-10px) rotate(-45deg);\n    -o-transform: translateY(-10px) rotate(-45deg);\n    transform: translateY(-10px) rotate(-45deg);\n  }\n  @keyframes slide-in {\n    0% { transform: translateX(100%) }\n    100% { transform: translateX(0) }\n  }\n\n  /* LoggedInLinks */\n  .LoggedInLinks {\n    align-items: flex-start;\n    display: flex;\n    margin: 0 -1.5rem\n  }\n  .LoggedInLinks > * { flex: 1 }\n  .LoggedInLinks > div:last-child { border-left: 1px solid var(--color-tint5) }\n  .LoggedInLinks [data-reach-menu-item],\n  .LoggedInLinks [data-selected] {\n    background: var(--color-tint7);\n    color: var(--color-tint1);\n    display: block;\n    flex: 1;\n    font-size: 0.875rem;\n    line-height: 1;\n    padding: 0.75rem;\n    text-align: center;\n  }\n\n  /* NotificationBell */\n  .NotificationBell--has-notifications {\n    position: relative;\n  }\n\n  .NotificationBell--has-notifications:after {\n    background-color: var(--color-ruby);\n    border-radius: 100%;\n    border: 1px solid var(--color-tint10);\n    content: "";\n    position: absolute;\n    height: 7px;\n    right: 0;\n    top: 4px;\n    width: 7px;\n  }\n\n  /* utility */\n  .display-flex { display: flex }\n  .align-items-center { align-items: center }\n  .justify-content-space-between { justify-content: space-between }\n')}function k(e){var n=e.as,t=void 0===n?"a":n,i=f(e,h);/*#__PURE__*/return s.default.createElement(t,i)}function x(e){var n=e.notificationCount,t=e.notificationIconPathPrefix,i=void 0===t?"":t;/*#__PURE__*/return s.default.createElement(k,u({},e.notificationLink,{className:"Navigation__link NotificationBell "+(n>0&&"NotificationBell--has-notifications")}),/*#__PURE__*/s.default.createElement("span",null,/*#__PURE__*/s.default.createElement(w,{pathPrefix:i,notificationCount:n})))}function w(e){var n=e.pathPrefix;/*#__PURE__*/return s.default.createElement(a.Symbol,{symbol:""+(void 0===n?"":n)+c.default+"#notification",className:"p-r t-2p notification-icon","aria-label":e.notificationCount+" notifications"})}function E(e){var n=e.style;/*#__PURE__*/return s.default.createElement("svg",{className:"symbol",role:"img",title:"down-chevron icon",style:void 0===n?{}:n},/*#__PURE__*/s.default.createElement("symbol",{xmlns:"http://www.w3.org/2000/svg",id:"Navigation-svg-symbol-down-chevron",viewBox:"0 0 16 16"},/*#__PURE__*/s.default.createElement("title",null,"down-chevron"),/*#__PURE__*/s.default.createElement("polygon",{points:"8.003 14.068 0.005 6.07 1.782 4.293 8.003 10.514 14.223 4.293 16 6.07 8.003 14.068"})),/*#__PURE__*/s.default.createElement("use",{href:"#Navigation-svg-symbol-down-chevron"}))}function I(e){var n=e.displayName,t=e.imageUrl;/*#__PURE__*/return s.default.createElement("div",null,/*#__PURE__*/s.default.createElement("style",null,"\n    .Navigation-avatar {\n      border-radius: 100%;\n      height: 40px;\n      width: 40px;\n      min-width: 40px;\n    }\n  "),/*#__PURE__*/s.default.createElement("img",{className:"Navigation-avatar",width:40,height:40,alt:n+"'s avatar",src:t}))}function L(e,n){var t=s.default.useState(function(){try{var t=window.localStorage.getItem(e);return t?JSON.parse(t):n}catch(e){return n}}),i=t[0],a=t[1],r=s.default.useCallback(function(n){try{var t=n instanceof Function?n(i):n;a(t),window.localStorage.setItem(e,JSON.stringify(t))}catch(e){console.log(e)}},[a]);return[i,r]}v.propTypes={links:n.arrayOf(n.object).isRequired,loginLink:n.object.isRequired,myChurchCenterLink:n.object.isRequired,notificationCount:n.number,notificationIconPathPrefix:n.string,notificationLink:n.object.isRequired,organizationDisplayName:n.string.isRequired,organizationImageUrl:n.string,organizationLink:n.object.isRequired,personDisplayName:n.string.isRequired,personIdentified:n.bool.isRequired,personImageUrl:n.string.isRequired},b.propTypes={links:n.arrayOf(n.object).isRequired,loginLink:n.object.isRequired,myChurchCenterLink:n.object.isRequired,notificationCount:n.number,notificationIconPathPrefix:n.string,notificationLink:n.object.isRequired,personDisplayName:n.string.isRequired,personIdentified:n.bool.isRequired,personImageUrl:n.string.isRequired},y.propTypes={links:n.arrayOf(n.object).isRequired,loginLink:n.object.isRequired,myChurchCenterLink:n.object.isRequired,notificationCount:n.number,notificationIconPathPrefix:n.string,notificationLink:n.object.isRequired,personDisplayName:n.string.isRequired,personIdentified:n.bool.isRequired,personImageUrl:n.string.isRequired,scrollLimit:n.number.isRequired,scrollPosition:n.number.isRequired},k.propTypes={as:n.any},x.propTypes={notificationCount:n.number.isRequired,notificationIconPathPrefix:n.string,notificationLink:n.object.isRequired},w.propTypes={notificationCount:n.number.isRequired,pathPrefix:n.string},I.propTypes={displayName:n.string,imageUrl:n.string.isRequired};var P=function(n,t){try{return Promise.resolve(e.sessionApiClient.post("/notifications/v2/me/jolt_subscribe",{data:{attributes:{channel:n,connection_id:t}}})).then(function(e){return e.data.id})}catch(e){return Promise.reject(e)}},C=function(){try{return Promise.resolve(e.sessionApiClient.post("/global/v2/jolt_connect")).then(function(e){return e.data.id})}catch(e){return Promise.reject(e)}},q=function(){try{var n={ChurchCenterWebMenu:["items"],Organization:["avatar_url","name"],Person:["avatar_url","first_name"],ThemeSettings:["primary_color","theme_enabled","version"],WebBoot:["current_organization","current_person","features","jolt_websocket_url","published_menu","published_theme_settings"]},t="/publishing/v2/web_boot?include="+["current_organization","current_person","published_menu","published_theme_settings"]+"&"+Object.keys(n).map(function(e){return"fields["+e+"]="+n[e]}).join("&");return Promise.resolve(e.sessionApiClient.get(t)).then(function(e){var n=function(n){var t,i,a,r,o=null==(t=e.data.relationships[n].data)||null==(i=t[0])?void 0:i.type,l=null==(a=e.data.relationships[n].data)||null==(r=a[0])?void 0:r.id;return e.included.find(function(e){return e.type===o&&e.id===l})},t=n("published_menu").attributes.items.map(function(e){return{children:e.label,href:e.uri}}),i=n("current_organization"),a=n("current_person"),r=i.attributes.name,o=i.attributes.avatar_url,l=a.attributes.first_name,s=a.attributes.avatar_url+"?g=120x120%23",c="anonymous"!==a.id,d=n("published_theme_settings");return{joltWebsocketUrl:e.data.attributes.jolt_websocket_url,links:t,organizationDisplayName:r,organizationImageUrl:o,personDisplayName:l,personId:c?a.id:null,personIdentified:c,personImageUrl:s,publishedThemeSettings:d}})}catch(e){return Promise.reject(e)}},j=["@churchcenter/nav:SelfHydratingNavitar","@churchcenter/nav@2.0.0:SelfHydratingHeader","@planningcenter/cc-nav@2.0.0:SelfHydratingHeader","@planningcenter/cc-nav@4.2.5:SelfHydratingHeader"],R=function(){return null},z=/*#__PURE__*/s.default.createRef();function A(e){var n=e.defaultLinks,i=e.mapLinkProps,a=void 0===i?U:i,r=L("@planningcenter/cc-nav@4.3.1:SelfHydratingHeader",{joltWebsocketUrl:null,links:void 0===n?[]:n,organizationDisplayName:e.defaultOrganizationDisplayName,organizationImageUrl:e.defaultOrganizationImageUrl,personDisplayName:e.defaultPersonDisplayName,personId:null,personIdentified:e.defaultPersonIdentified,personImageUrl:e.defaultPersonImageUrl,publishedThemeSettings:{attributes:{primary_color:null,theme_enabled:!1}}}),o=r[0],l=r[1],c=o.publishedThemeSettings,f=(c=void 0===c?{attributes:{primary_color:null,theme_enabled:!1}}:c).attributes,m=f.primary_color,g=f.theme_enabled;s.default.useEffect(function(){j.forEach(function(e){return window.localStorage.removeItem(e)})});var p=s.default.useState(500),h=p[0],b=p[1];s.default.useEffect(function(){var e,n=!0;return q().then(function(e){n&&l(e)}).catch(function(n){console.error("Refetching header props:",n),e=window.setTimeout(function(){return b(h+100)},h)}),function(){n=!1,e&&window.clearTimeout(e)}},[h,b]),t.useEffect(function(){m&&g?(document.body.style.setProperty("--color-brand-light",m),document.body.style.setProperty("--color-brand-dark",m),document.body.style.setProperty("--color-brand-gradient-start","var(--color-brand)"),document.body.style.setProperty("--color-brand-gradient-end","var(--color-brand)")):(document.body.style.setProperty("--color-brand-light","var(--color-turquoise)"),document.body.style.setProperty("--color-brand-dark","var(--color-turquoise)"),document.body.style.setProperty("--color-brand-gradient-start","var(--color-topaz)"),document.body.style.setProperty("--color-brand-gradient-end","var(--color-emerald)"))},[m,g]);var y=s.default.useCallback(function(){window.localStorage.removeItem("@planningcenter/cc-nav@4.3.1:SelfHydratingHeader"),window.localStorage.removeItem("@planningcenter/cc-nav:useNotificationCount")});z.current=y,s.default.useEffect(function(){return function(){return z.current=R}},[]);var _=function(e){"/logout"===new URL(e.target.href).pathname&&y()},N=["/profile","/logout","/login"],k=o.links.filter(function(e){return!N.includes(e.href)}).map(a).map(function(e){return u({},e,{onClick:_})}),x=a({children:"Log in",href:"/login",onClick:function(e){e.target.href="/login?return="+encodeURIComponent(window.location.href)}}),w=function(e){var n=e.joltWebsocketUrl,t=e.personId,i=s.default.useState(null),a=i[0],r=i[1],o=s.default.useState(null),l=o[0],c=o[1];return s.default.useEffect(function(){var e=n&&t?new d.default(n,{fetchAuthTokenFn:C}):null;return r(e),function(){return e&&e.disconnect()}},[n,t]),s.default.useEffect(function(){var e=null,n=t?"church_center.notifications.people."+t:null;return a&&n&&(e=a.subscribe(n,{fetchSubscribeTokenFn:P})),c(e),function(){e&&a.unsubscribe(n)}},[a,t]),l}({joltWebsocketUrl:o.joltWebsocketUrl,personId:o.personId}),E=S({notificationsChannel:w,personIdentified:o.personIdentified}),I=a({href:"/notifications"}),A=a({href:"/me"}),H="/"+window.location.pathname.split("/")[1];/*#__PURE__*/return s.default.createElement(s.default.Fragment,null,/*#__PURE__*/s.default.createElement(v,{links:k,loginLink:x,myChurchCenterLink:A,notificationCount:E,notificationIconPathPrefix:H,notificationLink:I,organizationDisplayName:o.organizationDisplayName,organizationImageUrl:o.organizationImageUrl,organizationLink:a({href:"/home"}),personDisplayName:o.personDisplayName,personIdentified:o.personIdentified,personImageUrl:o.personImageUrl}))}function H(e,n){try{return e.split("/")[1]===n.split("/")[1]}catch(e){return!1}}z.current=R,A.propTypes={defaultLinks:n.arrayOf(n.shape({children:n.any.isRequired,href:n.string.isRequired})),defaultOrganizationDisplayName:n.string.isRequired,defaultOrganizationImageUrl:n.string,defaultPersonDisplayName:n.string.isRequired,defaultPersonIdentified:n.bool.isRequired,defaultPersonImageUrl:n.string.isRequired,mapLinkProps:n.func};var U=function(e){return u({},e,{"aria-current":H(window.location.pathname,e.href)?"true":null,key:e.href})};function S(n){var t=n.personIdentified,i=n.notificationsChannel,a=n.notificationDelay,r=void 0===a?1e3:a,o=s.default.useState(0),l=o[0],c=o[1],d=L("@planningcenter/cc-nav:useNotificationCount",0),u=d[0],f=d[1];s.default.useEffect(function(){if(t){var n=!0,i=window.setTimeout(function(){e.sessionApiClient.get("/notifications/v2/me/notifications?where[read_at]=&per_page=0").then(function(e){return n&&f(e.meta.total_count)}).catch(function(){return f(null)})},r);return function(){n=!1,window.clearTimeout(i)}}},[t,l,r]);var m=s.default.useCallback(function(){return c(function(e){return e+1})},[c]);return s.default.useEffect(function(){if(i&&t){var e=["notifications.v2.events.notification.updated","notifications.v2.events.notification.created","notifications.v2.events.notification.destroyed"].map(function(e){return i.bind(e,m)});return function(){return e.forEach(function(e){return e()})}}},[i,t]),u}exports.BringYourOwnPropsHeader=v,exports.SelfHydratingHeader=A,exports.fetchHeaderProps=q,exports.resetCache=function(){z.current()},exports.useNotificationCount=S;
 //# sourceMappingURL=nav.js.map

package.json

 {
   "name": "@planningcenter/cc-nav",
-  "version": "4.3.0",
+  "version": "4.3.1",
   "description": "Site-wide navigation on Church Center Web",
@@ -5,0 +5,0 @@ "source": "index.js",

README.md

@@ -13,12 +13,15 @@ # @planningcenter/cc-nav
 
-Being decided.
+Provides Church Center's topbar for proxied products.
 
-## development
+## Development
 
-I've tried to use `npm link` for local development, but it always comes up short.
-The best solution I've found is a little bit of a workaround... but emphasis on it works.
+Using `yalc` allows iterating locally. The following steps are an overview of how to go about it. The steps will need to be repeated each time a change is made.
 
-1. In the JavaScript source of a project that consumes the package, change `import { SelfHydratingHeader } from "@planningcenter/cc-nav"` to something like`import { SelfHydratingHeader } from "dev/@planningceneter/cc-nav"`.
-2. Change directory to the root of `@planningcenter/cc-nav` 
-3. Use `microbundle watch` to build into a location local to the project that consumes the package. For example, if we were building into the `church-center` monorepo, we would use `yarn microbundle watch --format cjs --jsx React.createElement --external react,prop-types,@planningcenter/cc-api-client,@planningcenter/icons,@planningcenter/jolt-client,@planningcenter/symbol,@reach/menu-button --output ~/Code/church-center/app/javascript/dev/@planningcenter`
-4. Develop per usual. The feedback loop is a little slower, but it mirrors what will actually be built by microbundle.
+```sh
+~/ $ yarn global add yalc # install yalc globally
+~/Code/cc-nav $ yalc publish # build and register cc-nav with yalc
+~/Code/giving $ yalc add @planningcenter/cc-nav && yarn install # or other proxied product
+~/Code/giving $ bin/webpack # build the bundle
+```
+
+More specific instructions, such as watching this project for changes, or automatically rebuilding target products is beyond the scope of this README.

No alert changes

Improved metrics

Number of lines in readme file

27

12.5%

Worsened metrics

Total package byte prevSize

81408

-2.9%

Lines of code

89

-1.11%

No dependency changes