@o2vend/theme-cli 1.0.37 → 1.0.38

package/test-theme/templates/account/loyalty-redemption.liquid

@@ -84,32 +84,33 @@
 
 <style>
 :root {
-  --color-primary: #000000ff;
-  --color-primary-hover: #1d4ed8;
-  --color-primary-light: #dbeafe;
-  --color-success: #10b981;
-  --color-success-light: #d1fae5;
-  --color-success-dark: #065f46;
-  --color-danger: #ef4444;
-  --color-danger-light: #fee2e2;
-  --color-danger-dark: #991b1b;
-  --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-sm: 0.375rem;
-  --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;
+  --color-primary: {{ settings.color_primary | default: '#000000' }};
+  --color-primary-hover: {{ settings.color_primary_dark | default: '#333333' }};
+  --color-primary-light: {{ settings.color_primary_light | default: '#666666' }};
+  --color-success: {{ settings.color_success | default: '#22c55e' }};
+  --color-success-light: {{ settings.color_success | default: '#22c55e' }};
+  --color-success-dark: {{ settings.color_success | default: '#22c55e' }};
+  --color-danger: {{ settings.color_error | default: '#ef4444' }};
+  --color-danger-light: {{ settings.color_error | default: '#ef4444' }};
+  --color-danger-dark: {{ settings.color_error | default: '#ef4444' }};
+  --color-text: {{ settings.color_text | default: '#000000' }};
+  --color-text-light: {{ settings.color_text_light | default: '#999999' }};
+  --color-background: {{ settings.color_background | default: '#ffffff' }};
+  --color-card-bg: {{ settings.color_surface | default: '#f5f5f5' }};
+  --color-border: {{ settings.color_border | default: '#cccccc' }};
+  --color-border-light: {{ settings.color_surface | default: '#f5f5f5' }};
+  --color-white: #ffffff;
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --radius-sm: var(--radius-md);
+  --radius-md: var(--radius-lg);
+  --radius-lg: var(--radius-xl);
+  --spacing-xs: var(--space-2);
+  --spacing-sm: var(--space-4);
+  --spacing-md: var(--space-6);
+  --spacing-lg: var(--space-8);
+  --spacing-xl: var(--space-12);
 }
 
 .account-page {
@@ -196,7 +197,7 @@
   border-radius: var(--radius-lg);
   padding: var(--spacing-xl);
   text-align: center;
-  color: white;
+  color: var(--color-white);
   box-shadow: var(--shadow-lg);
   position: relative;
   overflow: hidden;
@@ -353,7 +354,7 @@
 
 .btn-primary {
   background: var(--color-primary);
-  color: white;
+  color: var(--color-white);
   border: 2px solid var(--color-primary);
 }
 

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

@@ -145,32 +145,34 @@
 
 <style>
 :root {
-  --color-primary: #000000ff;
-  --color-primary-hover: #1d4ed8;
-  --color-primary-light: #dbeafe;
-  --color-success: #10b981;
-  --color-success-light: #d1fae5;
-  --color-success-dark: #065f46;
-  --color-danger: #ef4444;
-  --color-danger-light: #fee2e2;
-  --color-danger-dark: #991b1b;
-  --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-sm: 0.375rem;
-  --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;
+  --color-primary: {{ settings.color_primary | default: '#000000' }};
+  --color-primary-hover: {{ settings.color_primary_dark | default: '#333333' }};
+  --color-primary-light: {{ settings.color_primary_light | default: '#666666' }};
+  --color-success: {{ settings.color_success | default: '#22c55e' }};
+  --color-success-light: {{ settings.color_success | default: '#22c55e' }};
+  --color-success-dark: {{ settings.color_success | default: '#22c55e' }};
+  --color-danger: {{ settings.color_error | default: '#ef4444' }};
+  --color-danger-light: {{ settings.color_error | default: '#ef4444' }};
+  --color-danger-dark: {{ settings.color_error | default: '#ef4444' }};
+  --color-text: {{ settings.color_text | default: '#000000' }};
+  --color-text-light: {{ settings.color_text_light | default: '#999999' }};
+  --color-text-muted: {{ settings.color_text_muted | default: '#666666' }};
+  --color-background: {{ settings.color_background | default: '#ffffff' }};
+  --color-card-bg: {{ settings.color_surface | default: '#f5f5f5' }};
+  --color-border: {{ settings.color_border | default: '#cccccc' }};
+  --color-border-light: {{ settings.color_surface | default: '#f5f5f5' }};
+  --color-white: #ffffff;
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --radius-sm: var(--radius-md);
+  --radius-md: var(--radius-lg);
+  --radius-lg: var(--radius-xl);
+  --spacing-xs: var(--space-2);
+  --spacing-sm: var(--space-4);
+  --spacing-md: var(--space-6);
+  --spacing-lg: var(--space-8);
+  --spacing-xl: var(--space-12);
 }
 
 .account-page {
@@ -190,11 +192,11 @@
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2rem;
-  background: #ffffff;
-  border: 1px solid #e5e7eb;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
   border-radius: 14px;
   padding: 2rem;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-md);
   max-width: 900px;
 }
 
