Browse Source

Reworked subscription page to be more dynamic and better looking

feature/billing
Teknikode 11 months ago
parent
commit
dda407743c
  1. 103
      Teknik/Areas/Billing/Controllers/BillingController.cs
  2. 18
      Teknik/Areas/Billing/ViewModels/SubscriptionViewModel.cs
  3. 79
      Teknik/Areas/Billing/Views/Billing/Subscription.cshtml
  4. 4
      Teknik/Areas/Billing/Views/Billing/Subscriptions.cshtml
  5. 42
      Teknik/Content/common.css

103
Teknik/Areas/Billing/Controllers/BillingController.cs

@ -33,102 +33,67 @@ namespace Teknik.Areas.Billing.Controllers @@ -33,102 +33,67 @@ namespace Teknik.Areas.Billing.Controllers
// Get Upload Subscriptions
subVM.UploadSubscriptions.Add(new SubscriptionViewModel()
{
CurrentPlan = true,
SubscriptionId = "upload_free",
SubscriptionName = "Basic Account",
SubscribeText = "Sign up for free",
SubscribeUrl = Url.SubRouteUrl("account", "User.Register"),
BaseStorage = 5368709120,
MaxStorage = 107374200000
SubscribeText = "Free",
SubscribeUrlMonthly = Url.SubRouteUrl("account", "User.Register"),
BaseStorage = 5368709120
});
subVM.UploadSubscriptions.Add(new SubscriptionViewModel()
{
Primary = true,
Recommended = true,
SubscriptionId = "upload_10gb",
SubscriptionName = "Standalone 10 GB",
SubscribeText = "Subscribe",
SubscribeUrl = Url.SubRouteUrl("billing", "Billing.Subscribe", new { subscription = "upload_10gb" }),
SubscribeUrlMonthly = Url.SubRouteUrl("billing", "Billing.Subscribe", new { subscription = "upload_10gb_monthly" }),
SubscribeUrlYearly = Url.SubRouteUrl("billing", "Billing.Subscribe", new { subscription = "upload_10gb_yearly" }),
BaseStorage = 10737418240,
BasePrice = 0.99,
BaseUnit = "month",
OverageAllowed = true,
OveragePrice = 0.30,
OverageUnit = "GB",
MaxStorage = 107374200000
BasePriceMonthly = 0.99,
BasePriceYearly = 9.99
});
subVM.UploadSubscriptions.Add(new SubscriptionViewModel()
{
Primary = true,
SubscriptionId = "upload_50gb",
SubscriptionName = "Standalone 50 GB",
SubscribeText = "Subscribe",
SubscribeUrl = Url.SubRouteUrl("billing", "Billing.Subscribe", new { subscription = "upload_50gb" }),
SubscribeUrlMonthly = Url.SubRouteUrl("billing", "Billing.Subscribe", new { subscription = "upload_50gb_monthly" }),
SubscribeUrlYearly = Url.SubRouteUrl("billing", "Billing.Subscribe", new { subscription = "upload_50gb_yearly" }),
BaseStorage = 53687091200,
BasePrice = 3.99,
BaseUnit = "month",
OverageAllowed = true,
OveragePrice = 0.30,
OverageUnit = "GB",
MaxStorage = 107374200000
BasePriceMonthly = 3.99,
BasePriceYearly = 39.99
});
subVM.UploadSubscriptions.Add(new SubscriptionViewModel()
{
Primary = true,
SubscriptionId = "upload_usage",
SubscriptionName = "Pay Per Unit",
SubscribeText = "Subscribe",
SubscribeUrl = Url.SubRouteUrl("billing", "Billing.Subscribe", new { subscription = "upload_usage" }),
BaseStorage = null,
BasePrice = 0.15,
BaseUnit = "GB",
OverageAllowed = true,
OverageUnit = "monthly",
MaxStorage = 107374200000
SubscriptionId = "upload_100gb",
SubscriptionName = "Standalone 100 GB",
SubscribeUrlMonthly = Url.SubRouteUrl("billing", "Billing.Subscribe", new { subscription = "upload_100gb_monthly" }),
SubscribeUrlYearly = Url.SubRouteUrl("billing", "Billing.Subscribe", new { subscription = "upload_100gb_yearly" }),
BaseStorage = 107374200000,
BasePriceMonthly = 5.99,
BasePriceYearly = 59.99
});
// Get Email Subscriptions
subVM.EmailSubscriptions.Add(new SubscriptionViewModel()
{
Primary = true,
SubscriptionId = "email_1gb_monthly",
SubscriptionName = "Basic Email - Monthly",
SubscribeText = "Subscribe",
SubscribeUrl = Url.SubRouteUrl("billing", "Billing.Subscribe", new { subscription = "email_1gb_monthly" }),
BaseStorage = 1073741824,
BasePrice = 1.99,
BaseUnit = "month"
});
subVM.EmailSubscriptions.Add(new SubscriptionViewModel()
{
Primary = true,
SubscriptionId = "email_1gb_yearly",
SubscriptionName = "Basic Email - Yearly",
SubscribeText = "Subscribe",
SubscribeUrl = Url.SubRouteUrl("billing", "Billing.Subscribe", new { subscription = "email_1gb_yearly" }),
Recommended = true,
SubscriptionId = "email_1gb",
SubscriptionName = "Basic Email",
SubscribeUrlMonthly = Url.SubRouteUrl("billing", "Billing.Subscribe", new { subscription = "email_1gb_monthly" }),
SubscribeUrlYearly = Url.SubRouteUrl("billing", "Billing.Subscribe", new { subscription = "email_1gb_yearly" }),
BaseStorage = 1073741824,
BasePrice = 19.99,
BaseUnit = "year"
});
subVM.EmailSubscriptions.Add(new SubscriptionViewModel()
{
Primary = true,
SubscriptionId = "email_5gb_monthly",
SubscriptionName = "Premium Email - Monthly",
SubscribeText = "Subscribe",
SubscribeUrl = Url.SubRouteUrl("billing", "Billing.Subscribe", new { subscription = "email_5gb_monthly" }),
BaseStorage = 5368709120,
BasePrice = 3.99,
BaseUnit = "month"
BasePriceMonthly = 1.99,
BasePriceYearly = 19.99,
PanelOffset = "3"
});
subVM.EmailSubscriptions.Add(new SubscriptionViewModel()
{
Primary = true,
SubscriptionId = "email_5gb_yearly",
SubscriptionName = "Premium Email - Yearly",
SubscribeText = "Subscribe",
SubscribeUrl = Url.SubRouteUrl("billing", "Billing.Subscribe", new { subscription = "email_5gb_yearly" }),
SubscriptionId = "email_5gb",
SubscriptionName = "Premium Email",
SubscribeUrlMonthly = Url.SubRouteUrl("billing", "Billing.Subscribe", new { subscription = "email_5gb_monthly" }),
SubscribeUrlYearly = Url.SubRouteUrl("billing", "Billing.Subscribe", new { subscription = "email_5gb_yearly" }),
BaseStorage = 5368709120,
BasePrice = 39.99,
BaseUnit = "year"
BasePriceMonthly = 3.99,
BasePriceYearly = 39.99,
});
return View(subVM);

