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
|
// Get Upload Subscriptions
|
||||||
subVM.UploadSubscriptions.Add(new SubscriptionViewModel()
|
subVM.UploadSubscriptions.Add(new SubscriptionViewModel()
|
||||||
{
|
{
|
||||||
|
CurrentPlan = true,
|
||||||
SubscriptionId = "upload_free",
|
SubscriptionId = "upload_free",
|
||||||
SubscriptionName = "Basic Account",
|
SubscriptionName = "Basic Account",
|
||||||
SubscribeText = "Sign up for free",
|
SubscribeText = "Free",
|
||||||
SubscribeUrl = Url.SubRouteUrl("account", "User.Register"),
|
SubscribeUrlMonthly = Url.SubRouteUrl("account", "User.Register"),
|
||||||
BaseStorage = 5368709120,
|
BaseStorage = 5368709120
|
||||||
MaxStorage = 107374200000
|
|
||||||
});
|
});
|
||||||
subVM.UploadSubscriptions.Add(new SubscriptionViewModel()
|
subVM.UploadSubscriptions.Add(new SubscriptionViewModel()
|
||||||
{
|
{
|
||||||
Primary = true,
|
Recommended = true,
|
||||||
SubscriptionId = "upload_10gb",
|
SubscriptionId = "upload_10gb",
|
||||||
SubscriptionName = "Standalone 10 GB",
|
SubscriptionName = "Standalone 10 GB",
|
||||||
SubscribeText = "Subscribe",
|
SubscribeUrlMonthly = Url.SubRouteUrl("billing", "Billing.Subscribe", new { subscription = "upload_10gb_monthly" }),
|
||||||
SubscribeUrl = Url.SubRouteUrl("billing", "Billing.Subscribe", new { subscription = "upload_10gb" }),
|
SubscribeUrlYearly = Url.SubRouteUrl("billing", "Billing.Subscribe", new { subscription = "upload_10gb_yearly" }),
|
||||||
BaseStorage = 10737418240,
|
BaseStorage = 10737418240,
|
||||||
BasePrice = 0.99,
|
BasePriceMonthly = 0.99,
|
||||||
BaseUnit = "month",
|
BasePriceYearly = 9.99
|
||||||
OverageAllowed = true,
|
|
||||||
OveragePrice = 0.30,
|
|
||||||
OverageUnit = "GB",
|
|
||||||
MaxStorage = 107374200000
|
|
||||||
});
|
});
|
||||||
subVM.UploadSubscriptions.Add(new SubscriptionViewModel()
|
subVM.UploadSubscriptions.Add(new SubscriptionViewModel()
|
||||||
{
|
{
|
||||||
Primary = true,
|
|
||||||
SubscriptionId = "upload_50gb",
|
SubscriptionId = "upload_50gb",
|
||||||
SubscriptionName = "Standalone 50 GB",
|
SubscriptionName = "Standalone 50 GB",
|
||||||
SubscribeText = "Subscribe",
|
SubscribeUrlMonthly = Url.SubRouteUrl("billing", "Billing.Subscribe", new { subscription = "upload_50gb_monthly" }),
|
||||||
SubscribeUrl = Url.SubRouteUrl("billing", "Billing.Subscribe", new { subscription = "upload_50gb" }),
|
SubscribeUrlYearly = Url.SubRouteUrl("billing", "Billing.Subscribe", new { subscription = "upload_50gb_yearly" }),
|
||||||
BaseStorage = 53687091200,
|
BaseStorage = 53687091200,
|
||||||
BasePrice = 3.99,
|
BasePriceMonthly = 3.99,
|
||||||
BaseUnit = "month",
|
BasePriceYearly = 39.99
|
||||||
OverageAllowed = true,
|
|
||||||
OveragePrice = 0.30,
|
|
||||||
OverageUnit = "GB",
|
|
||||||
MaxStorage = 107374200000
|
|
||||||
});
|
});
|
||||||
subVM.UploadSubscriptions.Add(new SubscriptionViewModel()
|
subVM.UploadSubscriptions.Add(new SubscriptionViewModel()
|
||||||
{
|
{
|
||||||
Primary = true,
|
SubscriptionId = "upload_100gb",
|
||||||
SubscriptionId = "upload_usage",
|
SubscriptionName = "Standalone 100 GB",
|
||||||
SubscriptionName = "Pay Per Unit",
|
SubscribeUrlMonthly = Url.SubRouteUrl("billing", "Billing.Subscribe", new { subscription = "upload_100gb_monthly" }),
|
||||||
SubscribeText = "Subscribe",
|
SubscribeUrlYearly = Url.SubRouteUrl("billing", "Billing.Subscribe", new { subscription = "upload_100gb_yearly" }),
|
||||||
SubscribeUrl = Url.SubRouteUrl("billing", "Billing.Subscribe", new { subscription = "upload_usage" }),
|
BaseStorage = 107374200000,
|
||||||
BaseStorage = null,
|
BasePriceMonthly = 5.99,
|
||||||
BasePrice = 0.15,
|
BasePriceYearly = 59.99
|
||||||
BaseUnit = "GB",
|
|
||||||
OverageAllowed = true,
|
|
||||||
OverageUnit = "monthly",
|
|
||||||
MaxStorage = 107374200000
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Get Email Subscriptions
|
// Get Email Subscriptions
|
||||||
subVM.EmailSubscriptions.Add(new SubscriptionViewModel()
|
subVM.EmailSubscriptions.Add(new SubscriptionViewModel()
|
||||||
{
|
{
|
||||||
Primary = true,
|
Recommended = true,
|
||||||
SubscriptionId = "email_1gb_monthly",
|
SubscriptionId = "email_1gb",
|
||||||
SubscriptionName = "Basic Email - Monthly",
|
SubscriptionName = "Basic Email",
|
||||||
SubscribeText = "Subscribe",
|
SubscribeUrlMonthly = Url.SubRouteUrl("billing", "Billing.Subscribe", new { subscription = "email_1gb_monthly" }),
|
||||||
SubscribeUrl = Url.SubRouteUrl("billing", "Billing.Subscribe", new { subscription = "email_1gb_monthly" }),
|
SubscribeUrlYearly = Url.SubRouteUrl("billing", "Billing.Subscribe", new { subscription = "email_1gb_yearly" }),
|
||||||
BaseStorage = 1073741824,
|
BaseStorage = 1073741824,
|
||||||
BasePrice = 1.99,
|
BasePriceMonthly = 1.99,
|
||||||
BaseUnit = "month"
|
BasePriceYearly = 19.99,
|
||||||
|
PanelOffset = "3"
|
||||||
});
|
});
|
||||||
subVM.EmailSubscriptions.Add(new SubscriptionViewModel()
|
subVM.EmailSubscriptions.Add(new SubscriptionViewModel()
|
||||||
{
|
{
|
||||||
Primary = true,
|
SubscriptionId = "email_5gb",
|
||||||
SubscriptionId = "email_1gb_yearly",
|
SubscriptionName = "Premium Email",
|
||||||
SubscriptionName = "Basic Email - Yearly",
|
SubscribeUrlMonthly = Url.SubRouteUrl("billing", "Billing.Subscribe", new { subscription = "email_5gb_monthly" }),
|
||||||
SubscribeText = "Subscribe",
|
SubscribeUrlYearly = Url.SubRouteUrl("billing", "Billing.Subscribe", new { subscription = "email_5gb_yearly" }),
|
||||||
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" }),
|
|
||||||
BaseStorage = 5368709120,
|
BaseStorage = 5368709120,
|
||||||
BasePrice = 3.99,
|
BasePriceMonthly = 3.99,
|
||||||
BaseUnit = "month"
|
BasePriceYearly = 39.99,
|
||||||
});
|
|
||||||
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"
|
|
||||||
});
|
});
|
||||||
|
|
||||||
return View(subVM);
|
return View(subVM);
|
||||||
|
@ -8,22 +8,28 @@ namespace Teknik.Areas.Billing.ViewModels
|
|||||||
{
|
{
|
||||||
public class SubscriptionViewModel : ViewModelBase
|
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 SubscriptionId { get; set; }
|
||||||
public string SubscriptionName { get; set; }
|
public string SubscriptionName { get; set; }
|
||||||
public double? BasePrice { get; set; }
|
public double? BasePriceMonthly { get; set; }
|
||||||
public string BaseUnit { get; set; }
|
public double? BasePriceYearly { get; set; }
|
||||||
public long? BaseStorage { get; set; }
|
public long? BaseStorage { get; set; }
|
||||||
public bool OverageAllowed { 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 string OverageUnit { get; set; }
|
||||||
public long? MaxStorage { 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 SubscribeText { get; set; }
|
||||||
|
|
||||||
|
public string PanelOffset { get; set; }
|
||||||
|
|
||||||
public SubscriptionViewModel()
|
public SubscriptionViewModel()
|
||||||
{
|
{
|
||||||
Primary = false;
|
Recommended = false;
|
||||||
|
CurrentPlan = false;
|
||||||
OverageAllowed = false;
|
OverageAllowed = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -4,43 +4,62 @@
|
|||||||
var extraUsage = "";
|
var extraUsage = "";
|
||||||
if (Model.MaxStorage != null)
|
if (Model.MaxStorage != null)
|
||||||
extraUsage = $"If you need more than {StringHelper.GetBytesReadable(Model.MaxStorage.Value)} of storage, please contact support for assistance.";
|
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 = "";
|
var storageAllowed = "";
|
||||||
if (Model.BaseStorage != null)
|
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">
|
var panelColor = "default";
|
||||||
<div class="panel-heading">
|
var buttonColor = "default";
|
||||||
<h2 class="panel-title">@Model.SubscriptionName</h2>
|
var title = "";
|
||||||
</div>
|
if (Model.Recommended)
|
||||||
<div class="panel-body text-center">
|
{
|
||||||
<h2>@Html.Raw(price)</h2>
|
panelColor = "primary";
|
||||||
<h5>
|
buttonColor = "primary";
|
||||||
<small>@Html.Raw(overage)</small>
|
title = "Recommended";
|
||||||
</h5>
|
}
|
||||||
<p>@Html.Raw(storageAllowed)</p>
|
var offset = "";
|
||||||
<p><a href="@Model.SubscribeUrl" class="btn btn-primary center-block" role="button">@Model.SubscribeText</a></p>
|
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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -8,6 +8,10 @@
|
|||||||
@if (Model.UploadSubscriptions.Any())
|
@if (Model.UploadSubscriptions.Any())
|
||||||
{
|
{
|
||||||
<h2 class="text-center">Upload Storage Subscriptions</h2>
|
<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 />
|
<br />
|
||||||
<div class="row">
|
<div class="row">
|
||||||
@foreach (var subVM in Model.UploadSubscriptions)
|
@foreach (var subVM in Model.UploadSubscriptions)
|
||||||
|
@ -204,6 +204,19 @@ margin: 0 auto;
|
|||||||
margin: 10px;
|
margin: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-no-border {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-text-primary {
|
||||||
|
color: #418bca;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-text-primary:hover {
|
||||||
|
color: #286090;
|
||||||
|
background-color: #418bca17
|
||||||
|
}
|
||||||
|
|
||||||
.btn-file {
|
.btn-file {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -355,6 +368,35 @@ padding-bottom: 24px; }
|
|||||||
color: #FFF;
|
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 {
|
.h1 small {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user