feat: authentication category form

weni-ai · Sep 27, 2023 · 67f252c · 67f252c
1 parent 8032c96
commit 67f252c
Show file tree

Hide file tree

Showing 6 changed files with 358 additions and 27 deletions.
diff --git a/src/components/whatsAppTemplates/AuthenticationCategoryForm.vue b/src/components/whatsAppTemplates/AuthenticationCategoryForm.vue
@@ -0,0 +1,215 @@
+<template>
+  <div class="authentication-form">
+    <div class="authentication-form">
+      <span class="authentication-form__header__title">
+        {{ $t('WhatsApp.templates.authentication_form.code_delivery.title') }}
+      </span>
+
+      <unnnic-radio
+        v-for="(delivery, index) in codeDelivery"
+        :key="index"
+        v-model="selectedDelivery"
+        :options="codeDelivery"
+        :value="delivery"
+      >
+        {{ delivery }}
+
+        <unnnic-toolTip
+          v-if="delivery === 'Preencher automaticamente'"
+          :text="$t('WhatsApp.templates.authentication_form.code_delivery.autofill_tooltip')"
+          :enabled="true"
+          side="right"
+          maxWidth="600px"
+        >
+          <unnnic-icon-svg icon="information-circle-4" size="sm" scheme="neutral-soft" />
+        </unnnic-toolTip>
+        <unnnic-toolTip
+          v-else
+          :text="$t('WhatsApp.templates.authentication_form.code_delivery.copy_tooltip')"
+          :enabled="true"
+          side="right"
+          maxWidth="500px"
+        >
+          <unnnic-icon-svg icon="information-circle-4" size="sm" scheme="neutral-soft" />
+        </unnnic-toolTip>
+
+        <div
+          v-if="selectedDelivery === delivery && delivery === 'Preencher automaticamente'"
+          class="u font secondary body-md color-neutral-cloudy"
+        >
+          {{ $t('WhatsApp.templates.authentication_form.code_delivery.autofill_description') }}
+          <div class="authentication-form__wrapper">
+            <unnnic-input
+              :label="$t('WhatsApp.templates.authentication_form.code_delivery.package_name_label')"
+              :placeholder="
+                $t('WhatsApp.templates.authentication_form.code_delivery.package_name_placeholder')
+              "
+            >
+            </unnnic-input>
+            <unnnic-input
+              :label="
+                $t('WhatsApp.templates.authentication_form.code_delivery.signature_hash_label')
+              "
+              :placeholder="
+                $t(
+                  'WhatsApp.templates.authentication_form.code_delivery.signature_hash_placeholder',
+                )
+              "
+            >
+            </unnnic-input>
+          </div>
+        </div>
+
+        <div
+          v-else-if="selectedDelivery === delivery && delivery === 'Copiar código'"
+          class="u font secondary body-md color-neutral-cloudy"
+        >
+          {{ $t('WhatsApp.templates.authentication_form.code_delivery.copy_description') }}
+        </div>
+      </unnnic-radio>
+    </div>
+
+    <div class="authentication-form">
+      <div>
+        <div class="authentication-form__header">
+          <span class="authentication-form__header__title">
+            {{ $t('WhatsApp.templates.authentication_form.message_content.title') }}
+          </span>
+
+          <span class="authentication-form__header__description">
+            {{ $t('WhatsApp.templates.authentication_form.message_content.description') }}
+          </span>
+        </div>
+
+        <unnnic-checkbox
+          class="authentication-form__checkbox"
+          v-model="expiration"
+          :value="expiration"
+          :textRight="
+            $t('WhatsApp.templates.authentication_form.message_content.expiration_time_checkbox')
+          "
+        />
+        <unnnic-checkbox
+          v-model="security"
+          :value="security"
+          :textRight="
+            $t(
+              'WhatsApp.templates.authentication_form.message_content.security_recommendation_checkbox',
+            )
+          "
+        />
+        <div class="authentication-form__wrapper">
+          <span class="authentication-form__header__description">
+            {{ $t('WhatsApp.templates.authentication_form.message_content.slider_label') }}
+          </span>
+
+          <div class="authentication-form__wrapper__slider">
+            <unnnic-slider
+              :minValue="1"
+              :maxValue="90"
+              minLabel="1"
+              maxLabel="90"
+              :initialValue="10"
+            ></unnnic-slider>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="authentication-form">
+      <div>
+        <div class="authentication-form__header">
+          <span class="authentication-form__header__title">
+            {{ $t('WhatsApp.templates.authentication_form.button_text.title') }}
+          </span>
+
+          <span class="authentication-form__header__description">
+            {{ $t('WhatsApp.templates.authentication_form.button_text.description') }}
+          </span>
+        </div>
+
+        <unnnic-input
+          class="authentication-form__input"
+          :label="$t('WhatsApp.templates.authentication_form.button_text.autofill_label')"
+          :placeholder="
+            $t('WhatsApp.templates.authentication_form.button_text.autofill_placeholder')
+          "
+        >
+        </unnnic-input>
+        <unnnic-input
+          :label="$t('WhatsApp.templates.authentication_form.button_text.copy_label')"
+          :placeholder="$t('WhatsApp.templates.authentication_form.button_text.copy_placeholder')"
+        >
+        </unnnic-input>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'AuthenticationCategoryForm',
+    data() {
+      return {
+        expiration: false,
+        security: false,
+        selectedDelivery: 'Preencher automaticamente',
+        codeDelivery: ['Preencher automaticamente', 'Copiar código'],
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .authentication-form {
+    display: flex;
+    flex-direction: column;
+    gap: $unnnic-spacing-md;
+
+    &__header {
+      display: flex;
+      flex-direction: column;
+      gap: $unnnic-spacing-xs;
+
+      &__title {
+        font-size: $unnnic-font-size-body-lg;
+        line-height: $unnnic-font-size-body-lg + $unnnic-line-height-md;
+        font-weight: $unnnic-font-weight-bold;
+        color: $unnnic-color-neutral-darkest;
+      }
+
+      &__description {
+        font-size: $unnnic-font-size-body-gt;
+        line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
+        font-weight: $unnnic-font-weight-regular;
+        color: $unnnic-color-neutral-cloudy;
+        margin-bottom: $unnnic-spacing-sm;
+      }
+    }
+
+    &__wrapper {
+      display: flex;
+      flex-direction: column;
+      border: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
+      border-radius: $unnnic-border-radius-md;
+      padding: $unnnic-spacing-sm;
+      margin-top: $unnnic-spacing-sm;
+
+      &__slider {
+        width: 323px;
+      }
+    }
+
+    &__checkbox {
+      margin-bottom: $unnnic-spacing-sm;
+    }
+
+    &__input {
+      margin-bottom: $unnnic-spacing-md;
+    }
+
+    ::v-deep .unnnic-radio-container {
+      align-items: flex-start;
+    }
+  }
+</style>
diff --git 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 @@
         </option>
       </unnnic-select>
 
-      <FormTabContentHeader
-        class="form-tab-content__header"
-        :disableInputs="disableContentInputs"
-        @input-change="handleGenericInput"
-      />
-      <FormTabContentBody
-        ref="contentBody"
-        class="form-tab-content__body"
-        :disableInputs="disableContentInputs"
-        @input-change="handleGenericInput"
-        @manual-preview-update="$emit('manual-preview-update')"
-      />
-      <FormTabContentFooter
-        class="form-tab-content__footer"
-        :disableInputs="disableContentInputs"
-        @input-change="handleGenericInput"
-      />
-      <FormTabContentButtons
-        class="form-tab-content__buttons"
-        :disableInputs="disableContentInputs"
-        @input-change="handleGenericInput"
+      <AuthenticationCategoryForm
+        v-if="currentCategory === 'AUTHENTICATION'"
+        class="form-tab-content__authentication"
       />
+
+      <div v-else>
+        <FormTabContentHeader
+          class="form-tab-content__header"
+          :disableInputs="disableContentInputs"
+          @input-change="handleGenericInput"
+        />
+        <FormTabContentBody
+          ref="contentBody"
+          class="form-tab-content__body"
+          :disableInputs="disableContentInputs"
+          @input-change="handleGenericInput"
+          @manual-preview-update="$emit('manual-preview-update')"
+        />
+        <FormTabContentFooter
+          class="form-tab-content__footer"
+          :disableInputs="disableContentInputs"
+          @input-change="handleGenericInput"
+        />
+        <FormTabContentButtons
+          class="form-tab-content__buttons"
+          :disableInputs="disableContentInputs"
+          @input-change="handleGenericInput"
+        />
+      </div>
     </div>
 
     <div class="form-tab-content__actions">
@@ -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
@@ -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"
+        }
       }
     }
   },