nodebb-plugin-niki-loyalty 1.0.24 → 1.0.26

package/templates/niki-wallet.tpl

@@ -1,170 +1,35 @@
-<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
-
 <div class="niki-wallet-wrapper">
-  <div class="niki-header-bg"></div>
-
-  <div class="niki-wallet-content">
-    <div class="niki-wallet-avatar">
-      <img src="https://i.imgur.com/kXUe4M6.png" alt="Niki">
-    </div>
-
-    <div class="niki-balance-label">Toplam Bakiye</div>
-    <div class="niki-balance-big" id="niki-wallet-points">{points}</div>
-
-    <!-- ✅ ÖDÜL BARI -->
-    <div class="niki-reward-stats">
-      <div style="display:flex; justify-content:space-between; font-size:12px; color:#bdbdbd; font-weight:700;">
-        <span>Ödül Barı</span>
-        <span><span id="niki-bar-points">{points}</span> / <span id="niki-bar-max">250</span></span>
-      </div>
-
-      <div class="niki-progress-track niki-reward-track" style="position:relative;">
-        <div class="niki-progress-fill" id="niki-reward-fill" style="width: 0%;"></div>
-
-        <span class="niki-ms-dot" data-at="60"  style="left:24%;"  title="60 • Ücretsiz Kurabiye"></span>
-        <span class="niki-ms-dot" data-at="120" style="left:48%;"  title="120 • %35 İndirimli Kahve"></span>
-        <span class="niki-ms-dot" data-at="180" style="left:72%;"  title="180 • %60 İndirimli Kahve"></span>
-        <span class="niki-ms-dot" data-at="250" style="left:100%;" title="250 • Ücretsiz Kahve"></span>
-      </div>
-
-      <div style="font-size:11px; color:#a7a7a7; margin-top:6px;">
-        QR oluşturduktan sonra <b style="color:#fff;">kasada okutulunca</b> puanın düşer. (QR 2 dakika geçerli)
-      </div>
-    </div>
-
-    <!-- ✅ REWARD KARTLARI (client.js buraya basacak: QR OLUŞTUR butonları) -->
-<button id="btn-qr-auto" class="niki-btn">
-  <i class="fa fa-qrcode"></i> QR OLUŞTUR
-</button>
-
-<div style="font-size:11px; color:#888; margin-top:10px;">
-  QR oluşturduktan sonra <b>kasada okutulunca</b> puanın düşer. (QR 2 dakika geçerli)
-</div>
-
-    <div class="niki-daily-stats" style="margin-top:18px;">
-      <div style="display:flex; justify-content:space-between; font-size:12px; color:#888; font-weight:700;">
-        <span>Günlük Kazanım</span>
-        <span>{dailyScore} / {dailyCap}</span>
-      </div>
-
-      <div class="niki-progress-track">
-        <div class="niki-progress-fill" style="width: {dailyPercent}%;"></div>
-      </div>
-
-      <div style="font-size:11px; color:#aaa;">
-        Bugün daha fazla çalışarak limitini doldurabilirsin!
-      </div>
-    </div>
-
-    <p style="font-size:12px; color:#ccc; margin-top:15px;">
-      Niki The Cat Coffee &copy; Loyalty Program
-    </p>
-  </div>
-</div>
-
-<!-- ✅ QR MODAL (2 dk) -->
-<div id="modal-qr" class="qr-overlay">
-  <div class="ticket-card">
-    <div class="close-circle" onclick="closeQR()"><i class="fa fa-times"></i></div>
-
-    <div id="view-code">
-      <div class="ticket-top" id="ticket-title">KASAYA GÖSTERİNİZ</div>
-      <div class="ticket-body">
-        <div id="qrcode"></div>
-
-        <div style="font-size:14px; font-weight:800; color:#1a1a1a; margin-top:6px;" id="ticket-sub">
-          QR hazır — kasada okut.
+    <div class="niki-header-bg"></div>
+    
+    <div class="niki-wallet-content">
+        <div class="niki-wallet-avatar">
+            <img src="https://i.imgur.com/kXUe4M6.png" alt="Niki">
         </div>
 
