Add Pricing page

5 years ago · eafe2999c6
4 changed files with 209 additions and 0 deletions
--- a/src/EventHub.Web/EventHubWebModule.cs
+++ b/src/EventHub.Web/EventHubWebModule.cs
@ -134,6 +134,7 @@ namespace EventHub.Web
                options.Conventions.AuthorizePage("/Events/Edit");
                options.Conventions.AuthorizePage("/Organizations/New");
                options.Conventions.AuthorizePage("/Organizations/Edit");
+                options.Conventions.AuthorizePage("/Pricing");
            });
        }

--- a/src/EventHub.Web/Pages/Pricing.cshtml
+++ b/src/EventHub.Web/Pages/Pricing.cshtml
@ -0,0 +1,130 @@
+@page
+@using EventHub.Localization
+@using EventHub.Organizations
+@using Microsoft.AspNetCore.Mvc.Localization
+@using Microsoft.Extensions.Options
+@model EventHub.Web.Pages.Pricing
+@inject IOptionsSnapshot<List<OrganizationPlanInfoOptions>> OrganizationPlanInfoOptionsSnapshot
+@inject IHtmlLocalizer<EventHubResource> L
+
+@section styles {
+  <abp-style src="/Pages/Pricing.css" />
+}
+
+<div class="container-fluid flex-grow-1 container-p-y pricing-table">
+  <div class="container px-0">
+
+    <h1 class="text-center font-weight-bolder pt-5 mb-3">
+      Pricing plans
+    </h1>
+    <div class="text-center text-muted text-large font-weight-light">
+      Choose the best plan that fits your needs
+    </div>
+    
+    <div class="row no-gutters row-bordered ui-bordered text-center mt-3">
+
+      <div class="d-flex col-md flex-column py-4">
+        <div class="display-1 text-primary my-4"><i class="lnr lnr-briefcase text-big"></i></div>
+        <h5 class="m-0">Normal</h5>
+        <div class="flex-grow-1">
+          <div class="py-4 my-2">
+            <span class="d-inline-block text-muted text-big align-middle mr-2">$</span>
+            <span class="display-3 d-inline-block font-weight-bold align-middle">0</span>
+            <span class="d-inline-block text-muted text-big align-middle ml-2">/ year</span>
+          </div>
+          <div class="pb-5">
+            <p class="ui-company-text mb-2">1 Organization</p>
+            <p class="ui-company-text mb-2">2 Events</p>
+            <p class="ui-company-text mb-0">No ads</p>
+          </div>
+        </div>
+        <div class="px-md-3 px-lg-5">
+          <a class="btn btn-outline-primary btn-lg rounded-pill">Default</a>
+        </div>
+      </div>
+
+      @*TODO: Multiple plans are not supported at this time.*@
+      @foreach (var plan in OrganizationPlanInfoOptionsSnapshot.Value.Where(x => x.IsActive))
+      {
+        <div class="d-flex col-md flex-column py-4">
+          <div class="display-1 text-primary my-4"><i class="lnr lnr-store text-big"></i></div>
+          <h5 class="m-0">@plan.PlanType</h5>
+          <div class="flex-grow-1">
+            <div class="py-4 my-2">
+              <span class="d-inline-block text-muted text-big align-middle mr-2">$</span>
+              <span class="display-3 d-inline-block font-weight-bold align-middle">@plan.Price</span>
+              <span class="d-inline-block text-muted text-big align-middle ml-2">/ year</span>
+            </div>
+            <div class="pb-5">
+              <p class="ui-company-text mb-2">1 Organization</p>
+              <p class="ui-company-text mb-2">2 Events</p>
+              <p class="ui-company-text mb-0">No ads</p>
+            </div>
+          </div>
+          <div class="px-md-3 px-lg-5">
+            
+            @if (Model.Organization.IsPremium)
+            {
+              <a class="btn btn-success btn-lg rounded-pill">Current Plan</a>
+            }
+            else
+            {
+              <a href="javascript:void(0)" class="btn btn-primary btn-lg rounded-pill">Buy Now</a>
+            }
+          </div>
+        </div>
+      }
+    </div>
+    
+    <h3 class="text-center font-weight-light my-5">Frequently Asked Questions</h3>
+
+    <div class="row">
+      <div class="col-md-6">
+
+        <h5 class="mb-2">Dapibus ac facilisis in?</h5>
+        <p class="ui-company-text text-muted mb-4">
+          Lorem ipsum dolor sit amet, ius virtute suscipit te. Ius prima euismod consequat eu.
+        </p>
+
+        <h5 class="mb-2">Cras justo odio?</h5>
+        <p class="ui-company-text text-muted mb-4">
+          Etiam vivendo eu sea, purto ponderum mediocritatem at pro.
+        </p>
+
+        <h5 class="mb-2">Porta ac consectetur ac?</h5>
+        <p class="ui-company-text text-muted mb-4">
+          Iuvaret deleniti vulputate nec ne, id vix lucilius legendos deseruisse.
+        </p>
+
+        <h5 class="mb-2">Ne ornatus albucius ius?</h5>
+        <p class="ui-company-text text-muted mb-4">
+          Lorem ipsum dolor sit amet, mea in pertinax hendrerit gloriatur.
+        </p>
+
+      </div>
+      <div class="col-md-6">
+
+        <h5 class="mb-2">Ne ornatus albucius ius?</h5>
+        <p class="ui-company-text text-muted mb-4">
+          Lorem ipsum dolor sit amet, mea in pertinax hendrerit gloriatur.
+        </p>
+
+        <h5 class="mb-2">Quo insolens intellegam dissentiet at?</h5>
+        <p class="ui-company-text text-muted mb-4">
+          Ex fugit legimus fuisset per. Ex quidam option diceret ius.
+        </p>
+
+        <h5 class="mb-2">Ad his assum delenit blandit?</h5>
+        <p class="ui-company-text text-muted mb-4">
+          Ne ornatus albucius ius, nostrum dignissim repudiandae an usu.
+        </p>
+
+        <h5 class="mb-2">Dapibus ac facilisis in?</h5>
+        <p class="ui-company-text text-muted mb-4">
+          Lorem ipsum dolor sit amet, ius virtute suscipit te. Ius prima euismod consequat eu.
+        </p>
+
+      </div>
+    </div>
+  </div>
+</div>
--- a/src/EventHub.Web/Pages/Pricing.cshtml.cs
+++ b/src/EventHub.Web/Pages/Pricing.cshtml.cs
@ -0,0 +1,37 @@
+using System.Threading.Tasks;
+using EventHub.Organizations;
+using Microsoft.AspNetCore.Mvc;
+using Volo.Abp.Authorization;
+
+namespace EventHub.Web.Pages
+{
+    public class Pricing : EventHubPageModel
+    {
+        [BindProperty(SupportsGet = true)]
+        public string OrganizationName { get; set; }
+        
+        public OrganizationProfileDto Organization { get; private set; }
+
+        private readonly IOrganizationAppService _organizationAppService;
+
+        public Pricing(IOrganizationAppService organizationAppService)
+        {
+            _organizationAppService = organizationAppService;
+        }
+
+        public async Task OnGetAsync()
+        {
+            Organization = await _organizationAppService.GetProfileAsync(OrganizationName);
+
+            if (CurrentUser.UserName != Organization.OwnerUserName)
+            {
+                throw new AbpAuthorizationException();
+            }
+        }
+
+        public async Task OnPostAsync()
+        {
+            
+        }
+    }
+}
--- a/src/EventHub.Web/Pages/Pricing.css
+++ b/src/EventHub.Web/Pages/Pricing.css
@ -0,0 +1,41 @@
+.pricing-table{
+    margin: 0;
+    font-size: .894rem;
+    font-weight: 400;
+    line-height: 1.47;
+    color: #4E5155;
+    text-align: left;
+}
+
+.display-3 {
+    font-size: 3rem;
+    font-weight: 300;
+    line-height: 1.1;
+}
+
+.font-weight-bold {
+    font-weight: 700 !important;
+}
+
+.row-bordered>.col::after, .row-bordered>[class^="col-"]::after, .row-bordered>[class*=" col-"]::after, .row-bordered>[class^="col "]::after, .row-bordered>[class*=" col "]::after, .row-bordered>[class$=" col"]::after, .row-bordered>[class="col"]::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: -1px;
+    display: block;
+    width: 0;
+    border-left: 1px solid rgba(24,28,33,0.06);
+}
+
+ .ui-bordered {
+    border: 1px solid rgba(24,28,33,0.06);
+}
+
+.row-bordered {
+    overflow: hidden;
+}
+
+html:not([dir=rtl]) .mb-4, html:not([dir=rtl]) .my-4 {
+    margin-bottom: 1.5rem !important;
+}