feat(config): agrega personalización de ticket con logo y opciones
- Nuevos endpoints /pos/api/config/receipt (GET/PUT) - Sección en config.html para subir logo, datos del negocio y toggles visuales - pos.js carga la config y renderiza el ticket usando logo, RFC, dirección, teléfono, mensajes y opciones de desglose/empleado/pago configurables - Logo se redimensiona a 300px de ancho y se guarda como base64 JPEG en tenant_config Tests: 35 passed
This commit is contained in:
@@ -255,7 +255,79 @@
|
||||
</div>
|
||||
|
||||
<!-- ===============================================================
|
||||
SECTION 3: MÓDULOS E INTEGRACIONES
|
||||
SECTION 3: PERSONALIZACIÓN DE TICKET
|
||||
=============================================================== -->
|
||||
<div class="settings-section">
|
||||
<div class="settings-section__header">
|
||||
<div class="settings-section__icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="settings-section__title">Personalización de Ticket</div>
|
||||
<div class="settings-section__desc">Logo, datos y opciones que aparecen en el ticket de venta</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-card">
|
||||
<div class="form-grid">
|
||||
<div class="form-group form-group--full">
|
||||
<label class="form-label">Logo del negocio</label>
|
||||
<input type="file" id="receipt-logo" accept="image/png,image/jpeg,image/jpg,image/webp" onchange="Config.handleReceiptLogo(this)" style="display:none;" />
|
||||
<div id="receipt-logo-preview" style="display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;">
|
||||
<div id="receipt-logo-thumb" style="width:80px;height:80px;border:1px dashed var(--color-border);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--color-surface-2);">
|
||||
<span style="color:var(--color-text-muted);font-size:var(--text-caption);text-align:center;padding:var(--space-2);">Sin logo</span>
|
||||
</div>
|
||||
<button class="btn btn--secondary btn--sm" onclick="document.getElementById('receipt-logo').click()">Subir imagen</button>
|
||||
<button class="btn btn--ghost btn--sm" id="receipt-logo-remove" onclick="Config.removeReceiptLogo()" style="display:none;">Quitar</button>
|
||||
</div>
|
||||
<div class="form-hint">Recomendado: PNG/JPG con fondo blanco o transparente, máx. 300x150 px.</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Nombre en ticket</label>
|
||||
<input class="form-input" id="receipt-store-name" type="text" placeholder="Ej: Refacciones El Toro" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Slogan / Línea debajo del nombre</label>
|
||||
<input class="form-input" id="receipt-tagline" type="text" placeholder="Ej: Tu conexion con las refacciones" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">RFC en ticket</label>
|
||||
<input class="form-input" id="receipt-rfc" type="text" placeholder="Ej: RET260101ABC" maxlength="13" style="text-transform:uppercase;" />
|
||||
</div>
|
||||
<div class="form-group form-group--full">
|
||||
<label class="form-label">Dirección en ticket</label>
|
||||
<input class="form-input" id="receipt-address" type="text" placeholder="Calle, Número, Colonia, CP, Ciudad" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Teléfono en ticket</label>
|
||||
<input class="form-input" id="receipt-phone" type="tel" placeholder="Ej: 664-123-4567" />
|
||||
</div>
|
||||
<div class="form-group form-group--full">
|
||||
<label class="form-label">Mensaje de agradecimiento</label>
|
||||
<input class="form-input" id="receipt-thanks" type="text" placeholder="Gracias por su compra!" />
|
||||
</div>
|
||||
<div class="form-group form-group--full">
|
||||
<label class="form-label">Pie de página adicional</label>
|
||||
<input class="form-input" id="receipt-footer" type="text" placeholder="Ej: Conserve su ticket como comprobante." />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-grid" style="margin-top:var(--space-4);">
|
||||
<label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer;"><input type="checkbox" id="receipt-show-logo" style="width:auto;" checked /> Mostrar logo</label>
|
||||
<label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer;"><input type="checkbox" id="receipt-show-rfc" style="width:auto;" checked /> Mostrar RFC</label>
|
||||
<label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer;"><input type="checkbox" id="receipt-show-address" style="width:auto;" /> Mostrar dirección</label>
|
||||
<label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer;"><input type="checkbox" id="receipt-show-phone" style="width:auto;" /> Mostrar teléfono</label>
|
||||
<label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer;"><input type="checkbox" id="receipt-show-iva" style="width:auto;" checked /> Mostrar desglose de IVA</label>
|
||||
<label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer;"><input type="checkbox" id="receipt-show-payment" style="width:auto;" checked /> Mostrar detalle de pago</label>
|
||||
<label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer;"><input type="checkbox" id="receipt-show-employee" style="width:auto;" /> Mostrar nombre del empleado</label>
|
||||
</div>
|
||||
<div style="margin-top:var(--space-4);text-align:right;">
|
||||
<button class="btn btn--primary" onclick="Config.saveReceiptConfig()">Guardar ticket</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===============================================================
|
||||
SECTION 4: MÓDULOS E INTEGRACIONES
|
||||
=============================================================== -->
|
||||
<div class="settings-section">
|
||||
<div class="settings-section__header">
|
||||
|
||||
Reference in New Issue
Block a user