@o2vend/theme-cli 1.0.32

package/test-theme/templates/address-book.liquid

@@ -0,0 +1,1092 @@
+{% layout 'layout/theme' %}
+
+<section class="account-page">
+  <div class="container">
+    <div class="account-header">
+      <h1 class="account-title">My Addresses</h1>
+      <p class="account-subtitle">
+        Manage your saved shipping and billing addresses
+      </p>
+    </div>
+
+    <div class="account-layout">
+
+      <!-- Sidebar -->
+      <aside class="account-sidebar">
+        {% render 'snippets/account-sidebar' %}
+      </aside>
+
+      <!-- Content -->
+      <div class="account-content">
+
+        <div class="account-section-header">
+          <h2 class="account-section-title">Saved Addresses</h2>
+
+          <button class="btn btn-primary btn-sm" id="add-address-btn">
+           + Add Address
+          </button>
+        </div>
+
+        <div class="addresses-list">
+          {% if addresses and addresses.size > 0 %}
+            {% for address in addresses %}
+              <div class="address-card">
+
+                <div class="address-card-header">
+                  <div>
+                    <h4 class="address-name">{{ address.contactName }}</h4>
+                    <span class="address-type-badge">
+                      {{ address.addressType }}
+                    </span>
+                  </div>
+
+                  {% if address.isDefaultShipping or address.isDefaultBilling %}
+                    <span class="default-badge">
+                      {% if address.isDefaultShipping %}Default Shipping{% endif %}
+                      {% if address.isDefaultBilling %}Default Billing{% endif %}
+                    </span>
+                  {% endif %}
+                </div>
+
+                <div class="address-card-body">
+                  <p>{{ address.addressLine1 }}</p>
+
+                  {% if address.addressLine2 %}
+                    <p>{{ address.addressLine2 }}</p>
+                  {% endif %}
+
+                  <p>
+                    {{ address.city }}
+                    {% if address.districtName %}, {{ address.districtName }}{% endif %}
+                  </p>
+
+                  <p>{{ address.stateOrProvinceName }} – {{ address.zipCode }}</p>
+                  <p>{{ address.countryName }}</p>
+
+                  {% if address.phone %}
+                    <p class="address-phone">📞 {{ address.phone }}</p>
+                  {% endif %}
+                </div>
+
+                <div class="address-card-actions">
+                  <button class="btn btn-outline btn-sm edit-address" data-address-id="{{ address.id }}">Edit</button>
+                  <button class="btn btn-outline-danger btn-sm delete-address" data-address-id="{{ address.id }}">
+                    <span class="btn-text">Delete</span>
+                    <span class="btn-loading" style="display: none;">
+                      <span class="btn-spinner"></span>
+                      <span>Deleting...</span>
+                    </span>
+                  </button>
+                </div>
+
+              </div>
+            {% endfor %}
+          {% else %}
+            <div class="empty-state">
+              <div class="empty-icon">📍</div>
+              <h3>No Saved Addresses</h3>
+              <p>Add an address to make checkout faster.</p>
+              <button class="btn btn-primary" id="add-first-address-btn"> + Add Address</button>
+            </div>
+          {% endif %}
+        </div>
+
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+:root {
+  --color-primary: #2563eb;
+  --color-primary-hover: #1d4ed8;
+  --color-primary-light: #dbeafe;
+  --color-success: #10b981;
+  --color-success-light: #d1fae5;
+  --color-danger: #ef4444;
+  --color-danger-hover: #dc2626;
+  --color-danger-light: #fee2e2;
+  --color-text: #1f2937;
+  --color-text-light: #6b7280;
+  --color-background: #f9fafb;
+  --color-card-bg: #ffffff;
+  --color-border: #e5e7eb;
+  --color-border-light: #f3f4f6;
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --spacing-xs: 0.5rem;
+  --spacing-sm: 1rem;
+  --spacing-md: 1.5rem;
+  --spacing-lg: 2rem;
+  --spacing-xl: 3rem;
+}
+/* Page */
+.account-page {
+  padding: 3rem 1rem;
+  background: #f9fafb;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 var(--spacing-sm);
+}
+
+/* Header */
+.account-header {
+  text-align: center;
+  margin-bottom: 3rem;
+}
+
+.account-title {
+  font-size: 2.5rem;
+  font-weight: 700;
+}
+
+.account-subtitle {
+  color: #6b7280;
+}
+
+/* Layout */
+.account-layout {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  gap: 2rem;
+}
+
+.account-sidebar,
+.account-content {
+  background: #fff;
+  border-radius: 14px;
+  padding: 1.75rem;
+  border: 1px solid #e5e7eb;
+}
+
+/* Section header */
+.account-section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+}
+
+.account-section-title {
+  font-size: 1.6rem;
+  font-weight: 600;
+}
+
+/* Address Grid */
+.addresses-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 1.5rem;
+}
+
+/* Address Card */
+.address-card {
+  background: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 14px;
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  transition: all .25s ease;
+}
+
+.address-card:hover {
+  background: #fff;
+  box-shadow: 0 10px 25px rgba(0,0,0,.06);
+  transform: translateY(-3px);
+}
+
+/* Card Header */
+.address-card-header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: .75rem;
+}
+
+.address-name {
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+/* Badges */
+.address-type-badge {
+  font-size: 1.1rem;
+  padding: 5px;
+  border-radius: 5px;
+  background:black;
+  color:white;
+  font-weight: 600;
+}
+
+.default-badge {
+  background: #dcfce7;
+  color: #166534;
+  font-size: .7rem;
+  padding: .3rem .6rem;
+  border-radius: 999px;
+  font-weight: 600;
+}
+
+/* Body */
+.address-card-body p {
+  margin: .25rem 0;
+  color: #374151;
+  font-size: 1.5rem;
+}
+
+.address-phone {
+  margin-top: .5rem;
+  font-weight: 500;
+}
+
+/* Actions */
+.address-card-actions {
+  display: flex;
+  gap: 1.75rem;
+ justify-content: flex-end;
+}
+
+/* Buttons */
+.btn {
+  padding: 10px;
+  border-radius: 5px;
+  font-size:  1.5rem;;
+  cursor: pointer;
+}
+
+.btn-primary {
+
+  border: none;
+}
+
+.btn-outline {
+  background: transparent;
+  border: 1px solid #d1d5db;
+}
+
+.btn-outline-danger {
+  background: transparent;
+  border: 1px solid #fecaca;
+  color: #dc2626;
+}
+
+/* Empty State */
+.empty-state {
+  grid-column: 1 / -1;
+  text-align: center;
+  padding: 4rem 2rem;
+  border: 2px dashed #e5e7eb;
+  border-radius: 14px;
+}
+
+.empty-icon {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+}
+
+/* Mobile */
+@media (max-width: 768px) {
+  .account-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .account-section-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+
+  .addresses-list {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Address Modal Styles */
+.address-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1050;
+  display: none;
+}
+
+.address-modal.show {
+  display: block;
+}
+
+.address-modal-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  cursor: pointer;
+}
+
+.address-modal-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: white;
+  border-radius: 14px;
+  padding: 2rem;
+  max-width: 600px;
+  width: 90%;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
+}
+
+.address-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  border-bottom: 1px solid #d1d5db;
+}
+
+.address-modal-close {
+  background: none;
+  border: none;
+  font-size: 2rem;
+  cursor: pointer;
+  color: #6b7280;
+  line-height: 1;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  transition: background 0.2s;
+}
+
+.address-modal-close:hover {
+  background: #f3f4f6;
+}
+
+.address-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.form-label {
+  font-size: 1.7rem;
+  font-weight: 500;
+  color: #374151;
+}
+
+.form-input {
+  padding: 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  font-size: 1.5rem;
+  transition: border-color 0.2s;
+}
+
+/* intl-tel-input styling for address book */
+#address-phone {
+  padding-left: 3.5rem;
+}
+
+.iti {
+  width: 100%;
+}
+
+.iti__flag-container {
+  z-index: 1;
+}
+
+.iti__selected-flag {
+  padding: 0 0.75rem 0 0.5rem;
+  border-right: 1px solid #d1d5db;
+}
+
+.iti__selected-flag:hover {
+  background-color: #f9fafb;
+}
+
+.iti__country-list {
+  z-index: 1051;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.iti__country {
+  padding: 0.5rem 0.75rem;
+}
+
+.iti__country:hover,
+.iti__country.iti__highlight {
+  background-color: #dbeafe;
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: #2563eb;
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+.form-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.form-checkbox input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+}
+
+.form-actions {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-end;
+  margin-top: 1rem;
+}
+
+/* Button loading states */
+.btn.loading {
+  opacity: 0.7;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.btn-loading {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.btn-spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.btn-sm .btn-spinner {
+  width: 12px;
+  height: 12px;
+  border-width: 1.5px;
+}
+
+@media (max-width: 768px) {
+  .form-row {
+    grid-template-columns: 1fr;
+  }
+  
+  .address-modal-content {
+    width: 95%;
+    padding: 1.5rem;
+  }
+}
+
+</style>
+
+<!-- Address Form Modal -->
+<div class="address-modal" id="address-modal">
+  <div class="address-modal-overlay" data-address-modal-close></div>
+  <div class="address-modal-content">
+    <div class="address-modal-header">
+      <h3 id="address-modal-title">Add New Address</h3>
+      <button class="address-modal-close" data-address-modal-close aria-label="Close">×</button>
+    </div>
+    <form class="address-form" id="address-form" action="/webstoreapi/addresses" method="post">
+      <input type="hidden" name="addressId" id="address-id">
+      
+      <div class="form-group">
+        <label for="address-first-name" class="form-label">First Name</label>
+        <input type="text" id="address-first-name" name="firstName" class="form-input" required>
+      </div>
+
+      <div class="form-group">
+        <label for="address-last-name" class="form-label">Last Name</label>
+        <input type="text" id="address-last-name" name="lastName" class="form-input">
+      </div>
+
+      <div class="form-group">
+        <label for="address-address" class="form-label">Address Line1</label>
+        <input type="text" id="address-address" name="address" class="form-input" required>
+      </div>
+
+      <div class="form-group">
+        <label for="address-address2" class="form-label">Address Line 2</label>
+        <input type="text" id="address-address2" name="address2" class="form-input">
+      </div>
+
+      <div class="form-group">
+        <label for="address-city" class="form-label">City</label>
+        <input type="text" id="address-city" name="city" class="form-input" required>
+      </div>
+
+      <div class="form-row">
+        <div class="form-group">
+          <label for="address-state" class="form-label">State/Province</label>
+          <select id="address-state" name="state" class="form-input" required>
+            <option value="">Select a state</option>
+          </select>
+        </div>
+
+        <div class="form-group">
+          <label for="address-zip" class="form-label">ZIP/Postal Code</label>
+          <input type="text" id="address-zip" name="zip" class="form-input" required>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="address-country" class="form-label">Country</label>
+        <select id="address-country" name="country" class="form-input" required>
+          <option value="">Select a country</option>
+          {% if countries and countries.size > 0 %}
+            {% for country in countries %}
+              <option value="{{ country.id }}" data-country-code2="{{ country.code2 | default: country.code }}">{{ country.name }}</option>
+            {% endfor %}
+          {% else %}
+            <option value="US">United States</option>
+            <option value="CA">Canada</option>
+            <option value="GB">United Kingdom</option>
+            <option value="AU">Australia</option>
+            <option value="IN">India</option>
+          {% endif %}
+        </select>
+      </div>
+
+      <div class="form-group">
+        <label for="address-phone" class="form-label">Phone</label>
+        <input type="tel" id="address-phone" name="phone" class="form-input">
+      </div>
+
+      <div class="form-group">
+        <label class="form-checkbox">
+          <input type="checkbox" name="isDefault" id="address-is-default">
+          <span>Set as default address</span>
+        </label>
+      </div>
+
+      <div class="form-actions">
+        <button type="button" class="btn btn-outline" data-address-modal-close>Cancel</button>
+        <button type="submit" class="btn btn-primary" id="save-address-btn">
+          <span class="btn-text">Save Address</span>
+          <span class="btn-loading" style="display: none;">
+            <span class="btn-spinner"></span>
+            <span>Saving...</span>
+          </span>
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
+
+<script>
+  // Button loading utility function
+  function setButtonLoading(button, loading, loadingText = null) {
+    if (!button) return;
+    
+    const btnText = button.querySelector('.btn-text');
+    const btnLoading = button.querySelector('.btn-loading');
+    
+    if (loading) {
+      button.disabled = true;
+      button.classList.add('loading');
+      if (btnText) btnText.style.display = 'none';
+      if (btnLoading) {
+        btnLoading.style.display = 'flex';
+        if (loadingText && btnLoading.querySelector('span:last-child')) {
+          btnLoading.querySelector('span:last-child').textContent = loadingText;
+        }
+      } else if (loadingText) {
+        button.textContent = loadingText;
+      }
+    } else {
+      button.disabled = false;
+      button.classList.remove('loading');
+      if (btnText) btnText.style.display = 'inline';
+      if (btnLoading) btnLoading.style.display = 'none';
+    }
+  }
+
+  document.addEventListener('DOMContentLoaded', function() {
+    const modal = document.getElementById('address-modal');
+    const openButtons = document.querySelectorAll('#add-address-btn, #add-first-address-btn, .edit-address');
+    const closeButtons = document.querySelectorAll('[data-address-modal-close]');
+    const form = document.getElementById('address-form');
+    const addresses = {% if addresses %}{{ addresses | json }}{% else %}[]{% endif %};
+    const COUNTRIES_DATA = {% if countries %}{{ countries | json }}{% else %}[]{% endif %};
+    let addressPhoneIti = null;
+
+    // Helper function to get states for a country
+    function getStatesForCountry(countryIdentifier) {
+      if (!countryIdentifier) return null;
+      
+      // Try to parse as number (country ID)
+      const countryId = parseInt(countryIdentifier, 10);
+      const isNumericId = !isNaN(countryId);
+      
+      if (!Array.isArray(COUNTRIES_DATA) || COUNTRIES_DATA.length === 0) {
+        return null;
+      }
+      
+      // Find country by ID or code
+      const country = COUNTRIES_DATA.find(c => {
+        if (isNumericId) {
+          const cId = c.id || c.countryId;
+          if (cId === countryId || String(cId) === String(countryId)) {
+            return true;
+          }
+        }
+        
+        const cCode2 = c.code2 || '';
+        const cCode = c.code || '';
+        const cCountryCode = c.countryCode || '';
+        
+        return cCode2 === countryIdentifier ||
+               cCode === countryIdentifier ||
+               cCountryCode === countryIdentifier ||
+               String(c.id) === String(countryIdentifier);
+      });
+      
+      if (country) {
+        if (country.statesOrProvinces && Array.isArray(country.statesOrProvinces)) {
+          return country.statesOrProvinces;
+        }
+        if (country.states && Array.isArray(country.states)) {
+          return country.states;
+        }
+      }
+      
+      return null;
+    }
+
+    // Populate states dropdown based on selected country
+    function populateStates(countrySelect, stateSelect, selectedStateId = null, selectedStateName = null) {
+      if (!stateSelect || !countrySelect) {
+        return;
+      }
+      
+      const countryIdentifier = countrySelect.value;
+      
+      // Clear existing options
+      stateSelect.innerHTML = '<option value="">Select a state</option>';
+      
+      if (!countryIdentifier) {
+        return;
+      }
+      
+      // Get states for the selected country
+      const countryStates = getStatesForCountry(countryIdentifier);
+      
+      if (!countryStates || !Array.isArray(countryStates) || countryStates.length === 0) {
+        // If no states found, convert to text input
+        const formGroup = stateSelect.closest('.form-group');
+        if (formGroup) {
+          let textInput = document.getElementById('address-state-text');
+          if (!textInput) {
+            textInput = document.createElement('input');
+            textInput.type = 'text';
+            textInput.id = 'address-state-text';
+            textInput.name = 'state';
+            textInput.className = 'form-input';
+            textInput.required = true;
+            textInput.placeholder = 'Enter state/province';
+            formGroup.appendChild(textInput);
+          }
+          stateSelect.style.display = 'none';
+          stateSelect.removeAttribute('required');
+          textInput.style.display = 'block';
+          textInput.required = true;
+          if (selectedStateName) {
+            textInput.value = selectedStateName;
+          } else if (selectedStateId) {
+            textInput.value = selectedStateId;
+          }
+        }
+        return;
+      }
+      
+      // Show select and hide text input if it exists
+      const textInput = document.getElementById('address-state-text');
+      if (textInput) {
+        textInput.style.display = 'none';
+        textInput.removeAttribute('required');
+      }
+      stateSelect.style.display = 'block';
+      stateSelect.required = true;
+      
+      // Populate the dropdown
+      countryStates.forEach(state => {
+        const option = document.createElement('option');
+        const stateId = state.id || state.stateOrProvinceId || state.stateId;
+        const stateName = state.name || state.label || '';
+        
+        // Use stateId as the value (required by API)
+        option.value = stateId ? String(stateId) : '';
+        option.textContent = stateName;
+        if (stateId) {
+          option.dataset.stateId = String(stateId);
+        }
+        
+        // Check if this should be selected
+        if (selectedStateId) {
+          const selectedStateStr = String(selectedStateId).toLowerCase();
+          const stateIdStr = stateId ? String(stateId).toLowerCase() : '';
+          
+          if (stateIdStr && stateIdStr === selectedStateStr) {
+            option.selected = true;
+          }
+        }
+        
+        // Also check by name if provided
+        if (!option.selected && selectedStateName) {
+          const selectedStateNameStr = String(selectedStateName).toLowerCase();
+          const stateNameStr = String(stateName).toLowerCase();
+          
+          if (stateNameStr === selectedStateNameStr || stateNameStr.includes(selectedStateNameStr)) {
+            option.selected = true;
+          }
+        }
+        
+        stateSelect.appendChild(option);
+      });
+    }
+
+    // Initialize intl-tel-input for address phone
+    function initializeAddressPhoneInput() {
+      const phoneInput = document.getElementById('address-phone');
+      if (phoneInput && typeof intlTelInput !== 'undefined') {
+        // Destroy existing instance if any
+        if (addressPhoneIti) {
+          addressPhoneIti.destroy();
+          addressPhoneIti = null;
+        }
+        
+        // Get country code from country select
+        const countrySelect = document.getElementById('address-country');
+        let initialCountry = 'auto';
+        
+        if (countrySelect && countrySelect.value) {
+          const countryCode = countrySelect.options[countrySelect.selectedIndex]?.getAttribute('data-country-code2') || 
+                             countrySelect.value.toLowerCase();
+          initialCountry = countryCode.toLowerCase();
+        }
+        
+        // Initialize intl-tel-input
+        addressPhoneIti = intlTelInput(phoneInput, {
+          utilsScript: 'https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.0/build/js/utils.js',
+          initialCountry: initialCountry,
+          preferredCountries: ['us', 'gb', 'ca', 'au', 'in'],
+          separateDialCode: true,
+          nationalMode: false
+        });
+        
+        // Update country when address country changes
+        if (countrySelect) {
+          countrySelect.addEventListener('change', function() {
+            const countryCode = this.options[this.selectedIndex]?.getAttribute('data-country-code2') || 
+                               this.value.toLowerCase();
+            if (addressPhoneIti && countryCode) {
+              addressPhoneIti.setCountry(countryCode.toLowerCase());
+            }
+            
+            // Populate states when country changes
+            const stateSelect = document.getElementById('address-state');
+            if (stateSelect) {
+              populateStates(countrySelect, stateSelect);
+            }
+          });
+        }
+      }
+    }
+
+    function openModal(addressId = null) {
+      const countrySelect = document.getElementById('address-country');
+      const stateSelect = document.getElementById('address-state');
+      
+      if (addressId) {
+        // Load address data for editing
+        const address = addresses.find(a => a.id == addressId);
+        if (address) {
+          document.getElementById('address-modal-title').textContent = 'Edit Address';
+          document.getElementById('address-id').value = addressId;
+          document.getElementById('address-first-name').value = address.contactName || '';
+          document.getElementById('address-last-name').value = address.lastName || '';
+          document.getElementById('address-address').value = address.addressLine1 || '';
+          document.getElementById('address-address2').value = address.addressLine2 || '';
+          document.getElementById('address-city').value = address.city || '';
+          document.getElementById('address-zip').value = address.zipCode || '';
+          
+          // Set country - try to find matching country by ID or code
+          let selectedCountryId = address.countryId || '';
+          if (!selectedCountryId && address.countryCode && Array.isArray(COUNTRIES_DATA)) {
+            // Find country by code if we don't have countryId
+            const country = COUNTRIES_DATA.find(c => 
+              c.code2 === address.countryCode || 
+              c.code === address.countryCode ||
+              c.countryCode === address.countryCode
+            );
+            if (country) {
+              selectedCountryId = country.id;
+            }
+          }
+          
+          if (countrySelect && selectedCountryId) {
+            countrySelect.value = String(selectedCountryId);
+          }
+          
+          document.getElementById('address-phone').value = address.phone || '';
+          document.getElementById('address-is-default').checked = address.isDefaultShipping || address.isDefaultBilling || false;
+          
+          // Update form action for PUT request
+          form.action = `/webstoreapi/addresses/${addressId}`;
+          form.setAttribute('data-method', 'put');
+          
+          // Populate states after country is set (with a small delay to ensure DOM is updated)
+          if (countrySelect && stateSelect && selectedCountryId) {
+            const stateOrProvinceId = address.stateOrProvinceId || null;
+            const stateOrProvinceName = address.stateOrProvinceName || null;
+            setTimeout(() => {
+              populateStates(countrySelect, stateSelect, stateOrProvinceId, stateOrProvinceName);
+            }, 50);
+          }
+        }
+      } else {
+        document.getElementById('address-modal-title').textContent = 'Add New Address';
+        document.getElementById('address-id').value = '';
+        form.reset();
+        form.action = '/webstoreapi/addresses';
+        form.removeAttribute('data-method');
+        
+        // Reset state dropdown
+        if (stateSelect) {
+          stateSelect.innerHTML = '<option value="">Select a state</option>';
+        }
+      }
+      modal.classList.add('show');
+      document.body.style.overflow = 'hidden';
+      
+      // Initialize phone input after modal is shown
+      setTimeout(function() {
+        initializeAddressPhoneInput();
+        // Set phone number if editing (after initialization completes)
+        if (addressId) {
+          setTimeout(function() {
+            const address = addresses.find(a => a.id == addressId);
+            if (address && address.phone && addressPhoneIti) {
+              addressPhoneIti.setNumber(address.phone);
+            }
+          }, 150);
+        }
+      }, 100);
+    }
+
+    function closeModal() {
+      modal.classList.remove('show');
+      document.body.style.overflow = '';
+      form.reset();
+      // Destroy phone input instance when modal closes
+      if (addressPhoneIti) {
+        addressPhoneIti.destroy();
+        addressPhoneIti = null;
+      }
+    }
+
+    openButtons.forEach(btn => {
+      btn.addEventListener('click', function() {
+        const addressId = this.dataset.addressId || null;
+        openModal(addressId);
+      });
+    });
+
+    closeButtons.forEach(btn => {
+      btn.addEventListener('click', closeModal);
+    });
+
+    // Handle form submission
+    form.addEventListener('submit', async function(e) {
+      e.preventDefault();
+      
+      const submitBtn = document.getElementById('save-address-btn');
+      setButtonLoading(submitBtn, true, 'Saving...');
+      
+      const formData = new FormData(form);
+      const addressId = formData.get('addressId');
+      const method = form.getAttribute('data-method')?.toUpperCase() || 'POST';
+      const url = method === 'PUT' ? `/webstoreapi/addresses/${addressId}` : '/webstoreapi/addresses';
+      
+      // Get phone number from intl-tel-input if available
+      let phoneNumber = formData.get('phone');
+      if (addressPhoneIti) {
+        const fullPhoneNumber = addressPhoneIti.getNumber();
+        if (fullPhoneNumber) {
+          // Remove leading + sign
+          phoneNumber = fullPhoneNumber.replace(/^\+/, '');
+        }
+      }
+      
+      // Derive country/state identifiers and names for API
+      const countrySelectEl = document.getElementById('address-country');
+      const stateSelectEl = document.getElementById('address-state');
+      const stateTextInput = document.getElementById('address-state-text');
+      
+      let countryCode = formData.get('country') || '';
+      let countryId = null;
+      let stateOrProvinceId = null;
+      let stateOrProvinceName = null;
+
+      if (countrySelectEl && countrySelectEl.value) {
+        const selectedOption = countrySelectEl.options[countrySelectEl.selectedIndex];
+        const parsedCountryId = parseInt(countrySelectEl.value, 10);
+        if (!Number.isNaN(parsedCountryId)) {
+          countryId = parsedCountryId;
+        }
+        const optionCode = selectedOption?.getAttribute('data-country-code2');
+        if (optionCode) {
+          countryCode = optionCode;
+        }
+      }
+
+      if (stateSelectEl && stateSelectEl.style.display !== 'none') {
+        const stateValue = stateSelectEl.value;
+        if (stateValue) {
+          const parsedStateId = parseInt(stateValue, 10);
+          if (!Number.isNaN(parsedStateId)) {
+            stateOrProvinceId = parsedStateId;
+          }
+        }
+        const selectedStateOption = stateSelectEl.options[stateSelectEl.selectedIndex];
+        if (selectedStateOption) {
+          stateOrProvinceName = selectedStateOption.textContent.trim();
+        }
+      } else if (stateTextInput && stateTextInput.style.display !== 'none') {
+        stateOrProvinceName = stateTextInput.value;
+      }
+
+      const data = {
+        firstName: formData.get('firstName'),
+        lastName: formData.get('lastName'),
+        addressLine1: formData.get('address'),
+        addressLine2: formData.get('address2'),
+        city: formData.get('city'),
+        stateOrProvinceId: stateOrProvinceId,
+        stateOrProvinceName: stateOrProvinceName,
+        zipCode: formData.get('zip'),
+        countryId: countryId,
+        countryCode: countryCode,
+        phone: phoneNumber,
+        isDefaultShipping: formData.get('isDefault') === 'on',
+        isDefaultBilling: formData.get('isDefault') === 'on'
+      };
+
+      try {
+        const response = await fetch(url, {
+          method: method,
+          headers: {
+            'Content-Type': 'application/json',
+            'X-Requested-With': 'XMLHttpRequest'
+          },
+          body: JSON.stringify(data)
+        });
+
+        if (response.ok) {
+          const responseData = await response.json();
+          const savedAddressId = responseData.data?.id || addressId;
+          
+          // Handle setting default address if checkbox is checked
+          const isDefault = formData.get('isDefault') === 'on';
+          if (isDefault && savedAddressId) {
+            try {
+              // Set as default shipping address
+              await fetch(`/webstoreapi/addresses/${savedAddressId}/set-default?addressType=Shipping`, {
+                method: 'PUT',
+                headers: {
+                  'X-Requested-With': 'XMLHttpRequest'
+                }
+              });
+            } catch (defaultError) {
+              console.warn('Failed to set default address:', defaultError);
+            }
+          }
+          
+          // Reload page to show updated addresses
+          window.location.reload();
+        } else {
+          const error = await response.json();
+          setButtonLoading(submitBtn, false);
+          alert('Error saving address: ' + (error.error || error.message || 'Unknown error'));
+        }
+      } catch (error) {
+        console.error('Error saving address:', error);
+        setButtonLoading(submitBtn, false);
+        alert('Error saving address. Please try again.');
+      }
+    });
+
+    // Handle delete
+    document.querySelectorAll('.delete-address').forEach(btn => {
+      btn.addEventListener('click', async function() {
+        if (confirm('Are you sure you want to delete this address?')) {
+          const addressId = this.dataset.addressId;
+          setButtonLoading(this, true, 'Deleting...');
+          
+          try {
+            const response = await fetch(`/webstoreapi/addresses/${addressId}`, {
+              method: 'DELETE',
+              headers: {
+                'X-Requested-With': 'XMLHttpRequest'
+              }
+            });
+
+            if (response.ok) {
+              window.location.reload();
+            } else {
+              const error = await response.json();
+              setButtonLoading(this, false);
+              alert('Error deleting address: ' + (error.error || error.message || 'Unknown error'));
+            }
+          } catch (error) {
+            console.error('Error deleting address:', error);
+            setButtonLoading(this, false);
+            alert('Error deleting address. Please try again.');
+          }
+        }
+      });
+    });
+  });
+</script>