OOB: Updated description and screenshots for fax app

app.js

@@ -45,32 +45,120 @@ define(function(require){
 		render: function(container) {
 			var self = this;
 
-			self.listFaxboxes(function(faxboxes) {
-				self.appFlags.faxboxes = _.indexBy(faxboxes, 'id');
+			self.getFaxData(function(results) {
+				self.appFlags.faxboxes = _.indexBy(results.faxboxes, 'id');
+
+				var menus = [
+					{
+						tabs: [
+							{
+								text: self.i18n.active().fax.menuTitles.inbound,
+								callback: self.renderInbound
+							},
+							{
+								text: self.i18n.active().fax.menuTitles.outbound,
+								callback: self.renderOutbound
+							},
+							{
+								text: self.i18n.active().fax.menuTitles.logs,
+								callback: self.renderLogs
+							}
+						]
+					}
+				];
+
+				if (results.storage) {
+					var tabStorage = {
+						text: self.i18n.active().fax.menuTitles.storage,
+						callback: self.renderStorage
+					};
+
+					menus[0].tabs.push(tabStorage);
+				}
 
 				monster.ui.generateAppLayout(self, {
-					menus: [
-						{
-							tabs: [
-								{
-									text: self.i18n.active().fax.menuTitles.inbound,
-									callback: self.renderInbound
-								},
-								{
-									text: self.i18n.active().fax.menuTitles.outbound,
-									callback: self.renderOutbound
-								},
-								{
-									text: self.i18n.active().fax.menuTitles.logs,
-									callback: self.renderLogs
-								}
-							]
-						}
-					]
+					menus: menus
 				});
 			});
 		},
 
+		getFaxData: function(callback) {
+			var self = this;
+
+			monster.parallel({
+				faxboxes: function(callback) {
+					self.listFaxboxes(function(faxboxes) {
+						callback(null, faxboxes);
+					});
+				},
+				storage: function(callback) {
+					self.getStorage(function(storage) {
+						callback(null, storage);
+					});
+				}
+			},
+			function(err, results) {
+				callback && callback(results);
+			});
+		},
+
+		getStorage: function(callback) {
+			var self = this;
+
+			self.callApi({
+				resource: 'storage.get',
+				data: {
+					accountId: self.accountId,
+					generateError: false
+				},
+				success: function(data) {
+					callback(data.data);
+				},
+				error: function(data, error, globalHandler) {
+					if (error.status === 404) {
+						callback(undefined);
+					} else {
+						globalHandler(data);
+					}
+				}
+			});
+		},
+
+		renderStorage: function(pArgs) {
+			var self = this,
+				args = pArgs || {},
+				parent = args.container || $('#fax_app_container .app-content-wrapper');
+
+			self.getStorage(function(storage) {
+				var formattedData = self.storageFormatData(storage),
+					template = $(monster.template(self, 'storage', formattedData));
+
+				self.storageBindEvents(template);
+
+				monster.pub('common.storagePlanManager.render', {
+					container: template.find('.control-container'),
+					forceTypes: ['fax'],
+					hideOtherTypes: true
+				});
+
+				parent
+					.fadeOut(function() {
+						$(this)
+							.empty()
+							.append(template)
+							.fadeIn();
+					});
+			});
+		},
+
+		storageBindEvents: function(template) {
+			var self = this;
+		},
+
+		storageFormatData: function(data) {
+			return data;
+		},
+
 		renderFaxes: function(pArgs) {
 			var self = this,
 				args = pArgs || {},
@@ -392,12 +480,12 @@ define(function(require){
 					fax.formatted.error = details.result_text;
 				}
 
-				fax.formatted.timestamp = monster.util.toFriendlyDate(fax.hasOwnProperty('timestamp') ? fax.timestamp : details.pvt_delivered_date);
+				fax.formatted.timestamp = monster.util.toFriendlyDate(fax.created);
 				fax.formatted.receivingFaxbox = self.appFlags.faxboxes.hasOwnProperty(fax.faxbox_id) ? self.appFlags.faxboxes[fax.faxbox_id].name : '-';
 				fax.formatted.receivingNumber = monster.util.formatPhoneNumber(fax.to_number);
 				fax.formatted.sendingFaxbox = self.appFlags.faxboxes.hasOwnProperty(fax.faxbox_id) ? self.appFlags.faxboxes[fax.faxbox_id].name : '-';
 				fax.formatted.sendingNumber = monster.util.formatPhoneNumber(fax.from_number);
-				fax.formatted.pages = details.hasOwnProperty('total_pages') ? details.total_pages : self.i18n.active().fax.table.noData;
+				fax.formatted.pages = details.hasOwnProperty('total_pages') ? details.total_pages : 0;
 				fax.formatted.uri = self.formatFaxURI(fax.id, type);
 			});
 

i18n/en-US.json

@@ -4,12 +4,13 @@
 		"menuTitles": {
 			"inbound": "Inbound faxes",
 			"outbound": "Outbound faxes",
-			"logs": "Email-to-Fax Logs"
+			"logs": "Email-to-Fax Logs",
+			"storage": "Storage"
 		},
 		"table": {
 			"columns": {
 				"status": "Status",
-				"sent": "Sent",
+				"sent": "Date",
 				"sendingFaxbox": "Sending Faxbox",
 				"sendingNumber": "Sending Number",
 				"received": "Received",

metadata/app.json

@@ -3,9 +3,15 @@
 	"i18n": {
 		"en-US": {
 			"label": "Fax Manager",
-			"description": "The Fax Manager allow you to review inbound and outbound faxes.",
+			"description": "The Fax Manager allows visibility across all inbound, outbound and fax to email transactions. Limited visibility on fax activities, can cause complex issues that make troubleshooting a pain. However, with Fax Manager, users can bulk delete faxes from the database, recover missing logs, download fax conversions and much more. This app acts as a central administration hub for managing and downloading all real-time fax activities.",
 			"extended_description": "",
 			"features": [
+				"Inbound fax control",
+				"Outbound fax visibility",
+				"Fax to email analysis",
+				"Instant download of all fax log activity",
+				"Bulk delete",
+				"Recover missing fax logs"
 			]
 		}
 	},
@@ -19,6 +25,7 @@
 	"license": "-", 
 	"price": 0,
 	"screenshots": [
+		"OutboundFaxes.png"
 	],
 	"urls": {
 		"documentation": "{documentation_url}",

style/app.css

@@ -46,8 +46,6 @@
 
 /* Action Bar */
 .faxes-container .filters.basic-actions {
-	display: inline-block;
-	margin-right: 10px;
 	width: 131px;
 }
 
@@ -55,19 +53,10 @@
 	width: 186px;
 }
 
-.faxes-container:not(.empty) .action-bar {
-	position: absolute;
-	z-index: 2;
-}
-
 .faxes-container .action-bar .actionable {
 	display: none;
 }
 
-.faxes-container .action-bar {
-	margin-bottom: 25px;
-}
-
 .faxes-container .action-bar .filters > :first-child {
 	margin-left: 0;
 }

views/inbound-faxes-list.html

@@ -7,7 +7,7 @@
 				<th>{{ i18n.fax.table.columns.receivingFaxbox }}</th>
 				<th>{{ i18n.fax.table.columns.receivingNumber }}</th>
 				<th>{{ i18n.fax.table.columns.from }}</th>
-				<th data-breakpoints="xs">{{ i18n.fax.table.columns.pages }}</th>
+				<th data-breakpoints="xs" data-type="number">{{ i18n.fax.table.columns.pages }}</th>
 				<th data-filterable="false" data-type="html" data-sortable="false"></th>
 			</tr>
 		</thead>
@@ -20,7 +20,7 @@
 						<input class="select-fax" type="checkbox" data-id="{{id}}"/>
 					{{/monsterCheckbox}}
 				</td>
-				<td data-sort-value="{{timestamp}}">{{formatted.timestamp}}</td>
+				<td data-sort-value="{{formatted.timestamp}}">{{formatted.timestamp}}</td>
 				<td>{{formatted.receivingFaxbox}}</td>
 				<td>{{formatted.receivingNumber}}</td>
 				<td>{{formatted.sendingNumber}}</td>

views/inbound-faxes.html

@@ -1,5 +1,5 @@
-<div class="inbound-faxes faxes-container empty">
-	<div class="action-bar clearfix">
+<div class="inbound-faxes faxes-container empty monster-table-wrapper">
+	<div class="monster-table-header action-bar">
 		<div class="filters basic-actions pull-left">
 			<div class="select-faxbox-wrapper monster-select-dropdown pull-left" data-toggle="tooltip" data-placement="top" data-original-title="{{ i18n.fax.actionBar.tooltips.select }}">
 				<li class="dropdown">

views/outbound-faxes-list.html

@@ -8,7 +8,7 @@
 				<th>{{ i18n.fax.table.columns.sendingFaxbox }}</th>
 				<th>{{ i18n.fax.table.columns.sendingNumber }}</th>
 				<th>{{ i18n.fax.table.columns.receivingNumber }}</th>
-				<th data-breakpoints="xs">{{ i18n.fax.table.columns.pages }}</th>
+				<th data-breakpoints="xs" data-type="number">{{ i18n.fax.table.columns.pages }}</th>
 				<th data-filterable="false" data-type="html" data-sortable="false"></th>
 			</tr>
 		</thead>
@@ -24,7 +24,7 @@
 				<td class="status" data-sort-value="{{status}}" data-filter-value="{{status}}" data-status="{{status}}">
 					<span data-toggle="tooltip" data-placement="top" data-original-title="{{ formatted.error }}">{{status}}</span>
 				</td>
-				<td data-sort-value="{{timestamp}}">{{formatted.timestamp}}</td>
+				<td data-sort-value="{{formatted.timestamp}}">{{formatted.timestamp}}</td>
 				<td>{{formatted.sendingFaxbox}}</td>
 				<td>{{formatted.sendingNumber}}</td>
 				<td>{{formatted.receivingNumber}}</td>

views/outbound-faxes.html

@@ -1,5 +1,5 @@
-<div class="outbound-faxes faxes-container empty">
-	<div class="action-bar clearfix">
+<div class="outbound-faxes faxes-container empty monster-table-wrapper">
+	<div class="monster-table-header action-bar">
 		<div class="filters basic-actions pull-left">
 			<div class="select-faxbox-wrapper monster-select-dropdown pull-left" data-toggle="tooltip" data-placement="top" data-original-title="{{ i18n.fax.actionBar.tooltips.select }}">
 				<li class="dropdown">

views/storage.html

@@ -0,0 +1,3 @@
+<div id="storage_container">
+	<div class="control-container"></div>
+</div>