nodebb-plugin-niki-loyalty 1.0.22 → 1.0.23

package/library.js

@@ -14,10 +14,7 @@ const SETTINGS = {
   pointsPerHeartbeat: 5,
   dailyCap: 250,
 
-  // Tek bar hedefi
   barMax: 250,
-
-  // ✅ 4 kademe (Seçenek B: claim = puan düşer)
   rewards: [
     { id: 'cookie', at: 60,  title: 'Ücretsiz Kurabiye', type: 'free_item', meta: { item: 'cookie' } },
     { id: 'c35',    at: 120, title: '%35 İndirimli Kahve', type: 'discount',  meta: { product: 'coffee', percent: 35 } },
@@ -25,13 +22,10 @@ const SETTINGS = {
     { id: 'coffee', at: 250, title: 'Ücretsiz Kahve', type: 'free_item', meta: { item: 'coffee' } },
   ],
 
-  // Eski akış uyumluluğu (istersen sonra kaldırırız)
-  coffeeCost: 250,
-
-  // Kupon token süreleri (sn)
   couponTTLSeconds: 10 * 60, // 10 dk
 };
 
+
 // ✅ TEST: sınırsız kullanım (puan kontrolünü kapatmak için true)
 const TEST_MODE_UNLIMITED = false;
 
@@ -226,60 +220,65 @@ Plugin.init = async function (params) {
   //    Client bu endpoint'i çağıracak.
   // -------------------------
   router.post('/api/niki-loyalty/claim', middleware.ensureLoggedIn, async (req, res) => {
-    try {
-      const uid = req.uid;
-      const rewardId = (req.body && req.body.rewardId) ? String(req.body.rewardId) : '';
-      const reward = findRewardById(rewardId);
-
-      if (!reward) {
-        return res.json({ success: false, message: 'Geçersiz ödül' });
-      }
-
-      const points = parseInt((await user.getUserField(uid, 'niki_points')) || 0, 10);
-
-      if (!TEST_MODE_UNLIMITED && points < reward.at) {
-        return res.json({ success: false, message: 'Yetersiz puan' });
-      }
-
-      // ✅ Puan düş
-      if (!TEST_MODE_UNLIMITED) {
-        await user.decrementUserFieldBy(uid, 'niki_points', reward.at);
-      }
-
-      const newBalance = parseInt((await user.getUserField(uid, 'niki_points')) || 0, 10);
-
-      // ✅ Kupon oluştur (kasa tarayacak)
-      const token = makeToken();
-      const couponKey = `niki:coupon:${token}`;
-
-      const couponPayload = safeStringify({
-        token,
-        ts: Date.now(),
-        rewardId: reward.id,
-        at: reward.at,
-        title: reward.title,
-        type: reward.type,
-        meta: reward.meta,
-        ownerUid: uid,
-      });
-
-      await db.set(couponKey, couponPayload);
-      await db.expire(couponKey, SETTINGS.couponTTLSeconds);
-
-      // user log
-      await addUserLog(uid, 'spend', reward.at, `Ödül alındı: ${reward.title}`, { rewardId: reward.id });
+  try {
+    const uid = req.uid;
+    const rewardId = (req.body && req.body.rewardId) ? String(req.body.rewardId) : '';
+    const reward = findRewardById(rewardId);
+    if (!reward) return res.json({ success: false, message: 'Geçersiz ödül' });
+
+    const points = parseInt((await user.getUserField(uid, 'niki_points')) || 0, 10);
+    if (!TEST_MODE_UNLIMITED && points < reward.at) {
+      return res.json({ success: false, message: 'Yetersiz puan' });
+    }
 
+    // ✅ Aynı ödülden aktif kupon varsa tekrar üretme (spam engeli)
+    const reserveKey = `niki:reserve:${uid}:${reward.id}`;
+    const existingToken = await db.get(reserveKey);
+    if (existingToken) {
       return res.json({
         success: true,
-        token,
+        token: existingToken,
         reward: { id: reward.id, at: reward.at, title: reward.title, type: reward.type, meta: reward.meta },
-        newBalance,
-        message: 'Ödül hazır! Kasada okutarak kullan.',
+        message: 'Zaten aktif bir kuponun var. Kasada okutabilirsin.',
       });
-    } catch (err) {
-      return res.status(500).json({ success: false, message: 'Sunucu hatası' });
     }
-  });
+
+    // ✅ token oluştur
+    const token = makeToken();
+    const couponKey = `niki:coupon:${token}`;
+
+    const couponPayload = safeStringify({
+      token,
+      ts: Date.now(),
+      rewardId: reward.id,
+      cost: reward.at,              // ✅ puan düşülecek tutar
+      title: reward.title,
+      type: reward.type,
+      meta: reward.meta,
+      ownerUid: uid,
+    });
+
+    await db.set(couponKey, couponPayload);
+    await db.expire(couponKey, SETTINGS.couponTTLSeconds);
+
+    // ✅ rezervasyonu da tut
+    await db.set(reserveKey, token);
+    await db.expire(reserveKey, SETTINGS.couponTTLSeconds);
+
+    // user log (claim logu - puan düşmeden)
+    await addUserLog(uid, 'spend', 0, `Kupon oluşturuldu: ${reward.title}`, { rewardId: reward.id, token });
+
+    return res.json({
+      success: true,
+      token,
+      reward: { id: reward.id, at: reward.at, title: reward.title, type: reward.type, meta: reward.meta },
+      message: 'Kupon hazır! Kasada okutunca puanın düşer.',
+    });
+  } catch (err) {
+    return res.status(500).json({ success: false, message: 'Sunucu hatası' });
+  }
+});
+
 
   // -------------------------
   // 4) KASA HISTORY (admin/mod)
@@ -341,54 +340,65 @@ Plugin.init = async function (params) {
   // 5) KASA: COUPON SCAN (admin/mod)  ✅ yeni akış
   //    Claim ile üretilen token kasada okutulur.
   // -------------------------
-  router.post('/api/niki-loyalty/scan-coupon', middleware.ensureLoggedIn, async (req, res) => {
-    try {
-      const token = (req.body && req.body.token) ? String(req.body.token) : '';
-
-      const staffOk = await isStaff(req.uid);
-      if (!staffOk) return res.status(403).json({ success: false, message: 'Yetkisiz' });
+router.post('/api/niki-loyalty/scan-coupon', middleware.ensureLoggedIn, async (req, res) => {
+  try {
+    const token = (req.body && req.body.token) ? String(req.body.token) : '';
 
-      const raw = await db.get(`niki:coupon:${token}`);
-      if (!raw) return res.json({ success: false, message: 'Geçersiz / Süresi dolmuş kupon' });
+    const staffOk = await isStaff(req.uid);
+    if (!staffOk) return res.status(403).json({ success: false, message: 'Yetkisiz' });
 
-      const coupon = safeParseMaybeJson(raw);
-      if (!coupon || !coupon.ownerUid) {
-        await db.delete(`niki:coupon:${token}`);
-        return res.json({ success: false, message: 'Kupon bozuk' });
-      }
+    const raw = await db.get(`niki:coupon:${token}`);
+    if (!raw) return res.json({ success: false, message: 'Geçersiz / Süresi dolmuş kupon' });
 
-      // ✅ tek kullanımlık
+    const coupon = safeParseMaybeJson(raw);
+    if (!coupon || !coupon.ownerUid || !coupon.rewardId) {
       await db.delete(`niki:coupon:${token}`);
+      return res.json({ success: false, message: 'Kupon bozuk' });
+    }
 
-      const customerUid = parseInt(coupon.ownerUid, 10);
-      const customerData = await user.getUserFields(customerUid, ['username', 'picture', 'userslug']);
+    const customerUid = parseInt(coupon.ownerUid, 10);
+    const cost = parseInt(coupon.cost || 0, 10);
 
-      // kasa log (artık amount = coupon.at)
-      await addKasaLog(
-        req.uid,
-        customerData?.username || 'Bilinmeyen',
-        customerUid,
-        parseInt(coupon.at || 0, 10),
-        coupon.rewardId,
-        coupon.title
-      );
+    // ✅ puan yeter mi? (scan anında kontrol)
+    const pts = parseInt((await user.getUserField(customerUid, 'niki_points')) || 0, 10);
+    if (!TEST_MODE_UNLIMITED && pts < cost) {
+      return res.json({ success: false, message: 'Yetersiz bakiye (puan değişmiş olabilir)' });
+    }
 
-      return res.json({
-        success: true,
-        customer: customerData,
-        coupon: {
-          rewardId: coupon.rewardId,
-          title: coupon.title,
-          type: coupon.type,
-          meta: coupon.meta,
-          at: coupon.at,
-        },
-        message: 'Kupon onaylandı!',
-      });
-    } catch (err) {
-      return res.status(500).json({ success: false, message: 'Sunucu hatası' });
+    // ✅ puan düş (asıl düşüş burada)
+    if (!TEST_MODE_UNLIMITED && cost > 0) {
+      await user.decrementUserFieldBy(customerUid, 'niki_points', cost);
     }
-  });
+
+    // ✅ tek kullanımlık: kuponu sil
+    await db.delete(`niki:coupon:${token}`);
+    // ✅ rezervasyonu da sil
+    await db.delete(`niki:reserve:${customerUid}:${coupon.rewardId}`);
+
+    const customerData = await user.getUserFields(customerUid, ['username', 'picture', 'userslug']);
+
+    // user log (gerçek spend burada)
+    await addUserLog(customerUid, 'spend', cost, `Kullanıldı: ${coupon.title}`, { rewardId: coupon.rewardId });
+
+    // kasa log
+    await addKasaLog(req.uid, customerData?.username || 'Bilinmeyen', customerUid, cost, coupon.rewardId, coupon.title);
+
+    return res.json({
+      success: true,
+      customer: customerData,
+      coupon: {
+        rewardId: coupon.rewardId,
+        title: coupon.title,
+        type: coupon.type,
+        meta: coupon.meta,
+        cost,
+      },
+      message: 'Kupon onaylandı!',
+    });
+  } catch (err) {
+    return res.status(500).json({ success: false, message: 'Sunucu hatası' });
+  }
+});
 
   // -------------------------
   // 6) (ESKİ) QR OLUŞTUR / OKUT — opsiyonel uyumluluk

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-niki-loyalty",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "description": "Niki The Cat Coffee Loyalty System - Earn points while studying on IEU Forum.",
   "main": "library.js",
   "nbbpm": {

package/static/lib/client.js

@@ -1,10 +1,27 @@
 'use strict';
 
 $(document).ready(function () {
-  // --- AYARLAR ---
+  // =========================================
+  // AYARLAR
+  // =========================================
   const NIKI_LOGO_URL = "https://i.ibb.co/nZvtpss/logo-placeholder.png";
 
-  // Widget HTML Şablonu
+  // 60/120/180/250 → QR üret (kasa okutup puan düşsün)  ✅ senin istediğin
+  // Not: Backend tarafında /api/niki-loyalty/claim rewardId ile token döndürmeli,
+  //      puan düşümü scan-coupon tarafında olmalı.
+  const REWARDS_FALLBACK = [
+    { id: 'cookie', at: 60,  title: 'Ücretsiz Kurabiye' },
+    { id: 'c35',    at: 120, title: '%35 İndirimli Kahve' },
+    { id: 'c60',    at: 180, title: '%60 İndirimli Kahve' },
+    { id: 'coffee', at: 250, title: 'Ücretsiz Kahve' },
+  ];
+
+  // QR ekranda kalma süresi (eski gibi) ✅ 2 dakika
+  const QR_TTL_SECONDS = 120;
+
+  // =========================================
+  // FLOATING WIDGET
+  // =========================================
   const widgetHtml = `
     <div id="niki-floating-widget" class="niki-hidden">
       <div class="niki-widget-content" onclick="ajaxify.go('niki-wallet')">
@@ -17,16 +34,12 @@ $(document).ready(function () {
     </div>
   `;
 
-  // -------------------------
-  // UI Helpers
-  // -------------------------
   function fixLogo() {
     const img = document.querySelector("img.niki-widget-logo");
     if (img && img.src !== NIKI_LOGO_URL) img.src = NIKI_LOGO_URL;
   }
 
   function showNikiToast(msg, kind) {
-    // kind: 'ok' | 'warn' | 'err' (şimdilik css yoksa da sorun değil)
     $('.niki-toast').remove();
     const icon = (kind === 'err') ? 'fa-triangle-exclamation' : (kind === 'warn' ? 'fa-circle-info' : 'fa-paw');
     const toast = $(`<div class="niki-toast niki-${kind || 'ok'}"><i class="fa ${icon}"></i> ${msg}</div>`);
@@ -44,184 +57,18 @@ $(document).ready(function () {
     $('#niki-floating-widget').removeClass('niki-hidden');
     localStorage.setItem('niki_last_points', String(p));
 
-    // Wallet sayfasındaysan, oradaki puan UI'ını da güncellemeyi dene (id/class varsa)
-    // (Şablon değişken olabilir, yoksa dokunmaz)
-    $('#niki-wallet-points, .niki-wallet-points').text(p);
+    // Wallet tpl içinde varsa güncelle
+    $('#my-points, #niki-wallet-points, .niki-wallet-points').text(p);
+    $('#target-txt').text(`${p} / 250`);
   }
 
-  // -------------------------
-  // Data Fetch (wallet-data)
-  // -------------------------
-  function fetchWalletData(opts) {
-    opts = opts || {};
-    return $.get('/api/niki-loyalty/wallet-data')
-      .done(function (data) {
-        if (!data) return;
-        setPointsUI(data.points || 0);
-
-        // İstersen wallet sayfasında bar/milestone UI render etmek için data’yı sakla
-        window.__NIKI_WALLET_DATA__ = data;
-
-        // Wallet template'in içine "rewards" render eden bir alan koyduysan burada çağır
-        // (Alan yoksa hiçbir şey olmaz, güvenli)
-        if (opts.renderRewards) {
-          renderWalletRewards(data);
-        }
-      })
-      .fail(function () {
-        // cache yoksa 0 göster
-        const cached = localStorage.getItem('niki_last_points');
-        if (cached === null) {
-          setPointsUI(0);
-        }
-      });
-  }
-
-  // -------------------------
-  // Wallet Rewards Render + Claim (Seçenek B)
-  // Bu render ancak sayfanda #niki-rewards gibi bir container varsa çalışır.
-  // Yoksa dokunmaz.
-  // -------------------------
-  function renderWalletRewards(data) {
-    const $wrap = $('#niki-rewards');
-    if ($wrap.length === 0) return; // container yoksa geç
-
-    const points = Number(data.points || 0);
-    const barMax = Number(data.barMax || 250);
-    const rewards = Array.isArray(data.rewards) ? data.rewards : [];
-
-    // Basit milestone bar (container varsa)
-    const barPercent = Math.min(100, (points / barMax) * 100);
-
-    let barHtml = `
-      <div class="niki-mbar">
-        <div class="niki-mbar-top">
-          <div class="niki-mbar-title">Ödül Barı</div>
-          <div class="niki-mbar-val">${points} / ${barMax}</div>
-        </div>
-        <div class="niki-mbar-track">
-          <div class="niki-mbar-fill" style="width:${barPercent}%"></div>
-          ${rewards.map(r => {
-            const left = Math.min(100, (Number(r.at) / barMax) * 100);
-            const unlocked = points >= Number(r.at);
-            return `<span class="niki-mbar-dot ${unlocked ? 'on' : ''}" style="left:${left}%"
-                      title="${escapeHtml(r.title)} • ${r.at} puan"></span>`;
-          }).join('')}
-        </div>
-        <div class="niki-mbar-hint">Ödülü aldığında puanın düşer.</div>
-      </div>
-    `;
-
-    let cardsHtml = rewards.map(r => {
-      const at = Number(r.at || 0);
-      const unlocked = points >= at;
-
-      const badge = unlocked ? `<span class="niki-r-badge on">Alınabilir</span>` : `<span class="niki-r-badge">Kilitli</span>`;
-      const btn = unlocked
-        ? `<button class="btn btn-sm btn-primary niki-claim-btn" data-reward="${escapeAttr(r.id)}">
-             Ödülü Al
-           </button>`
-        : `<button class="btn btn-sm btn-default niki-claim-btn" disabled>
-             ${at} puan gerekli
-           </button>`;
-
-      return `
-        <div class="niki-r-card ${unlocked ? 'on' : ''}">
-          <div class="niki-r-left">
-            <div class="niki-r-title">${escapeHtml(r.title)}</div>
-            <div class="niki-r-sub">${at} puan</div>
-          </div>
-          <div class="niki-r-right">
-            ${badge}
-            ${btn}
-          </div>
-        </div>
-      `;
-    }).join('');
-
-    $wrap.html(barHtml + `<div class="niki-r-list">${cardsHtml}</div>`);
-
-    // Claim handler
-    $wrap.off('click.nikiClaim').on('click.nikiClaim', '.niki-claim-btn:not([disabled])', function () {
-      const rewardId = $(this).data('reward');
-      if (!rewardId) return;
-
-      // Butonu anlık kilitle (double click engeli)
-      const $btn = $(this);
-      $btn.prop('disabled', true).text('Hazırlanıyor...');
-
-      claimReward(rewardId)
-        .always(() => {
-          // UI refresh, button state render sonrası zaten güncellenecek
-        });
-    });
-  }
-
-  function claimReward(rewardId) {
-    return $.ajax({
-      url: '/api/niki-loyalty/claim',
-      method: 'POST',
-      data: {
-        rewardId: rewardId,
-        _csrf: config.csrf_token,
-      },
-    }).done(function (res) {
-      if (!res || !res.success) {
-        showNikiToast(res?.message || 'Ödül alınamadı', 'err');
-        // Wallet UI’ı tazele
-        fetchWalletData({ renderRewards: true });
-        return;
-      }
-
-      // ✅ Puan düşmüş yeni bakiye
-      if (typeof res.newBalance !== 'undefined') {
-        setPointsUI(res.newBalance);
-      }
-
-      // ✅ Token geldi (kasada okutulacak)
-      // Token'ı localStorage'a kaydedelim (wallet ekranı QR üretirken kullanabilsin)
-      if (res.token) {
-        localStorage.setItem('niki_last_coupon_token', res.token);
-      }
-
-      showNikiToast(res.message || 'Ödül hazır! Kasada okut.', 'ok');
-
-      // Wallet sayfasını tazele ve rewards’ları yeniden render et
-      fetchWalletData({ renderRewards: true });
-
-      // Eğer wallet template’in içinde "QR göster" alanın varsa, event ile haber ver
-      $(window).trigger('niki:coupon.ready', [res]);
-    }).fail(function () {
-      showNikiToast('Sunucu hatası: ödül alınamadı', 'err');
-      fetchWalletData({ renderRewards: true });
-    });
-  }
-
-  // Basit escape helper’lar (XSS koruması)
-  function escapeHtml(str) {
-    return String(str || '')
-      .replaceAll('&', '&amp;')
-      .replaceAll('<', '&lt;')
-      .replaceAll('>', '&gt;')
-      .replaceAll('"', '&quot;')
-      .replaceAll("'", '&#39;');
-  }
-  function escapeAttr(str) {
-    return escapeHtml(str).replaceAll(' ', '');
-  }
-
-  // -------------------------
-  // 1) Widget Başlatma ve Veri Yönetimi
-  // -------------------------
   function initNikiWidget() {
     if (!app.user.uid || app.user.uid <= 0) return;
 
-    // Widget yoksa ekle
     if ($('#niki-floating-widget').length === 0) {
       $('body').append(widgetHtml);
     }
 
-    // Cache: anında göster
     const cachedPoints = localStorage.getItem('niki_last_points');
     if (cachedPoints !== null) {
       $('#niki-live-points').text(cachedPoints);
@@ -230,25 +77,38 @@ $(document).ready(function () {
 
     fixLogo();
 
-    // Sunucudan taze veri çek
-    const onWalletPage = (ajaxify.data && ajaxify.data.template === 'niki-wallet');
-    fetchWalletData({ renderRewards: onWalletPage }).always(function () {
+    $.get('/api/niki-loyalty/wallet-data', function (data) {
+      const freshPoints = data?.points || 0;
+      setPointsUI(freshPoints);
       fixLogo();
+
+      // Wallet sayfasındaysa rewards render et
+      if (isWalletPage()) {
+        renderWalletFromData(data);
+      }
+    }).fail(function () {
+      if (cachedPoints === null) {
+        setPointsUI(0);
+      }
     });
   }
 
-  // Başlat
+  function isWalletPage() {
+    // nodebb template adı her projede değişebilir; pathname ile de kontrol edelim
+    const p = window.location.pathname || '';
+    return (ajaxify?.data?.template === 'niki-wallet') || p.indexOf('niki-wallet') > -1;
+  }
+
   initNikiWidget();
 
-  // Sayfa geçişlerinde tekrar çalıştır
   $(window).on('action:ajaxify.end', function () {
     initNikiWidget();
     setTimeout(fixLogo, 400);
   });
 
-  // -------------------------
-  // --- AKTİFLİK SİSTEMİ (Heartbeat) ---
-  // -------------------------
+  // =========================================
+  // HEARTBEAT
+  // =========================================
   let activeSeconds = 0;
   let isUserActive = false;
   let idleTimer;
@@ -261,7 +121,7 @@ $(document).ready(function () {
   $(window).on('mousemove scroll keydown click touchstart', resetIdleTimer);
 
   setInterval(() => {
-    if (ajaxify.data && ajaxify.data.template && ajaxify.data.template.topic && document.visibilityState === 'visible' && isUserActive) {
+    if (ajaxify?.data?.template?.topic && document.visibilityState === 'visible' && isUserActive) {
       activeSeconds++;
     }
     if (activeSeconds >= 60) {
@@ -274,19 +134,318 @@ $(document).ready(function () {
     $.post('/api/niki-loyalty/heartbeat', { _csrf: config.csrf_token }, function (res) {
       if (res && res.earned) {
         setPointsUI(res.total);
-
         showNikiToast(`+${res.points} Puan Kazandın! ⚡`, 'ok');
 
         $('#niki-floating-widget').addClass('niki-bounce');
         setTimeout(() => $('#niki-floating-widget').removeClass('niki-bounce'), 500);
 
-        // Wallet sayfasındaysan rewards'ları da tazele
-        const onWalletPage = (ajaxify.data && ajaxify.data.template === 'niki-wallet');
-        if (onWalletPage) {
-          fetchWalletData({ renderRewards: true });
+        // wallet açıksa güncelle
+        if (isWalletPage()) {
+          refreshWallet();
         }
       }
     });
   }
+
+  // =========================================
+  // WALLET: Rewards render + QR flow (2 dk)
+  // =========================================
+  let pollInterval = null;
+  let initialPointsForQR = null;
+  let timerInterval = null;
+
+  function refreshWallet() {
+    $.get('/api/niki-loyalty/wallet-data', function (data) {
+      setPointsUI(data?.points || 0);
+      renderWalletFromData(data);
+    });
+  }
+
+  function renderWalletFromData(data) {
+    // 1) Bar (varsa)
+    try {
+      const p = parseInt(data?.points || 0, 10) || 0;
+      const goal = parseInt(data?.barMax || 250, 10) || 250;
+      const pct = Math.min(100, (p / goal) * 100);
+      $('#prog-bar').css('width', pct + '%');
+      $('#target-txt').text(`${p} / ${goal}`);
+    } catch (e) {}
+
+    // 2) Rewards container varsa bas
+    const $wrap = $('#niki-rewards');
+    if ($wrap.length === 0) return;
+
+    const points = parseInt(data?.points || 0, 10) || 0;
+    const rewards = Array.isArray(data?.rewards) && data.rewards.length ? data.rewards : REWARDS_FALLBACK.map(r => ({
+      id: r.id, at: r.at, title: r.title, unlocked: points >= r.at
+    }));
+
+    const cards = rewards.map(r => {
+      const at = parseInt(r.at || 0, 10) || 0;
+      const unlocked = points >= at;
+
+      const btnText = unlocked ? 'QR OLUŞTUR' : `${at - points} PUAN EKSİK`;
+      const btnDisabled = unlocked ? '' : 'disabled';
+
+      return `
+        <div class="niki-r-card ${unlocked ? 'on' : ''}" style="display:flex;align-items:center;justify-content:space-between;padding:12px 12px;border-radius:16px;background:#FAFAFA;border:1px solid #EEE;margin:10px 0;">
+          <div style="text-align:left;">
+            <div style="font-weight:800;color:#1a1a1a;font-size:13px;">${escapeHtml(r.title)}</div>
+            <div style="color:#888;font-size:11px;font-weight:700;margin-top:2px;">${at} puan</div>
+          </div>
+          <button class="niki-genqr-btn" data-reward="${escapeAttr(r.id)}" data-title="${escapeAttr(r.title)}" data-cost="${at}"
+            ${btnDisabled}
+            style="border:none;border-radius:14px;padding:12px 12px;font-weight:900;font-size:12px;cursor:${unlocked ? 'pointer' : 'not-allowed'};background:${unlocked ? '#1a1a1a' : '#E0E0E0'};color:${unlocked ? '#fff' : '#999'};min-width:120px;">
+            ${btnText}
+          </button>
+        </div>
+      `;
+    }).join('');
+
+    $wrap.html(`
+      <div style="font-size:11px;color:#888;text-align:left;margin:6px 0 10px;font-weight:700;">
+        QR oluşturunca puanın <b>kasada okutulunca</b> düşer. (2 dakika geçerli)
+      </div>
+      ${cards}
+    `);
+
+    // click bind
+    $wrap.off('click.nikiGen').on('click.nikiGen', '.niki-genqr-btn:not([disabled])', function () {
+      const rewardId = $(this).data('reward');
+      const title = $(this).data('title') || 'Ödül';
+      const cost = parseInt($(this).data('cost') || 0, 10) || 0;
+
+      generateRewardQR({ rewardId, title, cost });
+    });
+  }
+
+  function generateRewardQR({ rewardId, title, cost }) {
+    // qr modal varsa onu kullan, yoksa basit popup yap
+    if (!rewardId) return;
+
+    // güvenli: o anda puan snapshot
+    $.get('/api/niki-loyalty/wallet-data', function (data) {
+      const points = parseInt(data?.points || 0, 10) || 0;
+      if (points < cost) {
+        showNikiToast('Yetersiz puan', 'warn');
+        refreshWallet();
+        return;
+      }
+
+      if (!confirm(`${title} için QR oluşturulsun mu? (2 dakika geçerli)`)) return;
+
+      // ✅ Claim = sadece token üret (puan düşmez), okutunca düşer
+      $.post('/api/niki-loyalty/claim', { rewardId, _csrf: config.csrf_token }, function (res) {
+        if (!res || !res.success || !res.token) {
+          showNikiToast(res?.message || 'QR oluşturulamadı', 'err');
+          return;
+        }
+
+        initialPointsForQR = points;
+        openQRModal({
+          token: res.token,
+          title: title,
+          ttlSeconds: QR_TTL_SECONDS,
+        });
+
+        startPollingForSuccess();
+      }).fail(function () {
+        showNikiToast('Sunucu hatası (claim)', 'err');
+      });
+    });
+  }
+
+  function openQRModal({ token, title, ttlSeconds }) {
+    // Wallet tpl'nin modalını destekle
+    const $modal = $('#modal-qr');
+    const hasTplModal = $modal.length > 0;
+
+    if (!hasTplModal) {
+      // fallback: hızlı modal enjekte
+      injectFallbackQRModal();
+    }
+
+    // tpl modal elemanları varsa set
+    $('#view-code').show();
+    $('#view-success').hide();
+    $('#ticket-title').text((title || 'ÖDÜL') + ' • KASAYA GÖSTER');
+    $('#ticket-sub').text('QR’ı kasada okut.');
+
+    // QR bas (qrcodejs yoksa token yaz)
+    const qrEl = document.getElementById('qrcode');
+    if (qrEl) {
+      $(qrEl).empty();
+
+      if (typeof QRCode !== 'undefined') {
+        // Büyük, okunaklı QR
+        new QRCode(qrEl, {
+          text: String(token),
+          width: 260,
+          height: 260,
+          colorDark: "#000000",
+          colorLight: "#ffffff",
+          correctLevel: QRCode.CorrectLevel.L
+        });
+      } else {
+        $(qrEl).html(`<div style="font-weight:900;word-break:break-all;">${escapeHtml(token)}</div>`);
+      }
+    }
+
+    // modal aç
+    $('#modal-qr').fadeIn(200).css('display', 'flex');
+
+    // timer
+    startTimer(ttlSeconds);
+  }
+
+  function startTimer(durationSec) {
+    clearInterval(timerInterval);
+    let timer = durationSec;
+    const total = durationSec;
+
+    $('#time-bar').css('width', '100%');
+    $('#timer-txt').text(formatTime(timer));
+
+    timerInterval = setInterval(function () {
+      // modal kapanırsa dur
+      if (!$('#modal-qr').is(':visible') || $('#view-success').is(':visible')) {
+        clearInterval(timerInterval);
+        timerInterval = null;
+        return;
+      }
+
+      const pct = Math.max(0, (timer / total) * 100);
+      $('#time-bar').css('width', pct + '%');
+      $('#timer-txt').text(formatTime(timer));
+
+      timer -= 1;
+      if (timer < 0) {
+        clearInterval(timerInterval);
+        timerInterval = null;
+        closeQRModal();
+        showNikiToast('Süre doldu, kod geçersiz olabilir.', 'warn');
+      }
+    }, 1000);
+  }
+
+  function startPollingForSuccess() {
+    clearInterval(pollInterval);
+
+    pollInterval = setInterval(() => {
+      // modal açık değilse polling durdur
+      if (!$('#modal-qr').is(':visible')) {
+        clearInterval(pollInterval);
+        pollInterval = null;
+        return;
+      }
+
+      // ✅ Eski gibi: puan düşerse -> kasa okutmuş demektir
+      $.get('/api/niki-loyalty/wallet-data', function (data) {
+        const currentP = parseInt(data?.points || 0, 10) || 0;
+
+        // Puan düşmüşse başarı
+        if (initialPointsForQR != null && currentP < initialPointsForQR) {
+          clearInterval(pollInterval);
+          pollInterval = null;
+
+          showSuccessView();
+          setPointsUI(currentP);
+          // reward list refresh
+          renderWalletFromData(data);
+        }
+      });
+    }, 2000);
+  }
+
+  function showSuccessView() {
+    $('#view-code').hide();
+    $('#view-success').fadeIn(200);
+
+    // confetti varsa patlat
+    try {
+      if (typeof confetti !== 'undefined') {
+        confetti({ particleCount: 140, spread: 70, origin: { y: 0.6 } });
+      }
+    } catch (e) {}
+  }
+
+  // tpl'nin closeQR fonksiyonu varsa onu çağır, yoksa kendin kapat
+  window.closeQR = window.closeQR || function () { closeQRModal(); };
+
+  function closeQRModal() {
+    $('#modal-qr').fadeOut(200);
+    clearInterval(pollInterval);
+    pollInterval = null;
+    clearInterval(timerInterval);
+    timerInterval = null;
+    initialPointsForQR = null;
+
+    // wallet refresh
+    if (isWalletPage()) {
+      setTimeout(refreshWallet, 400);
+    }
+  }
+
+  function injectFallbackQRModal() {
+    if ($('#modal-qr').length) return;
+
+    $('body').append(`
+      <div id="modal-qr" class="qr-overlay" style="position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(10,10,10,.92);z-index:10000;">
+        <div class="ticket-card" style="background:#fff;width:320px;border-radius:26px;overflow:hidden;position:relative;">
+          <div class="close-circle" onclick="closeQR()" style="position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;cursor:pointer;">
+            <i class="fa fa-times"></i>
+          </div>
+
+          <div id="view-code">
+            <div class="ticket-top" id="ticket-title" style="background:#111;padding:22px;color:#C5A065;font-weight:900;letter-spacing:2px;font-size:12px;text-align:center;">
+              KASAYA GÖSTERİNİZ
+            </div>
+            <div class="ticket-body" style="padding:30px 22px;text-align:center;">
+              <div id="qrcode" style="display:flex;justify-content:center;margin-bottom:16px;"></div>
+              <div id="ticket-sub" style="font-size:13px;font-weight:900;color:#111;margin-top:4px;">QR hazır</div>
+              <div class="timer-wrapper" style="width:100%;height:6px;background:#eee;border-radius:10px;overflow:hidden;margin-top:12px;">
+                <div class="timer-bar" id="time-bar" style="height:100%;background:#C5A065;width:100%;"></div>
+              </div>
+              <div class="timer-text" id="timer-txt" style="font-size:12px;color:#777;margin-top:8px;font-weight:800;">2:00</div>
+            </div>
+          </div>
+
+          <div id="view-success" class="success-view" style="display:none;padding:34px 18px;text-align:center;">
+            <div class="success-icon" style="width:92px;height:92px;margin:0 auto 16px;border-radius:50%;background:#2E7D32;color:#fff;display:flex;align-items:center;justify-content:center;font-size:44px;">
+              <i class="fa fa-check"></i>
+            </div>
+            <div style="font-size:20px;font-weight:900;color:#111;">AFİYET OLSUN!</div>
+            <div style="font-size:13px;color:#777;margin-top:6px;">Kasa onayı alındı.</div>
+            <button class="niki-btn" onclick="closeQR()" style="margin-top:16px;background:#111;color:#fff;width:100%;padding:14px;border-radius:16px;border:none;font-weight:900;">
+              TAMAM
+            </button>
+          </div>
+        </div>
+      </div>
+    `);
+  }
+
+  function formatTime(sec) {
+    sec = Math.max(0, parseInt(sec, 10) || 0);
+    const m = Math.floor(sec / 60);
+    const s = sec % 60;
+    return `${m}:${s < 10 ? '0' + s : s}`;
+  }
+
+  function escapeHtml(str) {
+    return String(str || '')
+      .replaceAll('&', '&amp;')
+      .replaceAll('<', '&lt;')
+      .replaceAll('>', '&gt;')
+      .replaceAll('"', '&quot;')
+      .replaceAll("'", '&#39;');
+  }
+  function escapeAttr(str) {
+    return escapeHtml(str).replaceAll(' ', '');
+  }
+
+  // Wallet sayfasına ilk girişte render
+  if (isWalletPage()) {
+    refreshWallet();
+  }
 });
-    

package/templates/niki-wallet.tpl

@@ -1,3 +1,6 @@
+<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>
 
@@ -7,10 +10,9 @@
     </div>
 
     <div class="niki-balance-label">Toplam Bakiye</div>
-    <!-- client.js anlık güncelleyebilsin diye id ekledim -->
     <div class="niki-balance-big" id="niki-wallet-points">{points}</div>
 
-    <!-- ✅ ÖDÜL BARI + KADEME DOTLARI (60/120/180/250) -->
+    <!-- ✅ Ö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>
@@ -20,7 +22,6 @@
       <div class="niki-progress-track niki-reward-track" style="position:relative;">
         <div class="niki-progress-fill" id="niki-reward-fill" style="width: 0%;"></div>
 
-        <!-- Milestone dotlar -->
         <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>
@@ -28,37 +29,13 @@
       </div>
 
       <div style="font-size:11px; color:#a7a7a7; margin-top:6px;">
-        Ödülü aldığında <b style="color:#fff;">puan düşer</b>. (Kasa için QR/kupon oluşur.)
+        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 #niki-rewards içine basacak) -->
+    <!-- ✅ REWARD KARTLARI (client.js buraya basacak: QR OLUŞTUR butonları) -->
     <div id="niki-rewards" style="margin-top:16px;"></div>
 
-    <!-- ✅ Kupon/QR alanı (claim sonrası token burada gösterilecek) -->
-    <div id="niki-coupon-area" style="display:none; margin-top:16px;">
-      <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;">
-        <div style="font-weight:800; color:#fff;">Kasada Okut</div>
-        <button class="niki-mini-btn" id="niki-coupon-close" type="button">Kapat</button>
-      </div>
-
-      <div class="niki-coupon-card">
-        <div style="font-size:12px; color:#cfcfcf; margin-bottom:8px;">
-          <span id="niki-coupon-title">Ödül Kuponu</span>
-        </div>
-
-        <div id="niki-coupon-qr" class="niki-qr-box">
-          <!-- QR burada üretilecek (client.js event ile doldurabilir) -->
-          <div style="color:#aaa; font-size:12px;">QR hazırlanıyor...</div>
-        </div>
-
-        <div style="margin-top:10px; font-size:11px; color:#a7a7a7;">
-          Kuponun süresi sınırlı olabilir. Kasada okutunca tek kullanımlık olur.
-        </div>
-      </div>
-    </div>
-
-    <!-- ✅ Günlük kazanım aynı kaldı -->
     <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>
@@ -74,21 +51,50 @@
       </div>
     </div>
 
-    <!-- ❌ Eski kahve QR butonunu kaldırmadım ama UX için “Eski Sistem” diye ayırdım -->
-    <button class="niki-btn-action" id="niki-old-qr-btn" style="margin-top:14px;">
-      <i class="fa fa-qrcode"></i> (Eski) 250 Puan → QR Oluştur
-    </button>
-
     <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="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>
+
+    <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>
+
 <style>
-  /* Bu küçük CSS'ler sadece yeni bölümleri düzgün gösterir */
-  .niki-reward-stats{ margin-top: 14px; }
+  @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; }
 
@@ -104,83 +110,10 @@
     background: rgba(255,255,255,.95);
     border-color: rgba(255,255,255,.95);
   }
-
-  /* rewards container'ın içini client.js dolduruyor */
-  .niki-mbar{ margin-bottom: 12px; }
-  .niki-mbar-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
-  .niki-mbar-title{ font-size:12px; font-weight:800; color:#fff; }
-  .niki-mbar-val{ font-size:12px; font-weight:800; color:#d7d7d7; }
-  .niki-mbar-track{ position:relative; height:10px; border-radius:999px; background: rgba(255,255,255,.10); overflow: hidden; }
-  .niki-mbar-fill{ height:100%; border-radius:999px; background: rgba(255,255,255,.85); width:0%; }
-  .niki-mbar-dot{
-    position:absolute; top:50%; transform: translate(-50%,-50%);
-    width:10px; height:10px; border-radius:999px;
-    background: rgba(255,255,255,.18);
-    border: 1px solid rgba(255,255,255,.28);
-  }
-  .niki-mbar-dot.on{ background: rgba(255,255,255,.95); border-color: rgba(255,255,255,.95); }
-  .niki-mbar-hint{ margin-top:6px; font-size:11px; color:#a7a7a7; }
-
-  .niki-r-list{ display:flex; flex-direction:column; gap:10px; }
-  .niki-r-card{
-    display:flex; justify-content:space-between; align-items:center;
-    padding: 12px 12px;
-    border-radius: 14px;
-    background: rgba(255,255,255,.06);
-    border: 1px solid rgba(255,255,255,.10);
-  }
-  .niki-r-card.on{
-    background: rgba(255,255,255,.10);
-    border-color: rgba(255,255,255,.18);
-  }
-  .niki-r-title{ font-weight:800; color:#fff; font-size:13px; }
-  .niki-r-sub{ color:#bdbdbd; font-size:11px; margin-top:2px; }
-  .niki-r-right{ display:flex; gap:10px; align-items:center; }
-  .niki-r-badge{
-    font-size:11px; font-weight:800;
-    padding: 6px 10px;
-    border-radius: 999px;
-    background: rgba(255,255,255,.08);
-    color: #cfcfcf;
-    border: 1px solid rgba(255,255,255,.10);
-    white-space: nowrap;
-  }
-  .niki-r-badge.on{
-    background: rgba(255,255,255,.18);
-    color:#fff;
-    border-color: rgba(255,255,255,.22);
-  }
-
-  .niki-mini-btn{
-    background: rgba(255,255,255,.10);
-    border: 1px solid rgba(255,255,255,.18);
-    color:#fff;
-    padding: 6px 10px;
-    border-radius: 10px;
-    font-weight:800;
-    font-size:12px;
-    cursor:pointer;
-  }
-
-  .niki-coupon-card{
-    padding: 14px;
-    border-radius: 16px;
-    background: rgba(255,255,255,.06);
-    border: 1px solid rgba(255,255,255,.10);
-  }
-  .niki-qr-box{
-    width: 100%;
-    min-height: 220px;
-    border-radius: 14px;
-    display:flex; align-items:center; justify-content:center;
-    background: rgba(0,0,0,.20);
-    border: 1px dashed rgba(255,255,255,.18);
-  }
 </style>
 
 <script>
-  // Bu script sadece wallet sayfasında barı güncellemek için minik bir helper.
-  // Asıl render/claim zaten güncel client.js içinde.
+  // ✅ sadece bar/dot görsel güncelleme (client.js wallet-data çekince zaten id'leri update ediyor)
   (function(){
     function applyRewardBar(data){
       try{
@@ -197,7 +130,6 @@
         const bm = document.getElementById('niki-bar-max');
         if (bm) bm.textContent = barMax;
 
-        // dot highlight (60/120/180/250)
         document.querySelectorAll('.niki-ms-dot').forEach(dot=>{
           const at = Number(dot.getAttribute('data-at') || 0);
           if (points >= at) dot.classList.add('on');
@@ -206,33 +138,27 @@
       }catch(e){}
     }
 
-    // client.js zaten wallet-data'yı window.__NIKI_WALLET_DATA__ içine koyuyor
+    // client.js her refreshte window.__NIKI_WALLET_DATA__ set ediyorsa kullan
     if (window.__NIKI_WALLET_DATA__) applyRewardBar(window.__NIKI_WALLET_DATA__);
 
-    // ajaxify sonrası tekrar dene
     $(window).on('action:ajaxify.end', function(){
       if (window.__NIKI_WALLET_DATA__) applyRewardBar(window.__NIKI_WALLET_DATA__);
     });
 
-    // claim sonrası event
-    $(window).on('niki:coupon.ready', function(_, res){
-      // İstersen burada QR üretip #niki-coupon-qr içine basarsın.
-      // (QR üretim kütüphanen wallet sayfasında varsa entegre edebiliriz.)
-      const area = document.getElementById('niki-coupon-area');
-      if (area) area.style.display = 'block';
-      const t = document.getElementById('niki-coupon-title');
-      if (t && res && res.reward && res.reward.title) t.textContent = res.reward.title + ' • Kupon';
-
-      // Şimdilik tokenı text olarak da gösterelim (QR yoksa bile)
-      const qrBox = document.getElementById('niki-coupon-qr');
-      if (qrBox && res && res.token){
-        qrBox.innerHTML = '<div style="text-align:center;color:#fff;font-weight:800;">TOKEN</div>'
-                        + '<div style="margin-top:6px;color:#cfcfcf;font-size:12px;word-break:break-all;">' + String(res.token) + '</div>';
+    // 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');
       }
     });
-
-    $('#niki-coupon-close').on('click', function(){
-      $('#niki-coupon-area').hide();
-    });
   })();
+
+  // ✅ client.js modalı açıyor ama tpl tarafında closeQR global kalsın
+  window.closeQR = window.closeQR || function(){
+    $('#modal-qr').fadeOut(200);
+  };
 </script>