From 67f252cdb27e62552e94588d581d04633e6c0351 Mon Sep 17 00:00:00 2001 From: Sthefani Date: Wed, 27 Sep 2023 19:57:56 -0300 Subject: [PATCH] feat: authentication category form --- .../AuthenticationCategoryForm.vue | 215 ++++++++++++++++++ .../whatsAppTemplates/FormTabContent.vue | 71 ++++-- src/locales/en.json | 31 +++ src/locales/es_es.json | 31 +++ src/locales/pt_br.json | 31 +++ .../whatsAppTemplates/FormTabContent.spec.js | 6 +- 6 files changed, 358 insertions(+), 27 deletions(-) create mode 100644 src/components/whatsAppTemplates/AuthenticationCategoryForm.vue diff --git a/src/components/whatsAppTemplates/AuthenticationCategoryForm.vue b/src/components/whatsAppTemplates/AuthenticationCategoryForm.vue new file mode 100644 index 00000000..222a1083 --- /dev/null +++ b/src/components/whatsAppTemplates/AuthenticationCategoryForm.vue @@ -0,0 +1,215 @@ + + + + + diff --git a/src/components/whatsAppTemplates/FormTabContent.vue b/src/components/whatsAppTemplates/FormTabContent.vue index a5ad3f1c..490ed5c7 100644 --- a/src/components/whatsAppTemplates/FormTabContent.vue +++ b/src/components/whatsAppTemplates/FormTabContent.vue @@ -22,7 +22,9 @@ 'form-tab-content__selects--category': true, 'form-tab-content__selects__disabled': disableInputs || formMode !== 'create', }" - :inputTitle="currentCategory || $t('WhatsApp.templates.form_field.category_placeholder')" + :inputTitle=" + translateCurrentCategory || $t('WhatsApp.templates.form_field.category_placeholder') + " :hideGroupTitle="true" :label="$t('WhatsApp.templates.form_field.category')" :groups="categoryGroups" @@ -51,28 +53,35 @@ - - - - + +
+ + + + +
@@ -103,6 +112,7 @@ import FormTabContentBody from '@/components/whatsAppTemplates/FormTabContentBody.vue'; import FormTabContentFooter from '@/components/whatsAppTemplates/FormTabContentFooter.vue'; import FormTabContentButtons from '@/components/whatsAppTemplates/FormTabContentButtons.vue'; + import AuthenticationCategoryForm from '@/components/whatsAppTemplates/AuthenticationCategoryForm.vue'; export default { name: 'FormTabContent', @@ -111,6 +121,7 @@ FormTabContentBody, FormTabContentFooter, FormTabContentButtons, + AuthenticationCategoryForm, }, props: { formMode: { @@ -190,7 +201,7 @@ currentLanguage() { return this.templateTranslationCurrentForm?.language; }, - currentCategory() { + translateCurrentCategory() { const category = this.categoryGroups[0].items.find( (item) => item.value === this.templateForm.category, ); @@ -205,6 +216,17 @@ canSave() { return !this.templateTranslationCurrentForm?.bodyHasError; }, + currentCategory() { + const category = this.categoryGroups[0].items.find( + (item) => item.value === this.templateForm.category, + ); + + if (!category) { + return ''; + } + + return category.value; + }, }, methods: { ...mapActions('WhatsApp', ['updateTemplateForm', 'updateTemplateTranslationForm']), @@ -400,7 +422,8 @@ &__body, &__footer, &__buttons, - &__actions { + &__actions, + &__authentication { margin-top: $unnnic-spacing-stack-lg; } diff --git a/src/locales/en.json b/src/locales/en.json index 660bfe39..42dea0e0 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -614,6 +614,37 @@ "success": { "create_translation": "Successfully created Template Translation", "update_translation": "Successfully updated Template Translation" + }, + "authentication_form": { + "code_delivery": { + "title": "Code delivery", + "autofill_label": "Autofill", + "autofill_description": "Recommended as the easiest option for your customers. The code is sent to your app when a customer taps the button. A Copy Code message will be sent when autocomplete is not possible.", + "autofill_tooltip": "Autofill will only work if your customer requests a code on the same device with their Whatsapp account. If automatic filling is not possible, a message informing you to copy the code will be sent.", + "package_name_label": "Package name", + "package_name_placeholder": "Ex: com.example.myapplication", + "signature_hash_label": "App signature hash", + "signature_hash_placeholder": "Write text", + "copy_label": "Copy code", + "copy_description": "Basic authentication with quick setup. Your customers copy and paste the code into your app.", + "copy_tooltip": "Customers click the button to copy and paste the code into the app itself. Works best for customers requesting a code on a device that doesn't contain their WhatsApp account." + }, + "message_content": { + "title": "Message content", + "description": "You cannot edit the content of authentication message templates. You can add more content from the options below.", + "security_recommendation_checkbox": "Add security recommendation", + "expiration_time_checkbox": "Add code expiration time", + "slider_label": "Expires in", + "slider_tooltip": "minutes" + }, + "button_text": { + "title": "Button text", + "description": "You can customize the button text to \"Autofill\" and \"Copy code\". Even when zero touch is enabled, the buttons are still required for the reservation code delivery method.", + "autofill_label": "Autofill", + "autofill_placeholder": "Automatic filling", + "copy_label": "Copy code", + "copy_placeholder": "Copy code" + } } } }, diff --git a/src/locales/es_es.json b/src/locales/es_es.json index fb139b18..84b95ec2 100644 --- a/src/locales/es_es.json +++ b/src/locales/es_es.json @@ -614,6 +614,37 @@ "success": { "create_translation": "Traducción de plantilla creada con éxito", "update_translation": "Traducción de plantilla actualizada con éxito" + }, + "authentication_form": { + "code_delivery": { + "title": "Entrega do código", + "autofill_label": "Autocompletar", + "autofill_description": "Recomendado como la opción más sencilla para sus clientes. El código se envía a su aplicación cuando un cliente toca el botón. Se enviará un mensaje de Copiar código cuando no sea posible completar automáticamente.", + "autofill_tooltip": "Autocompletar solo funcionará si su cliente solicita un código en el mismo dispositivo con su cuenta de Whatsapp. Si no es posible el llenado automático, se enviará un mensaje informándole que copie el código.", + "package_name_label": "Nombre del paquete", + "package_name_placeholder": "Ej: com.ejemplo.miaplicación", + "signature_hash_label": "Hash de firma de la aplicación", + "signature_hash_placeholder": "Escribir texto", + "copy_label": "Copiar código", + "copy_description": "Autenticación básica con configuración rápida. Sus clientes copian y pegan el código en su aplicación.", + "copy_tooltip": "Los clientes hacen clic en el botón para copiar y pegar el código en la aplicación. Funciona mejor para clientes que solicitan un código en un dispositivo que no contiene su cuenta de WhatsApp." + }, + "message_content": { + "title": "Contenido del mensaje", + "description": "No puede editar el contenido de las plantillas de mensajes de autenticación. Puede agregar más contenido desde las siguientes opciones.", + "security_recommendation_checkbox": "Agregar recomendación de seguridad", + "expiration_time_checkbox": "Agregar tiempo de vencimiento del código", + "slider_label": "Expira en", + "slider_tooltip": "minutos" + }, + "button_text": { + "title": "Botón de texto", + "description": "Puede personalizar el texto del botón para \"Autocompletar\" y \"Copiar código\". Incluso cuando el toque cero está habilitado, los botones aún son necesarios para el método de entrega del código de reserva.", + "autofill_label": "Autocompletar", + "autofill_placeholder": "Llenado automático", + "copy_label": "Copiar código", + "copy_placeholder": "Copiar código" + } } } }, diff --git a/src/locales/pt_br.json b/src/locales/pt_br.json index d9579fd7..f53e4214 100644 --- a/src/locales/pt_br.json +++ b/src/locales/pt_br.json @@ -614,6 +614,37 @@ "success": { "create_translation": "Tradução de template criada com sucesso", "update_translation": "Tradução de template atualizada com sucesso" + }, + "authentication_form": { + "code_delivery": { + "title": "Entrega do código", + "autofill_label": "Preencher automaticamente", + "autofill_description": "Recomendado como a opção mais fácil para seus clientes. O código é enviado ao seu app quando um cliente toca no botão. Uma mensagem Copiar código será enviada quando o preenchimento automático não for possível.", + "autofill_tooltip": "O preenchimento automático só vai funcionar se o seu cliente pedir um código no mesmo dispositivo com a conta do Whatsapp dele. Se o preenchimento automático não for possível, uma mensagem informando pra copiar o código vai ser enviada", + "package_name_label": "Nome do pacote", + "package_name_placeholder": "Ex: com.exemplo.meuaplicativo", + "signature_hash_label": "Hash de assinatura do app", + "signature_hash_placeholder": "Escreva o texto", + "copy_label": "Copiar código", + "copy_description": "Autenticação básica com configuração rápida. Seus clientes copiam e colam o código no seu app.", + "copy_tooltip": "Os clientes clicam no botão para copiar e colar o código no próprio app. Funciona melhor para clientes que solicitam um código em um dispositivo que não contém sua conta Whatsapp." + }, + "message_content": { + "title": "Conteúdo da mensagem", + "description": "Não é possível editar o conteúdo dos modelos de mensagem de autenticação. Você pode adicionar mais conteúdo das opções abaixo.", + "security_recommendation_checkbox": "Adicionar recomendação de segurança", + "expiration_time_checkbox": "Adicionar tempo de expiração do código", + "slider_label": "Expira em", + "slider_tooltip": "minutos" + }, + "button_text": { + "title": "Texto do botão", + "description": "É possível personalizar o texto do botão para \"Preencher automaticamente\" e \"Copiar código\". Mesmo quando o toque zero estiver ativado, os botões ainda serão necessários para o método de entrega de código de reserva.", + "autofill_label": "Preencher automaticamente", + "autofill_placeholder": "Preenchimento automático", + "copy_label": "Copiar código", + "copy_placeholder": "Copiar código" + } } } }, diff --git a/tests/unit/specs/components/whatsAppTemplates/FormTabContent.spec.js b/tests/unit/specs/components/whatsAppTemplates/FormTabContent.spec.js index a708815b..6c2599e6 100644 --- a/tests/unit/specs/components/whatsAppTemplates/FormTabContent.spec.js +++ b/tests/unit/specs/components/whatsAppTemplates/FormTabContent.spec.js @@ -483,13 +483,13 @@ describe('components/whatsAppTemplates/FormTabContent.vue', () => { }); }); - describe('currentCategory()', () => { + describe('translateCurrentCategory()', () => { it('should return empty string if category is not found', () => { const { wrapper, state } = mountComponent(); state.templateForm.category = 'not found'; - expect(wrapper.vm.currentCategory).toEqual(''); + expect(wrapper.vm.translateCurrentCategory).toEqual(''); }); it('should return category translation if category is found', () => { @@ -497,7 +497,7 @@ describe('components/whatsAppTemplates/FormTabContent.vue', () => { state.templateForm.category = 'MARKETING'; - expect(wrapper.vm.currentCategory).toEqual('Marketing'); + expect(wrapper.vm.translateCurrentCategory).toEqual('Marketing'); }); }); });