@o2vend/theme-cli 1.0.32

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

@@ -0,0 +1,588 @@
+{% layout 'layout/theme' %}
+
+<section class="account-page">
+  <div class="container">
+
+    <!-- Header -->
+    <div class="account-header">
+      <h1 class="account-title display-2">Loyalty Program</h1>
+      <p class="account-subtitle">View your points and rewards history</p>
+    </div>
+
+    <div class="account-layout">
+
+      <!-- Sidebar -->
+      <aside class="account-sidebar">
+        {% render 'snippets/account-sidebar' %}
+      </aside>
+
+      <!-- Content -->
+      <div class="account-content">
+        {% hook 'account_loyalty_before' %}
+
+        <div class="account-section-header">
+          <h2 class="account-section-title">Loyalty Program</h2>
+        </div>
+
+        <div class="loyalty-program">
+
+          <!-- LOYALTY POINTS CARD -->
+<div class="loyalty-card">
+
+  <!-- LEFT : AVAILABLE POINTS -->
+  <div class="loyalty-left">
+    <div class="points-icon">
+      <svg width="48" height="48" viewBox="0 0 24 24" fill="none"
+           stroke="currentColor" stroke-width="2">
+        <circle cx="12" cy="8" r="7"></circle>
+        <polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"></polyline>
+      </svg>
+    </div>
+
+    <div class="points-info">
+      <h2 class="points-value">
+        {{ loyalty.points | default: 0 }}
+      </h2>
+      <p class="points-label">Available Points</p>
+
+      <p class="points-expiry">
+        Nearest Expiry:
+        {% if loyalty.nearestExpiryDate %}
+          <strong>{{ loyalty.nearestExpiryDate |date: '%d-%m-%Y %H:%M' }}</strong>
+        {% else %}
+          <span class="muted">No expiry</span>
+        {% endif %}
+      </p>
+    </div>
+  </div>
+
+  <!-- RIGHT : BREAKDOWN -->
+  <div class="loyalty-right">
+    <h4 class="breakdown-title">Points Breakdown</h4>
+
+    {% if loyalty.breakdown and loyalty.breakdown.size > 0 %}
+      <ul class="points-breakdown">
+        {% for item in loyalty.breakDown %}
+          <li>
+            <span class="type">
+              {{ item.pointType | default: "Unknown" }}
+            </span>
+            <span class="points">
+              {{ item.points | default: 0 }}
+            </span>
+          </li>
+        {% endfor %}
+      </ul>
+    {% else %}
+      <p class="empty-text">No point breakdown available</p>
+    {% endif %}
+  </div>
+
+</div>
+          <!-- Points History -->
+          <div class="loyalty-history">
+            <h3 class="loyalty-subtitle">Points History</h3>
+
+            <div class="loyalty-history-list">
+              {% for transaction in loyalty.history %}
+                <div class="loyalty-transaction">
+
+                  <div class="transaction-icon {{ transaction.pointType | downcase }}">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                      <polyline points="20 6 9 17 4 12"></polyline>
+                    </svg>
+                  </div>
+
+                  <div class="transaction-info">
+                    <p class="transaction-description">
+                      {% assign ptype = transaction.pointType | downcase %}
+                      {% case ptype %}
+                        {% when 'cash' %} Cash Points
+                        {% when 'giftcards' %} Gift Card Points
+                        {% when 'others' %} Other Bonus Points
+                        {% else %} Loyalty Points
+                      {% endcase %}
+                    </p>
+
+                    <!-- Reference -->
+                    <p class="transaction-reference">
+                   
+                      {% if transaction.additionalSettings %}
+                        {% assign settings = transaction.additionalSettings | parse_json %}
+                        {{ settings.OrderNumbers | default: transaction.referenceId }}
+                      {% else %}
+                        {{ transaction.referenceId | default: '—' }}
+                      {% endif %}
+                    </p>
+
+                    <p class="transaction-date">
+                     CreatedDate :  {{ transaction.createdDate | date: '%d-%m-%Y %H:%M' }} 
+                    </p>
+                     <p class="transaction-date">
+                     ExpiryDate :  {{ transaction.expiryDate | date: '%d-%m-%Y %H:%M' }} 
+                    </p>
+                  </div>
+
+                  <div class="transaction-points earned">
+                    +{{ transaction.point | default: transaction.points }}
+                  </div>
+
+                </div>
+              {% endfor %}
+                 <!-- Pagination -->
+    {% include 'snippets/pagination', pagination: pagination %}
+            </div>
+          </div>
+        </div>
+
+        {% hook 'account_loyalty_after' %}
+      </div>
+    </div>
+  </div>
+   
+</section>
+
+
+<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;
+}
+
+.account-page {
+  padding: var(--spacing-xl) var(--spacing-sm);
+  background: var(--color-background);
+  min-height: 100vh;
+}
+.pagination {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+/* ===============================
+   LOYALTY POINTS CARD
+================================ */
+.loyalty-card {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 14px;
+  padding: 2rem;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
+  max-width: 900px;
+}
+
+/* LEFT SIDE */
+.loyalty-left {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+.points-icon {
+  color: #2563eb;
+  flex-shrink: 0;
+}
+
+.points-value {
+  font-size: 3rem;
+  font-weight: 700;
+  margin: 0;
+  color: #111827;
+}
+
+.points-label {
+  font-size: 1rem;
+  color: #6b7280;
+  margin-top: 0.25rem;
+}
+
+.points-expiry {
+  font-size: 0.95rem;
+  color: #374151;
+  margin-top: 0.75rem;
+}
+
+.muted {
+  color: #9ca3af;
+}
+
+/* RIGHT SIDE */
+.loyalty-right {
+  padding-left: 2rem;
+  border-left: 1px solid #e5e7eb;
+}
+
+.breakdown-title {
+  font-size: 1.15rem;
+  font-weight: 600;
+  margin-bottom: 1.25rem;
+  color: #111827;
+}
+
+.points-breakdown {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.points-breakdown li {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 0;
+  border-bottom: 1px dashed #e5e7eb;
+  font-size: 1rem;
+}
+
+.points-breakdown li:last-child {
+  border-bottom: none;
+}
+
+.points-breakdown .type {
+  color: #374151;
+  font-weight: 500;
+}
+
+.points-breakdown .points {
+  font-weight: 600;
+  color: #2563eb;
+}
+
+.empty-text {
+  font-size: 0.95rem;
+  color: #9ca3af;
+}
+
+/* ===============================
+   RESPONSIVE (MOBILE)
+================================ */
+@media (max-width: 768px) {
+  .loyalty-card {
+    grid-template-columns: 1fr;
+    padding: 1.5rem;
+  }
+
+  .loyalty-right {
+    border-left: none;
+    padding-left: 0;
+    border-top: 1px solid #e5e7eb;
+    padding-top: 1.5rem;
+  }
+
+  .points-value {
+    font-size: 2.4rem;
+  }
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 var(--spacing-sm);
+}
+
+.account-header {
+  text-align: center;
+  margin-bottom: var(--spacing-xl);
+}
+
+.account-title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: var(--color-text);
+  margin: 0 0 0.5rem 0;
+  letter-spacing: -0.025em;
+}
+
+.account-subtitle {
+  font-size: 1.125rem;
+  color: var(--color-text-light);
+  margin: 0;
+}
+
+.account-layout {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  gap: var(--spacing-lg);
+  align-items: start;
+}
+
+.account-sidebar {
+  position: sticky;
+  top: var(--spacing-lg);
+  background: var(--color-card-bg);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-md);
+  box-shadow: var(--shadow-md);
+  border: 1px solid var(--color-border);
+}
+
+.account-content {
+  background: var(--color-card-bg);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-lg);
+  box-shadow: var(--shadow-md);
+  border: 1px solid var(--color-border);
+}
+
+.account-section-header {
+  margin-bottom: var(--spacing-lg);
+  padding-bottom: var(--spacing-md);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.account-section-title {
+  font-size: 1.75rem;
+  font-weight: 600;
+  color: var(--color-text);
+  margin: 0;
+}
+
+.loyalty-program {
+  display: grid;
+  gap: var(--spacing-xl);
+}
+
+.loyalty-points {
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
+  border-radius: var(--radius-lg);
+  padding: 10px;
+  text-align: center;
+  color: white;
+  box-shadow: var(--shadow-lg);
+  position: relative;
+  overflow: hidden;
+}
+
+.loyalty-points::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  right: -10%;
+  width: 300px;
+  height: 300px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
+}
+
+.loyalty-points-display {
+  position: relative;
+  z-index: 1;
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+.points-icon {
+  margin: 0 auto var(--spacing-md);
+  width: 80px;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+}
+
+.loyalty-points-value {
+  font-size: 4rem;
+  font-weight: 700;
+  margin: 0 0 var(--spacing-xs) 0;
+  line-height: 1;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.loyalty-points-label {
+  font-size: 1.25rem;
+  margin: 0;
+  opacity: 0.95;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+.loyalty-history {
+  background: var(--color-background);
+  padding: var(--spacing-lg);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border);
+}
+
+.loyalty-subtitle {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--color-text);
+  margin: 0 0 var(--spacing-md) 0;
+}
+
+.loyalty-history-list {
+  display: grid;
+  gap: var(--spacing-sm);
+}
+
+.loyalty-transaction {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: var(--spacing-md);
+  align-items: center;
+  padding: var(--spacing-md);
+  background: var(--color-card-bg);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border);
+  transition: all 0.3s ease;
+}
+
+.loyalty-transaction:hover {
+  border-color: var(--color-primary);
+  box-shadow: var(--shadow-sm);
+}
+
+.transaction-icon {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.transaction-icon.earned {
+  background: var(--color-success-light);
+  color: var(--color-success-dark);
+}
+
+.transaction-icon.spent,
+.transaction-icon.redeemed {
+  background: var(--color-danger-light);
+  color: var(--color-danger-dark);
+}
+
+.transaction-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.transaction-description {
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--color-text);
+  margin: 0;
+}
+
+.transaction-date {
+  font-size: 0.875rem;
+  color: var(--color-text-light);
+  margin: 0;
+}
+
+.transaction-points {
+  font-size: 1.25rem;
+  font-weight: 700;
+  text-align: right;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border-radius: var(--radius-sm);
+  min-width: 80px;
+}
+
+.transaction-points.earned {
+  color: var(--color-success-dark);
+  background: var(--color-success-light);
+}
+
+.transaction-points.redeemed,
+.transaction-points.spent {
+  color: var(--color-danger-dark);
+  background: var(--color-danger-light);
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.625rem 1.5rem;
+  font-size: 0.9375rem;
+  font-weight: 500;
+  text-decoration: none;
+  border-radius: var(--radius-md);
+  border: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.btn-primary {
+  background: var(--color-primary);
+  color: white;
+  border: 2px solid var(--color-primary);
+}
+
+.btn-primary:hover {
+  background: var(--color-primary-hover);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+.empty-state {
+  text-align: center;
+  padding: var(--spacing-xl);
+  color: var(--color-text-light);
+  background: var(--color-card-bg);
+  border-radius: var(--radius-md);
+  border: 2px dashed var(--color-border);
+}
+
+.empty-state p {
+  margin: 0 0 var(--spacing-md) 0;
+}
+
+@media (max-width: 768px) {
+  .account-layout {
+    grid-template-columns: 1fr;
+  }
+  
+
+  .account-content {
+    order: 1;
+  }
+  
+  .loyalty-points-value {
+    font-size: 3rem;
+  }
+  
+  .loyalty-transaction {
+    grid-template-columns: auto 1fr;
+    gap: var(--spacing-sm);
+  }
+  
+  .transaction-points {
+    grid-column: 2;
+    justify-self: start;
+    margin-top: var(--spacing-xs);
+  }
+}
+</style>