Updated new-groups / group-plans static page #8674 (#8729)

* dummy

* Renamed internationalized strings to more meaningful names

* moved the new group creation state out to its own URL, so it can also be linked to by the static/plans page

* Added redirect-through-login functionality from the static/plans page new-group button
This includes a static non-modal login page (similar to how other sites have both a login page and login modal)
The login body has been abstracted out from its modal-specific view into mixins to accomplish this

* deleted bak files added by mistake

* deleted scripts added by mistake

* changed static/plans Create Group button text

* Added form link (https://github.com/HabitRPG/habitica/issues/8674#issuecomment-303518039)
Removed changes to non-EN locale files (https://github.com/HabitRPG/habitica/pull/8729#issuecomment-303555211)

* reverted key name changes as per https://github.com/HabitRPG/habitica/pull/8729#issuecomment-304515534

* changed $rootScope to $scope
https://github.com/HabitRPG/habitica/pull/8729#discussion_r120695874

website/client-old/js/app.js

@@ -146,6 +146,13 @@ window.habitrpg = angular.module('habitrpg',
           title: env.t('groupPlansTitle')
         })
 
+        .state('options.social.newGroup', {
+          url: '/new-group',
+          templateUrl: "partials/options.social.newGroup.html",
+          controller: 'NewGroupCtrl',
+          title: env.t('newGroupTitle')
+        })
+
         .state('options.social.guilds', {
           url: '/guilds',
           templateUrl: "partials/options.social.guilds.html",

website/client-old/js/controllers/groupPlansCtrl.js

@@ -9,35 +9,11 @@ angular.module('habitrpg')
     function($scope, $window, Groups, Payments) {
       $scope.PAGES = {
         BENEFITS: 'benefits',
-        CREATE_GROUP: 'create-group',
-        UPGRADE_GROUP: 'upgrade-group',
       };
       $scope.activePage = $scope.PAGES.BENEFITS;
-      $scope.newGroup = {
-        type: 'guild',
-        privacy: 'private',
-      };
-      $scope.PAYMENTS = {
-        AMAZON: 'amazon',
-        STRIPE: 'stripe',
-      };
 
       $scope.changePage = function (page) {
         $scope.activePage = page;
         $window.scrollTo(0, 0);
       };
-
-      $scope.newGroupIsReady = function () {
-        return !!$scope.newGroup.name;
-      };
-
-      $scope.createGroup = function () {
-        $scope.changePage($scope.PAGES.UPGRADE_GROUP);
-      };
-
-      $scope.upgradeGroup = function (paymentType) {
-        var subscriptionKey = 'group_monthly'; // @TODO: Get from content API?
-        if (paymentType === $scope.PAYMENTS.STRIPE) Payments.showStripe({subscription: subscriptionKey, coupon: null, groupToCreate: $scope.newGroup});
-        if (paymentType === $scope.PAYMENTS.AMAZON) Payments.amazonPayments.init({type: 'subscription', subscription: subscriptionKey, coupon: null, groupToCreate: $scope.newGroup});
-      };
     }]);

website/client-old/js/controllers/newGroupCtrl.js

@@ -0,0 +1,53 @@
+"use strict";
+
+/*
+ A controller to manage the New Group page
+ */
+
+angular.module('habitrpg')
+  .controller("NewGroupCtrl", ['$scope', '$window', 'Groups', 'Payments',
+    function ($scope, $window, Groups, Payments) {
+      $scope.PAGES = {
+        CREATE_GROUP: 'create-group',
+        UPGRADE_GROUP: 'upgrade-group',
+      };
+      $scope.activePage = $scope.PAGES.CREATE_GROUP;
+      $scope.changePage = function (page) {
+        $scope.activePage = page;
+        $window.scrollTo(0, 0);
+      };
+
+      $scope.newGroup = {
+        type: 'guild',
+        privacy: 'private',
+      };
+      $scope.PAYMENTS = {
+        AMAZON: 'amazon',
+        STRIPE: 'stripe',
+      };
+
+      $scope.newGroupIsReady = function () {
+        return !!$scope.newGroup.name;
+      };
+
+      $scope.createGroup = function () {
+        $scope.changePage($scope.PAGES.UPGRADE_GROUP);
+      };
+
+      $scope.upgradeGroup = function (paymentType) {
+        var subscriptionKey = 'group_monthly'; // @TODO: Get from content API?
+        if (paymentType === $scope.PAYMENTS.STRIPE) Payments.showStripe({
+          subscription: subscriptionKey,
+          coupon: null,
+          groupToCreate: $scope.newGroup
+        });
+        if (paymentType === $scope.PAYMENTS.AMAZON) Payments.amazonPayments.init({
+          type: 'subscription',
+          subscription: subscriptionKey,
+          coupon: null,
+          groupToCreate: $scope.newGroup
+        });
+      };
+    }]);
+
+

website/client-old/js/static.js

@@ -26,11 +26,20 @@ window.habitrpg = angular.module('habitrpg', ['chieffancypants.loadingBar', 'ui.
     $http.defaults.headers.common['x-client'] = 'habitica-web';
   }])
 
