@o2vend/theme-cli 1.0.32

package/test-theme/assets/delivery-zone.css

@@ -0,0 +1,299 @@
+/**
+ * Delivery Zone Styles
+ */
+
+/* Header Zone Display */
+.header-delivery-zone {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-small);
+}
+
+.zone-selector {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-small);
+  padding: var(--spacing-small) var(--spacing-small);
+  background: none;
+  border: none;
+  border-bottom: 2px solid var(--color-error);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-decoration: none;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+}
+
+.zone-selector:hover {
+  opacity: 0.8;
+  border-bottom-color: var(--color-error);
+}
+
+.zone-selector svg {
+  width: var(--spacing-element);
+  height: var(--spacing-element);
+  color: var(--color-error);
+}
+
+.zone-name,
+.zone-zipcode {
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text);
+}
+
+.zone-zipcode {
+  opacity: 0.8;
+}
+
+/* Modal Styles (already in snippet, keeping for reference) */
+.delivery-zone-modal { 
+  position: fixed; 
+  inset: 0; 
+  z-index: 9999; 
+  display: none; 
+}
+
+.delivery-zone-modal.active { 
+  display: flex; 
+  align-items: center; 
+  justify-content: center; 
+}
+
+.delivery-zone-overlay { 
+  position: absolute; 
+  inset: 0; 
+  background: rgba(0, 0, 0, 0.5); 
+  backdrop-filter: blur(4px); 
+}
+
+.delivery-zone-panel { 
+  position: relative; 
+  background: var(--color-background); 
+  border-radius: var(--border-radius-large); 
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); 
+  width: 90%; 
+  max-width: 500px; 
+  max-height: 90vh; 
+  overflow: hidden; 
+  display: flex; 
+  flex-direction: column; 
+}
+
+.delivery-zone-header { 
+  display: flex; 
+  align-items: center; 
+  justify-content: space-between; 
+  padding: var(--spacing-component); 
+  border-bottom: 1px solid var(--color-border); 
+}
+
+.delivery-zone-title { 
+  margin: 0; 
+  font-size: 20px; 
+  font-weight: var(--font-weight-bold); 
+  color: var(--color-text); 
+}
+
+.delivery-zone-close { 
+  background: none; 
+  border: none; 
+  cursor: pointer; 
+  color: #6b7280; 
+  padding: 4px; 
+  display: flex; 
+  align-items: center; 
+  justify-content: center; 
+  transition: color 0.2s ease;
+}
+
+.delivery-zone-close:hover { 
+  color: var(--color-text); 
+}
+
+.delivery-zone-content { 
+  padding: var(--spacing-component); 
+  overflow-y: auto; 
+}
+
+.delivery-zone-form { 
+  display: flex; 
+  flex-direction: column; 
+  gap: 20px; 
+}
+
+.delivery-zone-input-group { 
+  position: relative; 
+  display: flex; 
+  align-items: center; 
+}
+
+.delivery-zone-input { 
+  width: 100%; 
+  padding: 14px 48px 14px 20px; 
+  border: 2px solid #a78bfa; 
+  border-radius: 12px; 
+  font-size: 16px; 
+  transition: all 0.2s ease; 
+  background: var(--color-background); 
+}
+
+.delivery-zone-input:focus { 
+  outline: none; 
+  border-color: var(--color-accent-dark); 
+  box-shadow: 0 0 0 3px rgba(from var(--color-accent) r g b / 0.1); 
+}
+
+.delivery-zone-search-icon { 
+  position: absolute; 
+  right: 16px; 
+  color: var(--color-accent-light); 
+  pointer-events: none; 
+}
+
+.delivery-zone-autodetect { 
+  display: flex; 
+  flex-direction: column; 
+  gap: 16px; 
+}
+
+.delivery-zone-detect-btn { 
+  display: flex; 
+  align-items: center; 
+  justify-content: center; 
+  gap: 8px; 
+  width: 100%; 
+  padding: 14px; 
+  font-size: 16px; 
+  font-weight: 600;
+}
+
+.delivery-zone-or-divider { 
+  display: flex; 
+  align-items: center; 
+  gap: 12px; 
+  text-transform: uppercase; 
+  font-size: 12px; 
+  font-weight: 600; 
+  color: #6b7280; 
+  text-align: center; 
+}
+
+.delivery-zone-or-divider::before,
+.delivery-zone-or-divider::after { 
+  content: ''; 
+  flex: 1; 
+  height: 1px; 
+  background: #e5e7eb; 
+}
+
+.delivery-zone-current { 
+  padding: 16px; 
+  background: #f3f4f6; 
+  border-radius: 8px; 
+  display: flex; 
+  flex-direction: column; 
+  gap: 4px; 
+}
+
+.delivery-zone-current-label { 
+  margin: 0; 
+  font-size: 12px; 
+  color: #6b7280; 
+  text-transform: uppercase; 
+  font-weight: 600; 
+}
+
+.delivery-zone-current-value { 
+  margin: 0; 
+  font-size: 14px; 
+  color: var(--color-text); 
+  font-weight: 600; 
+  display: flex; 
+  align-items: center; 
+  gap: 8px; 
+}
+
+.delivery-zone-error { 
+  padding: 12px 16px; 
+  background: #fef2f2; 
+  border: 1px solid #fecaca; 
+  border-radius: 8px; 
+  color: #991b1b; 
+  font-size: 14px; 
+}
+
+.delivery-zone-actions { 
+  display: flex; 
+  gap: 12px; 
+}
+
+.delivery-zone-submit { 
+  flex: 1; 
+  padding: 14px; 
+  font-size: 16px; 
+  font-weight: 600; 
+}
+
+.delivery-zone-loading { 
+  position: absolute; 
+  inset: 0; 
+  background: rgba(255, 255, 255, 0.95); 
+  display: flex; 
+  flex-direction: column; 
+  align-items: center; 
+  justify-content: center; 
+  gap: 16px; 
+}
+
+.spinner { 
+  width: 40px; 
+  height: 40px; 
+  border: 4px solid #e5e7eb; 
+  border-top-color: #a78bfa; 
+  border-radius: 50%; 
+  animation: spin 0.8s linear infinite; 
+}
+
+@keyframes spin { 
+  to { transform: rotate(360deg); } 
+}
+
+/* Mobile responsive */
+@media (max-width: 640px) {
+  .delivery-zone-panel { 
+    width: 100%; 
+    max-width: 100%; 
+    border-radius: 0; 
+    height: 100%; 
+    max-height: 100%; 
+  }
+  
+  .delivery-zone-header { 
+    padding: 16px; 
+  }
+  
+  .delivery-zone-content { 
+    padding: 16px; 
+  }
+  
+  .delivery-zone-title { 
+    font-size: 18px; 
+  }
+
+  .zone-selector {
+    padding: 6px 8px;
+    gap: 6px;
+  }
+
+  .zone-name,
+  .zone-zipcode {
+    font-size: 12px;
+  }
+
+  .zone-selector svg {
+    width: 14px;
+    height: 14px;
+  }
+}
+

