From c9015fe5e1f79b99f155b2327754b1810cf9d795 Mon Sep 17 00:00:00 2001
From: Sthefani <silveira.sthefani1@gmail.com>
Date: Mon, 16 Oct 2023 09:41:07 -0300
Subject: [PATCH 1/2] added design review

---
 src/api/appType/whatsapp_cloud/index.js       |   5 +-
 src/assets/svgs/storefront.svg                |  10 +
 src/components/whatsAppCatalogs/Card.vue      |  25 +-
 src/components/whatsAppCatalogs/List.vue      | 151 +++++--
 src/locales/en.json                           |  11 +-
 src/locales/es_es.json                        |  14 +-
 src/locales/pt_br.json                        |   5 +-
 .../channels/whatsapp_cloud/actions.js        |   3 +-
 .../components/tabs/AccountTab.spec.js        |  13 +
 .../__snapshots__/AccountTab.spec.js.snap     |  20 +-
 .../components/whatsAppCatalogs/List.spec.js  | 404 ++++++++++++++++++
 .../__snapshots__/List.spec.js.snap           |  42 ++
 .../appType/whatsapp_cloud/actions.spec.js    |  46 ++
 .../specs/views/whatsAppCatalogs/Base.spec.js |  77 ++++
 .../specs/views/whatsAppCatalogs/List.spec.js |  29 ++
 .../__snapshots__/Base.spec.js.snap           |   8 +
 .../__snapshots__/List.spec.js.snap           |   9 +
 17 files changed, 796 insertions(+), 76 deletions(-)
 create mode 100644 src/assets/svgs/storefront.svg
 create mode 100644 tests/unit/specs/components/whatsAppCatalogs/List.spec.js
 create mode 100644 tests/unit/specs/components/whatsAppCatalogs/__snapshots__/List.spec.js.snap
 create mode 100644 tests/unit/specs/views/whatsAppCatalogs/Base.spec.js
 create mode 100644 tests/unit/specs/views/whatsAppCatalogs/List.spec.js
 create mode 100644 tests/unit/specs/views/whatsAppCatalogs/__snapshots__/Base.spec.js.snap
 create mode 100644 tests/unit/specs/views/whatsAppCatalogs/__snapshots__/List.spec.js.snap

diff --git a/src/api/appType/whatsapp_cloud/index.js b/src/api/appType/whatsapp_cloud/index.js
index 4fa57673..4d7b98d2 100644
--- a/src/api/appType/whatsapp_cloud/index.js
+++ b/src/api/appType/whatsapp_cloud/index.js
@@ -16,8 +16,9 @@ export default {
   configurePhoneNumber(data) {
     return request.$http.post(`${resource}/`, data);
   },
-  getWhatsAppCloudCatalogs(appUuid) {
-    return request.$http.get(`${catalogsResource}/${appUuid}/catalogs/`);
+  getWhatsAppCloudCatalogs(appUuid, params) {
+    const queryString = qs.stringify(params);
+    return request.$http.get(`${catalogsResource}/${appUuid}/catalogs/?${queryString}`);
   },
   fetchCatalogData(appUuid, catalogUuid) {
     return request.$http.get(`${catalogsResource}/${appUuid}/catalogs/${catalogUuid}/`);
diff --git a/src/assets/svgs/storefront.svg b/src/assets/svgs/storefront.svg
new file mode 100644
index 00000000..0d4b8320
--- /dev/null
+++ b/src/assets/svgs/storefront.svg
@@ -0,0 +1,10 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="storefront">
+<mask id="mask0_3515_5718" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="40" height="40">
+<rect id="Bounding box" width="40" height="40" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_3515_5718)">
+<path id="storefront_2" d="M34.5918 18.2712V31.9763C34.5918 32.6942 34.3369 33.3082 33.8269 33.8181C33.3169 34.3281 32.703 34.5831 31.985 34.5831H8.00429C7.28635 34.5831 6.67239 34.3281 6.16242 33.8181C5.65244 33.3082 5.39746 32.6942 5.39746 31.9763V18.2391C4.66243 17.6465 4.15193 16.8974 3.86596 15.9918C3.57999 15.0862 3.58907 14.1501 3.89321 13.1835L5.59617 7.69425C5.81839 6.97489 6.19268 6.41542 6.71904 6.01584C7.24537 5.61628 7.86894 5.4165 8.58975 5.4165H31.2885C32.032 5.4165 32.6749 5.61414 33.2169 6.00942C33.7589 6.40473 34.1403 6.95566 34.3611 7.66221L36.1239 13.1835C36.428 14.1501 36.4325 15.0886 36.1373 15.9993C35.842 16.9099 35.3269 17.6672 34.5918 18.2712ZM23.7094 17.2862C24.6496 17.2862 25.3884 17.0032 25.9258 16.4373C26.4632 15.8714 26.6845 15.2427 26.5898 14.5511L25.515 7.51046H21.0555V14.4378C21.0555 15.2028 21.3116 15.8688 21.8237 16.4357C22.3358 17.0027 22.9644 17.2862 23.7094 17.2862ZM16.0684 17.2862C16.8996 17.2862 17.5896 17.0073 18.1384 16.4496C18.6872 15.8919 18.9616 15.2213 18.9616 14.4378V7.51046H14.4914L13.4166 14.6152C13.3269 15.237 13.5363 15.8376 14.0448 16.417C14.5534 16.9965 15.2279 17.2862 16.0684 17.2862ZM8.57267 17.2862C9.26569 17.2862 9.86435 17.0474 10.3686 16.5698C10.8729 16.0922 11.1738 15.5012 11.2714 14.7968L12.3313 7.51046H8.35258C8.17094 7.51046 8.02492 7.55052 7.9145 7.63063C7.80411 7.71077 7.72576 7.83098 7.67946 7.99125L5.95296 13.6622C5.68015 14.5176 5.79411 15.3355 6.29483 16.1158C6.79556 16.896 7.55483 17.2862 8.57267 17.2862ZM31.4167 17.2862C32.3597 17.2862 33.1072 16.9113 33.6592 16.1617C34.2112 15.412 34.3426 14.5789 34.0535 13.6622L32.2885 7.95921C32.2422 7.79894 32.1638 7.68407 32.0534 7.61463C31.943 7.54518 31.797 7.51046 31.6154 7.51046H27.6752L28.735 14.7968C28.8397 15.5012 29.1424 16.0922 29.6431 16.5698C30.1439 17.0474 30.735 17.2862 31.4167 17.2862ZM8.00429 32.4891H31.985C32.1275 32.4891 32.2486 32.4411 32.3483 32.3449C32.448 32.2488 32.4979 32.1259 32.4979 31.9763V19.2498C32.3918 19.3046 32.2383 19.34 32.0374 19.356C31.8366 19.3721 31.6296 19.3801 31.4167 19.3801C30.6966 19.3801 30.0386 19.2341 29.4428 18.9421C28.8471 18.6501 28.2671 18.1899 27.703 17.5617C27.2578 18.113 26.7101 18.5539 26.0598 18.8844C25.4096 19.2149 24.6546 19.3801 23.7949 19.3801C23.0463 19.3801 22.3722 19.2417 21.7725 18.965C21.1727 18.6883 20.5848 18.2619 20.0085 17.6857C19.5164 18.2391 18.9416 18.6599 18.2842 18.948C17.6268 19.236 16.943 19.3801 16.2329 19.3801C15.4509 19.3801 14.7279 19.2382 14.0641 18.9544C13.4003 18.6705 12.8276 18.2063 12.3462 17.5617C11.604 18.2626 10.9197 18.7409 10.2933 18.9965C9.66683 19.2522 9.09331 19.3801 8.57267 19.3801C8.37108 19.3801 8.17449 19.3721 7.98287 19.356C7.79129 19.34 7.62747 19.3046 7.49142 19.2498V31.9763C7.49142 32.1259 7.54128 32.2488 7.641 32.3449C7.74072 32.4411 7.86182 32.4891 8.00429 32.4891Z" fill="#00A49F"/>
+</g>
+</g>
+</svg>
diff --git a/src/components/whatsAppCatalogs/Card.vue b/src/components/whatsAppCatalogs/Card.vue
index e89ec9a2..3ca8cd2d 100644
--- a/src/components/whatsAppCatalogs/Card.vue
+++ b/src/components/whatsAppCatalogs/Card.vue
@@ -11,7 +11,7 @@
           <span class="u font secondary body-md color-neutral-cloudy">
             {{ $t('WhatsApp.catalog.list.identification') }}
           </span>
-          <span class="u font secondary body-md color-brand-weni bold">
+          <span class="u font secondary body-md color-weni-600 bold">
             {{ catalog.facebook_catalog_id }}
           </span>
         </div>
@@ -65,29 +65,6 @@
         currentDisable: null,
         catalogStatus: this.catalog.is_connected,
         cartStatus: this.enabledCart,
-        listCatalog: [
-          {
-            uuid: '3081a268-fff5-4366-bf44-ee387c8ddcdc',
-            name: 'Teste_localizacao',
-            facebook_catalog_id: '312538484461506',
-            category: 'commerce',
-            is_connected: false,
-          },
-          {
-            uuid: 'eaf96431-9be8-4cbd-8541-f4ae08af0d1e',
-            name: 'catalogo marketing token',
-            facebook_catalog_id: '339959911815729',
-            category: 'commerce',
-            is_connected: true,
-          },
-          {
-            uuid: 'e7974bfa-14d8-470a-8b1b-669718bc1036',
-            name: 'catalogo criado em dev',
-            facebook_catalog_id: '664025605666699',
-            category: 'commerce',
-            is_connected: false,
-          },
-        ],
       };
     },
     computed: {
diff --git a/src/components/whatsAppCatalogs/List.vue b/src/components/whatsAppCatalogs/List.vue
index be989bf0..94d1c0f9 100644
--- a/src/components/whatsAppCatalogs/List.vue
+++ b/src/components/whatsAppCatalogs/List.vue
@@ -1,24 +1,24 @@
 <template>
   <div class="whatsapp-catalog-list">
     <div class="whatsapp-catalog-list__header">
-      <div class="whatsapp-catalog-list__header__title">
-        <unnnic-card
-          class="whatsapp-catalog-list__header__title__text"
-          type="title"
-          :title="$t('WhatsApp.catalog.list.title')"
-          :hasInformationIcon="false"
-          icon="house-1-1"
-          scheme="brand-weni-soft"
-        />
-        <span class="u font secondary body-gt color-neutral-darkest">
-          {{ $t('WhatsApp.catalog.list.description') }}
-        </span>
+      <div class="whatsapp-catalog-list__header__text">
+        <div class="whatsapp-catalog-list__header__icon">
+          <img src="@/assets/svgs/storefront.svg" />
+        </div>
+        <div class="whatsapp-catalog-list__header__title">
+          <span class="u font primary title-sm color-neutral-darkest">
+            {{ $t('WhatsApp.catalog.list.title') }}
+          </span>
+          <span class="u font secondary body-gt color-neutral-darkest">
+            {{ $t('WhatsApp.catalog.list.description') }}
+          </span>
+        </div>
       </div>
-      <!--       <div class="whatsapp-catalog-list__header__button">
-        <unnnic-button-next type="terciary" size="large">
+      <div class="whatsapp-catalog-list__header__button">
+        <unnnic-button type="secondary" size="large">
           {{ $t('WhatsApp.catalog.list.advanced_settings') }}
-        </unnnic-button-next>
-      </div> -->
+        </unnnic-button>
+      </div>
     </div>
     <div
       class="whatsapp-catalog-list__cards"
@@ -34,18 +34,17 @@
         @toggleCart="toggleCart"
       />
     </div>
+    <div class="whatsapp-catalog-list__pagination">
+      <span>{{ currentPageStart }} - {{ currentPageCount }} de {{ totalCount }}</span>
+      <unnnic-pagination v-model="page" :max="pageCount" :show="5" />
+    </div>
     <unnnic-modal-next
       v-if="openModal"
       type="alert"
       icon="alert-circle-1"
       scheme="feedback-red"
       :validate="connectedCatalog.name"
-      :validatePlaceholder="
-        $t('WhatsApp.catalog.list.disable_modal.label', { name: connectedCatalog.name })
-      "
-      :validateLabel="
-        $t('WhatsApp.catalog.list.disable_modal.label', { name: connectedCatalog.name })
-      "
+      :validatePlaceholder="connectedCatalog.name"
       :title="$t('WhatsApp.catalog.list.disable_modal.title')"
       :actionPrimaryLabel="$t('WhatsApp.catalog.list.disable_modal.confirm')"
       :actionSecondaryLabel="$t('general.Cancel')"
@@ -54,6 +53,9 @@
     >
       <template slot="description">
         {{ $t('WhatsApp.catalog.list.disable_modal.description') }}
+        <div>
+          {{ $t('WhatsApp.catalog.list.disable_modal.label', { name: connectedCatalog.name }) }}
+        </div>
       </template>
     </unnnic-modal-next>
   </div>
@@ -75,8 +77,14 @@
         openModal: false,
         connectedCatalog: null,
         catalogToEnable: null,
+        firstLoad: true,
+        page: 1,
+        pageSize: 15,
       };
     },
