From cdf4ee9c2e0099c3035bff3c34c43e9f3f5c642d Mon Sep 17 00:00:00 2001
From: Sthefani <silveira.sthefani1@gmail.com>
Date: Fri, 29 Sep 2023 09:21:35 -0300
Subject: [PATCH 1/3] feat: whatsapp products catalogs base

---
 src/api/appType/whatsapp_cloud/index.js       |   9 +
 .../config/channels/whatsapp/Setup.vue        |   3 +-
 .../whatsapp/components/tabs/AccountTab.vue   |  64 ++++---
 src/components/whatsAppCatalogs/Card.vue      | 166 ++++++++++++++++++
 src/components/whatsAppCatalogs/Table.vue     |  62 +++++++
 src/locales/pt_br.json                        |  31 ++++
 src/router.js                                 |  14 ++
 .../channels/whatsapp_cloud/actions.js        |  20 +++
 .../channels/whatsapp_cloud/mutations.js      |  24 +++
 .../appType/channels/whatsapp_cloud/state.js  |   8 +
 src/views/whatsAppCatalogs/Base.vue           |  59 +++++++
 src/views/whatsAppCatalogs/Table.vue          |  19 ++
 12 files changed, 458 insertions(+), 21 deletions(-)
 create mode 100644 src/components/whatsAppCatalogs/Card.vue
 create mode 100644 src/components/whatsAppCatalogs/Table.vue
 create mode 100644 src/views/whatsAppCatalogs/Base.vue
 create mode 100644 src/views/whatsAppCatalogs/Table.vue

diff --git a/src/api/appType/whatsapp_cloud/index.js b/src/api/appType/whatsapp_cloud/index.js
index 384d3841..407b9ae4 100644
--- a/src/api/appType/whatsapp_cloud/index.js
+++ b/src/api/appType/whatsapp_cloud/index.js
@@ -2,6 +2,8 @@ import qs from 'query-string';
 import request from '@/api/request.js';
 
 const resource = '/api/v1/apptypes/wpp-cloud/apps';
