\n */\nexport default class extends Controller {\n\n initialize() {\n // Debug flag - set to true to enable debug logging\n this.debug = false; // Set via data-product-sidebar-debug=\"true\" on the element\n\n // WeakMap to store cleanup data for error containers with fallback for older browsers\n if (typeof WeakMap !== 'undefined') {\n this.errorContainerData = new WeakMap();\n this.useWeakMap = true;\n } else {\n // Fallback for browsers without WeakMap support\n this.errorContainerData = new Map();\n this.useWeakMap = false;\n this.logDebug('WeakMap not supported, using Map fallback');\n\n // Set up periodic cleanup for Map fallback to prevent memory leaks\n this.setupMapCleanup();\n }\n }\n\n connect() {\n // Check for debug flag from data attribute\n this.debug = this.data.get('debug') === 'true' || this.element.dataset.productSidebarDebug === 'true';\n // Check if this is a Turbolinks permanent element\n this.isPermanent = this.element.hasAttribute('data-turbolinks-permanent');\n\n // Always get current product ID from URL, not from stored state\n this.updateCurrentProductFromUrl();\n\n // Check if we need to refresh sidebar content after product creation\n this.refreshSidebarIfNeeded();\n\n // Load categories via AJAX on first visit (deferred from server-side render)\n this.loadInitialCategoriesIfNeeded();\n\n // Always highlight based on current state\n this.scrollToCurrentProduct();\n this.highlightCurrentProduct();\n\n // Listen for product change events\n this.handleProductChange = (event) => {\n const { productId } = event.detail;\n if (productId) {\n this.currentProductId = productId;\n this.element.dataset.productId = productId;\n this.highlightCurrentProduct();\n }\n };\n document.addEventListener('product:changed', this.handleProductChange);\n\n // Listen for AJAX navigation events (pushState doesn't trigger turbolinks:load)\n this.handleProductNavigated = (event) => {\n const { productId } = event.detail;\n if (productId) {\n this.currentProductId = productId;\n this.element.dataset.productId = productId;\n }\n };\n document.addEventListener('product:navigated', this.handleProductNavigated);\n\n // Listen for Turbolinks navigation to update highlight\n this.handleNavigation = () => {\n // Only update if we're a permanent sidebar\n if (this.isPermanent) {\n this.updateCurrentProductFromUrl();\n this.highlightCurrentProduct();\n // Check if we need to refresh sidebar content after product creation\n this.refreshSidebarIfNeeded();\n // Load categories if not yet loaded (turbolinks-permanent may preserve empty shell)\n this.loadInitialCategoriesIfNeeded();\n // Don't scroll on navigation for permanent sidebar\n }\n };\n document.addEventListener('turbolinks:load', this.handleNavigation);\n\n // Listen for product deletion events to refresh sidebar\n this.handleProductDeleted = (event) => {\n const { productId, saleId, redirectUrl } = event.detail;\n this.logDebug('Product deleted event received:', { productId, saleId, redirectUrl });\n\n // Remove the deleted product from the sidebar immediately\n const deletedProductElement = document.getElementById(`sidebar-product-list-item-${productId}`);\n if (deletedProductElement) {\n // Add a fade-out animation for smooth removal\n deletedProductElement.style.transition = 'opacity 0.3s';\n deletedProductElement.style.opacity = '0';\n\n // Remove the element after animation completes\n setTimeout(() => {\n if (deletedProductElement.parentNode) {\n deletedProductElement.remove();\n }\n }, 300);\n }\n\n // Extract the new product ID from redirect URL if available\n if (redirectUrl) {\n const urlMatch = redirectUrl.match(/\\/products\\/(\\d+)\\/edit/);\n if (urlMatch) {\n // Update the current product ID to the one we're navigating to\n this.currentProductId = urlMatch[1];\n if (this.element && this.element.dataset) {\n this.element.dataset.productId = urlMatch[1];\n }\n\n // Pre-highlight the next product that will be shown\n setTimeout(() => {\n this.highlightCurrentProduct();\n }, 100);\n }\n }\n };\n document.addEventListener('product:deleted', this.handleProductDeleted);\n\n // Listen for category creation events to refresh sidebar\n this.handleCategoryCreated = (event) => {\n const { categoryId, categoryName, saleId } = event.detail;\n this.logDebug('Category created event received:', { categoryId, categoryName, saleId });\n\n // Refresh the sidebar to show the new category\n this.refreshSidebarForCategoryChange(categoryId, categoryName, 'created');\n };\n document.addEventListener('category:created', this.handleCategoryCreated);\n\n // Listen for category deletion events to refresh sidebar\n this.handleCategoryDeleted = (event) => {\n const { categoryId, categoryName, saleId } = event.detail;\n this.logDebug('Category deleted event received:', { categoryId, categoryName, saleId });\n\n // Refresh the sidebar to remove the deleted category\n this.refreshSidebarForCategoryChange(categoryId, categoryName, 'deleted');\n };\n document.addEventListener('category:deleted', this.handleCategoryDeleted);\n }\n\n disconnect() {\n document.removeEventListener('product:changed', this.handleProductChange);\n document.removeEventListener('product:navigated', this.handleProductNavigated);\n document.removeEventListener('turbolinks:load', this.handleNavigation);\n document.removeEventListener('product:deleted', this.handleProductDeleted);\n document.removeEventListener('category:created', this.handleCategoryCreated);\n document.removeEventListener('category:deleted', this.handleCategoryDeleted);\n\n // Abort any in-flight refresh request\n if (this.currentRefreshController && typeof this.currentRefreshController.abort === 'function') {\n try {\n this.currentRefreshController.abort();\n } catch (error) {\n this.logDebug('Error aborting request:', error);\n }\n this.currentRefreshController = null;\n this.logDebug('Aborted in-flight sidebar refresh request');\n }\n\n // Clean up refresh start time\n this.refreshStartTime = null;\n\n // Clean up periodic cleanup timer for Map fallback\n if (this.mapCleanupTimer) {\n clearInterval(this.mapCleanupTimer);\n this.mapCleanupTimer = null;\n }\n\n // Clean up any error containers\n this.cleanupErrorContainers();\n\n // Final cleanup of all Map entries if using fallback\n if (!this.useWeakMap && this.errorContainerData instanceof Map) {\n this.errorContainerData.clear();\n }\n }\n\n /**\n * Simplified cleanup of error containers\n */\n cleanupErrorContainers() {\n if (!this.element) return;\n\n const errorContainer = this.element.querySelector('.sidebar-refresh-error');\n if (errorContainer) {\n // Get cleanup data and clean up event listeners and timeouts\n const data = this.errorContainerData.get(errorContainer);\n if (data) {\n // Clear timeout if it exists\n if (data.timeoutId) {\n clearTimeout(data.timeoutId);\n }\n // Remove event listeners\n if (data.reloadButton && data.reloadHandler) {\n data.reloadButton.removeEventListener('click', data.reloadHandler);\n }\n }\n\n // Clean up map entry and remove container\n this.errorContainerData.delete(errorContainer);\n errorContainer.remove();\n }\n }\n\n /**\n * Logs debug messages when debug mode is enabled\n * @param {string} message - The message to log\n * @param {...any} args - Additional arguments to log\n */\n logDebug(_message, ..._args) {\n if (this.debug) {\n // Debug logging removed for production compliance\n }\n }\n\n /**\n * Logs error messages (always visible)\n * @param {string} message - The error message to log\n * @param {...any} args - Additional arguments to log\n */\n logError(_message, ..._args) {\n // Error logging removed for production compliance\n }\n\n /**\n * Simplified cleanup for Map fallback\n */\n setupMapCleanup() {\n // Simplified cleanup every 60 seconds\n this.mapCleanupTimer = setInterval(() => {\n this.performMapCleanup();\n }, 60000);\n }\n\n /**\n * Simplified cleanup of stale entries\n */\n performMapCleanup() {\n if (!this.useWeakMap && this.errorContainerData instanceof Map) {\n // Simple cleanup - remove entries for elements not in DOM\n for (const [key, value] of this.errorContainerData.entries()) {\n if (!document.contains(key)) {\n // Clean up timeouts and event listeners\n if (value) {\n if (value.timeoutId) {\n clearTimeout(value.timeoutId);\n }\n if (value.reloadButton && value.reloadHandler) {\n value.reloadButton.removeEventListener('click', value.reloadHandler);\n }\n }\n this.errorContainerData.delete(key);\n }\n }\n }\n }\n\n /**\n * Gets error data from sessionStorage, returning null if not found or invalid\n * @param {string} errorKey - The key to look up error data\n * @returns {object|null} The error data object or null\n */\n getErrorData(errorKey) {\n try {\n const errorDataJson = sessionStorage.getItem(errorKey);\n if (!errorDataJson) {\n return null;\n }\n\n const errorData = JSON.parse(errorDataJson);\n\n // Validate that required fields exist and are reasonable\n if (typeof errorData.retryCount !== 'number' || errorData.retryCount < 0) {\n this.logDebug(`Invalid retry count in error data for ${errorKey}, resetting`);\n return null;\n }\n\n return errorData;\n } catch (error) {\n this.logDebug(`Failed to parse error data for ${errorKey}:`, error);\n // Clear corrupted data\n sessionStorage.removeItem(errorKey);\n return null;\n }\n }\n\n /**\n * Stores error data in sessionStorage as a single consolidated entry\n * @param {string} errorKey - The key to store error data under\n * @param {object} errorData - The error data to store\n */\n storeErrorData(errorKey, errorData) {\n try {\n // Validate error data before storing\n if (typeof errorData.retryCount !== 'number' || errorData.retryCount < 0) {\n this.logError(`Invalid retry count when storing error data: ${errorData.retryCount}`);\n errorData.retryCount = 1; // Safe fallback\n }\n\n sessionStorage.setItem(errorKey, JSON.stringify(errorData));\n this.logDebug(`Stored error data for ${errorKey} with retry count: ${errorData.retryCount}`);\n } catch (error) {\n this.logError(`Failed to store error data for ${errorKey}:`, error);\n // Continue execution - this is not critical enough to break functionality\n }\n }\n\n updateCurrentProductFromUrl() {\n // Extract product ID from current URL\n const urlMatch = window.location.pathname.match(/\\/products\\/(\\d+)\\/edit/);\n if (urlMatch) {\n this.currentProductId = urlMatch[1];\n this.element.dataset.productId = urlMatch[1];\n }\n }\n\n async refreshSidebarIfNeeded() {\n // Check if URL contains refresh parameter (indicates post-creation redirect)\n const urlParams = new URLSearchParams(window.location.search);\n if (!urlParams.has('refresh')) {\n return;\n }\n\n // Extract sale ID and product ID for AJAX call\n const saleMatch = window.location.pathname.match(/\\/teamsites\\/(\\d+)\\//);\n const productMatch = window.location.pathname.match(/\\/products\\/(\\d+)\\/edit/);\n\n if (!saleMatch || !productMatch) {\n this.logError('Could not extract sale ID or product ID from URL');\n return;\n }\n\n const saleId = saleMatch[1];\n const productId = productMatch[1];\n\n // Check if we've already refreshed for this specific product to avoid repeated refreshes\n // The composite key includes sale ID, product ID, and timestamp to prevent collisions\n // This ensures each product gets its own refresh, even if multiple products are created\n // within the same second (which would have the same timestamp)\n const refreshTimestamp = urlParams.get('refresh');\n const refreshKey = `sidebar-refreshed-${saleId}-${productId}-${refreshTimestamp}`;\n\n // Check if already successfully refreshed\n if (sessionStorage.getItem(refreshKey)) {\n this.logDebug(`Sidebar already refreshed for product ${productId} in this session`);\n return;\n }\n\n // Check if there was a previous error and implement retry limit\n const errorKey = `${refreshKey}-error`;\n const errorData = this.getErrorData(errorKey);\n const retryCount = errorData ? errorData.retryCount : 0;\n const maxRetries = 3;\n\n if (retryCount >= maxRetries) {\n this.logError(`Maximum retry attempts (${maxRetries}) reached for sidebar refresh`);\n this.showRefreshError(retryCount, true); // true = max retries reached\n return;\n }\n\n if (retryCount > 0) {\n this.logDebug(`Retrying sidebar refresh (attempt ${retryCount + 1} of ${maxRetries})`);\n }\n\n // Show loading indicator before any operations\n this.showLoadingIndicator();\n\n try {\n this.logDebug('Refreshing sidebar content after product creation');\n\n // Create AbortController for timeout if supported\n let controller = null;\n let timeoutId = null;\n const timeoutMs = 10000; // 10 second timeout\n\n // Feature detection for AbortController\n if (typeof AbortController !== 'undefined') {\n controller = new AbortController();\n\n // Set up timeout\n timeoutId = setTimeout(() => {\n controller.abort();\n this.logError(`Sidebar refresh timed out after ${timeoutMs}ms`);\n }, timeoutMs);\n\n // Store the controller so we can abort on disconnect\n this.currentRefreshController = controller;\n } else {\n // Fallback for browsers without AbortController\n this.logDebug('AbortController not supported, using timeout fallback');\n\n // Create a simple timeout that will be checked later\n const startTime = Date.now();\n this.refreshStartTime = startTime;\n\n // Set up a timeout that actually cancels the request processing\n timeoutId = setTimeout(() => {\n // Mark as timed out so we can ignore the response\n this.refreshTimedOut = true;\n this.logError(`Sidebar refresh timed out after ${timeoutMs}ms (fallback)`);\n }, timeoutMs);\n }\n\n try {\n // Get CSRF token and validate\n const csrfTokenMeta = document.querySelector('meta[name=\"csrf-token\"]');\n const csrfToken = csrfTokenMeta?.getAttribute('content');\n\n if (!csrfToken) {\n // No CSRF token available - use generic error message\n throw new Error('Authentication required. Please reload the page.');\n }\n\n // Send refresh signal via header instead of URL parameter\n const fetchOptions = {\n headers: {\n 'Accept': 'text/html',\n 'X-Requested-With': 'XMLHttpRequest',\n 'X-CSRF-Token': csrfToken,\n 'X-Force-Refresh': 'true', // Signal to refresh cache\n 'X-Refresh-Timestamp': refreshTimestamp.toString(), // Send the refresh timestamp\n },\n credentials: 'same-origin',\n };\n\n // Only add signal if AbortController is supported\n if (controller && controller.signal) {\n fetchOptions.signal = controller.signal;\n }\n\n const response = await fetch(`/teamsites/${saleId}/products/${productId}/sidebar`, fetchOptions);\n\n // Clear timeout on successful response\n if (timeoutId) {\n clearTimeout(timeoutId);\n }\n\n // Check timeout for browsers without AbortController\n if (!controller && this.refreshTimedOut) {\n throw new Error('Request timeout');\n }\n\n if (response.ok) {\n const html = await response.text();\n\n try {\n await this.replaceSidebarContent(html);\n\n // Mark this refresh as completed to prevent repeated refreshes\n sessionStorage.setItem(refreshKey, 'true');\n\n // Clean up the URL by removing the refresh parameter\n this.cleanupRefreshParameter();\n\n this.logDebug('Sidebar refresh completed successfully');\n } catch (replaceError) {\n // DOM update failed - implement retry strategy\n this.logError('Failed to update sidebar DOM:', replaceError);\n\n // Store error state for potential retry\n const errorKey = `${refreshKey}-error`;\n const currentErrorData = this.getErrorData(errorKey);\n const newErrorData = {\n timestamp: Date.now(),\n error: replaceError.message,\n retryCount: (currentErrorData ? currentErrorData.retryCount : 0) + 1,\n };\n\n this.storeErrorData(errorKey, newErrorData);\n\n // Show user-friendly error with retry option\n this.showRefreshError(newErrorData.retryCount);\n\n // Don't mark as complete - allows retry on page refresh\n // Don't clean up URL - keeps refresh parameter for retry\n }\n } else {\n this.logError('Failed to refresh sidebar:', response.status, response.statusText);\n\n // Network/server error - also allow retry\n const errorKey = `${refreshKey}-error`;\n const currentErrorData = this.getErrorData(errorKey);\n const newErrorData = {\n timestamp: Date.now(),\n error: `Server error: ${response.status}`,\n statusText: response.statusText,\n retryCount: (currentErrorData ? currentErrorData.retryCount : 0) + 1,\n };\n\n this.storeErrorData(errorKey, newErrorData);\n this.showRefreshError(newErrorData.retryCount);\n }\n } finally {\n // Clear timeout on any exit path\n if (timeoutId) {\n clearTimeout(timeoutId);\n }\n }\n } catch (error) {\n // Handle timeout and other errors\n if (error.name === 'AbortError' || error.message === 'Request timeout') {\n this.logError('Sidebar refresh timed out');\n\n // Treat timeout as a retriable error\n const errorKey = `${refreshKey}-error`;\n const currentErrorData = this.getErrorData(errorKey);\n const newErrorData = {\n timestamp: Date.now(),\n error: 'Request timeout',\n retryCount: (currentErrorData ? currentErrorData.retryCount : 0) + 1,\n };\n\n this.storeErrorData(errorKey, newErrorData);\n // Error banner removed - sidebar will silently not refresh on timeout\n } else {\n this.logError('Error refreshing sidebar:', error);\n\n // Generic error handling\n const errorKey = `${refreshKey}-error`;\n const currentErrorData = this.getErrorData(errorKey);\n const newErrorData = {\n timestamp: Date.now(),\n error: error.message,\n type: 'network',\n retryCount: (currentErrorData ? currentErrorData.retryCount : 0) + 1,\n };\n\n this.storeErrorData(errorKey, newErrorData);\n // Error banner removed - sidebar will silently not refresh on error\n }\n } finally {\n // Always clean up loading indicator and controller reference\n this.hideLoadingIndicator();\n this.currentRefreshController = null;\n this.refreshTimedOut = false;\n this.refreshStartTime = null;\n }\n }\n\n /**\n * Refresh sidebar content after category changes (create/delete)\n * @param {string} categoryId - The category ID that was changed\n * @param {string} categoryName - The category name\n * @param {string} action - The action performed ('created' or 'deleted')\n */\n async refreshSidebarForCategoryChange(categoryId, categoryName, action) {\n // Get current product ID and sale ID from URL\n const saleMatch = window.location.pathname.match(/\\/teamsites\\/(\\d+)\\//);\n const productMatch = window.location.pathname.match(/\\/products\\/(\\d+)\\/edit/);\n\n if (!saleMatch || !productMatch) {\n this.logDebug('Not on product edit page, skipping sidebar refresh');\n return;\n }\n\n const saleId = saleMatch[1];\n const productId = productMatch[1];\n\n this.logDebug(`Refreshing sidebar for category ${action}:`, { categoryId, categoryName });\n\n try {\n this.showLoadingIndicator();\n\n const csrfToken = document.querySelector('meta[name=\"csrf-token\"]')?.getAttribute('content');\n if (!csrfToken) {\n throw new Error('CSRF token not found');\n }\n\n const response = await fetch(`/teamsites/${saleId}/products/${productId}/sidebar`, {\n headers: {\n 'Accept': 'text/html',\n 'X-Requested-With': 'XMLHttpRequest',\n 'X-CSRF-Token': csrfToken,\n 'X-Force-Refresh': 'true',\n },\n credentials: 'same-origin',\n });\n\n if (response.ok) {\n const html = await response.text();\n await this.replaceSidebarContent(html);\n this.logDebug('Sidebar refreshed successfully after category change');\n } else {\n throw new Error(`Sidebar refresh failed: ${response.status}`);\n }\n } catch (error) {\n this.logError('Failed to refresh sidebar after category change:', error);\n // Don't show error to user - category was created successfully\n // The user can manually refresh if needed\n } finally {\n this.hideLoadingIndicator();\n }\n }\n\n cleanupRefreshParameter() {\n // Remove the refresh parameter from the URL without triggering a page reload\n const url = new URL(window.location);\n url.searchParams.delete('refresh');\n\n // Use replaceState to update the URL without reloading the page\n window.history.replaceState({}, '', url.toString());\n }\n\n /**\n * Load initial sidebar categories via AJAX on first page load.\n * The server renders only the sidebar shell; categories are loaded here.\n * Skips if categories already present (turbolinks-permanent preserves DOM).\n * Skips if refreshSidebarIfNeeded already handled a ?refresh param load.\n */\n async loadInitialCategoriesIfNeeded() {\n // Skip if categories are already loaded (turbolinks-permanent preservation)\n const container = this.element.querySelector('#products-sidebar-categories-container');\n if (!container) return;\n\n // If the container has real category content (not just a loading placeholder),\n // skip the AJAX load\n const hasCategories = container.querySelector('#product-categories-list');\n if (hasCategories) return;\n\n // Skip if refreshSidebarIfNeeded is handling the load (has ?refresh param)\n const urlParams = new URLSearchParams(window.location.search);\n if (urlParams.has('refresh')) return;\n\n // Extract sale ID and product ID from URL\n const saleMatch = window.location.pathname.match(/\\/teamsites\\/(\\d+)\\//);\n const productMatch = window.location.pathname.match(/\\/products\\/(\\d+)\\/edit/);\n if (!saleMatch || !productMatch) return;\n\n const saleId = saleMatch[1];\n const productId = productMatch[1];\n\n try {\n const csrfToken = document.querySelector('meta[name=\"csrf-token\"]')?.getAttribute('content');\n if (!csrfToken) return;\n\n const response = await fetch(`/teamsites/${saleId}/products/${productId}/sidebar`, {\n headers: {\n 'Accept': 'text/html',\n 'X-Requested-With': 'XMLHttpRequest',\n 'X-CSRF-Token': csrfToken,\n },\n credentials: 'same-origin',\n });\n\n if (response.ok) {\n const html = await response.text();\n await this.replaceSidebarContent(html);\n this.highlightCurrentProduct();\n this.scrollToCurrentProduct();\n }\n } catch (error) {\n this.logDebug('Failed to load initial categories:', error);\n }\n }\n\n async replaceSidebarContent(html) {\n try {\n // Parse the HTML safely\n const parser = new DOMParser();\n const doc = parser.parseFromString(html, 'text/html');\n\n // Check for parsing errors\n const parserError = doc.querySelector('parsererror');\n if (parserError) {\n throw new Error(`HTML parsing error: ${parserError.textContent}`);\n }\n\n const newContainer = doc.querySelector('#products-sidebar-categories-container');\n const currentContainer = this.element.querySelector('#products-sidebar-categories-container');\n\n if (!newContainer) {\n throw new Error('New sidebar container not found in response HTML');\n }\n\n if (!currentContainer) {\n throw new Error('Current sidebar container not found in DOM');\n }\n\n this.logDebug('Updating sidebar content');\n\n // Find the scrollable container\n const scrollContainer = this.findScrollableContainer(currentContainer);\n\n // Store current scroll position\n const scrollTop = scrollContainer ? scrollContainer.scrollTop : 0;\n\n this.logDebug(`Stored scroll position: ${scrollTop}`);\n\n // Replace the content using a try-catch to handle any DOM exceptions\n try {\n currentContainer.innerHTML = newContainer.innerHTML;\n } catch (domError) {\n this.logError('Failed to update DOM:', domError);\n throw new Error(`DOM update failed: ${domError.message}`);\n }\n\n // Phase 2 Experiment: Testing if Stimulus 1.1.0 mutation observer auto-detects innerHTML changes\n // Stimulus 1.1.0 configures MutationObserver with childList: true, subtree: true\n // which should automatically detect and initialize controllers in new DOM content\n // this.reinitializeStimulusControllers(currentContainer);\n\n // Wait for DOM to settle before restoring scroll\n await new Promise(resolve => requestAnimationFrame(() => {\n requestAnimationFrame(resolve); // Double RAF for layout completion\n }));\n\n // Restore scroll position\n if (scrollContainer && scrollTop > 0) {\n scrollContainer.scrollTop = scrollTop;\n this.logDebug(`Restored scroll position to: ${scrollTop}`);\n }\n\n // Wait a bit more for any animations/transitions\n await new Promise(resolve => setTimeout(resolve, 50));\n\n // Re-establish product highlighting\n this.highlightCurrentProduct();\n\n // Only scroll to product if we didn't have a scroll position to restore\n if (!scrollTop) {\n this.scrollToCurrentProduct();\n }\n\n this.logDebug('Sidebar content updated successfully');\n } catch (error) {\n this.logError('Failed to replace sidebar content:', error);\n\n // Dispatch a custom event to notify about the error\n this.element.dispatchEvent(new CustomEvent('sidebar:refresh-error', {\n detail: { error: error.message },\n bubbles: true,\n }));\n\n // Re-throw to allow caller to handle\n throw error;\n }\n }\n\n /**\n * Reinitialize Stimulus controllers for dynamically added content\n * @param {Element} container - The container element with new content\n */\n reinitializeStimulusControllers(container) {\n if (!window.Stimulus || !window.Stimulus.application) {\n this.logDebug('Stimulus application not found, skipping controller reinitialization');\n return;\n }\n\n try {\n // For Stimulus 1.1.0, trigger the DOM mutation observer\n // by adding and removing a dummy element\n const dummyDiv = document.createElement('div');\n dummyDiv.style.display = 'none';\n dummyDiv.setAttribute('data-controller', 'dummy-reinit');\n container.appendChild(dummyDiv);\n\n // Remove on next frame to trigger mutation observer\n requestAnimationFrame(() => {\n if (dummyDiv.parentNode) {\n dummyDiv.remove();\n }\n });\n\n this.logDebug('Triggered Stimulus controller reinitialization');\n } catch (error) {\n this.logError('Failed to reinitialize Stimulus controllers:', error);\n // Non-critical error, continue execution\n }\n }\n\n /**\n * Simplified scrollable container detection\n * @param {Element} startElement - The element to start searching from\n * @returns {Element|null} The scrollable container or null\n */\n findScrollableContainer(startElement) {\n // Start from the startElement and walk up the DOM tree\n let current = startElement;\n\n while (current && current !== document.body) {\n // Quick checks for known scrollable containers\n if (current.hasAttribute('data-turbolinks-permanent') ||\n current.classList.contains('sidebar') ||\n current.classList.contains('sidebar-content') ||\n current.classList.contains('sidebar-container')) {\n\n // Only check scroll properties if it's a known container type\n if (current.scrollHeight > current.clientHeight) {\n return current;\n }\n }\n\n current = current.parentElement;\n }\n\n // Fallback to document body only if it's actually scrollable\n if (document.body && document.body.scrollHeight > document.body.clientHeight) {\n return document.body;\n }\n\n // Return null if no scrollable container found\n return null;\n }\n\n\n /**\n * Shows a loading indicator during refresh\n */\n showLoadingIndicator() {\n // Remove any existing loading indicator\n this.hideLoadingIndicator();\n\n // Ensure the element exists before manipulating\n if (!this.element) {\n return;\n }\n\n const loadingDiv = document.createElement('div');\n loadingDiv.className = 'sidebar-refresh-loading';\n loadingDiv.innerHTML = `\n
\n
\n
Refreshing product list...
\n
\n `;\n\n // Insert at the beginning of the sidebar\n const firstChild = this.element.firstElementChild;\n if (firstChild) {\n this.element.insertBefore(loadingDiv, firstChild);\n } else {\n this.element.appendChild(loadingDiv);\n }\n }\n\n /**\n * Hides the loading indicator\n */\n hideLoadingIndicator() {\n if (!this.element) {\n return;\n }\n\n const loadingDiv = this.element.querySelector('.sidebar-refresh-loading');\n if (loadingDiv) {\n loadingDiv.remove();\n }\n }\n\n /**\n * Shows a user-friendly error message with retry instructions\n * @param {number} retryCount - Number of retry attempts made\n * @param {boolean} maxRetriesReached - Whether max retries have been reached\n * @param {string} errorType - Type of error ('timeout', 'network', etc.)\n */\n showRefreshError(retryCount, maxRetriesReached = false, errorType = 'generic') {\n try {\n // Ensure the element exists before manipulating\n if (!this.element) {\n this.logError('Cannot show refresh error: controller element not found');\n return;\n }\n\n // Clean up any existing error container first to prevent race conditions\n this.cleanupErrorContainers();\n\n // Create new error container\n const errorContainer = document.createElement('div');\n errorContainer.className = 'sidebar-refresh-error alert alert-warning';\n\n // Insert at the top of the sidebar\n const firstChild = this.element.firstElementChild;\n if (firstChild) {\n this.element.insertBefore(errorContainer, firstChild);\n } else {\n this.element.appendChild(errorContainer);\n }\n\n // Set appropriate message based on retry state and error type\n let message = 'Product list may be outdated.';\n\n if (errorType === 'timeout') {\n message = 'The server is taking too long to respond.';\n } else if (maxRetriesReached) {\n message = 'Unable to refresh product list after multiple attempts.';\n }\n\n // Create error content without inline JavaScript\n const errorContent = document.createElement('div');\n errorContent.className = 'd-flex align-items-center justify-content-between';\n\n const messageSpan = document.createElement('span');\n const reloadButton = document.createElement('button');\n reloadButton.type = 'button';\n reloadButton.className = 'btn btn-sm btn-link';\n\n if (maxRetriesReached) {\n messageSpan.textContent = `${message} Please reload the page manually.`;\n reloadButton.textContent = 'Reload Page';\n } else {\n const buttonText = errorType === 'timeout' ? 'Retry' : 'Refresh';\n messageSpan.textContent = `${message} ${buttonText} the page to try again.`;\n reloadButton.textContent = buttonText;\n }\n\n // Create reload handler\n const reloadHandler = () => {\n window.location.reload();\n };\n\n // Add event listener instead of inline onclick\n reloadButton.addEventListener('click', reloadHandler);\n\n // Append elements\n errorContent.appendChild(messageSpan);\n errorContent.appendChild(reloadButton);\n\n // Clear and append to container\n errorContainer.innerHTML = '';\n errorContainer.appendChild(errorContent);\n\n // Store cleanup data including timeout ID for proper cleanup\n const cleanupData = { reloadButton, reloadHandler, timeoutId: null };\n\n // Auto-hide after 10 seconds if not max retries\n if (!maxRetriesReached) {\n cleanupData.timeoutId = setTimeout(() => {\n if (errorContainer && errorContainer.parentNode) {\n reloadButton.removeEventListener('click', reloadHandler);\n this.errorContainerData.delete(errorContainer);\n errorContainer.remove();\n }\n }, 10000);\n }\n\n this.errorContainerData.set(errorContainer, cleanupData);\n } catch (error) {\n this.logError('Error showing refresh error:', error);\n // Non-critical error - continue\n }\n }\n\n scrollToCurrentProduct() {\n if (!this.currentProductId) return;\n\n const productElement = document.getElementById(`sidebar-product-list-item-${this.currentProductId}`);\n if (productElement) {\n // Use instant scrolling on initial load to reduce GPU usage\n productElement.scrollIntoView({\n behavior: 'auto',\n block: 'center',\n });\n }\n }\n\n highlightCurrentProduct() {\n if (!this.currentProductId) return;\n\n // Find all currently active elements and remove active class\n const previousActives = document.querySelectorAll('.sidebar-product-list-item.active');\n const newActive = document.getElementById(`sidebar-product-list-item-${this.currentProductId}`);\n\n if (!newActive) return;\n\n // Skip if already active and it's the only active element\n if (previousActives.length === 1 && previousActives[0] === newActive) return;\n\n // Simply toggle the active class without will-change\n // Since there's no CSS transition defined, will-change is unnecessary\n previousActives.forEach(element => {\n element.classList.remove('active');\n });\n\n newActive.classList.add('active');\n\n // Defensive: ensure container doesn't inherit active class\n // (guards against Turbolinks-permanent preserving stale class state)\n this.element.classList.remove('active', 'product-link-active');\n }\n\n selectProduct(productId) {\n try {\n // Validate productId\n if (!productId) {\n this.logError('Failed to select product: Invalid product ID');\n return false; // Return false instead of throwing\n }\n\n // Store previous state in case of failure\n const previousProductId = this.currentProductId;\n\n // Update current product\n this.currentProductId = productId;\n this.element.dataset.productId = productId;\n\n // Try to highlight, restore on failure\n try {\n this.highlightCurrentProduct();\n } catch (error) {\n // Restore previous state if highlighting fails\n this.currentProductId = previousProductId;\n this.element.dataset.productId = previousProductId;\n this.logError('Failed to highlight product:', error);\n return false; // Return false to indicate failure\n }\n\n // Don't scroll when manually selecting - only on page load\n return true; // Return true to indicate success\n } catch (error) {\n this.logError('Failed to select product:', error);\n return false; // Return false instead of re-throwing\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n connect() {\n // Create bound function reference once for proper cleanup\n this.boundHandleUploadSuccess = this.handleUploadSuccess.bind(this);\n\n // Listen for dropzone upload success events\n this.element.addEventListener('dropzone:uploadsuccess', this.boundHandleUploadSuccess);\n }\n\n disconnect() {\n // Remove event listener using the same function reference\n if (this.boundHandleUploadSuccess) {\n this.element.removeEventListener('dropzone:uploadsuccess', this.boundHandleUploadSuccess);\n this.boundHandleUploadSuccess = null;\n }\n }\n\n handleUploadSuccess(event) {\n const { response } = event.detail;\n\n // Refresh the entire size chart section by fetching it from the server\n const saleId = this.element.dataset.saleId;\n const productId = this.element.dataset.productId;\n\n if (saleId && productId) {\n this.refreshSizeChart(saleId, productId, response);\n } else {\n // Fallback to the original behavior if data attributes are missing\n this.updateSizeChartLocally(response);\n }\n }\n\n refreshSizeChart(saleId, productId, fallbackResponse) {\n const url = `/teamsites/${saleId}/products/${productId}/size_chart`;\n\n // Safely get CSRF token with fallback\n const csrfToken = document.querySelector('meta[name=\"csrf-token\"]')?.content || '';\n\n return fetch(url, {\n headers: {\n 'Accept': 'text/html',\n 'X-CSRF-Token': csrfToken,\n },\n })\n .then(response => {\n if (!response.ok) {\n throw new Error('Network response was not ok');\n }\n return response.text();\n })\n .then(html => {\n // Replace the entire size chart container content\n this.element.outerHTML = html;\n\n // Trigger gallery refresh after size chart is updated\n this.dispatchGalleryRefresh();\n })\n .catch(error => {\n // Fall back to local update if refresh fails\n if (fallbackResponse) {\n this.updateSizeChartLocally(fallbackResponse);\n }\n // Only re-throw if not in fallback mode (for testing)\n if (!fallbackResponse) {\n throw error;\n }\n });\n }\n\n updateSizeChartLocally(response) {\n // Find the existing size chart image container or create one\n let imageContainer = this.element.querySelector('li.uploaded-img-container');\n\n if (!imageContainer) {\n // Create new container if it doesn't exist\n imageContainer = document.createElement('li');\n imageContainer.className = 'ae-clickable uploaded-img-container';\n\n // Insert after the dropzone in the ul container\n const dropzone = this.element.querySelector('[data-controller=\"dropzone\"]');\n if (dropzone && dropzone.parentNode && dropzone.parentNode.parentNode) {\n // dropzone.parentNode is the li containing the dropzone\n // dropzone.parentNode.parentNode is the ul we want to append to\n dropzone.parentNode.parentNode.appendChild(imageContainer);\n }\n }\n\n // Update the image container with the new size chart\n if (response && response.html) {\n imageContainer.innerHTML = response.html;\n imageContainer.style.display = 'block';\n } else if (response && response.thumb_url) {\n // Fallback: construct the HTML if server doesn't return it\n const productId = this.element.id.match(/\\d+$/)?.[0];\n imageContainer.innerHTML = `\n
product-size-chart--image#showModal\"\n data-sale-id=\"${response.sale_id || ''}\"\n data-product-id=\"${productId}\"\n data-image-id=\"${response.id}\">\n
\n
product-size-chart--image#destroy\">\n \u00D7\n
\n
\n `;\n imageContainer.style.display = 'block';\n }\n\n // Hide the dropzone after successful upload (since max files is 1)\n const dropzone = this.element.querySelector('[data-controller=\"dropzone\"]');\n if (dropzone) {\n dropzone.style.display = 'none';\n }\n\n // Trigger gallery refresh after local update\n this.dispatchGalleryRefresh();\n }\n\n dispatchGalleryRefresh() {\n // Dispatch a custom event to trigger gallery refresh\n const refreshEvent = new CustomEvent('productgallery:refresh', {\n bubbles: true,\n detail: {\n source: 'size-chart-upload',\n },\n });\n document.dispatchEvent(refreshEvent);\n }\n}\n\n", "import { Controller } from '../stimulus';\nimport ImageZoomModalController from './image_zoom_modal_controller';\n\nexport default class extends Controller {\n initialize() {\n this.debug = false; // Set via data attribute if needed\n this.saleId = this.element.dataset.saleId;\n this.productId = this.element.dataset.productId;\n this.imageId = this.element.dataset.imageId;\n }\n\n showModal(e) {\n e.preventDefault();\n const url = this.element.dataset.originalUrl;\n if (url) {\n ImageZoomModalController.open(url, 'Size Chart');\n }\n }\n\n destroy(e) {\n e.preventDefault();\n e.stopPropagation(); // Prevent triggering showModal\n\n if (!confirm('Are you sure you want to delete this size chart?')) return;\n\n this.logDebug('Deleting size chart:', this.imageId);\n\n const url = `/teamsites/${this.saleId}/products/${this.productId}/size_charts/${this.imageId}`;\n\n // Safely get CSRF token with fallback\n const csrfToken = document.querySelector('meta[name=\"csrf-token\"]')?.content || '';\n\n fetch(url, {\n method: 'DELETE',\n headers: {\n 'X-CSRF-Token': csrfToken,\n 'Content-Type': 'application/json',\n },\n })\n .then(response => {\n if (response.ok) {\n return response.json();\n }\n throw new Error('Delete failed');\n })\n .then(data => {\n this.logDebug('Size chart deleted successfully:', data);\n\n // Show success message\n if (window.App && typeof window.App.showSuccessFlash === 'function') {\n window.App.showSuccessFlash(data.message || 'Size chart deleted successfully');\n }\n\n // Refresh the size chart container\n this.refreshSizeChart();\n })\n .catch(error => {\n this.logDebug('Error deleting size chart:', error);\n if (window.App && typeof window.App.showErrorFlash === 'function') {\n window.App.showErrorFlash('Failed to delete size chart');\n } else {\n this.logDebug('Failed to delete size chart');\n }\n });\n }\n\n refreshSizeChart() {\n const url = `/teamsites/${this.saleId}/products/${this.productId}/size_chart`;\n\n // Safely get CSRF token with fallback\n const csrfToken = document.querySelector('meta[name=\"csrf-token\"]')?.content || '';\n\n return fetch(url, {\n headers: {\n 'Accept': 'text/html',\n 'X-CSRF-Token': csrfToken,\n },\n })\n .then(response => {\n if (!response.ok) {\n throw new Error('Network response was not ok');\n }\n return response.text();\n })\n .then(html => {\n // Find the size chart container and replace its content\n const container = document.getElementById(`size-chart-container-${this.productId}`);\n if (container) {\n container.outerHTML = html;\n }\n\n // Trigger gallery refresh after size chart is updated\n this.dispatchGalleryRefresh();\n })\n .catch(error => {\n this.logDebug('Error refreshing size chart:', error);\n // Don't re-throw in this case, just log the error\n });\n }\n\n dispatchGalleryRefresh() {\n // Dispatch a custom event to trigger gallery refresh\n const refreshEvent = new CustomEvent('productgallery:refresh', {\n bubbles: true,\n detail: {\n source: 'size-chart-delete',\n },\n });\n document.dispatchEvent(refreshEvent);\n }\n\n /**\n * Logs debug messages when debug mode is enabled\n */\n logDebug(_message, ..._args) {\n if (this.debug) {\n // Debug logging removed for production compliance\n }\n }\n}\n", "/**\n * Product Swatches Controller\n *\n * This is a generic controller for displaying product color swatches.\n * It works in both master product lists and search results.\n *\n * Usage:\n *
\n * ... swatch items ...\n * product-swatches#showAll\">+3 \n * \n *\n * This controller handles:\n * - Showing all available color swatches for a product\n * - Showing a limited preview of color swatches\n * - Fetching and replacing the HTML content via AJAX\n */\nimport { Controller } from '../stimulus';\n\nexport default class extends Controller {\n initialize() {\n this.productId = this.element.dataset.productId;\n }\n\n fetchAndReplaceHtml(url) {\n fetch(url)\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n return response.text();\n })\n .then(html => {\n this.element.innerHTML = html;\n })\n .catch(() => {\n // Error fetching swatches - handled gracefully by keeping current content\n });\n }\n\n showAll(e) {\n if (e && e.preventDefault) {\n e.preventDefault();\n }\n this.fetchAndReplaceHtml(`/product_swatches/${this.productId}/all`);\n }\n\n showPreview(e) {\n if (e && e.preventDefault) {\n e.preventDefault();\n }\n this.fetchAndReplaceHtml(`/product_swatches/${this.productId}/preview`);\n }\n}\n", "// app/javascript/controllers/rack_mini_profiler_controller.js\n// Controller to handle Rack Mini Profiler badge persistence with Turbolinks\n\nimport { Controller } from '../stimulus';\n\nexport default class extends Controller {\n connect() {\n // Listen for Turbolinks events\n document.addEventListener('turbolinks:before-render', this.preserveProfiler.bind(this));\n document.addEventListener('turbolinks:render', this.restoreProfiler.bind(this));\n document.addEventListener('turbolinks:load', this.reinitializeProfiler.bind(this));\n\n // Mark the profiler badge as permanent if it exists\n this.markProfilerAsPermanent();\n }\n\n disconnect() {\n document.removeEventListener('turbolinks:before-render', this.preserveProfiler);\n document.removeEventListener('turbolinks:render', this.restoreProfiler);\n document.removeEventListener('turbolinks:load', this.reinitializeProfiler);\n }\n\n markProfilerAsPermanent() {\n // Find the mini profiler container\n const profilerElement = document.querySelector('.profiler-results');\n\n if (profilerElement) {\n // Add Turbolinks permanent attribute\n profilerElement.setAttribute('data-turbolinks-permanent', 'true');\n profilerElement.setAttribute('id', 'rack-mini-profiler-badge');\n }\n }\n\n preserveProfiler() {\n // Store the current profiler state before Turbolinks replaces the page\n const profilerElement = document.querySelector('.profiler-results');\n\n if (profilerElement) {\n this.profilerHTML = profilerElement.outerHTML;\n this.profilerParent = profilerElement.parentElement;\n }\n }\n\n restoreProfiler() {\n // Restore the profiler after Turbolinks has rendered the new page\n if (this.profilerHTML && this.profilerParent) {\n const existingProfiler = document.querySelector('.profiler-results');\n\n // Remove any duplicate profiler elements\n if (existingProfiler) {\n existingProfiler.remove();\n }\n\n // Restore the preserved profiler\n this.profilerParent.insertAdjacentHTML('beforeend', this.profilerHTML);\n }\n }\n\n reinitializeProfiler() {\n // Reinitialize MiniProfiler JavaScript if needed\n if (window.MiniProfiler) {\n // Ensure the profiler is visible\n const profilerElement = document.querySelector('.profiler-results');\n if (profilerElement) {\n profilerElement.style.display = 'block';\n }\n\n // Re-bind any event handlers if MiniProfiler provides a method\n if (typeof window.MiniProfiler.pageTransition === 'function') {\n window.MiniProfiler.pageTransition();\n }\n }\n\n // Re-mark as permanent for the next navigation\n this.markProfilerAsPermanent();\n }\n}\n", "import Select2BaseController from './select2_base_controller';\n\nexport default class extends Select2BaseController {\n connect() {\n super.connect();\n\n // Set up validation after Select2 initialization\n this.setupValidation();\n }\n\n disconnect() {\n // Clean up event listener to prevent memory leak\n if (this.selectElement && this.boundValidateSelection) {\n this.selectElement.removeEventListener('change', this.boundValidateSelection);\n }\n\n super.disconnect();\n }\n\n getEnhancementOptions() {\n return {\n ...super.getEnhancementOptions(),\n placeholder: 'Select reason for refunding',\n dropdownParent: this.element.closest('.ae-popup-content'),\n };\n }\n\n setupValidation() {\n // Add validation listener with proper cleanup reference\n if (this.selectElement) {\n this.boundValidateSelection = this.validateSelection.bind(this);\n this.selectElement.addEventListener('change', this.boundValidateSelection);\n }\n }\n\n validateSelection() {\n const isValid = this.selectElement && this.selectElement.value !== '';\n\n // Dispatch custom event to parent controller\n const event = new CustomEvent('refund-reason-changed', {\n bubbles: true,\n detail: { isValid },\n });\n\n this.element.dispatchEvent(event);\n }\n\n // Handle both native and Select2 change events\n onSelectChange(event) {\n this.validateSelection();\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n connect() {\n this.saleId = this.element.dataset.saleId;\n this.categoryId = this.element.dataset.categoryId;\n\n // Prevent accordion toggle when clicking on the form\n this.element.addEventListener('click', (event) => {\n event.stopPropagation();\n });\n }\n\n preventAccordionToggle(event) {\n event.stopPropagation();\n }\n\n keydown(event) {\n if (event.key === 'Enter') {\n event.preventDefault();\n this.update(event);\n } else if (event.key === 'Escape') {\n event.preventDefault();\n this.cancel(event);\n }\n }\n\n update(event) {\n event.preventDefault();\n const inputField = document.getElementById(`edit-category-form-input-${this.categoryId}`);\n const newName = inputField.value.trim();\n\n if (!newName) {\n if (window.App && typeof window.App.showErrorFlash === 'function') {\n window.App.showErrorFlash('Category name cannot be empty');\n }\n return;\n }\n\n // The route is defined as '/:sale_id/categories/:category_id' in the 'teamsites' module\n // So the correct URL is /teamsites/:sale_id/categories/:category_id\n const url = `/teamsites/${this.saleId}/categories/${this.categoryId}`;\n const csrfToken = document.querySelector('meta[name=\"csrf-token\"]').getAttribute('content');\n\n fetch(url, {\n method: 'PATCH',\n headers: {\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': csrfToken,\n },\n body: JSON.stringify({ name: newName }),\n })\n .then(response => {\n if (!response.ok) {\n // Don't try to parse as JSON if it's not JSON\n if (response.headers.get('content-type')?.includes('application/json')) {\n return response.json().then(data => {\n throw new Error(data.error || 'Error updating category name');\n });\n } else {\n throw new Error('Error updating category name');\n }\n }\n return response.json();\n })\n .then(_data => {\n // Update category name in DOM\n const categoryHeading = document.getElementById(`category-heading-${this.categoryId}`);\n const editButton = document.getElementById(`edit-category-button-${this.categoryId}`);\n\n // Update text content (first text node of heading)\n if (categoryHeading) {\n for (const node of categoryHeading.childNodes) {\n if (node.nodeType === 3) { // Text node\n node.nodeValue = newName + ' ';\n break;\n }\n }\n }\n\n // Update edit button data attribute\n if (editButton) {\n editButton.dataset.categoryName = newName;\n }\n\n // Hide rename form and show category heading\n this.hideForm();\n\n // Ensure products remain visible by forcing a re-render if needed\n const productsList = document.getElementById(`products-list-${this.categoryId}`);\n if (productsList && productsList.style.display === 'none') {\n productsList.style.display = '';\n }\n })\n .catch(error => {\n if (window.App && typeof window.App.showErrorFlash === 'function') {\n window.App.showErrorFlash(error.message || 'Error updating category name');\n }\n\n // Hide the form and restore the heading in case of error\n this.hideForm();\n });\n }\n\n cancel(event) {\n event.preventDefault();\n this.hideForm();\n }\n\n hideForm() {\n // Hide the rename form\n this.element.classList.add('ae-hidden');\n\n // Show the category heading\n const categoryHeading = document.getElementById(`category-heading-${this.categoryId}`);\n if (categoryHeading) {\n categoryHeading.style.display = '';\n }\n\n // Ensure the accordion content remains visible\n const categoryContainer = document.getElementById(`category-${this.categoryId}`);\n if (categoryContainer) {\n const accordionContent = categoryContainer.querySelector('.ae-accordion-content');\n if (accordionContent) {\n // Preserve the current expanded/collapsed state\n if (!accordionContent.classList.contains('collapsed')) {\n accordionContent.classList.add('expanded');\n accordionContent.classList.remove('collapsed');\n }\n }\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n connect() {\n this.setupFormValidation();\n this.submitting = false;\n }\n\n disconnect() {\n // Cleanup if needed\n this.submitting = false;\n }\n\n submitForm(event) {\n if (event) {\n event.preventDefault();\n }\n\n // Debounce: prevent duplicate submissions\n if (this.submitting) {\n return;\n }\n\n const form = this.element.querySelector('form') || document.getElementById('coupon-form');\n if (!form) {\n return;\n }\n\n // Clear any existing errors\n this.clearErrors();\n\n // Validate form\n if (!this.validateForm(form)) {\n return;\n }\n\n // Set submitting flag\n this.submitting = true;\n\n // Disable submit button\n const submitButton = form.querySelector('button[type=\"submit\"]');\n if (submitButton) {\n submitButton.disabled = true;\n submitButton.classList.add('ae-btn-disabled');\n }\n\n // Submit the form via Rails UJS\n if (window.Rails) {\n window.Rails.fire(form, 'submit');\n } else {\n // Fallback: submit normally\n form.submit();\n }\n\n // Reset submitting flag after 2 seconds (safety measure)\n setTimeout(() => {\n this.submitting = false;\n if (submitButton) {\n submitButton.disabled = false;\n submitButton.classList.remove('ae-btn-disabled');\n }\n }, 2000);\n }\n\n validateForm(form) {\n const errors = [];\n\n // Check required fields\n const nameField = form.querySelector('input[name*=\"[name]\"]');\n if (!nameField || !nameField.value.trim()) {\n errors.push('Coupon name is required');\n }\n\n const codeField = form.querySelector('input[name*=\"[code]\"]');\n if (!codeField || !codeField.value.trim()) {\n errors.push('Coupon code is required');\n } else if (!/^[a-zA-Z0-9]+$/.test(codeField.value)) {\n errors.push('Coupon code must contain only letters and numbers (no spaces)');\n }\n\n const discountField = form.querySelector('input[name*=\"[discount]\"][type=\"number\"]');\n if (!discountField) {\n errors.push('Discount field not found');\n } else {\n const discountValue = discountField.value.trim();\n const discountNumber = parseFloat(discountValue);\n\n if (!discountValue || isNaN(discountNumber) || discountNumber <= 0) {\n errors.push('Discount must be greater than 0');\n } else {\n // Check discount percentage limits\n const discountType = form.querySelector('input[name*=\"[discount_type]\"]')?.value;\n if (discountType === 'percentage' && discountNumber > 100) {\n errors.push('Percentage discount cannot exceed 100%');\n }\n }\n }\n\n // Display errors if any\n if (errors.length > 0) {\n this.displayErrors(errors);\n return false;\n }\n\n return true;\n }\n\n clearErrors() {\n // Errors are now shown via App.showErrorFlash, no need to clear\n }\n\n displayErrors(errors) {\n // Use App.showErrorFlash for error display\n if (window.App && window.App.showErrorFlash) {\n // Show each error separately or join with proper formatting\n if (errors.length === 1) {\n window.App.showErrorFlash(errors[0]);\n } else {\n // For multiple errors, show them as a list\n const errorMessage = errors.join(', ');\n window.App.showErrorFlash(errorMessage);\n }\n } else {\n // Fallback to console error\n // Validation errors handled by displayError method\n }\n }\n\n setupFormValidation() {\n // Add input validation for code field\n const codeField = this.element.querySelector('input[name*=\"[code]\"]');\n if (codeField) {\n codeField.addEventListener('input', (event) => {\n // Remove any spaces and non-alphanumeric characters\n event.target.value = event.target.value.replace(/[^a-zA-Z0-9]/g, '');\n });\n }\n }\n\n}\n", "import { Controller } from '../stimulus';\n\nimport AjaxPopupController from './ajax_popup_controller';\n\nexport default class extends Controller {\n connect() {\n // Check if Stimulus is properly connected\n if (!this.element.hasAttribute('data-stimulus-connected')) {\n // Only setup manual fallback if Stimulus isn't handling it\n this.setupManualFallback();\n this.element.setAttribute('data-stimulus-connected', 'true');\n }\n }\n\n disconnect() {\n // Cleanup\n if (this.clickHandler) {\n this.element.removeEventListener('click', this.clickHandler);\n }\n this.element.removeAttribute('data-stimulus-connected');\n }\n\n openModal(event) {\n event.preventDefault();\n event.stopPropagation(); // Prevent event from bubbling up\n\n // Prevent double execution\n if (this.modalOpening) return;\n this.modalOpening = true;\n\n const url = this.element.href || this.element.getAttribute('href');\n if (!url) {\n // No URL found for coupon modal\n this.modalOpening = false;\n return;\n }\n\n // Use the ajax-popup controller's static open method\n AjaxPopupController.open(url);\n\n // Set up close callback\n this.setupModalCloseCallback();\n\n // Reset flag after a short delay\n setTimeout(() => {\n this.modalOpening = false;\n }, 500);\n }\n\n setupModalCloseCallback() {\n // Listen for modal close to potentially refresh the table\n const closeHandler = () => {\n // The create.js.erb will handle refreshing the page if needed\n };\n\n document.addEventListener('ajax-popup:afterClose', closeHandler, { once: true });\n }\n\n setupManualFallback() {\n // Store reference to bound handler for cleanup\n this.clickHandler = this.openModal.bind(this);\n // Manual event binding for modal contexts where Stimulus may not connect\n this.element.addEventListener('click', this.clickHandler);\n }\n}\n", "import { Controller } from '../stimulus';\n\nimport AjaxPopupController from './ajax_popup_controller';\n\nexport default class extends Controller {\n connect() {\n this.setupManualFallbacks();\n }\n\n disconnect() {\n // Cleanup if needed\n }\n\n edit(event) {\n event.preventDefault();\n\n const url = event.currentTarget.href || event.currentTarget.getAttribute('href');\n if (!url) {\n // No URL found for edit coupon\n return;\n }\n\n // Open modal for editing\n AjaxPopupController.open(url);\n }\n\n showUsage(event) {\n event.preventDefault();\n\n const url = event.currentTarget.href || event.currentTarget.getAttribute('href');\n if (!url) {\n // No URL found for coupon usage\n return;\n }\n\n // Open modal to show usage details\n AjaxPopupController.open(url);\n }\n\n delete(event) {\n event.preventDefault();\n\n if (!confirm('Are you sure you want to delete this coupon?')) {\n return;\n }\n\n const url = this.element.dataset.url;\n if (!url) {\n // No URL found for delete action\n return;\n }\n\n // Get CSRF token\n const csrfToken = document.querySelector('meta[name=\"csrf-token\"]')?.content;\n if (!csrfToken) {\n // CSRF token not found\n return;\n }\n\n // Send delete request\n fetch(url, {\n method: 'DELETE',\n headers: {\n 'X-CSRF-Token': csrfToken,\n 'X-Requested-With': 'XMLHttpRequest',\n 'Accept': 'application/json',\n },\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n return response.json();\n })\n .then(data => {\n // Handle successful deletion\n this.handleSuccessfulDeletion(data);\n })\n .catch(() => {\n // Error deleting coupon\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Error deleting coupon');\n }\n });\n }\n\n handleSuccessfulDeletion(_data) {\n // Get the coupon ID from the row\n const couponId = this.element.id.replace('coupon-row-', '');\n\n // Remove the row\n const rowElement = document.querySelector(`#coupon-row-${couponId}`);\n if (rowElement) {\n rowElement.remove();\n }\n\n // Check if table is now empty\n const tbody = document.querySelector('#coupons-table tbody');\n if (tbody && tbody.children.length === 0) {\n // Reload to show empty state\n if (window.Turbolinks) {\n const saleId = window.location.pathname.match(/\\/teamsites\\/(\\d+)/)?.[1];\n if (saleId) {\n window.Turbolinks.visit(`/teamsites/${saleId}/settings?st=coupons`);\n }\n } else {\n // Fallback to window.location if Turbolinks not available\n window.location.reload();\n }\n }\n\n // Show success notification\n if (window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash('Coupon deleted successfully');\n }\n }\n\n setupManualFallbacks() {\n // Manual event bindings for modal contexts\n // Note: These are fallbacks for when Stimulus data-action bindings don't work\n // Only bind if the element doesn't already have a data-action attribute\n const editButton = this.element.querySelector('[data-action*=\"edit\"]');\n if (editButton && !editButton.hasAttribute('data-action')) {\n editButton.addEventListener('click', this.edit.bind(this));\n }\n\n const deleteButton = this.element.querySelector('[data-action*=\"delete\"]');\n if (deleteButton && !deleteButton.hasAttribute('data-action')) {\n deleteButton.addEventListener('click', this.delete.bind(this));\n }\n\n const usageLink = this.element.querySelector('[data-action*=\"showUsage\"]');\n if (usageLink && !usageLink.hasAttribute('data-action')) {\n usageLink.addEventListener('click', this.showUsage.bind(this));\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n keydown(e) {\n if (e.key === 'Enter') {\n e.preventDefault();\n }\n\n const privacy = document.getElementById('sale-private');\n\n if (privacy) {\n privacy.classList.remove('ae-input-error');\n\n const errorMsg = this.element.querySelector('.ae-error-msg');\n if (errorMsg) {\n errorMsg.innerHTML = '';\n }\n }\n }\n}\n", "import { Controller } from '../stimulus';\nimport { DatePickerMixin } from '../mixins/date_picker_mixin';\n\nclass CloseDateController extends Controller {\n initialize() {\n document.addEventListener('turbolinks:before-cache', function() {\n const formControl = document.querySelector('#sale-close-date-field > .form-control.input');\n if (formControl) {\n formControl.remove();\n }\n });\n\n const closeDatePicker = document.getElementById('sale-close-date');\n if (!closeDatePicker) return;\n\n // Parse current value using the mixin\n const currentValue = this.parseDate(closeDatePicker.value);\n\n // Get open date value to enforce close date > open date constraint\n const openDatePicker = document.getElementById('sale-open-date');\n const openDateValue = openDatePicker && openDatePicker.value\n ? this.parseDate(openDatePicker.value)\n : null;\n\n // Calculate base minimum date (today or day after open date)\n const today = this.getTodayStart();\n let baseMinDate = today;\n\n if (openDateValue && openDateValue.isValid()) {\n const openDatePlusOne = moment(openDateValue).add(1, 'days').toDate();\n baseMinDate = openDatePlusOne > today ? openDatePlusOne : today;\n }\n\n const options = {\n altFormat: 'm/d/y h:i K',\n altInput: true,\n dateFormat: 'Y-m-d h:i K',\n allowInput: false,\n enableTime: true,\n disable: [],\n minDate: this.calculateMinDate(currentValue, baseMinDate),\n defaultHour: '23',\n defaultMinute: '59',\n noCalendar: false,\n onChange: this.createOnChangeCallback(currentValue, true),\n onDayCreate: this.createOnDayCreateCallback(\n today,\n openDateValue,\n 'Close date must be after open date',\n ),\n };\n\n // Only set defaultDate if there's already a valid value\n // This preserves existing dates, including historical ones\n if (currentValue && currentValue.isValid()) {\n options.defaultDate = currentValue.toDate();\n\n // Add visual indication for dates that violate current constraints\n if (this.isBefore(currentValue.toDate(), baseMinDate)) {\n closeDatePicker.setAttribute('data-has-historical-date', 'true');\n closeDatePicker.title = 'This date may not meet current constraints but is preserved for reference. New selections follow current rules.';\n }\n }\n\n // Set up dynamic constraint updates when open date changes\n if (openDatePicker) {\n this.setupDynamicConstraints(openDatePicker, closeDatePicker, (newOpenDateValue) => {\n const newOpenDate = this.parseDate(newOpenDateValue);\n if (newOpenDate && newOpenDate.isValid()) {\n const newMinDate = moment(newOpenDate).add(1, 'days').toDate();\n return newMinDate > today ? newMinDate : today;\n }\n return today;\n });\n }\n\n // Initialize flatpickr with error handling\n this.initializeFlatpickr(closeDatePicker, options);\n }\n}\n\n// Mix in the date picker functionality\nObject.assign(CloseDateController.prototype, DatePickerMixin);\n\nexport default CloseDateController;\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['form', 'nameField', 'organizationSelect', 'activitySelect'];\n\n connect() {\n // Set a random request token in the hidden field if it exists\n // This is used for duplicate submission prevention\n try {\n const requestTokenField = this.element.querySelector('[data-request-token]');\n if (requestTokenField) {\n const timestamp = Date.now().toString();\n const random = Math.random().toString(36).substring(2, 15);\n this._requestToken = `${timestamp}-${random}`;\n requestTokenField.value = this._requestToken;\n }\n } catch (/* eslint-disable-line no-unused-vars */ e) {\n // If request token field is not present, continue without it\n // Silent failure - duplicate submission prevention disabled\n }\n }\n\n save(event) {\n // Validate the form before submission\n if (!this.validateForm()) {\n event.preventDefault();\n return;\n }\n\n // If validation passes, let the form submit normally\n // Pattern 11 (button-debounce) handles double-click protection automatically\n }\n\n validateForm() {\n let isValid = true;\n\n // Check name field\n if (this.hasNameFieldTarget) {\n const nameValue = this.nameFieldTarget.value;\n if (!nameValue || nameValue.trim() === '') {\n this.addErrorBanner('Name is required');\n isValid = false;\n }\n }\n\n // Check organization field\n if (this.hasOrganizationSelectTarget) {\n const orgValue = this.organizationSelectTarget.value;\n if (!orgValue || orgValue === '0' || orgValue.trim() === '') {\n if (isValid) { // Only show first error\n this.addErrorBanner('Organization is required');\n }\n isValid = false;\n }\n }\n\n // Check activity field\n if (this.hasActivitySelectTarget) {\n const activityValue = this.activitySelectTarget.value;\n if (!activityValue || activityValue === '0' || activityValue.trim() === '') {\n if (isValid) { // Only show first error\n this.addErrorBanner('Activity is required');\n }\n isValid = false;\n }\n }\n\n return isValid;\n }\n\n // Helper method to add an error banner at the bottom of the page\n addErrorBanner(message) {\n // Remove any existing error banners\n const existingBanners = document.querySelectorAll('.flash-error');\n existingBanners.forEach(banner => banner.remove());\n\n // Create the error banner\n const banner = document.createElement('div');\n banner.classList.add('flash-message', 'flash-error');\n // Create icon element separately to avoid XSS\n const icon = document.createElement('i');\n icon.className = 'fa fa-exclamation-circle';\n banner.appendChild(icon);\n\n // Add message text safely\n const messageText = document.createTextNode(' ' + message);\n banner.appendChild(messageText);\n banner.style.position = 'fixed';\n banner.style.bottom = '0';\n banner.style.left = '0';\n banner.style.right = '0';\n banner.style.padding = '15px';\n banner.style.backgroundColor = '#f44336';\n banner.style.color = 'white';\n banner.style.textAlign = 'center';\n banner.style.zIndex = '9999';\n\n // Add close button\n const closeButton = document.createElement('span');\n closeButton.textContent = '\u00D7';\n closeButton.style.position = 'absolute';\n closeButton.style.right = '10px';\n closeButton.style.top = '10px';\n closeButton.style.cursor = 'pointer';\n closeButton.style.fontSize = '20px';\n\n closeButton.addEventListener('click', () => {\n banner.remove();\n });\n\n banner.appendChild(closeButton);\n\n // Add to the document\n document.body.appendChild(banner);\n }\n\n\n // Helper method to enable form\n // Note: Used by create.js.erb via Stimulus internals to re-enable form after server errors\n enableForm(form) {\n // Re-enable all form inputs\n if (form) {\n const inputs = form.querySelectorAll('input, select, textarea, button');\n inputs.forEach(input => {\n input.disabled = false;\n });\n }\n\n // Pattern 11 (button-debounce) handles button state restoration automatically\n }\n\n // Property to track submission state\n // Note: Used by create.js.erb to manage form submission state\n get isSubmitting() {\n return this._isSubmitting || false;\n }\n\n set isSubmitting(value) {\n this._isSubmitting = value;\n }\n\n // Property to track request token\n // Note: Used by create.js.erb for session storage keys to prevent duplicate submissions\n get requestToken() {\n // Return cached value if available\n if (this._requestToken) {\n return this._requestToken;\n }\n\n // Otherwise try to get from DOM\n try {\n const requestTokenField = this.element.querySelector('[data-request-token]');\n return requestTokenField ? requestTokenField.value : null;\n } catch (/* eslint-disable-line no-unused-vars */ e) {\n return null;\n }\n }\n}\n", "import { Controller } from '../stimulus';\nimport { DatePickerMixin } from '../mixins/date_picker_mixin';\n\nclass EstimatedShipDateController extends Controller {\n initialize() {\n document.addEventListener('turbolinks:before-cache', function() {\n const formControl = document.querySelector('#sale-estimated-ship-date-field > .form-control.input');\n if (formControl) {\n formControl.remove();\n }\n });\n\n const estimatedShipDatePicker = document.getElementById('sale-estimated-ship-date');\n if (!estimatedShipDatePicker) return;\n\n // Parse current value using the mixin\n const currentValue = this.parseDate(estimatedShipDatePicker.value);\n\n // Get close date value to enforce ship date >= close date constraint\n const closeDatePicker = document.getElementById('sale-close-date');\n const closeDateValue = closeDatePicker && closeDatePicker.value\n ? this.parseDate(closeDatePicker.value)\n : null;\n\n // Calculate base minimum date (today or day after close date)\n const today = this.getTodayStart();\n let baseMinDate = today;\n\n if (closeDateValue && closeDateValue.isValid()) {\n const closeDatePlusOne = moment(closeDateValue).add(1, 'days').toDate();\n baseMinDate = closeDatePlusOne > today ? closeDatePlusOne : today;\n }\n\n const options = {\n altFormat: 'm/d/y h:i K',\n altInput: true,\n dateFormat: 'Y-m-d h:i K',\n allowInput: false,\n enableTime: true,\n disable: [],\n minDate: this.calculateMinDate(currentValue, baseMinDate),\n defaultHour: '16',\n defaultMinute: '0',\n noCalendar: false,\n onChange: this.createOnChangeCallback(currentValue, true),\n onDayCreate: this.createOnDayCreateCallback(\n today,\n closeDateValue,\n 'Ship date must be after close date',\n ),\n };\n\n // Only set defaultDate if there's already a valid value\n // This preserves existing dates, including historical ones\n if (currentValue && currentValue.isValid()) {\n options.defaultDate = currentValue.toDate();\n\n // Add visual indication for dates that violate current constraints\n if (this.isBefore(currentValue.toDate(), baseMinDate)) {\n estimatedShipDatePicker.setAttribute('data-has-historical-date', 'true');\n estimatedShipDatePicker.title = 'This date may not meet current constraints but is preserved for reference. New selections follow current rules.';\n }\n }\n\n // Set up dynamic constraint updates when close date changes\n if (closeDatePicker) {\n this.setupDynamicConstraints(closeDatePicker, estimatedShipDatePicker, (newCloseDateValue) => {\n const newCloseDate = this.parseDate(newCloseDateValue);\n if (newCloseDate && newCloseDate.isValid()) {\n const newMinDate = moment(newCloseDate).add(1, 'days').toDate();\n return newMinDate > today ? newMinDate : today;\n }\n return today;\n });\n }\n\n // Initialize flatpickr with error handling\n this.initializeFlatpickr(estimatedShipDatePicker, options);\n }\n}\n\n// Mix in the date picker functionality\nObject.assign(EstimatedShipDateController.prototype, DatePickerMixin);\n\nexport default EstimatedShipDateController;\n", "import { Controller } from '../stimulus';\nimport { DatePickerMixin } from '../mixins/date_picker_mixin';\n\nclass OpenDateController extends Controller {\n initialize() {\n document.addEventListener('turbolinks:before-cache', function() {\n const formControl = document.querySelector('#sale-open-date-field > .form-control.input');\n if (formControl) {\n formControl.remove();\n }\n });\n\n const openDatePicker = document.getElementById('sale-open-date');\n if (!openDatePicker) return;\n\n // Parse current value using the mixin\n const currentValue = this.parseDate(openDatePicker.value);\n\n // Get today's date for comparison\n const today = this.getTodayStart();\n\n const options = {\n altFormat: 'm/d/y h:i K',\n altInput: true,\n dateFormat: 'Y-m-d h:i K',\n allowInput: false,\n enableTime: true,\n disable: [],\n minDate: this.calculateMinDate(currentValue, today),\n defaultHour: '7',\n defaultMinute: '0',\n noCalendar: false,\n onChange: this.createOnChangeCallback(currentValue, true),\n onDayCreate: this.createOnDayCreateCallback(today),\n };\n\n // Only set defaultDate if there's already a valid value\n // This preserves existing dates, including historical ones\n if (currentValue && currentValue.isValid()) {\n options.defaultDate = currentValue.toDate();\n\n // Add visual indication for historical dates to clarify UX\n if (this.isBefore(currentValue.toDate(), today)) {\n openDatePicker.setAttribute('data-has-historical-date', 'true');\n openDatePicker.title = 'This date is in the past but preserved for reference. New selections are limited to future dates.';\n }\n }\n\n // Initialize flatpickr with error handling\n this.initializeFlatpickr(openDatePicker, options);\n }\n}\n\n// Mix in the date picker functionality\nObject.assign(OpenDateController.prototype, DatePickerMixin);\n\nexport default OpenDateController;\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n connect() {\n // Initial setup when controller connects\n this.updateAccessCodeVisibility();\n }\n\n click() {\n this.updateAccessCodeVisibility();\n }\n\n updateAccessCodeVisibility() {\n const privateCheck = document.getElementById('sale-private');\n const checked = privateCheck.checked;\n const accessCodeField = document.getElementById('sale-access-code');\n\n // Privacy toggle state changed\n\n if (checked) {\n // Show the access code field when private is checked\n accessCodeField.classList.remove('ae-hidden');\n\n // Restore previous value if toggling back to private\n if (accessCodeField.value === '' && accessCodeField._previousValue) {\n accessCodeField.value = accessCodeField._previousValue;\n accessCodeField._previousValue = undefined;\n // Restored previous access code\n }\n\n // Force the field to be visible\n setTimeout(() => {\n if (accessCodeField.classList.contains('ae-hidden')) {\n accessCodeField.classList.remove('ae-hidden');\n }\n }, 100);\n } else {\n // Hide the access code field when private is unchecked\n // Only clear the value when the user explicitly changes from private to public\n accessCodeField.classList.add('ae-hidden');\n\n // Store the current value in case user wants to toggle back\n if (accessCodeField.value) {\n accessCodeField._previousValue = accessCodeField.value;\n }\n\n accessCodeField.value = '';\n }\n }\n}\n", "import Select2CreateMixin from '../mixins/select2_create_mixin';\nimport CSRFTokenMixin from '../mixins/csrf_token_mixin';\n\nimport Select2BaseController from './select2_base_controller';\n\nexport default class extends Select2BaseController {\n // Constants (match category dropdown pattern)\n static SELECT2_INIT_DELAY_MS = 100;\n static LOADING_TIMEOUT_MS = 5000;\n static MAX_RETRY_ATTEMPTS = 2;\n\n initialize() {\n super.initialize();\n this.loadingTimeout = null;\n this.scheduleTimeout = null;\n this.loadResourceAbortController = null;\n this.retryCount = 0;\n\n // Atomic state management\n this._state = {\n isConnected: false,\n isDestroyed: false,\n operationInProgress: false,\n errorStateActive: false,\n retryInProgress: false,\n };\n\n // Track all abort controllers for proper cleanup\n this._abortControllers = new Set();\n\n // Track all timeouts for comprehensive cleanup\n this._activeTimeouts = new Set();\n }\n\n connect() {\n // Apply mixins BEFORE super.connect() so methods are available\n Object.assign(this, CSRFTokenMixin);\n Object.assign(this, Select2CreateMixin);\n\n // Override mixin's _assignExistingResource with no-op\n // (Object.assign shadows prototype methods, so we must reassign)\n this._assignExistingResource = async () => {\n // No-op: Form submission handles existing resource assignment\n };\n\n // Restore prototype _createNewResource that uses selectElement instead of element\n this._createNewResource = this.constructor.prototype._createNewResource.bind(this);\n\n // Get data attributes\n this.saleId = this.element.dataset.saleId;\n this.resourceType = this.element.dataset.resourceType;\n this.isAjaxRequest = this.element.dataset.ajaxRequest === 'true';\n\n // Store references for compatibility with existing code\n this.form = `${this.resourceType}-form`;\n this.resourceSelector = `#${this.resourceType}-select`;\n\n // Find the select element within this container\n this.selectElement = this.element.querySelector(this.resourceSelector);\n if (!this.selectElement) {\n return;\n }\n\n // Update state\n this._updateState({\n isConnected: true,\n isDestroyed: false,\n operationInProgress: false,\n errorStateActive: false,\n retryInProgress: false,\n });\n\n // Initialize Select2 via base controller\n this.initializeSelect();\n\n // Initialize Select2CreateMixin with configuration\n // Use explicit lookup for correct pluralization of all resource types\n const apiPaths = {\n 'organization': '/organizations',\n 'activity': '/activities',\n 'sales_rep': '/sales_reps',\n 'coach': '/coaches',\n };\n const createEndpoint = apiPaths[this.resourceType] || `/${this.resourceType}s`;\n\n this.initializeSelect2Create({\n resourceName: this.resourceType,\n resourceIdParam: `${this.resourceType}_id`,\n contextParams: this.saleId ? { sale_id: this.saleId } : {},\n createEndpoint: createEndpoint,\n assignEndpoint: () => null, // Not used - create already assigns\n onAfterCreate: null,\n successMessage: `${this.capitalizeResourceType(this.resourceType)} created successfully`,\n });\n\n // Set up search term tracking for tag creation detection\n this.setupSelect2CreateEvents();\n\n // Set up Turbolinks cleanup\n this.setupTurbolinksHandlers();\n\n // For AJAX requests, load current resource value after initialization\n if (this.isAjaxRequest && this._isValidState()) {\n this.scheduleLoadCurrentResource();\n }\n }\n\n disconnect() {\n // Update state\n this._updateState({\n isConnected: false,\n isDestroyed: true,\n operationInProgress: false,\n errorStateActive: false,\n retryInProgress: false,\n });\n\n // Cancel all pending operations when disconnecting\n this.cancelPendingOperations();\n\n // Clean up Select2 and event handlers via base controller\n this.cleanup();\n this.removeTurbolinksHandlers();\n }\n\n cancelPendingOperations() {\n // Clear all tracked timeouts\n for (const timeoutId of this._activeTimeouts) {\n clearTimeout(timeoutId);\n }\n this._activeTimeouts.clear();\n\n // Clear individual timeout references\n if (this.loadingTimeout) {\n clearTimeout(this.loadingTimeout);\n this.loadingTimeout = null;\n }\n if (this.scheduleTimeout) {\n clearTimeout(this.scheduleTimeout);\n this.scheduleTimeout = null;\n }\n\n // Abort all pending requests\n for (const controller of this._abortControllers) {\n try {\n if (controller && !controller.signal.aborted) {\n controller.abort();\n }\n } catch {\n // Ignore abort errors\n }\n }\n this._abortControllers.clear();\n this.loadResourceAbortController = null;\n }\n\n /**\n * Get Select2 configuration options\n * Override from Select2BaseController\n */\n getEnhancementOptions() {\n // Build AJAX URL based on resource type\n const apiPaths = {\n 'organization': '/organizations',\n 'activity': '/activities',\n 'sales_rep': '/sales_reps',\n 'coach': '/coaches',\n };\n const basePath = apiPaths[this.resourceType] || `/${this.resourceType}s`;\n\n const resourceType = this.resourceType;\n const displayName = this.capitalizeResourceType(this.resourceType);\n\n const options = {\n tags: true, // Enable type-to-create\n createTag: this.createTagHandler,\n insertTag: this.insertTagHandler,\n width: 150,\n placeholder: `Select ${displayName}`,\n allowClear: true,\n templateSelection: (data) => {\n if (data.id === '') {\n return `Select ${displayName}`;\n }\n return data.text;\n },\n };\n\n // Always enable AJAX search so Select2 works on both new and edit forms\n options.ajax = {\n url: `${basePath}${this.saleId ? '?sale_id=' + this.saleId : ''}`,\n dataType: 'json',\n delay: 250,\n data: function(params) {\n return {\n q: params.term || '',\n };\n },\n processResults: (data) => {\n // Handle wrapped response format { resource_types: [...] }\n const pluralKey = resourceType === 'activity' ? 'activities' : `${resourceType}s`;\n const items = data[pluralKey] || [];\n return {\n results: (Array.isArray(items) ? items : []).map(item => ({\n id: item.id,\n text: item.name,\n })),\n };\n },\n cache: true,\n };\n options.minimumInputLength = 0;\n\n return options;\n }\n\n /**\n * Schedule loading of current resource value for AJAX requests\n */\n scheduleLoadCurrentResource() {\n if (!this._canStartOperation()) {\n return;\n }\n\n // Clear any existing timeouts\n if (this.loadingTimeout) {\n clearTimeout(this.loadingTimeout);\n this._activeTimeouts.delete(this.loadingTimeout);\n }\n if (this.scheduleTimeout) {\n clearTimeout(this.scheduleTimeout);\n this._activeTimeouts.delete(this.scheduleTimeout);\n }\n\n // Set a timeout to handle cases where loading gets stuck\n this.loadingTimeout = setTimeout(() => {\n this._activeTimeouts.delete(this.loadingTimeout);\n if (this._isValidState()) {\n this.handleLoadingTimeout();\n }\n }, this.constructor.LOADING_TIMEOUT_MS);\n this._activeTimeouts.add(this.loadingTimeout);\n\n // Schedule the actual loading\n this.scheduleTimeout = setTimeout(() => {\n this._activeTimeouts.delete(this.scheduleTimeout);\n if (this._isValidState()) {\n this.loadCurrentResource();\n }\n }, this.constructor.SELECT2_INIT_DELAY_MS);\n this._activeTimeouts.add(this.scheduleTimeout);\n }\n\n handleLoadingTimeout() {\n if (!this._isValidState()) {\n return;\n }\n\n this._safelyManipulateDOM(() => {\n const firstOption = this.selectElement.querySelector('option');\n if (firstOption && firstOption.textContent === 'Loading...') {\n // Clear options and add empty placeholder\n while (this.selectElement.firstChild) {\n this.selectElement.removeChild(this.selectElement.firstChild);\n }\n const emptyOption = new Option('', '', true, true);\n this.selectElement.appendChild(emptyOption);\n\n this.updatePlaceholder(`Select ${this.capitalizeResourceType(this.resourceType)}`);\n }\n });\n\n this.loadingTimeout = null;\n }\n\n /**\n * Load current resource for AJAX requests\n * Fetches the current sale's resource and sets it as selected\n */\n async loadCurrentResource() {\n if (!this._canStartOperation()) {\n return;\n }\n\n this._updateState({ operationInProgress: true });\n\n try {\n // Cancel any existing request\n if (this.loadResourceAbortController) {\n this._abortControllers.delete(this.loadResourceAbortController);\n this.loadResourceAbortController.abort();\n this.loadResourceAbortController = null;\n }\n\n // Create new abort controller\n this.loadResourceAbortController = new AbortController();\n this._abortControllers.add(this.loadResourceAbortController);\n\n // Build URL for current endpoint\n const apiPaths = {\n 'organization': '/organizations/current',\n 'activity': '/activities/current',\n 'sales_rep': '/sales_reps/current',\n 'coach': '/coaches/current',\n };\n const currentPath = apiPaths[this.resourceType] || `/${this.resourceType}s/current`;\n const url = `${currentPath}?sale_id=${this.saleId}`;\n\n const response = await fetch(url, {\n headers: {\n 'Accept': 'application/json',\n 'X-Requested-With': 'XMLHttpRequest',\n },\n signal: this.loadResourceAbortController.signal,\n });\n\n // Clear loading timeout\n if (this.loadingTimeout) {\n clearTimeout(this.loadingTimeout);\n this._activeTimeouts.delete(this.loadingTimeout);\n this.loadingTimeout = null;\n }\n\n if (response.ok) {\n const data = await response.json();\n\n if (!this._isValidState()) {\n return;\n }\n\n // Get resource data from response (keyed by resource type)\n const resourceData = data[this.resourceType];\n\n if (resourceData) {\n this._safelyManipulateDOM(() => {\n // Clear existing options\n while (this.selectElement.firstChild) {\n this.selectElement.removeChild(this.selectElement.firstChild);\n }\n\n // Add the current resource as selected option\n const option = new Option(resourceData.name, resourceData.id, true, true);\n this.selectElement.appendChild(option);\n\n // Trigger Select2 update\n if (this.isEnhanced() && this._isValidState()) {\n this._safelyManipulateSelect2(() => {\n this.getEnhancer()(this.selectElement).trigger('change');\n });\n }\n });\n\n // Track initial value for skip-redundant-assign logic\n this.setInitialValueId(resourceData.id);\n } else {\n // No resource assigned, show placeholder\n this._safelyManipulateDOM(() => {\n while (this.selectElement.firstChild) {\n this.selectElement.removeChild(this.selectElement.firstChild);\n }\n const emptyOption = new Option('', '', true, true);\n this.selectElement.appendChild(emptyOption);\n\n this.updatePlaceholder(`Select ${this.capitalizeResourceType(this.resourceType)}`);\n });\n }\n\n this.retryCount = 0;\n } else {\n await this.handleLoadError(new Error(`HTTP ${response.status}`));\n }\n } catch (error) {\n if (error.name === 'AbortError') {\n return;\n }\n\n if (this._isValidState()) {\n await this.handleLoadError(error);\n }\n } finally {\n if (this.loadResourceAbortController) {\n this._abortControllers.delete(this.loadResourceAbortController);\n this.loadResourceAbortController = null;\n }\n\n this._updateState({ operationInProgress: false });\n }\n }\n\n async handleLoadError(_error) {\n if (!this._isValidState() || this._state.retryInProgress) {\n return;\n }\n\n if (this.retryCount < this.constructor.MAX_RETRY_ATTEMPTS) {\n this.retryCount++;\n this._updateState({ retryInProgress: true, operationInProgress: false });\n\n await new Promise(resolve => setTimeout(resolve, 500 * this.retryCount));\n\n if (this._canStartOperation()) {\n this._updateState({ retryInProgress: false });\n return this.loadCurrentResource();\n }\n this._updateState({ retryInProgress: false });\n return;\n }\n\n // Max retries reached\n if (this.loadingTimeout) {\n clearTimeout(this.loadingTimeout);\n this._activeTimeouts.delete(this.loadingTimeout);\n this.loadingTimeout = null;\n }\n\n this.updatePlaceholder(`Select ${this.capitalizeResourceType(this.resourceType)}`);\n }\n\n updatePlaceholder(text) {\n if (!this._isValidState()) {\n return;\n }\n\n try {\n this._safelyManipulateDOM(() => {\n const firstOption = this.selectElement.querySelector('option');\n if (firstOption) {\n firstOption.textContent = text;\n firstOption.value = '';\n\n if (this.isEnhanced() && this._isValidState()) {\n this._safelyManipulateSelect2(() => {\n this.getEnhancer()(this.selectElement).val('').trigger('change');\n });\n }\n }\n });\n } catch {\n // Ignore placeholder update errors\n }\n }\n\n /**\n * Handle select change events\n * Override from Select2BaseController\n */\n async onSelectChange(event) {\n await this.handleSelect2Change(event);\n }\n\n /**\n * Override _createNewResource to use existing create endpoint pattern\n * The backend already handles both create-only and create-and-assign\n */\n async _createNewResource(resourceName) {\n const csrfToken = this.getCSRFToken();\n if (!csrfToken) {\n return;\n }\n\n try {\n // Build URL - use explicit lookup for correct pluralization\n const apiPaths = {\n 'organization': '/organizations',\n 'activity': '/activities',\n 'sales_rep': '/sales_reps',\n 'coach': '/coaches',\n };\n const resourcePath = apiPaths[this.resourceType] || `/${this.resourceType}s`;\n\n // Build params - only include sale_id if present\n const params = { name: resourceName };\n if (this.saleId) {\n params.sale_id = this.saleId;\n }\n\n const response = await fetch(resourcePath, {\n method: 'POST',\n headers: {\n 'X-CSRF-Token': csrfToken,\n 'Accept': 'application/json',\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify(params),\n });\n\n if (!response.ok) {\n const errorData = await response.json();\n throw new Error(errorData.errors?.join(', ') || 'Network response was not ok');\n }\n\n const data = await response.json();\n\n // Update dropdown with real database ID\n if (this.selectElement && this._isValidState() && this.isEnhanced()) {\n this._safelyManipulateDOM(() => {\n // Remove temporary tag option (text value)\n const tempOption = this.selectElement.querySelector(`option[value=\"${resourceName}\"]`);\n if (tempOption) {\n this.selectElement.removeChild(tempOption);\n }\n\n // Add new option with database ID\n const newOption = new Option(data.name, data.id, true, true);\n this.selectElement.appendChild(newOption);\n\n // Trigger Select2 update - must set value explicitly for Select2 to update its internal state\n this._safelyManipulateSelect2(() => {\n this.getEnhancer()(this.selectElement).val(data.id).trigger('change');\n });\n });\n }\n\n // Show success message\n if (window.App && typeof window.App.showSuccessFlash === 'function') {\n window.App.showSuccessFlash(`${this.capitalizeResourceType(this.resourceType)} created successfully`);\n }\n } catch (error) {\n if (window.App && typeof window.App.showErrorFlash === 'function') {\n window.App.showErrorFlash(error.message || `Failed to create ${this.resourceType}`);\n }\n }\n }\n\n // State management helpers\n _updateState(updates) {\n Object.assign(this._state, updates);\n }\n\n _canStartOperation() {\n return this._isValidState() &&\n !this._state.operationInProgress &&\n !this._state.errorStateActive;\n }\n\n /**\n * Check if controller is in valid state for DOM manipulation\n * Required by Select2CreateMixin\n */\n _isValidState() {\n return this._state.isConnected &&\n !this._state.isDestroyed &&\n this.element &&\n this.element.isConnected &&\n this.selectElement;\n }\n\n /**\n * Safely manipulate DOM with connection check\n * Required by Select2CreateMixin\n */\n _safelyManipulateDOM(callback) {\n if (!this._isValidState()) return;\n try {\n callback();\n } catch {\n // Silently handle DOM manipulation errors\n }\n }\n\n /**\n * Safely manipulate Select2 with availability check\n * Required by Select2CreateMixin\n */\n _safelyManipulateSelect2(callback) {\n if (!this.isSelect2Available() || !this.isEnhanced()) return;\n try {\n callback();\n } catch {\n // Silently handle Select2 manipulation errors\n }\n }\n\n capitalizeResourceType(string) {\n return string\n .split('_')\n .map((word) => this.capitalize(word))\n .join(' ');\n }\n\n capitalize(string) {\n return string.charAt(0).toUpperCase() + string.slice(1);\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n keydown(event) {\n const popper = this.findTippyPopper(event.target);\n if (!popper) return;\n\n const formField = popper.querySelector('.ae-form-field');\n if (formField) {\n formField.classList.remove('ae-input-error');\n }\n\n const errorMsg = popper.querySelector('.ae-error-msg');\n if (errorMsg) {\n errorMsg.innerHTML = '';\n }\n\n if (event.keyCode == 13 || event.key === 'Enter') {\n this.add(event);\n }\n }\n\n add(event) {\n event.preventDefault();\n\n const textField = this.element.querySelector('.ae-text-field');\n if (!textField) return;\n\n const name = textField.value;\n const popper = this.findTippyPopper(event.target);\n if (!popper) return;\n\n const select2Id = this.element.dataset['select2'];\n const selectField = document.getElementById(select2Id);\n\n const addButton = popper.querySelector('.tippy-add-button');\n if (!addButton) return;\n\n const path = addButton.getAttribute('data-path');\n\n if (name === '') {\n this.errorMessage(popper, false, 'Cannot be blank.');\n } else {\n fetch(path, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': document.querySelector('meta[name=\"csrf-token\"]')?.getAttribute('content'),\n },\n body: JSON.stringify({ name: name }),\n })\n .then(response => {\n if (!response.ok) {\n return response.json().then(error => { throw error; });\n }\n return response.json();\n })\n .then(data => {\n if (selectField) {\n const option = new Option(data.name, data.id);\n selectField.add(option);\n selectField.value = data.id;\n\n // Dispatch a change event to mimic trigger('change')\n const event = new Event('change', { bubbles: true });\n selectField.dispatchEvent(event);\n }\n\n this.closeTooltip(event);\n })\n .catch(error => {\n const message = error.message || 'An error occurred';\n if (typeof App !== 'undefined' && App.showErrorFlash) {\n if (window.App && typeof window.App.showErrorFlash === 'function') {\n window.App.showErrorFlash(message);\n } else {\n // Error occurred\n }\n } else {\n // Error occurred\n }\n });\n }\n }\n\n cancel(event) {\n event.preventDefault();\n this.closeTooltip(event);\n }\n\n closeTooltip(event) {\n const popper = this.findTippyPopper(event.target);\n if (!popper) return;\n\n const textField = this.element.querySelector('.ae-text-field');\n if (textField) {\n textField.value = '';\n }\n\n const formField = popper.querySelector('.ae-form-field');\n if (formField) {\n formField.classList.remove('ae-input-error');\n }\n\n const error = popper.querySelector('.ae-error-msg');\n if (error) {\n error.innerHTML = '';\n }\n\n // Access the tippy instance and destroy it\n if (popper._tippy) {\n popper._tippy.destroy();\n }\n }\n\n errorMessage(popper, valid, message) {\n const error = popper.querySelector('.ae-error-msg');\n if (!error) return;\n\n if (!valid) {\n error.style.display = 'block';\n if (message) error.innerHTML = message;\n\n const formField = popper.querySelector('.ae-form-field');\n if (formField) {\n formField.classList.add('ae-input-error');\n }\n } else {\n error.style.display = 'none';\n\n const formField = popper.querySelector('.ae-form-field');\n if (formField) {\n formField.classList.remove('ae-input-error');\n }\n }\n }\n\n // Helper method to find the tippy-popper parent element\n findTippyPopper(element) {\n let current = element;\n while (current && !current.classList?.contains('tippy-popper')) {\n current = current.parentElement;\n }\n return current;\n }\n}\n", "import { Controller } from '../stimulus';\n\n/**\n * Sale Header Print Controller\n *\n * Handles page printing functionality for sale header actions.\n * Provides unified print behavior for TeamSite pages.\n *\n * Features:\n * - Triggers browser print dialog\n * - Event handling with prevention of default link behavior\n *\n * Usage:\n *
\n * sale-header-print#click\">\n * Print This Page\n * \n * \n */\nexport default class extends Controller {\n /**\n * Handle print action\n * Prevents default link behavior and triggers print dialog\n */\n click(event) {\n event.preventDefault();\n\n // Trigger browser print dialog\n window.print();\n }\n}\n", "import { Controller } from '../stimulus';\n\n/**\n * Sale Header Sale Add Button Controller\n *\n * Opens AJAX modal to clone current sale with new name.\n * Uses AjaxPopup pattern for modal display.\n *\n * Data Attributes:\n * data-sale-id: ID of sale to clone\n *\n * Actions:\n * click: Open clone sale modal\n */\nexport default class extends Controller {\n async click(e) {\n e.preventDefault();\n\n const saleId = this.element.dataset.saleId;\n\n if (!saleId) {\n console.error('[SaleHeaderSaleAdd] Sale ID not found');\n this.showError('Unable to load clone form');\n return;\n }\n\n const url = `/teamsites/${saleId}/clone_sale/new`;\n\n try {\n // Dynamic import for code splitting\n const AjaxPopupController = (await import('./ajax_popup_controller')).default;\n AjaxPopupController.open(url);\n } catch (error) {\n console.error('[SaleHeaderSaleAdd] Failed to load modal:', error);\n this.showError('Failed to load clone sale form. Please try again.');\n }\n }\n\n showError(message) {\n if (typeof window.App !== 'undefined' &&\n typeof window.App.showErrorFlash === 'function') {\n window.App.showErrorFlash(message);\n } else {\n console.error('Unified flash system not available:', message);\n }\n }\n}\n", "import Select2BaseController from './select2_base_controller';\n\n/**\n * Sale Dropdown Controller\n *\n * Manages the sale selection dropdown in the page header, allowing users to\n * switch between different sales for the current dealer.\n *\n * Features:\n * - Select2-enhanced dropdown with search capability\n * - Redirects to the selected sale's edit page\n * - No jQuery dependency (uses Select2BaseController abstraction)\n *\n * Data Attributes:\n * - data-sale-id: Current sale ID\n * - data-sale-close-date: Current sale's close date\n *\n * Usage:\n *
\n * ... \n *
\n */\nexport default class extends Select2BaseController {\n connect() {\n // Find the select element within the container\n const selectElement = this.element.querySelector('select');\n if (selectElement) {\n // Set selectElement BEFORE any initialization\n this.selectElement = selectElement;\n }\n\n // Manually do what Select2BaseController.connect() does\n // (without calling super.connect() which would overwrite selectElement)\n this.initializeSelect();\n this.setupTurbolinksHandlers();\n\n // Read data attributes from the container\n this.saleId = this.element.dataset.saleId;\n this.closeDate = this.element.dataset.saleCloseDate;\n }\n\n /**\n * Configure Select2 options\n * - Width: 150px (fits in page header)\n * - Search enabled for 1+ items\n */\n getEnhancementOptions() {\n return {\n width: 150,\n minimumResultsForSearch: 1,\n };\n }\n\n /**\n * Handle sale selection change\n * Redirects to the selected sale's edit page\n */\n onSelectChange(event) {\n const selectedSaleId = event.target.value;\n\n // Only redirect if a valid sale ID is selected\n if (selectedSaleId) {\n window.location.href = `/teamsites/${selectedSaleId}/edit`;\n }\n }\n\n disconnect() {\n super.disconnect();\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n initialize() {\n this.saleId = this.element.dataset.saleId;\n }\n\n click(event) {\n event.preventDefault();\n\n // Show loading state\n document.body.classList.add('is-loading');\n\n const url = `/teamsites/${this.saleId}/notes/new`;\n\n return fetch(url, {\n method: 'GET',\n headers: {\n 'Accept': 'text/html',\n 'X-Requested-With': 'XMLHttpRequest',\n },\n })\n .then(response => response.text())\n .then(html => {\n document.body.classList.remove('is-loading');\n\n // Show sidebar if hidden\n const notesSidebar = document.getElementById('notes-sidebar');\n if (notesSidebar) {\n notesSidebar.classList.remove('ae-hidden');\n }\n\n // Load content into container\n const notesContentContainer = document.getElementById('notes-content-container');\n if (notesContentContainer) {\n notesContentContainer.innerHTML = html;\n\n // Focus the title field\n const noteTitle = document.getElementById('note-title');\n if (noteTitle) {\n noteTitle.focus();\n }\n }\n\n // Trigger updates to other components\n this.triggerComponentUpdates();\n })\n .catch(_error => {\n document.body.classList.remove('is-loading');\n\n // Show error notification\n const errorDiv = document.createElement('div');\n errorDiv.className = 'ae-alert ae-alert-danger';\n errorDiv.textContent = 'Failed to load new note form.';\n errorDiv.style.cssText = 'position:fixed;top:20px;right:20px;z-index:9999';\n document.body.appendChild(errorDiv);\n setTimeout(() => errorDiv.remove(), 5000);\n });\n }\n\n triggerComponentUpdates() {\n // Reload sidebar list\n const sidebarList = document.getElementById('notes-sidebar-list');\n if (sidebarList) {\n const event = new CustomEvent('reload');\n sidebarList.dispatchEvent(event);\n }\n\n // Show clear button\n const notesClear = document.getElementById('notes-clear');\n if (notesClear) {\n const event = new CustomEvent('show');\n notesClear.dispatchEvent(event);\n }\n\n // Reload page header actions\n const pageHeaderActions = document.getElementById('page-header-actions-container');\n if (pageHeaderActions) {\n const event = new CustomEvent('reload');\n pageHeaderActions.dispatchEvent(event);\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static get targets() {\n return ['container', 'list', 'dropzone'];\n }\n\n initialize() {\n this.saleId = this.element.dataset.saleId;\n this.noteId = this.element.dataset.noteId;\n }\n\n connect() {\n this.setupEventListeners();\n }\n\n disconnect() {\n this.removeEventListeners();\n }\n\n setupEventListeners() {\n // Listen for reload events\n this.boundReloadHandler = this.boundReloadHandler || this.reload.bind(this);\n this.element.addEventListener('reload', this.boundReloadHandler);\n\n // Listen for dropzone upload completion\n this.boundUploadCompleteHandler = this.boundUploadCompleteHandler || this.handleUploadComplete.bind(this);\n this.element.addEventListener('dropzone:queuecomplete', this.boundUploadCompleteHandler);\n }\n\n removeEventListeners() {\n if (this.boundReloadHandler) {\n this.element.removeEventListener('reload', this.boundReloadHandler);\n }\n if (this.boundUploadCompleteHandler) {\n this.element.removeEventListener('dropzone:queuecomplete', this.boundUploadCompleteHandler);\n }\n }\n\n reload() {\n if (!this.saleId || !this.noteId) {\n return Promise.resolve();\n }\n\n const url = `/teamsites/${this.saleId}/notes/${this.noteId}/attachments`;\n\n return fetch(url, {\n method: 'GET',\n headers: {\n 'Accept': 'text/html',\n 'X-Requested-With': 'XMLHttpRequest',\n },\n })\n .then(response => response.text())\n .then(html => {\n if (this.hasListTarget) {\n this.listTarget.innerHTML = html;\n } else if (this.hasContainerTarget) {\n this.containerTarget.innerHTML = html;\n }\n\n // Dispatch loaded event\n const event = new CustomEvent('attachments:loaded');\n this.element.dispatchEvent(event);\n })\n .catch(_error => {\n this.showErrorNotification('Failed to reload attachments.');\n });\n }\n\n handleUploadComplete(_event) {\n // Reload attachments list after successful upload\n setTimeout(() => {\n this.reload();\n }, 500); // Small delay to allow server processing\n }\n\n editAttachment(event) {\n event.preventDefault();\n\n const attachmentId = event.currentTarget.dataset.attachmentId;\n if (!attachmentId) {\n return;\n }\n\n // Show inline edit form or modal\n this.showEditForm(attachmentId);\n }\n\n showEditForm(attachmentId) {\n // Create simple prompt for filename editing\n const currentNameElement = this.element.querySelector(`[data-attachment-id=\"${attachmentId}\"] .attachment-name`);\n const currentName = currentNameElement ? currentNameElement.textContent.trim() : '';\n\n const newName = window.prompt('Enter new filename:', currentName);\n if (newName && newName !== currentName) {\n this.updateAttachment(attachmentId, newName);\n }\n }\n\n updateAttachment(attachmentId, newFilename) {\n if (!this.saleId || !this.noteId) {\n return Promise.resolve();\n }\n\n const url = `/teamsites/${this.saleId}/notes/${this.noteId}/attachments/${attachmentId}`;\n\n // Prepare form data\n const formData = new FormData();\n formData.append('filename', newFilename);\n\n // Get CSRF token\n const csrfToken = document.querySelector('meta[name=\"csrf-token\"]');\n if (csrfToken) {\n formData.append('authenticity_token', csrfToken.getAttribute('content'));\n }\n\n return fetch(url, {\n method: 'PATCH',\n headers: {\n 'X-Requested-With': 'XMLHttpRequest',\n 'Accept': 'text/javascript',\n },\n body: formData,\n })\n .then(response => response.text())\n .then(jsResponse => {\n // Execute the returned JavaScript (contains reload and notifications)\n if (jsResponse) {\n const script = document.createElement('script');\n script.textContent = jsResponse;\n document.head.appendChild(script);\n document.head.removeChild(script);\n }\n })\n .catch(_error => {\n this.showErrorNotification('Failed to update attachment.');\n });\n }\n\n deleteAttachment(event) {\n event.preventDefault();\n\n const attachmentId = event.currentTarget.dataset.attachmentId;\n if (!attachmentId) {\n return;\n }\n\n if (!confirm('Are you sure you want to delete this attachment?')) {\n return;\n }\n\n this.performDeleteAttachment(attachmentId);\n }\n\n performDeleteAttachment(attachmentId) {\n if (!this.saleId || !this.noteId) {\n return Promise.resolve();\n }\n\n const url = `/teamsites/${this.saleId}/notes/${this.noteId}/attachments/${attachmentId}`;\n\n // Get CSRF token\n const csrfToken = document.querySelector('meta[name=\"csrf-token\"]');\n if (!csrfToken) {\n if (window.App && typeof window.App.showErrorFlash === 'function') {\n window.App.showErrorFlash('Security token missing. Please refresh the page.');\n } else {\n this.showErrorNotification('Security token missing. Please refresh the page.');\n }\n return Promise.resolve();\n }\n\n const body = new FormData();\n body.append('authenticity_token', csrfToken.getAttribute('content'));\n\n return fetch(url, {\n method: 'DELETE',\n headers: {\n 'X-Requested-With': 'XMLHttpRequest',\n 'Accept': 'text/javascript',\n },\n body: body,\n })\n .then(response => response.text())\n .then(jsResponse => {\n // Execute the returned JavaScript (contains reload and notifications)\n if (jsResponse) {\n const script = document.createElement('script');\n script.textContent = jsResponse;\n document.head.appendChild(script);\n document.head.removeChild(script);\n }\n })\n .catch(_error => {\n this.showErrorNotification('Failed to delete attachment.');\n });\n }\n\n downloadAttachment(event) {\n event.preventDefault();\n\n const attachmentId = event.currentTarget.dataset.attachmentId;\n if (!attachmentId) {\n return;\n }\n\n const url = `/teamsites/${this.saleId}/notes/${this.noteId}/attachments/${attachmentId}/download`;\n\n // Open download in new window/tab\n window.open(url, '_blank');\n }\n\n showErrorNotification(message) {\n const errorDiv = document.createElement('div');\n errorDiv.className = 'ae-alert ae-alert-danger';\n errorDiv.textContent = message;\n errorDiv.style.cssText = 'position:fixed;top:20px;right:20px;z-index:9999';\n document.body.appendChild(errorDiv);\n setTimeout(() => errorDiv.remove(), 5000);\n }\n\n showSuccessNotification(message) {\n const successDiv = document.createElement('div');\n successDiv.className = 'ae-alert ae-alert-success';\n successDiv.textContent = message;\n successDiv.style.cssText = 'position:fixed;top:20px;right:20px;z-index:9999';\n document.body.appendChild(successDiv);\n setTimeout(() => successDiv.remove(), 3000);\n }\n\n // Handle dynamic content updates\n containerTargetConnected() {\n // When container is connected, setup any additional listeners\n this.setupContainerListeners();\n }\n\n setupContainerListeners() {\n // Setup event delegation for dynamically added attachment elements\n if (this.hasContainerTarget) {\n // Ensure we don't add duplicate listeners\n this.containerTarget.removeEventListener('click', this.boundContainerClickHandler);\n\n this.boundContainerClickHandler = this.handleContainerClick.bind(this);\n this.containerTarget.addEventListener('click', this.boundContainerClickHandler);\n }\n }\n\n handleContainerClick(event) {\n const target = event.target.closest('[data-action]');\n if (!target) return;\n\n const action = target.dataset.action;\n\n switch (action) {\n case 'edit':\n this.editAttachment(event);\n break;\n case 'delete':\n this.deleteAttachment(event);\n break;\n case 'download':\n this.downloadAttachment(event);\n break;\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static get targets() {\n return ['selectAll', 'noteCheckbox', 'deleteSelected', 'selectedCount'];\n }\n\n initialize() {\n this.saleId = this.element.dataset.saleId;\n this.selectedNotes = new Set();\n }\n\n connect() {\n this.updateUI();\n }\n\n selectAll(event) {\n const isChecked = event.target.checked;\n\n this.noteCheckboxTargets.forEach(checkbox => {\n checkbox.checked = isChecked;\n const noteId = checkbox.dataset.noteId;\n\n if (isChecked) {\n this.selectedNotes.add(noteId);\n } else {\n this.selectedNotes.delete(noteId);\n }\n });\n\n this.updateUI();\n }\n\n toggleNote(event) {\n const checkbox = event.target;\n const noteId = checkbox.dataset.noteId;\n\n if (checkbox.checked) {\n this.selectedNotes.add(noteId);\n } else {\n this.selectedNotes.delete(noteId);\n }\n\n // Update select all checkbox state\n this.updateSelectAllState();\n this.updateUI();\n }\n\n updateSelectAllState() {\n if (this.hasSelectAllTarget) {\n const totalCheckboxes = this.noteCheckboxTargets.length;\n const selectedCount = this.selectedNotes.size;\n\n if (selectedCount === 0) {\n this.selectAllTarget.checked = false;\n this.selectAllTarget.indeterminate = false;\n } else if (selectedCount === totalCheckboxes) {\n this.selectAllTarget.checked = true;\n this.selectAllTarget.indeterminate = false;\n } else {\n this.selectAllTarget.checked = false;\n this.selectAllTarget.indeterminate = true;\n }\n }\n }\n\n updateUI() {\n const selectedCount = this.selectedNotes.size;\n\n // Update selected count display\n if (this.hasSelectedCountTarget) {\n this.selectedCountTarget.textContent = selectedCount;\n }\n\n // Show/hide bulk actions\n if (this.hasDeleteSelectedTarget) {\n if (selectedCount > 0) {\n this.deleteSelectedTarget.classList.remove('ae-hidden');\n this.deleteSelectedTarget.disabled = false;\n } else {\n this.deleteSelectedTarget.classList.add('ae-hidden');\n this.deleteSelectedTarget.disabled = true;\n }\n }\n\n // Update select all state\n this.updateSelectAllState();\n }\n\n deleteSelected(event) {\n event.preventDefault();\n\n const selectedCount = this.selectedNotes.size;\n if (selectedCount === 0) {\n return;\n }\n\n const message = `Are you sure you want to delete ${selectedCount} selected note${selectedCount > 1 ? 's' : ''}?`;\n if (!confirm(message)) {\n return;\n }\n\n // Show loading state\n document.body.classList.add('is-loading');\n\n // Create and submit a form (allows Rails to handle redirect)\n const form = document.createElement('form');\n form.method = 'POST';\n form.action = `/teamsites/${this.saleId}/notes/bulk_destroy`;\n\n // Add method override for DELETE\n const methodInput = document.createElement('input');\n methodInput.type = 'hidden';\n methodInput.name = '_method';\n methodInput.value = 'delete';\n form.appendChild(methodInput);\n\n // Add CSRF token\n const csrfToken = document.querySelector('meta[name=\"csrf-token\"]');\n if (csrfToken) {\n const tokenInput = document.createElement('input');\n tokenInput.type = 'hidden';\n tokenInput.name = 'authenticity_token';\n tokenInput.value = csrfToken.getAttribute('content');\n form.appendChild(tokenInput);\n }\n\n // Add note IDs\n const noteIds = Array.from(this.selectedNotes);\n noteIds.forEach(noteId => {\n const input = document.createElement('input');\n input.type = 'hidden';\n input.name = 'note_ids[]';\n input.value = noteId;\n form.appendChild(input);\n });\n\n document.body.appendChild(form);\n form.submit();\n }\n\n clearSelection() {\n this.selectedNotes.clear();\n\n // Uncheck all checkboxes\n this.noteCheckboxTargets.forEach(checkbox => {\n checkbox.checked = false;\n });\n\n this.updateUI();\n }\n\n // Handle dynamic content updates\n noteCheckboxTargetConnected(target) {\n // When new checkboxes are added, ensure they're in sync\n const noteId = target.dataset.noteId;\n if (this.selectedNotes.has(noteId)) {\n target.checked = true;\n }\n this.updateUI();\n }\n\n noteCheckboxTargetDisconnected() {\n // Update UI when checkboxes are removed\n this.updateUI();\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n submit(event) {\n event.preventDefault();\n\n const form = this.element;\n const formData = new FormData(form);\n const csrfToken = document.querySelector('meta[name=\"csrf-token\"]');\n\n if (!csrfToken) {\n this.showError('Security token missing. Please refresh the page.');\n return;\n }\n\n fetch(form.action, {\n method: form.method || 'POST',\n body: formData,\n headers: {\n 'X-Requested-With': 'XMLHttpRequest',\n 'X-CSRF-Token': csrfToken.getAttribute('content'),\n 'Accept': 'application/json',\n },\n })\n .then(response => response.json())\n .then(data => {\n if (data.success) {\n this.handleSuccess(data);\n } else {\n this.handleError(data);\n }\n })\n .catch(_error => {\n this.showError('Failed to save note. Please try again.');\n this.resetButton();\n });\n }\n\n handleSuccess(data) {\n // Redirect to refresh the page with updated state\n if (data.redirect_url) {\n window.location.href = data.redirect_url;\n } else {\n window.location.reload();\n }\n }\n\n handleError(data) {\n const message = data.errors ? data.errors.join(', ') : 'An error occurred';\n this.showError(message);\n this.resetButton();\n }\n\n showError(message) {\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash(message);\n }\n }\n\n resetButton() {\n const button = document.getElementById('note-save');\n if (button) {\n button.disabled = false;\n button.classList.remove('ae-btn-disabled');\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static get targets() {\n return ['list', 'note', 'selectedNote'];\n }\n\n initialize() {\n this.saleId = this.element.dataset.saleId;\n this.activeNoteId = null;\n }\n\n connect() {\n this.setupEventListeners();\n this.detectInitialActiveNote();\n this.highlightActiveNote();\n }\n\n disconnect() {\n this.removeEventListeners();\n }\n\n setupEventListeners() {\n // Listen for reload events\n this.boundReloadHandler = this.boundReloadHandler || this.reload.bind(this);\n this.element.addEventListener('reload', this.boundReloadHandler);\n\n // Listen for note selection events\n this.boundNoteSelectHandler = this.boundNoteSelectHandler || this.handleNoteSelect.bind(this);\n this.element.addEventListener('note:select', this.boundNoteSelectHandler);\n }\n\n removeEventListeners() {\n if (this.boundReloadHandler) {\n this.element.removeEventListener('reload', this.boundReloadHandler);\n }\n if (this.boundNoteSelectHandler) {\n this.element.removeEventListener('note:select', this.boundNoteSelectHandler);\n }\n }\n\n selectNote(event) {\n event.preventDefault();\n\n const noteElement = event.currentTarget;\n const noteId = noteElement.dataset.noteId;\n\n if (!noteId) {\n return Promise.resolve();\n }\n\n // Show loading state\n document.body.classList.add('is-loading');\n\n const url = `/teamsites/${this.saleId}/notes/${noteId}`;\n\n return fetch(url, {\n method: 'GET',\n headers: {\n 'Accept': 'text/html',\n 'X-Requested-With': 'XMLHttpRequest',\n },\n })\n .then(response => response.text())\n .then(html => {\n document.body.classList.remove('is-loading');\n\n // Load content into container\n const notesContentContainer = document.getElementById('notes-content-container');\n if (notesContentContainer) {\n notesContentContainer.innerHTML = html;\n }\n\n // Update active note highlighting\n this.setActiveNote(noteId);\n\n // Trigger page header update\n this.triggerPageHeaderUpdate();\n })\n .catch(_error => {\n document.body.classList.remove('is-loading');\n\n // Show error notification\n const errorDiv = document.createElement('div');\n errorDiv.className = 'ae-alert ae-alert-danger';\n errorDiv.textContent = 'Failed to load note.';\n errorDiv.style.cssText = 'position:fixed;top:20px;right:20px;z-index:9999';\n document.body.appendChild(errorDiv);\n setTimeout(() => errorDiv.remove(), 5000);\n });\n }\n\n setActiveNote(noteId) {\n this.activeNoteId = noteId;\n this.highlightActiveNote();\n }\n\n detectInitialActiveNote() {\n // Try to detect the active note from the URL\n const urlMatch = window.location.pathname.match(/\\/teamsites\\/\\d+\\/notes\\/(\\d+)/);\n if (urlMatch) {\n this.activeNoteId = urlMatch[1];\n return;\n }\n\n // If no note ID in URL, check if there's content being displayed\n const contentContainer = document.querySelector('#notes-content-container');\n if (contentContainer) {\n // Look for note ID in any data attributes or form fields in the content\n const noteIdInput = contentContainer.querySelector('input[name*=\"[id]\"]');\n if (noteIdInput && noteIdInput.value) {\n this.activeNoteId = noteIdInput.value;\n return;\n }\n }\n\n // As a last resort, highlight the first note if no specific note is indicated\n const firstNote = this.element.querySelector('[data-note-id]');\n if (firstNote) {\n this.activeNoteId = firstNote.dataset.noteId;\n }\n }\n\n highlightActiveNote() {\n // Remove active class and styling from all notes\n document.querySelectorAll('.sidebar-note').forEach(noteElement => {\n noteElement.classList.remove('active', 'selected');\n noteElement.style.backgroundColor = '';\n noteElement.style.borderLeft = '';\n });\n\n // Add active class and styling to current note\n if (this.activeNoteId) {\n const activeNote = this.element.querySelector(`[data-note-id=\"${this.activeNoteId}\"]`);\n if (activeNote) {\n activeNote.classList.add('active', 'selected');\n activeNote.style.backgroundColor = '#f8f9fa';\n activeNote.style.borderLeft = '3px solid #007bff';\n }\n }\n }\n\n reload() {\n if (!this.saleId) {\n return Promise.resolve();\n }\n\n const url = `/teamsites/${this.saleId}/notes/sidebar`;\n\n return fetch(url, {\n method: 'GET',\n headers: {\n 'Accept': 'text/html',\n 'X-Requested-With': 'XMLHttpRequest',\n },\n })\n .then(response => response.text())\n .then(html => {\n if (this.hasListTarget) {\n this.listTarget.innerHTML = html;\n } else {\n // Fallback: replace entire sidebar content\n this.element.innerHTML = html;\n }\n\n // Restore active note highlighting\n this.highlightActiveNote();\n\n // Show actions container if notes were loaded\n const actionsContainer = document.getElementById('notes-actions-dropdown-container');\n if (actionsContainer && html.trim()) {\n actionsContainer.classList.remove('ae-hidden');\n }\n\n // Dispatch loaded event for other controllers\n const event = new CustomEvent('sidebar:loaded');\n this.element.dispatchEvent(event);\n })\n .catch(_error => {\n // Show error notification\n const errorDiv = document.createElement('div');\n errorDiv.className = 'ae-alert ae-alert-danger';\n errorDiv.textContent = 'Failed to reload notes sidebar.';\n errorDiv.style.cssText = 'position:fixed;top:20px;right:20px;z-index:9999';\n document.body.appendChild(errorDiv);\n setTimeout(() => errorDiv.remove(), 5000);\n });\n }\n\n triggerPageHeaderUpdate() {\n const pageHeaderActions = document.getElementById('page-header-actions-container');\n if (pageHeaderActions) {\n const event = new CustomEvent('reload');\n pageHeaderActions.dispatchEvent(event);\n }\n }\n\n handleNoteSelect(event) {\n const noteId = event.detail?.noteId;\n if (noteId) {\n this.setActiveNote(noteId);\n }\n }\n\n // Handle dynamic content updates\n noteTargetConnected(target) {\n // When new note elements are added, check if they should be active\n const noteId = target.dataset.noteId;\n if (noteId === this.activeNoteId) {\n target.classList.add('active', 'selected');\n }\n }\n\n // Count notes for display\n getNotesCount() {\n return this.noteTargets.length;\n }\n\n // Check if sidebar has notes\n hasNotes() {\n return this.getNotesCount() > 0;\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n initialize() {\n this.saleId = this.element.dataset.saleId;\n this.noteId = this.element.dataset.noteId;\n }\n\n connect() {\n // Make the entire note item clickable for selection\n this.element.style.cursor = 'pointer';\n }\n\n click(event) {\n // Don't trigger note selection if clicking on checkbox area or trash icon\n const target = event.target;\n const checkboxField = target.closest('.ae-form-field');\n const isCheckboxClick = target.type === 'checkbox' ||\n (checkboxField && checkboxField.querySelector('input[type=\"checkbox\"]'));\n\n if (isCheckboxClick || target.closest('.ae-icon-trash') || target.closest('[data-action*=\"delete\"]')) {\n return;\n }\n\n event.preventDefault();\n this.selectNote();\n }\n\n selectNote() {\n if (!this.noteId || !this.saleId) {\n // Missing noteId or saleId for note selection\n return;\n }\n\n // Show loading state\n document.body.classList.add('is-loading');\n\n const url = `/teamsites/${this.saleId}/notes/${this.noteId}`;\n\n fetch(url, {\n method: 'GET',\n headers: {\n 'Accept': 'text/html',\n 'X-Requested-With': 'XMLHttpRequest',\n 'X-CSRF-Token': document.querySelector('meta[name=\"csrf-token\"]')?.getAttribute('content') || '',\n },\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n return response.text();\n })\n .then(html => {\n document.body.classList.remove('is-loading');\n\n // Load content into container\n const notesContentContainer = document.getElementById('notes-content-container');\n if (notesContentContainer) {\n notesContentContainer.innerHTML = html;\n }\n\n // Update active note highlighting\n this.setActiveNote();\n\n // Show success notification\n this.showNotification('Note loaded successfully', 'success');\n })\n .catch(_error => {\n document.body.classList.remove('is-loading');\n // Failed to load note\n\n // Show error notification\n this.showNotification('Failed to load note. Please try again.', 'error');\n });\n }\n\n setActiveNote() {\n // Remove active class from all notes and reset styling\n document.querySelectorAll('.sidebar-note').forEach(noteElement => {\n noteElement.classList.remove('active', 'selected', 'active-tab');\n noteElement.style.backgroundColor = '';\n noteElement.style.borderLeft = '';\n });\n\n // Add active class to current note and apply visible styling\n this.element.classList.add('active', 'selected');\n this.element.style.backgroundColor = '#f8f9fa';\n this.element.style.borderLeft = '3px solid #007bff';\n\n // Dispatch event for other controllers\n const event = new CustomEvent('note:selected', {\n detail: { noteId: this.noteId, saleId: this.saleId },\n bubbles: true,\n });\n this.element.dispatchEvent(event);\n }\n\n showNotification(message, type = 'success') {\n // Try to use global notification system if available\n if (window.App && window.App.showFlash) {\n window.App.showFlash(message, type);\n return;\n }\n\n // Fallback notification\n const notification = document.createElement('div');\n notification.className = `flash-message flash-${type} ae-u-fade-in`;\n\n let backgroundColor, color, borderColor;\n switch (type) {\n case 'error':\n backgroundColor = '#f8d7da';\n color = '#721c24';\n borderColor = '#f5c6cb';\n break;\n case 'success':\n default:\n backgroundColor = '#d4edda';\n color = '#155724';\n borderColor = '#c3e6cb';\n }\n\n notification.style.cssText = `\n position: fixed; \n top: 20px; \n right: 20px; \n z-index: 9999; \n padding: 10px 15px; \n background: ${backgroundColor}; \n color: ${color}; \n border: 1px solid ${borderColor}; \n border-radius: 4px;\n max-width: 300px;\n `;\n notification.textContent = message;\n document.body.appendChild(notification);\n\n setTimeout(() => {\n if (notification.parentNode) {\n notification.parentNode.removeChild(notification);\n }\n }, 3000);\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n initialize() {\n this.saleId = this.element.dataset.saleId;\n }\n\n connect() {\n // Initialize tab content area\n // This controller manages the overall notes tab content container\n this.setupEventListeners();\n }\n\n disconnect() {\n // Clean up event listeners\n this.cleanupEventListeners();\n }\n\n setupEventListeners() {\n // Listen for content updates from other controllers\n this.element.addEventListener('content-updated', this.handleContentUpdate.bind(this));\n }\n\n cleanupEventListeners() {\n this.element.removeEventListener('content-updated', this.handleContentUpdate.bind(this));\n }\n\n handleContentUpdate(event) {\n // Handle content updates triggered by other controllers\n const { action, data } = event.detail || {};\n\n switch (action) {\n case 'refresh-sidebar':\n this.refreshSidebar();\n break;\n case 'update-content':\n this.updateContent(data);\n break;\n default:\n // Default handling\n break;\n }\n }\n\n refreshSidebar() {\n const sidebar = this.element.querySelector('#notes-sidebar');\n if (sidebar) {\n // Trigger sidebar refresh\n const event = new CustomEvent('refresh');\n sidebar.dispatchEvent(event);\n }\n }\n\n updateContent(data) {\n const contentContainer = this.element.querySelector('#notes-content-container');\n if (contentContainer && data) {\n contentContainer.innerHTML = data.html || '';\n }\n }\n\n toggleList() {\n const attachmentsView = document.getElementById('attachments-view');\n if (attachmentsView) {\n attachmentsView.classList.add('list-view');\n attachmentsView.classList.remove('grid-view');\n }\n\n const listBtn = document.getElementById('attachments-list-btn');\n const gridBtn = document.getElementById('attachments-grid-btn');\n if (listBtn) listBtn.closest('.ae-btn').classList.add('active');\n if (gridBtn) gridBtn.closest('.ae-btn').classList.remove('active');\n }\n\n toggleGrid() {\n const attachmentsView = document.getElementById('attachments-view');\n if (attachmentsView) {\n attachmentsView.classList.add('grid-view');\n attachmentsView.classList.remove('list-view');\n }\n\n const listBtn = document.getElementById('attachments-list-btn');\n const gridBtn = document.getElementById('attachments-grid-btn');\n if (listBtn) listBtn.closest('.ae-btn').classList.remove('active');\n if (gridBtn) gridBtn.closest('.ae-btn').classList.add('active');\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['form'];\n\n connect() {\n // Store bound handler for proper cleanup\n this.boundHandleSelectionChange = this.handleSelectionChange.bind(this);\n\n // Listen for bulk selection changes from any bulk-select controller\n document.addEventListener('bulk-select:changed', this.boundHandleSelectionChange);\n }\n\n disconnect() {\n document.removeEventListener('bulk-select:changed', this.boundHandleSelectionChange);\n }\n\n handleSelectionChange(event) {\n const { count, orderNumbers } = event.detail;\n this.selectedOrderNumbers = orderNumbers;\n this.selectedCount = count;\n }\n\n exportCsv(event) {\n event.preventDefault();\n\n if (!this.selectedOrderNumbers || this.selectedOrderNumbers.length === 0) {\n this.showNoSelectionAlert();\n return;\n }\n\n // Create and submit form for CSV export\n this.submitCsvRequest();\n }\n\n submitCsvRequest() {\n // Get the current sale ID from the URL or a data attribute\n const saleId = this.getSaleId();\n\n if (!saleId) {\n this.showErrorAlert('Unable to export: Sale ID not found');\n return;\n }\n\n // Build the CSV export URL\n const csvUrl = `/teamsites/${saleId}/orders.csv`;\n\n // Create form dynamically\n const form = document.createElement('form');\n form.method = 'POST';\n form.action = csvUrl;\n form.style.display = 'none';\n\n // Add CSRF token\n const csrfToken = document.querySelector('meta[name=\"csrf-token\"]');\n if (csrfToken) {\n const csrfInput = document.createElement('input');\n csrfInput.type = 'hidden';\n csrfInput.name = 'authenticity_token';\n csrfInput.value = csrfToken.content;\n form.appendChild(csrfInput);\n }\n\n // Add HTTP method override for GET request with params\n const methodInput = document.createElement('input');\n methodInput.type = 'hidden';\n methodInput.name = '_method';\n methodInput.value = 'get';\n form.appendChild(methodInput);\n\n // Add selected order IDs\n this.selectedOrderNumbers.forEach(orderNumber => {\n const input = document.createElement('input');\n input.type = 'hidden';\n input.name = 'selected_orders[]';\n input.value = orderNumber;\n form.appendChild(input);\n });\n\n // Submit the form with error handling\n document.body.appendChild(form);\n try {\n form.submit();\n this.showExportFeedback();\n } catch (error) {\n // Handle form submission failures gracefully\n // Silent failure - form submission errors are handled by the browser\n } finally {\n // Only remove if it's still in the DOM (allows tests to inspect)\n if (form.parentNode) {\n document.body.removeChild(form);\n }\n }\n }\n\n getSaleId() {\n // Try to get sale ID from URL path\n const pathMatch = window.location.pathname.match(/\\/teamsites\\/(\\d+)/);\n if (pathMatch) {\n return pathMatch[1];\n }\n\n // Fallback: try to get from a data attribute on the page\n const saleElement = document.querySelector('[data-sale-id]');\n if (saleElement) {\n return saleElement.dataset.saleId;\n }\n\n return null;\n }\n\n showNoSelectionAlert() {\n // Create a simple alert notification\n const alertDiv = document.createElement('div');\n alertDiv.className = 'ae-alert ae-alert-warning';\n alertDiv.textContent = 'Please select at least one order to export.';\n alertDiv.style.cssText = 'position:fixed;top:20px;right:20px;z-index:9999;';\n\n document.body.appendChild(alertDiv);\n\n // Remove after 3 seconds\n setTimeout(() => {\n if (alertDiv.parentNode) {\n alertDiv.remove();\n }\n }, 3000);\n }\n\n showExportFeedback() {\n // Show feedback that export is being processed\n const feedbackDiv = document.createElement('div');\n feedbackDiv.className = 'ae-alert ae-alert-success';\n feedbackDiv.textContent = `Exporting ${this.selectedCount} order(s) to CSV...`;\n feedbackDiv.style.cssText = 'position:fixed;top:20px;right:20px;z-index:9999;';\n\n document.body.appendChild(feedbackDiv);\n\n // Remove after 3 seconds\n setTimeout(() => {\n if (feedbackDiv.parentNode) {\n feedbackDiv.remove();\n }\n }, 3000);\n }\n\n showErrorAlert(message) {\n const alertDiv = document.createElement('div');\n alertDiv.className = 'ae-alert ae-alert-warning';\n alertDiv.textContent = message;\n alertDiv.style.cssText = 'position:fixed;top:20px;right:20px;z-index:9999;';\n\n document.body.appendChild(alertDiv);\n\n setTimeout(() => {\n if (alertDiv.parentNode) {\n alertDiv.remove();\n }\n }, 3000);\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['trigger'];\n\n connect() {\n // Bind event handler\n this.boundHandleSelectionChange = this.handleSelectionChange.bind(this);\n\n // Listen for bulk selection changes\n document.addEventListener('bulk-select:changed', this.boundHandleSelectionChange);\n }\n\n disconnect() {\n // Clean up event listener\n if (this.boundHandleSelectionChange) {\n document.removeEventListener('bulk-select:changed', this.boundHandleSelectionChange);\n }\n }\n\n handleSelectionChange(event) {\n this.selectedOrders = (event.detail && event.detail.orderNumbers) || [];\n }\n\n prepareUrl(event) {\n // Prevent default to avoid navigation, but allow propagation for ajax-popup\n event.preventDefault();\n\n if (!this.selectedOrders || this.selectedOrders.length === 0) {\n window.alert('Please select at least one order to change fulfillment status.');\n event.stopPropagation(); // Stop only if there's an error\n return;\n }\n\n // Get current sale ID from URL\n const pathParts = window.location.pathname.split('/');\n const teamsitesIndex = pathParts.indexOf('teamsites');\n const saleId = pathParts[teamsitesIndex + 1];\n\n // Build URL with selected orders\n const url = `/teamsites/${saleId}/orders/fulfillments/bulk`;\n const params = new URLSearchParams();\n\n // Add selected orders to params\n this.selectedOrders.forEach((orderId, index) => {\n params.append(`selected_orders[${index}]`, orderId);\n });\n\n // Set the href on the trigger element\n if (this.hasTriggerTarget) {\n this.triggerTarget.href = `${url}?${params.toString()}`;\n // Let the ajax-popup controller handle the click by allowing event propagation\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['statusSelect'];\n\n connect() {\n // Extract selected orders from data attributes\n const selectedOrdersData = this.element.dataset.selectedOrders || '';\n const selectedOrderNumbersData = this.element.dataset.selectedOrderNumbers || '';\n\n // Parse order IDs and numbers\n this.selectedOrders = selectedOrdersData ? selectedOrdersData.split(',') : [];\n this.selectedOrderNumbers = selectedOrderNumbersData ? selectedOrderNumbersData.split(',') : [];\n\n\n // Store previously focused element for accessibility\n this.previousActiveElement = document.activeElement;\n\n // Focus on first focusable element in modal\n this.focusFirstElement();\n }\n\n disconnect() {\n // Restore focus to previous element when modal closes\n if (this.previousActiveElement && this.previousActiveElement.focus) {\n this.previousActiveElement.focus();\n }\n }\n\n close(event) {\n if (event) {\n event.preventDefault();\n }\n\n // First try to find an ajax-popup parent and dispatch event to it\n const ajaxPopupElement = this.element.closest('[data-controller=\"ajax-popup\"]');\n if (ajaxPopupElement) {\n const closeEvent = new CustomEvent('ajax-popup:close', {\n bubbles: true,\n cancelable: true,\n });\n document.dispatchEvent(closeEvent);\n return;\n }\n\n // Fallback: find and click the close button\n let closeButton = this.element.querySelector('.mfp-close');\n if (!closeButton) {\n const wrapper = this.element.closest('.mfp-wrap');\n if (wrapper) {\n closeButton = wrapper.querySelector('.mfp-close');\n }\n }\n\n if (closeButton) {\n closeButton.click();\n } else {\n // Last resort: dispatch close event on document\n const closeEvent = new CustomEvent('ajax-popup:close', {\n bubbles: true,\n cancelable: true,\n });\n document.dispatchEvent(closeEvent);\n }\n }\n\n async confirm(event) {\n event.preventDefault();\n\n // Disable the button to prevent double-clicks\n const button = event.currentTarget;\n const originalText = button.textContent.trim();\n button.disabled = true;\n button.textContent = 'Processing...';\n\n // Get current sale ID from URL path\n const pathParts = window.location.pathname.split('/');\n const teamsitesIndex = pathParts.indexOf('teamsites');\n const saleId = pathParts[teamsitesIndex + 1];\n\n const url = `/teamsites/${saleId}/orders/fulfillments/bulk`;\n\n // Build form data with order numbers (not IDs) and fulfillment status\n const formData = new FormData();\n this.selectedOrderNumbers.forEach((orderNumber, index) => {\n formData.append(`selected_orders[${index}]`, orderNumber);\n });\n\n // Add the fulfillment status parameter from the dropdown\n if (this.hasStatusSelectTarget) {\n const selectedStatus = this.statusSelectTarget.value;\n if (!selectedStatus) {\n this.showErrorMessage('Please select a fulfillment status');\n button.disabled = false;\n button.textContent = originalText;\n return;\n }\n formData.append('fulfillment_status', selectedStatus);\n } else {\n // Fallback to 'fulfilled' if no dropdown found (backward compatibility)\n // No fulfillment status dropdown found, defaulting to fulfilled\n formData.append('fulfillment_status', 'fulfilled');\n }\n\n try {\n // Send the PATCH request\n const response = await fetch(url, {\n method: 'PATCH',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Accept': 'application/json',\n },\n body: formData,\n });\n\n let data;\n\n if (!response.ok) {\n // For 422 status, try to parse JSON first as it might be partial success\n if (response.status === 422) {\n data = await response.json();\n // If it has status 'partial', treat as partial success rather than error\n if (data.status !== 'partial') {\n throw new Error(data.message || `Server error: ${response.status}`);\n }\n } else {\n // Check if response is OK for other status codes\n try {\n const text = await response.text();\n const errorData = JSON.parse(text);\n throw new Error(errorData.message || `Server error: ${response.status}`);\n } catch {\n // If not JSON, throw generic error\n throw new Error(`Server error: ${response.status} - ${response.statusText}`);\n }\n }\n } else {\n data = await response.json();\n }\n\n if (data.status === 'success') {\n this.showSuccessMessage(data.message);\n this.refreshOrdersTable();\n this.close(event);\n } else if (data.status === 'partial') {\n this.showPartialSuccessMessage(data);\n this.refreshOrdersTable();\n this.close(event);\n } else {\n this.showErrorMessage(data.message || 'Unknown error occurred');\n button.disabled = false;\n button.textContent = originalText;\n }\n } catch (error) {\n // Check if this is a network error (fetch rejection) vs server response error (thrown in try block)\n if (error.message === 'Network error' || error.name === 'TypeError' || error.message.includes('fetch')) {\n // This is a network error, show generic message\n this.showErrorMessage('Failed to update fulfillment status. Please try again.');\n } else {\n // This is a server response error, show the specific message\n this.showErrorMessage(error.message || 'Failed to update fulfillment status. Please try again.');\n }\n button.disabled = false;\n button.textContent = originalText;\n }\n }\n\n showSuccessMessage(message) {\n // Use App.showSuccessFlash if available for consistency\n if (window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash(message);\n } else {\n // Fallback: Dispatch event for flash message\n const event = new CustomEvent('flash-message', {\n detail: {\n type: 'success',\n message: message,\n },\n });\n document.dispatchEvent(event);\n }\n }\n\n showPartialSuccessMessage(data) {\n let message = data.message;\n if (data.failed_orders && data.failed_orders.length > 0) {\n message += '\\n\\nFailed orders:';\n data.failed_orders.forEach(failed => {\n message += `\\nOrder ${failed.order_number}: ${failed.error}`;\n });\n }\n\n // Use App.showWarningFlash if available\n if (window.App && window.App.showWarningFlash) {\n window.App.showWarningFlash(message);\n } else {\n const event = new CustomEvent('flash-message', {\n detail: {\n type: 'warning',\n message: message,\n },\n });\n document.dispatchEvent(event);\n }\n }\n\n showErrorMessage(message) {\n // Use App.showErrorFlash if available for consistency\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash(message);\n } else {\n const event = new CustomEvent('flash-message', {\n detail: {\n type: 'error',\n message: message,\n },\n });\n document.dispatchEvent(event);\n }\n }\n\n refreshOrdersTable() {\n // Dispatch refresh event for other components to handle\n const refreshEvent = new CustomEvent('refresh-orders-table', {\n bubbles: true,\n cancelable: true,\n });\n document.dispatchEvent(refreshEvent);\n }\n\n getCSRFToken() {\n const token = document.querySelector('meta[name=\"csrf-token\"]');\n return token ? token.getAttribute('content') : '';\n }\n\n focusFirstElement() {\n // Find all focusable elements in the modal\n const focusableElements = this.element.querySelectorAll(\n 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])',\n );\n\n if (focusableElements.length > 0) {\n // Priority order: action buttons first, then other elements, close buttons last\n let elementToFocus = null;\n\n // 1. First priority: primary action buttons (ae-btn ae-btn-primary)\n elementToFocus = Array.from(focusableElements).find(el =>\n el.classList.contains('ae-btn') && el.classList.contains('ae-btn-primary'),\n );\n\n // 2. Second priority: other action buttons (ae-btn but not close buttons)\n if (!elementToFocus) {\n elementToFocus = Array.from(focusableElements).find(el =>\n el.classList.contains('ae-btn') && !el.classList.contains('mfp-close'),\n );\n }\n\n // 3. Third priority: other focusable elements (not close buttons)\n if (!elementToFocus) {\n elementToFocus = Array.from(focusableElements).find(el =>\n !el.classList.contains('mfp-close'),\n );\n }\n\n // 4. Last resort: any focusable element including close buttons\n if (!elementToFocus) {\n elementToFocus = focusableElements[0];\n }\n\n // Focus on the selected element\n requestAnimationFrame(() => {\n elementToFocus.focus();\n });\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n connect() {\n // Store bound handler for proper cleanup\n this.boundHandleSelectionChange = this.handleSelectionChange.bind(this);\n\n // Listen for bulk selection changes\n document.addEventListener('bulk-select:changed', this.boundHandleSelectionChange);\n }\n\n disconnect() {\n document.removeEventListener('bulk-select:changed', this.boundHandleSelectionChange);\n }\n\n handleSelectionChange(event) {\n const { orderNumbers } = event.detail;\n this.selectedOrderNumbers = orderNumbers;\n }\n\n generate(event) {\n event.preventDefault();\n\n if (!this.selectedOrderNumbers || this.selectedOrderNumbers.length === 0) {\n this.showNoSelectionAlert();\n return;\n }\n\n const saleId = this.getSaleId();\n if (!saleId) {\n this.showErrorAlert('Unable to generate: Sale ID not found');\n return;\n }\n\n // Build URL with selected order IDs\n const url = `/teamsites/${saleId}/packing_slips/bulk`;\n const params = new URLSearchParams();\n\n // Add each order ID as selected_orders[]\n this.selectedOrderNumbers.forEach(orderNumber => {\n params.append('selected_orders[]', orderNumber);\n });\n\n const fullUrl = `${url}?${params.toString()}`;\n\n // Open in new window with error handling\n try {\n window.open(fullUrl, '_blank');\n } catch (error) {\n // Handle popup blockers or other window.open failures gracefully\n // Silent failure - popup blockers are expected in some environments\n }\n }\n\n getSaleId() {\n // Try to get sale ID from URL path\n const pathMatch = window.location.pathname.match(/\\/teamsites\\/(\\d+)/);\n if (pathMatch) {\n return pathMatch[1];\n }\n\n // Fallback: try to get from a data attribute on the page\n const saleElement = document.querySelector('[data-sale-id]');\n if (saleElement) {\n return saleElement.dataset.saleId;\n }\n\n return null;\n }\n\n showNoSelectionAlert() {\n const alertDiv = document.createElement('div');\n alertDiv.className = 'ae-alert ae-alert-warning';\n alertDiv.textContent = 'Please select at least one order to generate packing slips.';\n alertDiv.style.cssText = 'position:fixed;top:20px;right:20px;z-index:9999;';\n\n document.body.appendChild(alertDiv);\n\n setTimeout(() => {\n if (alertDiv.parentNode) {\n alertDiv.remove();\n }\n }, 3000);\n }\n\n showErrorAlert(message) {\n const alertDiv = document.createElement('div');\n alertDiv.className = 'ae-alert ae-alert-danger';\n alertDiv.textContent = message;\n alertDiv.style.cssText = 'position:fixed;top:20px;right:20px;z-index:9999;';\n\n document.body.appendChild(alertDiv);\n\n setTimeout(() => {\n if (alertDiv.parentNode) {\n alertDiv.remove();\n }\n }, 3000);\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n connect() {\n // Store bound handler for proper cleanup\n this.boundHandleSelectionChange = this.handleSelectionChange.bind(this);\n\n // Listen for bulk selection changes\n document.addEventListener('bulk-select:changed', this.boundHandleSelectionChange);\n }\n\n disconnect() {\n document.removeEventListener('bulk-select:changed', this.boundHandleSelectionChange);\n }\n\n handleSelectionChange(event) {\n const { orderNumbers } = event.detail;\n this.selectedOrderNumbers = orderNumbers;\n }\n\n generate(event) {\n event.preventDefault();\n\n if (!this.selectedOrderNumbers || this.selectedOrderNumbers.length === 0) {\n this.showNoSelectionAlert();\n return;\n }\n\n const saleId = this.getSaleId();\n if (!saleId) {\n this.showErrorAlert('Unable to generate: Sale ID not found');\n return;\n }\n\n // Build URL with selected order IDs\n const url = `/teamsites/${saleId}/receipts/bulk`;\n const params = new URLSearchParams();\n\n // Add each order ID as selected_orders[]\n this.selectedOrderNumbers.forEach(orderNumber => {\n params.append('selected_orders[]', orderNumber);\n });\n\n const fullUrl = `${url}?${params.toString()}`;\n\n // Open in new window with error handling\n try {\n window.open(fullUrl, '_blank');\n } catch (error) {\n // Handle popup blockers or other window.open failures gracefully\n // Silent failure - popup blockers are expected in some environments\n }\n }\n\n getSaleId() {\n // Try to get sale ID from URL path\n const pathMatch = window.location.pathname.match(/\\/teamsites\\/(\\d+)/);\n if (pathMatch) {\n return pathMatch[1];\n }\n\n // Fallback: try to get from a data attribute on the page\n const saleElement = document.querySelector('[data-sale-id]');\n if (saleElement) {\n return saleElement.dataset.saleId;\n }\n\n return null;\n }\n\n showNoSelectionAlert() {\n const alertDiv = document.createElement('div');\n alertDiv.className = 'ae-alert ae-alert-warning';\n alertDiv.textContent = 'Please select at least one order to generate receipts.';\n alertDiv.style.cssText = 'position:fixed;top:20px;right:20px;z-index:9999;';\n\n document.body.appendChild(alertDiv);\n\n setTimeout(() => {\n if (alertDiv.parentNode) {\n alertDiv.remove();\n }\n }, 3000);\n }\n\n showErrorAlert(message) {\n const alertDiv = document.createElement('div');\n alertDiv.className = 'ae-alert ae-alert-danger';\n alertDiv.textContent = message;\n alertDiv.style.cssText = 'position:fixed;top:20px;right:20px;z-index:9999;';\n\n document.body.appendChild(alertDiv);\n\n setTimeout(() => {\n if (alertDiv.parentNode) {\n alertDiv.remove();\n }\n }, 3000);\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['toggleAll', 'checkbox', 'bulkActionsBtn'];\n\n\n connect() {\n this.updateBulkActionsVisibility();\n }\n\n toggleAll(event) {\n const isChecked = event.currentTarget.checked;\n\n // Update all individual checkboxes in this table\n if (this.checkboxTargets && this.checkboxTargets.length > 0) {\n this.checkboxTargets.forEach(checkbox => {\n checkbox.checked = isChecked;\n });\n }\n\n this.updateBulkActionsVisibility();\n this.dispatchSelectionChangeEvent();\n }\n\n checkboxChanged(event) {\n this.updateToggleAllState();\n this.updateBulkActionsVisibility();\n this.dispatchSelectionChangeEvent();\n }\n\n updateToggleAllState() {\n if (this.hasToggleAllTarget && this.toggleAllTarget && this.checkboxTargets && this.checkboxTargets.length > 0) {\n const totalCheckboxes = this.checkboxTargets.length;\n const checkedCheckboxes = this.getSelectedCheckboxes().length;\n\n // Toggle All is checked only if all individual checkboxes are checked\n this.toggleAllTarget.checked = totalCheckboxes > 0 && totalCheckboxes === checkedCheckboxes;\n }\n }\n\n updateBulkActionsVisibility() {\n const selectedCount = this.getSelectedCheckboxes().length;\n const bulkActionsContainer = document.querySelector('.bulk-actions-dropdown');\n\n if (bulkActionsContainer) {\n if (selectedCount > 0) {\n bulkActionsContainer.classList.remove('ae-hidden');\n this.updateBulkActionsButtonText(selectedCount);\n } else {\n bulkActionsContainer.classList.add('ae-hidden');\n }\n }\n }\n\n updateBulkActionsButtonText(count) {\n // Try to use the target first (preferred)\n if (this.hasBulkActionsBtnTarget && this.bulkActionsBtnTarget) {\n const textElement = this.bulkActionsBtnTarget.querySelector('.text');\n if (textElement) {\n textElement.textContent = `Bulk Actions (${count})`;\n return;\n }\n }\n\n // Fallback to document query for compatibility\n const bulkActionsButton = document.querySelector('[data-target=\"sale-orders-bulk-select.bulkActionsBtn\"] .text');\n if (bulkActionsButton) {\n bulkActionsButton.textContent = `Bulk Actions (${count})`;\n }\n }\n\n getSelectedCheckboxes() {\n return (this.checkboxTargets && this.checkboxTargets.length > 0) ? this.checkboxTargets.filter(checkbox => checkbox.checked) : [];\n }\n\n getSelectedOrderNumbers() {\n return this.getSelectedCheckboxes()\n .map(checkbox => checkbox.dataset.orderNumber)\n .filter(orderNumber => orderNumber);\n }\n\n getSelectedOrderStates() {\n return this.getSelectedCheckboxes()\n .map(checkbox => checkbox.dataset.state)\n .filter(state => state);\n }\n\n dispatchSelectionChangeEvent() {\n const selectedCheckboxes = this.getSelectedCheckboxes();\n const selectedOrderNumbers = this.getSelectedOrderNumbers();\n\n const event = new CustomEvent('bulk-select:changed', {\n detail: {\n count: selectedCheckboxes.length,\n orderNumbers: selectedOrderNumbers,\n states: this.getSelectedOrderStates(),\n checkboxes: selectedCheckboxes,\n },\n bubbles: true,\n });\n\n this.element.dispatchEvent(event);\n }\n}\n", "import { Controller } from '../stimulus';\n\n/**\n * Page Header Actions Controller\n *\n * Manages bulk operations for ALL orders in the current view:\n * - Generate Packing Slips for all orders\n * - Generate Receipts for all orders\n *\n * Features:\n * - Opens HTML generation URLs in new windows\n * - Multi-tenant sale ID handling\n *\n * Usage:\n *
\n * sale-orders-index-page-header-actions#generatePackingSlips\">\n * Generate Packing Slips\n * \n * sale-orders-index-page-header-actions#generateReceipts\">\n * Generate Receipts\n * \n * \n */\nexport default class extends Controller {\n connect() {\n this.saleId = this.element.dataset.saleId;\n }\n\n /**\n * Generate Packing Slips for ALL orders in current view\n */\n generatePackingSlips(event) {\n event.preventDefault();\n\n if (!this.saleId) {\n return;\n }\n\n const url = `/teamsites/${this.saleId}/packing_slips`;\n window.open(url, '_blank');\n }\n\n /**\n * Generate Receipts for ALL orders in current view\n */\n generateReceipts(event) {\n event.preventDefault();\n\n if (!this.saleId) {\n return;\n }\n\n const url = `/teamsites/${this.saleId}/receipts`;\n window.open(url, '_blank');\n }\n}\n", "import { Controller } from '../stimulus';\n\n/**\n * Print Controller\n *\n * Handles page printing functionality for sale orders.\n * Provides unified print behavior across dealers and teamsites.\n *\n * Features:\n * - Triggers browser print dialog\n * - Event handling with prevention of default link behavior\n *\n * Usage:\n *
\n * sale-orders-index-print#click\">\n * Print This Page\n * \n * \n */\nexport default class extends Controller {\n /**\n * Handle print action\n * Prevents default link behavior and triggers print dialog\n */\n click(event) {\n event.preventDefault();\n\n // Trigger browser print dialog\n window.print();\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['filterTab', 'section'];\n\n connect() {\n this.initializeFilter();\n this.initializeFromUrl();\n }\n\n initializeFilter() {\n // Show all sections by default\n this.showAllSections();\n this.updateTabCounts();\n }\n\n filterByStatus(event) {\n event.preventDefault();\n\n const clickedTab = event.currentTarget;\n const targetStatus = clickedTab.dataset.status;\n\n // Update active tab\n this.setActiveTab(clickedTab);\n\n // Show/hide sections based on filter\n if (targetStatus === 'all') {\n this.showAllSections();\n } else {\n this.showSectionByStatus(targetStatus);\n }\n\n // Update URL to preserve filter state\n this.updateUrlFilter(targetStatus);\n }\n\n setActiveTab(activeTab) {\n // Remove active class from all tabs\n this.filterTabTargets.forEach(tab => {\n tab.classList.remove('active', 'ae-btn-primary');\n tab.classList.add('ae-btn-secondary');\n });\n\n // Add active class to clicked tab\n activeTab.classList.add('active', 'ae-btn-primary');\n activeTab.classList.remove('ae-btn-secondary');\n }\n\n showAllSections() {\n this.sectionTargets.forEach(section => {\n section.style.display = 'block';\n });\n }\n\n showSectionByStatus(status) {\n this.sectionTargets.forEach(section => {\n const sectionStatus = section.dataset.status;\n if (sectionStatus === status) {\n section.style.display = 'block';\n } else {\n section.style.display = 'none';\n }\n });\n }\n\n updateTabCounts() {\n // Update count badges on tabs based on visible orders\n this.filterTabTargets.forEach(tab => {\n const status = tab.dataset.status;\n const count = this.getCountForStatus(status);\n const countElement = tab.querySelector('.count');\n\n if (countElement) {\n countElement.textContent = count.toString();\n }\n });\n }\n\n getCountForStatus(status) {\n if (status === 'all') {\n return this.getTotalOrderCount();\n }\n\n const section = this.sectionTargets.find(s => s.dataset.status === status);\n if (section) {\n const tables = section.querySelectorAll('table tbody tr');\n return tables.length;\n }\n\n return 0;\n }\n\n getTotalOrderCount() {\n let total = 0;\n this.sectionTargets.forEach(section => {\n const tables = section.querySelectorAll('table tbody tr');\n total += tables.length;\n });\n return total;\n }\n\n updateUrlFilter(status) {\n const url = new URL(window.location);\n if (status && status !== 'all') {\n url.searchParams.set('filter', status);\n } else {\n url.searchParams.delete('filter');\n }\n\n // Update URL without page reload\n window.history.replaceState({}, '', url);\n }\n\n // Initialize filter based on URL parameter on page load\n initializeFromUrl() {\n const urlParams = new URLSearchParams(window.location.search);\n const filter = urlParams.get('filter');\n\n if (filter) {\n const tab = this.filterTabTargets.find(t => t.dataset.status === filter);\n if (tab) {\n this.setActiveTab(tab);\n this.showSectionByStatus(filter);\n }\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n connect() {\n // Make row clickable but prevent checkbox clicks from triggering navigation\n this.element.style.cursor = 'pointer';\n }\n\n rowClick(event) {\n // Don't navigate if clicking on interactive elements\n if (this.shouldIgnoreClick(event.target)) {\n return;\n }\n\n const orderDetailsUrl = this.getOrderDetailsUrl();\n if (orderDetailsUrl) {\n window.location.href = orderDetailsUrl;\n }\n }\n\n shouldIgnoreClick(target) {\n // Don't navigate when clicking on:\n // - Checkboxes and their labels\n // - Links\n // - Buttons\n // - Dropdowns and their content\n // - Form controls\n // - Order fulfillment dropdown elements\n\n const ignoredSelectors = [\n 'input[type=\"checkbox\"]',\n 'label',\n 'a',\n 'button',\n '.ae-dropdown',\n '.ae-dropdown-content',\n '.ae-dropdown-link',\n 'select',\n 'textarea',\n 'input',\n '.select-fulfill-status',\n '.fa-cog',\n '.fulfillment-actions',\n '.select2-container',\n '.select2-selection',\n '.select2-selection__rendered',\n '.select2-selection__placeholder',\n '.select2-selection__arrow',\n ];\n\n // Check if the clicked element or any parent matches ignored selectors\n let element = target;\n while (element && element !== this.element) {\n for (const selector of ignoredSelectors) {\n if (element.matches && element.matches(selector)) {\n return true;\n }\n }\n\n // Special check for elements inside dropdown content\n if (element.closest && element.closest('.ae-dropdown-content')) {\n return true;\n }\n\n // Special check for order fulfillment dropdown elements\n if (element.dataset && element.dataset.controller) {\n if (element.dataset.controller.includes('order-fulfillment-dropdown')) {\n return true;\n }\n }\n\n element = element.parentElement;\n }\n\n return false;\n }\n\n getOrderDetailsUrl() {\n // First try to get from a data attribute\n if (this.element.dataset.orderDetailsPage) {\n return this.element.dataset.orderDetailsPage;\n }\n\n // Fallback: construct URL from sale ID and order number (correct route format)\n const saleId = this.element.dataset.saleId;\n const orderNumber = this.element.dataset.orderNumber;\n\n if (orderNumber && saleId) {\n return `/teamsites/${saleId}/orders/${orderNumber}`;\n }\n\n // Try to find a link within the row as final fallback\n const orderLink = this.element.querySelector('a[href*=\"/orders/\"]');\n if (orderLink) {\n return orderLink.href;\n }\n\n return null;\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n connect() {\n this.isProcessing = false;\n }\n\n click(event) {\n event.preventDefault();\n event.stopPropagation();\n\n if (this.isProcessing) {\n return;\n }\n\n const productId = this.element.dataset.productId;\n const saleId = this.element.dataset.saleId;\n\n if (!productId || !saleId) {\n return;\n }\n\n this.isProcessing = true;\n\n const icon = this.element.querySelector('i.fa-bookmark');\n const textNode = this._findTextNode();\n const originalPrefix = icon ? (icon.classList.contains('far') ? 'far' : 'fas') : null;\n const originalText = textNode ? textNode.textContent : null;\n\n this._showLoadingState(icon, textNode);\n\n const url = `/teamsites/${saleId}/products/${productId}/add_to_library`;\n\n fetch(url, {\n method: 'POST',\n headers: {\n 'X-CSRF-Token': document.querySelector('meta[name=\"csrf-token\"]').content,\n 'Accept': 'application/json',\n 'Content-Type': 'application/json',\n },\n credentials: 'same-origin',\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n return response.json();\n })\n .then(data => {\n if (data.message) {\n if (window.App && typeof window.App.showSuccessFlash === 'function') {\n window.App.showSuccessFlash(data.message);\n }\n }\n\n if (icon) {\n icon.classList.remove('fa', 'fa-spinner', 'fa-spin');\n icon.classList.add('fas', 'fa-bookmark');\n }\n if (textNode) {\n textNode.textContent = ' In Library';\n }\n this.element.title = 'In Library';\n this.element.dataset.inLibrary = 'true';\n })\n .catch(() => {\n if (icon && originalPrefix) {\n icon.classList.remove('fa', 'fa-spinner', 'fa-spin');\n icon.classList.add(originalPrefix, 'fa-bookmark');\n }\n if (textNode && originalText !== null) {\n textNode.textContent = originalText;\n }\n\n if (window.App && typeof window.App.showErrorFlash === 'function') {\n window.App.showErrorFlash('Something went wrong while adding the product to your library.');\n }\n })\n .finally(() => {\n this.isProcessing = false;\n this._hideLoadingState();\n this._resetButtonDebounce();\n });\n }\n\n _showLoadingState(icon, textNode) {\n if (icon) {\n icon.classList.remove('far', 'fas', 'fa-bookmark');\n icon.classList.add('fa', 'fa-spinner', 'fa-spin');\n }\n if (textNode) {\n textNode.textContent = ' Adding...';\n }\n this.element.disabled = true;\n this.element.classList.add('ae-btn-disabled');\n }\n\n _hideLoadingState() {\n this.element.disabled = false;\n this.element.classList.remove('ae-btn-disabled');\n }\n\n _findTextNode() {\n const nodes = this.element.childNodes;\n for (let i = 0; i < nodes.length; i++) {\n if (nodes[i].nodeType === Node.TEXT_NODE && nodes[i].textContent.trim().length > 0) {\n return nodes[i];\n }\n }\n return null;\n }\n\n _resetButtonDebounce() {\n if (this.application) {\n const debounceController = this.application.getControllerForElementAndIdentifier(\n this.element, 'button-debounce',\n );\n if (debounceController && typeof debounceController.manualReset === 'function') {\n debounceController.manualReset();\n }\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['button'];\n\n initialize() {\n this.tippyInstance = null;\n }\n\n disconnect() {\n // Clean up tippy instance to prevent memory leaks\n if (this.tippyInstance) {\n this.tippyInstance.destroy();\n this.tippyInstance = null;\n }\n }\n\n showPopover(e) {\n e.preventDefault();\n e.stopPropagation();\n\n // Get data attributes from the controller element (not button) to avoid race conditions\n const productId = this.element.dataset.productId;\n\n if (!productId) {\n // Missing product ID\n return;\n }\n\n const popoverSelector = `#add-color-popover-${productId}`;\n\n // Check if tippy is available\n if (typeof tippy === 'undefined') {\n // Tippy.js is not loaded\n if (window.App && typeof window.App.showErrorFlash === 'function') {\n window.App.showErrorFlash('Unable to show color options. Please refresh the page.');\n }\n return;\n }\n\n // Check if popover element exists\n const popoverElement = document.querySelector(popoverSelector);\n if (!popoverElement) {\n // Could not find popover element\n if (window.App && typeof window.App.showErrorFlash === 'function') {\n window.App.showErrorFlash('Unable to show color options. Please refresh the page.');\n }\n return;\n }\n\n // Destroy existing instance to prevent memory leaks\n if (this.tippyInstance) {\n this.tippyInstance.destroy();\n }\n\n // Use the same pattern as add_category_popover_controller\n const tippyContainer = new tippy(this.buttonTarget, {\n html: popoverSelector,\n interactive: true,\n reactive: true,\n arrow: true,\n placement: 'right',\n flipBehavior: ['right', 'left', 'top', 'bottom'],\n boundary: 'viewport',\n theme: 'light',\n trigger: 'manual',\n onShown: (instance) => {\n // Use requestAnimationFrame to ensure DOM is ready\n requestAnimationFrame(() => {\n // Try multiple selectors to find the input field\n const inputField = instance.popper.querySelector('input[type=\"text\"]') ||\n instance.popper.querySelector('.ae-text-field') ||\n instance.popper.querySelector('[data-target*=\"input\"]');\n if (inputField) {\n inputField.focus();\n inputField.select();\n }\n });\n },\n onHidden: () => {\n // Clean up reference when hidden\n if (this.tippyInstance) {\n this.tippyInstance.destroy();\n this.tippyInstance = null;\n }\n },\n });\n\n const popper = tippyContainer.tooltips[0].popper;\n this.tippyInstance = popper._tippy;\n this.tippyInstance.show();\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n initialize() {\n this.saleId = this.element.dataset.saleId;\n this.productId = this.element.dataset.productId;\n }\n\n click(e) {\n e.preventDefault();\n\n const url = `/teamsites/${this.saleId}/custom_fields/new_custom_field?product_id=${this.productId}`;\n\n fetch(url, {\n headers: {\n 'X-CSRF-Token': document.querySelector('meta[name=\"csrf-token\"]').content,\n },\n })\n .then(response => response.text())\n .then(html => {\n const tableElement = document.getElementById(`product-custom-fields-table-${this.productId}`);\n if (tableElement) {\n tableElement.insertAdjacentHTML('beforeend', html);\n }\n })\n .catch(error => {\n // Error adding custom field\n });\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n click(event) {\n event.preventDefault();\n event.stopPropagation();\n\n const productId = this.element.dataset.productId;\n const saleId = this.element.dataset.saleId;\n\n if (!productId || !saleId) {\n return;\n }\n\n const url = `/teamsites/${saleId}/products/${productId}/clone`;\n const confirmMessage = 'Are you sure you wish to clone this product?';\n\n if (!confirm(confirmMessage)) {\n return;\n }\n\n // Add loading state to the products tab\n const productsTab = document.getElementById('ae-tab-products');\n if (productsTab) {\n productsTab.classList.add('is-loading');\n }\n\n fetch(url, {\n method: 'POST',\n headers: {\n 'X-CSRF-Token': document.querySelector('meta[name=\"csrf-token\"]').content,\n 'Accept': 'application/json',\n 'Content-Type': 'application/json',\n },\n credentials: 'same-origin',\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n return response.json();\n })\n .then(data => {\n // Remove loading state\n if (productsTab) {\n productsTab.classList.remove('is-loading');\n }\n\n // Show success message\n if (data.message) {\n if (window.App && typeof window.App.showSuccessFlash === 'function') {\n window.App.showSuccessFlash(data.message);\n }\n }\n\n // Navigate to the cloned product edit page\n // Add refresh parameter to trigger sidebar cache invalidation\n const redirectUrl = `/teamsites/${data.sale_id}/products/${data.product_id}/edit?refresh=${Date.now()}`;\n Turbolinks.visit(redirectUrl);\n })\n .catch(() => {\n // Remove loading state\n if (productsTab) {\n productsTab.classList.remove('is-loading');\n }\n\n if (window.App && typeof window.App.showErrorFlash === 'function') {\n window.App.showErrorFlash('Something went wrong while cloning the product.');\n } else {\n // Something went wrong while cloning the product\n }\n });\n }\n}\n", "import { Controller } from '../stimulus';\nimport CSRFTokenMixin from '../mixins/csrf_token_mixin';\nimport SidebarRefreshMixin from '../mixins/sidebar_refresh_mixin';\n\nimport AjaxPopupController from './ajax_popup_controller';\nimport { debounce } from './debounce';\n\nexport default class extends Controller {\n initialize() {\n // Apply the mixins (CSRFTokenMixin is required by SidebarRefreshMixin)\n Object.assign(this, CSRFTokenMixin, SidebarRefreshMixin);\n\n this.saleId = this.element.dataset.saleId;\n this.productId = this.element.dataset.productId;\n this.form = document.getElementById(`product-form-${this.productId}`);\n this.debouncedSave = debounce(this.save.bind(this), 300);\n\n // Seed sessionStorage for newly created products so the color modal\n // opens on the first explicit save. sessionStorage survives AJAX\n // pushState navigation unlike URL params.\n const params = new URLSearchParams(window.location.search);\n if (params.get('newly_created') === 'true' && this.productId) {\n sessionStorage.setItem('color_modal_pending_' + this.productId, 'true');\n // Strip param from URL to prevent re-seeding on back/forward navigation\n const cleanUrl = new URL(window.location.href);\n cleanUrl.searchParams.delete('newly_created');\n window.history.replaceState({}, '', cleanUrl.toString());\n }\n\n // Auto-save state\n this.isSaving = false;\n this.pendingSaveRequested = false;\n\n // Bind handlers for cleanup\n this.boundHandleFieldBlur = this.handleFieldBlur.bind(this);\n this.boundHandleFieldChange = this.handleFieldChange.bind(this);\n this.boundHandleTrixBlur = this.handleTrixBlur.bind(this);\n }\n\n connect() {\n if (this.form) {\n this.form.addEventListener('submit', this.debouncedSave);\n }\n this.setupAutoSave();\n }\n\n disconnect() {\n if (this.debouncedSave && this.debouncedSave.cancel) {\n this.debouncedSave.cancel();\n }\n if (this.form) {\n this.form.removeEventListener('submit', this.debouncedSave);\n }\n this.teardownAutoSave();\n }\n\n // ============================================================================\n // AUTO-SAVE SETUP\n // ============================================================================\n\n setupAutoSave() {\n this.debouncedAutoSave = debounce(() => {\n this.performSave({\n refreshSidebar: false,\n showFlash: false,\n showLoadingOverlay: false,\n showColorModal: false,\n });\n }, 1000);\n\n if (this.form) {\n // blur uses capture phase to catch events from all child inputs\n this.form.addEventListener('blur', this.boundHandleFieldBlur, true);\n this.form.addEventListener('change', this.boundHandleFieldChange);\n }\n // Trix editor blur\n document.addEventListener('trix-blur', this.boundHandleTrixBlur);\n }\n\n teardownAutoSave() {\n if (this.debouncedAutoSave && this.debouncedAutoSave.cancel) {\n this.debouncedAutoSave.cancel();\n }\n if (this.form) {\n this.form.removeEventListener('blur', this.boundHandleFieldBlur, true);\n this.form.removeEventListener('change', this.boundHandleFieldChange);\n }\n document.removeEventListener('trix-blur', this.boundHandleTrixBlur);\n }\n\n handleFieldBlur(e) {\n const target = e.target;\n if (this.shouldSkipAutoSave(target)) return;\n if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {\n this.debouncedAutoSave();\n }\n }\n\n handleFieldChange(e) {\n const target = e.target;\n if (this.shouldSkipAutoSave(target)) return;\n if (target.tagName === 'SELECT' || target.type === 'checkbox') {\n this.debouncedAutoSave();\n }\n }\n\n handleTrixBlur(e) {\n if (this.form && this.form.contains(e.target)) {\n this.debouncedAutoSave();\n }\n }\n\n shouldSkipAutoSave(target) {\n if (!this.form || !this.form.contains(target)) return true;\n if (target.type === 'hidden' && !(target.name && target.name.indexOf('description') !== -1)) return true;\n if (target.name && target.name.indexOf('authenticity_token') !== -1) return true;\n if (target.name && target.name.indexOf('available') !== -1) return true;\n if (target.type === 'file') return true;\n return false;\n }\n\n // ============================================================================\n // CORE SAVE LOGIC\n // ============================================================================\n\n async performSave(opts) {\n const options = opts || {};\n const refreshSidebar = options.refreshSidebar !== false;\n const showFlash = options.showFlash !== false;\n const showLoadingOverlay = options.showLoadingOverlay !== false;\n const showColorModal = options.showColorModal !== false;\n\n // Concurrency: if already saving, mark that a re-save is needed after completion\n if (this.isSaving) {\n this.pendingSaveRequested = true;\n return false;\n }\n this.isSaving = true;\n\n if (showLoadingOverlay) {\n document.body.classList.add('is-loading');\n }\n\n let response;\n\n try {\n if (!this.form) {\n throw new Error('Form not found');\n }\n\n let formData;\n let params;\n\n try {\n formData = new FormData(this.form);\n params = new URLSearchParams(formData);\n } catch (/* eslint-disable-line no-unused-vars */ _error) {\n if (showFlash && window.App && typeof window.App.showErrorFlash === 'function') {\n window.App.showErrorFlash('Invalid form data. Please check your input.');\n }\n return false;\n }\n\n if (!this.form.action) {\n throw new Error('Form action is missing');\n }\n\n response = await fetch(this.form.action, {\n method: this.form.method || 'post',\n headers: {\n 'Content-Type': 'application/x-www-form-urlencoded',\n 'Accept': 'application/json',\n 'X-CSRF-Token': this.getCSRFToken(),\n },\n body: params.toString(),\n });\n\n if (response.ok) {\n const data = await response.json();\n\n // Dispatch product:saved event to notify dirty tracker\n this.form.dispatchEvent(new CustomEvent('product:saved', {\n bubbles: true,\n detail: { productId: this.productId },\n }));\n\n // Targeted sidebar price update (works for both auto-save and explicit save)\n this.updateSidebarProduct(data);\n\n if (showFlash && window.App && typeof window.App.showSuccessFlash === 'function') {\n window.App.showSuccessFlash('Product updated successfully');\n }\n\n if (refreshSidebar) {\n try {\n await this.refreshSidebar();\n } catch (/* eslint-disable-line no-unused-vars */ _error) {\n // Failed to refresh sidebar - not critical\n }\n }\n\n // Only show color modal on first explicit save after product creation\n if (showColorModal && data.show_color_modal && data.color_modal_url) {\n const key = 'color_modal_pending_' + this.productId;\n if (sessionStorage.getItem(key) === 'true') {\n sessionStorage.removeItem(key);\n this.openColorModal(data.color_modal_url);\n }\n }\n\n return true;\n } else {\n // Handle validation errors (422) for auto-save\n if (!showFlash && response.status === 422) {\n try {\n const errorData = await response.json();\n this.showValidationErrors(errorData.field_errors);\n } catch (/* eslint-disable-line no-unused-vars */ _parseError) {\n // Could not parse error response\n }\n } else if (showFlash && window.App && typeof window.App.showErrorFlash === 'function') {\n window.App.showErrorFlash('Something went wrong.');\n }\n return false;\n }\n } catch (/* eslint-disable-line no-unused-vars */ _error) {\n if (showFlash && window.App && typeof window.App.showErrorFlash === 'function') {\n window.App.showErrorFlash('Something went wrong.');\n }\n return false;\n } finally {\n this.isSaving = false;\n if (showLoadingOverlay) {\n document.body.classList.remove('is-loading');\n }\n\n // If another save was requested while we were saving, trigger it now\n if (this.pendingSaveRequested) {\n this.pendingSaveRequested = false;\n this.debouncedAutoSave();\n }\n }\n }\n\n async save(e) {\n e.preventDefault();\n // Cancel any pending auto-save debounce \u2014 explicit save takes priority\n if (this.debouncedAutoSave && this.debouncedAutoSave.cancel) {\n this.debouncedAutoSave.cancel();\n }\n await this.performSave({\n refreshSidebar: true,\n showFlash: true,\n showLoadingOverlay: true,\n showColorModal: true,\n });\n }\n\n cancel(e) {\n e.preventDefault();\n Turbolinks.visit(`/teamsites/${this.saleId}/products`);\n }\n\n /**\n * Opens the product colors modal for unverified products\n * Small delay ensures flash message is visible before modal opens\n */\n openColorModal(url) {\n setTimeout(() => {\n AjaxPopupController.open(url);\n }, 100);\n }\n\n showValidationErrors(fieldErrors) {\n if (!fieldErrors) return;\n\n const messages = [];\n for (const field in fieldErrors) {\n if (Object.prototype.hasOwnProperty.call(fieldErrors, field)) {\n messages.push(field + ' ' + fieldErrors[field].join(', '));\n }\n }\n if (messages.length > 0 && window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Save failed: ' + messages.join('; '));\n }\n }\n\n updateSidebarProduct(data) {\n var item = document.getElementById('sidebar-product-list-item-' + this.productId);\n if (!item) return;\n\n if (data.formatted_price) {\n var priceEl = item.querySelector('.product-price');\n if (priceEl) priceEl.textContent = data.formatted_price;\n }\n }\n}\n", "import { Controller } from '../stimulus';\nimport CSRFTokenMixin from '../mixins/csrf_token_mixin';\n\nexport default class extends Controller {\n static targets = ['content', 'tab'];\n\n initialize() {\n // Apply the CSRF token mixin\n Object.assign(this, CSRFTokenMixin);\n\n this.saleId = this.element.dataset.saleId;\n this.productId = this.element.dataset.productId;\n this.loading = false;\n }\n\n connect() {\n // Handle browser back/forward navigation\n this.handlePopstate = this.handlePopstate.bind(this);\n window.addEventListener('popstate', this.handlePopstate);\n }\n\n disconnect() {\n // Clean up event listeners to prevent memory leaks\n window.removeEventListener('popstate', this.handlePopstate);\n\n // Clean up any remaining loading indicators\n this.removeLoadingIndicator();\n\n // Clean up any error messages\n this.removeErrorMessages();\n }\n\n async navigate(event) {\n // Check for unsaved changes in the product form before navigating\n const dirtyTrackerElement = document.querySelector('[data-controller*=\"product-form-dirty-tracker\"]');\n if (dirtyTrackerElement) {\n const dirtyTracker = this.application.getControllerForElementAndIdentifier(\n dirtyTrackerElement,\n 'product-form-dirty-tracker',\n );\n\n if (dirtyTracker && dirtyTracker.hasDirtyState()) {\n // Let the dirty tracker's document-level handler show the modal\n // Don't prevent default here - the dirty tracker will handle it\n return;\n }\n }\n\n event.preventDefault();\n\n // Prevent multiple simultaneous requests\n if (this.loading) {\n // Provide feedback that a request is already in progress\n this.showAlreadyLoadingFeedback();\n return;\n }\n\n const link = event.currentTarget;\n const subtab = link.dataset.subtab || '';\n const url = `/teamsites/${this.saleId}/products/${this.productId}/subtab_content`;\n\n // Store the current subtab for use in replaceContent\n this.currentNavigationSubtab = subtab;\n\n // Update active state immediately for better UX\n this.updateActiveTab(link);\n\n // Show loading state\n this.showLoadingState();\n this.loading = true;\n\n try {\n const finalUrl = subtab ? `${url}?st=${subtab}` : url;\n const response = await fetch(finalUrl, {\n method: 'GET',\n headers: this.getHeadersWithCSRF({\n 'Accept': 'text/html',\n 'X-Requested-With': 'XMLHttpRequest',\n }),\n credentials: 'same-origin',\n });\n\n if (response.ok) {\n const html = await response.text();\n this.replaceContent(html);\n\n // Update browser URL without triggering Turbolinks\n const newUrl = subtab\n ? `/teamsites/${this.saleId}/products/${this.productId}/edit?st=${subtab}`\n : `/teamsites/${this.saleId}/products/${this.productId}/edit`;\n\n // Only push state if we're not handling a popstate event\n if (!this.isHandlingPopstate) {\n window.history.pushState({\n turbolinks: false,\n subtab: subtab,\n isSubtabNavigation: true,\n }, '', newUrl);\n }\n this.isHandlingPopstate = false;\n } else {\n // Handle specific error cases with user feedback\n if (response.status === 400) {\n // Invalid subtab parameter\n // Invalid subtab parameter - user feedback already shown\n this.showUserError('Invalid navigation request. Redirecting to product details...');\n // For invalid subtab, navigate to details tab instead\n const detailsUrl = `/teamsites/${this.saleId}/products/${this.productId}/edit`;\n setTimeout(() => this.fallbackNavigation(detailsUrl), 1500);\n } else if (response.status === 404) {\n // Product not found\n // Product not found - user feedback already shown\n this.showUserError('Product not found. Redirecting to products list...');\n // For missing product, navigate to products index\n const productsUrl = `/teamsites/${this.saleId}/products`;\n setTimeout(() => this.fallbackNavigation(productsUrl), 1500);\n } else if (response.status === 403) {\n // Access denied\n // Access denied - user feedback already shown\n this.showUserError('Access denied. Please refresh the page or contact support.');\n // Don't navigate away for authorization errors\n } else if (response.status >= 500) {\n // Server error\n // Server error - user feedback already shown\n this.showUserError('Server error occurred. Please try again in a moment...');\n // Retry after a delay for server errors\n setTimeout(() => this.fallbackNavigation(link.href), 2000);\n } else {\n // Failed to load subtab content\n // Failed to load content - user feedback already shown\n this.showUserError('Failed to load content. Redirecting...');\n // Fallback to regular navigation for other errors\n setTimeout(() => this.fallbackNavigation(link.href), 1500);\n }\n }\n } catch (error) {\n // Error loading subtab\n // Error loading subtab - show user feedback\n\n // Provide specific feedback for different error types\n if (error.name === 'TypeError' && error.message.includes('fetch')) {\n this.showUserError('Network error. Please check your connection and try again...');\n } else if (error.name === 'AbortError') {\n this.showUserError('Request was cancelled. Please try again...');\n } else {\n this.showUserError('An unexpected error occurred. Redirecting...');\n }\n\n // Delay navigation to give user time to read the message\n setTimeout(() => this.fallbackNavigation(link.href), 1500);\n } finally {\n // Clear loading state\n this.hideLoadingState();\n this.loading = false;\n }\n }\n\n updateActiveTab(clickedLink) {\n // Remove active class from all tabs\n this.tabTargets.forEach(tab => {\n tab.classList.remove('active-tab');\n });\n\n // Add active class to clicked tab's parent li\n const parentLi = clickedLink.closest('li');\n if (parentLi) {\n parentLi.classList.add('active-tab');\n }\n }\n\n replaceContent(html) {\n if (this.hasContentTarget) {\n // Store references to form elements that might need to maintain state\n const activeElement = document.activeElement;\n const activeElementId = activeElement ? activeElement.id : null;\n\n // Replace the content\n this.contentTarget.innerHTML = html;\n\n // Dispatch a custom event to notify that content has been replaced\n // This allows other controllers to react to the change if needed\n // Use the subtab that was requested in the navigation\n this.contentTarget.dispatchEvent(new CustomEvent('content:replaced', {\n bubbles: true,\n detail: { subtab: this.currentNavigationSubtab || '' },\n }));\n\n // Restore focus if the element still exists\n if (activeElementId) {\n const newActiveElement = document.getElementById(activeElementId);\n if (newActiveElement && typeof newActiveElement.focus === 'function') {\n newActiveElement.focus();\n }\n }\n\n // Turbolinks will automatically initialize new Stimulus controllers\n // when the DOM changes, so we don't need to manually handle it\n }\n }\n\n getCurrentSubtab() {\n // Get the current subtab from the URL or active tab\n const urlParams = new URLSearchParams(window.location.search);\n return urlParams.get('st') || '';\n }\n\n showLoadingState() {\n // Add loading class to content area\n if (this.hasContentTarget) {\n this.contentTarget.classList.add('subtab-loading');\n }\n\n // Disable all tab links during loading\n this.tabTargets.forEach(tab => {\n const link = tab.querySelector('a');\n if (link) {\n link.classList.add('subtab-loading');\n link.style.pointerEvents = 'none';\n link.style.opacity = '0.6';\n }\n });\n\n // Add loading indicator to content area\n this.addLoadingIndicator();\n }\n\n hideLoadingState() {\n // Remove loading class from content area\n if (this.hasContentTarget) {\n this.contentTarget.classList.remove('subtab-loading');\n }\n\n // Re-enable all tab links\n this.tabTargets.forEach(tab => {\n const link = tab.querySelector('a');\n if (link) {\n link.classList.remove('subtab-loading');\n link.style.pointerEvents = '';\n link.style.opacity = '';\n }\n });\n\n // Remove loading indicator\n this.removeLoadingIndicator();\n }\n\n addLoadingIndicator() {\n if (this.hasContentTarget && !this.contentTarget.querySelector('.subtab-loading-indicator')) {\n const loadingIndicator = document.createElement('div');\n loadingIndicator.className = 'subtab-loading-indicator';\n loadingIndicator.innerHTML = `\n
\n
Loading... \n `;\n\n // Add wrapper class for positioning context instead of modifying element style\n if (!this.contentTarget.classList.contains('subtab-loading-wrapper')) {\n this.contentTarget.classList.add('subtab-loading-wrapper');\n }\n\n this.contentTarget.appendChild(loadingIndicator);\n }\n }\n\n removeLoadingIndicator() {\n if (this.hasContentTarget) {\n const loadingIndicator = this.contentTarget.querySelector('.subtab-loading-indicator');\n if (loadingIndicator) {\n loadingIndicator.remove();\n }\n\n // Remove wrapper class\n this.contentTarget.classList.remove('subtab-loading-wrapper');\n }\n }\n\n showAlreadyLoadingFeedback() {\n // Brief visual feedback when user clicks during loading\n if (this.hasContentTarget) {\n const indicator = this.contentTarget.querySelector('.loading-text');\n if (indicator) {\n indicator.textContent = 'Loading...';\n indicator.style.color = '#e74c3c';\n setTimeout(() => {\n indicator.textContent = 'Loading...';\n indicator.style.color = '#666';\n }, 300);\n }\n }\n }\n\n showUserError(message) {\n // Display user-friendly error message\n if (this.hasContentTarget) {\n // Remove any existing error messages\n const existingError = this.contentTarget.querySelector('.subtab-error-message');\n if (existingError) {\n existingError.remove();\n }\n\n // Create error message element\n const errorElement = document.createElement('div');\n errorElement.className = 'subtab-error-message';\n errorElement.innerHTML = `\n
\u26A0\uFE0F
\n
${this.escapeHtml(message)}
\n `;\n\n // Add error styling\n errorElement.style.cssText = `\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: #f8f9fa;\n border: 2px solid #e74c3c;\n border-radius: 6px;\n padding: 20px;\n box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n z-index: 1000;\n text-align: center;\n max-width: 300px;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n `;\n\n // Style the icon and text\n const icon = errorElement.querySelector('.error-icon');\n const text = errorElement.querySelector('.error-text');\n\n if (icon) {\n icon.style.cssText = 'font-size: 24px; margin-bottom: 10px;';\n }\n\n if (text) {\n text.style.cssText = 'color: #e74c3c; font-size: 14px; line-height: 1.4;';\n }\n\n // Add wrapper class for positioning context\n if (!this.contentTarget.classList.contains('subtab-error-wrapper')) {\n this.contentTarget.classList.add('subtab-error-wrapper');\n this.contentTarget.style.position = 'relative';\n }\n\n this.contentTarget.appendChild(errorElement);\n\n // Auto-remove after 3 seconds if still present\n setTimeout(() => {\n if (errorElement.parentNode) {\n errorElement.remove();\n this.contentTarget.classList.remove('subtab-error-wrapper');\n }\n }, 3000);\n }\n }\n\n escapeHtml(text) {\n // Simple HTML escaping to prevent XSS\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n\n removeErrorMessages() {\n // Clean up any error messages during disconnect\n if (this.hasContentTarget) {\n const errorMessages = this.contentTarget.querySelectorAll('.subtab-error-message');\n errorMessages.forEach(msg => msg.remove());\n this.contentTarget.classList.remove('subtab-error-wrapper');\n }\n }\n\n fallbackNavigation(href) {\n // Use Turbolinks if available, otherwise regular navigation\n if (window.Turbolinks) {\n Turbolinks.visit(href);\n } else {\n window.location.href = href;\n }\n }\n\n handlePopstate(event) {\n // Handle browser back/forward navigation\n if (event.state && event.state.isSubtabNavigation) {\n // This was a subtab navigation, handle it via AJAX\n const subtab = event.state.subtab || '';\n\n // Find the corresponding tab link\n const targetLink = this.tabTargets.find(tab => {\n const link = tab.querySelector('a');\n return link && link.dataset.subtab === subtab;\n })?.querySelector('a');\n\n if (targetLink) {\n // Simulate a click on the appropriate tab\n // But bypass the pushState by temporarily setting a flag\n this.isHandlingPopstate = true;\n targetLink.click();\n }\n }\n }\n\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['newForm'];\n\n connect() {\n this.saleId = this.data.get('saleId');\n\n // Bind methods\n this.showForm = this.showForm.bind(this);\n this.hideForm = this.hideForm.bind(this);\n }\n\n showForm(event) {\n event.preventDefault();\n\n // Find the new form table\n const newForm = document.getElementById('new-custom-information-form');\n if (!newForm) return;\n\n // Hide the add link row\n const addRow = this.element.closest('tr');\n if (addRow) {\n addRow.classList.add('ae-u-hidden');\n }\n\n // Show the form\n newForm.classList.remove('ae-hidden');\n\n // Focus the first input\n const firstInput = newForm.querySelector('input[name=\"dealers_sites_custom_field[name]\"]');\n if (firstInput) {\n firstInput.focus();\n }\n }\n\n hideForm(event) {\n event.preventDefault();\n\n // Find the new form table\n const newForm = document.getElementById('new-custom-information-form');\n if (!newForm) return;\n\n // Reset the form\n const form = newForm.closest('form');\n if (form) {\n form.reset();\n }\n\n // Hide the form\n newForm.classList.add('ae-hidden');\n\n // Show the add link row\n const addRow = document.getElementById('add-checkout-option');\n if (addRow) {\n addRow.classList.remove('ae-u-hidden');\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n connect() {\n this.organizationAddressId = this.element.dataset.organizationAddressId;\n this.addressType = this.element.dataset.addressType;\n this.submitting = false;\n }\n\n disconnect() {\n // Clean up any event listeners if needed\n this.submitting = false;\n }\n\n setAsShippingAddress(event) {\n event.preventDefault();\n event.stopPropagation();\n\n // Prevent duplicate submissions\n if (this.submitting) {\n return;\n }\n\n // Get the shipping method type from the modal\n const modal = this.element.closest('[data-controller*=\"sale-settings-shipping-addresses\"]');\n const shippingMethodType = modal?.dataset.shippingMethodType;\n const saleId = modal?.dataset.saleId;\n\n if (!saleId || !shippingMethodType) {\n return;\n }\n\n // Set submitting flag\n this.submitting = true;\n\n // Disable the button\n const button = event.currentTarget || event.target;\n if (button) {\n button.disabled = true;\n button.classList.add('ae-btn-disabled');\n }\n\n // Create shipping method with selected address\n this.createShippingMethodWithAddress(saleId, shippingMethodType, this.organizationAddressId);\n\n // Reset submitting flag after 2 seconds (safety measure)\n setTimeout(() => {\n this.submitting = false;\n if (button) {\n button.disabled = false;\n button.classList.remove('ae-btn-disabled');\n }\n }, 2000);\n }\n\n createShippingMethodWithAddress(saleId, shippingMethodType, organizationAddressId) {\n // Follow baseline pattern: use dedicated endpoint with address ID parameter\n const url = `/teamsites/${saleId}/settings/shipping_methods/set_bulk_shipping_address`;\n\n // Use baseline parameter format: a=addressId, smt=shippingMethodType, sm=0 (new method)\n const params = new URLSearchParams({\n a: organizationAddressId,\n smt: shippingMethodType,\n sm: '0', // 0 indicates new shipping method\n });\n\n fetch(`${url}?${params}`, {\n method: 'POST',\n headers: {\n 'Accept': 'application/json',\n 'X-Requested-With': 'XMLHttpRequest',\n 'X-CSRF-Token': document.querySelector('meta[name=\"csrf-token\"]').getAttribute('content'),\n },\n })\n .then(response => {\n if (response.ok) {\n return response.json();\n } else {\n throw new Error('Shipping method creation failed');\n }\n })\n .then(data => {\n if (data.success) {\n this.handleShippingMethodCreated(data);\n } else {\n throw new Error(data.message || 'Shipping method creation failed');\n }\n })\n .catch(() => {\n this.showError('Failed to create shipping method. Please try again.');\n // Reset state on error\n this.resetButtonState();\n });\n }\n\n handleShippingMethodCreated(data) {\n // Reset state on success\n this.resetButtonState();\n\n // Close the modal\n const closeButton = document.querySelector('.mfp-close');\n if (closeButton) {\n closeButton.click();\n }\n\n // Dispatch custom event for other components to listen\n const event = new CustomEvent('shipping-method:created', {\n detail: {\n shippingMethodId: data.shipping_method_id || data.id,\n addressId: this.organizationAddressId,\n },\n });\n document.dispatchEvent(event);\n\n // Show success message\n if (window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash(data.message || 'Shipping method created successfully');\n }\n\n // Reload the shipping methods display\n this.reloadShippingMethods();\n }\n\n reloadShippingMethods() {\n const modal = this.element.closest('[data-controller*=\"sale-settings-shipping-addresses\"]');\n const saleId = modal?.dataset.saleId;\n\n if (!saleId) return;\n\n // Find and reload the shipping methods container\n const container = document.getElementById('shipping-methods-labels-container');\n if (container) {\n const shippingMethodsUrl = `/teamsites/${saleId}/settings/shipping_methods`;\n\n fetch(shippingMethodsUrl, {\n headers: {\n 'Accept': 'text/html',\n 'X-Requested-With': 'XMLHttpRequest',\n 'X-CSRF-Token': document.querySelector('meta[name=\"csrf-token\"]')?.getAttribute('content') || '',\n },\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n return response.text();\n })\n .then(html => {\n // Use safe DOM manipulation to prevent XSS\n const tempDiv = document.createElement('div');\n tempDiv.innerHTML = html;\n container.replaceChildren(...tempDiv.childNodes);\n })\n .catch(() => {\n this.showError('Failed to refresh shipping methods. Please reload the page.');\n });\n }\n }\n\n showError(message) {\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash(message);\n }\n }\n\n resetButtonState() {\n this.submitting = false;\n // Find the button in the current card\n const button = this.element;\n if (button) {\n button.disabled = false;\n button.classList.remove('ae-btn-disabled');\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n connect() {\n this.saleId = this.element.dataset.saleId;\n this.formAction = this.element.dataset.formAction;\n this.submitting = false;\n }\n\n disconnect() {\n // Clean up any event listeners if needed\n this.submitting = false;\n }\n\n submitForm(event) {\n event.preventDefault();\n\n // Prevent duplicate submissions\n if (this.submitting) {\n return;\n }\n\n const form = this.element.querySelector('#address-form');\n if (!form) {\n return;\n }\n\n // Validate form before submission\n if (!this.validateForm(form)) {\n this.submitting = false;\n return;\n }\n\n // Set submitting flag\n this.submitting = true;\n\n // Disable submit button during submission\n const submitButton = this.element.querySelector('button[type=\"submit\"]');\n if (submitButton) {\n submitButton.disabled = true;\n submitButton.classList.add('ae-btn-disabled');\n submitButton.textContent = 'Creating...';\n }\n\n // Clear any previous errors\n this.clearErrors();\n\n // Submit form via AJAX\n const formData = new FormData(form);\n const url = form.action;\n const method = form.method.toUpperCase();\n\n fetch(url, {\n method: method,\n headers: {\n 'Accept': 'application/json',\n 'X-Requested-With': 'XMLHttpRequest',\n 'X-CSRF-Token': document.querySelector('meta[name=\"csrf-token\"]').getAttribute('content'),\n },\n body: formData,\n })\n .then(response => {\n if (response.ok) {\n return response.json();\n } else {\n return response.json().then(data => Promise.reject(data));\n }\n })\n .then(data => {\n if (data.success) {\n this.handleSuccess(data);\n } else {\n this.handleError(data.errors || ['Something went wrong']);\n }\n })\n .catch(error => {\n this.handleError(error.errors || ['Something went wrong']);\n })\n .finally(() => {\n // Reset submitting flag\n this.submitting = false;\n\n // Re-enable submit button\n if (submitButton) {\n submitButton.disabled = false;\n submitButton.classList.remove('ae-btn-disabled');\n submitButton.textContent = this.formAction === 'update' ? 'Update Address' : 'Create Address';\n }\n });\n\n // Reset submitting flag after 2 seconds (safety measure)\n setTimeout(() => {\n this.submitting = false;\n if (submitButton) {\n submitButton.disabled = false;\n submitButton.classList.remove('ae-btn-disabled');\n submitButton.textContent = this.formAction === 'update' ? 'Update Address' : 'Create Address';\n }\n }, 2000);\n }\n\n validateForm(form) {\n const requiredFields = [\n 'organization_address[address_type]',\n 'organization_address[address_attributes][address1]',\n 'organization_address[address_attributes][city]',\n 'organization_address[address_attributes][state_id]',\n 'organization_address[address_attributes][zipcode]',\n 'organization_address[address_attributes][phone]',\n ];\n\n let isValid = true;\n const errors = [];\n\n requiredFields.forEach(fieldName => {\n const field = form.querySelector(`[name=\"${fieldName}\"]`);\n if (field && !field.value.trim()) {\n isValid = false;\n const label = this.getFieldLabel(fieldName);\n errors.push(`${label} is required`);\n }\n });\n\n if (!isValid) {\n this.showErrors(errors);\n }\n\n return isValid;\n }\n\n getFieldLabel(fieldName) {\n const labelMap = {\n 'organization_address[address_type]': 'Address Type',\n 'organization_address[address_attributes][address1]': 'Address Line 1',\n 'organization_address[address_attributes][city]': 'City',\n 'organization_address[address_attributes][state_id]': 'State',\n 'organization_address[address_attributes][zipcode]': 'ZIP Code',\n 'organization_address[address_attributes][phone]': 'Phone Number',\n };\n return labelMap[fieldName] || fieldName;\n }\n\n handleSuccess(data) {\n // Close the modal\n this.closeModal();\n\n // Show success message\n this.showSuccessMessage(data.message || 'Address saved successfully');\n\n // Dispatch custom event to refresh address list\n const event = new CustomEvent('address:saved', {\n detail: {\n address: data.address,\n action: this.formAction,\n },\n });\n document.dispatchEvent(event);\n\n // Refresh the shipping addresses modal if it's open\n this.refreshAddressesModal();\n }\n\n handleError(errors) {\n const errorMessages = Array.isArray(errors) ? errors : [errors];\n this.showErrors(errorMessages);\n }\n\n showErrors(errors) {\n const errorContainer = this.element.querySelector('#form-errors');\n const errorList = this.element.querySelector('#error-list');\n\n if (errorContainer && errorList) {\n errorList.innerHTML = '';\n errors.forEach(error => {\n const li = document.createElement('li');\n li.textContent = error;\n errorList.appendChild(li);\n });\n errorContainer.style.display = 'block';\n }\n }\n\n clearErrors() {\n const errorContainer = this.element.querySelector('#form-errors');\n if (errorContainer) {\n errorContainer.style.display = 'none';\n }\n }\n\n closeModal() {\n const closeButton = this.element.querySelector('.mfp-close');\n if (closeButton) {\n closeButton.click();\n }\n }\n\n showSuccessMessage(message) {\n // Use global flash message system if available\n if (window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash(message);\n } else {\n // Fallback: Create temporary success message\n const successDiv = document.createElement('div');\n successDiv.className = 'ae-alert ae-alert-success';\n successDiv.textContent = message;\n successDiv.style.cssText = 'position:fixed;top:20px;right:20px;z-index:9999';\n document.body.appendChild(successDiv);\n setTimeout(() => successDiv.remove(), 5000);\n }\n }\n\n refreshAddressesModal() {\n // Find the shipping addresses modal if it's open\n const addressesModal = document.querySelector('[data-controller*=\"sale-settings-shipping-addresses\"]');\n if (addressesModal) {\n // Reload addresses in the modal\n const url = `/teamsites/${this.saleId}/settings/shipping_methods_addresses`;\n\n fetch(url)\n .then(response => response.text())\n .then(html => {\n // Create a temporary container to parse the HTML\n const tempDiv = document.createElement('div');\n tempDiv.innerHTML = html;\n\n // Extract the tab content and update the modal\n const newTabContent = tempDiv.querySelector('#tab-content');\n const currentTabContent = addressesModal.querySelector('#tab-content');\n\n if (newTabContent && currentTabContent) {\n currentTabContent.innerHTML = newTabContent.innerHTML;\n }\n })\n .catch(error => {\n // Handle error gracefully - the form was still saved successfully\n // This is a non-critical refresh, so we continue without disrupting the user\n // In development, the error will be visible in the network tab\n if (window.App && window.App.logError) {\n window.App.logError('Failed to refresh addresses modal', error);\n }\n });\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n connect() {\n this.hasOrders = this.element.dataset.hasOrders === 'true';\n this.form = this.element;\n }\n\n radioClicked(_event) {\n // Auto-submit form when radio button is clicked\n // The disabled state should prevent clicking if there are orders and changing payment settings\n this.submitForm();\n }\n\n handleFormSubmit(event) {\n // Handle the AJAX response\n const detail = event.detail;\n\n if (detail[0] && detail[0].success !== false) {\n // Show success feedback\n if (window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash('Payment settings updated successfully');\n }\n } else {\n // Show error feedback\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Failed to update payment settings');\n }\n }\n }\n\n submitForm() {\n // Find and click the hidden submit button\n const submitButton = this.form.querySelector('input[type=\"submit\"]');\n if (submitButton) {\n submitButton.click();\n }\n }\n}\n", "/**\n * @file Checkout Options Choice Drag Controller\n * @description Stimulus controller for handling drag-and-drop functionality of choices within a checkout option.\n * Allows vertical reordering of choices using vanilla JavaScript.\n */\n\nimport { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['item', 'handle'];\n\n initialize() {\n // Bind methods\n this.handleMouseDown = this.handleMouseDown.bind(this);\n this.handleMouseMove = this.handleMouseMove.bind(this);\n this.handleMouseUp = this.handleMouseUp.bind(this);\n this.handleTouchStart = this.handleTouchStart.bind(this);\n this.handleTouchMove = this.handleTouchMove.bind(this);\n this.handleTouchEnd = this.handleTouchEnd.bind(this);\n\n // Initialize state\n this.isDragging = false;\n this.draggedElement = null;\n this.placeholder = null;\n this.mouseOffset = { x: 0, y: 0 };\n }\n\n connect() {\n // Add event listeners to all drag handles\n this.addEventListeners();\n }\n\n disconnect() {\n // Clean up\n this.removeEventListeners();\n this.cleanup();\n }\n\n addEventListeners() {\n this.element.addEventListener('mousedown', this.handleMouseDown);\n this.element.addEventListener('touchstart', this.handleTouchStart, { passive: false });\n }\n\n removeEventListeners() {\n this.element.removeEventListener('mousedown', this.handleMouseDown);\n this.element.removeEventListener('touchstart', this.handleTouchStart);\n\n // Remove document-level listeners\n document.removeEventListener('mousemove', this.handleMouseMove);\n document.removeEventListener('mouseup', this.handleMouseUp);\n document.removeEventListener('touchmove', this.handleTouchMove);\n document.removeEventListener('touchend', this.handleTouchEnd);\n }\n\n findHandle(target) {\n return target.closest('[data-target*=\"choice-drag.handle\"]');\n }\n\n handleMouseDown(event) {\n const handle = this.findHandle(event.target);\n if (!handle) return;\n\n event.preventDefault();\n\n const choiceField = handle.closest('[data-target*=\"choiceField\"]');\n if (!choiceField || choiceField.style.display === 'none') return;\n\n this.startDrag(choiceField, event.clientX, event.clientY);\n\n // Add document-level listeners\n document.addEventListener('mousemove', this.handleMouseMove);\n document.addEventListener('mouseup', this.handleMouseUp);\n }\n\n handleTouchStart(event) {\n const handle = this.findHandle(event.target);\n if (!handle) return;\n\n event.preventDefault();\n\n const touch = event.touches[0];\n const choiceField = handle.closest('[data-target*=\"choiceField\"]');\n if (!choiceField || choiceField.style.display === 'none') return;\n\n this.startDrag(choiceField, touch.clientX, touch.clientY);\n\n // Add document-level listeners\n document.addEventListener('touchmove', this.handleTouchMove, { passive: false });\n document.addEventListener('touchend', this.handleTouchEnd);\n }\n\n handleMouseMove(event) {\n if (this.isDragging) {\n this.updateDrag(event.clientX, event.clientY);\n }\n }\n\n handleTouchMove(event) {\n if (this.isDragging) {\n event.preventDefault();\n const touch = event.touches[0];\n this.updateDrag(touch.clientX, touch.clientY);\n }\n }\n\n handleMouseUp() {\n this.endDrag();\n\n // Remove document-level listeners\n document.removeEventListener('mousemove', this.handleMouseMove);\n document.removeEventListener('mouseup', this.handleMouseUp);\n }\n\n handleTouchEnd() {\n this.endDrag();\n\n // Remove document-level listeners\n document.removeEventListener('touchmove', this.handleTouchMove);\n document.removeEventListener('touchend', this.handleTouchEnd);\n }\n\n startDrag(element, clientX, clientY) {\n this.isDragging = true;\n this.draggedElement = element;\n\n // Calculate mouse offset within the element\n const rect = element.getBoundingClientRect();\n this.mouseOffset = {\n x: clientX - rect.left,\n y: clientY - rect.top,\n };\n\n // Create placeholder\n this.createPlaceholder();\n\n // Style dragged element\n this.draggedElement.style.position = 'fixed';\n this.draggedElement.style.zIndex = '9999';\n this.draggedElement.style.opacity = '0.8';\n this.draggedElement.style.cursor = 'grabbing';\n this.draggedElement.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)';\n this.draggedElement.style.pointerEvents = 'none';\n this.draggedElement.style.width = rect.width + 'px';\n\n // Position at current location\n this.draggedElement.style.left = rect.left + 'px';\n this.draggedElement.style.top = rect.top + 'px';\n }\n\n createPlaceholder() {\n // Create a simple placeholder div\n this.placeholder = document.createElement('div');\n this.placeholder.style.height = this.draggedElement.offsetHeight + 'px';\n this.placeholder.style.margin = '0';\n this.placeholder.style.padding = '0';\n this.placeholder.style.marginBottom = '1px';\n this.placeholder.style.backgroundColor = '#f0f0f0';\n this.placeholder.style.border = '1px dashed #ccc';\n\n // Insert placeholder where the dragged element was\n this.draggedElement.parentNode.insertBefore(this.placeholder, this.draggedElement);\n }\n\n updateDrag(clientX, clientY) {\n if (!this.isDragging || !this.draggedElement) return;\n\n // Update dragged element position to follow mouse\n this.draggedElement.style.left = (clientX - this.mouseOffset.x) + 'px';\n this.draggedElement.style.top = (clientY - this.mouseOffset.y) + 'px';\n\n // Find the element we're hovering over\n const elementBelow = this.getElementBelow(clientX, clientY);\n if (!elementBelow) return;\n\n // If it's a choice field and not our placeholder, reorder\n const targetChoice = elementBelow.closest('[data-target*=\"choiceField\"]');\n if (targetChoice && targetChoice !== this.placeholder && targetChoice !== this.draggedElement) {\n const targetRect = targetChoice.getBoundingClientRect();\n const targetMiddle = targetRect.top + targetRect.height / 2;\n\n if (clientY < targetMiddle) {\n // Insert placeholder before target\n targetChoice.parentNode.insertBefore(this.placeholder, targetChoice);\n } else {\n // Insert placeholder after target\n targetChoice.parentNode.insertBefore(this.placeholder, targetChoice.nextSibling);\n }\n }\n }\n\n getElementBelow(x, y) {\n // Temporarily hide the dragged element to get the element below\n this.draggedElement.style.display = 'none';\n const elementBelow = document.elementFromPoint(x, y);\n this.draggedElement.style.display = '';\n return elementBelow;\n }\n\n endDrag() {\n if (!this.isDragging || !this.draggedElement) return;\n\n // Move the dragged element to the placeholder position\n if (this.placeholder && this.placeholder.parentNode) {\n this.placeholder.parentNode.insertBefore(this.draggedElement, this.placeholder);\n }\n\n // Reset styles\n this.draggedElement.style.position = '';\n this.draggedElement.style.zIndex = '';\n this.draggedElement.style.opacity = '';\n this.draggedElement.style.cursor = '';\n this.draggedElement.style.boxShadow = '';\n this.draggedElement.style.pointerEvents = '';\n this.draggedElement.style.width = '';\n this.draggedElement.style.left = '';\n this.draggedElement.style.top = '';\n\n // Update positions\n this.updatePositions();\n\n // Cleanup\n this.cleanup();\n }\n\n updatePositions() {\n const visibleChoices = this.itemTargets.filter(item => item.style.display !== 'none');\n\n visibleChoices.forEach((choice, index) => {\n const positionInput = choice.querySelector('input[name*=\"[position]\"]');\n if (positionInput) {\n positionInput.value = index;\n }\n });\n }\n\n cleanup() {\n if (this.placeholder && this.placeholder.parentNode) {\n this.placeholder.parentNode.removeChild(this.placeholder);\n }\n\n this.isDragging = false;\n this.draggedElement = null;\n this.placeholder = null;\n this.mouseOffset = { x: 0, y: 0 };\n }\n}\n", "/**\n * @file Checkout Options Drag Controller\n * @description Stimulus controller for handling drag-and-drop functionality of checkout option rows.\n * Allows vertical reordering of checkout options using vanilla JavaScript.\n */\n\nimport { Controller } from '../stimulus';\n\nconst DRAG_THRESHOLD_PX = 5; // Minimum movement to consider it a drag\n\nexport default class extends Controller {\n static targets = ['item', 'handle'];\n\n initialize() {\n // Bind methods\n this.handleMouseDown = this.handleMouseDown.bind(this);\n this.handleMouseMove = this.handleMouseMove.bind(this);\n this.handleMouseUp = this.handleMouseUp.bind(this);\n this.handleTouchStart = this.handleTouchStart.bind(this);\n this.handleTouchMove = this.handleTouchMove.bind(this);\n this.handleTouchEnd = this.handleTouchEnd.bind(this);\n\n // Initialize state\n this.isDragging = false;\n this.draggedElement = null;\n this.placeholder = null;\n this.startY = 0;\n this.currentY = 0;\n this.initialMouseY = 0;\n this.initialElementY = 0;\n\n // Initialize debouncing state\n this.updateTimeouts = new Map();\n this.isUpdating = new Set();\n this.debounceDelay = 300;\n this.maxRetries = 3;\n this.retryDelay = 1000;\n\n // Initialize lifecycle tracking\n this.isConnected = false;\n this.abortControllers = new Map();\n this.retryAttempts = new Map();\n }\n\n connect() {\n // Mark as connected\n this.isConnected = true;\n\n // Get data attributes\n this.saleId = this.element.dataset.saleId;\n\n // Get configurable settings\n const configuredDelay = parseInt(this.element.dataset.debounceDelay, 10);\n if (!isNaN(configuredDelay) && configuredDelay >= 0) {\n this.debounceDelay = configuredDelay;\n }\n\n const configuredMaxRetries = parseInt(this.element.dataset.maxRetries, 10);\n if (!isNaN(configuredMaxRetries) && configuredMaxRetries >= 0) {\n this.maxRetries = configuredMaxRetries;\n }\n\n const configuredRetryDelay = parseInt(this.element.dataset.retryDelay, 10);\n if (!isNaN(configuredRetryDelay) && configuredRetryDelay >= 0) {\n this.retryDelay = configuredRetryDelay;\n }\n\n // Add event listeners\n this.addEventListeners();\n }\n\n disconnect() {\n // Mark as disconnected\n this.isConnected = false;\n\n // Abort all active fetch requests\n this.abortAllRequests();\n\n // Clean up\n this.removeEventListeners();\n this.cleanup();\n this.cleanupPendingUpdates();\n }\n\n addEventListeners() {\n this.element.addEventListener('mousedown', this.handleMouseDown);\n this.element.addEventListener('touchstart', this.handleTouchStart, { passive: false });\n }\n\n removeEventListeners() {\n this.element.removeEventListener('mousedown', this.handleMouseDown);\n this.element.removeEventListener('touchstart', this.handleTouchStart);\n\n // Remove document-level listeners\n document.removeEventListener('mousemove', this.handleMouseMove);\n document.removeEventListener('mouseup', this.handleMouseUp);\n document.removeEventListener('touchmove', this.handleTouchMove);\n document.removeEventListener('touchend', this.handleTouchEnd);\n }\n\n findHandle(target) {\n return target.closest('[data-target*=\"checkout-options-drag.handle\"]');\n }\n\n handleMouseDown(event) {\n const handle = this.findHandle(event.target);\n if (!handle) return;\n\n // Prevent default to avoid text selection (only when on a drag handle)\n event.preventDefault();\n\n const containerElement = handle.closest('.custom-field-container');\n if (!containerElement || !containerElement.dataset.checkoutOptionId) {\n return;\n }\n\n this.startDrag(containerElement, event.clientX, event.clientY);\n\n // Add document-level listeners\n document.addEventListener('mousemove', this.handleMouseMove);\n document.addEventListener('mouseup', this.handleMouseUp);\n }\n\n handleTouchStart(event) {\n const handle = this.findHandle(event.target);\n if (!handle) return;\n\n // Prevent scrolling while dragging (only when on a drag handle)\n event.preventDefault();\n\n const touch = event.touches[0];\n const containerElement = handle.closest('.custom-field-container');\n if (!containerElement || !containerElement.dataset.checkoutOptionId) {\n return;\n }\n\n this.startDrag(containerElement, touch.clientX, touch.clientY);\n\n // Add document-level listeners\n document.addEventListener('touchmove', this.handleTouchMove, { passive: false });\n document.addEventListener('touchend', this.handleTouchEnd);\n }\n\n handleMouseMove(event) {\n this.updateDrag(event.clientX, event.clientY);\n }\n\n handleTouchMove(event) {\n event.preventDefault();\n const touch = event.touches[0];\n this.updateDrag(touch.clientX, touch.clientY);\n }\n\n handleMouseUp() {\n this.endDrag();\n\n // Remove document-level listeners\n document.removeEventListener('mousemove', this.handleMouseMove);\n document.removeEventListener('mouseup', this.handleMouseUp);\n }\n\n handleTouchEnd() {\n this.endDrag();\n\n // Remove document-level listeners\n document.removeEventListener('touchmove', this.handleTouchMove);\n document.removeEventListener('touchend', this.handleTouchEnd);\n }\n\n startDrag(element, clientX, clientY) {\n this.startY = clientY;\n this.currentY = clientY;\n this.draggedElement = element;\n this.initialMouseY = clientY;\n\n // Get initial position\n const rect = element.getBoundingClientRect();\n this.initialElementY = rect.top;\n }\n\n updateDrag(clientX, clientY) {\n this.currentY = clientY;\n\n // Check if we've moved enough to start dragging\n const deltaY = Math.abs(clientY - this.startY);\n\n if (!this.isDragging && deltaY > DRAG_THRESHOLD_PX) {\n this.isDragging = true;\n this.initializeDragVisuals();\n }\n\n if (this.isDragging) {\n // Update dragged element position\n const offsetY = clientY - this.initialMouseY;\n this.draggedElement.style.transform = `translateY(${offsetY}px)`;\n\n // Check for reordering\n this.checkForReorder();\n }\n }\n\n initializeDragVisuals() {\n if (!this.draggedElement) return;\n\n // Create placeholder\n this.placeholder = this.draggedElement.cloneNode(true);\n this.placeholder.style.opacity = '0.3';\n this.placeholder.style.pointerEvents = 'none';\n this.placeholder.classList.add('drag-placeholder');\n\n // Style dragged element\n this.draggedElement.style.position = 'relative';\n this.draggedElement.style.zIndex = '1000';\n this.draggedElement.style.opacity = '0.8';\n this.draggedElement.classList.add('dragging');\n\n // Insert placeholder\n this.draggedElement.parentNode.insertBefore(this.placeholder, this.draggedElement.nextSibling);\n }\n\n checkForReorder() {\n const containers = this.getItemElements().filter(container =>\n container !== this.draggedElement && container !== this.placeholder,\n );\n\n const draggedRect = this.draggedElement.getBoundingClientRect();\n const draggedCenterY = draggedRect.top + draggedRect.height / 2;\n\n for (const container of containers) {\n const rect = container.getBoundingClientRect();\n const centerY = rect.top + rect.height / 2;\n\n // Check if we should swap\n if (draggedCenterY < centerY && this.isAfter(this.draggedElement, container)) {\n // Move dragged element before this container\n container.parentNode.insertBefore(this.placeholder, container);\n container.parentNode.insertBefore(this.draggedElement, this.placeholder);\n this.adjustAfterReorder();\n break;\n } else if (draggedCenterY > centerY && this.isBefore(this.draggedElement, container)) {\n // Move dragged element after this container\n container.parentNode.insertBefore(this.placeholder, container.nextSibling);\n container.parentNode.insertBefore(this.draggedElement, this.placeholder);\n this.adjustAfterReorder();\n break;\n }\n }\n }\n\n adjustAfterReorder() {\n // After DOM reordering, the element's natural position changes.\n // Recalculate transform baseline to prevent drag acceleration.\n this.draggedElement.style.transform = '';\n const newRect = this.draggedElement.getBoundingClientRect();\n const offsetY = this.currentY - newRect.top;\n this.draggedElement.style.transform = `translateY(${offsetY}px)`;\n this.initialMouseY = this.currentY - offsetY;\n }\n\n isAfter(el1, el2) {\n return !!(el1.compareDocumentPosition(el2) & Node.DOCUMENT_POSITION_PRECEDING);\n }\n\n isBefore(el1, el2) {\n return !!(el1.compareDocumentPosition(el2) & Node.DOCUMENT_POSITION_FOLLOWING);\n }\n\n endDrag() {\n if (!this.isDragging) return;\n\n // Remove visual styles\n if (this.draggedElement) {\n this.draggedElement.style.position = '';\n this.draggedElement.style.zIndex = '';\n this.draggedElement.style.opacity = '';\n this.draggedElement.style.transform = '';\n this.draggedElement.classList.remove('dragging');\n\n // Get new position\n const containers = this.getItemElements();\n const newPosition = containers.indexOf(this.draggedElement) + 1;\n\n // Get the checkout option ID\n const checkoutOptionId = this.draggedElement.dataset.checkoutOptionId;\n\n // Debounce the server update\n this.debouncedUpdatePosition(checkoutOptionId, newPosition);\n }\n\n // Cleanup\n this.cleanup();\n }\n\n getItemElements() {\n return Array.from(this.element.children).filter(el => el.classList.contains('custom-field-container'));\n }\n\n cleanup() {\n if (this.placeholder && this.placeholder.parentNode) {\n this.placeholder.parentNode.removeChild(this.placeholder);\n }\n\n this.isDragging = false;\n this.draggedElement = null;\n this.placeholder = null;\n this.startY = 0;\n this.currentY = 0;\n this.initialMouseY = 0;\n this.initialElementY = 0;\n }\n\n cleanupPendingUpdates() {\n // Clear all pending timeouts\n this.updateTimeouts.forEach((timeoutId) => {\n clearTimeout(timeoutId);\n });\n this.updateTimeouts.clear();\n\n // Clear updating set\n this.isUpdating.clear();\n\n // Clear retry attempts\n this.retryAttempts.clear();\n }\n\n abortAllRequests() {\n // Abort all active fetch requests\n this.abortControllers.forEach((controller) => {\n controller.abort();\n });\n this.abortControllers.clear();\n }\n\n debouncedUpdatePosition(checkoutOptionId, position) {\n // Cancel any existing timeout for this option\n if (this.updateTimeouts.has(checkoutOptionId)) {\n clearTimeout(this.updateTimeouts.get(checkoutOptionId));\n this.updateTimeouts.delete(checkoutOptionId);\n }\n\n // If this option is already being updated, wait for it to complete\n if (this.isUpdating.has(checkoutOptionId)) {\n return;\n }\n\n // Set a new timeout\n const timeoutId = setTimeout(() => {\n this.updateTimeouts.delete(checkoutOptionId);\n this.updatePosition(checkoutOptionId, position);\n }, this.debounceDelay);\n\n this.updateTimeouts.set(checkoutOptionId, timeoutId);\n }\n\n updatePosition(checkoutOptionId, position) {\n // Check if controller is still connected\n if (!this.isConnected) {\n return;\n }\n\n // Mark as updating\n this.isUpdating.add(checkoutOptionId);\n\n // Create abort controller for this request\n const abortController = new AbortController();\n\n // Cancel any existing request for this option\n if (this.abortControllers.has(checkoutOptionId)) {\n this.abortControllers.get(checkoutOptionId).abort();\n }\n this.abortControllers.set(checkoutOptionId, abortController);\n\n const url = `/teamsites/${this.saleId}/settings/checkout_options/${checkoutOptionId}/reorder`;\n const token = document.querySelector('meta[name=\"csrf-token\"]')?.getAttribute('content');\n\n fetch(url, {\n method: 'PATCH',\n headers: {\n 'X-CSRF-Token': token,\n 'Content-Type': 'application/json',\n 'Accept': 'application/json',\n },\n body: JSON.stringify({ position: position }),\n credentials: 'same-origin',\n signal: abortController.signal,\n })\n .then(response => {\n if (!this.isConnected) {\n throw new Error('Controller disconnected');\n }\n\n if (!response.ok) {\n return response.json().then(errorData => {\n throw new Error(errorData.message || `Server error: ${response.status}`);\n });\n }\n return response.json();\n })\n .then(data => {\n if (!this.isConnected) {\n return;\n }\n\n // Show success message\n if (window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash(data.message || 'Order updated');\n }\n\n // Clean up abort controller\n this.abortControllers.delete(checkoutOptionId);\n\n // Mark as no longer updating\n this.isUpdating.delete(checkoutOptionId);\n\n // Clear retry attempts on successful completion\n this.retryAttempts.delete(checkoutOptionId);\n })\n .catch(error => {\n if (!this.isConnected) {\n return;\n }\n\n // Don't show error for aborted requests\n if (error.name === 'AbortError') {\n return;\n }\n\n // Clean up abort controller\n this.abortControllers.delete(checkoutOptionId);\n\n // Mark as no longer updating\n this.isUpdating.delete(checkoutOptionId);\n\n // Show error message\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Failed to update order. ' + (error.message || 'Please try again.'));\n }\n\n const currentRetries = this.retryAttempts.get(checkoutOptionId) || 0;\n\n // Check if we've exceeded max retries\n if (currentRetries >= this.maxRetries) {\n this.retryAttempts.delete(checkoutOptionId);\n return;\n }\n\n // Increment retry count\n this.retryAttempts.set(checkoutOptionId, currentRetries + 1);\n\n // Retry with fixed delay\n setTimeout(() => {\n if (this.isConnected) {\n this.isUpdating.delete(checkoutOptionId);\n this.updatePosition(checkoutOptionId, position);\n }\n }, this.retryDelay);\n });\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['choicesContainer', 'choiceField', 'addChoiceLink', 'dragHandle', 'destroyField'];\n\n connect() {\n this.checkoutOptionId = this.data.get('checkout-option-id');\n\n // Bind methods\n this.toggleChoices = this.toggleChoices.bind(this);\n this.addChoice = this.addChoice.bind(this);\n this.removeChoice = this.removeChoice.bind(this);\n this.closeForm = this.closeForm.bind(this);\n }\n\n toggleChoices(event) {\n const fieldType = event.target.value;\n\n if (this.hasChoicesContainerTarget) {\n if (fieldType === 'choice') {\n this.choicesContainerTarget.classList.remove('ae-u-hidden');\n if (this.hasAddChoiceLinkTarget) {\n this.addChoiceLinkTarget.classList.remove('ae-u-hidden');\n }\n } else {\n this.choicesContainerTarget.classList.add('ae-u-hidden');\n if (this.hasAddChoiceLinkTarget) {\n this.addChoiceLinkTarget.classList.add('ae-u-hidden');\n }\n }\n }\n }\n\n addChoice(event) {\n event.preventDefault();\n\n if (!this.hasChoicesContainerTarget) return;\n\n const existingChoices = this.choiceFieldTargets;\n const newPosition = existingChoices.length;\n\n // Create new choice field\n const choiceDiv = document.createElement('div');\n choiceDiv.className = 'ae-form-single';\n choiceDiv.dataset.target = 'sale-settings-checkout-options-form.choiceField sale-settings-checkout-options-choice-drag.item';\n choiceDiv.style.margin = '0';\n choiceDiv.style.padding = '0';\n choiceDiv.style.marginBottom = '1px';\n\n const timestamp = new Date().getTime();\n const fieldPrefix = this.checkoutOptionId ?\n `dealers_sites_custom_field[choices_attributes][${timestamp}]` :\n `dealers_sites_custom_field[choices_attributes][${timestamp}]`;\n\n choiceDiv.innerHTML = `\n
\n
\n
\n \n \n sale-settings-checkout-options-form#removeChoice\"\n style=\"margin-left: 2px;\">\n \n
\n `;\n\n // Insert before the add link\n if (this.hasAddChoiceLinkTarget) {\n this.choicesContainerTarget.insertBefore(choiceDiv, this.addChoiceLinkTarget);\n } else {\n this.choicesContainerTarget.appendChild(choiceDiv);\n }\n\n // Focus the new input\n const newInput = choiceDiv.querySelector('input[type=\"text\"]');\n if (newInput) {\n newInput.focus();\n }\n }\n\n removeChoice(event) {\n event.preventDefault();\n\n const choiceField = event.target.closest('[data-target*=\"choiceField\"]');\n if (!choiceField) return;\n\n // If this is a persisted choice, mark it for destruction\n const destroyField = choiceField.querySelector('[data-target*=\"destroyField\"]');\n if (destroyField) {\n destroyField.value = '1';\n choiceField.style.display = 'none';\n } else {\n // Otherwise just remove it\n choiceField.remove();\n }\n\n // Update positions\n this.updatePositions();\n }\n\n closeForm(event) {\n // Always prevent default first to avoid any form submission\n if (event && event.preventDefault) {\n event.preventDefault();\n }\n if (event && event.stopPropagation) {\n event.stopPropagation();\n }\n\n // Use the checkoutOptionId we stored in connect()\n const checkoutOptionId = this.checkoutOptionId;\n\n if (checkoutOptionId) {\n // Get the parent container\n const container = this.element.closest('.custom-field-container');\n if (!container) return;\n\n // Hide the edit form\n this.element.classList.add('ae-hidden');\n\n // Show the main table\n const mainTable = container.querySelector(`#checkout-option-${checkoutOptionId}--table`);\n if (mainTable) {\n mainTable.classList.remove('ae-hidden');\n }\n } else {\n // This is a new form - show the add link row again\n this.element.classList.add('ae-hidden');\n const addRow = document.getElementById('add-checkout-option');\n if (addRow) {\n addRow.classList.remove('ae-u-hidden');\n }\n }\n }\n\n updatePositions() {\n const visibleChoices = this.choiceFieldTargets.filter(field => field.style.display !== 'none');\n\n visibleChoices.forEach((field, index) => {\n const positionInput = field.querySelector('input[name*=\"[position]\"]');\n if (positionInput) {\n positionInput.value = index;\n }\n });\n }\n}\n", "import { Controller } from '../stimulus';\nimport CSRFTokenMixin from '../mixins/csrf_token_mixin';\nimport NotificationMixin from '../mixins/notification_mixin';\n\nexport default class extends Controller {\n connect() {\n // Add mixin capabilities\n Object.assign(this, CSRFTokenMixin);\n Object.assign(this, NotificationMixin);\n }\n\n toggle(event) {\n // Prevent any default form submission behavior\n event.preventDefault();\n event.stopPropagation();\n\n const checkbox = event.target;\n const form = checkbox.closest('form');\n const originalState = !checkbox.checked;\n\n if (!form) {\n this.showErrorNotification('Form not found for player info toggle');\n checkbox.checked = originalState;\n return;\n }\n\n // Check CSRF token using mixin\n if (!this.hasValidCSRFToken()) {\n checkbox.checked = originalState;\n return;\n }\n\n // Use fetch API with mixin for CSRF headers\n const formData = new FormData(form);\n\n fetch(form.action, {\n method: 'PATCH',\n headers: this.getHeadersWithCSRF({\n 'Accept': 'application/json',\n 'X-Requested-With': 'XMLHttpRequest',\n }),\n body: formData,\n })\n .then(response => {\n if (!response.ok) {\n throw new Error('Network response was not ok');\n }\n return response.json();\n })\n .then(data => {\n // Update checkbox to match server response\n if (data.collect_player_info !== undefined) {\n checkbox.checked = data.collect_player_info;\n }\n\n // Show success message using global App or mixin fallback\n if (window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash(data.message || 'Player info setting updated');\n } else {\n this.showSaveNotification(data.message || 'Player info setting updated');\n }\n })\n .catch(() => {\n // Revert checkbox state on error\n checkbox.checked = originalState;\n\n // Show error message using global App or mixin fallback\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Failed to update player info setting');\n } else {\n this.showErrorNotification('Failed to update player info setting');\n }\n });\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['choices', 'fieldType', 'editForm', 'deleteButton'];\n\n connect() {\n this.saleId = this.element.dataset.saleId;\n this.checkoutOptionId = this.element.dataset.checkoutOptionId;\n\n // Note: Server provides initial delete button state, JavaScript only handles dynamic updates\n\n // Listen for toggle changes\n this.handleToggleChange = this.handleToggleChange.bind(this);\n this.element.addEventListener('toggle:changed', this.handleToggleChange);\n\n // Bind methods\n this.toggleChoices = this.toggleChoices.bind(this);\n this.addChoice = this.addChoice.bind(this);\n this.clone = this.clone.bind(this);\n this.delete = this.delete.bind(this);\n this.toggleEdit = this.toggleEdit.bind(this);\n this.cancelEdit = this.cancelEdit.bind(this);\n this.updateDeleteButtonState = this.updateDeleteButtonState.bind(this);\n\n // Set up cancel button handler since the form controller doesn't initialize on hidden elements\n this.setupCancelButton();\n }\n\n setupCancelButton() {\n // Find the container\n const container = this.element.closest('.custom-field-container');\n if (!container) return;\n\n // Find the cancel button in the edit form\n const cancelButton = container.querySelector('[data-action*=\"closeForm\"]');\n if (cancelButton) {\n // Remove any existing Stimulus action and add our own click handler\n cancelButton.removeAttribute('data-action');\n cancelButton.addEventListener('click', (e) => {\n e.preventDefault();\n this.cancelEdit(e);\n });\n }\n }\n\n cancelEdit(event) {\n if (event) {\n event.preventDefault();\n }\n\n // Find the container\n const container = this.element.closest('.custom-field-container');\n if (!container) return;\n\n // Find and hide the edit form\n const editForm = container.querySelector('table[id$=\"--table-form\"]');\n if (editForm) {\n editForm.classList.add('ae-hidden');\n }\n\n // Find and show the main table\n const mainTable = container.querySelector(`#checkout-option-${this.checkoutOptionId}--table`);\n if (mainTable) {\n mainTable.classList.remove('ae-hidden');\n }\n }\n\n disconnect() {\n // Clean up event listeners\n if (this.handleToggleChange) {\n this.element.removeEventListener('toggle:changed', this.handleToggleChange);\n }\n }\n\n /**\n * Handles toggle change events from toggle controllers\n * @param {CustomEvent} event - The toggle:changed event\n */\n handleToggleChange(event) {\n if (event.detail && event.detail.active !== undefined) {\n this.updateDeleteButtonState(event.detail.active);\n }\n }\n\n toggleChoices(event) {\n const fieldType = event.target.value;\n\n if (this.hasChoicesTarget) {\n if (fieldType === 'choice') {\n this.choicesTarget.classList.remove('ae-u-hidden');\n } else {\n this.choicesTarget.classList.add('ae-u-hidden');\n }\n }\n }\n\n addChoice(event) {\n event.preventDefault();\n\n if (!this.hasChoicesTarget) return;\n\n const choicesContainer = this.choicesTarget.querySelector('[data-target$=\"choices\"]') || this.choicesTarget;\n const existingChoices = choicesContainer.querySelectorAll('input[name*=\"[choices_attributes]\"][name*=\"[value]\"]');\n const newPosition = existingChoices.length;\n\n // Create new choice field\n const choiceDiv = document.createElement('div');\n const timestamp = new Date().getTime();\n\n choiceDiv.innerHTML = `\n
\n
\n `;\n\n // Find the \"Add choice\" link\n const addLink = this.choicesTarget.querySelector('a[data-action*=\"addChoice\"]');\n if (addLink) {\n choicesContainer.insertBefore(choiceDiv, addLink);\n } else {\n choicesContainer.appendChild(choiceDiv);\n }\n\n // Focus the new input\n const newInput = choiceDiv.querySelector('input[type=\"text\"]');\n if (newInput) {\n newInput.focus();\n }\n }\n\n clone(event) {\n event.preventDefault();\n\n const url = `/teamsites/${this.saleId}/settings/checkout_options/${this.checkoutOptionId}/clone`;\n const token = document.querySelector('meta[name=\"csrf-token\"]')?.getAttribute('content');\n\n fetch(url, {\n method: 'POST',\n headers: {\n 'X-CSRF-Token': token,\n 'Accept': 'text/javascript',\n 'Content-Type': 'application/x-www-form-urlencoded',\n },\n credentials: 'same-origin',\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n return response.text();\n })\n .then(script => {\n // Execute the JavaScript response (create.js.erb)\n const scriptElement = document.createElement('script');\n scriptElement.textContent = script;\n document.head.appendChild(scriptElement);\n document.head.removeChild(scriptElement);\n\n // Show success message\n if (window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash('Checkout option cloned successfully');\n }\n })\n .catch(error => {\n // Clone request failed\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Failed to clone checkout option: ' + error.message);\n }\n });\n }\n\n delete(event) {\n event.preventDefault();\n\n if (!confirm('Are you sure you want to delete this checkout option?')) {\n return;\n }\n\n const url = `/teamsites/${this.saleId}/settings/checkout_options/${this.checkoutOptionId}`;\n const token = document.querySelector('meta[name=\"csrf-token\"]')?.getAttribute('content');\n\n fetch(url, {\n method: 'DELETE',\n headers: {\n 'X-CSRF-Token': token,\n 'Accept': 'text/javascript',\n 'Content-Type': 'application/x-www-form-urlencoded',\n },\n credentials: 'same-origin',\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n return response.text();\n })\n .then(script => {\n // Execute the JavaScript response (destroy.js.erb)\n const scriptElement = document.createElement('script');\n scriptElement.textContent = script;\n document.head.appendChild(scriptElement);\n document.head.removeChild(scriptElement);\n\n // Show success message and remove the container div\n if (window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash('Checkout option deleted successfully');\n }\n\n const container = this.element.closest('.custom-field-container');\n if (container) {\n container.remove();\n }\n })\n .catch(_error => {\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Failed to delete checkout option');\n }\n });\n }\n\n toggleEdit(event) {\n event.preventDefault();\n\n // Find the parent container\n const container = this.element.closest('.custom-field-container');\n if (!container) return;\n\n // Find the edit form within the container\n const editForm = container.querySelector('table[id$=\"--table-form\"]');\n if (!editForm) return;\n\n // Toggle visibility\n if (editForm.classList.contains('ae-hidden')) {\n // Hide the main table - use the specific ID\n const mainTable = container.querySelector(`#checkout-option-${this.checkoutOptionId}--table`);\n if (mainTable) {\n mainTable.classList.add('ae-hidden');\n }\n // Show the edit form\n editForm.classList.remove('ae-hidden');\n\n // Focus the first input\n const firstInput = editForm.querySelector('input[type=\"text\"]');\n if (firstInput) {\n firstInput.focus();\n }\n } else {\n // This is actually closing the form - same as cancel\n // Show the main table - use the specific ID\n const mainTable = container.querySelector(`#checkout-option-${this.checkoutOptionId}--table`);\n if (mainTable) {\n mainTable.classList.remove('ae-hidden');\n }\n // Hide the edit form\n editForm.classList.add('ae-hidden');\n }\n }\n\n\n /**\n * Updates the delete button state based on active status\n * This is the single source of truth for dynamic delete button state updates\n * @param {boolean} isActive - Whether the checkout option is active\n */\n updateDeleteButtonState(isActive) {\n if (!this.hasDeleteButtonTarget) return;\n\n if (isActive) {\n // Disable delete button and add tooltip\n this.deleteButtonTarget.disabled = true;\n this.deleteButtonTarget.setAttribute('title', 'Sorry, but you can\\'t delete a checkout option that is active. Set \\'Collect\\'? to \\'No\\', then you may delete.');\n } else {\n // Enable delete button and update tooltip\n this.deleteButtonTarget.disabled = false;\n this.deleteButtonTarget.setAttribute('title', 'Delete');\n }\n\n // Update the data attribute to keep it in sync\n this.deleteButtonTarget.dataset.active = isActive.toString();\n }\n\n}\n", "import { Controller } from '../stimulus';\nimport NotificationMixin from '../mixins/notification_mixin';\n\nexport default class extends Controller {\n initialize() {\n this.feeId = this.element.dataset.feeId;\n this.originalValue = this.element.value;\n this.boundClick = this.click.bind(this);\n this.boundBlur = this.blur.bind(this);\n }\n\n connect() {\n // Add notification capabilities\n Object.assign(this, NotificationMixin);\n\n // Store original value on connect\n this.originalValue = this.element.value;\n\n this.element.addEventListener('click', this.boundClick);\n this.element.addEventListener('blur', this.boundBlur);\n }\n\n disconnect() {\n if (this.boundClick) {\n this.element.removeEventListener('click', this.boundClick);\n }\n if (this.boundBlur) {\n this.element.removeEventListener('blur', this.boundBlur);\n }\n }\n\n click(event) {\n event.preventDefault();\n\n // Select all text in the input field for easy editing\n this.element.select();\n }\n\n blur(event) {\n event.preventDefault();\n\n // Validate that the value is not negative\n const value = parseFloat(this.element.value);\n if (value < 0) {\n this.element.value = this.originalValue;\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Fee amount cannot be negative');\n }\n return;\n }\n\n // Only submit if value changed\n if (this.element.value !== this.originalValue) {\n const form = this.element.closest('form');\n if (form) {\n // Show saving indicator immediately\n this.showSavingIndicator();\n\n // For Rails UJS forms, we need to use Rails.fire\n if (typeof Rails !== 'undefined' && Rails.fire) {\n Rails.fire(form, 'submit');\n } else {\n const submitEvent = new Event('submit', { bubbles: true, cancelable: true });\n form.dispatchEvent(submitEvent);\n }\n\n // Update original value\n this.originalValue = this.element.value;\n\n // Since Rails UJS events might not fire for JS responses,\n // show notification after a delay\n setTimeout(() => {\n this.hideSavingIndicator();\n this.showSaveNotification('Fee updated');\n }, 500);\n }\n }\n }\n\n showSavingIndicator() {\n // Add visual feedback that we're saving\n this.element.classList.add('saving');\n this.element.style.opacity = '0.6';\n }\n\n hideSavingIndicator() {\n this.element.classList.remove('saving');\n this.element.style.opacity = '1';\n }\n}\n", "import { Controller } from '../stimulus';\nimport NotificationMixin from '../mixins/notification_mixin';\n\nexport default class extends Controller {\n static targets = ['button', 'calculationType', 'symbol'];\n\n initialize() {\n this.feeId = this.element.dataset.feeId;\n this.boundToggle = this.toggleCalculationType.bind(this);\n }\n\n connect() {\n // Add notification capabilities\n Object.assign(this, NotificationMixin);\n\n this.element.addEventListener('click', this.boundToggle);\n\n // Initialize the hidden field value based on the current symbol\n // This ensures the hidden field is in sync with the displayed symbol\n const symbolElement = this.symbolTarget;\n const calculationTypeElement = this.calculationTypeTarget;\n const currentSymbol = symbolElement.textContent.trim();\n\n calculationTypeElement.value = currentSymbol === '%' ? 'percentage' : 'fixed_amount';\n }\n\n disconnect() {\n if (this.boundToggle) {\n this.element.removeEventListener('click', this.boundToggle);\n }\n }\n\n toggleCalculationType(event) {\n event.preventDefault();\n event.stopPropagation();\n\n const symbolElement = this.symbolTarget;\n const calculationTypeElement = this.calculationTypeTarget;\n\n // Toggle based on current symbol\n const currentSymbol = symbolElement.textContent.trim();\n let newCalculationType;\n\n if (currentSymbol === '%') {\n symbolElement.textContent = '$';\n newCalculationType = 'fixed_amount';\n } else {\n symbolElement.textContent = '%';\n newCalculationType = 'percentage';\n }\n\n // Update the hidden field\n calculationTypeElement.value = newCalculationType;\n\n // Submit the form to save the change\n const form = this.element.closest('form');\n if (form) {\n // For Rails UJS forms, we need to use Rails.fire\n if (typeof Rails !== 'undefined' && Rails.fire) {\n Rails.fire(form, 'submit');\n } else {\n const submitEvent = new Event('submit', { bubbles: true, cancelable: true });\n form.dispatchEvent(submitEvent);\n }\n\n // Show notification after a delay\n setTimeout(() => {\n this.showSaveNotification('Fee calculation type updated');\n }, 500);\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n connect() {\n // Controller connected to inline address form\n this.submitting = false;\n }\n\n disconnect() {\n // Clean up any event listeners if needed\n this.submitting = false;\n }\n\n submitForm(event) {\n event.preventDefault();\n if (event.stopImmediatePropagation) {\n event.stopImmediatePropagation();\n }\n\n // Prevent duplicate submissions with stronger checks\n if (this.submitting || this.element.dataset.submitting === 'true') {\n return;\n }\n\n const form = this.element;\n if (!form) {\n // Form not found - silently return to avoid errors\n return;\n }\n\n // Immediately disable form to prevent double-submission\n this.submitting = true;\n this.element.dataset.submitting = 'true';\n form.style.pointerEvents = 'none';\n\n // Disable submit button immediately\n const submitButton = form.querySelector('button[type=\"submit\"]');\n if (submitButton) {\n submitButton.disabled = true;\n submitButton.classList.add('ae-btn-disabled');\n submitButton.textContent = 'Creating...';\n }\n\n // Validate form before submission\n if (!this.validateForm(form)) {\n this.resetFormState(form, submitButton);\n return;\n }\n\n // Clear any previous errors\n this.clearErrors();\n\n // Submit form via AJAX\n const formData = new FormData(form);\n const url = form.action;\n const method = form.method.toUpperCase();\n\n\n fetch(url, {\n method: method,\n headers: {\n 'Accept': 'application/json',\n 'X-Requested-With': 'XMLHttpRequest',\n 'X-CSRF-Token': document.querySelector('meta[name=\"csrf-token\"]').getAttribute('content'),\n },\n body: formData,\n })\n .then(response => {\n if (response.ok) {\n return response.json();\n } else {\n return response.json().then(data => Promise.reject(data));\n }\n })\n .then(data => {\n if (data.success) {\n this.handleSuccess(data);\n } else {\n this.handleError(data.errors || ['Something went wrong']);\n }\n })\n .catch(error => {\n this.handleError(error.errors || ['Something went wrong']);\n })\n .finally(() => {\n // Reset form state\n this.resetFormState(form, submitButton);\n });\n\n // Reset form state after 3 seconds (safety measure)\n setTimeout(() => {\n this.resetFormState(form, submitButton);\n }, 3000);\n }\n\n validateForm(form) {\n\n const requiredFields = [\n 'dealers_organization_address[address_type]',\n 'dealers_organization_address[address_attributes][firstname]',\n 'dealers_organization_address[address_attributes][lastname]',\n 'dealers_organization_address[address_attributes][address1]',\n 'dealers_organization_address[address_attributes][city]',\n 'dealers_organization_address[address_attributes][state_id]',\n 'dealers_organization_address[address_attributes][zipcode]',\n 'dealers_organization_address[address_attributes][phone]',\n ];\n\n let isValid = true;\n const errors = [];\n\n requiredFields.forEach(fieldName => {\n const field = form.querySelector(`[name=\"${fieldName}\"]`);\n\n if (!field) {\n isValid = false;\n const label = this.getFieldLabel(fieldName);\n errors.push(`${label} field is missing from form`);\n } else if (!field.value.trim()) {\n isValid = false;\n const label = this.getFieldLabel(fieldName);\n errors.push(`${label} is required`);\n }\n });\n\n if (!isValid) {\n this.showErrors(errors);\n }\n\n return isValid;\n }\n\n getFieldLabel(fieldName) {\n const labelMap = {\n 'dealers_organization_address[address_type]': 'Address Type',\n 'dealers_organization_address[address_attributes][firstname]': 'First Name',\n 'dealers_organization_address[address_attributes][lastname]': 'Last Name',\n 'dealers_organization_address[address_attributes][address1]': 'Address Line 1',\n 'dealers_organization_address[address_attributes][city]': 'City',\n 'dealers_organization_address[address_attributes][state_id]': 'State',\n 'dealers_organization_address[address_attributes][zipcode]': 'ZIP Code',\n 'dealers_organization_address[address_attributes][phone]': 'Phone Number',\n };\n return labelMap[fieldName] || fieldName;\n }\n\n handleSuccess(data) {\n // Show success message\n this.showSuccessMessage(data.message || 'Address saved successfully');\n\n // Notify parent modal controller to refresh and hide form\n const parentModal = this.element.closest('[data-controller*=\"sale-settings-shipping-addresses\"]');\n if (parentModal) {\n // Dispatch custom event to parent controller\n const refreshEvent = new CustomEvent('address-form:success', {\n detail: { address: data.address },\n });\n parentModal.dispatchEvent(refreshEvent);\n }\n }\n\n handleError(errors) {\n const errorMessages = Array.isArray(errors) ? errors : [errors];\n this.showErrors(errorMessages);\n }\n\n showErrors(errors) {\n const errorContainer = this.element.querySelector('#inline-form-errors');\n const errorList = this.element.querySelector('#inline-error-list');\n\n if (errorContainer && errorList) {\n errorList.innerHTML = '';\n errors.forEach(error => {\n const li = document.createElement('li');\n li.textContent = error;\n errorList.appendChild(li);\n });\n errorContainer.style.display = 'block';\n }\n }\n\n clearErrors() {\n const errorContainer = this.element.querySelector('#inline-form-errors');\n if (errorContainer) {\n errorContainer.style.display = 'none';\n }\n }\n\n showSuccessMessage(message) {\n // Use global flash message system if available\n if (window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash(message);\n } else {\n // Fallback: Create temporary success message\n const successDiv = document.createElement('div');\n successDiv.className = 'ae-alert ae-alert-success';\n successDiv.textContent = message;\n successDiv.style.cssText = 'position:fixed;top:20px;right:20px;z-index:9999';\n document.body.appendChild(successDiv);\n setTimeout(() => successDiv.remove(), 5000);\n }\n }\n\n resetFormState(form, submitButton) {\n // Reset all submission flags\n this.submitting = false;\n if (this.element) {\n this.element.dataset.submitting = 'false';\n }\n // Re-enable form interactions\n if (form) {\n form.style.pointerEvents = 'auto';\n }\n\n // Re-enable submit button\n if (submitButton) {\n submitButton.disabled = false;\n submitButton.classList.remove('ae-btn-disabled');\n submitButton.textContent = 'Create Address';\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['tabContent'];\n\n connect() {\n // Initialize the modal state\n this.saleId = this.element.dataset.saleId;\n this.shippingMethodId = this.element.dataset.shippingMethodId;\n this.shippingMethodType = this.element.dataset.shippingMethodType;\n\n // Explicit tab initialization to ensure content shows\n this.initializeTabs();\n\n // Bind event handler to ensure proper cleanup\n this.boundHandleFormSuccess = this.handleFormSuccess.bind(this);\n this.element.addEventListener('address-form:success', this.boundHandleFormSuccess);\n }\n\n disconnect() {\n // Clean up event listeners\n if (this.boundHandleFormSuccess) {\n this.element.removeEventListener('address-form:success', this.boundHandleFormSuccess);\n }\n }\n\n initializeTabs() {\n // Ensure the \"All\" tab is active initially\n const allTab = this.element.querySelector('#all-tab');\n const allTabPane = this.element.querySelector('#all-addresses.tab-pane');\n\n if (allTab && allTabPane) {\n // Make sure all tab is marked active\n this.element.querySelectorAll('.ae-tab').forEach(tab => tab.classList.remove('active-tab'));\n allTab.classList.add('active-tab');\n\n // Make sure all addresses pane is visible\n this.element.querySelectorAll('.tab-pane').forEach(pane => {\n pane.style.display = 'none';\n pane.classList.remove('active');\n });\n\n allTabPane.style.display = 'block';\n allTabPane.classList.add('active');\n }\n }\n\n restoreActiveTab() {\n const targetTab = this.activeTabBeforeRefresh || 'all';\n\n // Find the tab and activate it\n const tabElement = this.element.querySelector(`[data-tab=\"${targetTab}\"]`);\n const tabPaneElement = this.element.querySelector(`[data-tab=\"${targetTab}\"].tab-pane`);\n\n if (tabElement && tabPaneElement) {\n // Activate the target tab\n this.element.querySelectorAll('.ae-tab').forEach(tab => tab.classList.remove('active-tab'));\n tabElement.classList.add('active-tab');\n\n // Show target tab pane\n this.element.querySelectorAll('.tab-pane').forEach(pane => {\n pane.style.display = 'none';\n pane.classList.remove('active');\n });\n\n tabPaneElement.style.display = 'block';\n tabPaneElement.classList.add('active');\n } else {\n // Fallback to \"All\" tab if target tab not found\n this.initializeTabs();\n }\n }\n\n activateTab(event) {\n const tab = event.target;\n const tabType = tab.dataset.tab;\n\n // Update tab appearance\n this.element.querySelectorAll('.ae-tab').forEach(t => t.classList.remove('active-tab'));\n tab.classList.add('active-tab');\n\n // Show/hide tab content\n this.showTabContent(tabType);\n }\n\n showTabContent(tabType) {\n // Hide all tab panes\n this.element.querySelectorAll('.tab-pane').forEach(pane => {\n pane.style.display = 'none';\n pane.classList.remove('active');\n });\n\n // Show the selected tab pane using specific selector to avoid ambiguity\n const targetPane = this.element.querySelector(`.tab-pane[data-tab=\"${tabType}\"]`);\n\n if (targetPane) {\n targetPane.style.display = 'block';\n targetPane.classList.add('active');\n }\n }\n\n\n addNewAddress(event) {\n event.preventDefault();\n\n // Show the inline form instead of opening a separate modal\n this.showForm();\n }\n\n showForm() {\n // Load the form content via AJAX\n const url = `/teamsites/${this.saleId}/settings/addresses/new_inline`;\n\n fetch(url)\n .then(response => response.text())\n .then(html => {\n // Insert form content into the placeholder\n const formPlaceholder = this.element.querySelector('#form-content-placeholder');\n if (formPlaceholder) {\n formPlaceholder.innerHTML = html;\n }\n\n // Slide form up\n this.slideFormUp();\n })\n .catch(() => {\n this.showError('Failed to load address form. Please try again.');\n });\n }\n\n hideForm() {\n this.slideFormDown();\n }\n\n slideFormUp() {\n const listView = this.element.querySelector('#address-list-view');\n const formView = this.element.querySelector('#address-form-view');\n\n if (listView && formView) {\n // Hide the address list view\n listView.style.display = 'none';\n\n // Show and animate the form view\n formView.style.display = 'block';\n // Force reflow to ensure display:block is applied before transform\n formView.offsetHeight;\n formView.style.transform = 'translateY(0)';\n }\n }\n\n slideFormDown() {\n const listView = this.element.querySelector('#address-list-view');\n const formView = this.element.querySelector('#address-form-view');\n\n if (listView && formView) {\n // Animate form down\n formView.style.transform = 'translateY(100%)';\n\n // After transition, hide form and show list\n setTimeout(() => {\n formView.style.display = 'none';\n listView.style.display = 'block';\n\n // Clear form content to ensure clean state\n const formPlaceholder = this.element.querySelector('#form-content-placeholder');\n if (formPlaceholder) {\n formPlaceholder.innerHTML = '';\n }\n }, 300); // Match CSS transition duration\n }\n }\n\n handleFormSuccess(_event) {\n // Handle successful inline form submission\n this.refreshAddressList();\n }\n\n refreshAddressList() {\n // Remember which tab is currently active before refresh\n const activeTab = this.element.querySelector('.ae-tab.active-tab');\n const activeTabType = activeTab ? activeTab.dataset.tab : 'all';\n this.activeTabBeforeRefresh = activeTabType;\n\n // Reload the address list after successful form submission\n // Include shipping_method_type parameter to match the action's expectations\n const shippingMethodType = this.shippingMethodType || 'bulk'; // Default to bulk if not set\n const url = `/teamsites/${this.saleId}/settings/shipping_methods_addresses?shipping_method_type=${shippingMethodType}`;\n\n fetch(url, {\n headers: {\n 'Accept': 'text/html',\n 'X-Requested-With': 'XMLHttpRequest',\n 'X-CSRF-Token': document.querySelector('meta[name=\"csrf-token\"]').getAttribute('content'),\n },\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n return response.text();\n })\n .then(html => {\n // Extract the tab content and update the address list view\n const tempDiv = document.createElement('div');\n tempDiv.innerHTML = html;\n\n const newTabContent = tempDiv.querySelector('#tab-content');\n const currentTabContent = this.element.querySelector('#tab-content');\n\n if (newTabContent && currentTabContent) {\n currentTabContent.innerHTML = newTabContent.innerHTML;\n // Restore the previously active tab instead of always going to \"All\"\n this.restoreActiveTab();\n }\n\n // Slide form down and show updated list\n this.slideFormDown();\n })\n .catch(() => {\n this.showError('Failed to refresh address list. Please reload the page.');\n // Still slide form down even if refresh fails\n this.slideFormDown();\n });\n }\n\n closeModal() {\n // Close the modal using the existing close button\n const closeButton = this.element.querySelector('.mfp-close');\n if (closeButton) {\n closeButton.click();\n }\n }\n\n showError(message) {\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash(message);\n }\n }\n}\n", "import { Controller } from '../stimulus';\nimport StimulusReinitMixin from '../mixins/stimulus_reinit_mixin';\nimport NotificationMixin from '../mixins/notification_mixin';\nimport CSRFTokenMixin from '../mixins/csrf_token_mixin';\n\nexport default class extends Controller {\n connect() {\n // Apply mixins\n Object.assign(this, StimulusReinitMixin);\n Object.assign(this, NotificationMixin);\n Object.assign(this, CSRFTokenMixin);\n\n // Track bound elements to prevent double-binding\n this.boundElements = new Set();\n\n // Extract sale_id from URL or use site_id from data attribute\n this.saleId = window.location.pathname.split('/')[2]; // Extract sale_id from URL\n this.siteId = this.element.dataset.siteId;\n\n // Set currentEditModal to the element itself if it's a modal container\n if (this.element.classList.contains('ae-popup') || this.element.classList.contains('mfp-content')) {\n this.currentEditModal = this.element;\n }\n\n // Listen for form show/hide events to control dropdown visibility\n this.boundFormShowHandler = this.handleFormShow.bind(this);\n this.boundFormHideHandler = this.handleFormHide.bind(this);\n this.boundModalRefreshHandler = this.handleModalRefresh.bind(this);\n this.boundToggleChangeHandler = this.handleToggleChange.bind(this);\n\n document.addEventListener('form:show', this.boundFormShowHandler);\n document.addEventListener('form:hide', this.boundFormHideHandler);\n document.addEventListener('shipping-rates:refresh-modal', this.boundModalRefreshHandler);\n document.addEventListener('toggle:changed', this.boundToggleChangeHandler);\n }\n\n disconnect() {\n // Clean up event listeners\n if (this.boundFormShowHandler) {\n document.removeEventListener('form:show', this.boundFormShowHandler);\n }\n if (this.boundFormHideHandler) {\n document.removeEventListener('form:hide', this.boundFormHideHandler);\n }\n if (this.boundModalRefreshHandler) {\n document.removeEventListener('shipping-rates:refresh-modal', this.boundModalRefreshHandler);\n }\n if (this.boundToggleChangeHandler) {\n document.removeEventListener('toggle:changed', this.boundToggleChangeHandler);\n }\n }\n\n handleDropdownClick() {\n // Handle dropdown interactions - delegated to the dropdown component\n // This method can be expanded if needed for custom dropdown behavior\n }\n\n handleFormShow(_event) {\n // Hide tiered rates dropdown when edit form is shown\n this.toggleTieredDropdownVisibility(false);\n }\n\n handleFormHide(_event) {\n // Show tiered rates dropdown when edit form is hidden\n this.toggleTieredDropdownVisibility(true);\n }\n\n handleModalRefresh(event) {\n // Handle refresh modal request from form controller\n if (this.currentEditModal && this.currentShippingMethodId) {\n // Ensure we have the right shipping method ID from the event if provided\n const shippingMethodId = event.detail?.shippingMethodId || this.currentShippingMethodId;\n if (shippingMethodId) {\n this.currentShippingMethodId = shippingMethodId;\n this.refreshModalContent();\n }\n }\n }\n\n handleToggleChange(event) {\n // Handle shipping rate toggle changes\n // When a rate is toggled active/inactive, update the shipping method panel\n // to reflect the current active rate status\n if (event.detail && 'active' in event.detail) {\n this.updateShippingMethodRateDisplay(event);\n }\n }\n\n updateShippingMethodRateDisplay(event) {\n // Find the shipping method panel that needs updating\n const toggleElement = event.target;\n if (!toggleElement) return;\n\n // Try to find the shipping method ID from the toggle element or its context\n const form = toggleElement.closest('form');\n if (!form) return;\n\n // Extract shipping method ID from the form action URL\n // Form action typically looks like: /teamsites/SALE_ID/settings/shipping_rates/RATE_ID\n const actionUrl = form.action;\n const urlParts = actionUrl.split('/');\n const shippingRateIdIndex = urlParts.findIndex(part => part === 'shipping_rates') + 1;\n\n if (shippingRateIdIndex > 0 && urlParts[shippingRateIdIndex]) {\n const _shippingRateId = urlParts[shippingRateIdIndex];\n\n // Find the associated shipping method panel by looking for rate data\n const shippingMethodPanel = document.querySelector('.shipping-method-panel');\n if (shippingMethodPanel) {\n this.refreshShippingMethodRateInfo(shippingMethodPanel);\n }\n }\n }\n\n refreshShippingMethodRateInfo(panel) {\n // Find the rate container within the panel\n const rateContainer = panel.querySelector('.rate-container dd');\n if (!rateContainer) return;\n\n // Get the shipping method ID from the panel\n const editButton = panel.querySelector('.edit-shipping-method');\n const shippingMethodId = editButton?.dataset?.shippingMethodId;\n\n if (!shippingMethodId || !this.saleId) return;\n\n // Make AJAX request to get updated rate info\n const url = `/teamsites/${this.saleId}/settings/shipping_methods/${shippingMethodId}/active_rate`;\n\n fetch(url, {\n method: 'GET',\n headers: this.getHeadersWithCSRF({\n 'Accept': 'application/json',\n 'X-Requested-With': 'XMLHttpRequest',\n }),\n })\n .then(response => response.json())\n .then(data => {\n // Update the rate display to match template structure\n rateContainer.innerHTML = '';\n\n // Add name (always present)\n const nameText = document.createTextNode(data.name || 'No active rate');\n rateContainer.appendChild(nameText);\n\n // Add amount_text if present (matches template structure)\n if (data.amount_text && data.amount_text.trim() !== '') {\n const amountText = document.createTextNode(' ' + data.amount_text);\n rateContainer.appendChild(amountText);\n }\n })\n .catch(_error => {\n // Could show a user notification here if desired\n });\n }\n\n toggleTieredDropdownVisibility(visible) {\n // Hide the dropdown section when editing\n if (this.currentEditModal) {\n const dropdownSection = this.currentEditModal.querySelector('section.flex-row.flex-center.flex-align-start');\n if (dropdownSection) {\n dropdownSection.style.display = visible ? 'flex' : 'none';\n }\n }\n }\n\n remove(event) {\n // Alias for delete method - used by template action\n this.delete(event);\n }\n\n doNothing(event) {\n // Method for disabled buttons - prevents default action\n event.preventDefault();\n }\n\n edit(event) {\n event.preventDefault();\n\n const shippingMethodId = event.currentTarget.dataset.shippingMethodId;\n\n if (!shippingMethodId) {\n return;\n }\n\n // Open edit modal\n this.openEditModal(shippingMethodId);\n }\n\n async openEditModal(shippingMethodId) {\n // Store shipping method ID for later use\n this.currentShippingMethodId = shippingMethodId;\n\n // Ensure saleId is available - fallback to extracting from URL\n const saleId = this.saleId || window.location.pathname.split('/')[2];\n if (!saleId) {\n this.handleModalError(new Error('Unable to determine sale ID'));\n return;\n }\n\n const url = `/teamsites/${saleId}/settings/shipping_methods/${shippingMethodId}/edit`;\n\n try {\n // Clean up any existing modals first\n this.cleanupExistingModals();\n\n // Create modal elements directly (simple approach)\n this.createModalBackdrop();\n this.createModalWrapper();\n this.showModalLoading();\n\n // Fetch content\n const response = await fetch(url, {\n headers: {\n 'X-Requested-With': 'XMLHttpRequest',\n 'Accept': 'text/html',\n 'X-CSRF-Token': this.getCSRFToken(),\n },\n credentials: 'same-origin',\n });\n\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n const html = await response.text();\n\n // Display content in modal\n this.currentEditModal.innerHTML = html;\n this.hideModalLoading();\n this.setupModalCloseHandlers();\n this.setupModalCloseCallback();\n\n // Reinitialize Stimulus controllers in modal content\n this.reinitializeStimulusControllers(this.currentEditModal);\n\n // Setup tiered dropdown fallback since Stimulus reinit may not work reliably\n this.setupTieredDropdownFallback();\n\n } catch (error) {\n this.handleModalError(error);\n }\n }\n\n setupModalCloseCallback() {\n // Listen for modal close event\n const closeHandler = () => {\n // Reset any state if needed\n this.currentShippingMethodId = null;\n };\n document.addEventListener('ajax-popup:afterClose', closeHandler, { once: true });\n }\n\n displayEditModal(html, _shippingMethodId) {\n // Create backdrop first, then wrapper (same order as ajax-popup controller)\n this.createModalBackdrop();\n this.createModalWrapper();\n\n // Set content\n this.currentEditModal.innerHTML = html;\n\n // Reinitialize Stimulus controllers for the newly loaded content\n this.reinitializeStimulusControllers(this.currentEditModal);\n\n // Manually handle tiered dropdown since Stimulus isn't connecting\n this.setupTieredDropdownFallback();\n\n // Manually handle action buttons since Stimulus isn't connecting in modals\n this.setupCloneButtonsFallback();\n this.setupEditButtonsFallback();\n // Commented out to prevent duplicate delete handlers - each rate controller handles its own\n // this.setupDeleteButtonsFallback();\n\n // Setup close handlers\n this.bindEditModalCloseEvents();\n\n // Setup free rates autosave fallback\n this.setupFreeRatesAutosaveFallback();\n\n // Setup percentage rates autosave fallback\n this.setupPercentageRatesAutosaveFallback();\n\n // Setup fixed rates autosave fallback\n this.setupFixedRatesAutosaveFallback();\n\n // Setup tiered rates autosave fallback\n this.setupTieredRatesAutosaveFallback();\n\n // Setup back to rates button fallback\n this.setupBackToRatesButtonFallback();\n\n // Setup shipping rates dropdown selector fallback\n this.setupShippingRatesDropdownFallback();\n\n // Setup tiered rate edit button fallback\n this.setupTieredRateEditButtonFallback();\n\n // Add body class for modal state\n document.body.classList.add('mfp-open');\n }\n\n createModalWrapper() {\n this.currentEditModal = document.createElement('div');\n this.currentEditModal.className = 'mfp-wrap mfp-close-btn-in mfp-auto-cursor mfp-ajax-holder mfp-ready';\n this.currentEditModal.style.position = 'fixed';\n this.currentEditModal.style.top = '0';\n this.currentEditModal.style.left = '0';\n this.currentEditModal.style.width = '100%';\n this.currentEditModal.style.height = '100%';\n this.currentEditModal.style.zIndex = '1050';\n this.currentEditModal.style.overflow = 'auto';\n this.currentEditModal.style.display = 'flex';\n this.currentEditModal.style.alignItems = 'center';\n this.currentEditModal.style.justifyContent = 'center';\n\n document.body.appendChild(this.currentEditModal);\n }\n\n createModalBackdrop() {\n this.currentEditBackdrop = document.createElement('div');\n this.currentEditBackdrop.className = 'mfp-bg mfp-ready';\n this.currentEditBackdrop.style.position = 'fixed';\n this.currentEditBackdrop.style.top = '0';\n this.currentEditBackdrop.style.left = '0';\n this.currentEditBackdrop.style.width = '100%';\n this.currentEditBackdrop.style.height = '100%';\n this.currentEditBackdrop.style.zIndex = '1040';\n this.currentEditBackdrop.style.opacity = '0.8';\n this.currentEditBackdrop.style.backgroundColor = '#0b0b0b';\n this.currentEditBackdrop.addEventListener('click', () => this.closeEditModal());\n\n document.body.appendChild(this.currentEditBackdrop);\n }\n\n bindEditModalCloseEvents() {\n if (this.currentEditModal) {\n const closeButtons = this.currentEditModal.querySelectorAll('.mfp-close');\n closeButtons.forEach(button => {\n button.addEventListener('click', () => this.closeEditModal());\n });\n }\n\n // Handle backdrop clicks\n if (this.currentEditBackdrop) {\n this.currentEditBackdrop.addEventListener('click', () => this.closeEditModal());\n }\n }\n\n closeEditModal() {\n // Clean up tiered dropdown event listener\n if (this.tieredDropdownElement && this.boundTieredDropdownHandler) {\n this.tieredDropdownElement.removeEventListener('change', this.boundTieredDropdownHandler);\n this.tieredDropdownElement = null;\n this.boundTieredDropdownHandler = null;\n }\n\n if (this.currentEditModal) {\n this.currentEditModal.remove();\n this.currentEditModal = null;\n }\n\n if (this.currentEditBackdrop) {\n this.currentEditBackdrop.remove();\n this.currentEditBackdrop = null;\n }\n\n // Remove CSS classes from body\n document.body.classList.remove('mfp-open');\n\n // Refresh the shipping method display to show any changes\n this.refreshShippingMethodDisplay();\n }\n\n setupTieredDropdownFallback() {\n // Find the tiered dropdown in the modal\n this.tieredDropdownElement = this.currentEditModal.querySelector('[data-controller=\"sale-settings-shipping-rates-tiered-dropdown\"]');\n\n if (this.tieredDropdownElement) {\n // Get shipping method ID from the element\n const shippingMethodId = this.tieredDropdownElement.dataset.shippingMethodId;\n\n // Bind change event directly\n this.boundTieredDropdownHandler = (event) => {\n const tieredRateId = event.target.value;\n if (tieredRateId) {\n this.copyTieredRate(tieredRateId, shippingMethodId);\n // Reset dropdown\n event.target.value = '';\n }\n };\n\n this.tieredDropdownElement.addEventListener('change', this.boundTieredDropdownHandler);\n\n // Also bind to Select2 events if present\n if (window.$ && window.$.fn.select2) {\n $(this.tieredDropdownElement).on('select2:select', (e) => {\n const tieredRateId = e.params.data.id;\n if (tieredRateId) {\n this.copyTieredRate(tieredRateId, shippingMethodId);\n // Reset dropdown\n $(this.tieredDropdownElement).val('').trigger('change');\n }\n });\n }\n }\n }\n\n copyTieredRate(tieredRateId, shippingMethodId) {\n const url = `/teamsites/${this.saleId}/settings/shipping_methods/${shippingMethodId}/shipping_rates`;\n\n // Use the baseline approach - send dealer_tiered_shipping_fee_id for copying\n const data = {\n dealer_tiered_shipping_fee_id: tieredRateId,\n };\n\n return fetch(url, {\n method: 'POST',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Content-Type': 'application/json',\n 'Accept': 'application/json',\n },\n body: JSON.stringify(data),\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n return response.json();\n })\n .then(data => {\n if (data.success) {\n this.showSuccessMessage(data.message || 'Tiered rate copied successfully');\n // Close modal and refresh parent page shipping methods\n this.closeEditModal();\n } else {\n throw new Error(data.errors ? data.errors.join(', ') : 'Failed to copy tiered rate');\n }\n })\n .catch(_error => {\n this.handleError('Failed to copy tiered rate');\n });\n }\n\n refreshModalContent() {\n // Re-fetch the modal content to show updated rates\n if (this.currentShippingMethodId) {\n const url = `/teamsites/${this.saleId}/settings/shipping_methods/${this.currentShippingMethodId}/edit`;\n\n // Clear bound elements to prevent duplicate bindings\n if (this.boundElements) {\n this.boundElements.clear();\n }\n\n return fetch(url, {\n method: 'GET',\n headers: {\n 'Accept': 'text/html',\n 'X-CSRF-Token': this.getCSRFToken(),\n },\n })\n .then(response => response.text())\n .then(html => {\n // Update modal content\n this.currentEditModal.innerHTML = html;\n\n // Re-initialize Stimulus controllers for the new content\n this.reinitializeStimulusControllers(this.currentEditModal);\n\n // Re-setup all the fallback handlers\n this.setupTieredDropdownFallback();\n this.setupCloneButtonsFallback();\n this.setupEditButtonsFallback();\n this.setupBackToRatesButtonFallback();\n this.setupShippingRatesDropdownFallback();\n this.setupTieredRateEditButtonFallback();\n\n // Setup autosave fallbacks\n this.setupFreeRatesAutosaveFallback();\n this.setupPercentageRatesAutosaveFallback();\n this.setupFixedRatesAutosaveFallback();\n this.setupTieredRatesAutosaveFallback();\n\n // Re-bind close events\n this.bindEditModalCloseEvents();\n })\n .catch(_error => {\n // Silent fail\n });\n } else {\n return Promise.resolve();\n }\n }\n\n setupCloneButtonsFallback() {\n // Find all clone buttons in the modal\n const cloneButtons = this.currentEditModal.querySelectorAll('button[data-action*=\"clone\"]');\n\n cloneButtons.forEach(button => {\n // Bind click event directly\n button.addEventListener('click', (event) => {\n event.preventDefault();\n\n const rateId = button.dataset.id;\n const rateName = button.dataset.rateName || 'this rate';\n const shippingMethodId = button.dataset.shippingMethodId;\n\n if (!rateId || !shippingMethodId) {\n return;\n }\n\n if (!window.confirm(`Are you sure you want to clone ${rateName}?`)) {\n return;\n }\n\n this.cloneShippingRate(rateId, rateName, shippingMethodId);\n });\n });\n }\n\n setupEditButtonsFallback() {\n // Find all edit buttons in the modal\n const editButtons = this.currentEditModal.querySelectorAll('button[data-action*=\"edit\"]');\n\n editButtons.forEach(button => {\n // Skip if it's already an edit modal close button\n if (button.classList.contains('mfp-close')) return;\n\n // Bind click event directly\n button.addEventListener('click', (event) => {\n event.preventDefault();\n\n const rateId = button.dataset.id;\n const shippingMethodId = button.dataset.shippingMethodId;\n\n if (!rateId || !shippingMethodId) {\n return;\n }\n\n this.editShippingRate(rateId, shippingMethodId);\n });\n });\n }\n\n setupDeleteButtonsFallback() {\n // Find all delete buttons in the modal\n const deleteButtons = this.currentEditModal.querySelectorAll('button[data-action*=\"deleteRate\"]');\n\n deleteButtons.forEach(button => {\n // Bind click event directly\n button.addEventListener('click', (event) => {\n event.preventDefault();\n\n const rateId = button.dataset.id;\n const rateName = button.dataset.rateName || 'this rate';\n const shippingMethodId = button.dataset.shippingMethodId;\n\n if (!rateId || !shippingMethodId) {\n return;\n }\n\n if (!window.confirm(`Are you sure you want to delete ${rateName}?`)) {\n return;\n }\n\n this.deleteShippingRate(rateId, rateName, shippingMethodId);\n });\n });\n }\n\n setupBackToRatesButtonFallback() {\n // Find the back to rates button in the modal\n const backButton = this.currentEditModal.querySelector('.back-to-rates-btn');\n\n if (backButton) {\n // Bind click event directly\n backButton.addEventListener('click', (event) => {\n event.preventDefault();\n this.hideRateForm();\n });\n }\n }\n\n setupShippingRatesDropdownFallback() {\n // Find all rate type selector links\n const rateTypeLinks = this.currentEditModal.querySelectorAll('[data-action*=\"selectRateType\"]');\n\n rateTypeLinks.forEach(link => {\n // Remove any existing onclick handler\n link.onclick = null;\n\n // Add manual event listener\n link.addEventListener('click', (event) => {\n event.preventDefault();\n event.stopPropagation();\n\n const rateType = link.dataset.rateType;\n\n if (!rateType) return;\n\n // Get shipping method ID from the modal or dropdown\n const shippingMethodId = this.currentShippingMethodId;\n const saleId = this.saleId;\n\n const url = `/teamsites/${saleId}/settings/shipping_methods/${shippingMethodId}/shipping_rates/new?rate_type=${encodeURIComponent(rateType)}`;\n\n\n fetch(url, {\n method: 'GET',\n headers: {\n 'Accept': 'text/html',\n 'X-CSRF-Token': this.getCSRFToken(),\n },\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n return response.text();\n })\n .then(html => {\n this.displayRateForm(html, rateType);\n })\n .catch(_error => {\n this.showErrorMessage('Failed to load rate form');\n });\n });\n });\n }\n\n setupTieredRateEditButtonFallback() {\n // Find all tiered rate edit buttons in the modal\n const tieredRateEditButtons = this.currentEditModal.querySelectorAll('button[data-action*=\"editTieredRate\"]');\n\n tieredRateEditButtons.forEach(button => {\n // Bind click event directly\n button.addEventListener('click', (event) => {\n event.preventDefault();\n this.editTieredRate(event);\n });\n });\n }\n\n setupFreeRatesAutosaveFallback() {\n // Complete manual fallback for free rates - no Stimulus data-actions\n const freeContainer = this.currentEditModal.querySelector('#free-rate-table-container');\n if (!freeContainer) return;\n\n const rows = freeContainer.querySelectorAll('tr[data-rate-id]');\n rows.forEach(row => {\n const rateId = row.dataset.rateId;\n if (!rateId) return;\n\n // Active toggle is now handled by unified toggle controller\n\n // Collect address toggle handler\n const collectToggle = row.querySelector('input[type=\"checkbox\"][id*=\"_collect_address\"]');\n if (collectToggle && !this.boundElements.has(collectToggle)) {\n collectToggle.addEventListener('change', (event) => {\n const collectsAddress = event.currentTarget.checked;\n this.updateFreeRateAttribute(rateId, 'collect_address', collectsAddress, row);\n });\n this.boundElements.add(collectToggle);\n }\n\n // Name input handler with autosave\n const nameInput = row.querySelector('input[placeholder=\"Enter name\"]');\n if (nameInput && !this.boundElements.has(nameInput)) {\n // Input event for 2-second delayed autosave\n nameInput.addEventListener('input', (event) => {\n const newName = event.currentTarget.value.trim();\n const originalValue = event.currentTarget.dataset.originalValue;\n\n if (newName === originalValue) {\n return;\n }\n\n // Clear existing timeout\n const key = `name_${rateId}`;\n if (this.autosaveTimeouts && this.autosaveTimeouts[key]) {\n clearTimeout(this.autosaveTimeouts[key]);\n }\n\n // Initialize timeouts object if needed\n if (!this.autosaveTimeouts) {\n this.autosaveTimeouts = {};\n }\n\n // Visual feedback\n event.currentTarget.style.borderColor = '#007bff';\n event.currentTarget.style.transition = 'border-color 0.2s ease-in-out';\n\n // Set new timeout\n this.autosaveTimeouts[key] = setTimeout(() => {\n if (newName && newName !== originalValue) {\n this.updateFreeRateAttribute(rateId, 'name', newName, row);\n event.currentTarget.dataset.originalValue = newName;\n }\n // Remove visual feedback\n event.currentTarget.style.borderColor = '';\n delete this.autosaveTimeouts[key];\n }, 2000);\n });\n\n // Blur event for immediate save\n nameInput.addEventListener('blur', (event) => {\n const newName = event.currentTarget.value.trim();\n const originalValue = event.currentTarget.dataset.originalValue;\n\n // Clear any pending autosave\n const key = `name_${rateId}`;\n if (this.autosaveTimeouts && this.autosaveTimeouts[key]) {\n clearTimeout(this.autosaveTimeouts[key]);\n delete this.autosaveTimeouts[key];\n }\n\n if (newName && newName !== originalValue) {\n this.updateFreeRateAttribute(rateId, 'name', newName, row);\n event.currentTarget.dataset.originalValue = newName;\n }\n\n // Remove visual feedback\n event.currentTarget.style.borderColor = '';\n });\n\n this.boundElements.add(nameInput);\n }\n\n // Delete button handler\n const deleteButton = row.querySelector('button.delete');\n if (deleteButton && !this.boundElements.has(deleteButton)) {\n deleteButton.addEventListener('click', (event) => {\n event.preventDefault();\n\n const clickedButton = event.currentTarget;\n if (clickedButton.disabled) {\n return;\n }\n\n const rateId = clickedButton.dataset.id;\n const rateName = clickedButton.dataset.rateName || 'this rate';\n const shippingMethodId = clickedButton.dataset.shippingMethodId;\n\n if (!rateId || !shippingMethodId) {\n return;\n }\n\n if (!window.confirm(`Are you sure you want to delete ${rateName}?`)) {\n return;\n }\n\n // Find the row to remove after successful deletion\n const rowToRemove = clickedButton.closest('tr[data-rate-id]');\n\n const url = `/teamsites/${this.saleId}/settings/shipping_methods/${shippingMethodId}/shipping_rates/${rateId}`;\n fetch(url, {\n method: 'DELETE',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Accept': 'application/json',\n },\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n return response.json();\n })\n .then(data => {\n if (data.success) {\n if (rowToRemove) {\n rowToRemove.remove();\n }\n if (window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash(data.message || 'Rate deleted successfully');\n } else {\n this.showNotification(data.message || 'Rate deleted successfully', 'success', { duration: 3000 });\n }\n this.checkFreeTableEmptyState();\n } else {\n throw new Error(data.errors ? data.errors.join(', ') : 'Failed to delete rate');\n }\n })\n .catch(() => {\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Failed to delete rate');\n } else {\n this.showNotification('Failed to delete rate', 'error', { duration: 5000 });\n }\n });\n });\n this.boundElements.add(deleteButton);\n }\n });\n }\n\n setupPercentageRatesAutosaveFallback() {\n // Complete manual fallback for percentage rates - no Stimulus data-actions\n const percentageContainer = this.currentEditModal.querySelector('#percentage-rate-table-container');\n if (!percentageContainer) return;\n\n // Bind handlers to all elements that need them\n const allRows = percentageContainer.querySelectorAll('tr[data-rate-id]');\n allRows.forEach(row => {\n const rateId = row.dataset.rateId;\n\n // Delete button handler - bind to ALL delete buttons, even disabled ones\n const deleteButton = row.querySelector('button.delete');\n if (deleteButton && !this.boundElements.has(deleteButton)) {\n deleteButton.addEventListener('click', (event) => {\n event.preventDefault();\n\n const rateName = event.currentTarget.dataset.rateName || 'this rate';\n\n if (!window.confirm(`Are you sure you want to delete ${rateName}?`)) {\n return;\n }\n\n const url = `/teamsites/${this.saleId}/settings/shipping_methods/${this.currentShippingMethodId}/shipping_rates/${rateId}`;\n\n fetch(url, {\n method: 'DELETE',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Accept': 'application/json',\n },\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n return response.json();\n })\n .then(data => {\n if (data.success) {\n row.remove();\n if (window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash(data.message || 'Rate deleted successfully');\n } else {\n this.showNotification(data.message || 'Rate deleted successfully', 'success', { duration: 3000 });\n }\n this.checkPercentageTableEmptyState();\n } else {\n throw new Error(data.errors ? data.errors.join(', ') : 'Failed to delete rate');\n }\n })\n .catch(() => {\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Failed to delete rate');\n } else {\n this.showNotification('Failed to delete rate', 'error', { duration: 5000 });\n }\n });\n });\n this.boundElements.add(deleteButton);\n }\n\n // Active toggle is now handled by unified toggle controller\n\n // Collect address toggle handler\n const collectToggle = row.querySelector('input[type=\"checkbox\"][id*=\"_collect_address\"]');\n if (collectToggle && !this.boundElements.has(collectToggle)) {\n collectToggle.addEventListener('change', (event) => {\n const collectsAddress = event.currentTarget.checked;\n this.updatePercentageRateAttribute(rateId, 'collect_address', collectsAddress, row);\n });\n this.boundElements.add(collectToggle);\n }\n\n // Name input handler with autosave\n const nameInput = row.querySelector('input[placeholder=\"Enter name\"]');\n if (nameInput && !this.boundElements.has(nameInput)) {\n // Input event for 2-second delayed autosave\n nameInput.addEventListener('input', (event) => {\n const newName = event.currentTarget.value.trim();\n const originalValue = event.currentTarget.dataset.originalValue;\n\n if (newName === originalValue) {\n return;\n }\n\n // Clear existing timeout\n const key = `name_${rateId}`;\n if (this.autosaveTimeouts && this.autosaveTimeouts[key]) {\n clearTimeout(this.autosaveTimeouts[key]);\n }\n\n // Initialize timeouts object if needed\n if (!this.autosaveTimeouts) {\n this.autosaveTimeouts = {};\n }\n\n // Visual feedback\n event.currentTarget.style.borderColor = '#007bff';\n event.currentTarget.style.transition = 'border-color 0.2s ease-in-out';\n\n // Set new timeout\n this.autosaveTimeouts[key] = setTimeout(() => {\n if (newName && newName !== originalValue) {\n this.updatePercentageRateAttribute(rateId, 'name', newName, row);\n event.currentTarget.dataset.originalValue = newName;\n }\n // Remove visual feedback\n event.currentTarget.style.borderColor = '';\n delete this.autosaveTimeouts[key];\n }, 2000);\n });\n\n // Blur event for immediate save\n nameInput.addEventListener('blur', (event) => {\n const newName = event.currentTarget.value.trim();\n const originalValue = event.currentTarget.dataset.originalValue;\n\n // Clear any pending autosave\n const key = `name_${rateId}`;\n if (this.autosaveTimeouts && this.autosaveTimeouts[key]) {\n clearTimeout(this.autosaveTimeouts[key]);\n delete this.autosaveTimeouts[key];\n }\n\n if (newName && newName !== originalValue) {\n this.updatePercentageRateAttribute(rateId, 'name', newName, row);\n event.currentTarget.dataset.originalValue = newName;\n }\n\n // Remove visual feedback\n event.currentTarget.style.borderColor = '';\n });\n\n this.boundElements.add(nameInput);\n }\n\n // Rate input handler with autosave\n const rateInput = row.querySelector('input[placeholder=\"0.00\"]');\n if (rateInput && !this.boundElements.has(rateInput)) {\n // Input event for 2-second delayed autosave\n rateInput.addEventListener('input', (event) => {\n const newRate = parseFloat(event.currentTarget.value) || 0;\n const originalValue = parseFloat(event.currentTarget.dataset.originalValue) || 0;\n\n if (newRate === originalValue) {\n return;\n }\n\n // Clear existing timeout\n const key = `rate_${rateId}`;\n if (this.autosaveTimeouts && this.autosaveTimeouts[key]) {\n clearTimeout(this.autosaveTimeouts[key]);\n }\n\n // Initialize timeouts object if needed\n if (!this.autosaveTimeouts) {\n this.autosaveTimeouts = {};\n }\n\n // Visual feedback\n event.currentTarget.style.borderColor = '#007bff';\n event.currentTarget.style.transition = 'border-color 0.2s ease-in-out';\n\n // Set new timeout\n this.autosaveTimeouts[key] = setTimeout(() => {\n if (newRate !== originalValue) {\n this.updatePercentageRateAttribute(rateId, 'percentage_rate', newRate, row);\n event.currentTarget.dataset.originalValue = newRate.toFixed(2);\n }\n // Remove visual feedback\n event.currentTarget.style.borderColor = '';\n delete this.autosaveTimeouts[key];\n }, 2000);\n });\n\n // Blur event for immediate save\n rateInput.addEventListener('blur', (event) => {\n const newRate = parseFloat(event.currentTarget.value) || 0;\n const originalValue = parseFloat(event.currentTarget.dataset.originalValue) || 0;\n\n // Clear any pending autosave\n const key = `rate_${rateId}`;\n if (this.autosaveTimeouts && this.autosaveTimeouts[key]) {\n clearTimeout(this.autosaveTimeouts[key]);\n delete this.autosaveTimeouts[key];\n }\n\n if (newRate !== originalValue) {\n this.updatePercentageRateAttribute(rateId, 'percentage_rate', newRate, row);\n event.currentTarget.dataset.originalValue = newRate.toFixed(2);\n }\n\n // Remove visual feedback\n event.currentTarget.style.borderColor = '';\n });\n\n this.boundElements.add(rateInput);\n }\n });\n }\n\n updatePercentageRateAttribute(rateId, attribute, value, _row) {\n // Skip active attribute - now handled by unified toggle controller\n if (attribute === 'active') {\n return;\n }\n\n const url = `/teamsites/${this.saleId}/settings/shipping_methods/${this.currentShippingMethodId}/shipping_rates/${rateId}`;\n\n const requestBody = {\n shipping_rate: {},\n };\n requestBody.shipping_rate[attribute] = value;\n\n fetch(url, {\n method: 'PATCH',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Content-Type': 'application/json',\n 'Accept': 'application/json',\n },\n body: JSON.stringify(requestBody),\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n return response.json();\n })\n .then(data => {\n if (data.success) {\n this.showNotification(`Rate ${attribute.replace('_', ' ')} updated successfully`, 'success', { duration: 3000 });\n } else {\n throw new Error(data.errors ? data.errors.join(', ') : `Failed to update rate ${attribute}`);\n }\n })\n .catch((_error) => {\n this.showNotification(`Failed to update rate ${attribute.replace('_', ' ')}`, 'error', { duration: 5000 });\n });\n }\n\n updatePercentageDeleteButtonState(row, isActive) {\n const deleteButton = row.querySelector('button.delete');\n if (!deleteButton) return;\n\n if (isActive) {\n deleteButton.disabled = true;\n deleteButton.title = 'Sorry, but you can\\'t delete a shipping rate that is in use. To delete a shipping rate, make the rate inactive.';\n } else {\n deleteButton.disabled = false;\n deleteButton.removeAttribute('title');\n }\n }\n\n checkPercentageTableEmptyState() {\n const percentageContainer = this.currentEditModal.querySelector('#percentage-rate-table-container');\n if (!percentageContainer) return;\n\n const table = percentageContainer.querySelector('table');\n if (!table) {\n // If no table exists, create the empty state structure\n percentageContainer.innerHTML = `\n
Percentage Rate \n
\n \n \n Active \n Name \n Rate \n Collect Address \n \n \n \n \n \n \n \n \n \n
\n `;\n return;\n }\n\n const tbody = table.querySelector('tbody');\n const remainingRows = tbody ? tbody.querySelectorAll('tr:not(.empty-state)') : [];\n\n if (remainingRows.length === 0) {\n tbody.innerHTML = `\n
\n \n \n \n `;\n }\n }\n\n createPercentageRateNameBlurHandler() {\n return (event) => {\n const input = event.currentTarget;\n const rateId = this.getRateIdFromInput(input);\n const newName = input.value.trim();\n const originalValue = input.dataset.originalValue;\n\n if (newName && newName !== originalValue) {\n this.updatePercentageRateAttribute(rateId, 'name', newName);\n input.dataset.originalValue = newName;\n }\n };\n }\n\n createPercentageRateNameInputHandler() {\n return (event) => {\n const input = event.currentTarget;\n const rateId = this.getRateIdFromInput(input);\n\n if (this.percentageRateTimeouts && this.percentageRateTimeouts[rateId]) {\n clearTimeout(this.percentageRateTimeouts[rateId]);\n }\n\n if (!this.percentageRateTimeouts) {\n this.percentageRateTimeouts = {};\n }\n\n this.percentageRateTimeouts[rateId] = setTimeout(() => {\n const newName = input.value.trim();\n const originalValue = input.dataset.originalValue;\n\n if (newName && newName !== originalValue) {\n this.updatePercentageRateAttribute(rateId, 'name', newName);\n input.dataset.originalValue = newName;\n }\n delete this.percentageRateTimeouts[rateId];\n }, 2000);\n };\n }\n\n createPercentageRateBlurHandler() {\n return (event) => {\n const input = event.currentTarget;\n const rateId = this.getRateIdFromInput(input);\n const newRate = parseFloat(input.value) || 0;\n const originalValue = parseFloat(input.dataset.originalValue) || 0;\n\n if (newRate !== originalValue) {\n this.updatePercentageRateAttribute(rateId, 'percentage_rate', newRate);\n input.dataset.originalValue = newRate.toFixed(2);\n }\n };\n }\n\n createPercentageRateInputHandler() {\n return (event) => {\n const input = event.currentTarget;\n const rateId = this.getRateIdFromInput(input);\n const key = `rate-${rateId}`;\n\n if (this.percentageRateTimeouts && this.percentageRateTimeouts[key]) {\n clearTimeout(this.percentageRateTimeouts[key]);\n }\n\n if (!this.percentageRateTimeouts) {\n this.percentageRateTimeouts = {};\n }\n\n this.percentageRateTimeouts[key] = setTimeout(() => {\n const newRate = parseFloat(input.value) || 0;\n const originalValue = parseFloat(input.dataset.originalValue) || 0;\n\n if (newRate !== originalValue) {\n this.updatePercentageRateAttribute(rateId, 'percentage_rate', newRate);\n input.dataset.originalValue = newRate.toFixed(2);\n }\n delete this.percentageRateTimeouts[key];\n }, 2000);\n };\n }\n\n setupFixedRatesAutosaveFallback() {\n // Complete manual fallback for fixed rates - no Stimulus data-actions\n const fixedContainer = this.currentEditModal.querySelector('#fixed-rate-table-container');\n if (!fixedContainer) return;\n\n // Bind handlers to all elements that need them\n const allRows = fixedContainer.querySelectorAll('tr[data-rate-id]');\n allRows.forEach(row => {\n const rateId = row.dataset.rateId;\n\n // Delete button handler - bind to ALL delete buttons, even disabled ones\n const deleteButton = row.querySelector('button.delete');\n if (deleteButton && !this.boundElements.has(deleteButton)) {\n deleteButton.addEventListener('click', (event) => {\n event.preventDefault();\n\n const rateName = event.currentTarget.dataset.rateName || 'this rate';\n\n if (!window.confirm(`Are you sure you want to delete ${rateName}?`)) {\n return;\n }\n\n const url = `/teamsites/${this.saleId}/settings/shipping_methods/${this.currentShippingMethodId}/shipping_rates/${rateId}`;\n\n fetch(url, {\n method: 'DELETE',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Accept': 'application/json',\n },\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n return response.json();\n })\n .then(data => {\n if (data.success) {\n row.remove();\n if (window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash(data.message || 'Rate deleted successfully');\n } else {\n this.showNotification(data.message || 'Rate deleted successfully', 'success', { duration: 3000 });\n }\n this.checkFixedTableEmptyState();\n } else {\n throw new Error(data.errors ? data.errors.join(', ') : 'Failed to delete rate');\n }\n })\n .catch(() => {\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Failed to delete rate');\n } else {\n this.showNotification('Failed to delete rate', 'error', { duration: 5000 });\n }\n });\n });\n this.boundElements.add(deleteButton);\n }\n\n // Active toggle is now handled by unified toggle controller\n\n // Taxable toggle handler\n const taxableToggle = row.querySelector('input[type=\"checkbox\"][id*=\"_taxable\"]');\n if (taxableToggle && !this.boundElements.has(taxableToggle)) {\n taxableToggle.addEventListener('change', (event) => {\n const isTaxable = event.currentTarget.checked;\n this.updateFixedRateAttribute(rateId, 'taxable', isTaxable, row);\n });\n this.boundElements.add(taxableToggle);\n }\n\n // Collect address toggle handler\n const collectToggle = row.querySelector('input[type=\"checkbox\"][id*=\"_collect_address\"]');\n if (collectToggle && !this.boundElements.has(collectToggle)) {\n collectToggle.addEventListener('change', (event) => {\n const collectsAddress = event.currentTarget.checked;\n this.updateFixedRateAttribute(rateId, 'collect_address', collectsAddress, row);\n });\n this.boundElements.add(collectToggle);\n }\n\n // Name input handler with autosave\n const nameInput = row.querySelector('input[placeholder=\"Enter name\"]');\n if (nameInput && !this.boundElements.has(nameInput)) {\n // Input event for 2-second delayed autosave\n nameInput.addEventListener('input', (event) => {\n const newName = event.currentTarget.value.trim();\n const originalValue = event.currentTarget.dataset.originalValue;\n\n if (newName === originalValue) {\n return;\n }\n\n // Clear existing timeout\n const key = `name_${rateId}`;\n if (this.autosaveTimeouts && this.autosaveTimeouts[key]) {\n clearTimeout(this.autosaveTimeouts[key]);\n }\n\n // Initialize timeouts object if needed\n if (!this.autosaveTimeouts) {\n this.autosaveTimeouts = {};\n }\n\n // Visual feedback\n event.currentTarget.style.borderColor = '#007bff';\n event.currentTarget.style.transition = 'border-color 0.2s ease-in-out';\n\n // Set new timeout\n this.autosaveTimeouts[key] = setTimeout(() => {\n if (newName && newName !== originalValue) {\n this.updateFixedRateAttribute(rateId, 'name', newName, row);\n event.currentTarget.dataset.originalValue = newName;\n }\n // Remove visual feedback\n event.currentTarget.style.borderColor = '';\n delete this.autosaveTimeouts[key];\n }, 2000);\n });\n\n // Blur event for immediate save\n nameInput.addEventListener('blur', (event) => {\n const newName = event.currentTarget.value.trim();\n const originalValue = event.currentTarget.dataset.originalValue;\n\n // Clear any pending autosave\n const key = `name_${rateId}`;\n if (this.autosaveTimeouts && this.autosaveTimeouts[key]) {\n clearTimeout(this.autosaveTimeouts[key]);\n delete this.autosaveTimeouts[key];\n }\n\n if (newName && newName !== originalValue) {\n this.updateFixedRateAttribute(rateId, 'name', newName, row);\n event.currentTarget.dataset.originalValue = newName;\n }\n\n // Remove visual feedback\n event.currentTarget.style.borderColor = '';\n });\n\n this.boundElements.add(nameInput);\n }\n\n // Fixed rate input handler with autosave\n const rateInput = row.querySelector('input[placeholder=\"0.00\"]:not([id*=\"_percentage_rate\"])');\n if (rateInput && !this.boundElements.has(rateInput)) {\n // Input event for 2-second delayed autosave\n rateInput.addEventListener('input', (event) => {\n const newRate = parseFloat(event.currentTarget.value) || 0;\n const originalValue = parseFloat(event.currentTarget.dataset.originalValue) || 0;\n\n if (newRate === originalValue) {\n return;\n }\n\n // Clear existing timeout\n const key = `rate_${rateId}`;\n if (this.autosaveTimeouts && this.autosaveTimeouts[key]) {\n clearTimeout(this.autosaveTimeouts[key]);\n }\n\n // Initialize timeouts object if needed\n if (!this.autosaveTimeouts) {\n this.autosaveTimeouts = {};\n }\n\n // Visual feedback\n event.currentTarget.style.borderColor = '#007bff';\n event.currentTarget.style.transition = 'border-color 0.2s ease-in-out';\n\n // Set new timeout\n this.autosaveTimeouts[key] = setTimeout(() => {\n if (newRate !== originalValue) {\n this.updateFixedRateAttribute(rateId, 'fixed_rate', newRate, row);\n event.currentTarget.dataset.originalValue = newRate.toFixed(2);\n }\n // Remove visual feedback\n event.currentTarget.style.borderColor = '';\n delete this.autosaveTimeouts[key];\n }, 2000);\n });\n\n // Blur event for immediate save\n rateInput.addEventListener('blur', (event) => {\n const newRate = parseFloat(event.currentTarget.value) || 0;\n const originalValue = parseFloat(event.currentTarget.dataset.originalValue) || 0;\n\n // Clear any pending autosave\n const key = `rate_${rateId}`;\n if (this.autosaveTimeouts && this.autosaveTimeouts[key]) {\n clearTimeout(this.autosaveTimeouts[key]);\n delete this.autosaveTimeouts[key];\n }\n\n if (newRate !== originalValue) {\n this.updateFixedRateAttribute(rateId, 'fixed_rate', newRate, row);\n event.currentTarget.dataset.originalValue = newRate.toFixed(2);\n }\n\n // Remove visual feedback\n event.currentTarget.style.borderColor = '';\n });\n\n this.boundElements.add(rateInput);\n }\n });\n }\n\n updateFixedRateAttribute(rateId, attribute, value, _row) {\n // Skip active attribute - now handled by unified toggle controller\n if (attribute === 'active') {\n return;\n }\n\n const url = `/teamsites/${this.saleId}/settings/shipping_methods/${this.currentShippingMethodId}/shipping_rates/${rateId}`;\n\n const requestBody = {\n shipping_rate: {},\n };\n requestBody.shipping_rate[attribute] = value;\n\n fetch(url, {\n method: 'PATCH',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Content-Type': 'application/json',\n 'Accept': 'application/json',\n },\n body: JSON.stringify(requestBody),\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n return response.json();\n })\n .then(data => {\n if (data.success) {\n this.showNotification(`Rate ${attribute.replace('_', ' ')} updated successfully`, 'success', { duration: 3000 });\n } else {\n throw new Error(data.errors ? data.errors.join(', ') : `Failed to update rate ${attribute}`);\n }\n })\n .catch((_error) => {\n this.showNotification(`Failed to update rate ${attribute.replace('_', ' ')}`, 'error', { duration: 5000 });\n });\n }\n\n updateFixedDeleteButtonState(row, isActive) {\n const deleteButton = row.querySelector('button.delete');\n if (!deleteButton) return;\n\n if (isActive) {\n deleteButton.disabled = true;\n deleteButton.title = 'Sorry, but you can\\'t delete a shipping rate that is in use. To delete a shipping rate, make the rate inactive.';\n } else {\n deleteButton.disabled = false;\n deleteButton.removeAttribute('title');\n }\n }\n\n checkFixedTableEmptyState() {\n const fixedContainer = this.currentEditModal.querySelector('#fixed-rate-table-container');\n if (!fixedContainer) return;\n\n const tbody = fixedContainer.querySelector('tbody');\n const rows = tbody ? tbody.querySelectorAll('tr:not(.empty-state)') : [];\n\n if (rows.length === 0) {\n tbody.innerHTML = `\n
\n \n \n \n `;\n }\n }\n\n setupTieredRatesAutosaveFallback() {\n // Complete manual fallback for tiered rates - no Stimulus data-actions\n const tieredContainer = this.currentEditModal.querySelector('#tiered-rate-table-container');\n if (!tieredContainer) return;\n\n const rows = tieredContainer.querySelectorAll('tr[data-rate-id]');\n rows.forEach(row => {\n const rateId = row.dataset.rateId;\n if (!rateId) return;\n\n // Active toggle handler\n const activeToggle = row.querySelector('input[type=\"checkbox\"][id*=\"_active\"]');\n if (activeToggle && !this.boundElements.has(activeToggle)) {\n activeToggle.addEventListener('change', (event) => {\n const isActive = event.currentTarget.checked;\n this.updateTieredRateAttribute(rateId, 'active', isActive, row);\n });\n this.boundElements.add(activeToggle);\n }\n\n // Collect address toggle handler\n const collectToggle = row.querySelector('input[type=\"checkbox\"][id*=\"_collect_address\"]');\n if (collectToggle && !this.boundElements.has(collectToggle)) {\n collectToggle.addEventListener('change', (event) => {\n const collectsAddress = event.currentTarget.checked;\n this.updateTieredRateAttribute(rateId, 'collect_address', collectsAddress, row);\n });\n this.boundElements.add(collectToggle);\n }\n\n // Clone button handler - Skip if already has Stimulus action\n const cloneButton = row.querySelector('button[title=\"Clone\"]');\n if (cloneButton && !this.boundElements.has(cloneButton)) {\n // Check if button already has Stimulus data-action to avoid duplicate handlers\n if (cloneButton.dataset.action && cloneButton.dataset.action.includes('clone')) {\n // Skip - let Stimulus handle it\n this.boundElements.add(cloneButton); // Still track to avoid re-checking\n } else {\n // Only add fallback if no Stimulus action exists\n cloneButton.addEventListener('click', (event) => {\n event.preventDefault();\n\n const rateId = cloneButton.dataset.id;\n const rateName = cloneButton.dataset.rateName || 'this rate';\n const shippingMethodId = cloneButton.dataset.shippingMethodId;\n\n if (!rateId || !shippingMethodId) {\n return;\n }\n\n if (!window.confirm(`Are you sure you want to clone ${rateName}?`)) {\n return;\n }\n\n this.cloneTieredRate(rateId, rateName, shippingMethodId);\n });\n this.boundElements.add(cloneButton);\n }\n }\n\n // Edit button handler\n const editButton = row.querySelector('button[title=\"Edit\"]');\n if (editButton && !this.boundElements.has(editButton)) {\n editButton.addEventListener('click', (event) => {\n event.preventDefault();\n this.editTieredRate(event);\n });\n this.boundElements.add(editButton);\n }\n\n // Delete button handler\n const deleteButton = row.querySelector('button.delete');\n if (deleteButton && !this.boundElements.has(deleteButton)) {\n deleteButton.addEventListener('click', (event) => {\n event.preventDefault();\n\n const clickedButton = event.currentTarget;\n if (clickedButton.disabled) {\n return;\n }\n\n const rateId = clickedButton.dataset.id;\n const rateName = clickedButton.dataset.rateName || 'this rate';\n const shippingMethodId = clickedButton.dataset.shippingMethodId;\n\n if (!rateId || !shippingMethodId) {\n return;\n }\n\n if (!window.confirm(`Are you sure you want to delete ${rateName}?`)) {\n return;\n }\n\n // Find the row to remove after successful deletion\n const rowToRemove = clickedButton.closest('tr[data-rate-id]');\n\n const url = `/teamsites/${this.saleId}/settings/shipping_methods/${shippingMethodId}/shipping_rates/${rateId}`;\n fetch(url, {\n method: 'DELETE',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Accept': 'application/json',\n },\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n return response.json();\n })\n .then(data => {\n if (data.success) {\n if (rowToRemove) {\n rowToRemove.remove();\n }\n if (window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash(data.message || 'Rate deleted successfully');\n } else {\n this.showNotification(data.message || 'Rate deleted successfully', 'success', { duration: 3000 });\n }\n this.checkTieredTableEmptyState();\n } else {\n throw new Error(data.errors ? data.errors.join(', ') : 'Failed to delete rate');\n }\n })\n .catch(() => {\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Failed to delete rate');\n } else {\n this.showNotification('Failed to delete rate', 'error', { duration: 5000 });\n }\n });\n });\n this.boundElements.add(deleteButton);\n }\n });\n }\n\n\n updateTieredRateAttribute(rateId, attribute, value, row) {\n const shippingMethodId = this.currentShippingMethodId;\n const url = `/teamsites/${this.saleId}/settings/shipping_methods/${shippingMethodId}/shipping_rates/${rateId}`;\n\n const requestBody = {\n shipping_rate: {},\n };\n requestBody.shipping_rate[attribute] = value;\n\n fetch(url, {\n method: 'PATCH',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Content-Type': 'application/json',\n 'Accept': 'application/json',\n },\n body: JSON.stringify(requestBody),\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n return response.json();\n })\n .then(data => {\n if (data.success) {\n this.showNotification(data.message || `Rate ${attribute} updated successfully`, 'success', { duration: 3000 });\n\n // Update delete button state if active status changed\n if (attribute === 'active' && row) {\n this.updateTieredDeleteButtonState(row, value);\n }\n } else {\n throw new Error(data.errors ? data.errors.join(', ') : `Failed to update rate ${attribute}`);\n }\n })\n .catch(_error => {\n this.handleError(`Failed to update rate ${attribute}`);\n });\n }\n\n updateTieredDeleteButtonState(row, isActive) {\n const deleteButton = row.querySelector('button.delete');\n if (!deleteButton) return;\n\n if (isActive) {\n deleteButton.disabled = true;\n deleteButton.title = 'Sorry, but you can\\'t delete a shipping rate that is in use. To delete a shipping rate, make the rate inactive.';\n } else {\n deleteButton.disabled = false;\n deleteButton.removeAttribute('title');\n }\n }\n\n cloneTieredRate(rateId, rateName, shippingMethodId) {\n const url = `/teamsites/${this.saleId}/settings/shipping_methods/${shippingMethodId}/shipping_rates/${rateId}/clone`;\n\n fetch(url, {\n method: 'POST',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Accept': 'application/json',\n },\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n return response.json();\n })\n .then(data => {\n if (data.success) {\n if (window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash(data.message || 'Rate cloned successfully');\n } else {\n this.showNotification(data.message || 'Rate cloned successfully', 'success', { duration: 3000 });\n }\n this.refreshModalContent();\n } else {\n throw new Error(data.errors ? data.errors.join(', ') : 'Failed to clone rate');\n }\n })\n .catch(_error => {\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Failed to clone rate');\n } else {\n this.showNotification('Failed to clone rate', 'error', { duration: 5000 });\n }\n });\n }\n\n checkTieredTableEmptyState() {\n const tieredContainer = this.currentEditModal.querySelector('#tiered-rate-table-container');\n if (!tieredContainer) return;\n\n const rows = tieredContainer.querySelectorAll('tr[data-rate-id]');\n if (rows.length === 0) {\n // Create empty state if no rates exist\n tieredContainer.innerHTML = `\n
\n
Tiered Rate \n
\n \n \n Active \n Name \n Min-Max Price \n Rate \n Collect Address \n \n \n \n \n \n \n \n \n \n
\n
\n `;\n }\n }\n\n\n getRateIdFromInput(input) {\n const row = input.closest('[data-rate-id]');\n return row ? row.dataset.rateId : null;\n }\n\n updateFreeRateAttribute(rateId, attribute, value, _row) {\n const shippingMethodId = this.currentShippingMethodId;\n\n // Skip active attribute - now handled by unified toggle controller\n if (attribute === 'active') {\n return;\n }\n\n const url = `/teamsites/${this.saleId}/settings/shipping_methods/${shippingMethodId}/shipping_rates/${rateId}`;\n\n const requestBody = {\n shipping_rate: {},\n };\n requestBody.shipping_rate[attribute] = value;\n\n fetch(url, {\n method: 'PATCH',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Content-Type': 'application/json',\n 'Accept': 'application/json',\n },\n body: JSON.stringify(requestBody),\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n return response.json();\n })\n .then(data => {\n if (data.success) {\n if (attribute === 'name') {\n this.showNotification('Name updated', 'success', { duration: 2000 });\n } else {\n this.showNotification(data.message || `Rate ${attribute} updated successfully`, 'success', { duration: 3000 });\n }\n } else {\n throw new Error(data.errors ? data.errors.join(', ') : `Failed to update rate ${attribute}`);\n }\n })\n .catch(_error => {\n this.handleError(`Failed to update rate ${attribute}`);\n });\n }\n\n updateFreeDeleteButtonState(row, isActive) {\n const deleteButton = row.querySelector('button.delete');\n if (!deleteButton) return;\n\n if (isActive) {\n deleteButton.disabled = true;\n deleteButton.title = 'Sorry, but you can\\'t delete a shipping rate that is in use. To delete a shipping rate, make the rate inactive.';\n } else {\n deleteButton.disabled = false;\n deleteButton.removeAttribute('title');\n }\n }\n\n checkFreeTableEmptyState() {\n const freeContainer = this.currentEditModal.querySelector('#free-rate-table-container');\n if (!freeContainer) return;\n\n const table = freeContainer.querySelector('table');\n if (!table) {\n // If no table exists, create the empty state structure\n freeContainer.innerHTML = `\n
Free Rate \n
\n \n \n Active \n Name \n Collect Address \n \n \n \n \n \n \n \n \n \n
\n `;\n return;\n }\n\n const tbody = table.querySelector('tbody');\n const remainingRows = tbody ? tbody.querySelectorAll('tr:not(.empty-state)') : [];\n\n if (remainingRows.length === 0) {\n tbody.innerHTML = `\n
\n \n \n \n `;\n }\n }\n\n displayRateForm(html, rateType) {\n const containerId = `${rateType}-rate-form-container`;\n const container = this.currentEditModal.querySelector(`#${containerId}`);\n\n\n if (container) {\n container.innerHTML = html;\n container.style.display = 'block';\n\n // Special handling for free, fixed, and percentage rates - directly create the rate\n if (rateType === 'free') {\n this.createFreeRate();\n } else if (rateType === 'fixed') {\n this.createFixedRate();\n } else if (rateType === 'percentage') {\n this.createPercentageRate();\n } else {\n // For other rate types, reinitialize controllers\n this.reinitializeStimulusControllers(container);\n }\n\n // Close the dropdown\n const dropdown = this.currentEditModal.querySelector('[data-controller=\"dropdown\"]');\n if (dropdown) {\n const dropdownContent = dropdown.querySelector('[data-target=\"dropdown.content\"]');\n if (dropdownContent) {\n dropdownContent.style.display = 'none';\n }\n }\n } else {\n this.showErrorMessage(`Unable to find form container for ${rateType} rates`);\n }\n }\n\n createFreeRate() {\n const saleId = this.saleId;\n const shippingMethodId = this.currentShippingMethodId;\n\n if (!saleId || !shippingMethodId) {\n this.showErrorMessage('Unable to determine sale or shipping method');\n return Promise.reject(new Error('Unable to determine sale or shipping method'));\n }\n\n // Show creating notification\n this.showNotification('Creating free shipping rate...', 'info', { duration: 2000 });\n\n const url = `/teamsites/${saleId}/settings/shipping_methods/${shippingMethodId}/shipping_rates`;\n const data = {\n shipping_rate: {\n type: 'Spree::ShippingFeeFreeRate',\n name: 'Free Shipping',\n active: false,\n },\n rate_type: 'free',\n };\n\n return fetch(url, {\n method: 'POST',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Content-Type': 'application/json',\n 'Accept': 'application/json',\n },\n body: JSON.stringify(data),\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n return response.json();\n })\n .then(data => {\n if (data.success) {\n this.showNotification('Free shipping rate created successfully', 'success', { duration: 3000 });\n\n // Remove the container since we don't need a form for free rates\n const container = this.currentEditModal.querySelector('#free-rate-form-container');\n if (container) {\n container.innerHTML = '';\n container.style.display = 'none';\n }\n\n // Refresh the modal to show the new rate\n this.refreshModalContent();\n } else {\n throw new Error(data.errors ? data.errors.join(', ') : 'Failed to create free rate');\n }\n })\n .catch(_error => {\n this.handleError('Failed to create free shipping rate');\n });\n }\n\n createFixedRate() {\n const saleId = this.saleId;\n const shippingMethodId = this.currentShippingMethodId;\n\n if (!saleId || !shippingMethodId) {\n this.showErrorMessage('Unable to determine sale or shipping method');\n return;\n }\n\n // Show creating notification\n this.showNotification('Creating fixed shipping rate...', 'info', { duration: 2000 });\n\n const url = `/teamsites/${saleId}/settings/shipping_methods/${shippingMethodId}/shipping_rates`;\n const data = {\n shipping_rate: {\n type: 'Spree::ShippingFeeFixedRate',\n name: 'Fixed Rate',\n fixed_rate: 0.00,\n active: false,\n taxable: false,\n collect_address: false,\n },\n rate_type: 'fixed',\n };\n\n fetch(url, {\n method: 'POST',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Content-Type': 'application/json',\n 'Accept': 'application/json',\n },\n body: JSON.stringify(data),\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n return response.json();\n })\n .then(data => {\n if (data.success) {\n this.showNotification('Fixed shipping rate created successfully', 'success', { duration: 3000 });\n\n // Remove the container since we don't need a form for fixed rates\n const container = this.currentEditModal.querySelector('#fixed-rate-form-container');\n if (container) {\n container.innerHTML = '';\n container.style.display = 'none';\n }\n\n // Refresh the modal to show the new rate\n this.refreshModalContent();\n } else {\n throw new Error(data.errors ? data.errors.join(', ') : 'Failed to create fixed rate');\n }\n })\n .catch(_error => {\n this.handleError('Failed to create fixed shipping rate');\n });\n }\n\n createPercentageRate() {\n const saleId = this.saleId;\n const shippingMethodId = this.currentShippingMethodId;\n\n if (!saleId || !shippingMethodId) {\n this.showErrorMessage('Unable to determine sale or shipping method');\n return;\n }\n\n // Show creating notification\n this.showNotification('Creating percentage shipping rate...', 'info', { duration: 2000 });\n\n const url = `/teamsites/${saleId}/settings/shipping_methods/${shippingMethodId}/shipping_rates`;\n const data = {\n shipping_rate: {\n type: 'Spree::ShippingFeePercentageRate',\n name: 'Percentage Rate',\n percentage_rate: 5.00,\n active: false,\n taxable: false,\n collect_address: false,\n },\n rate_type: 'percentage',\n };\n\n fetch(url, {\n method: 'POST',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Content-Type': 'application/json',\n 'Accept': 'application/json',\n },\n body: JSON.stringify(data),\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n return response.json();\n })\n .then(data => {\n if (data.success) {\n this.showNotification('Percentage shipping rate created successfully', 'success', { duration: 3000 });\n\n // Remove the container since we don't need a form for percentage rates\n const container = this.currentEditModal.querySelector('#percentage-rate-form-container');\n if (container) {\n container.innerHTML = '';\n container.style.display = 'none';\n }\n\n // Refresh the modal to show the new rate\n this.refreshModalContent();\n } else {\n throw new Error(data.errors ? data.errors.join(', ') : 'Failed to create percentage rate');\n }\n })\n .catch(_error => {\n this.handleError('Failed to create percentage shipping rate');\n });\n }\n\n setupAutosaveFallback(placeholder) {\n // Find all form fields in the loaded content\n const formFields = placeholder.querySelectorAll('input[type=\"text\"], input[type=\"checkbox\"], select');\n\n // Store original values for change detection\n this.autosaveOldValues = {};\n\n formFields.forEach((field, index) => {\n const fieldKey = field.name || field.id || `field_${index}`;\n\n // Store original value on focus\n const handleFocus = (event) => {\n this.autosaveOldValues[fieldKey] = this.getFieldValue(event.target);\n };\n\n // Handle autosave on blur\n const handleBlur = (event) => {\n const field = event.target;\n\n // Format currency fields\n if (field.classList.contains('ae-currency') && field.type === 'text' && field.value.trim() !== '') {\n const numericValue = parseFloat(field.value);\n if (!isNaN(numericValue)) {\n field.value = numericValue.toFixed(2);\n }\n }\n\n const currentValue = this.getFieldValue(field);\n\n // Only autosave if value changed\n if (this.autosaveOldValues[fieldKey] !== currentValue) {\n this.performAutosaveFallback(field, fieldKey, currentValue);\n }\n };\n\n field.addEventListener('focus', handleFocus);\n field.addEventListener('blur', handleBlur);\n\n // Store references for cleanup\n field._autosaveFocusHandler = handleFocus;\n field._autosaveBlurHandler = handleBlur;\n });\n }\n\n getFieldValue(field) {\n if (field.type === 'checkbox') {\n return field.checked;\n }\n return field.value;\n }\n\n async performAutosaveFallback(field, fieldKey, newValue) {\n try {\n const form = field.closest('form');\n if (!form) {\n return;\n }\n\n const formData = new FormData(form);\n\n // Capture submitted tier values to compare with server response\n const submittedTiers = this.captureSubmittedTierValuesFallback(form);\n\n // Update stored value\n this.autosaveOldValues[fieldKey] = newValue;\n\n const response = await fetch(form.action, {\n method: 'PATCH',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Accept': 'application/json',\n },\n body: formData,\n });\n\n if (response.ok) {\n const data = await response.json();\n if (data.success) {\n // Check if server silently rejected changes\n if (data.shipping_rate && data.shipping_rate.tiers) {\n const serverTiers = data.shipping_rate.tiers;\n const silentFailures = this.detectSilentFailuresFallback(submittedTiers, serverTiers);\n\n if (silentFailures.length > 0) {\n // Revert field values and show validation error\n this.revertFailedFieldsFallback(silentFailures, form);\n const errorMessage = this.formatValidationErrorsFallback(silentFailures);\n throw new Error(errorMessage);\n }\n }\n // Genuine success - no notification\n } else {\n // Server validation failure with success: false\n const errorMessage = data.errors ? data.errors.join(', ') : (data.message || 'Validation failed');\n throw new Error(errorMessage);\n }\n } else if (response.status === 422) {\n // Validation error (Unprocessable Entity)\n const data = await response.json();\n const errorMessage = data.errors ? data.errors.join(', ') : 'Validation failed';\n throw new Error(errorMessage);\n } else {\n // Network/server error\n throw new Error('Network error occurred');\n }\n } catch (error) {\n // Revert the old value since save failed\n this.autosaveOldValues[fieldKey] = this.autosaveOldValues[fieldKey] !== newValue ? this.autosaveOldValues[fieldKey] : '';\n // Show error notification for validation and network errors\n this.showErrorMessage(`Failed to save: ${error.message}`);\n }\n }\n\n cloneShippingRate(rateId, rateName, shippingMethodId) {\n const url = `/teamsites/${this.saleId}/settings/shipping_methods/${shippingMethodId}/shipping_rates/${rateId}/clone`;\n\n fetch(url, {\n method: 'POST',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Accept': 'application/json',\n },\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n return response.json();\n })\n .then(data => {\n if (data.success) {\n this.showSuccessMessage(data.message || `${rateName} cloned successfully`);\n // Refresh the modal content to show the new rate\n this.refreshModalContent();\n } else {\n throw new Error(data.errors ? data.errors.join(', ') : 'Failed to clone rate');\n }\n })\n .catch(() => {\n this.showErrorMessage('Failed to clone rate');\n });\n }\n\n editShippingRate(rateId, shippingMethodId) {\n const url = `/teamsites/${this.saleId}/settings/shipping_methods/${shippingMethodId}/shipping_rates/${rateId}/edit`;\n\n fetch(url, {\n method: 'GET',\n headers: {\n 'Accept': 'text/html',\n 'X-CSRF-Token': this.getCSRFToken(),\n },\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n return response.text();\n })\n .then(html => {\n this.showRateForm(html);\n })\n .catch(() => {\n this.showErrorMessage('Failed to load rate edit interface');\n });\n }\n\n deleteShippingRate(rateId, rateName, shippingMethodId) {\n const url = `/teamsites/${this.saleId}/settings/shipping_methods/${shippingMethodId}/shipping_rates/${rateId}`;\n\n fetch(url, {\n method: 'DELETE',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Accept': 'application/json',\n },\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n return response.json();\n })\n .then(data => {\n if (data.success) {\n this.showSuccessMessage(data.message || `${rateName} deleted successfully`);\n // Refresh the modal content to remove the deleted rate\n this.refreshModalContent();\n } else {\n throw new Error(data.errors ? data.errors.join(', ') : 'Failed to delete rate');\n }\n })\n .catch(() => {\n this.showErrorMessage('Failed to delete rate');\n });\n }\n\n // Slide-up form methods (based on shipping addresses pattern)\n showRateForm(html) {\n const placeholder = this.currentEditModal.querySelector('#rate-form-content-placeholder');\n if (placeholder) {\n placeholder.innerHTML = html;\n\n // Reinitialize Stimulus controllers for the newly loaded form\n this.reinitializeStimulusControllers(placeholder);\n\n // Manual fallback for autosave since Stimulus doesn't always connect in modals\n this.setupAutosaveFallback(placeholder);\n\n // Manual fallback for tiered form delete buttons (in case Stimulus doesn't connect in modal)\n this.setupTieredFormFallbacks(placeholder);\n\n this.slideRateFormUp();\n }\n }\n\n\n setupTieredFormFallbacks(_container) {\n // Tier delete handling is delegated to the specialized tiered form controller\n // (sale-settings-shipping-rates-tiered-form) to prevent duplicate events\n return;\n }\n\n handleTierDelete(event) {\n event.preventDefault();\n\n const row = event.currentTarget.closest('tr');\n if (!row) {\n return;\n }\n\n const tbody = row.closest('tbody');\n if (!tbody) {\n return;\n }\n\n // Check if this is a persisted tier (has ID input)\n // Look for hidden fields that are siblings of the row (Rails puts them after the )\n const tierIndex = this.getTierIndex(row);\n\n const idInput = tbody.querySelector(`input[name*=\"[${tierIndex}][id]\"]`);\n\n if (idInput && idInput.value) {\n // This is a persisted tier - mark for destruction\n // Find the existing _destroy field that should be a sibling of the row\n let destroyField = tbody.querySelector(`input[name*=\"[${tierIndex}][_destroy]\"]`);\n\n if (!destroyField) {\n // Last resort: create _destroy field if it doesn't exist\n destroyField = document.createElement('input');\n destroyField.type = 'hidden';\n destroyField.name = idInput.name.replace('[id]', '[_destroy]');\n tbody.appendChild(destroyField); // Append to tbody with other hidden fields\n }\n\n destroyField.value = 'true';\n row.style.display = 'none';\n\n // Trigger autosave to persist the deletion immediately\n this.performTierAutosave(destroyField, 'true').then(() => {\n // Successfully deleted - refresh the tiered rates table in modal\n this.refreshTieredRatesTable();\n\n // Dispatch event to notify main page that a tier was deleted\n const event = new CustomEvent('tier:deleted', {\n bubbles: true,\n detail: {\n shippingMethodId: this.currentShippingMethodId,\n source: 'modal',\n },\n });\n document.dispatchEvent(event);\n }).catch((error) => {\n // Restore row on failure\n row.style.display = '';\n destroyField.value = 'false'; // Reset _destroy value instead of removing field\n this.showErrorMessage('Failed to delete tier: ' + error.message);\n });\n } else {\n // This is a new (unsaved) tier - just remove it\n row.remove();\n }\n }\n\n // Get tier index from row data attribute or field names\n getTierIndex(row) {\n // First try data-index attribute\n if (row.dataset.index !== undefined) {\n return parseInt(row.dataset.index, 10);\n }\n\n // Fallback: extract from input field names\n const input = row.querySelector('input[name*=\"[shipping_fee_tiered_rate_tiers_attributes]\"]');\n if (input) {\n const match = input.name.match(/\\[shipping_fee_tiered_rate_tiers_attributes\\]\\[(\\d+)\\]/);\n if (match) {\n return parseInt(match[1], 10);\n }\n }\n\n return 0;\n }\n\n // Perform autosave for tier deletion\n async performTierAutosave(destroyField, _value) {\n const form = destroyField.closest('form');\n if (!form) throw new Error('Form not found');\n\n const formData = new FormData(form);\n\n const response = await fetch(form.action, {\n method: 'PATCH',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Accept': 'application/json',\n },\n body: formData,\n });\n\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n\n const data = await response.json();\n\n if (!data.success) {\n throw new Error(data.errors ? data.errors.join(', ') : 'Failed to save');\n }\n\n return data;\n }\n\n handleAddTier(event) {\n event.preventDefault();\n\n const table = event.currentTarget.closest('table');\n if (!table) return;\n\n const tbody = table.querySelector('tbody');\n if (!tbody) return;\n\n // Get the next tier index\n const existingRows = tbody.querySelectorAll('tr[data-index]');\n let maxIndex = -1;\n existingRows.forEach(row => {\n const index = parseInt(row.dataset.index, 10);\n if (!isNaN(index) && index > maxIndex) {\n maxIndex = index;\n }\n });\n const newIndex = maxIndex + 1;\n\n // Create new tier row HTML\n const newRowHtml = this.createNewTierRowHtml(newIndex);\n\n // Find the \"Add Tier\" button row and insert the new tier before it\n const addButtonRow = event.currentTarget.closest('tr');\n addButtonRow.insertAdjacentHTML('beforebegin', newRowHtml);\n\n // Setup event listeners for the new row\n const newRow = tbody.querySelector(`tr[data-index=\"${newIndex}\"]`);\n if (newRow) {\n const deleteButton = newRow.querySelector('a[title=\"Remove\"], button[title=\"Remove\"], [data-action*=\"deleteRow\"]');\n if (deleteButton) {\n deleteButton.addEventListener('click', this.handleTierDelete.bind(this));\n }\n\n // Setup autosave for new row fields\n this.setupAutosaveForRow(newRow);\n }\n }\n\n createNewTierRowHtml(index) {\n const namePrefix = 'shipping_rate[shipping_fee_tiered_rate_tiers_attributes]';\n\n return `\n
\n \n \n \n - \n \n \n \n \n \n \n + \n \n \n \n \n sale-settings-shipping-rates--tiered-form#deleteRow\" \n title=\"Remove\">\n \n \n \n `;\n }\n\n setupAutosaveForRow(row) {\n // Find all form fields in the row that should trigger autosave\n const formFields = row.querySelectorAll('input[type=\"text\"], input[type=\"checkbox\"], select');\n\n formFields.forEach(field => {\n // Store original value on focus\n field.addEventListener('focus', (event) => {\n this.storeOldValue(event.target);\n });\n\n // Handle autosave on blur\n field.addEventListener('blur', (event) => {\n this.handleFieldBlur(event.target);\n });\n });\n }\n\n storeOldValue(field) {\n const fieldKey = this.getFieldKey(field);\n if (!this.oldValues) this.oldValues = {};\n this.oldValues[fieldKey] = this.getFieldValue(field);\n }\n\n handleFieldBlur(field) {\n // Format currency fields\n if (field.classList.contains('ae-currency') && field.type === 'text' && field.value.trim() !== '') {\n const numericValue = parseFloat(field.value);\n if (!isNaN(numericValue)) {\n field.value = numericValue.toFixed(2);\n }\n }\n\n const fieldKey = this.getFieldKey(field);\n const currentValue = this.getFieldValue(field);\n\n // Only autosave if value changed\n if (this.oldValues && this.oldValues[fieldKey] !== currentValue) {\n this.throttledAutosave(field, fieldKey, currentValue);\n }\n }\n\n throttledAutosave(field, fieldKey, newValue) {\n // Much more conservative autosave - only save when required field is complete\n const row = field.closest('tr');\n\n // Check if this row has a complete base rate (required field)\n const baseRateField = row.querySelector('input[name*=\"[base_rate]\"]');\n const hasValidBaseRate = baseRateField && baseRateField.value && parseFloat(baseRateField.value) > 0;\n\n // Only autosave if the required base rate is filled and valid\n if (!hasValidBaseRate) {\n return; // Don't save incomplete tiers\n }\n\n // Clear any existing timeout for this entire row (not just field)\n const rowKey = `row_${row.dataset.index}`;\n if (this.autosaveTimeouts) {\n clearTimeout(this.autosaveTimeouts[rowKey]);\n } else {\n this.autosaveTimeouts = {};\n }\n\n // Set a longer timeout (3 seconds) to autosave after user stops editing\n this.autosaveTimeouts[rowKey] = setTimeout(() => {\n this.performAutosave(field, fieldKey, newValue);\n delete this.autosaveTimeouts[rowKey];\n }, 3000);\n }\n\n getFieldKey(field) {\n return field.name || field.id || `${field.tagName.toLowerCase()}_${field.className}`;\n }\n\n async performAutosave(field, fieldKey, newValue) {\n try {\n const form = field.closest('form');\n if (!form) return;\n\n const formData = new FormData(form);\n\n // Update stored value\n if (!this.oldValues) this.oldValues = {};\n this.oldValues[fieldKey] = newValue;\n\n const response = await fetch(form.action, {\n method: 'PATCH',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Accept': 'application/json',\n },\n body: formData,\n });\n\n if (response.ok) {\n const data = await response.json();\n if (!data.success) {\n const errorMessage = data.errors ? data.errors.join(', ') : 'Validation failed';\n this.showErrorMessage(`Failed to save: ${errorMessage}`);\n }\n // Success case - no notification needed for autosave\n } else {\n throw new Error('Network error occurred');\n }\n } catch {\n // Revert the old value since save failed\n if (this.oldValues) {\n this.oldValues[fieldKey] = this.oldValues[fieldKey] !== newValue ? this.oldValues[fieldKey] : '';\n }\n this.showErrorMessage('Failed to save changes');\n }\n }\n\n async triggerAutosave(field) {\n try {\n const form = field.closest('form');\n if (!form) {\n return;\n }\n\n const formData = new FormData(form);\n\n const response = await fetch(form.action, {\n method: 'PATCH',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Accept': 'application/json',\n },\n body: formData,\n });\n\n if (response.ok) {\n const data = await response.json();\n if (!data.success) {\n // Server validation failure\n const errorMessage = data.errors ? data.errors.join(', ') : 'Failed to save changes';\n this.showErrorMessage(errorMessage);\n }\n // Success case - no notification needed for autosave\n } else {\n throw new Error('Network error occurred');\n }\n } catch {\n this.showErrorMessage('Failed to save changes');\n }\n }\n\n\n hideRateForm(event) {\n // Can be called directly or via event\n if (event) event.preventDefault();\n this.slideRateFormDown();\n }\n\n slideRateFormUp() {\n const tableView = this.currentEditModal.querySelector('#tiered-rate-table-view');\n const formView = this.currentEditModal.querySelector('#tiered-rate-form-view');\n\n if (tableView && formView) {\n // Hide table view\n tableView.style.display = 'none';\n\n // Hide all other rate types to focus on tiered rate editing\n this.hideOtherRateTypes();\n\n // Show form view\n formView.style.display = 'block';\n\n // Force reflow to ensure display:block is applied\n formView.offsetHeight;\n\n // Slide form up\n formView.style.transform = 'translateY(0)';\n\n // Dispatch form show event to hide dropdown\n const event = new CustomEvent('form:show', { bubbles: true });\n this.currentEditModal.dispatchEvent(event);\n }\n }\n\n slideRateFormDown() {\n const tableView = this.currentEditModal.querySelector('#tiered-rate-table-view');\n const formView = this.currentEditModal.querySelector('#tiered-rate-form-view');\n\n if (tableView && formView) {\n // Slide form down\n formView.style.transform = 'translateY(100%)';\n\n // Dispatch form hide event to show dropdown\n const event = new CustomEvent('form:hide', { bubbles: true });\n this.currentEditModal.dispatchEvent(event);\n\n // Wait for animation to complete\n setTimeout(() => {\n formView.style.display = 'none';\n tableView.style.display = 'block';\n\n // Show all rate types again\n this.showOtherRateTypes();\n\n // Refresh tiered rates table to show any changes made during editing\n this.refreshTieredRatesTable();\n\n // Clear form content for next use\n const placeholder = formView.querySelector('#rate-form-content-placeholder');\n if (placeholder) {\n placeholder.innerHTML = '';\n }\n }, 300); // Match CSS transition duration\n }\n }\n\n manageRates(event) {\n event.preventDefault();\n\n const shippingMethodId = event.currentTarget.dataset.shippingMethodId;\n\n if (!shippingMethodId) {\n return;\n }\n\n // Open shipping rates management interface\n this.openRatesManagementModal(shippingMethodId);\n }\n\n openRatesManagementModal(shippingMethodId) {\n const url = `/teamsites/${this.saleId}/settings/shipping_methods/${shippingMethodId}/shipping_rates`;\n\n fetch(url, {\n method: 'GET',\n headers: {\n 'Accept': 'text/html',\n 'X-CSRF-Token': this.getCSRFToken(),\n },\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n return response.text();\n })\n .then(html => {\n this.displayRatesModal(html, shippingMethodId);\n })\n .catch(_error => {\n this.showErrorMessage('Failed to load shipping rates interface');\n });\n }\n\n displayRatesModal(html, shippingMethodId) {\n // Create modal container\n const modal = document.createElement('div');\n modal.className = 'ae-popup ae-popup-xl ae-visible-scrollbars mfp-content';\n modal.setAttribute('data-controller', 'sale-settings-shipping-rates');\n modal.setAttribute('data-sale-settings-shipping-rates-shipping-method-id-value', shippingMethodId);\n modal.setAttribute('data-sale-settings-shipping-rates-site-id-value', this.siteId || '');\n\n modal.innerHTML = `\n \n \n `;\n\n // Add modal to page\n document.body.appendChild(modal);\n\n // Add modal backdrop\n const backdrop = document.createElement('div');\n backdrop.className = 'mfp-bg mfp-fade mfp-ready';\n backdrop.setAttribute('data-action', 'click->sale-settings-shipping-methods#closeRatesModal');\n document.body.appendChild(backdrop);\n\n // Store references for cleanup\n this.currentRatesModal = modal;\n this.currentRatesBackdrop = backdrop;\n\n // Add CSS classes to body\n document.body.classList.add('mfp-zoom-out-cur', 'mfp-ready');\n }\n\n closeRatesModal() {\n if (this.currentRatesModal) {\n this.currentRatesModal.remove();\n this.currentRatesModal = null;\n }\n\n if (this.currentRatesBackdrop) {\n this.currentRatesBackdrop.remove();\n this.currentRatesBackdrop = null;\n }\n\n // Remove CSS classes from body\n document.body.classList.remove('mfp-zoom-out-cur', 'mfp-ready');\n\n // Refresh the shipping method display to show any updated rates\n this.refreshShippingMethodDisplay();\n }\n\n refreshShippingMethodDisplay() {\n // Dispatch event to refresh shipping method panels\n const event = new CustomEvent('shipping-methods:refresh', {\n detail: { saleId: this.saleId },\n });\n document.dispatchEvent(event);\n }\n\n delete(event) {\n event.preventDefault();\n\n const shippingMethodId = event.currentTarget.dataset.shippingMethodId ||\n this.element.dataset.shippingMethodId;\n const confirmMessage = event.currentTarget.dataset.confirm;\n\n if (window.confirm(confirmMessage || 'Are you sure you want to delete this shipping method?')) {\n this.submitDeleteRequest(shippingMethodId);\n }\n }\n\n submitDeleteRequest(shippingMethodId) {\n // Validate inputs\n if (!shippingMethodId) {\n this.handleError('Missing shipping method ID');\n return Promise.reject(new Error('Missing shipping method ID'));\n }\n\n if (!this.saleId) {\n this.handleError('Missing sale ID');\n return Promise.reject(new Error('Missing sale ID'));\n }\n\n // Validate CSRF token exists\n const csrfToken = this.getCSRFToken();\n if (!csrfToken) {\n this.handleError('Security token missing. Please refresh the page and try again.');\n return Promise.reject(new Error('Missing CSRF token'));\n }\n\n const deleteUrl = `/teamsites/${this.saleId}/settings/shipping_methods/${shippingMethodId}`;\n\n return fetch(deleteUrl, {\n method: 'DELETE',\n headers: {\n 'X-CSRF-Token': csrfToken,\n 'Content-Type': 'application/json',\n 'Accept': 'application/json',\n 'X-Requested-With': 'XMLHttpRequest',\n },\n })\n .then(response => {\n if (!response.ok) {\n if (response.status === 422) {\n return response.json().then(data => {\n throw new Error(data.message || 'Cannot delete shipping method - it may be in use');\n });\n } else if (response.status === 404) {\n throw new Error('Shipping method not found or already deleted');\n } else if (response.status === 403) {\n throw new Error('Not authorized to delete this shipping method');\n } else {\n throw new Error(`Server error: ${response.status}`);\n }\n }\n return response.json();\n })\n .then(data => {\n if (data.success) {\n // Remove the shipping method panel from the DOM\n this.removeShippingMethodPanel(shippingMethodId);\n this.showSuccessMessage(data.message || 'Shipping method deleted successfully');\n this.checkForEmptyState();\n } else {\n throw new Error(data.message || 'Delete operation failed');\n }\n })\n .catch(error => {\n // Show user-friendly error message\n const message = error.message || 'Failed to delete shipping method';\n this.handleError(message);\n throw error; // Re-throw for any calling code\n });\n }\n\n removeShippingMethodPanel(shippingMethodId) {\n // Find the specific delete button (not just any element with shipping-method-id)\n const deleteButton = document.querySelector(`a.remove-shipping-method[data-shipping-method-id='${shippingMethodId}']`);\n if (deleteButton) {\n // Find the parent panel\n const panel = deleteButton.closest('.shipping-method-panel');\n if (panel) {\n panel.remove();\n return;\n }\n }\n\n // Fallback: Find any panel containing an element with this shipping method ID\n const panels = document.querySelectorAll('.shipping-method-panel');\n panels.forEach(panel => {\n const elementWithId = panel.querySelector(`[data-shipping-method-id='${shippingMethodId}']`);\n if (elementWithId) {\n panel.remove();\n }\n });\n }\n\n showSuccessMessage(message) {\n if (window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash(message);\n }\n }\n\n checkForEmptyState() {\n const panelsContainer = document.querySelector('#shipping-methods-panels');\n const panels = panelsContainer ? panelsContainer.querySelectorAll('.shipping-method-panel') : [];\n\n if (panels.length === 0) {\n // Show no shipping methods state\n const noMethodsDiv = document.getElementById('no-shipping-methods');\n\n if (!noMethodsDiv) {\n // Create no shipping methods alert if it doesn't exist\n this.createNoShippingMethodsAlert();\n } else {\n noMethodsDiv.style.display = 'block';\n }\n }\n }\n\n createNoShippingMethodsAlert() {\n const panelsContainer = document.querySelector('#shipping-methods-panels');\n if (panelsContainer) {\n const alertHtml = `\n
\n
\n No shipping methods configured. \n Add your first shipping method to enable order fulfillment for this TeamSite.\n
\n
\n `;\n panelsContainer.insertAdjacentHTML('beforeend', alertHtml);\n }\n }\n\n handleError(message) {\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash(message);\n } else {\n // Fallback error display - use window.alert explicitly for ESLint\n window.alert(message);\n }\n }\n\n showErrorMessage(message) {\n this.handleError(message);\n }\n\n\n // Fallback validation methods for modal context\n captureSubmittedTierValuesFallback(form) {\n const tiers = [];\n const tierFields = form.querySelectorAll('[name*=\"[shipping_fee_tiered_rate_tiers_attributes]\"]');\n\n // Group fields by tier index\n const tiersByIndex = {};\n tierFields.forEach(field => {\n const match = field.name.match(/\\[shipping_fee_tiered_rate_tiers_attributes\\]\\[(\\d+)\\]\\[(.+?)\\]/);\n if (match) {\n const index = match[1];\n const attribute = match[2];\n\n if (!tiersByIndex[index]) {\n tiersByIndex[index] = { index };\n }\n\n tiersByIndex[index][attribute] = field.value;\n }\n });\n\n // Convert to array and include only relevant tier data\n Object.values(tiersByIndex).forEach(tier => {\n if (tier._destroy !== 'true') {\n tiers.push({\n id: tier.id || null,\n cart_total_min: parseFloat(tier.cart_total_min) || 0,\n cart_total_max: parseFloat(tier.cart_total_max) || 0,\n base_rate: parseFloat(tier.base_rate) || 0,\n additional_percentage: parseFloat(tier.additional_percentage) || 0,\n });\n }\n });\n\n return tiers;\n }\n\n detectSilentFailuresFallback(submittedTiers, serverTiers) {\n const failures = [];\n\n submittedTiers.forEach((submitted, index) => {\n const server = serverTiers.find(t => t.id === submitted.id) || serverTiers[index];\n\n if (server) {\n // Check for discrepancies in key fields\n if (Math.abs(submitted.cart_total_min - (server.cart_total_min || 0)) > 0.01) {\n failures.push({\n field: 'cart_total_min',\n submitted: submitted.cart_total_min,\n server: server.cart_total_min || 0,\n tier_id: server.id,\n message: 'Cart minimum amount was rejected (possible overlap)',\n });\n }\n\n if (Math.abs(submitted.cart_total_max - (server.cart_total_max || 0)) > 0.01) {\n failures.push({\n field: 'cart_total_max',\n submitted: submitted.cart_total_max,\n server: server.cart_total_max || 0,\n tier_id: server.id,\n message: 'Cart maximum amount was rejected (possible overlap)',\n });\n }\n\n if (Math.abs(submitted.base_rate - (server.base_rate || 0)) > 0.01) {\n failures.push({\n field: 'base_rate',\n submitted: submitted.base_rate,\n server: server.base_rate || 0,\n tier_id: server.id,\n message: 'Base rate was rejected',\n });\n }\n\n if (Math.abs(submitted.additional_percentage - (server.additional_percentage || 0)) > 0.01) {\n failures.push({\n field: 'additional_percentage',\n submitted: submitted.additional_percentage,\n server: server.additional_percentage || 0,\n tier_id: server.id,\n message: 'Additional percentage was rejected',\n });\n }\n }\n });\n\n return failures;\n }\n\n revertFailedFieldsFallback(failures, form) {\n failures.forEach(failure => {\n // Find the specific tier field that failed\n let field = null;\n\n if (failure.tier_id) {\n // Look for field by tier ID first\n field = form.querySelector(`[name*=\"[${failure.tier_id}][${failure.field}]\"]`);\n }\n\n // If not found by ID, try by field name pattern\n if (!field) {\n const fieldSelector = `[name*=\"[${failure.field}]\"]`;\n const fields = form.querySelectorAll(fieldSelector);\n\n // If multiple fields with same name, find the one that matches submitted value\n if (fields.length > 1) {\n field = Array.from(fields).find(f =>\n Math.abs(parseFloat(f.value) - failure.submitted) < 0.01,\n );\n } else if (fields.length === 1) {\n field = fields[0];\n }\n }\n\n if (field) {\n // Revert to server value\n const serverValue = failure.server || 0;\n field.value = typeof serverValue === 'number' ? serverValue.toFixed(2) : serverValue;\n\n // Update stored old value to prevent re-triggering\n const fieldKey = field.name || field.id;\n if (this.autosaveOldValues) {\n this.autosaveOldValues[fieldKey] = typeof serverValue === 'number' ? serverValue.toFixed(2) : serverValue;\n }\n\n // Add visual feedback - highlight the field temporarily\n field.classList.add('ae-form-field-error');\n const fieldContainer = field.closest('.ae-form-field');\n if (fieldContainer) {\n fieldContainer.classList.add('ae-form-field-error');\n }\n\n // Remove error styling after delay\n setTimeout(() => {\n field.classList.remove('ae-form-field-error');\n if (fieldContainer) {\n fieldContainer.classList.remove('ae-form-field-error');\n }\n }, 3000);\n }\n });\n }\n\n formatValidationErrorsFallback(failures) {\n if (failures.length === 1) {\n return failures[0].message;\n }\n\n const messages = failures.map(f => f.message);\n return `Multiple validation errors: ${messages.join(', ')}`;\n }\n\n getCSRFToken() {\n const metaTag = document.querySelector('meta[name=\"csrf-token\"]');\n return metaTag ? metaTag.getAttribute('content') : null;\n }\n\n\n hideFreeRatesTable() {\n // Find the free rates table section and hide it\n const freeRatesSection = this.currentEditModal.querySelector('#free-rate-table-container');\n if (freeRatesSection) {\n freeRatesSection.style.display = 'none';\n }\n }\n\n showFreeRatesTable() {\n // Find the free rates table section and show it\n const freeRatesSection = this.currentEditModal.querySelector('#free-rate-table-container');\n if (freeRatesSection) {\n freeRatesSection.style.display = 'block';\n }\n }\n\n hideOtherRateTypes() {\n // Hide all rate type sections except tiered rates\n const sectionsToHide = [\n '#dealers-site-checkout-settings-shipping-fee-free-rate',\n '#dealers-site-checkout-settings-shipping-fee-fixed-rate',\n '#dealers-site-checkout-settings-shipping-fee-percentage-rate',\n ];\n\n sectionsToHide.forEach(selector => {\n const section = this.currentEditModal.querySelector(selector);\n if (section) {\n section.style.display = 'none';\n }\n });\n }\n\n showOtherRateTypes() {\n // Show all rate type sections\n const sectionsToShow = [\n '#dealers-site-checkout-settings-shipping-fee-free-rate',\n '#dealers-site-checkout-settings-shipping-fee-fixed-rate',\n '#dealers-site-checkout-settings-shipping-fee-percentage-rate',\n ];\n\n sectionsToShow.forEach(selector => {\n const section = this.currentEditModal.querySelector(selector);\n if (section) {\n section.style.display = 'block';\n }\n });\n }\n\n // Handle tiered rate edit button click\n editTieredRate(event) {\n event.preventDefault();\n\n const rateId = event.currentTarget.dataset.id;\n const shippingMethodId = event.currentTarget.dataset.shippingMethodId;\n\n // Check if we have the tiered rate form view structure\n const formView = this.currentEditModal.querySelector('#tiered-rate-form-view');\n if (formView) {\n // Load the edit form for the tiered rate\n const url = `/teamsites/${this.saleId}/settings/shipping_methods/${shippingMethodId}/shipping_rates/${rateId}/edit`;\n\n fetch(url, {\n method: 'GET',\n headers: {\n 'Accept': 'text/html',\n 'X-CSRF-Token': this.getCSRFToken(),\n },\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n return response.text();\n })\n .then(html => {\n // Insert the form HTML into the form view placeholder\n const formContainer = formView.querySelector('#rate-form-content-placeholder');\n if (formContainer) {\n formContainer.innerHTML = html;\n // Reinitialize any Stimulus controllers in the new content\n this.reinitializeStimulusControllers(formContainer);\n\n // Manual fallback for autosave since Stimulus doesn't always connect in modals\n this.setupAutosaveFallback(formContainer);\n\n // Manual fallback for tiered form buttons (in case Stimulus doesn't connect in modal)\n this.setupTieredFormFallbacks(formContainer);\n }\n // Slide the form up and hide free rates table\n this.slideRateFormUp();\n })\n .catch(_error => {\n this.showNotification('Failed to load tiered rate edit form', 'error');\n });\n }\n }\n\n // Refresh the tiered rates table to show updated tiers after changes\n refreshTieredRatesTable() {\n const tieredTableContainer = this.currentEditModal.querySelector('#tiered-rate-table-container');\n\n if (!tieredTableContainer) {\n return;\n }\n\n const url = `/teamsites/${this.saleId}/settings/shipping_methods/${this.currentShippingMethodId}/shipping_rates`;\n\n fetch(url, {\n method: 'GET',\n headers: {\n 'Accept': 'text/html',\n 'X-CSRF-Token': this.getCSRFToken(),\n 'X-Requested-With': 'XMLHttpRequest',\n },\n })\n .then(response => response.text())\n .then(html => {\n // Extract just the tiered rates table content\n const parser = new DOMParser();\n const doc = parser.parseFromString(html, 'text/html');\n\n // First try to find the exact table content we need\n let targetTable = doc.querySelector('#tiered-rate-table-container .ae-table-responsive');\n\n if (!targetTable) {\n // Try to find the container and extract its content\n const container = doc.querySelector('#tiered-rate-table-container');\n if (container) {\n targetTable = container.querySelector('.ae-table-responsive') || container;\n }\n }\n\n if (!targetTable) {\n // Try alternative selectors for the whole tiered section\n const tieredSection = doc.querySelector('#dealers-site-checkout-settings-shipping-fee-tiered-rate');\n if (tieredSection) {\n targetTable = tieredSection.querySelector('#tiered-rate-table-container .ae-table-responsive') ||\n tieredSection.querySelector('#tiered-rate-table-container');\n }\n }\n\n if (targetTable) {\n // Replace innerHTML instead of outerHTML to preserve container and Stimulus connection\n const contentContainer = tieredTableContainer.querySelector('.ae-table-responsive') || tieredTableContainer;\n contentContainer.innerHTML = targetTable.innerHTML;\n\n // Re-setup tiered rates autosave fallback for the refreshed table\n this.setupTieredRatesAutosaveFallback();\n }\n })\n .catch(() => {\n // Silent fail - don't break the application\n });\n }\n\n // Simple Modal Implementation Methods\n cleanupExistingModals() {\n // Remove any existing modal elements\n const existingBackdrops = document.querySelectorAll('.mfp-bg');\n const existingWrappers = document.querySelectorAll('.mfp-wrap');\n\n existingBackdrops.forEach(el => el.remove());\n existingWrappers.forEach(el => el.remove());\n\n // Remove the modal open class from body\n document.body.classList.remove('mfp-open');\n\n // Reset our instance variables\n this.currentEditBackdrop = null;\n this.currentEditModal = null;\n }\n\n showModalLoading() {\n if (this.currentEditModal) {\n const loader = document.createElement('div');\n loader.className = 'mfp-preloader';\n loader.innerHTML = '
Loading...
';\n loader.style.position = 'absolute';\n loader.style.top = '50%';\n loader.style.left = '50%';\n loader.style.transform = 'translate(-50%, -50%)';\n this.currentEditModal.appendChild(loader);\n }\n }\n\n hideModalLoading() {\n if (this.currentEditModal) {\n const loader = this.currentEditModal.querySelector('.mfp-preloader');\n if (loader) {\n loader.remove();\n }\n }\n }\n\n setupModalCloseHandlers() {\n if (!this.currentEditModal) return;\n\n // Setup close button handlers\n const closeButtons = this.currentEditModal.querySelectorAll('.mfp-close, [data-action=\"close\"]');\n closeButtons.forEach(button => {\n // Prevent duplicate handlers\n if (button.dataset.modalCloseHandler === 'true') {\n return;\n }\n button.dataset.modalCloseHandler = 'true';\n\n button.addEventListener('click', (e) => {\n e.preventDefault();\n e.stopImmediatePropagation();\n this.closeModal();\n });\n });\n\n // Setup backdrop click handler\n if (this.currentEditBackdrop) {\n this.currentEditBackdrop.addEventListener('click', (e) => {\n if (e.target === this.currentEditBackdrop) {\n this.closeModal();\n }\n });\n }\n\n // Setup ESC key handler\n this.modalKeyHandler = (e) => {\n if (e.key === 'Escape') {\n this.closeModal();\n }\n };\n document.addEventListener('keydown', this.modalKeyHandler);\n\n // Mark body as having modal open\n document.body.classList.add('mfp-open');\n }\n\n closeModal() {\n // Remove elements\n if (this.currentEditBackdrop) {\n this.currentEditBackdrop.remove();\n this.currentEditBackdrop = null;\n }\n\n if (this.currentEditModal) {\n this.currentEditModal.remove();\n this.currentEditModal = null;\n }\n\n // Remove body class\n document.body.classList.remove('mfp-open');\n\n // Remove event listeners\n if (this.modalKeyHandler) {\n document.removeEventListener('keydown', this.modalKeyHandler);\n this.modalKeyHandler = null;\n }\n\n // Reset state\n this.currentShippingMethodId = null;\n\n // Dispatch close event for compatibility\n document.dispatchEvent(new CustomEvent('ajax-popup:afterClose'));\n }\n\n handleModalError(_error) {\n\n if (this.currentEditModal) {\n this.hideModalLoading();\n\n const errorMessage = document.createElement('div');\n errorMessage.className = 'mfp-error ae-popup ae-popup-md';\n errorMessage.innerHTML = `\n \n `;\n\n this.currentEditModal.innerHTML = '';\n this.currentEditModal.appendChild(errorMessage);\n\n this.setupModalCloseHandlers();\n }\n\n // Show user-friendly error message\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Failed to open modal. Please try again.');\n }\n }\n\n\n}\n", "import Select2BaseController from './select2_base_controller';\nimport AjaxPopupController from './ajax_popup_controller';\n\nexport default class extends Select2BaseController {\n connect() {\n super.connect();\n // Initialize processing state\n this.isProcessing = false;\n this.debounceTimeout = null;\n }\n\n disconnect() {\n super.disconnect();\n // Clear any pending debounce timeout\n if (this.debounceTimeout) {\n clearTimeout(this.debounceTimeout);\n this.debounceTimeout = null;\n }\n }\n\n // Override the Select2BaseController's onSelectChange method\n onSelectChange(event) {\n // Clear any existing debounce timeout\n if (this.debounceTimeout) {\n clearTimeout(this.debounceTimeout);\n }\n\n // Debounce the execution to prevent multiple calls\n this.debounceTimeout = setTimeout(() => {\n // Prevent multiple rapid executions due to Select2 triggering multiple events\n if (this.isProcessing) {\n return;\n }\n\n const shipping_method = event.target.value;\n\n if (shipping_method === 'bulk' || shipping_method === 'pickup') {\n this.openNewShippingMethodModal(shipping_method);\n } else if (shipping_method === 'direct') {\n this.createShippingMethod(shipping_method);\n }\n }, 50); // 50ms debounce should be sufficient to prevent duplicates\n }\n\n openNewShippingMethodModal(shipping_method) {\n // Try to get sale ID from element or parent element\n let saleId = this.element.dataset.saleId;\n if (!saleId) {\n // Check parent element if not on the select itself\n const parent = this.element.closest('[data-sale-id]');\n if (parent) {\n saleId = parent.dataset.saleId;\n }\n }\n\n if (!saleId || saleId === 'undefined' || saleId === 'MISSING_SALE') {\n // Show user-friendly error message\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Unable to open shipping method modal. Please reload the page.');\n }\n return;\n }\n\n // Use TeamSite address modal for bulk and pickup shipping methods\n const url = `/teamsites/${saleId}/settings/shipping_methods_addresses?shipping_method_type=${shipping_method}`;\n\n try {\n // Use the ajax-popup controller's static open method\n AjaxPopupController.open(url);\n\n // Set up close callback\n this.setupModalCloseCallback();\n } catch {\n // Show error to user without console logging\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Failed to open shipping method modal. Please try again.');\n }\n }\n }\n\n setupModalCloseCallback() {\n // Listen for modal close\n const closeHandler = () => {\n this.resetDropdown();\n // Reload shipping methods to show any new ones created via the modal\n this.reloadShippingMethods();\n };\n\n document.addEventListener('ajax-popup:afterClose', closeHandler, { once: true });\n }\n\n createShippingMethod(shipping_method) {\n // Prevent concurrent executions\n if (this.isProcessing) {\n return;\n }\n\n this.isProcessing = true;\n\n // Try to get sale ID from element or parent element\n let saleId = this.element.dataset.saleId;\n if (!saleId) {\n // Check parent element if not on the select itself\n const parent = this.element.closest('[data-sale-id]');\n if (parent) {\n saleId = parent.dataset.saleId;\n }\n }\n\n if (!saleId || saleId === 'undefined' || saleId === 'MISSING_SALE') {\n // Reset processing flag before returning\n this.isProcessing = false;\n // Show user-friendly error message\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Unable to create shipping method. Please reload the page.');\n }\n return;\n }\n // Use TeamSite routes with JS format for automatic UI updates\n const url = `/teamsites/${saleId}/settings/shipping_methods`;\n\n // Create form data instead of JSON for proper Rails form handling\n const formData = new FormData();\n formData.append('shipping_method[shipping_method_type]', shipping_method);\n\n // Enhanced CSRF token handling with error checking\n const csrfToken = document.querySelector('meta[name=\"csrf-token\"]');\n if (!csrfToken) {\n // Reset processing flag before returning\n this.isProcessing = false;\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Security token not found. Please reload the page.');\n }\n return;\n }\n formData.append('authenticity_token', csrfToken.getAttribute('content'));\n\n fetch(url, {\n method: 'POST',\n headers: {\n 'Accept': 'application/json',\n 'X-Requested-With': 'XMLHttpRequest',\n },\n body: formData,\n })\n .then(response => {\n if (response.ok) {\n return response.json();\n } else {\n throw new Error('Create request failed');\n }\n })\n .then(data => {\n // Handle success response directly without eval\n if (data.success) {\n this.handleShippingMethodCreated(data);\n this.resetDropdown();\n } else {\n throw new Error(data.message || 'Create request failed');\n }\n })\n .catch(_error => {\n // Error creating shipping method\n })\n .finally(() => {\n // Always reset processing flag when request completes\n this.isProcessing = false;\n });\n }\n\n handleShippingMethodCreated(data) {\n // Close any open modals\n const closeButton = document.querySelector('.mfp-close');\n if (closeButton) {\n closeButton.click();\n }\n\n // Dispatch custom event for other components to listen\n const event = new CustomEvent('shipping-method:created', {\n detail: { shippingMethod: data.shipping_method_id || data.id },\n });\n document.dispatchEvent(event);\n\n // Show success message\n if (window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash(data.message || 'Shipping method added successfully');\n } else {\n // Shipping method created successfully\n }\n\n // Reload the shipping methods display to show the new method\n this.reloadShippingMethods();\n }\n\n reloadShippingMethods() {\n // Try to get sale ID from element or parent element\n let saleId = this.element.dataset.saleId;\n if (!saleId) {\n // Check parent element if not on the select itself\n const parent = this.element.closest('[data-sale-id]');\n if (parent) {\n saleId = parent.dataset.saleId;\n }\n }\n\n if (!saleId || saleId === 'undefined' || saleId === 'MISSING_SALE') {\n // Show user-friendly error message\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Unable to refresh shipping methods. Please reload the page.');\n }\n return;\n }\n\n // Find and reload the shipping methods container\n const container = document.getElementById('shipping-methods-labels-container');\n if (container) {\n // Use the correct route to get the shipping methods index HTML\n const shippingMethodsUrl = `/teamsites/${saleId}/settings/shipping_methods`;\n\n fetch(shippingMethodsUrl, {\n headers: {\n 'Accept': 'text/html',\n 'X-Requested-With': 'XMLHttpRequest',\n 'X-CSRF-Token': document.querySelector('meta[name=\"csrf-token\"]')?.getAttribute('content') || '',\n },\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n return response.text();\n })\n .then(html => {\n // Update the container with the new HTML\n container.innerHTML = html;\n\n // Dispatch event to notify that shipping methods were reloaded\n const event = new CustomEvent('shipping-methods:reloaded');\n document.dispatchEvent(event);\n })\n .catch(_error => {\n // Error reloading shipping methods\n // Show user-friendly error message\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Failed to refresh shipping methods. Please reload the page.');\n }\n });\n }\n }\n\n // Keep old method for backwards compatibility\n reloadLabels() {\n this.reloadShippingMethods();\n }\n\n resetDropdown() {\n const dropdown = this.element.querySelector('#shipping-method-dropdown');\n if (dropdown) {\n dropdown.value = '';\n // Trigger change event for any listeners\n dropdown.dispatchEvent(new Event('change'));\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['container', 'form'];\n\n connect() {\n this.boundDocumentClick = this.handleDocumentClick.bind(this);\n document.addEventListener('click', this.boundDocumentClick);\n }\n\n disconnect() {\n if (this.boundDocumentClick) {\n document.removeEventListener('click', this.boundDocumentClick);\n }\n }\n\n // Show shipping rates management interface\n showRatesInterface() {\n const url = `/teamsites/${this.element.dataset.siteId}/settings/shipping_methods/${this.element.dataset.shippingMethodId}/shipping_rates`;\n\n fetch(url, {\n method: 'GET',\n headers: {\n 'Accept': 'text/html',\n 'X-CSRF-Token': this.getCSRFToken(),\n },\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n return response.text();\n })\n .then(html => {\n this.displayRatesInterface(html);\n })\n .catch(_error => {\n this.showErrorMessage('Failed to load shipping rates interface');\n });\n }\n\n // Display the rates interface in a modal or dedicated area\n displayRatesInterface(html) {\n // Create modal container\n const modal = document.createElement('div');\n modal.className = 'ae-popup ae-popup-lg ae-visible-scrollbars mfp-content';\n modal.innerHTML = `\n \n \n `;\n\n // Add modal to page\n document.body.appendChild(modal);\n\n // Add modal backdrop\n const backdrop = document.createElement('div');\n backdrop.className = 'mfp-bg mfp-fade mfp-ready';\n backdrop.setAttribute('data-action', 'click->sale-settings-shipping-rates#closeModal');\n document.body.appendChild(backdrop);\n\n // Store references for cleanup\n this.currentModal = modal;\n this.currentBackdrop = backdrop;\n\n // Add CSS classes to body\n document.body.classList.add('mfp-zoom-out-cur', 'mfp-ready');\n }\n\n // Close the rates management modal\n closeModal() {\n if (this.currentModal) {\n this.currentModal.remove();\n this.currentModal = null;\n }\n\n if (this.currentBackdrop) {\n this.currentBackdrop.remove();\n this.currentBackdrop = null;\n }\n\n // Remove CSS classes from body\n document.body.classList.remove('mfp-zoom-out-cur', 'mfp-ready');\n }\n\n // Handle clicks outside modal\n handleDocumentClick(event) {\n if (this.currentModal && !this.currentModal.contains(event.target)) {\n if (event.target.classList.contains('mfp-bg')) {\n this.closeModal();\n }\n }\n }\n\n // Show error message\n showErrorMessage(message) {\n const errorDiv = document.createElement('div');\n errorDiv.className = 'ae-alert ae-alert-danger';\n errorDiv.textContent = message;\n errorDiv.style.cssText = 'position:fixed;top:20px;right:20px;z-index:9999';\n document.body.appendChild(errorDiv);\n\n setTimeout(() => {\n if (errorDiv.parentNode) {\n errorDiv.remove();\n }\n }, 5000);\n }\n\n // Show success message\n showSuccessMessage(message) {\n const successDiv = document.createElement('div');\n successDiv.className = 'ae-alert ae-alert-success';\n successDiv.textContent = message;\n successDiv.style.cssText = 'position:fixed;top:20px;right:20px;z-index:9999';\n document.body.appendChild(successDiv);\n\n setTimeout(() => {\n if (successDiv.parentNode) {\n successDiv.remove();\n }\n }, 3000);\n }\n\n // Get CSRF token for requests\n getCSRFToken() {\n const token = document.querySelector('meta[name=\"csrf-token\"]');\n return token ? token.getAttribute('content') : '';\n }\n\n // Refresh rates display in shipping method panel\n refreshRatesDisplay() {\n // Find the shipping method panel and refresh the rates section\n const methodPanel = document.querySelector(`[data-shipping-method-id=\"${this.element.dataset.shippingMethodId}\"]`);\n if (methodPanel) {\n const rateContainer = methodPanel.querySelector('.rate-container dd');\n if (rateContainer) {\n // Trigger a refresh of the shipping method display\n const event = new CustomEvent('shipping-rates:updated', {\n detail: { shippingMethodId: this.element.dataset.shippingMethodId },\n });\n document.dispatchEvent(event);\n }\n }\n }\n}\n", "import { Controller } from '../stimulus';\nimport NotificationMixin from '../mixins/notification_mixin';\n\nexport default class extends Controller {\n connect() {\n // Add notification capabilities\n Object.assign(this, NotificationMixin);\n\n // Show immediate feedback\n this.showNotification('Creating fixed shipping rate...', 'info', { duration: 2000 });\n\n // Extract shipping method ID and type\n this.shippingMethodId = this.element.dataset.shippingMethodId;\n this.shippingMethodType = this.element.dataset.shippingMethodType;\n\n // If not found on element, try to get from parent modal\n if (!this.shippingMethodId) {\n const modal = this.element.closest('[data-shipping-method-id]');\n if (modal) {\n this.shippingMethodId = modal.dataset.shippingMethodId;\n this.shippingMethodType = modal.dataset.shippingMethodType;\n }\n }\n\n // Auto-submit the fixed rate immediately\n this.createFixedRate();\n }\n\n createFixedRate() {\n const saleId = this.getSaleId();\n if (!saleId || !this.shippingMethodId) {\n this.showErrorNotification('Unable to determine sale or shipping method');\n return Promise.resolve();\n }\n\n const url = `/teamsites/${saleId}/settings/shipping_methods/${this.shippingMethodId}/shipping_rates`;\n\n return fetch(url, {\n method: 'POST',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Content-Type': 'application/json',\n 'Accept': 'application/json',\n },\n body: JSON.stringify({\n shipping_rate: {\n rate_type: 'fixed',\n // DO NOT send type parameter - causes STI class loading issues\n name: 'Fixed Rate',\n fixed_rate: 0.00,\n active: true,\n taxable: false,\n collect_address: false,\n shipping_method: this.shippingMethodType || null,\n },\n }),\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n return response.json();\n })\n .then(data => {\n if (data.success) {\n this.showSaveNotification(data.message || 'Fixed rate created successfully');\n this.refreshShippingRates();\n } else {\n throw new Error(data.errors ? data.errors.join(', ') : 'Failed to create fixed rate');\n }\n })\n .catch(error => {\n this.showErrorNotification('Failed to create fixed rate: ' + error.message);\n });\n }\n\n refreshShippingRates() {\n // Refresh the entire shipping rates section\n const shippingRatesContainer = document.getElementById('shipping-rates');\n if (!shippingRatesContainer) {\n return Promise.resolve();\n }\n\n const url = `/teamsites/${this.getSaleId()}/settings/shipping_methods/${this.shippingMethodId}/shipping_rates`;\n\n return fetch(url, {\n method: 'GET',\n headers: {\n 'Accept': 'text/html',\n 'X-CSRF-Token': this.getCSRFToken(),\n },\n })\n .then(response => response.text())\n .then(html => {\n // Extract the entire shipping rates content\n const parser = new DOMParser();\n const doc = parser.parseFromString(html, 'text/html');\n const newShippingRates = doc.querySelector('#shipping-rates');\n\n if (newShippingRates) {\n shippingRatesContainer.innerHTML = newShippingRates.innerHTML;\n }\n })\n .catch(_error => {\n // Table refresh failed - silently ignore\n });\n }\n\n // Helper methods\n getSaleId() {\n const pathParts = window.location.pathname.split('/');\n const teamsitesIndex = pathParts.indexOf('teamsites');\n return teamsitesIndex !== -1 ? pathParts[teamsitesIndex + 1] : null;\n }\n\n getCSRFToken() {\n const token = document.querySelector('meta[name=\"csrf-token\"]');\n return token ? token.getAttribute('content') : '';\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n connect() {\n // Get values from data attributes (Stimulus 1.1.0 style)\n this.shippingMethodId = this.element.dataset.shippingMethodId;\n this.rateType = this.element.dataset.rateType;\n\n // Initialize form validation\n this.setupFormValidation();\n }\n\n disconnect() {\n // Cleanup\n }\n\n setupFormValidation() {\n const form = this.element.querySelector('form');\n if (form) {\n // Add real-time validation\n form.addEventListener('input', this.validateForm.bind(this));\n }\n }\n\n validateForm() {\n const form = this.element.querySelector('form');\n const submitButton = form.querySelector('button[type=\"submit\"]');\n\n if (form.checkValidity()) {\n submitButton.disabled = false;\n submitButton.classList.remove('ae-btn-disabled');\n } else {\n submitButton.disabled = true;\n submitButton.classList.add('ae-btn-disabled');\n }\n }\n\n // Handle form submission\n submitForm(event) {\n event.preventDefault();\n\n const form = event.currentTarget;\n const formData = new FormData(form);\n\n // Validate form before submission\n if (!form.checkValidity()) {\n this.showValidationErrors(form);\n return;\n }\n\n this.createShippingRate(formData);\n }\n\n // Create new shipping rate\n createShippingRate(formData) {\n const url = `/teamsites/${this.getSaleId()}/settings/shipping_methods/${this.shippingMethodId}/shipping_rates`;\n\n // Show loading state\n this.setLoadingState(true);\n\n return fetch(url, {\n method: 'POST',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Accept': 'application/json',\n },\n body: formData,\n })\n .then(response => {\n if (!response.ok) {\n return response.json().then(data => {\n throw new Error(data.errors ? data.errors.join(', ') : 'Failed to create shipping rate');\n });\n }\n return response.json();\n })\n .then(data => {\n if (data.success) {\n this.handleCreateSuccess(data);\n } else {\n throw new Error(data.errors ? data.errors.join(', ') : 'Failed to create shipping rate');\n }\n })\n .catch(error => {\n this.showErrorMessage(error.message);\n })\n .finally(() => {\n this.setLoadingState(false);\n });\n }\n\n // Handle successful rate creation\n handleCreateSuccess(data) {\n this.showSuccessMessage(data.message || 'Shipping rate created successfully');\n this.refreshRatesDisplay();\n this.refreshModalContent();\n }\n\n // Show validation errors\n showValidationErrors(form) {\n const invalidInputs = form.querySelectorAll(':invalid');\n\n invalidInputs.forEach(input => {\n const fieldContainer = input.closest('.ae-form-field');\n if (fieldContainer) {\n fieldContainer.classList.add('ae-form-field-error');\n\n // Remove error class after user starts typing\n input.addEventListener('input', () => {\n fieldContainer.classList.remove('ae-form-field-error');\n }, { once: true });\n }\n });\n }\n\n // Set loading state\n setLoadingState(loading) {\n const submitButton = this.element.querySelector('button[type=\"submit\"]');\n const cancelButton = this.element.querySelector('.ae-btn-secondary');\n\n if (loading) {\n submitButton.disabled = true;\n submitButton.innerHTML = '
Creating...';\n if (cancelButton) cancelButton.disabled = true;\n } else {\n submitButton.disabled = false;\n submitButton.innerHTML = '
Create Rate';\n if (cancelButton) cancelButton.disabled = false;\n }\n }\n\n // Close the form\n closeForm() {\n this.element.remove();\n }\n\n // Refresh rates display\n refreshRatesDisplay() {\n // Dispatch event to refresh the rates interface\n const event = new CustomEvent('shipping-rates:created', {\n detail: {\n shippingMethodId: this.shippingMethodId,\n rateType: this.rateType,\n },\n bubbles: true,\n });\n\n // Dispatch to document for global listeners\n document.dispatchEvent(event);\n\n // Also dispatch to specific table containers for element-scoped listeners\n const tableContainers = document.querySelectorAll('[data-controller*=\"shipping-rates-tiered-table\"]');\n tableContainers.forEach(container => {\n container.dispatchEvent(new CustomEvent('shipping-rates:created', {\n detail: {\n shippingMethodId: this.shippingMethodId,\n rateType: this.rateType,\n },\n bubbles: true,\n }));\n });\n\n // Refresh the shipping method panel\n this.refreshShippingMethodPanel();\n }\n\n // Refresh shipping method panel to show new rate\n refreshShippingMethodPanel() {\n const methodPanel = document.querySelector(`[data-shipping-method-id=\"${this.shippingMethodId}\"]`);\n if (methodPanel) {\n const rateContainer = methodPanel.querySelector('.rate-container');\n if (rateContainer) {\n // You could refresh just this section, but for now we'll dispatch an event\n const refreshEvent = new CustomEvent('shipping-method:refresh', {\n detail: { shippingMethodId: this.shippingMethodId },\n });\n document.dispatchEvent(refreshEvent);\n }\n }\n }\n\n // Refresh modal content to show new rate\n refreshModalContent() {\n // Dispatch event to trigger modal refresh in shipping methods controller\n const refreshEvent = new CustomEvent('shipping-rates:refresh-modal', {\n detail: {\n shippingMethodId: this.shippingMethodId,\n rateType: this.rateType,\n },\n });\n document.dispatchEvent(refreshEvent);\n }\n\n // Helper methods\n getSaleId() {\n const pathParts = window.location.pathname.split('/');\n const teamsitesIndex = pathParts.indexOf('teamsites');\n return teamsitesIndex !== -1 ? pathParts[teamsitesIndex + 1] : null;\n }\n\n getCSRFToken() {\n const token = document.querySelector('meta[name=\"csrf-token\"]');\n return token ? token.getAttribute('content') : '';\n }\n\n showErrorMessage(message) {\n const errorDiv = document.createElement('div');\n errorDiv.className = 'ae-alert ae-alert-danger';\n errorDiv.textContent = message;\n errorDiv.style.cssText = 'position:fixed;top:20px;right:20px;z-index:9999';\n document.body.appendChild(errorDiv);\n\n setTimeout(() => {\n if (errorDiv.parentNode) {\n errorDiv.remove();\n }\n }, 5000);\n }\n\n showSuccessMessage(message) {\n const successDiv = document.createElement('div');\n successDiv.className = 'ae-alert ae-alert-success';\n successDiv.textContent = message;\n successDiv.style.cssText = 'position:fixed;top:20px;right:20px;z-index:9999';\n document.body.appendChild(successDiv);\n\n setTimeout(() => {\n if (successDiv.parentNode) {\n successDiv.remove();\n }\n }, 3000);\n }\n}\n", "import { Controller } from '../stimulus';\nimport NotificationMixin from '../mixins/notification_mixin';\n\nexport default class extends Controller {\n connect() {\n // Add notification capabilities\n Object.assign(this, NotificationMixin);\n\n // Show immediate feedback\n this.showNotification('Creating free shipping rate...', 'info', { duration: 2000 });\n\n // Extract shipping method ID and type\n this.shippingMethodId = this.element.dataset.shippingMethodId;\n this.shippingMethodType = this.element.dataset.shippingMethodType;\n\n // If not found on element, try to get from parent modal\n if (!this.shippingMethodId) {\n const modal = this.element.closest('[data-shipping-method-id]');\n if (modal) {\n this.shippingMethodId = modal.dataset.shippingMethodId;\n this.shippingMethodType = modal.dataset.shippingMethodType;\n }\n }\n\n // Auto-submit the free rate immediately\n this.createFreeRate();\n }\n\n createFreeRate() {\n const saleId = this.getSaleId();\n if (!saleId || !this.shippingMethodId) {\n this.showErrorNotification('Unable to determine sale or shipping method');\n return Promise.resolve();\n }\n\n const url = `/teamsites/${saleId}/settings/shipping_methods/${this.shippingMethodId}/shipping_rates`;\n\n // Use FormData to match what controller tests expect (not JSON)\n const formData = new FormData();\n formData.append('shipping_rate[name]', 'Free Shipping');\n formData.append('shipping_rate[rate_type]', 'free');\n // DO NOT send type parameter - causes STI class loading issues\n formData.append('shipping_rate[active]', 'true');\n formData.append('shipping_rate[taxable]', 'false');\n formData.append('shipping_rate[collect_address]', 'false');\n // Add shipping_method attribute (the type string) to match baseline\n if (this.shippingMethodType) {\n formData.append('shipping_rate[shipping_method]', this.shippingMethodType);\n }\n // Also add rate_type as top-level param for build_shipping_rate method\n formData.append('rate_type', 'free');\n\n return fetch(url, {\n method: 'POST',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Accept': 'application/json',\n },\n body: formData,\n })\n .then(response => {\n if (!response.ok) {\n return response.json().then(errorData => {\n // Extract error message from response\n const errorMessage = errorData.errors\n ? errorData.errors.join(', ')\n : errorData.message || `Server error: ${response.status}`;\n\n // Show error using App.showErrorFlash for better visibility\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash(errorMessage);\n } else {\n this.showErrorNotification(errorMessage);\n }\n\n throw new Error(errorMessage);\n }).catch((parseError) => {\n // If JSON parsing fails, show generic error\n const errorMessage = `Server error: ${response.status} ${response.statusText}`;\n\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash(errorMessage);\n } else {\n this.showErrorNotification(errorMessage);\n }\n\n throw new Error(errorMessage);\n });\n }\n return response.json();\n })\n .then(data => {\n if (data && data.success) {\n this.showSaveNotification(data.message || 'Free rate created successfully');\n this.refreshShippingRates();\n } else if (data) {\n // Server returned success: false\n const errorMessage = data.errors\n ? data.errors.join(', ')\n : data.message || 'Failed to create free rate';\n\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash(errorMessage);\n } else {\n this.showErrorNotification(errorMessage);\n }\n }\n })\n .catch(error => {\n // Network error or exception\n // Don't show duplicate errors if already shown above\n if (!error.message.includes('Server error:')) {\n const errorMessage = 'Failed to create free rate' + (error.message ? ': ' + error.message : '');\n\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash(errorMessage);\n } else {\n this.showErrorNotification(errorMessage);\n }\n }\n\n // Don't break the page layout on error\n return Promise.resolve();\n });\n }\n\n refreshShippingRates() {\n // Don't try to refresh if we're in a modal context\n // The refresh might be breaking the layout\n const isInModal = this.element.closest('.mfp-wrap, .ae-popup');\n if (isInModal) {\n // In modal context, we should close the modal and let the parent page refresh\n const closeButton = document.querySelector('.mfp-close');\n if (closeButton) {\n closeButton.click();\n }\n return Promise.resolve();\n }\n\n // Refresh the entire shipping rates section\n const shippingRatesContainer = document.getElementById('shipping-rates');\n if (!shippingRatesContainer) {\n return Promise.resolve();\n }\n\n const url = `/teamsites/${this.getSaleId()}/settings/shipping_methods/${this.shippingMethodId}/shipping_rates`;\n\n return fetch(url, {\n method: 'GET',\n headers: {\n 'Accept': 'text/html',\n 'X-CSRF-Token': this.getCSRFToken(),\n },\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`Failed to refresh: ${response.status}`);\n }\n return response.text();\n })\n .then(html => {\n // Extract the entire shipping rates content\n const parser = new DOMParser();\n const doc = parser.parseFromString(html, 'text/html');\n const newShippingRates = doc.querySelector('#shipping-rates');\n\n if (newShippingRates) {\n shippingRatesContainer.innerHTML = newShippingRates.innerHTML;\n }\n })\n .catch(_error => {\n // Table refresh failed - silently ignore but don't break the page\n });\n }\n\n // Helper methods\n getSaleId() {\n const pathParts = window.location.pathname.split('/');\n const teamsitesIndex = pathParts.indexOf('teamsites');\n return teamsitesIndex !== -1 ? pathParts[teamsitesIndex + 1] : null;\n }\n\n getCSRFToken() {\n const token = document.querySelector('meta[name=\"csrf-token\"]');\n return token ? token.getAttribute('content') : '';\n }\n}\n", "import { Controller } from '../stimulus';\nimport NotificationMixin from '../mixins/notification_mixin';\n\nexport default class extends Controller {\n connect() {\n // Add notification capabilities\n Object.assign(this, NotificationMixin);\n\n // Initialize AbortController to prevent race conditions\n this.abortController = new AbortController();\n\n // Show immediate feedback\n this.showNotification('Creating percentage shipping rate...', 'info', { duration: 2000 });\n\n // Extract shipping method ID and type\n this.shippingMethodId = this.element.dataset.shippingMethodId;\n this.shippingMethodType = this.element.dataset.shippingMethodType;\n\n // If not found on element, try to get from parent modal\n if (!this.shippingMethodId) {\n const modal = this.element.closest('[data-shipping-method-id]');\n if (modal) {\n this.shippingMethodId = modal.dataset.shippingMethodId;\n this.shippingMethodType = modal.dataset.shippingMethodType;\n }\n }\n\n // Auto-submit the percentage rate immediately\n this.createPercentageRate();\n }\n\n disconnect() {\n // Abort any ongoing requests to prevent race conditions\n if (this.abortController) {\n this.abortController.abort();\n }\n }\n\n createPercentageRate() {\n const saleId = this.getSaleId();\n if (!saleId || !this.shippingMethodId) {\n this.showErrorNotification('Unable to determine sale or shipping method');\n return Promise.resolve();\n }\n\n const url = `/teamsites/${saleId}/settings/shipping_methods/${this.shippingMethodId}/shipping_rates`;\n\n return fetch(url, {\n method: 'POST',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Content-Type': 'application/json',\n 'Accept': 'application/json',\n },\n body: JSON.stringify({\n shipping_rate: {\n rate_type: 'percentage',\n // DO NOT send type parameter - causes STI class loading issues\n name: 'Percentage Rate',\n percentage_rate: 5.00,\n active: true,\n taxable: false,\n collect_address: false,\n shipping_method: this.shippingMethodType || null,\n },\n }),\n signal: this.abortController.signal, // Prevent race conditions\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n return response.json();\n })\n .then(data => {\n if (data.success) {\n this.showSaveNotification(data.message || 'Percentage rate created successfully');\n this.refreshShippingRates();\n } else {\n throw new Error(data.errors ? data.errors.join(', ') : 'Failed to create percentage rate');\n }\n })\n .catch(error => {\n this.showErrorNotification('Failed to create percentage rate: ' + error.message);\n });\n }\n\n refreshShippingRates() {\n // Refresh the entire shipping rates section\n const shippingRatesContainer = document.getElementById('shipping-rates');\n if (!shippingRatesContainer) {\n return Promise.resolve();\n }\n\n const url = `/teamsites/${this.getSaleId()}/settings/shipping_methods/${this.shippingMethodId}/shipping_rates`;\n\n return fetch(url, {\n method: 'GET',\n headers: {\n 'Accept': 'text/html',\n 'X-CSRF-Token': this.getCSRFToken(),\n },\n signal: this.abortController.signal, // Prevent race conditions\n })\n .then(response => response.text())\n .then(html => {\n // Extract the entire shipping rates content\n const parser = new DOMParser();\n const doc = parser.parseFromString(html, 'text/html');\n const newShippingRates = doc.querySelector('#shipping-rates');\n\n if (newShippingRates) {\n shippingRatesContainer.innerHTML = newShippingRates.innerHTML;\n }\n })\n .catch(_error => {\n // Table refresh failed - silently ignore\n });\n }\n\n // Helper methods\n getSaleId() {\n const pathParts = window.location.pathname.split('/');\n const teamsitesIndex = pathParts.indexOf('teamsites');\n return teamsitesIndex !== -1 ? pathParts[teamsitesIndex + 1] : null;\n }\n\n getCSRFToken() {\n const token = document.querySelector('meta[name=\"csrf-token\"]');\n return token ? token.getAttribute('content') : '';\n }\n}\n", "import { Controller } from '../stimulus';\nimport StimulusReinitMixin from '../mixins/stimulus_reinit_mixin';\nimport NotificationMixin from '../mixins/notification_mixin';\nimport CSRFTokenMixin from '../mixins/csrf_token_mixin';\n\nexport default class extends Controller {\n initialize() {\n // Add mixin capabilities\n Object.assign(this, StimulusReinitMixin);\n Object.assign(this, NotificationMixin);\n Object.assign(this, CSRFTokenMixin);\n }\n\n connect() {\n // Initialize rate selector functionality\n this.setupRateSelector();\n\n // Track pending form requests to avoid race conditions with modal refreshes\n this.pendingFormRequest = null;\n\n // Listen for modal refresh events that might destroy containers\n this.boundModalRefreshHandler = this.handleModalRefresh.bind(this);\n document.addEventListener('shipping-rates:refresh-modal', this.boundModalRefreshHandler);\n }\n\n disconnect() {\n // Clean up event listeners\n if (this.boundModalRefreshHandler) {\n document.removeEventListener('shipping-rates:refresh-modal', this.boundModalRefreshHandler);\n }\n\n // Cancel any pending form requests\n if (this.pendingFormRequest) {\n this.pendingFormRequest.abort();\n this.pendingFormRequest = null;\n }\n }\n\n handleModalRefresh(_event) {\n // If we have a pending form request, cancel it since containers will be destroyed\n if (this.pendingFormRequest) {\n this.pendingFormRequest.abort();\n this.pendingFormRequest = null;\n }\n }\n\n setupRateSelector() {\n // Get shipping method ID and type from data attributes (Stimulus 1.1.0 style)\n this.shippingMethodId = this.element.dataset.shippingMethodId;\n this.shippingMethodType = this.element.dataset.shippingMethodType;\n }\n\n // Handle rate type selection\n selectRateType(event) {\n event.preventDefault();\n event.stopPropagation(); // Prevent event from bubbling up and potentially closing modals\n event.stopImmediatePropagation(); // Stop all other handlers on this event\n\n const rateType = event.currentTarget.dataset.rateType;\n if (!rateType) {\n // No rate type found\n return;\n }\n\n // For free, fixed, and percentage rates, auto-submit directly\n // For other types, show the form\n if (rateType === 'free' || rateType === 'fixed' || rateType === 'percentage') {\n this.autoSubmitRate(rateType);\n } else {\n // Don't close dropdown here - let showRateForm handle it\n this.showRateForm(rateType);\n }\n }\n\n // Auto-submit rate creation for simple rate types\n autoSubmitRate(rateType) {\n const saleId = this.getSaleId();\n if (!saleId || !this.shippingMethodId) {\n this.showErrorMessage('Unable to determine sale or shipping method');\n return;\n }\n\n // Prepare the rate data based on type\n const rateData = {\n rate_type: rateType,\n // Remove explicit active: true to use server-side default (inactive) to avoid customer confusion\n taxable: false,\n collect_address: false,\n shipping_method: this.shippingMethodType || null,\n };\n\n // Set type-specific defaults\n switch (rateType) {\n case 'free':\n rateData.name = 'Free Shipping';\n break;\n case 'fixed':\n rateData.name = 'Fixed Rate';\n rateData.fixed_rate = 0.00;\n break;\n case 'percentage':\n rateData.name = 'Percentage Rate';\n rateData.percentage_rate = 5.00;\n break;\n }\n\n // Submit the rate creation\n const url = `/teamsites/${saleId}/settings/shipping_methods/${this.shippingMethodId}/shipping_rates`;\n\n fetch(url, {\n method: 'POST',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Content-Type': 'application/json',\n 'Accept': 'application/json',\n },\n body: JSON.stringify({ shipping_rate: rateData }),\n })\n .then(response => {\n if (!response.ok) {\n return response.json().then(data => {\n throw new Error(data.errors ? data.errors.join(', ') : `HTTP ${response.status}`);\n });\n }\n return response.json();\n })\n .then(data => {\n if (data.success) {\n // Show success message\n if (window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash(data.message || `${rateType} rate created successfully`);\n }\n\n // Refresh the shipping rates display\n this.refreshShippingRates();\n\n // Close the dropdown\n this.closeDropdown();\n } else {\n throw new Error(data.errors ? data.errors.join(', ') : 'Failed to create rate');\n }\n })\n .catch(error => {\n const errorMessage = `Failed to create ${rateType} rate: ${error.message}`;\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash(errorMessage);\n } else {\n this.showErrorMessage(errorMessage);\n }\n });\n }\n\n // Refresh the shipping rates section\n refreshShippingRates() {\n const shippingRatesContainer = document.getElementById('shipping-rates');\n if (!shippingRatesContainer) {\n return;\n }\n\n const url = `/teamsites/${this.getSaleId()}/settings/shipping_methods/${this.shippingMethodId}/shipping_rates`;\n\n fetch(url, {\n method: 'GET',\n headers: {\n 'Accept': 'text/html',\n 'X-CSRF-Token': this.getCSRFToken(),\n },\n })\n .then(response => response.text())\n .then(html => {\n // Extract the shipping rates content\n const parser = new DOMParser();\n const doc = parser.parseFromString(html, 'text/html');\n const newShippingRates = doc.querySelector('#shipping-rates');\n\n if (newShippingRates) {\n shippingRatesContainer.innerHTML = newShippingRates.innerHTML;\n }\n })\n .catch(_error => {\n // Silently ignore refresh errors\n });\n }\n\n // Show form for creating new rate\n showRateForm(rateType) {\n const saleId = this.getSaleId();\n\n // Fetch rate form\n\n const url = `/teamsites/${saleId}/settings/shipping_methods/${this.shippingMethodId}/shipping_rates/new?rate_type=${encodeURIComponent(rateType)}`;\n\n // Cancel any existing request\n if (this.pendingFormRequest) {\n this.pendingFormRequest.abort();\n }\n\n // Create abort controller for this request\n const abortController = new AbortController();\n this.pendingFormRequest = abortController;\n\n // Make AJAX request\n fetch(url, {\n method: 'GET',\n headers: {\n 'Accept': 'text/html',\n 'X-CSRF-Token': this.getCSRFToken(),\n },\n signal: abortController.signal,\n })\n .then(response => {\n // Check response\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n return response.text();\n })\n .then(html => {\n // Clear the pending request\n this.pendingFormRequest = null;\n\n // Process HTML response\n if (!html || html.trim() === '') {\n throw new Error('Empty response from server');\n }\n this.displayRateForm(html, rateType);\n })\n .catch(error => {\n // Clear the pending request\n this.pendingFormRequest = null;\n\n // Handle fetch error (ignore aborted requests)\n if (error.name !== 'AbortError') {\n this.showErrorMessage('Failed to load rate form: ' + error.message);\n }\n });\n }\n\n // Display the rate form\n displayRateForm(html, rateType) {\n // Display the fetched form with retry logic for timing issues\n this.findContainerWithRetry(html, rateType, 0);\n }\n\n findContainerWithRetry(html, rateType, attempt) {\n const maxAttempts = 5;\n const retryDelay = 300; // milliseconds\n\n // Find the appropriate form container based on rate type\n const containerId = `${rateType}-rate-form-container`;\n\n // Find the modal that contains this dropdown\n const modalContainer = this.element.closest('.mfp-content, .ae-popup');\n let container = null;\n\n // First, look within the modal that contains this dropdown\n if (modalContainer) {\n container = modalContainer.querySelector(`#${containerId}`);\n }\n\n // If not found in modal, try the main document\n if (!container) {\n container = document.getElementById(containerId);\n }\n\n // Additional search strategies if modal refresh occurred\n if (!container && modalContainer) {\n // Check if the shipping rates section exists but containers are missing\n const shippingRatesSection = modalContainer.querySelector('#shipping-rates');\n if (shippingRatesSection) {\n // Look for the rate section wrapper\n const rateSectionWrapper = shippingRatesSection.querySelector(`#dealers-site-checkout-settings-shipping-fee-${rateType}-rate`);\n if (rateSectionWrapper) {\n // Container wrapper exists, look for the container within it\n container = rateSectionWrapper.querySelector(`#${containerId}`);\n }\n }\n }\n\n if (container) {\n // Container found - proceed with form display\n this.insertFormIntoContainer(container, html);\n } else if (attempt < maxAttempts) {\n // Container not found, but we have more attempts - retry after delay\n // Increase delay for later attempts to handle modal refresh timing\n const adaptiveDelay = retryDelay * (attempt + 1);\n setTimeout(() => {\n this.findContainerWithRetry(html, rateType, attempt + 1);\n }, adaptiveDelay);\n } else {\n // Container not found after all attempts - show detailed error\n this.showDetailedErrorMessage(containerId, rateType, modalContainer);\n }\n }\n\n insertFormIntoContainer(container, html) {\n\n // Make sure the container is visible first\n container.style.display = 'block';\n\n // For Stimulus 1.1.0, we need to insert the HTML in a way that triggers the MutationObserver\n // First, we'll create a temporary wrapper\n const tempWrapper = document.createElement('div');\n tempWrapper.innerHTML = html;\n\n // Clear the container\n container.innerHTML = '';\n\n // Propagate shipping method type to any auto-submit controllers\n if (this.shippingMethodType) {\n const autoSubmitElements = tempWrapper.querySelectorAll('[data-controller*=\"auto-submit\"]');\n autoSubmitElements.forEach(el => {\n if (!el.dataset.shippingMethodType) {\n el.dataset.shippingMethodType = this.shippingMethodType;\n }\n });\n }\n\n // Now append each child from the temp wrapper to the container\n // This should trigger Stimulus's MutationObserver for each added node\n while (tempWrapper.firstChild) {\n container.appendChild(tempWrapper.firstChild);\n }\n\n // Force visibility again after setting content\n container.style.display = 'block';\n\n // Additional forced reinitialization for Stimulus 1.1.0\n // This is a more aggressive approach to ensure controllers connect\n setTimeout(() => {\n const controllerElements = container.querySelectorAll('[data-controller]');\n\n controllerElements.forEach(element => {\n const controllerName = element.dataset.controller;\n\n // Remove and re-add the data-controller attribute to force Stimulus to notice\n element.removeAttribute('data-controller');\n\n // Use requestAnimationFrame to ensure the DOM update is processed\n requestAnimationFrame(() => {\n element.setAttribute('data-controller', controllerName);\n });\n });\n }, 10);\n\n // Close the dropdown after a brief delay\n setTimeout(() => {\n this.closeDropdown();\n }, 200);\n }\n\n showDetailedErrorMessage(containerId, rateType, modalContainer) {\n const modalInfo = modalContainer ? 'within modal' : 'no modal found';\n const availableContainers = this.getAvailableContainers(modalContainer);\n\n let errorMessage = `Unable to find form container \"${containerId}\" for ${rateType} rates (${modalInfo}).`;\n\n if (availableContainers.length > 0) {\n errorMessage += ` Available containers: ${availableContainers.join(', ')}.`;\n } else {\n errorMessage += ' No form containers found in the current context.';\n }\n\n errorMessage += ' Please refresh the page and try again.';\n\n this.showErrorMessage(errorMessage);\n }\n\n getAvailableContainers(modalContainer) {\n const searchContext = modalContainer || document;\n const containerSelectors = [\n '#free-rate-form-container',\n '#fixed-rate-form-container',\n '#percentage-rate-form-container',\n '#tiered-rate-form-container',\n ];\n\n return containerSelectors.filter(selector =>\n searchContext.querySelector(selector),\n ).map(selector => selector.replace('#', ''));\n }\n\n // Show rate form in modal (fallback)\n showRateFormModal(html) {\n const modal = document.createElement('div');\n modal.className = 'ae-popup ae-popup-md ae-visible-scrollbars mfp-content';\n modal.innerHTML = `\n \n \n `;\n\n document.body.appendChild(modal);\n this.currentModal = modal;\n }\n\n closeModal() {\n if (this.currentModal) {\n this.currentModal.remove();\n this.currentModal = null;\n }\n }\n\n // Close the dropdown that contains this selector\n closeDropdown() {\n // Find the dropdown element that contains this selector\n const dropdownElement = this.element.closest('[data-controller*=\"dropdown\"]');\n if (dropdownElement) {\n // Find the dropdown content and hide it\n const dropdownContent = dropdownElement.querySelector('[data-target=\"dropdown.content\"]');\n if (dropdownContent) {\n dropdownContent.style.display = 'none';\n\n // Update dropdown state if we can access the controller\n // Note: In Stimulus 1.1.0, we can't easily access other controllers,\n // so we'll manage the state manually\n const dropdownController = dropdownElement;\n if (dropdownController) {\n // Set a data attribute to track state\n dropdownController.dataset.isOpen = 'false';\n }\n }\n }\n }\n\n // Helper methods\n getSaleId() {\n // Extract sale ID from current URL or data attribute\n const pathParts = window.location.pathname.split('/');\n const teamsitesIndex = pathParts.indexOf('teamsites');\n return teamsitesIndex !== -1 ? pathParts[teamsitesIndex + 1] : null;\n }\n\n getCSRFToken() {\n const token = document.querySelector('meta[name=\"csrf-token\"]');\n return token ? token.getAttribute('content') : '';\n }\n\n showErrorMessage(message) {\n const errorDiv = document.createElement('div');\n errorDiv.className = 'ae-alert ae-alert-danger';\n errorDiv.textContent = message;\n errorDiv.style.cssText = 'position:fixed;top:20px;right:20px;z-index:9999';\n document.body.appendChild(errorDiv);\n\n setTimeout(() => {\n if (errorDiv.parentNode) {\n errorDiv.remove();\n }\n }, 5000);\n }\n}\n", "import { Controller } from '../stimulus';\nimport NotificationMixin from '../mixins/notification_mixin';\n\nexport default class extends Controller {\n connect() {\n // Apply NotificationMixin\n Object.assign(this, NotificationMixin);\n\n // Use event delegation for delete buttons - this handles both existing and dynamically created buttons\n this.boundContainerClickHandler = this.handleContainerClick.bind(this);\n this.element.addEventListener('click', this.boundContainerClickHandler);\n\n // Listen for toggle change events to update delete button states\n this.boundToggleHandler = this.handleToggleChanged.bind(this);\n this.element.addEventListener('toggle:changed', this.boundToggleHandler);\n }\n\n disconnect() {\n // Clean up container click handler\n if (this.boundContainerClickHandler) {\n this.element.removeEventListener('click', this.boundContainerClickHandler);\n }\n\n // Clean up toggle event listener\n if (this.boundToggleHandler) {\n this.element.removeEventListener('toggle:changed', this.boundToggleHandler);\n }\n }\n\n // Handle clicks on the container - use event delegation for delete buttons\n handleContainerClick(event) {\n // Check if the clicked element is a delete button (or inside one)\n const deleteButton = event.target.closest('.delete[data-id]');\n\n if (deleteButton && !deleteButton.disabled) {\n // Prevent default and stop propagation\n event.preventDefault();\n event.stopPropagation();\n\n // Create a new event-like object with the delete button as currentTarget\n const deleteEvent = {\n preventDefault: () => {},\n stopPropagation: () => {},\n currentTarget: deleteButton,\n target: deleteButton,\n };\n\n this.deleteRate(deleteEvent);\n }\n }\n\n // Delete rate - works for all rate types (fixed, free, percentage, tiered)\n deleteRate(event) {\n event.preventDefault();\n event.stopPropagation();\n\n const button = event.currentTarget;\n const rateId = button.dataset.id;\n const rateName = button.dataset.rateName || 'this rate';\n const shippingMethodId = button.dataset.shippingMethodId;\n\n // Prevent double execution with a flag\n if (button.dataset.deleting === 'true') {\n return;\n }\n\n // Validate we have the required IDs\n if (!rateId || !shippingMethodId) {\n this.showError('Missing rate or shipping method information');\n return;\n }\n\n // Mark as deleting to prevent double execution\n button.dataset.deleting = 'true';\n\n // Confirm deletion\n // TODO: Replace with unified confirmation modal system in future refactor\n // Currently using window.confirm for consistency with existing delete patterns\n if (!window.confirm(`Are you sure you want to delete ${rateName}?`)) {\n button.dataset.deleting = 'false';\n return;\n }\n\n const url = `/teamsites/${this.getSaleId()}/settings/shipping_methods/${shippingMethodId}/shipping_rates/${rateId}`;\n\n fetch(url, {\n method: 'DELETE',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Accept': 'application/json',\n },\n })\n .then(response => {\n return response.json().then(data => {\n if (!response.ok) {\n // Show the actual error message from the server\n const errorMessage = data.message || data.errors?.join(', ') || `HTTP ${response.status}: ${response.statusText}`;\n throw new Error(errorMessage);\n }\n return data;\n }).catch(() => {\n // If JSON parsing fails, throw generic error\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n });\n })\n .then(data => {\n if (data.success) {\n this.removeRateRow(rateId);\n this.showSuccess(data.message || 'Rate deleted successfully');\n this.checkEmptyState();\n } else {\n const errorMessage = data.message || data.errors?.join(', ') || 'Failed to delete rate';\n throw new Error(errorMessage);\n }\n })\n .catch(error => {\n // Reset the deleting flag on error\n button.dataset.deleting = 'false';\n\n // Use the actual error message\n const errorMessage = error.message || 'Failed to delete rate';\n this.showError(errorMessage);\n });\n }\n\n // Remove rate row from table\n removeRateRow(rateId) {\n // Find the row - could be a tr or the entire table for single rates\n const row = this.element.querySelector(`[data-rate-id=\"${rateId}\"], [data-shipping-rate-id=\"${rateId}\"]`);\n if (row) {\n // If it's a tr inside a tbody, remove just the row\n if (row.tagName === 'TR') {\n row.remove();\n } else {\n // For single-rate tables, we might need to remove the whole table\n const table = row.closest('table');\n if (table) {\n table.remove();\n }\n }\n }\n }\n\n // Check if table is empty and show appropriate message\n checkEmptyState() {\n const tbody = this.element.querySelector('tbody');\n const rows = tbody ? tbody.querySelectorAll('tr:not(.empty-state)') : [];\n\n if (rows.length === 0 && tbody) {\n this.showEmptyState();\n }\n\n // Also check if the entire container is now empty\n const tables = this.element.querySelectorAll('table');\n if (tables.length === 0) {\n this.showContainerEmptyState();\n }\n }\n\n // Show empty state message in table\n showEmptyState() {\n const tbody = this.element.querySelector('tbody');\n if (tbody) {\n tbody.innerHTML = `\n
\n \n \n \n `;\n }\n }\n\n // Show empty state for the entire container\n showContainerEmptyState() {\n // Only show if there's no content at all\n if (this.element.innerHTML.trim() === '') {\n this.element.innerHTML = `\n
\n
\n `;\n }\n }\n\n // Handle toggle:changed event to update delete button states\n handleToggleChanged(event) {\n const { active, deactivated_rates } = event.detail;\n\n // Find the row that contains the toggled element\n const toggleElement = event.target;\n const row = toggleElement.closest('tr[data-rate-id]');\n\n if (row) {\n const rateId = row.dataset.rateId;\n this.updateDeleteButtonState(rateId, active);\n }\n\n // Also update any deactivated rates\n if (deactivated_rates && deactivated_rates.length > 0) {\n deactivated_rates.forEach(rate => {\n this.updateDeleteButtonState(rate.id, false);\n });\n }\n }\n\n // Update delete button state based on active status\n updateDeleteButtonState(rateId, isActive) {\n // Find the row for this rate\n const row = this.element.querySelector(`tr[data-rate-id=\"${rateId}\"]`);\n if (!row) return;\n\n // Find the delete button cell\n // Use separate selectors to avoid matching nested table cells in tiered rates\n // The comma selector would match td:last-child in nested tables first (DOM order)\n const deleteCell = row.querySelector('.table-actions') || row.querySelector(':scope > td:last-child');\n if (!deleteCell) return;\n\n if (isActive) {\n // Replace with disabled button\n deleteCell.innerHTML = `\n
\n \n `;\n } else {\n // Get shipping method ID from the container\n const shippingMethodId = this.element.dataset.shippingMethodId ||\n this.element.closest('[data-shipping-method-id]')?.dataset.shippingMethodId;\n\n // Find rate name from the row\n const nameInput = row.querySelector('input[data-field-name=\"name\"]');\n const rateName = nameInput ? nameInput.value : 'this rate';\n\n // Replace with enabled button\n // Note: Using event delegation, so no manual handler attachment needed\n deleteCell.innerHTML = `\n
\n \n `;\n }\n }\n\n // Helper methods\n getSaleId() {\n const pathParts = window.location.pathname.split('/');\n const teamsitesIndex = pathParts.indexOf('teamsites');\n return teamsitesIndex !== -1 ? pathParts[teamsitesIndex + 1] : null;\n }\n\n getCSRFToken() {\n const token = document.querySelector('meta[name=\"csrf-token\"]');\n return token ? token.getAttribute('content') : '';\n }\n\n // Notification helpers using the mixin\n showSuccess(message) {\n if (window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash(message);\n } else {\n this.showNotification(message, 'success', { duration: 3000 });\n }\n }\n\n showError(message) {\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash(message);\n } else {\n this.showNotification(message, 'error', { duration: 5000 });\n }\n }\n}\n", "import Select2BaseController from './select2_base_controller';\n\nexport default class extends Select2BaseController {\n connect() {\n // Initialize Select2 functionality first\n super.connect();\n\n // Extract values from data attributes (Stimulus 1.1.0 style)\n this.shippingMethodId = this.element.dataset.shippingMethodId;\n this.siteId = this.element.dataset.siteId;\n\n // Add a fallback event listener for cases where Select2 doesn't initialize properly\n // This ensures the dropdown works even in dynamically loaded modals\n if (!this.boundOnChange) {\n this.boundOnChange = (event) => this.onSelectChange(event);\n this.element.addEventListener('change', this.boundOnChange);\n }\n }\n\n // Override to set dropdownParent for modal context\n // Without this, Select2 appends dropdown to document.body which renders behind the modal\n getEnhancementOptions() {\n return {\n ...super.getEnhancementOptions(),\n dropdownParent: this.element.closest('.ae-popup-content'),\n };\n }\n\n disconnect() {\n // Clean up the fallback event listener\n if (this.boundOnChange) {\n this.element.removeEventListener('change', this.boundOnChange);\n this.boundOnChange = null;\n }\n\n // Clean up Select2\n super.disconnect();\n }\n\n // Handle select change - this receives both native and Select2 events\n onSelectChange(event) {\n const tieredRateId = event.target.value;\n\n if (!tieredRateId) {\n return;\n }\n\n // Show immediate feedback that selection was received\n this.showSuccessMessage('Processing tiered rate selection...');\n\n this.copyDealerTieredRate(tieredRateId);\n\n // Reset dropdown to default state\n event.target.value = '';\n\n // If Select2 is active, update it too\n if (this.isEnhanced && this.isEnhanced()) {\n this.setValue('');\n }\n }\n\n // Copy dealer-level tiered rate to shipping method\n copyDealerTieredRate(tieredRateId) {\n const saleId = this.getSaleId();\n\n if (!saleId) {\n this.showErrorMessage('Unable to determine sale ID');\n return Promise.resolve();\n }\n\n const url = `/teamsites/${saleId}/settings/shipping_methods/${this.shippingMethodId}/shipping_rates`;\n\n return fetch(url, {\n method: 'POST',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Content-Type': 'application/json',\n 'Accept': 'application/json',\n },\n body: JSON.stringify({\n dealer_tiered_shipping_fee_id: tieredRateId,\n }),\n })\n .then(response => {\n return response.json().then(data => {\n if (!response.ok) {\n throw new Error(data.message || data.errors?.join(', ') || `HTTP ${response.status}: ${response.statusText}`);\n }\n return data;\n }).catch(() => {\n // If JSON parsing fails, throw generic error\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n });\n })\n .then(data => {\n if (data.success) {\n this.showSuccessMessage(data.message || 'Tiered rate copied successfully');\n\n // Close modal and refresh parent page shipping methods\n this.closeModalAndRefresh();\n } else {\n throw new Error(data.message || data.errors?.join(', ') || 'Failed to copy tiered rate');\n }\n })\n .catch(error => {\n this.showErrorMessage(error.message || 'Failed to copy tiered rate');\n });\n }\n\n // Close modal and refresh parent page shipping methods container\n closeModalAndRefresh() {\n // 1. Close the modal by dispatching close event to ajax-popup controller\n const popup = this.element.closest('.mfp-wrap');\n if (popup) {\n const closeEvent = new CustomEvent('ajax-popup:close', { bubbles: true });\n popup.dispatchEvent(closeEvent);\n }\n\n // 2. Refresh the shipping methods container on the parent page\n // Pattern follows sale_settings_shipping_methods_selector_controller.js\n const saleId = this.getSaleId();\n if (!saleId) return;\n\n const container = document.getElementById('shipping-methods-labels-container');\n if (!container) return;\n\n const url = `/teamsites/${saleId}/settings/shipping_methods`;\n\n fetch(url, {\n headers: {\n 'Accept': 'text/html',\n 'X-Requested-With': 'XMLHttpRequest',\n 'X-CSRF-Token': this.getCSRFToken(),\n },\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}`);\n }\n return response.text();\n })\n .then(html => {\n // Safe: HTML from same-origin trusted server endpoint\n container.innerHTML = html;\n\n // Dispatch event to notify that shipping methods were reloaded\n const event = new CustomEvent('shipping-methods:reloaded');\n document.dispatchEvent(event);\n })\n .catch(() => {\n // Silently fail - the page can be manually refreshed if needed\n });\n }\n\n // Helper methods\n getSaleId() {\n const pathParts = window.location.pathname.split('/');\n const teamsitesIndex = pathParts.indexOf('teamsites');\n return teamsitesIndex !== -1 ? pathParts[teamsitesIndex + 1] : null;\n }\n\n getCSRFToken() {\n const token = document.querySelector('meta[name=\"csrf-token\"]');\n return token ? token.getAttribute('content') : '';\n }\n\n showErrorMessage(message) {\n const errorDiv = document.createElement('div');\n errorDiv.className = 'ae-alert ae-alert-danger';\n errorDiv.textContent = message;\n errorDiv.style.cssText = 'position:fixed;top:20px;right:20px;z-index:9999';\n document.body.appendChild(errorDiv);\n\n setTimeout(() => {\n if (errorDiv.parentNode) {\n errorDiv.remove();\n }\n }, 5000);\n }\n\n showSuccessMessage(message) {\n const successDiv = document.createElement('div');\n successDiv.className = 'ae-alert ae-alert-success';\n successDiv.textContent = message;\n successDiv.style.cssText = 'position:fixed;top:20px;right:20px;z-index:9999';\n document.body.appendChild(successDiv);\n\n setTimeout(() => {\n if (successDiv.parentNode) {\n successDiv.remove();\n }\n }, 3000);\n }\n}\n", "import { Controller } from '../stimulus';\nimport NotificationMixin from '../mixins/notification_mixin';\n\nexport default class extends Controller {\n initialize() {\n this.oldValues = {};\n this.autosaveInProgress = false;\n this.saveInProgress = false;\n this.lastSaveTime = 0;\n }\n\n connect() {\n // Add NotificationMixin functionality\n Object.assign(this, NotificationMixin);\n\n // Initialize deletion state flag\n this.deleteInProgress = false;\n\n // Initialize form functionality\n this.setupFormValidation();\n this.setupAutosaveEventListeners();\n this.rowIndex = this.getHighestRowIndex() + 1;\n\n // Setup manual fallbacks for modal contexts (Stimulus 1.1.0 modal integration issue)\n this.setupManualFallbacks();\n }\n\n disconnect() {\n // Cleanup event listeners\n this.removeAutosaveEventListeners();\n this.removeManualFallbacks();\n }\n\n setupFormValidation() {\n // this.element IS the form\n this.element.addEventListener('input', this.validateForm.bind(this));\n }\n\n setupAutosaveEventListeners() {\n // Add focus and blur listeners to form fields for autosave\n const formFields = this.element.querySelectorAll('input[type=\"text\"], input[type=\"checkbox\"], select');\n formFields.forEach(field => {\n this.boundFocusHandler = this.boundFocusHandler || this.handleFocus.bind(this);\n this.boundBlurHandler = this.boundBlurHandler || this.handleBlur.bind(this);\n\n field.addEventListener('focus', this.boundFocusHandler);\n field.addEventListener('blur', this.boundBlurHandler);\n });\n }\n\n removeAutosaveEventListeners() {\n if (this.boundFocusHandler && this.boundBlurHandler) {\n const formFields = this.element.querySelectorAll('input[type=\"text\"], input[type=\"checkbox\"], select');\n formFields.forEach(field => {\n field.removeEventListener('focus', this.boundFocusHandler);\n field.removeEventListener('blur', this.boundBlurHandler);\n });\n }\n }\n\n // Manual event binding fallbacks for modal contexts\n setupManualFallbacks() {\n // Setup manual cancel button handler for Stimulus 1.1.0 modal context\n this.setupCancelButton();\n }\n\n // Setup cancel button with direct event handler (Stimulus 1.1.0 modal workaround)\n setupCancelButton() {\n const cancelButton = this.element.querySelector('button[data-action*=\"cancel\"]');\n if (cancelButton) {\n // Remove any existing listener to avoid duplicates\n if (this.boundCancelHandler) {\n cancelButton.removeEventListener('click', this.boundCancelHandler);\n }\n\n // Create and add new handler\n this.boundCancelHandler = this.handleCancelClick.bind(this);\n cancelButton.addEventListener('click', this.boundCancelHandler);\n }\n }\n\n // Handle cancel button click\n handleCancelClick(event) {\n event.preventDefault();\n event.stopPropagation();\n this.cancel(event);\n }\n\n removeManualFallbacks() {\n if (this.boundDeleteRowHandler) {\n this.element.querySelectorAll('[data-action*=\"deleteRow\"]').forEach(button => {\n button.removeEventListener('click', this.boundDeleteRowHandler);\n });\n }\n\n // Clean up cancel button handler\n if (this.boundCancelHandler) {\n const cancelButton = this.element.querySelector('button[data-action*=\"cancel\"]');\n if (cancelButton) {\n cancelButton.removeEventListener('click', this.boundCancelHandler);\n }\n this.boundCancelHandler = null;\n }\n }\n\n handleFocus(event) {\n const field = event.target;\n // Store original value when field receives focus\n this.oldValues[this.getFieldKey(field)] = this.getFieldValue(field);\n }\n\n handleBlur(event) {\n const field = event.target;\n const fieldKey = this.getFieldKey(field);\n\n // Format currency fields to 2 decimal places\n if (field.classList.contains('ae-currency') && field.type === 'text' && field.value.trim() !== '') {\n const numericValue = parseFloat(field.value);\n if (!isNaN(numericValue)) {\n field.value = numericValue.toFixed(2);\n }\n }\n\n const currentValue = this.getFieldValue(field);\n\n // Only autosave if value has changed AND the tier has required fields filled\n if (this.oldValues[fieldKey] !== currentValue) {\n if (this.shouldAutosaveTier(field)) {\n this.performAutosave(field, fieldKey, currentValue);\n } else {\n // Just update the stored value without saving\n this.oldValues[fieldKey] = currentValue;\n\n // Show user feedback about why autosave isn't happening\n const tierRow = field.closest('.shipping-fee-tiered-rate-tier--row');\n if (tierRow) {\n const idField = tierRow.querySelector('input[name*=\"[id]\"]');\n if (!idField || !idField.value) {\n // This is a new tier\n this.showNewTierFeedback(field);\n }\n }\n }\n }\n }\n\n getFieldKey(field) {\n // Create unique key for field identification\n return field.name || field.id || `${field.tagName.toLowerCase()}_${field.className}`;\n }\n\n getFieldValue(field) {\n if (field.type === 'checkbox') {\n return field.checked;\n }\n return field.value;\n }\n\n shouldAutosaveTier(field) {\n // Find the tier row this field belongs to\n const tierRow = field.closest('.shipping-fee-tiered-rate-tier--row');\n if (!tierRow) {\n // If not in a tier row (e.g., name field), always autosave\n return true;\n }\n\n // Check if this is a new tier (no ID) - don't autosave new tiers\n const idField = tierRow.querySelector('input[name*=\"[id]\"]');\n if (!idField || !idField.value) {\n // This is a new tier without an ID - don't autosave\n // User should use manual save to create new tiers\n return false;\n }\n\n // This is an existing tier with an ID - check if it's complete enough to autosave\n const baseRateField = tierRow.querySelector('input[name*=\"[base_rate]\"]');\n if (!baseRateField || !baseRateField.value.trim()) {\n // Base rate is required and not filled - don't autosave incomplete tiers\n return false;\n }\n\n // Additional validation: ensure we have minimum required fields for a valid tier\n const cartMinField = tierRow.querySelector('input[name*=\"[cart_total_min]\"]');\n const cartMaxField = tierRow.querySelector('input[name*=\"[cart_total_max]\"]');\n\n // At least one range field should be filled along with base rate\n const hasRangeFields = (cartMinField && cartMinField.value.trim()) ||\n (cartMaxField && cartMaxField.value.trim());\n\n if (!hasRangeFields) {\n // Don't autosave if we only have base rate but no range definition\n return false;\n }\n\n return true;\n }\n\n async performAutosave(field, fieldKey, newValue) {\n // Prevent multiple simultaneous autosave operations\n if (this.autosaveInProgress) {\n return;\n }\n\n this.autosaveInProgress = true;\n\n try {\n // this.element IS the form element since the controller is attached to the form\n const form = this.element;\n if (!form || form.tagName !== 'FORM') {\n throw new Error('Controller must be attached to a form element');\n }\n\n // For autosave, only send the specific field that changed, not the entire form\n // This prevents Rails from trying to validate all tiers as new records\n\n let requestBody;\n let contentType;\n\n if (field.closest('.shipping-fee-tiered-rate-tier--row')) {\n // This is a tier field - send only this field's data\n const tierRow = field.closest('.shipping-fee-tiered-rate-tier--row');\n const tierIndex = this.getTierIndex(tierRow);\n const fieldName = field.name;\n\n // Build minimal JSON payload for just this field\n const payload = {\n shipping_rate: {\n shipping_fee_tiered_rate_tiers_attributes: {\n [tierIndex]: {\n [fieldName.split('[').pop().replace(']', '')]: newValue,\n },\n },\n },\n };\n\n // Include the tier ID if it exists\n const idField = tierRow.querySelector('input[name*=\"[id]\"]');\n if (idField && idField.value) {\n payload.shipping_rate.shipping_fee_tiered_rate_tiers_attributes[tierIndex].id = idField.value;\n }\n\n requestBody = JSON.stringify(payload);\n contentType = 'application/json';\n\n } else {\n // This is a top-level field (like name) - send as form data\n const formData = new FormData();\n formData.append(field.name, newValue);\n formData.append('from_modal', 'true');\n\n requestBody = formData;\n contentType = null; // Let browser set the content-type for FormData\n\n }\n\n // Update the old value to prevent duplicate saves\n this.oldValues[fieldKey] = newValue;\n\n const headers = {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Accept': 'application/json',\n };\n\n if (contentType) {\n headers['Content-Type'] = contentType;\n }\n\n const response = await fetch(form.action, {\n method: 'PATCH',\n headers: headers,\n body: requestBody,\n });\n\n if (response.ok) {\n const data = await response.json();\n if (data.success) {\n // Check if server silently rejected changes (temporarily disabled - see issue #10)\n // The silent failure detection is too aggressive and flags valid tier ranges as overlaps\n // TODO: Fix the tier matching logic in detectSilentFailures method\n\n // if (data.shipping_rate && data.shipping_rate.tiers) {\n // const serverTiers = data.shipping_rate.tiers;\n // const silentFailures = this.detectSilentFailures(submittedTiers, serverTiers);\n //\n // if (silentFailures.length > 0) {\n // // Revert field values and show validation error\n // this.revertFailedFields(silentFailures);\n // const errorMessage = this.formatValidationErrors(silentFailures);\n // throw new Error(errorMessage);\n // }\n // }\n\n // Genuine success - show feedback following established autosave pattern\n this.showFieldSavedFeedback(field);\n this.showSaveNotification('Saved');\n } else {\n // Server validation failure with success: false\n let errorMessage = 'Validation failed';\n if (data.errors && Array.isArray(data.errors)) {\n errorMessage = data.errors.join(', ');\n } else if (data.errors && typeof data.errors === 'object') {\n // Handle Rails validation errors format: { field: [\"error1\", \"error2\"] }\n const errorMessages = [];\n Object.keys(data.errors).forEach(field => {\n const fieldErrors = Array.isArray(data.errors[field]) ? data.errors[field] : [data.errors[field]];\n fieldErrors.forEach(error => {\n errorMessages.push(`${field}: ${error}`);\n });\n });\n errorMessage = errorMessages.join(', ');\n } else if (data.message) {\n errorMessage = data.message;\n }\n throw new Error(errorMessage);\n }\n } else if (response.status === 422) {\n // Validation error (Unprocessable Entity)\n const data = await response.json();\n const errorMessage = data.errors ? data.errors.join(', ') : 'Validation failed';\n throw new Error(errorMessage);\n } else {\n // Network/server error\n throw new Error('Network error occurred');\n }\n } catch (error) {\n // Revert the old value since save failed\n this.oldValues[fieldKey] = this.oldValues[fieldKey] !== newValue ? this.oldValues[fieldKey] : '';\n\n // Show the actual server validation error\n if (window.App && window.App.showErrorFlash) {\n // For editing existing tiers, this is likely a Rails validation issue where\n // the uniqueness validation doesn't exclude the current record\n if (error.message.includes('has already been taken')) {\n window.App.showErrorFlash('These tier ranges already exist. This appears to be a server-side validation issue when editing existing tiers.');\n } else {\n window.App.showErrorFlash(`Server error: ${error.message}`);\n }\n }\n } finally {\n this.autosaveInProgress = false;\n }\n }\n\n validateForm() {\n const submitButton = this.element.querySelector('button[type=\"submit\"]');\n\n if (this.element.checkValidity()) {\n submitButton.disabled = false;\n submitButton.classList.remove('ae-btn-disabled');\n } else {\n submitButton.disabled = true;\n submitButton.classList.add('ae-btn-disabled');\n }\n }\n\n // Handle form submission with debounce\n submitForm(event) {\n event.preventDefault();\n\n // Debounce: prevent multiple rapid submissions\n const now = Date.now();\n const timeSinceLastSave = now - this.lastSaveTime;\n const DEBOUNCE_TIME = 1000; // 1 second debounce\n\n if (this.saveInProgress) {\n // Save already in progress - ignore this click\n return;\n }\n\n if (timeSinceLastSave < DEBOUNCE_TIME) {\n // Too soon since last save attempt - ignore\n return;\n }\n\n this.lastSaveTime = now;\n this.saveInProgress = true;\n\n // Get the form - either from currentTarget (if form submit) or find it (if button click)\n let form = event.currentTarget;\n if (form.tagName !== 'FORM') {\n form = this.element; // this.element IS the form\n }\n\n // Remove new tiers marked for deletion before form submission\n const rowsMarkedForRemoval = form.querySelectorAll('[data-mark-for-removal=\"true\"]');\n rowsMarkedForRemoval.forEach(row => {\n row.remove();\n });\n\n const formData = new FormData(form);\n\n // Validate form before submission\n if (!form.checkValidity()) {\n this.showValidationErrors(form);\n this.saveInProgress = false; // Reset save state\n return;\n }\n\n this.updateShippingRate(form, formData);\n }\n\n // Update shipping rate\n updateShippingRate(form, formData) {\n const url = form.action;\n\n // Show loading state\n this.setLoadingState(true);\n\n\n fetch(url, {\n method: 'PATCH',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Accept': 'application/json',\n },\n body: formData,\n })\n .then(response => {\n if (!response.ok) {\n return response.json().then(data => {\n // Use the same error parsing logic as autosave\n let errorMessage = 'Failed to update shipping rate';\n if (data.errors && Array.isArray(data.errors)) {\n errorMessage = data.errors.join(', ');\n } else if (data.errors && typeof data.errors === 'object') {\n const errorMessages = [];\n Object.keys(data.errors).forEach(field => {\n const fieldErrors = Array.isArray(data.errors[field]) ? data.errors[field] : [data.errors[field]];\n fieldErrors.forEach(error => {\n errorMessages.push(`${field}: ${error}`);\n });\n });\n errorMessage = errorMessages.join(', ');\n } else if (data.message) {\n errorMessage = data.message;\n }\n throw new Error(errorMessage);\n });\n }\n return response.json();\n })\n .then(data => {\n if (data.success) {\n this.handleUpdateSuccess(data);\n } else {\n // Same error parsing logic\n let errorMessage = 'Failed to update shipping rate';\n if (data.errors && Array.isArray(data.errors)) {\n errorMessage = data.errors.join(', ');\n } else if (data.errors && typeof data.errors === 'object') {\n const errorMessages = [];\n Object.keys(data.errors).forEach(field => {\n const fieldErrors = Array.isArray(data.errors[field]) ? data.errors[field] : [data.errors[field]];\n fieldErrors.forEach(error => {\n errorMessages.push(`${field}: ${error}`);\n });\n });\n errorMessage = errorMessages.join(', ');\n } else if (data.message) {\n errorMessage = data.message;\n }\n throw new Error(errorMessage);\n }\n })\n .catch(error => {\n // Use App flash system instead of showErrorMessage\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash(`Failed to save: ${error.message}`);\n } else {\n this.showErrorMessage(error.message);\n }\n })\n .finally(() => {\n this.setLoadingState(false);\n this.saveInProgress = false; // Reset save state when operation completes\n });\n }\n\n // Handle successful rate update\n handleUpdateSuccess(data) {\n // Use App flash system for consistent notifications\n if (window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash(data.message || 'Shipping rate updated successfully');\n } else {\n this.showSuccessMessage(data.message || 'Shipping rate updated successfully');\n }\n\n // Hide the form and refresh the table\n this.hideForm();\n this.refreshRatesDisplay();\n }\n\n // Add new tier row\n addRow(event) {\n event.preventDefault();\n\n // Find tbody - try multiple selectors to be robust\n let tbody = this.element.querySelector('.shipping-fee-tiered-rate-tier tbody');\n if (!tbody) {\n tbody = this.element.querySelector('tbody');\n }\n const addButton = event.currentTarget.closest('tr');\n\n if (tbody && addButton) {\n // Get the current highest index for the new row\n const currentHighestIndex = this.getHighestRowIndex();\n this.rowIndex = currentHighestIndex + 1;\n\n const newRowHtml = this.createNewTierRowHtml();\n addButton.insertAdjacentHTML('beforebegin', newRowHtml);\n\n // Set up autosave listeners for the new row\n const newRow = tbody.querySelector(`[data-index=\"${this.rowIndex}\"]`);\n if (newRow) {\n const newFields = newRow.querySelectorAll('input[type=\"text\"], input[type=\"checkbox\"], select');\n newFields.forEach(field => {\n field.addEventListener('focus', this.boundFocusHandler);\n field.addEventListener('blur', this.boundBlurHandler);\n });\n\n // Set up manual fallback for the new delete button (modal-safe)\n const deleteButton = newRow.querySelector('[data-action*=\"deleteRow\"]');\n if (deleteButton && this.boundDeleteRowHandler) {\n deleteButton.addEventListener('click', this.boundDeleteRowHandler);\n }\n\n // Focus on the first input of the new row\n const firstInput = newRow.querySelector('input[type=\"text\"]');\n if (firstInput) firstInput.focus();\n }\n\n // Increment rowIndex for next addition\n this.rowIndex++;\n }\n }\n\n // Delete tier row\n deleteRow(event) {\n\n // CRITICAL: Prevent duplicate execution\n if (this.deleteInProgress) {\n return;\n }\n\n this.deleteInProgress = true;\n\n event.preventDefault();\n event.stopPropagation(); // Prevent event bubbling\n\n const row = event.currentTarget.closest('tr');\n if (!row) {\n this.deleteInProgress = false;\n return;\n }\n\n const tbody = row.closest('tbody');\n if (!tbody) {\n this.deleteInProgress = false;\n return;\n }\n\n // Check if this is a persisted tier (has ID input)\n const idInput = row.querySelector('input[name*=\"[id]\"]');\n\n if (idInput && idInput.value) {\n\n // This is a persisted tier - ask for confirmation\n const confirmed = confirm('Delete this tier? You must click \"Save Changes\" to finalize the deletion.');\n\n if (!confirmed) {\n this.deleteInProgress = false;\n return;\n }\n\n // Mark for destruction\n const tierIndex = this.getTierIndex(row);\n\n let destroyField = this.element.querySelector(`input[name*=\"[${tierIndex}][_destroy]\"]`);\n\n if (!destroyField) {\n // Create _destroy field if it doesn't exist\n destroyField = document.createElement('input');\n destroyField.type = 'hidden';\n destroyField.name = idInput.name.replace('[id]', '[_destroy]');\n tbody.appendChild(destroyField);\n }\n\n destroyField.value = 'true';\n\n // Add visual feedback\n this.markRowForDeletion(row);\n\n // Reset the flag after successful marking for deletion\n this.deleteInProgress = false;\n } else {\n\n // This is a new (unsaved) tier\n // Check if this is the last remaining tier row\n const allTierRows = tbody.querySelectorAll('.shipping-fee-tiered-rate-tier--row');\n\n if (allTierRows.length === 1) {\n // Don't delete the last tier - just clear its input values\n const inputs = row.querySelectorAll('input[type=\"text\"]');\n inputs.forEach(input => {\n input.value = '';\n });\n this.deleteInProgress = false;\n return;\n }\n\n // Multiple tiers exist - confirm before marking for deletion\n const confirmed = confirm('Delete this tier? You must click \"Save Changes\" to finalize the deletion.');\n\n if (!confirmed) {\n this.deleteInProgress = false;\n return;\n }\n\n // Mark the new tier for deletion instead of removing immediately\n // This provides consistent behavior with persisted tiers\n this.markRowForDeletion(row);\n\n // Add a data attribute to track that this new row should be removed on save\n row.setAttribute('data-mark-for-removal', 'true');\n }\n\n // Reset the flag when method completes successfully\n this.deleteInProgress = false;\n }\n\n // Mark a row for deletion with visual feedback\n markRowForDeletion(row) {\n // IMPORTANT: Ensure the row stays visible\n row.style.display = 'table-row';\n\n // Add visual styling to show it's marked for deletion\n row.style.opacity = '0.6';\n row.style.backgroundColor = '#FFF5F5';\n row.style.border = '2px dashed #E74C3C';\n\n // Add a \"marked for deletion\" indicator\n const deletionIndicator = document.createElement('div');\n deletionIndicator.textContent = '\uD83D\uDDD1\uFE0F Marked for deletion - click \"Save Changes\" to finalize';\n deletionIndicator.style.cssText = `\n color: #E74C3C;\n font-size: 12px;\n font-weight: bold;\n padding: 6px 12px;\n background-color: #FFF5F5;\n border: 1px solid #E74C3C;\n border-radius: 4px;\n margin-top: 6px;\n text-align: center;\n display: block;\n `;\n deletionIndicator.setAttribute('data-deletion-indicator', 'true');\n\n // Add the indicator to the first cell, making it span across if needed\n const firstCell = row.querySelector('td');\n if (firstCell) {\n firstCell.appendChild(deletionIndicator);\n }\n\n // Disable all inputs in the row except hidden ones\n const inputs = row.querySelectorAll('input, select');\n inputs.forEach(input => {\n if (input.type !== 'hidden') {\n input.disabled = true;\n input.style.backgroundColor = '#F5F5F5';\n }\n });\n\n // Add a class to identify marked rows\n row.classList.add('tier-marked-for-deletion');\n }\n\n // Create HTML for new tier row\n // Note: New rows (index > 0) get delete buttons; first tier (index 0) has no delete button per template logic\n createNewTierRowHtml() {\n const namePrefix = 'shipping_rate[shipping_fee_tiered_rate_tiers_attributes]';\n const index = this.rowIndex;\n\n return `\n
\n \n \n \n - \n \n \n \n \n \n \n + \n \n \n \n \n sale-settings-shipping-rates--tiered-form#deleteRow\" \n title=\"Remove\">\n \n \n \n `;\n }\n\n // Get highest existing row index\n getHighestRowIndex() {\n const rows = this.element.querySelectorAll('.shipping-fee-tiered-rate-tier--row[data-index]');\n let maxIndex = -1;\n\n rows.forEach(row => {\n const index = parseInt(row.dataset.index, 10);\n if (!isNaN(index) && index > maxIndex) {\n maxIndex = index;\n }\n });\n\n return maxIndex;\n }\n\n // Get tier index from row data attribute or field names\n getTierIndex(row) {\n // Return 0 if row is null or undefined\n if (!row) {\n return 0;\n }\n\n // First try data-index attribute\n if (row.dataset && row.dataset.index !== undefined) {\n return parseInt(row.dataset.index, 10);\n }\n\n // Fallback: extract from input field names\n const input = row.querySelector('input[name*=\"[shipping_fee_tiered_rate_tiers_attributes]\"]');\n if (input) {\n const match = input.name.match(/\\[shipping_fee_tiered_rate_tiers_attributes\\]\\[(\\d+)\\]/);\n if (match) {\n return parseInt(match[1], 10);\n }\n }\n\n return 0;\n }\n\n // Reorder tier indices after deletion\n reorderTierIndices(tbody) {\n const tierRows = Array.from(tbody.querySelectorAll('.shipping-fee-tiered-rate-tier--row'));\n let currentIndex = 0;\n\n tierRows.forEach(row => {\n // Skip hidden (destroyed) rows\n if (row.style.display === 'none') return;\n\n // Update data-index attribute\n row.dataset.index = currentIndex;\n\n // Update all input field names and IDs within this row\n row.querySelectorAll('input').forEach(input => {\n const oldName = input.getAttribute('name');\n const oldId = input.getAttribute('id');\n\n if (oldName && oldName.includes('shipping_fee_tiered_rate_tiers_attributes')) {\n // Update name attribute: [shipping_fee_tiered_rate_tiers_attributes][old_index] -> [new_index]\n const newName = oldName.replace(\n /\\[shipping_fee_tiered_rate_tiers_attributes\\]\\[\\d+\\]/,\n `[shipping_fee_tiered_rate_tiers_attributes][${currentIndex}]`,\n );\n input.setAttribute('name', newName);\n }\n\n if (oldId && oldId.includes('shipping-fee-tiered-rate-tier--')) {\n // Update id attribute: shipping-fee-tiered-rate-tier--old_index-- -> new_index--\n const newId = oldId.replace(\n /shipping-fee-tiered-rate-tier--\\d+--/,\n `shipping-fee-tiered-rate-tier--${currentIndex}--`,\n );\n input.setAttribute('id', newId);\n }\n });\n\n currentIndex++;\n });\n }\n\n // Cancel editing\n cancel(event) {\n if (event) {\n event.preventDefault();\n }\n this.hideForm();\n }\n\n // Hide the form (trigger slide down)\n hideForm() {\n // Simple approach: find and click the X button that already works\n const closeButton = document.querySelector('.ae-popup .mfp-close');\n if (closeButton) {\n closeButton.click();\n return;\n }\n\n // Fallback: dispatch event to parent controller\n const event = new CustomEvent('form:hide', { bubbles: true });\n this.element.dispatchEvent(event);\n }\n\n // Refresh rates display\n refreshRatesDisplay() {\n // Dispatch event to refresh the rates interface\n const event = new CustomEvent('shipping-rates:updated', {\n detail: { rateType: 'tiered' },\n });\n document.dispatchEvent(event);\n }\n\n // Show validation errors\n showValidationErrors(form) {\n const invalidInputs = form.querySelectorAll(':invalid');\n\n invalidInputs.forEach(input => {\n const fieldContainer = input.closest('.ae-form-field');\n if (fieldContainer) {\n fieldContainer.classList.add('ae-form-field-error');\n\n // Remove error class after user starts typing\n input.addEventListener('input', () => {\n fieldContainer.classList.remove('ae-form-field-error');\n }, { once: true });\n }\n });\n }\n\n // Set loading state\n setLoadingState(loading) {\n const submitButton = this.element.querySelector('button[type=\"submit\"], input[type=\"submit\"]');\n const cancelButton = this.element.querySelector('.ae-btn-border');\n\n if (submitButton) {\n if (loading) {\n submitButton.disabled = true;\n if (submitButton.tagName === 'BUTTON') {\n submitButton.innerHTML = '
Saving...';\n } else {\n submitButton.value = 'Saving...';\n }\n if (cancelButton) cancelButton.disabled = true;\n } else {\n submitButton.disabled = false;\n if (submitButton.tagName === 'BUTTON') {\n submitButton.innerHTML = 'Save Changes';\n } else {\n submitButton.value = 'Save Changes';\n }\n if (cancelButton) cancelButton.disabled = false;\n }\n }\n }\n\n // Capture submitted tier values for comparison\n captureSubmittedTierValues(form) {\n const tiers = [];\n const tierFields = form.querySelectorAll('[name*=\"[shipping_fee_tiered_rate_tiers_attributes]\"]');\n\n // Group fields by tier index\n const tiersByIndex = {};\n tierFields.forEach(field => {\n const match = field.name.match(/\\[shipping_fee_tiered_rate_tiers_attributes\\]\\[(\\d+)\\]\\[(.+?)\\]/);\n if (match) {\n const index = match[1];\n const attribute = match[2];\n\n if (!tiersByIndex[index]) {\n tiersByIndex[index] = { index };\n }\n\n tiersByIndex[index][attribute] = field.value;\n }\n });\n\n // Convert to array and include only relevant tier data\n Object.values(tiersByIndex).forEach(tier => {\n if (tier._destroy !== 'true') {\n tiers.push({\n id: tier.id || null,\n cart_total_min: parseFloat(tier.cart_total_min) || 0,\n cart_total_max: parseFloat(tier.cart_total_max) || 0,\n base_rate: parseFloat(tier.base_rate) || 0,\n additional_percentage: parseFloat(tier.additional_percentage) || 0,\n });\n }\n });\n\n return tiers;\n }\n\n // Detect silent failures by comparing submitted vs server values\n detectSilentFailures(submittedTiers, serverTiers) {\n const failures = [];\n\n submittedTiers.forEach((submitted, index) => {\n const server = serverTiers.find(t => t.id === submitted.id) || serverTiers[index];\n\n if (server) {\n // Check for discrepancies in key fields\n if (Math.abs(submitted.cart_total_min - (server.cart_total_min || 0)) > 0.01) {\n failures.push({\n field: 'cart_total_min',\n submitted: submitted.cart_total_min,\n server: server.cart_total_min || 0,\n tier_id: server.id,\n message: 'Cart minimum amount was rejected (possible overlap)',\n });\n }\n\n if (Math.abs(submitted.cart_total_max - (server.cart_total_max || 0)) > 0.01) {\n failures.push({\n field: 'cart_total_max',\n submitted: submitted.cart_total_max,\n server: server.cart_total_max || 0,\n tier_id: server.id,\n message: 'Cart maximum amount was rejected (possible overlap)',\n });\n }\n\n if (Math.abs(submitted.base_rate - (server.base_rate || 0)) > 0.01) {\n failures.push({\n field: 'base_rate',\n submitted: submitted.base_rate,\n server: server.base_rate || 0,\n tier_id: server.id,\n message: 'Base rate was rejected',\n });\n }\n\n if (Math.abs(submitted.additional_percentage - (server.additional_percentage || 0)) > 0.01) {\n failures.push({\n field: 'additional_percentage',\n submitted: submitted.additional_percentage,\n server: server.additional_percentage || 0,\n tier_id: server.id,\n message: 'Additional percentage was rejected',\n });\n }\n }\n });\n\n return failures;\n }\n\n // Revert failed fields to server values\n revertFailedFields(failures) {\n failures.forEach(failure => {\n // Find the specific tier field that failed\n let field = null;\n\n if (failure.tier_id) {\n // Look for field by tier ID first\n field = this.element.querySelector(`[name*=\"[${failure.tier_id}][${failure.field}]\"]`);\n }\n\n // If not found by ID, try by field name pattern\n if (!field) {\n const fieldSelector = `[name*=\"[${failure.field}]\"]`;\n const fields = this.element.querySelectorAll(fieldSelector);\n\n // If multiple fields with same name, find the one that matches submitted value\n if (fields.length > 1) {\n field = Array.from(fields).find(f =>\n Math.abs(parseFloat(f.value) - failure.submitted) < 0.01,\n );\n } else if (fields.length === 1) {\n field = fields[0];\n }\n }\n\n if (field) {\n // Revert to server value\n const serverValue = failure.server || 0;\n field.value = typeof serverValue === 'number' ? serverValue.toFixed(2) : serverValue;\n\n // Update stored old value to prevent re-triggering\n const fieldKey = this.getFieldKey(field);\n this.oldValues[fieldKey] = typeof serverValue === 'number' ? serverValue.toFixed(2) : serverValue;\n\n // Add visual feedback - highlight the field temporarily\n field.classList.add('ae-form-field-error');\n const fieldContainer = field.closest('.ae-form-field');\n if (fieldContainer) {\n fieldContainer.classList.add('ae-form-field-error');\n }\n\n // Remove error styling after delay\n setTimeout(() => {\n field.classList.remove('ae-form-field-error');\n if (fieldContainer) {\n fieldContainer.classList.remove('ae-form-field-error');\n }\n }, 3000);\n }\n });\n }\n\n // Format validation errors for user display\n formatValidationErrors(failures) {\n if (failures.length === 1) {\n return failures[0].message;\n }\n\n const messages = failures.map(f => f.message);\n return `Multiple validation errors: ${messages.join(', ')}`;\n }\n\n // Helper methods\n getCSRFToken() {\n const token = document.querySelector('meta[name=\"csrf-token\"]');\n return token ? token.getAttribute('content') : '';\n }\n\n formatCurrency(value) {\n const numericValue = parseFloat(value);\n return !isNaN(numericValue) ? numericValue.toFixed(2) : value;\n }\n\n showErrorMessage(message) {\n const errorDiv = document.createElement('div');\n errorDiv.className = 'ae-alert ae-alert-danger';\n errorDiv.textContent = message;\n errorDiv.style.cssText = 'position:fixed;top:20px;right:20px;z-index:9999';\n document.body.appendChild(errorDiv);\n\n setTimeout(() => {\n if (errorDiv.parentNode) {\n errorDiv.remove();\n }\n }, 5000);\n }\n\n showSuccessMessage(message) {\n const successDiv = document.createElement('div');\n successDiv.className = 'ae-alert ae-alert-success';\n successDiv.textContent = message;\n successDiv.style.cssText = 'position:fixed;top:20px;right:20px;z-index:9999';\n document.body.appendChild(successDiv);\n\n setTimeout(() => {\n if (successDiv.parentNode) {\n successDiv.remove();\n }\n }, 3000);\n }\n\n showFieldSavedFeedback(field) {\n // Create a \"Saved\" indicator next to the field - following established pattern\n const savedIndicator = document.createElement('span');\n savedIndicator.textContent = '\u2713 Saved';\n savedIndicator.style.cssText = `\n color: #4CAF50;\n font-size: 12px;\n margin-left: 8px;\n font-weight: bold;\n animation: fadeIn 0.3s ease;\n position: absolute;\n z-index: 1000;\n `;\n\n // Find the best container - look for the form field container (.ae-form-field)\n let container = field.closest('.ae-form-field');\n if (!container) {\n // Fallback to table cell if we're in a table\n container = field.closest('td');\n }\n if (!container) {\n // Final fallback to field's parent\n container = field.parentElement;\n }\n\n if (container) {\n // Position relative to the container\n savedIndicator.style.position = 'relative';\n savedIndicator.style.display = 'inline-block';\n container.appendChild(savedIndicator);\n }\n\n // Remove the indicator after 2 seconds\n setTimeout(() => {\n savedIndicator.style.opacity = '0';\n savedIndicator.style.transition = 'opacity 0.3s ease';\n setTimeout(() => savedIndicator.remove(), 300);\n }, 2000);\n }\n\n showSaveNotification(message) {\n if (window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash(message);\n }\n }\n\n showNewTierFeedback(field) {\n // Show a simple indicator that this is a new tier (use manual save)\n const indicator = document.createElement('span');\n indicator.textContent = 'New tier - use Save Changes';\n indicator.style.cssText = `\n color: #4CAF50;\n font-size: 12px;\n font-weight: bold;\n margin-left: 8px;\n `;\n\n // Find the best container\n let container = field.closest('.ae-form-field');\n if (!container) {\n container = field.closest('td');\n }\n if (!container) {\n container = field.parentElement;\n }\n\n // Remove any existing feedback in this container\n const existingFeedback = container.querySelector('[data-feedback=\"new-tier\"]');\n if (existingFeedback) {\n existingFeedback.remove();\n }\n\n if (container) {\n indicator.setAttribute('data-feedback', 'new-tier');\n container.appendChild(indicator);\n\n // Remove after 3 seconds\n setTimeout(() => {\n if (indicator.parentNode) {\n indicator.style.opacity = '0';\n indicator.style.transition = 'opacity 0.3s ease';\n setTimeout(() => indicator.remove(), 300);\n }\n }, 3000);\n }\n }\n\n}\n\n", "import { Controller } from '../stimulus';\nimport NotificationMixin from '../mixins/notification_mixin';\n\nexport default class extends Controller {\n static targets = ['table', 'row'];\n\n connect() {\n // Apply NotificationMixin\n Object.assign(this, NotificationMixin);\n\n // Initialize table functionality\n this.setupTableEvents();\n\n // Listen for tier deletion events from modal\n this.boundTierDeletedHandler = this.handleTierDeletedFromModal.bind(this);\n document.addEventListener('tier:deleted', this.boundTierDeletedHandler);\n\n // Listen for form hide events to close edit modal\n this.boundFormHideHandler = this.handleFormHide.bind(this);\n document.addEventListener('form:hide', this.boundFormHideHandler);\n\n // Setup fallback handlers for cases where Stimulus actions don't bind\n this.setupDirectEventHandlers();\n }\n\n setupDirectEventHandlers() {\n // Note: Delete buttons now handled by consolidated shipping_rates_table_controller\n // This method is kept for other potential future handlers\n }\n\n // Note: handleDeleteClick removed - delete handling moved to consolidated controller\n\n disconnect() {\n // Clean up tier deletion event listener\n if (this.boundTierDeletedHandler) {\n document.removeEventListener('tier:deleted', this.boundTierDeletedHandler);\n }\n\n // Clean up form hide event listener\n if (this.boundFormHideHandler) {\n document.removeEventListener('form:hide', this.boundFormHideHandler);\n }\n }\n\n setupTableEvents() {\n // Setup any table-specific event handlers\n this.element.addEventListener('shipping-rates:created', this.handleRateCreated.bind(this));\n this.element.addEventListener('shipping-rates:updated', this.handleRateUpdated.bind(this));\n this.element.addEventListener('shipping-rates:deleted', this.handleRateDeleted.bind(this));\n }\n\n // Toggle rate active status - now handled by unified toggle controller\n toggleActive(_event) {\n // This method is no longer used - toggle is handled by unified toggle controller\n }\n\n // Toggle rate taxable status\n toggleTaxable(event) {\n const rateId = this.getRateIdFromRow(event.currentTarget);\n const isTaxable = event.currentTarget.checked;\n\n this.updateRateAttribute(rateId, 'taxable', isTaxable);\n }\n\n // Toggle rate collect_address status\n toggleCollectAddress(event) {\n const rateId = this.getRateIdFromRow(event.currentTarget);\n const collectsAddress = event.currentTarget.checked;\n\n this.updateRateAttribute(rateId, 'collect_address', collectsAddress);\n }\n\n\n // Update rate attribute (active, taxable, collect_address)\n updateRateAttribute(rateId, attribute, value) {\n const shippingMethodId = this.element.dataset.shippingMethodId;\n const url = `/teamsites/${this.getSaleId()}/settings/shipping_methods/${shippingMethodId}/shipping_rates/${rateId}`;\n\n const requestBody = {\n shipping_rate: {},\n };\n requestBody.shipping_rate[attribute] = value;\n\n fetch(url, {\n method: 'PATCH',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Content-Type': 'application/json',\n 'Accept': 'application/json',\n },\n body: JSON.stringify(requestBody),\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n return response.json();\n })\n .then(data => {\n if (data.success) {\n this.updateRowDisplay(rateId, attribute, value);\n this.showNotification(data.message || `Rate ${attribute} updated successfully`, 'success', { duration: 3000 });\n } else {\n throw new Error(data.errors ? data.errors.join(', ') : `Failed to update rate ${attribute}`);\n }\n })\n .catch(_error => {\n // Use primary notification for critical update failures\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash(`Failed to update rate ${attribute}`);\n } else {\n this.showNotification(`Failed to update rate ${attribute}`, 'error', { duration: 5000 });\n }\n });\n }\n\n // Note: deleteRate method removed - delete handling moved to consolidated controller\n\n // Clone tiered rate\n clone(event) {\n event.preventDefault();\n\n const rateId = this.getRateIdFromRow(event.currentTarget);\n const rateName = this.getRateNameFromRow(event.currentTarget) || 'this rate';\n\n if (!window.confirm(`Are you sure you want to clone ${rateName}?`)) {\n return;\n }\n\n const url = `/teamsites/${this.getSaleId()}/settings/shipping_methods/${this.element.dataset.shippingMethodId}/shipping_rates/${rateId}/clone`;\n\n fetch(url, {\n method: 'POST',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Accept': 'application/json',\n },\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n return response.json();\n })\n .then(data => {\n if (data.success) {\n if (window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash(data.message || 'Rate cloned successfully');\n } else {\n this.showNotification(data.message || 'Rate cloned successfully', 'success', { duration: 3000 });\n }\n this.refreshTable();\n } else {\n throw new Error(data.errors ? data.errors.join(', ') : 'Failed to clone rate');\n }\n })\n .catch(_error => {\n // Use primary notification for critical clone failures\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Failed to clone rate');\n } else {\n this.showNotification('Failed to clone rate', 'error', { duration: 5000 });\n }\n });\n }\n\n // Edit tiered rate\n edit(event) {\n event.preventDefault();\n\n // First, hide the free rates table if it exists\n const freeRatesTable = document.querySelector('#free-rate-table-container');\n if (freeRatesTable) {\n freeRatesTable.style.display = 'none';\n }\n\n const rateId = event.currentTarget.dataset.id;\n const shippingMethodId = event.currentTarget.dataset.shippingMethodId;\n\n const url = `/teamsites/${this.getSaleId()}/settings/shipping_methods/${shippingMethodId}/shipping_rates/${rateId}/edit`;\n\n fetch(url, {\n method: 'GET',\n headers: {\n 'Accept': 'text/html',\n 'X-CSRF-Token': this.getCSRFToken(),\n },\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n return response.text();\n })\n .then(html => {\n this.displayEditModal(html);\n })\n .catch(_error => {\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Failed to load rate edit interface');\n } else {\n this.showNotification('Failed to load rate edit interface', 'error', { duration: 5000 });\n }\n });\n }\n\n // Display edit modal\n displayEditModal(html) {\n const modal = document.createElement('div');\n modal.className = 'ae-popup ae-popup-md ae-visible-scrollbars mfp-content';\n modal.innerHTML = `\n \n \n `;\n\n document.body.appendChild(modal);\n this.currentEditModal = modal;\n }\n\n // Close edit modal\n closeEditModal() {\n if (this.currentEditModal) {\n this.currentEditModal.remove();\n this.currentEditModal = null;\n }\n }\n\n // Back to rates view from edit modal\n backToRates() {\n this.closeEditModal();\n\n // Show the free rates table again\n const freeRatesTable = document.querySelector('#free-rate-table-container');\n if (freeRatesTable) {\n freeRatesTable.style.display = 'block';\n }\n }\n\n // Show tiered rate details modal\n showDetails(event) {\n event.preventDefault();\n\n const rateId = this.getRateIdFromRow(event.currentTarget);\n const url = `/teamsites/${this.getSaleId()}/settings/shipping_methods/${this.element.dataset.shippingMethodId}/shipping_rates/${rateId}`;\n\n fetch(url, {\n method: 'GET',\n headers: {\n 'Accept': 'text/html',\n 'X-CSRF-Token': this.getCSRFToken(),\n },\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n return response.text();\n })\n .then(html => {\n this.displayDetailsModal(html);\n })\n .catch(_error => {\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Failed to load rate details');\n } else {\n this.showNotification('Failed to load rate details', 'error', { duration: 5000 });\n }\n });\n }\n\n // Display tiered rate details in modal\n displayDetailsModal(html) {\n const modal = document.createElement('div');\n modal.className = 'ae-popup ae-popup-md ae-visible-scrollbars mfp-content';\n modal.innerHTML = `\n \n \n `;\n\n document.body.appendChild(modal);\n this.currentDetailsModal = modal;\n }\n\n // Close details modal\n closeDetailsModal() {\n if (this.currentDetailsModal) {\n this.currentDetailsModal.remove();\n this.currentDetailsModal = null;\n }\n }\n\n // Update row display for different attributes\n updateRowDisplay(rateId, attribute, value) {\n // Search globally for the rate row since each tiered rate is in a separate table\n const row = document.querySelector(`[data-rate-id=\"${rateId}\"]`);\n if (!row) return;\n\n if (attribute === 'active') {\n const activeCheckbox = row.querySelector('[data-action*=\"toggleActive\"]');\n if (activeCheckbox) {\n activeCheckbox.checked = value;\n activeCheckbox.dataset.active = value.toString();\n }\n } else if (attribute === 'taxable') {\n const taxableCheckbox = row.querySelector('[data-action*=\"toggleTaxable\"]');\n if (taxableCheckbox) {\n taxableCheckbox.checked = value;\n taxableCheckbox.dataset.taxable = value.toString();\n }\n } else if (attribute === 'collect_address') {\n const collectCheckbox = row.querySelector('[data-action*=\"toggleCollectAddress\"]');\n if (collectCheckbox) {\n collectCheckbox.checked = value;\n collectCheckbox.dataset.collectAddress = value.toString();\n }\n }\n }\n\n // Get rate ID from table row\n getRateIdFromRow(element) {\n // First check if element has data-id directly\n if (element.dataset.id) {\n return element.dataset.id;\n }\n\n // Otherwise look for parent row with data-rate-id\n const row = element.closest('[data-rate-id]');\n return row ? row.dataset.rateId : null;\n }\n\n // Get rate name from table row\n getRateNameFromRow(element) {\n // First try to get from button's data attribute\n if (element.dataset.rateName) {\n return element.dataset.rateName;\n }\n\n // Fallback to searching in the row\n const row = element.closest('[data-rate-id]');\n if (!row) return null;\n\n const nameElement = row.querySelector('.tiered-rate-name, [class*=\"tiered-rate-\"][class*=\"-name\"]');\n return nameElement ? nameElement.textContent.trim() : null;\n }\n\n // Remove rate row from table\n removeRateRow(rateId) {\n const row = this.element.querySelector(`[data-rate-id=\"${rateId}\"]`);\n if (row) {\n row.remove();\n }\n }\n\n // Check if table is empty and show appropriate message\n checkEmptyState() {\n const tbody = this.element.querySelector('tbody');\n const rows = tbody ? tbody.querySelectorAll('tr:not(.empty-state)') : [];\n\n if (rows.length === 0) {\n this.showEmptyState();\n }\n }\n\n // Show empty state message\n showEmptyState() {\n const tbody = this.element.querySelector('tbody');\n if (tbody) {\n tbody.innerHTML = `\n
\n \n \n \n `;\n }\n }\n\n // Event handlers for rate CRUD operations\n handleRateCreated(event) {\n if (event.detail.rateType === 'tiered') {\n this.refreshTable();\n }\n }\n\n handleRateUpdated(event) {\n if (event.detail.rateType === 'tiered') {\n this.refreshTable();\n }\n }\n\n handleRateDeleted(event) {\n if (event.detail.rateType === 'tiered') {\n this.removeRateRow(event.detail.rateId);\n this.checkEmptyState();\n }\n }\n\n // Handle tier deletion event from modal\n handleTierDeletedFromModal(event) {\n // Only refresh if this event is for the same shipping method\n if (event.detail.shippingMethodId === this.element.dataset.shippingMethodId) {\n this.refreshTable();\n }\n }\n\n // Handle form hide event to close edit modal\n handleFormHide(event) {\n // Close modal if we have one open\n if (this.currentEditModal) {\n this.closeEditModal();\n }\n }\n\n // Refresh table content\n refreshTable() {\n const url = `/teamsites/${this.getSaleId()}/settings/shipping_methods/${this.element.dataset.shippingMethodId}/shipping_rates`;\n\n fetch(url, {\n method: 'GET',\n headers: {\n 'Accept': 'text/html',\n 'X-CSRF-Token': this.getCSRFToken(),\n 'X-Requested-With': 'XMLHttpRequest',\n },\n })\n .then(response => response.text())\n .then(html => {\n // Extract just the tiered rates table content\n const parser = new DOMParser();\n const doc = parser.parseFromString(html, 'text/html');\n const tieredTable = doc.querySelector('[data-controller*=\"shipping-rates-tiered-table\"]');\n\n if (tieredTable) {\n // Replace innerHTML instead of outerHTML to preserve Stimulus controller connection\n this.element.innerHTML = tieredTable.innerHTML;\n\n // Note: No need to re-setup handlers - consolidated controller uses event delegation\n }\n })\n .catch(() => {\n // Silent fail - don't break the application\n });\n }\n\n // Note: Consolidated controller handles delete operations via event delegation\n\n // Helper methods\n getSaleId() {\n const pathParts = window.location.pathname.split('/');\n const teamsitesIndex = pathParts.indexOf('teamsites');\n return teamsitesIndex !== -1 ? pathParts[teamsitesIndex + 1] : null;\n }\n\n getCSRFToken() {\n const token = document.querySelector('meta[name=\"csrf-token\"]');\n return token ? token.getAttribute('content') : '';\n }\n\n // Fallback handlers for modal context where Stimulus may not connect reliably\n setupFallbackHandlers() {\n // Store bound handlers for cleanup\n this.boundHandlers = {\n toggleActive: this.toggleActive.bind(this),\n toggleCollectAddress: this.toggleCollectAddress.bind(this),\n clone: this.clone.bind(this),\n // deleteRate: handled by consolidated controller,\n edit: this.edit.bind(this),\n backToRates: this.backToRates.bind(this),\n };\n\n // Add event listeners directly to checkboxes and buttons\n const activeCheckboxes = this.element.querySelectorAll('input[data-action*=\"toggleActive\"]');\n activeCheckboxes.forEach(checkbox => {\n checkbox.addEventListener('change', this.boundHandlers.toggleActive);\n });\n\n const collectAddressCheckboxes = this.element.querySelectorAll('input[data-action*=\"toggleCollectAddress\"]');\n collectAddressCheckboxes.forEach(checkbox => {\n checkbox.addEventListener('change', this.boundHandlers.toggleCollectAddress);\n });\n\n const cloneButtons = this.element.querySelectorAll('button[data-action*=\"clone\"]');\n cloneButtons.forEach(button => {\n button.addEventListener('click', this.boundHandlers.clone);\n });\n\n // Note: Delete buttons now handled by consolidated shipping_rates_table_controller\n\n const editButtons = this.element.querySelectorAll('button[data-action*=\"edit\"]');\n editButtons.forEach(button => {\n button.addEventListener('click', this.boundHandlers.edit);\n });\n\n const backToRatesButtons = document.querySelectorAll('button[data-action*=\"backToRates\"]');\n backToRatesButtons.forEach(button => {\n button.addEventListener('click', this.boundHandlers.backToRates);\n });\n }\n\n cleanupFallbackHandlers() {\n if (!this.boundHandlers) return;\n\n // Remove event listeners\n const activeCheckboxes = this.element.querySelectorAll('input[data-action*=\"toggleActive\"]');\n activeCheckboxes.forEach(checkbox => {\n checkbox.removeEventListener('change', this.boundHandlers.toggleActive);\n });\n\n const collectAddressCheckboxes = this.element.querySelectorAll('input[data-action*=\"toggleCollectAddress\"]');\n collectAddressCheckboxes.forEach(checkbox => {\n checkbox.removeEventListener('change', this.boundHandlers.toggleCollectAddress);\n });\n\n const cloneButtons = this.element.querySelectorAll('button[data-action*=\"clone\"]');\n cloneButtons.forEach(button => {\n button.removeEventListener('click', this.boundHandlers.clone);\n });\n\n // Note: Delete buttons now handled by consolidated shipping_rates_table_controller\n\n const editButtons = this.element.querySelectorAll('button[data-action*=\"edit\"]');\n editButtons.forEach(button => {\n button.removeEventListener('click', this.boundHandlers.edit);\n });\n\n const backToRatesButtons = document.querySelectorAll('button[data-action*=\"backToRates\"]');\n backToRatesButtons.forEach(button => {\n button.removeEventListener('click', this.boundHandlers.backToRates);\n });\n\n this.boundHandlers = null;\n }\n\n // Update delete button state based on active status\n updateDeleteButtonState(rateId, isActive) {\n // Search globally for the rate row since each tiered rate is in a separate table\n const row = document.querySelector(`[data-rate-id=\"${rateId}\"]`);\n if (!row) return;\n\n const deleteButton = row.querySelector('.delete');\n if (!deleteButton) return;\n\n if (isActive) {\n deleteButton.disabled = true;\n deleteButton.title = 'Sorry, but you can\\'t delete a shipping rate that is in use. To delete a shipping rate, make the rate inactive.';\n } else {\n deleteButton.disabled = false;\n deleteButton.removeAttribute('title');\n }\n }\n\n}\n", "import { Controller } from '../stimulus';\nimport CSRFTokenMixin from '../mixins/csrf_token_mixin';\nimport StimulusReinitMixin from '../mixins/stimulus_reinit_mixin';\n\nexport default class extends Controller {\n static targets = ['content', 'tab'];\n\n initialize() {\n // Apply the CSRF token mixin\n Object.assign(this, CSRFTokenMixin);\n // Apply the Stimulus reinit mixin for dynamic content\n Object.assign(this, StimulusReinitMixin);\n\n this.saleId = this.element.dataset.saleId;\n this.loading = false;\n this.lastNavigationAttempt = null;\n this.errorTimeoutId = null;\n }\n\n connect() {\n // Handle browser back/forward navigation\n this.handlePopstate = this.handlePopstate.bind(this);\n window.addEventListener('popstate', this.handlePopstate);\n }\n\n disconnect() {\n // Clean up event listeners to prevent memory leaks\n window.removeEventListener('popstate', this.handlePopstate);\n\n // Clear any pending error timeouts\n if (this.errorTimeoutId) {\n clearTimeout(this.errorTimeoutId);\n this.errorTimeoutId = null;\n }\n\n // Clean up any remaining loading indicators\n this.removeLoadingIndicator();\n\n // Clean up any error messages\n this.removeErrorMessages();\n }\n\n async navigate(event) {\n event.preventDefault();\n\n // Prevent multiple simultaneous requests\n if (this.loading) {\n // Provide feedback that a request is already in progress\n this.showAlreadyLoadingFeedback();\n return;\n }\n\n const link = event.currentTarget;\n const subtab = link.dataset.subtab || '';\n const url = `/teamsites/${this.saleId}/settings/subtab_content`;\n\n // Store navigation attempt for retry functionality\n this.lastNavigationAttempt = {\n subtab,\n href: link.href,\n };\n\n // Store the current subtab for use in replaceContent\n this.currentNavigationSubtab = subtab;\n\n // Update active state immediately for better UX\n this.updateActiveTab(link);\n\n // Show loading state\n this.showLoadingState();\n this.loading = true;\n\n try {\n const finalUrl = subtab ? `${url}?st=${subtab}` : url;\n const response = await fetch(finalUrl, {\n method: 'GET',\n headers: this.getHeadersWithCSRF({\n 'Accept': 'text/html',\n 'X-Requested-With': 'XMLHttpRequest',\n }),\n credentials: 'same-origin',\n });\n\n if (response.ok) {\n const html = await response.text();\n this.replaceContent(html);\n\n // Update browser URL without triggering Turbolinks\n const newUrl = subtab\n ? `/teamsites/${this.saleId}/settings?st=${subtab}`\n : `/teamsites/${this.saleId}/settings`;\n\n // Only push state if we're not handling a popstate event\n if (!this.isHandlingPopstate) {\n window.history.pushState({\n turbolinks: false,\n subtab: subtab,\n isSubtabNavigation: true,\n }, '', newUrl);\n }\n this.isHandlingPopstate = false;\n } else {\n // Handle specific error cases with user feedback\n if (response.status === 400) {\n this.showUserError('Invalid navigation request. Redirecting to checkout settings...');\n // For invalid subtab, navigate to checkout tab instead\n const checkoutUrl = `/teamsites/${this.saleId}/settings`;\n setTimeout(() => this.fallbackNavigation(checkoutUrl), 1500);\n } else if (response.status === 404) {\n this.showUserError('Settings not found. Redirecting to sale page...');\n // For missing settings, navigate to sale page\n const saleUrl = `/teamsites/${this.saleId}`;\n setTimeout(() => this.fallbackNavigation(saleUrl), 1500);\n } else if (response.status === 403) {\n this.showUserError('Access denied. Please refresh the page or contact support.');\n // Don't navigate away for authorization errors\n } else if (response.status >= 500) {\n this.showUserError('Server error occurred. Please try again in a moment...', true);\n // Retry after a delay for server errors\n this.errorTimeoutId = setTimeout(() => this.fallbackNavigation(link.href), 3000);\n } else {\n this.showUserError('Failed to load content. Redirecting...');\n // Fallback to regular navigation for other errors\n setTimeout(() => this.fallbackNavigation(link.href), 1500);\n }\n }\n } catch (error) {\n // Provide specific feedback for different error types\n if (error.name === 'TypeError' && error.message.includes('fetch')) {\n this.showUserError('Network error. Please check your connection and try again...', true);\n this.errorTimeoutId = setTimeout(() => this.fallbackNavigation(link.href), 3000);\n } else if (error.name === 'AbortError') {\n this.showUserError('Request was cancelled. Please try again...', true);\n this.errorTimeoutId = setTimeout(() => this.fallbackNavigation(link.href), 3000);\n } else {\n this.showUserError('An unexpected error occurred. Redirecting...');\n setTimeout(() => this.fallbackNavigation(link.href), 1500);\n }\n } finally {\n // Clear loading state\n this.hideLoadingState();\n this.loading = false;\n }\n }\n\n updateActiveTab(clickedLink) {\n // Remove active class from all tabs\n this.tabTargets.forEach(tab => {\n tab.classList.remove('active-tab');\n });\n\n // Add active class to clicked tab's parent li\n const parentLi = clickedLink.closest('li');\n if (parentLi) {\n parentLi.classList.add('active-tab');\n }\n }\n\n replaceContent(html) {\n if (this.hasContentTarget) {\n // Store references to form elements that might need to maintain state\n const activeElement = document.activeElement;\n const activeElementId = activeElement ? activeElement.id : null;\n\n // Replace the content\n this.contentTarget.innerHTML = html;\n\n // Dispatch a custom event to notify that content has been replaced\n // This allows other controllers to react to the change if needed\n // Use the subtab that was requested in the navigation\n this.contentTarget.dispatchEvent(new CustomEvent('content:replaced', {\n bubbles: true,\n detail: { subtab: this.currentNavigationSubtab || '' },\n }));\n\n // Restore focus if the element still exists\n if (activeElementId) {\n const newActiveElement = document.getElementById(activeElementId);\n if (newActiveElement && typeof newActiveElement.focus === 'function') {\n newActiveElement.focus();\n }\n }\n\n // Reinitialize Stimulus controllers for the dynamically loaded content\n // This is necessary because innerHTML replacement doesn't trigger Stimulus auto-discovery\n this.reinitializeStimulusControllers(this.contentTarget);\n }\n }\n\n getCurrentSubtab() {\n // Get the current subtab from the URL or active tab\n const urlParams = new URLSearchParams(window.location.search);\n return urlParams.get('st') || '';\n }\n\n showLoadingState() {\n // Add loading class to content area\n if (this.hasContentTarget) {\n this.contentTarget.classList.add('subtab-loading');\n }\n\n // Disable all tab links during loading\n this.tabTargets.forEach(tab => {\n const link = tab.querySelector('a');\n if (link) {\n link.classList.add('subtab-loading');\n link.classList.add('subtab-link-disabled');\n }\n });\n\n // Add loading indicator to content area\n this.addLoadingIndicator();\n }\n\n hideLoadingState() {\n // Remove loading class from content area\n if (this.hasContentTarget) {\n this.contentTarget.classList.remove('subtab-loading');\n }\n\n // Re-enable all tab links\n this.tabTargets.forEach(tab => {\n const link = tab.querySelector('a');\n if (link) {\n link.classList.remove('subtab-loading');\n link.classList.remove('subtab-link-disabled');\n }\n });\n\n // Remove loading indicator\n this.removeLoadingIndicator();\n }\n\n addLoadingIndicator() {\n if (this.hasContentTarget && !this.contentTarget.querySelector('.subtab-loading-indicator')) {\n const loadingIndicator = document.createElement('div');\n loadingIndicator.className = 'subtab-loading-indicator';\n loadingIndicator.innerHTML = `\n
\n
Loading... \n `;\n\n // Add wrapper class for positioning context instead of modifying element style\n if (!this.contentTarget.classList.contains('subtab-loading-wrapper')) {\n this.contentTarget.classList.add('subtab-loading-wrapper');\n }\n\n this.contentTarget.appendChild(loadingIndicator);\n }\n }\n\n removeLoadingIndicator() {\n if (this.hasContentTarget) {\n const loadingIndicator = this.contentTarget.querySelector('.subtab-loading-indicator');\n if (loadingIndicator) {\n loadingIndicator.remove();\n }\n\n // Remove wrapper class\n this.contentTarget.classList.remove('subtab-loading-wrapper');\n }\n }\n\n showAlreadyLoadingFeedback() {\n // Brief visual feedback when user clicks during loading\n if (this.hasContentTarget) {\n const indicator = this.contentTarget.querySelector('.loading-text');\n if (indicator) {\n indicator.textContent = 'Loading...';\n indicator.classList.add('loading-text-error');\n setTimeout(() => {\n indicator.textContent = 'Loading...';\n indicator.classList.remove('loading-text-error');\n }, 300);\n }\n }\n }\n\n showUserError(message, showRetry = false) {\n // Display user-friendly error message\n if (this.hasContentTarget) {\n // Clear any existing error timeout\n if (this.errorTimeoutId) {\n clearTimeout(this.errorTimeoutId);\n this.errorTimeoutId = null;\n }\n\n // Remove any existing error messages\n const existingError = this.contentTarget.querySelector('.subtab-error-message');\n if (existingError) {\n existingError.remove();\n }\n\n // Create error message element\n const errorElement = document.createElement('div');\n errorElement.className = 'subtab-error-message';\n const retryButton = showRetry ? '
Retry ' : '';\n errorElement.innerHTML = `\n
\u26A0\uFE0F
\n
${this.escapeHtml(message)}
\n ${retryButton}\n `;\n\n // Error element will be styled by CSS\n\n // Icon and text are styled by CSS\n\n // Add wrapper class for positioning context\n if (!this.contentTarget.classList.contains('subtab-error-wrapper')) {\n this.contentTarget.classList.add('subtab-error-wrapper');\n }\n\n this.contentTarget.appendChild(errorElement);\n\n // Add retry button click handler if present\n if (showRetry) {\n const retryBtn = errorElement.querySelector('.retry-button');\n if (retryBtn) {\n // Retry button styling handled by CSS\n\n retryBtn.addEventListener('click', () => {\n // Clear the error timeout\n if (this.errorTimeoutId) {\n clearTimeout(this.errorTimeoutId);\n this.errorTimeoutId = null;\n }\n // Remove error message\n errorElement.remove();\n this.contentTarget.classList.remove('subtab-error-wrapper');\n // Retry the last navigation\n this.retryLastNavigation();\n });\n }\n }\n\n // Auto-remove after 5 seconds if still present (unless there's a retry button)\n if (!showRetry) {\n setTimeout(() => {\n if (errorElement.parentNode) {\n errorElement.remove();\n this.contentTarget.classList.remove('subtab-error-wrapper');\n }\n }, 3000);\n }\n }\n }\n\n escapeHtml(text) {\n // Simple HTML escaping to prevent XSS\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n\n removeErrorMessages() {\n // Clean up any error messages during disconnect\n if (this.hasContentTarget) {\n const errorMessages = this.contentTarget.querySelectorAll('.subtab-error-message');\n errorMessages.forEach(msg => msg.remove());\n this.contentTarget.classList.remove('subtab-error-wrapper');\n }\n }\n\n retryLastNavigation() {\n // Retry the last navigation attempt if available\n if (this.lastNavigationAttempt) {\n const { subtab, href } = this.lastNavigationAttempt;\n\n // Try to find the link by its subtab attribute\n const link = subtab\n ? this.element.querySelector(`[data-subtab=\"${subtab}\"]`)\n : this.element.querySelector('[data-subtab=\"\"]'); // fallback to default tab\n\n if (link) {\n // Create a synthetic click event\n const event = new MouseEvent('click', {\n view: window,\n bubbles: true,\n cancelable: true,\n });\n Object.defineProperty(event, 'currentTarget', {\n value: link,\n enumerable: true,\n });\n this.navigate(event);\n } else {\n // If link not found, use the stored href\n this.fallbackNavigation(href);\n }\n }\n }\n\n fallbackNavigation(href) {\n // Use Turbolinks if available, otherwise regular navigation\n if (window.Turbolinks) {\n Turbolinks.visit(href);\n } else {\n window.location.href = href;\n }\n }\n\n handlePopstate(event) {\n // Handle browser back/forward navigation\n if (event.state && event.state.isSubtabNavigation) {\n // This was a subtab navigation, handle it via AJAX\n const subtab = event.state.subtab || '';\n\n // Find the corresponding tab link\n const targetLink = this.tabTargets.find(tab => {\n const link = tab.querySelector('a');\n return link && link.dataset.subtab === subtab;\n })?.querySelector('a');\n\n if (targetLink) {\n // Simulate a click on the appropriate tab\n // But bypass the pushState by temporarily setting a flag\n this.isHandlingPopstate = true;\n targetLink.click();\n }\n }\n }\n\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['collapse'];\n\n initialize() {\n this.sidebar = document.querySelector('.js-ae-sidebar');\n this.content = document.querySelector('.js-ae-content');\n this.leftToggle = document.getElementById('sidebar-left-toggle');\n this.fixedPageActions = document.querySelector('.fixed-page-actions');\n\n // Store bound references for proper cleanup in disconnect()\n this.boundHandleContentMouseEnter = this.handleContentMouseEnter.bind(this);\n this.boundHandleContentMouseLeave = this.handleContentMouseLeave.bind(this);\n\n // Adjust sidebar z-index when user is off/on content area. This avoids overlapping content.\n this.content.addEventListener('mouseenter', this.boundHandleContentMouseEnter);\n this.content.addEventListener('mouseleave', this.boundHandleContentMouseLeave);\n }\n\n handleContentMouseEnter() {\n this.sidebar.style.zIndex = '1';\n this.content.style.zIndex = '9';\n }\n\n handleContentMouseLeave() {\n this.sidebar.style.zIndex = '9';\n this.content.style.zIndex = '1';\n }\n\n click(e) {\n e.preventDefault();\n\n this.leftToggle.classList.toggle('js-hide-left-sidebar');\n\n if (!this.sidebar.classList.contains('collapsed-left-sidebar')) {\n this.collapseLeftSidebar();\n } else {\n this.showLeftSidebar();\n }\n }\n\n collapseLeftSidebar() {\n this.leftToggle.style.left = '-4px';\n\n setTimeout(() => {\n this.content.classList.add('show-site-content');\n if (this.fixedPageActions) {\n this.fixedPageActions.style.left = '65px';\n }\n }, 100);\n\n this.sidebar.classList.add('collapsed-left-sidebar');\n }\n\n showLeftSidebar() {\n this.sidebar.style.transform = 'none';\n this.sidebar.classList.remove('ae-hidden', 'collapsed-left-sidebar');\n\n this.leftToggle.style.left = '10px';\n\n if (this.fixedPageActions) {\n this.fixedPageActions.style.left = '250px';\n }\n }\n\n disconnect() {\n // Clean up event listeners using the same bound references\n this.content.removeEventListener('mouseenter', this.boundHandleContentMouseEnter);\n this.content.removeEventListener('mouseleave', this.boundHandleContentMouseLeave);\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['toggle'];\n\n initialize() {\n this.button = this.toggleTarget;\n this.sidebar = document.querySelector('.js-ae-sidebar');\n this.content = document.querySelector('.js-ae-content');\n this.fixedPageActions = document.querySelector('.fixed-page-actions');\n }\n\n click(e) {\n e.preventDefault();\n\n this.button.classList.toggle('js-hide-left-sidebar');\n\n if (this.button.classList.contains('js-hide-left-sidebar')) {\n this.hideLeftSidebar();\n } else {\n this.showLeftSidebar();\n }\n }\n\n hideLeftSidebar() {\n Object.assign(this.sidebar.style, {\n transform: 'translateX(-250px)',\n transition: 'all 0.5s',\n overflow: 'visible',\n });\n this.sidebar.classList.add('hide-left-sidebar');\n\n this.button.style.left = '260px';\n\n setTimeout(() => {\n Object.assign(this.content.style, {\n marginLeft: '-230px',\n transition: 'all 0.5s',\n });\n this.content.classList.add('show-site-content');\n\n if (this.fixedPageActions) {\n this.fixedPageActions.style.left = '65px';\n }\n }, 100);\n }\n\n showLeftSidebar() {\n Object.assign(this.sidebar.style, {\n transform: 'none',\n transition: 'all 0.5s ease-out',\n overflow: 'visible',\n });\n this.sidebar.classList.remove('ae-hidden', 'hide-left-sidebar', 'collapsed-left-sidebar');\n\n this.button.style.left = '-4px';\n\n Object.assign(this.content.style, {\n marginLeft: '0',\n transition: 'all 0.5s',\n });\n\n if (this.fixedPageActions) {\n this.fixedPageActions.style.left = '250px';\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\n/**\n * Sale Tabs Products Controller\n *\n * Manages the products tab in sale tabs navigation.\n * Provides hooks for updating product count display.\n */\nexport default class extends Controller {\n connect() {\n this.saleId = this.element.dataset.saleId;\n }\n\n /**\n * Update the product count displayed in the tab\n * @param {number} count - The new product count\n */\n updateCount(count) {\n const countElement = document.getElementById('tab-products-count');\n if (countElement) {\n countElement.textContent = count;\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\n/**\n * Scroll Top Button Controller\n *\n * Displays a \"scroll to top\" button when the user scrolls down the page,\n * and smoothly scrolls back to the top when clicked.\n *\n * The button automatically appears when the user scrolls beyond 300px from the top,\n * and disappears when they scroll back up.\n *\n * Required target:\n * - data-target=\"scroll-top-button.button\": The button element that will be shown/hidden\n *\n * Required action:\n * - data-action=\"click->scroll-top-button#scrollToTop\": Action to trigger scrolling to top\n *\n * @example\n *
\n * scroll-top-button#scrollToTop\"\n * class=\"scroll-top-button\"\n * aria-label=\"Scroll to top\">\n * ⇧\n * \n *
\n *\n * @see /doc/scroll_up_button.md for detailed documentation\n */\nexport default class extends Controller {\n static targets = ['button'];\n\n connect() {\n window.addEventListener('scroll', this.toggleButtonVisibility.bind(this));\n this.toggleButtonVisibility();\n }\n\n disconnect() {\n window.removeEventListener('scroll', this.toggleButtonVisibility.bind(this));\n }\n\n toggleButtonVisibility() {\n if (window.pageYOffset > 300) {\n this.buttonTarget.classList.add('visible');\n } else {\n this.buttonTarget.classList.remove('visible');\n }\n }\n\n scrollToTop(event) {\n event.preventDefault();\n window.scrollTo({\n top: 0,\n behavior: 'smooth',\n });\n }\n}\n", "import { Controller } from '../stimulus';\nimport { showDeleteArtworkDialog, dismissDeleteArtworkDialog } from '../utils/delete_artwork_dialog';\n\nexport default class extends Controller {\n static targets = ['checkbox', 'selectAll', 'actionButton'];\n\n disconnect() {\n dismissDeleteArtworkDialog();\n }\n\n connect() {\n this.selectedIds = [];\n // Check if any checkboxes are already checked (page reload case)\n this.checkboxTargets.forEach(checkbox => {\n if (checkbox.checked) {\n this.selectedIds.push(parseInt(checkbox.value));\n }\n });\n this.updateActionButton();\n }\n\n toggleAll() {\n const isChecked = this.selectAllTarget.checked;\n\n this.checkboxTargets.forEach(checkbox => {\n checkbox.checked = isChecked;\n });\n\n if (isChecked) {\n this.selectedIds = this.checkboxTargets.map(checkbox => parseInt(checkbox.value));\n } else {\n this.selectedIds = [];\n }\n\n this.updateActionButton();\n }\n\n toggle(event) {\n const checkbox = event.currentTarget;\n const artworkId = checkbox.dataset.artworkId || checkbox.value;\n const artworkIdNum = parseInt(artworkId);\n\n if (checkbox.checked) {\n if (!this.selectedIds.includes(artworkIdNum)) {\n this.selectedIds.push(artworkIdNum);\n }\n } else {\n const index = this.selectedIds.indexOf(artworkIdNum);\n if (index > -1) {\n this.selectedIds.splice(index, 1);\n }\n\n // Uncheck \"select all\" if any item is unchecked\n if (this.hasSelectAllTarget) {\n this.selectAllTarget.checked = false;\n }\n }\n\n this.updateActionButton();\n }\n\n async deleteSelected(event) {\n event.preventDefault();\n\n if (this.selectedIds.length === 0) return;\n\n const scope = await showDeleteArtworkDialog();\n if (scope !== 'local' && scope !== 'organization') return;\n\n const saleId = this.element.dataset.saleId;\n const metaTag = document.querySelector('meta[name=\"csrf-token\"]');\n const csrfToken = metaTag ? metaTag.content : undefined;\n const url = '/teamsites/' + saleId + '/artworks/bulk';\n\n try {\n const response = await fetch(url, {\n method: 'DELETE',\n headers: {\n 'X-CSRF-Token': csrfToken,\n 'Accept': 'application/json',\n 'Content-Type': 'application/json',\n 'X-Requested-With': 'XMLHttpRequest',\n },\n body: JSON.stringify({ artwork_ids: this.selectedIds, scope: scope }),\n credentials: 'same-origin',\n });\n\n if (response.ok) {\n const message = scope === 'organization'\n ? 'Artworks deleted from organization library'\n : 'Artworks removed from this TeamSite';\n window.App && window.App.showSuccessFlash(message);\n\n // Remove selected elements from DOM\n this.selectedIds.forEach((id) => {\n const el = document.querySelector('[data-artwork-id=\"' + id + '\"]');\n if (el) el.remove();\n });\n\n this.selectedIds = [];\n this.updateActionButton();\n if (this.hasSelectAllTarget) {\n this.selectAllTarget.checked = false;\n }\n } else {\n const data = await response.json().catch(() => ({}));\n window.App && window.App.showErrorFlash(data.message || 'Failed to delete artworks');\n }\n } catch (error) {\n window.App && window.App.showErrorFlash('Network error. Please try again.');\n }\n }\n\n updateActionButton() {\n if (this.hasActionButtonTarget) {\n const count = this.selectedIds.length;\n const button = this.actionButtonTarget;\n\n if (count > 0) {\n button.textContent = `DELETE SELECTED (${count})`;\n button.disabled = false;\n button.classList.remove('ae-btn-disabled');\n button.classList.add('ae-btn-danger');\n button.style.display = 'inline-block';\n } else {\n button.textContent = 'DELETE SELECTED';\n button.style.display = 'none'; // Hide the button when no artworks are selected\n button.disabled = true;\n button.classList.add('ae-btn-disabled');\n button.classList.remove('ae-btn-danger');\n }\n }\n }\n}\n", "// Sender address \"Add New\" button controller (Organization)\n// Opens form modal using AjaxPopup pattern\n// Stimulus 1.1.0 compatible\n\nimport { Controller } from '../stimulus';\n\nimport AjaxPopupController from './ajax_popup_controller';\n\nexport default class extends Controller {\n initialize() {\n this.saleId = this.element.dataset.saleId;\n this.orderNumber = this.element.dataset.orderNumber;\n this.addressType = this.element.dataset.addressType || 'organization';\n\n // Bind methods\n this.showForm = this.showForm.bind(this);\n }\n\n connect() {\n // Controller connected\n }\n\n disconnect() {\n // Cleanup if needed\n }\n\n showForm(event) {\n event.preventDefault();\n const url = `/teamsites/${this.saleId}/shipping/${this.orderNumber}/labels/sender_addresses/${this.addressType}/new`;\n AjaxPopupController.open(url);\n }\n}\n", "// Sender address \"Add New\" button controller (Individual)\n// Opens form modal using AjaxPopup pattern\n// Stimulus 1.1.0 compatible\n\nimport { Controller } from '../stimulus';\n\nimport AjaxPopupController from './ajax_popup_controller';\n\nexport default class extends Controller {\n initialize() {\n this.saleId = this.element.dataset.saleId;\n this.orderNumber = this.element.dataset.orderNumber;\n this.addressType = this.element.dataset.addressType || 'individual';\n\n // Bind methods\n this.showForm = this.showForm.bind(this);\n }\n\n connect() {\n // Controller connected\n }\n\n disconnect() {\n // Cleanup if needed\n }\n\n showForm(event) {\n event.preventDefault();\n const url = `/teamsites/${this.saleId}/shipping/${this.orderNumber}/labels/sender_addresses/${this.addressType}/new`;\n AjaxPopupController.open(url);\n }\n}\n", "// Shipping-specific bulk select controller\n// Based on: shared/bulk_select_controller.js (commit 756503e7)\n// Stimulus 1.1.0 compatible - vanilla JavaScript\n\nimport { Controller } from '../stimulus';\n\nconst ADD_EVENT = 'shippingBulkSelect:add';\nconst REMOVE_EVENT = 'shippingBulkSelect:remove';\nconst CHANGE_EVENT = 'shippingBulkSelect:change';\n\nexport default class extends Controller {\n static targets = ['toggleAll', 'checkbox'];\n\n initialize() {\n this.onChange = this.onChange.bind(this);\n this.contentObserver = null;\n this.listenToCheckboxes = this.listenToCheckboxes.bind(this);\n }\n\n connect() {\n this.initContentObserver();\n this.listenToCheckboxes();\n this.broadcastInitialState();\n }\n\n disconnect() {\n this.checkboxTargets.forEach(checkbox => {\n checkbox.removeEventListener('change', this.onChange);\n });\n if (this.contentObserver) {\n this.contentObserver.disconnect();\n }\n }\n\n listenToCheckboxes() {\n this.checkboxTargets.forEach(checkbox => {\n checkbox.removeEventListener('change', this.onChange);\n checkbox.addEventListener('change', this.onChange);\n });\n }\n\n initContentObserver() {\n // eslint-disable-next-line no-undef\n this.contentObserver = new MutationObserver(this.listenToCheckboxes);\n\n // Listen to new checkboxes inside the element\n const options = { childList: true, subtree: true };\n this.contentObserver.observe(this.element, options);\n }\n\n broadcastInitialState() {\n const broadcast = () => {\n const selected = this.getSelectedCheckboxes();\n this.dispatchCustomEvent(ADD_EVENT, { checkboxes: selected });\n this.dispatchCustomEvent(CHANGE_EVENT, { checkboxes: selected });\n };\n\n // Give chance to other stimulus controllers to initialize and setup their\n // listeners for this broadcast.\n setTimeout(broadcast, 10);\n }\n\n onChange(e) {\n const checkbox = e.currentTarget;\n const event = checkbox.checked ? ADD_EVENT : REMOVE_EVENT;\n\n this.dispatchCustomEvent(event, { checkboxes: [checkbox] });\n this.dispatchCustomEvent(CHANGE_EVENT, { checkboxes: this.getSelectedCheckboxes() });\n\n if (this.hasToggleAllTarget) {\n this.toggleAllTarget.checked = false;\n }\n }\n\n toggleAll(e) {\n const checkbox = e.currentTarget;\n const event = checkbox.checked ? ADD_EVENT : REMOVE_EVENT;\n\n this.checkboxTargets.forEach(target => {\n if (!target.disabled) {\n target.checked = checkbox.checked;\n }\n });\n\n this.dispatchCustomEvent(event, { checkboxes: this.checkboxTargets });\n this.dispatchCustomEvent(CHANGE_EVENT, { checkboxes: this.getSelectedCheckboxes() });\n }\n\n getSelectedCheckboxes() {\n return this.checkboxTargets.filter(checkbox => checkbox.checked);\n }\n\n // Shipping-specific methods\n getSelectedOrderNumbers() {\n return this.getSelectedCheckboxes().map(checkbox =>\n checkbox.dataset.orderNumber,\n ).filter(Boolean);\n }\n\n getSelectedOrderData() {\n return this.getSelectedCheckboxes().map(checkbox => {\n return {\n orderNumber: checkbox.dataset.orderNumber,\n paymentStatus: checkbox.dataset.paymentStatus,\n };\n }).filter(item => item.orderNumber);\n }\n\n // Helper method to dispatch custom events\n dispatchCustomEvent(eventName, detail) {\n const event = new CustomEvent(eventName, {\n detail,\n bubbles: true,\n cancelable: true,\n });\n this.element.dispatchEvent(event);\n }\n}\n", "// Shipping Fulfillment Confirm Controller\n// Stimulus 1.1.0 compatible - handles confirming fulfillment status change with line item quantities\n\nimport { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['quantityInput'];\n\n initialize() {\n this.saleId = this.element.dataset.saleId;\n this.orderNumber = this.element.dataset.orderNumber;\n this.status = this.element.dataset.status;\n }\n\n confirm(event) {\n event.preventDefault();\n\n // Collect line item quantities\n const lineItemHashes = {};\n\n if (this.hasQuantityInputTarget) {\n this.quantityInputTargets.forEach(input => {\n const lineItemId = input.dataset.lineItemId;\n const quantity = parseInt(input.value, 10);\n\n if (quantity > 0) {\n lineItemHashes[lineItemId] = {\n line_item_id: lineItemId,\n quantity: quantity,\n };\n }\n });\n }\n\n this.updateFulfillmentStatus(lineItemHashes);\n }\n\n updateFulfillmentStatus(lineItemHashes) {\n const url = `/teamsites/${this.saleId}/shipping/${this.orderNumber}/fulfillments/change_status`;\n const csrfToken = document.querySelector('meta[name=\"csrf-token\"]')?.content;\n\n fetch(url, {\n method: 'PATCH',\n headers: {\n 'Content-Type': 'application/json',\n 'Accept': 'application/json',\n 'X-Requested-With': 'XMLHttpRequest',\n 'X-CSRF-Token': csrfToken,\n },\n body: JSON.stringify({\n status: this.status,\n line_item_hashes: lineItemHashes,\n }),\n })\n .then(response => {\n if (!response.ok) {\n throw new Error('Failed to update fulfillment status');\n }\n return response.json();\n })\n .then(data => {\n if (data.success) {\n this.handleSuccess(data.message);\n } else {\n throw new Error(data.error || 'Update failed');\n }\n })\n .catch(error => {\n this.showError(error.message || 'Failed to update fulfillment status');\n });\n }\n\n handleSuccess(message) {\n // Close the modal\n this.closeModal();\n\n // Show success message\n this.showSuccess(message || 'Fulfillment status updated successfully');\n\n // Reload the page to reflect changes\n setTimeout(() => {\n window.location.reload();\n }, 1000);\n }\n\n closeModal() {\n const modal = document.getElementById('fulfillment-change-status-modal');\n if (modal) {\n modal.classList.add('mfp-hide');\n modal.style.display = 'none';\n }\n\n const backdrop = document.querySelector('.simple-popup-backdrop');\n if (backdrop) {\n backdrop.style.display = 'none';\n }\n\n document.body.classList.remove('modal-open');\n\n const modalContainer = document.getElementById('modal-container');\n if (modalContainer) {\n modalContainer.innerHTML = '';\n }\n }\n\n showSuccess(message) {\n const flashContainer = document.getElementById('flash-messages');\n if (flashContainer) {\n const successDiv = document.createElement('div');\n successDiv.className = 'ae-alert ae-alert-success';\n successDiv.textContent = message;\n flashContainer.appendChild(successDiv);\n }\n }\n\n showError(message) {\n const flashContainer = document.getElementById('flash-messages');\n if (flashContainer) {\n const errorDiv = document.createElement('div');\n errorDiv.className = 'ae-alert ae-alert-error';\n errorDiv.textContent = message;\n flashContainer.appendChild(errorDiv);\n }\n }\n}\n", "// Shipping Fulfillment Select Controller\n// Stimulus 1.1.0 compatible - handles changing fulfillment status for individual orders\n\nimport { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['select'];\n\n initialize() {\n this.saleId = this.element.dataset.saleId;\n this.orderNumber = this.element.dataset.orderNumber;\n this.originalStatus = this.selectTarget.value;\n }\n\n change(event) {\n const newStatus = event.target.value;\n\n if (!newStatus) {\n return;\n }\n\n // Special handling for partially_shipped status\n if (newStatus === 'partially_shipped') {\n this.showPartiallyShippedModal(newStatus);\n } else {\n this.updateFulfillmentStatus(newStatus);\n }\n }\n\n showPartiallyShippedModal(status) {\n const url = `/teamsites/${this.saleId}/shipping/${this.orderNumber}/fulfillments/change_status?status=${status}`;\n\n fetch(url, {\n headers: {\n 'Accept': 'text/html',\n 'X-Requested-With': 'XMLHttpRequest',\n },\n })\n .then(response => {\n if (!response.ok) {\n throw new Error('Failed to load confirmation modal');\n }\n return response.text();\n })\n .then(html => {\n const modalContainer = document.getElementById('modal-container');\n if (!modalContainer) {\n this.showError('Modal container not found');\n this.revertStatus();\n return;\n }\n\n modalContainer.innerHTML = html;\n\n const modal = document.getElementById('fulfillment-change-status-modal');\n if (!modal) {\n this.showError('Modal element not found');\n this.revertStatus();\n return;\n }\n\n this.openModal(modal);\n })\n .catch(_error => {\n this.showError('Failed to load confirmation modal');\n this.revertStatus();\n });\n }\n\n updateFulfillmentStatus(status) {\n const url = `/teamsites/${this.saleId}/shipping/${this.orderNumber}/fulfillments/change_status`;\n const csrfToken = document.querySelector('meta[name=\"csrf-token\"]')?.content;\n\n fetch(url, {\n method: 'PATCH',\n headers: {\n 'Content-Type': 'application/json',\n 'Accept': 'application/json',\n 'X-Requested-With': 'XMLHttpRequest',\n 'X-CSRF-Token': csrfToken,\n },\n body: JSON.stringify({\n status: status,\n }),\n })\n .then(response => {\n if (!response.ok) {\n throw new Error('Failed to update fulfillment status');\n }\n return response.json();\n })\n .then(data => {\n if (data.success) {\n this.handleSuccess(status, data.message);\n } else {\n throw new Error(data.error || 'Update failed');\n }\n })\n .catch(error => {\n this.showError(error.message || 'Failed to update fulfillment status');\n this.revertStatus();\n });\n }\n\n handleSuccess(newStatus, message) {\n // Update original status\n this.originalStatus = newStatus;\n\n // Update select styling based on new status\n this.updateSelectStyling(newStatus);\n\n // Show success message\n this.showSuccess(message || 'Fulfillment status updated successfully');\n }\n\n updateSelectStyling(status) {\n // Remove all status classes\n const statusClasses = ['not_shipped-status', 'shipped-status', 'delivered-status', 'partially_shipped-status'];\n statusClasses.forEach(cls => {\n this.selectTarget.classList.remove(cls);\n });\n\n // Add new status class\n if (status) {\n this.selectTarget.classList.add(`${status}-status`);\n }\n }\n\n revertStatus() {\n this.selectTarget.value = this.originalStatus;\n }\n\n openModal(modal) {\n const backdrop = this.getOrCreateBackdrop();\n\n modal.classList.remove('mfp-hide');\n modal.classList.add('simple-popup-source');\n modal.style.display = 'block';\n modal.style.visibility = 'visible';\n modal.style.opacity = '1';\n\n backdrop.style.display = 'block';\n backdrop.style.opacity = '1';\n\n document.body.classList.add('modal-open');\n\n this.attachCloseHandlers(modal, backdrop);\n }\n\n getOrCreateBackdrop() {\n let backdrop = document.querySelector('.simple-popup-backdrop');\n if (!backdrop) {\n backdrop = document.createElement('div');\n backdrop.classList.add('simple-popup-backdrop');\n document.body.appendChild(backdrop);\n }\n return backdrop;\n }\n\n attachCloseHandlers(modal, backdrop) {\n const closeButton = modal.querySelector('.mfp-close');\n if (closeButton) {\n closeButton.addEventListener('click', (e) => {\n e.preventDefault();\n this.closeModal(modal, backdrop);\n });\n }\n\n backdrop.addEventListener('click', () => {\n this.closeModal(modal, backdrop);\n });\n }\n\n closeModal(modal, backdrop) {\n modal.classList.add('mfp-hide');\n modal.classList.remove('simple-popup-source');\n modal.style.display = 'none';\n modal.style.visibility = 'hidden';\n modal.style.opacity = '0';\n\n backdrop.style.display = 'none';\n backdrop.style.opacity = '0';\n\n document.body.classList.remove('modal-open');\n\n const modalContainer = document.getElementById('modal-container');\n if (modalContainer) {\n modalContainer.innerHTML = '';\n }\n\n // Revert dropdown on modal close without confirmation\n this.revertStatus();\n }\n\n showSuccess(message) {\n const flashContainer = document.getElementById('flash-messages');\n if (flashContainer) {\n const successDiv = document.createElement('div');\n successDiv.className = 'ae-alert ae-alert-success';\n successDiv.textContent = message;\n flashContainer.appendChild(successDiv);\n\n // Auto-remove after 5 seconds\n setTimeout(() => successDiv.remove(), 5000);\n }\n }\n\n showError(message) {\n const flashContainer = document.getElementById('flash-messages');\n if (flashContainer) {\n const errorDiv = document.createElement('div');\n errorDiv.className = 'ae-alert ae-alert-error';\n errorDiv.textContent = message;\n flashContainer.appendChild(errorDiv);\n\n // Auto-remove after 5 seconds\n setTimeout(() => errorDiv.remove(), 5000);\n }\n }\n\n disconnect() {\n const backdrop = document.querySelector('.simple-popup-backdrop');\n if (backdrop) {\n backdrop.removeEventListener('click', this.closeModal);\n }\n }\n}\n", "// Shipping label package name select controller\n// Provides Select2 enhancement for package dropdown with rich formatting\n// Works with parent shipping_label_package_controller for rate loading\n// Stimulus 1.1.0 compatible - uses Select2BaseController (no direct jQuery dependency)\n\nimport Select2BaseController from './select2_base_controller';\n\nexport default class extends Select2BaseController {\n initialize() {\n super.initialize();\n this.packages = [];\n this.debug = false; // Set to true for debugging\n }\n\n connect() {\n // Read data attributes\n this.saleId = this.element.dataset.saleId || '';\n this.orderNumber = this.element.dataset.orderNumber || '';\n this.packagesJson = this.element.dataset.packages || '[]';\n\n // Parse packages data\n try {\n const packagesData = JSON.parse(this.packagesJson);\n this.packages = this.flattenPackages(packagesData);\n } catch {\n // Failed to parse packages JSON - use empty array\n this.packages = [];\n }\n\n // Populate options before Select2 initialization\n this.populateOptions();\n\n // Call parent connect (initializes Select2 or native select)\n super.connect();\n }\n\n disconnect() {\n // Parent handles Select2 cleanup automatically\n super.disconnect();\n }\n\n /**\n * Flatten nested package structure from Rails packages array\n * Current format: [{ text: \"Carrier Name\", children: [{id, text, note}, ...] }, ...]\n * Legacy format: [{ text: \"Group Name\", packages: [{id, text, note}, ...] }, ...]\n * Returns: [{id, text, note}, ...]\n */\n flattenPackages(packagesData) {\n if (!Array.isArray(packagesData)) {\n return [];\n }\n\n const flattened = [];\n\n packagesData.forEach(group => {\n // Check for current 'children' key or legacy 'packages' key\n const packagesList = group.children || group.packages;\n\n if (packagesList && Array.isArray(packagesList)) {\n // Nested structure with children/packages array\n packagesList.forEach(pkg => {\n flattened.push({\n id: pkg.id || pkg.value,\n text: pkg.text || pkg.name,\n note: pkg.note || pkg.dimensions || '',\n custom: pkg.custom || false,\n });\n });\n } else if (group.id || group.value) {\n // Flat structure (already individual packages)\n flattened.push({\n id: group.id || group.value,\n text: group.text || group.name,\n note: group.note || group.dimensions || '',\n custom: group.custom || false,\n });\n }\n });\n\n return flattened;\n }\n\n /**\n * Populate select options from packages data\n * Called before Select2 initialization\n */\n populateOptions() {\n if (!this.packages || this.packages.length === 0) {\n return;\n }\n\n // Clear existing options except placeholder\n const placeholder = this.element.querySelector('option[value=\"\"]');\n this.element.innerHTML = '';\n\n if (placeholder) {\n this.element.appendChild(placeholder);\n }\n\n // Add package options\n this.packages.forEach(pkg => {\n const option = document.createElement('option');\n option.value = pkg.id;\n option.textContent = pkg.text;\n\n // Store package data as data attributes for parent controller\n if (pkg.note) {\n option.dataset.note = pkg.note;\n }\n if (pkg.custom) {\n option.dataset.custom = 'true';\n }\n\n this.element.appendChild(option);\n });\n }\n\n /**\n * Override: Provide Select2 configuration\n * Returns options for Select2 initialization\n */\n getEnhancementOptions() {\n const packagesCount = this.packages.length;\n\n return {\n width: '100%',\n placeholder: 'Select Package',\n // Enable search if more than 5 packages\n minimumResultsForSearch: packagesCount > 5 ? 0 : Infinity,\n // Custom templates for rich display\n templateResult: (pkg) => this.formatPackageOption(pkg),\n templateSelection: (pkg) => this.formatPackageSelection(pkg),\n // Allow HTML in templates\n escapeMarkup: (m) => m,\n };\n }\n\n /**\n * Format package option for dropdown display\n * Shows package name and note/dimensions\n */\n formatPackageOption(pkg) {\n // Placeholder option\n if (!pkg.id) {\n return pkg.text;\n }\n\n // Find package data\n const packageData = this.packages.find(p => p.id === pkg.id);\n const note = packageData ? packageData.note : '';\n\n if (note) {\n return `\n
${this.escapeHtml(pkg.text)} \n
\n
${this.escapeHtml(note)} \n `;\n }\n\n return `
${this.escapeHtml(pkg.text)} `;\n }\n\n /**\n * Format package selection (what shows in the select box)\n */\n formatPackageSelection(pkg) {\n return pkg.text || pkg.id;\n }\n\n /**\n * Escape HTML to prevent XSS\n * Basic implementation - template strings are safe as they come from server\n */\n escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n\n /**\n * Note: Change event handling is done by parent controller\n * (shipping_label_package_controller.js)\n *\n * Parent controller:\n * - Listens for 'change' events on #package-name\n * - Dispatches 'shipping-label:package-selected' event\n * - Handles rate loading via AJAX\n *\n * Select2BaseController converts Select2 events to native change events,\n * so parent controller's listener will work with both Select2 and native select.\n */\n}\n", "import { Controller } from '../stimulus';\nimport { DatePickerMixin } from '../mixins/date_picker_mixin';\n\nclass ShippingLabelDatepickerController extends Controller {\n initialize() {\n document.addEventListener('turbolinks:before-cache', function() {\n const formControl = document.querySelector('#shipment-date-field > .form-control.input');\n if (formControl) {\n formControl.remove();\n }\n });\n\n const shipmentDatePicker = document.getElementById('shipment-date');\n if (!shipmentDatePicker) return;\n\n // Parse current value using the mixin\n const currentValue = this.parseDate(shipmentDatePicker.value);\n\n // Get today's date for comparison\n const today = this.getTodayStart();\n\n const options = {\n altFormat: 'm/d/y h:i K',\n altInput: true,\n dateFormat: 'Y-m-d h:i K',\n allowInput: false,\n enableTime: true,\n disable: [],\n minDate: this.calculateMinDate(currentValue, today),\n defaultHour: '12',\n defaultMinute: '0',\n noCalendar: false,\n onChange: this.createOnChangeCallback(currentValue, true),\n onDayCreate: this.createOnDayCreateCallback(today),\n };\n\n // Only set defaultDate if there's already a valid value\n // This preserves existing dates, including historical ones\n if (currentValue && currentValue.isValid()) {\n options.defaultDate = currentValue.toDate();\n\n // Add visual indication for historical dates to clarify UX\n if (this.isBefore(currentValue.toDate(), today)) {\n shipmentDatePicker.setAttribute('data-has-historical-date', 'true');\n shipmentDatePicker.title = 'This date is in the past but preserved for reference. New selections are limited to future dates.';\n }\n }\n\n // Initialize flatpickr with error handling\n this.initializeFlatpickr(shipmentDatePicker, options);\n }\n}\n\n// Mix in the date picker functionality\nObject.assign(ShippingLabelDatepickerController.prototype, DatePickerMixin);\n\nexport default ShippingLabelDatepickerController;\n", "// Shipping label form container controller\n// Coordinates label creation workflow: package \u2192 rate \u2192 sender address \u2192 purchase\n// Based on: dealers/sales/shipping/labels/create_controller.js (commit 756503e7)\n// Stimulus 1.1.0 compatible - vanilla JavaScript\n\nimport { Controller } from '../stimulus';\n\nexport default class extends Controller {\n initialize() {\n this.saleId = this.element.dataset.saleId;\n this.orderNumber = this.element.dataset.orderNumber;\n\n // Bind methods\n this.handleFormSubmit = this.handleFormSubmit.bind(this);\n this.handlePackageSelected = this.handlePackageSelected.bind(this);\n this.handleRateSelected = this.handleRateSelected.bind(this);\n this.handleSenderAddressSelected = this.handleSenderAddressSelected.bind(this);\n }\n\n connect() {\n // Listen for form submission\n const form = this.element.querySelector('#label-form');\n if (form) {\n form.addEventListener('submit', this.handleFormSubmit);\n }\n\n // Listen for custom events from other controllers\n this.element.addEventListener('shipping-label:package-selected', this.handlePackageSelected);\n this.element.addEventListener('shipping-label:rate-selected', this.handleRateSelected);\n this.element.addEventListener('shipping-label:sender-address-selected', this.handleSenderAddressSelected);\n\n // Initialize form state\n this.validateFormState();\n }\n\n disconnect() {\n const form = this.element.querySelector('#label-form');\n if (form) {\n form.removeEventListener('submit', this.handleFormSubmit);\n }\n\n this.element.removeEventListener('shipping-label:package-selected', this.handlePackageSelected);\n this.element.removeEventListener('shipping-label:rate-selected', this.handleRateSelected);\n this.element.removeEventListener('shipping-label:sender-address-selected', this.handleSenderAddressSelected);\n }\n\n handleFormSubmit(event) {\n event.preventDefault();\n\n const form = event.target;\n const formData = new FormData(form);\n const url = form.action;\n\n this.showLoadingBars();\n this.disableBuyButton();\n\n fetch(url, {\n method: 'POST',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Accept': 'application/json',\n },\n body: formData,\n })\n .then(response => response.json())\n .then(data => {\n this.hideLoadingBars();\n\n if (data.success) {\n this.handleSuccess(data);\n } else {\n this.handleError(data.errors);\n }\n })\n .catch(error => {\n this.hideLoadingBars();\n this.enableBuyButton();\n this.showError('An error occurred while creating the label. Please try again.');\n });\n }\n\n handleSuccess(data) {\n // Show success message\n this.showSuccess(data.message || 'Label created successfully');\n\n // Reload the shipping table row to show \"View Label\" button\n this.dispatchRowReloadEvent();\n\n // Redirect back to shipping index after short delay\n setTimeout(() => {\n window.location.href = `/teamsites/${this.saleId}/shipping`;\n }, 1500);\n }\n\n handleError(errors) {\n this.enableBuyButton();\n\n if (typeof errors === 'string') {\n this.showError(errors);\n } else if (typeof errors === 'object') {\n const errorMessages = Object.values(errors).flat().join(', ');\n this.showError(errorMessages || 'Please correct the errors and try again.');\n } else {\n this.showError('An error occurred. Please try again.');\n }\n }\n\n handlePackageSelected(event) {\n const packageId = event.detail?.packageId;\n this.validateFormState();\n }\n\n handleRateSelected(event) {\n const rateId = event.detail?.rateId;\n this.validateFormState();\n }\n\n handleSenderAddressSelected(event) {\n const addressId = event.detail?.addressId;\n this.validateFormState();\n }\n\n validateFormState() {\n // Check if all required selections are made\n const packageSelected = this.isPackageSelected();\n const rateSelected = this.isRateSelected();\n const senderAddressSelected = this.isSenderAddressSelected();\n\n if (packageSelected && rateSelected && senderAddressSelected) {\n this.enableBuyButton();\n } else {\n this.disableBuyButton();\n }\n }\n\n isPackageSelected() {\n const packageSelect = this.element.querySelector('#package-name');\n return packageSelect && packageSelect.value !== '';\n }\n\n isRateSelected() {\n const rateSelect = this.element.querySelector('#package-rate');\n return rateSelect && rateSelect.value !== '';\n }\n\n isSenderAddressSelected() {\n const senderAddressInput = this.element.querySelector('input[name=\"shipping_label_form[sender_address_id]\"]');\n return senderAddressInput && senderAddressInput.value !== '';\n }\n\n enableBuyButton() {\n const buyButton = this.element.querySelector('#buy-btn');\n if (buyButton) {\n buyButton.disabled = false;\n buyButton.classList.remove('ae-disabled');\n\n // Update button text with label count\n const checkboxes = this.element.querySelectorAll('input[type=\"checkbox\"]:checked');\n const count = checkboxes.length || 1;\n buyButton.textContent = `Buy and Create ${count} Label${count > 1 ? 's' : ''}`;\n }\n }\n\n disableBuyButton() {\n const buyButton = this.element.querySelector('#buy-btn');\n if (buyButton) {\n buyButton.disabled = true;\n buyButton.classList.add('ae-disabled');\n }\n }\n\n showLoadingBars() {\n document.body.classList.add('is-loading');\n }\n\n hideLoadingBars() {\n document.body.classList.remove('is-loading');\n }\n\n showSuccess(message) {\n // Use unified flash system - create flash message element\n this.showFlashMessage(message, 'success');\n }\n\n showError(message) {\n // Use unified flash system - create flash message element\n this.showFlashMessage(message, 'error');\n }\n\n showFlashMessage(message, type) {\n const flashContainer = document.querySelector('.flash-messages') || this.createFlashContainer();\n const flashClass = type === 'success' ? 'ae-alert ae-alert-success' : 'ae-alert ae-alert-danger';\n\n const flashElement = document.createElement('div');\n flashElement.className = flashClass;\n flashElement.innerHTML = `\n ${message}\n
\u00D7 \n `;\n\n flashContainer.appendChild(flashElement);\n\n // Add close button handler\n const closeBtn = flashElement.querySelector('.ae-alert-close');\n if (closeBtn) {\n closeBtn.addEventListener('click', () => {\n flashElement.remove();\n });\n }\n\n // Auto-remove after 5 seconds\n setTimeout(() => {\n flashElement.remove();\n }, 5000);\n }\n\n createFlashContainer() {\n const container = document.createElement('div');\n container.className = 'flash-messages';\n container.style.cssText = 'position: fixed; top: 20px; right: 20px; z-index: 9999;';\n document.body.appendChild(container);\n return container;\n }\n\n dispatchRowReloadEvent() {\n // Dispatch event to reload the shipping table row\n const event = new CustomEvent('shipping:row:reload', {\n detail: { orderNumber: this.orderNumber },\n bubbles: true,\n cancelable: true,\n });\n document.dispatchEvent(event);\n }\n\n getCSRFToken() {\n const token = document.querySelector('meta[name=\"csrf-token\"]');\n return token ? token.getAttribute('content') : '';\n }\n}\n", "// Shipping label package selection controller\n// Handles package selection and triggers rate loading\n// Based on: dealers/sales/shipping/labels/package_controller.js (commit 756503e7)\n// Stimulus 1.1.0 compatible - vanilla JavaScript\n\nimport { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = [\n 'packageName',\n 'packageWeight',\n 'dimensionLength',\n 'dimensionWidth',\n 'dimensionHeight',\n 'packageRate',\n 'packageError',\n ];\n\n initialize() {\n this.saleId = this.element.dataset.saleId;\n this.orderNumber = this.element.dataset.orderNumber;\n\n // Bind methods\n this.handlePackageChange = this.handlePackageChange.bind(this);\n this.handleWeightChange = this.handleWeightChange.bind(this);\n this.handleDimensionsChange = this.handleDimensionsChange.bind(this);\n }\n\n connect() {\n // Attach event listeners using Stimulus targets\n this.packageNameTarget.addEventListener('change', this.handlePackageChange);\n this.packageWeightTarget.addEventListener('change', this.handleWeightChange);\n\n // Attach dimension change listeners\n this.dimensionLengthTarget.addEventListener('change', this.handleDimensionsChange);\n this.dimensionWidthTarget.addEventListener('change', this.handleDimensionsChange);\n this.dimensionHeightTarget.addEventListener('change', this.handleDimensionsChange);\n }\n\n disconnect() {\n // Remove event listeners - check target existence for edge cases\n if (this.hasPackageNameTarget) {\n this.packageNameTarget.removeEventListener('change', this.handlePackageChange);\n }\n if (this.hasPackageWeightTarget) {\n this.packageWeightTarget.removeEventListener('change', this.handleWeightChange);\n }\n\n if (this.hasDimensionLengthTarget) {\n this.dimensionLengthTarget.removeEventListener('change', this.handleDimensionsChange);\n }\n if (this.hasDimensionWidthTarget) {\n this.dimensionWidthTarget.removeEventListener('change', this.handleDimensionsChange);\n }\n if (this.hasDimensionHeightTarget) {\n this.dimensionHeightTarget.removeEventListener('change', this.handleDimensionsChange);\n }\n }\n\n handlePackageChange(event) {\n const packageId = event.target.value;\n\n if (!packageId) {\n this.clearRates();\n this.disableRateSelect();\n return;\n }\n\n // Parse package data from data attribute\n const packagesData = event.target.dataset.packages;\n let selectedPackage = null;\n\n if (packagesData) {\n try {\n const packages = JSON.parse(packagesData);\n selectedPackage = this.findPackageById(packages, packageId);\n } catch {\n // Package data not available or invalid JSON\n }\n }\n\n // Update weight and dimensions if package has predefined values\n if (selectedPackage) {\n this.updateWeightFromPackage(selectedPackage);\n this.updateDimensionsFromPackage(selectedPackage);\n }\n\n // Dispatch event to notify form controller\n this.dispatchPackageSelectedEvent(packageId);\n\n // Trigger rate loading\n this.loadRates(packageId);\n }\n\n handleWeightChange(_event) {\n // Revalidate and reload rates if package is selected\n if (this.packageNameTarget.value) {\n this.loadRates(this.packageNameTarget.value);\n }\n }\n\n handleDimensionsChange(_event) {\n // Revalidate and reload rates if package is selected\n if (this.packageNameTarget.value) {\n this.loadRates(this.packageNameTarget.value);\n }\n }\n\n findPackageById(packages, packageId) {\n // Packages may be nested by group\n for (const group of packages) {\n if (group.packages) {\n const found = group.packages.find(p => p.id === packageId);\n if (found) return found;\n }\n }\n return null;\n }\n\n updateWeightFromPackage(packageData) {\n if (packageData.weight && !this.packageWeightTarget.value) {\n this.packageWeightTarget.value = packageData.weight;\n }\n }\n\n updateDimensionsFromPackage(packageData) {\n if (packageData.dimensions) {\n const { length, width, height } = packageData.dimensions;\n\n if (!this.dimensionLengthTarget.value && length) {\n this.dimensionLengthTarget.value = length;\n }\n\n if (!this.dimensionWidthTarget.value && width) {\n this.dimensionWidthTarget.value = width;\n }\n\n if (!this.dimensionHeightTarget.value && height) {\n this.dimensionHeightTarget.value = height;\n }\n }\n }\n\n loadRates(packageId) {\n // Get weight and dimensions for rate calculation\n const weight = this.getWeight();\n const dimensions = this.getDimensions();\n const senderAddressId = this.getSenderAddressId();\n\n if (!weight || !dimensions.length || !dimensions.width || !dimensions.height) {\n this.disableRateSelect();\n return;\n }\n\n const url = `/teamsites/${this.saleId}/shipping/${this.orderNumber}/labels/rates`;\n const params = new URLSearchParams({\n package_id: packageId,\n weight: weight,\n length: dimensions.length,\n width: dimensions.width,\n height: dimensions.height,\n sender_address_id: senderAddressId || '',\n });\n\n this.showLoadingBars();\n\n fetch(`${url}?${params}`, {\n method: 'GET',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Accept': 'application/json',\n },\n })\n .then(response => response.json())\n .then(data => {\n this.hideLoadingBars();\n\n if (data.rates && data.rates.length > 0) {\n this.updateRateSelect(data.rates);\n this.enableRateSelect();\n } else {\n this.clearRates();\n this.disableRateSelect();\n this.showError(data.error || 'No shipping rates available for this package.');\n }\n })\n .catch(_error => {\n this.hideLoadingBars();\n this.clearRates();\n this.disableRateSelect();\n });\n }\n\n getWeight() {\n return this.packageWeightTarget.value || null;\n }\n\n getDimensions() {\n return {\n length: this.dimensionLengthTarget.value || null,\n width: this.dimensionWidthTarget.value || null,\n height: this.dimensionHeightTarget.value || null,\n };\n }\n\n getSenderAddressId() {\n const senderAddressInput = document.querySelector('input[name=\"shipping_label_form[sender_address_id]\"]');\n return senderAddressInput ? senderAddressInput.value : null;\n }\n\n updateRateSelect(rates) {\n // Clear existing options except the first (placeholder)\n this.packageRateTarget.innerHTML = '
Select Rate ';\n\n // Add rate options\n rates.forEach(rate => {\n const option = document.createElement('option');\n option.value = rate.id;\n option.textContent = `${rate.provider} - ${rate.servicelevel_name} ($${rate.amount})`;\n this.packageRateTarget.appendChild(option);\n });\n }\n\n clearRates() {\n this.packageRateTarget.innerHTML = '
Select Rate ';\n }\n\n enableRateSelect() {\n this.packageRateTarget.disabled = false;\n }\n\n disableRateSelect() {\n this.packageRateTarget.disabled = true;\n }\n\n dispatchPackageSelectedEvent(packageId) {\n const event = new CustomEvent('shipping-label:package-selected', {\n detail: { packageId },\n bubbles: true,\n cancelable: true,\n });\n this.element.dispatchEvent(event);\n }\n\n showLoadingBars() {\n document.body.classList.add('is-loading');\n }\n\n hideLoadingBars() {\n document.body.classList.remove('is-loading');\n }\n\n showError(message) {\n // Simple error display - could be enhanced with unified flash system\n if (this.hasPackageErrorTarget) {\n this.packageErrorTarget.textContent = message;\n this.packageErrorTarget.style.display = 'block';\n }\n }\n\n getCSRFToken() {\n const token = document.querySelector('meta[name=\"csrf-token\"]');\n return token ? token.getAttribute('content') : '';\n }\n}\n", "// Shipping label sender address modal controller\n// Handles sender address selection and creation\n// Based on: dealers/sales/shipping/labels/sender_address_controller.js (commit 756503e7)\n// Stimulus 1.1.0 compatible - vanilla JavaScript\n// Refactored to use AjaxPopup pattern (Phase 0B)\n\nimport { Controller } from '../stimulus';\n\nimport AjaxPopupController from './ajax_popup_controller';\n\nexport default class extends Controller {\n initialize() {\n this.saleId = this.element.dataset.saleId;\n this.orderNumber = this.element.dataset.orderNumber;\n this.organizationAddressId = this.element.dataset.organizationAddressId;\n\n // Bind methods\n this.handleClick = this.handleClick.bind(this);\n this.setupModalListeners = this.setupModalListeners.bind(this);\n this.handleAddressSelection = this.handleAddressSelection.bind(this);\n this.handleAddressCreation = this.handleAddressCreation.bind(this);\n }\n\n connect() {\n // Listen for click on sender address button\n this.element.addEventListener('click', this.handleClick);\n\n // Listen for AjaxPopup lifecycle events\n document.addEventListener('ajax-popup:afterOpen', this.setupModalListeners);\n }\n\n disconnect() {\n this.element.removeEventListener('click', this.handleClick);\n document.removeEventListener('ajax-popup:afterOpen', this.setupModalListeners);\n }\n\n handleClick(event) {\n event.preventDefault();\n const url = `/teamsites/${this.saleId}/shipping/${this.orderNumber}/labels/sender_addresses`;\n AjaxPopupController.open(url);\n }\n\n setupModalListeners(event) {\n // Only process if this is the sender address modal\n const modal = event.detail.content;\n if (!modal || !modal.querySelector('#sender-address-modal')) {\n return;\n }\n\n // Address selection buttons\n const selectButtons = modal.querySelectorAll('.select-address-btn');\n selectButtons.forEach(button => {\n button.addEventListener('click', this.handleAddressSelection);\n });\n\n // Create new address form submission\n const createForm = modal.querySelector('#new-sender-address-form');\n if (createForm) {\n createForm.addEventListener('submit', this.handleAddressCreation);\n }\n }\n\n handleAddressSelection(event) {\n event.preventDefault();\n\n const button = event.currentTarget;\n const addressId = button.dataset.addressId;\n const addressName = button.dataset.addressName;\n const addressStreet = button.dataset.addressStreet;\n const addressCity = button.dataset.addressCity;\n const addressState = button.dataset.addressState;\n const addressZip = button.dataset.addressZip;\n\n // Update sender address display in the form\n this.updateSenderAddressDisplay({\n id: addressId,\n name: addressName,\n street: addressStreet,\n city: addressCity,\n state: addressState,\n zip: addressZip,\n });\n\n // Store address ID in hidden input\n this.storeSenderAddressId(addressId);\n\n // Dispatch event to notify form controller\n this.dispatchSenderAddressSelectedEvent(addressId);\n\n // Close modal using AjaxPopup close mechanism\n this.closeAjaxPopup();\n }\n\n handleAddressCreation(event) {\n event.preventDefault();\n\n const form = event.target;\n const formData = new FormData(form);\n const url = form.action;\n\n document.body.classList.add('is-loading');\n\n fetch(url, {\n method: 'POST',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Accept': 'application/json',\n },\n body: formData,\n })\n .then(response => response.json())\n .then(data => {\n document.body.classList.remove('is-loading');\n\n if (data.success && data.address) {\n // Update sender address display with new address\n this.updateSenderAddressDisplay(data.address);\n this.storeSenderAddressId(data.address.id);\n this.dispatchSenderAddressSelectedEvent(data.address.id);\n this.closeAjaxPopup();\n\n if (window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash('Sender address created successfully');\n }\n } else {\n const errorMsg = data.errors || 'Failed to create sender address';\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash(errorMsg);\n }\n }\n })\n .catch(_error => {\n document.body.classList.remove('is-loading');\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Failed to create sender address. Please try again.');\n }\n });\n }\n\n updateSenderAddressDisplay(address) {\n // Target inner display div to preserve parent container attributes\n const displayContainer = document.querySelector('#sender-address-display');\n if (!displayContainer) return;\n\n const addressHTML = `\n \n
\n
${address.name || ''}
\n
${address.street || ''}
\n
${address.city || ''}, ${address.state || ''} ${address.zip || ''}
\n
\n `;\n\n displayContainer.innerHTML = addressHTML;\n }\n\n storeSenderAddressId(addressId) {\n // Find the form - scope querySelector to #label-form for better specificity\n const form = document.querySelector('#label-form');\n if (!form) return;\n\n // Find or create hidden input\n let addressInput = form.querySelector('input[name=\"shipping_label_form[sender_address_id]\"]');\n\n if (addressInput) {\n // Update existing input (normal production path)\n addressInput.value = addressId;\n } else {\n // Create hidden input if missing (defensive fallback)\n addressInput = document.createElement('input');\n addressInput.type = 'hidden';\n addressInput.name = 'shipping_label_form[sender_address_id]';\n addressInput.value = addressId;\n form.appendChild(addressInput);\n }\n }\n\n dispatchSenderAddressSelectedEvent(addressId) {\n const event = new CustomEvent('shipping-label:sender-address-selected', {\n detail: { addressId },\n bubbles: true,\n cancelable: true,\n });\n document.dispatchEvent(event);\n }\n\n closeAjaxPopup() {\n // Close AjaxPopup modal by clicking the close button\n // AjaxPopup controller handles the close() method when button is clicked\n const closeButton = document.querySelector('.mfp-wrap .mfp-close');\n if (closeButton) {\n closeButton.click();\n }\n }\n\n getCSRFToken() {\n const token = document.querySelector('meta[name=\"csrf-token\"]');\n return token ? token.getAttribute('content') : '';\n }\n}\n", "// Shipping Label View Controller\n// Stimulus 1.1.0 compatible - handles viewing shipping labels in modal\n\nimport { Controller } from '../stimulus';\n\nexport default class extends Controller {\n initialize() {\n this.saleId = this.element.dataset.saleId;\n this.orderNumber = this.element.dataset.orderNumber;\n }\n\n click(e) {\n e.preventDefault();\n\n const url = `/teamsites/${this.saleId}/shipping/${this.orderNumber}/labels`;\n\n fetch(url, {\n headers: {\n 'Accept': 'text/html',\n 'X-Requested-With': 'XMLHttpRequest',\n },\n })\n .then(response => {\n if (!response.ok) {\n throw new Error('Failed to load labels');\n }\n return response.text();\n })\n .then(html => {\n const modalContainer = document.getElementById('modal-container');\n if (!modalContainer) {\n this.showError('Modal container not found');\n return;\n }\n\n modalContainer.innerHTML = html;\n\n const modal = document.getElementById('labels-popup');\n if (!modal) {\n this.showError('Modal element not found');\n return;\n }\n\n this.openModal(modal);\n })\n .catch(_error => {\n this.showError('Failed to load shipping labels');\n });\n }\n\n openModal(modal) {\n const backdrop = this.getOrCreateBackdrop();\n\n modal.classList.remove('mfp-hide');\n modal.classList.add('simple-popup-source');\n modal.style.display = 'block';\n modal.style.visibility = 'visible';\n modal.style.opacity = '1';\n\n backdrop.style.display = 'block';\n backdrop.style.opacity = '1';\n\n document.body.classList.add('modal-open');\n\n this.attachCloseHandlers(modal, backdrop);\n }\n\n getOrCreateBackdrop() {\n let backdrop = document.querySelector('.simple-popup-backdrop');\n if (!backdrop) {\n backdrop = document.createElement('div');\n backdrop.classList.add('simple-popup-backdrop');\n document.body.appendChild(backdrop);\n }\n return backdrop;\n }\n\n attachCloseHandlers(modal, backdrop) {\n const closeButton = modal.querySelector('.mfp-close');\n\n const closeModal = () => {\n modal.classList.add('mfp-hide');\n modal.classList.remove('simple-popup-source');\n modal.style.display = 'none';\n modal.style.visibility = 'hidden';\n modal.style.opacity = '0';\n\n backdrop.style.display = 'none';\n backdrop.style.opacity = '0';\n\n document.body.classList.remove('modal-open');\n\n document.removeEventListener('keydown', escapeHandler);\n backdrop.removeEventListener('click', backdropHandler);\n if (closeButton) {\n closeButton.removeEventListener('click', closeHandler);\n }\n };\n\n const escapeHandler = (e) => {\n if (e.key === 'Escape') closeModal();\n };\n\n const backdropHandler = () => closeModal();\n\n const closeHandler = (e) => {\n e.preventDefault();\n closeModal();\n };\n\n if (closeButton) {\n closeButton.addEventListener('click', closeHandler);\n }\n\n backdrop.addEventListener('click', backdropHandler);\n document.addEventListener('keydown', escapeHandler);\n }\n\n showError(message) {\n const flashContainer = document.querySelector('.flash-container');\n if (flashContainer) {\n const flash = document.createElement('div');\n flash.className = 'flash flash-error';\n flash.textContent = message;\n flashContainer.appendChild(flash);\n setTimeout(() => flash.remove(), 5000);\n }\n }\n\n disconnect() {\n document.body.classList.remove('modal-open');\n }\n}\n", "// Shipping order row controller\n// Based on: dealers/sales/shipping/index/table/body/order/row_controller.js (commit 756503e7)\n// Stimulus 1.1.0 compatible - vanilla JavaScript\n\nimport { Controller } from '../stimulus';\n\nexport default class extends Controller {\n initialize() {\n this.saleId = this.element.dataset.saleId;\n this.orderNumber = this.element.dataset.orderNumber;\n\n this.reload = this.reload.bind(this);\n this.showChangeModal = this.showChangeModal.bind(this);\n this.onRowReload = this.onRowReload.bind(this);\n this.onShowChangeModal = this.onShowChangeModal.bind(this);\n }\n\n connect() {\n this.element.addEventListener('shipping:row:reload', this.onRowReload);\n this.element.addEventListener('shipping:row:showChangeModal', this.onShowChangeModal);\n }\n\n disconnect() {\n this.element.removeEventListener('shipping:row:reload', this.onRowReload);\n this.element.removeEventListener('shipping:row:showChangeModal', this.onShowChangeModal);\n }\n\n onRowReload(_event) {\n this.reload();\n }\n\n onShowChangeModal(event) {\n const status = event.detail?.status;\n this.showChangeModal(status);\n }\n\n reload() {\n const url = `/teamsites/${this.saleId}/shipping/${this.orderNumber}/row`;\n\n this.showLoadingBars();\n\n return fetch(url, {\n method: 'GET',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Accept': 'text/html',\n },\n })\n .then(response => response.text())\n .then(html => {\n this.hideLoadingBars();\n const tempDiv = document.createElement('div');\n tempDiv.innerHTML = html;\n const newRow = tempDiv.firstElementChild;\n\n if (newRow) {\n this.element.parentNode.replaceChild(newRow, this.element);\n }\n })\n .catch(_error => {\n this.hideLoadingBars();\n });\n }\n\n showChangeModal(status) {\n let url = `/teamsites/${this.saleId}/shipping/${this.orderNumber}/fulfillments/change_status`;\n\n if (status !== undefined) {\n url = `${url}?s=${status}`;\n }\n\n this.showLoadingBars();\n\n fetch(url, {\n method: 'GET',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Accept': 'text/html',\n },\n })\n .then(response => response.text())\n .then(html => {\n this.hideLoadingBars();\n\n const modalContainer = document.getElementById('modal-container');\n if (modalContainer) {\n modalContainer.innerHTML = html;\n this.openModal();\n }\n })\n .catch(_error => {\n this.hideLoadingBars();\n });\n }\n\n openModal() {\n // Simple modal opening - can be enhanced with modal library\n const modal = document.getElementById('shipping-fulfillments-popup');\n if (modal) {\n modal.style.display = 'block';\n modal.classList.add('modal-open');\n\n // Add close handler\n const closeBtn = modal.querySelector('.modal-close');\n if (closeBtn) {\n closeBtn.addEventListener('click', () => {\n this.closeModal();\n });\n }\n }\n }\n\n closeModal() {\n const modal = document.getElementById('shipping-fulfillments-popup');\n if (modal) {\n modal.style.display = 'none';\n modal.classList.remove('modal-open');\n\n // Reload the row after modal close\n this.dispatchCustomEvent('shipping:row:reload');\n }\n }\n\n showLoadingBars() {\n document.body.classList.add('is-loading');\n }\n\n hideLoadingBars() {\n document.body.classList.remove('is-loading');\n }\n\n // Helper method to dispatch custom events\n dispatchCustomEvent(eventName, detail = {}) {\n const event = new CustomEvent(eventName, {\n detail,\n bubbles: true,\n cancelable: true,\n });\n this.element.dispatchEvent(event);\n }\n\n // Helper method to get CSRF token\n getCSRFToken() {\n const token = document.querySelector('meta[name=\"csrf-token\"]');\n return token ? token.getAttribute('content') : '';\n }\n\n // Action methods for user interactions\n createShipment() {\n const url = `/teamsites/${this.saleId}/shipping/${this.orderNumber}/shipments/new`;\n window.location.href = url;\n }\n\n trackLabel() {\n this.showChangeModal('track');\n }\n\n refundLabel() {\n this.showChangeModal('refund');\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n // Empty controller - form submission handled by standard browser behavior\n // Controller reference maintained for potential future enhancements\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n connect() {\n this.updateDeleteButtonVisibility();\n this.setupNumberFormatting();\n }\n\n setupNumberFormatting() {\n // Get all number inputs in this row\n const inputs = this.element.querySelectorAll('input[type=\"number\"]');\n inputs.forEach(input => {\n input.addEventListener('change', (e) => this.formatNumber(e.target));\n // Also format on initial load\n this.formatNumber(input);\n });\n }\n\n formatNumber(input) {\n if (input.value === '') return;\n\n const value = parseFloat(input.value);\n if (isNaN(value)) return;\n\n input.value = value.toFixed(2);\n }\n\n addTier(e) {\n e.preventDefault();\n\n // Get the current row\n const currentRow = this.element;\n\n // Clone the current row\n const newRow = currentRow.cloneNode(true);\n\n // Clear all input values in the new row\n newRow.querySelectorAll('input').forEach(input => {\n input.value = '';\n\n // Update the input name to use the next index\n const tbody = currentRow.closest('tbody');\n const newIndex = tbody.children.length;\n const oldName = input.getAttribute('name');\n if (oldName) {\n const newName = oldName.replace(/\\[\\d+\\]/, `[${newIndex}]`);\n input.setAttribute('name', newName);\n input.setAttribute('id', input.getAttribute('id').replace(/_\\d+_/, `_${newIndex}_`));\n }\n });\n\n // Insert the new row after the current row\n currentRow.parentNode.insertBefore(newRow, currentRow.nextSibling);\n\n // Ensure the new row has the correct Stimulus controller attribute\n newRow.setAttribute('data-controller', 'shipping-tiered-rate-modal-tier-row');\n\n // Wait for next frame to ensure Stimulus has initialized the controller\n requestAnimationFrame(() => {\n this.updateAllDeleteButtons();\n });\n }\n\n deleteTier(e) {\n e.preventDefault();\n\n // Get the current row\n const currentRow = this.element;\n\n // Check if this is not the last remaining row\n const tbody = currentRow.closest('tbody');\n if (!tbody) return; // Guard against the tbody not being found\n\n if (tbody.children.length > 1) {\n // If the tier has an ID (existing record), mark it for destruction instead of removing\n const idInput = currentRow.querySelector('input[name$=\"[id]\"]');\n const willBeRemoved = !idInput;\n\n if (idInput) {\n // Hide the row\n currentRow.style.display = 'none';\n\n // Add a hidden _destroy field\n const destroyInput = document.createElement('input');\n destroyInput.type = 'hidden';\n destroyInput.name = idInput.name.replace('[id]', '[_destroy]');\n destroyInput.value = '1';\n currentRow.appendChild(destroyInput);\n } else {\n // For new records, just remove the row but update indices first\n // since we're about to remove the element from the DOM\n }\n\n // Update indices for remaining visible rows\n Array.from(tbody.children).forEach((row, index) => {\n if (row.style.display !== 'none') {\n row.querySelectorAll('input').forEach(input => {\n const oldName = input.getAttribute('name');\n if (oldName) {\n const newName = oldName.replace(/\\[\\d+\\]/, `[${index}]`);\n input.setAttribute('name', newName);\n input.setAttribute('id', input.getAttribute('id').replace(/_\\d+_/, `_${index}_`));\n }\n });\n }\n });\n\n // Store a reference to the table or another stable element that won't be removed\n const table = tbody.closest('table');\n\n if (willBeRemoved) {\n // Now remove the row\n currentRow.remove();\n }\n\n // Update delete button visibility for remaining rows\n if (table) {\n // Find all rows in the tbody and update their delete buttons\n const remainingRows = table.querySelectorAll('tbody tr');\n remainingRows.forEach((row, index) => {\n const deleteButton = row.querySelector('.tier-delete-link-button');\n if (deleteButton) {\n deleteButton.style.display = index === 0 || remainingRows.length === 1 ? 'none' : '';\n }\n });\n }\n } else {\n // If it's the last row, just clear the inputs\n currentRow.querySelectorAll('input').forEach(input => {\n if (!input.name.endsWith('[id]')) {\n input.value = '';\n }\n });\n }\n }\n\n updateDeleteButtonVisibility() {\n if (!this.element.isConnected) return;\n\n const tbody = this.element.closest('tbody');\n if (!tbody) return; // Guard against tbody not being found\n\n const deleteButton = this.element.querySelector('.tier-delete-link-button');\n if (!deleteButton) return; // Guard against button not being found\n\n // Hide delete button if it's the first row or if it's the only row\n const isFirstRow = this.element === tbody.firstElementChild;\n const isOnlyRow = tbody.children.length === 1;\n\n if (isFirstRow || isOnlyRow) {\n deleteButton.style.display = 'none';\n } else {\n deleteButton.style.display = '';\n }\n }\n\n updateAllDeleteButtons() {\n // Check if the element is still in the DOM\n if (!this.element.isConnected) return;\n\n const tbody = this.element.closest('tbody');\n if (!tbody) return; // Guard against tbody not being found\n\n const rows = tbody.querySelectorAll('tr');\n\n rows.forEach((row, index) => {\n const deleteButton = row.querySelector('.tier-delete-link-button');\n if (deleteButton) {\n deleteButton.style.display = index === 0 || rows.length === 1 ? 'none' : '';\n }\n });\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = [];\n\n initialize() {\n this.rateId = this.element.dataset.rateId;\n }\n\n // The edit method is no longer needed since we're using\n // ajax-popup controller directly on the edit link in the view\n\n clone(event) {\n event.preventDefault();\n const rateId = this.element.dataset.rateId;\n // Get the rate name safely with optional chaining to prevent errors\n const rateName = this.element.closest('tr')?.querySelector('td:first-child')?.textContent?.trim() || 'Shipping rate';\n\n // Create FormData object for proper form submission\n const formData = new FormData();\n\n // We'll show success message after the clone completes\n\n fetch(`/dealer_settings/tiered_shipping_rates/${rateId}/clone`, {\n method: 'POST',\n headers: {\n 'X-CSRF-Token': document.querySelector('meta[name=\"csrf-token\"]').content,\n // Let the browser set the correct Content-Type for FormData\n },\n body: formData,\n credentials: 'same-origin',\n })\n .then(response => {\n if (response.ok) {\n // Use the response to redirect and show message\n return response.text().then(() => {\n // Set up an event listener for the Turbolinks load event\n document.addEventListener('turbolinks:load', function scrollToBottom() {\n // Remove the event listener so it only runs once\n document.removeEventListener('turbolinks:load', scrollToBottom);\n\n // Show success message using App.showSuccessFlash if it exists\n if (window.App && typeof window.App.showSuccessFlash === 'function') {\n window.App.showSuccessFlash(`${rateName} has been cloned successfully`);\n }\n\n // Delay the scrolling slightly to ensure the DOM is fully loaded\n setTimeout(() => {\n // Find the shipping rates table container\n const tableContainer = document.querySelector('.shipping-fees-table-container');\n if (tableContainer) {\n // Scroll the table into view and to the bottom\n tableContainer.scrollIntoView({ behavior: 'smooth', block: 'end' });\n\n // Also try to scroll the entire page to see the newly added rate\n const allRates = document.querySelectorAll('tr[data-controller=\"shipping-tiered-rates-rate\"]');\n if (allRates && allRates.length > 0) {\n // Get the last rate (which should be the newly cloned one)\n const lastRate = allRates[allRates.length - 1];\n lastRate.scrollIntoView({ behavior: 'smooth', block: 'center' });\n\n // Add a temporary highlight to make it obvious\n lastRate.style.transition = 'background-color 0.5s ease-in-out';\n lastRate.style.backgroundColor = '#fff8e1'; // Light yellow highlight\n\n // Remove the highlight after a few seconds\n setTimeout(() => {\n lastRate.style.backgroundColor = '';\n }, 3000);\n }\n } else {\n // Fall back to scrolling to the bottom of the page\n window.scrollTo({\n top: document.body.scrollHeight,\n behavior: 'smooth',\n });\n }\n }, 500);\n }, { once: true });\n\n // Navigate to the shipping tab\n Turbolinks.visit('/dealer_settings?t=shipping');\n });\n } else {\n // Error cloning shipping rate\n }\n })\n .catch(error => {\n // Error cloning shipping rate\n });\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['link', 'content'];\n\n initialize() {\n this.link = this.linkTarget;\n this.content = this.contentTarget;\n this.activeHover = false;\n\n // Setup animation properties for slideDown effect\n this.content.style.overflow = 'hidden';\n this.content.style.maxHeight = '0';\n this.content.style.transition = 'max-height 200ms ease-in-out';\n this.content.style.display = 'none';\n\n // Add event listeners\n this.link.addEventListener('mouseover', this.handleMouseOver.bind(this));\n this.link.addEventListener('mouseout', this.handleMouseOut.bind(this));\n this.content.addEventListener('mouseleave', this.handleContentMouseLeave.bind(this));\n }\n\n handleMouseOver() {\n this.activeHover = true;\n\n setTimeout(() => {\n if (this.activeHover) {\n this.slideDown();\n }\n }, 600);\n }\n\n handleMouseOut() {\n this.activeHover = false;\n }\n\n handleContentMouseLeave() {\n this.hideContent();\n }\n\n slideDown() {\n this.content.style.display = 'block';\n // Get the scrollHeight to animate to\n const height = this.content.scrollHeight;\n this.content.style.maxHeight = `${height}px`;\n }\n\n hideContent() {\n this.content.style.maxHeight = '0';\n // Wait for the transition to complete before setting display to none\n setTimeout(() => {\n if (this.content.style.maxHeight === '0px') {\n this.content.style.display = 'none';\n }\n }, 200);\n }\n\n disconnect() {\n // Clean up event listeners\n this.link.removeEventListener('mouseover', this.handleMouseOver);\n this.link.removeEventListener('mouseout', this.handleMouseOut);\n this.content.removeEventListener('mouseleave', this.handleContentMouseLeave);\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n connect() {\n // Use DOM queries instead of targets for reliability in dynamic AJAX content\n // Stimulus 1.1.0 targets may not be resolved when connect() runs after AJAX load\n this.nameField = this.element.querySelector('input[data-target*=\"nameField\"]');\n this.submitButton = this.element.querySelector('input[type=\"submit\"], button[type=\"submit\"]');\n\n if (this.nameField) {\n this.boundUpdateButtonState = this.updateButtonState.bind(this);\n this.nameField.addEventListener('input', this.boundUpdateButtonState);\n }\n\n this.updateButtonState();\n }\n\n disconnect() {\n if (this.nameField && this.boundUpdateButtonState) {\n this.nameField.removeEventListener('input', this.boundUpdateButtonState);\n }\n }\n\n updateButtonState() {\n if (!this.submitButton) return;\n\n const hasValue = this.nameField && this.nameField.value.trim().length > 0;\n this.submitButton.disabled = !hasValue;\n }\n\n updateHeaderName(newName) {\n const sizingOptionId = this.element.dataset.sizingOptionId;\n const accordion = document.querySelector(\n 'tbody[data-controller*=\"sizing-options-accordion\"][data-sizing-option-id=\"' + sizingOptionId + '\"]',\n );\n if (accordion) {\n const headerCell = accordion.querySelector('.sizing-options-list-row td:first-child');\n if (headerCell) {\n headerCell.textContent = newName;\n }\n }\n }\n\n submit(event) {\n event.preventDefault();\n\n const form = this.element;\n const url = form.action;\n const formData = new FormData(form);\n\n const csrfTokenElement = document.querySelector('meta[name=\"csrf-token\"]');\n if (!csrfTokenElement) {\n window.App.showErrorFlash('Security token not found. Please refresh the page.');\n return;\n }\n const csrfToken = csrfTokenElement.content;\n\n const self = this;\n\n // Disable submit button during request\n const submitButton = form.querySelector('input[type=\"submit\"], button[type=\"submit\"]');\n if (submitButton) {\n submitButton.disabled = true;\n }\n\n fetch(url, {\n method: 'PATCH',\n headers: {\n 'X-CSRF-Token': csrfToken,\n 'Accept': 'application/json',\n },\n body: formData,\n })\n .then(function(response) {\n return response.json().then(function(data) {\n return { ok: response.ok, data: data };\n });\n })\n .then(function(result) {\n if (result.ok) {\n window.App.showSuccessFlash(result.data.message || 'Changes saved');\n // Update header name if provided\n if (result.data.name) {\n self.updateHeaderName(result.data.name);\n }\n } else {\n window.App.showErrorFlash(result.data.error || 'Failed to save changes');\n }\n })\n .catch(function(error) {\n console.error('Save error:', error);\n window.App.showErrorFlash('Failed to save changes. Please try again.');\n })\n .finally(function() {\n // Re-enable submit button based on field state\n self.updateButtonState();\n });\n }\n}\n", "/**\n * @file Sizing Option Sizes Drag Controller\n * @description Stimulus controller for handling drag-and-drop functionality of sizing option sizes.\n * Allows vertical reordering of table rows using vanilla JavaScript.\n * No external dependencies required.\n *\n * Key Features:\n * - Vertical drag detection with visual feedback\n * - Smooth reordering animation\n * - Server synchronization via PATCH requests\n * - Touch and mouse support\n * - Debouncing and retry logic\n * - Memory leak prevention\n *\n * @example\n *
\n * ... \n * ... \n * \n */\n\nimport { Controller } from '../stimulus';\n\nconst DRAG_THRESHOLD_PX = 5; // Minimum movement to consider it a drag\n\nexport default class extends Controller {\n initialize() {\n this.debug = false; // Set via data attribute if needed\n\n // Bind methods\n this.handleMouseDown = this.handleMouseDown.bind(this);\n this.handleMouseMove = this.handleMouseMove.bind(this);\n this.handleMouseUp = this.handleMouseUp.bind(this);\n this.handleTouchStart = this.handleTouchStart.bind(this);\n this.handleTouchMove = this.handleTouchMove.bind(this);\n this.handleTouchEnd = this.handleTouchEnd.bind(this);\n\n // Initialize state\n this.isDragging = false;\n this.draggedElement = null;\n this.placeholder = null;\n this.startX = 0;\n this.startY = 0;\n this.currentY = 0;\n this.initialMouseY = 0;\n this.initialElementY = 0;\n\n // Initialize debouncing state\n this.pendingUpdates = new Map(); // Track pending updates per size\n this.updateTimeouts = new Map(); // Track timeouts per size\n this.isUpdating = new Set(); // Track sizes currently being updated\n this.debounceDelay = 300; // Default delay in milliseconds\n this.maxRetries = 3; // Default maximum retry attempts\n this.retryDelay = 1000; // Default delay between retries (ms)\n\n // Initialize lifecycle tracking\n this.isConnected = false;\n this.abortControllers = new Map(); // Track active fetch requests\n this.retryAttempts = new Map(); // Track retry attempts per size\n this.retryTimeouts = new Map(); // Track retry timeouts per size\n }\n\n connect() {\n // Mark as connected\n this.isConnected = true;\n\n // Get data attributes\n this.sizingOptionId = this.element.dataset.sizingOptionId;\n\n // Get configurable debounce delay (default to 300ms if not specified)\n const configuredDelay = parseInt(this.element.dataset.debounceDelay, 10);\n if (!isNaN(configuredDelay) && configuredDelay >= 0) {\n this.debounceDelay = configuredDelay;\n }\n\n // Get configurable max retries (default to 3 if not specified)\n const configuredMaxRetries = parseInt(this.element.dataset.maxRetries, 10);\n if (!isNaN(configuredMaxRetries) && configuredMaxRetries >= 0) {\n this.maxRetries = configuredMaxRetries;\n }\n\n // Get configurable retry delay (default to 1000ms if not specified)\n const configuredRetryDelay = parseInt(this.element.dataset.retryDelay, 10);\n if (!isNaN(configuredRetryDelay) && configuredRetryDelay >= 0) {\n this.retryDelay = configuredRetryDelay;\n }\n\n // Add event listeners\n this.addEventListeners();\n }\n\n disconnect() {\n // Mark as disconnected\n this.isConnected = false;\n\n // Abort all active fetch requests\n this.abortAllRequests();\n\n // Clean up\n this.removeEventListeners();\n this.cleanup();\n this.cleanupPendingUpdates();\n }\n\n addEventListeners() {\n const rows = this.getRowElements();\n rows.forEach(row => {\n row.addEventListener('mousedown', this.handleMouseDown);\n row.addEventListener('touchstart', this.handleTouchStart, { passive: false });\n });\n }\n\n removeEventListeners() {\n const rows = this.getRowElements();\n rows.forEach(row => {\n row.removeEventListener('mousedown', this.handleMouseDown);\n row.removeEventListener('touchstart', this.handleTouchStart);\n });\n\n // Remove document-level listeners\n document.removeEventListener('mousemove', this.handleMouseMove);\n document.removeEventListener('mouseup', this.handleMouseUp);\n document.removeEventListener('touchmove', this.handleTouchMove);\n document.removeEventListener('touchend', this.handleTouchEnd);\n }\n\n getRowElements() {\n return Array.from(this.element.children).filter(\n child => child.tagName === 'TR' && child.dataset.sizeId,\n );\n }\n\n handleMouseDown(event) {\n // Don't start drag if clicking on interactive elements\n if (this.isInteractiveElement(event.target)) {\n return;\n }\n\n // Prevent default to avoid text selection\n event.preventDefault();\n\n const rowElement = event.currentTarget;\n\n // Check for required data-size-id attribute\n if (!rowElement.dataset.sizeId) {\n this.logDebug('Drag failed: Missing data-size-id attribute on element', rowElement);\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Unable to reorder this size. Please refresh the page and try again.');\n }\n return;\n }\n\n this.startDrag(rowElement, event.clientX, event.clientY);\n\n // Add document-level listeners\n document.addEventListener('mousemove', this.handleMouseMove);\n document.addEventListener('mouseup', this.handleMouseUp);\n }\n\n handleTouchStart(event) {\n // Don't start drag if touching interactive elements\n if (this.isInteractiveElement(event.target)) {\n return;\n }\n\n // Prevent scrolling while dragging\n event.preventDefault();\n\n const touch = event.touches[0];\n const rowElement = event.currentTarget;\n\n // Check for required data-size-id attribute\n if (!rowElement.dataset.sizeId) {\n this.logDebug('Drag failed: Missing data-size-id attribute on element', rowElement);\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Unable to reorder this size. Please refresh the page and try again.');\n }\n return;\n }\n\n this.startDrag(rowElement, touch.clientX, touch.clientY);\n\n // Add document-level listeners\n document.addEventListener('touchmove', this.handleTouchMove, { passive: false });\n document.addEventListener('touchend', this.handleTouchEnd);\n }\n\n isInteractiveElement(element) {\n // Check if the element or its parents are interactive\n const interactiveSelectors = ['input', 'button', 'a', 'select', 'textarea', '.ae-btn'];\n return interactiveSelectors.some(selector => element.closest(selector));\n }\n\n handleMouseMove(event) {\n this.updateDrag(event.clientX, event.clientY);\n }\n\n handleTouchMove(event) {\n event.preventDefault();\n const touch = event.touches[0];\n this.updateDrag(touch.clientX, touch.clientY);\n }\n\n handleMouseUp() {\n this.endDrag();\n\n // Remove document-level listeners\n document.removeEventListener('mousemove', this.handleMouseMove);\n document.removeEventListener('mouseup', this.handleMouseUp);\n }\n\n handleTouchEnd() {\n this.endDrag();\n\n // Remove document-level listeners\n document.removeEventListener('touchmove', this.handleTouchMove);\n document.removeEventListener('touchend', this.handleTouchEnd);\n }\n\n startDrag(element, clientX, clientY) {\n this.startX = clientX;\n this.startY = clientY;\n this.currentY = clientY;\n this.draggedElement = element;\n this.initialMouseY = clientY;\n\n // Get initial position\n const rect = element.getBoundingClientRect();\n this.initialElementY = rect.top;\n }\n\n updateDrag(clientX, clientY) {\n this.currentY = clientY;\n\n // Check if we've moved enough to start dragging\n const deltaX = Math.abs(clientX - this.startX);\n const deltaY = Math.abs(clientY - this.startY);\n\n if (!this.isDragging && (deltaX > DRAG_THRESHOLD_PX || deltaY > DRAG_THRESHOLD_PX)) {\n this.isDragging = true;\n this.initializeDragVisuals();\n }\n\n if (this.isDragging) {\n // Update dragged element position (vertical movement)\n const offsetY = clientY - this.initialMouseY;\n this.draggedElement.style.transform = `translateY(${offsetY}px)`;\n\n // Check for reordering\n this.checkForReorder();\n }\n }\n\n initializeDragVisuals() {\n if (!this.draggedElement) return;\n\n // Create placeholder\n this.placeholder = this.draggedElement.cloneNode(true);\n this.placeholder.style.opacity = '0.3';\n this.placeholder.style.pointerEvents = 'none';\n this.placeholder.classList.add('drag-placeholder');\n\n // Style dragged element\n // NOTE: position: relative is required for transform to work correctly during DOM reordering\n this.draggedElement.style.position = 'relative';\n this.draggedElement.style.zIndex = '1000';\n this.draggedElement.style.opacity = '0.5';\n this.draggedElement.style.cursor = 'grabbing';\n this.draggedElement.classList.add('dragging');\n\n // Insert placeholder\n this.draggedElement.parentNode.insertBefore(this.placeholder, this.draggedElement.nextSibling);\n }\n\n checkForReorder() {\n const rows = this.getRowElements().filter(row =>\n row !== this.draggedElement && row !== this.placeholder,\n );\n\n const draggedRect = this.draggedElement.getBoundingClientRect();\n const draggedCenterY = draggedRect.top + draggedRect.height / 2;\n\n for (const row of rows) {\n const rect = row.getBoundingClientRect();\n const centerY = rect.top + rect.height / 2;\n\n // Check if we should swap (vertical logic)\n if (draggedCenterY < centerY && this.isAfter(this.draggedElement, row)) {\n // Move dragged element before this row\n row.parentNode.insertBefore(this.placeholder, row);\n row.parentNode.insertBefore(this.draggedElement, this.placeholder);\n // Adjust transform after DOM reordering to prevent acceleration\n this.adjustAfterReorder();\n } else if (draggedCenterY > centerY && this.isBefore(this.draggedElement, row)) {\n // Move dragged element after this row\n row.parentNode.insertBefore(this.placeholder, row.nextSibling);\n row.parentNode.insertBefore(this.draggedElement, this.placeholder);\n // Adjust transform after DOM reordering to prevent acceleration\n this.adjustAfterReorder();\n }\n }\n }\n\n isAfter(el1, el2) {\n return !!(el1.compareDocumentPosition(el2) & Node.DOCUMENT_POSITION_PRECEDING);\n }\n\n isBefore(el1, el2) {\n return !!(el1.compareDocumentPosition(el2) & Node.DOCUMENT_POSITION_FOLLOWING);\n }\n\n adjustAfterReorder() {\n // After DOM reordering, the element's natural position changes\n // We need to adjust the transform to maintain the same visual position\n\n // Clear transform to get true DOM position\n this.draggedElement.style.transform = '';\n\n // Get new position in DOM (without transform)\n const newRect = this.draggedElement.getBoundingClientRect();\n\n // Calculate offset to maintain same visual position\n // currentY is where the mouse is now, newRect.top is where the element naturally is\n const offsetY = this.currentY - newRect.top;\n\n // Reapply transform with corrected offset\n this.draggedElement.style.transform = `translateY(${offsetY}px)`;\n\n // Update initialMouseY for future calculations\n // This ensures next updateDrag() calculates correctly from the new baseline\n this.initialMouseY = this.currentY - offsetY;\n }\n\n endDrag() {\n if (!this.isDragging) return;\n\n // Remove visual styles\n if (this.draggedElement) {\n this.draggedElement.style.position = '';\n this.draggedElement.style.zIndex = '';\n this.draggedElement.style.opacity = '';\n this.draggedElement.style.cursor = '';\n this.draggedElement.style.transform = '';\n this.draggedElement.classList.remove('dragging');\n\n // Get new position\n const rows = this.getRowElements();\n const newPosition = rows.indexOf(this.draggedElement) + 1;\n\n // Debounce the server update\n this.debouncedUpdateSizePosition(this.draggedElement, newPosition);\n }\n\n // Cleanup\n this.cleanup();\n }\n\n cleanup() {\n if (this.placeholder && this.placeholder.parentNode) {\n this.placeholder.parentNode.removeChild(this.placeholder);\n }\n\n this.isDragging = false;\n this.draggedElement = null;\n this.placeholder = null;\n this.startX = 0;\n this.startY = 0;\n this.currentY = 0;\n this.initialMouseY = 0;\n this.initialElementY = 0;\n }\n\n cleanupPendingUpdates() {\n // Clear all pending timeouts\n this.updateTimeouts.forEach((timeoutId) => {\n clearTimeout(timeoutId);\n });\n this.updateTimeouts.clear();\n\n // Clear all retry timeouts\n this.retryTimeouts.forEach((timeoutId) => {\n clearTimeout(timeoutId);\n });\n this.retryTimeouts.clear();\n\n // Clear pending updates\n this.pendingUpdates.clear();\n\n // Clear updating set\n this.isUpdating.clear();\n\n // Clear retry attempts\n this.retryAttempts.clear();\n }\n\n abortAllRequests() {\n // Abort all active fetch requests\n this.abortControllers.forEach((controller) => {\n controller.abort();\n });\n this.abortControllers.clear();\n }\n\n debouncedUpdateSizePosition(element, position) {\n const sizeId = element.dataset.sizeId;\n if (!sizeId) {\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Unable to save size order. Missing size information.');\n }\n return;\n }\n\n // Cancel any existing timeout for this size\n if (this.updateTimeouts.has(sizeId)) {\n clearTimeout(this.updateTimeouts.get(sizeId));\n this.updateTimeouts.delete(sizeId);\n }\n\n // Store the pending update (reset retry count for new user action)\n this.pendingUpdates.set(sizeId, { element, position, retryCount: 0 });\n\n // If this size is already being updated, wait for it to complete\n if (this.isUpdating.has(sizeId)) {\n // The update will be retried after the current one completes\n return;\n }\n\n // Set a new timeout\n const timeoutId = setTimeout(() => {\n // Check if controller is still connected first\n if (!this.isConnected) {\n return;\n }\n\n // Get the latest pending update for this size\n const pendingUpdate = this.pendingUpdates.get(sizeId);\n if (pendingUpdate) {\n // Don't delete the pending update yet - let updateSizePosition handle it\n // This allows the success handler to check for queued updates\n this.updateTimeouts.delete(sizeId);\n this.updateSizePosition(pendingUpdate.element, pendingUpdate.position);\n }\n }, this.debounceDelay);\n\n this.updateTimeouts.set(sizeId, timeoutId);\n }\n\n updateSizePosition(element, position) {\n const sizeId = element.dataset.sizeId;\n if (!sizeId) {\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Unable to save size order. Missing size information.');\n }\n return;\n }\n\n // Validate required data attributes\n if (!this.sizingOptionId) {\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Unable to save size order. Please refresh the page and try again.');\n }\n return;\n }\n\n // Check if controller is still connected\n if (!this.isConnected) {\n return;\n }\n\n // Mark as updating\n this.isUpdating.add(sizeId);\n\n // Create abort controller for this request\n const abortController = new AbortController();\n\n // Cancel any existing request for this size\n if (this.abortControllers.has(sizeId)) {\n this.abortControllers.get(sizeId).abort();\n }\n this.abortControllers.set(sizeId, abortController);\n\n const url = `/dealer_settings/sizing_options/${this.sizingOptionId}/sizes/${sizeId}/reorder`;\n const token = document.querySelector('meta[name=\"csrf-token\"]')?.getAttribute('content');\n\n // Show loading feedback (only if still connected)\n if (this.isConnected) {\n element.style.opacity = '0.6';\n element.classList.add('updating');\n }\n\n fetch(url, {\n method: 'PATCH',\n headers: {\n 'X-CSRF-Token': token,\n 'Content-Type': 'application/json',\n 'Accept': 'application/json',\n },\n body: JSON.stringify({\n position: position,\n }),\n credentials: 'same-origin',\n signal: abortController.signal,\n })\n .then(response => {\n // Check if controller is still connected before processing\n if (!this.isConnected) {\n throw new Error('Controller disconnected');\n }\n\n if (!response.ok) {\n return response.json().then(errorData => {\n const error = new Error(errorData.error || `Server error: ${response.status}`);\n error.status = response.status; // Add status property for reliable detection\n throw error;\n });\n }\n return response.json();\n })\n .then(data => {\n // Check if controller is still connected before updating UI\n if (!this.isConnected) {\n // Clean up tracking even if disconnected\n this.abortControllers.delete(sizeId);\n this.isUpdating.delete(sizeId);\n return;\n }\n\n // Show success message\n if (window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash(data.message || 'Size order updated');\n }\n\n // Remove loading state\n element.style.opacity = '';\n element.classList.remove('updating');\n\n // Clean up abort controller\n this.abortControllers.delete(sizeId);\n\n // Mark as no longer updating\n this.isUpdating.delete(sizeId);\n\n // Clear retry attempts on successful completion\n this.retryAttempts.delete(sizeId);\n\n // Check if there's a pending update for this size\n if (this.pendingUpdates.has(sizeId) && this.isConnected) {\n const pendingUpdate = this.pendingUpdates.get(sizeId);\n // Always clear the current pending update first\n this.pendingUpdates.delete(sizeId);\n\n // Only retry if the position is actually different\n if (pendingUpdate.position !== position) {\n // Retry with the latest position\n this.updateSizePosition(pendingUpdate.element, pendingUpdate.position);\n }\n }\n })\n .catch(error => {\n // Don't show error for aborted requests\n if (error.name === 'AbortError') {\n return;\n }\n\n // Check if controller is still connected before handling error\n if (!this.isConnected) {\n // Clean up tracking even if disconnected\n this.abortControllers.delete(sizeId);\n this.isUpdating.delete(sizeId);\n return;\n }\n\n // Remove loading state\n element.style.opacity = '';\n element.classList.remove('updating');\n\n // Clean up abort controller\n this.abortControllers.delete(sizeId);\n\n // Mark as no longer updating\n this.isUpdating.delete(sizeId);\n\n // Show specific error message\n let errorMessage = 'Failed to update size order. ';\n\n // Check error.status first (most reliable), then fall back to message string matching\n if (error.status === 404 || error.message.includes('404')) {\n errorMessage += 'Size not found.';\n } else if (error.status === 401 || error.message.includes('401') || error.message.toLowerCase().includes('unauthorized')) {\n errorMessage += 'Please sign in and try again.';\n } else if (error.status === 422 || error.message.includes('422') || error.message.includes('Invalid position')) {\n errorMessage += 'Invalid position.';\n } else if (error.message.includes('Network')) {\n errorMessage += 'Please check your internet connection.';\n } else if (error.message === 'Controller disconnected') {\n // Don't show error for controller disconnection\n return;\n } else {\n errorMessage += error.message || 'Please try again.';\n }\n\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash(errorMessage);\n }\n\n const currentRetries = this.retryAttempts.get(sizeId) || 0;\n\n // Check if we've exceeded max retries\n if (currentRetries >= this.maxRetries) {\n // Show final error message and clean up\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash(`Failed to update size order after ${this.maxRetries} retries. Please try again manually.`);\n }\n this.retryAttempts.delete(sizeId);\n return;\n }\n\n // Increment retry count\n this.retryAttempts.set(sizeId, currentRetries + 1);\n\n // Retry with fixed delay\n const retryTimeoutId = setTimeout(() => {\n // Clear the timeout from tracking\n this.retryTimeouts.delete(sizeId);\n\n // Check if still connected before retrying\n if (this.isConnected) {\n // Clear updating state to allow retry\n this.isUpdating.delete(sizeId);\n this.updateSizePosition(element, position);\n }\n }, this.retryDelay);\n\n // Track the retry timeout\n this.retryTimeouts.set(sizeId, retryTimeoutId);\n });\n }\n\n logDebug() {\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['addSizeLink', 'sizeForm', 'nameField', 'submitButton'];\n\n showSizeForm(event) {\n event.preventDefault();\n if (this.hasAddSizeLinkTarget) {\n this.addSizeLinkTarget.classList.add('ae-hidden');\n }\n if (this.hasSizeFormTarget) {\n this.sizeFormTarget.classList.remove('ae-hidden');\n }\n if (this.hasNameFieldTarget) {\n this.nameFieldTarget.focus();\n }\n // Ensure button is disabled when form appears (field is empty)\n this.updateButtonState();\n }\n\n updateButtonState() {\n if (!this.hasSubmitButtonTarget) return;\n\n const hasValue = this.hasNameFieldTarget && this.nameFieldTarget.value.trim().length > 0;\n this.submitButtonTarget.disabled = !hasValue;\n }\n\n submit(event) {\n event.preventDefault();\n\n // Defensive check for nameField target\n if (!this.hasNameFieldTarget) {\n window.App.showErrorFlash('Form not ready. Please try again.');\n return;\n }\n\n const name = this.nameFieldTarget.value.trim();\n if (!name) return;\n\n const sizingOptionId = this.element.dataset.sizingOptionId;\n if (!sizingOptionId) {\n window.App.showErrorFlash('Unable to add size: missing sizing option ID');\n return;\n }\n\n const url = '/dealer_settings/sizing_options/' + sizingOptionId + '/sizes';\n const csrfTokenElement = document.querySelector('meta[name=\"csrf-token\"]');\n if (!csrfTokenElement) {\n window.App.showErrorFlash('Security token not found. Please refresh the page.');\n return;\n }\n const csrfToken = csrfTokenElement.content;\n\n const self = this;\n\n fetch(url, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': csrfToken,\n 'Accept': 'application/json',\n },\n body: JSON.stringify({ name: name }),\n })\n .then(function(response) {\n if (response.ok) {\n // Reload accordion content instead of full page for better UX\n self.reloadAccordionContent();\n } else {\n return response.json().then(function(data) {\n window.App.showErrorFlash(data.error || 'Failed to add size');\n });\n }\n })\n .catch(function(error) {\n console.error('Add size error:', error);\n window.App.showErrorFlash('Failed to add size. Please try again.');\n });\n }\n\n reloadAccordionContent() {\n const sizingOptionId = this.element.dataset.sizingOptionId;\n\n // Find the accordion by sizing option ID (more reliable than closest() for nested tables)\n const accordionElement = document.querySelector(\n '[data-controller*=\"sizing-options-accordion\"][data-sizing-option-id=\"' + sizingOptionId + '\"]',\n );\n\n if (accordionElement && window.Stimulus && window.Stimulus.application) {\n const accordionController = window.Stimulus.application.getControllerForElementAndIdentifier(\n accordionElement,\n 'sizing-options-accordion',\n );\n if (accordionController) {\n // Reset loaded state and reload content\n accordionController.isLoaded = false;\n accordionController.loadContent();\n window.App.showSuccessFlash('Size added successfully');\n return;\n }\n }\n // Fallback to full page reload only if accordion not found\n window.location.reload();\n }\n\n cancel(event) {\n event.preventDefault();\n if (this.hasNameFieldTarget) {\n this.nameFieldTarget.value = '';\n }\n if (this.hasSizeFormTarget) {\n this.sizeFormTarget.classList.add('ae-hidden');\n }\n if (this.hasAddSizeLinkTarget) {\n this.addSizeLinkTarget.classList.remove('ae-hidden');\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n click(event) {\n event.preventDefault();\n\n const newSizingOption = document.getElementById('new-sizing-option');\n if (newSizingOption) {\n newSizingOption.classList.add('ae-hidden');\n\n // Reset the form\n const form = newSizingOption.querySelector('form');\n if (form) {\n form.reset();\n }\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n removeSize(event) {\n event.preventDefault();\n\n if (!confirm('Are you sure you want to remove this size?')) return;\n\n const sizingOptionId = this.element.dataset.sizingOptionId;\n const sizeId = this.element.dataset.sizeId;\n const url = '/dealer_settings/sizing_options/' + sizingOptionId + '/sizes/' + sizeId;\n const csrfTokenElement = document.querySelector('meta[name=\"csrf-token\"]');\n if (!csrfTokenElement) {\n window.App.showErrorFlash('Security token not found. Please refresh the page.');\n return;\n }\n const csrfToken = csrfTokenElement.content;\n\n const self = this;\n\n fetch(url, {\n method: 'DELETE',\n headers: {\n 'X-CSRF-Token': csrfToken,\n 'Accept': 'application/json',\n },\n })\n .then(function(response) {\n if (response.ok) {\n self.element.remove();\n window.App.showSuccessFlash('Size removed successfully');\n } else {\n return response.json().then(function(data) {\n window.App.showErrorFlash(data.error || 'Failed to remove size');\n });\n }\n })\n .catch(function(error) {\n console.error('Remove size error:', error);\n window.App.showErrorFlash('Failed to remove size. Please try again.');\n });\n }\n}\n", "import { Controller } from '../stimulus';\nimport CSRFTokenMixin from '../mixins/csrf_token_mixin';\nimport StimulusReinitMixin from '../mixins/stimulus_reinit_mixin';\n\n/**\n * Sizing Options Accordion Controller\n *\n * Handles accordion expansion/collapse for sizing options in dealer settings.\n * Features:\n * - AJAX loading of sizing option content on first expand\n * - One-at-a-time accordion behavior (expanding one collapses others)\n * - Secure HTML injection using DOMParser\n * - Delete confirmation for editable sizing options\n *\n * Usage:\n *
\n * \n * ... \n * \n * sizing-options-accordion#toggle\">Edit \n * sizing-options-accordion#delete\">Delete \n * \n * \n * \n * \n *
\n * \n * \n * \n */\nexport default class extends Controller {\n static targets = ['content', 'contentContainer', 'toggleButton'];\n\n connect() {\n // Apply mixins\n Object.assign(this, CSRFTokenMixin);\n Object.assign(this, StimulusReinitMixin);\n\n this.isExpanded = false;\n this.isLoaded = false;\n this.isLoading = false;\n }\n\n /**\n * Toggle accordion open/closed\n * @param {Event} event - Click event\n */\n toggle(event) {\n event.preventDefault();\n\n if (this.isExpanded) {\n this.collapse();\n } else {\n this.collapseOthers();\n this.expand();\n }\n }\n\n /**\n * Expand the accordion and load content if not already loaded\n */\n expand() {\n if (this.isLoading) {\n return;\n }\n\n if (!this.isLoaded) {\n this.loadContent();\n }\n\n if (this.hasContentTarget) {\n this.contentTarget.classList.remove('ae-hidden');\n }\n\n if (this.hasToggleButtonTarget) {\n this.toggleButtonTarget.classList.add('active');\n }\n\n this.isExpanded = true;\n }\n\n /**\n * Collapse the accordion\n */\n collapse() {\n if (this.hasContentTarget) {\n this.contentTarget.classList.add('ae-hidden');\n }\n\n if (this.hasToggleButtonTarget) {\n this.toggleButtonTarget.classList.remove('active');\n }\n\n this.isExpanded = false;\n }\n\n /**\n * Collapse all other sizing option accordions\n */\n collapseOthers() {\n const allControllers = document.querySelectorAll('[data-controller*=\"sizing-options-accordion\"]');\n\n allControllers.forEach(el => {\n if (el !== this.element) {\n const controller = this.application.getControllerForElementAndIdentifier(el, 'sizing-options-accordion');\n if (controller && controller.isExpanded) {\n controller.collapse();\n }\n }\n });\n }\n\n /**\n * Load accordion content via AJAX\n */\n loadContent() {\n const url = this.element.dataset.url;\n\n if (!url) {\n this.showError('No URL configured for this sizing option.');\n return;\n }\n\n this.isLoading = true;\n this.showLoading();\n\n const csrfToken = document.querySelector('meta[name=\"csrf-token\"]');\n const headers = {\n 'Accept': 'text/html',\n 'X-Requested-With': 'XMLHttpRequest',\n };\n\n if (csrfToken) {\n headers['X-CSRF-Token'] = csrfToken.getAttribute('content');\n }\n\n fetch(url, {\n method: 'GET',\n headers: headers,\n credentials: 'same-origin',\n })\n .then(response => {\n if (!response.ok) {\n throw new Error('Failed to load content');\n }\n return response.text();\n })\n .then(html => {\n // Use DOMParser for secure HTML injection (defense-in-depth)\n const parser = new DOMParser();\n const doc = parser.parseFromString(html, 'text/html');\n\n if (this.hasContentContainerTarget) {\n // Clear existing content safely\n while (this.contentContainerTarget.firstChild) {\n this.contentContainerTarget.removeChild(this.contentContainerTarget.firstChild);\n }\n\n // Append parsed content (scripts won't execute automatically)\n while (doc.body.firstChild) {\n this.contentContainerTarget.appendChild(doc.body.firstChild);\n }\n\n // Reinitialize Stimulus controllers in the loaded content\n this.reinitializeStimulusControllers(this.contentContainerTarget);\n }\n\n this.isLoaded = true;\n this.isLoading = false;\n })\n .catch(() => {\n this.isLoading = false;\n this.showError('Error loading content. Please try again.');\n\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Failed to load sizing option details.');\n }\n });\n }\n\n /**\n * Show loading state in content container\n */\n showLoading() {\n if (this.hasContentContainerTarget) {\n const loadingDiv = document.createElement('div');\n loadingDiv.className = 'ae-u-p-20 ae-text--center';\n loadingDiv.textContent = 'Loading...';\n\n // Clear and add loading indicator\n while (this.contentContainerTarget.firstChild) {\n this.contentContainerTarget.removeChild(this.contentContainerTarget.firstChild);\n }\n this.contentContainerTarget.appendChild(loadingDiv);\n }\n }\n\n /**\n * Show error message in content container\n * @param {string} message - Error message to display\n */\n showError(message) {\n if (this.hasContentContainerTarget) {\n const errorDiv = document.createElement('div');\n errorDiv.className = 'ae-u-p-20 ae-text--center ae-text--danger';\n errorDiv.textContent = message;\n\n // Clear and add error message\n while (this.contentContainerTarget.firstChild) {\n this.contentContainerTarget.removeChild(this.contentContainerTarget.firstChild);\n }\n this.contentContainerTarget.appendChild(errorDiv);\n }\n }\n\n /**\n * Create a spinner icon element\n * @returns {HTMLElement} - Spinner icon element\n */\n createSpinnerIcon() {\n const icon = document.createElement('i');\n icon.className = 'fa fa-fw fa-spinner fa-spin';\n return icon;\n }\n\n /**\n * Delete the sizing option (with confirmation)\n * @param {Event} event - Click event\n */\n delete(event) {\n event.preventDefault();\n\n const button = event.currentTarget;\n\n // Check if button is disabled\n if (button.disabled) {\n return;\n }\n\n const sizingOptionId = this.element.dataset.sizingOptionId;\n\n if (!sizingOptionId) {\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Unable to delete: sizing option ID not found.');\n }\n return;\n }\n\n // Confirm deletion\n if (!window.confirm('Are you sure you want to delete this sizing option? This action cannot be undone.')) {\n return;\n }\n\n // Store original button content for restoration\n const originalChildren = Array.from(button.childNodes).map(node => node.cloneNode(true));\n\n // Disable button during deletion and show spinner\n button.disabled = true;\n while (button.firstChild) {\n button.removeChild(button.firstChild);\n }\n button.appendChild(this.createSpinnerIcon());\n\n const url = `/dealer_settings/sizing_options/${sizingOptionId}`;\n const csrfToken = document.querySelector('meta[name=\"csrf-token\"]');\n const headers = {\n 'Accept': 'application/json',\n 'X-Requested-With': 'XMLHttpRequest',\n };\n\n if (csrfToken) {\n headers['X-CSRF-Token'] = csrfToken.getAttribute('content');\n }\n\n fetch(url, {\n method: 'DELETE',\n headers: headers,\n credentials: 'same-origin',\n })\n .then(response => {\n if (!response.ok) {\n return response.json().then(data => {\n throw new Error(data.error || 'Failed to delete sizing option');\n });\n }\n return response;\n })\n .then(() => {\n // Remove the row from the table\n this.element.remove();\n\n if (window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash('Sizing option deleted successfully.');\n }\n })\n .catch(error => {\n // Re-enable button and restore original content\n button.disabled = false;\n while (button.firstChild) {\n button.removeChild(button.firstChild);\n }\n originalChildren.forEach(child => button.appendChild(child));\n\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash(error.message || 'Failed to delete sizing option.');\n }\n });\n }\n}\n", "import { Controller } from '../stimulus';\n\n/**\n * Sizing Options Filter Controller\n *\n * Provides client-side filtering for the sizing options table in dealer settings.\n * Filters sizing option rows by name using case-insensitive substring matching.\n *\n * Features:\n * - Real-time filtering on input (no debounce for instant feedback)\n * - MutationObserver to handle dynamically added rows from infinite scroll\n * - Empty state display when no matches found\n *\n * Usage:\n *
\n *
sizing-options-filter#filter\">\n *\n *
\n * No sizing options match your filter.\n *
\n *\n *
\n *
\n */\nexport default class extends Controller {\n static targets = ['input', 'table', 'emptyState'];\n\n connect() {\n this.setupRowObserver();\n }\n\n disconnect() {\n if (this.rowObserver) {\n this.rowObserver.disconnect();\n this.rowObserver = null;\n }\n }\n\n /**\n * Filter sizing option rows based on search term\n * Triggered on input event\n */\n filter() {\n const searchTerm = this.inputTarget.value.toLowerCase().trim();\n const rows = document.querySelectorAll('tbody[data-sizing-options-filter-searchable]');\n let visibleCount = 0;\n\n for (let i = 0; i < rows.length; i++) {\n const row = rows[i];\n const searchable = row.getAttribute('data-sizing-options-filter-searchable') || '';\n\n if (searchTerm === '' || searchable.indexOf(searchTerm) !== -1) {\n row.style.display = '';\n visibleCount++;\n } else {\n row.style.display = 'none';\n }\n }\n\n this.updateEmptyState(visibleCount, rows.length);\n }\n\n /**\n * Update empty state visibility based on filter results\n * @param {number} visibleCount - Number of visible rows\n * @param {number} totalCount - Total number of rows\n */\n updateEmptyState(visibleCount, totalCount) {\n if (!this.hasEmptyStateTarget || !this.hasTableTarget) {\n return;\n }\n\n if (visibleCount === 0 && totalCount > 0) {\n this.emptyStateTarget.style.display = 'block';\n this.tableTarget.style.display = 'none';\n } else {\n this.emptyStateTarget.style.display = 'none';\n this.tableTarget.style.display = '';\n }\n }\n\n /**\n * Set up MutationObserver to handle dynamically added rows from infinite scroll\n * Re-filters when new rows are added and a filter is active\n */\n setupRowObserver() {\n const table = document.getElementById('sizing-options-list');\n if (!table) {\n return;\n }\n\n const self = this;\n this.rowObserver = new window.MutationObserver(function(mutations) {\n const hasNewRows = mutations.some(function(m) {\n return m.type === 'childList' && m.addedNodes.length > 0;\n });\n\n if (hasNewRows && self.inputTarget.value.trim() !== '') {\n self.filter();\n }\n });\n\n this.rowObserver.observe(table, { childList: true });\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n connect() {\n this.boundHandleSuccess = this.handleSuccess.bind(this);\n this.boundHandleError = this.handleError.bind(this);\n\n this.element.addEventListener('dropzone:uploadsuccess', this.boundHandleSuccess);\n this.element.addEventListener('dropzone:uploaderror', this.boundHandleError);\n }\n\n disconnect() {\n if (this.boundHandleSuccess) {\n this.element.removeEventListener('dropzone:uploadsuccess', this.boundHandleSuccess);\n }\n if (this.boundHandleError) {\n this.element.removeEventListener('dropzone:uploaderror', this.boundHandleError);\n }\n }\n\n handleSuccess(event) {\n const { response } = event.detail;\n\n if (response && response.thumb_url) {\n // Add new slide to the DOM dynamically instead of reloading\n this.addSlideToDOM(response);\n\n // Show success message using the dropzone's built-in messaging\n this.showSuccessMessage(response.message);\n }\n }\n\n handleError(event) {\n const { error } = event.detail;\n console.error('Slide upload failed:', error);\n\n // Show error message if App.showErrorFlash is available\n if (window.App && typeof window.App.showErrorFlash === 'function') {\n window.App.showErrorFlash('Failed to upload slide. Please try again.');\n }\n }\n\n addSlideToDOM(slideData) {\n // Find the slides container (the ul.ae-list-inline that contains slides)\n const slidesContainer = this.findSlidesContainer();\n if (!slidesContainer) {\n // Could not find slides container - skip processing\n return;\n }\n\n // Create new slide element from template\n const slideHtml = this.generateSlideHtml(slideData);\n\n // Find the dropzone element (it should be the first li in the container)\n const dropzoneElement = slidesContainer.querySelector('li.uploaded-img-container .dropzone')?.closest('li');\n\n if (dropzoneElement) {\n // Insert the new slide after the dropzone (to the right)\n dropzoneElement.insertAdjacentHTML('afterend', slideHtml);\n } else {\n // Fallback: append to the container\n slidesContainer.insertAdjacentHTML('beforeend', slideHtml);\n }\n\n // Reinitialize Rails UJS for the new delete links\n this.reinitializeRailsUJS(slidesContainer);\n }\n\n generateSlideHtml(slideData) {\n const { slide_id, thumb_url } = slideData;\n const saleId = this.getSaleId();\n const deleteUrl = `/teamsites/${saleId}/branding_slides/${slide_id}.js`;\n\n return `\n
\n \u00D7 \n \n `;\n }\n\n findSlidesContainer() {\n // Look for the slides container starting from the dropzone element\n // The structure should be: .ae-field > ul.ae-list-inline (contains slides)\n const dropzoneForm = this.element.closest('.dropzone');\n if (!dropzoneForm) {\n return null;\n }\n\n const aeField = dropzoneForm.closest('.ae-field');\n if (!aeField) {\n return null;\n }\n\n return aeField.querySelector('ul.ae-list-inline');\n }\n\n getSaleId() {\n // Extract sale ID from the current URL or from data attributes\n // URL pattern: /teamsites/:sale_id/branding\n const pathMatch = window.location.pathname.match(/\\/teamsites\\/(\\d+)/);\n if (pathMatch) {\n return pathMatch[1];\n }\n\n // Fallback: try to get from a data attribute if available\n const saleElement = document.querySelector('[data-sale-id]');\n if (saleElement) {\n return saleElement.dataset.saleId;\n }\n\n // Could not determine sale ID - skip operation\n return null;\n }\n\n reinitializeRailsUJS(container) {\n // Reinitialize Rails UJS for new elements\n // This ensures that data-remote, data-method, and data-confirm attributes work\n if (window.Rails && typeof window.Rails.start === 'function') {\n // Rails UJS is available, reinitialize for the container\n const links = container.querySelectorAll('a[data-remote], a[data-method]');\n links.forEach(link => {\n // Remove any existing event listeners to avoid duplicates\n if (link._ujsInitialized) {\n return;\n }\n link._ujsInitialized = true;\n });\n }\n }\n\n showSuccessMessage(message) {\n // Try to use App.showSuccessFlash if available\n if (window.App && typeof window.App.showSuccessFlash === 'function') {\n window.App.showSuccessFlash(message);\n } else {\n // Fallback: message display not available\n }\n }\n}\n", "import { Controller } from 'stimulus';\n\nexport default class extends Controller {\n static targets = ['header', 'body'];\n\n connect() {\n this.currentSort = { column: null, direction: 'asc' };\n this.detectInitialSort();\n }\n\n detectInitialSort() {\n const headers = this.headerTarget.querySelectorAll('th');\n const self = this;\n\n headers.forEach(function(header, index) {\n if (header.classList.contains('sorttable_sorted')) {\n self.currentSort = { column: index, direction: 'asc' };\n } else if (header.classList.contains('sorttable_sorted_reverse')) {\n self.currentSort = { column: index, direction: 'desc' };\n }\n });\n }\n\n sort(event) {\n const header = event.currentTarget;\n\n // Skip if marked as non-sortable\n if (header.classList.contains('sorttable_nosort')) {\n return;\n }\n\n const columnIndex = this.getColumnIndex(header);\n const direction = this.getNewDirection(columnIndex);\n\n this.sortTable(columnIndex, direction, header);\n this.updateSortIndicators(header, direction);\n\n this.currentSort = { column: columnIndex, direction: direction };\n }\n\n getColumnIndex(header) {\n const headers = this.headerTarget.querySelectorAll('th');\n return Array.prototype.indexOf.call(headers, header);\n }\n\n getNewDirection(columnIndex) {\n if (this.currentSort.column === columnIndex) {\n return this.currentSort.direction === 'asc' ? 'desc' : 'asc';\n }\n return 'asc';\n }\n\n sortTable(columnIndex, direction, header) {\n const tbody = this.bodyTarget;\n const rows = Array.prototype.slice.call(tbody.querySelectorAll('tr'));\n const sortType = header.getAttribute('data-sort-type') || 'text';\n\n rows.sort(function(a, b) {\n const aCell = a.cells[columnIndex];\n const bCell = b.cells[columnIndex];\n\n // Use custom sort key if available (sorttable_customkey attribute)\n const aValue = aCell.getAttribute('sorttable_customkey') || aCell.textContent.trim();\n const bValue = bCell.getAttribute('sorttable_customkey') || bCell.textContent.trim();\n\n let comparison = 0;\n if (sortType === 'numeric') {\n comparison = parseFloat(aValue) - parseFloat(bValue);\n } else {\n comparison = aValue.localeCompare(bValue);\n }\n\n return direction === 'desc' ? -comparison : comparison;\n });\n\n // Re-append sorted rows\n rows.forEach(function(row) {\n tbody.appendChild(row);\n });\n }\n\n updateSortIndicators(activeHeader, direction) {\n const headers = this.headerTarget.querySelectorAll('th');\n\n // Remove all sort classes\n headers.forEach(function(header) {\n header.classList.remove('sorttable_sorted', 'sorttable_sorted_reverse');\n });\n\n // Add appropriate class to active header\n if (direction === 'asc') {\n activeHeader.classList.add('sorttable_sorted');\n } else {\n activeHeader.classList.add('sorttable_sorted_reverse');\n }\n }\n}\n", "/**\n * Swatch Item Controller\n *\n * This is a generic controller for individual color swatch items.\n * It works in both master product lists and search results.\n *\n * Usage:\n *
swatch-item#changeCurrentColor\">\n * \n *\n * This controller handles:\n * - Changing the current displayed color variant when a swatch is clicked\n * - Updating the background image of the product display\n * - Toggling the selected class on the swatch items\n */\nimport { Controller } from '../stimulus';\n\nexport default class extends Controller {\n initialize() {\n this.productId = this.element.dataset.productId;\n this.colorVariantId = this.element.dataset.colorVariantId;\n this.largeUrl = this.element.dataset.largeUrl;\n }\n\n changeCurrentColor(e) {\n if (e && e.preventDefault) {\n e.preventDefault();\n }\n\n try {\n const li = e.target.closest('.product-list-item');\n if (!li) {\n // Could not find product list item\n return;\n }\n\n const currentPhoto = li.querySelector('.product-photo-current');\n if (currentPhoto && this.largeUrl) {\n const backgroundImage = `url('${this.largeUrl}')`;\n currentPhoto.style.backgroundImage = backgroundImage;\n }\n\n const swatchItems = li.querySelectorAll('.photo-swatch-item');\n swatchItems.forEach(item => {\n item.classList.remove('ae-selected');\n });\n\n this.element.classList.add('ae-selected');\n\n const swatchesContainer = li.querySelector(`[data-product-id=\"${this.productId}\"]`);\n if (swatchesContainer && this.colorVariantId) {\n swatchesContainer.setAttribute('data-selected-color-variant-id', this.colorVariantId);\n }\n\n // Update product link href to include color_variant_id parameter\n const productLink = li.querySelector('a.ae-clickable, a.product-list-item-link');\n if (productLink && productLink.href && this.colorVariantId) {\n const url = new URL(productLink.href);\n url.searchParams.set('color_variant_id', this.colorVariantId);\n productLink.href = url.toString();\n }\n } catch (error) {\n // Error changing color variant - silently handled\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['chevron', 'toggleExpand'];\n\n connect() {\n // Set initial state\n this.isExpanded = false;\n\n // Bind event handlers\n this.boundHandleOutsideClick = this.handleOutsideClick.bind(this);\n this.boundHandleEscape = this.handleEscape.bind(this);\n\n // Listen for clicks outside sidebar\n document.addEventListener('click', this.boundHandleOutsideClick);\n document.addEventListener('keydown', this.boundHandleEscape);\n }\n\n disconnect() {\n // Clean up event listeners\n document.removeEventListener('click', this.boundHandleOutsideClick);\n document.removeEventListener('keydown', this.boundHandleEscape);\n }\n\n toggleSidebar(event) {\n if (event) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n if (this.isExpanded) {\n this.collapse();\n } else {\n this.expand();\n }\n }\n\n expand() {\n this.isExpanded = true;\n this.element.classList.add('ae-sidebar-expand');\n\n // Get current styles and update width\n const currentStyles = this.element.style.cssText;\n if (currentStyles) {\n // Replace width values in the inline styles\n const updatedStyles = currentStyles\n .replace(/width:\\s*[^;]+;/gi, 'width: 60% !important;')\n .replace(/min-width:\\s*[^;]+;/gi, 'min-width: 600px !important;');\n this.element.style.cssText = updatedStyles;\n }\n\n // Update chevron direction\n if (this.hasChevronTarget) {\n this.chevronTarget.classList.remove('fa-chevron-left');\n this.chevronTarget.classList.add('fa-chevron-right');\n }\n\n // Stimulus 1.1.0 doesn't have dispatch method - use custom event instead\n const event = new CustomEvent('t-cart-sidebar-animation:expanded', {\n bubbles: true,\n detail: { controller: this },\n });\n this.element.dispatchEvent(event);\n }\n\n collapse() {\n this.isExpanded = false;\n this.element.classList.remove('ae-sidebar-expand');\n\n // Get current styles and restore original width\n const currentStyles = this.element.style.cssText;\n if (currentStyles) {\n // Replace width values in the inline styles\n const updatedStyles = currentStyles\n .replace(/width:\\s*[^;]+;/gi, 'width: 30% !important;')\n .replace(/min-width:\\s*[^;]+;/gi, 'min-width: 300px !important;');\n this.element.style.cssText = updatedStyles;\n }\n\n // Update chevron direction\n if (this.hasChevronTarget) {\n this.chevronTarget.classList.remove('fa-chevron-right');\n this.chevronTarget.classList.add('fa-chevron-left');\n }\n\n // Stimulus 1.1.0 doesn't have dispatch method - use custom event instead\n const event = new CustomEvent('t-cart-sidebar-animation:collapsed', {\n bubbles: true,\n detail: { controller: this },\n });\n this.element.dispatchEvent(event);\n }\n\n handleOutsideClick(event) {\n // Check if sidebar is visible\n if (this.element.classList.contains('ae-invisible')) {\n return;\n }\n\n // Check if click is outside the sidebar\n if (!this.element.contains(event.target)) {\n // Close the sidebar by dispatching a custom event\n // The container controller will listen for this event\n this.element.dispatchEvent(new CustomEvent('cart-sidebar:close-request'));\n }\n }\n\n handleEscape(event) {\n // Close on Escape key\n if (event.key === 'Escape' && !this.element.classList.contains('ae-invisible')) {\n // Dispatch event to request closing\n this.element.dispatchEvent(new CustomEvent('cart-sidebar:close-request'));\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n clearCart(event) {\n event.preventDefault();\n\n if (!confirm('Remove all products in your cart?')) {\n return;\n }\n\n const button = event.currentTarget;\n const saleSlug = button.dataset.saleSlug;\n const url = `/t/${saleSlug}/checkout/clear`;\n\n // Disable button during request\n button.disabled = true;\n\n fetch(url, {\n method: 'POST',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'X-Requested-With': 'XMLHttpRequest',\n 'Accept': 'application/json',\n 'Content-Type': 'application/x-www-form-urlencoded',\n },\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n return response.json();\n })\n .then(data => {\n if (data.success) {\n // Show success message\n if (window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash(data.message);\n }\n\n // Trigger cart refresh by dispatching events\n document.dispatchEvent(new CustomEvent('cart:cleared'));\n\n // Reload cart content\n const cartSidebar = document.querySelector('[data-controller*=\"t-cart-sidebar-container\"]');\n if (cartSidebar) {\n cartSidebar.dispatchEvent(new CustomEvent('cart-sidebar:load-content'));\n }\n } else {\n throw new Error(data.error || 'Failed to clear cart');\n }\n })\n .catch(_error => {\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Failed to clear cart. Please try again.');\n }\n })\n .finally(() => {\n // Re-enable button\n button.disabled = false;\n });\n }\n\n getCSRFToken() {\n const token = document.querySelector('meta[name=\"csrf-token\"]');\n return token ? token.getAttribute('content') : '';\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['content'];\n\n connect() {\n // Store sale slug for API calls\n this.saleSlug = this.getCurrentSaleSlug();\n\n // Only initialize if we have a valid sale slug (defensive programming)\n if (!this.saleSlug) {\n return;\n }\n\n // Bind event handlers for proper cleanup\n this.boundHandleLineItemCreate = this.handleLineItemCreate.bind(this);\n this.boundHandleLineItemUpdate = this.handleLineItemUpdate.bind(this);\n this.boundHandleLineItemDelete = this.handleLineItemDelete.bind(this);\n this.boundHandleCloseRequest = this.handleCloseRequest.bind(this);\n\n // Listen for line item events\n document.addEventListener('line_item:create', this.boundHandleLineItemCreate);\n document.addEventListener('line_item:update', this.boundHandleLineItemUpdate);\n document.addEventListener('line_item:delete', this.boundHandleLineItemDelete);\n\n // Listen for close request from animation controller\n this.element.addEventListener('cart-sidebar:close-request', this.boundHandleCloseRequest);\n\n // Listen for open request from cart counter\n this.boundHandleOpenRequest = this.handleOpenRequest.bind(this);\n this.element.addEventListener('cart-sidebar:open-request', this.boundHandleOpenRequest);\n\n // Listen for load content request\n this.boundHandleLoadContent = this.handleLoadContent.bind(this);\n this.element.addEventListener('cart-sidebar:load-content', this.boundHandleLoadContent);\n\n // Load cart content on page load\n this.loadCartContent();\n }\n\n disconnect() {\n // Clean up event listeners only if they were bound\n if (this.boundHandleLineItemCreate) {\n document.removeEventListener('line_item:create', this.boundHandleLineItemCreate);\n document.removeEventListener('line_item:update', this.boundHandleLineItemUpdate);\n document.removeEventListener('line_item:delete', this.boundHandleLineItemDelete);\n this.element.removeEventListener('cart-sidebar:close-request', this.boundHandleCloseRequest);\n this.element.removeEventListener('cart-sidebar:open-request', this.boundHandleOpenRequest);\n this.element.removeEventListener('cart-sidebar:load-content', this.boundHandleLoadContent);\n }\n }\n\n open() {\n // Only proceed if we have a valid sale slug\n if (!this.saleSlug) {\n return;\n }\n\n // Load cart content before opening\n this.loadCartContent();\n\n this.element.classList.remove('ae-invisible');\n this.element.classList.add('ae-show-sidebar-right');\n document.body.classList.add('hide-scrollbar');\n\n // Dispatch event for other controllers (Stimulus 1.1.0 compatible)\n const event = new CustomEvent('t-cart-sidebar-container:opened', {\n bubbles: true,\n detail: { controller: this },\n });\n this.element.dispatchEvent(event);\n }\n\n close(event) {\n if (event) {\n event.preventDefault();\n }\n\n // Hide sidebar directly\n this.element.setAttribute('data-visible', 'false');\n this.element.style.cssText = '';\n this.element.className = 'ae-sidebar ae-sidebar-right my-bag-sidebar ae-invisible detail-container';\n document.body.classList.remove('hide-scrollbar');\n\n // Dispatch event for other controllers (Stimulus 1.1.0 compatible)\n const closedEvent = new CustomEvent('t-cart-sidebar-container:closed', {\n bubbles: true,\n detail: { controller: this },\n });\n this.element.dispatchEvent(closedEvent);\n }\n\n loadCartContent() {\n // Don't make requests if we don't have a valid sale slug\n if (!this.saleSlug) {\n return;\n }\n\n const url = `/t/${this.saleSlug}/cart_sidebar`;\n\n fetch(url, {\n headers: {\n 'Accept': 'text/html',\n 'X-Requested-With': 'XMLHttpRequest',\n },\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n return response.text();\n })\n .then(html => {\n if (this.hasContentTarget) {\n // Clear existing content\n while (this.contentTarget.firstChild) {\n this.contentTarget.removeChild(this.contentTarget.firstChild);\n }\n\n // Insert new HTML content\n this.contentTarget.insertAdjacentHTML('afterbegin', html);\n }\n // Dispatch event for other controllers (Stimulus 1.1.0 compatible)\n const loadedEvent = new CustomEvent('t-cart-sidebar-container:contentLoaded', {\n bubbles: true,\n detail: { controller: this },\n });\n this.element.dispatchEvent(loadedEvent);\n })\n .catch(error => {\n if (this.hasContentTarget) {\n // Clear existing content\n while (this.contentTarget.firstChild) {\n this.contentTarget.removeChild(this.contentTarget.firstChild);\n }\n\n // Show more specific error message for debugging\n const errorDiv = document.createElement('div');\n errorDiv.className = 'ae-u-text-center ae-u-mt-40';\n\n // Provide specific error message for routing constraint failures\n if (error.message && error.message.includes('404')) {\n errorDiv.textContent = 'Cart unavailable - routing error';\n } else {\n errorDiv.textContent = 'Error loading cart';\n }\n\n this.contentTarget.appendChild(errorDiv);\n }\n });\n }\n\n refreshCart() {\n // Only refresh if we have a valid sale slug\n if (!this.saleSlug) {\n return;\n }\n this.loadCartContent();\n }\n\n // Event handlers\n handleLineItemCreate() {\n this.refreshCart();\n // Don't automatically open the sidebar when items are added\n }\n\n handleLineItemUpdate() {\n this.refreshCart();\n }\n\n handleLineItemDelete() {\n this.refreshCart();\n }\n\n handleCloseRequest(event) {\n event.stopPropagation();\n this.close();\n }\n\n handleOpenRequest(event) {\n event.stopPropagation();\n this.open();\n }\n\n handleLoadContent(event) {\n event.stopPropagation();\n this.loadCartContent();\n }\n\n // Helper methods\n getCurrentSaleSlug() {\n // Extract sale slug from URL or data attribute\n const pathMatch = window.location.pathname.match(/^\\/t\\/([^/]+)/);\n if (pathMatch) {\n return pathMatch[1];\n }\n\n // Fallback to data attribute if available\n const dataSlug = this.data.get('saleSlug') || '';\n\n // Validate slug format to catch routing constraint issues early\n if (dataSlug && !/^[a-zA-Z0-9\\-_]+$/.test(dataSlug)) {\n return '';\n }\n\n return dataSlug;\n }\n}\n\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['quantityCell', 'staticDisplay', 'editInterface', 'quantityInput', 'priceCell', 'totalCell'];\n\n connect() {\n // Only initialize quantity editing if we have a quantity input target\n // (grouped delete buttons don't need this)\n if (this.hasQuantityInputTarget) {\n this.originalQuantity = this.quantityInputTarget.value;\n this.isEditing = false;\n }\n }\n\n // Show edit interface (click on quantity text)\n showEdit(event) {\n event.preventDefault();\n if (!this.hasQuantityInputTarget || this.isEditing) return;\n\n this.isEditing = true;\n this.originalQuantity = this.quantityInputTarget.value;\n\n // Hide static display\n this.staticDisplayTarget.style.display = 'none';\n\n // Show edit interface\n this.editInterfaceTarget.style.display = 'block';\n\n // Hide price and total columns to make room\n this.priceCellTargets.forEach(cell => cell.style.display = 'none');\n this.totalCellTargets.forEach(cell => cell.style.display = 'none');\n\n // Make quantity cell span the hidden columns\n this.quantityCellTarget.colSpan = 3;\n\n // Focus the input\n this.quantityInputTarget.focus();\n this.quantityInputTarget.select();\n }\n\n // Hide edit interface and return to normal view\n hideEdit() {\n if (!this.hasQuantityInputTarget || !this.isEditing) return;\n\n this.isEditing = false;\n\n // Show static display\n this.staticDisplayTarget.style.display = 'inline';\n\n // Hide edit interface\n this.editInterfaceTarget.style.display = 'none';\n\n // Show price and total columns\n this.priceCellTargets.forEach(cell => cell.style.display = 'table-cell');\n this.totalCellTargets.forEach(cell => cell.style.display = 'table-cell');\n\n // Reset column span\n this.quantityCellTarget.colSpan = 1;\n }\n\n // Handle increment button\n increment(event) {\n event.preventDefault();\n if (!this.hasQuantityInputTarget) return;\n\n const currentValue = parseInt(this.quantityInputTarget.value) || 0;\n const newValue = Math.min(currentValue + 1, 999);\n this.quantityInputTarget.value = newValue;\n }\n\n // Handle decrement button\n decrement(event) {\n event.preventDefault();\n if (!this.hasQuantityInputTarget) return;\n\n const currentValue = parseInt(this.quantityInputTarget.value) || 1;\n const newValue = Math.max(currentValue - 1, 1);\n this.quantityInputTarget.value = newValue;\n }\n\n // Handle blur event (auto-save)\n handleBlur(_event) {\n // Small delay to allow button clicks to register first\n setTimeout(() => {\n if (this.isEditing) {\n this.updateQuantity();\n }\n }, 100);\n }\n\n // Handle keyboard events\n handleKeydown(event) {\n if (event.key === 'Enter') {\n event.preventDefault();\n this.updateQuantity();\n } else if (event.key === 'Escape') {\n event.preventDefault();\n this.quantityInputTarget.value = this.originalQuantity;\n this.hideEdit();\n }\n }\n\n // Update quantity via PATCH request\n async updateQuantity() {\n if (!this.hasQuantityInputTarget || !this.isEditing) return;\n\n const newQuantity = parseInt(this.quantityInputTarget.value);\n const lineItemId = this.element.dataset.lineItemId;\n const saleSlug = this.element.dataset.saleSlug;\n\n // Validate quantity\n if (!newQuantity || newQuantity < 1 || newQuantity > 999) {\n this.showError('Please enter a valid quantity between 1 and 999.');\n this.quantityInputTarget.value = this.originalQuantity;\n return;\n }\n\n // If quantity unchanged, just hide edit interface\n if (newQuantity.toString() === this.originalQuantity) {\n this.hideEdit();\n return;\n }\n\n // Disable input during update\n this.quantityInputTarget.disabled = true;\n\n try {\n const url = `/t/${saleSlug}/checkout/line_items/${lineItemId}`;\n\n const response = await fetch(url, {\n method: 'PATCH',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'X-Requested-With': 'XMLHttpRequest',\n 'Accept': 'application/json',\n 'Content-Type': 'application/x-www-form-urlencoded',\n },\n body: `quantity=${newQuantity}`,\n });\n\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n // Parse JSON response instead of executing JavaScript\n const jsonResponse = await response.json();\n this.handleUpdateResponse(jsonResponse);\n\n // Update the static display with new quantity\n this.updateStaticDisplay(newQuantity);\n this.originalQuantity = newQuantity.toString();\n this.hideEdit();\n\n } catch {\n this.showError('Failed to update quantity. Please try again.');\n this.quantityInputTarget.value = this.originalQuantity;\n } finally {\n this.quantityInputTarget.disabled = false;\n }\n }\n\n // Update the static quantity display\n updateStaticDisplay(newQuantity) {\n const staticText = this.staticDisplayTarget.querySelector('.product-qty');\n const currentText = staticText.textContent;\n const code = currentText.split(' - ')[1];\n staticText.textContent = `${newQuantity} - ${code}`;\n }\n\n // Handle JSON response from quantity update\n handleUpdateResponse(response) {\n if (response.success) {\n // Update cart totals if provided\n if (response.order && response.order.total) {\n const cartTotalElement = document.querySelector('[data-cart-total]');\n if (cartTotalElement) {\n cartTotalElement.textContent = response.order.total;\n }\n }\n\n // Update line item subtotal if provided\n if (response.line_item && response.line_item.subtotal) {\n // Use the Stimulus target to update the subtotal\n if (this.hasTotalCellTarget) {\n const subtotalElement = this.totalCellTarget.querySelector('.product-price-font');\n if (subtotalElement) {\n subtotalElement.textContent = response.line_item.subtotal;\n }\n }\n }\n\n // Show success message if provided\n if (response.message && window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash(response.message);\n }\n } else {\n // Handle error response\n const errorMessage = response.error || 'Failed to update quantity';\n this.showError(errorMessage);\n }\n }\n\n // Show error message\n showError(message) {\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash(message);\n } else {\n // Fallback error display - create visible error element\n const errorDiv = document.createElement('div');\n errorDiv.className = 'ae-alert ae-alert-danger';\n errorDiv.textContent = message;\n errorDiv.style.position = 'fixed';\n errorDiv.style.top = '20px';\n errorDiv.style.right = '20px';\n errorDiv.style.zIndex = '9999';\n document.body.appendChild(errorDiv);\n setTimeout(() => errorDiv.remove(), 5000);\n }\n }\n\n delete(event) {\n event.preventDefault();\n\n const button = event.currentTarget;\n const saleSlug = button.dataset.slug;\n const lineItemId = button.dataset.id;\n\n if (!lineItemId) {\n return;\n }\n\n // Confirm deletion\n if (!confirm('Remove this item from your cart?')) {\n return;\n }\n\n // Disable button to prevent double-clicks\n button.disabled = true;\n\n // Make POST request to delete line item\n const url = `/t/${saleSlug}/checkout/delete_line_item`;\n\n fetch(url, {\n method: 'POST',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'X-Requested-With': 'XMLHttpRequest',\n 'Accept': 'application/json',\n 'Content-Type': 'application/x-www-form-urlencoded',\n },\n body: `ids=${lineItemId}`,\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n return response.json();\n })\n .then(jsonResponse => {\n if (jsonResponse.success) {\n // Show success message if provided\n if (jsonResponse.message && window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash(jsonResponse.message);\n }\n\n // Reload the page to refresh cart state\n window.location.reload();\n } else {\n throw new Error(jsonResponse.error || 'Failed to remove item');\n }\n })\n .catch(() => {\n button.disabled = false;\n // Use a more accessible error handling approach\n const errorDiv = document.createElement('div');\n errorDiv.className = 'ae-alert ae-alert-danger';\n errorDiv.textContent = 'Error removing item from cart. Please try again.';\n errorDiv.style.position = 'fixed';\n errorDiv.style.top = '20px';\n errorDiv.style.right = '20px';\n errorDiv.style.zIndex = '9999';\n document.body.appendChild(errorDiv);\n setTimeout(() => errorDiv.remove(), 5000);\n });\n }\n\n deleteItems(event) {\n event.preventDefault();\n\n const button = event.currentTarget;\n const saleSlug = button.dataset.slug;\n const ids = button.dataset.ids;\n\n if (!ids) {\n return;\n }\n\n // Confirm deletion\n if (!confirm('Remove these items from your cart?')) {\n return;\n }\n\n // Disable button to prevent double-clicks\n button.disabled = true;\n\n // Make POST request to delete multiple line items\n const url = `/t/${saleSlug}/checkout/delete_line_item`;\n\n fetch(url, {\n method: 'POST',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'X-Requested-With': 'XMLHttpRequest',\n 'Accept': 'application/json',\n 'Content-Type': 'application/x-www-form-urlencoded',\n },\n body: `ids=${ids}`,\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n return response.json();\n })\n .then(jsonResponse => {\n if (jsonResponse.success) {\n // Show success message if provided\n if (jsonResponse.message && window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash(jsonResponse.message);\n }\n\n // Reload the page to refresh cart state\n window.location.reload();\n } else {\n throw new Error(jsonResponse.error || 'Failed to remove items');\n }\n })\n .catch(() => {\n button.disabled = false;\n // Use a more accessible error handling approach\n const errorDiv = document.createElement('div');\n errorDiv.className = 'ae-alert ae-alert-danger';\n errorDiv.textContent = 'Error removing items from cart. Please try again.';\n errorDiv.style.position = 'fixed';\n errorDiv.style.top = '20px';\n errorDiv.style.right = '20px';\n errorDiv.style.zIndex = '9999';\n document.body.appendChild(errorDiv);\n setTimeout(() => errorDiv.remove(), 5000);\n });\n }\n\n getCSRFToken() {\n const token = document.querySelector('meta[name=\"csrf-token\"]');\n return token ? token.content : '';\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['next'];\n\n connect() {\n this.initializeForm();\n\n // CRITICAL: Intercept ALL form submissions (HTML and JavaScript)\n this.element.addEventListener('submit', (event) => {\n event.preventDefault();\n\n // Handle via our JavaScript instead of HTML submission\n this.submitForm(event.target);\n });\n }\n\n disconnect() {\n this.cleanupForm();\n }\n\n initializeForm() {\n // Initialize address form\n this.saleSlug = this.data.get('sale-slug');\n this.orderNumber = this.data.get('order-number');\n\n // Set up form validation\n this.setupFormValidation();\n\n // Set up address autocomplete if available\n this.setupAddressAutocomplete();\n }\n\n setupFormValidation() {\n // Set up real-time validation for address fields\n const form = this.element.querySelector('form');\n if (form) {\n // Store bound handler for proper cleanup\n this.boundHandleSubmit = this.handleSubmit.bind(this);\n form.addEventListener('submit', this.boundHandleSubmit);\n }\n }\n\n setupAddressAutocomplete() {\n // Set up address autocomplete functionality\n const addressFields = this.element.querySelectorAll('input[type=\"text\"]');\n // Store bound handler for proper cleanup\n this.boundHandleAddressInput = this.handleAddressInput.bind(this);\n this.addressFields = addressFields;\n addressFields.forEach(field => {\n field.addEventListener('input', this.boundHandleAddressInput);\n });\n }\n\n handleAddressInput(event) {\n // Handle address input changes\n const input = event.target;\n\n // Clear previous validation states\n this.clearValidationState(input);\n\n // Validate field\n this.validateField(input);\n }\n\n validateField(input) {\n // Validate individual address field\n const value = input.value.trim();\n const fieldName = input.name;\n\n // Basic validation rules\n const isRequired = input.hasAttribute('required') || input.classList.contains('ae-required');\n\n if (isRequired && !value) {\n this.showFieldError(input, 'This field is required');\n return false;\n }\n\n // Field-specific validation\n switch (fieldName) {\n case 'order[ship_address_attributes][zipcode]':\n return this.validateZipcode(input, value);\n case 'order[ship_address_attributes][phone]':\n return this.validatePhone(input, value);\n default:\n this.showFieldSuccess(input);\n return true;\n }\n }\n\n validateZipcode(input, value) {\n // Validate zipcode format\n const zipcodePattern = /^[0-9]{5}(-[0-9]{4})?$/;\n\n if (value && !zipcodePattern.test(value)) {\n this.showFieldError(input, 'Please enter a valid zipcode');\n return false;\n }\n\n this.showFieldSuccess(input);\n return true;\n }\n\n validatePhone(input, value) {\n // Validate phone number format\n const phonePattern = /^[\\d\\s\\-()+-]+$/;\n\n if (value && !phonePattern.test(value)) {\n this.showFieldError(input, 'Please enter a valid phone number');\n return false;\n }\n\n this.showFieldSuccess(input);\n return true;\n }\n\n showFieldError(input, message) {\n // Show field error state\n const fieldContainer = input.closest('.ae-field') || input.parentElement;\n const errorElement = fieldContainer.querySelector('.ae-field-error') ||\n fieldContainer.querySelector('[data-target*=\"error\"]');\n\n // Add error class\n fieldContainer.classList.add('ae-field-error');\n fieldContainer.classList.remove('ae-field-success');\n\n // Show error message\n if (errorElement) {\n errorElement.textContent = message;\n errorElement.style.display = 'block';\n }\n }\n\n showFieldSuccess(input) {\n // Show field success state\n const fieldContainer = input.closest('.ae-field') || input.parentElement;\n const errorElement = fieldContainer.querySelector('.ae-field-error') ||\n fieldContainer.querySelector('[data-target*=\"error\"]');\n\n // Add success class\n fieldContainer.classList.add('ae-field-success');\n fieldContainer.classList.remove('ae-field-error');\n\n // Hide error message\n if (errorElement) {\n errorElement.style.display = 'none';\n }\n }\n\n clearValidationState(input) {\n // Clear validation state\n const fieldContainer = input.closest('.ae-field') || input.parentElement;\n fieldContainer.classList.remove('ae-field-error', 'ae-field-success');\n }\n\n handleSubmit(event) {\n // Handle form submission\n event.preventDefault();\n\n // Validate all fields\n const isValid = this.validateAllFields();\n\n if (!isValid) {\n this.showFormError('Please correct the errors below');\n return;\n }\n\n // Submit form\n this.submitForm(event.target);\n }\n\n validateAllFields() {\n // Validate all form fields\n const inputs = this.element.querySelectorAll('input[type=\"text\"], select');\n let isValid = true;\n\n inputs.forEach(input => {\n if (!this.validateField(input)) {\n isValid = false;\n }\n });\n\n // If no inputs found for validation, consider it valid for testing scenarios\n return isValid;\n }\n\n // Action method called by \"Continue to Payment\" button\n next(event) {\n\n if (event) {\n event.preventDefault();\n }\n\n // Enhanced form finding logic to handle both direct and nested scenarios\n const form = this.findFormElement();\n\n if (!form) {\n this.showFormError('Form element not found. Please refresh the page.');\n return;\n }\n\n this.submitForm(form);\n }\n\n findFormElement() {\n // Strategy 1: Look for form within controller element\n let form = this.element.querySelector('form');\n\n if (form) {\n return form;\n }\n\n // Check for controller isolation: if this element is a button or similar isolated element\n // that has its own controller instance AND is nested within another controller's scope,\n // it should be isolated and not search parent elements\n const isButtonOrIsolatedElement = ['BUTTON', 'A', 'INPUT'].includes(this.element.tagName);\n const hasOwnController = this.element.hasAttribute('data-controller') &&\n this.element.getAttribute('data-controller').includes('t-checkout-address-form');\n const hasParentController = this.element.parentElement &&\n this.element.parentElement.querySelector('[data-controller*=\"t-checkout-address-form\"]');\n\n const isIsolatedController = isButtonOrIsolatedElement && hasOwnController && hasParentController;\n\n // Strategy 2: Look for form in parent elements (only if not isolated)\n if (!isIsolatedController) {\n let parent = this.element.parentElement;\n while (parent && parent !== document.body) {\n form = parent.querySelector('form');\n if (form) {\n return form;\n }\n parent = parent.parentElement;\n }\n }\n\n // Strategy 3: Look for specific form IDs that might exist in the DOM (only if not isolated)\n if (!isIsolatedController) {\n const possibleFormIds = [\n 'shipping-address-form-element',\n `shipping-method-form-${this.data.get('shipping-method-id') || ''}`,\n 'checkout-form',\n ];\n\n for (const formId of possibleFormIds) {\n if (formId) {\n form = document.getElementById(formId);\n if (form) {\n return form;\n }\n }\n }\n }\n\n // Strategy 4: As fallback, return the controller element itself if it has form-like content\n const hasFormFields = this.element.querySelector('input, select, textarea');\n if (hasFormFields) {\n return this.element;\n }\n\n return null;\n }\n\n createFormData(element) {\n // If it's a proper form element, use FormData constructor\n if (element.tagName.toLowerCase() === 'form') {\n return new FormData(element);\n }\n\n // Otherwise, manually collect form data from inputs within the element\n const formData = new FormData();\n const inputs = element.querySelectorAll('input, select, textarea');\n\n inputs.forEach(input => {\n if (input.name && (input.type !== 'radio' || input.checked)) {\n if (input.type === 'checkbox') {\n if (input.checked) {\n formData.append(input.name, input.value || 'on');\n }\n } else {\n formData.append(input.name, input.value);\n }\n }\n });\n\n return formData;\n }\n\n validateFormElement(element) {\n if (element.tagName.toLowerCase() === 'form') {\n // Use native form validation\n const isValid = element.checkValidity();\n if (!isValid) {\n element.reportValidity(); // Show browser validation messages\n }\n return isValid;\n }\n\n // For non-form elements, use our custom validation\n return this.validateAllFields();\n }\n\n getFormAction(element) {\n if (element.tagName.toLowerCase() === 'form' && element.action) {\n return element.action;\n }\n\n // Fallback: construct URL from controller data\n const saleSlug = this.data.get('sale-slug');\n if (saleSlug) {\n return `/t/${saleSlug}/checkout/address`;\n }\n\n // Last resort: try to find form action in DOM\n const anyForm = document.querySelector('form[action*=\"checkout/address\"]');\n if (anyForm && anyForm.action) {\n return anyForm.action;\n }\n\n // Final fallback: check for any form with action attribute\n const fallbackForm = document.querySelector('form[action]');\n if (fallbackForm) {\n // If it's a checkout-related form, use it\n if (fallbackForm.action.includes('checkout') || fallbackForm.action.includes('address')) {\n return fallbackForm.action;\n }\n }\n\n // Return a reasonable default - we should almost never throw in practice\n return '/t/unknown/checkout/address';\n }\n\n submitForm(formOrEvent) {\n // Prevent multiple submissions\n if (window.checkoutSubmissionInProgress) {\n return;\n }\n window.checkoutSubmissionInProgress = true;\n\n // Handle both form elements and submit events\n const element = formOrEvent.target || formOrEvent;\n\n if (formOrEvent.preventDefault) {\n formOrEvent.preventDefault();\n }\n\n // Validate element exists\n if (!element || !element.tagName) {\n this.showFormError('Form element not found. Please refresh the page.');\n window.checkoutSubmissionInProgress = false;\n return;\n }\n\n // Create FormData from either form element or by collecting fields\n const formData = this.createFormData(element);\n\n\n // CRITICAL: Add shipping method parameter collection\n const shippingMethodAdded = this.addShippingMethodParameter(formData);\n\n\n if (!shippingMethodAdded) {\n this.showFormError('Please select a shipping method before continuing.');\n this.setLoadingState(false);\n window.checkoutSubmissionInProgress = false;\n return;\n }\n\n // Check form validity\n const formValid = this.validateFormElement(element);\n\n if (!formValid) {\n this.setLoadingState(false);\n window.checkoutSubmissionInProgress = false;\n return;\n }\n\n const url = this.getFormAction(element);\n\n // Add loading state\n this.setLoadingState(true);\n\n\n return fetch(url, {\n method: 'POST',\n body: formData,\n credentials: 'same-origin',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'X-Requested-With': 'XMLHttpRequest',\n },\n })\n .then(response => {\n return this.handleResponse(response);\n })\n .catch(error => {\n this.handleSubmitError(error);\n })\n .finally(() => {\n this.setLoadingState(false);\n });\n }\n\n handleResponse(response) {\n // Handle fetch response - parse JSON and route to appropriate handler\n\n return response.json()\n .then(data => {\n if (response.ok) {\n this.handleSubmitResponse(data);\n } else if (data.csrf_error) {\n this.handleCSRFError();\n } else {\n this.handleErrorResponse(data);\n }\n })\n .catch(_jsonError => {\n this.handleSubmitError(new Error('Invalid JSON response'));\n });\n }\n\n addShippingMethodParameter(formData) {\n // CRITICAL: First check if any ACTUAL shipping method radio buttons exist on the page\n // Exclude hidden fields from this check to properly detect \"no shipping\" scenario\n const actualShippingMethodRadios = document.querySelectorAll(\n 'input[type=\"radio\"][name=\"shipping_methods\"], input[type=\"radio\"][name*=\"shipping_method\"]',\n );\n\n // If no actual radio buttons exist, we're in \"no_shipping\" mode\n if (actualShippingMethodRadios.length === 0) {\n // No shipping methods configured - allow submission without requiring selection\n return true;\n }\n\n // Try multiple methods to find selected shipping method\n let selectedShippingMethod = null;\n let shippingMethodId = null;\n\n // Method 1: Direct name match\n selectedShippingMethod = document.querySelector('input[name=\"shipping_methods\"]:checked');\n if (selectedShippingMethod) {\n shippingMethodId = selectedShippingMethod.value;\n }\n\n // Method 2: Broader shipping method search\n if (!selectedShippingMethod) {\n selectedShippingMethod = document.querySelector('input[name*=\"shipping_method\"]:checked');\n if (selectedShippingMethod) {\n shippingMethodId = selectedShippingMethod.value;\n }\n }\n\n // Method 3: Any checked radio button\n if (!selectedShippingMethod) {\n const checkedRadios = document.querySelectorAll('input[type=\"radio\"]:checked');\n\n // Look for shipping-related checked radios\n selectedShippingMethod = Array.from(checkedRadios).find(radio =>\n radio.name.includes('shipping') || radio.id.includes('shipping'),\n );\n if (selectedShippingMethod) {\n shippingMethodId = selectedShippingMethod.value;\n }\n }\n\n // Method 4: Hidden field fallback\n const hiddenShippingMethodField = document.getElementById('selected-shipping-method-field');\n\n if (!shippingMethodId && hiddenShippingMethodField && hiddenShippingMethodField.value) {\n shippingMethodId = hiddenShippingMethodField.value;\n }\n\n\n // Validate and add to FormData\n\n if (shippingMethodId && /^\\d+$/.test(shippingMethodId)) {\n // Remove any existing shipping_methods parameter first\n if (formData.has('shipping_methods')) {\n formData.delete('shipping_methods');\n }\n\n // Add the shipping method parameter\n formData.append('shipping_methods', shippingMethodId);\n\n // Sync default_shipping_address_id to match the selected shipping method's bulk address\n const selectedPanel = document.getElementById(\n `shipping-method-panel-container-${shippingMethodId}`,\n );\n const bulkAddressId = selectedPanel?.dataset.bulkAddressId;\n if (bulkAddressId) {\n formData.delete('default_shipping_address_id');\n formData.append('default_shipping_address_id', bulkAddressId);\n }\n\n console.groupEnd();\n return true;\n\n } else {\n // Check again if we actually have radio buttons (not just hidden fields)\n // This handles edge cases where hidden field exists but no actual methods\n const hasActualMethods = actualShippingMethodRadios.length > 0;\n\n if (!hasActualMethods) {\n // No actual shipping methods to select from\n console.groupEnd();\n return true;\n }\n // Shipping methods exist but none selected\n console.groupEnd();\n return false;\n }\n }\n\n handleSubmitResponse(data) {\n // Handle form submission response\n if (data.success) {\n // Update sidebar with new order totals if provided\n if (data.order_totals) {\n this.updateSidebarTotals(data.order_totals);\n }\n\n // Dispatch success event\n const event = new CustomEvent('checkout:address-updated', {\n detail: { data },\n });\n document.dispatchEvent(event);\n\n // Redirect to next step if provided, with slight delay for sidebar update\n if (data.redirect_url) {\n setTimeout(() => {\n window.location.href = data.redirect_url;\n }, 100); // Small delay to allow DOM updates\n }\n } else {\n // Handle validation errors\n this.handleValidationErrors(data.errors);\n // Release submission lock on validation errors\n window.checkoutSubmissionInProgress = false;\n }\n }\n\n handleValidationErrors(errors) {\n // Handle server-side validation errors\n Object.keys(errors).forEach(fieldName => {\n const input = this.element.querySelector(`[name*=\"${fieldName}\"]`);\n if (input) {\n this.showFieldError(input, errors[fieldName].join(', '));\n }\n });\n }\n\n handleErrorResponse(data) {\n // Handle error response from server\n if (data.errorMsg) {\n this.showFormError(data.errorMsg);\n } else if (data.errors) {\n // Handle field-specific errors if present\n this.handleValidationErrors(data.errors);\n } else {\n this.showFormError('An error occurred while saving your address. Please try again.');\n }\n // Release submission lock on error\n window.checkoutSubmissionInProgress = false;\n }\n\n handleCSRFError() {\n // Handle CSRF token mismatch - session expired between page load and form submit\n this.showFormError('Your session has expired. Please refresh the page and try again.');\n // Release submission lock so user can retry after refreshing\n window.checkoutSubmissionInProgress = false;\n }\n\n handleSubmitError(_error) {\n // Handle form submission error - silent degradation for production\n this.showFormError('An error occurred while saving your address. Please try again.');\n // Release submission lock on error\n window.checkoutSubmissionInProgress = false;\n }\n\n showFormError(message) {\n // Use unified flash system for consistent error handling\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash(message);\n } else {\n // Fallback to inline error if unified flash not available\n const errorContainer = this.element.querySelector('.ae-alert-danger') ||\n this.createErrorContainer();\n\n errorContainer.textContent = message;\n errorContainer.style.display = 'block';\n }\n }\n\n createErrorContainer() {\n // Create error container if it doesn't exist\n const container = document.createElement('div');\n container.className = 'ae-alert ae-alert-danger';\n container.style.marginBottom = '1rem';\n\n this.element.insertBefore(container, this.element.firstChild);\n return container;\n }\n\n setLoadingState(isLoading) {\n // Set form loading state\n const submitButton = this.element.querySelector('button[type=\"submit\"]') ||\n this.element.querySelector('button');\n const form = this.element.querySelector('form');\n\n if (isLoading) {\n if (submitButton) {\n submitButton.disabled = true;\n const originalText = submitButton.textContent;\n submitButton.dataset.originalText = originalText;\n submitButton.textContent = 'Saving...';\n }\n if (form) {\n form.style.opacity = '0.6';\n }\n } else {\n if (submitButton) {\n submitButton.disabled = false;\n const originalText = submitButton.dataset.originalText || 'Continue';\n submitButton.textContent = originalText;\n }\n if (form) {\n form.style.opacity = '1';\n }\n }\n }\n\n getCSRFToken() {\n // Get CSRF token from meta tag\n const token = document.querySelector('meta[name=\"csrf-token\"]');\n return token ? token.getAttribute('content') : '';\n }\n\n cleanupForm() {\n // Cleanup form event listeners\n const form = this.element.querySelector('form');\n if (form && this.boundHandleSubmit) {\n form.removeEventListener('submit', this.boundHandleSubmit);\n }\n\n // Cleanup address field listeners\n if (this.addressFields && this.boundHandleAddressInput) {\n this.addressFields.forEach(field => {\n field.removeEventListener('input', this.boundHandleAddressInput);\n });\n }\n }\n\n\n collectFormData(container) {\n // Collect form data from input fields in container\n const formData = new FormData();\n const inputs = container.querySelectorAll('input, select, textarea');\n\n inputs.forEach(input => {\n if (input.name && input.value) {\n formData.append(input.name, input.value);\n }\n });\n\n return formData;\n }\n\n validateCollectedFields(container) {\n // Validate required fields in container\n const requiredFields = container.querySelectorAll('input[required], .ae-required input');\n let isValid = true;\n\n requiredFields.forEach(field => {\n if (!field.value.trim()) {\n this.showFieldError(field, 'This field is required');\n isValid = false;\n }\n });\n\n // If no required fields found, consider it valid for testing scenarios\n return isValid;\n }\n\n submitFormData(url, formData) {\n // Submit form data via AJAX\n this.setLoadingState(true);\n\n fetch(url, {\n method: 'POST',\n body: formData,\n credentials: 'same-origin',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'X-Requested-With': 'XMLHttpRequest',\n },\n })\n .then(response => {\n return response.json().then(data => {\n return { data, ok: response.ok };\n });\n })\n .then(({ data, ok }) => {\n if (ok) {\n this.handleSubmitResponse(data);\n } else if (data.csrf_error) {\n this.handleCSRFError();\n } else {\n this.handleErrorResponse(data);\n }\n })\n .catch(error => {\n this.handleSubmitError(error);\n })\n .finally(() => {\n this.setLoadingState(false);\n // Always release submission lock when request completes\n window.checkoutSubmissionInProgress = false;\n });\n }\n\n updateSidebarTotals(orderTotals) {\n // Update sidebar with new order totals\n const sidebarPanel = document.querySelector('#sidebar-cart-panel');\n if (!sidebarPanel) {\n return;\n }\n\n // Update shipping total (only show if > 0)\n const shippingRow = this.findShippingRow(sidebarPanel);\n if (shippingRow) {\n if (orderTotals.shipment_total > 0) {\n // Update existing shipping row\n const shippingAmountCell = shippingRow.querySelector('td:last-child');\n if (shippingAmountCell) {\n shippingAmountCell.textContent = orderTotals.display_shipment_total;\n }\n shippingRow.style.display = '';\n } else {\n // Hide shipping row if amount is 0\n shippingRow.style.display = 'none';\n }\n } else if (orderTotals.shipment_total > 0) {\n // Create new shipping row if it doesn't exist and amount > 0\n this.createShippingRow(sidebarPanel, orderTotals.display_shipment_total);\n }\n\n // Update total\n const totalRow = this.findTotalRow(sidebarPanel);\n if (totalRow) {\n const totalAmountCell = totalRow.querySelector('td:last-child');\n if (totalAmountCell) {\n totalAmountCell.textContent = orderTotals.display_total;\n }\n }\n }\n\n createShippingRow(sidebarPanel, displayAmount) {\n // Create a new shipping row in the summary table\n const summaryTable = sidebarPanel.querySelector('#cart-summary tbody');\n if (!summaryTable) return;\n\n const shippingRow = document.createElement('tr');\n shippingRow.innerHTML = `\n
Shipping: \n
${displayAmount} \n `;\n\n // Insert before the total row (should be last)\n const totalRow = summaryTable.querySelector('tr:last-child');\n if (totalRow) {\n summaryTable.insertBefore(shippingRow, totalRow);\n } else {\n summaryTable.appendChild(shippingRow);\n }\n }\n\n findShippingRow(sidebarPanel) {\n // Find the shipping row by looking for text content\n const rows = sidebarPanel.querySelectorAll('#cart-summary tr');\n for (const row of rows) {\n const firstCell = row.querySelector('td:first-child');\n if (firstCell && firstCell.textContent.trim().includes('Shipping:')) {\n return row;\n }\n }\n return null;\n }\n\n findTotalRow(sidebarPanel) {\n // Find the total row by looking for text content\n const rows = sidebarPanel.querySelectorAll('#cart-summary tr');\n for (const row of rows) {\n const firstCell = row.querySelector('td:first-child');\n if (firstCell && firstCell.textContent.trim().includes('Total:')) {\n return row;\n }\n }\n return null;\n }\n\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['hiddenField'];\n connect() {\n // Initialize with the selected shipping method from data value (Stimulus 1.1.0 compatible)\n this.selectedIdValue = this.data.get('selected-id');\n if (this.selectedIdValue) {\n this.updateSelection(this.selectedIdValue);\n } else {\n // Check if this controller's radio button is checked to determine initial visibility\n this.setInitialVisibility();\n }\n }\n\n selectedIdValueChanged() {\n // Handle programmatic changes to selectedIdValue\n if (this.selectedIdValue) {\n this.updateSelection(this.selectedIdValue);\n }\n }\n\n // Main method for handling shipping method selection\n selectMethod(event) {\n event.preventDefault();\n\n const methodElement = event.currentTarget;\n const methodId = methodElement.dataset.shippingMethodId;\n\n\n // Handle missing method ID gracefully\n if (!methodId) {\n return;\n }\n\n // Always update selection (allow re-selection of same method)\n this.updateSelection(methodId);\n\n // Update the data value\n this.selectedIdValue = methodId;\n\n // Dispatch change event\n this.dispatchChangeEvent(methodId, methodElement);\n\n }\n\n // Compatibility alias for legacy templates\n click(event) {\n this.selectMethod(event);\n }\n\n updateSelection(methodId) {\n\n // Clear all current selections\n this.clearAllSelections();\n\n // Find and select the method with the given ID\n const methodElement = this.element.querySelector(`[data-shipping-method-id=\"${methodId}\"]`);\n if (methodElement) {\n methodElement.classList.add('selected', 'active');\n }\n\n // Hide all panels and show only the selected one\n this.hideAllPanels();\n this.showPanel(methodId);\n\n // Check the corresponding radio button\n this.checkRadioButton(methodId);\n\n // Update hidden field if present\n if (this.hasHiddenFieldTarget) {\n this.hiddenFieldTarget.value = methodId;\n }\n\n // Update the main form's shipping method hidden field with validation\n const shippingMethodField = document.getElementById('selected-shipping-method-field');\n if (shippingMethodField) {\n shippingMethodField.value = methodId;\n\n // Validate the update was successful\n if (shippingMethodField.value !== methodId) {\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Failed to update shipping method selection. Please try again.');\n }\n }\n }\n\n // Dispatch change event\n this.dispatchChangeEvent(methodId, methodElement);\n }\n\n clearAllSelections() {\n // Remove selected class from all shipping method items\n // Use flexible selector to work with different DOM structures\n const allMethods = this.element.querySelectorAll('[data-shipping-method-id]');\n allMethods.forEach(method => {\n method.classList.remove('selected', 'active');\n });\n }\n\n hideAllPanels() {\n // Hide all shipping method panel containers (not their inner content)\n const panelSelectors = [\n '.shipping-method-panel-container',\n '[id^=\"shipping-method-panel-container-\"]',\n ];\n\n panelSelectors.forEach(selector => {\n const panels = document.querySelectorAll(selector);\n panels.forEach(panel => {\n panel.style.display = 'none';\n });\n });\n }\n\n showPanel(methodId) {\n // Show the panel for the selected shipping method using multiple possible selectors\n const panelSelectors = [\n `#shipping-method-panel-container-${methodId}`,\n `.shipping-method-panel-container[data-shipping-method-id=\"${methodId}\"]`,\n `[id=\"shipping-method-panel-container-${methodId}\"]`,\n ];\n\n let panelFound = false;\n panelSelectors.forEach(selector => {\n const panel = document.querySelector(selector);\n if (panel && !panelFound) {\n panel.style.display = 'block';\n panelFound = true;\n }\n });\n }\n\n checkRadioButton(methodId) {\n // Clear all radio buttons first\n const allRadios = document.querySelectorAll('input[name=\"shipping_methods\"]');\n\n allRadios.forEach(radio => {\n radio.checked = false;\n });\n\n // ENHANCED: Try multiple selectors to find the correct radio button\n const radioSelectors = [\n `#shipping-method-${methodId}`, // Primary selector\n `input[name=\"shipping_methods\"][value=\"${methodId}\"]`, // Fallback by value\n `input[value=\"${methodId}\"]`, // Backup selector\n ];\n\n let radioFound = false;\n radioSelectors.forEach(selector => {\n if (!radioFound) {\n const radio = document.querySelector(selector);\n if (radio && radio.name === 'shipping_methods') {\n radio.checked = true;\n radioFound = true;\n }\n }\n });\n\n }\n\n\n dispatchChangeEvent(methodId, methodElement) {\n // Dispatch shipping method change event\n const event = new CustomEvent('checkout:shipping-method-changed', {\n detail: {\n methodId: methodId,\n methodElement: methodElement,\n },\n bubbles: true,\n });\n document.dispatchEvent(event);\n }\n\n setInitialVisibility() {\n // Check if this shipping method's radio button is checked\n const methodId = this.element.dataset.shippingMethodId;\n const radio = document.getElementById(`shipping-method-${methodId}`);\n\n if (radio && radio.checked) {\n // This method is selected - ensure its panel is visible\n this.showPanel(methodId);\n } else {\n // This method is not selected - ensure its panel is hidden\n const panel = document.getElementById(`shipping-method-panel-container-${methodId}`);\n if (panel) {\n panel.style.display = 'none';\n }\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['shippingSection', 'shippingField'];\n\n connect() {\n this.initializeController();\n this.ensureCheckboxIsClickable();\n }\n\n disconnect() {\n this.cleanupController();\n }\n\n initializeController() {\n // Initialize same as billing controller\n this.orderNumber = this.data.get('order-number');\n\n // Set up initial state\n this.setupInitialState();\n }\n\n setupInitialState() {\n // Set up initial checkbox state\n // Start with checkbox unchecked and shipping fields visible\n const checkbox = this.getCheckbox();\n if (checkbox) {\n checkbox.checked = false;\n }\n if (this.hasShippingSectionTarget) {\n this.shippingSectionTarget.style.display = '';\n }\n }\n\n toggle(_event) {\n // Handle checkbox toggle\n this.toggleAddressFields();\n }\n\n // Main toggle method expected by tests\n toggleAddressFields() {\n const checkbox = this.getCheckbox();\n const isChecked = checkbox ? checkbox.checked : false;\n\n if (isChecked) {\n // Hide shipping section\n this.hideShippingSection();\n // Copy billing to shipping\n this.copyBillingToShipping();\n // Remove required attributes\n this.removeRequiredAttributes();\n // Dispatch sync event\n this.dispatchAddressSyncEvent(true);\n } else {\n // Show shipping section\n this.showShippingSection();\n // Clear shipping fields\n this.clearShippingFields();\n // Restore required attributes\n this.restoreRequiredAttributes();\n // Dispatch sync event\n this.dispatchAddressSyncEvent(false);\n }\n }\n\n copyBillingToShipping() {\n // Copy billing address to shipping address\n // First try to get billing address data from data attribute\n let billingAddressData = this.getBillingAddressData();\n\n // If no data from attribute, try to extract from page elements\n if (!billingAddressData || Object.keys(billingAddressData).length === 0) {\n billingAddressData = this.extractBillingDataFromPage();\n }\n\n if (billingAddressData && Object.keys(billingAddressData).length > 0) {\n // Use billing address data from JSON\n this.copyFromBillingData(billingAddressData);\n } else {\n // Fall back to copying from form fields (legacy behavior)\n this.copyFromBillingFields();\n }\n }\n\n extractBillingDataFromPage() {\n // Try to find billing address information displayed on the page\n const billingData = {};\n\n // Look for common places where billing info might be displayed\n const selectors = [\n '.billing-address',\n '.bill-address',\n '[data-billing-address]',\n '.checkout-billing',\n '.address-summary .billing',\n ];\n\n selectors.forEach(selector => {\n const element = document.querySelector(selector);\n if (element && element.dataset.billingAddress) {\n try {\n const extracted = JSON.parse(element.dataset.billingAddress);\n Object.assign(billingData, extracted);\n } catch {\n // Could not parse billing data from this selector\n }\n }\n });\n\n return billingData;\n }\n\n getCheckbox() {\n // Get the checkbox element within this controller\n return this.element.querySelector('input[type=\"checkbox\"]');\n }\n\n getBillingAddressData() {\n // Get billing address data from data attribute\n try {\n const billingAddressJson = this.data.get('billing-address');\n return billingAddressJson ? JSON.parse(billingAddressJson) : {};\n } catch {\n return {};\n }\n }\n\n copyFromBillingData(billingData) {\n // Copy billing data to shipping form fields\n const fieldMapping = {\n 'firstname': 'order[ship_address_attributes][firstname]',\n 'lastname': 'order[ship_address_attributes][lastname]',\n 'address1': 'order[ship_address_attributes][address1]',\n 'address2': 'order[ship_address_attributes][address2]',\n 'city': 'order[ship_address_attributes][city]',\n 'state_id': 'order[ship_address_attributes][state_id]',\n 'zipcode': 'order[ship_address_attributes][zipcode]',\n 'phone': 'order[ship_address_attributes][phone]',\n 'country_id': 'order[ship_address_attributes][country_id]',\n };\n\n Object.keys(fieldMapping).forEach(billingKey => {\n const shippingFieldName = fieldMapping[billingKey];\n const shippingField = document.querySelector(`[name=\"${shippingFieldName}\"]`);\n const billingValue = billingData[billingKey];\n\n if (shippingField && billingValue) {\n shippingField.value = billingValue;\n\n // Trigger change event for select fields to update display\n if (shippingField.tagName === 'SELECT') {\n shippingField.dispatchEvent(new Event('change', { bubbles: true }));\n }\n }\n });\n }\n\n copyFromBillingFields() {\n // Legacy fallback: copy from billing form fields if they exist\n if (!this.hasShippingFieldTargets) {\n this.copyFromBillingFieldsDirect();\n return;\n }\n\n this.shippingFieldTargets.forEach(field => {\n const billingFieldName = field.dataset.billingField;\n if (billingFieldName) {\n const billingField = document.querySelector(`[name=\"${billingFieldName}\"]`);\n if (billingField) {\n field.value = billingField.value;\n }\n }\n });\n }\n\n copyFromBillingFieldsDirect() {\n // Direct field lookup when targets not available\n const fieldMapping = {\n 'order[bill_address_attributes][firstname]': 'order[ship_address_attributes][firstname]',\n 'order[bill_address_attributes][lastname]': 'order[ship_address_attributes][lastname]',\n 'order[bill_address_attributes][address1]': 'order[ship_address_attributes][address1]',\n 'order[bill_address_attributes][address2]': 'order[ship_address_attributes][address2]',\n 'order[bill_address_attributes][city]': 'order[ship_address_attributes][city]',\n 'order[bill_address_attributes][state_id]': 'order[ship_address_attributes][state_id]',\n 'order[bill_address_attributes][zipcode]': 'order[ship_address_attributes][zipcode]',\n 'order[bill_address_attributes][phone]': 'order[ship_address_attributes][phone]',\n 'order[bill_address_attributes][country_id]': 'order[ship_address_attributes][country_id]',\n };\n\n Object.keys(fieldMapping).forEach(billingFieldName => {\n const shippingFieldName = fieldMapping[billingFieldName];\n const billingField = document.querySelector(`[name=\"${billingFieldName}\"]`);\n const shippingField = document.querySelector(`[name=\"${shippingFieldName}\"]`);\n\n if (billingField && shippingField) {\n shippingField.value = billingField.value;\n\n // Trigger change event for select fields to update display\n if (shippingField.tagName === 'SELECT') {\n shippingField.dispatchEvent(new Event('change', { bubbles: true }));\n }\n }\n });\n }\n\n clearShippingFields() {\n // Clear shipping field values (excluding country_id which should remain static as US)\n const shippingFieldNames = [\n 'order[ship_address_attributes][firstname]',\n 'order[ship_address_attributes][lastname]',\n 'order[ship_address_attributes][address1]',\n 'order[ship_address_attributes][address2]',\n 'order[ship_address_attributes][city]',\n 'order[ship_address_attributes][state_id]',\n 'order[ship_address_attributes][zipcode]',\n 'order[ship_address_attributes][phone]',\n ];\n\n shippingFieldNames.forEach(fieldName => {\n const field = document.querySelector(`[name=\"${fieldName}\"]`);\n if (field) {\n field.value = '';\n\n // Trigger change event for select fields to update display\n if (field.tagName === 'SELECT') {\n field.dispatchEvent(new Event('change', { bubbles: true }));\n }\n }\n });\n\n // Also clear using targets if available (legacy support)\n if (this.hasShippingFieldTargets) {\n this.shippingFieldTargets.forEach(field => {\n field.value = '';\n });\n }\n }\n\n hideShippingSection() {\n // Hide the shipping section\n if (this.hasShippingSectionTarget) {\n this.shippingSectionTarget.style.display = 'none';\n }\n }\n\n showShippingSection() {\n // Show the shipping section\n if (this.hasShippingSectionTarget) {\n this.shippingSectionTarget.style.display = '';\n }\n }\n\n removeRequiredAttributes() {\n // Remove required attributes from shipping fields (excluding country_id which should remain static)\n const requiredShippingFields = [\n 'order[ship_address_attributes][firstname]',\n 'order[ship_address_attributes][lastname]',\n 'order[ship_address_attributes][address1]',\n 'order[ship_address_attributes][city]',\n 'order[ship_address_attributes][state_id]',\n 'order[ship_address_attributes][zipcode]',\n 'order[ship_address_attributes][phone]',\n ];\n\n requiredShippingFields.forEach(fieldName => {\n const field = document.querySelector(`[name=\"${fieldName}\"]`);\n if (field) {\n // Store original required state for restoration\n if (field.hasAttribute('required')) {\n field.dataset.wasRequired = 'true';\n }\n field.removeAttribute('required');\n }\n });\n\n // Also handle targets if available (legacy support)\n if (this.hasShippingFieldTargets) {\n this.shippingFieldTargets.forEach(field => {\n if (field.hasAttribute('required')) {\n field.dataset.wasRequired = 'true';\n }\n field.removeAttribute('required');\n });\n }\n }\n\n restoreRequiredAttributes() {\n // Restore required attributes to shipping fields (excluding country_id which should remain static)\n const requiredShippingFields = [\n 'order[ship_address_attributes][firstname]',\n 'order[ship_address_attributes][lastname]',\n 'order[ship_address_attributes][address1]',\n 'order[ship_address_attributes][city]',\n 'order[ship_address_attributes][state_id]',\n 'order[ship_address_attributes][zipcode]',\n 'order[ship_address_attributes][phone]',\n ];\n\n requiredShippingFields.forEach(fieldName => {\n const field = document.querySelector(`[name=\"${fieldName}\"]`);\n if (field && field.dataset.wasRequired === 'true') {\n field.setAttribute('required', 'required');\n delete field.dataset.wasRequired;\n }\n });\n\n // Also handle targets if available (legacy support)\n if (this.hasShippingFieldTargets) {\n this.shippingFieldTargets.forEach(field => {\n if (field.dataset.wasRequired === 'true') {\n field.setAttribute('required', 'required');\n delete field.dataset.wasRequired;\n }\n });\n }\n }\n\n dispatchAddressSyncEvent(sameAsBilling) {\n // Dispatch address sync event\n const event = new CustomEvent('checkout:address-sync', {\n detail: {\n sameAsBilling: sameAsBilling,\n },\n });\n document.dispatchEvent(event);\n }\n\n getShippingData() {\n // Get shipping data from fields\n const data = {};\n if (this.hasShippingFieldTargets) {\n this.shippingFieldTargets.forEach(field => {\n if (field.name && field.value) {\n data[field.name] = field.value;\n }\n });\n }\n return data;\n }\n\n\n dispatchToggleEvent(isChecked) {\n // Dispatch toggle event\n const event = new CustomEvent('checkout:address-sync', {\n detail: {\n sameAsBilling: isChecked,\n },\n bubbles: true,\n });\n document.dispatchEvent(event);\n }\n\n updateCheckboxVisualState(checkbox) {\n // Update custom visual checkbox state\n const customVisual = this.element.querySelector('.custom-checkbox-visual');\n const customCheckmark = this.element.querySelector('.custom-checkmark');\n\n if (checkbox.checked) {\n // Show checkmark\n if (customCheckmark) customCheckmark.style.display = 'inline';\n if (customVisual) customVisual.style.backgroundColor = '#e7f3ff';\n } else {\n // Hide checkmark\n if (customCheckmark) customCheckmark.style.display = 'none';\n if (customVisual) customVisual.style.backgroundColor = 'white';\n }\n }\n\n cleanupController() {\n // Cleanup controller\n // No specific cleanup needed for this controller\n }\n\n ensureCheckboxIsClickable() {\n // Find checkbox and related elements\n const checkbox = this.getCheckbox();\n const label = this.element.querySelector('label');\n const container = this.element.querySelector('.native-checkbox-container');\n const customVisual = this.element.querySelector('.custom-checkbox-visual');\n\n if (checkbox) {\n // Remove any disabled attribute from hidden checkbox\n checkbox.removeAttribute('disabled');\n checkbox.classList.remove('disabled');\n\n // Set initial visual state\n this.updateCheckboxVisualState(checkbox);\n\n // Style container for proper display\n if (container) {\n container.style.cssText = `\n display: inline-flex !important;\n align-items: center !important;\n gap: 8px !important;\n padding: 8px !important;\n border-radius: 4px !important;\n margin: 4px 0 !important;\n `;\n }\n\n // Add event listeners to custom visual checkbox\n if (customVisual) {\n customVisual.addEventListener('click', (event) => {\n event.preventDefault();\n event.stopPropagation();\n checkbox.checked = !checkbox.checked;\n this.updateCheckboxVisualState(checkbox);\n this.toggleAddressFields();\n });\n }\n\n // Add MULTIPLE event listeners for maximum coverage\n checkbox.addEventListener('click', (event) => {\n event.stopPropagation();\n this.updateCheckboxVisualState(checkbox);\n this.toggleAddressFields();\n });\n\n checkbox.addEventListener('change', (event) => {\n event.stopPropagation();\n this.updateCheckboxVisualState(checkbox);\n this.toggleAddressFields();\n });\n\n // Add click handler to label as backup\n if (label) {\n label.addEventListener('click', (event) => {\n event.preventDefault();\n event.stopPropagation();\n checkbox.checked = !checkbox.checked;\n this.updateCheckboxVisualState(checkbox);\n this.toggleAddressFields();\n });\n }\n\n // Also try to handle the container click\n if (container) {\n container.addEventListener('click', (event) => {\n if (event.target === container) {\n event.preventDefault();\n event.stopPropagation();\n checkbox.checked = !checkbox.checked;\n this.updateCheckboxVisualState(checkbox);\n this.toggleAddressFields();\n }\n });\n }\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['methodRadio', 'summarySection', 'selectedMethodName', 'selectedMethodPrice', 'submitButton'];\n\n connect() {\n this.initializeController();\n // Initialize debounce state\n this.isSubmitting = false;\n this.originalSubmitText = '';\n }\n\n get orderIdValue() {\n return this.data.get('order-id');\n }\n\n disconnect() {\n this.cleanupController();\n }\n\n initializeController() {\n // Initialize shipping method form controller\n // orderIdValue is retrieved from data-order-id attribute\n\n // Set up form handling\n this.setupFormHandling();\n\n // Update initial summary display\n this.updateInitialSummary();\n }\n\n updateInitialSummary() {\n // Update summary with initially selected method\n const selectedMethod = this.getSelectedMethod();\n if (selectedMethod) {\n const methodName = selectedMethod.dataset.methodName || '';\n const methodPrice = selectedMethod.dataset.methodPrice || '';\n this.updateSummary(methodName, methodPrice);\n }\n }\n\n setupFormHandling() {\n // Store bound function references for proper cleanup\n this.boundSubmitForm = this.submitForm.bind(this);\n this.boundHandleMethodChange = this.handleMethodChange.bind(this);\n\n // Set up form submission handling\n const form = this.element.querySelector('form');\n if (form) {\n form.addEventListener('submit', this.boundSubmitForm);\n }\n\n // Set up method radio changes\n if (this.hasMethodRadioTargets) {\n this.methodRadioTargets.forEach(radio => {\n radio.addEventListener('change', this.boundHandleMethodChange);\n });\n }\n }\n\n // Main action method for form submission\n submitForm(event) {\n event.preventDefault();\n\n // Prevent multiple rapid submissions\n if (this.isSubmitting) {\n return;\n }\n\n const form = event.target;\n\n // Validate that a method is selected\n if (!this.getSelectedMethod()) {\n this.showError('Please select a shipping method.');\n return;\n }\n\n // Mark as submitting and set loading state\n this.isSubmitting = true;\n this.setLoadingState(true);\n\n // Prepare form data manually for better test compatibility\n const urlSearchParams = new URLSearchParams();\n\n // Add CSRF token\n const csrfToken = form.querySelector('input[name=\"authenticity_token\"]');\n if (csrfToken) {\n urlSearchParams.append('authenticity_token', csrfToken.value);\n }\n\n // Add selected method\n const selectedMethod = this.getSelectedMethod();\n if (selectedMethod) {\n urlSearchParams.append('order[shipping_method_entity_id]', selectedMethod.value);\n }\n\n // Add shipping method ID from data attribute\n const shippingMethodId = this.element.dataset.shippingMethodId;\n if (shippingMethodId) {\n urlSearchParams.append('shipping_method_id', shippingMethodId);\n }\n\n // Add any other form fields\n const inputs = form.querySelectorAll('input, select, textarea');\n inputs.forEach(input => {\n if (input.name && input.name !== 'authenticity_token' && input.type !== 'radio') {\n urlSearchParams.append(input.name, input.value);\n }\n });\n\n // Submit via fetch\n return fetch(form.getAttribute('action'), {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/x-www-form-urlencoded',\n 'X-Requested-With': 'XMLHttpRequest',\n 'X-CSRF-Token': this.getCSRFToken(),\n },\n body: urlSearchParams.toString(),\n })\n .then(response => response.json())\n .then(data => {\n if (data.status === 'success') {\n this.handleSuccessResponse(data);\n } else {\n this.handleErrorResponse(data);\n }\n })\n .catch(error => {\n this.handleNetworkError(error);\n })\n .finally(() => {\n this.setLoadingState(false);\n // Reset debounce state\n this.isSubmitting = false;\n });\n }\n\n // Handle method radio changes\n handleMethodChange(event) {\n const radio = event.target;\n const methodName = radio.dataset.methodName || '';\n const methodPrice = radio.dataset.methodPrice || '';\n\n // Update summary display\n this.updateSummary(methodName, methodPrice);\n\n // Dispatch change event\n this.dispatchMethodChangeEvent(radio);\n }\n\n // Get currently selected method\n getSelectedMethod() {\n if (this.hasMethodRadioTargets) {\n return this.methodRadioTargets.find(radio => radio.checked) || null;\n }\n return null;\n }\n\n // Update summary display\n updateSummary(methodName, methodPrice) {\n if (this.hasSelectedMethodNameTarget) {\n this.selectedMethodNameTarget.textContent = methodName;\n }\n if (this.hasSelectedMethodPriceTarget) {\n const formattedPrice = methodPrice && !methodPrice.startsWith('$') ? `$${methodPrice}` : methodPrice;\n this.selectedMethodPriceTarget.textContent = formattedPrice;\n }\n }\n\n handleSuccessResponse(data) {\n // Handle successful response\n const event = new CustomEvent('checkout:step-change', {\n detail: {\n step: 'payment',\n data: data,\n },\n });\n document.dispatchEvent(event);\n\n // Redirect if provided\n if (data.redirect) {\n window.location.href = data.redirect;\n }\n }\n\n handleErrorResponse(data) {\n // Handle error response\n const message = data.message || 'An error occurred while updating shipping method.';\n this.showError(message);\n }\n\n dispatchMethodChangeEvent(radio) {\n // Dispatch method change event\n const event = new CustomEvent('checkout:shipping-method-changed', {\n detail: {\n methodId: radio.value,\n methodName: radio.dataset.methodName,\n methodPrice: radio.dataset.methodPrice,\n orderId: this.orderIdValue,\n },\n });\n document.dispatchEvent(event);\n }\n\n handleSubmitError(data) {\n // Handle form submission error\n this.showError(data.error || data.message || 'An error occurred. Please try again.');\n }\n\n handleNetworkError(_error) {\n // Handle network error\n this.showError('Unable to update shipping method. Please check your connection and try again.');\n }\n\n showError(message) {\n // Always use inline error for forms in this controller\n // to ensure consistent test behavior and form context\n this.createInlineError(message);\n }\n\n createInlineError(message) {\n // Show inline error message for forms\n const errorDiv = document.createElement('div');\n errorDiv.className = 'ae-alert ae-alert-danger';\n errorDiv.textContent = message;\n\n // Remove existing errors\n const existingErrors = this.element.querySelectorAll('.ae-alert-danger');\n existingErrors.forEach(error => error.remove());\n\n // Insert error at top of form\n this.element.insertBefore(errorDiv, this.element.firstChild);\n }\n\n updateShippingMethodDisplay(data) {\n // Update shipping method display\n const shippingMethodDisplay = document.querySelector('.shipping-method-display') ||\n document.querySelector('#shipping-method-display');\n\n if (shippingMethodDisplay && data.shipping_method_html) {\n // SECURITY: Use textContent to prevent XSS when updating with server data\n shippingMethodDisplay.textContent = data.shipping_method_html;\n }\n\n // Update pricing if available\n if (data.pricing) {\n this.updatePricing(data.pricing);\n }\n }\n\n updatePricing(pricing) {\n // Update pricing display\n const pricingElements = {\n subtotal: document.querySelector('.subtotal-amount'),\n shipping: document.querySelector('.shipping-amount'),\n tax: document.querySelector('.tax-amount'),\n total: document.querySelector('.total-amount'),\n };\n\n Object.keys(pricingElements).forEach(key => {\n const element = pricingElements[key];\n if (element && pricing[key]) {\n element.textContent = pricing[key];\n }\n });\n }\n\n handleValidationErrors(errors) {\n // Handle server-side validation errors\n Object.keys(errors).forEach(fieldName => {\n const field = this.element.querySelector(`[name*=\"${fieldName}\"]`);\n if (field) {\n this.showFieldError(field, errors[fieldName].join(', '));\n }\n });\n }\n\n\n handleFieldChange(event) {\n // Handle field change\n const field = event.target;\n\n // Clear previous validation\n this.clearFieldError(field);\n\n // Update related fields if needed\n this.updateRelatedFields(field);\n }\n\n handleAddressChange(event) {\n // Handle address selection change\n const select = event.target;\n const selectedAddressId = select.value;\n\n // Update form with selected address\n this.updateFormWithAddress(selectedAddressId);\n\n // Dispatch address change event\n const event2 = new CustomEvent('checkout:address-changed', {\n detail: {\n addressId: selectedAddressId,\n shippingMethodId: this.shippingMethodId,\n },\n });\n document.dispatchEvent(event2);\n }\n\n handleAddressCardClick(event) {\n // Handle address card click\n const card = event.currentTarget;\n const addressId = card.dataset.addressId;\n\n // Update visual selection\n this.updateAddressCardSelection(card);\n\n // Update form with selected address\n this.updateFormWithAddress(addressId);\n }\n\n updateAddressCardSelection(selectedCard) {\n // Update address card selection\n const allCards = this.element.querySelectorAll('.address-card');\n\n allCards.forEach(card => {\n card.classList.remove('selected', 'ae-selected');\n });\n\n selectedCard.classList.add('selected', 'ae-selected');\n }\n\n updateFormWithAddress(addressId) {\n // Update form with selected address\n const addressSelect = this.element.querySelector('select[name*=\"address\"]');\n if (addressSelect) {\n addressSelect.value = addressId;\n }\n\n // Update hidden fields if present\n const hiddenAddressField = this.element.querySelector('input[name*=\"address_id\"]');\n if (hiddenAddressField) {\n hiddenAddressField.value = addressId;\n }\n }\n\n updateRelatedFields(field) {\n // Update related fields based on current field\n const fieldName = field.name;\n\n // Handle specific field relationships\n switch (fieldName) {\n case 'shipping_method_id':\n this.updateShippingMethodRelatedFields(field.value);\n break;\n case 'address_id':\n this.updateAddressRelatedFields(field.value);\n break;\n }\n }\n\n updateShippingMethodRelatedFields() {\n // Update fields related to shipping method\n const shippingFeeField = this.element.querySelector('input[name*=\"shipping_fee_id\"]');\n if (shippingFeeField) {\n // Update shipping fee ID based on selected method\n // This would typically come from a data attribute or API call\n }\n }\n\n updateAddressRelatedFields(addressId) {\n // Update fields related to address\n // This might update shipping costs, availability, etc.\n if (addressId) {\n this.checkShippingAvailability(addressId);\n }\n }\n\n checkShippingAvailability() {\n // Check shipping availability for address\n // This is a placeholder for future implementation\n }\n\n proceedToNextStep(nextStep) {\n // Proceed to next checkout step\n const event = new CustomEvent('checkout:proceed-to-step', {\n detail: {\n step: nextStep,\n fromStep: 'address',\n },\n });\n document.dispatchEvent(event);\n }\n\n\n clearFieldError(field) {\n // Clear field error\n const fieldContainer = field.closest('.ae-field') || field.parentElement;\n const errorElement = fieldContainer.querySelector('.ae-field-error');\n\n fieldContainer.classList.remove('ae-field-error');\n if (errorElement) {\n errorElement.style.display = 'none';\n }\n }\n\n createErrorElement(container) {\n // Create error element\n const errorElement = document.createElement('div');\n errorElement.className = 'ae-field-error ae-text-danger';\n errorElement.style.display = 'none';\n\n container.appendChild(errorElement);\n return errorElement;\n }\n\n\n setLoadingState(isLoading) {\n // Set loading state with debounce-aware button states\n if (this.hasSubmitButtonTarget) {\n if (isLoading) {\n // Store original text if not already stored\n if (!this.originalSubmitText) {\n this.originalSubmitText = this.submitButtonTarget.textContent;\n }\n this.submitButtonTarget.disabled = true;\n this.submitButtonTarget.textContent = 'Processing...';\n } else {\n this.submitButtonTarget.disabled = false;\n // Restore original text or use default\n this.submitButtonTarget.textContent = this.originalSubmitText || 'Continue to Payment';\n }\n }\n }\n\n getCSRFToken() {\n // Get CSRF token from meta tag\n const token = document.querySelector('meta[name=\"csrf-token\"]');\n return token ? token.getAttribute('content') : '';\n }\n\n // Action: next - triggered by Next button click\n next(event) {\n // Form submission triggered by user action\n\n event.preventDefault();\n\n\n // Check if there's already a submission in progress (prevents dual requests)\n if (window.checkoutSubmissionInProgress) {\n return;\n }\n\n // Set submission lock to prevent other controllers from submitting\n window.checkoutSubmissionInProgress = true;\n\n // Collect all address data from input fields in this container\n // Collect address data from form fields\n const formData = this.collectAddressData();\n\n // Add shipping method data\n // Add shipping method data to form submission\n this.addShippingMethodData(formData);\n\n // Validate required fields\n // Validate required address fields\n const isValid = this.validateAddressFields();\n if (!isValid) {\n // Client-side validation failed, but allowing server validation to handle errors\n // Temporarily continue anyway to see server response\n // this.showError('Please fill in all required fields');\n // window.checkoutSubmissionInProgress = false; // Release lock on validation failure\n // return;\n } else {\n // Client-side validation passed\n }\n\n // Submit the form data\n // Submit address data to server\n this.submitAddressData(formData);\n }\n\n collectAddressData() {\n // Collect form data from all input fields in this container\n const formData = new FormData();\n const inputs = this.element.querySelectorAll('input, select, textarea');\n\n // DEBUG: Log form data collection\n // Collect form data from inputs\n // Process form inputs\n\n inputs.forEach(input => {\n const _hasName = !!input.name;\n const _hasValue = !!(input.value && input.value.trim());\n // Process input field\n\n if (input.name) {\n // Include all named inputs, even if empty (server expects empty strings for missing fields)\n const value = (input.value || '').trim();\n formData.append(input.name, value);\n // Added input to form data\n }\n });\n\n // Add CSRF token\n const csrfToken = this.getCSRFToken();\n formData.append('authenticity_token', csrfToken);\n // Added CSRF token for security\n\n // Log final FormData contents\n // Final form data validation\n for (const [_key, _value] of formData.entries()) {\n // Form field included\n }\n\n return formData;\n }\n\n addShippingMethodData(formData) {\n // Try to get shipping method ID from data attribute first\n let shippingMethodId = this.data.get('shipping-method-id');\n\n // Fallback: read from hidden form inputs if data attribute is missing\n if (!shippingMethodId) {\n const hiddenInput = document.querySelector('input[name=\"shipping_method_id\"][type=\"hidden\"]');\n if (hiddenInput) {\n shippingMethodId = hiddenInput.value;\n }\n }\n\n if (shippingMethodId) {\n formData.append('shipping_method_id', shippingMethodId);\n }\n\n // Try to get shipping fee ID from data attribute first\n let shippingFeeId = this.data.get('shipping-fee-id');\n\n // Fallback: try multiple sources for shipping fee ID\n if (!shippingFeeId) {\n // Try various hidden input patterns\n const selectors = [\n 'input[name=\"shipping_fee_id\"][type=\"hidden\"]',\n 'input[name=\"shipping-fee-id\"][type=\"hidden\"]',\n 'input[name=\"fee_id\"][type=\"hidden\"]',\n 'input[id*=\"shipping_fee\"][type=\"hidden\"]',\n 'input[id*=\"fee\"][type=\"hidden\"]',\n ];\n\n for (const selector of selectors) {\n const input = document.querySelector(selector);\n if (input && input.value) {\n shippingFeeId = input.value;\n break;\n }\n }\n\n // If still not found, try to derive from shipping method\n if (!shippingFeeId && shippingMethodId) {\n // Look for selected radio button or element with shipping method data\n const methodRadio = document.querySelector(`input[value=\"${shippingMethodId}\"][type=\"radio\"]`);\n if (methodRadio) {\n const feeId = methodRadio.dataset.feeId || methodRadio.dataset.shippingFeeId;\n if (feeId) {\n shippingFeeId = feeId;\n }\n }\n }\n\n // Debug: show all available inputs if still not found\n if (!shippingFeeId) {\n const allInputs = document.querySelectorAll('input[type=\"hidden\"]');\n allInputs.forEach(input => {\n if (input.name || input.id) {\n // Debug logging available for troubleshooting (development only)\n }\n });\n }\n }\n\n if (shippingFeeId) {\n formData.append('shipping_fee_id', shippingFeeId);\n }\n\n // Add default shipping address ID if present\n let defaultShippingAddressId = this.data.get('default-shipping-address-id');\n\n // Fallback: try to find from hidden inputs\n if (!defaultShippingAddressId) {\n const hiddenInput = document.querySelector('input[name=\"default_shipping_address_id\"][type=\"hidden\"]');\n if (hiddenInput && hiddenInput.value) {\n defaultShippingAddressId = hiddenInput.value;\n }\n }\n\n if (defaultShippingAddressId) {\n formData.append('default_shipping_address_id', defaultShippingAddressId);\n\n // When using default shipping address, ensure phone has a value\n // Check if phone field is empty\n const phoneValue = formData.get('order[ship_address_attributes][phone]');\n if (!phoneValue || phoneValue.trim() === '') {\n // Set a placeholder phone number for default addresses\n formData.set('order[ship_address_attributes][phone]', '000-000-0000');\n }\n }\n\n }\n\n validateAddressFields() {\n // Validate required fields - look for inputs inside .ae-required containers\n const requiredFields = this.element.querySelectorAll('input[required], .ae-required input, .ae-required select');\n let isValid = true;\n\n // DEBUG: Log validation details\n // Begin address field validation\n // Validate required fields\n // Check all required fields\n\n // Debug: Show all .ae-required containers\n const requiredContainers = this.element.querySelectorAll('.ae-required');\n // Process required field containers\n requiredContainers.forEach((container, _index) => {\n const _inputs = container.querySelectorAll('input, select');\n // Process container inputs\n });\n\n requiredFields.forEach(field => {\n const hasValue = field.value && field.value.trim();\n // Validate field\n\n if (!hasValue) {\n // Field validation failed - empty value\n this.showFieldError(field, 'This field is required');\n isValid = false;\n }\n });\n\n // Validation complete\n return isValid;\n }\n\n showFieldError(input, message) {\n // Show field error state\n const fieldContainer = input.closest('.ae-field') || input.parentElement;\n const errorElement = fieldContainer.querySelector('.ae-error-msg');\n\n // Add error class\n fieldContainer.classList.add('ae-field-error');\n\n // Show error message\n if (errorElement) {\n errorElement.textContent = message;\n errorElement.style.display = 'block';\n }\n }\n\n submitAddressData(formData) {\n // Set loading state\n this.setLoadingState(true);\n\n // Get sale slug for URL construction\n const saleSlug = this.element.dataset.saleSlug;\n const url = `/t/${saleSlug}/checkout/address`;\n\n // Submit via fetch\n return fetch(url, {\n method: 'POST',\n body: formData,\n headers: {\n 'X-Requested-With': 'XMLHttpRequest',\n },\n })\n .then(response => {\n return response.json().then(data => {\n return { data, ok: response.ok, status: response.status };\n });\n })\n .then(({ data, ok, status }) => {\n if (ok) {\n this.handleAddressSuccessResponse(data);\n } else if (status === 422 && data.errors) {\n // Handle validation errors specifically\n this.handleValidationErrors(data.errors);\n this.handleAddressErrorResponse(data);\n } else {\n this.handleAddressErrorResponse(data);\n }\n })\n .catch(error => {\n this.handleAddressSubmitError(error);\n })\n .finally(() => {\n this.setLoadingState(false);\n // Always release submission lock when request completes\n window.checkoutSubmissionInProgress = false;\n });\n }\n\n handleAddressSuccessResponse(data) {\n // Handle successful address submission response\n if (data.success) {\n // Update sidebar with new order totals if provided\n if (data.order_totals) {\n this.updateSidebarTotals(data.order_totals);\n }\n\n if (data.redirect_url) {\n setTimeout(() => {\n window.location.href = data.redirect_url;\n }, 100); // Small delay to allow DOM updates\n } else {\n // Dispatch success event\n const event = new CustomEvent('checkout:address-updated', {\n detail: { data },\n });\n document.dispatchEvent(event);\n }\n }\n }\n\n handleAddressErrorResponse(data) {\n // Handle error response for address submission\n const message = data.errorMsg || 'Please fill in all required fields and try again.';\n this.showError(message);\n // Release submission lock on error (will also be released in finally block)\n window.checkoutSubmissionInProgress = false;\n }\n\n handleAddressSubmitError(_error) {\n // Handle fetch error for address submission\n this.showError('An error occurred while saving your address. Please try again.');\n // Release submission lock on error (will also be released in finally block)\n window.checkoutSubmissionInProgress = false;\n }\n\n // Unified form data collection method\n collectFormFields() {\n // Collect form data combining address data and shipping method data\n const formData = this.collectAddressData();\n this.addShippingMethodData(formData);\n return formData;\n }\n\n // Same-as-billing submission handling\n async handleSameAsBillingSubmission() {\n // Check if there's already a submission in progress\n if (window.checkoutSubmissionInProgress) {\n return;\n }\n\n // Set submission lock to prevent dual requests\n window.checkoutSubmissionInProgress = true;\n\n try {\n // Collect form fields using unified method\n const formData = this.collectFormFields();\n\n // Submit the form data\n await this.submitAddressData(formData);\n } catch (error) {\n this.handleAddressSubmitError(error);\n } finally {\n // Always release submission lock\n window.checkoutSubmissionInProgress = false;\n }\n }\n\n\n cleanupController() {\n // Cleanup controller with proper event listener removal\n const form = this.element.querySelector('form');\n if (form && this.boundSubmitForm) {\n form.removeEventListener('submit', this.boundSubmitForm);\n }\n\n // Clean up method radio changes\n if (this.hasMethodRadioTargets && this.boundHandleMethodChange) {\n this.methodRadioTargets.forEach(radio => {\n radio.removeEventListener('change', this.boundHandleMethodChange);\n });\n }\n }\n\n updateSidebarTotals(orderTotals) {\n // Update sidebar with new order totals\n const sidebarPanel = document.querySelector('#sidebar-cart-panel');\n if (!sidebarPanel) return;\n\n // Update shipping total (only show if > 0)\n const shippingRow = this.findShippingRow(sidebarPanel);\n if (shippingRow) {\n if (orderTotals.shipment_total > 0) {\n // Update existing shipping row\n const shippingAmountCell = shippingRow.querySelector('td:last-child');\n if (shippingAmountCell) {\n shippingAmountCell.textContent = orderTotals.display_shipment_total;\n }\n shippingRow.style.display = '';\n } else {\n // Hide shipping row if amount is 0\n shippingRow.style.display = 'none';\n }\n } else if (orderTotals.shipment_total > 0) {\n // Create new shipping row if it doesn't exist and amount > 0\n this.createShippingRow(sidebarPanel, orderTotals.display_shipment_total);\n }\n\n // Update total\n const totalRow = this.findTotalRow(sidebarPanel);\n if (totalRow) {\n const totalAmountCell = totalRow.querySelector('td:last-child');\n if (totalAmountCell) {\n totalAmountCell.textContent = orderTotals.display_total;\n }\n }\n }\n\n createShippingRow(sidebarPanel, displayAmount) {\n // Create a new shipping row in the summary table\n const summaryTable = sidebarPanel.querySelector('#cart-summary tbody');\n if (!summaryTable) return;\n\n const shippingRow = document.createElement('tr');\n shippingRow.innerHTML = `\n
Shipping: \n
${displayAmount} \n `;\n\n // Insert before the total row (should be last)\n const totalRow = summaryTable.querySelector('tr:last-child');\n if (totalRow) {\n summaryTable.insertBefore(shippingRow, totalRow);\n } else {\n summaryTable.appendChild(shippingRow);\n }\n }\n\n findShippingRow(sidebarPanel) {\n // Find the shipping row by looking for text content\n const rows = sidebarPanel.querySelectorAll('#cart-summary tr');\n for (const row of rows) {\n const firstCell = row.querySelector('td:first-child');\n if (firstCell && firstCell.textContent.trim().includes('Shipping:')) {\n return row;\n }\n }\n return null;\n }\n\n findTotalRow(sidebarPanel) {\n // Find the total row by looking for text content\n const rows = sidebarPanel.querySelectorAll('#cart-summary tr');\n for (const row of rows) {\n const firstCell = row.querySelector('td:first-child');\n if (firstCell && firstCell.textContent.trim().includes('Total:')) {\n return row;\n }\n }\n return null;\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['radioInput', 'methodName', 'methodPrice', 'optionsSection', 'totalDisplay', 'totalAmount', 'insuranceOption', 'signatureOption'];\n\n get methodIdValue() {\n return this.data.get('method-id');\n }\n\n get methodNameValue() {\n return this.data.get('method-name');\n }\n\n connect() {\n this.initializeController();\n\n // Store bound handler for proper cleanup\n this.boundHandleExternalSelectionChange = this.handleExternalSelectionChange.bind(this);\n\n // Listen for shipping method changes from list controller\n document.addEventListener('checkout:shipping-method-changed', this.boundHandleExternalSelectionChange);\n }\n\n disconnect() {\n this.cleanupController();\n\n // Remove event listener using the same bound function\n if (this.boundHandleExternalSelectionChange) {\n document.removeEventListener('checkout:shipping-method-changed', this.boundHandleExternalSelectionChange);\n }\n }\n\n initializeController() {\n // Initialize shipping method radio controller\n this._methodPriceValue = this.data.get('method-price');\n this._selectedValue = this.data.get('selected') === 'true';\n\n this.setupRadioHandling();\n this.updateInitialState();\n }\n\n get methodPriceValue() {\n return this._methodPriceValue || this.data.get('method-price') || '';\n }\n\n set methodPriceValue(value) {\n this._methodPriceValue = value;\n }\n\n get selectedValue() {\n return this._selectedValue || false;\n }\n\n set selectedValue(value) {\n const oldValue = this._selectedValue;\n this._selectedValue = value;\n if (oldValue !== value) {\n this.selectedValueChanged();\n }\n }\n\n\n updateInitialState() {\n // Set up initial state based on data values\n if (this.selectedValue && this.hasOptionsSectionTarget) {\n this.optionsSectionTarget.style.display = 'block';\n }\n\n // Set up initial visual state\n this.updateVisualState();\n\n // Calculate and display initial total cost\n this.updateTotalDisplay(this.calculateTotalCost());\n }\n\n setupRadioHandling() {\n // Set up radio button handling\n if (this.hasRadioInputTarget) {\n this.radioInputTarget.addEventListener('change', this.handleRadioChange.bind(this));\n // Set up initial state\n this.updateVisualState();\n }\n }\n\n // Main action method expected by tests\n selectMethod(event) {\n event.preventDefault();\n\n if (this.hasRadioInputTarget) {\n this.radioInputTarget.checked = true;\n this.selectedValue = true;\n\n this.updateVisualState();\n\n // Show options section\n if (this.hasOptionsSectionTarget) {\n this.optionsSectionTarget.style.display = 'block';\n }\n\n // Calculate and display total\n const totalCost = this.calculateTotalCost();\n this.updateTotalDisplay(totalCost);\n\n // Dispatch selection event\n this.dispatchSelectionEvent();\n }\n }\n\n handleRadioChange(event) {\n // Handle radio button change\n const radio = event.target;\n\n if (radio.checked) {\n this.selectedValue = true;\n\n // Update visual state\n this.updateVisualState();\n\n // Show options section\n if (this.hasOptionsSectionTarget) {\n this.optionsSectionTarget.style.display = 'block';\n }\n\n // Calculate and display total\n const totalCost = this.calculateTotalCost();\n this.updateTotalDisplay(totalCost);\n\n // Dispatch selection event\n this.dispatchSelectionEvent();\n }\n }\n\n // Handle insurance option changes\n handleInsuranceChange(_event) {\n const totalCost = this.calculateTotalCost();\n this.updateTotalDisplay(totalCost);\n\n // Dispatch cost change event\n this.dispatchCostChangeEvent();\n }\n\n // Handle signature option changes\n handleSignatureChange(_event) {\n const totalCost = this.calculateTotalCost();\n this.updateTotalDisplay(totalCost);\n\n // Dispatch cost change event\n this.dispatchCostChangeEvent();\n }\n\n // Calculate total cost including options\n calculateTotalCost() {\n let total = parseFloat(this.methodPriceValue) || 0;\n\n // Add insurance cost if selected\n if (this.hasInsuranceOptionTarget && this.insuranceOptionTarget.checked) {\n const insuranceCost = parseFloat(this.insuranceOptionTarget.dataset.insuranceCost) || 0;\n total += insuranceCost;\n }\n\n // Add signature cost if selected\n if (this.hasSignatureOptionTarget && this.signatureOptionTarget.checked) {\n const signatureCost = parseFloat(this.signatureOptionTarget.dataset.signatureCost) || 0;\n total += signatureCost;\n }\n\n return total;\n }\n\n // Update total display\n updateTotalDisplay(amount) {\n if (this.hasTotalAmountTarget) {\n this.totalAmountTarget.textContent = '$' + amount.toFixed(2);\n }\n }\n\n // Get selected options\n getSelectedOptions() {\n return {\n insurance: this.hasInsuranceOptionTarget ? this.insuranceOptionTarget.checked : false,\n signature: this.hasSignatureOptionTarget ? this.signatureOptionTarget.checked : false,\n };\n }\n\n findRadioContainer() {\n // Find the container element for the radio button\n return this.element.closest('.shipping-method-option') || this.element;\n }\n\n updateVisualState() {\n // Update visual state based on selected value\n const container = this.findRadioContainer();\n\n if (this.selectedValue) {\n // Add selected state\n if (container) {\n container.classList.add('selected', 'ae-selected');\n }\n if (this.hasRadioInputTarget) {\n this.radioInputTarget.checked = true;\n }\n if (this.hasOptionsSectionTarget) {\n this.optionsSectionTarget.style.display = 'block';\n }\n } else {\n if (container) {\n container.classList.remove('selected', 'ae-selected');\n }\n if (this.hasRadioInputTarget) {\n this.radioInputTarget.checked = false;\n }\n if (this.hasOptionsSectionTarget) {\n this.optionsSectionTarget.style.display = 'none';\n }\n }\n }\n\n selectedValueChanged() {\n // Handle selected value changes\n if (this.selectedValue) {\n if (this.hasRadioInputTarget) {\n this.radioInputTarget.checked = true;\n }\n if (this.hasOptionsSectionTarget) {\n this.optionsSectionTarget.style.display = 'block';\n }\n } else {\n if (this.hasRadioInputTarget) {\n this.radioInputTarget.checked = false;\n }\n if (this.hasOptionsSectionTarget) {\n this.optionsSectionTarget.style.display = 'none';\n }\n }\n }\n\n updateTotalCost() {\n const total = this.calculateTotalCost();\n this.updateTotalDisplay(total);\n }\n\n dispatchSelectionEvent() {\n // Dispatch shipping method selection event\n const totalCost = this.calculateTotalCost();\n const options = this.getSelectedOptions();\n\n const event = new CustomEvent('checkout:shipping-method-selected', {\n detail: {\n methodId: this.methodIdValue,\n methodName: this.methodNameValue,\n basePrice: this.methodPriceValue,\n totalCost: totalCost,\n options: options,\n },\n });\n document.dispatchEvent(event);\n }\n\n dispatchCostChangeEvent() {\n // Dispatch cost change event\n const totalCost = this.calculateTotalCost();\n const options = this.getSelectedOptions();\n\n const event = new CustomEvent('checkout:shipping-cost-changed', {\n detail: {\n methodId: this.methodIdValue,\n newTotal: totalCost,\n options: options,\n },\n });\n document.dispatchEvent(event);\n }\n\n updateOptionsVisibility() {\n // Update options section visibility based on selected state\n if (this.hasOptionsSectionTarget) {\n this.optionsSectionTarget.style.display = this.selectedValue ? 'block' : 'none';\n }\n }\n\n updateRadioState() {\n // Update radio input checked state based on selected value\n if (this.hasRadioInputTarget) {\n this.radioInputTarget.checked = this.selectedValue;\n }\n }\n\n getCSRFToken() {\n // Get CSRF token from meta tag\n const token = document.querySelector('meta[name=\"csrf-token\"]');\n return token ? token.getAttribute('content') : '';\n }\n\n cleanupController() {\n // Cleanup controller\n }\n\n handleExternalSelectionChange(event) {\n // Handle shipping method selection changes from list controller\n const selectedMethodId = event.detail.methodId;\n const myMethodId = this.methodIdValue;\n\n if (selectedMethodId === myMethodId) {\n // This method was selected - activate this controller\n this.selectedValue = true;\n this.updateVisualState();\n } else {\n // Another method was selected - deactivate this controller\n this.selectedValue = false;\n this.updateVisualState();\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['next'];\n\n connect() {\n this.initializeForm();\n }\n\n disconnect() {\n this.cleanupForm();\n }\n\n initializeForm() {\n // Initialize billing form\n this.saleSlug = this.data.get('sale-slug');\n this.orderNumber = this.data.get('order-number');\n this.collectBilling = this.data.get('collect-billing') === 'true';\n this.collectPlayerInfo = this.data.get('collect-player-info') === 'true';\n\n // Set up form validation\n this.setupFormValidation();\n }\n\n setupFormValidation() {\n // Set up real-time validation for billing fields\n const form = this.element.querySelector('form');\n if (form) {\n // Store bound handler for proper cleanup\n this.boundHandleSubmit = this.handleSubmit.bind(this);\n form.addEventListener('submit', this.boundHandleSubmit);\n }\n }\n\n handleSubmit(event) {\n // Handle form submission\n event.preventDefault();\n\n // Validate all fields\n const isValid = this.validateAllFields();\n\n if (!isValid) {\n this.showFormError('Please correct the errors below');\n return;\n }\n\n // Submit form\n this.submitForm(event.target);\n }\n\n validateAllFields() {\n // Validate all form fields\n const inputs = this.element.querySelectorAll('input[type=\"text\"], input[type=\"email\"], select');\n let isValid = true;\n\n inputs.forEach(input => {\n if (!this.validateField(input)) {\n isValid = false;\n }\n });\n\n return isValid;\n }\n\n validateField(input) {\n // Validate individual field\n const value = input.value.trim();\n const fieldName = input.name;\n\n // Basic validation rules\n const isRequired = input.hasAttribute('required') || input.classList.contains('ae-required') ||\n input.closest('.ae-required') !== null;\n\n if (isRequired && !value) {\n this.showFieldError(input, 'This field is required');\n return false;\n }\n\n // Field-specific validation\n if (fieldName && fieldName.includes('email')) {\n return this.validateEmail(input, value);\n } else if (fieldName && fieldName.includes('zipcode')) {\n return this.validateZipcode(input, value);\n } else if (fieldName && (fieldName.includes('phone') || input.id === 'contact-number')) {\n return this.validatePhone(input, value);\n } else if (fieldName && fieldName.includes('country_id')) {\n return this.validateCountry(input, value);\n }\n\n this.showFieldSuccess(input);\n return true;\n }\n\n validateEmail(input, value) {\n // Validate email format\n const emailPattern = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n\n if (value && !emailPattern.test(value)) {\n this.showFieldError(input, 'Please enter a valid email address');\n return false;\n }\n\n this.showFieldSuccess(input);\n return true;\n }\n\n validateZipcode(input, value) {\n // Validate zipcode format\n const zipcodePattern = /^[0-9]{5}(-[0-9]{4})?$/;\n\n if (value && !zipcodePattern.test(value)) {\n this.showFieldError(input, 'Please enter a valid zipcode');\n return false;\n }\n\n this.showFieldSuccess(input);\n return true;\n }\n\n validatePhone(input, value) {\n // Validate phone number format\n const phonePattern = /^[\\d\\s\\-()+-]+$/;\n\n if (value && !phonePattern.test(value)) {\n this.showFieldError(input, 'Please enter a valid phone number');\n return false;\n }\n\n this.showFieldSuccess(input);\n return true;\n }\n\n validateCountry(input, value) {\n // Validate country selection\n if (!value || value === '') {\n this.showFieldError(input, 'Please select a country');\n return false;\n }\n\n this.showFieldSuccess(input);\n return true;\n }\n\n showFieldError(input, message) {\n // Show field error state\n const fieldContainer = input.closest('.ae-field') || input.parentElement;\n const errorElement = fieldContainer.querySelector('.ae-field-error') ||\n fieldContainer.querySelector('[data-target*=\"error\"]');\n\n // Add error class\n fieldContainer.classList.add('ae-field-error');\n fieldContainer.classList.remove('ae-field-success');\n\n // Show error message\n if (errorElement) {\n errorElement.textContent = message;\n errorElement.style.display = 'block';\n }\n }\n\n showFieldSuccess(input) {\n // Show field success state\n const fieldContainer = input.closest('.ae-field') || input.parentElement;\n const errorElement = fieldContainer.querySelector('.ae-field-error') ||\n fieldContainer.querySelector('[data-target*=\"error\"]');\n\n // Add success class\n fieldContainer.classList.add('ae-field-success');\n fieldContainer.classList.remove('ae-field-error');\n\n // Hide error message\n if (errorElement) {\n errorElement.style.display = 'none';\n }\n }\n\n submitForm(formOrEvent) {\n // Handle both form elements and submit events\n const form = formOrEvent.target || formOrEvent;\n\n if (formOrEvent.preventDefault) {\n formOrEvent.preventDefault();\n }\n\n // Submit billing form\n const formData = new FormData(form);\n const url = form.action;\n\n // Debug logging: Log what we're sending\n for (const [key, value] of formData.entries()) {\n }\n\n // Ensure country_id is included (fallback for any edge cases)\n const countrySelect = form.querySelector('select[name*=\"country_id\"]');\n if (countrySelect && countrySelect.value && !formData.has('order[bill_address_attributes][country_id]')) {\n formData.set('order[bill_address_attributes][country_id]', countrySelect.value);\n }\n\n // Add loading state\n this.setLoadingState(true);\n\n fetch(url, {\n method: 'POST',\n body: formData,\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'X-Requested-With': 'XMLHttpRequest',\n 'Accept': 'application/json',\n },\n })\n .then(response => {\n // Parse JSON for both successful and error responses\n return response.json().then(data => {\n return { response, data };\n }).catch(jsonError => {\n // If JSON parsing fails, still return response with error info\n return {\n response,\n data: {\n errorMsg: `Server responded with ${response.status}`,\n jsonParseError: jsonError.message,\n },\n };\n });\n })\n .then(({ response, data }) => {\n if (response.ok) {\n // Handle successful response\n this.handleSubmitResponse(data);\n } else {\n // Handle error response with specific error details\n this.handleSubmitErrorResponse(data, response.status);\n }\n })\n .catch(error => {\n // Handle network errors or JSON parsing failures\n this.handleSubmitError(error);\n })\n .finally(() => {\n this.setLoadingState(false);\n });\n }\n\n handleSubmitResponse(data) {\n // Handle form submission response\n if (data.success) {\n // Show success message using unified flash system\n if (window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash('Billing information saved successfully');\n }\n\n // Dispatch success event\n const event = new CustomEvent('checkout:billing-updated', {\n detail: { data },\n });\n document.dispatchEvent(event);\n\n // Redirect to next step if provided\n if (data.redirect_url) {\n window.location.href = data.redirect_url;\n }\n } else {\n // Handle validation errors\n this.handleValidationErrors(data.errors || {});\n }\n }\n\n handleSubmitErrorResponse(data, statusCode) {\n // Handle server error response with specific error details\n\n // Display the specific error message from the server\n const primaryError = data.errorMsg || data.message || `Server responded with ${statusCode}`;\n this.showFormError(primaryError);\n\n // Also handle field-specific errors if available\n if (data.errors && typeof data.errors === 'object') {\n this.handleValidationErrors(data.errors);\n }\n }\n\n handleValidationErrors(errors) {\n // Handle server-side validation errors\n\n Object.keys(errors).forEach(fieldName => {\n const errorMessage = errors[fieldName];\n\n // Try multiple selectors to find the field\n let input = this.element.querySelector(`[name*=\"${fieldName}\"]`) ||\n this.element.querySelector(`[name*=\"bill_address_attributes][${fieldName}]\"]`) ||\n this.element.querySelector(`[name=\"order[bill_address_attributes][${fieldName}]\"]`) ||\n this.element.querySelector(`#${fieldName}`) ||\n this.element.querySelector(`[id*=\"${fieldName}\"]`);\n\n // Special handling for phone field\n if (!input && fieldName === 'phone') {\n input = this.element.querySelector('[name*=\"phone\"]') ||\n this.element.querySelector('#contact-number') ||\n this.element.querySelector('[id*=\"contact\"]');\n }\n\n if (input) {\n this.showFieldError(input, errorMessage);\n } else {\n // If we can't find the specific field, add it to the general error message\n this.showFormError(`${fieldName.replace('_', ' ').toLowerCase()}: ${errorMessage}`);\n }\n });\n }\n\n handleSubmitError(error) {\n // Handle form submission error (network errors, etc.)\n const errorMessage = error.message || 'An error occurred while saving your information. Please try again.';\n this.showFormError(errorMessage);\n }\n\n showFormError(message) {\n // Show form-level error message using unified flash system\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash(message);\n } else {\n // Fallback for local error display\n const errorContainer = this.element.querySelector('.ae-alert-danger') ||\n this.createErrorContainer();\n\n errorContainer.textContent = message;\n errorContainer.style.display = 'block';\n }\n }\n\n createErrorContainer() {\n // Create error container if it doesn't exist\n const container = document.createElement('div');\n container.className = 'ae-alert ae-alert-danger';\n container.style.marginBottom = '1rem';\n\n this.element.insertBefore(container, this.element.firstChild);\n return container;\n }\n\n setLoadingState(isLoading) {\n // Set form loading state\n const submitButton = this.element.querySelector('button[type=\"submit\"]');\n const form = this.element.querySelector('form');\n\n if (isLoading) {\n if (submitButton) {\n submitButton.disabled = true;\n submitButton.textContent = 'Saving...';\n }\n if (form) {\n form.style.opacity = '0.6';\n }\n } else {\n if (submitButton) {\n submitButton.disabled = false;\n submitButton.textContent = 'Next';\n }\n if (form) {\n form.style.opacity = '1';\n }\n }\n }\n\n getCSRFToken() {\n // Get CSRF token from meta tag\n const token = document.querySelector('meta[name=\"csrf-token\"]');\n return token ? token.getAttribute('content') : '';\n }\n\n cleanupForm() {\n // Cleanup form event listeners\n const form = this.element.querySelector('form');\n if (form && this.boundHandleSubmit) {\n form.removeEventListener('submit', this.boundHandleSubmit);\n }\n }\n\n // Action: next - triggered by Next button click\n next(event) {\n event.preventDefault();\n\n // Find the form to submit - it should be within the same container\n const form = this.element.querySelector('form') ||\n this.element.closest('form') ||\n document.querySelector('#billing-form-element');\n\n if (form) {\n // Validate all fields first\n const isValid = this.validateAllFields();\n\n if (!isValid) {\n this.showFormError('Please correct the errors below');\n return;\n }\n\n // Submit the form\n this.submitForm(form);\n } else {\n // Billing form not found - silent degradation\n this.showFormError('Unable to find billing form. Please refresh the page and try again.');\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n clearCart(event) {\n event.preventDefault();\n\n if (!confirm('Remove all products from your cart?')) {\n return;\n }\n\n const button = event.currentTarget;\n const saleSlug = button.dataset.saleSlug;\n const url = `/t/${saleSlug}/checkout/clear`;\n\n // Disable button during request\n button.disabled = true;\n\n fetch(url, {\n method: 'POST',\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'X-Requested-With': 'XMLHttpRequest',\n 'Accept': 'application/json',\n 'Content-Type': 'application/x-www-form-urlencoded',\n },\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n return response.json();\n })\n .then(data => {\n if (data.success) {\n // Show success message\n if (window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash(data.message);\n }\n\n // Reload the page after clearing cart in checkout\n window.location.reload();\n } else {\n throw new Error(data.error || 'Failed to clear cart');\n }\n })\n .catch(_error => {\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Failed to clear cart. Please try again.');\n }\n // Re-enable button on error\n button.disabled = false;\n });\n }\n\n getCSRFToken() {\n const token = document.querySelector('meta[name=\"csrf-token\"]');\n return token ? token.getAttribute('content') : '';\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['printButton', 'registerButton'];\n\n initialize() {\n this.printReceipt = this.printReceipt.bind(this);\n this.showRegistration = this.showRegistration.bind(this);\n }\n\n connect() {\n // Controller connected successfully\n }\n\n disconnect() {\n // No cleanup needed for this controller\n }\n\n printReceipt(e) {\n e.preventDefault();\n\n try {\n // Use native browser print functionality\n window.print();\n\n // Show success feedback\n this.showSuccessMessage('Print dialog opened successfully');\n\n } catch {\n this.showErrorMessage('Unable to open print dialog');\n }\n }\n\n showRegistration(e) {\n e.preventDefault();\n\n try {\n // Show the existing registration modal that's already rendered in the page\n const registerContainer = document.getElementById('register-container');\n const registerPopup = document.getElementById('register-popup');\n\n if (registerContainer && registerPopup) {\n // Remove display: none from container to show the modal\n registerContainer.style.display = 'block';\n\n // Remove mfp-hide class if present (used by MagnificPopup compatibility)\n registerPopup.classList.remove('mfp-hide');\n\n // Add visible class for Express UI styling\n registerPopup.classList.add('ae-visible');\n\n // Focus the first input for accessibility\n const firstInput = registerPopup.querySelector('input[type=\"email\"], input[type=\"text\"]');\n if (firstInput) {\n firstInput.focus();\n }\n\n this.showSuccessMessage('Registration form opened');\n\n } else {\n this.showErrorMessage('Registration modal not found');\n }\n\n } catch {\n this.showErrorMessage('Unable to show registration form');\n }\n }\n\n hideRegistration(e) {\n if (e) e.preventDefault();\n\n const registerContainer = document.getElementById('register-container');\n const registerPopup = document.getElementById('register-popup');\n\n if (registerContainer) {\n registerContainer.style.display = 'none';\n }\n\n if (registerPopup) {\n registerPopup.classList.add('mfp-hide');\n registerPopup.classList.remove('ae-visible');\n }\n }\n\n // Private helper methods\n getSaleSlug() {\n // Extract sale slug from current URL path\n const pathMatch = window.location.pathname.match(/\\/t\\/([^/]+)/);\n return pathMatch ? pathMatch[1] : null;\n }\n\n showSuccessMessage(message) {\n // Use unified flash system for success messages\n if (window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash(message);\n }\n }\n\n showErrorMessage(message) {\n // Use unified flash system for error messages\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash(message);\n }\n }\n}\n", "import { Controller } from '../stimulus';\nimport CSRFTokenMixin from '../mixins/csrf_token_mixin';\n\nexport default class extends Controller {\n connect() {\n // Initialize submission tracking to prevent double submission\n this.submitting = false;\n this.submitTimeout = null;\n\n // Add CSRF token mixin functionality\n Object.assign(this, CSRFTokenMixin);\n\n // Store references for cleanup\n this.boundNext = this.next.bind(this);\n\n // Add event listener to any existing next button\n const nextButton = document.getElementById('confirm-and-pay');\n if (nextButton) {\n nextButton.addEventListener('click', this.boundNext);\n }\n\n // Initialize button as disabled and set up checkbox monitoring\n this.initializeCheckboxState();\n }\n\n disconnect() {\n // Remove event listeners\n const nextButton = document.getElementById('confirm-and-pay');\n if (nextButton && this.boundNext) {\n nextButton.removeEventListener('click', this.boundNext);\n }\n\n // Remove checkbox listener\n const checkbox = document.getElementById('terms-and-conditions-checkbox');\n if (checkbox && this.boundCheckboxChange) {\n checkbox.removeEventListener('change', this.boundCheckboxChange);\n }\n\n // Clean up tippy instance if it exists\n if (this.tippyInstance) {\n this.tippyInstance.destroy();\n this.tippyInstance = undefined;\n }\n\n // Clean up timeout\n if (this.submitTimeout) {\n clearTimeout(this.submitTimeout);\n this.submitTimeout = null;\n }\n }\n\n initializeCheckboxState() {\n const checkbox = document.getElementById('terms-and-conditions-checkbox');\n const nextButton = document.getElementById('confirm-and-pay');\n\n if (checkbox && nextButton) {\n // Ensure button starts disabled\n this.disableNextButton();\n\n // Enable only if checkbox is already checked (e.g., browser back button)\n if (checkbox.checked) {\n this.enableNextButton();\n }\n\n // Monitor checkbox changes\n this.boundCheckboxChange = this.handleCheckboxChange.bind(this);\n checkbox.addEventListener('change', this.boundCheckboxChange);\n }\n }\n\n handleCheckboxChange(event) {\n if (event.target.checked) {\n this.enableNextButton();\n // Sync hidden fallback checkbox for progressive enhancement\n this.syncFallbackCheckbox(true);\n } else {\n this.disableNextButton();\n // Sync hidden fallback checkbox for progressive enhancement\n this.syncFallbackCheckbox(false);\n }\n }\n\n syncFallbackCheckbox(checked) {\n const fallbackCheckbox = document.getElementById('terms-checkbox-fallback');\n if (fallbackCheckbox) {\n fallbackCheckbox.checked = checked;\n }\n }\n\n disableNextButton() {\n const nextButton = document.getElementById('confirm-and-pay');\n if (nextButton) {\n nextButton.disabled = true;\n nextButton.classList.add('ae-btn-disabled');\n }\n }\n\n enableNextButton() {\n const nextButton = document.getElementById('confirm-and-pay');\n if (nextButton && !nextButton.dataset.saleClosedDisabled) {\n nextButton.disabled = false;\n nextButton.classList.remove('ae-btn-disabled');\n }\n }\n\n next(event) {\n event.preventDefault();\n\n // Prevent double submission\n if (this.submitting) {\n return;\n }\n\n // Validate CSRF token before proceeding\n if (!this.hasValidCSRFToken()) {\n return; // Error already shown to user by mixin\n }\n\n // Find and validate terms checkbox\n const checkbox = document.getElementById('terms-and-conditions-checkbox');\n if (!checkbox || !checkbox.checked) {\n this.showTooltip();\n this.highlightActions();\n return;\n }\n this.submitting = true;\n\n // Set the hidden field to indicate terms agreement\n const form = document.getElementById('accept-payment-form');\n\n // Use unified field name for all checkout scenarios\n const termsField = form?.querySelector('input[name=\"agree_to_terms\"]');\n\n if (!termsField) {\n console.error('[CHECKOUT] agree_to_terms hidden field not found in form');\n this.showGenericError('Form configuration error. Please refresh and try again.');\n this.submitting = false;\n return;\n }\n\n termsField.value = '1';\n\n // Verify the value was set\n if (termsField.value !== '1') {\n console.error('[CHECKOUT] Failed to set agree_to_terms value');\n this.showGenericError('Form configuration error. Please refresh and try again.');\n this.submitting = false;\n return;\n }\n\n // Disable button to prevent double submission\n const nextButton = document.getElementById('confirm-and-pay');\n if (nextButton) {\n // Store original text\n this.originalButtonText = nextButton.textContent;\n\n // Disable and update button with loading state\n nextButton.disabled = true;\n nextButton.classList.add('ae-btn-disabled');\n nextButton.innerHTML = `${this.originalButtonText}
`;\n }\n\n // Add timeout for recovery\n this.submitTimeout = setTimeout(() => {\n this.resetSubmission();\n }, 10000);\n\n this.confirm();\n }\n\n showTooltip() {\n // Find button container for tooltip\n const buttonContainer = document.querySelector('[data-target*=\"buttonContainer\"]');\n\n if (!this.tippyInstance && window.tippy && buttonContainer) {\n const args = {\n content: 'You must agree to the terms and conditions of this TeamSite before placing your order.',\n arrow: true,\n placement: 'left',\n trigger: 'manual',\n };\n\n this.tippyInstance = window.tippy.one(buttonContainer, args);\n }\n\n if (this.tippyInstance) {\n setTimeout(() => {\n this.tippyInstance.show();\n // Hide after 3 seconds\n setTimeout(() => {\n if (this.tippyInstance) {\n this.tippyInstance.hide();\n }\n }, 3000);\n }, 100);\n }\n }\n\n\n confirm() {\n const form = document.getElementById('accept-payment-form');\n\n if (form && window.Rails && window.Rails.fire) {\n window.Rails.fire(form, 'submit');\n } else if (form) {\n // Fallback for environments without Rails UJS\n form.submit();\n } else {\n // Re-enable button if no form found\n this.resetSubmission();\n }\n }\n\n resetSubmission() {\n this.submitting = false;\n\n const nextButton = document.getElementById('confirm-and-pay');\n if (nextButton) {\n nextButton.disabled = false;\n nextButton.classList.remove('ae-btn-disabled');\n nextButton.textContent = this.originalButtonText || 'Confirm and Pay';\n }\n\n if (this.submitTimeout) {\n clearTimeout(this.submitTimeout);\n this.submitTimeout = null;\n }\n }\n\n highlightActions() {\n // Find actions container and highlight it\n const actionsContainer = document.getElementById('confirm-actions-container');\n if (actionsContainer) {\n actionsContainer.classList.add('ae-status-highlight');\n // Remove highlight after 3 seconds\n setTimeout(() => {\n actionsContainer.classList.remove('ae-status-highlight');\n }, 3000);\n }\n }\n\n showGenericError(message) {\n // Display error message to user using unified flash system\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash(message);\n }\n // Silent graceful degradation - no fallback needed as unified flash system should always be available\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n initialize() {\n this.saleSlug = this.element.dataset.saleSlug;\n }\n\n edit(e) {\n e.preventDefault();\n\n if (!this.saleSlug) {\n // Sale slug not found - skip redirect\n return;\n }\n\n const url = `/t/${this.saleSlug}/checkout/billing`;\n window.location.href = url;\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n initialize() {\n this.saleSlug = this.element.dataset.saleSlug;\n }\n\n edit(e) {\n e.preventDefault();\n\n if (!this.saleSlug) {\n // Sale slug not found - skip redirect\n return;\n }\n\n const url = `/t/${this.saleSlug}/checkout/address`;\n window.location.href = url;\n }\n}\n", "import { Controller } from '../stimulus';\nimport CSRFTokenMixin from '../mixins/csrf_token_mixin';\n\nexport default class extends Controller {\n connect() {\n // Initialize submission tracking to prevent double submission\n this.submitting = false;\n this.submitTimeout = null;\n\n // Add CSRF token mixin functionality\n Object.assign(this, CSRFTokenMixin);\n\n // Store references for cleanup\n this.boundNext = this.next.bind(this);\n this.boundHandleSuccess = this.handleSuccess.bind(this);\n this.boundHandleError = this.handleError.bind(this);\n\n // Add event listener to any existing next button\n const nextButton = document.getElementById('confirm-and-pay');\n if (nextButton) {\n nextButton.addEventListener('click', this.boundNext);\n } else {\n this.showGenericError('Required checkout elements not found. Please refresh the page.');\n return;\n }\n\n // Add AJAX event handlers for form submission\n const form = document.getElementById('no-payment-form');\n if (form) {\n form.addEventListener('ajax:success', this.boundHandleSuccess);\n form.addEventListener('ajax:error', this.boundHandleError);\n } else {\n this.showGenericError('Payment form not found. Please refresh the page.');\n return;\n }\n\n // Initialize button as disabled and set up checkbox monitoring\n this.initializeCheckboxState();\n }\n\n disconnect() {\n // Remove event listeners\n const nextButton = document.getElementById('confirm-and-pay');\n if (nextButton && this.boundNext) {\n nextButton.removeEventListener('click', this.boundNext);\n }\n\n // Remove AJAX event listeners\n const form = document.getElementById('no-payment-form');\n if (form) {\n if (this.boundHandleSuccess) {\n form.removeEventListener('ajax:success', this.boundHandleSuccess);\n }\n if (this.boundHandleError) {\n form.removeEventListener('ajax:error', this.boundHandleError);\n }\n }\n\n // Remove checkbox listener\n const checkbox = document.getElementById('terms-and-conditions-checkbox');\n if (checkbox && this.boundCheckboxChange) {\n checkbox.removeEventListener('change', this.boundCheckboxChange);\n }\n\n // Clean up tippy instance if it exists\n if (this.tippyInstance) {\n this.tippyInstance.destroy();\n this.tippyInstance = undefined;\n }\n\n // Clean up timeout\n if (this.submitTimeout) {\n clearTimeout(this.submitTimeout);\n this.submitTimeout = null;\n }\n }\n\n initializeCheckboxState() {\n const checkbox = document.getElementById('terms-and-conditions-checkbox');\n const nextButton = document.getElementById('confirm-and-pay');\n\n if (checkbox && nextButton) {\n // Ensure button starts disabled\n this.disableNextButton();\n\n // Enable only if checkbox is already checked (e.g., browser back button)\n if (checkbox.checked) {\n this.enableNextButton();\n }\n\n // Monitor checkbox changes\n this.boundCheckboxChange = this.handleCheckboxChange.bind(this);\n checkbox.addEventListener('change', this.boundCheckboxChange);\n }\n }\n\n handleCheckboxChange(event) {\n if (event.target.checked) {\n this.enableNextButton();\n // Sync hidden fallback checkbox for progressive enhancement\n this.syncFallbackCheckbox(true);\n } else {\n this.disableNextButton();\n // Sync hidden fallback checkbox for progressive enhancement\n this.syncFallbackCheckbox(false);\n }\n }\n\n syncFallbackCheckbox(checked) {\n const fallbackCheckbox = document.getElementById('terms-checkbox-fallback');\n if (fallbackCheckbox) {\n fallbackCheckbox.checked = checked;\n }\n }\n\n disableNextButton() {\n const nextButton = document.getElementById('confirm-and-pay');\n if (nextButton) {\n nextButton.disabled = true;\n nextButton.classList.add('ae-btn-disabled');\n }\n }\n\n enableNextButton() {\n const nextButton = document.getElementById('confirm-and-pay');\n if (nextButton && !nextButton.dataset.saleClosedDisabled) {\n nextButton.disabled = false;\n nextButton.classList.remove('ae-btn-disabled');\n }\n }\n\n next(event) {\n event.preventDefault();\n\n // Prevent double submission\n if (this.submitting) {\n return;\n }\n\n // Validate CSRF token before proceeding\n if (!this.hasValidCSRFToken()) {\n return; // Error already shown to user by mixin\n }\n\n // Find and validate terms checkbox\n const checkbox = document.getElementById('terms-and-conditions-checkbox');\n if (!checkbox || !checkbox.checked) {\n this.showTooltip();\n this.highlightActions();\n return;\n }\n this.submitting = true;\n\n // Set the hidden field to indicate terms agreement\n const form = document.getElementById('no-payment-form');\n\n // Use unified field name for all checkout scenarios\n const termsField = form?.querySelector('input[name=\"agree_to_terms\"]');\n\n if (!termsField) {\n console.error('[CHECKOUT] agree_to_terms hidden field not found in form');\n this.showGenericError('Form configuration error. Please refresh and try again.');\n this.submitting = false;\n return;\n }\n\n termsField.value = '1';\n\n // Verify the value was set\n if (termsField.value !== '1') {\n console.error('[CHECKOUT] Failed to set agree_to_terms value');\n this.showGenericError('Form configuration error. Please refresh and try again.');\n this.submitting = false;\n return;\n }\n\n // Disable button to prevent double submission\n const nextButton = document.getElementById('confirm-and-pay');\n if (nextButton) {\n // Store original text\n this.originalButtonText = nextButton.textContent;\n\n // Disable and update button with loading state\n nextButton.disabled = true;\n nextButton.classList.add('ae-btn-disabled');\n nextButton.innerHTML = `${this.originalButtonText}
`;\n }\n\n // Add timeout for recovery\n this.submitTimeout = setTimeout(() => {\n this.resetSubmission();\n }, 5000);\n\n this.confirm();\n }\n\n showTooltip() {\n // Find button container for tooltip\n const buttonContainer = document.querySelector('[data-target*=\"buttonContainer\"]');\n\n if (!this.tippyInstance && window.tippy && buttonContainer) {\n const args = {\n content: 'You must agree to the terms and conditions of this TeamSite before placing your order.',\n arrow: true,\n placement: 'left',\n trigger: 'manual',\n };\n\n this.tippyInstance = window.tippy.one(buttonContainer, args);\n }\n\n if (this.tippyInstance) {\n setTimeout(() => {\n this.tippyInstance.show();\n // Hide after 3 seconds\n setTimeout(() => {\n if (this.tippyInstance) {\n this.tippyInstance.hide();\n }\n }, 3000);\n }, 100);\n }\n }\n\n confirm() {\n const form = document.getElementById('no-payment-form');\n\n if (form && window.Rails && window.Rails.fire) {\n window.Rails.fire(form, 'submit');\n } else if (form) {\n // Fallback for environments without Rails UJS\n form.submit();\n } else {\n // Re-enable button if no form found\n this.resetSubmission();\n }\n }\n\n resetSubmission() {\n this.submitting = false;\n\n const nextButton = document.getElementById('confirm-and-pay');\n if (nextButton) {\n nextButton.disabled = false;\n nextButton.classList.remove('ae-btn-disabled');\n nextButton.textContent = this.originalButtonText || 'Confirm';\n }\n\n if (this.submitTimeout) {\n clearTimeout(this.submitTimeout);\n this.submitTimeout = null;\n }\n }\n\n highlightActions() {\n // Find actions container and highlight it\n const actionsContainer = document.getElementById('confirm-actions-container');\n if (actionsContainer) {\n actionsContainer.classList.add('ae-status-highlight');\n // Remove highlight after 3 seconds\n setTimeout(() => {\n actionsContainer.classList.remove('ae-status-highlight');\n }, 3000);\n }\n }\n\n handleSuccess(event) {\n // Handle successful AJAX response from form submission\n\n try {\n // Parse the JSON response\n const response = event.detail[0]; // Rails UJS passes response as first element\n\n if (response && response.success) {\n // Extract redirect URL from the response\n const redirectUrl = response.redirect_url;\n\n if (redirectUrl) {\n window.location.href = redirectUrl;\n } else {\n // Fallback: try to construct complete URL from state\n const state = response.state;\n if (state === 'complete') {\n // Try to get sale slug from the current URL or data attributes\n const saleSlug = this.getSaleSlug();\n if (saleSlug) {\n const completeUrl = `/t/${saleSlug}/checkout/complete`;\n window.location.href = completeUrl;\n } else {\n this.showGenericError('Order processed successfully, but unable to navigate to confirmation page.');\n }\n } else {\n this.showGenericError('Order processed successfully, but received unexpected response.');\n }\n }\n } else {\n this.handleResponseError(response);\n }\n } catch {\n this.showGenericError('Order may have been processed, but response could not be processed.');\n }\n }\n\n handleError(event) {\n // Handle AJAX error response\n this.resetSubmission();\n\n // Try to extract error message from response\n let errorMessage = 'An error occurred while processing your order. Please try again.';\n\n try {\n const xhr = event.detail[0]; // XMLHttpRequest object\n if (xhr && xhr.responseJSON) {\n errorMessage = xhr.responseJSON.error || xhr.responseJSON.message || errorMessage;\n } else if (xhr && xhr.responseText) {\n // Try to parse JSON from response text\n const response = JSON.parse(xhr.responseText);\n errorMessage = response.error || response.message || errorMessage;\n }\n } catch {\n // Could not parse error response, using default message\n }\n\n this.showGenericError(errorMessage);\n }\n\n handleResponseError(response) {\n // Handle error indicated in successful AJAX response\n this.resetSubmission();\n\n const errorMessage = response.error || response.message || 'An error occurred while processing your order.';\n this.showGenericError(errorMessage);\n }\n\n showGenericError(message) {\n // Display error message to user using unified flash system\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash(message);\n }\n // Silent graceful degradation - no fallback needed as unified flash system should always be available\n }\n\n getSaleSlug() {\n // Try to get sale slug from various sources\n // First try data attributes on the checkout container\n const checkoutContainer = document.getElementById('checkout-container');\n if (checkoutContainer && checkoutContainer.dataset.saleSlug) {\n return checkoutContainer.dataset.saleSlug;\n }\n\n // Try to extract from current URL\n const pathMatch = window.location.pathname.match(/\\/t\\/([^/]+)/);\n if (pathMatch) {\n return pathMatch[1];\n }\n\n // Try to find it in any element with data-sale-slug\n const elementWithSlug = document.querySelector('[data-sale-slug]');\n if (elementWithSlug) {\n return elementWithSlug.dataset.saleSlug;\n }\n\n return null;\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n initialize() {}\n\n showTerms(e) {\n if (e && e.preventDefault) {\n e.preventDefault();\n }\n\n if (window.$ && window.$.magnificPopup) {\n window.$.magnificPopup.open({\n items: {\n src: '#terms-and-conditions',\n },\n type: 'inline',\n });\n }\n }\n\n close(e) {\n if (e && e.preventDefault) {\n e.preventDefault();\n }\n\n if (window.$ && window.$.magnificPopup) {\n window.$.magnificPopup.close();\n }\n }\n}\n\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = [];\n\n connect() {\n // Initialize checkout controller\n this.initializeCheckout();\n }\n\n disconnect() {\n // Cleanup event listeners\n this.cleanupCheckout();\n }\n\n initializeCheckout() {\n // Initialize checkout state management\n // Stimulus 1.1.0 syntax: use element.dataset instead of data.get()\n this.saleSlug = this.element.dataset.saleSlug;\n this.orderNumber = this.element.dataset.orderNumber;\n\n\n // Add null checks for missing attributes\n\n // Set up event listeners for checkout navigation\n this.setupCheckoutNavigation();\n }\n\n setupCheckoutNavigation() {\n // Store bound handlers for proper cleanup\n this.boundHandleStepChange = this.handleStepChange.bind(this);\n this.boundHandleNextState = this.handleNextState.bind(this);\n\n // Listen for checkout step changes\n document.addEventListener('checkout:step-change', this.boundHandleStepChange);\n\n // Listen for nextState events from payment success on this controller's element\n this.element.addEventListener('nextState', this.boundHandleNextState);\n }\n\n handleStepChange(event) {\n // Handle checkout step transitions\n const { step, data } = event.detail;\n\n switch (step) {\n case 'address':\n this.handleAddressStep(data);\n break;\n case 'billing':\n this.handleBillingStep(data);\n break;\n case 'payment':\n this.handlePaymentStep(data);\n break;\n case 'confirm':\n this.handleConfirmStep(data);\n break;\n case 'complete':\n this.handleCompleteStep(data);\n break;\n }\n }\n\n handleAddressStep() {\n // Handle address step logic\n // Address step activated\n }\n\n handleBillingStep() {\n // Handle billing step logic\n // Billing step activated\n }\n\n handlePaymentStep() {\n // Handle payment step logic\n // Payment step activated\n }\n\n handleConfirmStep() {\n // Handle confirm step logic\n // Confirm step activated\n }\n\n handleCompleteStep() {\n // Handle complete step logic\n // Complete step activated\n }\n\n handleNextState(event) {\n\n // Handle nextState events from payment processing\n const nextState = event.detail;\n\n if (nextState && this.saleSlug) {\n let url;\n\n // For complete state, we need order parameters for proper order lookup\n if (nextState === 'complete') {\n const orderNumber = event.orderNumber || this.element.dataset.orderNumber;\n const guestToken = event.guestToken || this.element.dataset.guestToken;\n\n\n if (orderNumber && guestToken) {\n url = `/t/${this.saleSlug}/checkout/complete?order_number=${orderNumber}&guest_token=${guestToken}`;\n } else {\n // Fallback to basic URL if parameters missing\n url = `/t/${this.saleSlug}/checkout/${nextState}`;\n }\n } else {\n // For other states, use simple navigation\n url = `/t/${this.saleSlug}/checkout/${nextState}`;\n }\n\n window.location.href = url;\n } else {\n }\n }\n\n cleanupCheckout() {\n // Remove event listeners\n if (this.boundHandleStepChange) {\n document.removeEventListener('checkout:step-change', this.boundHandleStepChange);\n }\n if (this.boundHandleNextState) {\n this.element.removeEventListener('nextState', this.boundHandleNextState);\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['button', 'input', 'form'];\n\n click(e) {\n e.preventDefault();\n\n this.disable();\n\n const formData = new FormData();\n formData.append('code', this.inputTarget.value);\n\n // Get CSRF token\n const token = document.querySelector('meta[name=\"csrf-token\"]');\n if (token) {\n formData.append('authenticity_token', token.getAttribute('content'));\n }\n\n fetch(this.formTarget.action, {\n method: 'POST',\n body: formData,\n headers: {\n 'X-Requested-With': 'XMLHttpRequest',\n },\n })\n .then(response => response.json())\n .then(data => {\n if (data.status === 'ok') {\n if (window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash('Coupon applied.');\n }\n window.location.reload();\n } else {\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash(data.errorMsg || 'Something went wrong.');\n }\n this.enable();\n }\n })\n .catch(() => {\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Something went wrong.');\n }\n this.enable();\n });\n }\n\n disable() {\n if (this.hasButtonTarget) {\n this.buttonTarget.classList.add('ae-btn-disabled');\n this.buttonTarget.disabled = true;\n }\n }\n\n enable() {\n if (this.hasButtonTarget) {\n this.buttonTarget.classList.remove('ae-btn-disabled');\n this.buttonTarget.disabled = false;\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n connect() {\n this.orderNumber = this.element.dataset.orderNumber;\n }\n\n disconnect() {\n // Cleanup any pending requests or event listeners if needed\n // Currently no cleanup required for this controller\n }\n\n getSaleSlug() {\n const pathMatch = window.location.pathname.match(/^\\/t\\/([^/]+)/);\n return pathMatch ? pathMatch[1] : '';\n }\n\n click(e) {\n e.preventDefault();\n\n const saleSlug = this.getSaleSlug();\n const url = `/t/${saleSlug}/checkout/coupons/${this.orderNumber}`;\n\n // Get CSRF token\n const token = document.querySelector('meta[name=\"csrf-token\"]');\n const headers = {\n 'X-Requested-With': 'XMLHttpRequest',\n };\n\n if (token) {\n const tokenValue = token.getAttribute('content');\n // Enhanced CSRF token validation with length check for security\n if (tokenValue && tokenValue.length >= 16) {\n headers['X-CSRF-Token'] = tokenValue;\n }\n }\n\n fetch(url, {\n method: 'DELETE',\n headers: headers,\n })\n .then(response => response.json())\n .then(data => {\n if (data.status === 'ok') {\n // Dispatch custom events for UI updates before page reload\n const couponContainer = document.getElementById('sidebar-coupon-container');\n const orderSummary = document.getElementById('confirm-order-summary');\n\n if (couponContainer) {\n couponContainer.dispatchEvent(new CustomEvent('coupon:reload'));\n }\n\n if (orderSummary) {\n orderSummary.dispatchEvent(new CustomEvent('summary:reload'));\n }\n\n // Reload the page to update the UI\n window.location.reload();\n } else {\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash(data.errorMsg || 'Something went wrong');\n }\n }\n })\n .catch(() => {\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Something went wrong');\n }\n });\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['input', 'message'];\n\n connect() {\n // Initialize timeout variable\n this.checkTimeout = null;\n }\n\n disconnect() {\n // Clean up timeouts\n if (this.checkTimeout) {\n clearTimeout(this.checkTimeout);\n }\n }\n\n handleBlur(event) {\n const email = event.target.value.trim();\n\n // Clear any existing timeout\n if (this.checkTimeout) {\n clearTimeout(this.checkTimeout);\n }\n\n // Clear previous message\n this.clearMessage();\n\n // Skip check if email is empty or invalid\n if (!email || !this.isValidEmail(email)) {\n return;\n }\n // Debounce the check by 300ms\n this.checkTimeout = setTimeout(() => {\n this.checkEmailExists(email);\n }, 300);\n }\n\n isValidEmail(email) {\n const emailPattern = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n return emailPattern.test(email);\n }\n\n async checkEmailExists(email) {\n try {\n // Get current sale slug from the page context\n const saleSlug = this.getSaleSlug();\n if (!saleSlug) {\n return;\n }\n\n const url = `/t/${saleSlug}/checkout/check_email`;\n\n const response = await fetch(url, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': this.getCSRFToken(),\n 'X-Requested-With': 'XMLHttpRequest',\n 'Accept': 'application/json',\n },\n body: JSON.stringify({ email: email }),\n });\n\n if (response.ok) {\n const data = await response.json();\n this.handleCheckResponse(data, email);\n }\n } catch {\n // Silently fail - don't show errors for email checking\n }\n }\n\n handleCheckResponse(data, email) {\n if (data.exists) {\n this.showLoginPrompt(email);\n }\n }\n\n showLoginPrompt(email) {\n // Show inline message suggesting login\n this.showMessage(\n 'It looks like you have an account with us.
Click here to log in and we\\'ll pre-fill your information.',\n 'info',\n );\n\n // Add click handler for the login link\n setTimeout(() => {\n const loginLink = document.getElementById('email-check-login-link');\n if (loginLink) {\n loginLink.addEventListener('click', (e) => {\n e.preventDefault();\n this.openLoginModal(email);\n });\n }\n }, 100);\n }\n\n openLoginModal(email) {\n const modal = document.getElementById('billing-login-modal');\n if (modal) {\n modal.style.display = 'block';\n\n // Pre-fill the email in the login form\n setTimeout(() => {\n const loginEmailField = document.getElementById('checkout-login-email');\n if (loginEmailField) {\n loginEmailField.value = email;\n // Focus on password field\n const passwordField = document.getElementById('checkout-login-password');\n if (passwordField) {\n passwordField.focus();\n }\n }\n }, 100);\n }\n }\n\n showMessage(html, type = 'info') {\n if (this.hasMessageTarget) {\n this.messageTarget.innerHTML = html;\n this.messageTarget.className = `ae-alert ae-alert-${type}`;\n this.messageTarget.style.display = 'block';\n this.messageTarget.style.marginTop = '5px';\n this.messageTarget.style.fontSize = '0.875rem';\n }\n }\n\n clearMessage() {\n if (this.hasMessageTarget) {\n this.messageTarget.style.display = 'none';\n this.messageTarget.innerHTML = '';\n }\n }\n\n getSaleSlug() {\n // Try multiple methods to get the sale slug\n const checkoutContainer = document.getElementById('checkout-container');\n if (checkoutContainer) {\n return checkoutContainer.dataset.saleSlug;\n }\n\n // Fallback: extract from URL\n const pathMatch = window.location.pathname.match(/\\/t\\/([^/]+)/);\n return pathMatch ? pathMatch[1] : null;\n }\n\n getCSRFToken() {\n const token = document.querySelector('meta[name=\"csrf-token\"]');\n return token ? token.getAttribute('content') : '';\n }\n}\n\n", "import { Controller } from '../stimulus';\n\n/* global MutationObserver */\n\nexport default class extends Controller {\n static targets = ['form', 'button', 'email', 'password'];\n\n connect() {\n // Bind and store the validation function for proper cleanup\n this.boundValidateForm = this.validateForm.bind(this);\n\n // Initialize submission state tracking to prevent double submission\n this.isSubmitting = false;\n\n // Initialize button target reference for better targeting\n this.initializeButtonTarget();\n\n // Check for pre-filled email from billing form\n this.checkForPrefilledEmail();\n\n this.validateForm(); // Enable button if pre-filled\n\n this.setupListeners();\n this.setupMutationObserver(); // Watch for DOM changes\n }\n\n initializeButtonTarget() {\n // Cache button reference for better performance and reliability\n this.cachedButtonElement = this.findButtonElement();\n\n // Ensure button starts in correct state\n if (this.cachedButtonElement) {\n // Remove disabled class if it was added by default\n this.cachedButtonElement.classList.remove('ae-btn-disabled');\n // Button will be properly disabled/enabled by validateForm()\n }\n }\n\n findButtonElement() {\n // Try multiple selectors to find the button, prioritizing most specific\n const selectors = [\n '#login-button',\n '[data-target=\"t-checkout-login.button\"]', // More specific target\n '[data-target*=\"button\"]',\n 'input[value=\"LOG IN\"]',\n 'input[type=\"submit\"][value=\"LOG IN\"]', // More specific\n 'input[type=\"submit\"]',\n '.ae-btn-primary[type=\"submit\"]', // More specific\n '.ae-btn-primary',\n ];\n\n for (const selector of selectors) {\n const button = this.element.querySelector(selector);\n if (button) {\n return button;\n }\n }\n\n // Try searching in the entire document as fallback\n for (const selector of selectors) {\n const button = document.querySelector(`#login-popup ${selector}`);\n if (button) {\n return button;\n }\n }\n\n // Final fallback - search entire document\n for (const selector of selectors) {\n const button = document.querySelector(selector);\n if (button) {\n return button;\n }\n }\n\n return null;\n }\n\n checkForPrefilledEmail() {\n // Get email from data attribute set by checkout form\n const checkoutEmail = document.body.getAttribute('data-checkout-email');\n const emailField = document.getElementById('checkout-login-email');\n\n if (checkoutEmail && emailField) {\n emailField.value = checkoutEmail;\n\n // Trigger validation after pre-filling\n const event = new Event('input', { bubbles: true });\n emailField.dispatchEvent(event);\n\n // Focus on password field since email is pre-filled\n setTimeout(() => {\n const passwordField = document.getElementById('checkout-login-password');\n if (passwordField) {\n passwordField.focus();\n }\n }, 100);\n\n // Clear the data attribute to prevent reuse\n document.body.removeAttribute('data-checkout-email');\n } else if (emailField && !emailField.value) {\n // Focus on email field when it's empty\n setTimeout(() => {\n emailField.focus();\n }, 100);\n }\n }\n\n setupListeners() {\n // Use Stimulus targets for reliable event handling\n if (this.hasEmailTarget) {\n this.emailTarget.addEventListener('input', this.boundValidateForm);\n this.emailTarget.addEventListener('change', this.boundValidateForm);\n this.emailTarget.addEventListener('focus', this.boundValidateForm);\n this.emailTarget.addEventListener('blur', this.boundValidateForm);\n this.emailTarget.addEventListener('click', this.boundValidateForm);\n }\n\n if (this.hasPasswordTarget) {\n this.passwordTarget.addEventListener('input', this.boundValidateForm);\n this.passwordTarget.addEventListener('change', this.boundValidateForm);\n this.passwordTarget.addEventListener('focus', this.boundValidateForm);\n this.passwordTarget.addEventListener('blur', this.boundValidateForm);\n this.passwordTarget.addEventListener('click', this.boundValidateForm);\n }\n }\n\n validateForm(_event) {\n // Simple presence check for button enabling using targets\n const hasEmail = !!(this.hasEmailTarget && this.emailTarget.value && this.emailTarget.value.trim());\n const hasPassword = !!(this.hasPasswordTarget && this.passwordTarget.value);\n const canEnable = hasEmail && hasPassword;\n\n // Clear any previous validation errors when user is typing\n if (hasEmail && this.hasEmailTarget) {\n this.clearFieldError(this.emailTarget);\n }\n if (hasPassword && this.hasPasswordTarget) {\n this.clearFieldError(this.passwordTarget);\n }\n\n // Use cached button element or fallback to finding it\n const button = this.cachedButtonElement ||\n this.buttonTarget ||\n this.findButtonElement();\n\n if (button) {\n button.disabled = !canEnable;\n\n // Ensure CSS class is properly managed\n if (canEnable) {\n button.classList.remove('ae-btn-disabled');\n } else {\n button.classList.add('ae-btn-disabled');\n }\n\n // Cache the button for future use if we didn't have it cached\n if (!this.cachedButtonElement) {\n this.cachedButtonElement = button;\n }\n }\n\n return canEnable;\n }\n\n showFieldError(field, message) {\n if (!field) return;\n const errorDiv = field.closest('.ae-field')?.querySelector('.ae-error-msg');\n if (errorDiv) {\n errorDiv.textContent = message;\n errorDiv.style.display = 'block';\n }\n }\n\n clearFieldError(field) {\n if (!field) return;\n const errorDiv = field.closest('.ae-field')?.querySelector('.ae-error-msg');\n if (errorDiv) {\n errorDiv.style.display = 'none';\n }\n }\n\n click(event) {\n // Handle form submission\n event.preventDefault();\n\n // Prevent double submission - exit early if already submitting\n if (this.isSubmitting) {\n return false;\n }\n\n // Perform strict validation before submission\n if (!this.validateFormForSubmission()) {\n return false;\n }\n\n // Mark as submitting to prevent duplicate submissions\n this.isSubmitting = true;\n\n // Submit via AJAX\n this.submitForm();\n return false;\n }\n\n validateFormForSubmission() {\n let isValid = true;\n\n // Simple presence check for login - just ensure fields aren't empty\n if (!this.hasEmailTarget || !this.emailTarget.value || !this.emailTarget.value.trim()) {\n if (this.hasEmailTarget) {\n this.showFieldError(this.emailTarget, 'Email is required');\n }\n isValid = false;\n } else {\n this.clearFieldError(this.emailTarget);\n }\n\n // Password presence check only - no validation of length/format for login\n if (!this.hasPasswordTarget || !this.passwordTarget.value) {\n if (this.hasPasswordTarget) {\n this.showFieldError(this.passwordTarget, 'Password is required');\n }\n isValid = false;\n } else {\n this.clearFieldError(this.passwordTarget);\n }\n\n return isValid;\n }\n\n submitForm() {\n const form = this.formTarget || this.element.querySelector('form');\n if (!form) return;\n\n const formData = new FormData(form);\n const url = form.action;\n\n // Show loading state\n this.setLoadingState(true);\n\n // Set safety timeout to reset submission flag (30 seconds)\n const safetyTimeout = setTimeout(() => {\n this.isSubmitting = false;\n }, 30000);\n\n fetch(url, {\n method: 'POST',\n body: formData,\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'X-Requested-With': 'XMLHttpRequest',\n 'Accept': 'application/json',\n },\n })\n .then(response => {\n return response.json().then(data => {\n return { response, data };\n }).catch(jsonError => {\n return {\n response,\n data: {\n success: false,\n message: `Server responded with ${response.status}`,\n jsonParseError: jsonError.message,\n },\n };\n });\n })\n .then(({ response, data }) => {\n if (response.ok && data.success) {\n this.handleLoginSuccess(data);\n } else {\n this.handleLoginError(data);\n }\n })\n .catch(_error => {\n this.handleLoginError({\n success: false,\n message: 'Network error occurred. Please try again.',\n });\n })\n .finally(() => {\n // Clear safety timeout since request completed\n clearTimeout(safetyTimeout);\n this.setLoadingState(false);\n });\n }\n\n handleLoginSuccess(data) {\n // Reset submission flag\n this.isSubmitting = false;\n\n // Hide the modal\n this.closeModal();\n\n // Show success message\n if (window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash(data.message || 'Logged in successfully');\n }\n\n // Dispatch login event before reloading\n const event = new CustomEvent('checkout:login-success', {\n detail: { user: data.user },\n });\n document.dispatchEvent(event);\n\n // Always reload the page to refresh with logged-in state\n setTimeout(() => {\n window.location.reload();\n }, 1000);\n }\n\n handleLoginError(data) {\n // Reset submission flag\n this.isSubmitting = false;\n\n const errorContainer = document.getElementById('checkout-login-errors');\n if (errorContainer) {\n errorContainer.textContent = data.message || 'Login failed. Please try again.';\n errorContainer.style.display = 'block';\n }\n\n // Clear password field\n const passwordField = document.getElementById('checkout-login-password');\n if (passwordField) {\n passwordField.value = '';\n }\n }\n\n\n closeModal() {\n const modal = this.element;\n if (modal) {\n modal.style.display = 'none';\n modal.classList.remove('simple-popup-source');\n\n // Remove backdrop\n const backdrop = document.querySelector('.simple-popup-backdrop');\n if (backdrop) {\n backdrop.style.display = 'none';\n }\n\n // Remove modal-open class from body\n document.body.classList.remove('modal-open');\n }\n }\n\n setLoadingState(isLoading) {\n const button = this.cachedButtonElement ||\n this.buttonTarget ||\n this.findButtonElement();\n if (button) {\n button.disabled = isLoading;\n if (button.tagName === 'INPUT') {\n button.value = isLoading ? 'Logging in...' : 'LOG IN';\n } else {\n button.textContent = isLoading ? 'Logging in...' : 'LOG IN';\n }\n }\n }\n\n getCSRFToken() {\n const token = document.querySelector('meta[name=\"csrf-token\"]');\n return token ? token.getAttribute('content') : '';\n }\n\n setupMutationObserver() {\n // Watch for value changes that might not trigger events\n if (!this.hasEmailTarget || !this.hasPasswordTarget) {\n return;\n }\n\n // Create observer for attribute changes (like value)\n this.observer = new MutationObserver((_mutations) => {\n this.validateForm();\n });\n\n // Observe both fields for attribute changes\n const config = { attributes: true, attributeFilter: ['value'] };\n\n if (this.hasEmailTarget) {\n this.observer.observe(this.emailTarget, config);\n }\n\n if (this.hasPasswordTarget) {\n this.observer.observe(this.passwordTarget, config);\n }\n }\n\n disconnect() {\n // Clean up mutation observer\n if (this.observer) {\n this.observer.disconnect();\n }\n\n // Clean up listeners using targets\n if (this.boundValidateForm) {\n if (this.hasEmailTarget) {\n this.emailTarget.removeEventListener('input', this.boundValidateForm);\n this.emailTarget.removeEventListener('change', this.boundValidateForm);\n this.emailTarget.removeEventListener('focus', this.boundValidateForm);\n this.emailTarget.removeEventListener('blur', this.boundValidateForm);\n this.emailTarget.removeEventListener('click', this.boundValidateForm);\n }\n\n if (this.hasPasswordTarget) {\n this.passwordTarget.removeEventListener('input', this.boundValidateForm);\n this.passwordTarget.removeEventListener('change', this.boundValidateForm);\n this.passwordTarget.removeEventListener('focus', this.boundValidateForm);\n this.passwordTarget.removeEventListener('blur', this.boundValidateForm);\n this.passwordTarget.removeEventListener('click', this.boundValidateForm);\n }\n }\n }\n}\n\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n click(event) {\n event.preventDefault();\n\n // Close the login modal\n const loginPopup = document.getElementById('login-popup');\n let loginContainer = document.getElementById('login-modal-container');\n if (!loginContainer) {\n loginContainer = document.getElementById('login-container');\n }\n\n if (loginPopup) {\n // Hide login modal\n loginPopup.style.display = 'none';\n loginPopup.classList.remove('simple-popup-source');\n }\n\n if (loginContainer) {\n loginContainer.style.display = 'none';\n }\n\n // Remove backdrop and modal-open class\n const backdrop = document.querySelector('.simple-popup-backdrop');\n if (backdrop) {\n backdrop.style.display = 'none';\n }\n document.body.classList.remove('modal-open');\n\n // Show the registration modal - check for container first, then direct element\n let registerContainer = document.getElementById('register-container');\n const registerPopup = document.getElementById('register-popup');\n\n if (registerContainer && registerPopup) {\n // Make container visible first\n registerContainer.style.display = 'block';\n } else if (registerPopup) {\n // Direct registration modal (like on checkout complete page)\n registerContainer = null;\n }\n\n if (registerPopup) {\n // Initialize simple-popup on the registration modal\n // Note: Stimulus 1.1.0 doesn't have getControllerForElementAndIdentifier\n // Manual DOM manipulation is used instead\n\n // Create a backdrop for registration modal\n let newBackdrop = document.querySelector('.simple-popup-backdrop');\n if (!newBackdrop) {\n newBackdrop = document.createElement('div');\n newBackdrop.className = 'simple-popup-backdrop';\n document.body.appendChild(newBackdrop);\n }\n newBackdrop.style.display = 'block';\n\n // Position and show registration modal\n registerPopup.style.position = 'fixed';\n registerPopup.style.top = '50%';\n registerPopup.style.left = '50%';\n registerPopup.style.transform = 'translate(-50%, -50%)';\n registerPopup.style.zIndex = '1050';\n registerPopup.style.display = 'block';\n registerPopup.classList.add('simple-popup-source');\n\n // Add modal-open class to body\n document.body.classList.add('modal-open');\n\n // Add close button if not present\n if (!registerPopup.querySelector('.simple-popup-close')) {\n const closeButton = document.createElement('button');\n closeButton.className = 'simple-popup-close';\n closeButton.innerHTML = '×';\n closeButton.title = 'Close';\n closeButton.onclick = () => {\n this.closeRegisterModal(registerPopup, registerContainer, newBackdrop);\n };\n registerPopup.appendChild(closeButton);\n }\n\n // Handle escape key\n const handleEscape = (e) => {\n if (e.key === 'Escape') {\n this.closeRegisterModal(registerPopup, registerContainer, newBackdrop);\n document.removeEventListener('keydown', handleEscape);\n }\n };\n document.addEventListener('keydown', handleEscape);\n\n // Handle backdrop click\n newBackdrop.onclick = () => {\n this.closeRegisterModal(registerPopup, registerContainer, newBackdrop);\n };\n }\n }\n\n closeRegisterModal(registerPopup, registerContainer, backdrop) {\n if (registerPopup) {\n registerPopup.style.display = 'none';\n registerPopup.classList.remove('simple-popup-source');\n }\n if (registerContainer) {\n registerContainer.style.display = 'none';\n }\n if (backdrop) {\n backdrop.style.display = 'none';\n }\n document.body.classList.remove('modal-open');\n }\n}\n", "import { Controller } from '../stimulus';\nimport CSRFTokenMixin from '../mixins/csrf_token_mixin';\n\nexport default class extends Controller {\n connect() {\n this.saleSlug = this.element.dataset.saleSlug;\n this.orderNumber = this.element.dataset.orderNumber;\n\n // Add CSRF token mixin functionality\n Object.assign(this, CSRFTokenMixin);\n\n // Initialize request tracking to prevent double submission\n this.submitting = false;\n }\n\n back(event) {\n event.preventDefault();\n const url = `/t/${this.saleSlug}/checkout/address`;\n location.href = url;\n }\n\n next(event) {\n event.preventDefault();\n\n // Validate CSRF token before proceeding\n if (!this.hasValidCSRFToken()) {\n return; // Error already shown to user by mixin\n }\n\n // Prevent double submission\n if (this.submitting) {\n return;\n }\n this.submitting = true;\n\n // Disable button to prevent double submission\n const nextButton = document.getElementById('payment-next');\n if (nextButton) {\n nextButton.disabled = true;\n nextButton.classList.add('ae-btn-disabled');\n } else {\n this.handleError('Payment button not found. Please refresh the page.');\n return;\n }\n\n // Since we're intercepting the click event, we need to manually submit the form\n // The button is type=\"submit\" but Stimulus prevents the default behavior\n const form = document.getElementById('no-payment-form');\n if (form) {\n form.requestSubmit(); // Use requestSubmit to trigger submit event and Rails UJS\n } else {\n this.handleError('Unable to process payment. Please refresh the page and try again.');\n }\n }\n\n handleError(message) {\n // Reset submission flag\n this.submitting = false;\n\n // Re-enable button after a delay\n setTimeout(() => {\n const nextButton = document.getElementById('payment-next');\n if (nextButton) {\n nextButton.disabled = false;\n nextButton.classList.remove('ae-btn-disabled');\n }\n }, 3000);\n\n // Display error message using the same pattern as regular payment\n const errorDiv = document.createElement('div');\n errorDiv.className = 'ae-alert ae-alert-danger';\n errorDiv.textContent = message;\n errorDiv.style.cssText = 'position:fixed;top:20px;right:20px;z-index:9999';\n document.body.appendChild(errorDiv);\n setTimeout(() => errorDiv.remove(), 5000);\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['input'];\n\n connect() {\n // Set up custom event listener for validation\n this.boundValidate = this.validate.bind(this);\n this.element.addEventListener('validate', this.boundValidate);\n }\n\n disconnect() {\n if (this.boundValidate) {\n this.element.removeEventListener('validate', this.boundValidate);\n }\n }\n\n keyup() {\n // Trigger validation on keyup\n this.element.dispatchEvent(new CustomEvent('validate', { bubbles: true }));\n }\n\n blur() {\n // Trigger validation on blur\n this.element.dispatchEvent(new CustomEvent('validate', { bubbles: true }));\n }\n\n validate() {\n const paymentContainer = document.getElementById('payment-form-container');\n if (!paymentContainer || !this.hasInputTarget) {\n return;\n }\n\n const value = this.inputTarget.value.trim();\n\n if (value.length === 0) {\n // Invalid - empty cardholder name\n const event = new CustomEvent('setInvalidCardholderName', { bubbles: true });\n paymentContainer.dispatchEvent(event);\n } else {\n // Valid - has cardholder name\n const event = new CustomEvent('setValidCardholderName', { bubbles: true });\n paymentContainer.dispatchEvent(event);\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n connect() {\n this.saleSlug = this.element.dataset.saleSlug;\n this.orderNumber = this.element.dataset.orderNumber;\n\n // Initialize request tracking to prevent double submission\n this.submitting = false;\n\n // Check Stripe initialization status early\n this.validateStripeInitialization();\n\n // Initialize field validation state\n this.fields = {\n 'cardholder_name': false,\n 'card_number': false,\n 'card_expiry': false,\n 'card_cvc': false,\n };\n\n // Set up event listeners for validation - store bound handlers for proper cleanup\n this.boundSetValidCardholderName = this.setValidCardholderName.bind(this);\n this.boundSetInvalidCardholderName = this.setInvalidCardholderName.bind(this);\n this.boundSetValidStripeElement = this.setValidStripeElement.bind(this);\n this.boundSetInvalidStripeElement = this.setInvalidStripeElement.bind(this);\n\n this.element.addEventListener('setValidCardholderName', this.boundSetValidCardholderName);\n this.element.addEventListener('setInvalidCardholderName', this.boundSetInvalidCardholderName);\n this.element.addEventListener('setValidStripeElement', this.boundSetValidStripeElement);\n this.element.addEventListener('setInvalidStripeElement', this.boundSetInvalidStripeElement);\n\n // Initialize next button state\n this.disableNextButton();\n\n // Add initial validation check after setup\n setTimeout(() => this.performFallbackValidation(), 500);\n\n // Delay MutationObserver setup to allow Stripe elements to mount\n setTimeout(() => this.setupMutationObserver(), 1000);\n\n // Minimal smart polling as fallback (only if MutationObserver doesn't catch changes)\n this.validationCheckCount = 0;\n this.maxValidationChecks = 5; // Maximum 5 checks over 5 seconds\n this.validationInterval = setInterval(() => {\n this.performSmartValidation();\n }, 1000); // Check every 1 second\n }\n\n disconnect() {\n // Clean up event listeners using stored bound handlers\n if (this.boundSetValidCardholderName) {\n this.element.removeEventListener('setValidCardholderName', this.boundSetValidCardholderName);\n }\n if (this.boundSetInvalidCardholderName) {\n this.element.removeEventListener('setInvalidCardholderName', this.boundSetInvalidCardholderName);\n }\n if (this.boundSetValidStripeElement) {\n this.element.removeEventListener('setValidStripeElement', this.boundSetValidStripeElement);\n }\n if (this.boundSetInvalidStripeElement) {\n this.element.removeEventListener('setInvalidStripeElement', this.boundSetInvalidStripeElement);\n }\n\n // Clean up MutationObserver\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n\n // Clean up mutation timeout\n if (this.mutationTimeout) {\n clearTimeout(this.mutationTimeout);\n this.mutationTimeout = null;\n }\n\n // Clean up validation interval\n if (this.validationInterval) {\n clearInterval(this.validationInterval);\n this.validationInterval = null;\n }\n\n // Clean up Stripe initialization timeout\n if (this.stripeInitTimeout) {\n clearTimeout(this.stripeInitTimeout);\n this.stripeInitTimeout = null;\n }\n }\n\n validateStripeInitialization() {\n // Check if Stripe and required components are available\n const hasStripe = typeof window.Stripe !== 'undefined';\n const hasApp = window.App && window.App.defaultStripePublicKey;\n const hasInstance = window.Stripe && window.Stripe.instance;\n\n if (hasStripe && hasApp && hasInstance) {\n // Stripe is fully initialized\n return true;\n }\n\n // Stripe not fully initialized - wait and retry up to 3 times\n let attempts = 0;\n const maxAttempts = 3;\n\n const checkInit = () => {\n attempts++;\n\n const nowHasStripe = typeof window.Stripe !== 'undefined';\n const nowHasApp = window.App && window.App.defaultStripePublicKey;\n const nowHasInstance = window.Stripe && window.Stripe.instance;\n\n if (nowHasStripe && nowHasApp && nowHasInstance) {\n return true; // Success\n }\n\n if (attempts < maxAttempts) {\n // Schedule another attempt\n this.stripeInitTimeout = setTimeout(checkInit, 500 * attempts); // 500ms, 1000ms, 1500ms\n return false;\n } else {\n // Failed after max attempts - show specific error\n this.showStripeInitializationError({\n hasStripe: nowHasStripe,\n hasApp: nowHasApp,\n hasInstance: nowHasInstance,\n attempts: attempts,\n });\n return false;\n }\n };\n\n // Start the retry process\n this.stripeInitTimeout = setTimeout(checkInit, 500);\n return false;\n }\n\n showStripeInitializationError(status) {\n const paymentContainer = document.getElementById('payment-form-container');\n if (!paymentContainer) return;\n\n // Prevent duplicate error messages\n if (paymentContainer.querySelector('.stripe-init-error')) {\n return;\n }\n\n // Create specific error message based on what's missing\n let message = 'Payment system initialization failed. ';\n if (!status.hasStripe) {\n message += 'Stripe library not loaded.';\n } else if (!status.hasApp) {\n message += 'Payment configuration missing.';\n } else if (!status.hasInstance) {\n message += 'Payment instance not created.';\n } else {\n message += 'Unknown initialization error.';\n }\n message += ` (After ${status.attempts} attempts)`;\n\n // Create error message\n const errorDiv = document.createElement('div');\n errorDiv.className = 'ae-alert ae-alert--error stripe-init-error';\n errorDiv.innerHTML = `\n
\n Initialization Error: ${message}\n Please refresh the page. If the problem persists, contact support. \n
\n `;\n\n // Insert at top of payment container\n paymentContainer.insertBefore(errorDiv, paymentContainer.firstChild);\n\n // Disable the payment form\n const nextButton = this.getNextButton();\n if (nextButton) {\n nextButton.disabled = true;\n nextButton.textContent = 'Payment System Error';\n nextButton.className = nextButton.className.replace('ae-btn--primary', 'ae-btn--disabled');\n }\n }\n\n back(event) {\n event.preventDefault();\n const url = `/t/${this.saleSlug}/checkout/address`;\n location.href = url;\n }\n\n next(event) {\n event.preventDefault();\n\n // Prevent double submission - exit early if already submitting\n if (this.submitting) {\n return;\n }\n this.submitting = true;\n\n // Disable button to prevent double submission\n const nextButton = this.getNextButton();\n if (nextButton) {\n nextButton.disabled = true;\n nextButton.classList.add('ae-btn-disabled');\n }\n\n // Enhanced Stripe validation before token creation\n if (typeof window.Stripe === 'undefined') {\n this.handleStripeError({ message: 'Stripe library not loaded. Please refresh the page.' });\n return;\n }\n\n if (!window.App || !window.App.defaultStripePublicKey) {\n this.handleStripeError({ message: 'Payment configuration missing. Please refresh the page.' });\n return;\n }\n\n if (!window.Stripe.instance) {\n this.handleStripeError({ message: 'Stripe instance not initialized. Please refresh the page.' });\n return;\n }\n\n if (!window.Stripe.elementInstance) {\n this.handleStripeError({ message: 'Payment form not ready. Please refresh the page.' });\n return;\n }\n\n // Additional validation - check if key format is valid\n const publicKey = window.App.defaultStripePublicKey;\n if (!publicKey.startsWith('pk_')) {\n this.handleStripeError({ message: 'Invalid payment configuration. Please contact support.' });\n return;\n }\n\n // Get cardholder options\n const options = this.getCardOptions();\n\n // Validate cardholder name is present\n if (!options.name || options.name.trim().length === 0) {\n this.handleStripeError({ message: 'Cardholder name is required.' });\n return;\n }\n\n // Create token using Stripe instance with enhanced error handling\n try {\n window.Stripe.instance.createToken(window.Stripe.elementInstance, options).then(data => {\n const { error, token } = data;\n\n if (error) {\n this.handleStripeError(error);\n } else if (!token || !token.id || !token.card) {\n this.handleStripeError({ message: 'Token creation failed. Please check your card information and try again.' });\n } else {\n this.submitPaymentMethod(token);\n }\n }).catch(_err => {\n this.handleStripeError({ message: 'Payment processing failed. Please try again.' });\n });\n } catch {\n this.handleStripeError({ message: 'Payment system error. Please refresh the page and try again.' });\n }\n }\n\n getCardOptions() {\n const cardholderNameInput = document.getElementById('cardholder-name');\n const name = cardholderNameInput ? cardholderNameInput.value.trim() : '';\n return { name: name };\n }\n\n submitPaymentMethod(token) {\n if (!token || !token.card) return;\n\n const { card } = token;\n\n // Set hidden field values\n this.setHiddenFieldValue('card-gateway-profile-id', token.id);\n this.setHiddenFieldValue('card-name', card.name);\n this.setHiddenFieldValue('card-last4', card.last4);\n this.setHiddenFieldValue('card-exp-month', card.exp_month);\n this.setHiddenFieldValue('card-exp-year', card.exp_year);\n\n // CRITICAL: Validate that payment token was set before submission\n const gatewayProfileField = document.getElementById('card-gateway-profile-id');\n if (!gatewayProfileField || !gatewayProfileField.value || gatewayProfileField.value.trim() === '') {\n // Payment token validation failed - gateway profile ID missing\n this.handleStripeError({ message: 'Payment token creation failed. Please try again.' });\n return;\n }\n\n // Submit form\n const form = document.getElementById('credit-card-form');\n if (form) {\n // SECURITY FIX: Ensure CSRF token is included\n const csrfToken = document.querySelector('meta[name=\"csrf-token\"]')?.getAttribute('content');\n if (!csrfToken) {\n this.handleStripeError({ message: 'Security token missing. Please refresh the page.' });\n return;\n }\n\n // Add CSRF token to form if not already present\n let csrfInput = form.querySelector('input[name=\"authenticity_token\"]');\n if (!csrfInput) {\n csrfInput = document.createElement('input');\n csrfInput.type = 'hidden';\n csrfInput.name = 'authenticity_token';\n form.appendChild(csrfInput);\n }\n csrfInput.value = csrfToken;\n\n // Create and dispatch submit event for Rails UJS\n const submitEvent = new Event('submit', { bubbles: true, cancelable: true });\n form.dispatchEvent(submitEvent);\n // Note: Button stays disabled on success - navigation will handle enabling\n }\n }\n\n setHiddenFieldValue(id, value) {\n const field = document.getElementById(id);\n if (field) {\n field.value = value;\n }\n }\n\n handleStripeError(error) {\n // Reset submission flag\n this.submitting = false;\n\n // Add 3-second cooldown before re-enabling button to prevent rapid re-clicks\n setTimeout(() => {\n const nextButton = this.getNextButton();\n if (nextButton) {\n nextButton.disabled = false;\n nextButton.classList.remove('ae-btn-disabled');\n }\n }, 3000);\n\n // Display error message\n if (error && error.message) {\n // Create error notification\n const errorDiv = document.createElement('div');\n errorDiv.className = 'ae-alert ae-alert-danger';\n errorDiv.textContent = 'Payment error: ' + error.message;\n errorDiv.style.cssText = 'position:fixed;top:20px;right:20px;z-index:9999';\n document.body.appendChild(errorDiv);\n setTimeout(() => errorDiv.remove(), 5000);\n }\n }\n\n setValidCardholderName() {\n this.fields['cardholder_name'] = true;\n this.tryToEnableNextButton();\n }\n\n setInvalidCardholderName() {\n this.fields['cardholder_name'] = false;\n this.disableNextButton();\n }\n\n setValidStripeElement(event) {\n const key = event.detail && event.detail.key;\n if (key) {\n this.fields[key] = true;\n this.tryToEnableNextButton();\n }\n }\n\n setInvalidStripeElement(event) {\n const key = event.detail && event.detail.key;\n if (key) {\n this.fields[key] = false;\n this.disableNextButton();\n }\n }\n\n tryToEnableNextButton() {\n const allFieldsValid = this.fields['cardholder_name'] &&\n this.fields['card_number'] &&\n this.fields['card_expiry'] &&\n this.fields['card_cvc'];\n\n if (allFieldsValid) {\n this.enableNextButton();\n }\n }\n\n disableNextButton() {\n const nextButton = this.getNextButton();\n if (nextButton) {\n nextButton.classList.add('ae-btn-disabled');\n nextButton.disabled = true;\n }\n }\n\n enableNextButton() {\n const nextButton = this.getNextButton();\n if (nextButton) {\n nextButton.classList.remove('ae-btn-disabled');\n nextButton.disabled = false;\n }\n }\n\n getNextButton() {\n // Find next button by id or data-target\n return document.getElementById('payment-next') ||\n this.element.querySelector('[data-target*=\"next\"]');\n }\n\n // Set up MutationObserver to watch for Stripe element state changes\n setupMutationObserver() {\n // Only set up if MutationObserver is supported\n if (typeof MutationObserver === 'undefined') {\n return; // Fall back to polling only\n }\n\n try {\n // eslint-disable-next-line no-undef\n this.mutationObserver = new MutationObserver(() => {\n // Debounce multiple rapid changes\n if (this.mutationTimeout) {\n clearTimeout(this.mutationTimeout);\n }\n this.mutationTimeout = setTimeout(() => {\n this.performFallbackValidation();\n }, 100);\n });\n\n // Find all Stripe element containers to observe\n const stripeContainers = [\n document.querySelector('[data-stripe-element-key=\"card_number\"]'),\n document.querySelector('[data-stripe-element-key=\"card_expiry\"]'),\n document.querySelector('[data-stripe-element-key=\"card_cvc\"]'),\n ].filter(container => container !== null);\n\n // Also observe the parent containers for cardholder name\n const cardholderContainer = document.getElementById('cardholder-name');\n if (cardholderContainer) {\n stripeContainers.push(cardholderContainer.parentElement);\n }\n\n // Observe each container for class changes and content changes\n stripeContainers.forEach((container) => {\n if (container) {\n\n this.mutationObserver.observe(container, {\n attributes: true,\n attributeFilter: ['class'],\n subtree: true, // Watch child elements too\n childList: true, // Watch for child node changes\n });\n\n // Also observe any existing StripeElement children\n const stripeElements = container.querySelectorAll('.StripeElement');\n stripeElements.forEach(stripeEl => {\n this.mutationObserver.observe(stripeEl, {\n attributes: true,\n attributeFilter: ['class'],\n });\n });\n }\n });\n\n } catch (error) {\n // If MutationObserver setup fails, just rely on polling fallback\n // eslint-disable-next-line no-console\n console.warn('MutationObserver setup failed:', error);\n this.mutationObserver = null;\n }\n }\n\n // Smart polling that stops early when all fields are valid or max attempts reached\n performSmartValidation() {\n this.validationCheckCount++;\n\n // Perform validation\n this.performFallbackValidation();\n\n // Stop if all fields are valid (early success exit)\n if (this.fields['cardholder_name'] &&\n this.fields['card_number'] &&\n this.fields['card_expiry'] &&\n this.fields['card_cvc']) {\n this.stopPolling();\n return;\n }\n\n // Stop if we've reached max attempts\n if (this.validationCheckCount >= this.maxValidationChecks) {\n this.stopPolling();\n }\n }\n\n // Helper method to stop polling\n stopPolling() {\n if (this.validationInterval) {\n clearInterval(this.validationInterval);\n this.validationInterval = null;\n }\n }\n\n // Fallback validation to handle cases where Stripe events don't fire\n performFallbackValidation() {\n // Check if cardholder name field has content\n const cardholderNameInput = document.getElementById('cardholder-name');\n const hasCardholderName = cardholderNameInput && cardholderNameInput.value.trim().length > 0;\n\n // Check if visible card input fields appear to have content\n const cardNumberContainer = document.querySelector('[data-stripe-element-key=\"card_number\"]');\n const cardExpiryContainer = document.querySelector('[data-stripe-element-key=\"card_expiry\"]');\n const cardCvcContainer = document.querySelector('[data-stripe-element-key=\"card_cvc\"]');\n\n // Look for visual indicators that fields have content\n const hasCardNumber = this.checkFieldHasContent(cardNumberContainer);\n const hasCardExpiry = this.checkFieldHasContent(cardExpiryContainer);\n const hasCardCvc = this.checkFieldHasContent(cardCvcContainer);\n\n // Update field states based on visual inspection\n this.fields['cardholder_name'] = hasCardholderName;\n this.fields['card_number'] = hasCardNumber;\n this.fields['card_expiry'] = hasCardExpiry;\n this.fields['card_cvc'] = hasCardCvc;\n\n // Try to enable button if all fields appear to have content\n this.tryToEnableNextButton();\n }\n\n // Check if a field container appears to have content\n checkFieldHasContent(container) {\n if (!container) return false;\n\n // Check for various indicators that the field has content:\n // 1. Look for input elements with values (non-Stripe fields like cardholder name)\n const input = container.querySelector('input');\n if (input && input.value && input.value.trim().length > 0) {\n return true;\n }\n\n // 2. Check if the container itself is a Stripe element (for mounted Stripe elements)\n if (container.classList && container.classList.contains('StripeElement')) {\n // Check for completion state\n if (container.classList.contains('StripeElement--complete')) {\n return true;\n }\n\n // Check if NOT empty (has content)\n if (!container.classList.contains('StripeElement--empty')) {\n return true;\n }\n }\n\n // 3. Enhanced Stripe element detection (child elements)\n const stripeElement = container.querySelector('.StripeElement');\n if (stripeElement) {\n // Check for completion state classes\n if (stripeElement.classList.contains('StripeElement--complete')) {\n return true;\n }\n\n // Check if NOT empty (has content)\n if (!stripeElement.classList.contains('StripeElement--empty')) {\n return true;\n }\n\n // Check for iframe presence and content indicators\n const iframe = stripeElement.querySelector('iframe');\n if (iframe) {\n // If iframe exists and element doesn't have empty class, likely has content\n const isEmpty = stripeElement.classList.contains('StripeElement--empty');\n if (!isEmpty) {\n return true;\n }\n }\n }\n\n // 4. Check for any iframe in the container (Stripe elements create iframes)\n const iframe = container.querySelector('iframe');\n if (iframe) {\n // Check parent element classes\n const parent = iframe.parentElement;\n if (parent && !parent.classList.contains('StripeElement--empty')) {\n return true;\n }\n }\n\n // 5. Fallback: Check if container has visible text content (excluding placeholders)\n const hasTextContent = container.textContent &&\n container.textContent.trim().length > 0 &&\n !container.textContent.includes('\u2022\u2022\u2022\u2022') &&\n !container.textContent.includes('placeholder');\n\n // 6. Look for visual indicators of filled state\n const hasFilledIndicator = !!container.querySelector('[class*=\"filled\"]') ||\n !!container.querySelector('[class*=\"complete\"]') ||\n !!container.querySelector('[data-filled=\"true\"]');\n\n return hasTextContent || hasFilledIndicator || false;\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n initialize() {\n this.type = this.element.dataset.elementType;\n this.placeholder = this.element.dataset.elementPlaceholder;\n this.errorContainer = this.element.dataset.errorContainer;\n this.container = this.element.dataset.container;\n this.stripeElementKey = this.element.dataset.stripeElementKey;\n this.initializationAttempts = 0;\n this.maxInitializationAttempts = 3;\n\n // Listen for Stripe initialization events from template\n this.bindStripeEvents();\n\n // Wait for Stripe to be loaded\n this.initializeStripe();\n }\n\n bindStripeEvents() {\n // Listen for successful Stripe initialization from template\n window.addEventListener('stripe:initialized', () => {\n this.initializeStripe();\n });\n\n // Listen for Stripe initialization failure from template\n window.addEventListener('stripe:failed', (event) => {\n console.error('[STRIPE CONTROLLER] Template initialization failed:', event.detail);\n this.showStripeInitializationError();\n });\n\n // Listen for Stripe configuration errors from template\n window.addEventListener('stripe:config-error', (event) => {\n console.error('[STRIPE CONTROLLER] Configuration error:', event.detail);\n this.showStripeConfigurationError(event.detail);\n });\n }\n\n initializeStripe() {\n // Track initialization attempts\n this.initializationAttempts++;\n\n // Enhanced availability check\n if (typeof window.Stripe === 'undefined' || !window.App || !window.App.defaultStripePublicKey) {\n // Retry with exponential backoff up to max attempts\n if (this.initializationAttempts < this.maxInitializationAttempts) {\n const delay = 200 * Math.pow(2, this.initializationAttempts - 1); // 200ms, 400ms, 800ms\n setTimeout(() => this.initializeStripe(), delay);\n return;\n } else {\n // Stripe initialization failed after all retries\n console.error('[STRIPE CONTROLLER] Failed to initialize after', this.maxInitializationAttempts, 'attempts');\n this.showStripeInitializationError();\n return;\n }\n }\n\n // Check if we already have a working element (avoid double initialization)\n if (this.stripeElement) {\n return;\n }\n\n try {\n // Initialize Stripe instance if not already done\n if (!window.Stripe.instance) {\n window.Stripe.instance = window.Stripe(window.App.defaultStripePublicKey);\n }\n\n if (!window.Stripe.elements) {\n window.Stripe.elements = window.Stripe.instance.elements({\n fonts: [{\n cssSrc: 'https://fonts.googleapis.com/css?family=Roboto:400,400i,500',\n }],\n });\n }\n\n // Create the Stripe element\n this.stripeElement = this.createElement(this.type, this.options);\n\n // Mount to the DOM\n const selector = `#${this.element.id}`;\n this.stripeElement.mount(selector);\n\n // Store reference for token creation (only for card number element)\n if (this.type === 'cardNumber') {\n window.Stripe.elementInstance = this.stripeElement;\n }\n\n // Set up validation listener\n this.stripeElement.on('change', this.validate.bind(this));\n\n // Set up additional events for more comprehensive validation\n this.stripeElement.on('ready', () => {\n setTimeout(() => this.checkInitialState(), 100);\n });\n\n this.stripeElement.on('focus', () => {\n setTimeout(() => this.checkInitialState(), 50);\n });\n\n this.stripeElement.on('blur', () => {\n setTimeout(() => this.checkInitialState(), 50);\n });\n\n // Force initial validation check after mount with multiple attempts\n setTimeout(() => this.checkInitialState(), 100);\n setTimeout(() => this.checkInitialState(), 500);\n setTimeout(() => this.checkInitialState(), 1000);\n\n } catch (error) {\n // eslint-disable-next-line no-console\n console.error('Stripe element creation failed:', error);\n this.showStripeInitializationError();\n this.useFallbackValidation();\n }\n }\n\n disconnect() {\n if (this.stripeElement) {\n this.stripeElement.destroy();\n }\n }\n\n validate(event) {\n const errorElement = document.getElementById(this.errorContainer);\n const containerElement = document.getElementById(this.container);\n const paymentContainer = document.getElementById('payment-form-container');\n\n if (!errorElement || !containerElement || !paymentContainer) {\n return;\n }\n\n // Enhanced validation logic\n const isEmpty = event.empty === true;\n const hasError = event.error; // Any error object indicates an error\n const isComplete = event.complete === true;\n\n if (isEmpty) {\n // Field is empty\n containerElement.classList.remove('ae-input-error');\n errorElement.textContent = '';\n this.dispatchValidationEvent(paymentContainer, 'setInvalidStripeElement', { key: this.stripeElementKey });\n } else if (hasError) {\n // Field has an error\n containerElement.classList.add('ae-input-error');\n errorElement.textContent = event.error.message || '';\n this.dispatchValidationEvent(paymentContainer, 'setInvalidStripeElement', { key: this.stripeElementKey });\n } else if (isComplete) {\n // Field is complete and valid\n errorElement.textContent = '';\n containerElement.classList.remove('ae-input-error');\n this.dispatchValidationEvent(paymentContainer, 'setValidStripeElement', { key: this.stripeElementKey });\n } else if (!isEmpty && !hasError) {\n // Field has content but may not be complete yet - treat as valid for enabling button\n errorElement.textContent = '';\n containerElement.classList.remove('ae-input-error');\n this.dispatchValidationEvent(paymentContainer, 'setValidStripeElement', { key: this.stripeElementKey });\n }\n\n }\n\n dispatchValidationEvent(element, eventName, detail) {\n const event = new CustomEvent(eventName, {\n bubbles: true,\n detail: detail,\n });\n element.dispatchEvent(event);\n }\n\n createElement(type, options) {\n const element = window.Stripe.elements.create(type, options);\n\n // Store methods on Stripe global for backward compatibility\n window.Stripe.createToken = (options) => window.Stripe.instance.createToken(element, options);\n window.Stripe.createSource = (options) => window.Stripe.instance.createSource(element, options);\n window.Stripe.retrieveSource = (options) => window.Stripe.instance.retrieveSource(options);\n\n return element;\n }\n\n // Check initial state of mounted element\n checkInitialState() {\n if (!this.stripeElement) return;\n\n const container = document.getElementById(this.element.id);\n const paymentContainer = document.getElementById('payment-form-container');\n\n if (!container || !paymentContainer) return;\n\n // Check if Stripe element appears to have content based on visual indicators\n const stripeElementDiv = container.querySelector('.StripeElement');\n if (stripeElementDiv) {\n const isEmpty = stripeElementDiv.classList.contains('StripeElement--empty');\n const isComplete = stripeElementDiv.classList.contains('StripeElement--complete');\n const hasContent = !isEmpty || isComplete;\n\n if (hasContent) {\n // Simulate a validation event for content detection\n this.validate({\n empty: false,\n error: null,\n complete: isComplete,\n });\n } else {\n // Element is empty\n this.validate({\n empty: true,\n error: null,\n complete: false,\n });\n }\n }\n }\n\n // Fallback validation when Stripe fails to initialize\n useFallbackValidation() {\n const paymentContainer = document.getElementById('payment-form-container');\n if (!paymentContainer) return;\n\n // Mark this field as valid for fallback purposes\n setTimeout(() => {\n this.dispatchValidationEvent(paymentContainer, 'setValidStripeElement', {\n key: this.stripeElementKey,\n });\n }, 100);\n\n // Set up basic input monitoring for the container\n const container = document.getElementById(this.element.id);\n if (container) {\n // Create a basic input field as fallback\n const fallbackInput = document.createElement('input');\n fallbackInput.type = 'text';\n fallbackInput.className = 'ae-input ae-input-md';\n fallbackInput.placeholder = this.placeholder || 'Enter card information';\n\n // Style similar to Stripe elements\n fallbackInput.style.cssText = 'border: none; outline: none; font-size: 16px; width: 100%;';\n\n container.appendChild(fallbackInput);\n\n // Basic validation for fallback\n fallbackInput.addEventListener('input', () => {\n const isEmpty = !fallbackInput.value.trim();\n const eventType = isEmpty ? 'setInvalidStripeElement' : 'setValidStripeElement';\n this.dispatchValidationEvent(paymentContainer, eventType, {\n key: this.stripeElementKey,\n });\n });\n }\n }\n\n // Stripe element styling options\n get options() {\n const options = {\n placeholder: this.placeholder,\n classes: {\n base: 'StripeElement ae-text-field ae-input-lg',\n complete: 'StripeElement--complete',\n empty: 'StripeElement--empty',\n focus: 'StripeElement--focus',\n invalid: 'StripeElement--invalid ae-input-error',\n webkitAutofill: 'StripeElement--webkit-autofill',\n },\n style: {\n base: {\n color: '#000000',\n lineHeight: '24px',\n fontFamily: '\"Roboto\", Helvetica, Arial, sans-serif',\n fontSmoothing: 'auto',\n fontSize: '18px',\n '::placeholder': {\n color: '#d1d1d1',\n },\n },\n invalid: {\n color: '#ce0500',\n iconColor: '#ce0500',\n },\n },\n };\n\n return options;\n }\n\n showStripeInitializationError() {\n const paymentContainer = document.getElementById('payment-form-container');\n if (!paymentContainer) return;\n\n // Prevent duplicate error messages\n if (paymentContainer.querySelector('.stripe-error-message')) {\n return;\n }\n\n // Create error message\n const errorDiv = document.createElement('div');\n errorDiv.className = 'ae-alert ae-alert--error stripe-error-message';\n errorDiv.innerHTML = `\n
\n Payment System Error: Payment processing is temporarily unavailable. \n Please refresh the page and try again. If the problem persists, try a different browser or contact support.\n
\n `;\n\n // Insert at top of payment container\n paymentContainer.insertBefore(errorDiv, paymentContainer.firstChild);\n\n // Disable the payment form\n this.disablePaymentForm('Payment Unavailable');\n\n // Hide the payment fields\n const creditCardForm = paymentContainer.querySelector('.credit-card-form');\n if (creditCardForm) {\n creditCardForm.style.display = 'none';\n }\n }\n\n showStripeConfigurationError(detail) {\n const paymentContainer = document.getElementById('payment-form-container');\n if (!paymentContainer) return;\n\n // Prevent duplicate error messages\n if (paymentContainer.querySelector('.stripe-error-message')) {\n return;\n }\n\n // Create configuration-specific error message\n const errorDiv = document.createElement('div');\n errorDiv.className = 'ae-alert ae-alert--error stripe-error-message';\n\n let message = 'Payment configuration error. ';\n if (!detail.keyPresent) {\n message += 'No payment key configured.';\n } else if (!detail.keyFormat) {\n message += 'Invalid payment key format.';\n } else {\n message += 'Payment system misconfiguration.';\n }\n message += ' Please contact support.';\n\n errorDiv.innerHTML = `\n
\n Configuration Error: ${message}\n
\n `;\n\n // Insert at top of payment container\n paymentContainer.insertBefore(errorDiv, paymentContainer.firstChild);\n\n // Disable the payment form\n this.disablePaymentForm('Configuration Error');\n\n // Hide the payment fields\n const creditCardForm = paymentContainer.querySelector('.credit-card-form');\n if (creditCardForm) {\n creditCardForm.style.display = 'none';\n }\n }\n\n disablePaymentForm(buttonText) {\n const nextButton = document.querySelector('[data-action*=\"next\"]');\n if (nextButton) {\n nextButton.disabled = true;\n nextButton.textContent = buttonText;\n nextButton.className = nextButton.className.replace('ae-btn--primary', 'ae-btn--disabled');\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n connect() {\n this.saleSlug = this.element.getAttribute('data-sale-slug');\n this.steps = ['billing', 'address', 'payment', 'confirm'];\n }\n\n initialize() {\n this.saleSlug = this.element.getAttribute('data-sale-slug');\n this.steps = ['billing', 'address', 'payment', 'confirm'];\n }\n\n back(e) {\n if (e && typeof e.preventDefault === 'function') {\n e.preventDefault();\n }\n\n if (!this.saleSlug) return;\n\n const currentStep = this.getCurrentStep();\n const previousStep = this.getPreviousStep(currentStep);\n\n if (previousStep) {\n const url = this.buildStepUrl(previousStep);\n if (typeof location !== 'undefined') {\n location.href = url;\n }\n }\n }\n\n next(e) {\n if (e && typeof e.preventDefault === 'function') {\n e.preventDefault();\n }\n\n if (!this.saleSlug) return;\n\n const currentStep = this.getCurrentStep();\n const nextStep = this.getNextStep(currentStep);\n\n if (nextStep) {\n const url = this.buildStepUrl(nextStep);\n if (typeof location !== 'undefined') {\n location.href = url;\n }\n }\n }\n\n confirm(e) {\n if (e && typeof e.preventDefault === 'function') {\n e.preventDefault();\n }\n\n const url = this.buildStepUrl('confirm');\n if (typeof location !== 'undefined') {\n location.href = url;\n }\n }\n\n getCurrentStep() {\n if (typeof location === 'undefined' || !location || !location.pathname) return null;\n\n // Only match the full expected pattern: /t/{saleSlug}/checkout/{step}\n const match = location.pathname.match(/\\/t\\/[^/]+\\/checkout\\/(\\w+)$/);\n const step = match ? match[1] : null;\n\n // Return null for malformed paths (not in our step list)\n return step && this.steps.includes(step) ? step : null;\n }\n\n buildStepUrl(step) {\n return `/t/${this.saleSlug}/checkout/${step}`;\n }\n\n getNextStep(currentStep) {\n if (!currentStep) return null;\n\n const currentIndex = this.steps.indexOf(currentStep);\n if (currentIndex === -1 || currentIndex === this.steps.length - 1) {\n return null;\n }\n\n return this.steps[currentIndex + 1];\n }\n\n getPreviousStep(currentStep) {\n if (!currentStep) return null;\n\n const currentIndex = this.steps.indexOf(currentStep);\n if (currentIndex === -1 || currentIndex === 0) {\n return null;\n }\n\n return this.steps[currentIndex - 1];\n }\n\n // Legacy methods for backward compatibility\n billing(e) {\n if (e && typeof e.preventDefault === 'function') {\n e.preventDefault();\n }\n\n const url = this.buildStepUrl('billing');\n if (typeof location !== 'undefined') {\n location.href = url;\n }\n }\n\n address(e) {\n if (e && typeof e.preventDefault === 'function') {\n e.preventDefault();\n }\n\n const url = this.buildStepUrl('address');\n if (typeof location !== 'undefined') {\n location.href = url;\n }\n }\n\n payment(e) {\n if (e && typeof e.preventDefault === 'function') {\n e.preventDefault();\n }\n\n const currentStep = this.getCurrentStep();\n\n // Track payment retry attempt if navigating from confirm\n if (currentStep === 'confirm') {\n // Payment retry attempted from confirm state\n }\n\n const url = this.buildStepUrl('payment');\n if (typeof location !== 'undefined') {\n location.href = url;\n }\n }\n}\n\n", "import { Controller } from '../stimulus';\n\n/* global MutationObserver */\n\nexport default class extends Controller {\n static targets = ['form', 'button', 'email', 'password', 'confirmation'];\n\n connect() {\n // Bind and store the validation function for proper cleanup\n this.boundValidateForm = this.validateForm.bind(this);\n\n // Initialize submission state tracking to prevent double submission\n this.isSubmitting = false;\n\n // Initialize button target reference for better targeting\n this.initializeButtonTarget();\n\n // Check for pre-filled email from billing form\n this.checkForPrefilledEmail();\n\n this.validateForm(); // Enable button if pre-filled\n\n this.setupListeners();\n this.setupMutationObserver(); // Watch for DOM changes\n }\n\n initializeButtonTarget() {\n // Cache button reference for better performance and reliability\n this.cachedButtonElement = this.findButtonElement();\n\n // Ensure button starts in correct disabled state\n if (this.cachedButtonElement) {\n // Start with button disabled - validateForm() will enable if valid\n this.cachedButtonElement.disabled = true;\n this.cachedButtonElement.classList.add('ae-btn-disabled');\n }\n }\n\n findButtonElement() {\n // Try multiple selectors to find the button, prioritizing most specific\n const selectors = [\n '#register-button',\n '[data-target=\"t-checkout-register.button\"]', // More specific target\n '[data-target*=\"button\"]',\n 'input[value=\"Register\"]',\n 'input[type=\"submit\"][value=\"Register\"]', // More specific\n 'input[type=\"submit\"]',\n '.ae-btn-primary[type=\"submit\"]', // More specific\n '.ae-btn-primary',\n ];\n\n for (const selector of selectors) {\n const button = this.element.querySelector(selector);\n if (button) {\n return button;\n }\n }\n\n // Try searching in the entire document as fallback\n for (const selector of selectors) {\n const button = document.querySelector(`#register-popup ${selector}`);\n if (button) {\n return button;\n }\n }\n\n // Final fallback - search entire document\n for (const selector of selectors) {\n const button = document.querySelector(selector);\n if (button) {\n return button;\n }\n }\n\n return null;\n }\n\n checkForPrefilledEmail() {\n // Get email from data attribute set by checkout form\n const checkoutEmail = document.body.getAttribute('data-checkout-email');\n const emailField = document.getElementById('checkout-login-email');\n\n if (checkoutEmail && emailField) {\n emailField.value = checkoutEmail;\n\n // Trigger validation after pre-filling\n const event = new Event('input', { bubbles: true });\n emailField.dispatchEvent(event);\n\n // Focus on password field since email is pre-filled\n setTimeout(() => {\n const passwordField = document.getElementById('checkout-login-password');\n if (passwordField) {\n passwordField.focus();\n }\n }, 100);\n\n // Clear the data attribute to prevent reuse\n document.body.removeAttribute('data-checkout-email');\n } else if (emailField && !emailField.value) {\n // Focus on email field when it's empty\n setTimeout(() => {\n emailField.focus();\n }, 100);\n }\n }\n\n setupListeners() {\n // Use Stimulus targets for reliable event handling\n if (this.hasEmailTarget) {\n this.emailTarget.addEventListener('input', this.boundValidateForm);\n this.emailTarget.addEventListener('change', this.boundValidateForm);\n this.emailTarget.addEventListener('focus', this.boundValidateForm);\n this.emailTarget.addEventListener('blur', this.boundValidateForm);\n this.emailTarget.addEventListener('click', this.boundValidateForm);\n }\n\n if (this.hasPasswordTarget) {\n this.passwordTarget.addEventListener('input', this.boundValidateForm);\n this.passwordTarget.addEventListener('change', this.boundValidateForm);\n this.passwordTarget.addEventListener('focus', this.boundValidateForm);\n this.passwordTarget.addEventListener('blur', this.boundValidateForm);\n this.passwordTarget.addEventListener('click', this.boundValidateForm);\n }\n\n if (this.hasConfirmationTarget) {\n this.confirmationTarget.addEventListener('input', this.boundValidateForm);\n this.confirmationTarget.addEventListener('change', this.boundValidateForm);\n this.confirmationTarget.addEventListener('focus', this.boundValidateForm);\n this.confirmationTarget.addEventListener('blur', this.boundValidateForm);\n this.confirmationTarget.addEventListener('click', this.boundValidateForm);\n }\n }\n\n validateForm(_event) {\n // Simple presence check for button enabling using targets\n const hasEmail = !!(this.hasEmailTarget && this.emailTarget.value && this.emailTarget.value.trim() && this.emailTarget.value.includes('@'));\n const hasPassword = !!(this.hasPasswordTarget && this.passwordTarget.value && this.passwordTarget.value.length >= 6);\n const hasConfirmation = !!(this.hasConfirmationTarget && this.confirmationTarget.value);\n const passwordsMatch = !!(hasPassword && hasConfirmation && this.passwordTarget.value === this.confirmationTarget.value);\n const canEnable = hasEmail && hasPassword && hasConfirmation && passwordsMatch;\n\n // Clear any previous validation errors when user is typing\n if (hasEmail && this.hasEmailTarget) {\n this.clearFieldError(this.emailTarget);\n }\n if (hasPassword && this.hasPasswordTarget) {\n this.clearFieldError(this.passwordTarget);\n }\n if (hasConfirmation && passwordsMatch && this.hasConfirmationTarget) {\n this.clearFieldError(this.confirmationTarget);\n }\n\n // Use cached button element or fallback to finding it\n const button = this.cachedButtonElement ||\n this.buttonTarget ||\n this.findButtonElement();\n\n if (button) {\n button.disabled = !canEnable;\n\n // Ensure CSS class is properly managed\n if (canEnable) {\n button.classList.remove('ae-btn-disabled');\n } else {\n button.classList.add('ae-btn-disabled');\n }\n\n // Cache the button for future use if we didn't have it cached\n if (!this.cachedButtonElement) {\n this.cachedButtonElement = button;\n }\n }\n\n return canEnable;\n }\n\n showFieldError(field, message) {\n if (!field) return;\n const errorDiv = field.closest('.ae-field')?.querySelector('.ae-error-msg');\n if (errorDiv) {\n errorDiv.textContent = message;\n errorDiv.style.display = 'block';\n }\n }\n\n clearFieldError(field) {\n if (!field) return;\n const errorDiv = field.closest('.ae-field')?.querySelector('.ae-error-msg');\n if (errorDiv) {\n errorDiv.style.display = 'none';\n }\n }\n\n click(event) {\n // Handle form submission\n event.preventDefault();\n\n // Prevent double submission - exit early if already submitting\n if (this.isSubmitting) {\n return false;\n }\n\n // Perform strict validation before submission\n if (!this.validateFormForSubmission()) {\n return false;\n }\n\n // Mark as submitting to prevent duplicate submissions\n this.isSubmitting = true;\n\n // Submit via AJAX\n this.submitForm();\n return false;\n }\n\n validateFormForSubmission() {\n let isValid = true;\n\n // Email validation\n if (!this.hasEmailTarget || !this.emailTarget.value || !this.emailTarget.value.trim() || !this.emailTarget.value.includes('@')) {\n if (this.hasEmailTarget) {\n this.showFieldError(this.emailTarget, 'Please enter a valid email address');\n }\n isValid = false;\n } else {\n this.clearFieldError(this.emailTarget);\n }\n\n // Password validation\n if (!this.hasPasswordTarget || !this.passwordTarget.value || this.passwordTarget.value.length < 6) {\n if (this.hasPasswordTarget) {\n this.showFieldError(this.passwordTarget, 'Password must be at least 6 characters');\n }\n isValid = false;\n } else {\n this.clearFieldError(this.passwordTarget);\n }\n\n // Password confirmation validation\n if (!this.hasConfirmationTarget || !this.confirmationTarget.value) {\n if (this.hasConfirmationTarget) {\n this.showFieldError(this.confirmationTarget, 'Password confirmation is required');\n }\n isValid = false;\n } else if (this.hasPasswordTarget && this.passwordTarget.value !== this.confirmationTarget.value) {\n if (this.hasConfirmationTarget) {\n this.showFieldError(this.confirmationTarget, 'Passwords do not match');\n }\n isValid = false;\n } else {\n this.clearFieldError(this.confirmationTarget);\n }\n\n return isValid;\n }\n\n submitForm() {\n const form = this.formTarget || this.element.querySelector('form');\n if (!form) return;\n\n const formData = new FormData(form);\n const url = form.action;\n\n // Show loading state\n this.setLoadingState(true);\n\n // Set safety timeout to reset submission flag (30 seconds)\n const safetyTimeout = setTimeout(() => {\n this.isSubmitting = false;\n }, 30000);\n\n fetch(url, {\n method: 'POST',\n body: formData,\n headers: {\n 'X-CSRF-Token': this.getCSRFToken(),\n 'X-Requested-With': 'XMLHttpRequest',\n 'Accept': 'application/json',\n },\n })\n .then(response => {\n return response.json().then(data => {\n return { response, data };\n }).catch(jsonError => {\n return {\n response,\n data: {\n success: false,\n message: `Server responded with ${response.status}`,\n jsonParseError: jsonError.message,\n },\n };\n });\n })\n .then(({ response, data }) => {\n if (response.ok && data.success) {\n this.handleRegistrationSuccess(data);\n } else {\n this.handleRegistrationError(data);\n }\n })\n .catch(_error => {\n this.handleRegistrationError({\n success: false,\n message: 'Network error occurred. Please try again.',\n });\n })\n .finally(() => {\n // Clear safety timeout since request completed\n clearTimeout(safetyTimeout);\n this.setLoadingState(false);\n });\n }\n\n handleRegistrationSuccess(data) {\n // Reset submission flag\n this.isSubmitting = false;\n\n // Hide the modal\n this.closeModal();\n\n // Show success message\n if (window.App && window.App.showSuccessFlash) {\n window.App.showSuccessFlash(data.message || 'Registration successful');\n }\n\n // Update the checkout form with user data\n this.updateCheckoutForm(data.user);\n\n // Update the header to show logged-in state\n this.updateHeader();\n\n // Dispatch registration event\n const event = new CustomEvent('checkout:registration-success', {\n detail: { user: data.user },\n });\n document.dispatchEvent(event);\n }\n\n handleRegistrationError(data) {\n // Reset submission flag\n this.isSubmitting = false;\n\n const errorContainer = document.getElementById('checkout-register-errors');\n if (errorContainer) {\n errorContainer.textContent = data.message || 'Registration failed. Please try again.';\n errorContainer.style.display = 'block';\n }\n\n // Show field-specific errors if available\n if (data.errors) {\n if (data.errors.email && this.hasEmailTarget) {\n this.showFieldError(this.emailTarget, data.errors.email[0]);\n }\n if (data.errors.password && this.hasPasswordTarget) {\n this.showFieldError(this.passwordTarget, data.errors.password[0]);\n }\n if (data.errors.password_confirmation && this.hasConfirmationTarget) {\n this.showFieldError(this.confirmationTarget, data.errors.password_confirmation[0]);\n }\n }\n\n // Clear password fields\n if (this.hasPasswordTarget) {\n this.passwordTarget.value = '';\n }\n if (this.hasConfirmationTarget) {\n this.confirmationTarget.value = '';\n }\n }\n\n updateCheckoutForm(user) {\n // Update email field (if not readonly)\n const emailField = document.querySelector('input[name*=\"email\"]');\n if (emailField && !emailField.readonly) {\n emailField.value = user.email;\n }\n\n // Update name fields\n const firstNameField = document.querySelector('input[name*=\"first_name\"]');\n if (firstNameField && user.first_name) {\n firstNameField.value = user.first_name;\n }\n\n const lastNameField = document.querySelector('input[name*=\"last_name\"]');\n if (lastNameField && user.last_name) {\n lastNameField.value = user.last_name;\n }\n\n // Hide the registration link since user is now logged in\n const registerContainer = document.getElementById('checkout-register');\n if (registerContainer) {\n registerContainer.style.display = 'none';\n }\n }\n\n updateHeader() {\n // Refresh the header customer area to show logged-in state\n const headerContainer = document.getElementById('customer-account-header-container');\n if (headerContainer) {\n // Simple approach: reload the page to update header state\n // In a more sophisticated implementation, we'd fetch and replace the header content\n setTimeout(() => {\n window.location.reload();\n }, 1000);\n }\n }\n\n closeModal() {\n const modal = this.element;\n if (modal) {\n modal.style.display = 'none';\n modal.classList.remove('simple-popup-source');\n\n // Remove backdrop\n const backdrop = document.querySelector('.simple-popup-backdrop');\n if (backdrop) {\n backdrop.style.display = 'none';\n }\n\n // Remove modal-open class from body\n document.body.classList.remove('modal-open');\n }\n }\n\n setLoadingState(isLoading) {\n const button = this.cachedButtonElement ||\n this.buttonTarget ||\n this.findButtonElement();\n if (button) {\n button.disabled = isLoading;\n if (button.tagName === 'INPUT') {\n button.value = isLoading ? 'Registering...' : 'Register';\n } else {\n button.textContent = isLoading ? 'Registering...' : 'Register';\n }\n }\n }\n\n getCSRFToken() {\n const token = document.querySelector('meta[name=\"csrf-token\"]');\n return token ? token.getAttribute('content') : '';\n }\n\n setupMutationObserver() {\n // Watch for value changes that might not trigger events\n if (!this.hasEmailTarget || !this.hasPasswordTarget || !this.hasConfirmationTarget) {\n return;\n }\n\n // Create observer for attribute changes (like value)\n this.observer = new MutationObserver((_mutations) => {\n this.validateForm();\n });\n\n // Observe all fields for attribute changes\n const config = { attributes: true, attributeFilter: ['value'] };\n\n if (this.hasEmailTarget) {\n this.observer.observe(this.emailTarget, config);\n }\n\n if (this.hasPasswordTarget) {\n this.observer.observe(this.passwordTarget, config);\n }\n\n if (this.hasConfirmationTarget) {\n this.observer.observe(this.confirmationTarget, config);\n }\n }\n\n disconnect() {\n // Clean up mutation observer\n if (this.observer) {\n this.observer.disconnect();\n }\n\n // Clean up listeners using targets\n if (this.boundValidateForm) {\n if (this.hasEmailTarget) {\n this.emailTarget.removeEventListener('input', this.boundValidateForm);\n this.emailTarget.removeEventListener('change', this.boundValidateForm);\n this.emailTarget.removeEventListener('focus', this.boundValidateForm);\n this.emailTarget.removeEventListener('blur', this.boundValidateForm);\n this.emailTarget.removeEventListener('click', this.boundValidateForm);\n }\n\n if (this.hasPasswordTarget) {\n this.passwordTarget.removeEventListener('input', this.boundValidateForm);\n this.passwordTarget.removeEventListener('change', this.boundValidateForm);\n this.passwordTarget.removeEventListener('focus', this.boundValidateForm);\n this.passwordTarget.removeEventListener('blur', this.boundValidateForm);\n this.passwordTarget.removeEventListener('click', this.boundValidateForm);\n }\n\n if (this.hasConfirmationTarget) {\n this.confirmationTarget.removeEventListener('input', this.boundValidateForm);\n this.confirmationTarget.removeEventListener('change', this.boundValidateForm);\n this.confirmationTarget.removeEventListener('focus', this.boundValidateForm);\n this.confirmationTarget.removeEventListener('blur', this.boundValidateForm);\n this.confirmationTarget.removeEventListener('click', this.boundValidateForm);\n }\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n click(event) {\n event.preventDefault();\n\n // Close the registration modal\n const registerModal = document.getElementById('register-popup');\n if (registerModal) {\n // Hide registration modal\n registerModal.style.display = 'none';\n registerModal.classList.remove('simple-popup-source');\n\n // Remove backdrop if it exists\n const backdrop = document.querySelector('.simple-popup-backdrop');\n if (backdrop) {\n backdrop.style.display = 'none';\n }\n\n // Remove modal-open class from body\n document.body.classList.remove('modal-open');\n }\n\n // Show the login modal - check for both possible container IDs\n let loginContainer = document.getElementById('login-modal-container');\n if (!loginContainer) {\n loginContainer = document.getElementById('login-container');\n }\n const loginPopup = document.getElementById('login-popup');\n\n if (loginContainer && loginPopup) {\n // Make container visible\n loginContainer.style.display = 'block';\n\n // Initialize simple-popup on the login modal\n // Note: Stimulus 1.1.0 doesn't have getControllerForElementAndIdentifier\n // Manual DOM manipulation is used instead\n\n // Create a backdrop for login modal\n let backdrop = document.querySelector('.simple-popup-backdrop');\n if (!backdrop) {\n backdrop = document.createElement('div');\n backdrop.className = 'simple-popup-backdrop';\n document.body.appendChild(backdrop);\n }\n backdrop.style.display = 'block';\n\n // Position and show login modal\n loginPopup.style.position = 'fixed';\n loginPopup.style.top = '50%';\n loginPopup.style.left = '50%';\n loginPopup.style.transform = 'translate(-50%, -50%)';\n loginPopup.style.zIndex = '1050';\n loginPopup.style.display = 'block';\n loginPopup.classList.add('simple-popup-source');\n\n // Add modal-open class to body\n document.body.classList.add('modal-open');\n\n // Add close button if not present\n if (!loginPopup.querySelector('.simple-popup-close')) {\n const closeButton = document.createElement('button');\n closeButton.className = 'simple-popup-close';\n closeButton.innerHTML = '×';\n closeButton.title = 'Close';\n closeButton.onclick = () => {\n this.closeLoginModal(loginPopup, loginContainer, backdrop);\n };\n loginPopup.appendChild(closeButton);\n }\n\n // Handle escape key\n const handleEscape = (e) => {\n if (e.key === 'Escape') {\n this.closeLoginModal(loginPopup, loginContainer, backdrop);\n document.removeEventListener('keydown', handleEscape);\n }\n };\n document.addEventListener('keydown', handleEscape);\n\n // Handle backdrop click\n backdrop.onclick = () => {\n this.closeLoginModal(loginPopup, loginContainer, backdrop);\n };\n }\n }\n\n closeLoginModal(loginPopup, loginContainer, backdrop) {\n if (loginPopup) {\n loginPopup.style.display = 'none';\n loginPopup.classList.remove('simple-popup-source');\n }\n if (loginContainer) {\n loginContainer.style.display = 'none';\n }\n if (backdrop) {\n backdrop.style.display = 'none';\n }\n document.body.classList.remove('modal-open');\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n connect() {\n this.orderNumber = this.element.dataset.orderNumber;\n this.reload();\n }\n\n getSaleSlug() {\n const pathMatch = window.location.pathname.match(/^\\/t\\/([^/]+)/);\n return pathMatch ? pathMatch[1] : '';\n }\n\n reload() {\n const saleSlug = this.getSaleSlug();\n const url = `/t/${saleSlug}/checkout/coupons/${this.orderNumber}`;\n\n fetch(url)\n .then(response => response.text())\n .then(html => {\n this.element.innerHTML = html;\n })\n .catch(() => {\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Failed to load coupon information');\n }\n });\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n connect() {\n const primaryColor = this.element.dataset.jsTeamSitePrimaryColor || '#000';\n const secondaryColor = this.element.dataset.jsTeamSiteSecondaryColor || '#000';\n\n // Calculate color variations\n const primaryLighten100 = this.lighten(primaryColor, 100);\n const primaryLighten70 = this.lighten(primaryColor, 70);\n const primaryDarken20 = this.darken(primaryColor, 20);\n const primaryDarken10 = this.darken(primaryColor, 10);\n const secondaryDarken100 = this.darken(secondaryColor, 100);\n\n // Create CSS variables\n const cssVariables = `body { \n --primary-color: ${primaryColor}; \n --secondary-color: ${secondaryColor}; \n --primary-lighten-100: ${primaryLighten100}; \n --primary-lighten-70: ${primaryLighten70}; \n --primary-darken-20: ${primaryDarken20}; \n --primary-darken-10: ${primaryDarken10}; \n --secondary-darken-100: ${secondaryDarken100}; \n }`;\n\n // Get existing CSS content\n const oldCSS = this.element.textContent;\n\n // Prepend CSS variables to the existing styles\n this.element.textContent = cssVariables + oldCSS;\n }\n\n // Color manipulation functions (simple implementations)\n lighten(color, percent) {\n // Convert hex to RGB\n const rgb = this.hexToRgb(color);\n if (!rgb) return color;\n\n // Calculate lightened values\n const factor = percent / 100;\n const r = Math.min(255, Math.round(rgb.r + (255 - rgb.r) * factor));\n const g = Math.min(255, Math.round(rgb.g + (255 - rgb.g) * factor));\n const b = Math.min(255, Math.round(rgb.b + (255 - rgb.b) * factor));\n\n return this.rgbToHex(r, g, b);\n }\n\n darken(color, percent) {\n // Convert hex to RGB\n const rgb = this.hexToRgb(color);\n if (!rgb) return color;\n\n // Calculate darkened values\n const factor = percent / 100;\n const r = Math.max(0, Math.round(rgb.r * (1 - factor)));\n const g = Math.max(0, Math.round(rgb.g * (1 - factor)));\n const b = Math.max(0, Math.round(rgb.b * (1 - factor)));\n\n return this.rgbToHex(r, g, b);\n }\n\n hexToRgb(hex) {\n // Remove # if present\n let cleanHex = hex.replace(/^#/, '');\n\n // Support 3-digit hex\n if (cleanHex.length === 3) {\n cleanHex = cleanHex[0] + cleanHex[0] + cleanHex[1] + cleanHex[1] + cleanHex[2] + cleanHex[2];\n }\n\n const result = /^([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(cleanHex);\n return result ? {\n r: parseInt(result[1], 16),\n g: parseInt(result[2], 16),\n b: parseInt(result[3], 16),\n } : null;\n }\n\n rgbToHex(r, g, b) {\n return '#' + [r, g, b].map(x => {\n const hex = x.toString(16);\n return hex.length === 1 ? '0' + hex : hex;\n }).join('');\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n connect() {\n // Get sale slug from the cart counter button inside the container\n const cartButton = this.element.querySelector('[data-sale-slug]');\n if (cartButton) {\n this.saleSlug = cartButton.dataset.saleSlug;\n } else {\n // Fallback: extract from URL path\n const pathMatch = window.location.pathname.match(/^\\/t\\/([^/]+)/);\n this.saleSlug = pathMatch ? pathMatch[1] : null;\n }\n\n // Bind event handlers\n this.boundRefresh = this.refresh.bind(this);\n\n // Listen for cart events\n document.addEventListener('line_item:create', this.boundRefresh);\n document.addEventListener('line_item:delete', this.boundRefresh);\n document.addEventListener('line_item:update', this.boundRefresh);\n document.addEventListener('cart:clear', this.boundRefresh);\n }\n\n disconnect() {\n // Remove event listeners\n document.removeEventListener('line_item:create', this.boundRefresh);\n document.removeEventListener('line_item:delete', this.boundRefresh);\n document.removeEventListener('line_item:update', this.boundRefresh);\n document.removeEventListener('cart:clear', this.boundRefresh);\n }\n\n refresh() {\n if (!this.saleSlug) return;\n\n const url = `/t/${this.saleSlug}/checkout/cart_counter`;\n fetch(url, {\n headers: {\n 'Accept': 'text/html',\n 'X-Requested-With': 'XMLHttpRequest',\n },\n })\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n return response.text();\n })\n .then(html => {\n // Use DOMParser for safe HTML insertion\n const parser = new DOMParser();\n const doc = parser.parseFromString(html, 'text/html');\n\n // Clear existing content\n while (this.element.firstChild) {\n this.element.removeChild(this.element.firstChild);\n }\n\n // Move all child nodes from parsed document\n while (doc.body.firstChild) {\n this.element.appendChild(doc.body.firstChild);\n }\n })\n .catch(() => {\n // Silently handle errors - counter update is not critical\n });\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n connect() {\n // Store body reference\n this.body = document.body;\n\n // Store bound function references for proper cleanup\n this.boundRefresh = this.refresh.bind(this);\n\n // Listen for cart update events\n document.addEventListener('line_item:create', this.boundRefresh);\n document.addEventListener('line_item:delete', this.boundRefresh);\n document.addEventListener('line_item:update', this.boundRefresh);\n }\n\n disconnect() {\n // Clean up event listeners using stored references\n if (this.boundRefresh) {\n document.removeEventListener('line_item:create', this.boundRefresh);\n document.removeEventListener('line_item:delete', this.boundRefresh);\n document.removeEventListener('line_item:update', this.boundRefresh);\n }\n }\n\n click(event) {\n event.preventDefault();\n\n // Find sidebar container\n const cartSidebarContainer = document.getElementById('cart-sidebar-container');\n\n if (!cartSidebarContainer) {\n return;\n }\n\n // Check if sidebar is currently visible by checking computed style\n const computedStyle = window.getComputedStyle(cartSidebarContainer);\n const isVisible = computedStyle.visibility === 'visible' && computedStyle.display !== 'none';\n\n if (isVisible) {\n // Hide sidebar\n cartSidebarContainer.setAttribute('data-visible', 'false');\n cartSidebarContainer.style.cssText = '';\n cartSidebarContainer.className = 'ae-sidebar ae-sidebar-right my-bag-sidebar ae-invisible detail-container';\n document.body.classList.remove('hide-scrollbar');\n } else {\n // Show sidebar\n cartSidebarContainer.setAttribute('data-visible', 'true');\n\n // Keep the controller data attributes intact\n const controllerAttr = cartSidebarContainer.getAttribute('data-controller');\n\n // Set proper classes for visibility while keeping controllers\n cartSidebarContainer.className = 'ae-sidebar ae-sidebar-right my-bag-sidebar ae-show-sidebar-right detail-container';\n\n // Ensure controller attribute is preserved\n if (controllerAttr) {\n cartSidebarContainer.setAttribute('data-controller', controllerAttr);\n }\n\n // Remove any existing styles\n cartSidebarContainer.removeAttribute('style');\n\n // Apply minimal forcing styles to ensure visibility\n setTimeout(() => {\n cartSidebarContainer.style.cssText =\n 'position: fixed !important;' +\n 'right: 0px !important;' +\n 'top: 0px !important;' +\n 'width: 30% !important;' + // Standard sidebar width\n 'min-width: 300px !important;' +\n 'height: 100% !important;' +\n 'background: white !important;' +\n 'z-index: 99999 !important;' +\n 'visibility: visible !important;' +\n 'opacity: 1 !important;' +\n 'display: block !important;' +\n 'transform: translateX(0) !important;' +\n 'box-shadow: -10px 0 40px 2px rgba(0, 0, 0, 0.6) !important;' +\n 'overflow: visible !important;'; // Allow buttons to show outside bounds\n }, 10);\n\n document.body.classList.add('hide-scrollbar');\n\n // Dispatch event to load cart content (Stimulus 1.1.0 compatible)\n const loadEvent = new CustomEvent('cart-sidebar:load-content', {\n bubbles: true,\n detail: { source: 'cart-counter' },\n });\n cartSidebarContainer.dispatchEvent(loadEvent);\n }\n\n // Close any open dropdowns\n const dropdowns = document.querySelectorAll('.ae-dropdown-content');\n dropdowns.forEach(dropdown => {\n dropdown.style.display = 'none';\n });\n }\n\n refresh() {\n // Refresh cart counter content if needed\n const saleSlug = this.element.dataset.saleSlug;\n if (saleSlug) {\n const url = `/t/${saleSlug}/checkout/cart_counter`;\n\n fetch(url, {\n headers: {\n 'Accept': 'text/html',\n 'X-Requested-With': 'XMLHttpRequest',\n },\n })\n .then(response => response.text())\n .then(html => {\n const cartCounterContainer = document.getElementById('cart-counter-container');\n if (cartCounterContainer) {\n // Use DOMParser for secure HTML insertion\n const parser = new DOMParser();\n const doc = parser.parseFromString(html, 'text/html');\n const newContent = doc.body.firstChild;\n\n if (newContent) {\n // Clear existing content\n while (cartCounterContainer.firstChild) {\n cartCounterContainer.removeChild(cartCounterContainer.firstChild);\n }\n\n // Clone and append all child nodes from the parsed content\n while (doc.body.firstChild) {\n cartCounterContainer.appendChild(doc.body.firstChild);\n }\n }\n }\n });\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['navLinks'];\n\n connect() {\n // Bind methods once to ensure proper cleanup\n this.boundHandleScroll = this.handleScroll.bind(this);\n this.boundHandleCategoryActive = this.handleCategoryActive.bind(this);\n this.boundHandleDisplayLimitChange = this.handleDisplayLimitChange.bind(this);\n\n // Initialize flags to prevent race conditions\n this.userClickedRecently = false;\n this.lastClickedCategory = null;\n\n // Initialize display limit from data attribute or default to 4\n this.displayLimit = parseInt(this.element.dataset.categoryLimit || '4', 10);\n\n // Set up initial active state based on current page position\n this.updateActiveState();\n\n // Listen for scroll events to update active state\n window.addEventListener('scroll', this.boundHandleScroll);\n\n // Listen for category active events from scroll controller\n this.element.addEventListener('category:active', this.boundHandleCategoryActive);\n\n // Listen for display limit changes from responsive controller\n document.addEventListener('category:displayLimitChanged', this.boundHandleDisplayLimitChange);\n }\n\n disconnect() {\n // Remove event listeners using the same bound references\n window.removeEventListener('scroll', this.boundHandleScroll);\n this.element.removeEventListener('category:active', this.boundHandleCategoryActive);\n document.removeEventListener('category:displayLimitChanged', this.boundHandleDisplayLimitChange);\n\n // Clear timeouts if they exist\n if (this.scrollTimeout) {\n clearTimeout(this.scrollTimeout);\n this.scrollTimeout = null;\n }\n if (this.clickResetTimeout) {\n clearTimeout(this.clickResetTimeout);\n this.clickResetTimeout = null;\n }\n }\n\n click(event) {\n const clickedItem = event.currentTarget;\n const link = clickedItem.querySelector('a[data-nav-link]');\n\n if (!link) return;\n\n // Get the category name from data attribute\n const categoryName = clickedItem.dataset.categoryName;\n\n // Check if we're on a page with category sections (index page)\n const hasCategories = document.querySelector('.team-site-category') !== null;\n\n if (!hasCategories) {\n // We're not on the index page, allow normal navigation\n // Close the mobile drawer before navigating\n if (document.body.classList.contains('main-menu-drawer-is-active')) {\n document.body.classList.remove('main-menu-drawer-is-active');\n }\n // Don't prevent default - let the link work normally\n return;\n }\n\n // We're on the index page, handle as scroll navigation\n event.preventDefault();\n\n // Set flag and store clicked category to prevent scroll handler from overriding user's choice\n this.userClickedRecently = true;\n this.lastClickedCategory = categoryName;\n\n // Reset flag after 1.5 seconds (enough time for smooth scroll to complete)\n if (this.clickResetTimeout) {\n clearTimeout(this.clickResetTimeout);\n }\n this.clickResetTimeout = setTimeout(() => {\n this.userClickedRecently = false;\n this.lastClickedCategory = null;\n }, 1500);\n\n // Remove active class from all navigation items\n this.clearActiveStates();\n\n // Add active class to clicked item\n clickedItem.classList.add('active');\n\n if (categoryName) {\n // Scroll to the corresponding category section\n this.scrollToCategory(categoryName);\n }\n }\n\n showNav() {\n // Show hidden navigation items when \"More\" is clicked\n const hiddenItems = this.element.querySelectorAll('.ae-list-item.hidden');\n const moreButton = this.element.querySelector('.show-more-categories');\n const lessButton = this.element.querySelector('.show-less-categories');\n\n hiddenItems.forEach(item => {\n item.classList.remove('hidden');\n item.classList.add('priority');\n });\n\n if (moreButton) moreButton.style.display = 'none';\n if (lessButton) lessButton.style.display = 'block';\n }\n\n hideNav() {\n // Hide navigation items when \"Show Less\" is clicked\n const priorityItems = this.element.querySelectorAll('.ae-list-item.priority');\n const moreButton = this.element.querySelector('.show-more-categories');\n const lessButton = this.element.querySelector('.show-less-categories');\n\n // Keep only the first few items visible (use dynamic displayLimit)\n const limit = this.displayLimit || 4;\n priorityItems.forEach((item, index) => {\n if (index >= limit && !item.classList.contains('show-more-categories')) {\n item.classList.remove('priority');\n item.classList.add('hidden');\n }\n });\n\n if (moreButton) moreButton.style.display = 'block';\n if (lessButton) lessButton.style.display = 'none';\n }\n\n handleDisplayLimitChange(event) {\n // Handle display limit changes from responsive controller\n const newLimit = event.detail && event.detail.limit;\n if (newLimit && newLimit !== this.displayLimit) {\n this.displayLimit = newLimit;\n }\n }\n\n handleScroll() {\n // Throttle scroll events for performance\n if (this.scrollTimeout) return;\n\n this.scrollTimeout = setTimeout(() => {\n this.updateActiveState();\n this.scrollTimeout = null;\n }, 50); // Reduced from 100ms for smoother response on high-refresh displays\n }\n\n updateActiveState() {\n // Skip update if user clicked recently to prevent race condition\n if (this.userClickedRecently) {\n // If we have a last clicked category, ensure it stays active\n if (this.lastClickedCategory) {\n this.setActiveNavItem(this.lastClickedCategory);\n }\n return;\n }\n\n // Find which category section is currently in view\n const categories = document.querySelectorAll('.team-site-category');\n let activeCategory = null;\n\n categories.forEach(category => {\n const rect = category.getBoundingClientRect();\n const viewportHeight = window.innerHeight;\n\n // Check if category is in the upper half of viewport\n if (rect.top >= 0 && rect.top <= viewportHeight / 2) {\n activeCategory = category;\n }\n });\n\n if (activeCategory) {\n const categoryId = activeCategory.id;\n this.setActiveNavItem(categoryId);\n }\n }\n\n setActiveNavItem(categoryId) {\n // Remove active class from all items\n this.clearActiveStates();\n\n // Find and activate the corresponding navigation item\n const navItems = this.element.querySelectorAll('.ae-list-item[data-category-name]');\n\n navItems.forEach(item => {\n const categoryName = item.dataset.categoryName;\n\n // Match the category ID with the navigation item\n // Handle special case for \"others\" which maps to \"uncategorized\" section\n const matchesCategory = categoryId === categoryName ||\n categoryId === `${categoryName}-section` ||\n (categoryName === 'others' && categoryId === 'uncategorized');\n\n if (matchesCategory) {\n item.classList.add('active');\n }\n });\n }\n\n clearActiveStates() {\n const navItems = this.element.querySelectorAll('.ae-list-item');\n navItems.forEach(item => item.classList.remove('active'));\n }\n\n scrollToCategory(categoryName) {\n // Find the category section to scroll to\n // Handle special case for \"others\" which maps to \"uncategorized\" section\n let targetId = categoryName;\n if (categoryName === 'others') {\n targetId = 'uncategorized';\n }\n\n const targetSection = document.getElementById(targetId) ||\n document.getElementById(`${targetId}-section`);\n\n if (targetSection) {\n // Smooth scroll to the category section\n targetSection.scrollIntoView({\n behavior: 'smooth',\n block: 'start',\n });\n }\n }\n\n handleCategoryActive(event) {\n // Handle custom events from scroll controller\n const { categoryId } = event.detail;\n\n if (categoryId) {\n this.setActiveNavItem(categoryId);\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\n/**\n * Responsive Header Controller\n *\n * Monitors viewport width and dynamically adjusts category visibility\n * to ensure cart and hamburger buttons remain accessible on iPad/tablet devices.\n *\n * Uses ResizeObserver for efficient resize detection with window resize fallback.\n */\nexport default class extends Controller {\n connect() {\n // Bind methods for proper cleanup\n this.boundHandleResize = this.handleResize.bind(this);\n\n // Use ResizeObserver for efficient resize detection\n if (typeof ResizeObserver !== 'undefined') {\n this.resizeObserver = new ResizeObserver(this.boundHandleResize);\n this.resizeObserver.observe(this.element);\n } else {\n // Fallback for older browsers\n window.addEventListener('resize', this.boundHandleResize);\n }\n\n // Initial check\n this.handleResize();\n }\n\n disconnect() {\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n this.resizeObserver = null;\n } else {\n window.removeEventListener('resize', this.boundHandleResize);\n }\n\n // Remove body class on disconnect\n document.body.classList.remove('ae-tablet-viewport');\n }\n\n handleResize() {\n const viewportWidth = window.innerWidth;\n\n // Tablet range: 768px - 1024px (iPad portrait to iPad landscape)\n const isTabletRange = viewportWidth >= 768 && viewportWidth <= 1024;\n\n // Calculate available space for categories\n const availableWidth = this.calculateAvailableWidth();\n const categoryLimit = this.calculateCategoryLimit(availableWidth);\n\n // Update body class for CSS targeting\n this.updateBodyClass(isTabletRange);\n\n // Update hamburger menu visibility\n this.updateHamburgerVisibility(isTabletRange, categoryLimit);\n\n // Dispatch event to notify t-header-nav controller of new limit\n this.dispatchDisplayLimitChange(categoryLimit);\n\n // Apply display limit directly to category items\n this.applyDisplayLimit(categoryLimit);\n }\n\n calculateAvailableWidth() {\n const headerWidth = this.element.offsetWidth;\n\n // Reserve space for essential elements\n const logoWidth = this.getLogoWidth();\n const cartWidth = this.getCartWidth();\n const hamburgerWidth = 50; // hamburger button approximate width\n const padding = 60; // total horizontal padding\n\n return headerWidth - logoWidth - cartWidth - hamburgerWidth - padding;\n }\n\n getLogoWidth() {\n const logoContainer = this.element.querySelector('.team-site-logos');\n return logoContainer ? logoContainer.offsetWidth : 0;\n }\n\n getCartWidth() {\n const cartContainer = this.element.querySelector('#cart-counter-container');\n return cartContainer ? cartContainer.offsetWidth : 100; // default estimate\n }\n\n calculateCategoryLimit(availableWidth) {\n // Average category button width (estimated based on typical category names)\n const averageCategoryWidth = 100;\n const moreButtonWidth = 60;\n\n // Calculate how many categories fit\n const maxCategories = Math.floor((availableWidth - moreButtonWidth) / averageCategoryWidth);\n\n // Minimum 2 categories, maximum 6\n return Math.max(2, Math.min(maxCategories, 6));\n }\n\n updateBodyClass(isTabletRange) {\n if (isTabletRange) {\n document.body.classList.add('ae-tablet-viewport');\n } else {\n document.body.classList.remove('ae-tablet-viewport');\n }\n }\n\n updateHamburgerVisibility(isTabletRange, _categoryLimit) {\n const hamburgerContainer = this.element.querySelector('.ae-mobile-only');\n const desktopNav = this.element.querySelector('.team-site-nav.ae-desktop-only');\n\n if (isTabletRange) {\n // On tablet, always show hamburger alongside categories\n if (hamburgerContainer) {\n hamburgerContainer.classList.add('ae-tablet-show');\n }\n // Do NOT hide desktop nav - show both hamburger and categories\n if (desktopNav) {\n desktopNav.classList.remove('ae-tablet-hide');\n }\n } else {\n // Restore normal visibility for non-tablet viewports\n if (hamburgerContainer) {\n hamburgerContainer.classList.remove('ae-tablet-show');\n }\n if (desktopNav) {\n desktopNav.classList.remove('ae-tablet-hide');\n }\n }\n }\n\n dispatchDisplayLimitChange(limit) {\n // Dispatch custom event to notify t-header-nav controller\n // Using native CustomEvent (Stimulus 1.1.0 doesn't have dispatch())\n const event = new CustomEvent('category:displayLimitChanged', {\n detail: { limit: limit },\n bubbles: true,\n });\n this.element.dispatchEvent(event);\n }\n\n applyDisplayLimit(limit) {\n const navContainer = this.element.querySelector('#desktop-nav-items-container');\n if (!navContainer) return;\n\n // Update data attribute for reference\n navContainer.dataset.categoryLimit = limit;\n\n // Get all category items (excluding More/Less buttons)\n const categoryItems = navContainer.querySelectorAll('.ae-list-item[data-category-name]');\n const moreButton = navContainer.querySelector('.show-more-categories');\n const lessButton = navContainer.querySelector('.show-less-categories');\n\n // Apply visibility based on limit\n categoryItems.forEach(function(item, index) {\n if (index < limit) {\n item.classList.remove('hidden');\n item.classList.add('priority');\n } else {\n item.classList.add('hidden');\n item.classList.remove('priority');\n }\n });\n\n // Show/hide More button based on whether there are hidden items\n const hasHiddenItems = categoryItems.length > limit;\n if (moreButton) {\n moreButton.style.display = hasHiddenItems ? 'block' : 'none';\n }\n if (lessButton) {\n lessButton.style.display = 'none';\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n connect() {\n this.highlightActiveCategory();\n }\n\n onScroll() {\n this.highlightActiveCategory();\n }\n\n highlightActiveCategory() {\n // Implementation for scroll-based navigation highlighting\n const categoryElement = this.element;\n const rect = categoryElement.getBoundingClientRect();\n const viewportHeight = window.innerHeight || document.documentElement.clientHeight;\n\n // Check if category is in viewport (top of category is in upper half of viewport)\n const isInViewport = rect.top >= 0 && rect.top <= viewportHeight / 2;\n\n if (isInViewport) {\n // Add active class to this category\n categoryElement.classList.add('active-category');\n\n // Update navigation highlighting\n this.updateNavigationHighlight();\n } else {\n categoryElement.classList.remove('active-category');\n }\n }\n\n updateNavigationHighlight() {\n // Find the navigation controller and notify it of the active category\n const categoryId = this.element.id;\n const navigationElement = document.querySelector('[data-controller*=\"t-header-nav\"]');\n\n if (navigationElement && categoryId) {\n // Dispatch a custom event to notify the navigation controller\n const event = new CustomEvent('category:active', {\n detail: { categoryId: categoryId },\n bubbles: true,\n });\n\n navigationElement.dispatchEvent(event);\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n connect() {\n // Remove the inline display: none style to show the button container\n this.element.style.display = '';\n\n // Initialize loading state (for size variants AJAX)\n this.isSizeVariantsLoading = false;\n }\n\n submitForm(event) {\n event.preventDefault();\n\n // Check if button is disabled\n if (event.currentTarget.classList.contains('ae-disabled')) {\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('This sale is not currently open.');\n }\n return;\n }\n\n // Prevent submission during size variants loading\n if (this.isSizeVariantsLoading) {\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Please wait while sizes are loading...');\n }\n return;\n }\n\n // First try to find the parent form (since button is inside the form)\n let form = this.element.closest('form');\n\n // If not found, fall back to getElementById (for backward compatibility)\n if (!form) {\n const formId = this.data.get('form-id');\n form = document.getElementById(formId);\n }\n\n if (!form) {\n // Show error message using App.showErrorFlash if available\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Unable to add item to cart. Please refresh the page and try again.');\n } else {\n // Fallback error display if App.showErrorFlash is not available\n const errorDiv = document.createElement('div');\n errorDiv.className = 'ae-alert ae-alert-danger ae-alert-fixed';\n errorDiv.style.position = 'fixed';\n errorDiv.style.top = '20px';\n errorDiv.style.right = '20px';\n errorDiv.style.zIndex = '9999';\n\n const p = document.createElement('p');\n const icon = document.createElement('i');\n icon.className = 'fa fa-exclamation-circle fa-fw';\n p.appendChild(icon);\n p.appendChild(document.createTextNode(' Unable to add item to cart. Please refresh the page and try again.'));\n\n const closeButton = document.createElement('span');\n closeButton.className = 'ae-alert-action ae-alert-close';\n closeButton.title = 'Close';\n closeButton.textContent = '\u00D7';\n closeButton.onclick = function() { errorDiv.remove(); };\n\n errorDiv.appendChild(p);\n errorDiv.appendChild(closeButton);\n document.body.appendChild(errorDiv);\n\n setTimeout(() => {\n if (errorDiv.parentElement) {\n errorDiv.remove();\n }\n }, 5000);\n }\n return;\n }\n\n // Find the submit event on the form and trigger it\n // This will trigger the validateAndSubmit action on the form's controller\n const submitEvent = new Event('submit', { bubbles: true, cancelable: true });\n form.dispatchEvent(submitEvent);\n }\n\n // Called by form controller during size variants loading\n setLoadingState(isLoading) {\n this.isSizeVariantsLoading = isLoading;\n\n // Find the button within this controller's element\n const button = this.element.querySelector('[data-action*=\"submitForm\"]');\n if (!button) {\n return;\n }\n\n if (isLoading) {\n // Disable button during loading\n button.classList.add('ae-disabled');\n } else {\n // Re-enable button after loading\n button.classList.remove('ae-disabled');\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n connect() {\n // Remove the inline display: none style to show the button container\n this.element.style.display = '';\n\n // Initialize loading state (for size variants AJAX)\n this.isSizeVariantsLoading = false;\n }\n\n submitForm(event) {\n event.preventDefault();\n\n // Check if button is disabled\n if (event.currentTarget.classList.contains('ae-disabled')) {\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('This sale is not currently open.');\n }\n return;\n }\n\n // Prevent submission during size variants loading\n if (this.isSizeVariantsLoading) {\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Please wait while sizes are loading...');\n }\n return;\n }\n\n // First try to find the parent form (since button is inside the form)\n let form = this.element.closest('form');\n\n // If not found, fall back to getElementById (for backward compatibility)\n if (!form) {\n const formId = this.data.get('form-id');\n form = document.getElementById(formId);\n }\n\n if (!form) {\n // Show error message using App.showErrorFlash if available\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Unable to add item to cart. Please refresh the page and try again.');\n } else {\n // Fallback error display if App.showErrorFlash is not available\n const errorDiv = document.createElement('div');\n errorDiv.className = 'ae-alert ae-alert-danger ae-alert-fixed';\n errorDiv.style.position = 'fixed';\n errorDiv.style.top = '20px';\n errorDiv.style.right = '20px';\n errorDiv.style.zIndex = '9999';\n\n const p = document.createElement('p');\n const icon = document.createElement('i');\n icon.className = 'fa fa-exclamation-circle fa-fw';\n p.appendChild(icon);\n p.appendChild(document.createTextNode(' Unable to add item to cart. Please refresh the page and try again.'));\n\n const closeButton = document.createElement('span');\n closeButton.className = 'ae-alert-action ae-alert-close';\n closeButton.title = 'Close';\n closeButton.textContent = '\u00D7';\n closeButton.onclick = function() { errorDiv.remove(); };\n\n errorDiv.appendChild(p);\n errorDiv.appendChild(closeButton);\n document.body.appendChild(errorDiv);\n\n setTimeout(() => {\n if (errorDiv.parentElement) {\n errorDiv.remove();\n }\n }, 5000);\n }\n return;\n }\n\n // Find the submit event on the form and trigger it\n // This will trigger the validateAndSubmit action on the form's controller\n const submitEvent = new Event('submit', { bubbles: true, cancelable: true });\n form.dispatchEvent(submitEvent);\n }\n\n // Called by form controller during size variants loading\n setLoadingState(isLoading) {\n this.isSizeVariantsLoading = isLoading;\n\n // Find the button within this controller's element\n const button = this.element.querySelector('[data-action*=\"submitForm\"]');\n if (!button) {\n return;\n }\n\n if (isLoading) {\n // Disable button during loading\n button.classList.add('ae-disabled');\n } else {\n // Re-enable button after loading\n button.classList.remove('ae-disabled');\n }\n }\n}\n", "import { Controller } from '../stimulus';\nimport ImageZoomModalController from './image_zoom_modal_controller';\n\n\nexport default class extends Controller {\n static targets = ['colorInput', 'image', 'colorSelector', 'colorName'];\n\n connect() {\n // Initialize with current color variant if available\n this.updateSelectedState();\n }\n\n showSizeChart(event) {\n event.preventDefault();\n const url = event.currentTarget.dataset.sizeChartUrl;\n if (url) {\n ImageZoomModalController.open(url, 'Size Chart');\n }\n }\n\n selectColor(event) {\n event.preventDefault();\n\n const colorVariantId = event.currentTarget.dataset.colorVariantId;\n const colorName = event.currentTarget.dataset.colorName;\n const imageUrl = event.currentTarget.dataset.imageUrl;\n const orientationPhotosData = event.currentTarget.dataset.orientationPhotos;\n\n // Update hidden input\n if (this.hasColorInputTarget) {\n this.colorInputTarget.value = colorVariantId;\n }\n\n // Update color name text\n if (this.hasColorNameTarget && colorName) {\n this.colorNameTargets.forEach(target => {\n target.textContent = colorName;\n });\n }\n\n // Update main image\n if (this.hasImageTarget && imageUrl) {\n this.imageTarget.src = imageUrl;\n\n // Also update original-url for zoom modal\n const originalUrl = event.currentTarget.dataset.originalUrl;\n if (originalUrl) {\n this.imageTarget.dataset.originalUrl = originalUrl;\n }\n }\n\n // Update selected state for color selectors\n this.updateSelectedState();\n\n // Update orientation photos for the selected color variant\n this.updateOrientationPhotos(orientationPhotosData);\n\n // Trigger color changed event for other controllers\n const colorChangedEvent = new CustomEvent('t-product-details:colorChanged', {\n bubbles: true,\n detail: { colorVariantId: colorVariantId },\n });\n this.element.dispatchEvent(colorChangedEvent);\n\n // Reset gallery to first orientation photo when color changes\n this.resetGallerySelection();\n\n // Update URL without reload to maintain state\n if (window.history && window.history.replaceState) {\n const url = new URL(window.location);\n url.searchParams.set('color_variant_id', colorVariantId);\n window.history.replaceState({}, '', url);\n }\n }\n\n updateSelectedState() {\n // Get current color variant ID\n const currentVariantId = this.hasColorInputTarget ?\n this.colorInputTarget.value :\n new URLSearchParams(window.location.search).get('color_variant_id');\n\n // Update selected class on color selectors\n this.colorSelectorTargets.forEach(selector => {\n const selectorVariantId = selector.dataset.colorVariantId;\n const parentLi = selector.closest('li');\n if (selectorVariantId === currentVariantId) {\n selector.classList.add('ae-selected');\n if (parentLi) parentLi.classList.add('ae-selected');\n } else {\n selector.classList.remove('ae-selected');\n if (parentLi) parentLi.classList.remove('ae-selected');\n }\n });\n }\n\n updateOrientationPhotos(orientationPhotosData) {\n if (!orientationPhotosData) return;\n\n try {\n // Decode HTML-escaped JSON data\n const decodedData = this.decodeHtmlEntities(orientationPhotosData);\n const orientationPhotos = JSON.parse(decodedData);\n\n // The orientation photos are within the gallery controller scope, not the product details scope\n // So we need to search within the gallery element specifically\n const galleryElement = this.element.querySelector('[data-controller~=\"t-product-details-gallery\"]');\n const orientationContainer = galleryElement ? galleryElement.querySelector('.orientation-photos ul') : null;\n\n if (!orientationContainer) return;\n\n // Clear existing orientation photos\n orientationContainer.innerHTML = '';\n\n // Add new orientation photos\n orientationPhotos.forEach((photo) => {\n const li = document.createElement('li');\n li.className = 'ae-image-gallery-item';\n li.setAttribute('data-index', photo.index);\n li.setAttribute('data-large-url', photo.large_url);\n li.setAttribute('data-original-url', photo.original_url);\n li.setAttribute('data-target', 't-product-details-gallery.orientationPhoto');\n li.setAttribute('data-action', 'click->t-product-details-gallery#selectOrientationPhoto');\n\n const img = document.createElement('img');\n img.src = photo.thumb_url;\n img.alt = photo.alt;\n img.className = 'ae-image-gallery-image';\n // Lazy load all but the first orientation photo\n if (photo.index > 0) {\n img.loading = 'lazy';\n }\n\n li.appendChild(img);\n orientationContainer.appendChild(li);\n });\n\n // Notify gallery controller that orientation photos have been updated\n if (galleryElement) {\n const updateEvent = new CustomEvent('gallery:orientationsUpdated', {\n bubbles: true,\n detail: { photos: orientationPhotos },\n });\n galleryElement.dispatchEvent(updateEvent);\n }\n } catch {\n // Silently fail in production, log in development\n // Silent error handling for production\n // Failed to parse orientation photos data - using defaults\n }\n }\n\n resetGallerySelection() {\n // Find the gallery controller and reset it to first orientation photo\n const galleryElement = document.querySelector('[data-controller~=\"t-product-details-gallery\"]');\n if (galleryElement) {\n // Dispatch a custom event to reset the gallery\n const resetEvent = new CustomEvent('gallery:reset', {\n bubbles: true,\n detail: { resetToFirst: true },\n });\n galleryElement.dispatchEvent(resetEvent);\n }\n }\n\n decodeHtmlEntities(text) {\n // Create a DOM parser to safely decode HTML entities\n const parser = new DOMParser();\n const doc = parser.parseFromString(text, 'text/html');\n return doc.documentElement.textContent;\n }\n}\n", "import Select2BaseController from './select2_base_controller';\n\nexport default class extends Select2BaseController {\n connect() {\n super.connect();\n\n // Set up additional Select2 event handlers\n if (this.isSelect2Available() && this.isEnhanced()) {\n this.setupAdditionalSelect2Events();\n }\n\n // Set up a backup listener directly on the element for price updates\n this.element.addEventListener('change', () => {\n setTimeout(() => this.updatePriceDirectly(), 10);\n });\n }\n\n disconnect() {\n // Call parent disconnect for Select2 cleanup\n super.disconnect();\n }\n\n // Override to provide Select2 configuration\n getEnhancementOptions() {\n return {\n minimumResultsForSearch: -1,\n width: '100%',\n };\n }\n\n // Set up additional Select2-specific events\n setupAdditionalSelect2Events() {\n const enhancer = this.getEnhancer();\n const enhancedElement = enhancer(this.selectElement);\n\n // Clear error message when opening Select2\n enhancedElement.on('select2:open', () => {\n const formField = this.selectElement.closest('.ae-form-field');\n\n if (formField) {\n formField.classList.remove('ae-input-error');\n const errorMsg = formField.querySelector('.ae-error-msg');\n if (errorMsg) {\n errorMsg.style.display = 'none';\n }\n }\n });\n\n // Handle price changes when closing Select2\n enhancedElement.on('select2:close', (event) => {\n const selectedOption = event.target.selectedOptions[0];\n if (selectedOption) {\n const price = selectedOption.dataset.price;\n\n event.target.dataset.previous = event.target.dataset.present;\n event.target.dataset.present = price;\n\n // Dispatch change event for price update\n const changeEvent = new Event('change', { bubbles: true });\n event.target.dispatchEvent(changeEvent);\n }\n });\n }\n\n // Override to handle selection changes (called by base controller)\n onSelectChange(_event) {\n // Update price directly when selection changes\n this.updatePriceDirectly();\n\n // Dispatch a change event that bubbles up to trigger the Stimulus action\n const changeEvent = new Event('change', { bubbles: true, cancelable: true });\n this.element.dispatchEvent(changeEvent);\n }\n\n // Direct price update method for reliability with Select2\n updatePriceDirectly() {\n const productAttributesElement = this.element.closest('[data-controller*=\"t-product-details-product-attributes\"]');\n if (!productAttributesElement) return;\n\n // Get the selected option price data\n const selectedOption = this.element.selectedOptions[0];\n if (!selectedOption) return;\n\n // Calculate total price including custom field prices\n const basePriceInCents = Math.round(parseFloat(productAttributesElement.dataset.price || '0') * 100);\n const customFieldPriceInCents = Math.round(parseFloat(selectedOption.dataset.price || '0') * 100);\n\n // Find the size selector and include its price if selected\n const sizeSelect = productAttributesElement.querySelector('[data-target*=\"sizeSelect\"]');\n let sizePriceInCents = 0;\n if (sizeSelect && sizeSelect.selectedOptions[0]) {\n sizePriceInCents = Math.round(parseFloat(sizeSelect.selectedOptions[0].dataset.price || '0') * 100);\n }\n\n // Calculate all custom field prices\n let allCustomFieldPricesInCents = 0;\n const allCustomFields = productAttributesElement.querySelectorAll('[data-controller*=\"t-product-details-custom-field\"]');\n allCustomFields.forEach(field => {\n if (field !== this.element && field.selectedOptions[0]) {\n allCustomFieldPricesInCents += Math.round(parseFloat(field.selectedOptions[0].dataset.price || '0') * 100);\n }\n });\n\n const totalPriceInCents = basePriceInCents + sizePriceInCents + customFieldPriceInCents + allCustomFieldPricesInCents;\n const totalPrice = totalPriceInCents / 100;\n const formattedPrice = `$${totalPrice.toFixed(2)}`;\n\n // Update all price target elements\n const priceTargets = document.querySelectorAll('[data-target*=\"price\"]');\n priceTargets.forEach(priceElement => {\n priceElement.textContent = formattedPrice;\n });\n\n // Also update fallback price elements for reliability\n const fallbackPriceElements = document.querySelectorAll('.product-price .display-price-desktop, .display-price-desktop');\n fallbackPriceElements.forEach(priceElement => {\n priceElement.textContent = formattedPrice;\n });\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['currentPhoto', 'orientationPhoto'];\n\n connect() {\n // Initialize with first orientation photo selected\n this.updateSelectedOrientationPhoto(0);\n\n // Bind event handlers for cleanup\n this.boundHandleGalleryReset = this.handleGalleryReset.bind(this);\n this.boundHandleOrientationsUpdated = this.handleOrientationsUpdated.bind(this);\n\n // Listen for reset events from color variant changes\n this.element.addEventListener('gallery:reset', this.boundHandleGalleryReset);\n\n // Listen for orientation photos updates\n this.element.addEventListener('gallery:orientationsUpdated', this.boundHandleOrientationsUpdated);\n }\n\n disconnect() {\n // Clean up event listeners\n if (this.boundHandleGalleryReset) {\n this.element.removeEventListener('gallery:reset', this.boundHandleGalleryReset);\n }\n if (this.boundHandleOrientationsUpdated) {\n this.element.removeEventListener('gallery:orientationsUpdated', this.boundHandleOrientationsUpdated);\n }\n }\n\n selectOrientationPhoto(event) {\n event.preventDefault();\n\n const clickedPhoto = event.currentTarget;\n const largeUrl = clickedPhoto.dataset.largeUrl;\n const originalUrl = clickedPhoto.dataset.originalUrl;\n const index = parseInt(clickedPhoto.dataset.index);\n\n if (!largeUrl) {\n // Development warning - should not happen in production\n // No large URL found for orientation photo\n return;\n }\n\n // Update main image with both display and original URLs\n this.updateMainImage(largeUrl, originalUrl);\n\n // Update selected state for orientation photos\n this.updateSelectedOrientationPhoto(index);\n }\n\n updateMainImage(imageUrl, originalUrl) {\n if (this.hasCurrentPhotoTarget) {\n const imgElement = this.currentPhotoTarget.querySelector('img');\n if (imgElement) {\n imgElement.src = imageUrl;\n\n // Update original-url for zoom modal (high-res image)\n if (originalUrl) {\n imgElement.dataset.originalUrl = originalUrl;\n }\n }\n }\n }\n\n updateSelectedOrientationPhoto(selectedIndex) {\n // Use dynamic targets if available (after orientation update), fallback to Stimulus targets\n const targets = this._dynamicOrientationTargets || this.orientationPhotoTargets;\n\n targets.forEach((photo, index) => {\n const parentLi = photo.closest('li');\n\n if (index === selectedIndex) {\n photo.classList.add('ae-selected');\n if (parentLi) parentLi.classList.add('ae-selected');\n } else {\n photo.classList.remove('ae-selected');\n if (parentLi) parentLi.classList.remove('ae-selected');\n }\n });\n }\n\n handleGalleryReset() {\n // Reset to first orientation photo when color variant changes\n this.updateSelectedOrientationPhoto(0);\n\n // Don't update the main image - let the color variant image remain\n // The orientation photo selection is reset but the main image shows the color variant\n }\n\n handleOrientationsUpdated() {\n // Refresh targets manually by re-querying them\n // In Stimulus 1.1.0, we need to manually refresh after DOM changes\n // Try multiple selectors to ensure we find the targets\n const selectorOptions = [\n '[data-target*=\"orientationPhoto\"]',\n '[data-target=\"t-product-details-gallery.orientationPhoto\"]',\n '.orientation-photos [data-target*=\"orientationPhoto\"]',\n '.ae-image-gallery-item[data-target*=\"orientationPhoto\"]',\n ];\n\n let newTargets = [];\n for (const selector of selectorOptions) {\n newTargets = Array.from(this.element.querySelectorAll(selector));\n if (newTargets.length > 0) break;\n }\n\n // CRITICAL: In Stimulus 1.1.0, we cannot directly modify the targets array\n // Instead, we'll work around this by storing our own reference\n this._dynamicOrientationTargets = newTargets;\n\n // Initialize with first orientation photo selected after photos are updated\n setTimeout(() => {\n this.updateSelectedOrientationPhoto(0);\n }, 0);\n }\n\n // Method to be called when color variant changes\n resetForNewColorVariant() {\n // Reset to first orientation photo when color changes\n this.updateSelectedOrientationPhoto(0);\n }\n}\n\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['price', 'sizeSelect', 'form', 'submitButton', 'errors', 'customField'];\n\n\n connect() {\n // Store price in cents to avoid floating-point precision issues\n // Enhanced data attribute reading for maximum Stimulus 1.1.0 compatibility\n const priceValue = this.element.dataset.price ||\n this.element.getAttribute('data-price') ||\n this.data.get('price') ||\n '0';\n\n this.basePriceInCents = Math.round(parseFloat(priceValue) * 100);\n\n this.updatePrice();\n\n // Initialize submission flag\n this.isSubmitting = false;\n\n // Initialize loading state flag for size variants AJAX\n this.sizeVariantsLoading = false;\n\n // Get CSRF token for AJAX requests\n const csrfTokenElement = document.querySelector('meta[name=\"csrf-token\"]');\n this.csrfToken = csrfTokenElement ? csrfTokenElement.content : '';\n\n // Bind the event handler so we can remove it later\n this.boundHandleColorChange = this.handleColorChange.bind(this);\n\n // Listen for color changes from parent controller\n // Use document listener to catch events bubbled from parent elements\n document.addEventListener('t-product-details:colorChanged', this.boundHandleColorChange);\n\n }\n\n disconnect() {\n // Remove the event listener using the bound function reference\n if (this.boundHandleColorChange) {\n document.removeEventListener('t-product-details:colorChanged', this.boundHandleColorChange);\n }\n }\n\n updatePrice() {\n let totalPriceInCents = this.basePriceInCents;\n\n // Add size variant price - defensive approach for Stimulus 1.1.0\n if (this.hasSizeSelectTarget) {\n const selectedOption = this.sizeSelectTarget.selectedOptions[0];\n if (selectedOption) {\n const additionalPriceInCents = Math.round(parseFloat(selectedOption.dataset.price || '0') * 100);\n totalPriceInCents += additionalPriceInCents;\n }\n }\n\n // Add custom field prices - robust approach with fallback DOM queries\n let customFields = this.customFieldTargets || [];\n\n // Fallback if no targets found - direct DOM query within controller scope\n if (customFields.length === 0) {\n const controllerElement = this.element;\n customFields = Array.from(\n controllerElement.querySelectorAll('[data-target*=\"customField\"]'),\n );\n }\n\n if (customFields.length > 0) {\n customFields.forEach(field => {\n const priceInCents = this.getCustomFieldPriceInCents(field);\n totalPriceInCents += priceInCents;\n });\n }\n\n // Convert cents to dollars for display\n const totalPrice = totalPriceInCents / 100;\n\n // Update all price displays with proper formatting - defensive approach for Stimulus 1.1.0\n if (this.priceTargets && this.priceTargets.length > 0) {\n this.priceTargets.forEach(priceElement => {\n priceElement.textContent = this.formatCurrency(totalPrice);\n });\n }\n\n // FALLBACK: Also update any price elements that might not be properly targeted\n // This handles the case where the price element selector changes\n const fallbackPriceElements = document.querySelectorAll('.product-price .display-price-desktop, .display-price-desktop');\n fallbackPriceElements.forEach(priceElement => {\n priceElement.textContent = this.formatCurrency(totalPrice);\n });\n }\n\n getCustomFieldPriceInCents(field) {\n const fieldType = field.dataset.fieldType;\n let priceInCents = 0;\n\n switch (fieldType) {\n case 'dropdown_option': {\n const select = field.querySelector('select');\n if (select && select.selectedOptions[0] && select.value) {\n priceInCents = Math.round(parseFloat(select.selectedOptions[0].dataset.price || '0') * 100);\n }\n break;\n }\n case 'number':\n case 'short_text': {\n const input = field.querySelector('input');\n if (input && input.value && input.value.trim() !== '') {\n // Get the field's base price (from custom_field.price in the template)\n priceInCents = Math.round(parseFloat(field.dataset.price || '0') * 100);\n }\n break;\n }\n }\n\n return priceInCents;\n }\n\n formatCurrency(amount) {\n // Use toFixed(2) to ensure exactly 2 decimal places\n return `$${amount.toFixed(2)}`;\n }\n\n validateAndSubmit(event) {\n // Prevent submission during size variants loading\n if (this.sizeVariantsLoading) {\n event.preventDefault();\n this.showError('Please wait while sizes are loading...');\n return;\n }\n\n // Prevent double submission\n if (this.isSubmitting) {\n event.preventDefault();\n return;\n }\n\n // Clear previous errors\n this.clearErrors();\n\n // Validate size selection\n if (this.hasSizeSelectTarget && !this.sizeSelectTarget.value) {\n event.preventDefault();\n this.showSizeError();\n return;\n }\n\n // Validate required custom fields - robust approach with fallback DOM queries\n let hasErrors = false;\n let customFields = this.customFieldTargets || [];\n\n // Fallback if no targets found - direct DOM query within controller scope\n if (customFields.length === 0) {\n const controllerElement = this.element;\n customFields = Array.from(\n controllerElement.querySelectorAll('[data-target*=\"customField\"]'),\n );\n }\n\n customFields.forEach(field => {\n if (field.dataset.required === 'true') {\n const input = field.querySelector('input, select');\n if (!input || !input.value) {\n const fieldName = field.dataset.fieldName || 'This field';\n this.showError(`${fieldName} is required`);\n hasErrors = true;\n }\n }\n });\n\n if (hasErrors) {\n event.preventDefault();\n return;\n }\n\n // Set submitting flag\n this.isSubmitting = true;\n\n // Disable submit button to prevent double submission\n if (this.hasSubmitButtonTarget) {\n this.submitButtonTarget.disabled = true;\n this.submitButtonTarget.textContent = 'Adding to Cart...';\n }\n\n // Reset submitting flag after a delay (in case of errors)\n setTimeout(() => {\n this.isSubmitting = false;\n if (this.hasSubmitButtonTarget) {\n this.submitButtonTarget.disabled = false;\n this.submitButtonTarget.textContent = 'ADD TO MY CART';\n }\n }, 5000);\n\n // Let Rails UJS handle the form submission (don't call preventDefault if validation passes)\n }\n\n clearErrors() {\n // Clear general errors container\n if (this.hasErrorsTarget) {\n // Remove all child elements instead of using innerHTML\n while (this.errorsTarget.firstChild) {\n this.errorsTarget.removeChild(this.errorsTarget.firstChild);\n }\n this.errorsTarget.classList.add('ae-u-hidden');\n }\n\n // Clear size field error\n if (this.hasSizeSelectTarget) {\n const formField = this.sizeSelectTarget.closest('.ae-form-field');\n if (formField) {\n formField.classList.remove('ae-input-error');\n const errorMsg = formField.querySelector('.ae-error-msg');\n if (errorMsg) {\n errorMsg.style.display = 'none';\n }\n }\n }\n }\n\n showError(message) {\n if (this.hasErrorsTarget) {\n const errorDiv = document.createElement('div');\n errorDiv.className = 'ae-alert ae-alert-danger ae-u-margin-b-10';\n errorDiv.textContent = message;\n\n this.errorsTarget.appendChild(errorDiv);\n this.errorsTarget.classList.remove('ae-u-hidden');\n this.errorsTarget.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n }\n\n showSizeError() {\n // Show the inline error for the size field\n if (this.hasSizeSelectTarget) {\n const formField = this.sizeSelectTarget.closest('.ae-form-field');\n if (formField) {\n formField.classList.add('ae-input-error');\n const errorMsg = formField.querySelector('.ae-error-msg');\n if (errorMsg) {\n errorMsg.style.display = 'block';\n errorMsg.textContent = 'Please select a size';\n }\n }\n\n // Scroll to the size field\n this.sizeSelectTarget.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n }\n\n async handleColorChange(event) {\n const colorVariantId = event.detail.colorVariantId;\n\n\n if (!this.hasSizeSelectTarget) {\n return;\n }\n\n // Set loading state\n this.sizeVariantsLoading = true;\n\n // Disable both Add to Cart buttons and show loading state\n this.updateBothButtonsState(true);\n\n // Show loading indicator in size dropdown\n this.showLoadingIndicator();\n\n try {\n // Get sale and product slugs from data attributes\n const saleSlug = this.sizeSelectTarget.dataset.saleSlug;\n const productSlug = this.sizeSelectTarget.dataset.productSlug;\n\n if (!saleSlug || !productSlug) {\n throw new Error('Missing sale or product slug data attributes');\n }\n\n // Fetch size variants for the selected color\n const url = `/t/${saleSlug}/products/${productSlug}/color_variants/${colorVariantId}/size_variants`;\n\n const response = await fetch(url, {\n method: 'GET',\n headers: {\n 'Accept': 'application/json',\n 'X-CSRF-Token': this.csrfToken,\n },\n credentials: 'same-origin',\n });\n\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n const data = await response.json();\n\n // Rebuild size dropdown with new options\n this.rebuildSizeOptions(data.size_variants);\n\n // Clear size selection and update price\n this.sizeSelectTarget.value = '';\n this.updatePrice();\n } catch (error) {\n console.error('[t-product-details-product-attributes] Error loading sizes:', error);\n\n // Show error to user\n this.showError(`Failed to load sizes for selected color: ${error.message}`);\n\n // Keep existing size options but clear selection\n this.sizeSelectTarget.value = '';\n this.updatePrice();\n } finally {\n // Clear loading state\n this.sizeVariantsLoading = false;\n\n // Re-enable both Add to Cart buttons\n this.updateBothButtonsState(false);\n\n // Hide loading indicator\n this.hideLoadingIndicator();\n\n }\n }\n\n\n // Called when size selection changes\n sizeChanged() {\n this.updatePrice();\n }\n\n // Called when custom field changes\n customFieldChanged() {\n this.updatePrice();\n }\n\n // Update state of both Add to Cart buttons (inline and block)\n updateBothButtonsState(isLoading) {\n // Find both button controllers using Stimulus 1.1.0 API\n const inlineButton = document.querySelector('[data-controller*=\"t-product-details-add-to-cart-inline\"]');\n const blockButton = document.querySelector('[data-controller*=\"t-product-details-add-to-cart-block\"]');\n\n if (inlineButton) {\n const controller = this.application.getControllerForElementAndIdentifier(\n inlineButton,\n 't-product-details-add-to-cart-inline',\n );\n if (controller && typeof controller.setLoadingState === 'function') {\n controller.setLoadingState(isLoading);\n }\n }\n\n if (blockButton) {\n const controller = this.application.getControllerForElementAndIdentifier(\n blockButton,\n 't-product-details-add-to-cart-block',\n );\n if (controller && typeof controller.setLoadingState === 'function') {\n controller.setLoadingState(isLoading);\n }\n }\n }\n\n // Show loading indicator in size dropdown\n showLoadingIndicator() {\n if (!this.hasSizeSelectTarget) {\n return;\n }\n\n // Save current options for potential restore on error\n this.savedSizeOptions = this.sizeSelectTarget.innerHTML;\n\n // Replace with loading option\n this.sizeSelectTarget.innerHTML = '
Loading sizes... ';\n this.sizeSelectTarget.disabled = true;\n }\n\n // Hide loading indicator in size dropdown\n hideLoadingIndicator() {\n if (!this.hasSizeSelectTarget) {\n return;\n }\n\n this.sizeSelectTarget.disabled = false;\n }\n\n // Rebuild size dropdown with new options from AJAX response\n rebuildSizeOptions(sizeVariants) {\n if (!this.hasSizeSelectTarget) {\n return;\n }\n\n // Clear existing options\n this.sizeSelectTarget.innerHTML = '';\n\n // Add blank option\n const blankOption = document.createElement('option');\n blankOption.value = '';\n blankOption.textContent = 'Pick a Size';\n this.sizeSelectTarget.appendChild(blankOption);\n\n // Add options for each size variant\n sizeVariants.forEach(sizeVariant => {\n const option = document.createElement('option');\n option.value = sizeVariant.id;\n option.textContent = sizeVariant.display_name;\n option.dataset.price = sizeVariant.additional_price || 0;\n this.sizeSelectTarget.appendChild(option);\n });\n\n // Notify Select2 of DOM changes so it refreshes its UI\n if (window.$ && this.sizeSelectTarget.classList.contains('select2-hidden-accessible')) {\n $(this.sizeSelectTarget).trigger('change.select2');\n }\n }\n}\n", "import Select2BaseController from './select2_base_controller';\n\nexport default class extends Select2BaseController {\n connect() {\n super.connect();\n\n // Set up mutation observer for price tracking\n this.config = { attributes: true, subtree: false, childList: false };\n this.observer = new window.MutationObserver(this.mutationCallback.bind(this));\n this.observer.observe(this.element, this.config);\n\n // Set up additional Select2 event handlers\n if (this.isSelect2Available() && this.isEnhanced()) {\n this.setupAdditionalSelect2Events();\n }\n\n // RELIABILITY: Set up a backup listener directly on the element\n // This ensures price updates even if the base controller events don't work\n this.element.addEventListener('change', () => {\n setTimeout(() => this.updatePriceDirectly(), 10);\n });\n }\n\n disconnect() {\n // Clean up observer\n if (this.observer) {\n this.observer.disconnect();\n }\n\n // Call parent disconnect for Select2 cleanup\n super.disconnect();\n }\n\n // Override to provide Select2 configuration\n getEnhancementOptions() {\n return {\n minimumResultsForSearch: -1,\n width: '100%',\n };\n }\n\n // Set up additional Select2-specific events\n setupAdditionalSelect2Events() {\n const enhancer = this.getEnhancer();\n const enhancedElement = enhancer(this.selectElement);\n\n // Clear error message when opening Select2\n enhancedElement.on('select2:open', () => {\n const error = this.selectElement.nextElementSibling;\n const formField = this.selectElement.closest('.ae-form-field');\n\n if (error && error.classList.contains('ae-error-msg')) {\n error.style.display = 'none';\n }\n if (formField) {\n formField.classList.remove('ae-input-error');\n }\n });\n\n // Track price changes when closing Select2\n enhancedElement.on('select2:close', (event) => {\n const selectedOption = event.target.selectedOptions[0];\n if (selectedOption) {\n const price = selectedOption.dataset.price;\n\n event.target.dataset.previous = event.target.dataset.present;\n event.target.dataset.present = price;\n\n // Dispatch change event for price update\n const changeEvent = new Event('change', { bubbles: true });\n event.target.dispatchEvent(changeEvent);\n }\n });\n }\n\n // Override to handle selection changes (called by base controller)\n onSelectChange(event) {\n // IMMEDIATE: Update price directly when selection changes\n this.updatePriceDirectly();\n\n // ALSO: Dispatch a change event that bubbles up to trigger the Stimulus action\n // This maintains compatibility with other controllers that might listen for changes\n const changeEvent = new Event('change', { bubbles: true, cancelable: true });\n this.element.dispatchEvent(changeEvent);\n }\n\n // Direct price update method for reliability with Select2\n updatePriceDirectly() {\n const productAttributesElement = this.element.closest('[data-controller*=\"t-product-details-product-attributes\"]');\n if (!productAttributesElement) return;\n\n // Get the selected option price data\n const selectedOption = this.element.selectedOptions[0];\n if (!selectedOption) return;\n\n // Calculate total price\n const basePriceInCents = Math.round(parseFloat(productAttributesElement.dataset.price || '0') * 100);\n const additionalPriceInCents = Math.round(parseFloat(selectedOption.dataset.price || '0') * 100);\n const totalPriceInCents = basePriceInCents + additionalPriceInCents;\n const totalPrice = totalPriceInCents / 100;\n const formattedPrice = `$${totalPrice.toFixed(2)}`;\n\n // Update all price target elements\n const priceTargets = document.querySelectorAll('[data-target*=\"price\"]');\n priceTargets.forEach(priceElement => {\n priceElement.textContent = formattedPrice;\n });\n\n // Also update fallback price elements for reliability\n const fallbackPriceElements = document.querySelectorAll('.product-price .display-price-desktop, .display-price-desktop');\n fallbackPriceElements.forEach(priceElement => {\n priceElement.textContent = formattedPrice;\n });\n }\n\n mutationCallback(mutationList) {\n mutationList.forEach((mutation) => {\n if (mutation.type === 'attributes' && mutation.attributeName === 'data-previous') {\n // Price tracking handled by the product attributes controller\n }\n });\n }\n}\n\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n connect() {\n if (this.element.dataset.autoplay === 'true') {\n $(this.element).slick({\n speed: 1000,\n arrows: true,\n dots: true,\n prevArrow:\n '
' +\n ' ',\n nextArrow:\n '
' +\n ' ',\n });\n }\n }\n\n disconnect() {\n try {\n if (typeof $ !== 'undefined' && $(this.element).hasClass && $(this.element).hasClass('slick-initialized')) {\n $(this.element).slick('unslick');\n }\n } catch (error) {\n throw error;\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\n/**\n * T Welcome Message Auto Display Controller\n *\n * Automatically displays welcome message modal on page load by programmatically\n * triggering AjaxPopup. Uses localStorage to enforce 7-day display interval.\n * Only triggers if data-has-welcome-message=\"true\" to prevent empty modals.\n *\n * Stimulus 1.1.0 compatible - uses setTimeout for AjaxPopup initialization delay\n */\nexport default class extends Controller {\n connect() {\n this.checkAndTrigger();\n }\n\n checkAndTrigger() {\n // Check if welcome message exists before proceeding\n const hasWelcomeMessage = this.element.getAttribute('data-has-welcome-message') === 'true';\n if (!hasWelcomeMessage) {\n return;\n }\n\n // Check localStorage expiration\n const expires = localStorage.getItem('welcome_message_expires');\n const now = new Date();\n const shouldShow = !expires || new Date(expires) < now;\n\n if (shouldShow) {\n // Wait for AjaxPopup controller to initialize (Stimulus 1.1.0 workaround)\n setTimeout(() => this.trigger(), 100);\n\n // Listen for close event to set expiration\n this.setupCloseListener();\n }\n }\n\n trigger() {\n const link = this.element.querySelector('a[data-controller=\"ajax-popup\"]');\n if (link) {\n link.click();\n }\n }\n\n setupCloseListener() {\n // Listen for AjaxPopup close event (verified in ajax_popup_controller.js:295)\n document.addEventListener('ajax-popup:afterClose', this.handleClose.bind(this), { once: true });\n }\n\n handleClose(_event) {\n // Set 7-day expiration in localStorage\n const sevenDaysFromNow = new Date();\n sevenDaysFromNow.setDate(sevenDaysFromNow.getDate() + 7);\n localStorage.setItem('welcome_message_expires', sevenDaysFromNow.toISOString());\n }\n\n disconnect() {\n // Cleanup not needed - event listener uses { once: true }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['tab', 'panel'];\n\n\n connect() {\n // Check if sizes tab is active on initial load and hide footer if needed\n if (!this.tabTargets || this.tabTargets.length === 0) return;\n const activeTab = this.tabTargets.find(tab => {\n const tabItem = tab.closest('.ae-tab');\n return tabItem && tabItem.classList.contains('active-tab');\n });\n\n if (activeTab && activeTab.dataset.tab === 'sizes') {\n const modalFooter = this.element.closest('.mfp-content')?.querySelector('.ae-popup-footer');\n if (modalFooter) {\n modalFooter.classList.add('ae-hidden');\n }\n }\n }\n\n switchTab(event) {\n event.preventDefault();\n\n const clickedTab = event.currentTarget;\n const tabName = clickedTab.dataset.tab;\n\n // Update active state on tabs\n if (this.tabTargets && this.tabTargets.length > 0) {\n this.tabTargets.forEach(tab => {\n const tabItem = tab.closest('.ae-tab');\n if (tabItem) {\n tabItem.classList.remove('active-tab');\n }\n });\n }\n\n // Add active class to clicked tab\n const clickedTabItem = clickedTab.closest('.ae-tab');\n if (clickedTabItem) {\n clickedTabItem.classList.add('active-tab');\n }\n\n // Hide all panels\n if (this.panelTargets && this.panelTargets.length > 0) {\n this.panelTargets.forEach(panel => {\n panel.classList.remove('active-tab');\n });\n }\n\n // Show selected panel\n const selectedPanel = (this.panelTargets && this.panelTargets.length > 0) ? this.panelTargets.find(panel => panel.id === `${tabName}-tab`) : null;\n if (selectedPanel) {\n selectedPanel.classList.add('active-tab');\n }\n\n // Show/hide the modal footer based on active tab\n const modalFooter = this.element.closest('.mfp-content')?.querySelector('.ae-popup-footer');\n if (modalFooter) {\n if (tabName === 'sizes') {\n modalFooter.classList.add('ae-hidden');\n } else {\n modalFooter.classList.remove('ae-hidden');\n }\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['button', 'textInput'];\n\n connect() {\n this.status = this.element.dataset.teamsiteClearFiltersStatus || 'open';\n this.hasSalesRepFilter = this.element.dataset.teamsiteClearFiltersHasSalesRep === 'true';\n this.checkVisibility();\n }\n\n checkVisibility() {\n const hasTextFilter = this.textInputTarget.value.trim() !== '';\n const shouldShow = this.hasSalesRepFilter || hasTextFilter;\n this.buttonTarget.style.display = shouldShow ? '' : 'none';\n }\n\n clear(event) {\n event.preventDefault();\n // Clear text input\n this.textInputTarget.value = '';\n // Navigate to clear all filters (page reload will clear text input too)\n const url = '/teamsites?status=' + this.status;\n Turbolinks.visit(url);\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['input', 'tbody', 'emptyState', 'table'];\n\n connect() {\n this.setupRowObserver();\n }\n\n disconnect() {\n if (this.rowObserver) {\n this.rowObserver.disconnect();\n this.rowObserver = null;\n }\n }\n\n filter() {\n const searchTerm = this.inputTarget.value.toLowerCase().trim();\n const rows = this.tbodyTarget.querySelectorAll('tr.teamsite-row');\n let visibleCount = 0;\n\n for (let i = 0; i < rows.length; i++) {\n const row = rows[i];\n const searchable = row.getAttribute('data-teamsite-filter-searchable') || '';\n\n if (searchTerm === '' || searchable.indexOf(searchTerm) !== -1) {\n row.style.display = '';\n visibleCount++;\n } else {\n row.style.display = 'none';\n }\n }\n\n this.updateEmptyState(visibleCount, rows.length);\n }\n\n updateEmptyState(visibleCount, totalCount) {\n if (!this.hasEmptyStateTarget || !this.hasTableTarget) return;\n\n if (visibleCount === 0 && totalCount > 0) {\n this.emptyStateTarget.style.display = 'block';\n this.tableTarget.style.display = 'none';\n } else {\n this.emptyStateTarget.style.display = 'none';\n this.tableTarget.style.display = '';\n }\n }\n\n setupRowObserver() {\n if (!this.hasTbodyTarget) return;\n\n const self = this;\n this.rowObserver = new MutationObserver(function(mutations) {\n const hasNewRows = mutations.some(function(m) {\n return m.type === 'childList' && m.addedNodes.length > 0;\n });\n\n if (hasNewRows && self.inputTarget.value.trim() !== '') {\n self.filter();\n }\n });\n\n this.rowObserver.observe(this.tbodyTarget, { childList: true });\n }\n}\n", "import Select2BaseController from './select2_base_controller';\n\nexport default class extends Select2BaseController {\n connect() {\n // Store data attributes before Select2 initialization\n this.status = this.element.dataset.status || 'open';\n\n super.connect();\n }\n\n getEnhancementOptions() {\n return {\n width: 200,\n minimumResultsForSearch: 1, // Always show search (type-ahead)\n };\n }\n\n onSelectChange(event) {\n const salesRepId = event.target.value;\n\n let url = '/teamsites?status=' + this.status;\n if (salesRepId) {\n url += '&sales_rep_id=' + salesRepId;\n }\n\n Turbolinks.visit(url);\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n click(event) {\n const tab = event.currentTarget;\n const status = tab.getAttribute('data-status');\n\n if (!status) {\n return;\n }\n\n // Get current filter params from URL to preserve across tab navigation\n const urlParams = new URLSearchParams(window.location.search);\n const salesRepId = urlParams.get('sales_rep_id');\n\n // Update URL and navigate with Turbolinks\n let url = '/teamsites?status=' + status;\n if (salesRepId) {\n url += '&sales_rep_id=' + salesRepId;\n }\n\n Turbolinks.visit(url);\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['saveBtn'];\n\n connect() {\n this.saleId = this.element.dataset.saleId;\n this.orderNumber = this.element.dataset.orderNumber;\n this.element.classList.add('is-loading');\n this.element.classList.remove('is-loading');\n }\n\n save(e) {\n e.preventDefault();\n\n const coupon = this.getSelectedCoupon();\n if (!coupon) {\n App.showErrorFlash('Please select a coupon');\n return;\n }\n\n this.saveBtnTarget.disabled = true;\n this.element.classList.add('is-loading');\n\n const url = `/teamsites/${this.saleId}/orders/${this.orderNumber}/coupons/${coupon.code}`;\n const csrfToken = document.querySelector('meta[name=\"csrf-token\"]').content;\n\n fetch(url, {\n method: 'PATCH',\n headers: {\n 'X-CSRF-Token': csrfToken,\n 'X-Requested-With': 'XMLHttpRequest',\n },\n credentials: 'same-origin',\n })\n .then(response => {\n if (!response.ok) {\n return response.json().then(data => {\n throw new Error(data.error || 'Failed to apply coupon');\n });\n }\n return response.json();\n })\n .then(() => {\n this.element.classList.remove('is-loading');\n App.showSuccessFlash('Order updated');\n this.reloadTotals();\n })\n .catch(error => {\n this.element.classList.remove('is-loading');\n this.saveBtnTarget.disabled = false;\n App.showErrorFlash(error.message || 'Something went wrong');\n });\n }\n\n cancel(e) {\n e.preventDefault();\n e.stopPropagation();\n this.reloadTotals();\n }\n\n reloadTotals() {\n // Reload the entire totals breakdown section, order amount, and confirm changes button\n const breakdownContainer = document.getElementById('order-total-breakdown');\n const orderAmountElement = document.getElementById('order-amount');\n const confirmChangesElement = document.getElementById('confirm-changes');\n\n if (breakdownContainer) {\n const url = `/teamsites/${this.saleId}/orders/${this.orderNumber}`;\n const csrfToken = document.querySelector('meta[name=\"csrf-token\"]').content;\n\n fetch(url, {\n method: 'GET',\n headers: {\n 'X-CSRF-Token': csrfToken,\n 'X-Requested-With': 'XMLHttpRequest',\n },\n credentials: 'same-origin',\n })\n .then(response => response.text())\n .then(html => {\n const parser = new DOMParser();\n const doc = parser.parseFromString(html, 'text/html');\n\n // Update breakdown table\n const newBreakdown = doc.getElementById('order-total-breakdown');\n if (newBreakdown) {\n breakdownContainer.innerHTML = newBreakdown.innerHTML;\n }\n\n // Update order total amount\n const newOrderAmount = doc.getElementById('order-amount');\n if (newOrderAmount && orderAmountElement) {\n orderAmountElement.innerHTML = newOrderAmount.innerHTML;\n }\n\n // Update confirm changes button (for Confirm Refund button when payment state changes)\n const newConfirmChanges = doc.getElementById('confirm-changes');\n if (newConfirmChanges && confirmChangesElement) {\n confirmChangesElement.innerHTML = newConfirmChanges.innerHTML;\n }\n })\n .catch(error => {\n // Log error for debugging\n console.error('Error reloading totals:', error);\n // Fallback: reload entire page\n window.location.reload();\n });\n } else {\n // Fallback: reload entire page\n window.location.reload();\n }\n }\n\n getSelectedCoupon() {\n const select = document.getElementById('coupon-code-select');\n if (!select) return null;\n\n const selectedOption = select.options[select.selectedIndex];\n if (!selectedOption || !selectedOption.value) return null;\n\n // Get coupon data from the select controller\n const selectController = this.application.getControllerForElementAndIdentifier(\n select,\n 'teamsites-orders-coupons-select',\n );\n\n if (selectController && selectController.getSelectedCoupon) {\n return selectController.getSelectedCoupon();\n }\n\n return null;\n }\n}\n", "import Select2BaseController from './select2_base_controller';\n\nexport default class extends Select2BaseController {\n connect() {\n super.connect();\n this.coupons = JSON.parse(this.element.dataset.coupons);\n }\n\n getEnhancementOptions() {\n return {\n ...super.getEnhancementOptions(),\n placeholder: 'Search coupon name',\n data: this.buildData(),\n };\n }\n\n onSelectChange(_event) {\n const saveBtn = document.getElementById('save-coupon-btn');\n if (saveBtn) {\n saveBtn.disabled = false;\n }\n\n const selectedId = this.getValue();\n if (!selectedId) return;\n\n // Find the coupon data from our stored array\n const coupon = this.coupons.find(c => c.id == selectedId);\n if (!coupon) return;\n\n const label = `Coupon (${coupon.code})`;\n const amount = coupon.discount_amount;\n const type = coupon.discount_type;\n const discountDisplay = coupon.discount_display;\n\n this.updateLabels(label, type, amount, discountDisplay);\n }\n\n updateLabels(label, type, amount, discountDisplay) {\n const container = document.getElementById('coupon-labels-container');\n if (!container) return;\n\n // Update label text\n const labelSpan = container.querySelector('[data-target*=\"label\"]');\n if (labelSpan) {\n labelSpan.textContent = label;\n }\n\n // Update amount display\n const amountSpan = container.querySelector('[data-target*=\"amount\"]');\n if (amountSpan) {\n amountSpan.textContent = discountDisplay || `-$${amount}`;\n }\n\n // Show/hide info icon based on type\n const infoIcon = container.querySelector('[data-target*=\"info\"]');\n if (infoIcon) {\n if (type === 'percentage') {\n infoIcon.style.display = '';\n infoIcon.title = `${amount}% discount`;\n } else {\n infoIcon.style.display = 'none';\n }\n }\n }\n\n buildData() {\n const data = [{ id: '', text: '' }];\n\n this.coupons.forEach(coupon => {\n data.push({\n id: coupon.id,\n text: coupon.name,\n coupon: coupon,\n });\n });\n\n return data;\n }\n\n getSelectedCoupon() {\n const selectedId = this.getValue();\n if (!selectedId) return null;\n\n return this.coupons.find(c => c.id == selectedId) || null;\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n connect() {\n }\n}\n", "import { Controller } from '../stimulus';\n\n/**\n * Tiered Rate Form Controller\n *\n * Handles AJAX submission of tiered shipping rate forms in modals.\n * Updates the table row in the parent page without full reload.\n *\n * Usage:\n *
\n */\nexport default class extends Controller {\n initialize() {\n // Bind methods for event handlers\n this.handleSubmit = this.submit.bind(this);\n }\n\n connect() {\n // Controller is ready\n }\n\n /**\n * Handle form submission\n * Intercepts submit, sends AJAX request, updates table row\n */\n submit(event) {\n event.preventDefault();\n\n try {\n this.performSubmit();\n } catch (error) {\n console.error('[TieredRateForm] Error in submit:', error);\n this.handleError([error.message || 'An error occurred']);\n }\n }\n\n performSubmit() {\n const form = this.element;\n const submitButton = form.querySelector('button[type=\"submit\"]');\n\n // Extract rate ID from form action URL instead of data attribute\n // Form action is like: /dealer_settings/tiered_shipping_rates/444\n // This is more reliable than data attributes in multi-tenant contexts\n const formAction = form.action;\n const rateIdMatch = formAction.match(/tiered_shipping_rates\\/(\\d+)/);\n const rateId = rateIdMatch ? rateIdMatch[1] : null;\n\n // Disable submit button during processing\n if (submitButton) {\n submitButton.disabled = true;\n const originalText = submitButton.textContent;\n submitButton.textContent = 'Saving...';\n\n // Store original text for later restoration\n submitButton.dataset.originalText = originalText;\n }\n\n // Check for Rails _method hidden field (for PATCH/PUT/DELETE)\n // formAction already declared above when extracting rate ID\n const methodField = form.querySelector('input[name=\"_method\"]');\n const formMethod = methodField ? methodField.value.toUpperCase() : form.method.toUpperCase();\n\n // Serialize form data to JSON (better for nested attributes)\n const formData = new FormData(form);\n\n // Convert FormData to plain object for JSON serialization\n const formObject = {};\n formData.forEach((value, key) => {\n // Handle nested attributes properly\n if (key.includes('[')) {\n // Parse Rails nested attribute syntax: dealers_tiered_shipping_fee[name]\n // or dealers_tiered_shipping_fee[tiered_shipping_fee_tiers_attributes][0][cart_total_min]\n this.setNestedValue(formObject, key, value);\n } else {\n formObject[key] = value;\n }\n });\n\n // Get CSRF token\n const csrfToken = document.querySelector('meta[name=\"csrf-token\"]')?.getAttribute('content');\n\n // Send AJAX request with JSON\n fetch(formAction, {\n method: formMethod,\n headers: {\n 'X-CSRF-Token': csrfToken,\n 'X-Requested-With': 'XMLHttpRequest',\n 'Content-Type': 'application/json',\n 'Accept': 'application/json',\n },\n body: JSON.stringify(formObject),\n credentials: 'same-origin',\n })\n .then(response => {\n if (!response.ok) {\n return response.json()\n .then(data => {\n throw new Error(data.message || 'Server error occurred');\n })\n .catch(_jsonError => {\n throw new Error(`Server error (${response.status})`);\n });\n }\n return response.json();\n })\n .then(data => {\n if (data.success) {\n this.handleSuccess(data, rateId);\n } else {\n this.handleError(data.errors || ['Update failed']);\n }\n })\n .catch(error => {\n console.error('[TieredRateForm] Error:', error);\n this.handleError([error.message || 'Network error occurred']);\n })\n .finally(() => {\n // Re-enable submit button\n if (submitButton) {\n submitButton.disabled = false;\n const originalText = submitButton.dataset.originalText || 'SAVE';\n submitButton.textContent = originalText;\n delete submitButton.dataset.originalText;\n }\n });\n }\n\n /**\n * Handle successful submission\n * Updates the table row and closes modal\n */\n handleSuccess(data, rateId) {\n // Find existing row in table (for updates)\n const existingRow = document.querySelector(`tr[data-rate-id=\"${rateId}\"]`);\n\n if (existingRow && data.html) {\n // Update: Replace existing row\n // IMPORTANT: Wrap TR in table structure so DOMParser doesn't strip attributes\n const parser = new DOMParser();\n const doc = parser.parseFromString(`
`, 'text/html');\n\n // Use specific selector to avoid matching nested
elements inside tier tables\n const newRow = doc.querySelector('tr[data-rate-id]');\n\n if (newRow) {\n existingRow.replaceWith(newRow);\n\n // Highlight the updated row briefly\n newRow.style.transition = 'background-color 0.5s ease-in-out';\n newRow.style.backgroundColor = '#d4edda'; // Light green\n\n setTimeout(() => {\n newRow.style.backgroundColor = '';\n }, 2000);\n }\n } else if (data.html) {\n // Create: Insert new row at the top of the table\n const tableBody = document.querySelector('#shipping-tiered-rates-table tbody');\n if (tableBody) {\n const parser = new DOMParser();\n // IMPORTANT: Wrap TR in table structure so DOMParser doesn't strip attributes\n const doc = parser.parseFromString(``, 'text/html');\n // Use specific selector to avoid matching nested elements inside tier tables\n const newRow = doc.querySelector('tr[data-rate-id]');\n\n if (newRow) {\n tableBody.insertBefore(newRow, tableBody.firstChild);\n\n // Highlight the new row briefly\n newRow.style.transition = 'background-color 0.5s ease-in-out';\n newRow.style.backgroundColor = '#d4edda'; // Light green\n\n setTimeout(() => {\n newRow.style.backgroundColor = '';\n }, 2000);\n\n // Scroll to the new row\n newRow.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n }\n }\n\n // Show success message\n if (window.App && typeof window.App.showSuccessFlash === 'function') {\n window.App.showSuccessFlash('Tiered shipping rate saved successfully');\n }\n\n // Close the modal\n this.closeModal();\n }\n\n /**\n * Handle error responses\n * Displays error messages to the user\n */\n handleError(errors) {\n const errorMessages = Array.isArray(errors) ? errors : [errors];\n const errorText = errorMessages.join(', ');\n\n // Show error message\n if (window.App && typeof window.App.showErrorFlash === 'function') {\n window.App.showErrorFlash(errorText);\n } else {\n // Fallback: Show native alert (ESLint exception for error handling fallback)\n\n window.alert(`Error: ${errorText}`);\n }\n }\n\n /**\n * Close the AJAX modal\n * Dispatches custom event that ajax-popup controller listens for\n */\n closeModal() {\n // Option 1: Try to find and click the close button (most reliable)\n const closeButton = document.querySelector('.mfp-wrap .mfp-close');\n if (closeButton) {\n closeButton.click();\n return;\n }\n\n // Option 2: Try to use jQuery magnificPopup if available\n if (window.$ && window.$.magnificPopup) {\n window.$.magnificPopup.close();\n return;\n }\n\n // Option 3: Manually remove modal elements (fallback)\n const backdrop = document.querySelector('.mfp-bg');\n const wrapper = document.querySelector('.mfp-wrap');\n\n if (backdrop) backdrop.remove();\n if (wrapper) wrapper.remove();\n document.body.classList.remove('mfp-open');\n }\n\n /**\n * Helper method to set nested values in an object from Rails parameter syntax\n * Converts: \"dealers_tiered_shipping_fee[tiered_shipping_fee_tiers_attributes][0][cart_total_min]\"\n * To: { dealers_tiered_shipping_fee: { tiered_shipping_fee_tiers_attributes: { 0: { cart_total_min: value } } } }\n */\n setNestedValue(obj, key, value) {\n // Parse Rails nested syntax: parent[child][index][field]\n const keys = key.split(/[[\\]]/).filter(k => k.length > 0);\n\n let current = obj;\n for (let i = 0; i < keys.length - 1; i++) {\n const k = keys[i];\n if (!current[k]) {\n // Check if next key is numeric (array index)\n const nextKey = keys[i + 1];\n current[k] = /^\\d+$/.test(nextKey) ? {} : {};\n }\n current = current[k];\n }\n\n const lastKey = keys[keys.length - 1];\n current[lastKey] = value;\n }\n\n disconnect() {\n // Cleanup - nothing to do currently\n }\n}\n", "import { Controller } from '../stimulus';\n\n/**\n * Tippy Controller\n *\n * A Stimulus controller that provides tooltip functionality using tippy.js.\n * This controller replaces the legacy $.onmount behavior for tooltips.\n *\n * Features:\n * - Basic tooltip functionality with customizable options\n * - Support for custom HTML content in tooltips\n * - Interactive tooltips that can contain forms or other interactive elements\n * - Ability to show tooltips automatically on connect\n * - Proper cleanup when elements are removed from the DOM\n *\n * Usage:\n *\n * Basic tooltip:\n * \n * Hover me\n * \n *\n * Customized tooltip:\n * \n * Hover with options\n * \n *\n * Show tooltip on load:\n * \n * Auto-shown tooltip\n * \n *\n * Custom HTML content:\n * \n * Tooltip with custom HTML\n * \n * \n *
Custom Content \n *
This can contain any HTML
\n *
\n * \n *
\n * ```\n *\n * Features:\n * - Listens for checkbox change events (triggered by native label-for association)\n * - Submits form data via Fetch API with AJAX\n * - Handles success/error states with appropriate feedback\n * - Maintains state consistency between client and server\n * - Adds a special `toggle_active` parameter for direct toggle operations\n *\n * Dependencies:\n * - Requires a CSRF token meta tag in the document\n * - Uses NotificationMixin for displaying success/error notifications\n * - Backend should handle the `toggle_active` parameter appropriately\n *\n * Notes:\n * - For proper operation, ensure the checkbox has a unique ID and the label has a matching 'for' attribute\n * - If using with Rails, the server endpoint should respond with JSON including the updated state\n * - The controller will automatically revert the checkbox state if the server request fails\n */\nimport { Controller } from '../stimulus';\nimport CSRFTokenMixin from '../mixins/csrf_token_mixin';\nimport NotificationMixin from '../mixins/notification_mixin';\n\nexport default class extends Controller {\n static targets = ['checkbox', 'form'];\n\n /**\n * Called when the controller is connected to the DOM\n * Sets up change event listeners on checkbox elements\n */\n connect() {\n // Add mixin capabilities\n Object.assign(this, CSRFTokenMixin);\n Object.assign(this, NotificationMixin);\n\n // Defer validation to avoid errors during subtab transitions\n // When content is being replaced, Stimulus may try to connect to elements that are being removed\n setTimeout(() => {\n // Only validate if the element is still in the DOM\n if (!this.element || !document.body.contains(this.element)) {\n return;\n }\n\n // Make sure we have the checkbox target\n if (!this.hasCheckboxTarget) {\n // Only show error in development mode or if explicitly requested\n if (this.element.dataset.showErrors === 'true') {\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Toggle control configuration error');\n }\n }\n return;\n }\n\n if (this.hasCheckboxTarget) {\n // Set up change listener directly on the checkbox\n this.checkboxChangeHandler = this.handleCheckboxChange.bind(this);\n this.checkboxTarget.addEventListener('change', this.checkboxChangeHandler);\n }\n }, 0);\n }\n\n /**\n * Called when the controller is disconnected from the DOM\n * Cleans up event listeners to prevent memory leaks\n */\n disconnect() {\n // Clean up event listeners when controller is disconnected\n try {\n if (this.hasCheckboxTarget && this.checkboxChangeHandler) {\n this.checkboxTarget.removeEventListener('change', this.checkboxChangeHandler);\n }\n } catch (e) {\n // Silently ignore errors during cleanup\n // This can happen if the element is already removed from DOM\n }\n }\n\n /**\n * Handles checkbox change events\n * Sends an AJAX request to update the server state\n *\n * @param {Event} event - The change event from the checkbox\n */\n handleCheckboxChange(event) {\n const checkbox = event.target;\n const isActive = checkbox.checked;\n const form = this.hasFormTarget ? this.formTarget : checkbox.closest('form');\n\n if (!form) {\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash('Form not found for toggle control');\n }\n return;\n }\n\n // Get the form URL, stripping .js/.json extension so Accept header controls format\n const url = form.action.replace(/\\.(js|json)$/, '');\n const originalState = !isActive;\n\n // Build FormData with only the clicked checkbox value to avoid duplicate\n // input issues when the same form renders multiple checkbox instances\n const formData = new FormData();\n formData.append('toggle_active', 'true');\n formData.append(checkbox.name, isActive ? '1' : '0');\n\n // Check CSRF token using mixin\n if (!this.hasValidCSRFToken()) {\n checkbox.checked = originalState;\n return;\n }\n\n // Use fetch API for the request with mixin headers\n fetch(url, {\n method: 'PATCH',\n headers: this.getHeadersWithCSRF({\n 'Accept': 'application/json',\n 'X-Requested-With': 'XMLHttpRequest',\n }),\n body: formData,\n })\n .then(response => {\n if (!response.ok) {\n throw new Error('Network response was not ok');\n }\n return response.json();\n })\n .then(data => {\n // Update the checkbox to match the server state if needed\n if (data.is_active !== undefined && checkbox.checked !== data.is_active) {\n checkbox.checked = data.is_active;\n }\n\n // Update checkbox to match the active state returned from server\n if (data.active !== undefined && checkbox.checked !== data.active) {\n checkbox.checked = data.active;\n }\n\n // Handle deactivated rates - update their UI to show inactive state\n if (data.deactivated_rates && data.deactivated_rates.length > 0) {\n data.deactivated_rates.forEach(rate => {\n const deactivatedCheckbox = document.querySelector(`input[type=\"checkbox\"][data-rate-id=\"${rate.id}\"]`);\n if (deactivatedCheckbox) {\n deactivatedCheckbox.checked = false;\n }\n });\n }\n\n // Dispatch custom event for other controllers to listen to\n if (data.active !== undefined) {\n this.element.dispatchEvent(new CustomEvent('toggle:changed', {\n detail: {\n active: data.active,\n deactivated_rates: data.deactivated_rates || [],\n },\n bubbles: true,\n }));\n }\n\n // Show success message with information about deactivated rates\n let message = data.message || 'Updated successfully';\n if (data.deactivated_rates && data.deactivated_rates.length > 0) {\n const deactivatedNames = data.deactivated_rates.map(rate => rate.name).join(', ');\n message += ` (${deactivatedNames} automatically deactivated)`;\n }\n\n // Show success message using global App method\n if (typeof App !== 'undefined' && App.showSuccessFlash) {\n App.showSuccessFlash(message);\n } else {\n // Fallback to NotificationMixin if App is not available\n this.showSaveNotification(message);\n }\n })\n .catch(() => {\n // Revert the checkbox state on error\n checkbox.checked = originalState;\n\n // Show error message using global App method\n if (typeof App !== 'undefined' && App.showErrorFlash) {\n App.showErrorFlash('Failed to update user status');\n } else {\n // Fallback to NotificationMixin if App is not available\n this.showErrorNotification('Failed to update status');\n }\n });\n }\n\n}\n", "import { Controller } from '../stimulus';\n\n/**\n * Toggle Product View Controller\n *\n * This controller handles toggling between grid and list views\n * for product display. It replaces jQuery-based DOM manipulation\n * with vanilla JavaScript.\n */\nexport default class extends Controller {\n static targets = ['content'];\n\n connect() {\n const gridButton = document.getElementById('toggle-grid-button');\n if (gridButton) {\n gridButton.classList.add('active');\n }\n }\n\n toggleList() {\n this.contentTargets.forEach(element => {\n element.classList.add('list-view');\n element.classList.remove('grid-view');\n });\n\n const listButton = document.getElementById('toggle-list-button');\n const gridButton = document.getElementById('toggle-grid-button');\n\n if (listButton) {\n listButton.classList.add('active');\n }\n\n if (gridButton) {\n gridButton.classList.remove('active');\n }\n }\n\n toggleGrid() {\n this.contentTargets.forEach(element => {\n element.classList.add('grid-view');\n element.classList.remove('list-view');\n });\n\n const listButton = document.getElementById('toggle-list-button');\n const gridButton = document.getElementById('toggle-grid-button');\n\n if (listButton) {\n listButton.classList.remove('active');\n }\n\n if (gridButton) {\n gridButton.classList.add('active');\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['passwordForm'];\n\n connect() {\n this.submitTimeout = null;\n this.boundHandleSubmit = this.handleSubmit.bind(this);\n this.passwordFormTarget.addEventListener('submit', this.boundHandleSubmit);\n }\n\n disconnect() {\n if (this.submitTimeout) {\n clearTimeout(this.submitTimeout);\n }\n this.passwordFormTarget.removeEventListener('submit', this.boundHandleSubmit);\n }\n\n handleSubmit(event) {\n event.preventDefault();\n clearTimeout(this.submitTimeout);\n this.submitTimeout = setTimeout(() => this._submitForm(), 300);\n }\n\n _submitForm() {\n const submitButton = this.passwordFormTarget.querySelector('#submit-password-btn');\n submitButton.disabled = true;\n\n try {\n const formData = new FormData(this.passwordFormTarget);\n const csrfMetaTag = document.querySelector('meta[name=\"csrf-token\"]');\n if (!csrfMetaTag) {\n throw new Error('CSRF token not found');\n }\n const csrfToken = csrfMetaTag.content;\n\n fetch(this.passwordFormTarget.action, {\n method: 'PATCH',\n headers: {\n 'X-CSRF-Token': csrfToken,\n 'Accept': 'application/javascript',\n },\n body: formData,\n })\n .then(response => {\n if (response.ok) {\n submitButton.disabled = false;\n this.passwordFormTarget.reset();\n if (window.App && typeof window.App.showSuccessFlash === 'function') {\n window.App.showSuccessFlash('Changes saved');\n }\n } else {\n throw new Error('Update failed');\n }\n })\n .catch(() => {\n submitButton.disabled = false;\n if (window.App && typeof window.App.showErrorFlash === 'function') {\n window.App.showErrorFlash('Something went wrong');\n }\n });\n } catch {\n submitButton.disabled = false;\n if (window.App && typeof window.App.showErrorFlash === 'function') {\n window.App.showErrorFlash('Something went wrong');\n }\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n connect() {\n // Find the trix-editor element within this controller's element\n this.trixEditor = this.element.querySelector('trix-editor');\n\n if (this.trixEditor) {\n // Store bound handler reference for proper cleanup\n this.boundHandleBlur = this.handleBlur.bind(this);\n // Listen for the trix-blur event\n this.trixEditor.addEventListener('trix-blur', this.boundHandleBlur);\n }\n }\n\n disconnect() {\n if (this.trixEditor && this.boundHandleBlur) {\n this.trixEditor.removeEventListener('trix-blur', this.boundHandleBlur);\n }\n }\n\n handleBlur(event) {\n const url = event.target.dataset.url;\n if (!url) return;\n\n // Make AJAX request to set the edited flag\n fetch(url, {\n method: 'POST',\n headers: {\n 'X-Requested-With': 'XMLHttpRequest',\n 'X-CSRF-Token': this.getCSRFToken(),\n 'Accept': 'text/javascript',\n },\n })\n .then(response => {\n if (response.ok) {\n // Update the hidden field to indicate the message has been edited\n const editedField = document.getElementById('is_welcome_message_edited');\n if (editedField) {\n editedField.value = 'true';\n }\n }\n })\n .catch(error => {\n // Error setting welcome message edited flag - silently handled\n });\n }\n\n getCSRFToken() {\n const token = document.querySelector('meta[name=\"csrf-token\"]');\n return token ? token.content : '';\n }\n}\n\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n click(event) {\n event.preventDefault();\n\n return fetch(this.element.dataset.url, {\n headers: { 'Accept': 'text/html' },\n })\n .then(response => response.text())\n .then(html => {\n const contentElement = document.getElementById('welcome-messages-content');\n // Clear existing content\n contentElement.textContent = '';\n // Parse and safely insert HTML from our server\n const parser = new DOMParser();\n const doc = parser.parseFromString(html, 'text/html');\n\n // Use firstElementChild to skip text nodes (whitespace)\n const content = doc.body.firstElementChild;\n if (content) {\n contentElement.appendChild(content);\n }\n })\n .catch(_error => {\n // Fail silently in production - no console logging\n });\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n click(event) {\n event.preventDefault();\n\n const checkedBoxes = document.querySelectorAll('#welcome-messages-sidebar-form input[type=\"checkbox\"]:checked:not([name=\"select_all\"])');\n\n if (checkedBoxes && checkedBoxes.length > 0) {\n // Show confirmation dialog before proceeding\n const count = checkedBoxes.length;\n const message = count === 1\n ? 'Are you sure you want to delete this template?'\n : `Are you sure you want to delete ${count} templates?`;\n\n if (!window.confirm(message)) {\n return;\n }\n\n // Proceed with bulk delete\n // Server-side JS.ERB response will handle UI updates and flash messages\n const form = document.getElementById('welcome-messages-sidebar-form');\n if (form) {\n try {\n if (typeof Rails !== 'undefined' && Rails.fire) {\n Rails.fire(form, 'submit');\n } else {\n form.requestSubmit();\n }\n } catch (error) {\n console.error('Error submitting bulk delete form:', error);\n // Use unified flash system with fallback\n if (typeof window.App !== 'undefined' && window.App.showErrorFlash) {\n window.App.showErrorFlash('Failed to delete templates. Please try again.');\n } else {\n console.error('Flash system unavailable - bulk delete failed');\n }\n }\n }\n } else {\n // No templates selected - show error message\n if (typeof window.App !== 'undefined' && window.App.showErrorFlash) {\n window.App.showErrorFlash('Please select templates to delete.');\n } else {\n console.error('Flash system unavailable - no templates selected');\n }\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n connect() {\n const urlParams = new URLSearchParams(window.location.search);\n const templateId = urlParams.get('h');\n\n if (templateId) {\n // Find and click the corresponding sidebar item\n const listItem = document.querySelector(`[data-template-id=\"${templateId}\"]`);\n if (listItem) {\n listItem.click();\n }\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n click(event) {\n event.preventDefault();\n\n // Show confirmation dialog before proceeding\n if (!window.confirm('Are you sure you want to delete this template?')) {\n return;\n }\n\n // Proceed with delete operation\n // Server-side JS.ERB response will handle UI updates\n try {\n const csrfToken = document.querySelector('[name=\"csrf-token\"]');\n const headers = {\n 'Accept': 'text/javascript, application/javascript, application/ecmascript, application/x-ecmascript',\n 'Content-Type': 'application/json',\n };\n\n if (csrfToken && csrfToken.content) {\n headers['X-CSRF-Token'] = csrfToken.content;\n }\n\n fetch(this.element.dataset.url, {\n method: 'DELETE',\n headers: headers,\n })\n .then(response => {\n if (response.ok) {\n return response.text();\n } else {\n throw new Error('Failed to delete template');\n }\n })\n .then(javascript => {\n // Execute the JavaScript response from the server\n if (javascript) {\n try {\n const scriptElement = document.createElement('script');\n scriptElement.textContent = javascript;\n document.body.appendChild(scriptElement);\n document.body.removeChild(scriptElement);\n } catch {\n // Error executing response - reload to ensure clean state\n window.location.reload();\n }\n }\n })\n .catch(error => {\n console.error('Error deleting template:', error);\n // Use unified flash system with fallback\n if (typeof window.App !== 'undefined' && window.App.showErrorFlash) {\n window.App.showErrorFlash('Failed to delete template. Please try again.');\n } else {\n console.error('Flash system unavailable - delete operation failed');\n }\n });\n } catch (error) {\n console.error('Error deleting template:', error);\n // Use unified flash system with fallback\n if (typeof window.App !== 'undefined' && window.App.showErrorFlash) {\n window.App.showErrorFlash('Failed to delete template. Please try again.');\n } else {\n console.error('Flash system unavailable - delete operation failed');\n }\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n submit(event) {\n event.preventDefault();\n\n const form = this.element;\n const formData = new FormData(form);\n const csrfToken = document.querySelector('meta[name=\"csrf-token\"]');\n\n if (!csrfToken) {\n this.showError('Security token missing. Please refresh the page.');\n return;\n }\n\n fetch(form.action, {\n method: form.method || 'POST',\n body: formData,\n headers: {\n 'X-Requested-With': 'XMLHttpRequest',\n 'X-CSRF-Token': csrfToken.getAttribute('content'),\n 'Accept': 'application/json',\n },\n })\n .then(response => response.json())\n .then(data => {\n if (data.success) {\n this.handleSuccess(data);\n } else {\n this.handleError(data);\n }\n })\n .catch(_error => {\n this.showError('Failed to save template. Please try again.');\n this.resetButton();\n });\n }\n\n handleSuccess(data) {\n if (data.redirect_url) {\n window.location.href = data.redirect_url;\n } else {\n window.location.reload();\n }\n }\n\n handleError(data) {\n const message = data.errors ? data.errors.join(', ') : 'An error occurred';\n this.showError(message);\n this.resetButton();\n }\n\n showError(message) {\n if (window.App && window.App.showErrorFlash) {\n window.App.showErrorFlash(message);\n }\n }\n\n resetButton() {\n const button = document.getElementById('template-save');\n if (button) {\n button.disabled = false;\n button.classList.remove('ae-btn-disabled');\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['checkbox'];\n\n connect() {\n this.setupCheckboxListeners();\n }\n\n disconnect() {\n this.removeCheckboxListeners();\n }\n\n setupCheckboxListeners() {\n this.checkboxTargets.forEach(checkbox => {\n this.boundChangeHandler = this.handleCheckboxChange.bind(this);\n checkbox.addEventListener('change', this.boundChangeHandler);\n });\n }\n\n removeCheckboxListeners() {\n if (this.boundChangeHandler) {\n this.checkboxTargets.forEach(checkbox => {\n checkbox.removeEventListener('change', this.boundChangeHandler);\n });\n }\n }\n\n checkboxTargetConnected(checkbox) {\n this.boundChangeHandler = this.handleCheckboxChange.bind(this);\n checkbox.addEventListener('change', this.boundChangeHandler);\n }\n\n checkboxTargetDisconnected(checkbox) {\n if (this.boundChangeHandler) {\n checkbox.removeEventListener('change', this.boundChangeHandler);\n }\n }\n\n handleCheckboxChange(event) {\n const checkbox = event.target;\n\n // Notify other controllers about checkbox state change\n this.notifySelectAllController();\n this.notifyBulkActionController();\n\n // Update UI based on checkbox state\n this.updateCheckboxState(checkbox);\n }\n\n notifySelectAllController() {\n // Update select all checkbox state based on individual checkboxes\n const selectAllCheckbox = document.querySelector('input[name=\"select_all\"]');\n const allCheckboxes = this.checkboxTargets;\n const checkedBoxes = this.checkboxTargets.filter(cb => cb.checked);\n\n if (selectAllCheckbox && allCheckboxes.length > 0) {\n if (checkedBoxes.length === allCheckboxes.length) {\n selectAllCheckbox.checked = true;\n selectAllCheckbox.indeterminate = false;\n } else if (checkedBoxes.length > 0) {\n selectAllCheckbox.checked = false;\n selectAllCheckbox.indeterminate = true;\n } else {\n selectAllCheckbox.checked = false;\n selectAllCheckbox.indeterminate = false;\n }\n }\n }\n\n notifyBulkActionController() {\n // Enable/disable bulk actions based on selection\n const checkedBoxes = this.checkboxTargets.filter(cb => cb.checked);\n const bulkDeleteButton = document.querySelector('[data-controller*=\"bulk-delete\"]');\n\n if (bulkDeleteButton) {\n if (checkedBoxes.length > 0) {\n bulkDeleteButton.style.display = 'inline-block';\n bulkDeleteButton.disabled = false;\n } else {\n bulkDeleteButton.style.display = 'none';\n bulkDeleteButton.disabled = true;\n }\n }\n }\n\n updateCheckboxState(checkbox) {\n // Update parent element state based on checkbox\n const listItem = checkbox.closest('.sidebar-list-item-welcome-message');\n if (listItem) {\n if (checkbox.checked) {\n listItem.classList.add('selected');\n } else {\n listItem.classList.remove('selected');\n }\n }\n }\n\n // Method to get all checked checkbox values\n getSelectedTemplateIds() {\n return this.checkboxTargets\n .filter(checkbox => checkbox.checked)\n .map(checkbox => checkbox.value);\n }\n\n // Method to check/uncheck all checkboxes (called by select all)\n setAllCheckboxes(checked) {\n this.checkboxTargets.forEach(checkbox => {\n checkbox.checked = checked;\n this.updateCheckboxState(checkbox);\n });\n this.notifyBulkActionController();\n }\n\n // Method to clear all selections\n clearAllSelections() {\n this.setAllCheckboxes(false);\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n click(event) {\n // Don't trigger if clicking on checkbox\n if (event.target && event.target.type === 'checkbox') {\n return;\n }\n\n event.preventDefault();\n\n // Get the parent element (ae-tab)\n const parentLi = this.element.closest('li.ae-tab');\n\n // Remove active-tab from all sidebar items\n document.querySelectorAll('li.ae-tab').forEach(item => {\n item.classList.remove('active-tab');\n });\n\n // Add active-tab to the clicked item's parent \n if (parentLi) {\n parentLi.classList.add('active-tab');\n }\n\n // Load template content\n fetch(this.element.dataset.url, {\n headers: { 'Accept': 'text/html' },\n })\n .then(response => response.text())\n .then(html => {\n const contentElement = document.getElementById('welcome-messages-content');\n // Clear existing content\n contentElement.textContent = '';\n // Parse and safely insert HTML from our server\n const parser = new DOMParser();\n const doc = parser.parseFromString(html, 'text/html');\n const content = doc.body.firstChild;\n if (content) {\n contentElement.appendChild(content);\n }\n })\n .catch(error => {\n // Error loading template\n });\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n static targets = ['all'];\n\n click(_event) {\n if (!this.hasAllTarget) {\n return;\n }\n\n const isChecked = this.allTarget.checked;\n\n // Select checkboxes within the form that have the welcome_messages name pattern\n document.querySelectorAll('#welcome-messages-sidebar-form input.welcome-message-checkbox').forEach(checkbox => {\n checkbox.checked = isChecked;\n });\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n connect() {\n this.initializePageState();\n this.setupEventListeners();\n }\n\n disconnect() {\n this.removeEventListeners();\n }\n\n initializePageState() {\n // Set up initial active states - look for Express UI active-tab class on elements\n const activeTemplate = this.element.querySelector('li.ae-tab.active-tab');\n if (activeTemplate) {\n this.updateActiveTabState(activeTemplate);\n }\n\n // Initialize bulk action button state\n this.updateBulkActionState();\n }\n\n setupEventListeners() {\n // Listen for checkbox changes to update bulk action state\n this.boundCheckboxChangeHandler = this.handleCheckboxChange.bind(this);\n this.element.addEventListener('change', this.boundCheckboxChangeHandler);\n\n // Listen for template selection changes\n this.boundTemplateSelectionHandler = this.handleTemplateSelection.bind(this);\n this.element.addEventListener('template:selected', this.boundTemplateSelectionHandler);\n }\n\n removeEventListeners() {\n if (this.boundCheckboxChangeHandler) {\n this.element.removeEventListener('change', this.boundCheckboxChangeHandler);\n }\n if (this.boundTemplateSelectionHandler) {\n this.element.removeEventListener('template:selected', this.boundTemplateSelectionHandler);\n }\n }\n\n handleCheckboxChange(event) {\n if (event.target.type === 'checkbox') {\n this.updateBulkActionState();\n this.updateSelectAllState();\n }\n }\n\n handleTemplateSelection(event) {\n const templateElement = event.detail.element;\n this.updateActiveTabState(templateElement);\n }\n\n updateActiveTabState(activeTemplate) {\n // Remove active-tab class from all template elements\n this.element.querySelectorAll('li.ae-tab').forEach(item => {\n item.classList.remove('active-tab');\n });\n\n // Add active-tab class to selected template\n if (activeTemplate) {\n activeTemplate.classList.add('active-tab');\n }\n }\n\n updateBulkActionState() {\n const checkedBoxes = this.element.querySelectorAll('input.welcome-message-checkbox:checked');\n const bulkDeleteButton = this.element.querySelector('[data-controller*=\"bulk-delete\"]');\n\n if (bulkDeleteButton) {\n if (checkedBoxes.length > 0) {\n bulkDeleteButton.style.display = 'inline-block';\n bulkDeleteButton.disabled = false;\n } else {\n bulkDeleteButton.style.display = 'none';\n bulkDeleteButton.disabled = true;\n }\n }\n }\n\n updateSelectAllState() {\n const selectAllCheckbox = this.element.querySelector('#select-all-messages');\n const individualCheckboxes = this.element.querySelectorAll('input.welcome-message-checkbox');\n const checkedBoxes = this.element.querySelectorAll('input.welcome-message-checkbox:checked');\n\n if (selectAllCheckbox && individualCheckboxes.length > 0) {\n if (checkedBoxes.length === individualCheckboxes.length) {\n selectAllCheckbox.checked = true;\n selectAllCheckbox.indeterminate = false;\n } else if (checkedBoxes.length > 0) {\n selectAllCheckbox.checked = false;\n selectAllCheckbox.indeterminate = true;\n } else {\n selectAllCheckbox.checked = false;\n selectAllCheckbox.indeterminate = false;\n }\n }\n }\n\n // Method to coordinate template deletion\n handleTemplateDeleted(templateId) {\n const templateElement = this.element.querySelector(`li.ae-tab[data-id=\"${templateId}\"]`);\n if (templateElement) {\n const wasActive = templateElement.classList.contains('active-tab');\n templateElement.remove();\n this.updateBulkActionState();\n this.updateSelectAllState();\n\n // If deleted template was active, select first available template\n if (wasActive) {\n const firstTemplate = this.element.querySelector('li.ae-tab');\n if (firstTemplate) {\n // Click on the inner div that has the controller\n const innerDiv = firstTemplate.querySelector('[data-controller*=\"list-item\"]');\n if (innerDiv) {\n innerDiv.click();\n }\n } else {\n // No templates left, clear content area\n const contentArea = document.getElementById('welcome-messages-content');\n if (contentArea) {\n contentArea.textContent = '';\n }\n }\n }\n }\n }\n\n // Method to coordinate bulk deletion\n handleBulkDeleted(templateIds) {\n let activeTemplateDeleted = false;\n\n templateIds.forEach(id => {\n const templateElement = this.element.querySelector(`li.ae-tab[data-id=\"${id}\"]`);\n if (templateElement) {\n if (templateElement.classList.contains('active-tab')) {\n activeTemplateDeleted = true;\n }\n templateElement.remove();\n }\n });\n\n this.updateBulkActionState();\n this.updateSelectAllState();\n\n // If active template was deleted, select first available template\n if (activeTemplateDeleted) {\n const firstTemplate = this.element.querySelector('li.ae-tab');\n if (firstTemplate) {\n // Click on the inner div that has the controller\n const innerDiv = firstTemplate.querySelector('[data-controller*=\"list-item\"]');\n if (innerDiv) {\n innerDiv.click();\n }\n } else {\n // No templates left, clear content area\n const contentArea = document.getElementById('welcome-messages-content');\n if (contentArea) {\n contentArea.textContent = '';\n }\n }\n }\n }\n}\n", "import { Controller } from '../stimulus';\n\nexport default class extends Controller {\n\n click(event) {\n event.preventDefault();\n\n // Get the selected template ID\n const templateIdField = document.getElementById('welcome_message_id');\n const templateId = templateIdField ? templateIdField.value : '';\n\n // Build the URL with the template ID parameter\n const baseUrl = this.element.dataset.url;\n let url = baseUrl;\n\n if (templateId) {\n // Check if the URL already has query parameters\n const separator = baseUrl.includes('?') ? '&' : '?';\n url = `${baseUrl}${separator}h=${templateId}`;\n }\n\n // Open in new tab\n const tab = window.open(url, '_blank');\n if (tab) {\n tab.focus();\n }\n }\n}\n\n", "import Select2BaseController from './select2_base_controller';\n\nexport default class extends Select2BaseController {\n\n connect() {\n // Set the correct select element first\n this.selectElement = this.element.querySelector('select');\n\n // Now initialize (this will use the correct selectElement)\n this.initializeSelect();\n\n // Set up Turbolinks cleanup\n this.setupTurbolinksHandlers();\n\n // Load welcome messages\n this.loadWelcomeMessages();\n }\n\n getEnhancementOptions() {\n return {\n width: '100%',\n placeholder: 'Select a template',\n escapeMarkup: function(markup) {\n return markup;\n },\n };\n }\n\n loadWelcomeMessages() {\n const url = this.element.dataset.url;\n const brandingId = this.element.dataset.branding;\n\n fetch(`${url}?branding_id=${brandingId}`)\n .then(response => response.json())\n .then(data => {\n this.populateOptions(data);\n this.setInitialValue();\n })\n .catch(_error => {\n // Error loading welcome messages\n });\n }\n\n populateOptions(welcomeMessages) {\n // Clear existing options\n this.selectElement.innerHTML = ' ![\"Loading...\"](\"/assets/bars.svg\")
\n ![\"Product](\"/path/to/image.jpg\"\n)
\n * \n * ![](\"/path/to/swatch-image.jpg\" "\\"Color")
\n * \n *