whatsapp_web_groups/helpdesk_extras/views/snippets/s_helpdesk_hours.xml

<?xml version="1.0" encoding="utf-8"?>
<odoo>

<template name="Helpdesk Hours Available" id="s_helpdesk_hours">
    <section class="s_helpdesk_hours pt80 pb80" style="background-color: #F0F2F5;">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-sm-10 col-md-6 col-lg-5">
                    <!-- Card Principal -->
                    <div class="bg-white rounded shadow p-4">
                        <!-- Título -->
                        <h2 class="fs-6 fw-semibold mb-0" style="color: #1F2937;">Resumen de Horas de Soporte</h2>
                        
                        <!-- Normal content (when hours available) -->
                        <div class="s_helpdesk_hours_normal_content">
                            <!-- Horas Disponibles -->
                            <div class="mt-4">
                                <p class="small mb-2" style="color: #4B5563;">
                                    Horas Prepago Restantes: <span class="fw-semibold s_helpdesk_hours_prepaid" style="color: #111827;">15h</span>
                                </p>
                                <p class="small mb-0" style="color: #4B5563;">
                                    Crédito Disponible: <span class="fw-semibold s_helpdesk_hours_credit" style="color: #111827;">10h</span>
                                </p>
                            </div>
                            
                            <!-- Barra de Progreso -->
                            <div class="mt-4">
                                <div class="d-flex justify-content-between align-items-baseline mb-1">
                                    <p class="small fw-semibold mb-0 s_helpdesk_hours_gradient_text">
                                        <span class="s_helpdesk_hours_percentage">50</span>% Usado del Total
                                    </p>
                                </div>
                                <div class="w-100 rounded-pill overflow-hidden" style="background-color: #E5E7EB; height: 8px;">
                                    <div class="s_helpdesk_hours_progress_bar rounded-pill" style="width: 50%; height: 8px;"></div>
                                </div>
                                <p class="mt-2 mb-0" style="font-size: 0.75rem; color: #6B7280;">
                                    Total disponible: <span class="s_helpdesk_hours_total">25h</span> (<span class="s_helpdesk_hours_prepaid_label">15h</span> Prepago + <span class="s_helpdesk_hours_credit_label">10h</span> Crédito)
                                </p>
                            </div>
                            
                            <!-- Link de Acción -->
                            <div class="mt-4 text-center">
                                <a href="/my/tickets" class="small fw-semibold s_helpdesk_hours_link text-decoration-none">Ver detalle completo</a>
                            </div>
                        </div>
                        
                        <!-- Loading state -->
                        <div class="s_helpdesk_hours_loading text-center py-4" style="display: none;">
                            <div class="spinner-border spinner-border-sm" style="color: #FF6B00;" role="status">
                                <span class="visually-hidden">Cargando...</span>
                            </div>
                            <p class="small mt-2 mb-0" style="color: #6B7280;">Cargando información...</p>
                        </div>
                        
                        <!-- Error state -->
                        <div class="s_helpdesk_hours_error alert alert-warning mb-0" style="display: none;">
                            <i class="fa fa-exclamation-triangle me-2"></i>
                            <span class="s_helpdesk_hours_error_message">No se pudo cargar la información de horas disponibles.</span>
                        </div>
                        
                        <!-- No hours available message -->
                        <div class="s_helpdesk_hours_no_hours mt-4" style="display: none;">
                            <p class="mb-3" style="color: #1F2937; font-size: 1rem;">
                                No tienes horas disponibles para soporte.
                            </p>
                            <p class="mb-2" style="color: #4B5563; font-size: 0.875rem;">
                                Puedes adquirir un paquete en: 
                                <a href="#" class="s_helpdesk_hours_packages_link text-decoration-none fw-semibold" style="color: #FF6B00;">Ver paquetes disponibles</a>
                            </p>
                            <p class="mb-0" style="color: #4B5563; font-size: 0.875rem;">
                                Si tienes alguna duda o comentario contáctanos mediante 
                                <a href="#" class="s_helpdesk_hours_whatsapp_link text-decoration-none" style="color: #FF6B00;">WhatsApp</a> 
                                o 
                                <a href="#" class="s_helpdesk_hours_email_link text-decoration-none" style="color: #FF6B00;">correo electrónico</a>.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<asset id="helpdesk_extras.s_helpdesk_hours_js" name="Helpdesk Hours JS">
    <bundle>web.assets_frontend</bundle>
    <path>helpdesk_extras/static/src/snippets/s_helpdesk_hours/000.js</path>
</asset>

<asset id="helpdesk_extras.s_helpdesk_hours_scss" name="Helpdesk Hours SCSS">
    <bundle>web.assets_frontend</bundle>
    <path>helpdesk_extras/static/src/snippets/s_helpdesk_hours/000.scss</path>
</asset>

<template id="s_helpdesk_hours_options" inherit_id="website.snippet_options">
    <xpath expr="//t[@t-set='so_content_addition_selector']" position="inside" t-translation="off">, .s_helpdesk_hours</xpath>
</template>

</odoo>