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.try(:stripe_plan_id)) %>
<% active_stripe_plan = @active_billing_plan.try(:stripe_plan_id) %>

<%= content_for :full_width_page_header do %>
  <p class="center hide-on-small-only">
    <% Rails.application.config.content_types[:all_non_universe].each do |content_class| %>
      <% can_create = current_user.can_create?(content_class) || PermissionService.user_has_active_promotion_for_this_content_type(user: current_user, content_type: content_class.name) %>
      <% 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 small" 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>
<% end %>

<%= render partial: 'notice_dismissal/messages/06' %>

<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>
  <% elsif @active_promotions.any? %>
    <p>
      You're currently subscribed to Notebook.ai's <strong><%= @active_billing_plan.name %></strong> plan, but have access to Premium features through your
      active Premium Code (<%= @active_promo_code.description %>) for <%= distance_of_time_in_words DateTime.current, @active_promotions.first.expires_at %> longer.
    </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 black-text <%= '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]).each do |content_class| %>
              <% next if content_class.name == "Universe" %>
              <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 black-text <%= '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}" %>
        <% elsif @active_promotions.any? %>
          <%= link_to 'Premium is active', '#', class: 'btn-large waves-effect waves-light white black-text disabled' %>
        <% 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 black-text <%= '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}" %>
        <% elsif @active_promotions.any? %>
          <%= link_to 'Premium is active', '#', class: 'btn-large waves-effect waves-light white black-text disabled' %>
        <% 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 black-text <%= '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}" %>
        <% elsif @active_promotions.any? %>
          <%= link_to 'Premium is active', '#', class: 'btn-large waves-effect waves-light white black-text disabled' %>
        <% 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 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.
          </p>
        <% end %>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col s12 m12 l6">
    <%= link_to prepay_path, class: 'black-text' do %>
      <div class="hoverable card orange lighten-3">
        <div class="card-content">
          <div class="card-title black-text">
            <i class="fa fa-paypal left"></i>
            New: Purchase Premium with PayPal
          </div>

          <p class="black-text">
            You can now purchase <strong>Premium Codes</strong> with PayPal!
          </p>
          <br />
          <p class="black-text">
            These codes let you prepay for however many months of Premium you'd like, and can be manually activated at any time. 
            Each code can be used only once, but can be used by anyone you share the code with &mdash;
            so they make great gifts, too!
          </p>
          <br />
          <p class="black-text">
            Click here to learn more.
          </p>
        </div>
      </div>
    <% end %>
  </div>

  <div class="col s12 m12 l6">
    <div class="card">
      <div class="card-content">

        <div class="card-title">Have a Premium Code to redeem?</div>
        <p>
          Enter your promotional code below to apply its benefits to your account. Codes may only be used once per account.
        </p>

        <% if current_user.page_unlock_promo_codes.where('uses_remaining > 0').any? %>
          <br />
          <p>
            <span class="grey-text">Your purchased codes, available to activate:</span>
          </p>
          <ul>
            <% current_user.page_unlock_promo_codes.where('uses_remaining > 0').each do |code| %>
              <li><strong><%= code.code %></strong> (<%= code.description %>)</li>
            <% end %>
          </ul>
        <% end %>

        <%= form_for :promotional_code, url: redeem_path do |form| %>
          <div class="input-field col s6">
            <%= form.text_field :promo_code %>
            <label for="promo_code">Code</label>
          </div>
          
          <div class="input-field col s6">
            <%= form.submit 'Redeem code', class: 'white black-text btn' %>
          </div>
        <% end  %>
        <div class="clearfix"></div>

        <% if current_user.active_promotions.any? %>
          <p>
            Your <%= pluralize current_user.active_promo_codes.count, 'active promo code' %>:

            <ul class="browser-default">
              <% current_user.active_promo_codes.each do |promo_code| %>
                <% promotion = Promotion.find_by(user: current_user, page_unlock_promo_code_id: promo_code.id) %>
                <li>
                  <p>
                    <strong><%= promo_code.code %></strong> - <%= promo_code.description %>
                    <span class="grey-text">
                      (active for <%= distance_of_time_in_words(DateTime.current, promotion.expires_at) %> longer)
                    </span>
                  </p>
                  <p>
                    Pages unlocked:
                    <% promo_code.page_types.each do |page_type| %>
                      <% page_type_class = page_type.constantize %>
                      <%= link_to polymorphic_path(page_type_class) do %>
                        <i class="material-icons <%= page_type_class.color %>-text tooltipped" data-tooltip="<%= page_type.pluralize %>">
                          <%= page_type_class.icon %>
                        </i>
                      <% end %>
                    <% end %>
                  </p>
                </li>
              <% end %>
            </ul>

            <%= link_to 'Click here to turn on your new page types!', customization_content_types_path, class: 'btn blue white-text' %>
          </p>
        <% end %>
      </div>
    </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="center help-text">
  All prices are in US Dollars. Making payments using another currency will automatically exchange into US Dollars at the current exchange rates.
</div>