Upgrade button in sidebar, cleanup usage page (#4227)

* upgrade button in sidebar, cleanup usage page

* [fix] check if in trial for sidebar

* make upgrade box dismissable

* Update list_sidebar.js

frappe/core/page/usage_info/usage_info.html

@@ -1,114 +1,75 @@
-<div class="padding" style="max-width: 800px;">
+<div>
 	{% if limits.expiry %}
-		<h3>{{ __("Expires in {0} days", [days_to_expiry]) }}</h3>
-		{{ __("Renew before: {0}", [expires_on]) }}
-		<br><br>
+	<div class="upgrade-message padding" style="border-bottom: 1px solid #d0d8dc;">
+		<h4>{{ __("You have {0} days left in your trial", [days_to_expiry]) }}</h4>
+
+		{% if limits.upgrade_url %}
+		<p>Upgrade to a premium plan with more users, storage and priority support.</p>
+		<button class="btn btn-primary btn-sm primary-action">Upgrade</button>
+		{% endif %}
+	</div>
 	{% endif %}
 
 	{% if limits.users %}
 	    {% var users_percent = ((enabled_users / limits.users) * 100); %}
-	    <h3>{{ __("Users") }}</h3>
+	<div class="usage-info-section" style="margin: 30px;">
+		<h4>{{ __("Users") }}</h4>
 
-	    <div class="progress">
-	        <div class="progress-bar progress-bar-{%= (users_percent < 75 ? "success" : "warning") %}" style="width: {{ users_percent }}%">
-	        </div>
-	    </div>
+		<div class="progress" style="margin-bottom: 0;">
+			<div class="progress-bar progress-bar-{%= (users_percent < 75 ? "success" : "warning") %}" style="width: {{ users_percent }}%">
+			</div>
+		</div>
 
-	    <table class="table table-bordered">
-	        <thead>
-	            <tr>
-	                <th style="width: 33%">{{ __("Current Users") }}</th>
-	                <th style="width: 33%">{{ __("Max Users") }}</th>
-	                <th style="width: 33%">{{ __("Remaining") }}</th>
-	            </tr>
-	        </thead>
-	        <tbody>
-	            <tr>
-	                <td>{%= enabled_users %}</td>
-	                <td>{%= limits.users %}</td>
-	                <td class="{%= users_percent < 75 ? "" : "text-warning" %}">{%= limits.users - enabled_users %}</td>
-	            </tr>
-	        </tbody>
-	    </table>
-	    <br>
+		<p>{%= enabled_users %} out of {%= limits.users %} enabled</p>
+	</div>
 	{% endif %}
 
 	{% if limits.emails %}
-	    <h3>{{ __("Emails sent this month") }}</h3>
+	<div class="usage-info-section" style="margin: 30px;">
+	    <h4>{{ __("Emails") }}</h4>
 
 	    {% var email_percent = (( emails_sent / limits.emails ) * 100); %}
 	    {% var emails_remaining = (limits.emails - emails_sent) %}
 
-	    <div class="progress">
+	    <div class="progress" style="margin-bottom: 0;">
 	        <div class="progress-bar progress-bar-{%= (email_percent < 75 ? "success" : "warning") %}" style="width: {{ email_percent }}%">
 	        </div>
 	    </div>
 
-	    <table class="table table-bordered">
-	        <thead>
-	            <tr>
-	                <th style="width: 33%">{{ __("Emails Sent") }}</th>
-	                <th style="width: 33%">{{ __("Max Emails") }}</th>
-	                <th style="width: 33%">{{ __("Remaining") }}</th>
-	            </tr>
-	        </thead>
-	        <tbody>
-	            <tr>
-	                <td>{%= emails_sent %}</td>
-	                <td>{%= limits.emails %}</td>
-	                <td class="{%= (email_percent < 75) ? "" : "text-warning" %}">{%= emails_remaining %}</td>
-	            </tr>
-	        </tbody>
-	    </table>
-	    <br>
+		<p>{%= emails_sent %} out of {%= limits.emails %} sent this month</p>
+	</div>
 	{% endif %}
 
 	{% if limits.space %}
-	    <h3>{{ __("Space usage") }}</h3>
+	<div class="usage-info-section" style="margin: 30px;">
+	    <h4>{{ __("Space") }}</h4>
 
 	    {% var database_percent = ((limits.space_usage.database_size / limits.space) * 100); %}
 	    {% var files_percent = ((limits.space_usage.files_size / limits.space) * 100); %}
 	    {% var backup_percent = ((limits.space_usage.backup_size / limits.space) * 100); %}
 
-	    <div class="progress">
-	        <div class="progress-bar progress-bar-success" style="width: {%= database_percent %}%">
-	        </div>
-	        <div class="progress-bar progress-bar-info" style="width: {%= files_percent %}%">
-	        </div>
-	        <div class="progress-bar progress-bar-warning" style="width: {%= backup_percent %}%">
-	        </div>
+	    <div class="progress" style="margin-bottom: 0;">
+	        <div class="progress-bar" style="width: {%= database_percent %}%; background-color: #5e64ff"></div>
+	        <div class="progress-bar" style="width: {%= files_percent %}%; background-color: #743ee2"></div>
+	        <div class="progress-bar" style="width: {%= backup_percent %}%; background-color: #7CD6FD"></div>
 	    </div>
 
-	    <table class="table table-bordered">
-	        <thead>
-	            <tr>
-	                <th style="width: 50%">{{ __("Type") }} </th>
-	                <th style="width: 50%">{{ __("Size (MB)") }}</th>
-	            </tr>
-	        </thead>
-	        <tbody>
-	            <tr>
-	                <td><span class="indicator-right green">{{ __("Database Size") }}</span></td>
-	                <td>{%= limits.space_usage.database_size %} MB</td>
-	            </tr>
-	            <tr>
-	                <td><span class="indicator-right purple">{{ __("Files Size") }}</span></td>
-	                <td>{%= limits.space_usage.files_size %} MB</td>
-	            </tr>
-	            <tr>
-	                <td><span class="indicator-right orange">{{ __("Backup Size") }}</span></td>
-	                <td>{%= limits.space_usage.backup_size %} MB</td>
-	            </tr>
-	            <tr>
-	                <td><b>{{ __("Total") }}</b></td>
-	                <td><b>{%= limits.space_usage.total %} MB</b></td>
-	            </tr>
-	            <tr>
-	                <td><b>{{ __("Remaining") }}</b></td>
-	                <td class="{%= ((limits.space - limits.space_usage.total) > 50) ? "" : "text-warning" %}">
-	                    <b>{%= flt(limits.space - limits.space_usage.total, 2) %} MB</b></td>
-	            </tr>
-	        </tbody>
-	    </table>
+		<span class="indicator blue" style="margin-right: 20px;">
+			{{ __("Database Size:") }} {%= limits.space_usage.files_size %} MB
+		</span>
+		<span class="indicator purple" style="margin-right: 20px;">
+			{{ __("Files Size:") }} {%= limits.space_usage.files_size %} MB
+		</span>
+		<span class="indicator lightblue" style="margin-right: 20px;">
+			{{ __("Backup Size:") }} {%= limits.space_usage.backup_size %} MB
+		</span>
+
+		<p>
+			<span class="{%= ((limits.space - limits.space_usage.total) > 50) ? "" : "text-warning" %}">
+	                    <b>{%= flt(limits.space - limits.space_usage.total, 2) %} MB</b></span>
+			available out of
+			<span><b>{%= limits.space %} MB</b></span>
+		</p>
+	</div>
 	{% endif %}
 </div>

frappe/core/page/usage_info/usage_info.js

@@ -18,12 +18,9 @@ frappe.pages['usage-info'].on_page_load = function(wrapper) {
 			$(frappe.render_template("usage_info", usage_info)).appendTo(page.main);
 
 			var btn_text = usage_info.limits.users == 1 ? __("Upgrade") : __("Renew / Upgrade");
-
-			if(usage_info.upgrade_url) {
-				page.set_primary_action(btn_text, function() {
-					window.open(usage_info.upgrade_url);
-				});
-			}
+			$(page.main).find('.btn-primary').html(btn_text).on('click', () => {
+				window.open(usage_info.upgrade_url);
+			});
 		}
 	});
 

