feat: add fallback disclaimer for removing filters

EMP-2097
empathyco · Sep 28, 2023 · de2bde8 · de2bde8
1 parent 6856fbf
commit de2bde8
Show file tree

Hide file tree

Showing 13 changed files with 62 additions and 18 deletions.
diff --git a/src/components/desktop/desktop.vue b/src/components/desktop/desktop.vue
@@ -10,6 +10,7 @@
               <SpellcheckMessage class="x-mb-16" data-test="spellcheck-message" />
             </LocationProvider>
             <NoResultsMessage class="x-mb-16" data-test="no-results-message" />
+            <FallbackDisclaimerMessage class="x-mb-16" />
           </div>
 
           <LocationProvider location="no_query">
@@ -78,7 +79,8 @@
       ScrollToTop,
       DesktopAside: () => import('../search').then(m => m.DesktopAside),
       NoResultsMessage: () => import('../search').then(m => m.NoResultsMessage),
-      SpellcheckMessage: () => import('../search').then(m => m.SpellcheckMessage)
+      SpellcheckMessage: () => import('../search').then(m => m.SpellcheckMessage),
+      FallbackDisclaimerMessage: () => import('../search').then(m => m.FallbackDisclaimerMessage)
     }
   })
   export default class Desktop extends HasSearchedMixin {

diff --git a/src/components/mobile/mobile.vue b/src/components/mobile/mobile.vue
@@ -25,6 +25,7 @@
             <SpellcheckMessage class="x-mb-16" data-test="spellcheck-message" />
           </LocationProvider>
           <NoResultsMessage class="x-mb-16" data-test="no-results-message" />
+          <FallbackDisclaimerMessage class="x-mb-16" data-test="fallback-message" />
         </div>
 
         <MainScroll>
@@ -115,7 +116,8 @@
       SearchBox,
       MobileAside: () => import('../search').then(m => m.MobileAside),
       NoResultsMessage: () => import('../search').then(m => m.NoResultsMessage),
-      SpellcheckMessage: () => import('../search').then(m => m.SpellcheckMessage)
+      SpellcheckMessage: () => import('../search').then(m => m.SpellcheckMessage),
+      FallbackDisclaimerMessage: () => import('../search').then(m => m.FallbackDisclaimerMessage)
     }
   })
   export default class Mobile extends HasSearchedMixin {

diff --git a/src/components/search/fallback-disclaimer-message.vue b/src/components/search/fallback-disclaimer-message.vue
@@ -0,0 +1,13 @@
+<template>
+  <FallbackDisclaimer class="x-fallback-message x-message">
+    <i18n class="x-text1 desktop:x-text1-lg" path="fallbackDisclaimer.message" tag="p">
+      <template #query>
+        <span class="x-w-auto x-font-bold">"{{ $x.query.search }}"</span>
+      </template>
+    </i18n>
+  </FallbackDisclaimer>
+</template>
+
+<script setup lang="ts">
+  import { FallbackDisclaimer } from '@empathyco/x-components/search';
+</script>
diff --git a/src/components/search/index.ts b/src/components/search/index.ts
@@ -6,6 +6,7 @@ import SelectedFilters from './facets/selected-filters.vue';
 import RelatedTags from './related-tags.vue';
 import SpellcheckMessage from './spellcheck-message.vue';
 import NoResultsMessage from './no-results-message.vue';
+import FallbackDisclaimerMessage from './fallback-disclaimer-message.vue';
 import Redirection from './redirection.vue';
 import DesktopAside from './desktop-aside.vue';
 import MobileAside from './mobile-aside.vue';
@@ -17,6 +18,7 @@ export {
   RelatedTags,
   SpellcheckMessage,
   NoResultsMessage,
+  FallbackDisclaimerMessage,
   Results,
   PartialResults,
   Sort,

diff --git a/src/components/search/no-results-message.vue b/src/components/search/no-results-message.vue
@@ -1,9 +1,10 @@
 <template>
   <i18n
     v-if="$x.noResults"
-    class="x-no-results-message x-text1 x-mt-24 x-flex x-items-center x-break-words x-bg-neutral-10 x-py-8 x-text-center desktop:x-flex-wrap desktop:x-justify-center desktop:x-gap-8 desktop:x-text1-lg desktop:x-py-24"
+    class="x-no-results-message x-text1 x-message desktop:x-mt-24 desktop:x-text1-lg"
     path="noResults.message"
     :class="{ 'x-flex-col': isTabletOrLess }"
+    tag="p"
   >
     <template #query>
       <span class="x-w-auto x-font-bold">"{{ $x.query.search }}"</span>
@@ -23,11 +24,3 @@
     }
   }
 </script>
