Current section
Files
Jump to
Current section
Files
lib/phoenix_kit/modules/emails/web/email_tracking.html.heex
<div class="container flex flex-col mx-auto px-4 py-6">
<%!-- Main Content --%>
<div class="max-w-4xl mx-auto space-y-8">
<%= if @email_tracking_enabled do %>
<%!-- Tracking Options Card --%>
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title text-2xl mb-4">
<.icon name="hero-adjustments-horizontal" class="w-6 h-6" /> {gettext("Tracking Options")}
</h2>
<%!-- Save Email Bodies --%>
<div class="form-control mb-4">
<label class="label cursor-pointer">
<span class="label-text text-lg">
<span class="font-semibold">{gettext("Save Email Bodies")}</span>
<div class="text-sm text-base-content/70 mt-1">
{gettext("Store the full content of sent emails for debugging and analysis")}
</div>
</span>
<input
type="checkbox"
class="toggle toggle-secondary"
checked={@email_tracking_save_body}
phx-click="toggle_email_tracking_save_body"
/>
</label>
</div>
<div class="divider"></div>
<%!-- AWS SES Events --%>
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text text-lg">
<span class="font-semibold">{gettext("AWS SES Events Tracking")}</span>
<div class="text-sm text-base-content/70 mt-1">
{gettext("Track delivery, bounce, and complaint events from Amazon SES")}
</div>
</span>
<input
type="checkbox"
class="toggle toggle-accent"
checked={@email_tracking_ses_events}
phx-click="toggle_email_tracking_ses_events"
/>
</label>
</div>
</div>
</div>
<%!-- Data Retention Card --%>
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title text-2xl mb-4">
<.icon name="hero-archive-box" class="w-6 h-6" /> {gettext("Data Retention")}
</h2>
<div class="form-control">
<label class="label">
<span class="label-text text-lg font-semibold">{gettext("Email Retention Period")}</span>
</label>
<div class="input-group">
<input
type="number"
placeholder={gettext("Enter retention days")}
class="input input-bordered w-full max-w-xs"
value={@email_tracking_retention_days}
min="1"
max="365"
phx-blur="update_email_tracking_retention"
phx-value-retention_days={assigns[:email_tracking_retention_days]}
/>
<span class="bg-base-200 px-4 py-3 text-sm">{gettext("days")}</span>
</div>
<label class="label">
<span class="label-text-alt text-base-content/70">
{gettext("How long to keep email tracking data before automatic cleanup (1-365 days)")}
</span>
</label>
</div>
<div class="alert alert-warning mt-4">
<.icon name="hero-exclamation-triangle" class="w-5 h-5" />
<div>
<h3 class="font-bold">{gettext("Data Privacy Notice")}</h3>
<p class="text-sm mt-1">
{gettext("Email tracking data will be automatically deleted after the retention period expires. This helps maintain privacy compliance and reduces storage requirements.")}
</p>
</div>
</div>
</div>
</div>
<%!-- Current Configuration Summary --%>
<div class="alert alert-info">
<.icon name="hero-information-circle" class="w-5 h-5" />
<div>
<h3 class="font-bold">{gettext("Current Configuration")}</h3>
<div class="text-sm mt-1">
<p>{gettext("System:")} <span class="font-semibold">{gettext("Enabled")}</span></p>
<p>
{gettext("Save email bodies:")}
<span class="font-semibold">
{if @email_tracking_save_body, do: gettext("Yes"), else: gettext("No")}
</span>
</p>
<p>
{gettext("AWS SES events:")}
<span class="font-semibold">
{if @email_tracking_ses_events, do: gettext("Yes"), else: gettext("No")}
</span>
</p>
<p>
{gettext("Retention period:")}
<span class="font-semibold">{@email_tracking_retention_days} {gettext("days")}</span>
</p>
</div>
</div>
</div>
<% else %>
<%!-- Disabled State Information --%>
<div class="alert alert-warning">
<.icon name="hero-exclamation-triangle" class="w-5 h-5" />
<div>
<h3 class="font-bold">{gettext("Email Tracking Disabled")}</h3>
<p class="text-sm mt-1">
{gettext("Enable the email tracking system above to access configuration options and start tracking email delivery events.")}
</p>
</div>
</div>
<%!-- Benefits Card when Disabled --%>
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title text-2xl mb-4">
<.icon name="hero-light-bulb" class="w-6 h-6" /> {gettext("Email Tracking Benefits")}
</h2>
<div class="space-y-3">
<div class="flex items-start gap-3">
<.icon name="hero-check-circle" class="w-5 h-5 text-success mt-0.5" />
<div>
<h3 class="font-semibold">{gettext("Delivery Monitoring")}</h3>
<p class="text-sm text-base-content/70">
{gettext("Track successful email deliveries and identify issues")}
</p>
</div>
</div>
<div class="flex items-start gap-3">
<.icon name="hero-check-circle" class="w-5 h-5 text-success mt-0.5" />
<div>
<h3 class="font-semibold">{gettext("Engagement Analytics")}</h3>
<p class="text-sm text-base-content/70">
{gettext("Monitor email opens, clicks, and user engagement")}
</p>
</div>
</div>
<div class="flex items-start gap-3">
<.icon name="hero-check-circle" class="w-5 h-5 text-success mt-0.5" />
<div>
<h3 class="font-semibold">{gettext("Debugging Support")}</h3>
<p class="text-sm text-base-content/70">
{gettext("Store email content for troubleshooting delivery issues")}
</p>
</div>
</div>
<div class="flex items-start gap-3">
<.icon name="hero-check-circle" class="w-5 h-5 text-success mt-0.5" />
<div>
<h3 class="font-semibold">{gettext("AWS SES Integration")}</h3>
<p class="text-sm text-base-content/70">
{gettext("Automatic webhook handling for bounce and complaint events")}
</p>
</div>
</div>
</div>
</div>
</div>
<% end %>
</div>
</div>