Samir Boulahtit
36603178c3
Platform Email Settings (Admin): - Add GET/PUT/DELETE /admin/settings/email/* endpoints - Settings stored in admin_settings table override .env values - Support all providers: SMTP, SendGrid, Mailgun, Amazon SES - Edit mode UI with provider-specific configuration forms - Reset to .env defaults functionality - Test email to verify configuration Vendor Email Settings: - Add VendorEmailSettings model with one-to-one vendor relationship - Migration: v0a1b2c3d4e5_add_vendor_email_settings.py - Service: vendor_email_settings_service.py with tier validation - API endpoints: /vendor/email-settings/* (CRUD, status, verify) - Email tab in vendor settings page with full configuration - Warning banner until email is configured (like billing warnings) - Premium providers (SendGrid, Mailgun, SES) tier-gated to Business+ Email Service Updates: - get_platform_email_config(db) checks DB first, then .env - Configurable provider classes accept config dict - EmailService uses database-aware providers - Vendor emails use vendor's own SMTP (Wizamart doesn't pay) - "Powered by Wizamart" footer for Essential/Professional tiers - White-label (no footer) for Business/Enterprise tiers Other: - Add scripts/install.py for first-time platform setup - Add make install target - Update init-prod to include email template seeding 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
231 lines
12 KiB
HTML
231 lines
12 KiB
HTML
{# app/templates/vendor/notifications.html #}
|
|
{% extends "vendor/base.html" %}
|
|
{% from 'shared/macros/headers.html' import page_header_flex, refresh_button %}
|
|
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
|
|
{% from 'shared/macros/pagination.html' import pagination_simple %}
|
|
{% from 'shared/macros/modals.html' import modal_simple %}
|
|
|
|
{% block title %}Notifications{% endblock %}
|
|
|
|
{% block alpine_data %}vendorNotifications(){% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Page Header -->
|
|
{% call page_header_flex(title='Notifications', subtitle='Stay updated on your store activity') %}
|
|
<div class="flex items-center gap-4">
|
|
{{ refresh_button(loading_var='loadingNotifications', onclick='loadNotifications()', variant='secondary') }}
|
|
<button
|
|
@click="openSettingsModal()"
|
|
class="flex items-center px-4 py-2 text-sm font-medium text-gray-600 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:hover:bg-gray-600"
|
|
>
|
|
<span x-html="$icon('cog', 'w-4 h-4 mr-2')"></span>
|
|
Settings
|
|
</button>
|
|
</div>
|
|
{% endcall %}
|
|
|
|
{{ loading_state('Loading notifications...') }}
|
|
|
|
{{ error_state('Error loading notifications') }}
|
|
|
|
<!-- Stats Cards -->
|
|
<div x-show="!loading" class="grid gap-6 mb-8 md:grid-cols-3">
|
|
<!-- Unread Notifications -->
|
|
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
|
<div class="p-3 mr-4 text-blue-500 bg-blue-100 rounded-full dark:text-blue-100 dark:bg-blue-500">
|
|
<span x-html="$icon('bell', 'w-5 h-5')"></span>
|
|
</div>
|
|
<div>
|
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Unread</p>
|
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.unread_count">0</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Total Notifications -->
|
|
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
|
<div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500">
|
|
<span x-html="$icon('inbox', 'w-5 h-5')"></span>
|
|
</div>
|
|
<div>
|
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Total</p>
|
|
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.total">0</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
|
<div class="flex-1">
|
|
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Quick Actions</p>
|
|
<button
|
|
x-show="stats.unread_count > 0"
|
|
@click="markAllAsRead()"
|
|
class="text-sm text-purple-600 hover:text-purple-800 dark:text-purple-400"
|
|
>
|
|
Mark all as read
|
|
</button>
|
|
<span x-show="stats.unread_count === 0" class="text-sm text-gray-500 dark:text-gray-400">
|
|
All caught up!
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div x-show="!loading && !error" class="flex flex-wrap items-center gap-4 px-4 py-3 mb-6 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
|
<select
|
|
x-model="filters.is_read"
|
|
@change="page = 1; loadNotifications()"
|
|
class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
|
|
>
|
|
<option value="">All Notifications</option>
|
|
<option value="false">Unread Only</option>
|
|
<option value="true">Read Only</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Notifications List -->
|
|
<div x-show="!loading && !error" class="bg-white rounded-lg shadow-xs dark:bg-gray-800 overflow-hidden">
|
|
<!-- Loading state for list -->
|
|
<template x-if="loadingNotifications && notifications.length === 0">
|
|
<div class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
|
|
<span x-html="$icon('spinner', 'w-6 h-6 mx-auto mb-2 animate-spin')"></span>
|
|
<p>Loading notifications...</p>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Empty state -->
|
|
<template x-if="!loadingNotifications && notifications.length === 0">
|
|
<div class="px-4 py-12 text-center text-gray-500 dark:text-gray-400">
|
|
<span x-html="$icon('bell', 'w-12 h-12 mx-auto mb-3 text-gray-300 dark:text-gray-600')"></span>
|
|
<p class="font-medium">No notifications</p>
|
|
<p class="text-sm mt-1">You're all caught up!</p>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Notifications list -->
|
|
<ul class="divide-y divide-gray-200 dark:divide-gray-700">
|
|
<template x-for="notif in notifications" :key="notif.id">
|
|
<li class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
|
|
:class="notif.is_read ? 'opacity-60' : ''">
|
|
<div class="flex items-start px-4 py-4">
|
|
<!-- Icon -->
|
|
<div class="flex-shrink-0 mr-4">
|
|
<span class="inline-flex items-center justify-center w-10 h-10 rounded-full"
|
|
:class="getPriorityClass(notif.priority)">
|
|
<span x-html="$icon(getNotificationIcon(notif.type), 'w-5 h-5')"></span>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center justify-between">
|
|
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100" x-text="notif.title"></p>
|
|
<span class="text-xs text-gray-400" x-text="formatDate(notif.created_at)"></span>
|
|
</div>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1" x-text="notif.message"></p>
|
|
<div class="flex items-center gap-4 mt-2">
|
|
<span class="inline-flex items-center px-2 py-0.5 text-xs font-medium rounded capitalize"
|
|
:class="getPriorityClass(notif.priority)"
|
|
x-text="notif.priority || 'normal'"></span>
|
|
<span class="text-xs text-gray-500" x-text="(notif.type || '').replace('_', ' ')"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="flex items-center gap-2 ml-4">
|
|
<template x-if="notif.action_url">
|
|
<a :href="notif.action_url"
|
|
class="px-3 py-1 text-xs font-medium text-purple-600 bg-purple-100 rounded hover:bg-purple-200 dark:bg-purple-900 dark:text-purple-300">
|
|
View
|
|
</a>
|
|
</template>
|
|
<template x-if="!notif.is_read">
|
|
<button @click="markAsRead(notif)"
|
|
class="px-3 py-1 text-xs font-medium text-gray-600 bg-gray-100 rounded hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300">
|
|
Mark read
|
|
</button>
|
|
</template>
|
|
<button @click="deleteNotification(notif.id)"
|
|
class="p-1 text-gray-400 hover:text-red-500 transition-colors">
|
|
<span x-html="$icon('trash', 'w-4 h-4')"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
|
|
<!-- Pagination -->
|
|
<div x-show="stats.total > limit" class="flex items-center justify-between px-4 py-3 border-t dark:border-gray-700">
|
|
<span class="text-sm text-gray-600 dark:text-gray-400">
|
|
Showing <span x-text="skip + 1"></span>-<span x-text="Math.min(skip + limit, stats.total)"></span> of <span x-text="stats.total"></span>
|
|
</span>
|
|
<div class="flex items-center gap-2">
|
|
<button
|
|
@click="prevPage()"
|
|
:disabled="page <= 1"
|
|
class="px-3 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50"
|
|
>
|
|
<span x-html="$icon('chevron-left', 'w-4 h-4')"></span>
|
|
</button>
|
|
<span class="text-sm text-gray-600 dark:text-gray-400" x-text="`${page} / ${totalPages}`"></span>
|
|
<button
|
|
@click="nextPage()"
|
|
:disabled="page >= totalPages"
|
|
class="px-3 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50"
|
|
>
|
|
<span x-html="$icon('chevron-right', 'w-4 h-4')"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings Modal -->
|
|
{% call modal_simple('notificationSettingsModal', 'Notification Settings', show_var='showSettingsModal', size='md') %}
|
|
<div class="space-y-4">
|
|
<!-- Email Notifications -->
|
|
<div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<div>
|
|
<p class="font-medium text-gray-700 dark:text-gray-300">Email Notifications</p>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Receive notifications via email</p>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" x-model="settingsForm.email_notifications" class="sr-only peer" />
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-500 peer-checked:bg-purple-600"></div>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- In-App Notifications -->
|
|
<div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<div>
|
|
<p class="font-medium text-gray-700 dark:text-gray-300">In-App Notifications</p>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Show notifications in the dashboard</p>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" x-model="settingsForm.in_app_notifications" class="sr-only peer" />
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-500 peer-checked:bg-purple-600"></div>
|
|
</label>
|
|
</div>
|
|
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 italic">
|
|
Note: Full notification settings management coming soon.
|
|
</p>
|
|
</div>
|
|
<div class="flex justify-end gap-2 pt-4 border-t dark:border-gray-700">
|
|
<button @click="showSettingsModal = false" class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200">
|
|
Cancel
|
|
</button>
|
|
<button
|
|
@click="saveSettings()"
|
|
class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700"
|
|
>
|
|
Save Settings
|
|
</button>
|
|
</div>
|
|
{% endcall %}
|
|
{% endblock %}
|
|
|
|
{% block extra_scripts %}
|
|
<script src="{{ url_for('static', path='vendor/js/notifications.js') }}"></script>
|
|
{% endblock %}
|