@o2vend/theme-cli 1.0.37 → 1.0.38

package/test-theme/templates/account/profile.liquid

@@ -134,139 +134,534 @@
   </div>
 </section>
 
+<!-- Account Deletion Reason Modal -->
+<div class="deletion-modal-overlay" id="deletion-modal" style="display: none;">
+  <div class="deletion-modal">
+    <div class="deletion-modal-header">
+      <h3 class="deletion-modal-title">Delete Account</h3>
+      <button type="button" class="deletion-modal-close" id="deletion-modal-close" aria-label="Close">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <line x1="18" y1="6" x2="6" y2="18"></line>
+          <line x1="6" y1="6" x2="18" y2="18"></line>
+        </svg>
+      </button>
+    </div>
+    <div class="deletion-modal-body">
+      <p class="deletion-modal-warning">
+        <svg class="deletion-modal-warning-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
+          <line x1="12" y1="9" x2="12" y2="13"></line>
+          <line x1="12" y1="17" x2="12.01" y2="17"></line>
+        </svg>
+        This action is permanent and cannot be undone. All your data will be deleted.
+      </p>
+      <label class="deletion-modal-label" for="deletion-reason">
+        Please tell us why you want to delete your account <span class="required">*</span>
+      </label>
+      <textarea 
+        id="deletion-reason" 
+        class="deletion-modal-textarea" 
+        placeholder="Enter your reason for account deletion..."
+        rows="4"
+        required
+      ></textarea>
+      <p class="deletion-modal-error" id="deletion-reason-error" style="display: none;">
+        Please provide a reason for account deletion.
+      </p>
+    </div>
+    <div class="deletion-modal-footer">
+      <button type="button" class="btn btn-secondary" id="deletion-modal-cancel">Cancel</button>
+      <button type="button" class="btn btn-danger" id="deletion-modal-confirm">
+        <span class="btn-text">Delete My Account</span>
+        <span class="btn-loading" style="display: none;">
+          <svg class="spinner" viewBox="0 0 24 24">
+            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" fill="none" stroke-dasharray="32" stroke-linecap="round"></circle>
+          </svg>
+          Deleting...
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
+
 <script>
