Test warning banners

by Hugo Carneiro

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="holder">
</div>

CSS

.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid rgba(0, 0, 0, 0);
  white-space: nowrap;
  padding: 9px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.warning-holder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 15px;
  background-color: #F8F6F7;
  border-bottom: 1px solid #E4E2E3;
  color: #333333;
}

.warning-holder.fl-info {
  background-color: #FFD958;
}

.warning-holder.fl-warning {
  background-color: #F2C891;
}

.warning-holder .banner-text p {
  margin: 0;
}

.warning-holder .banner-button {
  margin-left: 15px;
  padding: 9px 12px;
  border-radius: 50px;
  color: #FFFFFF;
  background-color: #ED9119;
  border-color: #ED9119;
}

.warning-holder.fl-info .banner-button {
  color: #333333;
  background-color: rgba(0, 0, 0, 0);
  border-color: #333333;
}

JavaScript

var flUser = {
  currentApp: {
    plan: {
      id: 'sub_1Lv0wBJNczvHKhMArMcr0keV',
      active: true, // Update between 'true' and 'false'
      status: 'active', // Update between 'active', 'past-due', and 'canceled'
      createdAt: 1666280739,
      expiresAt: 1668164160,
      startedAt: 1666280739,
      scheduledToCancel: true // Update between 'true' and 'false'
    }
  }
};

var appPlanBanners = {
  currentApp: flUser.currentApp || {},
  get appPlan() {
    return this.currentApp.plan || {};
  },
  warningMessages: {
    cancelation: {
      message: 'You currently have <strong><span class="time-remaining">10</span> days left</strong> on your app plan. Your plan will expire on <span class="expiry-date">October 25, 2022</span>.',
      button: 'Renew plan',
      class: 'fl-info'
    },
    issue: {
      message: 'There seems to be an <strong>issue with your payment method</strong>. If we don\'t receive payment your app will be downgraded, but your data will be untouched.',
      button: 'Update payment method',
      class: 'fl-warning'
    },
    upgrade: {
      message: [
        'Your app is on the Free plan. Your app is <strong>limited to 50 app users</strong> who can access it.',
        'Your app is on the Free plan. Your app is <strong>limited to 3 app collaborators</strong> who can help you build and test the app.',
        'Your app is on the Free plan. Your app is  <strong>limited to 500MB of storage</strong>, upgrade to increase storage limits.'
      ],
      button: 'Upgrade',
      class: 'fl-default'
    }
  },
  generateWarning: function(type) {
    var message = this.warningMessages[type].message;

    if (type === 'upgrade') {
      message = message[Math.floor(Math.random() * message.length)]
    }

    var $warningMessage = $('<p>' + message + '</p>');

    if (type === 'cancelation') {
      var daysRemaining = moment.unix(this.appPlan.expiresAt).diff(moment(), 'days');
      var expiryDate =...