From b6d31fa93e37647aa6eb7d35dd23756c47b7742a Mon Sep 17 00:00:00 2001
From: Camilo Rodriguez <hellsythex@gmail.com>
Date: Thu, 14 Mar 2024 19:04:26 -0600
Subject: [PATCH] Added buttons

---
 .../Messenger/Template/Forms/Buttons.vue      | 94 +++++++------------
 .../Forms/Buttons/DisableMarketing.vue        | 19 ++++
 .../Template/Forms/Buttons/PhoneNumber.vue    | 21 +++++
 .../Template/Forms/Buttons/QuickReply.vue     | 23 +++++
 .../Messenger/Template/Forms/Buttons/Url.vue  |  3 +
 .../Messenger/Template/Forms/Form.vue         |  2 +-
 6 files changed, 101 insertions(+), 61 deletions(-)
 create mode 100644 stubs/interface/resources/js/components/Messenger/Template/Forms/Buttons/DisableMarketing.vue
 create mode 100644 stubs/interface/resources/js/components/Messenger/Template/Forms/Buttons/PhoneNumber.vue
 create mode 100644 stubs/interface/resources/js/components/Messenger/Template/Forms/Buttons/QuickReply.vue
 create mode 100644 stubs/interface/resources/js/components/Messenger/Template/Forms/Buttons/Url.vue

diff --git a/stubs/interface/resources/js/components/Messenger/Template/Forms/Buttons.vue b/stubs/interface/resources/js/components/Messenger/Template/Forms/Buttons.vue
index e5763da..951f660 100644
--- a/stubs/interface/resources/js/components/Messenger/Template/Forms/Buttons.vue
+++ b/stubs/interface/resources/js/components/Messenger/Template/Forms/Buttons.vue
@@ -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>
diff --git a/stubs/interface/resources/js/components/Messenger/Template/Forms/Buttons/DisableMarketing.vue b/stubs/interface/resources/js/components/Messenger/Template/Forms/Buttons/DisableMarketing.vue
new file mode 100644
index 0000000..e78640c
--- /dev/null
+++ b/stubs/interface/resources/js/components/Messenger/Template/Forms/Buttons/DisableMarketing.vue
@@ -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>
diff --git a/stubs/interface/resources/js/components/Messenger/Template/Forms/Buttons/PhoneNumber.vue b/stubs/interface/resources/js/components/Messenger/Template/Forms/Buttons/PhoneNumber.vue
new file mode 100644
index 0000000..d27a42f
--- /dev/null
+++ b/stubs/interface/resources/js/components/Messenger/Template/Forms/Buttons/PhoneNumber.vue
@@ -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>
diff --git a/stubs/interface/resources/js/components/Messenger/Template/Forms/Buttons/QuickReply.vue b/stubs/interface/resources/js/components/Messenger/Template/Forms/Buttons/QuickReply.vue
new file mode 100644
index 0000000..feb5949
--- /dev/null
+++ b/stubs/interface/resources/js/components/Messenger/Template/Forms/Buttons/QuickReply.vue
@@ -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>
diff --git a/stubs/interface/resources/js/components/Messenger/Template/Forms/Buttons/Url.vue b/stubs/interface/resources/js/components/Messenger/Template/Forms/Buttons/Url.vue
new file mode 100644
index 0000000..00d6860
--- /dev/null
+++ b/stubs/interface/resources/js/components/Messenger/Template/Forms/Buttons/Url.vue
@@ -0,0 +1,3 @@
+<template>
+
+</template>
diff --git a/stubs/interface/resources/js/components/Messenger/Template/Forms/Form.vue b/stubs/interface/resources/js/components/Messenger/Template/Forms/Form.vue
index 337fcb4..f80ba12 100644
--- a/stubs/interface/resources/js/components/Messenger/Template/Forms/Form.vue
+++ b/stubs/interface/resources/js/components/Messenger/Template/Forms/Form.vue
@@ -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'