(BIDS-2959) pressing Enter or the + button does not bypass premium restrictions anymore

frontend/components/bc/header/MainHeader.vue

@@ -22,7 +22,7 @@ const colorMode = useColorMode()
 const isSmallScreen = computed(() => width.value < smallHeaderThreshold)
 
 const showInDevelopment = Boolean(useRuntimeConfig().public.showInDevelopment)
-const hideInDevelopmentClass = showInDevelopment ? '' : 'hide-because-it-is-unfinished'
+const hideInDevelopmentClass = showInDevelopment ? '' : 'hide-because-it-is-unfinished' // TODO: once the searchbar is enabled in production, delete this line
 
 const megaMenu = ref<typeof BcHeaderMegaMenu | null>(null)
 
@@ -149,7 +149,7 @@ $smallHeaderThreshold: 1024px;
   width: 100%;
   justify-content: center;
   border-bottom: 1px solid var(--container-border-color);
-  &.hide-because-it-is-unfinished {
+  &.hide-because-it-is-unfinished {  // TODO: once the searchbar is enabled in production, delete this block (because border-bottom is always needed, due to the fact that the lower header is always visible (it contains the search bar when the screeen is narrow, otherwise the logo and mega menu))
     @media (max-width: $smallHeaderThreshold) {
       border-bottom: none;
     }

frontend/components/bc/searchbar/SearchbarMain.vue

@@ -316,7 +316,7 @@ function userPressedSearchButtonOrEnter () {
       globalState.value.functionToCallAfterResultsGetOrganized = userPressedSearchButtonOrEnter // we request to be called again once the communication with the API is complete
       return // in the meantime, we do not proceed further
   }
-  // from here, we know that the user pressed Enter or clicked the search button to be redirected by us to the most relevant page
+  // from here, we know that the user pressed Enter or clicked the search button to let us select the most relevant result
 
   if (results.organized.howManyResultsIn === 0 && !areThereResultsHiddenByUser()) {
     // nothing matching the input has been found
@@ -335,18 +335,25 @@ function userPressedSearchButtonOrEnter () {
   const possibilities : Matching[] = []
   for (const network of toConsider.networks) {
     for (const type of network.types) {
-      // here we assume that the result with the best `closeness` value is the first one in array `type.suggestions` (see the sorting done in `filterAndOrganizeResults()`)
-      possibilities.push({ closeness: type.suggestions[0].closeness, network: network.chainId, type: type.type, s: type.suggestions[0] } as Matching)
+      // here we assume that the results in array `type.suggestions` are sorted by `closeness` values (see the sorting done in `filterAndOrganizeResults()`)
+      for (const suggestion of type.suggestions) {
+        if (!suggestion.lacksPremiumSubscription) {
+          possibilities.push({ closeness: suggestion.closeness, network: network.chainId, type: type.type, s: suggestion } as Matching)
+          break // no need to continue, other results of the same type would be indistinguishable in the code of function `props.pickByDefault()` (called below) : the only difference is that their closeness values are worse
+        }
+      }
     }
   }
-  // calling back parent's function in charge of making a choice
-  const pickedMatching = props.pickByDefault(possibilities)
-  if (pickedMatching) {
-    if (!props.keepDropdownOpen) {
-      closeDropdown()
+  if (possibilities.length) {
+    // calling back parent's function in charge of making a choice
+    const pickedMatching = props.pickByDefault(possibilities)
+    if (pickedMatching) {
+      if (!props.keepDropdownOpen) {
+        closeDropdown()
+      }
+      // calling back parent's function taking action with the result
+      emit('go', (pickedMatching as any).s as ResultSuggestion)
     }
-    // calling back parent's function taking action with the result
-    emit('go', (pickedMatching as any).s as ResultSuggestion)
   }
 }
 
@@ -587,7 +594,10 @@ function convertSingleAPIresultIntoResultSuggestion (stringifyiedRawResult : str
     }
   }
 
-  return { output, queryParam, closeness, count, chainId, type, rawResult: apiResponseElement, stringifyiedRawResult, nameWasUnknown }
+  const result = { output, queryParam, closeness, count, chainId, type, rawResult: apiResponseElement }
+  const lacksPremiumSubscription = !!props.rowLacksPremiumSubscription && props.rowLacksPremiumSubscription(result)
+
+  return { ...result, stringifyiedRawResult, nameWasUnknown, lacksPremiumSubscription }
 }
 
 function areResultsCountable (types: ResultType[], toTellTheAPI: boolean) : boolean {
@@ -713,7 +723,6 @@ function informationIfHiddenResults () : string {
                   :color-theme="colorTheme"
                   :dropdown-layout="dropdownLayout"
                   :bar-purpose="barPurpose"
-                  :row-lacks-premium-subscription="!!rowLacksPremiumSubscription && rowLacksPremiumSubscription(suggestion)"
                   :screen-width-causing-sudden-change="screenWidthCausingSuddenChange"
                   @click="(e : Event) => {e.stopPropagation(); /* stopping propagation prevents a bug when the search bar is asked to remove a result, making it smaller so the click appears to be outside */ userClickedSuggestion(suggestion)}"
                 />

frontend/components/bc/searchbar/SuggestionRow.vue

@@ -26,7 +26,6 @@ const props = defineProps<{
   colorTheme: SearchbarColors,
   dropdownLayout : SearchbarDropdownLayout,
   barPurpose: SearchbarPurpose,
-  rowLacksPremiumSubscription: boolean,
   screenWidthCausingSuddenChange: number
 }>()
 
@@ -62,7 +61,7 @@ function formatDescriptionCell () : string {
   return props.suggestion.output.description
 }
 
-const deactivationClass = props.rowLacksPremiumSubscription ? 'deactivated' : ''
+const deactivationClass = props.suggestion.lacksPremiumSubscription ? 'deactivated' : ''
 </script>
 
 <template>
@@ -107,7 +106,7 @@ const deactivationClass = props.rowLacksPremiumSubscription ? 'deactivated' : ''
       />
     </BcSearchbarMiddleEllipsis>
     <div class="premium-invitation" :class="dropdownLayout" @click="(e : Event) => e.stopPropagation()">
-      <BcPremiumGem v-if="rowLacksPremiumSubscription" class="gem" />
+      <BcPremiumGem v-if="suggestion.lacksPremiumSubscription" class="gem" />
     </div>
     <div class="cell-category" :class="[barShape,dropdownLayout,deactivationClass]">
       <span class="category-label" :class="[barShape,colorTheme,dropdownLayout]">
@@ -145,7 +144,7 @@ const deactivationClass = props.rowLacksPremiumSubscription ? 'deactivated' : ''
       :width-mediaquery-threshold="screenWidthCausingSuddenChange"
     />
     <div class="premium-invitation" :class="dropdownLayout" @click="(e : Event) => e.stopPropagation()">
-      <BcPremiumGem v-if="rowLacksPremiumSubscription" class="gem" />
+      <BcPremiumGem v-if="suggestion.lacksPremiumSubscription" class="gem" />
     </div>
     <div v-if="suggestion.output.description !== ''" class="cell_bi_description" :class="[barShape,colorTheme,dropdownLayout,deactivationClass]">
       {{ formatDescriptionCell() }}

frontend/types/searchbar.ts

@@ -143,6 +143,7 @@ export interface ResultSuggestion {
 export interface ResultSuggestionInternal extends ResultSuggestion {
   stringifyiedRawResult : string, // Original data given by the API.
   nameWasUnknown : boolean, // Tells whether the API had the possibility to fill field `name` in `output` but could not.
+  lacksPremiumSubscription : boolean // `true` if the result is not accessible to the user due to account restrictions
 }
 
 export interface OrganizedResults {