From dda407743c81fb70869c35bde05a7a36c043cfdc Mon Sep 17 00:00:00 2001 From: Uncled1023 Date: Thu, 12 Aug 2021 22:58:06 -0700 Subject: [PATCH] Reworked subscription page to be more dynamic and better looking --- .../Billing/Controllers/BillingController.cs | 103 ++++++------------ .../ViewModels/SubscriptionViewModel.cs | 18 ++- .../Billing/Views/Billing/Subscription.cshtml | 79 +++++++++----- .../Views/Billing/Subscriptions.cshtml | 4 + Teknik/Content/common.css | 42 +++++++ 5 files changed, 141 insertions(+), 105 deletions(-) diff --git a/Teknik/Areas/Billing/Controllers/BillingController.cs b/Teknik/Areas/Billing/Controllers/BillingController.cs index 5cceb53..6a31f43 100644 --- a/Teknik/Areas/Billing/Controllers/BillingController.cs +++ b/Teknik/Areas/Billing/Controllers/BillingController.cs @@ -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); diff --git a/Teknik/Areas/Billing/ViewModels/SubscriptionViewModel.cs b/Teknik/Areas/Billing/ViewModels/SubscriptionViewModel.cs index a32550c..9140a9b 100644 --- a/Teknik/Areas/Billing/ViewModels/SubscriptionViewModel.cs +++ b/Teknik/Areas/Billing/ViewModels/SubscriptionViewModel.cs @@ -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; } } diff --git a/Teknik/Areas/Billing/Views/Billing/Subscription.cshtml b/Teknik/Areas/Billing/Views/Billing/Subscription.cshtml index fc829e2..8ae4a4d 100644 --- a/Teknik/Areas/Billing/Views/Billing/Subscription.cshtml +++ b/Teknik/Areas/Billing/Views/Billing/Subscription.cshtml @@ -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} / {Model.BaseUnit}" : "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 += $" (Up to {StringHelper.GetBytesReadable(Model.MaxStorage.Value)})*"; - } - } var storageAllowed = ""; if (Model.BaseStorage != null) { - storageAllowed = $"{StringHelper.GetBytesReadable(Model.BaseStorage.Value)} 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 = $"Up to {StringHelper.GetBytesReadable(Model.MaxStorage.Value)}* Storage"; + btnClass = "disabled"; + subscribeText = "Current plan"; } -
-
-
-

@Model.SubscriptionName

-
-
-

@Html.Raw(price)

-
- @Html.Raw(overage) -
-

@Html.Raw(storageAllowed)

-

@Model.SubscribeText

+ + 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}"; +
+
+
+

@title

+

@Html.Raw(storageAllowed)

+ @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 += $" (Up to {StringHelper.GetBytesReadable(Model.MaxStorage.Value)})*"; + } +
+ @Html.Raw(overage) +
+ } +

@Model.SubscribeText

+

@subscribeText

+ @if (Model.BasePriceYearly != null) + { + var discount = 1 - (Model.BasePriceYearly.Value / (Model.BasePriceMonthly.Value * 12)); +

+ Or prepay annually
+ (save @Math.Round(100 * discount)%): +

+

@($"${Model.BasePriceYearly:0.00}") / year

+ }
diff --git a/Teknik/Areas/Billing/Views/Billing/Subscriptions.cshtml b/Teknik/Areas/Billing/Views/Billing/Subscriptions.cshtml index 6cb3aac..0e2d039 100644 --- a/Teknik/Areas/Billing/Views/Billing/Subscriptions.cshtml +++ b/Teknik/Areas/Billing/Views/Billing/Subscriptions.cshtml @@ -8,6 +8,10 @@ @if (Model.UploadSubscriptions.Any()) {

Upload Storage Subscriptions

+

+ By subscribing to a Teknik Service plan, you agree to the Teknik Terms of Service.
+ Note: The Teknik Privacy Policy describes how data is handled in this service. +


@foreach (var subVM in Model.UploadSubscriptions) diff --git a/Teknik/Content/common.css b/Teknik/Content/common.css index 9e63cd2..e51ad3d 100644 --- a/Teknik/Content/common.css +++ b/Teknik/Content/common.css @@ -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; }