frappe/public/js/frappe/list/list_sidebar.js

@@ -28,6 +28,12 @@ frappe.views.ListSidebar = Class.extend({
 		this.setup_views();
 		this.setup_kanban_boards();
 		this.setup_email_inbox();
+
+		let limits = frappe.boot.limits;
+
+		if(limits.upgrade_url && limits.expiry && !frappe.flags.upgrade_dismissed) {
+			this.setup_upgrade_box();
+		}
 	},
 	setup_views: function() {
 		var show_list_link = false;
@@ -66,7 +72,7 @@ frappe.views.ListSidebar = Class.extend({
 
 		//enable link for Kanban view
 		this.sidebar.find('.list-link[data-view="Kanban"] a, .list-link[data-view="Inbox"] a')
-			.attr('disabled', null).removeClass('disabled')
+			.attr('disabled', null).removeClass('disabled');
 
 		// show image link if image_view
 		if(this.list_view.meta.image_field) {
@@ -97,7 +103,7 @@ frappe.views.ListSidebar = Class.extend({
 						added.push(route);
 
 						if(!divider) {
-							$('<li role="separator" class="divider"></li>').appendTo(dropdown);
+							me.get_divider().appendTo(dropdown);
 							divider = true;
 						}
 
@@ -129,7 +135,7 @@ frappe.views.ListSidebar = Class.extend({
 		boards.forEach(function(board) {
 			var route = ["List", board.reference_doctype, "Kanban", board.name].join('/');
 			if(!divider) {
-				$('<li role="separator" class="divider"></li>').appendTo($dropdown);
+				me.get_divider().appendTo($dropdown);
 				divider = true;
 			}
 			$(`<li><a href="#${route}">
@@ -284,7 +290,7 @@ frappe.views.ListSidebar = Class.extend({
 			var email_account = (account.email_id == "All Accounts")? "All Accounts": account.email_account;
 			var route = ["List", "Communication", "Inbox", email_account].join('/');
 			if(!divider) {
-				$('<li role="separator" class="divider"></li>').appendTo($dropdown);
+				this.get_divider().appendTo($dropdown);
 				divider = true;
 			}
 			$('<li><a href="#'+ route + '">'+account.email_id+'</a></li>').appendTo($dropdown);
@@ -293,7 +299,7 @@ frappe.views.ListSidebar = Class.extend({
 		});
 
 		$dropdown.find('.new-email-account').click(function() {
-			frappe.new_doc("Email Account")
+			frappe.new_doc("Email Account");
 		});
 	},
 	setup_assigned_to_me: function() {
@@ -302,11 +308,32 @@ frappe.views.ListSidebar = Class.extend({
 			me.list_view.assigned_to_me();
 		});
 	},
+	setup_upgrade_box: function() {
+		let upgrade_list = $(`<ul class="list-unstyled sidebar-menu"></ul>`).appendTo(this.sidebar);
+		let upgrade_box = $(`<div class="border" style="
+				padding: 0px 10px;
+				border-radius: 3px;
+			">
+			<a><i class="octicon octicon-x pull-right close" style="margin-top: 10px;"></i></a>
+			<h5>Go Premium</h5>
+			<p>Upgrade to a premium plan with more users, storage and priority support.</p>
+			<button class="btn btn-sm btn-default" style="margin-bottom: 10px;">Upgrade</button>
+		</div>`).appendTo(upgrade_list);
+
+		upgrade_box.find('.btn-primary').on('click', () => {
+			window.open(frappe.boot.limits.upgrade_url);
+		});
+
+		upgrade_box.find('.close').on('click', () => {
+			upgrade_list.remove();
+			frappe.flags.upgrade_dismissed = 1;
+		});
+	},
 	get_cat_tags:function(){
 		return this.cat_tags;
 	},
 	get_stats: function() {
-		var me = this
+		var me = this;
 		frappe.call({
 			method: 'frappe.desk.reportview.get_sidebar_stats',
 			args: {
@@ -421,4 +448,7 @@ frappe.views.ListSidebar = Class.extend({
 		this.sidebar.find(".sidebar-stat").remove();
 		this.get_stats();
 	},
+	get_divider: function() {
+		return $('<li role="separator" class="divider"></li>');
+	}
 });

frappe/public/js/frappe/toolbar.js

@@ -17,15 +17,10 @@ $(document).on("toolbar_setup", function() {
 		}
 	}
 
-	if(limits.support_email || limits.support_chat) {
+	if(limits.support_chat) {
 		help_links.push('<li class="divider"></li>');
 	}
 
-	if(limits.support_email) {
-		var support_link = 'mailto:'+frappe.boot.limits.support_email;
-		help_links.push('<li><a href="'+support_link+'">' + frappe._('Email Support') + '</a></li>');
-	}
-
 	if(limits.support_chat) {
 		help_links.push('<li><a href="'+limits.support_chat+'" target="_blank">' + frappe._('Chat Support') + '</a></li>');
 	}