339 lines
19 KiB
PHP
339 lines
19 KiB
PHP
<?php
|
|
$enablePrototypeComments = true;
|
|
include '../../header-invoice.php';
|
|
?>
|
|
|
|
<div class="container-fluid flex-grow-1 container-p-y">
|
|
<h4 class="py-3 mb-4">
|
|
<span class="text-muted fw-light">Sprzedaż / Ustawienia /</span> Powiadomienia e-mail (Faktury cykliczne)
|
|
</h4>
|
|
|
|
<div class="row">
|
|
<!-- Lewa Kolumna: Konfigurator -->
|
|
<div class="col-lg-5 mb-4 mb-lg-0">
|
|
|
|
<!-- Wybór Profilu -->
|
|
<div class="card mb-4">
|
|
<div class="card-header border-bottom d-flex justify-content-between align-items-center">
|
|
<h5 class="card-title mb-0">Wybierz Profil Powiadomień</h5>
|
|
<div class="d-flex gap-2">
|
|
<button class="btn btn-sm btn-label-danger"><i class="bx bx-trash me-1"></i> Usuń profil</button>
|
|
<button class="btn btn-sm btn-primary"><i class="bx bx-plus me-1"></i> Nowy profil</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body pt-4">
|
|
<div class="mb-3">
|
|
<label class="form-label">Aktualny profil</label>
|
|
<select class="form-select select2" id="profile-select">
|
|
<option value="1">Standardowy (Termin 30 dni)</option>
|
|
<option value="2">Szybki (Termin 3 dni)</option>
|
|
<option value="3">Tylko przypomnienia po terminie</option>
|
|
</select>
|
|
</div>
|
|
<div class="alert alert-info d-flex mb-0" role="alert">
|
|
<span class="badge badge-center rounded-pill bg-info border-label-info p-3 me-2"><i class="bx bx-info-circle fs-6"></i></span>
|
|
<div class="d-flex flex-column ps-1">
|
|
<h6 class="alert-heading d-flex align-items-center mb-1">Czym są profile wysyłki?</h6>
|
|
<span class="mb-0 fs-6">Profile pozwalają na zgrupowanie reguł wysyłki e-mail. Możesz stworzyć profil "Długi termin" z wieloma przypomnieniami i przypisać go do wybranych faktur cyklicznych, a dla innych użyć profilu "Szybki" tylko z jednym mailem po terminie.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Harmonogram wysyłki -->
|
|
<div class="card mb-4">
|
|
<div class="card-header border-bottom d-flex justify-content-between align-items-center">
|
|
<h5 class="card-title mb-0">Harmonogram wysyłki</h5>
|
|
<button class="btn btn-sm btn-label-primary" data-bs-toggle="modal" data-bs-target="#modalRule"><i class="bx bx-plus me-1"></i> Dodaj regułę</button>
|
|
</div>
|
|
<div class="card-body pt-4">
|
|
<ul class="list-group list-group-flush mb-0">
|
|
<li class="list-group-item d-flex justify-content-between align-items-center px-0 pt-0 pb-3" style="cursor: pointer;">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<span class="badge bg-label-success p-2"><i class="bx bx-check"></i></span>
|
|
<div>
|
|
<h6 class="mb-0">Wystawienie faktury</h6>
|
|
<small class="text-muted">Natychmiast (W dniu dokumentu)</small>
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-icon btn-sm text-secondary" data-bs-toggle="modal" data-bs-target="#modalRule"><i class="bx bx-edit"></i></button>
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between align-items-center px-3 py-3 rounded border border-primary bg-label-primary mb-2 mt-2" style="cursor: pointer;">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<span class="badge bg-primary p-2 text-white"><i class="bx bx-time"></i></span>
|
|
<div>
|
|
<h6 class="mb-0 text-primary fw-bold">Przypomnienie przed terminem</h6>
|
|
<small class="text-primary">14 dni przed upływem terminu</small>
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-icon btn-sm text-primary" data-bs-toggle="modal" data-bs-target="#modalRule"><i class="bx bx-edit"></i></button>
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between align-items-center px-0 py-3" style="cursor: pointer;">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<span class="badge bg-label-warning p-2"><i class="bx bx-error"></i></span>
|
|
<div>
|
|
<h6 class="mb-0">Przypomnienie przed terminem</h6>
|
|
<small class="text-muted">3 dni przed upływem terminu</small>
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-icon btn-sm text-secondary" data-bs-toggle="modal" data-bs-target="#modalRule"><i class="bx bx-edit"></i></button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Treść wiadomości -->
|
|
<div class="card border border-primary">
|
|
<div class="card-header border-bottom bg-label-primary">
|
|
<h5 class="card-title mb-0 text-primary">Treść wiadomości <span class="fw-normal fs-6 d-block mt-1">Edytujesz: <strong>Przypomnienie przed terminem (14 dni)</strong></span></h5>
|
|
</div>
|
|
<div class="card-body pt-4">
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Temat e-maila</label>
|
|
<input type="text" id="email-subject" class="form-control" value="Przypomnienie: Zbliża się termin płatności faktury {NUMER_FAKTURY}">
|
|
<div class="form-text">Zmienne: {NUMER_FAKTURY}, {NAZWA_KLIENTA}</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Nagłówek powitania</label>
|
|
<input type="text" id="email-heading" class="form-control" value="Cześć {IMIE_NABYWCY},">
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Główna treść wiadomości</label>
|
|
<textarea id="email-body" class="form-control" rows="4">Przypominamy, że za 14 dni upływa termin płatności za Twoją ostatnią fakturę. W załączniku przesyłamy plik PDF z dokumentem. Będziemy wdzięczni za terminową wpłatę.</textarea>
|
|
</div>
|
|
|
|
<div class="mb-0">
|
|
<label class="form-label">Podpis / Stopka</label>
|
|
<input type="text" id="email-footer" class="form-control" value="Pozdrawiamy serdecznie,\nZespół TwojaFirma">
|
|
</div>
|
|
|
|
<!-- Zmienne do kliknięcia -->
|
|
<div class="mt-4 pt-3 border-top">
|
|
<small class="text-muted text-uppercase fw-bold d-block mb-2">Dostępne zmienne (kliknij, aby wstawić)</small>
|
|
<div class="d-flex flex-wrap gap-2" id="variable-badges">
|
|
<span class="badge bg-label-primary" style="cursor: pointer;" data-var="{NUMER_FAKTURY}">+ {NUMER_FAKTURY}</span>
|
|
<span class="badge bg-label-primary" style="cursor: pointer;" data-var="{NAZWA_KLIENTA}">+ {NAZWA_KLIENTA}</span>
|
|
<span class="badge bg-label-primary" style="cursor: pointer;" data-var="{IMIE_NABYWCY}">+ {IMIE_NABYWCY}</span>
|
|
<span class="badge bg-label-primary" style="cursor: pointer;" data-var="{KWOTA_BRUTTO}">+ {KWOTA_BRUTTO}</span>
|
|
<span class="badge bg-label-primary" style="cursor: pointer;" data-var="{TERMIN_PLATNOSCI}">+ {TERMIN_PLATNOSCI}</span>
|
|
<span class="badge bg-label-primary" style="cursor: pointer;" data-var="{POZOSTALO_DNI_DO_TERMINU}">+ {POZOSTALO_DNI_DO_TERMINU}</span>
|
|
<span class="badge bg-label-primary" style="cursor: pointer;" data-var="{LINK_DO_OPLATY}">+ {LINK_DO_OPLATY}</span>
|
|
</div>
|
|
<div class="form-text mt-2">Tag zostanie wstawiony w polu, w którym ostatnio pisałeś.</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Prawa Kolumna: Podgląd Live -->
|
|
<div class="col-lg-7">
|
|
<div class="card h-100" style="background-color: #f8f9fa;">
|
|
<div class="card-header border-bottom bg-white d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<small class="text-muted d-block mb-1">Podgląd na żywo</small>
|
|
<h6 class="mb-0">Temat: <span id="preview-subject" class="fw-normal">Przypomnienie: Zbliża się termin płatności faktury FV/2026/08/12</span></h6>
|
|
</div>
|
|
<span class="badge bg-label-secondary">Wersja Desktop</span>
|
|
</div>
|
|
|
|
<!-- Email Canvas -->
|
|
<div class="card-body d-flex justify-content-center align-items-start pt-5 pb-5 overflow-auto" style="min-height: 600px;">
|
|
|
|
<div class="email-container bg-white rounded shadow-sm" style="width: 100%; max-width: 600px; overflow: hidden; font-family: Arial, sans-serif;">
|
|
|
|
<!-- Email Header Logo (Image based on screenshot) -->
|
|
<div class="text-center pt-5 pb-3 bg-white">
|
|
<div style="background-color: #8ed689; width: 120px; height: 75px; border-radius: 8px; margin: 0 auto; position: relative; display: flex; align-items: center; justify-content: center;">
|
|
<!-- Simple illustration placeholder for the green money/face -->
|
|
<div style="width: 10px; height: 10px; background-color: #333; border-radius: 50%; position: absolute; left: 35px;"></div>
|
|
<div style="width: 10px; height: 10px; background-color: #333; border-radius: 50%; position: absolute; right: 35px;"></div>
|
|
<div style="width: 16px; height: 8px; border-bottom: 3px solid #333; border-radius: 50%; position: absolute; top: 40px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Email Content Container -->
|
|
<div class="p-4 p-md-5 pt-0 bg-white">
|
|
|
|
<h3 id="preview-heading" class="fw-light mb-4" style="color: #2b5c8f; font-size: 26px;">Szanowni Państwo</h3>
|
|
|
|
<p id="preview-body" style="color: #4a5568; line-height: 1.6; margin-bottom: 40px; font-size: 15px;">
|
|
Dziękujemy za skorzystanie z naszych usług.<br><br>
|
|
Uprzejmie informujemy, że w dniu 22 lipca 2026 została wystawiona dla Państwa Faktura nr FV/31/07/2026 na kwotę 160,00 zł. Plik PDF znajduje się w załączniku.
|
|
</p>
|
|
|
|
<!-- ZABLOKOWANY MODUŁ Z FAKTURĄ (LOCKED SUMMARY TABLE) -->
|
|
<div class="invoice-summary border-0 rounded bg-lighter p-4 mb-4 text-center" style="border-left: 4px solid #2b5c8f !important;">
|
|
<div class="d-flex justify-content-between align-items-center mb-2 text-start">
|
|
<span class="text-muted">Typ faktury:</span>
|
|
<span class="text-dark">Faktura</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between align-items-center mb-2 text-start">
|
|
<span class="text-muted">Termin płatności:</span>
|
|
<span class="text-dark fw-medium">29 lipca 2026</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between align-items-center mb-3 text-start">
|
|
<span class="text-muted">Kwota do zapłaty:</span>
|
|
<span class="fw-bold text-dark">160,00 PLN</span>
|
|
</div>
|
|
|
|
<a href="#" class="btn btn-primary w-100 mt-2" style="background-color: #2b5c8f; border-color: #2b5c8f; padding: 10px 20px; text-decoration: none; display: inline-block;">
|
|
Zobacz dokument i opłać online
|
|
</a>
|
|
</div>
|
|
<!-- END LOCKED MODULE -->
|
|
|
|
<p id="preview-footer" style="color: #777; margin-top: 30px; font-size: 0.95em;">
|
|
Pozdrawiamy serdecznie,<br>Zespół TwojaFirma
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<!-- Email Footer App Info -->
|
|
<div class="bg-light text-center py-4 px-3 border-top">
|
|
<small class="text-muted d-block mb-1" style="font-size: 11px;">Wiadomość wygenerowana automatycznie. Prosimy nie odpowiadać.</small>
|
|
<small class="text-muted d-block mb-3" style="font-size: 11px;">Wiadomość wysłana przez firmę TwojaFirma, z siedzibą w Stalowej Woli, al. Jana Pawła II 60F,<br>NIP: 865 256 70 62, REGON: 368428365.</small>
|
|
|
|
<small class="text-dark fw-bold d-block" style="font-size: 12px;">Magico Software</small>
|
|
<small class="text-muted d-block" style="font-size: 11px;">support@magico.pl | +48 665 408 808</small>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Modal: Dodaj Regułę -->
|
|
<div class="modal fade" id="modalRule" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="modalRuleTitle">Konfiguracja reguły wysyłki</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col mb-3">
|
|
<label class="form-label">Wydarzenie początkowe (Wyzwalacz)</label>
|
|
<select class="form-select">
|
|
<option value="issue">Wystawienie nowej faktury</option>
|
|
<option value="due">Termin płatności faktury</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="row g-2">
|
|
<div class="col mb-0">
|
|
<label class="form-label">Kiedy wysłać e-mail?</label>
|
|
<select class="form-select">
|
|
<option value="0">Dokładnie w tym dniu</option>
|
|
<option value="before">Przed wydarzeniem</option>
|
|
<option value="after">Po wydarzeniu</option>
|
|
</select>
|
|
</div>
|
|
<div class="col mb-0">
|
|
<label class="form-label">Ile dni?</label>
|
|
<input type="number" class="form-control" value="0">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Anuluj</button>
|
|
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Zapisz regułę</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
// Inputs
|
|
const inputSubject = document.getElementById('email-subject');
|
|
const inputHeading = document.getElementById('email-heading');
|
|
const inputBody = document.getElementById('email-body');
|
|
const inputFooter = document.getElementById('email-footer');
|
|
|
|
// Previews
|
|
const previewSubject = document.getElementById('preview-subject');
|
|
const previewHeading = document.getElementById('preview-heading');
|
|
const previewBody = document.getElementById('preview-body');
|
|
const previewFooter = document.getElementById('preview-footer');
|
|
|
|
// Mocks for variables
|
|
const mockVars = {
|
|
'{NUMER_FAKTURY}': 'FV/2026/08/12',
|
|
'{NAZWA_KLIENTA}': 'ABC Logistics',
|
|
'{IMIE_NABYWCY}': 'Jan',
|
|
'{KWOTA_BRUTTO}': '1 845,00 PLN',
|
|
'{TERMIN_PLATNOSCI}': '15.08.2026',
|
|
'{POZOSTALO_DNI_DO_TERMINU}': '14',
|
|
'{LINK_DO_OPLATY}': 'https://magico.pl/pay/123'
|
|
};
|
|
|
|
function replaceVariables(text) {
|
|
let result = text;
|
|
for (const [key, value] of Object.entries(mockVars)) {
|
|
result = result.replace(new RegExp(key, 'g'), value);
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function updatePreview() {
|
|
previewSubject.innerText = replaceVariables(inputSubject.value);
|
|
previewHeading.innerText = replaceVariables(inputHeading.value);
|
|
|
|
// Preserve line breaks in body
|
|
const bodyText = replaceVariables(inputBody.value);
|
|
previewBody.innerHTML = bodyText.replace(/\n/g, '<br>');
|
|
|
|
// Preserve line breaks in footer
|
|
const footerText = replaceVariables(inputFooter.value);
|
|
previewFooter.innerHTML = footerText.replace(/\n/g, '<br>');
|
|
}
|
|
|
|
// Event Listeners
|
|
inputSubject.addEventListener('input', updatePreview);
|
|
inputHeading.addEventListener('input', updatePreview);
|
|
inputBody.addEventListener('input', updatePreview);
|
|
inputFooter.addEventListener('input', updatePreview);
|
|
|
|
// Initial render
|
|
updatePreview();
|
|
|
|
// Variable insertion logic
|
|
let lastFocusedInput = inputBody; // default
|
|
const allInputs = [inputSubject, inputHeading, inputBody, inputFooter];
|
|
|
|
allInputs.forEach(input => {
|
|
input.addEventListener('focus', function() {
|
|
lastFocusedInput = this;
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll('#variable-badges .badge').forEach(badge => {
|
|
badge.addEventListener('click', function() {
|
|
const varText = this.getAttribute('data-var');
|
|
if (lastFocusedInput) {
|
|
const start = lastFocusedInput.selectionStart;
|
|
const end = lastFocusedInput.selectionEnd;
|
|
const text = lastFocusedInput.value;
|
|
lastFocusedInput.value = text.substring(0, start) + varText + text.substring(end);
|
|
lastFocusedInput.selectionStart = lastFocusedInput.selectionEnd = start + varText.length;
|
|
lastFocusedInput.focus();
|
|
updatePreview();
|
|
}
|
|
});
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
<?php include '../../footer.php'; ?>
|