feat: add app key and token guide in vtex setup

weni-ai · Nov 16, 2023 · 1fec86d · 1fec86d
1 parent ada4581
commit 1fec86d
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 27 deletions.
diff --git a/src/components/config/ConfigModal.vue b/src/components/config/ConfigModal.vue
@@ -58,6 +58,7 @@
   import facebookConfig from '@/components/config/channels/facebook/Config.vue';
   import omieConfig from '@/components/config/external/omie/Config.vue';
   import chatGptConfig from '@/components/config/external/chatgpt/Config.vue';
+  import vtexConfig from '@/components/config/ecommerce/vtex/Config.vue';
 
   export default {
     name: 'Modal',
@@ -80,6 +81,7 @@
           fba: facebookConfig,
           omie: omieConfig,
           chatgpt: chatGptConfig,
+          vtex: vtexConfig,
         },
       };
     },

diff --git a/src/components/config/ConfigPopUp.vue b/src/components/config/ConfigPopUp.vue
@@ -16,6 +16,7 @@
   import wppCloudSetup from './channels/whatsapp/Setup.vue';
   import facebookSetup from './channels/facebook/Setup.vue';
   import chatGptSetup from './external/chatgpt/Setup.vue';
+  import vtexSetup from './ecommerce/vtex/Setup.vue';
 
   export default {
     name: 'Config-PopUp',
@@ -31,6 +32,7 @@
           ig: facebookSetup,
           fba: facebookSetup,
           chatgpt: chatGptSetup,
+          vtex: vtexSetup,
         },
       };
     },

diff --git a/src/components/config/ecommerce/vtex/Setup.vue b/src/components/config/ecommerce/vtex/Setup.vue
@@ -9,13 +9,6 @@
   >
     <div slot="message" class="vtex-modal__content">
       <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
@@ -29,17 +22,38 @@
 
         <unnnic-input
           class="vtex-modal__content__form__input__subdomain"
-          v-model="appKey"
-          :label="$t('vtex.setup.appKey')"
-          :placeholder="$t('vtex.setup.appKey_placeholder')"
+          v-model="subdomain"
+          :label="$t('vtex.setup.subdomain')"
+          :placeholder="$t('vtex.setup.subdomain_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 class="vtex-modal__content__form__keys">
+          <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>
+
+        <span class="vtex-modal__content__form__guide">
+          {{ $t('vtex.setup.guide.question') }}
+          <a
+            href="https://help.vtex.com/en/tutorial/application-keys--2iffYzlvvz4BDMr6WGUtet"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {{ $t('vtex.setup.guide.link') }}
+          </a>
+          {{ $t('vtex.setup.guide.question_end') }}
+        </span>
       </div>
     </div>
     <unnnic-button
@@ -151,30 +165,33 @@
 <style lang="scss" scoped>
   .vtex-modal {
     ::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;
+        cursor: auto;
+        box-shadow: none;
       }
       .unnnic-modal-container-background-body {
         border-radius: $unnnic-border-radius-sm $unnnic-border-radius-sm 0px 0px;
+        padding-top: $unnnic-spacing-giant;
+      }
+
+      .unnnic-modal-container-background-body-title {
+        padding-bottom: $unnnic-spacing-xs;
       }
+
       .unnnic-modal-container-background-body-description-container {
-        padding-bottom: $unnnic-spacing-md;
+        padding-bottom: $unnnic-spacing-xs;
       }
     }
 
     &__content {
       display: flex;
       flex-direction: column;
+      margin-top: $unnnic-spacing-md;
 
       &__title {
         font-family: $unnnic-font-family-secondary;
@@ -194,6 +211,28 @@
         flex-direction: column;
         gap: $unnnic-spacing-stack-sm;
         text-align: left;
+
+        &__keys {
+          display: inline-flex;
+          flex: 1;
+          gap: $unnnic-spacing-sm;
+
+          .unnnic-form {
+            flex: 1;
+          }
+        }
+
+        &__guide {
+          color: $unnnic-color-neutral-cloudy;
+          font-size: $unnnic-font-size-body-gt;
+          line-height: $unnnic-line-height-md + $unnnic-font-size-body-gt;
+
+          a {
+            color: $unnnic-color-neutral-cloudy;
+            font-weight: $unnnic-font-weight-bold;
+            text-decoration-line: underline;
+          }
+        }
       }
     }
   }

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -944,11 +944,16 @@
       "description": "To proceed with the instalation insert a subdomain",
       "subdomain": "Subdomain",
       "subdomain_placeholder": "Ex: shop.myvtex.com",
-      "whatsapp_channel": "WhatsApp number",
+      "whatsapp_channel": "WhatsApp Number",
       "appKey": "AppKey",
       "appKey_placeholder": "Insert your AppKey",
       "appToken": "AppToken",
-      "appToken_placeholder": "Insert your AppToken"
+      "appToken_placeholder": "Insert your AppToken",
+      "guide": {
+        "question": "Don't know your AppKey and AppToken?",
+        "question_end": "to access the documentation on VTEX and find out.",
+        "link": "Click here"
+      }
     },
     "config": {
       "description": "Connect your VTEX catalog to send products via Whatsapp",

diff --git a/src/locales/es_es.json b/src/locales/es_es.json
@@ -948,7 +948,12 @@
       "appKey_placeholder": "Inserta tu AppKey",
       "appToken": "AppToken",
       "appToken_placeholder": "Inserta tu AppToken",
-      "whatsapp_channel": "Numero WhatsApp"
+      "whatsapp_channel": "Numero WhatsApp",
+      "guide": {
+        "question": "¿No conoces tu AppKey y AppToken?",
+        "link": "haga clic aquí",
+        "question_end": "para acceder a la documentación sobre VTEX y descubrirlo."
+      }
     },
     "config": {
       "description": "Conecte su catálogo VTEX para enviar productos vía Whatsapp",

diff --git a/src/locales/pt_br.json b/src/locales/pt_br.json
@@ -948,7 +948,12 @@
       "appKey_placeholder": "Insira sua AppKey",
       "appToken": "AppToken",
       "appToken_placeholder": "Insira seu AppToken",
-      "whatsapp_channel": "Número do WhatsApp"
+      "whatsapp_channel": "Número do WhatsApp",
+      "guide": {
+        "question": "Não conhece seu AppKey e AppToken?",
+        "link": "Clique aqui",
+        "question_end": "para acessar a documentação da VTEX e descobrir."
+      }
     },
     "config": {
       "description": "Conecte seu catálogo VTEX para enviar produtos pelo WhatsApp",