From 82c6b9f152d44e717ec2454d463fa0a8dbaed287 Mon Sep 17 00:00:00 2001 From: Alexander Shutau Date: Wed, 11 Dec 2024 17:06:01 +0000 Subject: [PATCH] Publish 2024-12-11 --- elements/plus-tiers.js | 106 +++++++++++++++++++++++++++++++++++++++++ images/icon-gpay.svg | 1 + images/icon-paypal.svg | 1 + 3 files changed, 108 insertions(+) create mode 100644 images/icon-gpay.svg create mode 100644 images/icon-paypal.svg diff --git a/elements/plus-tiers.js b/elements/plus-tiers.js index 4c17a4f..d4e8248 100644 --- a/elements/plus-tiers.js +++ b/elements/plus-tiers.js @@ -58,6 +58,7 @@ const Prices = { CNY: '¥68.00', AUD: '$14.99', }, + /* PLUS: { USD: '$4.99', GBP: '£3.99', @@ -67,6 +68,16 @@ const Prices = { CNY: '¥38.00', AUD: '$7.99', }, + */ + PLUS: { + USD: '$9.99', + GBP: '£7.99', + EUR: '€9.99', + JPY: '¥1,500', + CAD: '$12.99', + CNY: '¥68.00', + AUD: '$14.99', + }, CORPORATE: { USD: '$9.99/yr', GBP: '£7.99/yr', @@ -146,6 +157,7 @@ const htmlText = `
+ + + + Pay + ${DEFAULT_PRICE_PLUS} + + +
+
+ + + + +
@@ -411,6 +437,9 @@ const cssText = ` text-transform: none; transform: none; } +.button-link--paddle { + font-weight: bold; +} .currencies { align-items: center; display: flex; @@ -447,6 +476,7 @@ const cssText = ` flex: none; font-weight: 300; } + .flag { background-image: url('/images/flags.svg'); background-position-y: center; @@ -479,6 +509,47 @@ const cssText = ` .flag-au { background-position-x: -9em; } + +.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; +} + :host { container-type: inline-size; font-size: 1.25rem; @@ -547,4 +618,39 @@ class PlusTiersElement extends HTMLElement { } } +/** @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', + // }); + } + element.shadowRoot?.querySelector('.js-link-paddle')?.addEventListener('click', () => { + Paddle.Checkout.open({ + token: 'live_b32a4d21e35479ee3ea2b849be9', + settings: { + displayMode: 'overlay', + variant: 'one-page', + }, + items: [ + { + priceId: 'pri_01je4ebmn474jsee5eh2gmfan9', + quantity: 1, + }, + ], + }); + }); +} + customElements.define('darkreader-plus-tiers', PlusTiersElement); diff --git a/images/icon-gpay.svg b/images/icon-gpay.svg new file mode 100644 index 0000000..8979835 --- /dev/null +++ b/images/icon-gpay.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icon-paypal.svg b/images/icon-paypal.svg new file mode 100644 index 0000000..904fc5b --- /dev/null +++ b/images/icon-paypal.svg @@ -0,0 +1 @@ + \ No newline at end of file