-        <div class="timer-wrapper"><div class="timer-bar" id="time-bar"></div></div>
-        <div class="timer-text" id="timer-txt">2:00</div>
-
-        <div style="margin-top:10px; font-size:11px; color:#888;">
-          Okutma işlemi tamamlanınca otomatik onay ekranına geçer.
+        <div class="niki-balance-label">Toplam Bakiye</div>
+        <div class="niki-balance-big">{points}</div>
+
+        <div class="niki-daily-stats">
+            <div style="display:flex; justify-content:space-between; font-size:12px; color:#888; font-weight:600;">
+                <span>Günlük Kazanım</span>
+                <span>{dailyScore} / {dailyCap}</span>
+            </div>
+            
+            <div class="niki-progress-track">
+                <div class="niki-progress-fill" style="width: {dailyPercent}%;"></div>
+            </div>
+            
+            <div style="font-size:11px; color:#aaa;">
+                Bugün daha fazla çalışarak limitini doldurabilirsin!
+            </div>
         </div>
-      </div>
-    </div>
 
-    <div id="view-success" class="success-view">
-      <div class="success-icon"><i class="fa fa-check"></i></div>
-      <h2 style="font-size:24px; color:#1a1a1a; margin-bottom:10px;">AFİYET OLSUN!</h2>
-      <p style="color:#888; font-size:14px; margin-bottom:20px;">Kasa onayı alındı, puanın güncellendi.</p>
-      <button class="niki-btn" onclick="closeQR()" style="padding:15px; font-size:14px;">
-        TAMAM
-      </button>
+        <button class="niki-btn-action">
+            <i class="fa fa-qrcode"></i> KAHVE AL (QR OLUŞTUR)
+        </button>
+        
+        <p style="font-size:12px; color:#ccc; margin-top:15px;">
+            Niki The Cat Coffee &copy; Loyalty Program
+        </p>
     </div>
-  </div>
-</div>
-
-<style>
-  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
-
-  .niki-reward-stats{ margin-top: 14px; }
-  .niki-reward-track{ height: 12px; border-radius: 999px; overflow: visible; }
-  #niki-reward-fill{ height: 100%; border-radius: 999px; }
-
-  .niki-ms-dot{
-    position:absolute; top:50%;
-    transform: translate(-50%, -50%);
-    width: 12px; height: 12px; border-radius: 999px;
-    background: rgba(255,255,255,.18);
-    border: 1px solid rgba(255,255,255,.28);
-    box-shadow: 0 6px 14px rgba(0,0,0,.25);
-  }
-  .niki-ms-dot.on{
-    background: rgba(255,255,255,.95);
-    border-color: rgba(255,255,255,.95);
-  }
-</style>
-
-<script>
-  // ✅ sadece bar/dot görsel güncelleme (client.js wallet-data çekince zaten id'leri update ediyor)
-  (function(){
-    function applyRewardBar(data){
-      try{
-        const points = Number(data.points || 0);
-        const barMax = Number(data.barMax || 250);
-        const pct = Math.min(100, (points / barMax) * 100);
-
-        const fill = document.getElementById('niki-reward-fill');
-        if (fill) fill.style.width = pct + '%';
-
-        const bp = document.getElementById('niki-bar-points');
-        if (bp) bp.textContent = points;
-
-        const bm = document.getElementById('niki-bar-max');
-        if (bm) bm.textContent = barMax;
-
-        document.querySelectorAll('.niki-ms-dot').forEach(dot=>{
-          const at = Number(dot.getAttribute('data-at') || 0);
-          if (points >= at) dot.classList.add('on');
-          else dot.classList.remove('on');
-        });
-      }catch(e){}
-    }
-
-    // client.js her refreshte window.__NIKI_WALLET_DATA__ set ediyorsa kullan
-    if (window.__NIKI_WALLET_DATA__) applyRewardBar(window.__NIKI_WALLET_DATA__);
-
-    $(window).on('action:ajaxify.end', function(){
-      if (window.__NIKI_WALLET_DATA__) applyRewardBar(window.__NIKI_WALLET_DATA__);
-    });
-
-    // client.js QR oluşturunca şu event’i basıyor:
-    // $(window).trigger('niki:qr.open', [{ token, title }])
-    // Ben client.js’te bunu basmıyorum çünkü modalı direkt client.js açıyor.
-    // Ama olur da event’le açmak istersen aşağıyı kullanabilirsin:
-    $(window).on('niki:qr.open', function(_, payload){
-      if(!payload || !payload.token) return;
-      if(typeof window.openQRWithToken === 'function'){
-        window.openQRWithToken(payload.token, payload.title || 'Ödül');
-      }
-    });
-  })();
-
-  // ✅ client.js modalı açıyor ama tpl tarafında closeQR global kalsın
-  window.closeQR = window.closeQR || function(){
-    $('#modal-qr').fadeOut(200);
-  };
-</script>
+</div>