ฝังเอกสารใน Overlay ขอความยินยอม

<div id="consent-overlay" role="dialog" aria-modal="true" aria-labelledby="consent-title" hidden>
  <h2 id="consent-title">ก่อนดำเนินการต่อ</h2>

  <!-- ใช้ได้หลังจากโดเมนของคุณได้รับอนุญาตให้ฝัง iframe -->
  <iframe
    src="https://knownledge.feezless.cloud/th/legal/terms-of-use"
    title="ข้อกำหนดการใช้งาน Feezless"
    sandbox="allow-scripts allow-same-origin allow-popups"
    referrerpolicy="strict-origin-when-cross-origin"
    loading="lazy"
    style="width:100%;height:320px;border:0"></iframe>

  <label><input type="checkbox" name="terms-of-use" required />
    ฉันยอมรับ <a href="https://knownledge.feezless.cloud/th/legal/terms-of-use" target="_blank" rel="noopener noreferrer">ข้อกำหนดการใช้งาน</a></label>
  <label><input type="checkbox" name="privacy-policy" required />
    ฉันรับทราบ <a href="https://knownledge.feezless.cloud/th/legal/privacy-policy" target="_blank" rel="noopener noreferrer">นโยบายความเป็นส่วนตัว</a></label>
  <label><input type="checkbox" name="marketing" />
    ยินยอมรับข่าวสารการตลาด (ไม่บังคับ)</label>

  <button type="button" id="consent-accept" disabled>ยอมรับและดำเนินการต่อ</button>
  <button type="button" id="consent-cancel">ยกเลิก</button>
</div>

const REQUIRED = ['terms-of-use', 'privacy-policy'];
const DOC_VERSIONS = { 'terms-of-use': '1.0.0-draft', 'privacy-policy': '1.0.0-draft' };

function requireConsent(scenario, action) {
  const overlay = document.getElementById('consent-overlay');
  const accept = document.getElementById('consent-accept');
  const boxes = overlay.querySelectorAll('input[type="checkbox"]');

  const sync = () => {
    accept.disabled = !REQUIRED.every(
      (name) => overlay.querySelector(`input[name="${name}"]`).checked
    );
  };
  boxes.forEach((box) => box.addEventListener('change', sync));
  sync();
  overlay.hidden = false;

  accept.onclick = async () => {
    const accepted = [...boxes].filter((b) => b.checked).map((b) => b.name);
    // endpoint นี้อยู่บนเซิร์ฟเวอร์ของคุณ ไม่ใช่ API ของ Feezless
    const res = await fetch('https://your-app.example.com/consents', {
      method: 'POST',
      credentials: 'include',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        scenario,
        documents: accepted
          .filter((id) => DOC_VERSIONS[id])
          .map((id) => ({ id, version: DOC_VERSIONS[id] })),
        marketing_opt_in: accepted.includes('marketing'),
        locale: 'th',
      }),
    });
    if (!res.ok) {
      alert('บันทึกความยินยอมไม่สำเร็จ กรุณาลองใหม่');
      return;
    }
    overlay.hidden = true;
    action();
  };

  document.getElementById('consent-cancel').onclick = () => {
    overlay.hidden = true;
  };
}

// ตัวอย่าง: ขอความยินยอมก่อนตั้งรหัส PIN สมาชิก
document.getElementById('set-pin').addEventListener('click', () =>
  requireConsent('membership', () => startPinSetup())
);

{
  "subject_id": "usr_8f3a…",
  "scenario": "membership",
  "documents": [
    { "id": "terms-of-use", "version": "1.0.0-draft" },
    { "id": "privacy-policy", "version": "1.0.0-draft" }
  ],
  "marketing_opt_in": false,
  "locale": "th",
  "accepted_at": "2026-11-02T12:00:00Z",
  "ip_hash": "sha256:…"
}