Merge pull request #347 from weni-ai/feat/search-catalogs

Feat: search catalogs

src/components/whatsAppCatalogs/List.vue

@@ -14,12 +14,21 @@
           </span>
         </div>
       </div>
-      <div class="whatsapp-catalog-list__header__button">
+      <!-- <div class="whatsapp-catalog-list__header__button">
         <unnnic-button type="secondary" size="large">
           {{ $t('WhatsApp.catalog.list.advanced_settings') }}
         </unnnic-button>
-      </div>
+      </div> -->
     </div>
+
+    <div class="whatsapp-catalog-list__search">
+      <unnnic-input
+        v-model="searchTerm"
+        :placeholder="$t('WhatsApp.catalog.list.search_placeholder')"
+        iconLeft="search-1"
+      />
+    </div>
+
     <div
       class="whatsapp-catalog-list__cards"
       v-if="whatsAppCloudCatalogs || (!loadingWhatsAppCloudCatalogs && !errorWhatsAppCloudCatalogs)"
@@ -93,6 +102,7 @@
         firstLoad: true,
         page: 1,
         pageSize: 15,
+        searchTerm: '',
       };
     },
     computed: {
@@ -143,6 +153,10 @@
           page_size: this.pageSize,
         };
 
+        if (this.searchTerm && this.searchTerm.trim()) {
+          params.name = this.searchTerm.trim();
+        }
+
         await this.getCommerceSettings({ appUuid });
         await this.getWhatsAppCloudCatalogs({ appUuid, params });
 
@@ -277,7 +291,7 @@
         },
         deep: true,
       },
-      filterState: {
+      searchTerm: {
         handler() {
           if (this.page === 1) {
             this.fetchData(this.page);
@@ -297,12 +311,12 @@
     flex-direction: column;
     flex: 1;
     overflow: hidden;
+    gap: $unnnic-spacing-md;
 
     &__header {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      margin-bottom: $unnnic-spacing-md;
 
       &__icon {
         display: flex;
@@ -327,6 +341,12 @@
       }
     }
 
+    &__search {
+      width: 33%;
+      min-width: 250px;
+      max-width: 450px;
+    }
+
     &__cards {
       display: flex;
       flex-direction: column;
@@ -340,7 +360,6 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin-top: $unnnic-spacing-stack-md;
 
       span {
         font-size: $unnnic-font-size-body-gt;

src/locales/en.json

@@ -471,7 +471,7 @@
         "toggle_cart_visibility": "Unable to enable cart at this time. Please try again later"
       },
       "list": {
-        "title": "List of catalogs",
+        "title": "Catalog list",
         "description": "Add all the items you want to advertise or sell",
         "advanced_settings": "Advanced Settings",
         "identification": "Identification",
@@ -494,7 +494,8 @@
           "description": "Configure the level of accuracy for automatic shipping of your products",
           "recommendation": "Recommended configuration: 1.55",
           "confirm": "To save"
-        }
+        },
+        "search_placeholder": "Search for the catalog name"
       }
     },
     "templates": {

src/locales/es_es.json

@@ -467,8 +467,8 @@
       "error": {
         "fetch_catalogs": "No se puede cargar la lista del catálogo. Por favor, inténtelo de nuevo más tarde",
         "disable_catalog": "No se puede desactivar el catálogo en este momento. Por favor, inténtelo de nuevo más tarde",
-        "enable_catalog": "El catálogo no se pudo habilitar en este momento. Por favor, inténtelo de nuevo más tarde",
-        "toggle_cart_visibility": "No se puede habilitar el carrito en este momento. Por favor, inténtelo de nuevo más tarde"
+        "enable_catalog": "El catálogo no se pudo activar en este momento. Por favor, inténtelo de nuevo más tarde",
+        "toggle_cart_visibility": "No se puede activar el carrito en este momento. Por favor, inténtelo de nuevo más tarde"
       },
       "list": {
         "title": "Lista de catálogos",
@@ -494,7 +494,8 @@
           "description": "Configura el nivel de precisión para el envío automático de tus productos",
           "recommendation": "Configuración recomendada: 1,55",
           "confirm": "Ahorrar"
-        }
+        },
+        "search_placeholder": "Buscar el nombre del catálogo"
       }
     },
     "templates": {

src/locales/pt_br.json

@@ -466,9 +466,9 @@
     "catalog": {
       "error": {
         "fetch_catalogs": "Não foi possível carregar a lista de catálogos. Por favor tente novamente mais tarde",
-        "disable_catalog": "Não foi possível desabilitar o catálogo no momento. Por favor tente novamente mais tarde",
-        "enable_catalog": "Não foi possível habilitar o catálogo no momento. Por favor tente novamente mais tarde",
-        "toggle_cart_visibility": "Não foi possível habilitar o carrinho no momento. Por favor tente novamente mais tarde"
+        "disable_catalog": "Não foi possível desativar o catálogo no momento. Por favor tente novamente mais tarde",
+        "enable_catalog": "Não foi possível ativar o catálogo no momento. Por favor tente novamente mais tarde",
+        "toggle_cart_visibility": "Não foi possível ativar o carrinho no momento. Por favor tente novamente mais tarde"
       },
       "list": {
         "title": "Lista de catálogos",
@@ -482,19 +482,20 @@
           "inactive_catalog": "Inativo"
         },
         "disable_modal": {
-          "title": "Vai mesmo desabilitar o catálogo?",
+          "title": "Vai mesmo desativar o catálogo?",
           "title_active": "Você já tem outro catálogo ativo",
           "description": "Para continuar enviando seus produtos no Whatsapp você precisa de um catálogo ativo.",
           "description_active": "Essa ação vai desativar automaticamente o catálogo “{name}”",
           "label": "Digite “{name}” para confirmar",
-          "confirm": "Desabilitar"
+          "confirm": "Desativar"
         },
         "advanced_configurations_modal": {
           "title": "Configurações avançadas",
           "description": "Configure o nível de precisão do envio automático dos seus produtos",
           "recommendation": "Configuração recomendada: 1.55",
           "confirm": "Salvar"
-        }
+        },
+        "search_placeholder": "Busque pelo nome do Catálogo"
       }
     },
     "templates": {

tests/unit/specs/components/config/channels/whatsapp/components/tabs/__snapshots__/AccountTab.spec.js.snap

@@ -9,9 +9,9 @@ exports[`whatsapp/components/tabs/AccountTab.vue should be rendered properly 1`]
           <div class="account-tab__content__info__templates__buttons__title">
             Templates
           </div>
-          <unnnic-button-next type="secondary" size="small" scheme="feedback-green" class="account-tab__content__info__templates__buttons__button">
+          <unnnicbutton-stub type="alternative" size="small" scheme="feedback-green" class="account-tab__content__info__templates__buttons__button">
             See my templates
-          </unnnic-button-next>
+          </unnnicbutton-stub>
         </div>
         <div class="account-tab__content__info__templates__buttons">
           <div class="account-tab__content__info__templates__buttons__title">

tests/unit/specs/views/whatsAppCatalogs/__snapshots__/List.spec.js.snap

@@ -2,8 +2,6 @@
 
 exports[`views/whatsAppCatalogs/List.vue should be rendered properly 1`] = `
 <div class="whatsapp-catalogs">
-  <div>
-    <list-stub></list-stub>
-  </div>
+  <list-stub></list-stub>
 </div>
 `;