-
-<style lang="scss">
-  .x-no-results-message {
-    > span {
-      width: 100%;
-    }
-  }
-</style>
diff --git a/src/components/search/spellcheck-message.vue b/src/components/search/spellcheck-message.vue
@@ -1,11 +1,7 @@
 <template>
-  <Spellcheck
-    v-if="$x.totalResults > 0"
-    #default="{ query }"
-    class="x-flex x-flex-wrap x-items-center x-justify-center x-gap-8 x-bg-neutral-10 x-p-24 x-text-center desktop:x-flex-col"
-  >
+  <Spellcheck v-if="$x.totalResults > 0" #default="{ query }" class="x-message desktop:x-flex-col">
     <p>
-      <i18n class="x-text1 x-break-words desktop:x-text1-lg" path="spellcheck.message" tag="span">
+      <i18n class="x-text1 desktop:x-text1-lg" path="spellcheck.message">
         <template #query>
           <span class="x-w-auto x-font-bold">"{{ query }}".</span>
           <div v-if="isTabletOrLess" class="x-basis-full"></div>

diff --git a/src/i18n/messages.types.ts b/src/i18n/messages.types.ts
@@ -110,6 +110,9 @@ export interface Messages {
   noResults: {
     message: string;
   };
+  fallbackDisclaimer: {
+    message: string;
+  };
   columnPicker: {
     message: string;
   };

diff --git a/src/i18n/messages/en.messages.json b/src/i18n/messages/en.messages.json
@@ -109,6 +109,9 @@
     "noResults": {
       "message": "Sorry but there are no results for {query}You may be interested in these products"
     },
+    "fallbackDisclaimer": {
+      "message": "No results found for {query} with the selected filters. The filters have been unselected"
+    },
     "columnPicker": {
       "message": "View"
     },

diff --git a/src/i18n/messages/es.messages.json b/src/i18n/messages/es.messages.json
@@ -109,6 +109,9 @@
     "noResults": {
       "message": "No se han encontrado resultados para {query}Quizás te interesen estos productos"
     },
+    "fallbackDisclaimer": {
+      "message": "No se han encontrado resultados para {query} con los filtros seleccionados. Los filtros se han deseleccionado"
+    },
     "columnPicker": {
       "message": "Ver"
     },

diff --git a/src/i18n/messages/fr.messages.json b/src/i18n/messages/fr.messages.json
@@ -109,6 +109,9 @@
     "noResults": {
       "message": "Désolé mais il n'y a pas de résultats pour {query}Vous pourriez être intéressé par ces produits"
     },
+    "fallbackDisclaimer": {
+      "message": "Aucun résultat trouvé pour {query} avec les filtres sélectionnés. Les filtres ont été désélectionnés"
+    },
     "columnPicker": {
       "message": "Voir"
     },

diff --git a/src/i18n/messages/it.messages.json b/src/i18n/messages/it.messages.json
@@ -109,6 +109,9 @@
     "noResults": {
       "message": "Ci dispiace ma non abbiamo trovato alcun risultato per {query}Potresti essere interessato in questi prodotti"
     },
+    "fallbackDisclaimer": {
+      "message": "Nessun risultato trovato per {query} con i filtri selezionati. I filtri sono stati deselezionati"
+    },
     "columnPicker": {
       "message": "Visualizza"
     },

diff --git a/src/i18n/messages/pt.messages.json b/src/i18n/messages/pt.messages.json
@@ -109,6 +109,9 @@
     "noResults": {
       "message": "Não encontramos resultados para{query} Talvez você pode se interessar por esses produtos"
     },
+    "fallbackDisclaimer": {
+      "message": "Sem resultados encontrados para {query} com os filtros seleccionados. Os filtros foram não seleccionados"
+    },
     "columnPicker": {
       "message": "Ver"
     },

diff --git a/src/tailwind/plugin-options.js b/src/tailwind/plugin-options.js
@@ -1,4 +1,22 @@
 /** @type {import('@empathyco/x-tailwindcss').PluginOptions} */
 module.exports = {
-  theme: {}
+  theme: {},
+  components: ({ theme }) => ({
+    '.message': {
+      display: 'flex',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: theme('spacing.8'),
+      backgroundColor: theme('colors.neutral.10'),
+      padding: theme('spacing.24'),
+      paddingTop: theme('spacing.8'),
+      paddingBottom: theme('spacing.8'),
+      textAlign: 'center',
+      '@screen desktop': {
+        paddingTop: theme('spacing.24'),
+        paddingBottom: theme('spacing.24')
+      }
+    }
+  })
 };