From eaae407fa12c6861bc4305a5622fa8eeaeba34cc Mon Sep 17 00:00:00 2001
From: Paulo Bernardo <paulo.bernardo@weni.ai>
Date: Thu, 9 Nov 2023 21:53:07 -0300
Subject: [PATCH] feat: connect catalog in whatsapp account tab

---
 src/assets/vtex_small.png                     | Bin 0 -> 673 bytes
 .../config/channels/whatsapp/Config.vue       |   6 +-
 .../components/CreateCatalogModalContent.vue  | 211 ++++++++++++++++++
 .../whatsapp/components/tabs/AccountTab.vue   |  57 ++++-
 .../config/ecommerce/vtex/Config.vue          |  24 +-
 ...dal.vue => ConnectCatalogModalContent.vue} |  37 ++-
 .../config/ecommerce/vtex/Setup.vue           |   1 -
 src/locales/en.json                           |  20 ++
 src/locales/es_es.json                        |  20 ++
 src/locales/pt_br.json                        |  20 ++
 10 files changed, 366 insertions(+), 30 deletions(-)
 create mode 100644 src/assets/vtex_small.png
 create mode 100644 src/components/config/channels/whatsapp/components/CreateCatalogModalContent.vue
 rename src/components/config/ecommerce/vtex/{ConnectCatalogModal.vue => ConnectCatalogModalContent.vue} (87%)