-.controller("PlansCtrl", ['$rootScope','Analytics',
+.controller("PlansCtrl", ['$rootScope','Analytics','$location','User','$scope',
-  function($rootScope,Analytics) {
+  function($rootScope,Analytics,$location,User,$scope) {
     $rootScope.clickContact = function(){
       Analytics.track({'hitType':'event','eventCategory':'button','eventAction':'click','eventLabel':'Contact Us (Plans)'})
-    }
+    };
+    $scope.goToNewGroupPage = function () {
+      if (User.authenticated()) {
+        window.location.href="/#/options/groups/new-group";
+      } else {
+        // There is no authenticated user, so redirect to the login page,
+        // taking the hash with it to effectively redirect after login.
+        window.location.href = "/static/login#/options/groups/new-group";
+      }
+    };
   }
 ])
 

website/client-old/manifest.json

@@ -111,6 +111,7 @@
             "js/controllers/tasksCtrl.js",
             "js/controllers/userCtrl.js",
             "js/controllers/groupPlansCtrl.js",
+            "js/controllers/newGroupCtrl.js",
 
             "js/components/groupTasks/groupTasksController.js",
             "js/components/groupTasks/groupTasksDirective.js",

website/common/locales/en/generic.json

@@ -54,6 +54,7 @@
     "user": "User",
     "market": "Market",
     "groupPlansTitle": "Group Plans",
+    "newGroupTitle": "New Group",
     "subscriberItem": "Mystery Item",
     "newSubscriberItem": "New Mystery Item",
     "subscriberItemText": "Each month, subscribers will receive a mystery item. This is usually released about one week before the end of the month. See the wiki's 'Mystery Item' page for more information.",

website/common/locales/en/groups.json

@@ -251,7 +251,18 @@
   "groupBenefitSevenTitle": "Get a brand-new exclusive Jackalope Mount",
   "groupBenefitEightTitle": "Add Group Managers to help manage tasks",
   "groupBenefitEightDescription": "Want to share your group's responsibilities? Promote people to Group Managers to help the Leader add, assign, and approve tasks!",
+  "groupBenefitMessageLimitTitle": "Increase message limit",
+  "groupBenefitMessageLimitDescription": "Your message limit is doubled to house up to 400 messages at a time!",
+  "teamBasedTasks": "Team-based Tasks",
+  "specializedCommunication": "Specialized Communication",
+  "funExtras": "Fun Extras",
+  "enterprisePlansButton": "Ask about Enterprise Plans",
+  "enterprisePlansDescription": "Looking for a larger install with custom needs? See if our enterprise plans are right for you.",
+  "enterprisePlansEmailSubject": "Question regarding Enterprise Plans",
+  "familyPlansButton": "Sign Up for Family Plan Mailing List",
+  "familyPlansDescription": "Want a cozier solution to manage your household? Family Plans are coming soon!",
   "createAGroup": "Create a Group",
+  "getAGroupPlanToday": "Get a Group Plan Today",
   "assignFieldPlaceholder": "Type a group member's profile name",
   "cannotDeleteActiveGroup": "You cannot remove a group with an active subscription",
   "groupTasksTitle": "Group Tasks List",

website/common/locales/en/subscriber.json

@@ -23,7 +23,7 @@
     "giftSubscriptionText4": "Thanks for supporting Habitica!",
     "monthUSD": "USD / Month",
     "organization": "Organization",
-    "groupPlans": "Corporate Plans",
+    "groupPlans": "Group Plans",
     "indivPlan1": "For individuals, Habitica is free to play. Even for small interest groups, free (or cheap)",
     "indivPlan2": "can be used to motivate participants in behavioral modification. Think writing groups, art challenges, and more.",
     "groupText1": "But some group leaders will want more control, privacy, security, and support. Examples of such groups are families, health and wellness groups, employee groups, and more. These plans provide private instances of Habitica for your group or organization, secure and independent of",

website/server/controllers/top-level/pages.js

@@ -28,7 +28,7 @@ api.getFrontPage = {
   },
 };
 
-let staticPages = ['front', 'privacy', 'terms', 'features',
+let staticPages = ['front', 'privacy', 'terms', 'features', 'login',
                    'videos', 'contact', 'plans', 'new-stuff', 'community-guidelines',
                    'old-news', 'press-kit', 'faq', 'overview', 'apps',
                    'clear-browser-data', 'merch', 'maintenance-info'];

website/views/options/social/group.jade

@@ -1,5 +1,4 @@
 include ./groups/group-subscription
-include ./groups/group-plans-benefits
 
 a.pull-right.gem-wallet(ng-if='group.type!="party"', popover-trigger='mouseenter', popover-title=env.t('guildBankPop1'), popover=env.t('guildBankPop2'), popover-placement='left')
   // <span class="task-action-btn tile flush bright add-gems-btn">＋</span>

website/views/options/social/groups/group-plans.jade

@@ -1,45 +1,16 @@
-include ./create-group
 
 script(type='text/ng-template', id='partials/options.social.groupPlans.html')
   div(ng-show='activePage === PAGES.BENEFITS')
     +groupPlansBenefits
-    
+
     br
     br
     .row
       .col-sm-6.col-sm-offset-3
-        a.btn.btn-primary.btn-lg.btn-block(ng-click="changePage(PAGES.CREATE_GROUP)")=env.t('createAGroup')
+        a.btn.btn-primary.btn-lg.btn-block(ui-sref="options.social.newGroup")=env.t('createAGroup')
 
     .row
       .col-md-6.col-md-offset-3
         br
         .text-center=env.t('groupSubscriptionPrice')
 
-  div(ng-show='activePage === PAGES.CREATE_GROUP')
-    h2.text-center=env.t('createAGroup')
-    
-    .col-xs-12
-      +groupCreateForm
-    
-    br
-    br
-    .row
-      .col-sm-6.col-sm-offset-3
-        a.btn.btn-primary.btn-lg.btn-block(ng-click="createGroup()", ng-disabled="!newGroupIsReady()")=env.t('create')
-
-  div(ng-show='activePage === PAGES.UPGRADE_GROUP')
-    h2.text-center=env.t('upgradeTitle')
-    
-    .row.text-center
-      .col-md-6.col-md-offset-3
-        a.purchase.btn.btn-primary(ng-click='upgradeGroup(PAYMENTS.STRIPE)')=env.t('card')
-        a.purchase(ng-click='upgradeGroup(PAYMENTS.AMAZON)')
-          img(src='https://payments.amazon.com/gp/cba/button', alt=env.t('amazonPayments'))
-     //-  .col-xs-4
-     //-    a.purchase(href='/paypal/subscribe?_id={{user._id}}&apiToken={{User.settings.auth.apiToken}}&sub={{_subscription.key}}{{_subscription.coupon ? "&coupon="+_subscription.coupon : ""}}&groupId={{group.id}}', ng-disabled='!_subscription.key')
-     //-      img(src='https://www.paypalobjects.com/webstatic/en_US/i/buttons/pp-acceptance-small.png',alt=env.t('paypal'))
-
-    .row
-      .col-md-6.col-md-offset-3
-        br
-        .text-center=env.t('groupSubscriptionPrice')

website/views/options/social/groups/new-group.jade

@@ -0,0 +1,31 @@
+include ./create-group
+
+script(type='text/ng-template', id='partials/options.social.newGroup.html')
+  div(ng-show='activePage === PAGES.CREATE_GROUP')
+    h2.text-center=env.t('createAGroup')
+
+    .col-xs-12
+      +groupCreateForm
+
+    br
+    br
+    .row
+      .col-sm-6.col-sm-offset-3
+        a.btn.btn-primary.btn-lg.btn-block(ng-click="createGroup()", ng-disabled="!newGroupIsReady()")=env.t('create')
+
+  div(ng-show='activePage === PAGES.UPGRADE_GROUP')
+    h2.text-center=env.t('upgradeTitle')
+
+    .row.text-center
+      .col-md-6.col-md-offset-3
+        a.purchase.btn.btn-primary(ng-click='upgradeGroup(PAYMENTS.STRIPE)')=env.t('card')
+        a.purchase(ng-click='upgradeGroup(PAYMENTS.AMAZON)')
+          img(src='https://payments.amazon.com/gp/cba/button', alt=env.t('amazonPayments'))
+     //-  .col-xs-4
+     //-    a.purchase(href='/paypal/subscribe?_id={{user._id}}&apiToken={{User.settings.auth.apiToken}}&sub={{_subscription.key}}{{_subscription.coupon ? "&coupon="+_subscription.coupon : ""}}&groupId={{group.id}}', ng-disabled='!_subscription.key')
+     //-      img(src='https://www.paypalobjects.com/webstatic/en_US/i/buttons/pp-acceptance-small.png',alt=env.t('paypal'))
+
+    .row
+      .col-md-6.col-md-offset-3
+        br
+        .text-center=env.t('groupSubscriptionPrice')

website/views/options/social/index.jade

@@ -9,6 +9,7 @@ include ./party
 include ./groups/group-tasks
 include ./groups/group-plans
 include ./groups/create-group
+include ./groups/new-group
 
 script(type='text/ng-template', id='partials/options.social.inbox.html')
   .options-blurbmenu

website/views/shared/group-plans-benefits.jade

@@ -1,45 +1,64 @@
 mixin groupPlansBenefits()
   h2.text-center=env.t('groupBenefitsTitle')
   .row(style="font-size: 2rem;")
-    .col-md-6.col-md-offset-3=env.t('groupBenefitsDescription')
+    .col-md-6.col-md-offset-3.text-center=env.t('groupBenefitsDescription')
-  .row
+  .row.row-margin
-    .col-md-5.col-md-offset-4
+    .col-md-4
+      h2=env.t('teamBasedTasks')
       div
+        // shared tasks
         h3
           span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
           =env.t('groupBenefitOneTitle')
         span=env.t('groupBenefitOneDescription')
       div
+        // assign tasks
         h3
           span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
           =env.t('groupBenefitTwoTitle')
         span=env.t('groupBenefitTwoDescription')
       div
+        // claim tasks
         h3
           span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
           =env.t('groupBenefitThreeTitle')
         span=env.t('groupBenefitThreeDescription')
       div
+        // mark tasks
         h3
           span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
           =env.t('groupBenefitFourTitle')
         span=env.t('groupBenefitFourDescription')
       div
+        // group managers
         h3
           span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
           =env.t('groupBenefitEightTitle')
         span=env.t('groupBenefitEightDescription')
+
+    .col-md-4
+      h2=env.t('specializedCommunication')
       div
+        // chat privately
         h3
           span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
           =env.t('groupBenefitFiveTitle')
         span=env.t('groupBenefitFiveDescription')
       div
+        h3
+          span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
+          =env.t('groupBenefitMessageLimitTitle')
+        span=env.t('groupBenefitMessageLimitDescription')
+    .col-md-4
+      h2=env.t('funExtras')
+      div
+        // free subscription
         h3
           span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
           =env.t('groupBenefitSixTitle')
         span=env.t('groupBenefitSixDescription')
       div
+        // exclusive mount
         h3
           span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
           =env.t('groupBenefitSevenTitle')

website/views/shared/mixins.jade

@@ -1,3 +1,5 @@
+include ./group-plans-benefits
+
 mixin gemButton(isGemsModal)
   a.pull-right.gem-wallet(ng-click=( isGemsModal ? '' : 'openModal("buyGems",{track:"Gems > Wallet"})'), popover-trigger='mouseenter', popover-title=env.t('gemsPopoverTitle'), popover=env.t('gemsWhatFor'), popover-placement='bottom')
     if !isGemsModal

website/views/static/login-mixins.jade

@@ -0,0 +1,61 @@
+mixin registrationForm
+  form#registrationForm(ng-submit='register()', name='registrationForm')
+    .form-group
+      input.form-control(type='text', ng-model='registerVals.username', placeholder=env.t('username'), spellcheck='false', required)
+    .form-group
+      input.form-control(type='email', ng-model='registerVals.email', placeholder=env.t('email'), required)
+    .form-group
+      input.form-control(type='password', ng-model='registerVals.password', placeholder=env.t('password'), required)
+    .form-group
+      input.form-control(type='password', ng-model='registerVals.confirmPassword', placeholder=env.t('passConfirm'), required)
+    .form-group
+      small
+        =env.t('accept1Terms')
+        | 
+        a(href='/static/terms' target='_blank')=env.t('terms')
+        | 
+        =env.t('accept2Terms')
+        | 
+        a(href='/static/privacy' target='_blank')=env.t('privacy')
+        | .
+    .form-group
+      input.btn.btn-block.btn-lg.btn-success(type='submit', ng-disabled='registrationForm.$invalid || registrationInProgress', value=env.t('getStartedNow'))
+
+
+mixin loginBody
+  ul.list-inline
+    li
+      a.zocial.facebook(alt=env.t('loginFacebookAlt'), ng-click='socialLogin("facebook")')=env.t('loginFacebookAlt')
+    li
+      a.zocial.google(alt="Google", ng-click='socialLogin("google")')=env.t('loginGoogleAlt')
+  hr
+  tabset(justified='true')
+    tab(heading=env.t('login'))
+      form#loginForm(ng-submit='auth()', method='POST', name='loginForm')
+        .form-group
+          input.form-control(type='text', ng-model='loginUsername', placeholder=env.t('usernameOrEmail'), name='username', spellcheck='false', required)
+        .form-group
+          input.form-control(type='password', ng-model='loginPassword', placeholder=env.t('password'), name='password', required)
+        .form-group
+          input.btn.btn-block.btn-lg.btn-primary(type='submit', ng-disabled='loginForm.$invalid', value=env.t('login'))
+
+        small=env.t('passMan')
+        br
+        br
+
+      .panel-group#forgot-password
+        .panel.panel-default
+          .panel-heading
+            h3.panel-title
+              a(data-toggle="collapse" data-parent="#forgot-password" href="#forgot-password-panel")=env.t('forgotPass')
+
+          .panel-body.collapse#forgot-password-panel
+            form(name='passwordResetForm', ng-submit='passwordReset(passwordResetEmail)', novalidate)
+              h3=env.t('emailNewPass')
+              .form-group
+                input.form-control(type='email', name='email', placeholder=env.t('email') , ng-model='passwordResetEmail')
+              .form-group
+                input.btn.btn-default(type='submit', value=env.t('submit'))
+
+    tab(heading=env.t('register'))
+      +registrationForm

website/views/static/login-modal.jade

@@ -1,68 +1,8 @@
-mixin registrationForm
+include ./login-mixins
-  form#registrationForm(ng-submit='register()', name='registrationForm')
-    .form-group
-      input.form-control(type='text', ng-model='registerVals.username', placeholder=env.t('username'), spellcheck='false', required)
-    .form-group
-      input.form-control(type='email', ng-model='registerVals.email', placeholder=env.t('email'), required)
-    .form-group
-      input.form-control(type='password', ng-model='registerVals.password', placeholder=env.t('password'), required)
-    .form-group
-      input.form-control(type='password', ng-model='registerVals.confirmPassword', placeholder=env.t('passConfirm'), required)
-    .form-group
-      small
-        =env.t('accept1Terms')
-        | 
-        a(href='/static/terms' target='_blank')=env.t('terms')
-        | 
-        =env.t('accept2Terms')
-        | 
-        a(href='/static/privacy' target='_blank')=env.t('privacy')
-        | .
-    .form-group
-      input.btn.btn-block.btn-lg.btn-success(type='submit', ng-disabled='registrationForm.$invalid || registrationInProgress', value=env.t('getStartedNow'))
 
 script(id='modals/login.html', type='text/ng-template')
   .modal-header
     button.close(type='button', ng-click='$close()') ×
     h4.modal-title=env.t('loginAndReg')
   .modal-body(ng-controller='AuthCtrl')
-    ul.list-inline
+    +loginBody
-      li
-        a.zocial.facebook(alt=env.t('loginFacebookAlt'), ng-click='socialLogin("facebook")')=env.t('loginFacebookAlt')
-      li
-        a.zocial.google(alt="Google", ng-click='socialLogin("google")')=env.t('loginGoogleAlt')
-    hr
-    tabset(justified='true')
-      tab(heading=env.t('login'))
-        form#loginForm(ng-submit='auth()', method='POST', name='loginForm')
-          .form-group
-            input.form-control(type='text', ng-model='loginUsername', placeholder=env.t('usernameOrEmail'), name='username', spellcheck='false', required)
-          .form-group
-            input.form-control(type='password', ng-model='loginPassword', placeholder=env.t('password'), name='password', required)
-          .form-group
-            input.btn.btn-block.btn-lg.btn-primary(type='submit', ng-disabled='loginForm.$invalid', value=env.t('login'))
-
-          small=env.t('passMan')
-          br
-          br
-
-        // good god accordions have html ceremony
-        .panel-group#forgot-password
-          .panel.panel-default
-            .panel-heading
-              h3.panel-title
-                a(data-toggle="collapse" data-parent="#forgot-password" href="#forgot-password-panel")=env.t('forgotPass')
-
-            .panel-body.collapse#forgot-password-panel
-              form(name='passwordResetForm', ng-submit='passwordReset(passwordResetEmail)', novalidate)
-                //.alert.alert-success {.success.passwordReset}
-                //.control-group.{#if..errors.passwordReset}error{/}
-                h3=env.t('emailNewPass')
-                .form-group
-                  input.form-control(type='email', name='email', placeholder=env.t('email') , ng-model='passwordResetEmail')
-                  //span.help-inline {.errors.passwordReset}
-                .form-group
-                  input.btn.btn-default(type='submit', value=env.t('submit'))
-
-      tab(heading=env.t('register'))
-        +registrationForm

website/views/static/login.jade

@@ -0,0 +1,17 @@
+include ./login-mixins
+
+extends ./layout
+
+block vars
+  - var layoutEnv = env
+
+block title
+  title=env.t('loginAndReg')
+
+block content
+  .row
+    .col-sm-6.col-sm-offset-3
+      .header
+        h4=env.t('loginAndReg')
+      .body(ng-controller='AuthCtrl')
+        +loginBody

website/views/static/plans.jade

@@ -8,96 +8,31 @@ block title
   title=env.t('groupPlans')
 
 block content
-  .row(ng-controller='PlansCtrl')
+  div(ng-controller='PlansCtrl')
-    .col-md-12
+    +groupPlansBenefits
-      h2=env.t('groupPlans')
 
-      p
+    br
-        =env.t('indivPlan1')
+    br
-        | 
+    .row
-        !=env.t('guildsLink')
+      .col-sm-6.col-sm-offset-3
-        = ' ' + env.t('and') + ' '
+        a.btn.btn-primary.btn-lg.btn-block(ng-click="goToNewGroupPage()")=env.t('getAGroupPlanToday')
-        !=env.t('challengesLink')
-        | 
-        =env.t('indivPlan2')
-      p
-        =env.t('groupText1')
-        | 
-        !=env.t('habiticaLink')
-        |. 
-        =env.t('groupText2')
 
-      .subscription-features
+    .row
-        table.table.table-striped
+      .col-md-6.col-md-offset-3
-          thead
+        br
-            tr
+        .text-center=env.t('groupSubscriptionPrice')
-              th.feature-name
+
-              th.feature-name.muted=env.t('planFamily')
+    hr
-              th.feature-name.muted=env.t('planGroup')
+
-              th.feature-name=env.t('organization')
+    .col-md-6.col-md-offset-3.text-center
-          tbody
+      .row.row-margin(style="font-size: 2rem;")
-            tr
+        span=env.t('enterprisePlansDescription')
-              th
+      .row.row-margin
-                span.dashed-underline(popover=env.t('organizationSubText'),popover-trigger='mouseenter',popover-placement='right')=env.t('organizationSub')
+        a.btn.btn-primary.btn-lg.btn-block(href="mailto:vicky@habitica.com?subject="+env.t('enterprisePlansEmailSubject'))=env.t('enterprisePlansButton')
-              td.muted
+
-                span.glyphicon.glyphicon-ok
+      br
-              td.muted
+
-                span.glyphicon.glyphicon-ok
+      .row.row-margin(style="font-size: 2rem;")
-              td
+        span=env.t('familyPlansDescription')
-                span.glyphicon.glyphicon-ok
+      .row.row-margin
-            tr
+        a.btn.btn-primary.btn-lg.btn-block(href="https://docs.google.com/forms/d/e/1FAIpQLSerMKkaCg3UcgpcMvBJtlNgnF9DNY8sxCebpAT-GHeDAQASPQ/viewform?usp=sf_link")=env.t('familyPlansButton')
-              th
-                span.dashed-underline(popover=env.t('dedicatedHostText'),popover-trigger='mouseenter',popover-placement='right')=env.t('dedicatedHost')
-              td
-              td
-              td
-                span.glyphicon.glyphicon-ok
-            tr
-              th
-                span.dashed-underline(popover=env.t('customDomainText'),popover-trigger='mouseenter',popover-placement='right')=env.t('customDomain')
-              td
-              td
-              td
-                span.glyphicon.glyphicon-ok
-            tr
-              th
-                span.dashed-underline(popover=env.t('maxPlayersText'),popover-trigger='mouseenter',popover-placement='right')=env.t('maxPlayers')
-              td.muted 10
-              td.muted 75
-              td=env.t('unlimited')
-            tr
-              th
-                span.dashed-underline(popover=env.t('priSupportText'),popover-trigger='mouseenter',popover-placement='right')=env.t('priSupport')
-              td
-              td
-              td
-                span.glyphicon.glyphicon-ok
-            tr
-              th
-                span.dashed-underline(popover=env.t('timeSupportText'),popover-trigger='mouseenter',popover-placement='right')=env.t('timeSupport')
-              td.muted -
-              td.muted 5
-              td 10
-            tr
-              th
-                h5=env.t('gameFeatures') + ':'
-                ul
-                  li
-                    span.dashed-underline(popover=env.t('gold2GemText'),popover-trigger='mouseenter',popover-placement='right')=env.t('gold2Gem')
-                  li
-                    span.dashed-underline(popover=env.t('infiniteGemText'),popover-trigger='mouseenter',popover-placement='right')=env.t('infiniteGem')
-              td.muted
-                span.glyphicon.glyphicon-ok
-              td.muted
-                span.glyphicon.glyphicon-ok
-              td
-                span.glyphicon.glyphicon-ok
-            tr
-              th
-                //| Price
-              td
-                a.btn.btn-default.muted(ng-click='clickContact()', href='https://docs.google.com/forms/d/17torT7OlxgtbHAPdBDRQNG2lTdIQyrGXk4O2YXvUMig/viewform',popover=env.t('notYetPlan'),popover-placement='right',popover-trigger='mouseenter')=env.t('contactUs')
-              td
-                a.btn.btn-default.muted(ng-click='clickContact()', href='https://docs.google.com/forms/d/17torT7OlxgtbHAPdBDRQNG2lTdIQyrGXk4O2YXvUMig/viewform',popover=env.t('notYetPlan'),popover-placement='right',popover-trigger='mouseenter')=env.t('contactUs')
-              td
-                a.btn.btn-primary(ng-click='clickContact()', href='https://docs.google.com/forms/d/12Jqj_8f3oQS0B3ZUHewHbK61uLjBdzBeB0zyEqB9lxM/viewform')=env.t('contactUs')