package/test-theme/assets/delivery-zone.js

@@ -0,0 +1,396 @@
+/**
+ * Delivery Zone Selection JavaScript
+ * Handles modal interactions, API calls, and zone selection
+ */
+
+(function() {
+  'use strict';
+
+  // DOM elements - will be set in init()
+  let modal;
+  let overlay;
+  let closeBtn;
+  let form;
+  let zipcodeInput;
+  let citySelect;
+  let searchResults;
+  let detectBtn;
+  let errorDiv;
+  let loadingDiv;
+  let loadingCitiesDiv;
+
+  // State
+  let searchTimeout;
+  let currentMode = 0; // 0=Zipcode, 1=City, 2=AutoDetect
+
+  // Initialize
+  function init() {
+    // Get DOM elements now that they should be available
+    modal = document.getElementById('delivery-zone-modal');
+    overlay = modal?.querySelector('[data-zone-overlay]');
+    closeBtn = modal?.querySelector('[data-zone-close]');
+    form = document.getElementById('delivery-zone-form');
+    zipcodeInput = document.getElementById('delivery-zone-zipcode');
+    citySelect = document.getElementById('delivery-zone-city');
+    searchResults = document.getElementById('delivery-zone-search-results');
+    detectBtn = document.getElementById('detect-location-btn');
+    errorDiv = document.getElementById('delivery-zone-error');
+    loadingDiv = document.getElementById('delivery-zone-loading');
+    loadingCitiesDiv = document.getElementById('delivery-zone-loading-cities');
+    
+    if (!modal) {
+      return;
+    }
+
+    // Show modal on first visit if configured
+    const showModalValue = modal.dataset.showModal;
+    const showModal = showModalValue === 'true' || showModalValue === true;
+    
+    if (showModal) {
+      setTimeout(() => {
+        openModal();
+      }, 500);
+    }
+
+    // Event listeners
+    if (closeBtn) closeBtn.addEventListener('click', closeModal);
+    if (overlay) overlay.addEventListener('click', closeModal);
+    
+    // Form submission
+    if (form) {
+      form.addEventListener('submit', handleSubmit);
+    }
+
+    // Zipcode search with autocomplete
+    if (zipcodeInput) {
+      zipcodeInput.addEventListener('input', handleZipcodeSearch);
+      zipcodeInput.addEventListener('focus', handleZipcodeFocus);
+    }
+
+    // Geolocation for AutoDetect mode
+    if (detectBtn) {
+      detectBtn.addEventListener('click', handleGeolocation);
+    }
+
+    // City selector initialization
+    if (citySelect) {
+      loadCities();
+    }
+
+    // Header zone selector (if exists)
+    const headerZoneBtn = document.querySelector('[data-zone-toggle]');
+    if (headerZoneBtn) {
+      headerZoneBtn.addEventListener('click', openModal);
+    }
+
+    // Detect mode from DOM
+    if (zipcodeInput && searchResults) {
+      currentMode = 0; // Zipcode mode
+    } else if (citySelect) {
+      currentMode = 1; // City mode
+    } else if (detectBtn) {
+      currentMode = 2; // AutoDetect mode
+    }
+  }
+
+  // Modal functions
+  function openModal() {
+    if (modal) {
+      modal.classList.add('active');
+      document.body.style.overflow = 'hidden';
+      
+      // Focus first input
+      setTimeout(() => {
+        if (zipcodeInput) {
+          zipcodeInput.focus();
+        } else if (citySelect) {
+          citySelect.focus();
+        }
+      }, 100);
+    }
+  }
+
+  function closeModal() {
+    if (modal) {
+      modal.classList.remove('active');
+      document.body.style.overflow = '';
+      
+      // Clear form state
+      if (searchResults) {
+        searchResults.style.display = 'none';
+      }
+      if (errorDiv) {
+        errorDiv.style.display = 'none';
+      }
+    }
+  }
+
+  // Handle form submission
+  async function handleSubmit(e) {
+    e.preventDefault();
+    showLoading(true);
+    hideError();
+
+    let zoneId = null;
+    let zipcode = null;
+
+    try {
+      if (currentMode === 0) {
+        // Zipcode mode
+        zipcode = zipcodeInput.value.trim();
+        if (!zipcode) {
+          throw new Error('Please enter a valid zipcode');
+        }
+
+        // Get zone by zipcode
+        const response = await fetch(`/webstoreapi/delivery-zone/by-zipcode/${zipcode}`);
+        const data = await response.json();
+
+        if (!data.success || !data.data || data.data.length === 0) {
+          throw new Error('No delivery zones found for this zipcode');
+        }
+
+        zoneId = data.data[0].zoneId;
+      } else if (currentMode === 1) {
+        // City mode
+        zoneId = citySelect.value;
+        if (!zoneId) {
+          throw new Error('Please select a city');
+        }
+      } else if (currentMode === 2) {
+        // AutoDetect mode - should have been handled by geolocation
+        zipcode = zipcodeInput.value.trim();
+        if (!zipcode) {
+          throw new Error('Please detect location or enter a zipcode');
+        }
+
+        const response = await fetch(`/webstoreapi/delivery-zone/by-zipcode/${zipcode}`);
+        const data = await response.json();
+
+        if (!data.success || !data.data || data.data.length === 0) {
+          throw new Error('No delivery zones found for this zipcode');
+        }
+
+        zoneId = data.data[0].zoneId;
+      }
+
+      // Set zone cookie
+      const setResponse = await fetch('/webstoreapi/delivery-zone/select', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ zoneId, zipcode })
+      });
+
+      const setData = await setResponse.json();
+
+      if (!setData.success) {
+        throw new Error(setData.error || 'Failed to set delivery zone');
+      }
+
+      // Success - reload page to show filtered products
+      window.location.reload();
+    } catch (error) {
+      console.error('Error setting delivery zone:', error);
+      showError(error.message);
+      showLoading(false);
+    }
+  }
+
+  // Handle zipcode search with autocomplete
+  function handleZipcodeSearch(e) {
+    const query = e.target.value.trim();
+
+    if (searchTimeout) {
+      clearTimeout(searchTimeout);
+    }
+
+    if (query.length < 2) {
+      if (searchResults) {
+        searchResults.style.display = 'none';
+      }
+      return;
+    }
+
+    // Debounce search
+    searchTimeout = setTimeout(() => {
+      searchZipcodes(query);
+    }, 300);
+  }
+
+  function handleZipcodeFocus() {
+    // Show recent results if input has value
+    if (zipcodeInput && zipcodeInput.value.trim().length >= 2) {
+      searchZipcodes(zipcodeInput.value.trim());
+    }
+  }
+
+  async function searchZipcodes(query) {
+    try {
+      const response = await fetch(`/webstoreapi/delivery-zone/search-zipcodes?q=${encodeURIComponent(query)}`);
+      const data = await response.json();
+
+      if (!searchResults) return;
+
+      if (!data.success || !data.data || data.data.length === 0) {
+        searchResults.innerHTML = `
+          <div class="delivery-zone-search-empty">
+            No locations found
+          </div>
+        `;
+        searchResults.style.display = 'block';
+        return;
+      }
+
+      // Render results
+      searchResults.innerHTML = data.data.map(result => `
+        <div class="delivery-zone-search-result" data-zipcode="${result.zipcode}">
+          <div class="delivery-zone-result-zipcode">${result.zipcode}</div>
+          ${result.displayName ? `<div class="delivery-zone-result-details">${result.displayName}</div>` : ''}
+        </div>
+      `).join('');
+
+      // Add click handlers
+      const resultItems = searchResults.querySelectorAll('.delivery-zone-search-result');
+      resultItems.forEach(item => {
+        item.addEventListener('click', () => {
+          const zipcode = item.dataset.zipcode;
+          zipcodeInput.value = zipcode;
+          searchResults.style.display = 'none';
+          form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
+        });
+      });
+
+      searchResults.style.display = 'block';
+    } catch (error) {
+      console.error('Error searching zipcodes:', error);
+      if (searchResults) {
+        searchResults.style.display = 'none';
+      }
+    }
+  }
+
+  // Handle geolocation
+  function handleGeolocation(e) {
+    e.preventDefault();
+
+    if (!navigator.geolocation) {
+      showError('Geolocation is not supported by your browser');
+      return;
+    }
+
+    detectBtn.disabled = true;
+    detectBtn.innerHTML = `
+      <div class="spinner-small"></div>
+      Detecting...
+    `;
+
+    navigator.geolocation.getCurrentPosition(
+      async (position) => {
+        try {
+          const { latitude, longitude } = position.coords;
+          
+          // Reverse geocode to zipcode
+          // Note: You may need to implement or use a service for this
+          // For now, show error asking user to enter manually
+          showError('Please enter your zipcode manually. Geolocation to zipcode conversion coming soon.');
+          detectBtn.disabled = false;
+          detectBtn.innerHTML = `
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M12 2v20M2 12h20"/>
+            </svg>
+            Detect My Location
+          `;
+        } catch (error) {
+          console.error('Error reverse geocoding:', error);
+          showError('Could not determine your location. Please enter zipcode manually.');
+          detectBtn.disabled = false;
+          detectBtn.innerHTML = `
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M12 2v20M2 12h20"/>
+            </svg>
+            Detect My Location
+          `;
+        }
+      },
+      (error) => {
+        console.error('Geolocation error:', error);
+        showError('Could not detect your location. Please enter zipcode manually.');
+        detectBtn.disabled = false;
+        detectBtn.innerHTML = `
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M12 2v20M2 12h20"/>
+          </svg>
+          Detect My Location
+        `;
+      }
+    );
+  }
+
+  // Load cities
+  async function loadCities() {
+    if (!citySelect || !loadingCitiesDiv) return;
+
+    try {
+      loadingCitiesDiv.classList.add('active');
+      const response = await fetch('/webstoreapi/delivery-zone/cities');
+      const data = await response.json();
+
+      if (!data.success || !data.data || data.data.length === 0) {
+        throw new Error('No cities available');
+      }
+
+      // Populate city select
+      citySelect.innerHTML = '<option value="">Select a city</option>' +
+        data.data.map(city => `
+          <option value="${city.zoneId}">
+            ${city.zoneName}
+          </option>
+        `).join('');
+
+      loadingCitiesDiv.classList.remove('active');
+    } catch (error) {
+      console.error('Error loading cities:', error);
+      if (citySelect) {
+        citySelect.innerHTML = '<option value="">Error loading cities</option>';
+      }
+      loadingCitiesDiv.classList.remove('active');
+    }
+  }
+
+  // Utility functions
+  function showLoading(show) {
+    if (loadingDiv) {
+      loadingDiv.style.display = show ? 'flex' : 'none';
+    }
+  }
+
+  function showError(message) {
+    if (errorDiv) {
+      errorDiv.textContent = message;
+      errorDiv.style.display = 'block';
+    }
+  }
+
+  function hideError() {
+    if (errorDiv) {
+      errorDiv.style.display = 'none';
+    }
+  }
+
+  // Close modal on ESC key
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && modal?.classList.contains('active')) {
+      closeModal();
+    }
+  });
+
+  // Initialize on DOM ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();
+