(function(tma) { tma.components = tma.components || {}; tma.components['tma-payment-providers'] = function (dependencies) { const { translate, rxjs, query, navigate, media, user } = dependencies; const template = document.createElement('template'); template.innerHTML = `

`; return class extends HTMLElement { _subscriptions = []; constructor() { super(); this.goToPayment = (loggedIn) => { if (!loggedIn) { window.WL.execute('LOGIN_NORMAL'); return; } this.type === 'deposit' ? window.WL.execute('OPEN_DEPOSIT') : navigate('WITHDRAW'); }; this.attachShadow({mode: 'open'}); this.shadowRoot.replaceChildren(template.content.cloneNode(true)); } connectedCallback() { const isMobile$ = media.asObservable().pipe( rxjs.startWith(null), rxjs.map(() => media.isActive('lt-lg')), rxjs.distinctUntilChanged(), ); const loggedIn$ = user.pipe(rxjs.map(user => !!user)); const providers$ = query(`query PaymentProviders { getWinfestPaymentProviderList(size:100) { items { _id order name descriptionHtml logo { path } fee duration currencies visibleOnLocale paymentType } } } `).pipe( rxjs.map(({ data }) => data.getWinfestPaymentProviderList.items), rxjs.map(providers => providers.filter(f => f.paymentType.includes(this.type) && f.visibleOnLocale.includes('nl'))), rxjs.map(providers => providers.sort((a, b) => a.order - b.order)), ); this._subscriptions.push( rxjs.combineLatest([providers$, isMobile$, loggedIn$]).subscribe(([providers, isMobile, loggedIn]) => this._updateTemplate(providers, isMobile, loggedIn) ) ); } disconnectedCallback() { if (this._subscriptions.length) { this._subscriptions.forEach(sub => sub.unsubscribe()); } } static get observedAttributes() { return ['value']; } get loading() { return this.getAttribute('loading'); } set loading(value) { this.setAttribute('loading', value); } get type() { return this.getAttribute('type'); } set type(value) { this.setAttribute('type', value); } _toggleInfo(target, isMobile) { const toggleId = target.getAttribute('data-toggle'); const element = this.shadowRoot.getElementById(toggleId); if (element.className.includes('open')) { element.className = element.className.replace('open', ''); } else { element.className += ' open'; } } _closeDialog(target) { const dialog = target.closest('.info-dialog'); if (dialog) { dialog.classList.remove('open'); } } _updateTemplate(providers, isMobile, loggedIn) { const contentTemplate = document.createElement('template'); contentTemplate.innerHTML = ` ${isMobile ? '' : this._header()} ${providers.map(p => this._template(p, isMobile)).join('')} `; const container = this.shadowRoot.getElementById('payment-providers-container'); if (isMobile) { container.classList.add('mobile'); } else { container.classList.remove('mobile'); } container.replaceChildren(contentTemplate.content.cloneNode(true)); this.shadowRoot.querySelectorAll('.cashier-btn').forEach(el => el.addEventListener('click', () => this.goToPayment(loggedIn))); this.shadowRoot.querySelectorAll('.info-btn').forEach(el => el.addEventListener('click', event => this._toggleInfo(event.target))); this.shadowRoot.querySelectorAll('.close-btn').forEach(el => el.addEventListener('click', event => this._closeDialog(event.target))); this.loading = false; } _header() { return `

${translate('Provider')}

${translate('Fee')}

${translate('Duration')}

${translate('Currencies')}

`; } _template(provider, isMobile) { if (isMobile) { return `

${translate('Fee')}: ${provider.fee}

${translate('Duration')}: ${provider.duration}

${translate('Currencies')}: ${provider.currencies}

${provider.descriptionHtml}

`; } return `

${provider.fee}

${provider.duration}

${provider.currencies}

${provider.descriptionHtml}

`; } } }; }(window.WL = window.WL || {}))