Made new contribute page live

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}
  */

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) {

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));
   });

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;
+};

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();
-    }));
 };

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);
   }

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')

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, <strong>consider supporting the project on <a href="https://patreon.com/beestat" target="_blank" class="inverted">Patreon</a></strong>. Among other benefits, it will hide this banner permanently.'));
-    parent.appendChild($.createElement('p').innerHTML('Not into Patreon or can\'t afford to give? <a href="https://doc.beestat.io/bf7f099eb8de486bad51aa6245c00891" target="_blank" class="inverted">Here are some other ways to help</a>.'));
-  }
+  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, <strong>consider supporting the project</strong>. 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
   ];
 };

js/component/modal/patreon_status.js

@@ -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 [];
-};

js/js.php

@@ -72,7 +72,7 @@ if($setting->get('environment') === 'dev' || $setting->get('environment') === 'd
   echo '<script src="/js/component/card/demo.js"></script>' . PHP_EOL;
   echo '<script src="/js/component/card/footer.js"></script>' . PHP_EOL;
   echo '<script src="/js/component/card/my_home.js"></script>' . PHP_EOL;
-  echo '<script src="/js/component/card/patreon.js"></script>' . PHP_EOL;
+  echo '<script src="/js/component/card/contribute_reminder.js"></script>' . PHP_EOL;
   echo '<script src="/js/component/card/runtime_thermostat_detail.js"></script>' . PHP_EOL;
   echo '<script src="/js/component/card/runtime_sensor_detail.js"></script>' . PHP_EOL;
   echo '<script src="/js/component/card/sensors.js"></script>' . PHP_EOL;
@@ -126,7 +126,6 @@ if($setting->get('environment') === 'dev' || $setting->get('environment') === 'd
   echo '<script src="/js/component/modal/runtime_sensor_detail_custom.js"></script>' . PHP_EOL;
   echo '<script src="/js/component/modal/thermostat_info.js"></script>' . PHP_EOL;
   echo '<script src="/js/component/modal/weather.js"></script>' . PHP_EOL;
-  echo '<script src="/js/component/modal/patreon_status.js"></script>' . PHP_EOL;
   echo '<script src="/js/component/modal/newsletter.js"></script>' . PHP_EOL;
   echo '<script src="/js/component/modal/air_quality_detail_custom.js"></script>' . PHP_EOL;
   echo '<script src="/js/component/modal/create_floor_plan.js"></script>' . PHP_EOL;

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
       }
     ]);