diff --git a/src/assets/vtex_small.png b/src/assets/vtex_small.png
new file mode 100644
index 0000000000000000000000000000000000000000..2e64c0497b7a9a1d824e2ad9ded6fb388f3d7b93
GIT binary patch
literal 673
zcmV;S0$%-zP)<h;3K|Lk000e1NJLTq000;O000&U1^@s6+I?Jz00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0yarRK~#7Ft(8q{
z6Hyd~-!l{Iq@svmOuLY(e;^xi<D#G&(M6YTgf`J4sOZ9_kcw7B!8GWi2uUWzg}C$&
zxYkAL&TSS-Qn3<<X+Gy3?<Ae6^KqwA<_XE%+<WeM-^`qIL)eA$d9DBU`#okpj<{fL
zgPifsZ0<EN?jlBH^0wxFVZMf#Vc@7MpfOCu4%c0QDMJ*Q&_bLrt?b>Ry4jM?;00oX
z>&a%Rn)q|_R)+OS<q)XG5Mag^BK(fnosjR#(fMg*9H=M6raL!zeVuNWFJK>fv)N5%
z%0TJ9T(w7<e@Xs|44+;)iwL^u+jHvVfG+sDGqwdj`2+ex?G2*PhI!SJY}AiaTb0jl
zr~%vw1OZnDr<Ox+lkHvxEJ6W6-1m5)M(LZ}@ZKM2Y1Z?w1WbbufYQF1Y?^hCfc;?%
z4?VPV`oibi>6`QaPV{G%7vwWK4<+KUe`YK|+v`7MX%_s82@+2{+hGM_9Ehppckc?=
zBn@jd*vWLUn_3#zdpDh3l$W{i<QOtWPs7$coh-|1EwEYF*E^})0*I8AL*Ugg_Z|V8
zu=7YZ-Z@I3qH=FHRlhS*mbFJ<avt$ZU(A46T$0yzXnKL-vG&F`{zt&ZI4oXC*FX0%
z@UtV0N(~`JV7s5*Dz71e;89UGd(zb-CxOuu#j&tq6#_-Dd!R)@s)bHEcXfKyuhFk}
z4QFm=Ci_74LBSDEHp*vkPyrR)RPF}rIFamHRce|0{z3f(kWJy-6Bh~Q00000NkvXX
Hu0mjfe?d2k

literal 0
HcmV?d00001

diff --git a/src/components/config/channels/whatsapp/Config.vue b/src/components/config/channels/whatsapp/Config.vue
index 258662ed..fc42ce47 100644
--- a/src/components/config/channels/whatsapp/Config.vue
+++ b/src/components/config/channels/whatsapp/Config.vue
@@ -156,9 +156,9 @@
         try {
           const options = { code: this.app.code, appUuid: this.app.uuid };
           this.skipLoad = skipLoad;
-          await this.fetchAppInfo(options);
-          await this.fetchProfile(options);
-          await this.getWhatsAppCloudCatalogs({ appUuid: this.app.uuid });
+          this.fetchAppInfo(options);
+          this.fetchProfile(options);
+          this.getWhatsAppCloudCatalogs({ appUuid: this.app.uuid });
           this.skipLoad = false;
         } catch (error) {
           unnnicCallAlert({
diff --git a/src/components/config/channels/whatsapp/components/CreateCatalogModalContent.vue b/src/components/config/channels/whatsapp/components/CreateCatalogModalContent.vue
new file mode 100644
index 00000000..9ecd05f5
--- /dev/null
+++ b/src/components/config/channels/whatsapp/components/CreateCatalogModalContent.vue
@@ -0,0 +1,211 @@
+<template>
+  <div class="modal">
+    <div slot="message" class="modal__content">
+      <span class="modal__content__title">{{ $t('whatsapp.create_catalog.title') }}</span>
+
+      <div class="modal__content__header">
+        <span class="modal__content__header__title">{{
+          $t('whatsapp.create_catalog.header.title')
+        }}</span>
+        <span class="modal__content__header__description">{{
+          $t('whatsapp.create_catalog.header.description')
+        }}</span>
+      </div>
+
+      <div class="modal__content__form">
+        <div class="modal__content__form__options">
+          <div
+            :class="['modal__content__form__options__card', type === 'vtex' ? 'selected' : '']"
+            @click="type = 'vtex'"
+          >
+            <div class="modal__content__form__options__card__icon">
+              <img
+                class="modal__content__form__options__card__icon__image"
+                src="~@/assets/vtex_small.png"
+              />
+            </div>
+
+            <div class="modal__content__form__options__card__content">
+              <span class="modal__content__form__options__card__content__title">{{
+                $t('whatsapp.create_catalog.option.vtex.title')
+              }}</span>
+              <span class="modal__content__form__options__card__content__description">
+                {{ $t('whatsapp.create_catalog.option.vtex.description') }}
+              </span>
+            </div>
+          </div>
+
+          <div
+            :class="['modal__content__form__options__card', type === 'default' ? 'selected' : '']"
+            @click="type = 'default'"
+          >
+            <div class="modal__content__form__options__card__icon">
+              <unnnic-icon icon="upload" />
+            </div>
+
+            <div class="modal__content__form__options__card__content">
+              <span class="modal__content__form__options__card__content__title">{{
+                $t('whatsapp.create_catalog.option.default.title')
+              }}</span>
+              <span class="modal__content__form__options__card__content__description">
+                {{ $t('whatsapp.create_catalog.option.default.description') }}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <span
+          v-html="$t('whatsapp.create_catalog.footer')"
+          class="modal__content__form__footer"
+        ></span>
+      </div>
+    </div>
+    <div class="modal__buttons">
+      <unnnic-button slot="options" type="tertiary" @click="closeModal">
+        {{ $t('general.Cancel') }}
+      </unnnic-button>
+      <!-- TODO: Check if VTEX app is enabled to enable this button -->
+      <unnnic-button slot="options" @click="createCatalog">
+        {{ $t('general.continue') }}
+      </unnnic-button>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'CreateCatalogModalContent',
+    data() {
+      return {
+        type: 'vtex',
+      };
+    },
+    methods: {
+      createCatalog() {
+        this.$emit('createCatalog', this.type);
+      },
+      closeModal() {
+        this.$emit('closeModal');
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .modal {
+    display: flex;
+    flex-direction: column;
+    gap: $unnnic-spacing-md;
+
+    &__buttons {
+      display: flex;
+      gap: $unnnic-spacing-lg;
+      widows: 100%;
+      flex: 1;
+
+      ::v-deep .unnnic-button {
+        width: 100%;
+      }
+    }
+
+    &__content {
+      display: flex;
+      flex-direction: column;
+      gap: $unnnic-spacing-sm;
+      text-align: left;
+
+      &__title {
+        color: $unnnic-color-neutral-darkest;
+        font-size: $unnnic-font-size-title-sm;
+        font-weight: $unnnic-font-weight-black;
+        line-height: $unnnic-font-size-title-sm + $unnnic-line-height-medium;
+      }
+
+      &__header {
+        display: flex;
+        flex-direction: column;
+        gap: $unnnic-spacing-nano;
+
+        &__title {
+          color: $unnnic-color-neutral-darkest;
+          font-size: $unnnic-font-size-body-lg;
+          font-weight: $unnnic-font-weight-black;
+          line-height: $unnnic-font-size-body-lg + $unnnic-line-height-medium;
+        }
+
+        &__description {
+          color: $unnnic-color-neutral-cloudy;
+          font-size: $unnnic-font-size-body-md;
+          line-height: $unnnic-font-size-body-md + $unnnic-line-height-medium;
+        }
+      }
+
+      &__form {
+        display: flex;
+        flex-direction: column;
+        gap: $unnnic-spacing-sm;
+
+        &__options {
+          display: flex;
+          flex-direction: column;
+          gap: $unnnic-spacing-xs;
+
+          &__card {
+            display: flex;
+            padding: $unnnic-spacing-ant $unnnic-spacing-sm;
+            align-items: center;
+            gap: $unnnic-spacing-sm;
+
+            border-radius: $unnnic-border-radius-sm;
+            border: $unnnic-border-width-thinner solid $unnnic-color-neutral-cleanest;
+            background: $unnnic-color-neutral-lightest;
+
+            cursor: pointer;
+
+            &.selected {
+              border-radius: $unnnic-border-radius-sm;
+              border: $unnnic-border-width-thinner solid $unnnic-color-weni-600;
+              background: $unnnic-color-weni-50;
+            }
+
+            &__icon {
+              display: flex;
+              padding: $unnnic-spacing-xs;
+              flex-direction: column;
+              justify-content: center;
+              align-items: center;
+              border-radius: $unnnic-border-radius-sm;
+              background: rgba(59, 65, 77, 0.08);
+            }
+
+            &__content {
+              display: flex;
+              flex-direction: column;
+              align-items: flex-start;
+
+              &__title {
+                color: $unnnic-color-neutral-darkest;
+                font-size: $unnnic-font-size-body-gt;
+                font-weight: $unnnic-font-weight-bold;
+                line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
+              }
+
+              &__description {
+                color: $unnnic-color-neutral-cloudy;
+                font-size: $unnnic-font-size-body-md;
+                line-height: $unnnic-font-size-body-md + $unnnic-line-height-medium;
+              }
+            }
+          }
+        }
+
+        &__footer {
+          margin-top: $unnnic-spacing-stack-xs;
+          color: $unnnic-color-neutral-cloudy;
+          font-size: $unnnic-font-size-body-gt;
+          line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/components/config/channels/whatsapp/components/tabs/AccountTab.vue b/src/components/config/channels/whatsapp/components/tabs/AccountTab.vue
index 40c61ee8..0b778e26 100644
--- a/src/components/config/channels/whatsapp/components/tabs/AccountTab.vue
+++ b/src/components/config/channels/whatsapp/components/tabs/AccountTab.vue
@@ -25,7 +25,7 @@
 
             <unnnic-button
               class="account-tab__content__info__templates__buttons__button"
-              @click="navigateToCatalogs"
+              @click="handleCatalogButtonClick"
               type="primary"
               size="small"
             >
@@ -87,12 +87,38 @@
         </div>
       </div>
     </div>
+
+    <unnnic-modal
+      v-if="showCreateCatalogModal || showConnectCatalogModal"
+      class="catalog-modal"
+      @close="showCreateCatalogModal = false"
+      @click.stop
+      :closeIcon="false"
+    >
+      <CreateCatalogModalContent
+        v-if="showCreateCatalogModal"
+        @closeModal="showCreateCatalogModal = false"
+        @createCatalog="handleCatalogCreateModalContinue"
+      />
+
+      <ConnectCatalogModalContent
+        v-if="showConnectCatalogModal"
+        @closeModal="showConnectCatalogModal = false"
+      />
+    </unnnic-modal>
   </div>
 </template>
 
 <script>
+  import CreateCatalogModalContent from '../CreateCatalogModalContent.vue';
+  import ConnectCatalogModalContent from '../../../../ecommerce/vtex/ConnectCatalogModalContent.vue';
+
   export default {
     name: 'AccountTab',
+    components: {
+      CreateCatalogModalContent,
+      ConnectCatalogModalContent,
+    },
     props: {
       appInfo: {
         type: Object,
@@ -103,6 +129,12 @@
         default: false,
       },
     },
+    data() {
+      return {
+        showCreateCatalogModal: false,
+        showConnectCatalogModal: false,
+      };
+    },
     methods: {
       emitClose() {
         this.$emit('close');
@@ -118,20 +150,20 @@
         const { code, uuid } = this.appInfo;
         this.$router.push({ path: `/apps/my/${code}/${uuid}/templates` });
       },
-      navigateToCatalogs() {
+      handleCatalogButtonClick() {
         if (!this.hasCatalog) {
-          // TODO: use business id and not waba_id
-          window
-            .open(
-              `https://business.facebook.com/latest/settings/product_catalogs?business_id=`,
-              '_blank',
-            )
-            .focus();
+          this.showCreateCatalogModal = true;
           return;
         }
         const { code, uuid } = this.appInfo;
         this.$router.push({ path: `/apps/my/${code}/${uuid}/catalogs` });
       },
