notebook/app/views/subscriptions/new.html.erb

<% free_for_life_user = current_user.selected_billing_plan_id == 2 %>
<% on_premium_plan = ['early-adopters', 'premium', 'premium-trio', 'premium-annual'].include? @active_billing_plan.stripe_plan_id %>
<% active_stripe_plan = @active_billing_plan.stripe_plan_id %>

<p class="right hide-on-small-only">
  <% Rails.application.config.content_types[:all_non_universe].each do |content_class| %>
    <% can_create = current_user.can_create?(content_class) %>
    <% edit_message = current_user.send(content_class.name.pluralize.downcase).any? && !can_create %>
    <i class="material-icons <%= can_create ? content_class.color : 'grey' %>-text tooltipped" style="font-size: 240%" data-position="bottom" data-delay="0" data-tooltip="You <%= can_create ? 'can' : 'cannot' %> create new <%= content_class.name.pluralize.downcase %>.<%= ' You can edit your existing ones.' if edit_message %>">
      <%= content_class.icon %>
    </i>
  <% end %>
</p>

<h4>Subscription Plan</h4>

<p>
  <% if free_for_life_user %>
    <p style="margin-top: 20px;">
    Thank you! You were there at Notebook.ai's beginnings, so we've gifted you <strong>a free, unlimited account for life</strong>. Subscriptions below have been disabled, because you already have everything unlocked.
    </p>
    <p>
      Thank you for helping make Notebook.ai what it is today.
    </p>
  <% else %>
    You're currently subscribed to Notebook's <strong><%= @active_billing_plan.name %></strong> plan.
    <% unless @active_billing_plan.nil? || @active_billing_plan.stripe_plan_id == 'starter' %>
      <% renewal_day = current_user.active_subscriptions.first.start_date.day %>
      While active, your subscription will automatically renew.
      <% if active_stripe_plan == 'premium' %>
        You will be charged <%= number_to_currency(@active_billing_plan.monthly_cents / 100) %>
        on the <%= renewal_day %><%= renewal_day.ordinal %> of each month.
      <% end %>
    <% end %>
  <% end %>
</p>

