Public release of visualizer

js/component/card/contribute.js

@@ -363,7 +363,6 @@ beestat.component.card.contribute.prototype.decorate_top_right_ = function(paren
           pay_links[beestat.setting('units.currency')][window.environment] +
           '?prefilled_email=' + beestat.user.get().email_address +
           '&client_reference_id=' + beestat.user.get().user_id
-
         );
       }));
 

js/component/card/contribute_banner.js

@@ -0,0 +1,50 @@
+/**
+ * Contribute banner for video announcement.
+ */
+beestat.component.card.contribute_banner = function() {
+  beestat.component.card.apply(this, arguments);
+};
+beestat.extend(beestat.component.card.contribute_banner, beestat.component.card);
+
+beestat.component.card.contribute_banner.prototype.decorate_contents_ = function(parent) {
+  parent.style('background', beestat.style.color.purple.base);
+
+  const container = document.createElement('div');
+  Object.assign(container.style, {
+    'display': 'flex',
+    'align-items': 'center',
+    'grid-gap': `${beestat.style.size.gutter}px`
+  });
+
+  const left = document.createElement('div');
+  Object.assign(left.style, {
+    'font-size': beestat.style.font_size.large
+  });
+  left.innerText = 'Important message from the creator of beestat!';
+  container.appendChild(left);
+
+  parent.appendChild(container);
+
+  const center = document.createElement('div');
+  Object.assign(center.style, {
+    'text-align': 'right',
+    'flex-grow': 1,
+    'flex-shrink': 0
+  });
+
+  const tile_group = new beestat.component.tile_group();
+
+  const watch_tile = new beestat.component.tile()
+    .set_icon('play')
+    .set_text('Watch Now')
+    .set_background_color(beestat.style.color.red.dark)
+    .set_background_hover_color(beestat.style.color.red.light);
+  watch_tile.addEventListener('click', function() {
+    (new beestat.component.modal.contribute_video()).render();
+  });
+  tile_group.add_tile(watch_tile);
+
+  tile_group.render($(center));
+
+  container.appendChild(center);
+};

js/component/card/visualize_intro.js