+    created() {
+      this.fetchData({ page: this.page });
+    },
     computed: {
       ...mapState('WhatsAppCloud', [
         'loadingWhatsAppCloudCatalogs',
@@ -87,9 +95,25 @@
         'commerceSettings',
         'errorToggleCartVisibility',
       ]),
-    },
-    created() {
-      this.fetchData();
+      totalCount() {
+        return this.whatsAppCloudCatalogs?.count || this.pageSize;
+      },
+      pageCount() {
+        if (this.whatsAppCloudCatalogs?.count) {
+          return Math.ceil(this.whatsAppCloudCatalogs.count / this.pageSize);
+        } else {
+          return 1;
+        }
+      },
+      currentPageStart() {
+        return (this.page - 1) * this.pageSize || 1;
+      },
+      currentPageCount() {
+        const value = this.pageSize * this.page;
+        return value > this.whatsAppCloudCatalogs?.count
+          ? this.whatsAppCloudCatalogs?.count || 0
+          : value;
+      },
     },
     methods: {
       ...mapActions('WhatsAppCloud', [
@@ -99,11 +123,15 @@
         'getCommerceSettings',
         'toggleCartVisibility',
       ]),
-      fetchData: debounce(async function () {
+      fetchData: debounce(async function (page) {
         const { appUuid } = this.$route.params;
+        const params = {
+          page: page,
+          page_size: this.pageSize,
+        };
 
         await this.getCommerceSettings({ appUuid });
-        await this.getWhatsAppCloudCatalogs({ appUuid });
+        await this.getWhatsAppCloudCatalogs({ appUuid, params });
 
         if (this.errorWhatsAppCloudCatalog) {
           unnnicCallAlert({
@@ -223,6 +251,27 @@
         this.fetchData();
       },
     },
+    watch: {
+      page(page) {
+        this.fetchData({ page });
+      },
+      whatsAppCloudCatalogs: {
+        handler() {
+          this.firstLoad = false;
+        },
+        deep: true,
+      },
+      filterState: {
+        handler() {
+          if (this.page === 1) {
+            this.fetchData({ page: this.page });
+          } else {
+            this.page = 1;
+          }
+        },
+        deep: true,
+      },
+    },
   };
 </script>
 
@@ -236,18 +285,31 @@
 
     &__header {
       display: flex;
-      justify-content: space-between;
       align-items: center;
+      justify-content: space-between;
       margin-bottom: $unnnic-spacing-md;
 
-      &__title {
+      &__icon {
         display: flex;
-        flex-direction: column;
+        background-color: #eefffc;
+        border-radius: $unnnic-border-radius-sm;
+        justify-content: center;
+        margin-right: $unnnic-spacing-inline-sm;
 
-        &__text {
-          margin-bottom: $unnnic-spacing-xs;
+        img {
+          height: $unnnic-icon-size-xl;
+          width: $unnnic-icon-size-xl;
+          padding: $unnnic-inset-nano;
         }
       }
+      &__text {
+        display: flex;
+      }
+      &__title {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
     }
 
     &__cards {
@@ -256,5 +318,30 @@
       flex: 1;
       gap: $unnnic-spacing-md;
     }
+
+    &__pagination {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: $unnnic-spacing-stack-md;
+
+      span {
+        font-size: $unnnic-font-size-body-gt;
+        line-height: $unnnic-line-height-md + $unnnic-font-size-body-gt;
+        color: $unnnic-color-neutral-dark;
+      }
+    }
+
+    ::v-deep .unnnic-modal .container .content {
+      padding-right: 0px;
+    }
+
+    ::v-deep .unnnic-modal.type-alert .title {
+      padding-bottom: $unnnic-spacing-xs;
+    }
+
+    ::v-deep .unnnic-modal.type-alert .container .content.with-validation .description {
+      margin-bottom: $unnnic-spacing-sm;
+    }
   }
 </style>
diff --git a/src/locales/en.json b/src/locales/en.json
index 5f01465c..d661bb2d 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -464,6 +464,12 @@
       }
     },
     "catalog": {
+      "error": {
+        "fetch_catalogs": "Unable to load catalog list. Please try again later",
+        "disable_catalog": "Unable to disable the catalog at this time. Please try again later",
+        "enable_catalog": "The catalog could not be enabled at this time. Please try again later",
+        "toggle_cart_visibility": "Unable to enable cart at this time. Please try again later"
+      },
       "list": {
         "title": "List of catalogs",
         "description": "Add all the items you want to advertise or sell",
@@ -478,14 +484,13 @@
         "disable_modal": {
           "title": "Are you really going to disable the catalogue?",
           "description": "To continue sending your products on Whatsapp you need an active catalogue.",
-          "label": "Type “disable catalog” to confirm",
-          "placeholder": "disable catalog",
+          "label": "Type “{name}” to confirm",
           "confirm": "Disable"
         },
         "advanced_configurations_modal": {
           "title": "Advanced Settings",
           "description": "Configure the level of accuracy for automatic shipping of your products",
-          "recomendation": "Recommended configuration: 1.55",
+          "recommendation": "Recommended configuration: 1.55",
           "confirm": "To save"
         }
       }
diff --git a/src/locales/es_es.json b/src/locales/es_es.json
index 764321a6..bc243c1f 100644
--- a/src/locales/es_es.json
+++ b/src/locales/es_es.json
@@ -464,6 +464,12 @@
       }
     },
     "catalog": {
+      "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"
+      },
       "list": {
         "title": "Lista de catálogos",
         "description": "Añade todos los artículos que quieras anunciar o vender",
@@ -478,19 +484,15 @@
         "disable_modal": {
           "title": "¿De verdad vas a desactivar el catálogo?",
           "description": "Para seguir enviando tus productos por Whatsapp necesitas un catálogo activo.",
-          "label": "Escriba “deshabilitar catálogo” para confirmar",
-          "placeholder": "desactivar catálogo",
+          "label": "Escriba “{name}” para confirmar",
           "confirm": "Desactivar"
         },
         "advanced_configurations_modal": {
           "title": "Configuraciones avanzadas",
           "description": "Configura el nivel de precisión para el envío automático de tus productos",
-          "recomendation": "Configuración recomendada: 1,55",
+          "recommendation": "Configuración recomendada: 1,55",
           "confirm": "Ahorrar"
         }
-      },
-      "error": {
-        "toggle_cart_visibility": ""
       }
     },
     "templates": {
diff --git a/src/locales/pt_br.json b/src/locales/pt_br.json
index cb65f493..57fa9915 100644
--- a/src/locales/pt_br.json
+++ b/src/locales/pt_br.json
@@ -468,7 +468,7 @@
         "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": ""
+        "toggle_cart_visibility": "Não foi possível habilitar o carrinho no momento. Por favor tente novamente mais tarde"
       },
       "list": {
         "title": "Lista de catálogos",
@@ -485,13 +485,12 @@
           "title": "Vai mesmo desabilitar o catálogo?",
           "description": "Para continuar enviando seus produtos no Whatsapp você precisa de um catálogo ativo.",
           "label": "Digite “{name}” para confirmar",
-          "placeholder": "desabilitar catálogo",
           "confirm": "Desabilitar"
         },
         "advanced_configurations_modal": {
           "title": "Configurações avançadas",
           "description": "Configure o nível de precisão do envio automático dos seus produtos",
-          "recomendation": "Configuração recomendada: 1.55",
+          "recommendation": "Configuração recomendada: 1.55",
           "confirm": "Salvar"
         }
       }
diff --git a/src/store/appType/channels/whatsapp_cloud/actions.js b/src/store/appType/channels/whatsapp_cloud/actions.js
index d0f4b71f..7fc65172 100644
--- a/src/store/appType/channels/whatsapp_cloud/actions.js
+++ b/src/store/appType/channels/whatsapp_cloud/actions.js
@@ -39,7 +39,8 @@ export default {
     commit('GET_WHATSAPP_CATALOGS_REQUEST');
     try {
       const { data } = await whatsAppCloud.getWhatsAppCloudCatalogs(appUuid);
-      commit('GET_WHATSAPP_CATALOGS_SUCCESS', data);
+      const catalogs = data.results;
+      commit('GET_WHATSAPP_CATALOGS_SUCCESS', catalogs, data);
     } catch (err) {
       captureSentryException(err);
       commit('GET_WHATSAPP_CATALOGS_ERROR', err);
diff --git a/tests/unit/specs/components/config/channels/whatsapp/components/tabs/AccountTab.spec.js b/tests/unit/specs/components/config/channels/whatsapp/components/tabs/AccountTab.spec.js
index 9a719df6..8c5b3642 100644
--- a/tests/unit/specs/components/config/channels/whatsapp/components/tabs/AccountTab.spec.js
+++ b/tests/unit/specs/components/config/channels/whatsapp/components/tabs/AccountTab.spec.js
@@ -98,4 +98,17 @@ describe('whatsapp/components/tabs/AccountTab.vue', () => {
       });
     });
   });
+
+  describe('navigateToCatalogs()', () => {
+    it('should change route to catalogs', () => {
+      const spy = spyOn(wrapper.vm.$router, 'push');
+      expect(spy).not.toHaveBeenCalled();
+      wrapper.vm.navigateToCatalogs();
+
+      expect(spy).toBeCalledTimes(1);
+      expect(spy).toHaveBeenCalledWith({
+        path: `/apps/my/${wrapper.vm.appInfo.code}/${wrapper.vm.appInfo.uuid}/catalogs`,
+      });
+    });
+  });
 });
diff --git a/tests/unit/specs/components/config/channels/whatsapp/components/tabs/__snapshots__/AccountTab.spec.js.snap b/tests/unit/specs/components/config/channels/whatsapp/components/tabs/__snapshots__/AccountTab.spec.js.snap
index b504cafd..b3aef9a3 100644
--- a/tests/unit/specs/components/config/channels/whatsapp/components/tabs/__snapshots__/AccountTab.spec.js.snap
+++ b/tests/unit/specs/components/config/channels/whatsapp/components/tabs/__snapshots__/AccountTab.spec.js.snap
@@ -5,12 +5,22 @@ exports[`whatsapp/components/tabs/AccountTab.vue should be rendered properly 1`]
   <div class="account-tab__content">
     <div class="account-tab__content__info">
       <div class="account-tab__content__info__templates">
-        <div class="account-tab__content__info__templates__title">
-          Templates
+        <div class="account-tab__content__info__templates__buttons">
+          <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">
+            See my templates
+          </unnnic-button-next>
+        </div>
+        <div class="account-tab__content__info__templates__buttons">
+          <div class="account-tab__content__info__templates__buttons__title">
+            Catalog
+          </div>
+          <unnnic-button-next type="primary" size="small" class="account-tab__content__info__templates__buttons__button">
+            View list of catalogs
+          </unnnic-button-next>
         </div>
-        <unnnicbutton-stub type="secondary" size="small" class="account-tab__content__info__templates__button">
-          See my templates
-        </unnnicbutton-stub>
       </div>
       <div class="account-tab__content__info__qr">
         <div class="account-tab__content__info__qr__title">