@@ -206,7 +208,7 @@
 }
 
 .points-icon {
-  color: #2563eb;
+  color: var(--color-primary);
   flex-shrink: 0;
 }
 
@@ -214,36 +216,36 @@
   font-size: 3rem;
   font-weight: 700;
   margin: 0;
-  color: #111827;
+  color: var(--color-text);
 }
 
 .points-label {
   font-size: 1rem;
-  color: #6b7280;
+  color: var(--color-text-light);
   margin-top: 0.25rem;
 }
 
 .points-expiry {
   font-size: 0.95rem;
-  color: #374151;
+  color: var(--color-text);
   margin-top: 0.75rem;
 }
 
 .muted {
-  color: #9ca3af;
+  color: var(--color-text-muted);
 }
 
 /* RIGHT SIDE */
 .loyalty-right {
   padding-left: 2rem;
-  border-left: 1px solid #e5e7eb;
+  border-left: 1px solid var(--color-border);
 }
 
 .breakdown-title {
   font-size: 1.15rem;
   font-weight: 600;
   margin-bottom: 1.25rem;
-  color: #111827;
+  color: var(--color-text);
 }
 
 .points-breakdown {
@@ -257,7 +259,7 @@
   justify-content: space-between;
   align-items: center;
   padding: 0.75rem 0;
-  border-bottom: 1px dashed #e5e7eb;
+  border-bottom: 1px dashed var(--color-border);
   font-size: 1rem;
 }
 
@@ -266,18 +268,18 @@
 }
 
 .points-breakdown .type {
-  color: #374151;
+  color: var(--color-text);
   font-weight: 500;
 }
 
 .points-breakdown .points {
   font-weight: 600;
-  color: #2563eb;
+  color: var(--color-primary);
 }
 
 .empty-text {
   font-size: 0.95rem;
-  color: #9ca3af;
+  color: var(--color-text-muted);
 }
 
 /* ===============================
@@ -292,7 +294,7 @@
   .loyalty-right {
     border-left: none;
     padding-left: 0;
-    border-top: 1px solid #e5e7eb;
+    border-top: 1px solid var(--color-border);
     padding-top: 1.5rem;
   }
 
@@ -374,7 +376,7 @@
   border-radius: var(--radius-lg);
   padding: 10px;
   text-align: center;
-  color: white;
+  color: var(--color-white);
   box-shadow: var(--shadow-lg);
   position: relative;
   overflow: hidden;
@@ -537,7 +539,7 @@
 
 .btn-primary {
   background: var(--color-primary);
-  color: white;
+  color: var(--color-white);
   border: 2px solid var(--color-primary);
 }
 

package/test-theme/templates/account/order-detail.liquid

@@ -61,6 +61,12 @@
                 <span>Order Total</span>
                 <span>{{ order.orderTotal | money_with_settings: shop.settings }}</span>
               </div>
+              {% if order.paymentMethod %}
+              <div class="payment-row">
+                <span>Payment Method</span>
+                <span>{{ order.paymentMethod }}</span>
+              </div>
+              {% endif %}
             </div>
 
             <!-- ITEMS -->
@@ -137,14 +143,15 @@
 
 <style>
 :root {
-  --color-primary:#2563eb;
-  --color-border:#e5e7eb;
-  --color-border-light:#f3f4f6;
-  --color-text:#1f2937;
-  --color-text-light:#6b7280;
-  --color-bg:#f9fafb;
-  --card:#fff;
-  --radius:0.6rem;
+  --color-primary: {{ settings.color_primary | default: '#000000' }};
+  --color-border: {{ settings.color_border | default: '#cccccc' }};
+  --color-border-light: {{ settings.color_surface | default: '#f5f5f5' }};
+  --color-text: {{ settings.color_text | default: '#000000' }};
+  --color-text-light: {{ settings.color_text_light | default: '#999999' }};
+  --color-bg: {{ settings.color_background | default: '#ffffff' }};
+  --card: {{ settings.color_surface | default: '#f5f5f5' }};
+  --radius: var(--radius-lg);
+  --color-white: #ffffff;
 }
 
 /* Layout */

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