@@ -18,52 +18,25 @@ beestat.extend(beestat.component.card.visualize_intro, beestat.component.card);
 beestat.component.card.visualize_intro.prototype.decorate_contents_ = function(parent) {
   const self = this;
 
-  if (beestat.user.has_early_access() === true) {
+  const center_container = document.createElement('div');
-    const p1 = document.createElement('p');
+  center_container.style.textAlign = 'center';
-    p1.innerText = 'You now have early access to the new Visualize features. This is a work-in-progress, but you should find it to be mostly stable. More features and improvements are in the works.';
+  parent.appendChild(center_container);
-    parent.appendChild(p1);
 
-    const p2 = document.createElement('p');
+  new beestat.component.tile()
-    p2.innerText = 'Please reach out on Discord or email contact@beestat.io with feedback. Thank you for your support!';
+    .set_icon('plus')
-    parent.appendChild(p2);
+    .set_text([
-
+      'Get started now!',
-    const center_container = document.createElement('div');
+      'Create my first floor plan'
-    center_container.style.textAlign = 'center';
+    ])
-    parent.appendChild(center_container);
+    .set_size('large')
-
+    .set_background_color(beestat.style.color.green.dark)
-    new beestat.component.tile()
+    .set_background_hover_color(beestat.style.color.green.light)
-      .set_icon('plus')
+    .render($(center_container))
-      .set_text('Create a floor plan')
+    .addEventListener('click', function() {
-      .set_size('large')
+      new beestat.component.modal.create_floor_plan(
-      .set_background_color(beestat.style.color.green.dark)
+        self.thermostat_id_
-      .set_background_hover_color(beestat.style.color.green.light)
+      ).render();
-      .render($(center_container))
+    });
-      .addEventListener('click', function() {
-        new beestat.component.modal.create_floor_plan(
-          self.thermostat_id_
-        ).render();
-      });
-  } else {
-    parent.style('background', beestat.style.color.green.base);
-
-    const p3 = document.createElement('p');
-    p3.innerText = 'This feature is still in early access! If you\'d like to try it out, become a supporter now. Expected public release date is November.';
-    parent.appendChild(p3);
-
-    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);
-  }
 };
 
 /**

js/component/header.js

@@ -203,4 +203,8 @@ beestat.component.header.prototype.decorate_ = function(parent) {
         .add_call('user', 'log_out')
         .send();
     }));
+
+  const contribute_banner = new beestat.component.card.contribute_banner();
+  contribute_banner.style({'margin-bottom': `${beestat.style.size.gutter}px`});
+  contribute_banner.render(parent);
 };

js/component/modal/contribute_video.js

@@ -0,0 +1,106 @@
+/**
+ * Contribute video
+ */
+beestat.component.modal.contribute_video = function() {
+  beestat.component.modal.apply(this, arguments);
+};
+beestat.extend(beestat.component.modal.contribute_video, beestat.component.modal);
+
+/**
+ * Decorate
+ *
+ * @param {rocket.Elements} parent
+ */
+beestat.component.modal.contribute_video.prototype.decorate_contents_ = function(parent) {
+  const container = document.createElement('div');
+  /**
+   * The 16:9 aspect ratio corresponds to a height that is 56.25% of the width.
+   * https://www.ankursheel.com/blog/full-width-you-tube-video-embed
+   */
+  Object.assign(container.style, {
+    'position': 'relative',
+    'padding-bottom': '56.25%',
+    'height': '0'
+  });
+  parent.appendChild(container);
+
+  const iframe = document.createElement('iframe');
+  Object.assign(iframe.style, {
+    'position': 'absolute',
+    'top': '0',
+    'left': '0',
+    'width': '100%',
+    'height': '100%'
+  });
+  iframe.setAttribute('src', 'https://player.vimeo.com/video/769222247?h=3e6436bc10');
+  iframe.setAttribute('frameborder', '0');
+  iframe.setAttribute('allow', 'autoplay; fullscreen; picture-in-picture');
+  iframe.setAttribute('allowfullscreen', 'allowfullscreen');
+  container.appendChild(iframe);
+};
+
+/**
+ * Get title.
+ *
+ * @return {string} The title.
+ */
+beestat.component.modal.contribute_video.prototype.get_title_ = function() {
+  return 'I need your help!';
+};
+
+/**
+ * Get the buttons that go on the bottom of this modal.
+ *
+ * @return {[beestat.component.button]} The buttons.
+ */
+beestat.component.modal.contribute_video.prototype.get_buttons_ = function() {
+  const give_other = new beestat.component.tile()
+    .set_background_color('#fff')
+    .set_text_color(beestat.style.color.gray.base)
+    .set_text_hover_color(beestat.style.color.green.base)
+    .set_shadow(false)
+    .set_size('large')
+    .set_text('Other ways to give')
+    .addEventListener('click', function() {
+      (new beestat.layer.contribute()).render();
+    });
+
+  const pay_links = {
+    'usd': {
+      'dev': 'https://donate.stripe.com/test_bIY2by6pS1ii99u8wG',
+      'live': 'https://donate.stripe.com/7sIcPp4Gt6APais144'
+    },
+    'cad': {
+      'dev': 'https://donate.stripe.com/test_bIY2by6pS1ii99u8wG',
+      'live': 'https://donate.stripe.com/28obLl4Gte3hfCMdR4'
+    },
+    'aud': {
+      'dev': 'https://donate.stripe.com/test_bIY2by6pS1ii99u8wG',
+      'live': 'https://donate.stripe.com/dR66r12ylcZd3U4aER'
+    },
+    'gbp': {
+      'dev': 'https://donate.stripe.com/test_bIY2by6pS1ii99u8wG',
+      'live': 'https://donate.stripe.com/4gwbLl3Cpe3hais3cs'
+    }
+  };
+
+  const give_one_time = new beestat.component.tile()
+    .set_background_color(beestat.style.color.green.base)
+    .set_background_hover_color(beestat.style.color.green.light)
+    .set_text_color('#fff')
+    .set_icon('gift')
+    .set_size('large')
+    .set_text('Make a One-Time Contribution')
+    .addEventListener('click', function() {
+      window.open(
+        pay_links[beestat.setting('units.currency')][window.environment] +
+        '?prefilled_email=' + beestat.user.get().email_address +
+        '&client_reference_id=' + beestat.user.get().user_id
+      );
+    });
+
+  return [
+    give_other,
+    give_one_time
+  ];
+};

js/js.php

@@ -93,6 +93,7 @@ if($setting->get('environment') === 'dev' || $setting->get('environment') === 'd
   echo '<script src="/js/component/card/contribute_status.js"></script>' . PHP_EOL;
   echo '<script src="/js/component/card/merchandise.js"></script>' . PHP_EOL;
   echo '<script src="/js/component/card/visualize_video.js"></script>' . PHP_EOL;
+  echo '<script src="/js/component/card/contribute_banner.js"></script>' . PHP_EOL;
   echo '<script src="/js/component/chart.js"></script>' . PHP_EOL;
   echo '<script src="/js/component/chart/runtime_thermostat_summary.js"></script>' . PHP_EOL;
   echo '<script src="/js/component/chart/temperature_profiles.js"></script>' . PHP_EOL;
@@ -134,6 +135,7 @@ if($setting->get('environment') === 'dev' || $setting->get('environment') === 'd
   echo '<script src="/js/component/modal/change_floor_plan.js"></script>' . PHP_EOL;
   echo '<script src="/js/component/modal/floor_plan_elevation_help.js"></script>' . PHP_EOL;
   echo '<script src="/js/component/modal/visualize_custom.js"></script>' . PHP_EOL;
+  echo '<script src="/js/component/modal/contribute_video.js"></script>' . PHP_EOL;
   echo '<script src="/js/component/input.js"></script>' . PHP_EOL;
   echo '<script src="/js/component/input/text.js"></script>' . PHP_EOL;
   echo '<script src="/js/component/input/checkbox.js"></script>' . PHP_EOL;

js/layer/contribute.js

@@ -17,7 +17,7 @@ beestat.layer.contribute.prototype.decorate_ = function(parent) {
     'padding': '0 ' + beestat.style.size.gutter + 'px'
   });
 
-  (new beestat.component.header()).render(parent);
+  (new beestat.component.header('contribute')).render(parent);
 
   // All the cards
   var cards = [];