+const catalogsResource = '/api/v1/apptypes/wpp-cloud';
+
 export default {
   getDebugToken(params) {
     const queryString = qs.stringify(params);
@@ -14,4 +16,11 @@ export default {
   configurePhoneNumber(data) {
     return request.$http.post(`${resource}/`, data);
   },
+  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/components/config/channels/whatsapp/Setup.vue b/src/components/config/channels/whatsapp/Setup.vue
index 4f03de41..6c61e65d 100644
--- a/src/components/config/channels/whatsapp/Setup.vue
+++ b/src/components/config/channels/whatsapp/Setup.vue
@@ -173,7 +173,8 @@
             },
             {
               return_scopes: true,
-              scope: 'business_management,whatsapp_business_management,whatsapp_business_messaging',
+              scope:
+                'business_management,whatsapp_business_management,whatsapp_business_messaging,catalog_management',
               extras: {
                 feature: 'whatsapp_embedded_signup',
               },
diff --git a/src/components/config/channels/whatsapp/components/tabs/AccountTab.vue b/src/components/config/channels/whatsapp/components/tabs/AccountTab.vue
index 5e235e6f..4ee81fa1 100644
--- a/src/components/config/channels/whatsapp/components/tabs/AccountTab.vue
+++ b/src/components/config/channels/whatsapp/components/tabs/AccountTab.vue
@@ -3,18 +3,35 @@
     <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">
-            {{ $t('WhatsApp.config.templates.title') }}
+          <div class="account-tab__content__info__templates__buttons">
+            <div class="account-tab__content__info__templates__buttons__title">
+              {{ $t('WhatsApp.config.templates.title') }}
+            </div>
+
+            <unnnic-button-next
+              class="account-tab__content__info__templates__buttons__button"
+              @click="navigateToTemplates"
+              type="secondary"
+              size="small"
+              scheme="feedback-green"
+            >
+              {{ $t('WhatsApp.config.templates.button') }}
+            </unnnic-button-next>
           </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
-            class="account-tab__content__info__templates__button"
-            @click="navigateToTemplates"
-            type="secondary"
-            size="small"
-          >
-            {{ $t('WhatsApp.config.templates.button') }}
-          </unnnic-button>
+            <unnnic-button-next
+              class="account-tab__content__info__templates__buttons__button"
+              @click="navigateToCatalogs"
+              type="primary"
+              size="small"
+            >
+              {{ $t('WhatsApp.config.catalog.button') }}
+            </unnnic-button-next>
+          </div>
         </div>
 
         <div class="account-tab__content__info__qr">
@@ -93,6 +110,10 @@
         const { code, uuid } = this.appInfo;
         this.$router.push({ path: `/apps/my/${code}/${uuid}/templates` });
       },
+      navigateToCatalogs() {
+        const { code, uuid } = this.appInfo;
+        this.$router.push({ path: `/apps/my/${code}/${uuid}/catalogs` });
+      },
     },
     computed: {
       QRCodeUrl() {
@@ -222,20 +243,23 @@
         gap: $unnnic-spacing-stack-lg;
 
         &__templates {
-          flex: 1;
           display: flex;
-          flex-direction: column;
+          justify-content: space-between;
           gap: $unnnic-spacing-stack-sm;
 
-          &__title {
-            font-weight: $unnnic-font-weight-black;
-            font-size: $unnnic-font-size-body-lg;
-            line-height: $unnnic-font-size-body-lg + $unnnic-line-height-md;
-            color: $unnnic-color-neutral-darkest;
-          }
+          &__buttons {
+            width: 100%;
 
-          &__button {
-            max-width: 160px;
+            &__title {
+              font-weight: $unnnic-font-weight-bold;
+              font-size: $unnnic-font-size-body-lg;
+              line-height: $unnnic-font-size-body-lg + $unnnic-line-height-md;
+              color: $unnnic-color-neutral-darkest;
+              margin-bottom: $unnnic-spacing-sm;
+            }
+            &__button {
+              width: 100%;
+            }
           }
         }
 
diff --git a/src/components/whatsAppCatalogs/Card.vue b/src/components/whatsAppCatalogs/Card.vue
new file mode 100644
index 00000000..fe962f79
--- /dev/null
+++ b/src/components/whatsAppCatalogs/Card.vue
@@ -0,0 +1,166 @@
+<template>
+  <div
+    class="whatsapp-catalog-card"
+    v-if="!loadingWhatsAppCloudCatalogs && !errorWhatsAppCloudCatalogs"
+  >
+    <div v-for="(item, index) in listItems" :key="index" class="whatsapp-catalog-card__wrapper">
+      <div class="whatsapp-catalog-card__wrapper__header">
+        <div class="whatsapp-catalog-card__wrapper__header__title">
+          <span class="u font secondary body-lg color-neutral-darkest bold">
+            {{ item.name }}
+          </span>
+        </div>
+        <div class="whatsapp-catalog-card__wrapper__header__description">
+          <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">
+            {{ item.facebook_catalog_id }}
+          </span>
+        </div>
+      </div>
+
+      <div class="whatsapp-catalog-card__wrapper__actions">
+        <unnnic-switch
+          :value="item.is_connected"
+          size="small"
+          :textRight="
+            item.is_connected
+              ? $t('WhatsApp.catalog.list.actions.enabled_catalog')
+              : $t('WhatsApp.catalog.list.actions.disabled_catalog')
+          "
+          @click.native="modalDisableCatalog()"
+        />
+        <unnnic-switch
+          v-if="item.is_connected"
+          :inititalState="false"
+          size="small"
+          :textRight="
+            item.is_connected
+              ? $t('WhatsApp.catalog.list.actions.enabled_cart')
+              : $t('WhatsApp.catalog.list.actions.disabled_cart')
+          "
+        />
+      </div>
+    </div>
+
+    <unnnic-modal-next
+      v-if="openModal"
+      type="alert"
+      icon="alert-circle-1"
+      scheme="feedback-red"
+      :validate="$t('WhatsApp.catalog.list.disable_modal.placeholder')"
+      :validatePlaceholder="$t('WhatsApp.catalog.list.disable_modal.placeholder')"
+      :validateLabel="$t('WhatsApp.catalog.list.disable_modal.label')"
+      :title="$t('WhatsApp.catalog.list.disable_modal.title')"
+      :actionPrimaryLabel="$t('WhatsApp.catalog.list.disable_modal.confirm')"
+      :actionSecondaryLabel="$t('general.Cancel')"
+      @click-action-secondary="openModal = false"
+      @click-action-primary="disableCatalog"
+    >
+      <template slot="description">
+        {{ $t('WhatsApp.catalog.list.disable_modal.description') }}
+      </template>
+    </unnnic-modal-next>
+  </div>
+</template>
+
+<script>
+  import { mapActions, mapState } from 'vuex';
+  /*   import debounce from 'lodash.debounce';
+  import { unnnicCallAlert } from '@weni/unnnic-system'; */
+
+  export default {
+    name: 'Card',
+    data() {
+      return {
+        openModal: false,
+        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,
+          },
+        ],
+      };
+    },
+    /*     created() {
+      this.fetchData();
+    }, */
+    computed: {
+      ...mapState('WhatsAppCloud', [
+        'loadingWhatsAppCloudCatalogs',
+        'errorWhatsAppCloudCatalogs',
+        'whatsAppCloudCatalogs',
+      ]),
+      listItems() {
+        return this.whatsAppCloudCatalogs?.results || [];
+      },
+    },
+    methods: {
+      ...mapActions('WhatsAppCloud', ['getWhatsAppCloudCatalogs']),
+      /*       fetchData: debounce(async function () {
+        const { appUuid } = this.$route.params;
+
+        await this.getWhatsAppCloudCatalogs({ appUuid });
+
+        if (this.errorWhatsAppCloudCatalog) {
+          unnnicCallAlert({
+            props: {
+              text: this.$t('WhatsApp.templates.error.fetch_templates'),
+              title: this.$t('general.error'),
+              icon: 'alert-circle-1-1',
+              scheme: 'feedback-red',
+              position: 'bottom-right',
+              closeText: this.$t('general.Close'),
+            },
+            seconds: 8,
+          });
+        }
+      }, 750), */
+      modalDisableCatalog() {
+        this.openModal = true;
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .whatsapp-catalog-card {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+    gap: $unnnic-spacing-md;
+
+    &__wrapper {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
+      border-radius: $unnnic-border-radius-md;
+      padding: $unnnic-spacing-md;
+
+      &__actions {
+        display: flex;
+        gap: $unnnic-spacing-xs;
+      }
+    }
+  }
+</style>
diff --git a/src/components/whatsAppCatalogs/Table.vue b/src/components/whatsAppCatalogs/Table.vue
new file mode 100644
index 00000000..2c885f29
--- /dev/null
+++ b/src/components/whatsAppCatalogs/Table.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="whatsapp-catalog-table">
+    <div class="whatsapp-catalog-table__header">
+      <div class="whatsapp-catalog-table__header__title">
+        <unnnic-card
+          class="whatsapp-catalog-table__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>
+      <div class="whatsapp-catalog-table__header__button">
+        <unnnic-button-next type="terciary" size="large">
+          {{ $t('WhatsApp.catalog.list.advanced_settings') }}
+        </unnnic-button-next>
+      </div>
+    </div>
+    <Card />
+  </div>
+</template>
+
+<script>
+  import Card from '@/components/whatsAppCatalogs/Card';
+
+  export default {
+    name: 'Table',
+    components: {
+      Card,
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .whatsapp-catalog-table {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+    margin-top: $unnnic-spacing-lg;
+
+    &__header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: $unnnic-spacing-md;
+
+      &__title {
+        display: flex;
+        flex-direction: column;
+
+        &__text {
+          margin-bottom: $unnnic-spacing-xs;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/locales/pt_br.json b/src/locales/pt_br.json
index d9579fd7..11b80a9e 100644
--- a/src/locales/pt_br.json
+++ b/src/locales/pt_br.json
@@ -457,6 +457,37 @@
       "templates": {
         "button": "Ver meus templates",
         "title": "Templates"
+      },
+      "catalog": {
+        "button": "Ver lista de catálogos",
+        "title": "Catálogo"
+      }
+    },
+    "catalog": {
+      "list": {
+        "title": "Lista de catálogos",
+        "description": "Adicione todos os itens que você quer anunciar ou vender",
+        "advanced_settings": "Configurações avançadas",
+        "identification": "Identificação",
+        "actions": {
+          "enabled_cart": "Carrinho habilitado",
+          "disabled_cart": "Carrinho desabilitado",
+          "enabled_catalog": "Catálogo habilitado",
+          "disabled_catalog": "Desabilitado"
+        },
+        "disable_modal": {
+          "title": "Vai mesmo desabilitar o catálogo?",
+          "description": "Para continuar enviando seus produtos no Whatsapp você precisa de um catálogo ativo.",
+          "label": "Digite “desabilitar catálogo” 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",
+          "confirm": "Salvar"
+        }
       }
     },
     "templates": {
diff --git a/src/router.js b/src/router.js
index 6a0096e5..01f45de4 100644
--- a/src/router.js
+++ b/src/router.js
@@ -64,6 +64,20 @@ const routes = [
       },
     ],
   },
+  {
+    path: '/apps/my/:appCode/:appUuid/catalogs',
+    component: () => import('@/views/whatsAppCatalogs/Base.vue'),
+    children: [
+      {
+        name: 'WhatsApp Catalogs Table',
+        path: '',
+        component: () => import('@/views/whatsAppCatalogs/Table.vue'),
+        meta: {
+          crumb_title: 'WhatsApp.catalog.list.title',
+        },
+      },
+    ],
+  },
   {
     path: '/loginexternal/:token/:project/:flowOrg',
     name: 'externalLogin',
diff --git a/src/store/appType/channels/whatsapp_cloud/actions.js b/src/store/appType/channels/whatsapp_cloud/actions.js
index a599978f..986be54a 100644
--- a/src/store/appType/channels/whatsapp_cloud/actions.js
+++ b/src/store/appType/channels/whatsapp_cloud/actions.js
@@ -35,4 +35,24 @@ export default {
   setSelectedPhoneNumber({ commit }, { data }) {
     commit('SET_SELECTED_PHONE_NUMBER', data);
   },
+  async getWhatsAppCloudCatalogs({ commit }, { appUuid, params }) {
+    commit('GET_WHATSAPP_CATALOGS_REQUEST');
+    try {
+      const { data } = await whatsAppCloud.getWhatsAppCloudCatalogs(appUuid, params);
+      commit('GET_WHATSAPP_CATALOGS_SUCCESS', data);
+    } catch (err) {
+      captureSentryException(err);
+      commit('GET_WHATSAPP_CATALOGS_ERROR', err);
+    }
+  },
+  async fetchCatalogData({ commit }, { appUuid, catalogUuid }) {
+    commit('FETCH_WHATSAPP_CATALOG_REQUEST');
+    try {
+      const { data } = await whatsAppCloud.fetchCatalogData(appUuid, catalogUuid);
+      commit('FETCH_WHATSAPP_CATALOG_SUCCESS', data);
+    } catch (err) {
+      captureSentryException(err);
+      commit('FETCH_WHATSAPP_CATALOG_ERROR', err);
+    }
+  },
 };
diff --git a/src/store/appType/channels/whatsapp_cloud/mutations.js b/src/store/appType/channels/whatsapp_cloud/mutations.js
index b4665fef..412eef3a 100644
--- a/src/store/appType/channels/whatsapp_cloud/mutations.js
+++ b/src/store/appType/channels/whatsapp_cloud/mutations.js
@@ -44,4 +44,28 @@ export default {
   SET_SELECTED_PHONE_NUMBER(state, data) {
     state.selectedPhoneNumber = data;
   },
+  GET_WHATSAPP_CATALOGS_REQUEST(state) {
+    state.loadingWhatsAppCloudCatalogs = true;
+    state.errorWhatsAppCloudCatalogs = null;
+  },
+  GET_WHATSAPP_CATALOGS_SUCCESS(state, data) {
+    state.whatsAppCloudCatalogs = data;
+    state.loadingWhatsAppCloudCatalogs = false;
+  },
+  GET_WHATSAPP_CATALOGS_ERROR(state, data) {
+    state.errorWhatsAppCloudCatalogs = data;
+    state.loadingWhatsAppCloudCatalogs = false;
+  },
+  FETCH_WHATSAPP_CATALOG_REQUEST(state) {
+    state.loadingFetchWhatsAppCloudCatalog = true;
+    state.errorFetchWhatsAppCloudCatalog = null;
+  },
+  FETCH_WHATSAPP_CATALOG_SUCCESS(state, data) {
+    state.whatsAppCloudCatalog = data;
+    state.loadingFetchWhatsAppCloudCatalog = false;
+  },
+  FETCH_WHATSAPP_CATALOG_ERROR(state, data) {
+    state.errorFetchWhatsAppCloudCatalog = data;
+    state.loadingFetchWhatsAppCloudCatalog = false;
+  },
 };
diff --git a/src/store/appType/channels/whatsapp_cloud/state.js b/src/store/appType/channels/whatsapp_cloud/state.js
index 7524d4c8..ec2d063f 100644
--- a/src/store/appType/channels/whatsapp_cloud/state.js
+++ b/src/store/appType/channels/whatsapp_cloud/state.js
@@ -12,4 +12,12 @@ export default {
 
   loadingWhatsAppCloudConfigure: false,
   errorCloudConfigure: false,
+
+  whatsAppCloudCatalogs: null,
+  loadingWhatsAppCloudCatalogs: false,
+  errorWhatsAppCloudCatalogs: false,
+
+  whatsAppCloudCatalog: null,
+  loadingFetchWhatsAppCloudCatalog: false,
+  errorFetchWhatsAppCloudCatalog: false,
 };
diff --git a/src/views/whatsAppCatalogs/Base.vue b/src/views/whatsAppCatalogs/Base.vue
new file mode 100644
index 00000000..3694d387
--- /dev/null
+++ b/src/views/whatsAppCatalogs/Base.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="whatsapp-catalogs-base">
+    <unnnic-breadcrumb :crumbs="crumbs" @crumbClick="handleCrumbClick" />
+    <router-view />
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'WhatsAppCatalogs',
+    data() {
+      return {
+        crumb_title: this.$route.meta.crumb_title,
+        baseCrumbs: [
+          {
+            name: this.$t('apps.nav.my_apps'),
+            path: '/apps/my',
+            meta: 'myApps',
+          },
+        ],
+      };
+    },
+    computed: {
+      crumbs() {
+        const routeCrumbs = this.$route.matched.slice(1);
+
+        const routeCrumbsWithTitles = routeCrumbs.map((crumb) => {
+          const { meta } = crumb;
+          return {
+            name: this.$t(meta.crumb_title),
+            path: crumb.path,
+            meta: crumb.name,
+          };
+        });
+        return this.baseCrumbs.concat(routeCrumbsWithTitles);
+      },
+    },
+    methods: {
+      handleCrumbClick(crumb) {
+        if (crumb.meta === this.$route.name) return;
+
+        if (crumb.meta === 'WhatsApp Catalogs Table') {
+          this.$router.go(-1);
+        } else {
+          this.$router.push(crumb.path);
+        }
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .whatsapp-catalogs-base {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+  }
+</style>
diff --git a/src/views/whatsAppCatalogs/Table.vue b/src/views/whatsAppCatalogs/Table.vue
new file mode 100644
index 00000000..63fa8d2f
--- /dev/null
+++ b/src/views/whatsAppCatalogs/Table.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="whatsapp-catalogs">
+    <div v-if="$route.name === 'WhatsApp Catalogs Table'">
+      <Table />
+    </div>
+    <router-view v-else />
+  </div>
+</template>
+
+<script>
+  import Table from '@/components/whatsAppCatalogs/Table';
+
+  export default {
+    name: 'WhatsAppCatalogsTable',
+    components: {
+      Table,
+    },
+  };
+</script>

From ca7e29c58eada0e1cce3c98e71c35e507ad0408f Mon Sep 17 00:00:00 2001
From: Sthefani <silveira.sthefani1@gmail.com>
Date: Fri, 29 Sep 2023 11:34:21 -0300
Subject: [PATCH 2/3] feat: change component name and api route

---
 src/api/appType/whatsapp_cloud/index.js       |  5 ++---
 src/components/whatsAppCatalogs/Card.vue      | 12 ++++++------
 .../whatsAppCatalogs/{Table.vue => List.vue}  | 14 +++++++-------
 src/router.js                                 |  4 ++--
 .../channels/whatsapp_cloud/actions.js        |  4 ++--
 src/views/whatsAppCatalogs/Base.vue           |  2 +-
 src/views/whatsAppCatalogs/List.vue           | 19 +++++++++++++++++++
 src/views/whatsAppCatalogs/Table.vue          | 19 -------------------
 8 files changed, 39 insertions(+), 40 deletions(-)
 rename src/components/whatsAppCatalogs/{Table.vue => List.vue} (79%)
 create mode 100644 src/views/whatsAppCatalogs/List.vue
 delete mode 100644 src/views/whatsAppCatalogs/Table.vue

diff --git a/src/api/appType/whatsapp_cloud/index.js b/src/api/appType/whatsapp_cloud/index.js
index 407b9ae4..790f484e 100644
--- a/src/api/appType/whatsapp_cloud/index.js
+++ b/src/api/appType/whatsapp_cloud/index.js
@@ -16,9 +16,8 @@ export default {
   configurePhoneNumber(data) {
     return request.$http.post(`${resource}/`, data);
   },
-  getWhatsAppCloudCatalogs(appUuid, params) {
-    const queryString = qs.stringify(params);
-    return request.$http.get(`${catalogsResource}/${appUuid}/catalogs/?${queryString}`);
+  getWhatsAppCloudCatalogs(appUuid) {
+    return request.$http.get(`${catalogsResource}/${appUuid}/catalogs/`);
   },
   fetchCatalogData(appUuid, catalogUuid) {
     return request.$http.get(`${catalogsResource}/${appUuid}/catalogs/${catalogUuid}/`);
diff --git a/src/components/whatsAppCatalogs/Card.vue b/src/components/whatsAppCatalogs/Card.vue
index fe962f79..5b632a36 100644
--- a/src/components/whatsAppCatalogs/Card.vue
+++ b/src/components/whatsAppCatalogs/Card.vue
@@ -67,8 +67,8 @@
 
 <script>
   import { mapActions, mapState } from 'vuex';
-  /*   import debounce from 'lodash.debounce';
-  import { unnnicCallAlert } from '@weni/unnnic-system'; */
+  import debounce from 'lodash.debounce';
+  import { unnnicCallAlert } from '@weni/unnnic-system';
 
   export default {
     name: 'Card',
@@ -100,9 +100,9 @@
         ],
       };
     },
-    /*     created() {
+    created() {
       this.fetchData();
-    }, */
+    },
     computed: {
       ...mapState('WhatsAppCloud', [
         'loadingWhatsAppCloudCatalogs',
@@ -115,7 +115,7 @@
     },
     methods: {
       ...mapActions('WhatsAppCloud', ['getWhatsAppCloudCatalogs']),
-      /*       fetchData: debounce(async function () {
+      fetchData: debounce(async function () {
         const { appUuid } = this.$route.params;
 
         await this.getWhatsAppCloudCatalogs({ appUuid });
@@ -133,7 +133,7 @@
             seconds: 8,
           });
         }
-      }, 750), */
+      }, 750),
       modalDisableCatalog() {
         this.openModal = true;
       },
diff --git a/src/components/whatsAppCatalogs/Table.vue b/src/components/whatsAppCatalogs/List.vue
similarity index 79%
rename from src/components/whatsAppCatalogs/Table.vue
rename to src/components/whatsAppCatalogs/List.vue
index 2c885f29..456a8c11 100644
--- a/src/components/whatsAppCatalogs/Table.vue
+++ b/src/components/whatsAppCatalogs/List.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="whatsapp-catalog-table">
-    <div class="whatsapp-catalog-table__header">
-      <div class="whatsapp-catalog-table__header__title">
+  <div class="whatsapp-catalog-list">
+    <div class="whatsapp-catalog-list__header">
+      <div class="whatsapp-catalog-list__header__title">
         <unnnic-card
-          class="whatsapp-catalog-table__header__title__text"
+          class="whatsapp-catalog-list__header__title__text"
           type="title"
           :title="$t('WhatsApp.catalog.list.title')"
           :hasInformationIcon="false"
@@ -14,7 +14,7 @@
           {{ $t('WhatsApp.catalog.list.description') }}
         </span>
       </div>
-      <div class="whatsapp-catalog-table__header__button">
+      <div class="whatsapp-catalog-list__header__button">
         <unnnic-button-next type="terciary" size="large">
           {{ $t('WhatsApp.catalog.list.advanced_settings') }}
         </unnnic-button-next>
@@ -28,7 +28,7 @@
   import Card from '@/components/whatsAppCatalogs/Card';
 
   export default {
-    name: 'Table',
+    name: 'List',
     components: {
       Card,
     },
@@ -36,7 +36,7 @@
 </script>
 
 <style lang="scss" scoped>
-  .whatsapp-catalog-table {
+  .whatsapp-catalog-list {
     display: flex;
     flex-direction: column;
     flex: 1;
diff --git a/src/router.js b/src/router.js
index 01f45de4..2e9313e0 100644
--- a/src/router.js
+++ b/src/router.js
@@ -69,9 +69,9 @@ const routes = [
     component: () => import('@/views/whatsAppCatalogs/Base.vue'),
     children: [
       {
-        name: 'WhatsApp Catalogs Table',
+        name: 'WhatsApp Catalogs List',
         path: '',
-        component: () => import('@/views/whatsAppCatalogs/Table.vue'),
+        component: () => import('@/views/whatsAppCatalogs/List.vue'),
         meta: {
           crumb_title: 'WhatsApp.catalog.list.title',
         },
diff --git a/src/store/appType/channels/whatsapp_cloud/actions.js b/src/store/appType/channels/whatsapp_cloud/actions.js
index 986be54a..1dd0c96a 100644
--- a/src/store/appType/channels/whatsapp_cloud/actions.js
+++ b/src/store/appType/channels/whatsapp_cloud/actions.js
@@ -35,10 +35,10 @@ export default {
   setSelectedPhoneNumber({ commit }, { data }) {
     commit('SET_SELECTED_PHONE_NUMBER', data);
   },
-  async getWhatsAppCloudCatalogs({ commit }, { appUuid, params }) {
+  async getWhatsAppCloudCatalogs({ commit }, { appUuid }) {
     commit('GET_WHATSAPP_CATALOGS_REQUEST');
     try {
-      const { data } = await whatsAppCloud.getWhatsAppCloudCatalogs(appUuid, params);
+      const { data } = await whatsAppCloud.getWhatsAppCloudCatalogs(appUuid);
       commit('GET_WHATSAPP_CATALOGS_SUCCESS', data);
     } catch (err) {
       captureSentryException(err);
diff --git a/src/views/whatsAppCatalogs/Base.vue b/src/views/whatsAppCatalogs/Base.vue
index 3694d387..50bcc5bb 100644
--- a/src/views/whatsAppCatalogs/Base.vue
+++ b/src/views/whatsAppCatalogs/Base.vue
@@ -39,7 +39,7 @@
       handleCrumbClick(crumb) {
         if (crumb.meta === this.$route.name) return;
 
-        if (crumb.meta === 'WhatsApp Catalogs Table') {
+        if (crumb.meta === 'WhatsApp Catalogs List') {
           this.$router.go(-1);
         } else {
           this.$router.push(crumb.path);
diff --git a/src/views/whatsAppCatalogs/List.vue b/src/views/whatsAppCatalogs/List.vue
new file mode 100644
index 00000000..1bfb0929
--- /dev/null
+++ b/src/views/whatsAppCatalogs/List.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="whatsapp-catalogs">
+    <div v-if="$route.name === 'WhatsApp Catalogs List'">
+      <List />
+    </div>
+    <router-view v-else />
+  </div>
+</template>
+
+<script>
+  import List from '@/components/whatsAppCatalogs/List';
+
+  export default {
+    name: 'WhatsAppCatalogsList',
+    components: {
+      List,
+    },
+  };
+</script>
diff --git a/src/views/whatsAppCatalogs/Table.vue b/src/views/whatsAppCatalogs/Table.vue
deleted file mode 100644
index 63fa8d2f..00000000
--- a/src/views/whatsAppCatalogs/Table.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <div class="whatsapp-catalogs">
-    <div v-if="$route.name === 'WhatsApp Catalogs Table'">
-      <Table />
-    </div>
-    <router-view v-else />
-  </div>
-</template>
-
-<script>
-  import Table from '@/components/whatsAppCatalogs/Table';
-
-  export default {
-    name: 'WhatsAppCatalogsTable',
-    components: {
-      Table,
-    },
-  };
-</script>

From eddd4333ef723e7ddfbeb74a012669fa57a004ef Mon Sep 17 00:00:00 2001
From: Sthefani <silveira.sthefani1@gmail.com>
Date: Fri, 29 Sep 2023 19:45:30 -0300
Subject: [PATCH 3/3] feat: update catalog api

---
 src/api/appType/whatsapp_cloud/index.js       |  15 ++
 src/components/whatsAppCatalogs/Card.vue      | 108 +++-------
 src/components/whatsAppCatalogs/List.vue      | 204 +++++++++++++++++-
 src/locales/en.json                           |  31 +++
 src/locales/es_es.json                        |  34 +++
 src/locales/pt_br.json                        |   8 +-
 .../channels/whatsapp_cloud/actions.js        |  51 +++++
 .../channels/whatsapp_cloud/mutations.js      |  68 ++++++
 .../appType/channels/whatsapp_cloud/state.js  |  20 ++
 src/views/whatsAppCatalogs/Base.vue           |   1 -
 10 files changed, 462 insertions(+), 78 deletions(-)

diff --git a/src/api/appType/whatsapp_cloud/index.js b/src/api/appType/whatsapp_cloud/index.js
index 790f484e..4fa57673 100644
--- a/src/api/appType/whatsapp_cloud/index.js
+++ b/src/api/appType/whatsapp_cloud/index.js
@@ -22,4 +22,19 @@ export default {
   fetchCatalogData(appUuid, catalogUuid) {
     return request.$http.get(`${catalogsResource}/${appUuid}/catalogs/${catalogUuid}/`);
   },
+  disableWhatsAppCloudCatalogs(appUuid, catalogUuid) {
+    return request.$http.post(`${catalogsResource}/${appUuid}/catalogs/${catalogUuid}/disable/`);
+  },
+  enableWhatsAppCloudCatalogs(appUuid, catalogUuid) {
+    return request.$http.post(`${catalogsResource}/${appUuid}/catalogs/${catalogUuid}/enable/`);
+  },
+  toggleCartVisibility(appUuid, data) {
+    return request.$http.post(`${catalogsResource}/${appUuid}/toggle-cart-visibility/`, data);
+  },
+  toggleCatalogVisibility(appUuid, data) {
+    return request.$http.post(`${catalogsResource}/${appUuid}/toggle-catalog-visibility/`, data);
+  },
+  getCommerceSettings(appUuid) {
+    return request.$http.get(`${catalogsResource}/${appUuid}/commerce-settings/`);
+  },
 };
diff --git a/src/components/whatsAppCatalogs/Card.vue b/src/components/whatsAppCatalogs/Card.vue
index 5b632a36..e89ec9a2 100644
--- a/src/components/whatsAppCatalogs/Card.vue
+++ b/src/components/whatsAppCatalogs/Card.vue
@@ -1,13 +1,10 @@
 <template>
-  <div
-    class="whatsapp-catalog-card"
-    v-if="!loadingWhatsAppCloudCatalogs && !errorWhatsAppCloudCatalogs"
-  >
-    <div v-for="(item, index) in listItems" :key="index" class="whatsapp-catalog-card__wrapper">
+  <div class="whatsapp-catalog-card">
+    <div class="whatsapp-catalog-card__wrapper">
       <div class="whatsapp-catalog-card__wrapper__header">
         <div class="whatsapp-catalog-card__wrapper__header__title">
           <span class="u font secondary body-lg color-neutral-darkest bold">
-            {{ item.name }}
+            {{ catalog.name }}
           </span>
         </div>
         <div class="whatsapp-catalog-card__wrapper__header__description">
@@ -15,66 +12,59 @@
             {{ $t('WhatsApp.catalog.list.identification') }}
           </span>
           <span class="u font secondary body-md color-brand-weni bold">
-            {{ item.facebook_catalog_id }}
+            {{ catalog.facebook_catalog_id }}
           </span>
         </div>
       </div>
 
       <div class="whatsapp-catalog-card__wrapper__actions">
         <unnnic-switch
-          :value="item.is_connected"
+          :value="catalog.is_connected"
           size="small"
           :textRight="
-            item.is_connected
+            catalog.is_connected
               ? $t('WhatsApp.catalog.list.actions.enabled_catalog')
               : $t('WhatsApp.catalog.list.actions.disabled_catalog')
           "
-          @click.native="modalDisableCatalog()"
+          @click.native="toggleCatalogConnect(!catalog.is_connected)"
         />
         <unnnic-switch
-          v-if="item.is_connected"
-          :inititalState="false"
+          v-if="catalog.is_connected"
+          :value="enabledCart"
           size="small"
           :textRight="
-            item.is_connected
+            enabledCart
               ? $t('WhatsApp.catalog.list.actions.enabled_cart')
               : $t('WhatsApp.catalog.list.actions.disabled_cart')
           "
+          @click.native="toggleCart()"
         />
       </div>
     </div>
-
-    <unnnic-modal-next
-      v-if="openModal"
-      type="alert"
-      icon="alert-circle-1"
-      scheme="feedback-red"
-      :validate="$t('WhatsApp.catalog.list.disable_modal.placeholder')"
-      :validatePlaceholder="$t('WhatsApp.catalog.list.disable_modal.placeholder')"
-      :validateLabel="$t('WhatsApp.catalog.list.disable_modal.label')"
-      :title="$t('WhatsApp.catalog.list.disable_modal.title')"
-      :actionPrimaryLabel="$t('WhatsApp.catalog.list.disable_modal.confirm')"
-      :actionSecondaryLabel="$t('general.Cancel')"
-      @click-action-secondary="openModal = false"
-      @click-action-primary="disableCatalog"
-    >
-      <template slot="description">
-        {{ $t('WhatsApp.catalog.list.disable_modal.description') }}
-      </template>
-    </unnnic-modal-next>
   </div>
 </template>
 
 <script>
   import { mapActions, mapState } from 'vuex';
-  import debounce from 'lodash.debounce';
-  import { unnnicCallAlert } from '@weni/unnnic-system';
 
   export default {
     name: 'Card',
+    props: {
+      catalog: {
+        type: Object,
+        required: true,
+        default: () => {},
+      },
+      enabledCart: {
+        type: Boolean,
+        default: false,
+      },
+    },
     data() {
       return {
-        openModal: false,
+        currentDisable: null,
+        catalogStatus: this.catalog.is_connected,
+        cartStatus: this.enabledCart,
         listCatalog: [
           {
             uuid: '3081a268-fff5-4366-bf44-ee387c8ddcdc',
@@ -100,42 +90,20 @@
         ],
       };
     },
-    created() {
-      this.fetchData();
-    },
     computed: {
-      ...mapState('WhatsAppCloud', [
-        'loadingWhatsAppCloudCatalogs',
-        'errorWhatsAppCloudCatalogs',
-        'whatsAppCloudCatalogs',
-      ]),
-      listItems() {
-        return this.whatsAppCloudCatalogs?.results || [];
-      },
+      ...mapState('WhatsAppCloud', ['errorDisableCatalog']),
     },
     methods: {
-      ...mapActions('WhatsAppCloud', ['getWhatsAppCloudCatalogs']),
-      fetchData: debounce(async function () {
-        const { appUuid } = this.$route.params;
-
-        await this.getWhatsAppCloudCatalogs({ appUuid });
-
-        if (this.errorWhatsAppCloudCatalog) {
-          unnnicCallAlert({
-            props: {
-              text: this.$t('WhatsApp.templates.error.fetch_templates'),
-              title: this.$t('general.error'),
-              icon: 'alert-circle-1-1',
-              scheme: 'feedback-red',
-              position: 'bottom-right',
-              closeText: this.$t('general.Close'),
-            },
-            seconds: 8,
-          });
+      ...mapActions('WhatsAppCloud', ['disableWhatsAppCloudCatalogs']),
+      toggleCatalogConnect(event) {
+        if (event) {
+          this.$emit('enable');
+        } else {
+          this.$emit('disable');
         }
-      }, 750),
-      modalDisableCatalog() {
-        this.openModal = true;
+      },
+      toggleCart() {
+        this.$emit('toggleCart');
       },
     },
   };
@@ -143,12 +111,6 @@
 
 <style lang="scss" scoped>
   .whatsapp-catalog-card {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    overflow: hidden;
-    gap: $unnnic-spacing-md;
-
     &__wrapper {
       display: flex;
       justify-content: space-between;
diff --git a/src/components/whatsAppCatalogs/List.vue b/src/components/whatsAppCatalogs/List.vue
index 456a8c11..be989bf0 100644
--- a/src/components/whatsAppCatalogs/List.vue
+++ b/src/components/whatsAppCatalogs/List.vue
@@ -14,24 +14,215 @@
           {{ $t('WhatsApp.catalog.list.description') }}
         </span>
       </div>
-      <div class="whatsapp-catalog-list__header__button">
+      <!--       <div class="whatsapp-catalog-list__header__button">
         <unnnic-button-next type="terciary" size="large">
           {{ $t('WhatsApp.catalog.list.advanced_settings') }}
         </unnnic-button-next>
-      </div>
+      </div> -->
+    </div>
+    <div
+      class="whatsapp-catalog-list__cards"
+      v-if="whatsAppCloudCatalogs || (!loadingWhatsAppCloudCatalogs && !errorWhatsAppCloudCatalogs)"
+    >
+      <Card
+        v-for="(catalog, index) in whatsAppCloudCatalogs"
+        :key="index"
+        :catalog="catalog"
+        :enabledCart="commerceSettings.is_cart_enabled"
+        @enable="handleEnableCatalog(catalog)"
+        @disable="handleDisableCatalog()"
+        @toggleCart="toggleCart"
+      />
     </div>
-    <Card />
+    <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 })
+      "
+      :title="$t('WhatsApp.catalog.list.disable_modal.title')"
+      :actionPrimaryLabel="$t('WhatsApp.catalog.list.disable_modal.confirm')"
+      :actionSecondaryLabel="$t('general.Cancel')"
+      @click-action-secondary="closeModal"
+      @click-action-primary="handleCatalogConfirmation"
+    >
+      <template slot="description">
+        {{ $t('WhatsApp.catalog.list.disable_modal.description') }}
+      </template>
+    </unnnic-modal-next>
   </div>
 </template>
 
 <script>
   import Card from '@/components/whatsAppCatalogs/Card';
+  import { mapActions, mapState } from 'vuex';
+  import debounce from 'lodash.debounce';
+  import { unnnicCallAlert } from '@weni/unnnic-system';
 
   export default {
     name: 'List',
     components: {
       Card,
     },
+    data() {
+      return {
+        openModal: false,
+        connectedCatalog: null,
+        catalogToEnable: null,
+      };
+    },
+    computed: {
+      ...mapState('WhatsAppCloud', [
+        'loadingWhatsAppCloudCatalogs',
+        'errorWhatsAppCloudCatalogs',
+        'whatsAppCloudCatalogs',
+        'errorDisableCatalog',
+        'errorEnableCatalog',
+        'commerceSettings',
+        'errorToggleCartVisibility',
+      ]),
+    },
+    created() {
+      this.fetchData();
+    },
+    methods: {
+      ...mapActions('WhatsAppCloud', [
+        'getWhatsAppCloudCatalogs',
+        'disableWhatsAppCloudCatalogs',
+        'enableWhatsAppCloudCatalogs',
+        'getCommerceSettings',
+        'toggleCartVisibility',
+      ]),
+      fetchData: debounce(async function () {
+        const { appUuid } = this.$route.params;
+
+        await this.getCommerceSettings({ appUuid });
+        await this.getWhatsAppCloudCatalogs({ appUuid });
+
+        if (this.errorWhatsAppCloudCatalog) {
+          unnnicCallAlert({
+            props: {
+              text: this.$t('WhatsApp.catalog.error.fetch_catalogs'),
+              title: this.$t('general.error'),
+              icon: 'alert-circle-1-1',
+              scheme: 'feedback-red',
+              position: 'bottom-right',
+              closeText: this.$t('general.Close'),
+            },
+            seconds: 8,
+          });
+        }
+
+        this.connectedCatalog = this.whatsAppCloudCatalogs.find(
+          (catalog) => catalog.is_connected === true,
+        );
+      }, 750),
+      async disableCatalog() {
+        const { appUuid } = this.$route.params;
+        const data = {
+          catalogUuid: this.connectedCatalog.uuid,
+          appUuid,
+        };
+
+        await this.disableWhatsAppCloudCatalogs(data);
+
+        if (this.errorDisableCatalog) {
+          unnnicCallAlert({
+            props: {
+              text: this.$t('WhatsApp.catalog.error.disable_catalog'),
+              title: this.$t('general.error'),
+              icon: 'alert-circle-1-1',
+              scheme: 'feedback-red',
+              position: 'bottom-right',
+              closeText: this.$t('general.Close'),
+            },
+            seconds: 8,
+          });
+        } else {
+          this.openModal = false;
+        }
+        this.fetchData();
+      },
+      async handleEnableCatalog(catalog) {
+        if (this.connectedCatalog) {
+          this.catalogToEnable = catalog;
+          this.openModal = true;
+          return;
+        }
+        this.enableCatalog(catalog);
+      },
+      handleDisableCatalog() {
+        this.openModal = true;
+      },
+      async enableCatalog(catalog) {
+        const { appUuid } = this.$route.params;
+        const data = {
+          catalogUuid: catalog.uuid,
+          appUuid,
+        };
+
+        await this.enableWhatsAppCloudCatalogs(data);
+
+        if (this.errorEnableCatalog) {
+          unnnicCallAlert({
+            props: {
+              text: this.$t('WhatsApp.catalog.error.enable_catalog'),
+              title: this.$t('general.error'),
+              icon: 'alert-circle-1-1',
+              scheme: 'feedback-red',
+              position: 'bottom-right',
+              closeText: this.$t('general.Close'),
+            },
+            seconds: 8,
+          });
+        }
+
+        this.fetchData();
+      },
+      async handleCatalogConfirmation() {
+        await this.disableCatalog();
+        if (!this.errorDisableCatalog && this.catalogToEnable) {
+          await this.enableCatalog(this.catalogToEnable);
+          this.catalogToEnable = null;
+        }
+      },
+      closeModal() {
+        this.catalogToEnable = null;
+        this.openModal = false;
+      },
+      async toggleCart() {
+        const { appUuid } = this.$route.params;
+        const data = {
+          appUuid,
+          payload: {
+            enable: !this.commerceSettings.is_cart_enabled,
+          },
+        };
+        await this.toggleCartVisibility(data);
+
+        if (this.errorToggleCartVisibility) {
+          unnnicCallAlert({
+            props: {
+              text: this.$t('WhatsApp.catalog.error.toggle_cart_visibility'),
+              title: this.$t('general.error'),
+              icon: 'alert-circle-1-1',
+              scheme: 'feedback-red',
+              position: 'bottom-right',
+              closeText: this.$t('general.Close'),
+            },
+            seconds: 8,
+          });
+        }
+
+        this.fetchData();
+      },
+    },
   };
 </script>
 
@@ -58,5 +249,12 @@
         }
       }
     }
+
+    &__cards {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      gap: $unnnic-spacing-md;
+    }
   }
 </style>
diff --git a/src/locales/en.json b/src/locales/en.json
index 660bfe39..5f01465c 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -457,6 +457,37 @@
       "templates": {
         "button": "See my templates",
         "title": "Templates"
+      },
+      "catalog": {
+        "button": "View list of catalogs",
+        "title": "Catalog"
+      }
+    },
+    "catalog": {
+      "list": {
+        "title": "List of catalogs",
+        "description": "Add all the items you want to advertise or sell",
+        "advanced_settings": "Advanced Settings",
+        "identification": "Identification",
+        "actions": {
+          "enabled_cart": "Cart enabled",
+          "disabled_cart": "Cart disabled",
+          "enabled_catalog": "Catalog enabled",
+          "disabled_catalog": "Disabled"
+        },
+        "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",
+          "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",
+          "confirm": "To save"
+        }
       }
     },
     "templates": {
diff --git a/src/locales/es_es.json b/src/locales/es_es.json
index fb139b18..764321a6 100644
--- a/src/locales/es_es.json
+++ b/src/locales/es_es.json
@@ -457,6 +457,40 @@
       "templates": {
         "button": "Ver mis plantillas",
         "title": "Plantillas"
+      },
+      "catalog": {
+        "button": "Ver lista de catálogos",
+        "title": "Catalogar"
+      }
+    },
+    "catalog": {
+      "list": {
+        "title": "Lista de catálogos",
+        "description": "Añade todos los artículos que quieras anunciar o vender",
+        "advanced_settings": "Configuraciones avanzadas",
+        "identification": "Identificación",
+        "actions": {
+          "enabled_cart": "Carrito habilitado",
+          "disabled_cart": "Carrito inhabilitado",
+          "enabled_catalog": "Catálogo habilitado",
+          "disabled_catalog": "Desactivado"
+        },
+        "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",
+          "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",
+          "confirm": "Ahorrar"
+        }
+      },
+      "error": {
+        "toggle_cart_visibility": ""
       }
     },
     "templates": {
diff --git a/src/locales/pt_br.json b/src/locales/pt_br.json
index 11b80a9e..cb65f493 100644
--- a/src/locales/pt_br.json
+++ b/src/locales/pt_br.json
@@ -464,6 +464,12 @@
       }
     },
     "catalog": {
+      "error": {
+        "fetch_catalogs": "Não foi possível carregar a lista de catálogos. Por favor tente novamente mais tarde",
+        "disable_catalog": "Não foi possível desabilitar o catálogo no momento. Por favor tente novamente mais tarde",
+        "enable_catalog": "Não foi possível habilitar o catálogo no momento. Por favor tente novamente mais tarde",
+        "toggle_cart_visibility": ""
+      },
       "list": {
         "title": "Lista de catálogos",
         "description": "Adicione todos os itens que você quer anunciar ou vender",
@@ -478,7 +484,7 @@
         "disable_modal": {
           "title": "Vai mesmo desabilitar o catálogo?",
           "description": "Para continuar enviando seus produtos no Whatsapp você precisa de um catálogo ativo.",
-          "label": "Digite “desabilitar catálogo” para confirmar",
+          "label": "Digite “{name}” para confirmar",
           "placeholder": "desabilitar catálogo",
           "confirm": "Desabilitar"
         },
diff --git a/src/store/appType/channels/whatsapp_cloud/actions.js b/src/store/appType/channels/whatsapp_cloud/actions.js
index 1dd0c96a..d0f4b71f 100644
--- a/src/store/appType/channels/whatsapp_cloud/actions.js
+++ b/src/store/appType/channels/whatsapp_cloud/actions.js
@@ -55,4 +55,55 @@ export default {
       commit('FETCH_WHATSAPP_CATALOG_ERROR', err);
     }
   },
+  async disableWhatsAppCloudCatalogs({ commit }, { appUuid, catalogUuid }) {
+    commit('DISABLE_WHATSAPP_CATALOG_REQUEST');
+    try {
+      const { data } = await whatsAppCloud.disableWhatsAppCloudCatalogs(appUuid, catalogUuid);
+      commit('DISABLE_WHATSAPP_CATALOG_SUCCESS', data);
+    } catch (err) {
+      captureSentryException(err);
+      commit('DISABLE_WHATSAPP_CATALOG_ERROR', err);
+    }
+  },
+  async enableWhatsAppCloudCatalogs({ commit }, { appUuid, catalogUuid }) {
+    commit('ENABLE_WHATSAPP_CATALOG_REQUEST');
+    try {
+      const { data } = await whatsAppCloud.enableWhatsAppCloudCatalogs(appUuid, catalogUuid);
+      commit('ENABLE_WHATSAPP_CATALOG_SUCCESS', data);
+    } catch (err) {
+      captureSentryException(err);
+      commit('ENABLE_WHATSAPP_CATALOG_ERROR', err);
+    }
+  },
+  async toggleCartVisibility({ commit }, { appUuid, payload }) {
+    commit('TOGGLE_CART_VISIBILITY_REQUEST');
+    try {
+      const { data } = await whatsAppCloud.toggleCartVisibility(appUuid, payload);
+      commit('TOGGLE_CART_VISIBILITY_SUCCESS', data);
+    } catch (err) {
+      captureSentryException(err);
+      commit('TOGGLE_CART_VISIBILITY_ERROR', err);
+    }
+  },
+  async toggleCatalogVisibility({ commit }, { appUuid, payload }) {
+    commit('TOGGLE_CATALOG_VISIBILITY_REQUEST');
+    try {
+      const { data } = await whatsAppCloud.toggleCatalogVisibility(appUuid, payload);
+      commit('TOGGLE_CATALOG_VISIBILITY_SUCCESS', data);
+    } catch (err) {
+      captureSentryException(err);
+      commit('TOGGLE_CATALOG_VISIBILITY_ERROR', err);
+    }
+  },
+  async getCommerceSettings({ commit }, { appUuid }) {
+    commit('GET_COMMERCE_SETTINGS_REQUEST');
+    try {
+      const { data } = await whatsAppCloud.getCommerceSettings(appUuid);
+      const settings = data.data[0];
+      commit('GET_COMMERCE_SETTINGS_SUCCESS', settings);
+    } catch (err) {
+      captureSentryException(err);
+      commit('GET_COMMERCE_SETTINGS_ERROR', err);
+    }
+  },
 };
diff --git a/src/store/appType/channels/whatsapp_cloud/mutations.js b/src/store/appType/channels/whatsapp_cloud/mutations.js
index 412eef3a..0951bb66 100644
--- a/src/store/appType/channels/whatsapp_cloud/mutations.js
+++ b/src/store/appType/channels/whatsapp_cloud/mutations.js
@@ -68,4 +68,72 @@ export default {
     state.errorFetchWhatsAppCloudCatalog = data;
     state.loadingFetchWhatsAppCloudCatalog = false;
   },
+  DISABLE_WHATSAPP_CATALOG_REQUEST(state) {
+    state.loadingDisableCatalog = true;
+    state.disabledCatalog = null;
+    state.errorDisableCatalog = null;
+  },
+  DISABLE_WHATSAPP_CATALOG_SUCCESS(state, data) {
+    state.disabledCatalog = data;
+    state.loadingDisableCatalog = false;
+  },
+  DISABLE_WHATSAPP_CATALOG_ERROR(state, data) {
+    state.errorDisableCatalog = data;
+    state.loadingDisableCatalog = false;
+  },
+
+  ENABLE_WHATSAPP_CATALOG_REQUEST(state) {
+    state.loadingEnableCatalog = true;
+    state.enabledCatalog = null;
+    state.errorEnableCatalog = null;
+  },
+  ENABLE_WHATSAPP_CATALOG_SUCCESS(state, data) {
+    state.enabledCatalog = data;
+    state.loadingEnableCatalog = false;
+  },
+  ENABLE_WHATSAPP_CATALOG_ERROR(state, data) {
+    state.errorEnableCatalog = data;
+    state.loadingEnableCatalog = false;
+  },
+
+  TOGGLE_CART_VISIBILITY_REQUEST(state) {
+    state.loadingToggleCartVisibility = true;
+    state.toggledCartVisibility = null;
+    state.errorToggleCartVisibility = null;
+  },
+  TOGGLE_CART_VISIBILITY_SUCCESS(state, data) {
+    state.toggledCartVisibility = data;
+    state.loadingToggleCartVisibility = false;
+  },
+  TOGGLE_CART_VISIBILITY_ERROR(state, data) {
+    state.errorToggleCartVisibility = data;
+    state.loadingToggleCartVisibility = false;
+  },
+
+  TOGGLE_CATALOG_VISIBILITY_REQUEST(state) {
+    state.loadingToggleCatalogVisibility = true;
+    state.toggledCatalogVisibility = null;
+    state.errorToggleCatalogVisibility = null;
+  },
+  TOGGLE_CATALOG_VISIBILITY_SUCCESS(state, data) {
+    state.toggledCatalogVisibility = data;
+    state.loadingToggleCatalogVisibility = false;
+  },
+  TOGGLE_CATALOG_VISIBILITY_ERROR(state, data) {
+    state.errorToggleCatalogVisibility = data;
+    state.loadingToggleCatalogVisibility = false;
+  },
+
+  GET_COMMERCE_SETTINGS_REQUEST(state) {
+    state.loadingCommerceSettings = true;
+    state.errorCommerceSettings = null;
+  },
+  GET_COMMERCE_SETTINGS_SUCCESS(state, data) {
+    state.commerceSettings = data;
+    state.loadingCommerceSettings = false;
+  },
+  GET_COMMERCE_SETTINGS_ERROR(state, data) {
+    state.errorCommerceSettings = data;
+    state.loadingCommerceSettings = false;
+  },
 };
diff --git a/src/store/appType/channels/whatsapp_cloud/state.js b/src/store/appType/channels/whatsapp_cloud/state.js
index ec2d063f..bc44d41f 100644
--- a/src/store/appType/channels/whatsapp_cloud/state.js
+++ b/src/store/appType/channels/whatsapp_cloud/state.js
@@ -20,4 +20,24 @@ export default {
   whatsAppCloudCatalog: null,
   loadingFetchWhatsAppCloudCatalog: false,
   errorFetchWhatsAppCloudCatalog: false,
+
+  disabledCatalog: null,
+  loadingDisableCatalog: false,
+  errorDisableCatalog: false,
+
+  enabledCatalog: null,
+  loadingEnableCatalog: false,
+  errorEnableCatalog: false,
+
+  toggledCartVisibility: null,
+  loadingToggleCartVisibility: false,
+  errorToggleCartVisibility: false,
+
+  toggledCatalogVisibility: null,
+  loadingToggleCatalogVisibility: false,
+  errorToggleCatalogVisibility: false,
+
+  commerceSettings: null,
+  loadingCommerceSettings: false,
+  errorCommerceSettings: false,
 };
diff --git a/src/views/whatsAppCatalogs/Base.vue b/src/views/whatsAppCatalogs/Base.vue
index 50bcc5bb..c7ffdeba 100644
--- a/src/views/whatsAppCatalogs/Base.vue
+++ b/src/views/whatsAppCatalogs/Base.vue
@@ -54,6 +54,5 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-    overflow: hidden;
   }
 </style>