Added buttons types and convert to formdata

sdkconsultoria · Mar 20, 2024 · 2fe3874 · 2fe3874
1 parent 7d91417
commit 2fe3874
Show file tree

Hide file tree

Showing 8 changed files with 112 additions and 38 deletions.
diff --git a/stubs/interface/resources/js/components/Messenger/Template/Create.vue b/stubs/interface/resources/js/components/Messenger/Template/Create.vue
@@ -18,8 +18,8 @@ import TemplatePreview from './Preview/Index.vue';
 
 const model = ref({
     components: {
-        header: {type: null},
-        body: {text: null},
+        header: { type: null },
+        body: { text: null },
         footer: {},
         buttons: [],
     },
@@ -33,14 +33,30 @@ const breadcrumbs = [
 async function submit() {
     const response = await fetch('/api/v1/template', {
         method: 'POST',
-        headers: {
-            'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(model.value)
+        body: convertJsonToFormData(model.value)
     });
 
     if (response.ok) {
         alert('Plantilla creada con éxito');
     }
 }
+
+function convertJsonToFormData(json) {
+    const formData = new FormData();
+    appendObjectToFormData(formData, json);
+    return formData;
+}
+
+function appendObjectToFormData(formData, object, prefix = null) {
+    for (const key in object) {
+        let newPrefix = prefix ? `${prefix}[${key}]` : key;
+        if (object[key] instanceof File) {
+            formData.append(prefix + key, object[key]);
+        } else if (object[key] instanceof Object) {
+            appendObjectToFormData(formData, object[key], newPrefix);
+        } else {
+            formData.append(newPrefix, object[key]);
+        }
+    }
+}
 </script>
diff --git a/stubs/interface/resources/js/components/Messenger/Template/Forms/Buttons.vue b/stubs/interface/resources/js/components/Messenger/Template/Forms/Buttons.vue
@@ -22,24 +22,29 @@
         <div v-for="(button, index) in quickReplyButtons">
             <QuickReply :field="button" :key="index" />
         </div>
-    </div>
-    <div>
-        Llamada a la acción
+        <div>
+            Llamada a la acción
+        </div>
+        <div v-for="(button, index) in callToActionButtons">
+            <PhoneNumber v-if="button.type === 'PHONE_NUMBER'" :field="button" :key="index" />
+            <Url v-if="button.type === 'URL'" :field="button" :key="index" />
+        </div>
     </div>
 </template>
 
 <script setup>
 import { defineModel, computed } from 'vue'
 import { PlusIcon } from '@heroicons/vue/24/outline';
 import QuickReply from './Buttons/QuickReply.vue';
+import PhoneNumber from './Buttons/PhoneNumber.vue';
+import Url from './Buttons/Url.vue';
 
 const model = defineModel('model')
 
-function addButton(type){
+function addButton(type) {
     model.value.push({
         type: type,
         text: '',
-        footer: 'Texto de pie de página'
     })
 
     document.getElementById('select-button').removeAttribute('open');

diff --git a/...s/interface/resources/js/components/Messenger/Template/Forms/Buttons/DisableMarketing.vue b/...s/interface/resources/js/components/Messenger/Template/Forms/Buttons/DisableMarketing.vue
@@ -2,9 +2,8 @@
     <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 v-model="field.type" class="select select-bordered w-ful">
+                <option value="QUICK_REPLY">Desactivar marketing</option>
             </select>
         </div>
         <div class="form-control w-1/3">
@@ -17,3 +16,11 @@
         </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/PhoneNumber.vue b/stubs/interface/resources/js/components/Messenger/Template/Forms/Buttons/PhoneNumber.vue
@@ -2,20 +2,25 @@
     <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 v-model="field.type" class="select select-bordered w-full">
+                <option value="PHONE_NUMBER">LLamar al número</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" />
+            <input v-model="field.text" 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" />
+            <label for="name">Número de teléfono</label>
+            <input v-model="field.phone_number" 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/QuickReply.vue b/stubs/interface/resources/js/components/Messenger/Template/Forms/Buttons/QuickReply.vue
@@ -2,9 +2,8 @@
     <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 v-model="field.type" class="select select-bordered w-full">
+                <option value="QUICK_REPLY">Personalizado</option>
             </select>
         </div>
         <div class="form-control w-2/3">

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
@@ -1,3 +1,33 @@
 <template>
-
+    <div class="flex gap-2 w-full">
+        <div class="form-control w-1/3">
+            <label for="name">Tipo de acción</label>
+            <select v-model="field.type" class="select select-bordered w-full">
+                <option value="URL">Ir al sitio web</option>
+            </select>
+        </div>
+        <div class="form-control w-1/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 class="form-control w-1/3">
+            <label for="name">Tipo de url</label>
+            <select v-model="field.isDynamic" class="select select-bordered w-full">
+                <option selected :value="false">Estática</option>
+                <option :value="true">Dinámica</option>
+            </select>
+        </div>
+        <div class="form-control w-1/3">
+            <label for="name">Url del sitio web</label>
+            <input v-model="field.url" 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/Header.vue b/stubs/interface/resources/js/components/Messenger/Template/Forms/Header.vue
@@ -3,37 +3,41 @@
         <label for="header">Cabecera</label>
         <select v-model="model.components.header.type" id="header" class="select select-bordered w-ful">
             <option disabled selected>Tipo de Cabecera</option>
-            <option value="text">Texto</option>
-            <option value="image">Imagen</option>
-            <option value="video">Video</option>
-            <option value="dodument">Documento</option>
-            <option value="ubication">Ubicación</option>
+            <option value="TEXT">Texto</option>
+            <option value="IMAGE">Imagen</option>
+            <option value="VIDEO">Video</option>
+            <option value="DOCUMENT">Documento</option>
+            <option value="LOCATION">Ubicación</option>
         </select>
     </div>
 
-    <div v-if="model.components.header.type === 'text'" class="form-control">
+    <div v-if="model.components.header.type === 'TEXT'" class="form-control">
         <label for="header-text">Texto</label>
         <input v-model="model.components.header.text" id="header-text" type="text" placeholder="Texto de la cabecera"
             class="input input-bordered w-full" />
     </div>
 
-    <div v-if="model.components.header.type === 'image'" class="form-control">
+    <div v-if="model.components.header.type === 'IMAGE'" class="form-control">
         <label for="header-text">Imagen</label>
-        <input type="file" class="file-input file-input-bordered w-full" />
+        <input @change="setFile" type="file" class="file-input file-input-bordered w-full" />
     </div>
 
-    <div v-if="model.components.header.type === 'video'" class="form-control">
+    <div v-if="model.components.header.type === 'VIDEO'" class="form-control">
         <label for="header-text">Video</label>
-        <input type="file" class="file-input file-input-bordered w-full" />
+        <input @change="setFile" type="file" class="file-input file-input-bordered w-full" />
     </div>
 
-    <div v-if="model.components.header.type === 'dodument'" class="form-control">
+    <div v-if="model.components.header.type === 'DOCUMENT'" class="form-control">
         <label for="header-text">Documento</label>
-        <input type="file" class="file-input file-input-bordered w-full" />
+        <input @change="setFile" type="file" class="file-input file-input-bordered w-full" />
     </div>
 </template>
 
 <script setup>
 import { defineModel } from 'vue'
 const model = defineModel('model')
+
+function setFile(event) {
+    model.value.components.header.file = event.target.files[0]
+}
 </script>
diff --git a/stubs/interface/resources/js/components/Messenger/Template/Preview/Index.vue b/stubs/interface/resources/js/components/Messenger/Template/Preview/Index.vue
@@ -19,4 +19,12 @@
 <script setup>
 const model = defineModel('model')
 
+function fileToBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result.split(",")[1]); // Extracting the Base64 string from the data URL
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+}
 </script>