18
Teknik/Areas/Billing/ViewModels/SubscriptionViewModel.cs

@ -8,22 +8,28 @@ namespace Teknik.Areas.Billing.ViewModels @@ -8,22 +8,28 @@ namespace Teknik.Areas.Billing.ViewModels
{
public class SubscriptionViewModel : ViewModelBase
{
public bool Primary { get; set; }
public bool Recommended { get; set; }
public bool CurrentPlan { get; set; }
public string SubscriptionId { get; set; }
public string SubscriptionName { get; set; }
public double? BasePrice { get; set; }
public string BaseUnit { get; set; }
public double? BasePriceMonthly { get; set; }
public double? BasePriceYearly { get; set; }
public long? BaseStorage { get; set; }
public bool OverageAllowed { get; set; }
public double? OveragePrice { get; set; }
public double? OveragePriceMonthly { get; set; }
public double? OveragePriceYearly { get; set; }
public string OverageUnit { get; set; }
public long? MaxStorage { get; set; }
public string SubscribeUrl { get; set; }
public string SubscribeUrlYearly { get; set; }
public string SubscribeUrlMonthly { get; set; }
public string SubscribeText { get; set; }
public string PanelOffset { get; set; }
public SubscriptionViewModel()
{
Primary = false;
Recommended = false;
CurrentPlan = false;
OverageAllowed = false;
}
}

79
Teknik/Areas/Billing/Views/Billing/Subscription.cshtml

@ -4,43 +4,62 @@ @@ -4,43 +4,62 @@
var extraUsage = "";
if (Model.MaxStorage != null)
extraUsage = $"If you need more than {StringHelper.GetBytesReadable(Model.MaxStorage.Value)} of storage, please contact support for assistance.";
var panelColor = "info";
if (Model.Primary)
panelColor = "primary";
var price = Model.BasePrice.HasValue ? $"${Model.BasePrice:0.00} <small>/ {Model.BaseUnit}</small>" : "Free";
var overage = "No Overage Allowed";
if (Model.OverageAllowed)
{
overage = "No Overage Fee";
if (Model.OveragePrice != null)
{
overage = $"Overage at ${Model.OveragePrice:0.00} / {Model.OverageUnit}";
if (Model.MaxStorage != null)
overage += $" <span data-toggle=\"tooltip\" data-placement=\"top\" title=\"{extraUsage}\">(Up to {StringHelper.GetBytesReadable(Model.MaxStorage.Value)})*</span>";
}
}
var storageAllowed = "";
if (Model.BaseStorage != null)
{
storageAllowed = $"<strong>{StringHelper.GetBytesReadable(Model.BaseStorage.Value)}</strong> Storage";
storageAllowed = $"{StringHelper.GetBytesReadable(Model.BaseStorage.Value)} Storage";
}
else if (Model.MaxStorage != null)
var btnClass = "";
var subscribeText = Model.BasePriceMonthly.HasValue ? $"${Model.BasePriceMonthly:0.00} / month" : "Free";
if (Model.CurrentPlan)
{
storageAllowed = $"<strong><span data-toggle=\"tooltip\" data-placement=\"top\" title=\"{extraUsage}\">Up to {StringHelper.GetBytesReadable(Model.MaxStorage.Value)}*</span></strong> Storage";
btnClass = "disabled";
subscribeText = "Current plan";
}
<div class="col-sm-6 col-md-3">
<div class="panel panel-@panelColor">
<div class="panel-heading">
<h2 class="panel-title">@Model.SubscriptionName</h2>
</div>
<div class="panel-body text-center">
<h2>@Html.Raw(price)</h2>
<h5>
<small>@Html.Raw(overage)</small>
</h5>
<p>@Html.Raw(storageAllowed)</p>
<p><a href="@Model.SubscribeUrl" class="btn btn-primary center-block" role="button">@Model.SubscribeText</a></p>
var panelColor = "default";
var buttonColor = "default";
var title = "";
if (Model.Recommended)
{
panelColor = "primary";
buttonColor = "primary";
title = "Recommended";
}
var offset = "";
if (!string.IsNullOrEmpty(Model.PanelOffset))
offset = $"col-md-offset-{Model.PanelOffset}";
<div class="col-sm-6 col-md-3 @offset">
<div class="thumbnail thumbnail-@panelColor subscription-panel">
<div class="caption text-center">
<h4 class="header">@title</h4>
<h2 class="body">@Html.Raw(storageAllowed)</h2>
@if (Model.OverageAllowed)
{
var overage = "No Overage Fee";
if (Model.OveragePriceMonthly != null)
{
overage = $"Overage at ${Model.OveragePriceMonthly:0.00} / {Model.OverageUnit}";
if (Model.MaxStorage != null)
overage += $" <span data-toggle=\"tooltip\" data-placement=\"top\" title=\"{extraUsage}\">(Up to {StringHelper.GetBytesReadable(Model.MaxStorage.Value)})*</span>";
}
<h5>
<small>@Html.Raw(overage)</small>
</h5>
}
<h4 class="sub-title">@Model.SubscribeText</h4>
<p><a href="@Model.SubscribeUrlMonthly" class="btn btn-@buttonColor center-block @btnClass" role="button">@subscribeText</a></p>
@if (Model.BasePriceYearly != null)
{
var discount = 1 - (Model.BasePriceYearly.Value / (Model.BasePriceMonthly.Value * 12));
<p>
Or prepay annually<br />
(save @Math.Round(100 * discount)%):
</p>
<p><a href="@Model.SubscribeUrlYearly" class="btn btn-default btn-no-border btn-text-primary center-block" role="button">@($"${Model.BasePriceYearly:0.00}") / year</a></p>
}
</div>
</div>
</div>

4
Teknik/Areas/Billing/Views/Billing/Subscriptions.cshtml

@ -8,6 +8,10 @@ @@ -8,6 +8,10 @@
@if (Model.UploadSubscriptions.Any())
{
<h2 class="text-center">Upload Storage Subscriptions</h2>
<p class="text-muted text-center">
By subscribing to a Teknik Service plan, you agree to the <a href="@Url.SubRouteUrl("tos", "TOS.Index")">Teknik Terms of Service</a>.<br />
<strong>Note:</strong> The <a href="@Url.SubRouteUrl("privacy", "Privacy.Index")">Teknik Privacy Policy</a> describes how data is handled in this service.
</p>
<br />
<div class="row">
@foreach (var subVM in Model.UploadSubscriptions)

42
Teknik/Content/common.css

@ -204,6 +204,19 @@ margin: 0 auto; @@ -204,6 +204,19 @@ margin: 0 auto;
margin: 10px;
}
.btn-no-border {
border: none;
}
.btn-text-primary {
color: #418bca;
}
.btn-text-primary:hover {
color: #286090;
background-color: #418bca17
}
.btn-file {
position: relative;
overflow: hidden;
@ -355,6 +368,35 @@ padding-bottom: 24px; } @@ -355,6 +368,35 @@ padding-bottom: 24px; }
color: #FFF;
}
.thumbnail-primary {
border-color: #418bca;
border-width: 2px;
}
.thumbnail-info {
border-color: #5bc0de;
}
.thumbnail-default {
border-color: #ddd;
}
.subscription-panel {
height: 300px;
}
.subscription-panel .header {
height: 20px;
}
.subscription-panel .body {
height: 45px;
}
.subscription-panel .sub-title {
height: 25px;
}
.h1 small {
font-size: 24px;
}

Loading…
Cancel
Save