refactor: migrate templates and static files to self-contained modules
Templates Migration: - Migrate admin templates to modules (tenancy, billing, monitoring, marketplace, etc.) - Migrate vendor templates to modules (tenancy, billing, orders, messaging, etc.) - Migrate storefront templates to modules (catalog, customers, orders, cart, checkout, cms) - Migrate public templates to modules (billing, marketplace, cms) - Keep shared templates in app/templates/ (base.html, errors/, partials/, macros/) - Migrate letzshop partials to marketplace module Static Files Migration: - Migrate admin JS to modules: tenancy (23 files), core (5 files), monitoring (1 file) - Migrate vendor JS to modules: tenancy (4 files), core (2 files) - Migrate shared JS: vendor-selector.js to core, media-picker.js to cms - Migrate storefront JS: storefront-layout.js to core - Keep framework JS in static/ (api-client, utils, money, icons, log-config, lib/) - Update all template references to use module_static paths Naming Consistency: - Rename static/platform/ to static/public/ - Rename app/templates/platform/ to app/templates/public/ - Update all extends and static references Documentation: - Update module-system.md with shared templates documentation - Update frontend-structure.md with new module JS organization Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
129
static/vendor/js/dashboard.js
vendored
129
static/vendor/js/dashboard.js
vendored
@@ -1,129 +0,0 @@
|
||||
// app/static/vendor/js/dashboard.js
|
||||
/**
|
||||
* Vendor dashboard page logic
|
||||
*/
|
||||
|
||||
// ✅ Use centralized logger (with safe fallback)
|
||||
const vendorDashLog = window.LogConfig.loggers.dashboard ||
|
||||
window.LogConfig.createLogger('dashboard', false);
|
||||
|
||||
vendorDashLog.info('Loading...');
|
||||
vendorDashLog.info('[VENDOR DASHBOARD] data function exists?', typeof data);
|
||||
|
||||
function vendorDashboard() {
|
||||
vendorDashLog.info('[VENDOR DASHBOARD] vendorDashboard() called');
|
||||
vendorDashLog.info('[VENDOR DASHBOARD] data function exists inside?', typeof data);
|
||||
|
||||
return {
|
||||
// ✅ Inherit base layout state (includes vendorCode, dark mode, menu states)
|
||||
...data(),
|
||||
|
||||
// ✅ Set page identifier
|
||||
currentPage: 'dashboard',
|
||||
|
||||
loading: false,
|
||||
error: '',
|
||||
stats: {
|
||||
products_count: 0,
|
||||
orders_count: 0,
|
||||
customers_count: 0,
|
||||
revenue: 0
|
||||
},
|
||||
recentOrders: [],
|
||||
recentProducts: [],
|
||||
|
||||
async init() {
|
||||
// Guard against multiple initialization
|
||||
if (window._vendorDashboardInitialized) {
|
||||
return;
|
||||
}
|
||||
window._vendorDashboardInitialized = true;
|
||||
|
||||
try {
|
||||
// IMPORTANT: Call parent init first to set vendorCode from URL
|
||||
const parentInit = data().init;
|
||||
if (parentInit) {
|
||||
await parentInit.call(this);
|
||||
}
|
||||
|
||||
await this.loadDashboardData();
|
||||
} catch (error) {
|
||||
vendorDashLog.error('Failed to initialize dashboard:', error);
|
||||
}
|
||||
},
|
||||
|
||||
async loadDashboardData() {
|
||||
this.loading = true;
|
||||
this.error = '';
|
||||
|
||||
try {
|
||||
// Load stats
|
||||
// NOTE: apiClient prepends /api/v1, and vendor context middleware handles vendor detection
|
||||
// So we just call /vendor/dashboard/stats → becomes /api/v1/vendor/dashboard/stats
|
||||
const statsResponse = await apiClient.get(
|
||||
`/vendor/dashboard/stats`
|
||||
);
|
||||
|
||||
// Map API response to stats (similar to admin dashboard pattern)
|
||||
this.stats = {
|
||||
products_count: statsResponse.products?.total || 0,
|
||||
orders_count: statsResponse.orders?.total || 0,
|
||||
customers_count: statsResponse.customers?.total || 0,
|
||||
revenue: statsResponse.revenue?.total || 0
|
||||
};
|
||||
|
||||
// Load recent orders
|
||||
const ordersResponse = await apiClient.get(
|
||||
`/vendor/orders?limit=5&sort=created_at:desc`
|
||||
);
|
||||
this.recentOrders = ordersResponse.items || [];
|
||||
|
||||
// Load recent products
|
||||
const productsResponse = await apiClient.get(
|
||||
`/vendor/products?limit=5&sort=created_at:desc`
|
||||
);
|
||||
this.recentProducts = productsResponse.items || [];
|
||||
|
||||
vendorDashLog.info('Dashboard data loaded', {
|
||||
stats: this.stats,
|
||||
orders: this.recentOrders.length,
|
||||
products: this.recentProducts.length
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
vendorDashLog.error('Failed to load dashboard data', error);
|
||||
this.error = 'Failed to load dashboard data. Please try refreshing the page.';
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
async refresh() {
|
||||
try {
|
||||
await this.loadDashboardData();
|
||||
} catch (error) {
|
||||
vendorDashLog.error('Failed to refresh dashboard:', error);
|
||||
}
|
||||
},
|
||||
|
||||
formatCurrency(amount) {
|
||||
const locale = window.VENDOR_CONFIG?.locale || 'en-GB';
|
||||
const currency = window.VENDOR_CONFIG?.currency || 'EUR';
|
||||
return new Intl.NumberFormat(locale, {
|
||||
style: 'currency',
|
||||
currency: currency
|
||||
}).format(amount || 0);
|
||||
},
|
||||
|
||||
formatDate(dateString) {
|
||||
if (!dateString) return '';
|
||||
const date = new Date(dateString);
|
||||
const locale = window.VENDOR_CONFIG?.locale || 'en-GB';
|
||||
return date.toLocaleDateString(locale, {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
270
static/vendor/js/init-alpine.js
vendored
270
static/vendor/js/init-alpine.js
vendored
@@ -1,270 +0,0 @@
|
||||
// app/static/vendor/js/init-alpine.js
|
||||
/**
|
||||
* Alpine.js initialization for vendor pages
|
||||
* Provides common data and methods for all vendor pages
|
||||
*/
|
||||
|
||||
// ✅ Use centralized logger
|
||||
const vendorLog = window.LogConfig.log;
|
||||
|
||||
console.log('[VENDOR INIT-ALPINE] Loading...');
|
||||
|
||||
// Sidebar section state persistence
|
||||
const VENDOR_SIDEBAR_STORAGE_KEY = 'vendor_sidebar_sections';
|
||||
|
||||
function getVendorSidebarSectionsFromStorage() {
|
||||
try {
|
||||
const stored = localStorage.getItem(VENDOR_SIDEBAR_STORAGE_KEY);
|
||||
if (stored) {
|
||||
return JSON.parse(stored);
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('[VENDOR INIT-ALPINE] Failed to load sidebar state from localStorage:', e);
|
||||
}
|
||||
// Default: all sections open
|
||||
return {
|
||||
products: true,
|
||||
sales: true,
|
||||
customers: true,
|
||||
shop: true,
|
||||
account: true
|
||||
};
|
||||
}
|
||||
|
||||
function saveVendorSidebarSectionsToStorage(sections) {
|
||||
try {
|
||||
localStorage.setItem(VENDOR_SIDEBAR_STORAGE_KEY, JSON.stringify(sections));
|
||||
} catch (e) {
|
||||
console.warn('[VENDOR INIT-ALPINE] Failed to save sidebar state to localStorage:', e);
|
||||
}
|
||||
}
|
||||
|
||||
function data() {
|
||||
console.log('[VENDOR INIT-ALPINE] data() function called');
|
||||
return {
|
||||
dark: false,
|
||||
isSideMenuOpen: false,
|
||||
isNotificationsMenuOpen: false,
|
||||
isProfileMenuOpen: false,
|
||||
currentPage: '',
|
||||
currentUser: {},
|
||||
vendor: null,
|
||||
vendorCode: null,
|
||||
|
||||
// Sidebar collapsible sections state
|
||||
openSections: getVendorSidebarSectionsFromStorage(),
|
||||
|
||||
init() {
|
||||
// Set current page from URL
|
||||
const path = window.location.pathname;
|
||||
const segments = path.split('/').filter(Boolean);
|
||||
this.currentPage = segments[segments.length - 1] || 'dashboard';
|
||||
|
||||
// Get vendor code from URL
|
||||
if (segments[0] === 'vendor' && segments[1]) {
|
||||
this.vendorCode = segments[1];
|
||||
}
|
||||
|
||||
// Load user from localStorage
|
||||
const user = localStorage.getItem('currentUser');
|
||||
if (user) {
|
||||
this.currentUser = JSON.parse(user);
|
||||
}
|
||||
|
||||
// Load theme preference
|
||||
const theme = localStorage.getItem('theme');
|
||||
if (theme === 'dark') {
|
||||
this.dark = true;
|
||||
}
|
||||
|
||||
// Load vendor info
|
||||
this.loadVendorInfo();
|
||||
|
||||
// Save last visited page (for redirect after login)
|
||||
// Exclude login, logout, onboarding, error pages
|
||||
if (!path.includes('/login') &&
|
||||
!path.includes('/logout') &&
|
||||
!path.includes('/onboarding') &&
|
||||
!path.includes('/errors/')) {
|
||||
try {
|
||||
localStorage.setItem('vendor_last_visited_page', path);
|
||||
} catch (e) {
|
||||
// Ignore storage errors
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
async loadVendorInfo() {
|
||||
if (!this.vendorCode) return;
|
||||
|
||||
try {
|
||||
// apiClient prepends /api/v1, so /vendor/info/{code} → /api/v1/vendor/info/{code}
|
||||
const response = await apiClient.get(`/vendor/info/${this.vendorCode}`);
|
||||
this.vendor = response;
|
||||
vendorLog.debug('Vendor info loaded', this.vendor);
|
||||
} catch (error) {
|
||||
vendorLog.error('Failed to load vendor info', error);
|
||||
}
|
||||
},
|
||||
|
||||
toggleSideMenu() {
|
||||
this.isSideMenuOpen = !this.isSideMenuOpen;
|
||||
},
|
||||
|
||||
closeSideMenu() {
|
||||
this.isSideMenuOpen = false;
|
||||
},
|
||||
|
||||
toggleNotificationsMenu() {
|
||||
this.isNotificationsMenuOpen = !this.isNotificationsMenuOpen;
|
||||
if (this.isNotificationsMenuOpen) {
|
||||
this.isProfileMenuOpen = false;
|
||||
}
|
||||
},
|
||||
|
||||
closeNotificationsMenu() {
|
||||
this.isNotificationsMenuOpen = false;
|
||||
},
|
||||
|
||||
toggleProfileMenu() {
|
||||
this.isProfileMenuOpen = !this.isProfileMenuOpen;
|
||||
if (this.isProfileMenuOpen) {
|
||||
this.isNotificationsMenuOpen = false;
|
||||
}
|
||||
},
|
||||
|
||||
closeProfileMenu() {
|
||||
this.isProfileMenuOpen = false;
|
||||
},
|
||||
|
||||
toggleTheme() {
|
||||
this.dark = !this.dark;
|
||||
localStorage.setItem('theme', this.dark ? 'dark' : 'light');
|
||||
},
|
||||
|
||||
// Sidebar section toggle with persistence
|
||||
toggleSection(section) {
|
||||
this.openSections[section] = !this.openSections[section];
|
||||
saveVendorSidebarSectionsToStorage(this.openSections);
|
||||
},
|
||||
|
||||
async handleLogout() {
|
||||
console.log('🚪 Logging out vendor user...');
|
||||
|
||||
try {
|
||||
// Call logout API
|
||||
await apiClient.post('/vendor/auth/logout');
|
||||
console.log('✅ Logout API called successfully');
|
||||
} catch (error) {
|
||||
console.error('⚠️ Logout API error (continuing anyway):', error);
|
||||
} finally {
|
||||
// Clear vendor tokens only (not admin or customer tokens)
|
||||
// Keep vendor_last_visited_page so user returns to same page after login
|
||||
console.log('🧹 Clearing vendor tokens...');
|
||||
localStorage.removeItem('vendor_token');
|
||||
localStorage.removeItem('vendor_user');
|
||||
localStorage.removeItem('currentUser');
|
||||
localStorage.removeItem('vendorCode');
|
||||
// Note: Do NOT use localStorage.clear() - it would clear admin/customer tokens too
|
||||
|
||||
console.log('🔄 Redirecting to login...');
|
||||
window.location.href = `/vendor/${this.vendorCode}/login`;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Language Selector Component
|
||||
* Alpine.js component for language switching in vendor dashboard
|
||||
*/
|
||||
function languageSelector(currentLang, enabledLanguages) {
|
||||
return {
|
||||
isLangOpen: false,
|
||||
currentLang: currentLang || 'fr',
|
||||
languages: enabledLanguages || ['en', 'fr', 'de', 'lb'],
|
||||
languageNames: {
|
||||
'en': 'English',
|
||||
'fr': 'Français',
|
||||
'de': 'Deutsch',
|
||||
'lb': 'Lëtzebuergesch'
|
||||
},
|
||||
languageFlags: {
|
||||
'en': 'gb',
|
||||
'fr': 'fr',
|
||||
'de': 'de',
|
||||
'lb': 'lu'
|
||||
},
|
||||
async setLanguage(lang) {
|
||||
if (lang === this.currentLang) {
|
||||
this.isLangOpen = false;
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await fetch('/api/v1/language/set', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ language: lang })
|
||||
});
|
||||
if (response.ok) {
|
||||
this.currentLang = lang;
|
||||
window.location.reload();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to set language:', error);
|
||||
}
|
||||
this.isLangOpen = false;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
window.languageSelector = languageSelector;
|
||||
|
||||
/**
|
||||
* Email Settings Warning Component
|
||||
* Shows warning banner when vendor email settings are not configured
|
||||
*
|
||||
* Usage in template:
|
||||
* <div x-data="emailSettingsWarning()" x-show="showWarning">...</div>
|
||||
*/
|
||||
function emailSettingsWarning() {
|
||||
return {
|
||||
showWarning: false,
|
||||
loading: true,
|
||||
vendorCode: null,
|
||||
|
||||
async init() {
|
||||
// Get vendor code from URL
|
||||
const path = window.location.pathname;
|
||||
const segments = path.split('/').filter(Boolean);
|
||||
if (segments[0] === 'vendor' && segments[1]) {
|
||||
this.vendorCode = segments[1];
|
||||
}
|
||||
|
||||
// Skip if we're on the settings page (to avoid showing banner on config page)
|
||||
if (path.includes('/settings')) {
|
||||
this.loading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// Check email settings status
|
||||
await this.checkEmailStatus();
|
||||
},
|
||||
|
||||
async checkEmailStatus() {
|
||||
try {
|
||||
const response = await apiClient.get('/vendor/email-settings/status');
|
||||
// Show warning if not configured
|
||||
this.showWarning = !response.is_configured;
|
||||
} catch (error) {
|
||||
// Don't show warning on error (might be 401, etc.)
|
||||
console.debug('[EmailWarning] Failed to check email status:', error);
|
||||
this.showWarning = false;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
window.emailSettingsWarning = emailSettingsWarning;
|
||||
174
static/vendor/js/login.js
vendored
174
static/vendor/js/login.js
vendored
@@ -1,174 +0,0 @@
|
||||
// app/static/vendor/js/login.js
|
||||
// noqa: js-003 - Standalone login page without vendor layout
|
||||
// noqa: js-004 - Standalone page has no currentPage sidebar highlight
|
||||
/**
|
||||
* Vendor login page logic
|
||||
*/
|
||||
|
||||
// Create custom logger for vendor login page
|
||||
const vendorLoginLog = window.LogConfig.createLogger('VENDOR-LOGIN');
|
||||
|
||||
function vendorLogin() {
|
||||
return {
|
||||
credentials: {
|
||||
username: '',
|
||||
password: ''
|
||||
},
|
||||
vendor: null,
|
||||
vendorCode: null,
|
||||
loading: false,
|
||||
checked: false,
|
||||
error: '',
|
||||
success: '',
|
||||
errors: {},
|
||||
dark: false,
|
||||
|
||||
async init() {
|
||||
// Guard against multiple initialization
|
||||
if (window._vendorLoginInitialized) return;
|
||||
window._vendorLoginInitialized = true;
|
||||
|
||||
try {
|
||||
vendorLoginLog.info('=== VENDOR LOGIN PAGE INITIALIZING ===');
|
||||
|
||||
// Load theme
|
||||
const theme = localStorage.getItem('theme');
|
||||
if (theme === 'dark') {
|
||||
this.dark = true;
|
||||
}
|
||||
vendorLoginLog.debug('Dark mode:', this.dark);
|
||||
|
||||
// Get vendor code from URL path
|
||||
const pathSegments = window.location.pathname.split('/').filter(Boolean);
|
||||
if (pathSegments[0] === 'vendor' && pathSegments[1]) {
|
||||
this.vendorCode = pathSegments[1];
|
||||
vendorLoginLog.debug('Vendor code from URL:', this.vendorCode);
|
||||
await this.loadVendor();
|
||||
}
|
||||
this.checked = true;
|
||||
vendorLoginLog.info('=== VENDOR LOGIN PAGE INITIALIZATION COMPLETE ===');
|
||||
} catch (error) {
|
||||
vendorLoginLog.error('Failed to initialize login page:', error);
|
||||
this.checked = true;
|
||||
}
|
||||
},
|
||||
|
||||
async loadVendor() {
|
||||
vendorLoginLog.info('Loading vendor information...');
|
||||
this.loading = true;
|
||||
try {
|
||||
const response = await apiClient.get(`/vendor/info/${this.vendorCode}`);
|
||||
this.vendor = response;
|
||||
vendorLoginLog.info('Vendor loaded successfully:', {
|
||||
code: this.vendor.code,
|
||||
name: this.vendor.name
|
||||
});
|
||||
} catch (error) {
|
||||
window.LogConfig.logError(error, 'Load Vendor');
|
||||
this.error = 'Failed to load vendor information';
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
async handleLogin() {
|
||||
vendorLoginLog.info('=== VENDOR LOGIN ATTEMPT STARTED ===');
|
||||
this.clearErrors();
|
||||
this.loading = true;
|
||||
|
||||
try {
|
||||
if (!this.credentials.username) {
|
||||
this.errors.username = 'Username is required';
|
||||
}
|
||||
if (!this.credentials.password) {
|
||||
this.errors.password = 'Password is required';
|
||||
}
|
||||
|
||||
if (Object.keys(this.errors).length > 0) {
|
||||
vendorLoginLog.warn('Validation failed:', this.errors);
|
||||
this.loading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
vendorLoginLog.info('Calling vendor login API...');
|
||||
vendorLoginLog.debug('Username:', this.credentials.username);
|
||||
vendorLoginLog.debug('Vendor code:', this.vendorCode);
|
||||
|
||||
window.LogConfig.logApiCall('POST', '/vendor/auth/login', {
|
||||
username: this.credentials.username,
|
||||
vendor_code: this.vendorCode
|
||||
}, 'request');
|
||||
|
||||
const startTime = performance.now();
|
||||
const response = await apiClient.post('/vendor/auth/login', {
|
||||
email_or_username: this.credentials.username,
|
||||
password: this.credentials.password,
|
||||
vendor_code: this.vendorCode
|
||||
});
|
||||
const duration = performance.now() - startTime;
|
||||
|
||||
window.LogConfig.logApiCall('POST', '/vendor/auth/login', {
|
||||
hasToken: !!response.access_token,
|
||||
user: response.user?.username
|
||||
}, 'response');
|
||||
window.LogConfig.logPerformance('Vendor Login', duration);
|
||||
|
||||
vendorLoginLog.info('Login successful!');
|
||||
vendorLoginLog.debug('Storing authentication data...');
|
||||
|
||||
// Store token with correct key that apiClient expects
|
||||
localStorage.setItem('vendor_token', response.access_token);
|
||||
localStorage.setItem('currentUser', JSON.stringify(response.user));
|
||||
localStorage.setItem('vendorCode', this.vendorCode);
|
||||
vendorLoginLog.debug('Token stored as vendor_token in localStorage');
|
||||
|
||||
this.success = 'Login successful! Redirecting...';
|
||||
|
||||
// Check for last visited page (saved before logout)
|
||||
const lastPage = localStorage.getItem('vendor_last_visited_page');
|
||||
const validLastPage = lastPage &&
|
||||
lastPage.startsWith(`/vendor/${this.vendorCode}/`) &&
|
||||
!lastPage.includes('/login') &&
|
||||
!lastPage.includes('/onboarding');
|
||||
const redirectTo = validLastPage ? lastPage : `/vendor/${this.vendorCode}/dashboard`;
|
||||
|
||||
vendorLoginLog.info('Last visited page:', lastPage);
|
||||
vendorLoginLog.info('Redirecting to:', redirectTo);
|
||||
|
||||
setTimeout(() => {
|
||||
window.location.href = redirectTo;
|
||||
}, 1000);
|
||||
|
||||
} catch (error) {
|
||||
window.LogConfig.logError(error, 'Vendor Login');
|
||||
|
||||
if (error.status === 401) {
|
||||
this.error = 'Invalid username or password';
|
||||
} else if (error.status === 403) {
|
||||
this.error = 'Your account does not have access to this vendor';
|
||||
} else {
|
||||
this.error = error.message || 'Login failed. Please try again.';
|
||||
}
|
||||
vendorLoginLog.info('Error message displayed to user:', this.error);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
vendorLoginLog.info('=== VENDOR LOGIN ATTEMPT FINISHED ===');
|
||||
}
|
||||
},
|
||||
|
||||
clearErrors() {
|
||||
vendorLoginLog.debug('Clearing form errors');
|
||||
this.error = '';
|
||||
this.errors = {};
|
||||
},
|
||||
|
||||
toggleDarkMode() {
|
||||
vendorLoginLog.debug('Toggling dark mode...');
|
||||
this.dark = !this.dark;
|
||||
localStorage.setItem('theme', this.dark ? 'dark' : 'light');
|
||||
vendorLoginLog.info('Dark mode:', this.dark ? 'ON' : 'OFF');
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
vendorLoginLog.info('Vendor login module loaded');
|
||||
196
static/vendor/js/profile.js
vendored
196
static/vendor/js/profile.js
vendored
@@ -1,196 +0,0 @@
|
||||
// static/vendor/js/profile.js
|
||||
/**
|
||||
* Vendor profile management page logic
|
||||
* Edit vendor business profile and contact information
|
||||
*/
|
||||
|
||||
const vendorProfileLog = window.LogConfig.loggers.vendorProfile ||
|
||||
window.LogConfig.createLogger('vendorProfile', false);
|
||||
|
||||
vendorProfileLog.info('Loading...');
|
||||
|
||||
function vendorProfile() {
|
||||
vendorProfileLog.info('vendorProfile() called');
|
||||
|
||||
return {
|
||||
// Inherit base layout state
|
||||
...data(),
|
||||
|
||||
// Set page identifier
|
||||
currentPage: 'profile',
|
||||
|
||||
// Loading states
|
||||
loading: true,
|
||||
error: '',
|
||||
saving: false,
|
||||
|
||||
// Profile data
|
||||
profile: null,
|
||||
|
||||
// Edit form
|
||||
form: {
|
||||
name: '',
|
||||
contact_email: '',
|
||||
contact_phone: '',
|
||||
website: '',
|
||||
business_address: '',
|
||||
tax_number: '',
|
||||
description: ''
|
||||
},
|
||||
|
||||
// Form validation
|
||||
errors: {},
|
||||
|
||||
// Track if form has changes
|
||||
hasChanges: false,
|
||||
|
||||
async init() {
|
||||
vendorProfileLog.info('Profile init() called');
|
||||
|
||||
// Guard against multiple initialization
|
||||
if (window._vendorProfileInitialized) {
|
||||
vendorProfileLog.warn('Already initialized, skipping');
|
||||
return;
|
||||
}
|
||||
window._vendorProfileInitialized = true;
|
||||
|
||||
// IMPORTANT: Call parent init first to set vendorCode from URL
|
||||
const parentInit = data().init;
|
||||
if (parentInit) {
|
||||
await parentInit.call(this);
|
||||
}
|
||||
|
||||
try {
|
||||
await this.loadProfile();
|
||||
} catch (error) {
|
||||
vendorProfileLog.error('Init failed:', error);
|
||||
this.error = 'Failed to initialize profile page';
|
||||
}
|
||||
|
||||
vendorProfileLog.info('Profile initialization complete');
|
||||
},
|
||||
|
||||
/**
|
||||
* Load vendor profile
|
||||
*/
|
||||
async loadProfile() {
|
||||
this.loading = true;
|
||||
this.error = '';
|
||||
|
||||
try {
|
||||
const response = await apiClient.get(`/vendor/profile`);
|
||||
|
||||
this.profile = response;
|
||||
this.form = {
|
||||
name: response.name || '',
|
||||
contact_email: response.contact_email || '',
|
||||
contact_phone: response.contact_phone || '',
|
||||
website: response.website || '',
|
||||
business_address: response.business_address || '',
|
||||
tax_number: response.tax_number || '',
|
||||
description: response.description || ''
|
||||
};
|
||||
|
||||
this.hasChanges = false;
|
||||
vendorProfileLog.info('Loaded profile:', this.profile.vendor_code);
|
||||
} catch (error) {
|
||||
vendorProfileLog.error('Failed to load profile:', error);
|
||||
this.error = error.message || 'Failed to load profile';
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Mark form as changed
|
||||
*/
|
||||
markChanged() {
|
||||
this.hasChanges = true;
|
||||
},
|
||||
|
||||
/**
|
||||
* Validate form
|
||||
*/
|
||||
validateForm() {
|
||||
this.errors = {};
|
||||
|
||||
if (!this.form.name?.trim()) {
|
||||
this.errors.name = 'Business name is required';
|
||||
}
|
||||
|
||||
if (this.form.contact_email && !this.isValidEmail(this.form.contact_email)) {
|
||||
this.errors.contact_email = 'Invalid email address';
|
||||
}
|
||||
|
||||
if (this.form.website && !this.isValidUrl(this.form.website)) {
|
||||
this.errors.website = 'Invalid URL format';
|
||||
}
|
||||
|
||||
return Object.keys(this.errors).length === 0;
|
||||
},
|
||||
|
||||
/**
|
||||
* Check if email is valid
|
||||
*/
|
||||
isValidEmail(email) {
|
||||
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
|
||||
},
|
||||
|
||||
/**
|
||||
* Check if URL is valid
|
||||
*/
|
||||
isValidUrl(url) {
|
||||
try {
|
||||
new URL(url);
|
||||
return true;
|
||||
} catch {
|
||||
return url.match(/^(https?:\/\/)?[\w-]+(\.[\w-]+)+/) !== null;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Save profile changes
|
||||
*/
|
||||
async saveProfile() {
|
||||
if (!this.validateForm()) {
|
||||
Utils.showToast('Please fix the errors before saving', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
this.saving = true;
|
||||
try {
|
||||
await apiClient.put(`/vendor/profile`, this.form);
|
||||
|
||||
Utils.showToast('Profile updated successfully', 'success');
|
||||
vendorProfileLog.info('Profile updated');
|
||||
|
||||
this.hasChanges = false;
|
||||
await this.loadProfile();
|
||||
} catch (error) {
|
||||
vendorProfileLog.error('Failed to save profile:', error);
|
||||
Utils.showToast(error.message || 'Failed to save profile', 'error');
|
||||
} finally {
|
||||
this.saving = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Reset form to original values
|
||||
*/
|
||||
resetForm() {
|
||||
if (this.profile) {
|
||||
this.form = {
|
||||
name: this.profile.name || '',
|
||||
contact_email: this.profile.contact_email || '',
|
||||
contact_phone: this.profile.contact_phone || '',
|
||||
website: this.profile.website || '',
|
||||
business_address: this.profile.business_address || '',
|
||||
tax_number: this.profile.tax_number || '',
|
||||
description: this.profile.description || ''
|
||||
};
|
||||
}
|
||||
this.hasChanges = false;
|
||||
this.errors = {};
|
||||
}
|
||||
};
|
||||
}
|
||||
576
static/vendor/js/settings.js
vendored
576
static/vendor/js/settings.js
vendored
@@ -1,576 +0,0 @@
|
||||
// static/vendor/js/settings.js
|
||||
/**
|
||||
* Vendor settings management page logic
|
||||
* Configure vendor preferences and integrations
|
||||
*/
|
||||
|
||||
const vendorSettingsLog = window.LogConfig.loggers.vendorSettings ||
|
||||
window.LogConfig.createLogger('vendorSettings', false);
|
||||
|
||||
vendorSettingsLog.info('Loading...');
|
||||
|
||||
function vendorSettings() {
|
||||
vendorSettingsLog.info('vendorSettings() called');
|
||||
|
||||
return {
|
||||
// Inherit base layout state
|
||||
...data(),
|
||||
|
||||
// Set page identifier
|
||||
currentPage: 'settings',
|
||||
|
||||
// Loading states
|
||||
loading: true,
|
||||
error: '',
|
||||
saving: false,
|
||||
|
||||
// Settings data from API
|
||||
settings: null,
|
||||
|
||||
// Active section
|
||||
activeSection: 'general',
|
||||
|
||||
// Sections for navigation
|
||||
sections: [
|
||||
{ id: 'general', label: 'General', icon: 'cog' },
|
||||
{ id: 'business', label: 'Business Info', icon: 'office-building' },
|
||||
{ id: 'localization', label: 'Localization', icon: 'globe' },
|
||||
{ id: 'marketplace', label: 'Marketplace', icon: 'shopping-cart' },
|
||||
{ id: 'invoices', label: 'Invoices', icon: 'document-text' },
|
||||
{ id: 'branding', label: 'Branding', icon: 'color-swatch' },
|
||||
{ id: 'domains', label: 'Domains', icon: 'globe-alt' },
|
||||
{ id: 'api', label: 'API & Payments', icon: 'key' },
|
||||
{ id: 'notifications', label: 'Notifications', icon: 'bell' },
|
||||
{ id: 'email', label: 'Email', icon: 'envelope' }
|
||||
],
|
||||
|
||||
// Forms for different sections
|
||||
generalForm: {
|
||||
subdomain: '',
|
||||
is_active: true
|
||||
},
|
||||
|
||||
businessForm: {
|
||||
name: '',
|
||||
description: '',
|
||||
contact_email: '',
|
||||
contact_phone: '',
|
||||
website: '',
|
||||
business_address: '',
|
||||
tax_number: ''
|
||||
},
|
||||
|
||||
// Track which fields are inherited from company
|
||||
businessInherited: {
|
||||
contact_email: false,
|
||||
contact_phone: false,
|
||||
website: false,
|
||||
business_address: false,
|
||||
tax_number: false
|
||||
},
|
||||
|
||||
// Company name for display
|
||||
companyName: '',
|
||||
|
||||
marketplaceForm: {
|
||||
letzshop_csv_url_fr: '',
|
||||
letzshop_csv_url_en: '',
|
||||
letzshop_csv_url_de: '',
|
||||
letzshop_default_tax_rate: null,
|
||||
letzshop_boost_sort: '',
|
||||
letzshop_delivery_method: '',
|
||||
letzshop_preorder_days: null
|
||||
},
|
||||
|
||||
notificationForm: {
|
||||
email_notifications: true,
|
||||
order_notifications: true,
|
||||
marketing_emails: false
|
||||
},
|
||||
|
||||
localizationForm: {
|
||||
default_language: 'fr',
|
||||
dashboard_language: 'fr',
|
||||
storefront_language: 'fr',
|
||||
storefront_languages: ['fr', 'de', 'en'],
|
||||
storefront_locale: ''
|
||||
},
|
||||
|
||||
// Email settings
|
||||
emailSettings: null,
|
||||
emailSettingsLoading: false,
|
||||
emailProviders: [],
|
||||
emailForm: {
|
||||
from_email: '',
|
||||
from_name: '',
|
||||
reply_to_email: '',
|
||||
signature_text: '',
|
||||
signature_html: '',
|
||||
provider: 'smtp',
|
||||
// SMTP
|
||||
smtp_host: '',
|
||||
smtp_port: 587,
|
||||
smtp_username: '',
|
||||
smtp_password: '',
|
||||
smtp_use_tls: true,
|
||||
smtp_use_ssl: false,
|
||||
// SendGrid
|
||||
sendgrid_api_key: '',
|
||||
// Mailgun
|
||||
mailgun_api_key: '',
|
||||
mailgun_domain: '',
|
||||
// SES
|
||||
ses_access_key_id: '',
|
||||
ses_secret_access_key: '',
|
||||
ses_region: 'eu-west-1'
|
||||
},
|
||||
testEmailAddress: '',
|
||||
sendingTestEmail: false,
|
||||
hasEmailChanges: false,
|
||||
|
||||
// Track changes per section
|
||||
hasChanges: false,
|
||||
hasBusinessChanges: false,
|
||||
hasLocalizationChanges: false,
|
||||
hasMarketplaceChanges: false,
|
||||
|
||||
async init() {
|
||||
vendorSettingsLog.info('Settings init() called');
|
||||
|
||||
// Guard against multiple initialization
|
||||
if (window._vendorSettingsInitialized) {
|
||||
vendorSettingsLog.warn('Already initialized, skipping');
|
||||
return;
|
||||
}
|
||||
window._vendorSettingsInitialized = true;
|
||||
|
||||
// IMPORTANT: Call parent init first to set vendorCode from URL
|
||||
const parentInit = data().init;
|
||||
if (parentInit) {
|
||||
await parentInit.call(this);
|
||||
}
|
||||
|
||||
try {
|
||||
await this.loadSettings();
|
||||
} catch (error) {
|
||||
vendorSettingsLog.error('Init failed:', error);
|
||||
this.error = 'Failed to initialize settings page';
|
||||
}
|
||||
|
||||
vendorSettingsLog.info('Settings initialization complete');
|
||||
},
|
||||
|
||||
/**
|
||||
* Load vendor settings
|
||||
*/
|
||||
async loadSettings() {
|
||||
this.loading = true;
|
||||
this.error = '';
|
||||
|
||||
try {
|
||||
const response = await apiClient.get(`/vendor/settings`);
|
||||
|
||||
this.settings = response;
|
||||
|
||||
// Populate general form
|
||||
this.generalForm = {
|
||||
subdomain: response.subdomain || '',
|
||||
is_active: response.is_active !== false
|
||||
};
|
||||
|
||||
// Populate business info form with inheritance tracking
|
||||
const biz = response.business_info || {};
|
||||
this.businessForm = {
|
||||
name: response.name || '',
|
||||
description: response.description || '',
|
||||
contact_email: biz.contact_email_override || '',
|
||||
contact_phone: biz.contact_phone_override || '',
|
||||
website: biz.website_override || '',
|
||||
business_address: biz.business_address_override || '',
|
||||
tax_number: biz.tax_number_override || ''
|
||||
};
|
||||
this.businessInherited = {
|
||||
contact_email: biz.contact_email_inherited || false,
|
||||
contact_phone: biz.contact_phone_inherited || false,
|
||||
website: biz.website_inherited || false,
|
||||
business_address: biz.business_address_inherited || false,
|
||||
tax_number: biz.tax_number_inherited || false
|
||||
};
|
||||
this.companyName = biz.company_name || '';
|
||||
|
||||
// Populate localization form from nested structure
|
||||
const loc = response.localization || {};
|
||||
this.localizationForm = {
|
||||
default_language: loc.default_language || 'fr',
|
||||
dashboard_language: loc.dashboard_language || 'fr',
|
||||
storefront_language: loc.storefront_language || 'fr',
|
||||
storefront_languages: loc.storefront_languages || ['fr', 'de', 'en'],
|
||||
storefront_locale: loc.storefront_locale || ''
|
||||
};
|
||||
|
||||
// Populate marketplace form from nested structure
|
||||
const lz = response.letzshop || {};
|
||||
this.marketplaceForm = {
|
||||
letzshop_csv_url_fr: lz.csv_url_fr || '',
|
||||
letzshop_csv_url_en: lz.csv_url_en || '',
|
||||
letzshop_csv_url_de: lz.csv_url_de || '',
|
||||
letzshop_default_tax_rate: lz.default_tax_rate,
|
||||
letzshop_boost_sort: lz.boost_sort || '',
|
||||
letzshop_delivery_method: lz.delivery_method || '',
|
||||
letzshop_preorder_days: lz.preorder_days
|
||||
};
|
||||
|
||||
// Reset all change flags
|
||||
this.hasChanges = false;
|
||||
this.hasBusinessChanges = false;
|
||||
this.hasLocalizationChanges = false;
|
||||
this.hasMarketplaceChanges = false;
|
||||
|
||||
vendorSettingsLog.info('Loaded settings');
|
||||
} catch (error) {
|
||||
vendorSettingsLog.error('Failed to load settings:', error);
|
||||
this.error = error.message || 'Failed to load settings';
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Mark general form as changed
|
||||
*/
|
||||
markChanged() {
|
||||
this.hasChanges = true;
|
||||
},
|
||||
|
||||
/**
|
||||
* Mark business form as changed
|
||||
*/
|
||||
markBusinessChanged() {
|
||||
this.hasBusinessChanges = true;
|
||||
},
|
||||
|
||||
/**
|
||||
* Mark localization form as changed
|
||||
*/
|
||||
markLocalizationChanged() {
|
||||
this.hasLocalizationChanges = true;
|
||||
},
|
||||
|
||||
/**
|
||||
* Mark marketplace form as changed
|
||||
*/
|
||||
markMarketplaceChanged() {
|
||||
this.hasMarketplaceChanges = true;
|
||||
},
|
||||
|
||||
/**
|
||||
* Get effective value for a business field (override or inherited)
|
||||
*/
|
||||
getEffectiveBusinessValue(field) {
|
||||
const override = this.businessForm[field];
|
||||
if (override) return override;
|
||||
// Return the effective value from settings (includes company inheritance)
|
||||
return this.settings?.business_info?.[field] || '';
|
||||
},
|
||||
|
||||
/**
|
||||
* Check if field is using inherited value
|
||||
*/
|
||||
isFieldInherited(field) {
|
||||
return this.businessInherited[field] && !this.businessForm[field];
|
||||
},
|
||||
|
||||
/**
|
||||
* Reset a business field to inherit from company
|
||||
*/
|
||||
resetToCompany(field) {
|
||||
this.businessForm[field] = '';
|
||||
this.hasBusinessChanges = true;
|
||||
},
|
||||
|
||||
/**
|
||||
* Save business info
|
||||
*/
|
||||
async saveBusinessInfo() {
|
||||
this.saving = true;
|
||||
try {
|
||||
// Determine which fields should be reset to company values
|
||||
const resetFields = [];
|
||||
for (const field of ['contact_email', 'contact_phone', 'website', 'business_address', 'tax_number']) {
|
||||
if (!this.businessForm[field] && this.settings?.business_info?.[field]) {
|
||||
resetFields.push(field);
|
||||
}
|
||||
}
|
||||
|
||||
const payload = {
|
||||
name: this.businessForm.name,
|
||||
description: this.businessForm.description,
|
||||
contact_email: this.businessForm.contact_email || null,
|
||||
contact_phone: this.businessForm.contact_phone || null,
|
||||
website: this.businessForm.website || null,
|
||||
business_address: this.businessForm.business_address || null,
|
||||
tax_number: this.businessForm.tax_number || null,
|
||||
reset_to_company: resetFields
|
||||
};
|
||||
|
||||
await apiClient.put(`/vendor/settings/business-info`, payload);
|
||||
|
||||
Utils.showToast('Business info saved', 'success');
|
||||
vendorSettingsLog.info('Business info updated');
|
||||
|
||||
// Reload to get updated inheritance flags
|
||||
await this.loadSettings();
|
||||
this.hasBusinessChanges = false;
|
||||
} catch (error) {
|
||||
vendorSettingsLog.error('Failed to save business info:', error);
|
||||
Utils.showToast(error.message || 'Failed to save business info', 'error');
|
||||
} finally {
|
||||
this.saving = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Save marketplace settings (Letzshop)
|
||||
*/
|
||||
async saveMarketplaceSettings() {
|
||||
this.saving = true;
|
||||
try {
|
||||
await apiClient.put(`/vendor/settings/letzshop`, this.marketplaceForm);
|
||||
|
||||
Utils.showToast('Marketplace settings saved', 'success');
|
||||
vendorSettingsLog.info('Marketplace settings updated');
|
||||
|
||||
this.hasMarketplaceChanges = false;
|
||||
} catch (error) {
|
||||
vendorSettingsLog.error('Failed to save marketplace settings:', error);
|
||||
Utils.showToast(error.message || 'Failed to save settings', 'error');
|
||||
} finally {
|
||||
this.saving = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Test Letzshop CSV URL
|
||||
*/
|
||||
async testLetzshopUrl(lang) {
|
||||
const url = this.marketplaceForm[`letzshop_csv_url_${lang}`];
|
||||
if (!url) {
|
||||
Utils.showToast('Please enter a URL first', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
this.saving = true;
|
||||
try {
|
||||
// Try to fetch the URL to validate it
|
||||
const response = await fetch(url, { method: 'HEAD', mode: 'no-cors' });
|
||||
Utils.showToast(`URL appears to be valid`, 'success');
|
||||
} catch (error) {
|
||||
Utils.showToast('Could not validate URL - it may still work', 'warning');
|
||||
} finally {
|
||||
this.saving = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Reset settings to saved values
|
||||
*/
|
||||
resetSettings() {
|
||||
this.loadSettings();
|
||||
},
|
||||
|
||||
/**
|
||||
* Switch active section
|
||||
*/
|
||||
setSection(sectionId) {
|
||||
this.activeSection = sectionId;
|
||||
},
|
||||
|
||||
/**
|
||||
* Toggle a storefront language
|
||||
*/
|
||||
toggleStorefrontLanguage(langCode) {
|
||||
const index = this.localizationForm.storefront_languages.indexOf(langCode);
|
||||
if (index === -1) {
|
||||
this.localizationForm.storefront_languages.push(langCode);
|
||||
} else {
|
||||
this.localizationForm.storefront_languages.splice(index, 1);
|
||||
}
|
||||
this.hasLocalizationChanges = true;
|
||||
},
|
||||
|
||||
/**
|
||||
* Save localization settings
|
||||
*/
|
||||
async saveLocalizationSettings() {
|
||||
this.saving = true;
|
||||
try {
|
||||
await apiClient.put(`/vendor/settings/localization`, this.localizationForm);
|
||||
|
||||
Utils.showToast('Localization settings saved', 'success');
|
||||
vendorSettingsLog.info('Localization settings updated');
|
||||
|
||||
this.hasLocalizationChanges = false;
|
||||
} catch (error) {
|
||||
vendorSettingsLog.error('Failed to save localization settings:', error);
|
||||
Utils.showToast(error.message || 'Failed to save settings', 'error');
|
||||
} finally {
|
||||
this.saving = false;
|
||||
}
|
||||
},
|
||||
|
||||
// =====================================================================
|
||||
// EMAIL SETTINGS
|
||||
// =====================================================================
|
||||
|
||||
/**
|
||||
* Load email settings when email tab is activated
|
||||
*/
|
||||
async loadEmailSettings() {
|
||||
if (this.emailSettings !== null) {
|
||||
return; // Already loaded
|
||||
}
|
||||
|
||||
this.emailSettingsLoading = true;
|
||||
try {
|
||||
// Load settings and providers in parallel
|
||||
const [settingsResponse, providersResponse] = await Promise.all([
|
||||
apiClient.get('/vendor/email-settings'),
|
||||
apiClient.get('/vendor/email-settings/providers')
|
||||
]);
|
||||
|
||||
this.emailProviders = providersResponse.providers || [];
|
||||
|
||||
if (settingsResponse.configured && settingsResponse.settings) {
|
||||
this.emailSettings = settingsResponse.settings;
|
||||
this.populateEmailForm(settingsResponse.settings);
|
||||
} else {
|
||||
this.emailSettings = { is_configured: false, is_verified: false };
|
||||
}
|
||||
|
||||
vendorSettingsLog.info('Loaded email settings');
|
||||
} catch (error) {
|
||||
vendorSettingsLog.error('Failed to load email settings:', error);
|
||||
Utils.showToast('Failed to load email settings', 'error');
|
||||
} finally {
|
||||
this.emailSettingsLoading = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Populate email form from settings
|
||||
*/
|
||||
populateEmailForm(settings) {
|
||||
this.emailForm = {
|
||||
from_email: settings.from_email || '',
|
||||
from_name: settings.from_name || '',
|
||||
reply_to_email: settings.reply_to_email || '',
|
||||
signature_text: settings.signature_text || '',
|
||||
signature_html: settings.signature_html || '',
|
||||
provider: settings.provider || 'smtp',
|
||||
// SMTP - don't populate password
|
||||
smtp_host: settings.smtp_host || '',
|
||||
smtp_port: settings.smtp_port || 587,
|
||||
smtp_username: settings.smtp_username || '',
|
||||
smtp_password: '', // Never populate password
|
||||
smtp_use_tls: settings.smtp_use_tls !== false,
|
||||
smtp_use_ssl: settings.smtp_use_ssl || false,
|
||||
// SendGrid - don't populate API key
|
||||
sendgrid_api_key: '',
|
||||
// Mailgun - don't populate API key
|
||||
mailgun_api_key: '',
|
||||
mailgun_domain: settings.mailgun_domain || '',
|
||||
// SES - don't populate secrets
|
||||
ses_access_key_id: '',
|
||||
ses_secret_access_key: '',
|
||||
ses_region: settings.ses_region || 'eu-west-1'
|
||||
};
|
||||
this.hasEmailChanges = false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Mark email form as changed
|
||||
*/
|
||||
markEmailChanged() {
|
||||
this.hasEmailChanges = true;
|
||||
},
|
||||
|
||||
/**
|
||||
* Save email settings
|
||||
*/
|
||||
async saveEmailSettings() {
|
||||
// Validate required fields
|
||||
if (!this.emailForm.from_email || !this.emailForm.from_name) {
|
||||
Utils.showToast('From Email and From Name are required', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
this.saving = true;
|
||||
try {
|
||||
const response = await apiClient.put('/vendor/email-settings', this.emailForm);
|
||||
|
||||
if (response.success) {
|
||||
Utils.showToast('Email settings saved', 'success');
|
||||
vendorSettingsLog.info('Email settings updated');
|
||||
|
||||
// Update local state
|
||||
this.emailSettings = response.settings;
|
||||
this.hasEmailChanges = false;
|
||||
} else {
|
||||
Utils.showToast(response.message || 'Failed to save email settings', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
vendorSettingsLog.error('Failed to save email settings:', error);
|
||||
Utils.showToast(error.message || 'Failed to save email settings', 'error');
|
||||
} finally {
|
||||
this.saving = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Send test email
|
||||
*/
|
||||
async sendTestEmail() {
|
||||
if (!this.testEmailAddress) {
|
||||
Utils.showToast('Please enter a test email address', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.emailSettings?.is_configured) {
|
||||
Utils.showToast('Please save your email settings first', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
this.sendingTestEmail = true;
|
||||
try {
|
||||
const response = await apiClient.post('/vendor/email-settings/verify', {
|
||||
test_email: this.testEmailAddress
|
||||
});
|
||||
|
||||
if (response.success) {
|
||||
Utils.showToast('Test email sent! Check your inbox.', 'success');
|
||||
// Update verification status
|
||||
this.emailSettings.is_verified = true;
|
||||
} else {
|
||||
Utils.showToast(response.message || 'Failed to send test email', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
vendorSettingsLog.error('Failed to send test email:', error);
|
||||
Utils.showToast(error.message || 'Failed to send test email', 'error');
|
||||
} finally {
|
||||
this.sendingTestEmail = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Switch active section - with email loading hook
|
||||
*/
|
||||
setSection(sectionId) {
|
||||
this.activeSection = sectionId;
|
||||
|
||||
// Load email settings when email tab is activated
|
||||
if (sectionId === 'email' && this.emailSettings === null) {
|
||||
this.loadEmailSettings();
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
275
static/vendor/js/team.js
vendored
275
static/vendor/js/team.js
vendored
@@ -1,275 +0,0 @@
|
||||
// static/vendor/js/team.js
|
||||
/**
|
||||
* Vendor team management page logic
|
||||
* Manage team members, invitations, and roles
|
||||
*/
|
||||
|
||||
const vendorTeamLog = window.LogConfig.loggers.vendorTeam ||
|
||||
window.LogConfig.createLogger('vendorTeam', false);
|
||||
|
||||
vendorTeamLog.info('Loading...');
|
||||
|
||||
function vendorTeam() {
|
||||
vendorTeamLog.info('vendorTeam() called');
|
||||
|
||||
return {
|
||||
// Inherit base layout state
|
||||
...data(),
|
||||
|
||||
// Set page identifier
|
||||
currentPage: 'team',
|
||||
|
||||
// Loading states
|
||||
loading: true,
|
||||
error: '',
|
||||
saving: false,
|
||||
|
||||
// Team data
|
||||
members: [],
|
||||
roles: [],
|
||||
stats: {
|
||||
total: 0,
|
||||
active_count: 0,
|
||||
pending_invitations: 0
|
||||
},
|
||||
|
||||
// Modal states
|
||||
showInviteModal: false,
|
||||
showEditModal: false,
|
||||
showRemoveModal: false,
|
||||
selectedMember: null,
|
||||
|
||||
// Invite form
|
||||
inviteForm: {
|
||||
email: '',
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
role_name: 'staff'
|
||||
},
|
||||
|
||||
// Edit form
|
||||
editForm: {
|
||||
role_id: null,
|
||||
is_active: true
|
||||
},
|
||||
|
||||
// Available role names for invite
|
||||
roleOptions: [
|
||||
{ value: 'owner', label: 'Owner', description: 'Full access to all features' },
|
||||
{ value: 'manager', label: 'Manager', description: 'Manage orders, products, and team' },
|
||||
{ value: 'staff', label: 'Staff', description: 'Handle orders and products' },
|
||||
{ value: 'support', label: 'Support', description: 'Customer support access' },
|
||||
{ value: 'viewer', label: 'Viewer', description: 'Read-only access' },
|
||||
{ value: 'marketing', label: 'Marketing', description: 'Content and promotions' }
|
||||
],
|
||||
|
||||
async init() {
|
||||
vendorTeamLog.info('Team init() called');
|
||||
|
||||
// Guard against multiple initialization
|
||||
if (window._vendorTeamInitialized) {
|
||||
vendorTeamLog.warn('Already initialized, skipping');
|
||||
return;
|
||||
}
|
||||
window._vendorTeamInitialized = true;
|
||||
|
||||
// IMPORTANT: Call parent init first to set vendorCode from URL
|
||||
const parentInit = data().init;
|
||||
if (parentInit) {
|
||||
await parentInit.call(this);
|
||||
}
|
||||
|
||||
try {
|
||||
await Promise.all([
|
||||
this.loadMembers(),
|
||||
this.loadRoles()
|
||||
]);
|
||||
} catch (error) {
|
||||
vendorTeamLog.error('Init failed:', error);
|
||||
this.error = 'Failed to initialize team page';
|
||||
}
|
||||
|
||||
vendorTeamLog.info('Team initialization complete');
|
||||
},
|
||||
|
||||
/**
|
||||
* Load team members
|
||||
*/
|
||||
async loadMembers() {
|
||||
this.loading = true;
|
||||
this.error = '';
|
||||
|
||||
try {
|
||||
const response = await apiClient.get(`/vendor/team/members?include_inactive=true`);
|
||||
|
||||
this.members = response.members || [];
|
||||
this.stats = {
|
||||
total: response.total || 0,
|
||||
active_count: response.active_count || 0,
|
||||
pending_invitations: response.pending_invitations || 0
|
||||
};
|
||||
|
||||
vendorTeamLog.info('Loaded team members:', this.members.length);
|
||||
} catch (error) {
|
||||
vendorTeamLog.error('Failed to load team members:', error);
|
||||
this.error = error.message || 'Failed to load team members';
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Load available roles
|
||||
*/
|
||||
async loadRoles() {
|
||||
try {
|
||||
const response = await apiClient.get(`/vendor/team/roles`);
|
||||
this.roles = response.roles || [];
|
||||
vendorTeamLog.info('Loaded roles:', this.roles.length);
|
||||
} catch (error) {
|
||||
vendorTeamLog.error('Failed to load roles:', error);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Open invite modal
|
||||
*/
|
||||
openInviteModal() {
|
||||
this.inviteForm = {
|
||||
email: '',
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
role_name: 'staff'
|
||||
};
|
||||
this.showInviteModal = true;
|
||||
},
|
||||
|
||||
/**
|
||||
* Send invitation
|
||||
*/
|
||||
async sendInvitation() {
|
||||
if (!this.inviteForm.email) {
|
||||
Utils.showToast('Email is required', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
this.saving = true;
|
||||
try {
|
||||
await apiClient.post(`/vendor/team/invite`, this.inviteForm);
|
||||
|
||||
Utils.showToast('Invitation sent successfully', 'success');
|
||||
vendorTeamLog.info('Invitation sent to:', this.inviteForm.email);
|
||||
|
||||
this.showInviteModal = false;
|
||||
await this.loadMembers();
|
||||
} catch (error) {
|
||||
vendorTeamLog.error('Failed to send invitation:', error);
|
||||
Utils.showToast(error.message || 'Failed to send invitation', 'error');
|
||||
} finally {
|
||||
this.saving = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Open edit member modal
|
||||
*/
|
||||
openEditModal(member) {
|
||||
this.selectedMember = member;
|
||||
this.editForm = {
|
||||
role_id: member.role_id,
|
||||
is_active: member.is_active
|
||||
};
|
||||
this.showEditModal = true;
|
||||
},
|
||||
|
||||
/**
|
||||
* Update team member
|
||||
*/
|
||||
async updateMember() {
|
||||
if (!this.selectedMember) return;
|
||||
|
||||
this.saving = true;
|
||||
try {
|
||||
await apiClient.put(
|
||||
`/vendor/${this.vendorCode}/team/members/${this.selectedMember.user_id}`,
|
||||
this.editForm
|
||||
);
|
||||
|
||||
Utils.showToast('Team member updated', 'success');
|
||||
vendorTeamLog.info('Updated team member:', this.selectedMember.user_id);
|
||||
|
||||
this.showEditModal = false;
|
||||
this.selectedMember = null;
|
||||
await this.loadMembers();
|
||||
} catch (error) {
|
||||
vendorTeamLog.error('Failed to update team member:', error);
|
||||
Utils.showToast(error.message || 'Failed to update team member', 'error');
|
||||
} finally {
|
||||
this.saving = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Confirm remove member
|
||||
*/
|
||||
confirmRemove(member) {
|
||||
this.selectedMember = member;
|
||||
this.showRemoveModal = true;
|
||||
},
|
||||
|
||||
/**
|
||||
* Remove team member
|
||||
*/
|
||||
async removeMember() {
|
||||
if (!this.selectedMember) return;
|
||||
|
||||
this.saving = true;
|
||||
try {
|
||||
await apiClient.delete(`/vendor/team/members/${this.selectedMember.user_id}`);
|
||||
|
||||
Utils.showToast('Team member removed', 'success');
|
||||
vendorTeamLog.info('Removed team member:', this.selectedMember.user_id);
|
||||
|
||||
this.showRemoveModal = false;
|
||||
this.selectedMember = null;
|
||||
await this.loadMembers();
|
||||
} catch (error) {
|
||||
vendorTeamLog.error('Failed to remove team member:', error);
|
||||
Utils.showToast(error.message || 'Failed to remove team member', 'error');
|
||||
} finally {
|
||||
this.saving = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Get role display name
|
||||
*/
|
||||
getRoleName(member) {
|
||||
if (member.role_name) return member.role_name;
|
||||
const role = this.roles.find(r => r.id === member.role_id);
|
||||
return role ? role.name : 'Unknown';
|
||||
},
|
||||
|
||||
/**
|
||||
* Get member initials for avatar
|
||||
*/
|
||||
getInitials(member) {
|
||||
const first = member.first_name || member.email?.charAt(0) || '';
|
||||
const last = member.last_name || '';
|
||||
return (first.charAt(0) + last.charAt(0)).toUpperCase() || '?';
|
||||
},
|
||||
|
||||
/**
|
||||
* Format date for display
|
||||
*/
|
||||
formatDate(dateStr) {
|
||||
if (!dateStr) return '-';
|
||||
const locale = window.VENDOR_CONFIG?.locale || 'en-GB';
|
||||
return new Date(dateStr).toLocaleDateString(locale, {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user