Backup pre-corrección namespaces: mejoras schemas y componentes
Cambios incluidos: - Actualización de copy/textos en 7 schemas JSON - Mejoras en AdminAjaxHandler con mapeos adicionales - Refactorización de FormBuilders y Renderers - Correcciones en dashboard admin JS - Nuevo ContactFormRenderer funcional NOTA: Este commit sirve como respaldo antes de corregir inconsistencias de case en namespaces (API→Api, WordPress→Wordpress) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
@@ -50,6 +50,21 @@ final class ContactFormRenderer implements RendererInterface
|
||||
return sprintf("<style>%s</style>\n%s\n<script>%s</script>", $css, $html, $js);
|
||||
}
|
||||
|
||||
/**
|
||||
* Renderiza el modal de contacto para el boton Let's Talk
|
||||
* Usa la misma configuracion y webhook que el formulario de seccion
|
||||
*/
|
||||
public function renderModal(Component $component): string
|
||||
{
|
||||
$data = $component->getData();
|
||||
|
||||
$css = $this->generateModalCSS($data);
|
||||
$html = $this->buildModalHTML($data);
|
||||
$js = $this->buildModalJS($data);
|
||||
|
||||
return sprintf("<style>%s</style>\n%s\n<script>%s</script>", $css, $html, $js);
|
||||
}
|
||||
|
||||
public function supports(string $componentType): bool
|
||||
{
|
||||
return $componentType === 'contact-form';
|
||||
@@ -454,6 +469,307 @@ final class ContactFormRenderer implements RendererInterface
|
||||
});
|
||||
});
|
||||
})();
|
||||
JS;
|
||||
|
||||
return $js;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generar CSS para el modal
|
||||
*/
|
||||
private function generateModalCSS(array $data): string
|
||||
{
|
||||
$colors = $data['colors'] ?? [];
|
||||
$effects = $data['visual_effects'] ?? [];
|
||||
|
||||
$cssRules = [];
|
||||
|
||||
// Modal header con gradiente del tema
|
||||
$cssRules[] = $this->cssGenerator->generate('#contactModal .modal-header', [
|
||||
'background' => 'linear-gradient(135deg, #0E2337 0%, #1e3a5f 100%)',
|
||||
'border-bottom' => 'none',
|
||||
'padding' => '1.5rem',
|
||||
]);
|
||||
|
||||
$cssRules[] = $this->cssGenerator->generate('#contactModal .modal-title', [
|
||||
'color' => '#ffffff',
|
||||
'font-weight' => '600',
|
||||
]);
|
||||
|
||||
$cssRules[] = $this->cssGenerator->generate('#contactModal .btn-close', [
|
||||
'filter' => 'brightness(0) invert(1)',
|
||||
]);
|
||||
|
||||
// Modal body
|
||||
$cssRules[] = $this->cssGenerator->generate('#contactModal .modal-body', [
|
||||
'padding' => '2rem',
|
||||
]);
|
||||
|
||||
// Form inputs
|
||||
$inputBorderColor = $colors['input_border_color'] ?? '#dee2e6';
|
||||
$inputFocusBorder = $colors['input_focus_border'] ?? '#FF8600';
|
||||
$inputBorderRadius = $effects['input_border_radius'] ?? '6px';
|
||||
$transitionDuration = $effects['transition_duration'] ?? '0.3s';
|
||||
|
||||
$cssRules[] = $this->cssGenerator->generate('#contactModal .form-control', [
|
||||
'border-color' => $inputBorderColor,
|
||||
'border-radius' => $inputBorderRadius,
|
||||
'transition' => "all {$transitionDuration} ease",
|
||||
]);
|
||||
|
||||
$cssRules[] = $this->cssGenerator->generate('#contactModal .form-control:focus', [
|
||||
'border-color' => $inputFocusBorder,
|
||||
'box-shadow' => '0 0 0 0.2rem rgba(255, 134, 0, 0.25)',
|
||||
'outline' => 'none',
|
||||
]);
|
||||
|
||||
// Submit button
|
||||
$buttonBgColor = $colors['button_bg_color'] ?? '#FF8600';
|
||||
$buttonTextColor = $colors['button_text_color'] ?? '#ffffff';
|
||||
$buttonHoverBg = $colors['button_hover_bg'] ?? '#e67a00';
|
||||
$buttonBorderRadius = $effects['button_border_radius'] ?? '6px';
|
||||
$buttonPadding = $effects['button_padding'] ?? '0.75rem 2rem';
|
||||
|
||||
$cssRules[] = $this->cssGenerator->generate('#contactModal .btn-modal-submit', [
|
||||
'background-color' => $buttonBgColor,
|
||||
'color' => $buttonTextColor,
|
||||
'font-weight' => '600',
|
||||
'padding' => $buttonPadding,
|
||||
'border' => 'none',
|
||||
'border-radius' => $buttonBorderRadius,
|
||||
'transition' => "all {$transitionDuration} ease",
|
||||
]);
|
||||
|
||||
$cssRules[] = $this->cssGenerator->generate('#contactModal .btn-modal-submit:hover', [
|
||||
'background-color' => $buttonHoverBg,
|
||||
'color' => $buttonTextColor,
|
||||
]);
|
||||
|
||||
$cssRules[] = $this->cssGenerator->generate('#contactModal .btn-modal-submit:disabled', [
|
||||
'opacity' => '0.7',
|
||||
'cursor' => 'not-allowed',
|
||||
]);
|
||||
|
||||
// Success/Error messages
|
||||
$successBgColor = $colors['success_bg_color'] ?? '#d1e7dd';
|
||||
$successTextColor = $colors['success_text_color'] ?? '#0f5132';
|
||||
$errorBgColor = $colors['error_bg_color'] ?? '#f8d7da';
|
||||
$errorTextColor = $colors['error_text_color'] ?? '#842029';
|
||||
|
||||
$cssRules[] = $this->cssGenerator->generate('#contactModal .alert-success', [
|
||||
'background-color' => $successBgColor,
|
||||
'color' => $successTextColor,
|
||||
'border-color' => $successBgColor,
|
||||
]);
|
||||
|
||||
$cssRules[] = $this->cssGenerator->generate('#contactModal .alert-danger', [
|
||||
'background-color' => $errorBgColor,
|
||||
'color' => $errorTextColor,
|
||||
'border-color' => $errorBgColor,
|
||||
]);
|
||||
|
||||
return implode("\n", $cssRules);
|
||||
}
|
||||
|
||||
/**
|
||||
* Generar HTML del modal
|
||||
*/
|
||||
private function buildModalHTML(array $data): string
|
||||
{
|
||||
$content = $data['content'] ?? [];
|
||||
$formLabels = $data['form_labels'] ?? [];
|
||||
$effects = $data['visual_effects'] ?? [];
|
||||
|
||||
// Content
|
||||
$sectionTitle = $content['section_title'] ?? '¿Tienes alguna pregunta?';
|
||||
$submitText = $content['submit_button_text'] ?? 'Enviar Mensaje';
|
||||
$submitIcon = $content['submit_button_icon'] ?? 'bi-send-fill';
|
||||
|
||||
// Form labels/placeholders
|
||||
$fullnamePlaceholder = $formLabels['fullname_placeholder'] ?? 'Nombre completo *';
|
||||
$companyPlaceholder = $formLabels['company_placeholder'] ?? 'Empresa';
|
||||
$whatsappPlaceholder = $formLabels['whatsapp_placeholder'] ?? 'WhatsApp *';
|
||||
$emailPlaceholder = $formLabels['email_placeholder'] ?? 'Correo electrónico *';
|
||||
$messagePlaceholder = $formLabels['message_placeholder'] ?? '¿En qué podemos ayudarte?';
|
||||
|
||||
$textareaRows = $effects['textarea_rows'] ?? '4';
|
||||
|
||||
// Nonce for AJAX security
|
||||
$nonce = wp_create_nonce('roi_contact_form_nonce');
|
||||
|
||||
$html = '<div class="modal fade" id="contactModal" tabindex="-1" aria-labelledby="contactModalLabel" aria-hidden="true">';
|
||||
$html .= '<div class="modal-dialog modal-dialog-centered modal-lg">';
|
||||
$html .= '<div class="modal-content">';
|
||||
|
||||
// Modal Header
|
||||
$html .= '<div class="modal-header">';
|
||||
$html .= '<h5 class="modal-title" id="contactModalLabel">';
|
||||
$html .= '<i class="bi bi-chat-dots-fill me-2" style="color: #FF8600;"></i>';
|
||||
$html .= esc_html($sectionTitle);
|
||||
$html .= '</h5>';
|
||||
$html .= '<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>';
|
||||
$html .= '</div>';
|
||||
|
||||
// Modal Body
|
||||
$html .= '<div class="modal-body">';
|
||||
$html .= sprintf('<form id="roiContactModalForm" data-nonce="%s">', esc_attr($nonce));
|
||||
$html .= '<div class="row g-3">';
|
||||
|
||||
// Full name field
|
||||
$html .= '<div class="col-md-6">';
|
||||
$html .= sprintf(
|
||||
'<input type="text" class="form-control" id="roiModalFullName" name="fullName" placeholder="%s" required>',
|
||||
esc_attr($fullnamePlaceholder)
|
||||
);
|
||||
$html .= '</div>';
|
||||
|
||||
// Company field
|
||||
$html .= '<div class="col-md-6">';
|
||||
$html .= sprintf(
|
||||
'<input type="text" class="form-control" id="roiModalCompany" name="company" placeholder="%s">',
|
||||
esc_attr($companyPlaceholder)
|
||||
);
|
||||
$html .= '</div>';
|
||||
|
||||
// WhatsApp field
|
||||
$html .= '<div class="col-md-6">';
|
||||
$html .= sprintf(
|
||||
'<input type="tel" class="form-control" id="roiModalWhatsapp" name="whatsapp" placeholder="%s" required>',
|
||||
esc_attr($whatsappPlaceholder)
|
||||
);
|
||||
$html .= '</div>';
|
||||
|
||||
// Email field
|
||||
$html .= '<div class="col-md-6">';
|
||||
$html .= sprintf(
|
||||
'<input type="email" class="form-control" id="roiModalEmail" name="email" placeholder="%s" required>',
|
||||
esc_attr($emailPlaceholder)
|
||||
);
|
||||
$html .= '</div>';
|
||||
|
||||
// Message field
|
||||
$html .= '<div class="col-12">';
|
||||
$html .= sprintf(
|
||||
'<textarea class="form-control" id="roiModalMessage" name="message" rows="%s" placeholder="%s"></textarea>',
|
||||
esc_attr($textareaRows),
|
||||
esc_attr($messagePlaceholder)
|
||||
);
|
||||
$html .= '</div>';
|
||||
|
||||
// Submit button
|
||||
$html .= '<div class="col-12">';
|
||||
$html .= '<button type="submit" class="btn btn-modal-submit w-100">';
|
||||
$html .= sprintf('<i class="%s me-2"></i>', esc_attr($submitIcon));
|
||||
$html .= esc_html($submitText);
|
||||
$html .= '</button>';
|
||||
$html .= '</div>';
|
||||
|
||||
// Message container
|
||||
$html .= '<div id="roiContactModalMessage" class="col-12 mt-2 alert" style="display: none;"></div>';
|
||||
|
||||
$html .= '</div>'; // .row g-3
|
||||
$html .= '</form>';
|
||||
$html .= '</div>'; // .modal-body
|
||||
|
||||
$html .= '</div>'; // .modal-content
|
||||
$html .= '</div>'; // .modal-dialog
|
||||
$html .= '</div>'; // .modal
|
||||
|
||||
return $html;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generar JS para el modal
|
||||
*/
|
||||
private function buildModalJS(array $data): string
|
||||
{
|
||||
$messages = $data['messages'] ?? [];
|
||||
$content = $data['content'] ?? [];
|
||||
|
||||
$successMessage = $messages['success_message'] ?? '¡Gracias por contactarnos! Te responderemos pronto.';
|
||||
$errorMessage = $messages['error_message'] ?? 'Hubo un error al enviar el mensaje. Por favor intenta de nuevo.';
|
||||
$sendingMessage = $messages['sending_message'] ?? 'Enviando...';
|
||||
|
||||
// AJAX URL for WordPress
|
||||
$ajaxUrl = admin_url('admin-ajax.php');
|
||||
|
||||
$js = <<<JS
|
||||
(function() {
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const form = document.getElementById('roiContactModalForm');
|
||||
if (!form) return;
|
||||
|
||||
form.addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const submitBtn = form.querySelector('button[type="submit"]');
|
||||
const messageDiv = document.getElementById('roiContactModalMessage');
|
||||
const originalBtnHtml = submitBtn.innerHTML;
|
||||
const nonce = form.dataset.nonce;
|
||||
|
||||
// Disable button and show sending state
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>' + '{$sendingMessage}';
|
||||
messageDiv.style.display = 'none';
|
||||
|
||||
// Collect form data
|
||||
const formData = new FormData(form);
|
||||
formData.append('action', 'roi_contact_form_submit');
|
||||
formData.append('nonce', nonce);
|
||||
formData.append('pageUrl', window.location.href);
|
||||
formData.append('pageTitle', document.title);
|
||||
|
||||
try {
|
||||
const response = await fetch('{$ajaxUrl}', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
messageDiv.className = 'col-12 mt-2 alert alert-success';
|
||||
messageDiv.textContent = '{$successMessage}';
|
||||
messageDiv.style.display = 'block';
|
||||
form.reset();
|
||||
|
||||
// Cerrar modal despues de 2 segundos en exito
|
||||
setTimeout(function() {
|
||||
const modal = bootstrap.Modal.getInstance(document.getElementById('contactModal'));
|
||||
if (modal) {
|
||||
modal.hide();
|
||||
}
|
||||
messageDiv.style.display = 'none';
|
||||
}, 2000);
|
||||
} else {
|
||||
messageDiv.className = 'col-12 mt-2 alert alert-danger';
|
||||
messageDiv.textContent = result.data?.message || '{$errorMessage}';
|
||||
messageDiv.style.display = 'block';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Contact modal form error:', error);
|
||||
messageDiv.className = 'col-12 mt-2 alert alert-danger';
|
||||
messageDiv.textContent = '{$errorMessage}';
|
||||
messageDiv.style.display = 'block';
|
||||
} finally {
|
||||
submitBtn.disabled = false;
|
||||
submitBtn.innerHTML = originalBtnHtml;
|
||||
}
|
||||
});
|
||||
|
||||
// Limpiar formulario cuando se cierra el modal
|
||||
const contactModal = document.getElementById('contactModal');
|
||||
if (contactModal) {
|
||||
contactModal.addEventListener('hidden.bs.modal', function() {
|
||||
form.reset();
|
||||
const messageDiv = document.getElementById('roiContactModalMessage');
|
||||
if (messageDiv) {
|
||||
messageDiv.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
})();
|
||||
JS;
|
||||
|
||||
return $js;
|
||||
|
||||
Reference in New Issue
Block a user