Website: Change pricing table based on selected use case (#12148)
Closes #11965 Changes: - Updated the pricing table on the pricing page to be rendered by the server. - Updated the pricing page's view action to create another version of the pricing table that does not have the "Device management" category and that has security features sorted to the top of the table. - Moved two features from the "Device management" category to "Security and compliance" in `pricing-features-table.yml`.
This commit is contained in:
Eric
@@ -1,8 +1,5 @@
|
||||
- categoryName: Device management
|
||||
features:
|
||||
- name: Report on disk encryption status (FileVault)
|
||||
tier: Free
|
||||
comingSoon: false
|
||||
- name: User-initiated enrollment of macOS computers
|
||||
tier: Free
|
||||
comingSoon: false
|
||||
@@ -33,9 +30,6 @@
|
||||
- name: Remotely lock and wipe macOS computers
|
||||
tier: Premium
|
||||
comingSoon: false
|
||||
- name: Trigger a workflow based on a failing policy
|
||||
tier: Premium
|
||||
comingSoon: true
|
||||
- name: Update apps on macOS computers
|
||||
tier: Premium
|
||||
comingSoon: true
|
||||
@@ -95,6 +89,9 @@
|
||||
- name: Single sign on (SSO, SAML)
|
||||
tier: Free
|
||||
comingSoon: false
|
||||
- name: Report on disk encryption status (FileVault)
|
||||
tier: Free
|
||||
comingSoon: false
|
||||
- name: Audit queries and user activities
|
||||
tier: Free
|
||||
comingSoon: false
|
||||
@@ -119,6 +116,9 @@
|
||||
- name: Vanta integration
|
||||
tier: Premium
|
||||
comingSoon: false
|
||||
- name: Trigger a workflow based on a failing policy
|
||||
tier: Premium
|
||||
comingSoon: true
|
||||
- name: Granular role-based access control
|
||||
tier: Premium
|
||||
comingSoon: false
|
||||
|
||||
+33
-1
@@ -27,8 +27,40 @@ module.exports = {
|
||||
}
|
||||
let pricingTable = sails.config.builtStaticContent.pricingTable;
|
||||
|
||||
// Create a filtered version of the pricing table array that does not have the "Device management" category that will be used for the security-focused pricing table.
|
||||
let pricingTableForSecurity = pricingTable.filter((category)=>{
|
||||
return category.categoryName !== 'Device management';
|
||||
});
|
||||
|
||||
// Create an array used to sort the pricing table for secuirty focused buyers
|
||||
// To change the order of the pricing table for the security focused buyers, rearrange the values in the array below.
|
||||
// Note: The category names must match existing categories in the pricing-features-table.yml file.
|
||||
let categoryOrderForSecurityPricingTable = [
|
||||
'Security and compliance',
|
||||
'Monitoring',
|
||||
'Inventory management',
|
||||
'Collaboration',
|
||||
'Support',
|
||||
'Data outputs',
|
||||
'Deployment'
|
||||
];
|
||||
|
||||
// Sort the security-focused pricing table from the order of the elements in the categoryOrderForSecurityPricingTable array.
|
||||
pricingTableForSecurity.sort((a, b)=>{
|
||||
// If there is a category that is not in the list above, sort it to the end of the list.
|
||||
if(categoryOrderForSecurityPricingTable.indexOf(a.categoryName) === -1){
|
||||
return 1;
|
||||
} else if(categoryOrderForSecurityPricingTable.indexOf(b.categoryName) === -1) {
|
||||
return -1;
|
||||
}
|
||||
return categoryOrderForSecurityPricingTable.indexOf(a.categoryName) - categoryOrderForSecurityPricingTable.indexOf(b.categoryName);
|
||||
});
|
||||
|
||||
// Respond with view.
|
||||
return { pricingTable };
|
||||
return {
|
||||
pricingTable,
|
||||
pricingTableForSecurity,
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
|
||||
+1
-1
@@ -3,7 +3,7 @@ parasails.registerPage('pricing', {
|
||||
// ║║║║║ ║ ║╠═╣║ ╚═╗ ║ ╠═╣ ║ ║╣
|
||||
// ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
|
||||
data: {
|
||||
displaySecurityPricingMode: false, // For pricing mode switch
|
||||
displaySecurityPricingMode: false,// For pricing mode switch
|
||||
},
|
||||
|
||||
// ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗
|
||||
|
||||
Vendored
+130
-42
@@ -128,55 +128,143 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%// Features table %>
|
||||
<div purpose="features-table" class="d-flex flex-column justify-content-center mx-auto px-0">
|
||||
<%// IT-focused features table %>
|
||||
<div purpose="features-table" class="d-flex flex-column justify-content-center mx-auto px-0" v-if="!displaySecurityPricingMode">
|
||||
<h2 class="text-center pb-3 mb-4">Compare plans</h2>
|
||||
<div class="d-flex flex-column justify-content-center p-0">
|
||||
<%// Desktop features tables %>
|
||||
<%// Desktop IT-focused features tables %>
|
||||
<div class="d-none d-sm-block">
|
||||
<table purpose="pricing-categories-table" class="table" v-for="(category, index) in pricingTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<td><h4>{{category.categoryName}}</h4></td>
|
||||
<td class="text-center" v-if="index === 0">
|
||||
<strong>Free</strong>
|
||||
</td>
|
||||
<td v-else></td>
|
||||
<td class="text-center" v-if="index === 0">
|
||||
<strong>Premium</strong>
|
||||
</td>
|
||||
<td v-else></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="feature in category.features">
|
||||
<td purpose="feature-name" class="w-50">{{feature.name}}{{feature.comingSoon ? '*' : ''}}</td>
|
||||
<td v-if="feature.tier === 'Free'"><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
|
||||
<td v-else></td>
|
||||
<td><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<% for(let category of pricingTable) {%>
|
||||
<table purpose="pricing-categories-table" class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<td><h4><%- category.categoryName %></h4></td>
|
||||
<%if(pricingTable.indexOf(category) === 0) {%>
|
||||
<td class="text-center">
|
||||
<strong>Free</strong>
|
||||
</td>
|
||||
<%}else {%>
|
||||
<td ></td>
|
||||
<%}%>
|
||||
<%if(pricingTable.indexOf(category) === 0) {%>
|
||||
<td class="text-center">
|
||||
<strong>Premium</strong>
|
||||
</td>
|
||||
<%}else {%>
|
||||
<td ></td>
|
||||
<%}%>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% for( let feature of category.features){ %>
|
||||
<tr>
|
||||
<td purpose="feature-name" class="w-50"><%- feature.name %><%- feature.comingSoon ? '*' : '' %></td>
|
||||
<%if(feature.tier === 'Free') {%>
|
||||
<td><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
|
||||
<%} else {%>
|
||||
<td></td>
|
||||
<%}%>
|
||||
<td><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
|
||||
</tr>
|
||||
<% }%>
|
||||
</tbody>
|
||||
</table>
|
||||
<% }%>
|
||||
<p style="color: #515774;" class="mb-0 w-100">* Coming soon</p>
|
||||
</div>
|
||||
<%// Mobile features tables %>
|
||||
<div purpose="mobile-feature-table-section" class="d-block d-sm-none" v-for="(category, index) in pricingTable">
|
||||
<h4>{{category.categoryName}}</h4>
|
||||
<div purpose="mobile-features-table" class="d-flex flex-column" v-for="feature in category.features">
|
||||
<div purpose="striped-row" class="d-flex flex-row justify-content-between align-items-center">
|
||||
<strong>{{feature.name}}{{feature.comingSoon ? '*' : ''}}</strong>
|
||||
</div>
|
||||
<div class="d-flex flex-row justify-content-between align-items-center">
|
||||
Free
|
||||
<img class="d-block" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png" v-if="feature.tier === 'Free'">
|
||||
</div>
|
||||
<div purpose="striped-row" class="d-flex flex-row justify-content-between align-items-center">
|
||||
Premium
|
||||
<img class="d-block" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
|
||||
</div>
|
||||
<%// Mobile IT-focused features tables %>
|
||||
<% for(let category of pricingTable) {%>
|
||||
<div purpose="mobile-feature-table-section" class="d-block d-sm-none">
|
||||
<h4><%- category.categoryName %></h4>
|
||||
<% for( let feature of category.features){ %>
|
||||
<div purpose="mobile-features-table" class="d-flex flex-column">
|
||||
<div purpose="striped-row" class="d-flex flex-row justify-content-between align-items-center">
|
||||
<strong><%- feature.name %><%- feature.comingSoon ? '*' : '' %></strong>
|
||||
</div>
|
||||
<div class="d-flex flex-row justify-content-between align-items-center">
|
||||
Free
|
||||
<%if(feature.tier === 'Free') {%>
|
||||
<img class="d-block" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
|
||||
<% } %>
|
||||
</div>
|
||||
<div purpose="striped-row" class="d-flex flex-row justify-content-between align-items-center">
|
||||
Premium
|
||||
<img class="d-block" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
|
||||
</div>
|
||||
</div>
|
||||
<% }%>
|
||||
</div>
|
||||
<% }%>
|
||||
<p style="color: #515774;" class="d-block d-sm-none mb-0 w-100">* Coming soon</p>
|
||||
</div>
|
||||
</div>
|
||||
<%// Security-focused features table %>
|
||||
<div purpose="features-table" class="d-flex flex-column justify-content-center mx-auto px-0" v-else>
|
||||
<h2 class="text-center pb-3 mb-4">Compare plans</h2>
|
||||
<div class="d-flex flex-column justify-content-center p-0">
|
||||
<%// Desktop security-focused features tables %>
|
||||
<div class="d-none d-sm-block">
|
||||
<% for(let category of pricingTableForSecurity) {%>
|
||||
<table purpose="pricing-categories-table" class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<td><h4><%- category.categoryName %></h4></td>
|
||||
<%if(pricingTable.indexOf(category) === 0) {%>
|
||||
<td class="text-center">
|
||||
<strong>Free</strong>
|
||||
</td>
|
||||
<%}else {%>
|
||||
<td ></td>
|
||||
<%}%>
|
||||
<%if(pricingTable.indexOf(category) === 0) {%>
|
||||
<td class="text-center">
|
||||
<strong>Premium</strong>
|
||||
</td>
|
||||
<%}else {%>
|
||||
<td ></td>
|
||||
<%}%>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% for( let feature of category.features){ %>
|
||||
<tr>
|
||||
<td purpose="feature-name" class="w-50"><%- feature.name %><%- feature.comingSoon ? '*' : '' %></td>
|
||||
<%if(feature.tier === 'Free') {%>
|
||||
<td><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
|
||||
<%} else {%>
|
||||
<td></td>
|
||||
<%}%>
|
||||
<td><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
|
||||
</tr>
|
||||
<% }%>
|
||||
</tbody>
|
||||
</table>
|
||||
<% }%>
|
||||
<p style="color: #515774;" class="mb-0 w-100">* Coming soon</p>
|
||||
</div>
|
||||
<%// Mobile security-focused features tables %>
|
||||
<% for(let category of pricingTableForSecurity) {%>
|
||||
<div purpose="mobile-feature-table-section" class="d-block d-sm-none">
|
||||
<h4><%- category.categoryName %></h4>
|
||||
<% for( let feature of category.features){ %>
|
||||
<div purpose="mobile-features-table" class="d-flex flex-column">
|
||||
<div purpose="striped-row" class="d-flex flex-row justify-content-between align-items-center">
|
||||
<strong><%- feature.name %><%- feature.comingSoon ? '*' : '' %></strong>
|
||||
</div>
|
||||
<div class="d-flex flex-row justify-content-between align-items-center">
|
||||
Free
|
||||
<%if(feature.tier === 'Free') {%>
|
||||
<img class="d-block" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
|
||||
<% } %>
|
||||
</div>
|
||||
<div purpose="striped-row" class="d-flex flex-row justify-content-between align-items-center">
|
||||
Premium
|
||||
<img class="d-block" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
|
||||
</div>
|
||||
</div>
|
||||
<% }%>
|
||||
</div>
|
||||
<% }%>
|
||||
<p style="color: #515774;" class="d-block d-sm-none mb-0 w-100">* Coming soon</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user