getData(); if (!$this->isEnabled($data)) { return ''; } if (!PageVisibilityHelper::shouldShow(self::COMPONENT_NAME)) { return ''; } $visibilityClass = $this->getVisibilityClass($data); if ($visibilityClass === null) { return ''; } $css = $this->generateCSS($data); $html = $this->buildHTML($data, $visibilityClass); $js = $this->buildJS($data); return sprintf("\n%s\n", $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("\n%s\n", $css, $html, $js); } public function supports(string $componentType): bool { return $componentType === self::COMPONENT_NAME; } private function isEnabled(array $data): bool { $value = $data['visibility']['is_enabled'] ?? false; return $value === true || $value === '1' || $value === 1; } private function getVisibilityClass(array $data): ?string { $showDesktop = $data['visibility']['show_on_desktop'] ?? true; $showDesktop = $showDesktop === true || $showDesktop === '1' || $showDesktop === 1; $showMobile = $data['visibility']['show_on_mobile'] ?? true; $showMobile = $showMobile === true || $showMobile === '1' || $showMobile === 1; if (!$showDesktop && !$showMobile) { return null; } if (!$showDesktop && $showMobile) { return 'd-lg-none'; } if ($showDesktop && !$showMobile) { return 'd-none d-lg-block'; } return ''; } private function generateCSS(array $data): string { $colors = $data['colors'] ?? []; $spacing = $data['spacing'] ?? []; $effects = $data['visual_effects'] ?? []; $cssRules = []; // Section background $sectionBgColor = $colors['section_bg_color'] ?? 'rgba(108, 117, 125, 0.25)'; $sectionPaddingY = $spacing['section_padding_y'] ?? '3rem'; $sectionMarginTop = $spacing['section_margin_top'] ?? '3rem'; $cssRules[] = $this->cssGenerator->generate('.roi-contact-form-section', [ 'background-color' => $sectionBgColor, 'padding-top' => $sectionPaddingY, 'padding-bottom' => $sectionPaddingY, 'margin-top' => $sectionMarginTop, ]); // Title $titleColor = $colors['title_color'] ?? '#212529'; $titleMarginBottom = $spacing['title_margin_bottom'] ?? '0.75rem'; $cssRules[] = $this->cssGenerator->generate('.roi-contact-form-section .contact-title', [ 'color' => $titleColor, 'margin-bottom' => $titleMarginBottom, ]); // Description $descColor = $colors['description_color'] ?? '#212529'; $descMarginBottom = $spacing['description_margin_bottom'] ?? '1.5rem'; $cssRules[] = $this->cssGenerator->generate('.roi-contact-form-section .contact-description', [ 'color' => $descColor, 'margin-bottom' => $descMarginBottom, ]); // Icons $iconColor = $colors['icon_color'] ?? '#FF8600'; $cssRules[] = $this->cssGenerator->generate('.roi-contact-form-section .contact-icon', [ 'color' => $iconColor, ]); // Info labels and values $infoLabelColor = $colors['info_label_color'] ?? '#212529'; $infoValueColor = $colors['info_value_color'] ?? '#6c757d'; $cssRules[] = $this->cssGenerator->generate('.roi-contact-form-section .info-label', [ 'color' => $infoLabelColor, ]); $cssRules[] = $this->cssGenerator->generate('.roi-contact-form-section .info-value', [ 'color' => $infoValueColor, ]); // 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('.roi-contact-form-section .form-control', [ 'border-color' => $inputBorderColor, 'border-radius' => $inputBorderRadius, 'transition' => "all {$transitionDuration} ease", ]); $cssRules[] = $this->cssGenerator->generate('.roi-contact-form-section .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('.roi-contact-form-section .btn-contact-submit', [ 'background-color' => $buttonBgColor, 'color' => $buttonTextColor, 'font-weight' => '600', 'padding' => $buttonPadding, 'border' => 'none', 'border-radius' => $buttonBorderRadius, 'transition' => "all {$transitionDuration} ease", ]); $cssRules[] = $this->cssGenerator->generate('.roi-contact-form-section .btn-contact-submit:hover', [ 'background-color' => $buttonHoverBg, 'color' => $buttonTextColor, ]); $cssRules[] = $this->cssGenerator->generate('.roi-contact-form-section .btn-contact-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('.roi-contact-form-section .alert-success', [ 'background-color' => $successBgColor, 'color' => $successTextColor, 'border-color' => $successBgColor, ]); $cssRules[] = $this->cssGenerator->generate('.roi-contact-form-section .alert-danger', [ 'background-color' => $errorBgColor, 'color' => $errorTextColor, 'border-color' => $errorBgColor, ]); return implode("\n", $cssRules); } private function buildHTML(array $data, string $visibilityClass): string { $content = $data['content'] ?? []; $contactInfo = $data['contact_info'] ?? []; $formLabels = $data['form_labels'] ?? []; $effects = $data['visual_effects'] ?? []; // Content $sectionTitle = $content['section_title'] ?? '¿Tienes alguna pregunta?'; $sectionDesc = $content['section_description'] ?? 'Completa el formulario y nuestro equipo te responderá en menos de 24 horas.'; $submitText = $content['submit_button_text'] ?? 'Enviar Mensaje'; $submitIcon = $content['submit_button_icon'] ?? 'bi-send-fill'; // Contact info $showContactInfo = $contactInfo['show_contact_info'] ?? true; $showContactInfo = $showContactInfo === true || $showContactInfo === '1' || $showContactInfo === 1; // 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'; // Container class $containerClass = 'roi-contact-form-section'; if (!empty($visibilityClass)) { $containerClass .= ' ' . $visibilityClass; } // Nonce for AJAX security $nonce = wp_create_nonce('roi_contact_form_nonce'); $html = sprintf('

', esc_attr($containerClass)); $html .= '

'; $html .= '

'; $html .= '

'; $html .= '

'; // Left column - Contact info $html .= '

'; $html .= sprintf('

%s

', esc_html($sectionTitle)); $html .= sprintf('

%s

', esc_html($sectionDesc)); if ($showContactInfo) { $html .= $this->buildContactInfoHTML($contactInfo); } $html .= '

'; // Right column - Form $html .= '

'; $html .= sprintf('

', esc_attr($nonce)); $html .= '

'; // Full name field $html .= '

'; $html .= sprintf( '', esc_attr($fullnamePlaceholder) ); $html .= '

'; // Company field $html .= '

'; $html .= sprintf( '', esc_attr($companyPlaceholder) ); $html .= '

'; // WhatsApp field $html .= '

'; $html .= sprintf( '', esc_attr($whatsappPlaceholder) ); $html .= '

'; // Email field $html .= '

'; $html .= sprintf( '', esc_attr($emailPlaceholder) ); $html .= '

'; // Message field $html .= '

'; $html .= sprintf( '', esc_attr($textareaRows), esc_attr($messagePlaceholder) ); $html .= '

'; // Submit button $html .= '

'; $html .= ''; $html .= '

'; // Message container $html .= ''; $html .= '

'; // .row g-3 $html .= '

'; $html .= '

'; // .col-lg-7 $html .= '

'; // .row $html .= '

'; // .col-lg-10 $html .= '

'; // .row justify-content-center $html .= '

'; // .container $html .= '

'; return $html; } private function buildContactInfoHTML(array $contactInfo): string { $phoneLabel = $contactInfo['phone_label'] ?? 'Teléfono'; $phoneValue = $contactInfo['phone_value'] ?? '+52 55 1234 5678'; $emailLabel = $contactInfo['email_label'] ?? 'Email'; $emailValue = $contactInfo['email_value'] ?? 'contacto@apumexico.com'; $locationLabel = $contactInfo['location_label'] ?? 'Ubicación'; $locationValue = $contactInfo['location_value'] ?? 'Ciudad de México, México'; $html = '

'; // Phone $html .= '

'; $html .= ''; $html .= '

'; $html .= sprintf('%s', esc_html($phoneLabel)); $html .= sprintf('

%s

', esc_html($phoneValue)); $html .= '

'; $html .= '

'; // Email $html .= '

'; $html .= ''; $html .= '

'; $html .= sprintf('%s', esc_html($emailLabel)); $html .= sprintf('

%s

', esc_html($emailValue)); $html .= '

'; $html .= '

'; // Location $html .= '

'; $html .= ''; $html .= '

'; $html .= sprintf('%s', esc_html($locationLabel)); $html .= sprintf('

%s

', esc_html($locationValue)); $html .= '

'; $html .= '

'; $html .= '

'; return $html; } private function buildJS(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...'; $submitText = $content['submit_button_text'] ?? 'Enviar Mensaje'; $submitIcon = $content['submit_button_icon'] ?? 'bi-send-fill'; // AJAX URL for WordPress $ajaxUrl = admin_url('admin-ajax.php'); $js = <<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 = ''; // .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 = <<