Email Design System

Na tej stronie

Architektura
Payloady (FE → BE)
Bezpieczeństwo
Warianty Stylów
Skeleton Light — Specyfikacja
i18n Tokeny
Typy Maili
Backend Integration
QA Checklist
Roadmap
Powiązane dokumenty

Maile Vista to oficjalny kanał komunikacji kliniki z opiekunami zwierząt (B2C), zespołem kliniki (B2B) i administratorami (B2tech).

Architektura

Kanały wysyłki

Kanał	Użycie	Technologia
Backend (główny)	Recommendations, Reminders, Invitations, PIN unlock	Tauri + Resend
mailto: (legacy)	Marginalnie	FE helper

Flow danych

SendEmailDialog / UI
  → emailService (FE, typowane payloady)
  → Tauri safeInvoke (send_* commands)
  → Backend mailer (Node/Rust)
  → Resend
  → Odbiorca

Payloady (FE → BE)

RecommendationsEmailPayload

interface RecommendationsEmailPayload {
  toEmail: string;
  patientName: string;
  visitDate: string;        // "24.10.2025"
  recommendations: string;  // SOAP plan + custom message
  veterinarianName: string;
}

AppointmentReminderEmailPayload

interface AppointmentReminderEmailPayload {
  toEmail: string;
  patientName: string;
  ownerName: string;
  visitDate: string;
  visitTime: string;        // "10:30"
  clinicName: string;
  clinicAddress: string;
  veterinarianName?: string;
}

InvitationEmailPayload

interface InvitationEmailPayload {
  toEmail: string;
  clinicName: string;
  invitedBy: string;
  inviteUrl: string;
  role?: string;            // "admin" | "vet" | "assistant"
}

PinUnlockEmailPayload

interface PinUnlockEmailPayload {
  toEmail: string;
  pinCode: string;
  expiry?: string;          // "5 minut"
}

Bezpieczeństwo

Dozwolone dane:

Imię pacjenta
Imię/nazwisko opiekuna
Data/godzina wizyty
Nazwisko lekarza
Nazwa kliniki / adres
Oficjalne zalecenia (SOAP plan)

Warianty Stylów

Light (B2C)

Użycie: Recommendations, Appointment reminders

Element	Styl
Tło	`#F8FAFC` lub białe
Panel	Glass rgba(255,255,255,0.8), border `#E5E5E5`
CTA	`#2563EB` (deep blue) lub `#111` (grafit)
Ton	Ciepły, zrozumiały, “opiekuńczy”

Dark (B2B)

Użycie: Staff invitation, PIN unlock

Element	Styl
Tło	Ciemny radial gradient
Panel	Glassmorphism blur 16-20px
Typografia	`#e5e5e5`, `#f5f5f5`
Ton	Poważny, techniczny, “systemowy”

Skeleton Light — Specyfikacja

Element	Styl
VISTA	20px, 700, `#222`, letter-spacing 0.5px
Tagline PL	”System dla klinik weterynaryjnych”
Tagline EN	”System for veterinary clinics”
Font	13px, `#555`

Content Card

background: rgba(255,255,255,0.8);
backdrop-filter: blur(6px);
border: 1px solid rgba(0,0,0,0.08);
border-radius: 12px;
padding: 40px;
max-width: 520px;
box-shadow: 0 8px 24px rgba(0,0,0,0.05);

Typography

Element	Styl
Title (H1)	22px, 600, `#222`
Body	15px, line-height 1.5, `#333`
Signature label	13px, `#555`
Signature name	15px, 600, `#222`
Footer	11px, `#888`

Box (recommendations/info)

background: #FAFAFA;
border: 1px solid #E5E5E5;
border-radius: 10-12px;
padding: 16px 18px;
white-space: pre-wrap;

CTA Button

background: #2563EB;
color: #FFFFFF;
padding: 12px 24px;
border-radius: 8px;
font-weight: 600;
font-size: 15px;

i18n Tokeny

Każdy typ maila używa tokenów w src/i18n/locales/*/email.json:

Token	Użycie
`subject`	Subject line
`preheader`	Email preheader
`title`	Main heading
`intro`	Introduction paragraph
`bodyInfo`	Optional body info
`blockTitle`	Block title
`closing`	Closing paragraph
`signatureLabel`	Signature label
`footerAuto`	Auto-generated notice
`footerCompany`	Company info

Typy Maili

Recommendations (Light)

Bloki: header → title → intro → bodyInfo → recommendationsBox → closing → signature → footer

Ton: Ciepły, prosty, zrozumiały dla laika

Appointment Reminder (Light)

Bloki: header → title → intro → appointmentInfoBox → closing → footer

Ton: Przyjazny, przypominający

Staff Invitation (Dark)

Bloki: header → title → intro → CTA → fallback link → closing → footer

Ton: Profesjonalny, B2B

PIN Unlock (Dark)

Bloki: header → title → intro → PIN box → closing → footer

Ton: Krótki, techniczny

Backend Integration

Template Selection

Typ	PL	EN
Recommendations (light)	`recommendations-light-pl.html`	`recommendations-light-en.html`
Legacy (dark)	`recommendations-pl.html`	`recommendations-en.html`

Template Context

{
  patientName,      // Visit.patientName
  visitDate,        // Sformatowana data
  recommendations,  // SOAP plan + customMessage
  veterinarianName  // Visit.veterinarian
}

QA Checklist

Poprawna struktura HTML (Gmail / Outlook / iOS)
Poprawna interpolacja tokenów
Brak internalVisitNotes
Odpowiedni kontrast WCAG
Poprawna wersja językowa
Poprawny wariant (light/dark)
Mobile-friendly (min. 320px)

Roadmap

Recommendations (Light) — priorytet, najbardziej user-facing
Appointment reminders (Light) — migracja template’ów BE
Staff invitation + PIN unlock (Dark) — aktualizacja do skeleton
Migracja BE — Light/Dark skeletony + i18n
Preheader + tracking — opcjonalnie

Powiązane dokumenty

Notifications Overview - System powiadomień
Security - Bezpieczeństwo danych