Skip to content

Commit

Permalink
Added buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@hellsythe
hellsythe committed Mar 15, 2024
1 parent 364ebcb commit b6d31fa
Show file tree
Hide file tree
Showing 6 changed files with 101 additions and 61 deletions.
94 changes: 34 additions & 60 deletions stubs/interface/resources/js/components/Messenger/Template/Forms/Buttons.vue
View file
Original file line number Diff line number Diff line change
@@ -1,82 +1,56 @@
<template>
<div class="form-control">
<label for="name">Botones</label>
<div class="dropdown">
<div tabindex="0" role="button" class="btn m-1">
<details id="select-button" class="dropdown">
<summary tabindex="0" role="button" class="btn m-1">
<PlusIcon class="h-4 w-4" /> Agregar un botón
</div>
</summary>
<ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
<span class="menu-title">Botones de respuesta rápida</span>
<li><a>Desactivar marketing</a></li>
<li><a>Personalizado</a></li>
<!-- <li @click="addButton('anime')"><a>Desactivar marketing</a></li> -->
<li @click="addButton('QUICK_REPLY')"><a>Personalizado</a></li>
<span class="menu-title">Botones de Llamada a la acción</span>
<li><a>Ir al sitio web</a></li>
<li><a>Llamar al número de teléfono</a></li>
<li><a>Copiar óodigo de oferta</a></li>
<li @click="addButton('URL')"><a>Ir al sitio web</a></li>
<li @click="addButton('PHONE_NUMBER')"><a>Llamar al número de teléfono</a></li>
<!-- <li @click="addButton('anime')"><a>Copiar óodigo de oferta</a></li> -->
</ul>
</div>
</details>
</div>
<div>
Respuesta Rápida
<div class="flex gap-2 w-full">
<div class="form-control w-1/3">
<label for="name">Tipo</label>
<select class="select select-bordered w-ful">
<option value="AUTHENTICATION">Personalizado</option>
<option value="MARKETING">Desactivar marketing</option>
</select>
</div>
<div class="form-control w-2/3">
<label for="name">Texto del botón</label>
<input id="header-text" type="text" class="input input-bordered w-full" />
</div>
</div>

<div class="flex gap-2 w-full">
<div class="form-control w-1/3">
<label for="name">Tipo</label>
<select class="select select-bordered w-ful">
<option value="AUTHENTICATION">Personalizado</option>
<option value="MARKETING">Desactivar marketing</option>
</select>
</div>
<div class="form-control w-1/3">
<label for="name">Texto del botón</label>
<input id="header-text" type="text" class="input input-bordered w-full" />
</div>
<div class="form-control w-1/3">
<label for="name">Texto de pie de página</label>
<input id="header-text" type="text" class="input input-bordered w-full" />
</div>
<div v-if="quickReplyButtons">
Respuesta Rápida
<div v-for="(button, index) in quickReplyButtons">
<QuickReply :field="button" :key="index" />
</div>
</div>
<div>
Llamada a la acción
<div class="flex gap-2 w-full">
<div class="form-control w-1/3">
<label for="name">Tipo de acción</label>
<select class="select select-bordered w-ful">
<option value="AUTHENTICATION">LLamar al número</option>
<option value="MARKETING">Ir al sitio web</option>
<option value="MARKETING">Copiar código de oferta</option>
<option value="MARKETING">Ir al sitio web</option>
</select>
</div>
<div class="form-control w-1/3">
<label for="name">Texto del botón</label>
<input id="header-text" type="text" class="input input-bordered w-full" />
</div>
<div class="form-control w-1/3">
<label for="name">Texto de pie de página</label>
<input id="header-text" type="text" class="input input-bordered w-full" />
</div>
</div>
</div>
</template>

<script setup>
import { defineModel } from 'vue'
import { defineModel, computed } from 'vue'
import { PlusIcon } from '@heroicons/vue/24/outline';
import QuickReply from './Buttons/QuickReply.vue';
const model = defineModel('model')
function addButton(type){
model.value.push({
type: type,
text: '',
footer: 'Texto de pie de página'
})
document.getElementById('select-button').removeAttribute('open');
}
const quickReplyButtons = computed(() => {
return model.value.filter(button => button.type === 'QUICK_REPLY')
})
const callToActionButtons = computed(() => {
return model.value.filter(button => button.type === 'URL' || button.type === 'PHONE_NUMBER')
})
</script>
19 changes: 19 additions & 0 deletions ...s/interface/resources/js/components/Messenger/Template/Forms/Buttons/DisableMarketing.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<template>
<div class="flex gap-2 w-full">
<div class="form-control w-1/3">
<label for="name">Tipo</label>
<select class="select select-bordered w-ful">
<option value="AUTHENTICATION">Personalizado</option>
<option value="MARKETING">Desactivar marketing</option>
</select>
</div>
<div class="form-control w-1/3">
<label for="name">Texto del botón</label>
<input id="header-text" type="text" class="input input-bordered w-full" />
</div>
<div class="form-control w-1/3">
<label for="name">Texto de pie de página</label>
<input id="header-text" type="text" class="input input-bordered w-full" />
</div>
</div>
</template>
21 changes: 21 additions & 0 deletions stubs/interface/resources/js/components/Messenger/Template/Forms/Buttons/PhoneNumber.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<template>
<div class="flex gap-2 w-full">
<div class="form-control w-1/3">
<label for="name">Tipo de acción</label>
<select class="select select-bordered w-full">
<option value="AUTHENTICATION">LLamar al número</option>
<option value="MARKETING">Ir al sitio web</option>
<option value="MARKETING">Copiar código de oferta</option>
<option value="MARKETING">Ir al sitio web</option>
</select>
</div>
<div class="form-control w-1/3">
<label for="name">Texto del botón</label>
<input id="header-text" type="text" class="input input-bordered w-full" />
</div>
<div class="form-control w-1/3">
<label for="name">Texto de pie de página</label>
<input id="header-text" type="text" class="input input-bordered w-full" />
</div>
</div>
</template>
23 changes: 23 additions & 0 deletions stubs/interface/resources/js/components/Messenger/Template/Forms/Buttons/QuickReply.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<template>
<div class="flex gap-2 w-full">
<div class="form-control w-1/3">
<label for="name">Tipo</label>
<select class="select select-bordered w-full">
<option value="AUTHENTICATION">Personalizado</option>
<!-- <option value="MARKETING">Desactivar marketing</option> -->
</select>
</div>
<div class="form-control w-2/3">
<label for="name">Texto del botón</label>
<input v-model="field.text" id="header-text" type="text" class="input input-bordered w-full" />
</div>
</div>
</template>
<script setup>
const props = defineProps({
field: {
type: Object,
required: true
}
})
</script>
3 changes: 3 additions & 0 deletions stubs/interface/resources/js/components/Messenger/Template/Forms/Buttons/Url.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<template>

</template>
2 changes: 1 addition & 1 deletion stubs/interface/resources/js/components/Messenger/Template/Forms/Form.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@

<Footer v-model:model="model" />

<Buttons v-model:model="model" />
<Buttons v-model:model="model.components.buttons" />
</template>
<script setup>
import Header from './Header.vue'
Expand Down

0 comments on commit b6d31fa

Please sign in to comment.