Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: WhatsApp authentication template #332

Closed
wants to merge 2 commits into from
Closed

feat: WhatsApp authentication template #332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
67f252c
feat: authentication category form
sthefanisilveira Sep 27, 2023
4646f6d
Merge branch 'main' of https://github.com/weni-ai/weni-integrations-w…
paulobernardoaf Oct 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
215 changes: 215 additions & 0 deletions src/components/whatsAppTemplates/AuthenticationCategoryForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
71 changes: 47 additions & 24 deletions src/components/whatsAppTemplates/FormTabContent.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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',
Expand All @@ -111,6 +121,7 @@
FormTabContentBody,
FormTabContentFooter,
FormTabContentButtons,
AuthenticationCategoryForm,
},
props: {
formMode: {
Expand Down Expand Up @@ -190,7 +201,7 @@
currentLanguage() {
return this.templateTranslationCurrentForm?.language;
},
currentCategory() {
translateCurrentCategory() {
const category = this.categoryGroups[0].items.find(
(item) => item.value === this.templateForm.category,
);
Expand All @@ -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']),
Expand Down Expand Up @@ -400,7 +422,8 @@
&__body,
&__footer,
&__buttons,
&__actions {
&__actions,
&__authentication {
margin-top: $unnnic-spacing-stack-lg;
}

Expand Down
31 changes: 31 additions & 0 deletions src/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -653,6 +653,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"
}
}
}
},
Expand Down
Loading
Loading