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>
1407 lines
98 KiB
HTML
1407 lines
98 KiB
HTML
{# app/templates/vendor/settings.html #}
|
|
{% extends "vendor/base.html" %}
|
|
{% from 'shared/macros/headers.html' import page_header_flex %}
|
|
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
|
|
{% from 'shared/macros/tabs.html' import tabs_nav, tab_button %}
|
|
|
|
{% block title %}Settings{% endblock %}
|
|
|
|
{% block alpine_data %}vendorSettings(){% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Page Header -->
|
|
{% call page_header_flex(title='Settings', subtitle='Configure your vendor preferences') %}
|
|
{% endcall %}
|
|
|
|
{{ loading_state('Loading settings...') }}
|
|
|
|
{{ error_state('Error loading settings') }}
|
|
|
|
<!-- Settings Content -->
|
|
<div x-show="!loading && !error" class="mb-8">
|
|
<!-- Section Tabs -->
|
|
{% call tabs_nav(tab_var='activeSection') %}
|
|
{{ tab_button('general', 'General', tab_var='activeSection', icon='cog') }}
|
|
{{ tab_button('business', 'Business', tab_var='activeSection', icon='office-building') }}
|
|
{{ tab_button('localization', 'Localization', tab_var='activeSection', icon='globe') }}
|
|
{{ tab_button('marketplace', 'Marketplace', tab_var='activeSection', icon='shopping-cart') }}
|
|
{{ tab_button('invoices', 'Invoices', tab_var='activeSection', icon='document-text') }}
|
|
{{ tab_button('branding', 'Branding', tab_var='activeSection', icon='color-swatch') }}
|
|
{{ tab_button('email', 'Email', tab_var='activeSection', icon='envelope') }}
|
|
{{ tab_button('domains', 'Domains', tab_var='activeSection', icon='globe-alt') }}
|
|
{{ tab_button('api', 'API', tab_var='activeSection', icon='key') }}
|
|
{{ tab_button('notifications', 'Notifications', tab_var='activeSection', icon='bell') }}
|
|
{% endcall %}
|
|
|
|
<!-- Settings Panels -->
|
|
<div>
|
|
<!-- General Settings -->
|
|
<div x-show="activeSection === 'general'" class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
|
<div class="p-4 border-b dark:border-gray-700">
|
|
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">General Settings</h3>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Basic vendor configuration</p>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="space-y-6">
|
|
<!-- Subdomain -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Subdomain
|
|
</label>
|
|
<div class="flex items-center">
|
|
<input
|
|
type="text"
|
|
x-model="generalForm.subdomain"
|
|
disabled
|
|
class="flex-1 px-4 py-2 text-sm text-gray-500 bg-gray-100 border border-gray-200 rounded-l-lg dark:text-gray-400 dark:bg-gray-700 dark:border-gray-600"
|
|
/>
|
|
<span class="px-4 py-2 text-sm text-gray-500 bg-gray-50 border border-l-0 border-gray-200 rounded-r-lg dark:text-gray-400 dark:bg-gray-600 dark:border-gray-600">
|
|
.letzshop.lu
|
|
</span>
|
|
</div>
|
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Contact support to change your subdomain</p>
|
|
</div>
|
|
|
|
<!-- Active Status -->
|
|
<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">Store Status</p>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Your store is currently visible to customers</p>
|
|
</div>
|
|
<span
|
|
:class="settings?.is_active
|
|
? 'px-3 py-1 text-sm font-semibold text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100'
|
|
: 'px-3 py-1 text-sm font-semibold text-gray-700 bg-gray-200 rounded-full dark:bg-gray-600 dark:text-gray-100'"
|
|
x-text="settings?.is_active ? 'Active' : 'Inactive'"
|
|
></span>
|
|
</div>
|
|
|
|
<!-- Verification Status -->
|
|
<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">Verification Status</p>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Verified vendors get a badge on their store</p>
|
|
</div>
|
|
<span
|
|
:class="settings?.is_verified
|
|
? 'px-3 py-1 text-sm font-semibold text-blue-700 bg-blue-100 rounded-full dark:bg-blue-700 dark:text-blue-100'
|
|
: 'px-3 py-1 text-sm font-semibold text-gray-700 bg-gray-200 rounded-full dark:bg-gray-600 dark:text-gray-100'"
|
|
x-text="settings?.is_verified ? 'Verified' : 'Not Verified'"
|
|
></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Business Info Settings -->
|
|
<div x-show="activeSection === 'business'" class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
|
<div class="p-4 border-b dark:border-gray-700">
|
|
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Business Information</h3>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">
|
|
Store details and contact information
|
|
<template x-if="companyName">
|
|
<span class="text-purple-600 dark:text-purple-400"> (inheriting from <span x-text="companyName"></span>)</span>
|
|
</template>
|
|
</p>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="space-y-6">
|
|
<!-- Store Name -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Store Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
x-model="businessForm.name"
|
|
@input="markBusinessChanged()"
|
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
placeholder="Your store name"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Store Description
|
|
</label>
|
|
<textarea
|
|
x-model="businessForm.description"
|
|
@input="markBusinessChanged()"
|
|
rows="3"
|
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
placeholder="Describe your store..."
|
|
></textarea>
|
|
</div>
|
|
|
|
<!-- Contact Email (inheritable) -->
|
|
<div>
|
|
<label class="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Contact Email
|
|
<template x-if="isFieldInherited('contact_email')">
|
|
<span class="ml-2 px-2 py-0.5 text-xs font-medium text-purple-600 bg-purple-100 rounded dark:bg-purple-900/30 dark:text-purple-400">
|
|
Inherited
|
|
</span>
|
|
</template>
|
|
</label>
|
|
<div class="flex gap-2">
|
|
<input
|
|
type="email"
|
|
x-model="businessForm.contact_email"
|
|
@input="markBusinessChanged()"
|
|
:placeholder="getEffectiveBusinessValue('contact_email') || 'contact@example.com'"
|
|
class="flex-1 px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
/>
|
|
<template x-if="businessForm.contact_email">
|
|
<button
|
|
@click="resetToCompany('contact_email')"
|
|
class="px-3 py-2 text-xs text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 dark:text-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600"
|
|
title="Reset to company value"
|
|
>
|
|
Reset
|
|
</button>
|
|
</template>
|
|
</div>
|
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
|
Leave empty to use company default
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Contact Phone (inheritable) -->
|
|
<div>
|
|
<label class="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Contact Phone
|
|
<template x-if="isFieldInherited('contact_phone')">
|
|
<span class="ml-2 px-2 py-0.5 text-xs font-medium text-purple-600 bg-purple-100 rounded dark:bg-purple-900/30 dark:text-purple-400">
|
|
Inherited
|
|
</span>
|
|
</template>
|
|
</label>
|
|
<div class="flex gap-2">
|
|
<input
|
|
type="tel"
|
|
x-model="businessForm.contact_phone"
|
|
@input="markBusinessChanged()"
|
|
:placeholder="getEffectiveBusinessValue('contact_phone') || '+352 123 456'"
|
|
class="flex-1 px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
/>
|
|
<template x-if="businessForm.contact_phone">
|
|
<button
|
|
@click="resetToCompany('contact_phone')"
|
|
class="px-3 py-2 text-xs text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 dark:text-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600"
|
|
title="Reset to company value"
|
|
>
|
|
Reset
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Website (inheritable) -->
|
|
<div>
|
|
<label class="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Website
|
|
<template x-if="isFieldInherited('website')">
|
|
<span class="ml-2 px-2 py-0.5 text-xs font-medium text-purple-600 bg-purple-100 rounded dark:bg-purple-900/30 dark:text-purple-400">
|
|
Inherited
|
|
</span>
|
|
</template>
|
|
</label>
|
|
<div class="flex gap-2">
|
|
<input
|
|
type="url"
|
|
x-model="businessForm.website"
|
|
@input="markBusinessChanged()"
|
|
:placeholder="getEffectiveBusinessValue('website') || 'https://'"
|
|
class="flex-1 px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
/>
|
|
<template x-if="businessForm.website">
|
|
<button
|
|
@click="resetToCompany('website')"
|
|
class="px-3 py-2 text-xs text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 dark:text-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600"
|
|
title="Reset to company value"
|
|
>
|
|
Reset
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Business Address (inheritable) -->
|
|
<div>
|
|
<label class="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Business Address
|
|
<template x-if="isFieldInherited('business_address')">
|
|
<span class="ml-2 px-2 py-0.5 text-xs font-medium text-purple-600 bg-purple-100 rounded dark:bg-purple-900/30 dark:text-purple-400">
|
|
Inherited
|
|
</span>
|
|
</template>
|
|
</label>
|
|
<div class="flex gap-2">
|
|
<textarea
|
|
x-model="businessForm.business_address"
|
|
@input="markBusinessChanged()"
|
|
rows="2"
|
|
:placeholder="getEffectiveBusinessValue('business_address') || 'Street, City, Country'"
|
|
class="flex-1 px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
></textarea>
|
|
<template x-if="businessForm.business_address">
|
|
<button
|
|
@click="resetToCompany('business_address')"
|
|
class="px-3 py-2 text-xs text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 dark:text-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600"
|
|
title="Reset to company value"
|
|
>
|
|
Reset
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tax Number (inheritable) -->
|
|
<div>
|
|
<label class="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Tax / VAT Number
|
|
<template x-if="isFieldInherited('tax_number')">
|
|
<span class="ml-2 px-2 py-0.5 text-xs font-medium text-purple-600 bg-purple-100 rounded dark:bg-purple-900/30 dark:text-purple-400">
|
|
Inherited
|
|
</span>
|
|
</template>
|
|
</label>
|
|
<div class="flex gap-2">
|
|
<input
|
|
type="text"
|
|
x-model="businessForm.tax_number"
|
|
@input="markBusinessChanged()"
|
|
:placeholder="getEffectiveBusinessValue('tax_number') || 'LU12345678'"
|
|
class="flex-1 px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
/>
|
|
<template x-if="businessForm.tax_number">
|
|
<button
|
|
@click="resetToCompany('tax_number')"
|
|
class="px-3 py-2 text-xs text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 dark:text-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600"
|
|
title="Reset to company value"
|
|
>
|
|
Reset
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Save Button -->
|
|
<div class="flex justify-end pt-4 border-t dark:border-gray-600">
|
|
<button
|
|
@click="saveBusinessInfo()"
|
|
:disabled="saving || !hasBusinessChanges"
|
|
class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50"
|
|
>
|
|
<span x-show="!saving">Save Business Info</span>
|
|
<span x-show="saving">Saving...</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Localization Settings -->
|
|
<div x-show="activeSection === 'localization'" class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
|
<div class="p-4 border-b dark:border-gray-700">
|
|
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Localization</h3>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Configure language and regional settings</p>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="space-y-6">
|
|
<!-- Currency (Read-only) -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Currency
|
|
</label>
|
|
<div class="flex items-center gap-3">
|
|
<input
|
|
type="text"
|
|
:value="settings?.localization?.platform_currency || 'EUR'"
|
|
disabled
|
|
class="w-32 px-4 py-2 text-sm text-gray-500 bg-gray-100 border border-gray-200 rounded-lg dark:text-gray-400 dark:bg-gray-700 dark:border-gray-600"
|
|
/>
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">
|
|
Platform-wide currency (contact admin to change)
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Storefront Locale -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Number & Currency Format
|
|
</label>
|
|
<select
|
|
x-model="localizationForm.storefront_locale"
|
|
@change="markLocalizationChanged()"
|
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
>
|
|
<option value="">Use platform default (<span x-text="settings?.localization?.platform_default_locale"></span>)</option>
|
|
<template x-for="locale in settings?.options?.supported_locales || []" :key="locale.code">
|
|
<option :value="locale.code" x-text="`${locale.name} (${locale.example})`"></option>
|
|
</template>
|
|
</select>
|
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
|
Controls how prices and numbers are displayed (e.g., "29,99 EUR" vs "EUR29.99")
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Dashboard Language -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Dashboard Language
|
|
</label>
|
|
<select
|
|
x-model="localizationForm.dashboard_language"
|
|
@change="markLocalizationChanged()"
|
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
>
|
|
<template x-for="lang in settings?.options?.supported_languages || []" :key="lang.code">
|
|
<option :value="lang.code" x-text="lang.name"></option>
|
|
</template>
|
|
</select>
|
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
|
Language for the vendor dashboard interface
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Default Content Language -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Default Content Language
|
|
</label>
|
|
<select
|
|
x-model="localizationForm.default_language"
|
|
@change="markLocalizationChanged()"
|
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
>
|
|
<template x-for="lang in settings?.options?.supported_languages || []" :key="lang.code">
|
|
<option :value="lang.code" x-text="lang.name"></option>
|
|
</template>
|
|
</select>
|
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
|
Primary language for products, emails, and other content
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Storefront Default Language -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Storefront Default Language
|
|
</label>
|
|
<select
|
|
x-model="localizationForm.storefront_language"
|
|
@change="markLocalizationChanged()"
|
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
>
|
|
<template x-for="lang in settings?.options?.supported_languages || []" :key="lang.code">
|
|
<option :value="lang.code" x-text="lang.name"></option>
|
|
</template>
|
|
</select>
|
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
|
Default language shown to customers visiting your shop
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Enabled Storefront Languages -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Enabled Storefront Languages
|
|
</label>
|
|
<div class="flex flex-wrap gap-3">
|
|
<template x-for="lang in settings?.options?.supported_languages || []" :key="lang.code">
|
|
<label class="inline-flex items-center cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
:value="lang.code"
|
|
:checked="localizationForm.storefront_languages?.includes(lang.code)"
|
|
@change="toggleStorefrontLanguage(lang.code)"
|
|
class="w-4 h-4 text-purple-600 bg-gray-100 border-gray-300 rounded focus:ring-purple-500 dark:focus:ring-purple-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
|
|
/>
|
|
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300" x-text="lang.name"></span>
|
|
</label>
|
|
</template>
|
|
</div>
|
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
|
Languages available in the storefront language selector
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Save Button -->
|
|
<div class="flex justify-end pt-4 border-t dark:border-gray-600">
|
|
<button
|
|
@click="saveLocalizationSettings()"
|
|
:disabled="saving || !hasLocalizationChanges"
|
|
class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50"
|
|
>
|
|
<span x-show="!saving">Save Localization Settings</span>
|
|
<span x-show="saving">Saving...</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Marketplace Settings -->
|
|
<div x-show="activeSection === 'marketplace'" class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
|
<div class="p-4 border-b dark:border-gray-700">
|
|
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Marketplace Integration</h3>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Configure Letzshop marketplace feed settings</p>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="space-y-6">
|
|
<!-- Letzshop Vendor Info (read-only) -->
|
|
<template x-if="settings?.letzshop?.vendor_id">
|
|
<div class="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<span x-html="$icon('check-circle', 'w-5 h-5 text-green-600 dark:text-green-400')"></span>
|
|
<span class="font-medium text-green-800 dark:text-green-300">Connected to Letzshop</span>
|
|
</div>
|
|
<p class="text-sm text-green-700 dark:text-green-400">
|
|
Vendor ID: <span x-text="settings?.letzshop?.vendor_id"></span>
|
|
<template x-if="settings?.letzshop?.vendor_slug">
|
|
<span> (<span x-text="settings?.letzshop?.vendor_slug"></span>)</span>
|
|
</template>
|
|
</p>
|
|
<template x-if="settings?.letzshop?.auto_sync_enabled">
|
|
<p class="text-sm text-green-700 dark:text-green-400 mt-1">
|
|
Auto-sync is enabled
|
|
</p>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Letzshop CSV URLs -->
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<h4 class="font-medium text-gray-700 dark:text-gray-300 mb-4">Letzshop CSV Feed URLs</h4>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
|
|
Enter the URLs for your Letzshop product feeds in different languages.
|
|
</p>
|
|
|
|
<!-- French URL -->
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
French (FR)
|
|
</label>
|
|
<div class="flex gap-2">
|
|
<input
|
|
type="url"
|
|
x-model="marketplaceForm.letzshop_csv_url_fr"
|
|
@input="markMarketplaceChanged()"
|
|
class="flex-1 px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
placeholder="https://..."
|
|
/>
|
|
<button
|
|
@click="testLetzshopUrl('fr')"
|
|
:disabled="saving"
|
|
class="px-3 py-2 text-sm text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 dark:text-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500"
|
|
>
|
|
Test
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- English URL -->
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
English (EN)
|
|
</label>
|
|
<div class="flex gap-2">
|
|
<input
|
|
type="url"
|
|
x-model="marketplaceForm.letzshop_csv_url_en"
|
|
@input="markMarketplaceChanged()"
|
|
class="flex-1 px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
placeholder="https://..."
|
|
/>
|
|
<button
|
|
@click="testLetzshopUrl('en')"
|
|
:disabled="saving"
|
|
class="px-3 py-2 text-sm text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 dark:text-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500"
|
|
>
|
|
Test
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- German URL -->
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
German (DE)
|
|
</label>
|
|
<div class="flex gap-2">
|
|
<input
|
|
type="url"
|
|
x-model="marketplaceForm.letzshop_csv_url_de"
|
|
@input="markMarketplaceChanged()"
|
|
class="flex-1 px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
placeholder="https://..."
|
|
/>
|
|
<button
|
|
@click="testLetzshopUrl('de')"
|
|
:disabled="saving"
|
|
class="px-3 py-2 text-sm text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 dark:text-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500"
|
|
>
|
|
Test
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Letzshop Feed Options -->
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<h4 class="font-medium text-gray-700 dark:text-gray-300 mb-4">Feed Options</h4>
|
|
|
|
<!-- Default Tax Rate -->
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Default VAT Rate
|
|
</label>
|
|
<select
|
|
x-model="marketplaceForm.letzshop_default_tax_rate"
|
|
@change="markMarketplaceChanged()"
|
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
>
|
|
<option :value="null">Not set</option>
|
|
<template x-for="rate in settings?.options?.tax_rates || []" :key="rate.value">
|
|
<option :value="rate.value" x-text="rate.label"></option>
|
|
</template>
|
|
</select>
|
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
|
Default VAT rate for products without explicit rate
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Delivery Method -->
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Delivery Method
|
|
</label>
|
|
<select
|
|
x-model="marketplaceForm.letzshop_delivery_method"
|
|
@change="markMarketplaceChanged()"
|
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
>
|
|
<option value="">Not set</option>
|
|
<template x-for="method in settings?.options?.delivery_methods || []" :key="method.value">
|
|
<option :value="method.value" x-text="method.label"></option>
|
|
</template>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Boost Sort -->
|
|
{# noqa: FE-008 - Decimal input with 0.1 step and custom @input handler, not suited for number_stepper #}
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Boost Sort Priority
|
|
</label>
|
|
<input
|
|
type="number"
|
|
step="0.1"
|
|
min="0"
|
|
max="10"
|
|
x-model="marketplaceForm.letzshop_boost_sort"
|
|
@input="markMarketplaceChanged()"
|
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
placeholder="0.0 - 10.0"
|
|
/>
|
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
|
Higher values boost product visibility (0.0 - 10.0)
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Preorder Days -->
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Pre-order Lead Time (days)
|
|
</label>
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
x-model="marketplaceForm.letzshop_preorder_days"
|
|
@input="markMarketplaceChanged()"
|
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
placeholder="0"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Save Button -->
|
|
<div class="flex justify-end pt-4 border-t dark:border-gray-600">
|
|
<button
|
|
@click="saveMarketplaceSettings()"
|
|
:disabled="saving || !hasMarketplaceChanges"
|
|
class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50"
|
|
>
|
|
<span x-show="!saving">Save Marketplace Settings</span>
|
|
<span x-show="saving">Saving...</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Invoice Settings -->
|
|
<div x-show="activeSection === 'invoices'" class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
|
<div class="p-4 border-b dark:border-gray-700">
|
|
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Invoice Settings</h3>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Configure invoice generation and billing details</p>
|
|
</div>
|
|
<div class="p-4">
|
|
<template x-if="settings?.invoice_settings">
|
|
<div class="space-y-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<!-- Company Name -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Company Name</label>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400" x-text="settings?.invoice_settings?.company_name || '-'"></p>
|
|
</div>
|
|
<!-- VAT Number -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">VAT Number</label>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400" x-text="settings?.invoice_settings?.vat_number || '-'"></p>
|
|
</div>
|
|
<!-- Address -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Address</label>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">
|
|
<span x-text="settings?.invoice_settings?.company_address || '-'"></span>
|
|
<template x-if="settings?.invoice_settings?.company_postal_code || settings?.invoice_settings?.company_city">
|
|
<br/><span x-text="`${settings?.invoice_settings?.company_postal_code || ''} ${settings?.invoice_settings?.company_city || ''}`"></span>
|
|
</template>
|
|
</p>
|
|
</div>
|
|
<!-- Invoice Prefix -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Invoice Prefix</label>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400" x-text="settings?.invoice_settings?.invoice_prefix || '-'"></p>
|
|
</div>
|
|
<!-- Default VAT Rate -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Default VAT Rate</label>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400" x-text="settings?.invoice_settings?.default_vat_rate ? settings.invoice_settings.default_vat_rate + '%' : '-'"></p>
|
|
</div>
|
|
<!-- Payment Terms -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Payment Terms</label>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400" x-text="settings?.invoice_settings?.payment_terms || '-'"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bank Details -->
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<h4 class="font-medium text-gray-700 dark:text-gray-300 mb-3">Bank Details</h4>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">Bank</label>
|
|
<p class="text-sm text-gray-800 dark:text-gray-200" x-text="settings?.invoice_settings?.bank_name || '-'"></p>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">IBAN</label>
|
|
<p class="text-sm text-gray-800 dark:text-gray-200" x-text="settings?.invoice_settings?.bank_iban || '-'"></p>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">BIC</label>
|
|
<p class="text-sm text-gray-800 dark:text-gray-200" x-text="settings?.invoice_settings?.bank_bic || '-'"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 italic">
|
|
Contact support to update invoice settings.
|
|
</p>
|
|
</div>
|
|
</template>
|
|
<template x-if="!settings?.invoice_settings">
|
|
<div class="text-center py-8">
|
|
<span x-html="$icon('document-text', 'w-12 h-12 mx-auto text-gray-400 dark:text-gray-500')"></span>
|
|
<p class="mt-2 text-gray-500 dark:text-gray-400">No invoice settings configured</p>
|
|
<p class="text-sm text-gray-400 dark:text-gray-500">Contact support to set up invoicing.</p>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Branding Settings -->
|
|
<div x-show="activeSection === 'branding'" class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
|
<div class="p-4 border-b dark:border-gray-700">
|
|
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Branding & Theme</h3>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Customize your storefront appearance</p>
|
|
</div>
|
|
<div class="p-4">
|
|
<template x-if="settings?.theme_settings">
|
|
<div class="space-y-6">
|
|
<!-- Theme Name -->
|
|
<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">Active Theme</p>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400" x-text="settings?.theme_settings?.theme_name || 'Default'"></p>
|
|
</div>
|
|
<span class="px-3 py-1 text-sm font-semibold text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100">
|
|
Active
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Logos -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<template x-if="settings?.theme_settings?.logo_url">
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Logo</p>
|
|
<img :src="settings?.theme_settings?.logo_url" alt="Logo" class="max-h-16 object-contain" />
|
|
</div>
|
|
</template>
|
|
<template x-if="settings?.theme_settings?.favicon_url">
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Favicon</p>
|
|
<img :src="settings?.theme_settings?.favicon_url" alt="Favicon" class="max-h-8 object-contain" />
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Layout Style -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Layout Style</label>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400" x-text="settings?.theme_settings?.layout_style || 'Default'"></p>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Header Style</label>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400" x-text="settings?.theme_settings?.header_style || 'Default'"></p>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Product Card Style</label>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400" x-text="settings?.theme_settings?.product_card_style || 'Default'"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Social Links -->
|
|
<template x-if="settings?.theme_settings?.social_links && Object.keys(settings.theme_settings.social_links).length > 0">
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Social Links</p>
|
|
<div class="flex flex-wrap gap-3">
|
|
<template x-for="(url, platform) in settings?.theme_settings?.social_links || {}" :key="platform">
|
|
<a :href="url" target="_blank" class="px-3 py-1 text-sm bg-white dark:bg-gray-600 rounded border dark:border-gray-500 hover:bg-gray-100 dark:hover:bg-gray-500">
|
|
<span x-text="platform"></span>
|
|
</a>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 italic">
|
|
Theme customization coming soon. Contact support for custom branding requests.
|
|
</p>
|
|
</div>
|
|
</template>
|
|
<template x-if="!settings?.theme_settings">
|
|
<div class="text-center py-8">
|
|
<span x-html="$icon('color-swatch', 'w-12 h-12 mx-auto text-gray-400 dark:text-gray-500')"></span>
|
|
<p class="mt-2 text-gray-500 dark:text-gray-400">Using default theme</p>
|
|
<p class="text-sm text-gray-400 dark:text-gray-500">Contact support for custom branding.</p>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Email Settings -->
|
|
<div x-show="activeSection === 'email'" class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
|
<div class="p-4 border-b dark:border-gray-700">
|
|
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Email Settings</h3>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Configure your email sending settings for customer communications</p>
|
|
</div>
|
|
<div class="p-4">
|
|
<!-- Loading state for email settings -->
|
|
<div x-show="emailSettingsLoading" class="flex justify-center py-8">
|
|
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600"></div>
|
|
</div>
|
|
|
|
<div x-show="!emailSettingsLoading" class="space-y-6">
|
|
<!-- Configuration Status Banner -->
|
|
<template x-if="!emailSettings?.is_configured">
|
|
<div class="p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
|
|
<div class="flex items-start gap-3">
|
|
<span x-html="$icon('exclamation-triangle', 'w-5 h-5 text-yellow-600 dark:text-yellow-400 flex-shrink-0 mt-0.5')"></span>
|
|
<div>
|
|
<p class="font-medium text-yellow-800 dark:text-yellow-300">Email not configured</p>
|
|
<p class="text-sm text-yellow-700 dark:text-yellow-400 mt-1">
|
|
Configure your SMTP settings to send emails to your customers (order confirmations, shipping updates, etc.)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template x-if="emailSettings?.is_configured && !emailSettings?.is_verified">
|
|
<div class="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
|
|
<div class="flex items-start gap-3">
|
|
<span x-html="$icon('information-circle', 'w-5 h-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5')"></span>
|
|
<div>
|
|
<p class="font-medium text-blue-800 dark:text-blue-300">Email configured but not verified</p>
|
|
<p class="text-sm text-blue-700 dark:text-blue-400 mt-1">
|
|
Send a test email to verify your settings are working correctly.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template x-if="emailSettings?.is_configured && emailSettings?.is_verified">
|
|
<div class="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
|
|
<div class="flex items-start gap-3">
|
|
<span x-html="$icon('check-circle', 'w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5')"></span>
|
|
<div>
|
|
<p class="font-medium text-green-800 dark:text-green-300">Email configured and verified</p>
|
|
<p class="text-sm text-green-700 dark:text-green-400 mt-1">
|
|
Your email settings are ready. Emails will be sent from <span class="font-medium" x-text="emailForm.from_email"></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Sender Identity -->
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<h4 class="font-medium text-gray-700 dark:text-gray-300 mb-4">Sender Identity</h4>
|
|
<div class="space-y-4">
|
|
<!-- From Email -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
From Email <span class="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="email"
|
|
x-model="emailForm.from_email"
|
|
@input="markEmailChanged()"
|
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
placeholder="orders@yourstore.com"
|
|
/>
|
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
|
Email address that customers will see in their inbox
|
|
</p>
|
|
</div>
|
|
|
|
<!-- From Name -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
From Name <span class="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
x-model="emailForm.from_name"
|
|
@input="markEmailChanged()"
|
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
placeholder="Your Store Name"
|
|
/>
|
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
|
Name that appears as the sender (e.g., "Your Store Name")
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Reply-To Email -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Reply-To Email
|
|
</label>
|
|
<input
|
|
type="email"
|
|
x-model="emailForm.reply_to_email"
|
|
@input="markEmailChanged()"
|
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
placeholder="support@yourstore.com"
|
|
/>
|
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
|
Optional: Where replies should go (defaults to From Email)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Email Provider -->
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<h4 class="font-medium text-gray-700 dark:text-gray-300 mb-4">Email Provider</h4>
|
|
<div class="space-y-4">
|
|
<!-- Provider Selection -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Provider
|
|
</label>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
|
|
<template x-for="provider in emailProviders" :key="provider.code">
|
|
<button
|
|
type="button"
|
|
@click="provider.available ? (emailForm.provider = provider.code, markEmailChanged()) : null"
|
|
:class="emailForm.provider === provider.code
|
|
? 'border-purple-500 bg-purple-50 dark:bg-purple-900/30'
|
|
: provider.available
|
|
? 'border-gray-200 dark:border-gray-600 hover:border-purple-300'
|
|
: 'border-gray-200 dark:border-gray-600 opacity-50 cursor-not-allowed'"
|
|
class="relative p-3 border-2 rounded-lg transition-colors"
|
|
>
|
|
<div class="text-sm font-medium text-gray-700 dark:text-gray-300" x-text="provider.name"></div>
|
|
<div class="text-xs text-gray-500 dark:text-gray-400 mt-1" x-text="provider.description"></div>
|
|
<template x-if="!provider.available">
|
|
<div class="absolute top-1 right-1">
|
|
<span class="px-1.5 py-0.5 text-xs font-medium text-purple-600 bg-purple-100 rounded dark:bg-purple-900/50 dark:text-purple-400">
|
|
Business+
|
|
</span>
|
|
</div>
|
|
</template>
|
|
<template x-if="emailForm.provider === provider.code">
|
|
<div class="absolute top-1 right-1">
|
|
<span x-html="$icon('check-circle', 'w-5 h-5 text-purple-600 dark:text-purple-400')"></span>
|
|
</div>
|
|
</template>
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SMTP Settings -->
|
|
<template x-if="emailForm.provider === 'smtp'">
|
|
<div class="space-y-4 pt-4 border-t dark:border-gray-600">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<!-- SMTP Host -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
SMTP Host <span class="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
x-model="emailForm.smtp_host"
|
|
@input="markEmailChanged()"
|
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
placeholder="smtp.yourprovider.com"
|
|
/>
|
|
</div>
|
|
|
|
<!-- SMTP Port -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
SMTP Port <span class="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="number"
|
|
x-model.number="emailForm.smtp_port"
|
|
@input="markEmailChanged()"
|
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
placeholder="587"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<!-- SMTP Username -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
SMTP Username <span class="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
x-model="emailForm.smtp_username"
|
|
@input="markEmailChanged()"
|
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
placeholder="your-username"
|
|
/>
|
|
</div>
|
|
|
|
<!-- SMTP Password -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
SMTP Password <span class="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="password"
|
|
x-model="emailForm.smtp_password"
|
|
@input="markEmailChanged()"
|
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
:placeholder="emailSettings?.smtp_password_set ? '••••••••' : 'Enter password'"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TLS/SSL Options -->
|
|
<div class="flex items-center gap-6">
|
|
<label class="flex items-center cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
x-model="emailForm.smtp_use_tls"
|
|
@change="markEmailChanged()"
|
|
class="w-4 h-4 text-purple-600 bg-gray-100 border-gray-300 rounded focus:ring-purple-500"
|
|
/>
|
|
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Use TLS (STARTTLS)</span>
|
|
</label>
|
|
<label class="flex items-center cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
x-model="emailForm.smtp_use_ssl"
|
|
@change="markEmailChanged()"
|
|
class="w-4 h-4 text-purple-600 bg-gray-100 border-gray-300 rounded focus:ring-purple-500"
|
|
/>
|
|
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Use SSL (port 465)</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- SendGrid Settings -->
|
|
<template x-if="emailForm.provider === 'sendgrid'">
|
|
<div class="space-y-4 pt-4 border-t dark:border-gray-600">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
SendGrid API Key <span class="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="password"
|
|
x-model="emailForm.sendgrid_api_key"
|
|
@input="markEmailChanged()"
|
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
:placeholder="emailSettings?.sendgrid_api_key_set ? '••••••••' : 'SG.xxxxx'"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Mailgun Settings -->
|
|
<template x-if="emailForm.provider === 'mailgun'">
|
|
<div class="space-y-4 pt-4 border-t dark:border-gray-600">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Mailgun API Key <span class="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="password"
|
|
x-model="emailForm.mailgun_api_key"
|
|
@input="markEmailChanged()"
|
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
:placeholder="emailSettings?.mailgun_api_key_set ? '••••••••' : 'key-xxxxx'"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Mailgun Domain <span class="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
x-model="emailForm.mailgun_domain"
|
|
@input="markEmailChanged()"
|
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
placeholder="mg.yourdomain.com"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- SES Settings -->
|
|
<template x-if="emailForm.provider === 'ses'">
|
|
<div class="space-y-4 pt-4 border-t dark:border-gray-600">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
AWS Access Key ID <span class="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
x-model="emailForm.ses_access_key_id"
|
|
@input="markEmailChanged()"
|
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
placeholder="AKIAIOSFODNN7EXAMPLE"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
AWS Secret Access Key <span class="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="password"
|
|
x-model="emailForm.ses_secret_access_key"
|
|
@input="markEmailChanged()"
|
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
:placeholder="emailSettings?.ses_access_key_id_set ? '••••••••' : 'Enter secret'"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
AWS Region
|
|
</label>
|
|
<select
|
|
x-model="emailForm.ses_region"
|
|
@change="markEmailChanged()"
|
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
>
|
|
<option value="eu-west-1">EU (Ireland)</option>
|
|
<option value="eu-central-1">EU (Frankfurt)</option>
|
|
<option value="us-east-1">US East (N. Virginia)</option>
|
|
<option value="us-west-2">US West (Oregon)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Signature (Optional) -->
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<h4 class="font-medium text-gray-700 dark:text-gray-300 mb-4">Email Signature (Optional)</h4>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Plain Text Signature
|
|
</label>
|
|
<textarea
|
|
x-model="emailForm.signature_text"
|
|
@input="markEmailChanged()"
|
|
rows="3"
|
|
class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
placeholder="Best regards, The Your Store Team"
|
|
></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="flex flex-col sm:flex-row justify-between gap-4 pt-4 border-t dark:border-gray-600">
|
|
<!-- Test Email -->
|
|
<div class="flex items-center gap-2">
|
|
<input
|
|
type="email"
|
|
x-model="testEmailAddress"
|
|
class="px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
|
placeholder="test@example.com"
|
|
/>
|
|
<button
|
|
@click="sendTestEmail()"
|
|
:disabled="!emailSettings?.is_configured || sendingTestEmail || !testEmailAddress"
|
|
class="px-4 py-2 text-sm font-medium text-purple-600 bg-purple-100 rounded-lg hover:bg-purple-200 disabled:opacity-50 dark:bg-purple-900/30 dark:text-purple-400"
|
|
>
|
|
<span x-show="!sendingTestEmail">Send Test</span>
|
|
<span x-show="sendingTestEmail">Sending...</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Save Button -->
|
|
<button
|
|
@click="saveEmailSettings()"
|
|
:disabled="saving || !hasEmailChanges"
|
|
class="px-6 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50"
|
|
>
|
|
<span x-show="!saving">Save Email Settings</span>
|
|
<span x-show="saving">Saving...</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Domains Settings -->
|
|
<div x-show="activeSection === 'domains'" class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
|
<div class="p-4 border-b dark:border-gray-700">
|
|
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Domains</h3>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Manage your storefront domains</p>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="space-y-4">
|
|
<!-- Default Subdomain -->
|
|
<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">Default Subdomain</p>
|
|
<p class="text-sm text-purple-600 dark:text-purple-400" x-text="settings?.default_subdomain"></p>
|
|
</div>
|
|
<span class="px-3 py-1 text-sm font-semibold text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100">
|
|
Active
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Custom Domains -->
|
|
<template x-if="settings?.domains?.length > 0">
|
|
<div class="space-y-3">
|
|
<h4 class="font-medium text-gray-700 dark:text-gray-300">Custom Domains</h4>
|
|
<template x-for="domain in settings?.domains" :key="domain.id">
|
|
<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" x-text="domain.domain"></p>
|
|
<div class="flex items-center gap-2 mt-1">
|
|
<span
|
|
:class="domain.is_verified
|
|
? 'text-green-600 dark:text-green-400'
|
|
: 'text-yellow-600 dark:text-yellow-400'"
|
|
class="text-xs"
|
|
x-text="domain.is_verified ? 'Verified' : 'Pending verification'"
|
|
></span>
|
|
<span class="text-gray-300 dark:text-gray-600">|</span>
|
|
<span
|
|
:class="domain.ssl_status === 'active'
|
|
? 'text-green-600 dark:text-green-400'
|
|
: 'text-yellow-600 dark:text-yellow-400'"
|
|
class="text-xs"
|
|
x-text="domain.ssl_status === 'active' ? 'SSL Active' : 'SSL ' + (domain.ssl_status || 'pending')"
|
|
></span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<template x-if="domain.is_primary">
|
|
<span class="px-2 py-1 text-xs font-medium text-purple-600 bg-purple-100 rounded dark:bg-purple-900/30 dark:text-purple-400">
|
|
Primary
|
|
</span>
|
|
</template>
|
|
<span
|
|
:class="domain.is_active
|
|
? 'px-3 py-1 text-sm font-semibold text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100'
|
|
: 'px-3 py-1 text-sm font-semibold text-gray-700 bg-gray-200 rounded-full dark:bg-gray-600 dark:text-gray-100'"
|
|
x-text="domain.is_active ? 'Active' : 'Inactive'"
|
|
></span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
|
|
<div class="flex items-start gap-2">
|
|
<span x-html="$icon('information-circle', 'w-5 h-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5')"></span>
|
|
<div>
|
|
<p class="text-sm text-blue-800 dark:text-blue-300">
|
|
Need a custom domain? Contact support to set up your own domain with SSL.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- API & Payments Settings -->
|
|
<div x-show="activeSection === 'api'" class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
|
<div class="p-4 border-b dark:border-gray-700">
|
|
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">API & Payments</h3>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Payment integrations and API access</p>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="space-y-6">
|
|
<!-- Stripe Integration -->
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="w-10 h-10 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center">
|
|
<span x-html="$icon('credit-card', 'w-6 h-6 text-purple-600 dark:text-purple-400')"></span>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-medium text-gray-700 dark:text-gray-300">Stripe</h4>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Payment processing</p>
|
|
</div>
|
|
</div>
|
|
|
|
<template x-if="settings?.stripe_info?.has_stripe_customer">
|
|
<div class="space-y-3">
|
|
<div class="flex items-center gap-2">
|
|
<span x-html="$icon('check-circle', 'w-5 h-5 text-green-600 dark:text-green-400')"></span>
|
|
<span class="text-sm text-green-700 dark:text-green-300">Connected</span>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Customer ID</label>
|
|
<p class="text-sm font-mono text-gray-700 dark:text-gray-300" x-text="settings?.stripe_info?.customer_id_masked"></p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template x-if="!settings?.stripe_info?.has_stripe_customer">
|
|
<div class="flex items-center gap-2">
|
|
<span x-html="$icon('x-circle', 'w-5 h-5 text-gray-400 dark:text-gray-500')"></span>
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">Not connected</span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Letzshop API (if credentials exist) -->
|
|
<template x-if="settings?.letzshop?.has_credentials">
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="w-10 h-10 bg-orange-100 dark:bg-orange-900/30 rounded-lg flex items-center justify-center">
|
|
<span x-html="$icon('shopping-cart', 'w-6 h-6 text-orange-600 dark:text-orange-400')"></span>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-medium text-gray-700 dark:text-gray-300">Letzshop API</h4>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Marketplace integration</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span x-html="$icon('check-circle', 'w-5 h-5 text-green-600 dark:text-green-400')"></span>
|
|
<span class="text-sm text-green-700 dark:text-green-300">Credentials configured</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
|
|
<div class="flex items-start gap-2">
|
|
<span x-html="$icon('information-circle', 'w-5 h-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5')"></span>
|
|
<div>
|
|
<p class="text-sm text-blue-800 dark:text-blue-300">
|
|
API keys and payment credentials are managed securely. Contact support for changes.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notification Settings -->
|
|
<div x-show="activeSection === 'notifications'" class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
|
<div class="p-4 border-b dark:border-gray-700">
|
|
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Notification Preferences</h3>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Control how you receive notifications</p>
|
|
</div>
|
|
<div class="p-4">
|
|
<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 important updates via email</p>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" x-model="notificationForm.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>
|
|
|
|
<!-- Order 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">Order Notifications</p>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Get notified when you receive new orders</p>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" x-model="notificationForm.order_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>
|
|
|
|
<!-- Marketing Emails -->
|
|
<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">Marketing Emails</p>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Receive tips, updates, and promotional content</p>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" x-model="notificationForm.marketing_emails" 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: Notification settings are currently display-only. Full notification management coming soon.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_scripts %}
|
|
<script src="{{ url_for('static', path='vendor/js/settings.js') }}"></script>
|
|
{% endblock %}
|