mirror of
https://git.teknik.io/Teknikode/Teknik.git
synced 2023-08-02 14:16:22 +02:00
Reworked subscription page to be more dynamic and better looking
This commit is contained in:
parent
c397365d33
commit
dda407743c
@ -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" }),
|
||||
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 = 1.99,
|
||||
BaseUnit = "month"
|
||||
BasePriceMonthly = 1.99,
|
||||
BasePriceYearly = 19.99,
|
||||
PanelOffset = "3"
|
||||
});
|
||||
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" }),
|
||||
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" }),
|
||||
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 = 3.99,
|
||||
BaseUnit = "month"
|
||||
});
|
||||
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" }),
|
||||
BaseStorage = 5368709120,
|
||||
BasePrice = 39.99,
|
||||
BaseUnit = "year"
|
||||
BasePriceMonthly = 3.99,
|
||||
BasePriceYearly = 39.99,
|
||||
});
|
||||
|
||||
return View(subVM);
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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";
|
||||
}
|
||||
|
||||
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>";
|
||||
}
|
||||
<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>
|
||||
}
|
||||
<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>
|
||||
|
@ -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)
|
||||
|
@ -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; }
|
||||
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…
Reference in New Issue
Block a user