up
This commit is contained in:
Lizandro Guarnizo
+219
-4
@@ -1119,21 +1119,25 @@ if (empty($user_id)) {
|
||||
option.value = template.name;
|
||||
option.textContent = `${display} (${lang})`;
|
||||
option.dataset.language = lang;
|
||||
option.dataset.templateId = template.id || '';
|
||||
templateSelect.appendChild(option);
|
||||
});
|
||||
|
||||
// Valor por defecto global para la plantilla seleccionada
|
||||
window.language = 'en_US';
|
||||
window.currentTemplateId = null;
|
||||
|
||||
// Actualizar el language global cuando cambie la plantilla seleccionada
|
||||
templateSelect.addEventListener('change', function() {
|
||||
const sel = this.selectedOptions[0];
|
||||
window.language = sel && sel.dataset && sel.dataset.language ? sel.dataset.language : 'en_US';
|
||||
window.currentTemplateId = sel && sel.dataset && sel.dataset.templateId ? sel.dataset.templateId : null;
|
||||
});
|
||||
|
||||
// Si hay una plantilla seleccionada por defecto, establecer language acorde
|
||||
if (templateSelect.selectedOptions.length && templateSelect.selectedOptions[0].dataset.language) {
|
||||
window.language = templateSelect.selectedOptions[0].dataset.language;
|
||||
window.currentTemplateId = templateSelect.selectedOptions[0].dataset.templateId;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
@@ -1167,7 +1171,13 @@ if (empty($user_id)) {
|
||||
return;
|
||||
}
|
||||
|
||||
await sendTemplateMessage(template,language, message);
|
||||
// Verificar si la plantilla tiene variables
|
||||
if (window.currentTemplateId) {
|
||||
await checkTemplateVariables(window.currentTemplateId, template, language);
|
||||
} else {
|
||||
// Plantilla sin variables, enviar directo
|
||||
await sendTemplateMessage(template, language, message);
|
||||
}
|
||||
} else {
|
||||
await sendTextMessage(message);
|
||||
}
|
||||
@@ -1216,22 +1226,33 @@ if (empty($user_id)) {
|
||||
}
|
||||
|
||||
// Enviar mensaje de plantilla
|
||||
async function sendTemplateMessage(template,language, parameters) {
|
||||
async function sendTemplateMessage(template, language, parameters) {
|
||||
try {
|
||||
showTyping();
|
||||
|
||||
console.log('Enviando plantilla:', {
|
||||
template,
|
||||
language,
|
||||
parameters,
|
||||
user: currentUser
|
||||
});
|
||||
|
||||
// Preparar parámetros según el formato
|
||||
let paramArray = [];
|
||||
if (Array.isArray(parameters)) {
|
||||
paramArray = parameters;
|
||||
} else if (typeof parameters === 'string' && parameters) {
|
||||
paramArray = parameters.split(',').map(p => p.trim());
|
||||
} else {
|
||||
paramArray = [];
|
||||
}
|
||||
|
||||
const requestBody = {
|
||||
recipient: currentUser.phone_number,
|
||||
type: 'template',
|
||||
template: template,
|
||||
language: language || 'en_US',
|
||||
parameters: parameters ? parameters.split(',') : []
|
||||
parameters: paramArray
|
||||
};
|
||||
|
||||
console.log('Request body:', requestBody);
|
||||
@@ -1245,7 +1266,10 @@ if (empty($user_id)) {
|
||||
hideTyping();
|
||||
|
||||
if (response && response.success) {
|
||||
addMessageToView(`Plantilla: ${template}`, 'outgoing');
|
||||
const displayMsg = paramArray.length > 0 ?
|
||||
`Plantilla: ${template} (con ${paramArray.length} variable(s))` :
|
||||
`Plantilla: ${template}`;
|
||||
addMessageToView(displayMsg, 'outgoing');
|
||||
showAlert('Mensaje de plantilla enviado correctamente', 'success');
|
||||
} else {
|
||||
throw new Error(response.error || 'Error enviando plantilla');
|
||||
@@ -1925,6 +1949,197 @@ if (empty($user_id)) {
|
||||
const bsModal = new bootstrap.Modal(modal);
|
||||
bsModal.show();
|
||||
}
|
||||
|
||||
// Variables globales para el modal de plantillas
|
||||
let currentTemplateData = null;
|
||||
|
||||
// Verificar si la plantilla tiene variables
|
||||
async function checkTemplateVariables(templateId, templateName, language) {
|
||||
try {
|
||||
const response = await whatsappManager.apiCall(`get_template_details.php?id=${templateId}`);
|
||||
|
||||
if (response && response.success && response.template) {
|
||||
currentTemplateData = response.template;
|
||||
|
||||
if (response.template.has_variables) {
|
||||
// Mostrar modal para llenar variables
|
||||
showTemplateVariablesModal(response.template);
|
||||
} else {
|
||||
// Enviar directo sin variables
|
||||
await sendTemplateMessage(templateName, language, []);
|
||||
}
|
||||
} else {
|
||||
throw new Error('No se pudo obtener detalles de la plantilla');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error checking template variables:', error);
|
||||
showAlert('Error al cargar detalles de plantilla: ' + error.message, 'danger');
|
||||
}
|
||||
}
|
||||
|
||||
// Mostrar modal con campos para variables
|
||||
function showTemplateVariablesModal(template) {
|
||||
// Actualizar información del encabezado
|
||||
document.getElementById('templateNameDisplay').textContent = template.name;
|
||||
document.getElementById('templateLanguageDisplay').textContent = `Idioma: ${template.language_code}`;
|
||||
document.getElementById('templateVariablesCount').textContent = `${template.variables_count} variable(s) requerida(s)`;
|
||||
|
||||
// Generar formulario de variables
|
||||
const formContainer = document.getElementById('variablesForm');
|
||||
formContainer.innerHTML = '';
|
||||
|
||||
template.variables.forEach((variable, index) => {
|
||||
const fieldHtml = `
|
||||
<div class="mb-3">
|
||||
<label class="form-label">
|
||||
<strong>${variable.label}</strong>
|
||||
${variable.example ? `<small class="text-muted">(ej: ${variable.example})</small>` : ''}
|
||||
</label>
|
||||
<input type="text"
|
||||
class="form-control template-variable-input"
|
||||
data-index="${index}"
|
||||
data-var-number="${variable.index}"
|
||||
placeholder="${variable.example || 'Ingrese valor...'}"
|
||||
required>
|
||||
</div>
|
||||
`;
|
||||
formContainer.insertAdjacentHTML('beforeend', fieldHtml);
|
||||
});
|
||||
|
||||
// Event listeners para actualizar preview en tiempo real
|
||||
const inputs = formContainer.querySelectorAll('.template-variable-input');
|
||||
inputs.forEach(input => {
|
||||
input.addEventListener('input', updateTemplatePreview);
|
||||
});
|
||||
|
||||
// Inicializar preview vacío
|
||||
updateTemplatePreview();
|
||||
|
||||
// Mostrar modal
|
||||
const modal = new bootstrap.Modal(document.getElementById('templateVariablesModal'));
|
||||
modal.show();
|
||||
|
||||
// Event listener para botón de envío
|
||||
document.getElementById('btnSendTemplateWithVariables').onclick = sendTemplateWithVariables;
|
||||
}
|
||||
|
||||
// Actualizar vista previa de la plantilla
|
||||
async function updateTemplatePreview() {
|
||||
if (!currentTemplateData) return;
|
||||
|
||||
const inputs = document.querySelectorAll('.template-variable-input');
|
||||
const parameters = [];
|
||||
|
||||
inputs.forEach(input => {
|
||||
parameters.push(input.value || '');
|
||||
});
|
||||
|
||||
try {
|
||||
const response = await whatsappManager.apiCall('preview_template.php', {
|
||||
body: {
|
||||
template_id: currentTemplateData.id,
|
||||
parameters: parameters
|
||||
}
|
||||
});
|
||||
|
||||
if (response && response.success && response.preview) {
|
||||
const previewContainer = document.getElementById('templatePreview');
|
||||
|
||||
if (response.preview.is_complete) {
|
||||
previewContainer.innerHTML = response.preview.html;
|
||||
previewContainer.className = 'p-3 bg-light rounded border border-success';
|
||||
} else {
|
||||
previewContainer.innerHTML = response.preview.html +
|
||||
'<div class="text-warning mt-2"><small><i class="fas fa-exclamation-triangle"></i> Faltan variables por completar</small></div>';
|
||||
previewContainer.className = 'p-3 bg-light rounded border border-warning';
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error updating preview:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Enviar plantilla con variables
|
||||
async function sendTemplateWithVariables() {
|
||||
if (!currentTemplateData) return;
|
||||
|
||||
const inputs = document.querySelectorAll('.template-variable-input');
|
||||
const parameters = [];
|
||||
let allFilled = true;
|
||||
|
||||
inputs.forEach(input => {
|
||||
const value = input.value.trim();
|
||||
if (!value) {
|
||||
allFilled = false;
|
||||
input.classList.add('is-invalid');
|
||||
} else {
|
||||
input.classList.remove('is-invalid');
|
||||
}
|
||||
parameters.push(value);
|
||||
});
|
||||
|
||||
if (!allFilled) {
|
||||
showAlert('Por favor complete todas las variables requeridas', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
// Cerrar modal
|
||||
const modal = bootstrap.Modal.getInstance(document.getElementById('templateVariablesModal'));
|
||||
modal.hide();
|
||||
|
||||
// Enviar plantilla con parámetros
|
||||
await sendTemplateMessage(
|
||||
currentTemplateData.template_name,
|
||||
currentTemplateData.language_code,
|
||||
parameters
|
||||
);
|
||||
|
||||
// Limpiar datos
|
||||
currentTemplateData = null;
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Modal para Variables de Plantilla -->
|
||||
<div class="modal fade" id="templateVariablesModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-success text-white">
|
||||
<h5 class="modal-title">
|
||||
<i class="fas fa-edit"></i> Completar Variables de Plantilla
|
||||
</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="templateInfo" class="alert alert-info mb-3">
|
||||
<strong id="templateNameDisplay"></strong>
|
||||
<div class="small mt-1">
|
||||
<span id="templateLanguageDisplay"></span> |
|
||||
<span id="templateVariablesCount"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="variablesForm"></div>
|
||||
|
||||
<div class="mt-3">
|
||||
<h6 class="border-bottom pb-2">
|
||||
<i class="fas fa-eye"></i> Vista Previa
|
||||
</h6>
|
||||
<div id="templatePreview" class="p-3 bg-light rounded" style="min-height: 80px;">
|
||||
<em class="text-muted">Complete los campos para ver la vista previa...</em>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
|
||||
Cancelar
|
||||
</button>
|
||||
<button type="button" class="btn btn-success" id="btnSendTemplateWithVariables">
|
||||
<i class="fas fa-paper-plane"></i> Enviar Mensaje
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user