-  document.addEventListener('DOMContentLoaded', function() {
-    // Initialize intl-tel-input for profile phone
-    const profilePhoneInput = document.getElementById('profile-phone');
-    let profilePhoneIti = null;
-    
-    if (profilePhoneInput && typeof intlTelInput !== 'undefined') {
-      const existingPhone = profilePhoneInput.value || '';
-      
-      profilePhoneIti = intlTelInput(profilePhoneInput, {
-        utilsScript: 'https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.0/build/js/utils.js',
-        initialCountry: 'auto',
-        geoIpLookup: function(callback) {
-          fetch('https://ipapi.co/json/')
-            .then(res => res.json())
-            .then(data => callback(data.country_code ? data.country_code.toLowerCase() : 'us'))
-            .catch(() => callback('us'));
-        },
-        preferredCountries: ['us', 'gb', 'ca', 'au', 'in'],
-        separateDialCode: true,
-        nationalMode: false
-      });
-      
-      // Store instance for form submission
-      window.profilePhoneIti = profilePhoneIti;
-      
-      // Set existing phone number if available (after a small delay to ensure utils are loaded)
-      if (existingPhone) {
-        setTimeout(function() {
-          profilePhoneIti.setNumber(existingPhone);
-        }, 100);
+document.addEventListener('DOMContentLoaded', () => {
+
+  /* ===============================
+     Button Loading Utility
+  =============================== */
+  function setButtonLoading(button, loading) {
+    if (!button) return;
+
+    const btnText = button.querySelector('.btn-text');
+    const btnLoading = button.querySelector('.btn-loading');
+
+    button.disabled = loading;
+
+    if (btnText) btnText.style.display = loading ? 'none' : 'inline';
+    if (btnLoading) btnLoading.style.display = loading ? 'inline-flex' : 'none';
+  }
+
+  /* ===============================
+     Phone Input Initialization
+  =============================== */
+  let iti = null;
+  const phoneInput = document.getElementById('profile-phone');
+
+  if (phoneInput && typeof intlTelInput !== 'undefined') {
+    iti = intlTelInput(phoneInput, {
+      utilsScript: 'https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.0/build/js/utils.js',
+      initialCountry: 'auto',
+      geoIpLookup: (callback) => {
+        fetch('https://ipapi.co/json/')
+          .then(res => res.json())
+          .then(data => callback(data.country_code ? data.country_code.toLowerCase() : 'us'))
+          .catch(() => callback('us'));
+      },
+      separateDialCode: true,
+      nationalMode: false,
+      dropdownContainer: document.body
+    });
+  }
+
+  /* ===============================
+     Profile Form Submission
+  =============================== */
+  const profileForm = document.getElementById('profile-form');
+
+  if (profileForm) {
+    profileForm.addEventListener('submit', async (e) => {
+      e.preventDefault();
+
+      const submitBtn = document.getElementById('save-profile-btn');
+      setButtonLoading(submitBtn, true);
+
+      const formData = new FormData(profileForm);
+
+      let phoneNumber = formData.get('phone');
+      if (iti) {
+        const fullPhone = iti.getNumber();
+        if (fullPhone) {
+          phoneNumber = fullPhone.replace(/^\+/, '');
+        }
       }
-    }
-    
-    // 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;
+
+      const data = {
+        fullName: formData.get('firstName'),
+        email: formData.get('email'),
+        phoneNumber: phoneNumber
+      };
+
+      try {
+        const response = await fetch('/webstoreapi/customer/profile', {
+          method: 'PUT',
+          headers: {
+            'Content-Type': 'application/json',
+            'X-Requested-With': 'XMLHttpRequest'
+          },
+          body: JSON.stringify(data)
+        });
+
+        if (response.ok) {
+          window.location.reload();
+        } else {
+          const error = await response.json();
+          alert(error.message || 'Error updating profile');
+          setButtonLoading(submitBtn, false);
         }
-      } else {
-        button.disabled = false;
-        button.classList.remove('loading');
-        if (btnText) btnText.style.display = 'inline';
-        if (btnLoading) btnLoading.style.display = 'none';
+      } catch (error) {
+        console.error('Profile update error:', error);
+        alert('Error updating profile. Please try again.');
+        setButtonLoading(submitBtn, false);
       }
+    });
+  }
+
+  /* ===============================
+     Account Deletion Request
+  =============================== */
+  const deleteBtn = document.getElementById('request-account-deletion-btn');
+  const deletionModal = document.getElementById('deletion-modal');
+  const deletionModalClose = document.getElementById('deletion-modal-close');
+  const deletionModalCancel = document.getElementById('deletion-modal-cancel');
+  const deletionModalConfirm = document.getElementById('deletion-modal-confirm');
+  const deletionReasonTextarea = document.getElementById('deletion-reason');
+  const deletionReasonErrEl = document.getElementById('deletion-reason-error');
+
+  // Show modal
+  function showDeletionModal() {
+    if (deletionModal) {
+      deletionModal.style.display = 'flex';
+      deletionReasonTextarea.value = '';
+      deletionReasonErrEl.style.display = 'none';
+      deletionReasonTextarea.focus();
+      document.body.style.overflow = 'hidden';
     }
+  }
 
-    // Handle form submission
-    const profileForm = document.getElementById('profile-form');
-    if (profileForm) {
-      profileForm.addEventListener('submit', async function(e) {
-        e.preventDefault();
-        
-        const submitBtn = document.getElementById('save-profile-btn');
-        setButtonLoading(submitBtn, true, 'Saving...');
-        
-        const formData = new FormData(this);
-        
-        // Get phone number from intl-tel-input if available
-        let phoneNumber = formData.get('phone');
-        if (window.profilePhoneIti) {
-          const fullPhoneNumber = window.profilePhoneIti.getNumber();
-          if (fullPhoneNumber) {
-            // Remove leading + sign
-            phoneNumber = fullPhoneNumber.replace(/^\+/, '');
-          }
-        }
-        
-        const data = {
-          fullName: formData.get('firstName'),
-          phone: phoneNumber
-        };
-        
+  // Hide modal
+  function hideDeletionModal() {
+    if (deletionModal) {
+      deletionModal.style.display = 'none';
+      document.body.style.overflow = '';
+    }
+  }
+
+  // Set confirm button loading state
+  function setConfirmButtonLoading(loading) {
+    if (!deletionModalConfirm) return;
+    const btnText = deletionModalConfirm.querySelector('.btn-text');
+    const btnLoading = deletionModalConfirm.querySelector('.btn-loading');
+    
+    if (loading) {
+      deletionModalConfirm.disabled = true;
+      if (btnText) btnText.style.display = 'none';
+      if (btnLoading) btnLoading.style.display = 'inline-flex';
+    } else {
+      deletionModalConfirm.disabled = false;
+      if (btnText) btnText.style.display = '';
+      if (btnLoading) btnLoading.style.display = 'none';
+    }
+  }
+
+  // Submit deletion request
+  async function submitDeletionRequest() {
+    const reason = deletionReasonTextarea.value.trim();
+    
+    // Validate reason is provided
+    if (!reason) {
+      deletionReasonErrEl.style.display = 'block';
+      deletionReasonTextarea.focus();
+      return;
+    }
+    
+    deletionReasonErrEl.style.display = 'none';
+    setConfirmButtonLoading(true);
+
+    try {
+      const response = await fetch('/webstoreapi/customer/account/delete-request', {
+        method: 'POST',
+        credentials: 'same-origin',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-Requested-With': 'XMLHttpRequest'
+        },
+        body: JSON.stringify({ reason: reason })
+      });
+
+      const responseData = await response.json();
+      
+      if (response.ok) {
+        // Show success message from the API
+        const successMessage = responseData.data?.message || responseData.message || 'Account deletion request submitted successfully.';
+        alert(successMessage);
+
+        // Logout via API and then redirect to home as logged-out user.
         try {
-          const response = await fetch('/webstoreapi/customer/profile', {
-            method: 'PUT',
+          await fetch('/webstoreapi/customer/logout', {
+            method: 'POST',
+            credentials: 'same-origin',
             headers: {
-              'Content-Type': 'application/json',
+              'Accept': 'application/json',
               'X-Requested-With': 'XMLHttpRequest'
-            },
-            body: JSON.stringify(data)
+            }
           });
-          
-          if (response.ok) {
-            window.location.reload();
-          } else {
-            const error = await response.json();
-            setButtonLoading(submitBtn, false);
-            alert('Error updating profile: ' + (error.error || error.message || 'Unknown error'));
-          }
-        } catch (error) {
-          console.error('Error updating profile:', error);
-          setButtonLoading(submitBtn, false);
-          alert('Error updating profile. Please try again.');
+        } catch (logoutError) {
+          console.warn('Logout after deletion failed, redirecting to home anyway:', logoutError);
         }
-      });
+
+        window.location.replace('/');
+      } else {
+        alert(responseData.error || responseData.message || 'Error requesting account deletion');
+        setConfirmButtonLoading(false);
+      }
+    } catch (error) {
+      console.error('Account deletion error:', error);
+      alert('Error requesting account deletion. Please try again.');
+      setConfirmButtonLoading(false);
+    }
+  }
+
+  // Event listeners
+  if (deleteBtn) {
+    deleteBtn.addEventListener('click', showDeletionModal);
+  }
+
+  if (deletionModalClose) {
+    deletionModalClose.addEventListener('click', hideDeletionModal);
+  }
+
+  if (deletionModalCancel) {
+    deletionModalCancel.addEventListener('click', hideDeletionModal);
+  }
+
+  if (deletionModalConfirm) {
+    deletionModalConfirm.addEventListener('click', submitDeletionRequest);
+  }
+
+  // Close modal on overlay click
+  if (deletionModal) {
+    deletionModal.addEventListener('click', (e) => {
+      if (e.target === deletionModal) {
+        hideDeletionModal();
+      }
+    });
+  }
+
+  // Close modal on Escape key
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && deletionModal && deletionModal.style.display === 'flex') {
+      hideDeletionModal();
     }
   });
+
+  // Hide error when user starts typing
+  if (deletionReasonTextarea) {
+    deletionReasonTextarea.addEventListener('input', () => {
+      if (deletionReasonTextarea.value.trim()) {
+        deletionReasonErrEl.style.display = 'none';
+      }
+    });
+  }
+
+});
 </script>
 
+
 <style>
-/* Account profile page uses theme.css variables - no local :root needed */
-  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  --radius-sm: 0.375rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
-  --radius-xl: 1rem;
+:root {
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --radius-sm: var(--radius-md);
+  --radius-md: var(--radius-lg);
+  --radius-lg: var(--radius-xl);
+  --radius-xl: var(--radius-2xl);
   --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  --color-white: #ffffff;
 }
 
 * {
   box-sizing: border-box;
 }
 
+/* ===============================
+   Account Deletion Modal Styles
+=============================== */
+.deletion-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.deletion-modal {
+  background: var(--color-white, #fff);
+  border-radius: var(--radius-lg, 12px);
+  box-shadow: var(--shadow-xl, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
+  width: 100%;
+  max-width: 480px;
+  max-height: 90vh;
+  overflow: hidden;
+  animation: modalSlideIn 0.2s ease-out;
+}
+
+@keyframes modalSlideIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.deletion-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.25rem 1.5rem;
+  border-bottom: 1px solid var(--color-border, #e5e7eb);
+  background: linear-gradient(to right, #fef2f2, #fff);
+}
+
+.deletion-modal-title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #dc2626;
+}
+
+.deletion-modal-close {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0.5rem;
+  color: var(--color-text-muted, #6b7280);
+  border-radius: 0.375rem;
+  transition: background 0.2s, color 0.2s;
+}
+
+.deletion-modal-close:hover {
+  background: var(--color-surface-hover, #f3f4f6);
+  color: var(--color-text, #111827);
+}
+
+.deletion-modal-close svg {
+  width: 20px;
+  height: 20px;
+}
+
+.deletion-modal-body {
+  padding: 1.5rem;
+}
+
+.deletion-modal-warning {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: var(--radius-md, 8px);
+  color: #991b1b;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  margin: 0 0 1.25rem 0;
+}
+
+.deletion-modal-warning-icon {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  stroke: #dc2626;
+}
+
+.deletion-modal-label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text, #374151);
+  margin-bottom: 0.5rem;
+}
+
+.deletion-modal-label .required {
+  color: #dc2626;
+}
+
+.deletion-modal-textarea {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--color-border, #d1d5db);
+  border-radius: var(--radius-md, 8px);
+  font-size: 0.9375rem;
+  font-family: inherit;
+  resize: vertical;
+  min-height: 100px;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.deletion-modal-textarea:focus {
+  outline: none;
+  border-color: #dc2626;
+  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
+}
+
+.deletion-modal-textarea::placeholder {
+  color: var(--color-text-muted, #9ca3af);
+}
+
+.deletion-modal-error {
+  margin: 0.5rem 0 0 0;
+  font-size: 0.8125rem;
+  color: #dc2626;
+}
+
+.deletion-modal-footer {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-end;
+  padding: 1rem 1.5rem;
+  border-top: 1px solid var(--color-border, #e5e7eb);
+  background: var(--color-surface, #f9fafb);
+}
+
+.deletion-modal-footer .btn {
+  padding: 0.625rem 1.25rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: var(--radius-md, 8px);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.deletion-modal-footer .btn-secondary {
+  background: var(--color-white, #fff);
+  border: 1px solid var(--color-border, #d1d5db);
+  color: var(--color-text, #374151);
+}
+
+.deletion-modal-footer .btn-secondary:hover {
+  background: var(--color-surface-hover, #f3f4f6);
+}
+
+.deletion-modal-footer .btn-danger {
+  background: #dc2626;
+  border: 1px solid #dc2626;
+  color: #fff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.deletion-modal-footer .btn-danger:hover:not(:disabled) {
+  background: #b91c1c;
+  border-color: #b91c1c;
+}
+
+.deletion-modal-footer .btn-danger:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.deletion-modal-footer .btn-loading {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.deletion-modal-footer .spinner {
+  width: 16px;
+  height: 16px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+@media (max-width: 480px) {
+  .deletion-modal-footer {
+    flex-direction: column-reverse;
+  }
+  
+  .deletion-modal-footer .btn {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
 .account-page {
   padding: 2rem 1rem;
-  background: linear-gradient(to bottom, var(--color-background) 0%, #ffffff 100%);
+  background: linear-gradient(to bottom, var(--color-background) 0%, var(--color-surface) 100%);
   min-height: 100vh;
 }
 
@@ -335,7 +730,7 @@
   align-items: center;
   gap: 1.5rem;
   padding: 2rem;
-  background: linear-gradient(135deg, var(--color-primary-light) 0%, #ffffff 100%);
+  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-surface) 100%);
   border-bottom: 1px solid var(--color-border);
 }
 
@@ -354,7 +749,7 @@
 .avatar-icon {
   width: 45px;
   height: 45px;
-  color: white;
+  color: var(--color-white);
 }
 
 .profile-header-text {
@@ -473,7 +868,7 @@
 
 .iti__country-list {
   z-index: 1000;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, calc(var(--shadow-opacity, 0.1) * 1.5));
   border: 1.5px solid var(--color-border);
   border-radius: var(--radius-md);
   max-height: 200px;
@@ -567,7 +962,7 @@
 
 .btn-primary {
   background: var(--color-primary);
-  color: white;
+  color: var(--color-white);
   border-color: var(--color-primary);
 }
 
@@ -595,7 +990,7 @@
 
 .btn-danger {
   background: var(--color-danger);
-  color: white;
+  color: var(--color-white);
   border-color: var(--color-danger);
 }
 
@@ -755,4 +1150,4 @@
     margin: 1rem;
   }
 }
-</style>
+</style>