feat(rewards): add toast and captcha flow

assets/js/reward.js

@@ -8,6 +8,25 @@
 
   var cfg = window.aksrtData || {};
   var titleSequence = 0;
+  var toastId = 'aksrt-reward-toast';
+
+  function escapeHtml(value) {
+    return String(value == null ? '' : value).replace(/[&<>"']/g, function (character) {
+      return {
+        '&': '&amp;',
+        '<': '&lt;',
+        '>': '&gt;',
+        '"': '&quot;',
+        "'": '&#039;',
+      }[character];
+    });
+  }
+
+  function notify(message, type, time) {
+    if (typeof window.notyf === 'function') {
+      window.notyf(escapeHtml(message), type || 'info', time, toastId);
+    }
+  }
 
   function rewardModal(target) {
     return target.closest('.aksrt-modal-runtime.aksrt-reward-modal');
@@ -24,6 +43,28 @@
     return template.dataset.aksrtOperationKey;
   }
 
+  function runCaptcha(modal) {
+    var mount = modal.querySelector('[data-aksrt-captcha-config][data-scene="tip_user"]');
+    if (!mount) return Promise.resolve({});
+    if (!window.AKSRTCaptcha || typeof window.AKSRTCaptcha.run !== 'function') {
+      return Promise.reject(new Error('人机验证正在加载，请稍后重试'));
+    }
+
+    return window.AKSRTCaptcha.run('tip_user', modal).then(function (payload) {
+      if (!payload) return null;
+      if (!payload.aksrt_captcha_proof) throw new Error('人机验证凭证未就绪，请重试');
+      return payload;
+    });
+  }
+
+  function setSubmitting(modal, submit, submitting, succeeded) {
+    submit.disabled = submitting || succeeded;
+    submit.textContent = submitting ? '验证中…' : '余额赞赏';
+    modal.querySelectorAll('[data-reward-amount], [data-aksrt-reward-custom]').forEach(function (control) {
+      control.disabled = submitting || succeeded;
+    });
+  }
+
   function openReward(trigger) {
     var runtime = window.AksrtModalRuntime;
     if (!runtime || !window.AksrtRequest) {
@@ -96,17 +137,26 @@
     var custom = modal.querySelector('[data-aksrt-reward-custom]');
     var selected = modal.querySelector('[data-reward-amount].is-active');
     var amount = custom && custom.value ? custom.value : (selected ? selected.dataset.rewardAmount : '');
+    if (!amount) {
+      if (message) message.textContent = '请选择或输入赞赏金额';
+      notify('请选择或输入赞赏金额', 'warning');
+      return;
+    }
+    if (custom && custom.value && !custom.checkValidity()) {
+      custom.reportValidity();
+      return;
+    }
     var key;
     try {
       key = operationKey(template);
     } catch (error) {
       if (message) message.textContent = error.message || '无法创建安全请求，请稍后重试';
+      notify(error.message || '无法创建安全请求，请稍后重试', 'danger');
       return;
     }
 
-    submit.disabled = true;
-    submit.textContent = '赞赏中…';
-    if (message) message.textContent = '';
+    setSubmitting(modal, submit, true, false);
+    if (message) message.textContent = '正在进行人机验证…';
 
     var body = new URLSearchParams();
     body.set('action', 'aksrt_submit_tip');
@@ -116,34 +166,70 @@
     body.set('amount', amount);
     var succeeded = false;
 
-    window.fetch(cfg.ajaxUrl || '/wp-admin/admin-ajax.php', {
-      method: 'POST',
-      credentials: 'same-origin',
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
-        'Idempotency-Key': key,
-      },
-      body: body.toString(),
-    }).then(function (response) {
-      return response.json();
+    runCaptcha(modal).then(function (captchaPayload) {
+      if (!captchaPayload) {
+        if (window.AKSRTCaptcha && typeof window.AKSRTCaptcha.reset === 'function') {
+          window.AKSRTCaptcha.reset('tip_user', modal);
+        }
+        return { cancelled: true };
+      }
+      if (runtime.getActive() !== modal) {
+        if (window.AKSRTCaptcha && typeof window.AKSRTCaptcha.reset === 'function') {
+          window.AKSRTCaptcha.reset('tip_user', modal);
+        }
+        return { cancelled: true };
+      }
+      Object.keys(captchaPayload).forEach(function (name) {
+        var value = captchaPayload[name];
+        if (value != null && typeof value !== 'object') body.set(name, String(value));
+      });
+      submit.textContent = '赞赏中…';
+      if (message) message.textContent = '正在提交赞赏…';
+      notify('正在提交赞赏…', 'load', '');
+      return window.fetch(cfg.ajaxUrl || '/wp-admin/admin-ajax.php', {
+        method: 'POST',
+        credentials: 'same-origin',
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
+          'Idempotency-Key': key,
+        },
+        body: body.toString(),
+      }).then(function (response) {
+        return response.json();
+      });
     }).then(function (response) {
       if (runtime.getActive() !== modal) return;
+      if (response && response.cancelled) {
+        if (message) message.textContent = '请完成人机验证后再试';
+        notify('请完成人机验证后再试', 'warning', 5);
+        return;
+      }
       var text = response && response.data && response.data.message ? response.data.message : '赞赏失败';
       if (response && response.success) {
         succeeded = true;
         delete template.dataset.aksrtOperationKey;
         if (message) message.textContent = text;
+        notify(text, 'success', 5);
         window.setTimeout(function () {
           if (runtime.getActive() === modal) runtime.close('success');
         }, 900);
-      } else if (message) {
-        message.textContent = text;
+      } else {
+        if (message) message.textContent = text;
+        notify(text, 'danger', 5);
+        if (window.AKSRTCaptcha && typeof window.AKSRTCaptcha.reset === 'function') {
+          window.AKSRTCaptcha.reset('tip_user', modal);
+        }
+      }
+    }).catch(function (error) {
+      if (runtime.getActive() !== modal) return;
+      var errorMessage = error && error.message ? error.message : '网络错误，请稍后重试';
+      if (message) message.textContent = errorMessage;
+      notify(errorMessage, 'danger', 5);
+      if (window.AKSRTCaptcha && typeof window.AKSRTCaptcha.reset === 'function') {
+        window.AKSRTCaptcha.reset('tip_user', modal);
       }
-    }).catch(function () {
-      if (runtime.getActive() === modal && message) message.textContent = '网络错误，请稍后重试';
     }).finally(function () {
-      submit.disabled = succeeded;
-      submit.textContent = '余额赞赏';
+      setSubmitting(modal, submit, false, succeeded);
     });
   });