diff --git a/tests/unit/specs/components/whatsAppCatalogs/List.spec.js b/tests/unit/specs/components/whatsAppCatalogs/List.spec.js
new file mode 100644
index 00000000..a081f09f
--- /dev/null
+++ b/tests/unit/specs/components/whatsAppCatalogs/List.spec.js
@@ -0,0 +1,404 @@
+jest.mock('lodash.debounce', () => jest.fn((fn) => fn));
+import { unnnicCallAlert as mockUnnnicCallAlert } from '@weni/unnnic-system';
+
+jest.mock('@weni/unnnic-system', () => ({
+  ...jest.requireActual('@weni/unnnic-system'),
+  unnnicCallAlert: jest.fn(),
+}));
+
+import Vuex from 'vuex';
+import { mount, createLocalVue } from '@vue/test-utils';
+import List from '@/components/whatsAppCatalogs/List.vue';
+import { unnnicModalNext } from '@weni/unnnic-system';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('components/whatsAppCatalogs/List.vue', () => {
+  let wrapper;
+  let store;
+  let actions;
+  let state;
+
+  beforeEach(() => {
+    actions = {
+      getWhatsAppCatalogs: jest.fn(),
+    };
+
+    state = {
+      whatsAppCatalogs: {
+        count: 1,
+        results: [
+          {
+            uuid: '123',
+            name: 'template name',
+            facebook_catalog_id: '456',
+            category: 'COMMERCE',
+            is_connected: 'false',
+          },
+        ],
+      },
+      loadingWhatsAppCloudCatalogs: false,
+      errorWhatsAppCloudCatalogs: null,
+    };
+
+    store = new Vuex.Store({
+      modules: {
+        whatsAppCloud: {
+          namespaced: true,
+          actions,
+          state,
+        },
+      },
+    });
+
+    wrapper = mount(List, {
+      localVue,
+      store,
+      stubs: {
+        unnnicModalNext: unnnicModalNext,
+      },
+      mocks: {
+        $t: () => 'some specific text',
+        $route: {
+          params: {
+            appCode: 'wpp-cloud',
+            appUuid: '123',
+          },
+        },
+        $i18n: {
+          locale: 'pt-br',
+        },
+      },
+    });
+  });
+
+  it('should be rendered properly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  describe('fetchData()', () => {
+    it('should call unnnicCallAlert on getWhatsAppCloudCatalogs error', async () => {
+      store.state.WhatsApp.errorWhatsAppCloudCatalogs = true;
+      expect(mockUnnnicCallAlert).not.toHaveBeenCalled();
+      await wrapper.vm.fetchData();
+      expect(mockUnnnicCallAlert).toHaveBeenCalledTimes(1);
+    });
+
+    describe('filters', () => {
+      it('should add category filter if selectedCategory is not ANY', async () => {
+        await wrapper.setData({ selectedCategory: 'MARKETING' });
+        await wrapper.vm.fetchData({ page: 1 });
+        expect(actions.getWhatsAppTemplates).toHaveBeenCalledWith(expect.any(Object), {
+          appUuid: '123',
+          params: {
+            page: wrapper.vm.page,
+            page_size: wrapper.vm.pageSize,
+            category: 'MARKETING',
+          },
+        });
+      });
+
+      it('should add start filter if startDate is not null', async () => {
+        await wrapper.setData({ startDate: '2020-01-13' });
+        await wrapper.vm.fetchData({ page: 1 });
+        expect(actions.getWhatsAppTemplates).toHaveBeenCalledWith(expect.any(Object), {
+          appUuid: '123',
+          params: {
+            page: wrapper.vm.page,
+            page_size: wrapper.vm.pageSize,
+            start: '2020-01-13',
+          },
+        });
+      });
+
+      it('should add end filter if endDate is not null', async () => {
+        await wrapper.setData({ endDate: '2020-01-13' });
+        await wrapper.vm.fetchData({ page: 1 });
+        expect(actions.getWhatsAppTemplates).toHaveBeenCalledWith(expect.any(Object), {
+          appUuid: '123',
+          params: {
+            page: wrapper.vm.page,
+            page_size: wrapper.vm.pageSize,
+            end: '2020-01-13',
+          },
+        });
+      });
+
+      it('should andd name if searchTerm is not null or empty', async () => {
+        await wrapper.setData({ searchTerm: 'some search term' });
+        await wrapper.vm.fetchData({ page: 1 });
+        expect(actions.getWhatsAppTemplates).toHaveBeenCalledWith(expect.any(Object), {
+          appUuid: '123',
+          params: {
+            page: wrapper.vm.page,
+            page_size: wrapper.vm.pageSize,
+            name: 'some search term',
+          },
+        });
+      });
+
+      it('should add name sort in ASC state', async () => {
+        await wrapper.setData({ nameSortDirection: 'ASC' });
+        await wrapper.vm.fetchData({ page: 1 });
+        expect(actions.getWhatsAppTemplates).toHaveBeenCalledWith(expect.any(Object), {
+          appUuid: '123',
+          params: {
+            page: wrapper.vm.page,
+            page_size: wrapper.vm.pageSize,
+            sort: 'name',
+          },
+        });
+      });
+
+      it('should add name sort in DESC state', async () => {
+        await wrapper.setData({ nameSortDirection: 'DESC' });
+        await wrapper.vm.fetchData({ page: 1 });
+        expect(actions.getWhatsAppTemplates).toHaveBeenCalledWith(expect.any(Object), {
+          appUuid: '123',
+          params: {
+            page: wrapper.vm.page,
+            page_size: wrapper.vm.pageSize,
+            sort: '-name',
+          },
+        });
+      });
+
+      it('should add date sort in ASC state', async () => {
+        await wrapper.setData({ dateSortDirection: 'ASC' });
+        await wrapper.vm.fetchData({ page: 1 });
+        expect(actions.getWhatsAppTemplates).toHaveBeenCalledWith(expect.any(Object), {
+          appUuid: '123',
+          params: {
+            page: wrapper.vm.page,
+            page_size: wrapper.vm.pageSize,
+            sort: 'created_on',
+          },
+        });
+      });
+
+      it('should add date sort in DESC state', async () => {
+        await wrapper.setData({ dateSortDirection: 'DESC' });
+        await wrapper.vm.fetchData({ page: 1 });
+        expect(actions.getWhatsAppTemplates).toHaveBeenCalledWith(expect.any(Object), {
+          appUuid: '123',
+          params: {
+            page: wrapper.vm.page,
+            page_size: wrapper.vm.pageSize,
+            sort: '-created_on',
+          },
+        });
+      });
+    });
+  });
+
+  describe('getTranslationsLanguage()', () => {
+    it('should return an array of template translations language', () => {
+      const translations = wrapper.vm.getTranslationsLanguages(
+        wrapper.vm.whatsAppTemplates.results[0].translations,
+      );
+      expect(translations).toEqual(['en', 'es']);
+    });
+  });
+
+  describe('formatDate()', () => {
+    it('should return formatted date', () => {
+      const date = wrapper.vm.formatDate('2022-01-13T00:00:00');
+      expect(date).toBe('jan/2022');
+    });
+  });
+
+  describe('dropdownPosition()', () => {
+    it('should return top-left if item index is greater than 7', () => {
+      store.state.WhatsApp.whatsAppTemplates.results = [...Array(9)].map((_, index) => {
+        return {
+          uuid: `${index + 1}`,
+          name: 'template name',
+          created_on: '2020-01-13',
+          category: 'MARKETING',
+          template_type: 'TEXT',
+          namespace: '456',
+          translations: [
+            { language: 'en', status: 'APPROVED' },
+            { language: 'es', status: 'REJECTED' },
+          ],
+        };
+      });
+
+      const dropdownPosition = wrapper.vm.dropdownPosition({ uuid: '9' });
+      expect(dropdownPosition).toBe('top-left');
+    });
+
+    it('should return bottom-left if item index is lesser than 7', () => {
+      store.state.WhatsApp.whatsAppTemplates.results = [...Array(9)].map((_, index) => {
+        return {
+          uuid: `${index + 1}`,
+          name: 'template name',
+          created_on: '2020-01-13',
+          category: 'MARKETING',
+          template_type: 'TEXT',
+          namespace: '456',
+          translations: [
+            { language: 'en', status: 'APPROVED' },
+            { language: 'es', status: 'REJECTED' },
+          ],
+        };
+      });
+
+      const dropdownPosition = wrapper.vm.dropdownPosition({ uuid: '3' });
+      expect(dropdownPosition).toBe('bottom-left');
+    });
+
+    it('should return bottom-left as default if there ar no templates', () => {
+      store.state.WhatsApp.whatsAppTemplates = null;
+      const dropdownPosition = wrapper.vm.dropdownPosition({ uuid: '3' });
+      expect(dropdownPosition).toBe('bottom-left');
+    });
+  });
+
+  describe('watchers', () => {
+    it('should call fetchData on page change', async () => {
+      const spy = spyOn(wrapper.vm, 'fetchData');
+      expect(spy).not.toHaveBeenCalled();
+      await wrapper.setData({ page: 2 });
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(spy).toHaveBeenCalledWith({ page: 2 });
+    });
+
+    it('should set firstLoad to false on whatsAppTemplates change', async () => {
+      expect(wrapper.vm.firstLoad).toBe(true);
+      store.state.WhatsApp.whatsAppTemplates = {
+        results: [
+          {
+            uuid: '789',
+            name: 'new template name',
+            created_on: '2021-01-13',
+            category: 'OTP',
+            template_type: 'MEDIA',
+            namespace: '999',
+            translations: [
+              { language: 'en', status: 'REJECTED' },
+              { language: 'es', status: 'APPROVED' },
+            ],
+          },
+        ],
+      };
+      await wrapper.vm.$nextTick();
+      expect(wrapper.vm.firstLoad).toBe(false);
+    });
+
+    it('should call fetchData if on first page and filterState was modified', async () => {
+      const spy = spyOn(wrapper.vm, 'fetchData');
+      expect(spy).not.toHaveBeenCalled();
+      await wrapper.setData({ searchTerm: 'template' });
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(spy).toHaveBeenCalledWith({ page: 1 });
+    });
+
+    it('should chang page to first if not on first page and filterState was modified', async () => {
+      await wrapper.setData({ page: 2 });
+      await wrapper.setData({ searchTerm: 'template' });
+      expect(wrapper.vm.page).toBe(1);
+    });
+  });
+
+  describe('filters', () => {
+    it('should call fetchData on search change', async () => {
+      const spy = spyOn(wrapper.vm, 'fetchData');
+
+      const searchInput = wrapper.find('.whatsapp-templates-table__filters__search');
+
+      expect(spy).not.toHaveBeenCalled();
+      expect(wrapper.vm.searchTerm).toBe('');
+
+      searchInput.vm.$emit('input', 'template');
+
+      await wrapper.vm.$nextTick();
+      expect(wrapper.vm.searchTerm).toBe('template');
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(spy).toHaveBeenCalledWith({ page: 1 });
+    });
+
+    it('should call fetchData on category change', async () => {
+      const spy = spyOn(wrapper.vm, 'fetchData');
+
+      const categoryInput = wrapper.find('.whatsapp-templates-table__filters__category');
+
+      expect(spy).not.toHaveBeenCalled();
+      expect(wrapper.vm.selectedCategory).toBe('ANY');
+
+      categoryInput.vm.$emit('input', 'OTP');
+
+      await wrapper.vm.$nextTick();
+      expect(wrapper.vm.selectedCategory).toBe('OTP');
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(spy).toHaveBeenCalledWith({ page: 1 });
+    });
+
+    it('should call fetchData on date change', async () => {
+      const spy = spyOn(wrapper.vm, 'fetchData');
+
+      const dateInput = wrapper.find(
+        '.whatsapp-templates-table__filters__date__dropdown-date__picker',
+      );
+
+      expect(spy).not.toHaveBeenCalled();
+      expect(wrapper.vm.startDate).toBe(null);
+      expect(wrapper.vm.endDate).toBe(null);
+
+      dateInput.vm.$emit('submit', { startDate: '01-01-2023', endDate: '31-01-2023' });
+
+      await wrapper.vm.$nextTick();
+      expect(wrapper.vm.startDate).toBe('01-01-2023');
+      expect(wrapper.vm.endDate).toBe('31-01-2023');
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(spy).toHaveBeenCalledWith({ page: 1 });
+    });
+
+    it('should call fetchData on name sort change', async () => {
+      const spy = spyOn(wrapper.vm, 'fetchData');
+
+      const nameSortInput = wrapper.find('.whatsapp-templates-table__table__header__name');
+
+      expect(spy).not.toHaveBeenCalled();
+      expect(wrapper.vm.nameSortDirection).toBe('NONE');
+
+      nameSortInput.vm.$emit('sort', 'DESC');
+
+      await wrapper.vm.$nextTick();
+      expect(wrapper.vm.nameSortDirection).toBe('DESC');
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(spy).toHaveBeenCalledWith({ page: 1 });
+
+      nameSortInput.vm.$emit('sort', 'ASC');
+
+      await wrapper.vm.$nextTick();
+      expect(wrapper.vm.nameSortDirection).toBe('ASC');
+      expect(spy).toHaveBeenCalledTimes(2);
+      expect(spy).toHaveBeenCalledWith({ page: 1 });
+    });
+
+    it('should call fetchData on date sort change', async () => {
+      const spy = spyOn(wrapper.vm, 'fetchData');
+
+      const dateSortInput = wrapper.find('.whatsapp-templates-table__table__header__date');
+
+      expect(spy).not.toHaveBeenCalled();
+      expect(wrapper.vm.dateSortDirection).toBe('NONE');
+
+      dateSortInput.vm.$emit('sort', 'DESC');
+
+      await wrapper.vm.$nextTick();
+      expect(wrapper.vm.dateSortDirection).toBe('DESC');
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(spy).toHaveBeenCalledWith({ page: 1 });
+
+      dateSortInput.vm.$emit('sort', 'ASC');
+
+      await wrapper.vm.$nextTick();
+      expect(wrapper.vm.dateSortDirection).toBe('ASC');
+      expect(spy).toHaveBeenCalledTimes(2);
+      expect(spy).toHaveBeenCalledWith({ page: 1 });
+    });
+  });
+});
diff --git a/tests/unit/specs/components/whatsAppCatalogs/__snapshots__/List.spec.js.snap b/tests/unit/specs/components/whatsAppCatalogs/__snapshots__/List.spec.js.snap
new file mode 100644
index 00000000..1ba527c1
--- /dev/null
+++ b/tests/unit/specs/components/whatsAppCatalogs/__snapshots__/List.spec.js.snap
@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/whatsAppCatalogs/List.vue should be rendered properly 1`] = `
+<div class="whatsapp-catalog-list">
+  <div class="whatsapp-catalog-list__header">
+    <div class="whatsapp-catalog-list__header__text">
+      <div class="whatsapp-catalog-list__header__icon"><img src="@/assets/svgs/storefront.svg"></div>
+      <div class="whatsapp-catalog-list__header__title"><span class="u font primary title-sm color-neutral-darkest">
+          some specific text
+        </span> <span class="u font secondary body-gt color-neutral-darkest">
+          some specific text
+        </span></div>
+    </div>
+    <div class="whatsapp-catalog-list__header__button"><button data-v-1e5e9ddd="" class="unnnic-button unnnic-button--size-large unnnic-button--secondary">
+        <!---->
+        <!---->
+        <!----><span data-v-1e5e9ddd="" class="unnnic-button__label">
+        some specific text
+        </span>
+        <!---->
+      </button></div>
+  </div>
+  <div class="whatsapp-catalog-list__cards"></div>
+  <div class="whatsapp-catalog-list__pagination"><span>1 - 15 de 15</span>
+    <div data-v-83fb4bdc="" class="pagination"><button data-v-1e5e9ddd="" data-v-83fb4bdc="" disabled="disabled" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary unnnic-button--icon-on-center">
+        <!---->
+        <!----><span data-v-59b073b4="" data-v-1e5e9ddd="" class="unnnic-icon unnnic-icon__size--sm unnnic-icon-scheme--neutral-clean"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M26.8368 35.0005C26.5868 35.0005 26.3506 34.903 26.1743 34.7255L12.7743 21.3255C12.4206 20.9717 12.2256 20.5017 12.2256 20.0017C12.2256 19.5017 12.4193 19.0305 12.7731 18.6767L26.1743 5.27549C26.3506 5.09799 26.5868 5.00049 26.8368 5.00049C27.0868 5.00049 27.3231 5.09799 27.4993 5.27549C27.6768 5.45174 27.7743 5.68799 27.7743 5.93799C27.7743 6.18799 27.6768 6.42424 27.4993 6.60049L14.0993 20.0005L27.4993 33.4005C27.6768 33.578 27.7743 33.813 27.7743 34.063C27.7743 34.313 27.6768 34.5492 27.4993 34.7255C27.3218 34.9017 27.0868 35.0005 26.8368 35.0005Z" fill="#3B414D" class="primary"></path></svg></span><span data-v-1e5e9ddd="" class="unnnic-button__label">  </span>
+        <!---->
+      </button><button data-v-1e5e9ddd="" data-v-83fb4bdc="" class="unnnic-button unnnic-button--size-small unnnic-button--secondary">
+        <!---->
+        <!---->
+        <!----><span data-v-1e5e9ddd="" class="unnnic-button__label"> 1 </span>
+        <!---->
+      </button><button data-v-1e5e9ddd="" data-v-83fb4bdc="" disabled="disabled" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary unnnic-button--icon-on-center">
+        <!---->
+        <!----><span data-v-59b073b4="" data-v-1e5e9ddd="" class="unnnic-icon unnnic-icon__size--sm unnnic-icon-scheme--neutral-clean"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.1635 35.0005C12.9135 35.0005 12.6772 34.903 12.501 34.7255C12.136 34.3605 12.136 33.7655 12.501 33.3992L25.901 20.0005L12.501 6.60049C12.3235 6.42424 12.226 6.18799 12.226 5.93799C12.226 5.68799 12.3235 5.45174 12.501 5.27549C12.6772 5.09799 12.9135 5.00049 13.1635 5.00049C13.4135 5.00049 13.6497 5.09799 13.826 5.27549L27.226 18.6755C27.956 19.4055 27.9572 20.5942 27.2272 21.3242L13.826 34.7255C13.6497 34.903 13.4135 35.0005 13.1635 35.0005Z" fill="#3B414D" class="primary"></path></svg></span><span data-v-1e5e9ddd="" class="unnnic-button__label">  </span>
+        <!---->
+      </button></div>
+  </div>
+  <!---->
+</div>
+`;
diff --git a/tests/unit/specs/store/appType/whatsapp_cloud/actions.spec.js b/tests/unit/specs/store/appType/whatsapp_cloud/actions.spec.js
index fde772da..25c4de78 100644
--- a/tests/unit/specs/store/appType/whatsapp_cloud/actions.spec.js
+++ b/tests/unit/specs/store/appType/whatsapp_cloud/actions.spec.js
@@ -3,6 +3,7 @@ jest.mock('@/api/appType/whatsapp_cloud', () => {
     getDebugToken: jest.fn(),
     getWhatsAppPhoneNumbers: jest.fn(),
     configurePhoneNumber: jest.fn(),
+    getWhatsAppCloudCatalogs: jest.fn(),
   };
 });
 import WhatsAppCloudApi from '@/api/appType/whatsapp_cloud';
@@ -181,4 +182,49 @@ describe('store/appType/whatsapp_cloud/actions.js', () => {
       expect(store.state.WhatsAppCloud.selectedPhoneNumber).toEqual(1);
     });
   });
+
+  describe('getWhatsAppCloudCatalogs()', () => {
+    const appUuid = '456';
+
+    const mockedResult = { status: 'ok' };
+
+    beforeEach(() => {
+      jest.resetAllMocks();
+
+      WhatsAppCloudApi.getWhatsAppCloudCatalogs.mockImplementation(() => {
+        return Promise.resolve({ data: mockedResult });
+      });
+    });
+
+    it('should call getWhatsAppCloudCatalogs from API', async () => {
+      expect(WhatsAppCloudApi.getWhatsAppCloudCatalogs).not.toHaveBeenCalled();
+      await store.dispatch('WhatsAppCloud/getWhatsAppCloudCatalogs', appUuid);
+      expect(WhatsAppCloudApi.getWhatsAppCloudCatalogs).toHaveBeenCalledTimes(1);
+    });
+
+    it('should set whatsAppCloudCatalogs as result data', async () => {
+      store.state.WhatsAppCloud.whatsAppCloudCatalogs = {};
+      expect(store.state.WhatsAppCloud.whatsAppCloudCatalogs).not.toEqual(mockedResult);
+      await store.dispatch('WhatsAppCloud/getWhatsAppCloudCatalogs', appUuid);
+      expect(store.state.WhatsAppCloud.whatsAppCloudCatalogs).toEqual(mockedResult);
+    });
+
+    it('should set loadingWhatsAppCloudCatalogs to false', async () => {
+      store.state.WhatsAppCloud.loadingWhatsAppCloudCatalogs = true;
+      expect(store.state.WhatsAppCloud.loadingWhatsAppCloudCatalogs).toBe(true);
+      await store.dispatch('WhatsAppCloud/getWhatsAppCloudCatalogs', appUuid);
+      expect(store.state.WhatsAppCloud.loadingWhatsAppCloudCatalogs).toBe(false);
+    });
+
+    it('should set errorWhatsAppCloudCatalogs as result data', async () => {
+      const error = { error: 'failed' };
+      WhatsAppCloudApi.getWhatsAppCloudCatalogs.mockImplementation(() => {
+        return Promise.reject(error);
+      });
+      store.state.WhatsAppCloud.errorWhatsAppCloudCatalogs = {};
+      expect(store.state.WhatsAppCloud.errorWhatsAppCloudCatalogs).not.toEqual(error);
+      await store.dispatch('WhatsAppCloud/getWhatsAppCloudCatalogs', appUuid);
+      expect(store.state.WhatsAppCloud.errorWhatsAppCloudCatalogs).toEqual(error);
+    });
+  });
 });
diff --git a/tests/unit/specs/views/whatsAppCatalogs/Base.spec.js b/tests/unit/specs/views/whatsAppCatalogs/Base.spec.js
new file mode 100644
index 00000000..2708f7d4
--- /dev/null
+++ b/tests/unit/specs/views/whatsAppCatalogs/Base.spec.js
@@ -0,0 +1,77 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Base from '@/views/whatsAppCatalogs/Base.vue';
+
+const localVue = createLocalVue();
+
+describe('views/whatsAppCatalogs/Base.vue', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = shallowMount(Base, {
+      localVue,
+      stubs: {
+        UnnnicBreadcrumb: true,
+        routerView: true,
+      },
+      mocks: {
+        $t: () => 'some specific text',
+        $router: {
+          push: jest.fn(),
+          go: jest.fn(),
+        },
+        $route: {
+          name: 'Base route',
+          meta: {
+            crumb_title: 'title',
+          },
+          matched: [
+            {
+              name: 'another name',
+              path: '/another-path',
+              meta: {
+                crumb_title: 'another title',
+              },
+            },
+            {
+              name: 'another name 1',
+              path: '/another-path1',
+              meta: {
+                crumb_title: 'another title1',
+              },
+            },
+          ],
+        },
+      },
+    });
+  });
+
+  it('should be rendered properly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  describe('handleCrumbClick()', () => {
+    it('should not call neither router.go nor router.push if path is the same as the current route', () => {
+      const spyPush = spyOn(wrapper.vm.$router, 'push');
+      const spyGo = spyOn(wrapper.vm.$router, 'go');
+      expect(spyPush).not.toHaveBeenCalled();
+      expect(spyGo).not.toHaveBeenCalled();
+      wrapper.vm.handleCrumbClick({ path: '/catalogs', meta: 'Base route' });
+      expect(spyPush).not.toHaveBeenCalled();
+      expect(spyGo).not.toHaveBeenCalled();
+    });
+
+    it('should call router.go(-1) path is for WhatsApp Catalogs List', () => {
+      const spy = spyOn(wrapper.vm.$router, 'go');
+      expect(spy).not.toHaveBeenCalled();
+      wrapper.vm.handleCrumbClick({ path: '/list', meta: 'WhatsApp Catalogs List' });
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(spy).toHaveBeenCalledWith(-1);
+    });
+
+    it('should call router.push if path not equal as the current and different from WhatsApp Catalogs List', () => {
+      const spy = spyOn(wrapper.vm.$router, 'push');
+      expect(spy).not.toHaveBeenCalled();
+      wrapper.vm.handleCrumbClick({ meta: 'Different', path: '/different' });
+      expect(spy).toHaveBeenCalledWith('/different');
+    });
+  });
+});
diff --git a/tests/unit/specs/views/whatsAppCatalogs/List.spec.js b/tests/unit/specs/views/whatsAppCatalogs/List.spec.js
new file mode 100644
index 00000000..d917e7b4
--- /dev/null
+++ b/tests/unit/specs/views/whatsAppCatalogs/List.spec.js
@@ -0,0 +1,29 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import List from '@/views/whatsAppCatalogs/List.vue';
+
+const localVue = createLocalVue();
+
+describe('views/whatsAppCatalogs/List.vue', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = shallowMount(List, {
+      localVue,
+      stubs: {
+        List: true,
+        Card: true,
+      },
+      mocks: {
+        $route: {
+          name: 'WhatsApp Catalogs List',
+          meta: {
+            crumb_title: 'title',
+          },
+        },
+      },
+    });
+  });
+
+  it('should be rendered properly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/tests/unit/specs/views/whatsAppCatalogs/__snapshots__/Base.spec.js.snap b/tests/unit/specs/views/whatsAppCatalogs/__snapshots__/Base.spec.js.snap
new file mode 100644
index 00000000..bbd3a7c6
--- /dev/null
+++ b/tests/unit/specs/views/whatsAppCatalogs/__snapshots__/Base.spec.js.snap
@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`views/whatsAppCatalogs/Base.vue should be rendered properly 1`] = `
+<div class="whatsapp-catalogs-base">
+  <unnnicbreadcrumb-stub crumbs="[object Object],[object Object]"></unnnicbreadcrumb-stub>
+  <routerview-stub></routerview-stub>
+</div>
+`;
diff --git a/tests/unit/specs/views/whatsAppCatalogs/__snapshots__/List.spec.js.snap b/tests/unit/specs/views/whatsAppCatalogs/__snapshots__/List.spec.js.snap
new file mode 100644
index 00000000..d728d49e
--- /dev/null
+++ b/tests/unit/specs/views/whatsAppCatalogs/__snapshots__/List.spec.js.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`views/whatsAppCatalogs/List.vue should be rendered properly 1`] = `
+<div class="whatsapp-catalogs">
+  <div>
+    <list-stub></list-stub>
+  </div>
+</div>
+`;

From 64f5764065b0775858ae80c810c998a3059ef67a Mon Sep 17 00:00:00 2001
From: Sthefani <silveira.sthefani1@gmail.com>
Date: Thu, 19 Oct 2023 01:46:45 -0300
Subject: [PATCH 2/2] fix click on switch component

---
 package.json                                  |   2 +-
 .../whatsapp/components/tabs/AccountTab.vue   |   8 +-
 src/components/whatsAppCatalogs/Card.vue      |   4 +-
 src/components/whatsAppCatalogs/List.vue      |  25 +-
 .../channels/whatsapp_cloud/actions.js        |   7 +-
 .../__snapshots__/AccountTab.spec.js.snap     |   8 +-
 .../components/whatsAppCatalogs/List.spec.js  | 404 ------------------
 .../__snapshots__/List.spec.js.snap           |  42 --
 .../__snapshots__/Table.spec.js.snap          | 238 +++++------
 .../appType/whatsapp_cloud/actions.spec.js    |  21 +-
 yarn.lock                                     |   8 +-
 11 files changed, 168 insertions(+), 599 deletions(-)
 delete mode 100644 tests/unit/specs/components/whatsAppCatalogs/List.spec.js
 delete mode 100644 tests/unit/specs/components/whatsAppCatalogs/__snapshots__/List.spec.js.snap

diff --git a/package.json b/package.json
index ab3ca800..c019bb59 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
   "dependencies": {
     "@sentry/integrations": "^6.13.2",
     "@sentry/vue": "^6.13.2",
-    "@weni/unnnic-system": "^1.16.61",
+    "@weni/unnnic-system": "^1.16.64",
     "axios": "0.21.1",
     "core-js": "^3.6.5",
     "global": "^4.4.0",
diff --git a/src/components/config/channels/whatsapp/components/tabs/AccountTab.vue b/src/components/config/channels/whatsapp/components/tabs/AccountTab.vue
index 4ee81fa1..79f286bf 100644
--- a/src/components/config/channels/whatsapp/components/tabs/AccountTab.vue
+++ b/src/components/config/channels/whatsapp/components/tabs/AccountTab.vue
@@ -8,7 +8,7 @@
               {{ $t('WhatsApp.config.templates.title') }}
             </div>
 
-            <unnnic-button-next
+            <unnnic-button
               class="account-tab__content__info__templates__buttons__button"
               @click="navigateToTemplates"
               type="secondary"
@@ -16,21 +16,21 @@
               scheme="feedback-green"
             >
               {{ $t('WhatsApp.config.templates.button') }}
-            </unnnic-button-next>
+            </unnnic-button>
           </div>
           <div class="account-tab__content__info__templates__buttons">
             <div class="account-tab__content__info__templates__buttons__title">
               {{ $t('WhatsApp.config.catalog.title') }}
             </div>
 
-            <unnnic-button-next
+            <unnnic-button
               class="account-tab__content__info__templates__buttons__button"
               @click="navigateToCatalogs"
               type="primary"
               size="small"
             >
               {{ $t('WhatsApp.config.catalog.button') }}
-            </unnnic-button-next>
+            </unnnic-button>
           </div>
         </div>
 
diff --git a/src/components/whatsAppCatalogs/Card.vue b/src/components/whatsAppCatalogs/Card.vue
index 3ca8cd2d..d561fe7f 100644
--- a/src/components/whatsAppCatalogs/Card.vue
+++ b/src/components/whatsAppCatalogs/Card.vue
@@ -20,17 +20,19 @@
       <div class="whatsapp-catalog-card__wrapper__actions">
         <unnnic-switch
           :value="catalog.is_connected"
+          use-v-model
           size="small"
           :textRight="
             catalog.is_connected
               ? $t('WhatsApp.catalog.list.actions.enabled_catalog')
               : $t('WhatsApp.catalog.list.actions.disabled_catalog')
           "
-          @click.native="toggleCatalogConnect(!catalog.is_connected)"
+          @input="toggleCatalogConnect($event)"
         />
         <unnnic-switch
           v-if="catalog.is_connected"
           :value="enabledCart"
+          use-v-model
           size="small"
           :textRight="
             enabledCart
diff --git a/src/components/whatsAppCatalogs/List.vue b/src/components/whatsAppCatalogs/List.vue
index 94d1c0f9..2827ad85 100644
--- a/src/components/whatsAppCatalogs/List.vue
+++ b/src/components/whatsAppCatalogs/List.vue
@@ -25,7 +25,7 @@
       v-if="whatsAppCloudCatalogs || (!loadingWhatsAppCloudCatalogs && !errorWhatsAppCloudCatalogs)"
     >
       <Card
-        v-for="(catalog, index) in whatsAppCloudCatalogs"
+        v-for="(catalog, index) in listItems"
         :key="index"
         :catalog="catalog"
         :enabledCart="commerceSettings.is_cart_enabled"
@@ -82,9 +82,6 @@
         pageSize: 15,
       };
     },
-    created() {
-      this.fetchData({ page: this.page });
-    },
     computed: {
       ...mapState('WhatsAppCloud', [
         'loadingWhatsAppCloudCatalogs',
@@ -95,6 +92,9 @@
         'commerceSettings',
         'errorToggleCartVisibility',
       ]),
+      listItems() {
+        return this.whatsAppCloudCatalogs?.results || [];
+      },
       totalCount() {
         return this.whatsAppCloudCatalogs?.count || this.pageSize;
       },
@@ -147,7 +147,7 @@
           });
         }
 
-        this.connectedCatalog = this.whatsAppCloudCatalogs.find(
+        this.connectedCatalog = this.whatsAppCloudCatalogs.results.find(
           (catalog) => catalog.is_connected === true,
         );
       }, 750),
@@ -175,7 +175,7 @@
         } else {
           this.openModal = false;
         }
-        this.fetchData();
+        this.fetchData(this.page);
       },
       async handleEnableCatalog(catalog) {
         if (this.connectedCatalog) {
@@ -211,7 +211,7 @@
           });
         }
 
-        this.fetchData();
+        this.fetchData(this.page);
       },
       async handleCatalogConfirmation() {
         await this.disableCatalog();
@@ -248,12 +248,15 @@
           });
         }
 
-        this.fetchData();
+        this.fetchData(this.page);
       },
     },
     watch: {
-      page(page) {
-        this.fetchData({ page });
+      page: {
+        immediate: true,
+        handler(page) {
+          this.fetchData(page);
+        },
       },
       whatsAppCloudCatalogs: {
         handler() {
@@ -264,7 +267,7 @@
       filterState: {
         handler() {
           if (this.page === 1) {
-            this.fetchData({ page: this.page });
+            this.fetchData(this.page);
           } else {
             this.page = 1;
           }
diff --git a/src/store/appType/channels/whatsapp_cloud/actions.js b/src/store/appType/channels/whatsapp_cloud/actions.js
index 7fc65172..ec14cd90 100644
--- a/src/store/appType/channels/whatsapp_cloud/actions.js
+++ b/src/store/appType/channels/whatsapp_cloud/actions.js
@@ -35,12 +35,11 @@ export default {
   setSelectedPhoneNumber({ commit }, { data }) {
     commit('SET_SELECTED_PHONE_NUMBER', data);
   },
-  async getWhatsAppCloudCatalogs({ commit }, { appUuid }) {
+  async getWhatsAppCloudCatalogs({ commit }, { appUuid, params }) {
     commit('GET_WHATSAPP_CATALOGS_REQUEST');
     try {
-      const { data } = await whatsAppCloud.getWhatsAppCloudCatalogs(appUuid);
-      const catalogs = data.results;
-      commit('GET_WHATSAPP_CATALOGS_SUCCESS', catalogs, data);
+      const { data } = await whatsAppCloud.getWhatsAppCloudCatalogs(appUuid, params);
+      commit('GET_WHATSAPP_CATALOGS_SUCCESS', data);
     } catch (err) {
       captureSentryException(err);
       commit('GET_WHATSAPP_CATALOGS_ERROR', err);
diff --git a/tests/unit/specs/components/config/channels/whatsapp/components/tabs/__snapshots__/AccountTab.spec.js.snap b/tests/unit/specs/components/config/channels/whatsapp/components/tabs/__snapshots__/AccountTab.spec.js.snap
index b3aef9a3..102ac6c6 100644
--- a/tests/unit/specs/components/config/channels/whatsapp/components/tabs/__snapshots__/AccountTab.spec.js.snap
+++ b/tests/unit/specs/components/config/channels/whatsapp/components/tabs/__snapshots__/AccountTab.spec.js.snap
@@ -9,17 +9,17 @@ 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="secondary" 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">
             Catalog
           </div>
-          <unnnic-button-next type="primary" size="small" class="account-tab__content__info__templates__buttons__button">
+          <unnnicbutton-stub type="primary" size="small" class="account-tab__content__info__templates__buttons__button">
             View list of catalogs
-          </unnnic-button-next>
+          </unnnicbutton-stub>
         </div>
       </div>
       <div class="account-tab__content__info__qr">
diff --git a/tests/unit/specs/components/whatsAppCatalogs/List.spec.js b/tests/unit/specs/components/whatsAppCatalogs/List.spec.js
deleted file mode 100644
index a081f09f..00000000
--- a/tests/unit/specs/components/whatsAppCatalogs/List.spec.js
+++ /dev/null
@@ -1,404 +0,0 @@
-jest.mock('lodash.debounce', () => jest.fn((fn) => fn));
-import { unnnicCallAlert as mockUnnnicCallAlert } from '@weni/unnnic-system';
-
-jest.mock('@weni/unnnic-system', () => ({
-  ...jest.requireActual('@weni/unnnic-system'),
-  unnnicCallAlert: jest.fn(),
-}));
-
-import Vuex from 'vuex';
-import { mount, createLocalVue } from '@vue/test-utils';
-import List from '@/components/whatsAppCatalogs/List.vue';
-import { unnnicModalNext } from '@weni/unnnic-system';
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-describe('components/whatsAppCatalogs/List.vue', () => {
-  let wrapper;
-  let store;
-  let actions;
-  let state;
-
-  beforeEach(() => {
-    actions = {
-      getWhatsAppCatalogs: jest.fn(),
-    };
-
-    state = {
-      whatsAppCatalogs: {
-        count: 1,
-        results: [
-          {
-            uuid: '123',
-            name: 'template name',
-            facebook_catalog_id: '456',
-            category: 'COMMERCE',
-            is_connected: 'false',
-          },
-        ],
-      },
-      loadingWhatsAppCloudCatalogs: false,
-      errorWhatsAppCloudCatalogs: null,
-    };
-
-    store = new Vuex.Store({
-      modules: {
-        whatsAppCloud: {
-          namespaced: true,
-          actions,
-          state,
-        },
-      },
-    });
-
-    wrapper = mount(List, {
-      localVue,
-      store,
-      stubs: {
-        unnnicModalNext: unnnicModalNext,
-      },
-      mocks: {
-        $t: () => 'some specific text',
-        $route: {
-          params: {
-            appCode: 'wpp-cloud',
-            appUuid: '123',
-          },
-        },
-        $i18n: {
-          locale: 'pt-br',
-        },
-      },
-    });
-  });
-
-  it('should be rendered properly', () => {
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  describe('fetchData()', () => {
-    it('should call unnnicCallAlert on getWhatsAppCloudCatalogs error', async () => {
-      store.state.WhatsApp.errorWhatsAppCloudCatalogs = true;
-      expect(mockUnnnicCallAlert).not.toHaveBeenCalled();
-      await wrapper.vm.fetchData();
-      expect(mockUnnnicCallAlert).toHaveBeenCalledTimes(1);
-    });
-
-    describe('filters', () => {
-      it('should add category filter if selectedCategory is not ANY', async () => {
-        await wrapper.setData({ selectedCategory: 'MARKETING' });
-        await wrapper.vm.fetchData({ page: 1 });
-        expect(actions.getWhatsAppTemplates).toHaveBeenCalledWith(expect.any(Object), {
-          appUuid: '123',
-          params: {
-            page: wrapper.vm.page,
-            page_size: wrapper.vm.pageSize,
-            category: 'MARKETING',
-          },
-        });
-      });
-
-      it('should add start filter if startDate is not null', async () => {
-        await wrapper.setData({ startDate: '2020-01-13' });
-        await wrapper.vm.fetchData({ page: 1 });
-        expect(actions.getWhatsAppTemplates).toHaveBeenCalledWith(expect.any(Object), {
-          appUuid: '123',
-          params: {
-            page: wrapper.vm.page,
-            page_size: wrapper.vm.pageSize,
-            start: '2020-01-13',
-          },
-        });
-      });
-
-      it('should add end filter if endDate is not null', async () => {
-        await wrapper.setData({ endDate: '2020-01-13' });
-        await wrapper.vm.fetchData({ page: 1 });
-        expect(actions.getWhatsAppTemplates).toHaveBeenCalledWith(expect.any(Object), {
-          appUuid: '123',
-          params: {
-            page: wrapper.vm.page,
-            page_size: wrapper.vm.pageSize,
-            end: '2020-01-13',
-          },
-        });
-      });
-
-      it('should andd name if searchTerm is not null or empty', async () => {
-        await wrapper.setData({ searchTerm: 'some search term' });
-        await wrapper.vm.fetchData({ page: 1 });
-        expect(actions.getWhatsAppTemplates).toHaveBeenCalledWith(expect.any(Object), {
-          appUuid: '123',
-          params: {
-            page: wrapper.vm.page,
-            page_size: wrapper.vm.pageSize,
-            name: 'some search term',
-          },
-        });
-      });
-
-      it('should add name sort in ASC state', async () => {
-        await wrapper.setData({ nameSortDirection: 'ASC' });
-        await wrapper.vm.fetchData({ page: 1 });
-        expect(actions.getWhatsAppTemplates).toHaveBeenCalledWith(expect.any(Object), {
-          appUuid: '123',
-          params: {
-            page: wrapper.vm.page,
-            page_size: wrapper.vm.pageSize,
-            sort: 'name',
-          },
-        });
-      });
-
-      it('should add name sort in DESC state', async () => {
-        await wrapper.setData({ nameSortDirection: 'DESC' });
-        await wrapper.vm.fetchData({ page: 1 });
-        expect(actions.getWhatsAppTemplates).toHaveBeenCalledWith(expect.any(Object), {
-          appUuid: '123',
-          params: {
-            page: wrapper.vm.page,
-            page_size: wrapper.vm.pageSize,
-            sort: '-name',
-          },
-        });
-      });
-
-      it('should add date sort in ASC state', async () => {
-        await wrapper.setData({ dateSortDirection: 'ASC' });
-        await wrapper.vm.fetchData({ page: 1 });
-        expect(actions.getWhatsAppTemplates).toHaveBeenCalledWith(expect.any(Object), {
-          appUuid: '123',
-          params: {
-            page: wrapper.vm.page,
-            page_size: wrapper.vm.pageSize,
-            sort: 'created_on',
-          },
-        });
-      });
-
-      it('should add date sort in DESC state', async () => {
-        await wrapper.setData({ dateSortDirection: 'DESC' });
-        await wrapper.vm.fetchData({ page: 1 });
-        expect(actions.getWhatsAppTemplates).toHaveBeenCalledWith(expect.any(Object), {
-          appUuid: '123',
-          params: {
-            page: wrapper.vm.page,
-            page_size: wrapper.vm.pageSize,
-            sort: '-created_on',
-          },
-        });
-      });
-    });
-  });
-
-  describe('getTranslationsLanguage()', () => {
-    it('should return an array of template translations language', () => {
-      const translations = wrapper.vm.getTranslationsLanguages(
-        wrapper.vm.whatsAppTemplates.results[0].translations,
-      );
-      expect(translations).toEqual(['en', 'es']);
-    });
-  });
-
-  describe('formatDate()', () => {
-    it('should return formatted date', () => {
-      const date = wrapper.vm.formatDate('2022-01-13T00:00:00');
-      expect(date).toBe('jan/2022');
-    });
-  });
-
-  describe('dropdownPosition()', () => {
-    it('should return top-left if item index is greater than 7', () => {
-      store.state.WhatsApp.whatsAppTemplates.results = [...Array(9)].map((_, index) => {
-        return {
-          uuid: `${index + 1}`,
-          name: 'template name',
-          created_on: '2020-01-13',
-          category: 'MARKETING',
-          template_type: 'TEXT',
-          namespace: '456',
-          translations: [
-            { language: 'en', status: 'APPROVED' },
-            { language: 'es', status: 'REJECTED' },
-          ],
-        };
-      });
-
-      const dropdownPosition = wrapper.vm.dropdownPosition({ uuid: '9' });
-      expect(dropdownPosition).toBe('top-left');
-    });
-
-    it('should return bottom-left if item index is lesser than 7', () => {
-      store.state.WhatsApp.whatsAppTemplates.results = [...Array(9)].map((_, index) => {
-        return {
-          uuid: `${index + 1}`,
-          name: 'template name',
-          created_on: '2020-01-13',
-          category: 'MARKETING',
-          template_type: 'TEXT',
-          namespace: '456',
-          translations: [
-            { language: 'en', status: 'APPROVED' },
-            { language: 'es', status: 'REJECTED' },
-          ],
-        };
-      });
-
-      const dropdownPosition = wrapper.vm.dropdownPosition({ uuid: '3' });
-      expect(dropdownPosition).toBe('bottom-left');
-    });
-
-    it('should return bottom-left as default if there ar no templates', () => {
-      store.state.WhatsApp.whatsAppTemplates = null;
-      const dropdownPosition = wrapper.vm.dropdownPosition({ uuid: '3' });
-      expect(dropdownPosition).toBe('bottom-left');
-    });
-  });
-
-  describe('watchers', () => {
-    it('should call fetchData on page change', async () => {
-      const spy = spyOn(wrapper.vm, 'fetchData');
-      expect(spy).not.toHaveBeenCalled();
-      await wrapper.setData({ page: 2 });
-      expect(spy).toHaveBeenCalledTimes(1);
-      expect(spy).toHaveBeenCalledWith({ page: 2 });
-    });
-
-    it('should set firstLoad to false on whatsAppTemplates change', async () => {
-      expect(wrapper.vm.firstLoad).toBe(true);
-      store.state.WhatsApp.whatsAppTemplates = {
-        results: [
-          {
-            uuid: '789',
-            name: 'new template name',
-            created_on: '2021-01-13',
-            category: 'OTP',
-            template_type: 'MEDIA',
-            namespace: '999',
-            translations: [
-              { language: 'en', status: 'REJECTED' },
-              { language: 'es', status: 'APPROVED' },
-            ],
-          },
-        ],
-      };
-      await wrapper.vm.$nextTick();
-      expect(wrapper.vm.firstLoad).toBe(false);
-    });
-
-    it('should call fetchData if on first page and filterState was modified', async () => {
-      const spy = spyOn(wrapper.vm, 'fetchData');
-      expect(spy).not.toHaveBeenCalled();
-      await wrapper.setData({ searchTerm: 'template' });
-      expect(spy).toHaveBeenCalledTimes(1);
-      expect(spy).toHaveBeenCalledWith({ page: 1 });
-    });
-
-    it('should chang page to first if not on first page and filterState was modified', async () => {
-      await wrapper.setData({ page: 2 });
-      await wrapper.setData({ searchTerm: 'template' });
-      expect(wrapper.vm.page).toBe(1);
-    });
-  });
-
-  describe('filters', () => {
-    it('should call fetchData on search change', async () => {
-      const spy = spyOn(wrapper.vm, 'fetchData');
-
-      const searchInput = wrapper.find('.whatsapp-templates-table__filters__search');
-
-      expect(spy).not.toHaveBeenCalled();
-      expect(wrapper.vm.searchTerm).toBe('');
-
-      searchInput.vm.$emit('input', 'template');
-
-      await wrapper.vm.$nextTick();
-      expect(wrapper.vm.searchTerm).toBe('template');
-      expect(spy).toHaveBeenCalledTimes(1);
-      expect(spy).toHaveBeenCalledWith({ page: 1 });
-    });
-
-    it('should call fetchData on category change', async () => {
-      const spy = spyOn(wrapper.vm, 'fetchData');
-
-      const categoryInput = wrapper.find('.whatsapp-templates-table__filters__category');
-
-      expect(spy).not.toHaveBeenCalled();
-      expect(wrapper.vm.selectedCategory).toBe('ANY');
-
-      categoryInput.vm.$emit('input', 'OTP');
-
-      await wrapper.vm.$nextTick();
-      expect(wrapper.vm.selectedCategory).toBe('OTP');
-      expect(spy).toHaveBeenCalledTimes(1);
-      expect(spy).toHaveBeenCalledWith({ page: 1 });
-    });
-
-    it('should call fetchData on date change', async () => {
-      const spy = spyOn(wrapper.vm, 'fetchData');
-
-      const dateInput = wrapper.find(
-        '.whatsapp-templates-table__filters__date__dropdown-date__picker',
-      );
-
-      expect(spy).not.toHaveBeenCalled();
-      expect(wrapper.vm.startDate).toBe(null);
-      expect(wrapper.vm.endDate).toBe(null);
-
-      dateInput.vm.$emit('submit', { startDate: '01-01-2023', endDate: '31-01-2023' });
-
-      await wrapper.vm.$nextTick();
-      expect(wrapper.vm.startDate).toBe('01-01-2023');
-      expect(wrapper.vm.endDate).toBe('31-01-2023');
-      expect(spy).toHaveBeenCalledTimes(1);
-      expect(spy).toHaveBeenCalledWith({ page: 1 });
-    });
-
-    it('should call fetchData on name sort change', async () => {
-      const spy = spyOn(wrapper.vm, 'fetchData');
-
-      const nameSortInput = wrapper.find('.whatsapp-templates-table__table__header__name');
-
-      expect(spy).not.toHaveBeenCalled();
-      expect(wrapper.vm.nameSortDirection).toBe('NONE');
-
-      nameSortInput.vm.$emit('sort', 'DESC');
-
-      await wrapper.vm.$nextTick();
-      expect(wrapper.vm.nameSortDirection).toBe('DESC');
-      expect(spy).toHaveBeenCalledTimes(1);
-      expect(spy).toHaveBeenCalledWith({ page: 1 });
-
-      nameSortInput.vm.$emit('sort', 'ASC');
-
-      await wrapper.vm.$nextTick();
-      expect(wrapper.vm.nameSortDirection).toBe('ASC');
-      expect(spy).toHaveBeenCalledTimes(2);
-      expect(spy).toHaveBeenCalledWith({ page: 1 });
-    });
-
-    it('should call fetchData on date sort change', async () => {
-      const spy = spyOn(wrapper.vm, 'fetchData');
-
-      const dateSortInput = wrapper.find('.whatsapp-templates-table__table__header__date');
-
-      expect(spy).not.toHaveBeenCalled();
-      expect(wrapper.vm.dateSortDirection).toBe('NONE');
-
-      dateSortInput.vm.$emit('sort', 'DESC');
-
-      await wrapper.vm.$nextTick();
-      expect(wrapper.vm.dateSortDirection).toBe('DESC');
-      expect(spy).toHaveBeenCalledTimes(1);
-      expect(spy).toHaveBeenCalledWith({ page: 1 });
-
-      dateSortInput.vm.$emit('sort', 'ASC');
-
-      await wrapper.vm.$nextTick();
-      expect(wrapper.vm.dateSortDirection).toBe('ASC');
-      expect(spy).toHaveBeenCalledTimes(2);
-      expect(spy).toHaveBeenCalledWith({ page: 1 });
-    });
-  });
-});
diff --git a/tests/unit/specs/components/whatsAppCatalogs/__snapshots__/List.spec.js.snap b/tests/unit/specs/components/whatsAppCatalogs/__snapshots__/List.spec.js.snap
deleted file mode 100644
index 1ba527c1..00000000
--- a/tests/unit/specs/components/whatsAppCatalogs/__snapshots__/List.spec.js.snap
+++ /dev/null
@@ -1,42 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`components/whatsAppCatalogs/List.vue should be rendered properly 1`] = `
-<div class="whatsapp-catalog-list">
-  <div class="whatsapp-catalog-list__header">
-    <div class="whatsapp-catalog-list__header__text">
-      <div class="whatsapp-catalog-list__header__icon"><img src="@/assets/svgs/storefront.svg"></div>
-      <div class="whatsapp-catalog-list__header__title"><span class="u font primary title-sm color-neutral-darkest">
-          some specific text
-        </span> <span class="u font secondary body-gt color-neutral-darkest">
-          some specific text
-        </span></div>
-    </div>
-    <div class="whatsapp-catalog-list__header__button"><button data-v-1e5e9ddd="" class="unnnic-button unnnic-button--size-large unnnic-button--secondary">
-        <!---->
-        <!---->
-        <!----><span data-v-1e5e9ddd="" class="unnnic-button__label">
-        some specific text
-        </span>
-        <!---->
-      </button></div>
-  </div>
-  <div class="whatsapp-catalog-list__cards"></div>
-  <div class="whatsapp-catalog-list__pagination"><span>1 - 15 de 15</span>
-    <div data-v-83fb4bdc="" class="pagination"><button data-v-1e5e9ddd="" data-v-83fb4bdc="" disabled="disabled" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary unnnic-button--icon-on-center">
-        <!---->
-        <!----><span data-v-59b073b4="" data-v-1e5e9ddd="" class="unnnic-icon unnnic-icon__size--sm unnnic-icon-scheme--neutral-clean"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M26.8368 35.0005C26.5868 35.0005 26.3506 34.903 26.1743 34.7255L12.7743 21.3255C12.4206 20.9717 12.2256 20.5017 12.2256 20.0017C12.2256 19.5017 12.4193 19.0305 12.7731 18.6767L26.1743 5.27549C26.3506 5.09799 26.5868 5.00049 26.8368 5.00049C27.0868 5.00049 27.3231 5.09799 27.4993 5.27549C27.6768 5.45174 27.7743 5.68799 27.7743 5.93799C27.7743 6.18799 27.6768 6.42424 27.4993 6.60049L14.0993 20.0005L27.4993 33.4005C27.6768 33.578 27.7743 33.813 27.7743 34.063C27.7743 34.313 27.6768 34.5492 27.4993 34.7255C27.3218 34.9017 27.0868 35.0005 26.8368 35.0005Z" fill="#3B414D" class="primary"></path></svg></span><span data-v-1e5e9ddd="" class="unnnic-button__label">  </span>
-        <!---->
-      </button><button data-v-1e5e9ddd="" data-v-83fb4bdc="" class="unnnic-button unnnic-button--size-small unnnic-button--secondary">
-        <!---->
-        <!---->
-        <!----><span data-v-1e5e9ddd="" class="unnnic-button__label"> 1 </span>
-        <!---->
-      </button><button data-v-1e5e9ddd="" data-v-83fb4bdc="" disabled="disabled" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary unnnic-button--icon-on-center">
-        <!---->
-        <!----><span data-v-59b073b4="" data-v-1e5e9ddd="" class="unnnic-icon unnnic-icon__size--sm unnnic-icon-scheme--neutral-clean"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.1635 35.0005C12.9135 35.0005 12.6772 34.903 12.501 34.7255C12.136 34.3605 12.136 33.7655 12.501 33.3992L25.901 20.0005L12.501 6.60049C12.3235 6.42424 12.226 6.18799 12.226 5.93799C12.226 5.68799 12.3235 5.45174 12.501 5.27549C12.6772 5.09799 12.9135 5.00049 13.1635 5.00049C13.4135 5.00049 13.6497 5.09799 13.826 5.27549L27.226 18.6755C27.956 19.4055 27.9572 20.5942 27.2272 21.3242L13.826 34.7255C13.6497 34.903 13.4135 35.0005 13.1635 35.0005Z" fill="#3B414D" class="primary"></path></svg></span><span data-v-1e5e9ddd="" class="unnnic-button__label">  </span>
-        <!---->
-      </button></div>
-  </div>
-  <!---->
-</div>
-`;
diff --git a/tests/unit/specs/components/whatsAppTemplates/__snapshots__/Table.spec.js.snap b/tests/unit/specs/components/whatsAppTemplates/__snapshots__/Table.spec.js.snap
index 328b6de9..3f53ae95 100644
--- a/tests/unit/specs/components/whatsAppTemplates/__snapshots__/Table.spec.js.snap
+++ b/tests/unit/specs/components/whatsAppTemplates/__snapshots__/Table.spec.js.snap
@@ -17,144 +17,144 @@ exports[`components/whatsAppTemplates/Table.vue should be rendered properly 1`]
         </div>
       </div>
       <div class="whatsapp-templates-table__filters__date__dropdown-date">
-        <div data-v-5240b24c="" class="unnnic-date-picker whatsapp-templates-table__filters__date__dropdown-date__picker" value="[object Object]" style="display: none;">
-          <div data-v-5240b24c="" class="month-container">
-            <div data-v-5240b24c="" class="header header--large"><button data-v-1e5e9ddd="" data-v-5240b24c="" class="button-space unnnic-button unnnic-button--size-small unnnic-button--secondary unnnic-button--icon-on-center" style="grid-area: left-button;">
+        <div data-v-53d06aee="" class="unnnic-date-picker whatsapp-templates-table__filters__date__dropdown-date__picker" value="[object Object]" style="display: none;">
+          <div data-v-53d06aee="" class="month-container">
+            <div data-v-53d06aee="" class="header header--large"><button data-v-1e5e9ddd="" data-v-53d06aee="" class="button-space unnnic-button unnnic-button--size-small unnnic-button--secondary unnnic-button--icon-on-center" style="grid-area: left-button;">
                 <!---->
                 <!----><span data-v-59b073b4="" data-v-1e5e9ddd="" class="unnnic-icon unnnic-icon__size--sm unnnic-icon-scheme--neutral-dark"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M26.8368 35.0005C26.5868 35.0005 26.3506 34.903 26.1743 34.7255L12.7743 21.3255C12.4206 20.9717 12.2256 20.5017 12.2256 20.0017C12.2256 19.5017 12.4193 19.0305 12.7731 18.6767L26.1743 5.27549C26.3506 5.09799 26.5868 5.00049 26.8368 5.00049C27.0868 5.00049 27.3231 5.09799 27.4993 5.27549C27.6768 5.45174 27.7743 5.68799 27.7743 5.93799C27.7743 6.18799 27.6768 6.42424 27.4993 6.60049L14.0993 20.0005L27.4993 33.4005C27.6768 33.578 27.7743 33.813 27.7743 34.063C27.7743 34.313 27.6768 34.5492 27.4993 34.7255C27.3218 34.9017 27.0868 35.0005 26.8368 35.0005Z" fill="#3B414D" class="primary"></path></svg></span><span data-v-1e5e9ddd="" class="unnnic-button__label">  </span>
                 <!---->
               </button>
-              <div data-v-5240b24c="" class="label label--large"> some specific text 2018 </div>
+              <div data-v-53d06aee="" class="label label--large"> some specific text 2018 </div>
             </div>
-            <div data-v-5240b24c="" class="days days--large">
-              <div data-v-5240b24c="" class="name">D</div>
-              <div data-v-5240b24c="" class="name">S</div>
-              <div data-v-5240b24c="" class="name">T</div>
-              <div data-v-5240b24c="" class="name">Q</div>
-              <div data-v-5240b24c="" class="name">Q</div>
-              <div data-v-5240b24c="" class="name">S</div>
-              <div data-v-5240b24c="" class="name">S</div>
-              <div data-v-5240b24c="" class="disabled"> 29 </div>
-              <div data-v-5240b24c="" class="disabled"> 30 </div>
-              <div data-v-5240b24c="" class="disabled"> 31 </div>
-              <div data-v-5240b24c="" class="selectable"> 1 </div>
-              <div data-v-5240b24c="" class="selectable"> 2 </div>
-              <div data-v-5240b24c="" class="selectable"> 3 </div>
-              <div data-v-5240b24c="" class="selectable"> 4 </div>
-              <div data-v-5240b24c="" class="selectable"> 5 </div>
-              <div data-v-5240b24c="" class="selectable"> 6 </div>
-              <div data-v-5240b24c="" class="selectable"> 7 </div>
-              <div data-v-5240b24c="" class="selectable"> 8 </div>
-              <div data-v-5240b24c="" class="selectable"> 9 </div>
-              <div data-v-5240b24c="" class="selectable"> 10 </div>
-              <div data-v-5240b24c="" class="selectable"> 11 </div>
-              <div data-v-5240b24c="" class="selectable"> 12 </div>
-              <div data-v-5240b24c="" class="selectable"> 13 </div>
-              <div data-v-5240b24c="" class="selectable"> 14 </div>
-              <div data-v-5240b24c="" class="selectable today"> 15 </div>
-              <div data-v-5240b24c="" class="selectable"> 16 </div>
-              <div data-v-5240b24c="" class="selectable"> 17 </div>
-              <div data-v-5240b24c="" class="selectable"> 18 </div>
-              <div data-v-5240b24c="" class="selectable"> 19 </div>
-              <div data-v-5240b24c="" class="selectable"> 20 </div>
-              <div data-v-5240b24c="" class="selectable"> 21 </div>
-              <div data-v-5240b24c="" class="selectable"> 22 </div>
-              <div data-v-5240b24c="" class="selectable"> 23 </div>
-              <div data-v-5240b24c="" class="selectable"> 24 </div>
-              <div data-v-5240b24c="" class="selectable"> 25 </div>
-              <div data-v-5240b24c="" class="selectable"> 26 </div>
-              <div data-v-5240b24c="" class="selectable"> 27 </div>
-              <div data-v-5240b24c="" class="selectable"> 28 </div>
-              <div data-v-5240b24c="" class="selectable"> 29 </div>
-              <div data-v-5240b24c="" class="selectable"> 30 </div>
-              <div data-v-5240b24c="" class="selectable"> 31 </div>
-              <div data-v-5240b24c="" class="disabled"> 1 </div>
-              <div data-v-5240b24c="" class="disabled"> 2 </div>
-              <div data-v-5240b24c="" class="disabled"> 3 </div>
-              <div data-v-5240b24c="" class="disabled"> 4 </div>
-              <div data-v-5240b24c="" class="disabled"> 5 </div>
-              <div data-v-5240b24c="" class="disabled"> 6 </div>
-              <div data-v-5240b24c="" class="disabled"> 7 </div>
-              <div data-v-5240b24c="" class="disabled"> 8 </div>
+            <div data-v-53d06aee="" class="days days--large">
+              <div data-v-53d06aee="" class="name">D</div>
+              <div data-v-53d06aee="" class="name">S</div>
+              <div data-v-53d06aee="" class="name">T</div>
+              <div data-v-53d06aee="" class="name">Q</div>
+              <div data-v-53d06aee="" class="name">Q</div>
+              <div data-v-53d06aee="" class="name">S</div>
+              <div data-v-53d06aee="" class="name">S</div>
+              <div data-v-53d06aee="" class="disabled"> 29 </div>
+              <div data-v-53d06aee="" class="disabled"> 30 </div>
+              <div data-v-53d06aee="" class="disabled"> 31 </div>
+              <div data-v-53d06aee="" class="selectable"> 1 </div>
+              <div data-v-53d06aee="" class="selectable"> 2 </div>
+              <div data-v-53d06aee="" class="selectable"> 3 </div>
+              <div data-v-53d06aee="" class="selectable"> 4 </div>
+              <div data-v-53d06aee="" class="selectable"> 5 </div>
+              <div data-v-53d06aee="" class="selectable"> 6 </div>
+              <div data-v-53d06aee="" class="selectable"> 7 </div>
+              <div data-v-53d06aee="" class="selectable"> 8 </div>
+              <div data-v-53d06aee="" class="selectable"> 9 </div>
+              <div data-v-53d06aee="" class="selectable"> 10 </div>
+              <div data-v-53d06aee="" class="selectable"> 11 </div>
+              <div data-v-53d06aee="" class="selectable"> 12 </div>
+              <div data-v-53d06aee="" class="selectable"> 13 </div>
+              <div data-v-53d06aee="" class="selectable"> 14 </div>
+              <div data-v-53d06aee="" class="selectable today"> 15 </div>
+              <div data-v-53d06aee="" class="selectable"> 16 </div>
+              <div data-v-53d06aee="" class="selectable"> 17 </div>
+              <div data-v-53d06aee="" class="selectable"> 18 </div>
+              <div data-v-53d06aee="" class="selectable"> 19 </div>
+              <div data-v-53d06aee="" class="selectable"> 20 </div>
+              <div data-v-53d06aee="" class="selectable"> 21 </div>
+              <div data-v-53d06aee="" class="selectable"> 22 </div>
+              <div data-v-53d06aee="" class="selectable"> 23 </div>
+              <div data-v-53d06aee="" class="selectable"> 24 </div>
+              <div data-v-53d06aee="" class="selectable"> 25 </div>
+              <div data-v-53d06aee="" class="selectable"> 26 </div>
+              <div data-v-53d06aee="" class="selectable"> 27 </div>
+              <div data-v-53d06aee="" class="selectable"> 28 </div>
+              <div data-v-53d06aee="" class="selectable"> 29 </div>
+              <div data-v-53d06aee="" class="selectable"> 30 </div>
+              <div data-v-53d06aee="" class="selectable"> 31 </div>
+              <div data-v-53d06aee="" class="disabled"> 1 </div>
+              <div data-v-53d06aee="" class="disabled"> 2 </div>
+              <div data-v-53d06aee="" class="disabled"> 3 </div>
+              <div data-v-53d06aee="" class="disabled"> 4 </div>
+              <div data-v-53d06aee="" class="disabled"> 5 </div>
+              <div data-v-53d06aee="" class="disabled"> 6 </div>
+              <div data-v-53d06aee="" class="disabled"> 7 </div>
+              <div data-v-53d06aee="" class="disabled"> 8 </div>
             </div>
           </div>
-          <div data-v-5240b24c="" class="divider"></div>
-          <div data-v-5240b24c="" class="month-container">
-            <div data-v-5240b24c="" class="header header--large"><button data-v-1e5e9ddd="" data-v-5240b24c="" class="button-space unnnic-button unnnic-button--size-small unnnic-button--secondary unnnic-button--icon-on-center" style="grid-area: right-button;">
+          <div data-v-53d06aee="" class="divider"></div>
+          <div data-v-53d06aee="" class="month-container">
+            <div data-v-53d06aee="" class="header header--large"><button data-v-1e5e9ddd="" data-v-53d06aee="" class="button-space unnnic-button unnnic-button--size-small unnnic-button--secondary unnnic-button--icon-on-center" style="grid-area: right-button;">
                 <!---->
                 <!----><span data-v-59b073b4="" data-v-1e5e9ddd="" class="unnnic-icon unnnic-icon__size--sm unnnic-icon-scheme--neutral-dark"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.1635 35.0005C12.9135 35.0005 12.6772 34.903 12.501 34.7255C12.136 34.3605 12.136 33.7655 12.501 33.3992L25.901 20.0005L12.501 6.60049C12.3235 6.42424 12.226 6.18799 12.226 5.93799C12.226 5.68799 12.3235 5.45174 12.501 5.27549C12.6772 5.09799 12.9135 5.00049 13.1635 5.00049C13.4135 5.00049 13.6497 5.09799 13.826 5.27549L27.226 18.6755C27.956 19.4055 27.9572 20.5942 27.2272 21.3242L13.826 34.7255C13.6497 34.903 13.4135 35.0005 13.1635 35.0005Z" fill="#3B414D" class="primary"></path></svg></span><span data-v-1e5e9ddd="" class="unnnic-button__label">  </span>
                 <!---->
               </button>
-              <div data-v-5240b24c="" class="label label--large"> some specific text 2018 </div>
+              <div data-v-53d06aee="" class="label label--large"> some specific text 2018 </div>
             </div>
-            <div data-v-5240b24c="" class="days days--large">
-              <div data-v-5240b24c="" class="name">D</div>
-              <div data-v-5240b24c="" class="name">S</div>
-              <div data-v-5240b24c="" class="name">T</div>
-              <div data-v-5240b24c="" class="name">Q</div>
-              <div data-v-5240b24c="" class="name">Q</div>
-              <div data-v-5240b24c="" class="name">S</div>
-              <div data-v-5240b24c="" class="name">S</div>
-              <div data-v-5240b24c="" class="disabled"> 26 </div>
-              <div data-v-5240b24c="" class="disabled"> 27 </div>
-              <div data-v-5240b24c="" class="disabled"> 28 </div>
-              <div data-v-5240b24c="" class="disabled"> 29 </div>
-              <div data-v-5240b24c="" class="disabled"> 30 </div>
-              <div data-v-5240b24c="" class="disabled"> 31 </div>
-              <div data-v-5240b24c="" class="selectable"> 1 </div>
-              <div data-v-5240b24c="" class="selectable"> 2 </div>
-              <div data-v-5240b24c="" class="selectable"> 3 </div>
-              <div data-v-5240b24c="" class="selectable"> 4 </div>
-              <div data-v-5240b24c="" class="selectable"> 5 </div>
-              <div data-v-5240b24c="" class="selectable"> 6 </div>
-              <div data-v-5240b24c="" class="selectable"> 7 </div>
-              <div data-v-5240b24c="" class="selectable"> 8 </div>
-              <div data-v-5240b24c="" class="selectable"> 9 </div>
-              <div data-v-5240b24c="" class="selectable"> 10 </div>
-              <div data-v-5240b24c="" class="selectable"> 11 </div>
-              <div data-v-5240b24c="" class="selectable"> 12 </div>
-              <div data-v-5240b24c="" class="selectable"> 13 </div>
-              <div data-v-5240b24c="" class="selectable"> 14 </div>
-              <div data-v-5240b24c="" class="selectable"> 15 </div>
-              <div data-v-5240b24c="" class="selectable"> 16 </div>
-              <div data-v-5240b24c="" class="selectable"> 17 </div>
-              <div data-v-5240b24c="" class="selectable"> 18 </div>
-              <div data-v-5240b24c="" class="selectable"> 19 </div>
-              <div data-v-5240b24c="" class="selectable"> 20 </div>
-              <div data-v-5240b24c="" class="selectable"> 21 </div>
-              <div data-v-5240b24c="" class="selectable"> 22 </div>
-              <div data-v-5240b24c="" class="selectable"> 23 </div>
-              <div data-v-5240b24c="" class="selectable"> 24 </div>
-              <div data-v-5240b24c="" class="selectable"> 25 </div>
-              <div data-v-5240b24c="" class="selectable"> 26 </div>
-              <div data-v-5240b24c="" class="selectable"> 27 </div>
-              <div data-v-5240b24c="" class="selectable"> 28 </div>
-              <div data-v-5240b24c="" class="selectable"> 29 </div>
-              <div data-v-5240b24c="" class="selectable"> 30 </div>
-              <div data-v-5240b24c="" class="disabled"> 1 </div>
-              <div data-v-5240b24c="" class="disabled"> 2 </div>
-              <div data-v-5240b24c="" class="disabled"> 3 </div>
-              <div data-v-5240b24c="" class="disabled"> 4 </div>
-              <div data-v-5240b24c="" class="disabled"> 5 </div>
-              <div data-v-5240b24c="" class="disabled"> 6 </div>
+            <div data-v-53d06aee="" class="days days--large">
+              <div data-v-53d06aee="" class="name">D</div>
+              <div data-v-53d06aee="" class="name">S</div>
+              <div data-v-53d06aee="" class="name">T</div>
+              <div data-v-53d06aee="" class="name">Q</div>
+              <div data-v-53d06aee="" class="name">Q</div>
+              <div data-v-53d06aee="" class="name">S</div>
+              <div data-v-53d06aee="" class="name">S</div>
+              <div data-v-53d06aee="" class="disabled"> 26 </div>
+              <div data-v-53d06aee="" class="disabled"> 27 </div>
+              <div data-v-53d06aee="" class="disabled"> 28 </div>
+              <div data-v-53d06aee="" class="disabled"> 29 </div>
+              <div data-v-53d06aee="" class="disabled"> 30 </div>
+              <div data-v-53d06aee="" class="disabled"> 31 </div>
+              <div data-v-53d06aee="" class="selectable"> 1 </div>
+              <div data-v-53d06aee="" class="selectable"> 2 </div>
+              <div data-v-53d06aee="" class="selectable"> 3 </div>
+              <div data-v-53d06aee="" class="selectable"> 4 </div>
+              <div data-v-53d06aee="" class="selectable"> 5 </div>
+              <div data-v-53d06aee="" class="selectable"> 6 </div>
+              <div data-v-53d06aee="" class="selectable"> 7 </div>
+              <div data-v-53d06aee="" class="selectable"> 8 </div>
+              <div data-v-53d06aee="" class="selectable"> 9 </div>
+              <div data-v-53d06aee="" class="selectable"> 10 </div>
+              <div data-v-53d06aee="" class="selectable"> 11 </div>
+              <div data-v-53d06aee="" class="selectable"> 12 </div>
+              <div data-v-53d06aee="" class="selectable"> 13 </div>
+              <div data-v-53d06aee="" class="selectable"> 14 </div>
+              <div data-v-53d06aee="" class="selectable"> 15 </div>
+              <div data-v-53d06aee="" class="selectable"> 16 </div>
+              <div data-v-53d06aee="" class="selectable"> 17 </div>
+              <div data-v-53d06aee="" class="selectable"> 18 </div>
+              <div data-v-53d06aee="" class="selectable"> 19 </div>
+              <div data-v-53d06aee="" class="selectable"> 20 </div>
+              <div data-v-53d06aee="" class="selectable"> 21 </div>
+              <div data-v-53d06aee="" class="selectable"> 22 </div>
+              <div data-v-53d06aee="" class="selectable"> 23 </div>
+              <div data-v-53d06aee="" class="selectable"> 24 </div>
+              <div data-v-53d06aee="" class="selectable"> 25 </div>
+              <div data-v-53d06aee="" class="selectable"> 26 </div>
+              <div data-v-53d06aee="" class="selectable"> 27 </div>
+              <div data-v-53d06aee="" class="selectable"> 28 </div>
+              <div data-v-53d06aee="" class="selectable"> 29 </div>
+              <div data-v-53d06aee="" class="selectable"> 30 </div>
+              <div data-v-53d06aee="" class="disabled"> 1 </div>
+              <div data-v-53d06aee="" class="disabled"> 2 </div>
+              <div data-v-53d06aee="" class="disabled"> 3 </div>
+              <div data-v-53d06aee="" class="disabled"> 4 </div>
+              <div data-v-53d06aee="" class="disabled"> 5 </div>
+              <div data-v-53d06aee="" class="disabled"> 6 </div>
             </div>
           </div>
-          <div data-v-5240b24c="" class="divider"></div>
-          <div data-v-5240b24c="" class="options-container">
-            <div data-v-5240b24c="" class="options">
-              <div data-v-5240b24c="" class="option"> some specific text </div>
-              <div data-v-5240b24c="" class="option"> some specific text </div>
-              <div data-v-5240b24c="" class="option"> some specific text </div>
-              <div data-v-5240b24c="" class="option"> some specific text </div>
-              <div data-v-5240b24c="" class="option"> some specific text </div>
-              <div data-v-5240b24c="" class="option"> some specific text </div>
+          <div data-v-53d06aee="" class="divider"></div>
+          <div data-v-53d06aee="" class="options-container">
+            <div data-v-53d06aee="" class="options">
+              <div data-v-53d06aee="" class="option"> some specific text </div>
+              <div data-v-53d06aee="" class="option"> some specific text </div>
+              <div data-v-53d06aee="" class="option"> some specific text </div>
+              <div data-v-53d06aee="" class="option"> some specific text </div>
+              <div data-v-53d06aee="" class="option"> some specific text </div>
+              <div data-v-53d06aee="" class="option"> some specific text </div>
             </div>
-            <div data-v-5240b24c="" class="actions"><button data-v-1e5e9ddd="" data-v-5240b24c="" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary">
+            <div data-v-53d06aee="" class="actions"><button data-v-1e5e9ddd="" data-v-53d06aee="" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary">
                 <!---->
                 <!---->
                 <!----><span data-v-1e5e9ddd="" class="unnnic-button__label"> some specific text </span>
                 <!---->
-              </button><button data-v-1e5e9ddd="" data-v-5240b24c="" class="unnnic-button unnnic-button--size-small unnnic-button--secondary">
+              </button><button data-v-1e5e9ddd="" data-v-53d06aee="" class="unnnic-button unnnic-button--size-small unnnic-button--secondary">
                 <!---->
                 <!---->
                 <!----><span data-v-1e5e9ddd="" class="unnnic-button__label"> some specific text </span>
diff --git a/tests/unit/specs/store/appType/whatsapp_cloud/actions.spec.js b/tests/unit/specs/store/appType/whatsapp_cloud/actions.spec.js
index 25c4de78..6bd4edfe 100644
--- a/tests/unit/specs/store/appType/whatsapp_cloud/actions.spec.js
+++ b/tests/unit/specs/store/appType/whatsapp_cloud/actions.spec.js
@@ -184,7 +184,14 @@ describe('store/appType/whatsapp_cloud/actions.js', () => {
   });
 
   describe('getWhatsAppCloudCatalogs()', () => {
-    const appUuid = '456';
+    const data = {
+      code: 'code',
+      appUuid: '123',
+      params: {
+        page: 1,
+        limit: 12,
+      },
+    };
 
     const mockedResult = { status: 'ok' };
 
@@ -198,21 +205,25 @@ describe('store/appType/whatsapp_cloud/actions.js', () => {
 
     it('should call getWhatsAppCloudCatalogs from API', async () => {
       expect(WhatsAppCloudApi.getWhatsAppCloudCatalogs).not.toHaveBeenCalled();
-      await store.dispatch('WhatsAppCloud/getWhatsAppCloudCatalogs', appUuid);
+      await store.dispatch('WhatsAppCloud/getWhatsAppCloudCatalogs', data);
       expect(WhatsAppCloudApi.getWhatsAppCloudCatalogs).toHaveBeenCalledTimes(1);
+      expect(WhatsAppCloudApi.getWhatsAppCloudCatalogs).toHaveBeenCalledWith(
+        data.appUuid,
+        data.params,
+      );
     });
 
     it('should set whatsAppCloudCatalogs as result data', async () => {
       store.state.WhatsAppCloud.whatsAppCloudCatalogs = {};
       expect(store.state.WhatsAppCloud.whatsAppCloudCatalogs).not.toEqual(mockedResult);
-      await store.dispatch('WhatsAppCloud/getWhatsAppCloudCatalogs', appUuid);
+      await store.dispatch('WhatsAppCloud/getWhatsAppCloudCatalogs', data);
       expect(store.state.WhatsAppCloud.whatsAppCloudCatalogs).toEqual(mockedResult);
     });
 
     it('should set loadingWhatsAppCloudCatalogs to false', async () => {
       store.state.WhatsAppCloud.loadingWhatsAppCloudCatalogs = true;
       expect(store.state.WhatsAppCloud.loadingWhatsAppCloudCatalogs).toBe(true);
-      await store.dispatch('WhatsAppCloud/getWhatsAppCloudCatalogs', appUuid);
+      await store.dispatch('WhatsAppCloud/getWhatsAppCloudCatalogs', data);
       expect(store.state.WhatsAppCloud.loadingWhatsAppCloudCatalogs).toBe(false);
     });
 
@@ -223,7 +234,7 @@ describe('store/appType/whatsapp_cloud/actions.js', () => {
       });
       store.state.WhatsAppCloud.errorWhatsAppCloudCatalogs = {};
       expect(store.state.WhatsAppCloud.errorWhatsAppCloudCatalogs).not.toEqual(error);
-      await store.dispatch('WhatsAppCloud/getWhatsAppCloudCatalogs', appUuid);
+      await store.dispatch('WhatsAppCloud/getWhatsAppCloudCatalogs', data);
       expect(store.state.WhatsAppCloud.errorWhatsAppCloudCatalogs).toEqual(error);
     });
   });
diff --git a/yarn.lock b/yarn.lock
index 7fba7ae2..4d73d1bf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2709,10 +2709,10 @@
     "@webassemblyjs/wast-parser" "1.9.0"
     "@xtuc/long" "4.2.2"
 
-"@weni/unnnic-system@^1.16.61":
-  version "1.16.62"
-  resolved "https://registry.yarnpkg.com/@weni/unnnic-system/-/unnnic-system-1.16.62.tgz#b910e09c057f1ab731ab4ebf8e5f545f5335a6e3"
-  integrity sha512-m6RvFmwjhbQBDp9wuEwnsbh1xv0OvaDZVS1TKlDkhDo6HTZ5hT8x19CNAwO53TpY0QS7Oe+8xD5qmrDQtXo6Lg==
+"@weni/unnnic-system@^1.16.64":
+  version "1.16.64"
+  resolved "https://registry.yarnpkg.com/@weni/unnnic-system/-/unnnic-system-1.16.64.tgz#4320910eed675af4f850f2874932ae43d5e71eb8"
+  integrity sha512-/XwnpYMmjFHCP6tTBO4n2mwg7OGgmw++wS8lUiJ5tHgoSdp9TkADqVljn00f0Ega7fRjSB5jyWjw5A7MmBeTRA==
   dependencies:
     core-js "^3.6.5"
     lodash "^4.17.21"