Reworked subscription page to be more dynamic and better looking

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" }),
-                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);

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

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} <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>

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

@@ -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)

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