English

Russian

French

Spanish (Latin America)

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>