From 11829158a6af6b87cb2647430ae962f385552982 Mon Sep 17 00:00:00 2001 From: Alexander Shutau Date: Fri, 13 Dec 2024 14:02:08 +0000 Subject: [PATCH] Publish 2024-12-13 --- elements/paddle.js | 53 +++++++++++++++++++++ elements/pay-tiers.js | 101 +++++++++++++++++++++++++++++++++++++---- elements/plus-tiers.js | 39 ++-------------- 3 files changed, 148 insertions(+), 45 deletions(-) create mode 100644 elements/paddle.js diff --git a/elements/paddle.js b/elements/paddle.js new file mode 100644 index 0000000..39b9e82 --- /dev/null +++ b/elements/paddle.js @@ -0,0 +1,53 @@ +// @ts-check + +/** @typedef {any} Paddle */ + +let didInitializePaddle = false; + +/** + * @param {{plusButton?: Element | null; feeButton?: Element | null; corpButton?: Element | null}} options + */ +export async function initPaddle(options) { + /** @type {any} */ + let Paddle; + if (!didInitializePaddle) { + // @ts-ignore + await import('https://cdn.paddle.com/paddle/v2/paddle.js'); + Paddle = /** @type {any} */(window).Paddle; + Paddle.Initialize({ + token: 'live_b32a4d21e35479ee3ea2b849be9', + }); + } + + /** + * @param {Element} element + * @param {string} priceId + */ + const initClick = (element, priceId) => { + element.addEventListener('click', () => { + Paddle.Checkout.open({ + settings: { + displayMode: 'overlay', + theme: 'dark', + variant: 'one-page', + }, + items: [ + { + priceId, + quantity: 1, + }, + ], + }); + }); + }; + + if (options.plusButton) { + initClick(options.plusButton, 'pri_01je4ebmn474jsee5eh2gmfan9'); + } + if (options.feeButton) { + initClick(options.feeButton, 'pri_01jf039mt65me4f2exbgpg3p9m'); + } + if (options.corpButton) { + initClick(options.corpButton, 'pri_01jf03sd119pqskcgmj48e0zq2'); + } +} diff --git a/elements/pay-tiers.js b/elements/pay-tiers.js index 70c767c..9505821 100644 --- a/elements/pay-tiers.js +++ b/elements/pay-tiers.js @@ -1,6 +1,7 @@ // @ts-check import {country, isEUCountry} from './locales.js'; +import {initPaddle} from './paddle.js'; import {clicker} from './stats.js'; import { createHTMLElement as html, @@ -170,17 +171,35 @@ const htmlText = ` -
- +
+ Pay with PayPal - + Debit or Credit Card Contact us + + + Pay + ${DEFAULT_PRICE_REGULAR} + + + +
+
+ + + + +
@@ -396,10 +415,12 @@ const cssText = ` display: flex; flex-direction: column; gap: 0.25rem; + justify-content: center; margin-top: 0.25rem; } .button-wrapper .button-link { margin: 0; + max-width: 20rem; } .button-link--inactive { display: none; @@ -503,6 +524,10 @@ const cssText = ` text-transform: none; transform: none; } +.button-link--paddle { + background-color: var(--color-control) !important; + font-weight: bold; +} .currencies { align-items: center; display: flex; @@ -578,6 +603,46 @@ const cssText = ` background-position-x: -144px; } +.payment-methods { + align-items: center; + display: flex; + flex-direction: row; + gap: 0.75rem; + justify-content: center; + margin-top: 0.25rem; +} +.payment-methods i { + background-position: center; + background-repeat: no-repeat; + background-size: contain; + display: inline-block; +} +.payment-methods__paypal { + aspect-ratio: 101 / 32; + background-image: url(/images/paypal-logo-white.svg); + height: 1rem; +} +.payment-methods__gpay { + aspect-ratio: 41 / 17; + background-image: url(/images/icon-gpay.svg); + height: 1rem; +} +.payment-methods__visa { + aspect-ratio: 1 / 1; + background-image: url('https://buy.paddle.com/images/icons/visa.svg'); + height: 1.5rem; +} +.payment-methods__mastercard { + aspect-ratio: 1 / 1; + background-image: url('https://buy.paddle.com/images/icons/mastercard.svg'); + height: 1.5rem; +} +.payment-methods__amex { + aspect-ratio: 1 / 1; + background-image: url('https://buy.paddle.com/images/icons/amex.svg'); + height: 1.5rem; +} + .pr-small { display: none; } @@ -684,12 +749,15 @@ const cssText = ` } .tiers { flex-direction: row; - justify-content: space-between; - margin: 1rem 0; + gap: 1rem; + justify-content: center; + margin: 0.5rem 0rem; + width: 100%; } .tier { - padding: 0 1rem; - width: 100%; + flex: none; + min-width: 13rem; + padding: 0rem; } .button-wrapper { flex-direction: row; @@ -702,6 +770,8 @@ class PayTiersElement extends HTMLElement { super(); const shadowRoot = this.attachShadow({mode: 'open'}); + const PADDLE_MODE = true; + if (navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrom')) { return; } @@ -732,12 +802,18 @@ class PayTiersElement extends HTMLElement { }); s('.js-link-paypal').each((node) => { /** @type {HTMLAnchorElement} */(node).href = tier === Tiers.DISCOUNT ? Links.PayPal.DISCOUNT[currency] : Links.PayPal.REGULAR[currency]; - node.classList.toggle('button-link--inactive', tier === Tiers.CORPORATE); + if (!PADDLE_MODE) { + node.classList.toggle('button-link--inactive', tier === Tiers.CORPORATE); + } }); s('.js-link-other').each((node) => { /** @type {HTMLAnchorElement} */(node).href = tier === Tiers.DISCOUNT ? Links.Redirect.DISCOUNT : tier === Tiers.CORPORATE ? Links.Redirect.CORPORATE : Links.Redirect.REGULAR; - node.classList.toggle('button-link--inactive', tier !== Tiers.CORPORATE); + if (!PADDLE_MODE) { + node.classList.toggle('button-link--inactive', tier !== Tiers.CORPORATE); + } }); + s('.js-link-paddle').each((node) => node.style.display = tier === Tiers.CORPORATE ? 'none' : ''); + s('.js-link-paddle-corp').each((node) => node.style.display = tier === Tiers.CORPORATE ? '' : 'none'); s('.js-price-regular').each((node) => node.textContent = Prices.REGULAR[currency]); s('.js-price-discount').each((node) => node.textContent = Prices.DISCOUNT[currency]); @@ -756,6 +832,13 @@ class PayTiersElement extends HTMLElement { }); s('.js-card-icon').each((node) => node.classList.add('button-link__card-icon--cn')); } + + if (PADDLE_MODE) { + initPaddle({ + feeButton: shadowRoot.querySelector('.js-link-paddle'), + corpButton: shadowRoot.querySelector('.js-link-paddle-corp'), + }); + } } } diff --git a/elements/plus-tiers.js b/elements/plus-tiers.js index d5639d9..175f73a 100644 --- a/elements/plus-tiers.js +++ b/elements/plus-tiers.js @@ -1,6 +1,7 @@ // @ts-check import {country, isEUCountry} from './locales.js'; +import {initPaddle} from './paddle.js'; import {clicker} from './stats.js'; import { createHTMLElement as html, @@ -616,44 +617,10 @@ class PlusTiersElement extends HTMLElement { s('.js-card-icon').each((node) => node.classList.add('button-link__card-icon--cn')); } - initPaddle(this); - } -} - -/** @typedef {any} Paddle */ - -let didInitializePaddle = false; - -/** - * @param {PlusTiersElement} element - */ -async function initPaddle(element) { - /** @type {any} */ - let Paddle; - if (!didInitializePaddle) { - // @ts-ignore - await import('https://cdn.paddle.com/paddle/v2/paddle.js'); - Paddle = /** @type {any} */(window).Paddle; - Paddle.Initialize({ - token: 'live_b32a4d21e35479ee3ea2b849be9', + initPaddle({ + plusButton: shadowRoot.querySelector('.js-link-paddle'), }); } - element.shadowRoot?.querySelector('.js-link-paddle')?.addEventListener('click', () => { - Paddle.Checkout.open({ - token: 'live_b32a4d21e35479ee3ea2b849be9', - settings: { - displayMode: 'overlay', - theme: 'dark', - variant: 'one-page', - }, - items: [ - { - priceId: 'pri_01je4ebmn474jsee5eh2gmfan9', - quantity: 1, - }, - ], - }); - }); } customElements.define('darkreader-plus-tiers', PlusTiersElement);