<div class="row">
  <div class="col s12 m6 l3">
    <div class="card <%= 'light-blue lighten-5' if @active_billing_plan.stripe_plan_id == 'starter' %>" style="min-height: 470px;">
      <div class="card-content">
        <h4 class="center">
          <i class="material-icons" style="font-size: 90%; position: relative; top: 3px;">class</i>
          Starter
        </h4>
        <h5 class="center">
          $0/month<br /><br />
        </h5>
        <ul class="plan-features">
          <li>
            <i class="material-icons green-text">check</i>
            Plan up to <strong>5</strong> universes
          </li>
          <li>
            <i class="material-icons green-text">check</i>
            Upload <strong>50MB</strong> of images
          </li>
          <li>
            <i class="material-icons green-text">check</i>
            Create <strong>core</strong> page types
          </li>
          <li class="center">
            <i class="material-icons <%= Universe.color %>-text tooltipped" style="font-size: 240%" data-position="bottom" data-delay="0" data-tooltip="Create up to 5 <%= Universe.name.pluralize %>">
              <%= Universe.icon %>
            </i>
            <% (Rails.application.config.content_types[:free] - [Universe]).each do |content_class| %>
              <i class="material-icons <%= content_class.color %>-text tooltipped" style="font-size: 240%" data-position="bottom" data-delay="0" data-tooltip="Create unlimited <%= content_class.name.pluralize %>">
                <%= content_class.icon %>
              </i>
            <% end %>
            <br /><br /><br />
          </li>
        </ul>
      </div>
      <div class="row center">
        <% if @active_billing_plan.stripe_plan_id == 'starter' %>
          <%= link_to 'Plan is active', '#', class: 'btn-large waves-effect waves-light white disabled black-text' %>
        <% else %>
          <%= link_to 'Downgrade', change_subscription_path('starter'), class: "btn-large waves-effect waves-light white black-text #{'disabled' if free_for_life_user}" %>
        <% end %>
      </div>
      <br />
    </div>
  </div>

  <div class="col s12 m6 l3">
    <div class="card <%= 'light-blue lighten-5' if active_stripe_plan == 'premium' %>" style="min-height: 470px;">
      <div class="card-content">
        <h4 class="center">
          <i class="material-icons" style="font-size: 90%; position: relative; top: 3px;">grade</i>
          Premium
        </h4>
        <h5 class="center">
          $9/month<br />
          <small>billed monthly</small>
        </h5>
        <ul class="plan-features">
          <li>
            <i class="material-icons green-text">check</i>
            Plan <strong>unlimited</strong> universes
          </li>
          <li>
            <i class="material-icons green-text">check</i>
            Upload <strong>10GB</strong> of images
          </li>
          <li>
            <i class="material-icons green-text">check</i>
            Create <strong>all <%= Rails.application.config.content_types[:all].count %></strong> page types
          </li>
          <li class="center">
            <% Rails.application.config.content_types[:all].each_with_index do |content_class, i| %>
              <%= '<br />'.html_safe if i % 4 == 0 && i != 0 %>
              <i class="material-icons <%= content_class.color %>-text tooltipped" style="font-size: 240%" data-position="bottom" data-delay="0" data-tooltip="Create unlimited <%= content_class.name.pluralize %>">
                <%= content_class.icon %>
              </i>
            <% end %>
          </li>
        </ul>
      </div>
      <div class="row center">
        <% if active_stripe_plan == 'premium' %>
          <%= link_to 'Plan is active', '#', class: 'btn-large waves-effect waves-light white black-text disabled' %>
        <% elsif on_premium_plan %>
          <%= link_to 'Change Plan', change_subscription_path('premium'), class: "btn-large waves-effect waves-light white blue-text #{'disabled' if free_for_life_user}" %>
        <% else %>
          <%= link_to 'Upgrade', change_subscription_path('premium'), class: "btn-large waves-effect waves-light blue white-text #{'disabled' if free_for_life_user}" %>
        <% end %>
      </div>
      <br />
    </div>
  </div>

  <div class="col s12 m6 l3">
    <div class="card <%= 'light-blue lighten-5' if active_stripe_plan == 'premium-trio' %>" style="min-height: 470px;">
      <div class="card-content">
        <h4 class="center">
          <i class="material-icons" style="font-size: 90%; position: relative; top: 3px;">grade</i>
          Premium
        </h4>
        <h5 class="center">
          $8/month<br />
          <small>billed every 3 months</small>
        </h5>
        <ul class="plan-features">
          <li>
            <i class="material-icons green-text">check</i>
            Plan <strong>unlimited</strong> universes
          </li>
          <li>
            <i class="material-icons green-text">check</i>
            Upload <strong>10GB</strong> of images
          </li>
          <li>
            <i class="material-icons green-text">check</i>
            Create <strong>all <%= Rails.application.config.content_types[:all].count %></strong> page types
          </li>
          <li class="center">
            <% Rails.application.config.content_types[:all].each_with_index do |content_class, i| %>
              <%= '<br />'.html_safe if i % 4 == 0 && i != 0 %>
              <i class="material-icons <%= content_class.color %>-text tooltipped" style="font-size: 240%" data-position="bottom" data-delay="0" data-tooltip="Create unlimited <%= content_class.name.pluralize %>">
                <%= content_class.icon %>
              </i>
            <% end %>
          </li>
        </ul>
      </div>
      <div class="row center">
        <% if active_stripe_plan == 'premium-trio' %>
          <%= link_to 'Plan is active', '#', class: 'btn-large waves-effect waves-light white black-text disabled' %>
        <% elsif on_premium_plan %>
          <%= link_to 'Change Plan', change_subscription_path('premium-trio'), class: "btn-large waves-effect waves-light white blue-text #{'disabled' if free_for_life_user}" %>
        <% else %>
          <%= link_to 'Upgrade', change_subscription_path('premium-trio'), class: "btn-large waves-effect waves-light blue white-text #{'disabled' if free_for_life_user}" %>
        <% end %>
      </div>
      <br />
    </div>
  </div>

  <div class="col s12 m6 l3">
    <div class="card <%= 'light-blue lighten-5' if active_stripe_plan == 'premium-annual' %>" style="min-height: 470px;">
      <div class="card-content">
        <h4 class="center">
          <i class="material-icons" style="font-size: 90%; position: relative; top: 3px;">grade</i>
          Premium
        </h4>
        <h5 class="center">
          $7/month<br />
          <small>billed annually</small>
        </h5>
        <ul class="plan-features">
          <li>
            <i class="material-icons green-text">check</i>
            Plan <strong>unlimited</strong> universes
          </li>
          <li>
            <i class="material-icons green-text">check</i>
            Upload <strong>10GB</strong> of images
          </li>
          <li>
            <i class="material-icons green-text">check</i>
            Create <strong>all <%= Rails.application.config.content_types[:all].count %></strong> page types
          </li>
          <li class="center">
            <% Rails.application.config.content_types[:all].each_with_index do |content_class, i| %>
              <%= '<br />'.html_safe if i % 4 == 0 && i != 0 %>
              <i class="material-icons <%= content_class.color %>-text tooltipped" style="font-size: 240%" data-position="bottom" data-delay="0" data-tooltip="Create unlimited <%= content_class.name.pluralize %>">
                <%= content_class.icon %>
              </i>
            <% end %>
          </li>
        </ul>
      </div>
      <div class="row center">
        <% if active_stripe_plan == 'premium-annual' %>
          <%= link_to 'Plan is active', '#', class: 'btn-large waves-effect waves-light white black-text disabled' %>
        <% elsif on_premium_plan %>
          <%= link_to 'Change Plan', change_subscription_path('premium-annual'), class: "btn-large waves-effect waves-light white blue-text #{'disabled' if free_for_life_user}" %>
        <% else %>
          <%= link_to 'Upgrade', change_subscription_path('premium-annual'), class: "btn-large waves-effect waves-light blue white-text #{'disabled' if free_for_life_user}" %>
        <% end %>
      </div>
      <br />
    </div>
  </div>

