From 019abf71873fdc0cbaa15567584c058dd1e950b2 Mon Sep 17 00:00:00 2001 From: Jon Ziebell Date: Wed, 19 Oct 2022 21:15:33 -0400 Subject: [PATCH] Made new contribute page live --- js/beestat/user.js | 2 +- js/component/card/contribute.js | 2 +- js/component/card/contribute_benefits.js | 5 +- .../{patreon.js => contribute_reminder.js} | 182 ++++++------ js/component/card/settings.js | 7 - js/component/card/visualize_intro.js | 4 +- js/component/header.js | 28 +- js/component/modal/enjoy_beestat.js | 48 +--- js/component/modal/patreon_status.js | 265 ------------------ js/js.php | 3 +- js/layer/detail.js | 4 +- 11 files changed, 122 insertions(+), 428 deletions(-) rename js/component/card/{patreon.js => contribute_reminder.js} (61%) delete mode 100644 js/component/modal/patreon_status.js diff --git a/js/beestat/user.js b/js/beestat/user.js index 45dee4b..7b4c69c 100644 --- a/js/beestat/user.js +++ b/js/beestat/user.js @@ -33,7 +33,7 @@ beestat.user.stripe_is_active = function() { }; /** - * Determine whether or not hte current user is an active contributor. + * Determine whether or not the current user is an active contributor. * * @return {boolean} */ diff --git a/js/component/card/contribute.js b/js/component/card/contribute.js index 2b68880..549a51f 100644 --- a/js/component/card/contribute.js +++ b/js/component/card/contribute.js @@ -222,7 +222,7 @@ beestat.component.card.contribute.prototype.decorate_contents_ = function(parent .set_background_color(beestat.style.color.bluegray.light) .set_background_hover_color(beestat.style.color.lightblue.base) .set_text_color('#fff') - .set_text('Pay ' + frequency.charAt(0).toUpperCase() + frequency.slice(1) + 'ly'); + .set_text('Give ' + frequency.charAt(0).toUpperCase() + frequency.slice(1) + 'ly'); tile_group_frequency.add_tile(tile_frequency); if (frequency === self.state_.contribute_interval) { diff --git a/js/component/card/contribute_benefits.js b/js/component/card/contribute_benefits.js index 4996d85..7d7e3f4 100644 --- a/js/component/card/contribute_benefits.js +++ b/js/component/card/contribute_benefits.js @@ -26,7 +26,8 @@ beestat.component.card.contribute_benefits.prototype.decorate_contents_ = functi const benefits = [ 'Early access to new features', 'Private Discord membership', - 'More frequent data syncing' + 'More frequent data syncing', + 'Removed contribute banner' ]; benefits.forEach(function(benefit) { new beestat.component.tile() @@ -35,7 +36,7 @@ beestat.component.card.contribute_benefits.prototype.decorate_contents_ = functi .set_icon('octagram') .set_text(benefit) .style({ - 'margin-bottom': `${beestat.style.size.gutter}px` + 'margin-bottom': `${beestat.style.size.gutter / 2}px` }) .render($(benefit_container)); }); diff --git a/js/component/card/patreon.js b/js/component/card/contribute_reminder.js similarity index 61% rename from js/component/card/patreon.js rename to js/component/card/contribute_reminder.js index c4219fd..ba19110 100644 --- a/js/component/card/patreon.js +++ b/js/component/card/contribute_reminder.js @@ -1,91 +1,91 @@ -/** - * Green Patreon banner asking people for money. $_$ - */ -beestat.component.card.patreon = function() { - var self = this; - - beestat.dispatcher.addEventListener([ - 'cache.user', - 'setting.patreon_hide_until' - ], function() { - self.rerender(); - }); - - beestat.component.card.apply(this, arguments); -}; -beestat.extend(beestat.component.card.patreon, beestat.component.card); - -beestat.component.card.patreon.prototype.decorate_contents_ = function(parent) { - var self = this; - - // Don't render anything if the user is an active Patron. - if (beestat.component.card.patreon.should_show() === false) { - window.setTimeout(function() { - self.dispose(); - }, 0); - return; - } - - parent.style('background', beestat.style.color.green.base); - - new beestat.component.tile() - .set_icon('heart') - .set_size('large') - .set_text([ - 'Support this project on Patreon!', - 'Your contribution matters' - ]) - .set_background_color(beestat.style.color.green.dark) - .set_background_hover_color(beestat.style.color.green.light) - .addEventListener('click', function() { - window.open('https://www.patreon.com/beestat'); - }) - .render(parent); -}; - -/** - * Get the title of the card. - * - * @return {string} The title. - */ -beestat.component.card.patreon.prototype.get_title_ = function() { - return 'Enjoy beestat?'; -}; - -/** - * Decorate the close button. - * - * @param {rocket.Elements} parent - */ -beestat.component.card.patreon.prototype.decorate_top_right_ = function(parent) { - new beestat.component.tile() - .set_type('pill') - .set_shadow(false) - .set_icon('close') - .set_text_color('#fff') - .set_background_hover_color(beestat.style.color.green.light) - .addEventListener('click', function() { - (new beestat.component.modal.enjoy_beestat()).render(); - }) - .render(parent); -}; - -/** - * Determine whether or not this card should be shown. - * - * @return {boolean} Whether or not to show the card. - */ -beestat.component.card.patreon.should_show = function() { - if ( - beestat.user.patreon_is_active() === true || - window.is_demo === true || - ( - beestat.setting('patreon_hide_until') !== undefined && - moment.utc(beestat.setting('patreon_hide_until')).isAfter(moment.utc()) - ) - ) { - return false; - } - - return true; -}; +/** + * Green banner asking people for money. $_$ + */ +beestat.component.card.contribute_reminder = function() { + var self = this; + + beestat.dispatcher.addEventListener([ + 'cache.user', + 'setting.contribute_reminder_hide_until' + ], function() { + self.rerender(); + }); + + beestat.component.card.apply(this, arguments); +}; +beestat.extend(beestat.component.card.contribute_reminder, beestat.component.card); + +beestat.component.card.contribute_reminder.prototype.decorate_contents_ = function(parent) { + var self = this; + + // Don't render anything if the user is an active Patron. + if (beestat.component.card.contribute_reminder.should_show() === false) { + window.setTimeout(function() { + self.dispose(); + }, 0); + return; + } + + parent.style('background', beestat.style.color.green.base); + + new beestat.component.tile() + .set_icon('heart') + .set_size('large') + .set_text([ + 'Support this project!', + 'Your contribution matters' + ]) + .set_background_color(beestat.style.color.green.dark) + .set_background_hover_color(beestat.style.color.green.light) + .addEventListener('click', function() { + new beestat.layer.contribute().render(); + }) + .render(parent); +}; + +/** + * Get the title of the card. + * + * @return {string} The title. + */ +beestat.component.card.contribute_reminder.prototype.get_title_ = function() { + return 'Enjoy beestat?'; +}; + +/** + * Decorate the close button. + * + * @param {rocket.Elements} parent + */ +beestat.component.card.contribute_reminder.prototype.decorate_top_right_ = function(parent) { + new beestat.component.tile() + .set_type('pill') + .set_shadow(false) + .set_icon('close') + .set_text_color('#fff') + .set_background_hover_color(beestat.style.color.green.light) + .addEventListener('click', function() { + (new beestat.component.modal.enjoy_beestat()).render(); + }) + .render(parent); +}; + +/** + * Determine whether or not this card should be shown. + * + * @return {boolean} Whether or not to show the card. + */ +beestat.component.card.contribute_reminder.should_show = function() { + if ( + beestat.user.contribution_is_active() === true || + window.is_demo === true || + ( + beestat.setting('contribute_reminder_hide_until') !== undefined && + moment.utc(beestat.setting('contribute_reminder_hide_until')).isAfter(moment.utc()) + ) + ) { + return false; + } + + return true; +}; diff --git a/js/component/card/settings.js b/js/component/card/settings.js index 1c5d25c..88ee662 100644 --- a/js/component/card/settings.js +++ b/js/component/card/settings.js @@ -336,11 +336,4 @@ beestat.component.card.settings.prototype.decorate_top_right_ = function(parent) .set_callback(function() { window.open('https://doc.beestat.io/9d01e7256390473ca8121d4098d91c9d'); })); - - menu.add_menu_item(new beestat.component.menu_item() - .set_text('Contribute (New)') - .set_icon('credit_card_lock') - .set_callback(function() { - new beestat.layer.contribute().render(); - })); }; diff --git a/js/component/card/visualize_intro.js b/js/component/card/visualize_intro.js index eefff36..43e1d2b 100644 --- a/js/component/card/visualize_intro.js +++ b/js/component/card/visualize_intro.js @@ -54,13 +54,13 @@ beestat.component.card.visualize_intro.prototype.decorate_contents_ = function(p .set_icon('heart') .set_size('large') .set_text([ - 'Support this project on Patreon!', + 'Support this project!', 'Your contribution matters' ]) .set_background_color(beestat.style.color.green.dark) .set_background_hover_color(beestat.style.color.green.light) .addEventListener('click', function() { - window.open('https://www.patreon.com/beestat'); + new beestat.layer.contribute().render(); }) .render(parent); } diff --git a/js/component/header.js b/js/component/header.js index 3bb0584..c6763b7 100644 --- a/js/component/header.js +++ b/js/component/header.js @@ -155,6 +155,15 @@ beestat.component.header.prototype.decorate_ = function(parent) { })); } + if (window.is_demo === false) { + menu.add_menu_item(new beestat.component.menu_item() + .set_text('Support beestat') + .set_icon('heart') + .set_callback(function() { + new beestat.layer.contribute().render(); + })); + } + var announcements_menu_item = new beestat.component.menu_item() .set_text('Announcements') .set_icon('bullhorn') @@ -176,25 +185,6 @@ beestat.component.header.prototype.decorate_ = function(parent) { (new beestat.component.modal.download_data()).render(); })); - if (window.is_demo === false) { - if (beestat.user.patreon_is_connected() === false) { - menu.add_menu_item(new beestat.component.menu_item() - .set_text('Link Patreon') - .set_icon('patreon') - .set_callback(function() { - (new beestat.component.modal.patreon_status()).render(); - window.open('../api/?resource=patreon&method=authorize&arguments={}&api_key=ER9Dz8t05qUdui0cvfWi5GiVVyHP6OB8KPuSisP2'); - })); - } else { - menu.add_menu_item(new beestat.component.menu_item() - .set_text('Patreon Status') - .set_icon('patreon') - .set_callback(function() { - (new beestat.component.modal.patreon_status()).render(); - })); - } - } - menu.add_menu_item(new beestat.component.menu_item() .set_text('Settings') .set_icon('cog') diff --git a/js/component/modal/enjoy_beestat.js b/js/component/modal/enjoy_beestat.js index e4dbd37..28f8f0d 100644 --- a/js/component/modal/enjoy_beestat.js +++ b/js/component/modal/enjoy_beestat.js @@ -1,5 +1,5 @@ /** - * Options for hiding the patreon card. + * Options for hiding the contribute reminder. */ beestat.component.modal.enjoy_beestat = function() { beestat.component.modal.apply(this, arguments); @@ -12,15 +12,8 @@ beestat.extend(beestat.component.modal.enjoy_beestat, beestat.component.modal); * @param {rocket.Elements} parent */ beestat.component.modal.enjoy_beestat.prototype.decorate_contents_ = function(parent) { - if ( - beestat.user.patreon_is_connected() === true && - beestat.user.patreon_is_active() === false - ) { - parent.appendChild($.createElement('p').innerText('Your Patreon account is connected but you\'re not currently a supporter. If you recently became a supporter it could take up to 24 hours to update.')); - } else { - parent.appendChild($.createElement('p').innerHTML('Beestat is completely free to use and does not run ads or sell your data. If you want to help, consider supporting the project on Patreon. Among other benefits, it will hide this banner permanently.')); - parent.appendChild($.createElement('p').innerHTML('Not into Patreon or can\'t afford to give? Here are some other ways to help.')); - } + parent.appendChild($.createElement('p').innerHTML('Beestat is completely free to use and does not run ads or sell your data. If you want to help, consider supporting the project. Among other benefits, it will hide this banner permanently.')); + parent.appendChild($.createElement('p').innerHTML('If you prefer not to give, you can hide this banner. Please keep using and enjoying beestat! :)')); }; /** @@ -33,14 +26,14 @@ beestat.component.modal.enjoy_beestat.prototype.get_title_ = function() { }; /** - * Hide the Patreon card for some amount of time. + * Hide the contribute reminder for some amount of time. * * @param {number} amount How long. * @param {string} unit The unit (day, month, etc). */ -beestat.component.modal.enjoy_beestat.prototype.hide_patreon_card_for_ = function(amount, unit) { +beestat.component.modal.enjoy_beestat.prototype.hide_contribute_reminder_ = function(amount, unit) { beestat.setting( - 'patreon_hide_until', + 'contribute_reminder_hide_until', moment().utc() .add(amount, unit) .format('YYYY-MM-DD HH:mm:ss') @@ -62,39 +55,22 @@ beestat.component.modal.enjoy_beestat.prototype.get_buttons_ = function() { .set_text_hover_color(beestat.style.color.bluegray.base) .set_text('Hide for one month') .addEventListener('click', function() { - self.hide_patreon_card_for_(1, 'month'); + self.hide_contribute_reminder_(1, 'month'); self.dispose(); }); - if (beestat.user.patreon_is_connected() === false) { - var link = new beestat.component.tile() - .set_text('Link Patreon') - .set_background_color(beestat.style.color.green.base) - .set_background_hover_color(beestat.style.color.green.light) - .set_text_color('#fff') - .addEventListener('click', function() { - self.dispose(); - (new beestat.component.modal.patreon_status()).render(); - window.open('../api/?resource=patreon&method=authorize&arguments={}&api_key=ER9Dz8t05qUdui0cvfWi5GiVVyHP6OB8KPuSisP2'); - }); - - return [ - hide, - link - ]; - } - - var ok = new beestat.component.tile() + var link = new beestat.component.tile() + .set_text('Support beestat') + .set_icon('heart') .set_background_color(beestat.style.color.green.base) .set_background_hover_color(beestat.style.color.green.light) .set_text_color('#fff') - .set_text('OK') .addEventListener('click', function() { - self.dispose(); + new beestat.layer.contribute().render(); }); return [ hide, - ok + link ]; }; diff --git a/js/component/modal/patreon_status.js b/js/component/modal/patreon_status.js deleted file mode 100644 index e9ad786..0000000 --- a/js/component/modal/patreon_status.js +++ /dev/null @@ -1,265 +0,0 @@ -/** - * Patreon Status. - */ -beestat.component.modal.patreon_status = function() { - var self = this; - - beestat.dispatcher.addEventListener( - 'cache.user', - function() { - self.rerender(); - } - ); - - beestat.component.modal.apply(this, arguments); -}; -beestat.extend(beestat.component.modal.patreon_status, beestat.component.modal); - -beestat.component.modal.patreon_status.prototype.decorate_contents_ = function(parent) { - var user = beestat.user.get(); - - if (user.patreon_status === null) { - this.decorate_wait_(parent); - } else { - this.decorate_status_(parent); - } -}; - -/** - * Do some wait logic and get an updated user every 5 seconds. - * - * @param {rocket.Elements} parent - */ -beestat.component.modal.patreon_status.prototype.decorate_wait_ = function(parent) { - parent.appendChild( - $.createElement('div') - .style({ - 'margin-top': beestat.style.size.gutter - }) - .innerText('Waiting for Patreon to connect...') - ); - - var api = new beestat.api(); - - api.add_call('user', 'read_id'); - - api.set_callback(function(response) { - beestat.cache.set('user', response); - }); - - window.setTimeout(function() { - api.send(); - }, 5000); -}; - -/** - * Decorate the patreon details if they exist. - * - * @param {rocket.Elements} parent - */ -beestat.component.modal.patreon_status.prototype.decorate_status_ = function(parent) { - var user = beestat.user.get(); - - // Create our number formatter. - var formatter = new Intl.NumberFormat( - 'en-US', - { - 'style': 'currency', - 'currency': 'USD' - } - ); - - var container = $.createElement('div') - .style({ - 'display': 'grid', - 'grid-template-columns': 'repeat(auto-fill, minmax(150px, 1fr))', - 'margin': '0 0 16px -16px' - }); - parent.appendChild(container); - - let patron_status; - switch (user.patreon_status.patron_status) { - case 'active_patron': - patron_status = 'Active Patron'; - break; - case 'declined_patron': - patron_status = 'Declined Patron'; - break; - case 'former_patron': - patron_status = 'Former Patron'; - break; - case 'not_patron': - patron_status = 'Not Patron'; - break; - default: - patron_status = 'Unknown'; - break; - } - - let last_charged; - switch (user.patreon_status.last_charge_date) { - case undefined: - last_charged = 'Unknown'; - break; - case null: - last_charged = 'Never'; - break; - default: - last_charged = moment.utc(user.patreon_status.last_charge_date).local() - .format('MMM Do, YYYY'); - break; - } - - let current_pledge; - switch (user.patreon_status.will_pay_amount_cents) { - case undefined: - current_pledge = 'Unknown'; - break; - case null: - current_pledge = formatter.format(0); - break; - default: - current_pledge = formatter.format(user.patreon_status.will_pay_amount_cents / 100); - break; - } - - let lifetime_support; - switch (user.patreon_status.lifetime_support_cents) { - case undefined: - lifetime_support = 'Unknown'; - break; - case null: - lifetime_support = formatter.format(0); - break; - default: - lifetime_support = formatter.format(user.patreon_status.lifetime_support_cents / 100); - break; - } - - var fields = [ - { - 'name': 'Status', - 'value': patron_status - }, - { - 'name': 'Last Charged', - 'value': last_charged - }, - { - 'name': 'Current Pledge', - 'value': current_pledge - }, - { - 'name': 'Lifetime Support', - 'value': lifetime_support - } - ]; - - fields.forEach(function(field) { - var div = $.createElement('div') - .style({ - 'padding': '16px 0 0 16px' - }); - container.appendChild(div); - - div.appendChild($.createElement('div') - .style({ - 'font-weight': beestat.style.font_weight.bold, - 'margin-bottom': (beestat.style.size.gutter / 4) - }) - .innerText(field.name)); - div.appendChild($.createElement('div').innerText(field.value)); - }); - - if (beestat.user.patreon_is_connected() === true) { - const last_update = moment.utc(beestat.user.get().sync_status.patreon) - .local() - .fromNow(); - - parent.appendChild( - $.createElement('div') - .innerText('Patreon status is automatically updated every 24 hours. Your last update was ' + last_update + '.') - ); - } -}; - -/** - * Get the modal title. - * - * @return {string} The modal title. - */ -beestat.component.modal.patreon_status.prototype.get_title_ = function() { - return 'Patreon Status'; -}; - -/** - * Get the buttons on the modal. - * - * @return {[beestat.component.button]} The buttons. - */ -beestat.component.modal.patreon_status.prototype.get_buttons_ = function() { - const self = this; - - if (beestat.user.patreon_is_connected() === true) { - const unlink = new beestat.component.tile() - .set_text('Unlink') - .set_icon('link_off') - .set_shadow(false) - .set_background_color('#fff') - .set_text_color(beestat.style.color.gray.base) - .set_text_hover_color(beestat.style.color.red.base) - .addEventListener('click', function() { - this - .removeEventListener('click'); - - new beestat.api() - .add_call( - 'user', - 'unlink_patreon_account', - {}, - 'unlink_patreon_account' - ) - .add_call('user', 'read_id', {}, 'user') - .set_callback(function(response) { - // Update the cache. - self.dispose(); - beestat.cache.set('user', response.user); - }) - .send(); - }); - - const refresh = new beestat.component.tile() - .set_text('Refresh Status') - .set_icon('refresh') - .set_background_color(beestat.style.color.green.base) - .set_background_hover_color(beestat.style.color.green.light) - .set_text_color('#fff') - .addEventListener('click', function() { - this - .set_background_color(beestat.style.color.gray.base) - .set_background_hover_color() - .removeEventListener('click'); - - new beestat.api() - .add_call( - 'user', - 'sync_patreon_status', - {}, - 'sync_patreon_status' - ) - .add_call('user', 'read_id', {}, 'user') - .set_callback(function(response) { - // Update the cache. - beestat.cache.set('user', response.user); - }) - .send(); - }); - - return [ - unlink, - refresh - ]; - } - - return []; -}; diff --git a/js/js.php b/js/js.php index 0979067..bc75e73 100755 --- a/js/js.php +++ b/js/js.php @@ -72,7 +72,7 @@ if($setting->get('environment') === 'dev' || $setting->get('environment') === 'd echo '' . PHP_EOL; echo '' . PHP_EOL; echo '' . PHP_EOL; - echo '' . PHP_EOL; + echo '' . PHP_EOL; echo '' . PHP_EOL; echo '' . PHP_EOL; echo '' . PHP_EOL; @@ -126,7 +126,6 @@ if($setting->get('environment') === 'dev' || $setting->get('environment') === 'd echo '' . PHP_EOL; echo '' . PHP_EOL; echo '' . PHP_EOL; - echo '' . PHP_EOL; echo '' . PHP_EOL; echo '' . PHP_EOL; echo '' . PHP_EOL; diff --git a/js/layer/detail.js b/js/layer/detail.js index 275c937..6cca0dd 100644 --- a/js/layer/detail.js +++ b/js/layer/detail.js @@ -48,10 +48,10 @@ beestat.layer.detail.prototype.decorate_ = function(parent) { } ]); - if (beestat.component.card.patreon.should_show() === true) { + if (beestat.component.card.contribute_reminder.should_show() === true) { cards.push([ { - 'card': new beestat.component.card.patreon(), + 'card': new beestat.component.card.contribute_reminder(), 'size': 12 } ]);