English

Table Games

ElRoyal Casino

// Global welcome-bonus dropdown: makes a RichText header toggle its paired
// bonuses/promo-code organism. Supports multiple independent instances on
// the same page (e.g. the in-page block and a modal copy), each with its
// own collapse behavior controlled via data attributes.

(function () {
  'use strict';

  const SCRIPT_ID = 'welcome-bonus-dropdown';

  // ---- Config: adjust these per brand ----
  const CONFIG = {
    animation: {
      durationMs: 300,
      // Max height of the expanded dropdown (in vh); content taller than this scrolls inside
      maxHeightVh: 60,
    },

    // Auto-collapse the dropdown once a bonus pick gets confirmed server-side (Cancel button becomes active)
    autoCollapseOnConfirm: true,

    icon: {
      default: '/assets/gift_7f58f876fd.svg', // bonus list available, nothing picked yet
      selected: '/assets/gift_7f58f876fd.svg', // a bonus is selected/confirmed
      noBonuses: '/assets/gift_7f58f876fd.svg', // no bonuses available, promo code only
    },

    texts: {
      // Bonus list is available, user has not picked one yet
      notSelected: {
        title: '',
        subtitle: 'Available bonuses',
        buttonText: 'Select',
      },
      // A bonus is selected/confirmed — subtitle gets overridden with the actual bonus name
      selected: {
        title: 'Your Bonus',
        buttonText: 'Change',
      },
      // No bonuses available, only a promo code can be entered
      noBonuses: {
        title: '',
        subtitle: 'Have a promo code?',
        buttonText: 'Continue',
      },
    },
  };

  // Instance pairing: every header/organism pair on the page shares the same
  // key via these two attributes, e.g. data-bonus-header="main" /
  // data-bonus-organism="main". Trigger visibility (e.g. hiding on desktop)
  // is controlled entirely outside this script (Strapi grid item settings);
  // this script never hides the header itself.
  const HEADER_SELECTOR = '[data-bonus-header]';
  const ORGANISM_ATTR = 'data-bonus-organism';

  // Optional, set on the organism element. When present, the collapse/expand
  // behavior (and its CSS) only applies below this viewport width (px) — above
  // it, the organism is just displayed statically, no dropdown mechanics.
  // When absent, the dropdown is active at every viewport width.
  const DISABLE_DROPDOWN_ATTR = 'data-disable-dropdown';

  // Structural selectors below describe the WrapperOrganism/BonusesDepositWidget
  // markup itself (owned by the Next.js components), not per-instance Strapi
  // config — do not change these when wiring up a new instance.
  const COLLAPSE_TARGET_SELECTOR = '[data-cp="wrapperContainerProps"]';
  const BONUS_WIDGET_SELECTOR = '[data-organism="ComponentPlayerAccountBonusesDepositWidget"]';
  const MAIN_BOX_SELECTOR = '[data-cp="mainBoxProps"][data-testid="ComponentPlayerAccountBonusesDepositWidget"]';
  const CHECKED_ICON_SELECTOR = '[data-cp="checkboxCheckedIconProps"]';
  const BONUS_ITEM_SELECTOR = '[data-cp="bonusListItemProps"]';
  const BONUS_TITLE_SELECTOR = '[data-cp="typographyProps"]';
  const CANCEL_BUTTON_SELECTOR = '[data-testid="ComponentPlayerAccountBonusesDepositWidget-cancelBonusButton"]';
  const BONUS_TERMS_SELECTOR = '[data-cp="bonusDescriptionTypographyProps"]';
  const DEPOSIT_INFO_SELECTOR = '[data-cp="depositInfoTypographyProps"]';

  // Wrapper that keeps the Cancel button in flow next to the confirmed bonus item
  const CANCEL_TERMS_WRAPPER_CLASS = 'wbd-cancel-terms-wrapper';

  const STATE_ATTR = `data-${SCRIPT_ID}-state`;

  // Marker attribute that temporarily kills the max-height transition. Used
  // only for the first state application on a freshly (re)rendered collapse
  // target, whose default CSS state is "expanded/visible" until JS sets
  // STATE_ATTR — without this, that initial snap-to-collapsed briefly
  // animates and reads as an unwanted flash (most visible right as a modal
  // opens).
  const NO_ANIM_ATTR = `data-${SCRIPT_ID}-no-anim`;

  // instanceKey -> instance state
  const instances = new Map();

  function logWarning(message, error) {
    console.warn(`[${SCRIPT_ID}] ${message}`, error || '');
  }

  function injectBaseStyles() {
    if (document.querySelector(`#${SCRIPT_ID}-styles-base`)) return;

    // Header cosmetics (colors, layout, button/chevron swap) are already
    // styled in the RichText block itself — these rules only patch the
    // no-bonuses variant, which needs the chevron visible where the base
    // header CSS hides it on [data-state="collapsed"].
    document.head.insertAdjacentHTML('beforeend', `
      <style id="${SCRIPT_ID}-styles-base">
        ${HEADER_SELECTOR}[data-bonus-state="noBonuses"] .action-button {
          display: none;
        }

        ${HEADER_SELECTOR}[data-bonus-state="noBonuses"] .action-chevron {
          display: inline-block !important;
          transform: rotate(90deg);
        }

        ${HEADER_SELECTOR}[data-bonus-state="noBonuses"][data-state="expanded"] .action-chevron {
          transform: none;
        }
      </style>
    `);
  }

  // Per-instance collapse CSS, wrapped in a max-width media query when disableBreakpoint is set
  function injectInstanceStyles(instanceKey, disableBreakpoint) {
    const styleId = `${SCRIPT_ID}-styles-${instanceKey}`;
    if (document.querySelector(`#${styleId}`)) return;

    const organismSelector = `[${ORGANISM_ATTR}="${instanceKey}"]`;
    const collapseRules = `
      ${organismSelector} ${COLLAPSE_TARGET_SELECTOR} {
        overflow: auto;
        max-height: ${CONFIG.animation.maxHeightVh}vh;
        transition: max-height ${CONFIG.animation.durationMs}ms ease;
      }

      ${organismSelector} ${COLLAPSE_TARGET_SELECTOR}[${STATE_ATTR}="collapsed"] {
        overflow: hidden;
        max-height: 0;
      }

      ${organismSelector} ${COLLAPSE_TARGET_SELECTOR}[${NO_ANIM_ATTR}] {
        transition: none;
      }
    `;

    const css = disableBreakpoint
      ? `@media (max-width: ${disableBreakpoint - 1}px) { ${collapseRules} }`
      : collapseRules;

    document.head.insertAdjacentHTML('beforeend', `<style id="${styleId}">${css}</style>`);
  }

  function getConfirmedBonusItem(mainBox) {
    const checkedIcon = mainBox.querySelector(CHECKED_ICON_SELECTOR);
    if (!checkedIcon) return null;

    // A checked icon alone only reflects the local radio pick. The bonus is
    // confirmed/reserved server-side only once the Cancel button becomes
    // clickable (Activate itself stays disabled here — it only fires once
    // a real deposit is made outside this widget).
    const cancelButton = mainBox.querySelector(CANCEL_BUTTON_SELECTOR);
    if (!cancelButton || cancelButton.disabled) return null;

    return checkedIcon.closest(BONUS_ITEM_SELECTOR);
  }

  function getConfirmedBonusTitle(mainBox) {
    const item = getConfirmedBonusItem(mainBox);
    const titleElement = item ? item.querySelector(BONUS_TITLE_SELECTOR) : null;

    return titleElement ? titleElement.textContent.trim() : null;
  }

  function getOrCreateTermsWrapper(termsElement) {
    const parent = termsElement.parentElement;
    if (parent && parent.classList.contains(CANCEL_TERMS_WRAPPER_CLASS)) {
      return parent;
    }

    const wrapper = document.createElement('div');
    wrapper.className = CANCEL_TERMS_WRAPPER_CLASS;
    parent.insertBefore(wrapper, termsElement);
    wrapper.appendChild(termsElement);
    return wrapper;
  }

  function unwrapTermsElement(termsElement) {
    const wrapper = termsElement.parentElement;
    if (!wrapper || !wrapper.classList.contains(CANCEL_TERMS_WRAPPER_CLASS)) return;

    const grandParent = wrapper.parentElement;
    if (!grandParent) return;

    grandParent.insertBefore(termsElement, wrapper);
    wrapper.remove();
  }

  // Used when the confirmed item has no terms paragraph
  function getOrCreateItemWrapper(item) {
    const existingWrapper = item.querySelector(`:scope > .${CANCEL_TERMS_WRAPPER_CLASS}`);
    if (existingWrapper) return existingWrapper;

    const wrapper = document.createElement('div');
    wrapper.className = CANCEL_TERMS_WRAPPER_CLASS;
    item.appendChild(wrapper);
    return wrapper;
  }

  function clearWrappedItemWrapper(instance) {
    if (instance.wrappedItemWrapper && instance.wrappedItemWrapper.isConnected) {
      instance.wrappedItemWrapper.remove();
    }
    instance.wrappedItemWrapper = null;
  }

  function clearWrappedTermsElement(instance) {
    if (instance.wrappedTermsElement && instance.wrappedTermsElement.isConnected) {
      unwrapTermsElement(instance.wrappedTermsElement);
    }
    instance.wrappedTermsElement = null;
  }

  function restoreCancelButtonPosition(mainBox, cancelButton) {
    const depositInfo = mainBox.querySelector(DEPOSIT_INFO_SELECTOR);

    if (depositInfo) {
      if (cancelButton.nextElementSibling !== depositInfo) {
        depositInfo.parentElement.insertBefore(cancelButton, depositInfo);
      }
    } else if (cancelButton.parentElement !== mainBox) {
      mainBox.appendChild(cancelButton);
    }
  }

  function positionCancelButton(instance, wrapperOrganism) {
    const bonusWidget = wrapperOrganism.querySelector(BONUS_WIDGET_SELECTOR);
    const mainBox = bonusWidget ? bonusWidget.querySelector(MAIN_BOX_SELECTOR) : null;
    if (!mainBox) return;

    const cancelButton = mainBox.querySelector(CANCEL_BUTTON_SELECTOR);
    if (!cancelButton) return;

    const item = getConfirmedBonusItem(mainBox);

    if (!item) {
      clearWrappedTermsElement(instance);
      clearWrappedItemWrapper(instance);
      restoreCancelButtonPosition(mainBox, cancelButton);
      return;
    }

    const termsElement = item.querySelector(BONUS_TERMS_SELECTOR);

    if (termsElement) {
      clearWrappedItemWrapper(instance);

      if (instance.wrappedTermsElement && instance.wrappedTermsElement !== termsElement) {
        clearWrappedTermsElement(instance);
      }

      const wrapper = getOrCreateTermsWrapper(termsElement);
      if (cancelButton.parentElement !== wrapper) {
        wrapper.appendChild(cancelButton);
      }
      instance.wrappedTermsElement = termsElement;
      return;
    }

    clearWrappedTermsElement(instance);

    if (instance.wrappedItemWrapper && instance.wrappedItemWrapper.parentElement !== item) {
      clearWrappedItemWrapper(instance);
    }

    const wrapper = getOrCreateItemWrapper(item);
    if (cancelButton.parentElement !== wrapper) {
      wrapper.appendChild(cancelButton);
    }
    instance.wrappedItemWrapper = wrapper;
  }

  function getBonusWidgetState(wrapperOrganism) {
    const bonusWidget = wrapperOrganism.querySelector(BONUS_WIDGET_SELECTOR);
    const mainBox = bonusWidget ? bonusWidget.querySelector(MAIN_BOX_SELECTOR) : null;

    if (!mainBox) {
      return { state: 'noBonuses', selectedTitle: null };
    }

    const selectedTitle = getConfirmedBonusTitle(mainBox);

    return {
      state: selectedTitle ? 'selected' : 'notSelected',
      selectedTitle,
    };
  }

  function updateHeaderContent(header, wrapperOrganism) {
    const { state, selectedTitle } = getBonusWidgetState(wrapperOrganism);
    const iconElement = header.querySelector('.icon');
    const titleElement = header.querySelector('.title');
    const subtitleElement = header.querySelector('.subtitle');
    const actionButtonElement = header.querySelector('.action-button');

    const textConfig = CONFIG.texts[state];
    const iconSrc = CONFIG.icon[state === 'notSelected' ? 'default' : state];

    iconElement.src = iconSrc;
    titleElement.textContent = textConfig.title;
    subtitleElement.textContent = state === 'selected' ? selectedTitle : textConfig.subtitle;
    actionButtonElement.textContent = textConfig.buttonText;
    header.setAttribute('data-bonus-state', state);

    return { state, selectedTitle };
  }

  function applyExpandedState(instance) {
    instance.header.setAttribute('data-state', instance.isExpanded ? 'expanded' : 'collapsed');
    instance.header.setAttribute('aria-expanded', String(instance.isExpanded));
    instance.collapseTarget.setAttribute(STATE_ATTR, instance.isExpanded ? 'expanded' : 'collapsed');
  }

  function toggleExpanded(instance) {
    instance.isExpanded = !instance.isExpanded;
    applyExpandedState(instance);
  }

  function bindHeader(instance) {
    const { header } = instance;
    if (header.dataset.bound === 'true') return;

    header.dataset.bound = 'true';

    function handleToggle() {
      if (!instance.collapseTarget) return;
      toggleExpanded(instance);
    }

    header.addEventListener('click', handleToggle);
    // Keyboard support: the header is not a native button
    header.addEventListener('keydown', (event) => {
      if (event.key === 'Enter' || event.key === ' ') {
        event.preventDefault();
        handleToggle();
      }
    });
  }

  function refreshInstanceContent(instance) {
    // First application on this (possibly brand-new) collapse target: apply
    // it with the transition suppressed so a collapsed instance simply isn't
    // there on first paint instead of visibly collapsing, then force layout
    // before restoring the transition so subsequent toggles animate normally.
    instance.collapseTarget.setAttribute(NO_ANIM_ATTR, '');
    applyExpandedState(instance);
    void instance.collapseTarget.offsetHeight;
    instance.collapseTarget.removeAttribute(NO_ANIM_ATTR);

    instance.previousSelectedTitle = updateHeaderContent(instance.header, instance.wrapperOrganism).selectedTitle;
    positionCancelButton(instance, instance.wrapperOrganism);
  }

  function watchWrapperOrganism(instance) {
    if (instance.selectionObserver) {
      instance.selectionObserver.disconnect();
    }

    refreshInstanceContent(instance);

    instance.selectionObserver = new MutationObserver(() => {
      const result = updateHeaderContent(instance.header, instance.wrapperOrganism);
      positionCancelButton(instance, instance.wrapperOrganism);

      // Auto-collapse only once the pick is confirmed (Cancel becomes
      // clickable) — not on the raw checked-icon toggle, which fires before
      // that confirmation and could still be reverted
      if (
        CONFIG.autoCollapseOnConfirm &&
        instance.isExpanded &&
        result.state === 'selected' &&
        result.selectedTitle !== instance.previousSelectedTitle
      ) {
        instance.isExpanded = false;
        applyExpandedState(instance);
      }

      instance.previousSelectedTitle = result.selectedTitle;
    });

    // childList/subtree only: the checked/unchecked icon is swapped as a
    // whole element, not toggled via an attribute, and this also avoids the
    // observer re-triggering itself off of our own setAttribute() calls
    instance.selectionObserver.observe(instance.wrapperOrganism, {
      childList: true,
      subtree: true,
    });
  }

  function ensureInstance(instanceKey, header) {
    // No organism for this key (yet, or ever, on this page) is a normal
    // state, not an error — stay quiet and let the next tick() re-check
    const wrapperOrganism = document.querySelector(`[${ORGANISM_ATTR}="${instanceKey}"]`);
    if (!wrapperOrganism) return;

    const collapseTarget = wrapperOrganism.querySelector(COLLAPSE_TARGET_SELECTOR);
    if (!collapseTarget) {
      logWarning(`"${COLLAPSE_TARGET_SELECTOR}" not found inside the organism wrapper for instance "${instanceKey}"`);
      return;
    }

    let instance = instances.get(instanceKey);
    if (!instance) {
      const disableBreakpointRaw = wrapperOrganism.getAttribute(DISABLE_DROPDOWN_ATTR);
      const disableBreakpoint = disableBreakpointRaw ? Number(disableBreakpointRaw) : null;

      instance = {
        key: instanceKey,
        header,
        wrapperOrganism: null,
        collapseTarget: null,
        selectionObserver: null,
        isExpanded: false,
        previousSelectedTitle: null,
        wrappedTermsElement: null,
        wrappedItemWrapper: null,
        disableBreakpoint: Number.isFinite(disableBreakpoint) ? disableBreakpoint : null,
      };
      instances.set(instanceKey, instance);
    }

    // Re-point to the new header node if a React re-render replaced it (e.g.
    // navigating away and back, or closing/reopening a modal copy) — the old
    // node is detached and its click listener is gone with it, so bindHeader
    // below must operate on the current one, not a stale reference.
    const headerChanged = header !== instance.header;
    if (headerChanged) {
      instance.header = header;
    }

    injectInstanceStyles(instanceKey, instance.disableBreakpoint);
    bindHeader(instance);

    // Re-attach if the organism (or the collapse target inside it) was
    // replaced by a React re-render
    if (wrapperOrganism !== instance.wrapperOrganism || collapseTarget !== instance.collapseTarget) {
      instance.wrapperOrganism = wrapperOrganism;
      instance.collapseTarget = collapseTarget;
      watchWrapperOrganism(instance);
    } else if (headerChanged) {
      // Organism itself is unchanged (same MutationObserver still valid),
      // but the header is a fresh node — just resync its content/state.
      refreshInstanceContent(instance);
    }
  }

  function init() {
    if (window.__WELCOME_BONUS_DROPDOWN_INITIALIZED__) return;
    window.__WELCOME_BONUS_DROPDOWN_INITIALIZED__ = true;

    injectBaseStyles();

    // No timeout-bound wait here: on a slow mobile connection / cold direct
    // load, headers and organisms can take much longer than any fixed
    // timeout to appear. A perpetual observer just keeps checking instead
    // of giving up and leaving instances unbound.
    function tick() {
      const headers = document.querySelectorAll(HEADER_SELECTOR);

      headers.forEach((header) => {
        const instanceKey = header.getAttribute('data-bonus-header');
        if (!instanceKey) {
          logWarning('Header is missing a data-bonus-header instance key', header);
          return;
        }

        ensureInstance(instanceKey, header);
      });
    }

    tick();

    // Kept alive for the whole session: selecting/activating/canceling a
    // bonus re-renders these widgets' DOM repeatedly after the first paint,
    // and new instances (e.g. a modal opened later) can appear at any time
    const bodyObserver = new MutationObserver(tick);
    bodyObserver.observe(document.body, {
      childList: true,
      subtree: true,
    });
  }

  init();
})();