+      handleCatalogCreateModalContinue(type) {
+        if (type === 'vtex') {
+          this.showCreateCatalogModal = false;
+          this.showConnectCatalogModal = true;
+        }
+      },
     },
     computed: {
       QRCodeUrl() {
@@ -367,4 +399,11 @@
       margin-top: $unnnic-spacing-stack-lg;
     }
   }
+
+  .catalog-modal {
+    ::v-deep .unnnic-modal-container-background {
+      width: 750px;
+      max-width: 90%;
+    }
+  }
 </style>
diff --git a/src/components/config/ecommerce/vtex/Config.vue b/src/components/config/ecommerce/vtex/Config.vue
index d3e7f58f..9e8c10d1 100644
--- a/src/components/config/ecommerce/vtex/Config.vue
+++ b/src/components/config/ecommerce/vtex/Config.vue
@@ -27,7 +27,7 @@
           <unnnic-button v-if="app.hasConnectedCatalog">
             {{ $t('vtex.config.view_catalog') }}
           </unnnic-button>
-          <unnnic-button v-else @click="() => (showConnectModal = true)">
+          <unnnic-button v-else @click="showConnectModal = true">
             {{ $t('vtex.config.connect_catalog') }}
           </unnnic-button>
         </div>
@@ -51,18 +51,26 @@
       </div>
     </div>
 
