From 1fec86d2a28df52f3c1a2b7f441bed7c77e73139 Mon Sep 17 00:00:00 2001 From: Paulo Bernardo Date: Thu, 16 Nov 2023 13:56:45 -0300 Subject: [PATCH] feat: add app key and token guide in vtex setup --- src/components/config/ConfigModal.vue | 2 + src/components/config/ConfigPopUp.vue | 2 + .../config/ecommerce/vtex/Setup.vue | 85 ++++++++++++++----- src/locales/en.json | 9 +- src/locales/es_es.json | 7 +- src/locales/pt_br.json | 7 +- 6 files changed, 85 insertions(+), 27 deletions(-) diff --git a/src/components/config/ConfigModal.vue b/src/components/config/ConfigModal.vue index 89fc94b6..cc845356 100644 --- 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 index 6a95b7ca..977fef4f 100644 --- 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 index e8f52290..6a1ebb4d 100644 --- a/src/components/config/ecommerce/vtex/Setup.vue +++ b/src/components/config/ecommerce/vtex/Setup.vue @@ -9,13 +9,6 @@ >
- -
- +
+ + + +
+ + + {{ $t('vtex.setup.guide.question') }} + + {{ $t('vtex.setup.guide.link') }} + + {{ $t('vtex.setup.guide.question_end') }} +
.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 index fa3d4dbf..bb91a417 100644 --- 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 index 638f5e31..3f6cbf2c 100644 --- 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 index 04984650..75376060 100644 --- 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",