@@ -39,7 +39,7 @@
 
                   <div class="order-meta">
                     <span class="order-date">
-                      {{ order.createdOn | date: ' %d, %Y' }}
+                  {{ order.createdOn | date: '%d-%m-%Y %H:%M' }}
                     </span>
                     <span class="order-items">
                       {{ order.itemCount }} item{{ order.itemCount | pluralize }}
@@ -65,6 +65,15 @@
                   >
                     View Details
                   </a>
+
+                  <button
+                    type="button"
+                    class="btn btn-sm btn-outline return-order-btn"
+                    data-order-id="{{ order.id }}"
+                    aria-label="Return order {{ order.orderNumber }}"
+                  >
+                    Return Order
+                  </button>
                 </div>
               </article>
 
@@ -83,6 +92,150 @@
     {% include 'snippets/pagination', pagination: pagination %}
         </div>
 
+        <!-- Return Modal -->
+       <div id="return-modal" class="return-modal" style="display:none;">
+  <div class="return-modal-backdrop"></div>
+  <div class="return-modal-content">
+    <button class="return-modal-close" aria-label="Close">&times;</button>
+    <h3>Return items for Order <span id="return-order-number"></span></h3>
+    <div class="return-items-table-wrapper">
+      <table class="return-items-table">
+        <thead>
+          <tr>
+            <th>Product Name</th>
+            <th>Quantity</th>
+            <th>Price</th>
+            <th>Return Qty</th>
+            <th>Action</th>
+          </tr>
+        </thead>
+        <tbody id="return-items-container"></tbody>
+      </table>
+    </div>
+  </div>
+</div>
+
+<style>
+  .return-modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:1200; }
+  .return-modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.5); }
+  .return-modal-content { position:relative; background:#fff; padding:1.25rem; border-radius:8px; max-width:720px; width:90%; max-height:90vh; overflow:auto; box-shadow:0 8px 24px rgba(0,0,0,0.2); z-index:1201; }
+  .return-modal-close { position:absolute; top:8px; right:10px; background:transparent; border:none; font-size:20px; cursor:pointer; }
+  
+  .return-items-table-wrapper { overflow-x:auto; margin-top:1rem; }
+  .return-items-table { width:100%; border-collapse:collapse; min-width:500px; }
+  .return-items-table th { background:#f5f5f5; padding:0.75rem 0.5rem; text-align:left; font-weight:600; border-bottom:2px solid #ddd; white-space:nowrap; }
+  .return-items-table td { padding:0.75rem 0.5rem; border-bottom:1px solid #eee; vertical-align:middle; }
+  .return-items-table tbody tr:hover { background:#f9f9f9; }
+  
+  .return-item-row { display:table-row; }
+  .return-item-name { font-weight:600; }
+  .return-item-meta, .return-item-price { white-space:nowrap; }
+  .return-qty-input { width:70px; padding:0.4rem; border:1px solid #ddd; border-radius:4px; }
+  
+  @media (max-width: 768px) {
+    .return-modal-content { width:95%; padding:1rem; }
+    .return-items-table { min-width:100%; font-size:0.9rem; }
+    .return-items-table th, .return-items-table td { padding:0.5rem 0.25rem; }
+    .return-qty-input { width:60px; padding:0.3rem; }
+    .btn-sm { font-size:0.8rem; padding:0.3rem 0.5rem; }
+  }
+  
+  @media (max-width: 480px) {
+    .return-items-table { font-size:0.85rem; }
+    .return-items-table th, .return-items-table td { padding:0.4rem 0.2rem; font-size:0.85rem; }
+    .return-qty-input { width:50px; }
+  }
+</style>
+
+<script>
+  (() => {
+    function formatMoney(amount){
+      if (amount === null || amount === undefined || isNaN(Number(amount))) return String(amount ?? '0.00');
+      const num = Number(amount);
+      const currencySymbol = document.body?.dataset?.shopCurrencySymbol || window.__SHOP_CURRENCY_SYMBOL__ || '$';
+      const decimals = 2;
+      let formatted = num.toFixed(decimals);
+      // thousand separators
+      formatted = formatted.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+      return currencySymbol + formatted;
+    }
+
+    document.addEventListener('click', (e) => {
+      if(e.target.matches('.return-order-btn')){
+        const orderId = e.target.dataset.orderId;
+        openReturnModal(orderId);
+      }
+
+      if(e.target.matches('.return-modal-close') || e.target.matches('.return-modal-backdrop')) closeModal();
+
+      if(e.target.matches('.return-item-btn')){
+        const el = e.target;
+        const orderItemId = el.dataset.orderItemId;
+        const productId = el.dataset.productId;
+        const orderId = el.dataset.orderId;
+        const qtyEl = document.querySelector('#qty-' + orderItemId);
+        const qty = Number(qtyEl?.value || 1);
+
+        el.disabled = true;
+        fetch('/webstoreapi/customer/returns', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ orderItemId: Number(orderItemId), productId: Number(productId), quantity: qty })
+        }).then(r=>r.json()).then(data=>{
+          if(data && data.success){
+            alert('Return request submitted');
+            closeModal();
+            location.reload();
+          } else {
+            alert(data.error || 'Unable to submit return');
+          }
+        }).catch(err=>{
+          alert('Error: ' + err.message);
+        }).finally(()=>{ el.disabled = false; });
+      }
+    });
+
+    async function openReturnModal(orderId){
+      try{
+        const res = await fetch('/webstoreapi/customer/orders/' + orderId);
+        const json = await res.json();
+        if(!json.success) throw new Error(json.error || 'Unable to fetch order');
+        const order = json.data;
+        document.getElementById('return-order-number').textContent = order.orderNumber || order.orderNo || '';
+        const container = document.getElementById('return-items-container');
+        container.innerHTML = '';
+        if(order.items && order.items.length){
+          order.items.forEach(item=>{
+            const orderItemId = item.orderItemId || item.id || item.orderItemId;
+            const productId = item.productId || (item.product && item.product.productId) || item.productId || 0;
+            const maxQty = item.quantity || 1;
+            const tr = document.createElement('tr');
+            tr.className = 'return-item-row';
+            tr.innerHTML = `\
+              <td class="return-item-name">${item.productName}</td>\
+              <td class="return-item-meta">${maxQty}</td>\
+              <td class="return-item-price">${formatMoney(item.productPrice)}</td>\
+              <td><input type="number" id="qty-${orderItemId}" class="return-qty-input" min="1" max="${maxQty}" value="1" /></td>\
+              <td><button class="btn btn-sm btn-primary return-item-btn" data-order-id="${orderId}" data-order-item-id="${orderItemId}" data-product-id="${productId}">Return</button></td>`;
+            container.appendChild(tr);
+          });
+        } else {
+          container.innerHTML = '<tr><td colspan="5" style="text-align:center; padding:1rem;">No items found</td></tr>';
+        }
+
+        document.getElementById('return-modal').style.display = 'flex';
+      }catch(err){
+        alert('Error: ' + err.message);
+      }
+    }
+
+    function closeModal()
+    {
+       document.getElementById('return-modal').style.display = 'none'; 
+       }
+  })();
+</script>
+
         {% hook 'account_orders_after' %}
       </main>
 
@@ -95,35 +248,36 @@
    =============================== */
 
 :root {
-  --color-primary: #1f2937;
-  --color-primary-hover: #1d4ed8;
-  --color-primary-light: #dbeafe;
-  --color-success: #10b981;
-  --color-success-light: #d1fae5;
-  --color-success-dark: #065f46;
-  --color-warning: #f59e0b;
-  --color-warning-light: #fef3c7;
-  --color-warning-dark: #92400e;
-  --color-danger: #ef4444;
-  --color-danger-light: #fee2e2;
-  --color-danger-dark: #991b1b;
-  --color-info: #3b82f6;
-  --color-info-light: #dbeafe;
-  --color-info-dark: #1e40af;
-  --color-text: #1f2937;
-  --color-text-light: #6b7280;
-  --color-background: #f9fafb;
-  --color-card-bg: #ffffff;
-  --color-border: #e5e7eb;
-  --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-sm: 1rem;
-  --spacing-md: 1.5rem;
-  --spacing-lg: 2rem;
-  --spacing-xl: 3rem;
+  --color-primary: {{ settings.color_primary | default: '#000000' }};
+  --color-primary-hover: {{ settings.color_primary_dark | default: '#333333' }};
+  --color-primary-light: {{ settings.color_primary_light | default: '#666666' }};
+  --color-success: {{ settings.color_success | default: '#22c55e' }};
+  --color-success-light: {{ settings.color_success | default: '#22c55e' }};
+  --color-success-dark: {{ settings.color_success | default: '#22c55e' }};
+  --color-warning: {{ settings.color_warning | default: '#f59e0b' }};
+  --color-warning-light: {{ settings.color_warning | default: '#f59e0b' }};
+  --color-warning-dark: {{ settings.color_warning | default: '#f59e0b' }};
+  --color-danger: {{ settings.color_error | default: '#ef4444' }};
+  --color-danger-light: {{ settings.color_error | default: '#ef4444' }};
+  --color-danger-dark: {{ settings.color_error | default: '#ef4444' }};
+  --color-info: {{ settings.color_info | default: '#3b82f6' }};
+  --color-info-light: {{ settings.color_info | default: '#3b82f6' }};
+  --color-info-dark: {{ settings.color_info | default: '#3b82f6' }};
+  --color-text: {{ settings.color_text | default: '#000000' }};
+  --color-text-light: {{ settings.color_text_light | default: '#999999' }};
+  --color-background: {{ settings.color_background | default: '#ffffff' }};
+  --color-card-bg: {{ settings.color_surface | default: '#f5f5f5' }};
+  --color-border: {{ settings.color_border | default: '#cccccc' }};
+  --color-white: #ffffff;
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --radius-md: var(--radius-lg);
+  --radius-lg: var(--radius-xl);
+  --spacing-sm: var(--space-4);
+  --spacing-md: var(--space-6);
+  --spacing-lg: var(--space-8);
+  --spacing-xl: var(--space-12);
 }
 
 .account-page {
@@ -223,7 +377,7 @@
   align-items: center;
   padding: 1.25rem 1.5rem;
   border-radius: 12px;
-  border: 1px solid rgba(0, 0, 0, 0.08);
+  border: 1px solid var(--color-border);
   box-sizing: border-box;
 }
 
@@ -252,10 +406,10 @@
 }
 
 .order-card-right {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 0.6rem;
+ display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 1rem;
 }
 
 .order-total {