-    <ConnectCatalogModal v-if="showConnectModal" @closeModal="() => (showConnectModal = false)" />
+    <unnnic-modal
+      v-if="showConnectModal"
+      class="connect-modal"
+      @close="showConnectModal = false"
+      @click.stop
+      :closeIcon="false"
+    >
+      <ConnectCatalogModalContent @closeModal="showConnectModal = false" />
+    </unnnic-modal>
   </div>
 </template>
 
 <script>
   import { mapActions, mapState } from 'vuex';
   import { unnnicCallAlert } from '@weni/unnnic-system';
-  import ConnectCatalogModal from './ConnectCatalogModal.vue';
+  import ConnectCatalogModalContent from './ConnectCatalogModalContent.vue';
 
   export default {
     name: 'vtex-config',
-    components: { ConnectCatalogModal },
+    components: { ConnectCatalogModalContent },
     props: {
       app: {
         type: Object,
@@ -100,7 +108,6 @@
       },
       async saveConfig() {
         this.handleUpdateApp();
-        console.log('Save config');
         this.$root.$emit('updateGrid');
       },
       closeConfig() {
@@ -315,4 +322,11 @@
     //   margin: 5px 0px -10px;
     // }
   }
+
+  .connect-modal {
+    ::v-deep .unnnic-modal-container-background {
+      width: 750px;
+      max-width: 90%;
+    }
+  }
 </style>
diff --git a/src/components/config/ecommerce/vtex/ConnectCatalogModal.vue b/src/components/config/ecommerce/vtex/ConnectCatalogModalContent.vue
similarity index 87%
rename from src/components/config/ecommerce/vtex/ConnectCatalogModal.vue
rename to src/components/config/ecommerce/vtex/ConnectCatalogModalContent.vue
index feb944fc..11cb9c3c 100644
--- a/src/components/config/ecommerce/vtex/ConnectCatalogModal.vue
+++ b/src/components/config/ecommerce/vtex/ConnectCatalogModalContent.vue
@@ -1,5 +1,5 @@
 <template>
-  <unnnic-modal class="modal" @close="closeModal" @click.stop :closeIcon="false">
+  <div class="modal">
     <div slot="message" class="modal__content">
       <span class="modal__content__title">{{ $t('vtex.connect_catalog.title') }}</span>
 
@@ -27,18 +27,21 @@
         ></span>
       </div>
     </div>
-    <unnnic-button slot="options" type="tertiary" @click="closeModal">
-      {{ $t('general.Cancel') }}
-    </unnnic-button>
-    <unnnic-button slot="options" @click="connectCatalog">
-      {{ $t('general.continue') }}
-    </unnnic-button>
-  </unnnic-modal>
+
+    <div class="modal__buttons">
+      <unnnic-button slot="options" type="tertiary" @click="closeModal">
+        {{ $t('general.Cancel') }}
+      </unnnic-button>
+      <unnnic-button slot="options" @click="connectCatalog">
+        {{ $t('general.continue') }}
+      </unnnic-button>
+    </div>
+  </div>
 </template>
 
 <script>
   export default {
-    name: 'ConnectCatalogModal',
+    name: 'ConnectCatalogModalContent',
     data() {
       return {
         name: '',
@@ -126,9 +129,19 @@
 
 <style lang="scss" scoped>
   .modal {
-    ::v-deep .unnnic-modal-container-background {
-      width: 750px;
-      max-width: 90%;
+    display: flex;
+    flex-direction: column;
+    gap: $unnnic-spacing-md;
+
+    &__buttons {
+      display: flex;
+      gap: $unnnic-spacing-lg;
+      widows: 100%;
+      flex: 1;
+
+      ::v-deep .unnnic-button {
+        width: 100%;
+      }
     }
 
     &__content {
diff --git a/src/components/config/ecommerce/vtex/Setup.vue b/src/components/config/ecommerce/vtex/Setup.vue
index 53061585..37385cc2 100644
--- a/src/components/config/ecommerce/vtex/Setup.vue
+++ b/src/components/config/ecommerce/vtex/Setup.vue
@@ -63,7 +63,6 @@
         this.$emit('closePopUp');
       },
       async setupVtex() {
-        console.log('Setup vtex', this.subdomain);
         this.$router.replace('/apps/my');
       },
       callModal({ text, type }) {
diff --git a/src/locales/en.json b/src/locales/en.json
index 51163be2..be56617d 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -978,5 +978,25 @@
       "name": "Catalog name",
       "footer": "By creating a catalog, you agree to the <a class='link' target='_blank' href='https://google.com'><b>Catalog Manager Terms</b></a> and confirm that you follow <a class='link' target='_blank' href='https://google.com'><b>Facebook's Advertising Policies</b></a>. Please review these policies and confirm that the items you upload to your catalog comply with them."
     }
+  },
+  "whatsapp": {
+    "create_catalog": {
+      "option": {
+        "vtex": {
+          "title": "VTEX Catalog",
+          "description": "Automatically connect your catalog through integration with the VTEX app"
+        },
+        "default": {
+          "title": "Standard sending",
+          "description": "Create a catalog using a link or XML file"
+        }
+      },
+      "footer": "To connect your VTEX catalog you need to have integrated the VTEX app on the platform. If you haven't integrated yet, click here",
+      "title": "Create catalog",
+      "header": {
+        "title": "Sending method",
+        "description": "Choose the way you want to send your catalog to start selling products via Whatsapp"
+      }
+    }
   }
 }
diff --git a/src/locales/es_es.json b/src/locales/es_es.json
index 1b344d29..56f6d90c 100644
--- a/src/locales/es_es.json
+++ b/src/locales/es_es.json
@@ -977,5 +977,25 @@
       "name": "Nombre del catálogo",
       "footer": "Al crear un catálogo, acepta los <a class='link' target='_blank' href='https://google.com'><b>Términos del Administrador de catálogos</b></a> y confirma que sigue las <a class='link' target='_blank' href='https://google.com'><b>Políticas publicitarias de Facebook</b></a>. Revise estas políticas y confirme que los artículos que cargue en su catálogo las cumplan."
     }
+  },
+  "whatsapp": {
+    "create_catalog": {
+      "option": {
+        "vtex": {
+          "title": "Catálogo VTEX",
+          "description": "Conecte automáticamente su catálogo mediante la integración con la aplicación VTEX"
+        },
+        "default": {
+          "title": "Envío estándar",
+          "description": "Crear un catálogo mediante un enlace o un archivo XML"
+        }
+      },
+      "footer": "Para conectar su catálogo VTEX necesita tener integrada la aplicación VTEX en la plataforma. \nSi aún no te has integrado, haz clic aquí",
+      "title": "Crear catálogo",
+      "header": {
+        "title": "Método de envío",
+        "description": "Elige la forma en la que quieres enviar tu catálogo para empezar a vender productos vía Whatsapp"
+      }
+    }
   }
 }
diff --git a/src/locales/pt_br.json b/src/locales/pt_br.json
index 891b96f7..f6d4355a 100644
--- a/src/locales/pt_br.json
+++ b/src/locales/pt_br.json
@@ -977,5 +977,25 @@
       "name": "Nome do catálogo",
       "footer": "Ao criar um catálogo, você concorda com os <a class='link' target='_blank' href='https://google.com'><b>Termos do Gerenciador de Catálogos</b></a> e confirma que segue as <a class='link' target='_blank' href='https://google.com'><b>Políticas de Publicidade do Facebook</b></a>. Verifique essas políticas e confirme que os itens que você carregar no seu catálogo estejam em conformidade com elas."
     }
+  },
+  "whatsapp": {
+    "create_catalog": {
+      "option": {
+        "vtex": {
+          "title": "Catálogo VTEX",
+          "description": "Conecte seu catálogo automaticamente através da integração com o app VTEX"
+        },
+        "default": {
+          "title": "Envio padrão",
+          "description": "Crie um catálogo usando um link ou arquivo XML"
+        }
+      },
+      "footer": "Para conectar seu catálogo VTEX você precisa ter integrado o app VTEX na plataforma. \nSe você ainda não integrou, clique aqui",
+      "title": "Criar catálogo",
+      "header": {
+        "title": "Método de envio",
+        "description": "Escolha a forma como deseja enviar seu catálogo para começar a vender produtos via Whatsapp"
+      }
+    }
   }
 }