beestat/js/component/card/merchandise.js

/**
 * Contribute benefits.
 */
beestat.component.card.merchandise = function() {
  beestat.component.card.apply(this, arguments);
};
beestat.extend(beestat.component.card.merchandise, beestat.component.card);

/**
 * Decorate.
 *
 * @param {rocket.Elements} parent
 */
beestat.component.card.merchandise.prototype.decorate_contents_ = function(parent) {
  const p = document.createElement('p');
  p.innerText = 'Slap a sticker on your furnace and another on a water bottle to support your favorite thermostat analytics platform! Stickers are high quality, made in the USA, and shipped within 1 business day.';
  parent.appendChild(p);

  const flex_container = document.createElement('div');
  Object.assign(flex_container.style, {
    'display': 'flex',
    'grid-gap': `${beestat.style.size.gutter}px`,
    'align-items': 'center',
    'flex-wrap': 'wrap'
  });
  parent.appendChild(flex_container);

  const sticker_logo_text_container = document.createElement('div');
  Object.assign(sticker_logo_text_container.style, {
    'background': beestat.style.color.gray.dark,
    'padding': `${beestat.style.size.gutter}px`,
    'border-radius': `${beestat.style.size.border_radius}px`,
    'text-align': 'right',
    'color': beestat.style.color.gray.dark
  });
  const sticker_logo_text_img = document.createElement('img');
  sticker_logo_text_img.setAttribute('src', 'img/merchandise/sticker_logo_text.png');
  sticker_logo_text_img.style.height = '48px';
  sticker_logo_text_img.style.marginTop = '8px';
  sticker_logo_text_img.style.marginBottom = '8px';
  sticker_logo_text_container.appendChild(sticker_logo_text_img);
  flex_container.appendChild(sticker_logo_text_container);

  const sticker_logo_container = document.createElement('div');
  Object.assign(sticker_logo_container.style, {
    'background': beestat.style.color.gray.dark,
    'padding': `${beestat.style.size.gutter}px`,
    'border-radius': `${beestat.style.size.border_radius}px`,
    'text-align': 'right',
    'color': beestat.style.color.gray.dark
  });
  const sticker_logo_img = document.createElement('img');
  sticker_logo_img.setAttribute('src', 'img/merchandise/sticker_logo.png');
  sticker_logo_img.style.height = '64px';
  sticker_logo_container.appendChild(sticker_logo_img);

  flex_container.appendChild(sticker_logo_container);

  // Buy button
  const tile_container = document.createElement('div');
  Object.assign(tile_container.style, {
    'flex-grow': '1',
    'text-align': 'center'
  });

  const pay_data = {
    'usd': {
      'amount': 5,
      'payment_link': {
        'dev': 'https://buy.stripe.com/test_5kA5nK3dG5yy2L6aF8',
        'live': 'https://buy.stripe.com/14k5mXa0N9N13U47sx'
      }
    },
    'cad': {
      'amount': 7,
      'payment_link': {
        'dev': 'https://buy.stripe.com/test_3csg2og0sgdc71m14w',
        'live': 'https://buy.stripe.com/aEUg1B1uh6APbmweV0'
      }
    },
    'aud': {
      'amount': 7,
      'payment_link': {
        'dev': 'https://buy.stripe.com/test_aEU2bycOg4uugBW14v',
        'live': 'https://buy.stripe.com/6oE6r15Kx2kzgGQbIQ'
      }
    },
    'gbp': {
      'amount': 5,
      'payment_link': {
        'dev': 'https://buy.stripe.com/test_eVaeYkg0s1ii2L66oR',
        'live': 'https://buy.stripe.com/28og1B2yl4sH76g6ov'
      }
    }
  };

  const amount_formatted = new Intl.NumberFormat('en-US', {
    'style': 'currency',
    'currency': beestat.setting('units.currency')
  }).format(pay_data[beestat.setting('units.currency')].amount);

  const pay_tile = new beestat.component.tile()
    .set_background_color(beestat.style.color.lightblue.base)
    .set_background_hover_color(beestat.style.color.lightblue.light)
    .set_text_color('#fff')
    .set_size('large')
    .set_icon('sticker_emoji')
    .set_text([
      'Buy Sticker 2-Pack',
      amount_formatted
    ])
    .render($(tile_container));
  pay_tile.addEventListener('click', function() {
    window.open(
      pay_data[beestat.setting('units.currency')].payment_link[window.environment] +
      '?prefilled_email=' + beestat.user.get().email_address +
      '&client_reference_id=' + beestat.user.get().user_id
    );
  });
  flex_container.appendChild(tile_container);
};

/**
 * Get the title of the card.
 *
 * @return {string} The title.
 */
beestat.component.card.merchandise.prototype.get_title_ = function() {
  return 'Merch!';
};