sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: comprehensive vendor settings overhaul with Company inheritance

Browse Source 
- Add structured API response with business_info, localization, letzshop,
  invoice_settings, theme_settings, domains, and stripe_info sections
- Add PUT /vendor/settings/business-info with reset_to_company capability
- Add PUT /vendor/settings/letzshop with validation for tax rates, delivery
- Add 9 settings sections: General, Business Info, Localization, Marketplace,
  Invoices, Branding, Domains, API & Payments, Notifications
- Business Info shows "Inherited" badges and Reset buttons for company fields
- Marketplace section includes Letzshop CSV URLs and feed options
- Read-only sections for Invoices, Branding, Domains, API with contact support
- Add globe-alt icon for Domains section
- Document email templates architecture for future implementation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Samir Boulahtit
2026-01-03 12:16:36 +01:00
parent 3715493e47
commit 7d1ec2bdc2
6 changed files with 1514 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

423
app/api/v1/vendor/settings.py vendored
View File

@@ -8,51 +8,440 @@ The get_current_vendor_api dependency guarantees token_vendor_id is present.
import logging
from fastapi import APIRouter, Depends
from fastapi import APIRouter, Depends, HTTPException
from pydantic import BaseModel, Field
from sqlalchemy.orm import Session
from app.api.deps import get_current_vendor_api
from app.core.database import get_db
from app.services.platform_settings_service import platform_settings_service
from app.services.vendor_service import vendor_service
from models.database.user import User
router = APIRouter(prefix="/settings")
logger = logging.getLogger(__name__)
# Supported languages for dropdown
SUPPORTED_LANGUAGES = [
{"code": "en", "name": "English"},
{"code": "fr", "name": "Français"},
{"code": "de", "name": "Deutsch"},
{"code": "lb", "name": "Lëtzebuergesch"},
]
# Supported locales for currency/number formatting
SUPPORTED_LOCALES = [
{"code": "fr-LU", "name": "Luxembourg (French)", "example": "29,99 €"},
{"code": "de-LU", "name": "Luxembourg (German)", "example": "29,99 €"},
{"code": "de-DE", "name": "Germany", "example": "29,99 €"},
{"code": "fr-FR", "name": "France", "example": "29,99 €"},
{"code": "en-GB", "name": "United Kingdom", "example": "€29.99"},
]
class LocalizationSettingsUpdate(BaseModel):
"""Schema for updating localization settings."""
default_language: str | None = Field(
None, description="Default language for vendor content"
)
dashboard_language: str | None = Field(
None, description="Language for vendor dashboard UI"
)
storefront_language: str | None = Field(
None, description="Default language for customer storefront"
)
storefront_languages: list[str] | None = Field(
None, description="Enabled languages for storefront selector"
)
storefront_locale: str | None = Field(
None, description="Locale for currency/number formatting"
)
class BusinessInfoUpdate(BaseModel):
"""Schema for updating business info (can override company values)."""
name: str | None = Field(None, description="Store/brand name")
description: str | None = Field(None, description="Store description")
contact_email: str | None = Field(None, description="Contact email (null = inherit from company)")
contact_phone: str | None = Field(None, description="Contact phone (null = inherit from company)")
website: str | None = Field(None, description="Website URL (null = inherit from company)")
business_address: str | None = Field(None, description="Business address (null = inherit from company)")
tax_number: str | None = Field(None, description="Tax/VAT number (null = inherit from company)")
reset_to_company: list[str] | None = Field(
None, description="List of fields to reset to company values (e.g., ['contact_email', 'website'])"
)
class LetzshopFeedSettingsUpdate(BaseModel):
"""Schema for updating Letzshop feed settings."""
letzshop_csv_url_fr: str | None = Field(None, description="French CSV feed URL")
letzshop_csv_url_en: str | None = Field(None, description="English CSV feed URL")
letzshop_csv_url_de: str | None = Field(None, description="German CSV feed URL")
letzshop_default_tax_rate: int | None = Field(None, description="Default VAT rate (0, 3, 8, 14, 17)")
letzshop_boost_sort: str | None = Field(None, description="Sort priority (0.0-10.0)")
letzshop_delivery_method: str | None = Field(None, description="Delivery method")
letzshop_preorder_days: int | None = Field(None, description="Pre-order lead time in days")
# Valid Letzshop tax rates
VALID_TAX_RATES = [0, 3, 8, 14, 17]
# Valid delivery methods
VALID_DELIVERY_METHODS = ["nationwide", "package_delivery", "self_collect"]
@router.get("")
def get_vendor_settings(
current_user: User = Depends(get_current_vendor_api),
db: Session = Depends(get_db),
):
"""Get vendor settings and configuration."""
"""Get comprehensive vendor settings and configuration."""
vendor = vendor_service.get_vendor_by_id(db, current_user.token_vendor_id)
# Get platform defaults for display
platform_config = platform_settings_service.get_storefront_config(db)
# Get business info with inheritance flags
contact_info = vendor.get_contact_info_with_inheritance()
# Get invoice settings if exists
invoice_settings = None
if vendor.invoice_settings:
inv = vendor.invoice_settings
invoice_settings = {
"company_name": inv.company_name,
"company_address": inv.company_address,
"company_city": inv.company_city,
"company_postal_code": inv.company_postal_code,
"company_country": inv.company_country,
"vat_number": inv.vat_number,
"is_vat_registered": inv.is_vat_registered,
"invoice_prefix": inv.invoice_prefix,
"invoice_next_number": inv.invoice_next_number,
"payment_terms": inv.payment_terms,
"bank_name": inv.bank_name,
"bank_iban": inv.bank_iban,
"bank_bic": inv.bank_bic,
"footer_text": inv.footer_text,
"default_vat_rate": inv.default_vat_rate,
}
# Get theme settings if exists
theme_settings = None
if vendor.vendor_theme:
theme = vendor.vendor_theme
theme_settings = {
"theme_name": theme.theme_name,
"colors": theme.colors,
"font_family_heading": theme.font_family_heading,
"font_family_body": theme.font_family_body,
"logo_url": theme.logo_url,
"logo_dark_url": theme.logo_dark_url,
"favicon_url": theme.favicon_url,
"banner_url": theme.banner_url,
"layout_style": theme.layout_style,
"header_style": theme.header_style,
"product_card_style": theme.product_card_style,
"social_links": theme.social_links,
"custom_css": theme.custom_css,
}
# Get domains (read-only)
domains = []
for domain in vendor.domains:
domains.append({
"id": domain.id,
"domain": domain.domain,
"is_primary": domain.is_primary,
"is_active": domain.is_active,
"ssl_status": domain.ssl_status,
"is_verified": domain.is_verified,
})
# Get Stripe info from subscription (read-only, masked)
stripe_info = None
if vendor.subscription and vendor.subscription.stripe_customer_id:
stripe_info = {
"has_stripe_customer": True,
"customer_id_masked": f"cus_***{vendor.subscription.stripe_customer_id[-4:]}",
}
return {
# General info
"vendor_code": vendor.vendor_code,
"subdomain": vendor.subdomain,
"name": vendor.name,
"contact_email": vendor.contact_email,
"contact_phone": vendor.contact_phone,
"website": vendor.website,
"business_address": vendor.business_address,
"tax_number": vendor.tax_number,
"letzshop_csv_url_fr": vendor.letzshop_csv_url_fr,
"letzshop_csv_url_en": vendor.letzshop_csv_url_en,
"letzshop_csv_url_de": vendor.letzshop_csv_url_de,
"description": vendor.description,
"is_active": vendor.is_active,
"is_verified": vendor.is_verified,
# Business info with inheritance (values + flags)
"business_info": {
"contact_email": contact_info["contact_email"],
"contact_email_inherited": contact_info["contact_email_inherited"],
"contact_email_override": vendor.contact_email, # Raw override value
"contact_phone": contact_info["contact_phone"],
"contact_phone_inherited": contact_info["contact_phone_inherited"],
"contact_phone_override": vendor.contact_phone,
"website": contact_info["website"],
"website_inherited": contact_info["website_inherited"],
"website_override": vendor.website,
"business_address": contact_info["business_address"],
"business_address_inherited": contact_info["business_address_inherited"],
"business_address_override": vendor.business_address,
"tax_number": contact_info["tax_number"],
"tax_number_inherited": contact_info["tax_number_inherited"],
"tax_number_override": vendor.tax_number,
"company_name": vendor.company.name if vendor.company else None,
},
# Localization settings
"localization": {
"default_language": vendor.default_language,
"dashboard_language": vendor.dashboard_language,
"storefront_language": vendor.storefront_language,
"storefront_languages": vendor.storefront_languages or ["fr", "de", "en"],
"storefront_locale": vendor.storefront_locale,
"platform_default_locale": platform_config["locale"],
"platform_currency": platform_config["currency"],
},
# Letzshop marketplace settings
"letzshop": {
"csv_url_fr": vendor.letzshop_csv_url_fr,
"csv_url_en": vendor.letzshop_csv_url_en,
"csv_url_de": vendor.letzshop_csv_url_de,
"default_tax_rate": vendor.letzshop_default_tax_rate,
"boost_sort": vendor.letzshop_boost_sort,
"delivery_method": vendor.letzshop_delivery_method,
"preorder_days": vendor.letzshop_preorder_days,
"vendor_id": vendor.letzshop_vendor_id,
"vendor_slug": vendor.letzshop_vendor_slug,
"has_credentials": vendor.letzshop_credentials is not None,
"auto_sync_enabled": vendor.letzshop_credentials.auto_sync_enabled if vendor.letzshop_credentials else False,
},
# Invoice settings
"invoice_settings": invoice_settings,
# Theme/branding settings
"theme_settings": theme_settings,
# Domains (read-only)
"domains": domains,
"default_subdomain": f"{vendor.subdomain}.letzshop.lu",
# Stripe info (read-only)
"stripe_info": stripe_info,
# Options for dropdowns
"options": {
"supported_languages": SUPPORTED_LANGUAGES,
"supported_locales": SUPPORTED_LOCALES,
"tax_rates": [
{"value": 0, "label": "0% (Exempt)"},
{"value": 3, "label": "3% (Super-reduced)"},
{"value": 8, "label": "8% (Reduced)"},
{"value": 14, "label": "14% (Intermediate)"},
{"value": 17, "label": "17% (Standard)"},
],
"delivery_methods": [
{"value": "nationwide", "label": "Nationwide (all methods)"},
{"value": "package_delivery", "label": "Package Delivery"},
{"value": "self_collect", "label": "Self Collect"},
],
},
}
@router.put("/marketplace")
def update_marketplace_settings(
marketplace_config: dict,
@router.put("/business-info")
def update_business_info(
business_info: BusinessInfoUpdate,
current_user: User = Depends(get_current_vendor_api),
db: Session = Depends(get_db),
):
"""Update marketplace integration settings."""
# Service handles permission checking and raises InsufficientPermissionsException if needed
return vendor_service.update_marketplace_settings(
db, current_user.token_vendor_id, marketplace_config, current_user
"""
Update vendor business info.
Fields can be set to override company values, or reset to inherit from company.
Use reset_to_company list to reset specific fields to inherit from company.
"""
vendor = vendor_service.get_vendor_by_id(db, current_user.token_vendor_id)
update_data = business_info.model_dump(exclude_unset=True)
# Handle reset_to_company - set those fields to None
reset_fields = update_data.pop("reset_to_company", None) or []
for field in reset_fields:
if field in ["contact_email", "contact_phone", "website", "business_address", "tax_number"]:
setattr(vendor, field, None)
logger.info(f"Reset {field} to inherit from company for vendor {vendor.id}")
# Update other fields
for key, value in update_data.items():
if key in ["name", "description", "contact_email", "contact_phone", "website", "business_address", "tax_number"]:
setattr(vendor, key, value)
db.commit()
db.refresh(vendor)
logger.info(f"Business info updated for vendor {vendor.id}")
# Return updated info with inheritance
contact_info = vendor.get_contact_info_with_inheritance()
return {
"message": "Business info updated",
"name": vendor.name,
"description": vendor.description,
"business_info": contact_info,
}
@router.put("/letzshop")
def update_letzshop_settings(
letzshop_config: LetzshopFeedSettingsUpdate,
current_user: User = Depends(get_current_vendor_api),
db: Session = Depends(get_db),
):
"""Update Letzshop marketplace feed settings."""
vendor = vendor_service.get_vendor_by_id(db, current_user.token_vendor_id)
update_data = letzshop_config.model_dump(exclude_unset=True)
# Validate tax rate
if "letzshop_default_tax_rate" in update_data:
if update_data["letzshop_default_tax_rate"] not in VALID_TAX_RATES:
raise HTTPException(
status_code=400,
detail=f"Invalid tax rate. Must be one of: {VALID_TAX_RATES}"
)
# Validate delivery method
if "letzshop_delivery_method" in update_data:
methods = update_data["letzshop_delivery_method"].split(",")
for method in methods:
if method.strip() not in VALID_DELIVERY_METHODS:
raise HTTPException(
status_code=400,
detail=f"Invalid delivery method. Must be one of: {VALID_DELIVERY_METHODS}"
)
# Validate boost_sort (0.0 - 10.0)
if "letzshop_boost_sort" in update_data:
try:
boost = float(update_data["letzshop_boost_sort"])
if boost < 0.0 or boost > 10.0:
raise HTTPException(
status_code=400,
detail="Boost sort must be between 0.0 and 10.0"
)
except ValueError:
raise HTTPException(
status_code=400,
detail="Boost sort must be a valid number"
)
# Validate preorder_days
if "letzshop_preorder_days" in update_data:
if update_data["letzshop_preorder_days"] < 0:
raise HTTPException(
status_code=400,
detail="Preorder days must be non-negative"
)
# Apply updates
for key, value in update_data.items():
setattr(vendor, key, value)
db.commit()
db.refresh(vendor)
logger.info(f"Letzshop settings updated for vendor {vendor.id}")
return {
"message": "Letzshop settings updated",
"csv_url_fr": vendor.letzshop_csv_url_fr,
"csv_url_en": vendor.letzshop_csv_url_en,
"csv_url_de": vendor.letzshop_csv_url_de,
"default_tax_rate": vendor.letzshop_default_tax_rate,
"boost_sort": vendor.letzshop_boost_sort,
"delivery_method": vendor.letzshop_delivery_method,
"preorder_days": vendor.letzshop_preorder_days,
}
@router.put("/localization")
def update_localization_settings(
localization_config: LocalizationSettingsUpdate,
current_user: User = Depends(get_current_vendor_api),
db: Session = Depends(get_db),
):
"""
Update vendor localization settings.
Allows vendors to configure:
- default_language: Default language for vendor content
- dashboard_language: UI language for vendor dashboard
- storefront_language: Default language for customer storefront
- storefront_languages: Enabled languages for storefront selector
- storefront_locale: Locale for currency/number formatting (or null for platform default)
"""
vendor = vendor_service.get_vendor_by_id(db, current_user.token_vendor_id)
# Update only provided fields
update_data = localization_config.model_dump(exclude_unset=True)
# Validate language codes
valid_language_codes = {lang["code"] for lang in SUPPORTED_LANGUAGES}
valid_locale_codes = {loc["code"] for loc in SUPPORTED_LOCALES}
if "default_language" in update_data and update_data["default_language"]:
if update_data["default_language"] not in valid_language_codes:
raise HTTPException(
status_code=400, detail=f"Invalid language: {update_data['default_language']}"
)
if "dashboard_language" in update_data and update_data["dashboard_language"]:
if update_data["dashboard_language"] not in valid_language_codes:
raise HTTPException(
status_code=400, detail=f"Invalid language: {update_data['dashboard_language']}"
)
if "storefront_language" in update_data and update_data["storefront_language"]:
if update_data["storefront_language"] not in valid_language_codes:
raise HTTPException(
status_code=400, detail=f"Invalid language: {update_data['storefront_language']}"
)
if "storefront_languages" in update_data and update_data["storefront_languages"]:
for lang in update_data["storefront_languages"]:
if lang not in valid_language_codes:
raise HTTPException(status_code=400, detail=f"Invalid language: {lang}")
if "storefront_locale" in update_data and update_data["storefront_locale"]:
if update_data["storefront_locale"] not in valid_locale_codes:
raise HTTPException(
status_code=400, detail=f"Invalid locale: {update_data['storefront_locale']}"
)
# Apply updates
for key, value in update_data.items():
setattr(vendor, key, value)
db.commit()
db.refresh(vendor)
logger.info(
f"Localization settings updated for vendor {vendor.id}",
extra={"vendor_id": vendor.id, "updated_fields": list(update_data.keys())},
)
return {
"message": "Localization settings updated",
"default_language": vendor.default_language,
"dashboard_language": vendor.dashboard_language,
"storefront_language": vendor.storefront_language,
"storefront_languages": vendor.storefront_languages,
"storefront_locale": vendor.storefront_locale,
}

803
app/templates/vendor/settings.html vendored
View File

@@ -18,15 +18,15 @@
<!-- Settings Content -->
<div x-show="!loading && !error" class="w-full mb-8">
<div class="flex flex-col md:flex-row gap-6">
<!-- Settings Navigation -->
<div class="w-full md:w-64 flex-shrink-0">
<div class="bg-white rounded-lg shadow-xs dark:bg-gray-800 p-2">
<div class="flex flex-col lg:flex-row gap-6">
<!-- Settings Navigation (Sidebar) -->
<div class="w-full lg:w-56 flex-shrink-0">
<div class="bg-white rounded-lg shadow-xs dark:bg-gray-800 p-2 lg:sticky lg:top-4">
<template x-for="section in sections" :key="section.id">
<button
@click="setSection(section.id)"
:class="{
'w-full flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-colors': true,
'w-full flex items-center px-3 py-2.5 text-sm font-medium rounded-lg transition-colors': true,
'text-purple-600 bg-purple-50 dark:bg-purple-900/20 dark:text-purple-400': activeSection === section.id,
'text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-700': activeSection !== section.id
}"
@@ -38,8 +38,8 @@
</div>
</div>
<!-- Settings Panels -->
<div class="flex-1">
<!-- Settings Panels (Main Content) -->
<div class="flex-1 min-w-0">
<!-- 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">
@@ -61,7 +61,7 @@
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">
.yourplatform.com
.letzshop.lu
</span>
</div>
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Contact support to change your subdomain</p>
@@ -98,14 +98,386 @@
</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 external marketplace feeds</p>
<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>
@@ -122,7 +494,7 @@
<input
type="url"
x-model="marketplaceForm.letzshop_csv_url_fr"
@input="markChanged()"
@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://..."
/>
@@ -145,7 +517,7 @@
<input
type="url"
x-model="marketplaceForm.letzshop_csv_url_en"
@input="markChanged()"
@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://..."
/>
@@ -168,7 +540,7 @@
<input
type="url"
x-model="marketplaceForm.letzshop_csv_url_de"
@input="markChanged()"
@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://..."
/>
@@ -181,17 +553,406 @@
</button>
</div>
</div>
</div>
<!-- Save Button -->
<div class="flex justify-end mt-4 pt-4 border-t dark:border-gray-600">
<button
@click="saveMarketplaceSettings()"
:disabled="saving || !hasChanges"
class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50"
<!-- 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"
>
<span x-show="!saving">Save Marketplace Settings</span>
<span x-show="saving">Saving...</span>
</button>
<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 -->
<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>
<!-- 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>