WEBDEV-6944 Add opt-in-or-login facet load strategy and related bug…

…fix (#383)

* Updating to eager facet strategy should correctly trigger a facet fetch

* Add logged-in logic to opt-in strategy

* Add opt-in-or-login strategy to apply new behavior

src/collection-browser.ts

@@ -1020,9 +1020,14 @@ export class CollectionBrowser
       </collection-facets>
     `;
 
-    // In the desktop facets opt-in case, wrap the facet sidebar in a <details> widget
-    // that can be opened and closed as needed.
-    if (this.facetLoadStrategy === 'opt-in' && !this.mobileView) {
+    // If we are using one of the opt-in facet load strategies, we may need to wrap the
+    // desktop view facets in a <details> widget so that patrons can opt into loading them.
+    // In the `opt-in-or-login` case, we only do this if they are not logged in.
+    const showDesktopOptInWidget =
+      this.facetLoadStrategy === 'opt-in' ||
+      (this.facetLoadStrategy === 'opt-in-or-login' && !this.loggedIn);
+
+    if (showDesktopOptInWidget && !this.mobileView) {
       return html`
         <details
           class="desktop-facets-dropdown"
@@ -1411,14 +1416,24 @@ export class CollectionBrowser
    * current facet loading strategy.
    */
   private updateFacetReadiness(): void {
-    // In desktop view, we are always ready to load facets *unless* we are
-    // using the `opt-in` strategy and the facets dropdown is not open.
+    // There are two ways to opt into facet production:
+    //  (1) have the facets dropdown open, or
+    //  (2) if using the `opt-in-or-login` strategy, be logged into an account
+    const optedIn =
+      this.collapsibleFacetsVisible ||
+      (this.facetLoadStrategy === 'opt-in-or-login' && this.loggedIn);
+
+    // In desktop view, we are always ready to load facets *unless* we are using one of the
+    // `opt-in` strategies and have not opted in (whether by login or UI interaction).
+    const usingOptInStrategy = ['opt-in', 'opt-in-or-login'].includes(
+      this.facetLoadStrategy
+    );
     const desktopFacetsReady =
-      !this.mobileView &&
-      (this.facetLoadStrategy !== 'opt-in' || this.collapsibleFacetsVisible);
+      !this.mobileView && (!usingOptInStrategy || optedIn);
 
-    // In mobile view, facets are considered ready provided they are currently visible (their dropdown is opened).
-    const mobileFacetsReady = this.mobileView && this.collapsibleFacetsVisible;
+    // In the mobile view, facets are considered ready provided we have opted in (whether by
+    // login or UI interaction).
+    const mobileFacetsReady = this.mobileView && optedIn;
 
     this.dataSource.handleFacetReadinessChange(
       desktopFacetsReady || mobileFacetsReady

src/data-source/collection-browser-data-source.ts

@@ -404,11 +404,7 @@ export class CollectionBrowserDataSource
     const facetsBecameReady = !this.facetsReadyToLoad && ready;
     this.facetsReadyToLoad = ready;
 
-    const lazyLoadFacets = ['lazy-mobile', 'opt-in'].includes(
-      this.host.facetLoadStrategy
-    );
-    const needsFetch =
-      lazyLoadFacets && facetsBecameReady && this.canFetchFacets;
+    const needsFetch = facetsBecameReady && this.canFetchFacets;
     if (needsFetch) {
       this.fetchFacets();
     }

src/models.ts

@@ -467,12 +467,19 @@ export const prefixFilterAggregationKeys: Record<PrefixFilterType, string> = {
  *  - `eager`: Facet data is always loaded as soon as a search is performed
  *  - `lazy-mobile`: In the desktop layout, functions exactly as `eager`.
  *     In the mobile layout, facet data will only be loaded once the "Filters" accordion is opened.
+ *  - `opt-in-or-login`: Same as `opt-in` for guest users not logged into an account, but same as `eager` for
+ *     any logged in user.
  *  - `opt-in`: In the desktop layout, facet data will only be loaded after the user presses a "Load Facets" button.
  *     In the mobile layout, functions exactly as `lazy-mobile`.
  *  - `off`: Facet data will never be loaded, and a message will be displayed in place of facets
  *     indicating that they are unavailable.
  */
-export type FacetLoadStrategy = 'eager' | 'lazy-mobile' | 'opt-in' | 'off';
+export type FacetLoadStrategy =
+  | 'eager'
+  | 'lazy-mobile'
+  | 'opt-in-or-login'
+  | 'opt-in'
+  | 'off';
 
 /**
  * Union of the facet types that are available in the sidebar.