@beworke/pixel-bemony 0.1.0-rc.1

package/examples/security/checkout-sim.js

@@ -0,0 +1,414 @@
+/**
+ * Wiring compartilhado das telas de checkout simuladas (offer_1/2/3).
+ * Order bump: checkbox dispara click em triggers com data-track
+ * (detectors auto ADD_TO_CART / REMOVE_FROM_CART).
+ */
+(function () {
+  var cfg = window.__CHECKOUT_SIM__;
+  if (!cfg || !cfg.main || !cfg.bump) {
+    console.error('[checkout-sim] window.__CHECKOUT_SIM__ incompleto');
+    return;
+  }
+
+  var main = cfg.main;
+  var bump = cfg.bump;
+  var currency = cfg.currency || 'BRL';
+  var hasBump = false;
+  var paymentMethod = 'CREDIT_CARD';
+  var pixelRef = null;
+  var bumpLockUntil = 0;
+
+  function money(value) {
+    return new Intl.NumberFormat('pt-BR', {
+      style: 'currency',
+      currency: currency,
+    }).format(value);
+  }
+
+  function $(id) {
+    return document.getElementById(id);
+  }
+
+  function setStatus(ready, error) {
+    var el = $('pixel-status');
+    if (!el) return;
+    el.className = 'pill ' + (error ? 'bad' : ready ? 'ok' : '');
+    el.textContent = error ? 'Erro' : ready ? 'Pronto' : 'Init…';
+  }
+
+  /** Resolve o namespace real (API com whenReady), mesmo se o IIFE sobrescrever. */
+  function getBemonyApi() {
+    var bp = window.BemonyPixel;
+    if (!bp) return null;
+    if (typeof bp.whenReady === 'function') return bp;
+    if (
+      bp.bemonyPixelGlobalApi &&
+      typeof bp.bemonyPixelGlobalApi.whenReady === 'function'
+    ) {
+      return bp.bemonyPixelGlobalApi;
+    }
+    return bp;
+  }
+
+  function renderCart() {
+    var list = $('cart-lines');
+    var empty = $('cart-empty');
+    var totalEl = $('cart-total');
+    if (!list || !totalEl) return;
+
+    var lines = [
+      {
+        id: main.id,
+        name: main.name,
+        qty: 1,
+        price: main.price,
+      },
+    ];
+    if (hasBump) {
+      lines.push({
+        id: bump.id,
+        name: bump.name,
+        qty: 1,
+        price: bump.price,
+      });
+    }
+
+    list.innerHTML = '';
+    lines.forEach(function (line) {
+      var li = document.createElement('li');
+      li.innerHTML =
+        '<div><div>' +
+        line.name +
+        '</div><div class="line-meta">' +
+        line.id +
+        ' · qty ' +
+        line.qty +
+        '</div></div><span>' +
+        money(line.price * line.qty) +
+        '</span>';
+      list.appendChild(li);
+    });
+
+    if (empty) empty.hidden = lines.length > 0;
+    list.hidden = lines.length === 0;
+
+    var total = lines.reduce(function (sum, line) {
+      return sum + line.price * line.qty;
+    }, 0);
+    totalEl.textContent = money(total);
+  }
+
+  function syncDebug() {
+    if (!pixelRef) return;
+    var snap = pixelRef.getDebugSnapshot();
+    var sent = $('dbg-transport');
+    var detectors = $('dbg-detectors');
+    var dedupe = $('dbg-dedupe');
+    var sid = $('dbg-sid');
+    var afid = $('dbg-afid');
+    var cart = $('dbg-cart');
+
+    if (sent) {
+      sent.textContent =
+        snap.transport && snap.transport.sentCount !== undefined
+          ? String(snap.transport.sentCount)
+          : '—';
+    }
+    if (detectors) {
+      var active =
+        (snap.conversion && snap.conversion.activeDetectors) || [];
+      detectors.textContent =
+        active.length > 0 ? active.join(', ') : '—';
+    }
+    if (dedupe) {
+      dedupe.textContent =
+        snap.conversion && snap.conversion.dedupeKeyCount !== undefined
+          ? String(snap.conversion.dedupeKeyCount)
+          : '—';
+    }
+    if (sid) {
+      sid.textContent = pixelRef.getPublicSessionId() || '—';
+    }
+    if (afid) {
+      var fromUrl = new URLSearchParams(location.search).get('afid');
+      var fromSource =
+        snap.urlContext &&
+        snap.urlContext.source &&
+        snap.urlContext.source.afid;
+      var fromAttr =
+        snap.attribution &&
+        snap.attribution.identifiers &&
+        snap.attribution.identifiers.afid;
+      afid.textContent = fromUrl || fromSource || fromAttr || '—';
+    }
+    if (cart) {
+      var commerce = snap.commerce || {};
+      cart.textContent =
+        'items=' +
+        (commerce.itemCount ?? '—') +
+        ' value=' +
+        (commerce.cartValue != null ? money(commerce.cartValue) : '—') +
+        ' ids=[' +
+        ((commerce.productIds || []).join(', ') || '—') +
+        ']';
+    }
+  }
+
+  function tryLead() {
+    if (!pixelRef) return;
+    var email = ($('email') && $('email').value) || '';
+    var phone = ($('phone') && $('phone').value) || '';
+    var emitted = pixelRef.captureLead({ email: email, phone: phone });
+    if (emitted) syncDebug();
+  }
+
+  function fireTrackClick(el) {
+    if (!el) return;
+    el.dispatchEvent(
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+        view: window,
+      })
+    );
+  }
+
+  function applyBump(wantOn) {
+    var box = $('bump-check');
+    var addBtn = $('bump-add');
+    var removeBtn = $('bump-remove');
+    if (!pixelRef || !box || !addBtn || !removeBtn) return;
+
+    bumpLockUntil = Date.now() + 1200;
+    hasBump = wantOn;
+    box.checked = wantOn;
+    renderCart();
+
+    if (wantOn) {
+      console.log('[checkout-sim] bump ON → data-track=add_to_cart', bump.id);
+      fireTrackClick(addBtn);
+    } else {
+      console.log('[checkout-sim] bump OFF → data-track=remove_from_cart', bump.id);
+      fireTrackClick(removeBtn);
+    }
+
+    window.setTimeout(function () {
+      syncBumpFromPixel(false);
+      syncDebug();
+    }, 120);
+  }
+
+  function wireBump() {
+    var box = $('bump-check');
+    var addBtn = $('bump-add');
+    var removeBtn = $('bump-remove');
+    if (!box || !addBtn || !removeBtn) {
+      console.error(
+        '[checkout-sim] bump markup incompleto (#bump-check/#bump-add/#bump-remove)'
+      );
+      return;
+    }
+
+    box.disabled = false;
+
+    box.addEventListener('change', function () {
+      var wantOn = box.checked;
+      if (pixelRef) {
+        applyBump(wantOn);
+        return;
+      }
+      // Enfileira até o Pixel ficar ready (não descarta o clique)
+      console.log('[checkout-sim] bump pendente — aguardando Pixel ready…');
+      waitForPixel()
+        .then(function () {
+          applyBump(wantOn);
+        })
+        .catch(function (error) {
+          box.checked = false;
+          console.error('[checkout-sim] bump falhou', error);
+        });
+    });
+  }
+
+  function syncBumpFromPixel(forceCheckbox) {
+    if (!pixelRef) return;
+    var commerce = pixelRef.getDebugSnapshot().commerce || {};
+    var ids = commerce.productIds || [];
+    var inCart = ids.indexOf(bump.id) !== -1;
+    hasBump = inCart;
+
+    var box = $('bump-check');
+    var locked = Date.now() < bumpLockUntil;
+    if (box && (forceCheckbox || !locked) && box.checked !== inCart) {
+      box.checked = inCart;
+    }
+    renderCart();
+  }
+
+  function wirePayment() {
+    document.querySelectorAll('.pay-tab').forEach(function (btn) {
+      btn.addEventListener('click', function () {
+        if (btn.disabled) return;
+        paymentMethod = btn.getAttribute('data-method') || 'CREDIT_CARD';
+        document.querySelectorAll('.pay-tab').forEach(function (b) {
+          b.setAttribute('aria-selected', b === btn ? 'true' : 'false');
+        });
+        var cardFields = $('card-fields');
+        if (cardFields) {
+          cardFields.hidden = paymentMethod !== 'CREDIT_CARD';
+        }
+        if (pixelRef) {
+          pixelRef.trackPaymentMethod({ paymentMethod: paymentMethod });
+          syncDebug();
+        }
+      });
+    });
+  }
+
+  function wireForm() {
+    var form = $('checkout-form');
+    if (!form) return;
+
+    ['email', 'phone'].forEach(function (id) {
+      var el = $(id);
+      if (!el) return;
+      el.addEventListener('blur', tryLead);
+      el.addEventListener('change', tryLead);
+    });
+
+    var addr2Toggle = $('addr2-toggle');
+    var addr2 = $('addr2-field');
+    if (addr2Toggle && addr2) {
+      addr2Toggle.addEventListener('click', function () {
+        addr2.hidden = false;
+        addr2Toggle.hidden = true;
+      });
+    }
+
+    form.addEventListener('submit', function (event) {
+      event.preventDefault();
+      if (!pixelRef) return;
+      tryLead();
+      pixelRef.trackPaymentMethod({ paymentMethod: paymentMethod });
+      pixelRef.startCheckout({
+        value: hasBump ? main.price + bump.price : main.price,
+        currency: currency,
+      });
+      syncDebug();
+
+      var sim = window.BemonyFunnelSim;
+      var oid = sim ? sim.ensureOid() : 'ord_local';
+      var nextHref =
+        (cfg.nextHref) ||
+        (sim && sim.FLOW && sim.FLOW.afterCheckout) ||
+        '../funnel/upsell/upsell_1.html';
+
+      console.log('[checkout-sim] Complete order → upsell', {
+        sid: pixelRef.getPublicSessionId(),
+        paymentMethod: paymentMethod,
+        hasBump: hasBump,
+        oid: oid,
+        nextHref: nextHref,
+      });
+
+      // Simula redirect 302 pós-pagamento → página externa de upsell
+      window.setTimeout(function () {
+        if (sim) {
+          sim.navigate(nextHref, { oid: oid });
+        } else {
+          var url = new URL(nextHref, location.href);
+          url.searchParams.set('oid', oid);
+          location.assign(url.pathname + url.search);
+        }
+      }, 400);
+    });
+  }
+
+  function waitForPixel(attempt) {
+    var n = attempt || 0;
+    var api = getBemonyApi();
+
+    if (api) {
+      if (typeof api.getBootstrappedBemonyPixel === 'function') {
+        var existing = api.getBootstrappedBemonyPixel();
+        if (existing && existing.getState && existing.getState() === 'ready') {
+          return Promise.resolve(existing);
+        }
+      }
+      if (typeof api.whenReady === 'function') {
+        return api.whenReady();
+      }
+      if (api.ready && typeof api.ready.then === 'function') {
+        return api.ready.then(function (pixel) {
+          if (pixel) return pixel;
+          throw new Error('BemonyPixel.ready resolveu null');
+        });
+      }
+    }
+
+    if (n > 80) {
+      return Promise.reject(
+        new Error(
+          'BemonyPixel indisponível após espera (sem whenReady/getBootstrapped)'
+        )
+      );
+    }
+
+    return new Promise(function (resolve, reject) {
+      window.setTimeout(function () {
+        waitForPixel(n + 1).then(resolve, reject);
+      }, 50);
+    });
+  }
+
+  function onPixelReady(pixel) {
+    pixelRef = pixel;
+    setStatus(true, null);
+    var box = $('bump-check');
+    if (box) box.disabled = false;
+    syncBumpFromPixel(true);
+    syncDebug();
+    setInterval(function () {
+      syncBumpFromPixel(false);
+      syncDebug();
+    }, 1500);
+    console.log('[checkout-sim] ready', {
+      offer: main.id,
+      sid: pixel.getPublicSessionId(),
+      detectors: pixel.getDebugSnapshot().conversion.activeDetectors,
+      commerce: pixel.getDebugSnapshot().commerce,
+    });
+  }
+
+  function boot() {
+    setStatus(false, null);
+    renderCart();
+    wireBump();
+    wirePayment();
+    wireForm();
+
+    document.addEventListener('bemony:pixel:ready', function (event) {
+      if (pixelRef) return;
+      var detail = event && event.detail;
+      var pixel = detail && detail.pixel;
+      if (pixel) onPixelReady(pixel);
+    });
+
+    waitForPixel()
+      .then(onPixelReady)
+      .catch(function (error) {
+        setStatus(false, true);
+        console.error('[checkout-sim] error', error);
+        console.error(
+          '[checkout-sim] window.BemonyPixel keys:',
+          window.BemonyPixel ? Object.keys(window.BemonyPixel) : null
+        );
+      });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', boot);
+  } else {
+    boot();
+  }
+})();

