Merge pull request #342 from weni-ai/feat/product-catalog-design-review

Feat: Product catalog design review
weni-ai · Oct 30, 2023 · 23e2e61 · 23e2e61
2 parents 6ff47d4 + 64f5764
commit 23e2e61
Show file tree

Hide file tree

Showing 19 changed files with 500 additions and 211 deletions.
diff --git 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/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
diff --git a/src/components/config/channels/whatsapp/components/tabs/AccountTab.vue b/src/components/config/channels/whatsapp/components/tabs/AccountTab.vue
@@ -8,29 +8,29 @@
               {{ $t('WhatsApp.config.templates.title') }}
             </div>
 
-            <unnnic-button-next
+            <unnnic-button
               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>
+            </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
@@ -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>
@@ -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
@@ -65,29 +67,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
@@ -1,31 +1,31 @@
 <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"
       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"
@@ -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,6 +77,9 @@
         openModal: false,
         connectedCatalog: null,
         catalogToEnable: null,
+        firstLoad: true,
+        page: 1,
+        pageSize: 15,
       };
     },
     computed: {
@@ -87,9 +92,28 @@
         'commerceSettings',
         'errorToggleCartVisibility',
       ]),
-    },
-    created() {
-      this.fetchData();
+      listItems() {
+        return this.whatsAppCloudCatalogs?.results || [];
+      },
+      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({
@@ -119,7 +147,7 @@
           });
         }
 
-        this.connectedCatalog = this.whatsAppCloudCatalogs.find(
+        this.connectedCatalog = this.whatsAppCloudCatalogs.results.find(
           (catalog) => catalog.is_connected === true,
         );
       }, 750),
@@ -147,7 +175,7 @@
         } else {
           this.openModal = false;
         }
-        this.fetchData();
+        this.fetchData(this.page);
       },
       async handleEnableCatalog(catalog) {
         if (this.connectedCatalog) {
@@ -183,7 +211,7 @@
           });
         }
 
-        this.fetchData();
+        this.fetchData(this.page);
       },
       async handleCatalogConfirmation() {
         await this.disableCatalog();
@@ -220,7 +248,31 @@
           });
         }
 
-        this.fetchData();
+        this.fetchData(this.page);
+      },
+    },
+    watch: {
+      page: {
+        immediate: true,
+        handler(page) {
+          this.fetchData(page);
+        },
+      },
+      whatsAppCloudCatalogs: {
+        handler() {
+          this.firstLoad = false;
+        },
+        deep: true,
+      },
+      filterState: {
+        handler() {
+          if (this.page === 1) {
+            this.fetchData(this.page);
+          } else {
+            this.page = 1;
+          }
+        },
+        deep: true,
       },
     },
   };
@@ -236,18 +288,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 +321,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>