233 lines
9.6 KiB
HTML

{% extends "base.html" %}
{% load staticfiles compress %}
{% block title %}Pricing - It's Free! - healthchecks.io{% endblock %}
{% block content %}
<!-- Plans -->
<section id="plans">
<div class="container">
{% if messages %}
<div class="alert alert-danger">
<p>
<strong>We're sorry!</strong> There was a problem setting
up the subscription. Response from payment gateway:</p>
{% for message in messages %}
<p class="error-message">{{ message }}</p>
{% endfor %}
</div>
{% endif %}
{% if sub.is_active %}
<div class="row">
<div class="col-md-12">
<div id="subscription-status" class="jumbotron">
<p>
{% if first_charge %}
You just paid <strong>${{ sub.price }}</strong>
{% else %}
You are currently paying <strong>${{ sub.price }}/month</strong>
{% endif %}
{% if sub.pm_is_credit_card %}
using {{ sub.card_type }} card
ending with {{ sub.last_4 }}.
{% endif %}
{% if sub.pm_is_paypal %}
using PayPal account {{ sub.paypal_email }}.
{% endif %}
</p>
<p>
Next billing date will be {{ sub.next_billing_date }}.
Thank you for supporting healthchecks.io!
</p>
<form method="post" action="{% url 'hc-cancel-plan' %}">
{% csrf_token %}
<button type="submit" class="btn btn-default">
Cancel Subscription
</button>
</form>
</div>
</div>
</div>
{% endif %}
<div class="row">
<!-- item -->
<div class="col-sm-4 text-center">
<div class="panel panel-success panel-pricing">
<div class="panel-heading">
<i class="glyphicon glyphicon-heart"></i>
<h3>Free Plan</h3>
</div>
<div class="panel-body text-center">
<p><strong>$0 / Month</strong></p>
</div>
<ul class="list-group text-center">
<li class="list-group-item"><i class="fa fa-check"></i> Personal or Commercial use</li>
<li class="list-group-item"><i class="fa fa-check"></i> Unlimited Checks</li>
<li class="list-group-item"><i class="fa fa-check"></i> Unlimited Alerts</li>
<li class="list-group-item">&nbsp;</li>
</ul>
<div class="panel-footer">
{% if request.user.is_authenticated %}
{% if sub.subscription_id %}
<form method="post" action="{% url 'hc-cancel-plan' %}">
{% csrf_token %}
<button type="submit" class="btn btn-lg btn-default">
Switch To Free
</button>
</form>
{% else %}
<a class="btn btn-lg btn-success disabled" href="#">Selected</a>
{% endif %}
{% else %}
<a class="btn btn-lg btn-success" href="{% url 'hc-login' %}">Get Started</a>
{% endif %}
</div>
</div>
</div>
<!-- /item -->
<!-- item -->
<div class="col-sm-8 text-center">
<div class="panel panel-success panel-pricing">
<div class="panel-heading">
<div id="piggy">
<i class="glyphicon glyphicon-piggy-bank"></i>
</div>
<h3>Pay What You Want Plan</h3>
</div>
<div class="panel-body text-center">
<p>
<strong>
{% if sub.is_active %}
$<span id="pricing-value">{{ sub.price }}</span> / Month
{% else %}
$<span id="pricing-value">10</span> / Month
{% endif %}
</strong>
<span class="btn-group" role="group">
<button id="pay-minus" type="button" class="btn btn-default">
<i class="glyphicon glyphicon-chevron-down"></i>
</button>
<button id="pay-plus" type="button" class="btn btn-default">
<i class="glyphicon glyphicon-chevron-up"></i>
</button>
</span>
</p>
</div>
<ul class="list-group text-center">
<li class="list-group-item"><i class="fa fa-check"></i> Personal or Commercial use</li>
<li class="list-group-item"><i class="fa fa-check"></i> Unlimited Checks</li>
<li class="list-group-item"><i class="fa fa-check"></i> Unlimited Alerts</li>
<li class="list-group-item"><i class="fa fa-check"></i> Priority Support</li>
</ul>
<div class="panel-footer">
{% if request.user.is_authenticated %}
{% if sub.is_active %}
<button id="pww-selected-btn"
class="btn btn-lg btn-success disabled">Selected</button>
<form method="post" action="{% url 'hc-update-plan' %}">
{% csrf_token %}
<input class="selected-price" type="hidden" name="price" />
<button
id="pww-switch-btn"
type="submit"
class="btn btn-lg btn-default">
Switch To
</button>
</form>
{% else %}
<button
id="pww-create-payment-method"
class="btn btn-lg btn-default">Select</button>
{% endif %}
{% else %}
<a class="btn btn-lg btn-primary" href="{% url 'hc-login' %}">Get Started</a>
{% endif %}
</div>
</div>
</div>
<!-- /item -->
</div>
</div>
</section>
<!-- /Plans -->
<section id="faq">
<div class="container">
<div class="page-header">
<h1>FAQ</h1>
</div>
<div class="row">
<div class="col-sm-12">
<h2>The Free plan and the Pay-What-You-Want plan look almost the same.
What's up with that?</h2>
<p>
healtchecks.io is a free service. You can use it as much
as you want (in good faith, without abusing it), and you
should not feel obliged to pay anything. However, if you
find the service useful and important to you, you do have the option
to switch to the Paid plan. The Paid plan is effectively
a monthly donation to guarantee project's
continued existence and future improvements.
</p>
<h2>If I cancel my paid plan, do I get a refund?</h2>
<p>No, you don't.</p>
</div>
</div>
</div>
</section>
<div id="payment-method-modal" class="modal" data-client-token="{{ client_token }}">
<div class="modal-dialog">
<form method="post" action="{% url 'hc-create-plan' %}">
{% csrf_token %}
<input class="selected-price" type="hidden" name="price" value="10" />
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</span></button>
<h4>Set Up Subscription</h4>
</div>
<div class="modal-body" id="payment-method-body">
<div id="payment-form"></div>
</div>
<div class="modal-footer">
<button id="payment-method-cancel" type="button" class="btn btn-default">
Cancel
</button>
<button type="submit" class="btn btn-primary">
Set Up Subscription
</button>
</div>
</div>
</form>
</div>
</div>
{% endblock %}
{% block scripts %}
<script src="https://js.braintreegateway.com/v2/braintree.js"></script>
{% compress js %}
<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/pricing.js' %}"></script>
{% endcompress %}
{% endblock %}