// End of Welcome Bonus Dropdown


// Cashier iframe bridge: syncs cashier iframe height and forwards cashier GA events to dataLayer

(function () {
  'use strict';

  const SCRIPT_ID = 'cashier-iframe-bridge';
  const CASHIER_CONTAINER_SELECTOR = '[data-organism="ComponentPlayerAccountCashier"]';

  const PUSHED_EVENTS_STORAGE_KEY = `${SCRIPT_ID}-pushed-events`;
  const MAX_PUSHED_EVENTS = 100;

  // Service event of the cashier, never sent to GA
  const IGNORED_EVENT = 'deposit_number';

  if (window.__CASHIER_IFRAME_BRIDGE_INIT__) return;
  window.__CASHIER_IFRAME_BRIDGE_INIT__ = true;

  function warn(message, details) {
    console.warn(`[${SCRIPT_ID}] ${message}`, details ?? '');
  }

  // --- Message routing ---

  function handleMessage(event) {
    // Messages posted by the page itself (browser extensions, widgets) are skipped cheaply
    if (!event.source || event.source === window) return;

    const cashierIframe = findCashierIframe(event.source);
    if (!cashierIframe) return;

    const data = parseMessageData(event.data);
    if (!data || typeof data !== 'object') return;

    try {
      if (data.type === 'fixHeight') {
        setIframeHeight(cashierIframe, data.height);
        return;
      }

      // Remember deposit number from standalone cashier messages
      if (data.event === 'deposit_number' && data.depositNumber !== undefined) {
        rememberDepositNumber(data.depositNumber);
      }

      const gaEvent = normalizeGaEvent(data);
      if (gaEvent) {
        handleGaEvent(gaEvent);
      }
    } catch (error) {
      warn('Failed to handle cashier message', error);
    }
  }

  // Multiple cashier containers can exist at once (e.g. deposit page + modal),
  // so the iframe that sent the message is matched by its contentWindow
  function findCashierIframe(sourceWindow) {
    const containers = document.querySelectorAll(CASHIER_CONTAINER_SELECTOR);

    for (const container of containers) {
      const iframe = container.querySelector('iframe');
      if (iframe?.contentWindow === sourceWindow) return iframe;
    }

    return null;
  }

  function parseMessageData(rawData) {
    if (typeof rawData !== 'string') return rawData;

    try {
      return JSON.parse(rawData);
    } catch (error) {
      return null;
    }
  }

  // --- "fixHeight" message: resize the cashier iframe wrapper ---

  function setIframeHeight(iframe, height) {
    const wrapper = iframe.parentElement?.parentElement;

    if (!wrapper) {
      warn('Cashier iframe wrapper not found');
      return;
    }

    wrapper.style.height = height;
  }

  // --- GA events ---

  // Converts both supported formats to { params, id }:
  //   new:    { namespace: "cashier", type: "gaEvent", timestamp, payload: { event, ... } }
  //   legacy: { gaevent: { event, ... }, gatime }
  function normalizeGaEvent(data) {
    if (data.namespace === 'cashier' && data.type === 'gaEvent' && data.payload) {
      return { params: data.payload, id: data.timestamp };
    }

    if (data.gaevent) {
      return { params: data.gaevent, id: data.gatime };
    }

    return null;
  }

  function handleGaEvent({ params, id }) {
    // Remember deposit number from GA event payload
    if (params.depositNumber !== undefined) {
      rememberDepositNumber(params.depositNumber);
    }

    if (!params.event || !id) {
      warn('GA event is missing event name or id', params.event);
      return;
    }

    if (params.event === IGNORED_EVENT) return;

    // The cashier can post the same event more than once, so each event is pushed only once per session
    const eventKey = `${params.event}:${id}`;
    if (!markEventAsPushed(eventKey)) return;

    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({ event: params.event, ...params });
  }

  // --- Deposit number storage ---

  function rememberDepositNumber(depositNumber) {
    sessionStorage.setItem('lastDepositNumber', depositNumber);
  }

  // --- Deduplication via sessionStorage (storage can be unavailable in some browser modes) ---

  // Returns false if the event was already pushed
  function markEventAsPushed(eventKey) {
    let pushedEvents = [];

    try {
      pushedEvents = JSON.parse(sessionStorage.getItem(PUSHED_EVENTS_STORAGE_KEY)) || [];
    } catch (error) {
      pushedEvents = [];
    }

    if (pushedEvents.includes(eventKey)) return false;

    pushedEvents.push(eventKey);

    try {
      sessionStorage.setItem(
        PUSHED_EVENTS_STORAGE_KEY,
        JSON.stringify(pushedEvents.slice(-MAX_PUSHED_EVENTS))
      );
    } catch (error) {
      // Without storage the event is still pushed, only deduplication is lost
    }

    return true;
  }

  window.addEventListener('message', handleMessage);
})();

