nodebb-plugin-niki-loyalty 1.0.21 → 1.0.23

package/templates/niki-wallet.tpl

@@ -1,35 +1,164 @@
+<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 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ı) -->
+    <div id="niki-rewards" style="margin-top:16px;"></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>
 
-        <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 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>
+      </div>
+    </div>
 
-        <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 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>
     </div>
-</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>