feat: add channel select, appkey and apptoken inputs in vtex setup

src/components/config/ecommerce/vtex/Setup.vue

@@ -1,16 +1,45 @@
 <template>
-  <unnnic-modal class="vtex-modal" @close="closePopUp" @click.stop :closeIcon="false">
+  <unnnic-modal
+    class="vtex-modal"
+    @close="closePopUp"
+    @click.stop
+    :closeIcon="false"
+    :text="$t('vtex.setup.title')"
+    :description="$t('vtex.setup.description')"
+  >
     <div slot="message" class="vtex-modal__content">
-      <span class="vtex-modal__content__title">{{ $t('vtex.setup.title') }}</span>
-      <span class="vtex-modal__content__description">{{ $t('vtex.setup.description') }}</span>
-
       <div class="vtex-modal__content__form">
         <unnnic-input
           class="vtex-modal__content__form__input__subdomain"
           v-model="subdomain"
           :label="$t('vtex.setup.subdomain')"
           :placeholder="$t('vtex.setup.subdomain_placeholder')"
         />
+
+        <div>
+          <unnnic-label :label="$t('vtex.setup.whatsapp_channel')" />
+          <unnnic-select-smart
+            v-if="!loadingChannels"
+            ref="whatsappChannelSelect"
+            v-model="selectedChannel"
+            :options="whatsappChannels"
+          />
+          <unnnic-skeleton-loading v-else tag="div" width="100%" height="42px" />
+        </div>
+
+        <unnnic-input
+          class="vtex-modal__content__form__input__subdomain"
+          v-model="appKey"
+          :label="$t('vtex.setup.appKey')"
+          :placeholder="$t('vtex.setup.appKey_placeholder')"
+        />
+
+        <unnnic-input
+          class="vtex-modal__content__form__input__subdomain"
+          v-model="appToken"
+          :label="$t('vtex.setup.appToken')"
+          :placeholder="$t('vtex.setup.appToken_placeholder')"
+        />
       </div>
     </div>
     <unnnic-button
@@ -48,23 +77,60 @@
     data() {
       return {
         subdomain: '',
+        whatsappChannels: [],
+        selectedChannel: [],
+        loadingChannels: true,
+        appKey: null,
+        appToken: null,
       };
     },
+    mounted() {
+      this.getWhatsAppChannels();
+    },
     computed: {
       ...mapState({
         project: (state) => state.auth.project,
+        configuredApps: (state) => state.myApps.configuredApps,
+        loadingConfiguredApps: (state) => state.myApps.loadingConfiguredApps,
+        errorConfiguredApps: (state) => state.myApps.errorConfiguredApps,
         loadingCreateApp: (state) => state.appType.loadingCreateApp,
         errorCreateApp: (state) => state.appType.errorCreateApp,
       }),
     },
     methods: {
-      ...mapActions(['createApp']),
+      ...mapActions(['createApp', 'getConfiguredApps']),
       closePopUp() {
         this.$emit('closePopUp');
       },
       async setupVtex() {
         this.$router.replace('/apps/my');
       },
+      async getWhatsAppChannels() {
+        this.loadingChannels = true;
+        const params = {
+          project_uuid: this.project,
+        };
+        await this.getConfiguredApps({ params });
+
+        if (this.errorConfiguredApps) {
+          this.callErrorModal({ text: this.$t('apps.myApps.error.configured') });
+          return;
+        }
+        this.whatsappChannels = this.configuredApps
+          .filter((app) => app.code === 'wpp-cloud' || app.code === 'wpp')
+          .map((wppChannel) => {
+            return {
+              label: `${wppChannel.config.wa_verified_name} - (${wppChannel.config.title})`,
+              value: wppChannel.uuid,
+            };
+          });
+
+        if (this.whatsappChannels.length === 1) {
+          this.selectedChannel = [this.whatsappChannels[0]];
+        }
+
+        this.loadingChannels = false;
+      },
       callModal({ text, type }) {
         unnnicCallAlert({
           props: {
@@ -84,8 +150,26 @@
 
 <style lang="scss" scoped>
   .vtex-modal {
-    ::v-deep .unnnic-modal-container-background-body-description-container {
-      padding-bottom: $unnnic-spacing-stack-xs;
+    ::v-deep {
+      .container {
+        padding: $unnnic-squish-md !important;
+      }
+      .header {
+        margin-bottom: $unnnic-spacing-stack-nano !important;
+      }
+      .unnnic-modal-container-background {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        padding: 0 $unnnic-spacing-md;
+        max-height: 95vh;
+      }
+      .unnnic-modal-container-background-body {
+        border-radius: $unnnic-border-radius-sm $unnnic-border-radius-sm 0px 0px;
+      }
+      .unnnic-modal-container-background-body-description-container {
+        padding-bottom: $unnnic-spacing-md;
+      }
     }
 
     &__content {
@@ -108,7 +192,7 @@
       &__form {
         display: flex;
         flex-direction: column;
-        gap: $unnnic-spacing-stack-lg;
+        gap: $unnnic-spacing-stack-sm;
         text-align: left;
       }
     }

src/locales/en.json

@@ -943,7 +943,12 @@
       "title": "Integrate with VTEX",
       "description": "To proceed with the instalation insert a subdomain",
       "subdomain": "Subdomain",
-      "subdomain_placeholder": "Ex: shop.myvtex.com"
+      "subdomain_placeholder": "Ex: shop.myvtex.com",
+      "whatsapp_channel": "WhatsApp number",
+      "appKey": "AppKey",
+      "appKey_placeholder": "Insert your AppKey",
+      "appToken": "AppToken",
+      "appToken_placeholder": "Insert your AppToken"
     },
     "config": {
       "description": "Connect your VTEX catalog to send products via Whatsapp",

src/locales/es_es.json

@@ -943,7 +943,12 @@
       "title": "Integrar con VTEX",
       "description": "Para continuar con la instalación inserte un subdominio",
       "subdomain": "Subdominio",
-      "subdomain_placeholder": "Ej: tienda.myvtex.com"
+      "subdomain_placeholder": "Ej: tienda.myvtex.com",
+      "appKey": "AppKey",
+      "appKey_placeholder": "Inserta tu AppKey",
+      "appToken": "AppToken",
+      "appToken_placeholder": "Inserta tu AppToken",
+      "whatsapp_channel": "Numero WhatsApp"
     },
     "config": {
       "description": "Conecte su catálogo VTEX para enviar productos vía Whatsapp",

src/locales/pt_br.json

@@ -943,7 +943,12 @@
       "title": "Integrar com VTEX",
       "description": "Para fazer a instalação insira um subdomínio",
       "subdomain": "Subdomínio",
-      "subdomain_placeholder": "Ex: lojaweni.myvtex.com"
+      "subdomain_placeholder": "Ex: lojaweni.myvtex.com",
+      "appKey": "AppKey",
+      "appKey_placeholder": "Insira sua AppKey",
+      "appToken": "AppToken",
+      "appToken_placeholder": "Insira seu AppToken",
+      "whatsapp_channel": "Número do WhatsApp"
     },
     "config": {
       "description": "Conecte seu catálogo VTEX para enviar produtos pelo WhatsApp",