English

Russian

French

Spanish (Latin America)

BetSoft

Birds in The City

Winport 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_wp_50f5cb8f20.svg', // bonus list available, nothing picked yet
      selected: '/assets/gift_wp_50f5cb8f20.svg', // a bonus is selected/confirmed
      noBonuses: '/assets/gift_wp_50f5cb8f20.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: postMessage bridge (height sync + GA events)
(function () {
  if (window.__CASHIER_BRIDGE_INIT__) return;
  window.__CASHIER_BRIDGE_INIT__ = true;

  window.addEventListener("message", handleMessage, false);

  function handleMessage(event) {
    const data = parseAsJsonIfString(event.data);
    if (!data) return;

    window.dataLayer = window.dataLayer || [];

    if (data.type === 'fixHeight') {
      handleFixHeightMessage(data, event.source);
      return;
    }

    handleGaEventMessage(data);
  }

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

  function handleFixHeightMessage(data, sourceWindow) {
    try {
      setIframeHeight(data.height, sourceWindow);
    } catch (error) {
      console.error("An error occurred in handleFixHeightMessage:", error);
    }
  }

  // Multiple cashier containers can exist at once (e.g. deposit page + modal),
  // so the iframe that actually sent the message is matched by its contentWindow
  // instead of picking the first container/iframe found in the DOM.
  function findIframeBySourceWindow(sourceWindow) {
    const containers = document.querySelectorAll('[data-organism="ComponentPlayerAccountCashier"]');

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

    return null;
  }

  function setIframeHeight(height, sourceWindow) {
    try {
      const iframe = findIframeBySourceWindow(sourceWindow);
      if (!iframe) {
        console.warn("Cashier iframe matching message source not found");
        return;
      }

      const iframeWrapper = iframe.parentElement?.parentElement;
      if (iframeWrapper) {
        iframeWrapper.style.height = height;
      } else {
        console.warn("Iframe wrapper not found");
      }
    } catch (error) {
      // console.error("An error occurred in setIframeHeight:", error);
    }
  }

  // --- GA event message: forward cashier events to dataLayer ---

  function handleGaEventMessage(data) {
    try {
      if (data.gaevent) {
        forwardGaEvent(data);
        return;
      }

      if (data.event === "deposit_number" && data.depositNumber !== undefined) {
        rememberDepositNumber(data.depositNumber);
        return;
      }

      console.warn("No gaevent object in event data.");
    } catch (error) {
      console.error("An error occurred in handleGaEventMessage:", error);
    }
  }

  function parseAsJsonIfString(rawData) {
    if (typeof rawData !== "string") return rawData;

    try {
      return JSON.parse(rawData);
    } catch (error) {
      console.warn("Failed to parse event data as JSON:", rawData);
      return null;
    }
  }

  function forwardGaEvent(data) {
    const gaEvent = data.gaevent;

    if (gaEvent.depositNumber !== undefined) {
      rememberDepositNumber(gaEvent.depositNumber);
    }

    if (!data.gatime || !gaEvent.event) {
      console.warn("gatime or event name is missing in gaEventData:", data);
      return;
    }

    const storedEvents = getStoredEvents();

    if (isDuplicateEvent(storedEvents, data.gatime, gaEvent.event)) {
      console.warn("Duplicate event detected:", data);
      return;
    }

    rememberEvent(storedEvents, data.gatime, gaEvent.event);
    pushToDataLayer(gaEvent);
  }

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

  function getStoredEvents() {
    return JSON.parse(sessionStorage.getItem("storedEvents")) || [];
  }

  function isDuplicateEvent(storedEvents, gatime, eventName) {
    return storedEvents.some(
      (storedEvent) => storedEvent.gatime === gatime && storedEvent.event === eventName
    );
  }

  function rememberEvent(storedEvents, gatime, eventName) {
    storedEvents.push({ gatime, event: eventName });

    const maxStoredEvents = 100;
    if (storedEvents.length > maxStoredEvents) {
      storedEvents.shift();
    }

    sessionStorage.setItem("storedEvents", JSON.stringify(storedEvents));
  }

  function pushToDataLayer(gaEvent) {
    const dataLayerObject = { event: gaEvent.event };

    for (const key in gaEvent) {
      if (gaEvent.hasOwnProperty(key) && key !== "event") {
        dataLayerObject[key] = gaEvent[key];
      }
    }

    if (typeof dataLayer !== "undefined" && Array.isArray(dataLayer) && dataLayerObject.event !== "deposit_number") {
      dataLayer.push(dataLayerObject);
    } else {
      console.error("dataLayer is not defined or not an array");
    }
  }
})();

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_wp_50f5cb8f20.svg" alt=""></div><div class="text"><div class="title">Casino Welcome Bonus</div><div class="subtitle">Casino Welcome Bonus</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

Game page

DragonGaming

Nucleus

DiceLab

Internal

IQSoft

Saucify

FreshDeck

UltraPlay

LatinStudio

BetGamesTwainSport

BetGames

SpadeGaming

UrgentGames

BGaming

Genesis

Qora

Rival

GenesisNew

Not available with your active bonus.

Live Dealer games are restricted with a bonus balance. Please deposit to proceed or play available non-live games.

Insufficient cash balance to play this Live Dealer game. Please top up your balance or finish playing with your active bonus first.

Insufficient cash balance to play this Live Dealer game. Please top up your balance to proceed.