</div>

<div class="row">
  <div class="col s12 m12 l3 hide-on-small-only"></div>
  <div class="col s12 m12 l9">
    <div class="card">
      <div class="card-content">

        <% if on_premium_plan || free_for_life_user %>
          <div class="card-title">Your subscription is active!</div>
          <p>
            All page types are unlocked. You can turn on or off whichever ones you'd like by
            <%= link_to 'clicking here', customization_content_types_path %> or on the button below.
          </p>
          <br />
          <p>
            <%= link_to 'Enable premium pages', customization_content_types_path, class: 'btn btn-large blue white-text' %>
          </p>
        <% else %>
          <div class="card-title">Choose your way to pay</div>
          <p>
            The standard Premium membership is $9 per month. However, you can save more by choosing to pay every three months or once a year. Purchasing an annual Premium membership gets you the 12th month free!
          </p>
        <% end %>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col s12">
    <div class="card">
      <div class="card-content">
        <div class="card-title">Your referral code & stats</div>
        <div class="row">
          <div class="col s12">
            <p>
              Your referral link is:
              <% share_link = "https://www.notebook.ai/?referral=#{current_user.referral_code.code}" %>
              <input type="text"
                value="<%= share_link %>"
                style="text-align: center"
                onClick="this.select();" />
            </p>
            <ul>
              <% referrals = current_user.referrals %>
              <% converted_referrals = referrals.map(&:referree).select(&:on_premium_plan?) %>
              <li><strong><%= pluralize referrals.count, 'user' %></strong> <%= referrals.count == 1 ? 'has' : 'have' %> signed up with your referral code.</li>
              <% if converted_referrals.any? %>
                <li>
                  Of these, <strong><%= pluralize converted_referrals.count, 'user' %></strong> <%= converted_referrals.count == 1 ? 'has' : 'have' %> earned you both a Premium bonus!
                </li>
              <% else %>
                <li>None have signed up for Premium yet, however.</li>
              <% end %>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col s12">
    <div class="card">
      <div class="card-content">
        <div class="card-title">Your payment method</div>
        <div class="row">
          <div class="col s12 m6">
            <p>
              <strong>For your security, we don't store your payment information on file.</strong><br /><br />
            </p>
            <p>
              Instead, we rely on industry-leading payment processor Stripe to safely and securely process payments and handle your
              subscription info.
            </p>
          </div>
          <div class="col s12 m6">
            <% if @stripe_customer.sources.total_count == 0 %>
              <p>
                We don't currently have a payment method on file for you. You'll be asked to add one whenever you
                upgrade, but you can add one at any time here.
                <br /><br />
              </p>
              <p class="center">
                <%= link_to "Add payment method", payment_info_path, class: 'btn white blue-text' %>
              </p>
            <% else %>
              <p>
                We have a payment method on file for you through Stripe
                (<%= @stripe_customer.sources.data[0].brand %> ending in <%= @stripe_customer.sources.data[0].last4 %>),
                but since we don't store it locally, you cannot edit it. You can choose to add a new one (replacing the old),
                or delete the existing one.
              </p>
            <% end %>
          </div>
        </div>
      </div>
      <% if @stripe_customer.sources.total_count > 0 %>
      <div class="card-action">
                <%= link_to "Add new payment method", payment_info_path %>
                <%= link_to "Delete existing payment method", delete_payment_method_path %>

      </div>
      <% end %>
    </div>
  </div>