package/examples/security/one-click/pri_downsell_1.html

@@ -0,0 +1,85 @@
+<!doctype html>
+<html lang="pt-BR">
+  <head>
+    <meta charset="utf-8" />
+    <title>Security · One-click Downsell · pri_downsell_1</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+      body {
+        font-family: Georgia, 'Times New Roman', serif;
+        max-width: 28rem;
+        margin: 0 auto;
+        padding: 2rem 1rem;
+        background: linear-gradient(165deg, #e8eef0, #f4f1ea);
+        color: #17201b;
+        line-height: 1.5;
+      }
+      button {
+        width: 100%;
+        padding: 0.9rem;
+        background: #122019;
+        color: #fff;
+        border: 0;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+      button:disabled {
+        opacity: 0.5;
+        cursor: wait;
+      }
+      .pill {
+        display: inline-block;
+        padding: 0.15rem 0.5rem;
+        border-radius: 999px;
+        background: #dfe8e2;
+        font-size: 0.75rem;
+      }
+      .pill.ok {
+        background: #c6e6cf;
+      }
+      .pill.bad {
+        background: #f0c9c9;
+      }
+      pre {
+        background: #142019;
+        color: #dceee6;
+        padding: 0.85rem;
+        font-size: 0.72rem;
+        overflow: auto;
+      }
+    </style>
+  </head>
+  <body>
+    <p>Bemony · security (interno)</p>
+    <h1>One-click · Downsell 1</h1>
+    <p>
+      Identidade <code>pri_downsell_1</code> vem do path da URL (sem
+      <code>data-price-code</code>).
+    </p>
+    <p>Status: <span id="pixel-status" class="pill">Init…</span></p>
+    <button type="button" id="confirm" disabled>Confirmar oferta</button>
+    <pre id="funnel-debug">aguardando…</pre>
+    <!-- <script src="../../sim/funnel-flow.js"></script> -->
+    <!-- <script>
+      (function () {
+        var STAGE = 1;
+        var sim = window.BemonyFunnelSim;
+        window.__ONE_CLICK_SIM__ = {
+          label: 'oc-downsell_1',
+          offerId: 'offer_downsell_1',
+          productId: 'product_1',
+          price: 29,
+          currency: 'USD',
+          productType: 'downsell',
+          funnelStepId: 'step_downsell_1',
+          nextHref: sim.nextAfterDownsell(1),
+        };
+      })();
+    </script> -->
+    <script
+      src="../../../dist/browser/pixel-bemony.global.js"
+      data-auto-init="false"
+    ></script>
+    <!-- <script src="../../sim/one-click-sim.js"></script> -->
+  </body>
+</html>

package/examples/security/one-click/pri_downsell_1a.html

@@ -0,0 +1,85 @@
+<!doctype html>
+<html lang="pt-BR">
+  <head>
+    <meta charset="utf-8" />
+    <title>Security · One-click Downsell · pri_downsell_1a</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+      body {
+        font-family: Georgia, 'Times New Roman', serif;
+        max-width: 28rem;
+        margin: 0 auto;
+        padding: 2rem 1rem;
+        background: linear-gradient(165deg, #e8eef0, #f4f1ea);
+        color: #17201b;
+        line-height: 1.5;
+      }
+      button {
+        width: 100%;
+        padding: 0.9rem;
+        background: #122019;
+        color: #fff;
+        border: 0;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+      button:disabled {
+        opacity: 0.5;
+        cursor: wait;
+      }
+      .pill {
+        display: inline-block;
+        padding: 0.15rem 0.5rem;
+        border-radius: 999px;
+        background: #dfe8e2;
+        font-size: 0.75rem;
+      }
+      .pill.ok {
+        background: #c6e6cf;
+      }
+      .pill.bad {
+        background: #f0c9c9;
+      }
+      pre {
+        background: #142019;
+        color: #dceee6;
+        padding: 0.85rem;
+        font-size: 0.72rem;
+        overflow: auto;
+      }
+    </style>
+  </head>
+  <body>
+    <p>Bemony · security (interno)</p>
+    <h1>One-click · Downsell 1</h1>
+    <p>
+      Identidade <code>pri_downsell_1a</code> vem do path da URL (sem
+      <code>data-price-code</code>).
+    </p>
+    <p>Status: <span id="pixel-status" class="pill">Init…</span></p>
+    <button type="button" id="confirm" disabled>Confirmar oferta</button>
+    <pre id="funnel-debug">aguardando…</pre>
+    <script src="../../sim/funnel-flow.js"></script>
+    <script>
+      (function () {
+        var STAGE = 1;
+        var sim = window.BemonyFunnelSim;
+        window.__ONE_CLICK_SIM__ = {
+          label: 'oc-downsell_1a',
+          offerId: 'offer_downsell_1a',
+          productId: 'product_1',
+          price: 27,
+          currency: 'USD',
+          productType: 'downsell',
+          funnelStepId: 'step_downsell_1',
+          nextHref: sim.nextAfterDownsell(1),
+        };
+      })();
+    </script>
+    <script
+      src="../../../dist/browser/pixel-bemony.global.js"
+      data-auto-init="false"
+    ></script>
+    <script src="../../sim/one-click-sim.js"></script>
+  </body>
+</html>

package/examples/security/one-click/pri_downsell_1b.html

@@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="pt-BR">
+  <head>
+    <meta charset="utf-8" />
+    <title>Security · One-click Downsell · pri_downsell_1b</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+      body {
+        font-family: Georgia, 'Times New Roman', serif;
+        max-width: 28rem;
+        margin: 0 auto;
+        padding: 2rem 1rem;
+        background: linear-gradient(165deg, #e8eef0, #f4f1ea);
+        color: #17201b;
+        line-height: 1.5;
+      }
+      button {
+        width: 100%;
+        padding: 0.9rem;
+        background: #122019;
+        color: #fff;
+        border: 0;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+      button:disabled { opacity: 0.5; cursor: wait; }
+      .pill {
+        display: inline-block;
+        padding: 0.15rem 0.5rem;
+        border-radius: 999px;
+        background: #dfe8e2;
+        font-size: 0.75rem;
+      }
+      .pill.ok { background: #c6e6cf; }
+      .pill.bad { background: #f0c9c9; }
+      pre {
+        background: #142019;
+        color: #dceee6;
+        padding: 0.85rem;
+        font-size: 0.72rem;
+        overflow: auto;
+      }
+    </style>
+  </head>
+  <body>
+    <p>Bemony · security (interno)</p>
+    <h1>One-click · Downsell 1</h1>
+    <p>
+      Identidade <code>pri_downsell_1b</code> vem do path da URL (sem
+      <code>data-price-code</code>).
+    </p>
+    <p>Status: <span id="pixel-status" class="pill">Init…</span></p>
+    <button type="button" id="confirm" disabled>Confirmar oferta</button>
+    <pre id="funnel-debug">aguardando…</pre>
+    <script src="../../sim/funnel-flow.js"></script>
+    <script>
+      (function () {
+        var STAGE = 1;
+        var sim = window.BemonyFunnelSim;
+        window.__ONE_CLICK_SIM__ = {
+          label: 'oc-downsell_1b',
+          offerId: 'offer_downsell_1b',
+          productId: 'product_1',
+          price: 19,
+          currency: 'USD',
+          productType: 'downsell',
+          funnelStepId: 'step_downsell_1',
+          nextHref: sim.nextAfterDownsell(1),
+        };
+      })();
+    </script>
+    <script
+      src="../../../dist/browser/pixel-bemony.global.js"
+      data-auto-init="false"
+    ></script>
+    <script src="../../sim/one-click-sim.js"></script>
+  </body>
+</html>