From 8567c4000a9236e72555a88f7ed5d09d806840db Mon Sep 17 00:00:00 2001
From: Guillermo Cacheda <cachedacodes@gmail.com>
Date: Mon, 9 Oct 2023 12:24:00 +0200
Subject: [PATCH] feat: add fallback disclaimer for removing filters (#321)

EMP-2097
---
 src/components/desktop/desktop.vue            |  4 +++-
 src/components/mobile/mobile.vue              |  4 +++-
 .../search/fallback-disclaimer-message.vue    | 13 ++++++++++++
 src/components/search/index.ts                |  2 ++
 src/components/search/no-results-message.vue  | 11 ++--------
 src/components/search/spellcheck-message.vue  |  8 ++------
 src/i18n/messages.types.ts                    |  3 +++
 src/i18n/messages/en.messages.json            |  3 +++
 src/i18n/messages/es.messages.json            |  3 +++
 src/i18n/messages/fr.messages.json            |  3 +++
 src/i18n/messages/it.messages.json            |  3 +++
 src/i18n/messages/pt.messages.json            |  3 +++
 src/tailwind/plugin-options.js                | 20 ++++++++++++++++++-
 13 files changed, 62 insertions(+), 18 deletions(-)
 create mode 100644 src/components/search/fallback-disclaimer-message.vue

diff --git a/src/components/desktop/desktop.vue b/src/components/desktop/desktop.vue
index 765c9d07..966bde3a 100644
--- 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
index 0ebefe66..8e1e13d4 100644
--- 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
new file mode 100644
index 00000000..4c9ede68
--- /dev/null
+++ b/src/components/search/fallback-disclaimer-message.vue
@@ -0,0 +1,13 @@
+<template>
+  <FallbackDisclaimer v-if="$x.fromNoResultsWithFilters" 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
index 2140b9c9..0dfadef2 100644
--- 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
index f3a68540..70257a3f 100644
--- 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
index 2535234b..a9f0e676 100644
--- 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
index 7431384d..24a7a234 100644
--- 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
index 8ba9f1fd..9750d918 100644
--- 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
index becfef3c..0c76f61e 100644
--- 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
index 9db1a8ab..5b860d56 100644
--- 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
index 5a49a95e..ebd75fbf 100644
--- 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
index f8ec7af2..22fbfab3 100644
--- 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
index 5c2689f9..416e55fb 100644
--- 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')
+      }
+    }
+  })
 };