// End of Cashier Iframe Bridge


(function () {
    if (window.location.hostname === 'my.elroyalecasino.com') {
        return;
    }

        var script = document.createElement('script');
        script.src = '/well-known/getInstallScriptSW.js';
        document.head.appendChild(script);
})();

// Welcome offer tracking: pushes welcome_offer_viewed / welcome_offer_change_click
// to dataLayer based on the welcome-bonus dropdown headers (view + expand)

(function () {
  'use strict';

  const SCRIPT_ID = 'welcome-offer-tracking';

  if (window.__WELCOME_OFFER_TRACKING_INITIALIZED__) return;
  window.__WELCOME_OFFER_TRACKING_INITIALIZED__ = true;

  const EVENTS = {
    viewed: 'welcome_offer_viewed',
    changeClick: 'welcome_offer_change_click',
  };

  const HEADER_SELECTOR = '[data-bonus-header]';
  const OFFER_NAME_SELECTOR = '.subtitle';

  const lastViewedOffer = new WeakMap();

  function logWarning(message, error) {
    console.warn(`[${SCRIPT_ID}] ${message}`, error || '');
  }

  function pushEvent(payload) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push(payload);
  }

  function trackViewed(header) {
    if (header.getAttribute('data-bonus-state') !== 'selected') return;

    const nameElement = header.querySelector(OFFER_NAME_SELECTOR);
    const offerName = nameElement ? nameElement.textContent.trim() : '';
    if (!offerName || lastViewedOffer.get(header) === offerName) return;

    lastViewedOffer.set(header, offerName);
    pushEvent({
      event: EVENTS.viewed,
      offer_name: offerName,
    });
  }

  function scan() {
    document.querySelectorAll(HEADER_SELECTOR).forEach((header) => {
      try {
        trackViewed(header);
      } catch (error) {
        logWarning('Failed to process header', error);
      }
    });
  }

  let isScanScheduled = false;
  function scheduleScan() {
    if (isScanScheduled) return;
    isScanScheduled = true;
    requestAnimationFrame(() => {
      isScanScheduled = false;
      scan();
    });
  }

  function trackExpand(event) {
    const target = event.target;
    if (!(target instanceof Element)) return;

    const header = target.closest(HEADER_SELECTOR);
    if (!header || header.getAttribute('data-state') !== 'expanded') return;

    pushEvent({ event: EVENTS.changeClick });
  }

  function handleDocumentKeydown(event) {
    if (event.key === 'Enter' || event.key === ' ') {
      trackExpand(event);
    }
  }

  function init() {
    document.addEventListener('click', trackExpand);
    document.addEventListener('keydown', handleDocumentKeydown);

    scan();

    const observer = new MutationObserver(scheduleScan);
    observer.observe(document.body, {
      childList: true,
      subtree: true,
      characterData: true,
      attributes: true,
      attributeFilter: ['data-bonus-state'],
    });
  }

  init();
})();

// End of Welcome Offer Tracking


deposit

<div data-bonus-header="modal" data-id="welcome-bonus-dropdown-header" data-state="collapsed" aria-expanded="false"><div class="icon-box"><img class="icon" src="/assets/gift_7f58f876fd.svg" alt=""></div><div class="text"><div class="title">&nbsp;</div><div class="subtitle">&nbsp;</div></div><div class="action" role="button" tabindex="0"><div class="action-button">Change</div><svg class="action-chevron" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 15l6-6 6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></div></div>

#ffffff

#B2B3B3

Please choose the bonus

New Games