</div>

<div class="row">
  <div class="col s12">
    <div class="card">
      <div class="card-content">
        <div class="card-title">
          Upload Bandwidth
          <div class="right">
            <%= (current_user.upload_bandwidth_kb) > 0 ? Filesize.from("#{current_user.upload_bandwidth_kb}KB").pretty : '-' + Filesize.from("#{current_user.upload_bandwidth_kb.abs}KB").pretty %> remaining
          </div>
        </div>
        <p>
          You have <strong><%= (current_user.upload_bandwidth_kb) > 0 ? Filesize.from("#{current_user.upload_bandwidth_kb}KB").pretty : '-' + Filesize.from("#{current_user.upload_bandwidth_kb.abs}KB").pretty %></strong> of bandwidth remaining.
        </p>
        <p>
          This bandwidth can be used to upload images to your content anywhere on the site. Deleting an uploaded image frees
          up the same amount of bandwidth.
          <% unless on_premium_plan %>
            To get more bandwidth, upgrade to our Premium plan.
          <% end %>
        </p>
      </div>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-content">
    <div class="card-title">
      <div class="right">
        <% account_balance = @stripe_customer.account_balance %>
        <%= 'Outstanding balance:' if account_balance > 0 %> <%= number_to_currency(account_balance.abs / 100.0) if account_balance != 0 %> <%= 'credit' if account_balance < 0 %>
      </div>
      Billing history
    </div>
    <table class="bordered">
      <thead>
        <tr>
          <th>Date</th>
          <th>Description</th>
          <th>Amount Billed</th>
        </tr>
      </thead>
      <tbody>
        <% @stripe_invoices.first(10).each do |invoice| %>
          <tr>
            <td>
              <%= Time.at(invoice.date).strftime('%B %d, %Y, %I:%M:%S %p') %>
              <%= '(Pending)' if Time.at(invoice.date) > Time.now %>
            </td>
            <td>
              <ul>
                <% invoice.lines.data.reverse.each do |line_item| %>
                  <li>
                    <%
                      action = line_item.amount < 0 ? 'prorated' : 'charged'
                      if line_item.description.nil?
                        description = [
                          "a #{line_item.plan.name} subscription ",
                          "from #{Time.at(line_item.period.start).strftime('%B %d, %Y')} ",
                          "to #{Time.at(line_item.period.end).strftime('%B %d, %Y')}"
                        ].join
                      else
                        description = line_item.description
                      end
                    %>

                    You were <%= action %> <%= number_to_currency(line_item.amount / 100) %> for <%= description %>.
                  </li>
                <% end %>
              </ul>
            </td>
            <td>
              <%= number_to_currency(invoice.amount_due / 100) %>
            </td>
          </tr>
        <% end %>
      </tbody>
    </table>
  </div>
</div>