Doc: Add Joplin Server Business to plans and add page about it (#12694)

Assets/WebsiteAssets/css/site.css

@@ -1300,4 +1300,9 @@ footer .bottom-links-row p {
 
 :lang(zh-cn) #plans-section .faq {
 	display: none;
+}
+
+
+.cfa-button {
+	margin-top: 10px;
 }

Assets/WebsiteAssets/templates/partials/plan.mustache

@@ -1,24 +1,28 @@
-<div class="col-12 col-lg-4 account-type-{{priceMonthly.accountType}}">
+<div class="col-12 col-lg-4 account-type-{{priceMonthly.accountType}} hosting-type-{{hostingType}}">
 	<div class="price-container {{#featured}}price-container-blue{{/featured}}">
-		<div class="price-row">
-			<div class="plan-type">
-				<img src="{{imageBaseUrl}}/{{iconName}}.png"/>&nbsp;{{title}}
+			<div class="price-row">
+				<div class="plan-type">
+					<img src="{{imageBaseUrl}}/{{iconName}}.png"/>&nbsp;{{title}}
+				</div>
+
+				{{#priceMonthly.formattedMonthlyAmount}}
+					<div class="plan-price plan-price-monthly">
+						{{priceMonthly.formattedMonthlyAmount}}<sub class="per-month">&nbsp;<span translate>/month</span>{{#footnote}} (*){{/footnote}}</sub>
+					</div>
+
+					<div class="plan-price plan-price-yearly">
+						{{priceYearly.formattedMonthlyAmount}}<sub class="per-month">&nbsp;<span translate>/month</span>{{#footnote}} (*){{/footnote}}</sub>
+					</div>
+				{{/priceMonthly.formattedMonthlyAmount}}
 			</div>
 
-			<div class="plan-price plan-price-monthly">
-				{{priceMonthly.formattedMonthlyAmount}}<sub class="per-month">&nbsp;<span translate>/month</span>{{#footnote}} (*){{/footnote}}</sub>
+			{{#priceYearly.formattedMonthlyAmount}}
+			<div class="plan-price-yearly-per-year">
+				<div>
+					({{priceYearly.formattedAmount}}<sub class="per-year">&nbsp;<span translate>/year</span></sub>)
+				</div>
 			</div>
-
-			<div class="plan-price plan-price-yearly">
-				{{priceYearly.formattedMonthlyAmount}}<sub class="per-month">&nbsp;<span translate>/month</span>{{#footnote}} (*){{/footnote}}</sub>
-			</div>
-		</div>
-
-		<div class="plan-price-yearly-per-year">
-			<div>
-				({{priceYearly.formattedAmount}}<sub class="per-year">&nbsp;<span translate>/year</span></sub>)
-			</div>
-		</div>
+			{{/priceYearly.formattedMonthlyAmount}}
 
 		{{#featureLabelsOn}}
 			<p><i class="fas fa-check feature feature-on"></i>{{.}}</p>
@@ -29,7 +33,11 @@
 		{{/featureLabelsOff}}
 		
 		<p class="text-center subscribe-wrapper">
-			<a id="subscribeButton-{{name}}" href="{{cfaUrl}}" class="button-link btn-white subscribeButton">{{cfaLabel}}</a>
+			<a id="subscribeButton-{{name}}" href="{{cfaUrl}}" class="button-link btn-white subscribeButton cfa-button">{{cfaLabel}}</a>
+
+			{{#learnMoreUrl}}
+				<a id="learnMore-{{name}}" href="{{learnMoreUrl}}" class="button-link btn-white learnMoreButton cfa-button">Learn more</a>
+			{{/learnMoreUrl}}
 		</p>
 
 		{{#footnote}}<sub>(*) {{.}}</sub>{{/footnote}}

Assets/WebsiteAssets/templates/plans.mustache

@@ -1,23 +1,91 @@
 <div id="plans-section" class="env-{{env}}">
+	<style>
+		.toggle-container {
+			display: flex;
+			border: 2px solid black;
+			border-radius: 100px;
+			overflow: hidden;
+			cursor: pointer;
+			margin-top: 20px;
+			max-width: 600px;
+			margin-left: auto;
+			margin-right: auto;
+		}
+
+		.toggle-option {
+			flex: 1;
+			padding: 10px 20px;
+			text-align: center;
+			transition: background 0.3s, color 0.3s;
+			user-select: none;
+			white-space: nowrap;
+		}
+
+		.active {
+			background: black;
+			color: white;
+		}
+
+		.inactive {
+			background: white;
+			color: black;
+		}
+
+		@media (max-width: 480px) {
+			.toggle-container {
+				flex-direction: column;
+				width: 100%;
+				border-radius: 10px;
+			}
+		}
+	</style>
+
 	<div class="container">
 		<div class="row">
 			<div class="col-12 title-box">
 				<h1 translate class="text-center">
-					Joplin Cloud <span class="frame-bg frame-bg-yellow">plans</span>
+					Our synchronisation and sharing <span class="frame-bg frame-bg-yellow">solutions</span>
 				</h1>
 				<p translate class="text-center sub-title">
-					<a href="https://joplincloud.com">Joplin Cloud</a> allows you to synchronise your notes across devices. It also lets you publish notes, and collaborate on notebooks with your friends, family or colleagues.
+					Synchronise and share your notes with our range of plans.
 				</p>
 			</div>
 		</div>
 
+		<div class="toggle-container" id="toggle">
+			<div class="toggle-option active toggle-button-managed">Managed hosting</div>
+			<div class="toggle-option inactive toggle-button-self">Self-hosting</div>
+		</div>
+
 		<noscript>
 			<div class="alert alert-danger alert-env-dev" role="alert" style='text-align: center; margin-top: 10px;'>
 				To use this page please enable JavaScript!
 			</div>
 		</noscript>
 
-		<div style="display: flex; justify-content: center; margin-top: 1.2em">	
+		<div class="row hosting-type-managed">
+			<div class="col-12 title-box">
+				<h1 translate class="text-center">
+					Joplin Cloud
+				</h1>
+				<p translate class="text-center sub-title">
+					<a href="https://joplincloud.com">Joplin Cloud</a> allows you to synchronise your notes across devices. It also lets you publish notes, and collaborate on notebooks with your friends, family or colleagues.
+				</p>
+			</div>
+		</div>
+
+		<div class="row hosting-type-self">
+			<div class="col-12 title-box">
+				<h1 translate class="text-center">
+					Joplin Server Business
+				</h1>
+				<p translate class="text-center sub-title">
+					Joplin Server Business is a synchronisation server that you can install on your own infrastructure, so that your data remains private and secure within your business.
+				</p>
+			</div>
+		</div>
+
+		<div style="display: flex; justify-content: center; margin-top: 1.2em" class="hosting-type-managed">	
 			<div class="form-check form-check-inline">
 				<input id="pay-monthly-radio" class="form-check-input" type="radio" name="pay-radio" checked value="monthly">
 				<label translate style="font-weight: bold" class="form-check-label" for="pay-monthly-radio">
@@ -46,7 +114,11 @@
 				{{> plan}}
 			{{/plans.teams}}
 
-			<p translate class="joplin-cloud-login-info">Already have a Joplin Cloud account? <a href="https://joplincloud.com">Login now</a></p>
+			{{#plans.joplinServerBusiness}}
+				{{> plan}}
+			{{/plans.joplinServerBusiness}}
+
+			<p translate class="joplin-cloud-login-info hosting-type-managed">Already have a Joplin Cloud account? <a href="https://joplincloud.com">Login now</a></p>
 		</div>
 
 		<div class="row">
@@ -148,4 +220,30 @@
 			});
 		});
 	</script>
+
+
+	<script>
+		const setHostingType = (type) => {
+			const other = type === 'managed' ? 'self' : 'managed';
+			$('.toggle-button-' + type).addClass('active');
+			$('.toggle-button-' + type).removeClass('inactive');
+			$('.toggle-button-' + other).addClass('inactive');
+			$('.toggle-button-' + other).removeClass('active');
+
+			$('.hosting-type-' + type).show();
+			$('.hosting-type-' + other).hide();
+		}
+
+		$('.toggle-button-managed').click((event) => {
+			event.preventDefault();
+			setHostingType('managed');			
+		});
+
+		$('.toggle-button-self').click((event) => {
+			event.preventDefault();
+			setHostingType('self');
+		});
+
+		setHostingType('managed');
+	</script>
 </div>

packages/lib/markdownUtils.ts

@@ -16,6 +16,7 @@ export enum MarkdownTableJustify {
 export interface MarkdownTableHeader {
 	name: string;
 	label: string;
+	labelUrl?: string;
 	filter?: (content: string)=> string;
 	disableEscape?: boolean;
 	disableHtmlEscape?: boolean;
@@ -159,7 +160,11 @@ const markdownUtils = {
 		const lineMd = [];
 		for (let i = 0; i < headers.length; i++) {
 			const h = headers[i];
-			headersMd.push(stringPadding(h.label, minCellWidth, ' ', stringPadding.RIGHT));
+			let label = h.label;
+			if (h.labelUrl) {
+				label = `[${h.label}](${h.labelUrl})`;
+			}
+			headersMd.push(stringPadding(label, minCellWidth, ' ', stringPadding.RIGHT));
 
 			const justify = h.justify ? h.justify : MarkdownTableJustify.Left;
 

packages/lib/utils/joplinCloud/index.ts

@@ -9,6 +9,7 @@ export enum PlanName {
 	Basic = 'basic',
 	Pro = 'pro',
 	Teams = 'teams',
+	JoplinServerBusiness = 'joplinServerBusiness',
 }
 
 interface PlanFeature {
@@ -17,6 +18,7 @@ interface PlanFeature {
 	basic: boolean;
 	pro: boolean;
 	teams: boolean;
+	joplinServerBusiness?: boolean;
 	basicInfo?: string;
 	proInfo?: string;
 	teamsInfo?: string;
@@ -25,11 +27,16 @@ interface PlanFeature {
 	teamsInfoShort?: string;
 }
 
+enum PlanHostingType {
+	Managed = 'managed',
+	Self = 'self',
+}
+
 export interface Plan {
 	name: string;
 	title: string;
-	priceMonthly: StripePublicConfigPrice;
-	priceYearly: StripePublicConfigPrice;
+	priceMonthly?: StripePublicConfigPrice;
+	priceYearly?: StripePublicConfigPrice;
 	featured: boolean;
 	iconName: string;
 	featuresOn: FeatureId[];
@@ -39,6 +46,8 @@ export interface Plan {
 	cfaLabel: string;
 	cfaUrl: string;
 	footnote: string;
+	learnMoreUrl?: string;
+	hostingType: PlanHostingType;
 }
 
 export enum PricePeriod {
@@ -155,26 +164,29 @@ const features = (): Record<FeatureId, PlanFeature> => {
 			basic: true,
 			pro: true,
 			teams: true,
+			joplinServerBusiness: true,
 		},
 		sync: {
 			title: _('Sync as many devices as you want'),
 			basic: true,
 			pro: true,
 			teams: true,
+			joplinServerBusiness: true,
 		},
-		clipper: {
-			title: _('Web Clipper'),
-			description: _('The [Web Clipper](%s) is a browser extension that allows you to save web pages and screenshots from your browser.', 'https://joplinapp.org/help/apps/clipper'),
-			basic: true,
-			pro: true,
-			teams: true,
-		},
+		// clipper: {
+		// 	title: _('Web Clipper'),
+		// 	description: _('The [Web Clipper](%s) is a browser extension that allows you to save web pages and screenshots from your browser.', 'https://joplinapp.org/help/apps/clipper'),
+		// 	basic: false,
+		// 	pro: false,
+		// 	teams: false,
+		// },
 		collaborate: {
 			title: _('Collaborate on a notebook with others'),
 			description: _('This allows another user to share a notebook with you, and you can then both collaborate on it. It does not however allow you to share a notebook with someone else, unless you have the feature "%s".', shareNotebookTitle),
 			basic: true,
 			pro: true,
 			teams: true,
+			joplinServerBusiness: true,
 		},
 		share: {
 			title: shareNotebookTitle,
@@ -182,6 +194,7 @@ const features = (): Record<FeatureId, PlanFeature> => {
 			basic: false,
 			pro: true,
 			teams: true,
+			joplinServerBusiness: true,
 		},
 		emailToNote: {
 			title: _('Email to Note'),
@@ -189,6 +202,7 @@ const features = (): Record<FeatureId, PlanFeature> => {
 			basic: false,
 			pro: true,
 			teams: true,
+			joplinServerBusiness: true,
 		},
 		customBanner: {
 			title: _('Customise the note publishing banner'),
@@ -196,6 +210,7 @@ const features = (): Record<FeatureId, PlanFeature> => {
 			basic: false,
 			pro: true,
 			teams: true,
+			joplinServerBusiness: true,
 		},
 		multiUsers: {
 			title: _('Manage multiple users'),
@@ -203,6 +218,7 @@ const features = (): Record<FeatureId, PlanFeature> => {
 			basic: false,
 			pro: false,
 			teams: true,
+			joplinServerBusiness: true,
 		},
 		consolidatedBilling: {
 			title: _('Consolidated billing'),
@@ -217,12 +233,28 @@ const features = (): Record<FeatureId, PlanFeature> => {
 			basic: false,
 			pro: false,
 			teams: true,
+			joplinServerBusiness: true,
 		},
 		prioritySupport: {
 			title: _('Priority support'),
 			basic: false,
 			pro: false,
 			teams: true,
+			joplinServerBusiness: true,
+		},
+		selfHosted: {
+			title: _('Self-hosted'),
+			basic: false,
+			pro: false,
+			teams: false,
+			joplinServerBusiness: true,
+		},
+		sourceCodeAvailable: {
+			title: _('Source code available'),
+			basic: false,
+			pro: false,
+			teams: false,
+			joplinServerBusiness: true,
 		},
 	};
 };
@@ -303,6 +335,11 @@ export const createFeatureTableMd = () => {
 			name: 'teams',
 			label: 'Teams',
 		},
+		{
+			name: 'joplinServerBusiness',
+			label: 'Joplin Server Business',
+			labelUrl: 'https://joplinapp.org/help/joplin_server_business',
+		},
 	];
 
 	const rows: MarkdownTableRow[] = [];
@@ -332,6 +369,7 @@ export const createFeatureTableMd = () => {
 			basic: getCellInfo(PlanName.Basic, feature),
 			pro: getCellInfo(PlanName.Pro, feature),
 			teams: getCellInfo(PlanName.Teams, feature),
+			joplinServerBusiness: getCellInfo(PlanName.JoplinServerBusiness, feature),
 		};
 
 		rows.push(row);
@@ -362,6 +400,7 @@ export function getPlans(stripeConfig: StripePublicConfig): Record<PlanName, Pla
 			cfaLabel: _('Try it now'),
 			cfaUrl: '',
 			footnote: '',
+			hostingType: PlanHostingType.Managed,
 		},
 
 		pro: {
@@ -384,6 +423,7 @@ export function getPlans(stripeConfig: StripePublicConfig): Record<PlanName, Pla
 			cfaLabel: _('Try it now'),
 			cfaUrl: '',
 			footnote: '',
+			hostingType: PlanHostingType.Managed,
 		},
 
 		teams: {
@@ -406,6 +446,23 @@ export function getPlans(stripeConfig: StripePublicConfig): Record<PlanName, Pla
 			cfaLabel: _('Try it now'),
 			cfaUrl: '',
 			footnote: _('Per user. Minimum of 2 users.'),
+			hostingType: PlanHostingType.Managed,
+		},
+
+		joplinServerBusiness: {
+			name: 'joplinServerBusiness',
+			title: _('Joplin Server Business'),
+			featured: false,
+			iconName: 'business-icon',
+			featuresOn: getFeatureIdsByPlan(PlanName.JoplinServerBusiness, true),
+			featuresOff: getFeatureIdsByPlan(PlanName.JoplinServerBusiness, false),
+			featureLabelsOn: getFeatureLabelsByPlan(PlanName.JoplinServerBusiness, true),
+			featureLabelsOff: getFeatureLabelsByPlan(PlanName.JoplinServerBusiness, false),
+			cfaLabel: _('Get a quote'),
+			cfaUrl: 'mailto:jsb-inquiry@joplin.cloud?subject=Joplin%20Server%20Business%20inquiry',
+			footnote: '',
+			learnMoreUrl: 'https://joplinapp.org/help/joplin_server_business',
+			hostingType: PlanHostingType.Self,
 		},
 	};
 }

readme/apps/joplin_server_business.md

@@ -0,0 +1,95 @@
+# Joplin Server Business
+
+<div style="overflow: auto;">
+
+<img src="https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/joplin_server_business/main.png" width="200px" style="float: left; margin-right: 16px; margin-bottom: 16px;"/>
+
+Joplin Server Business is a synchronisation server that you can install on your own infrastructure, so that your data remains private and secure within your business.
+
+Your teams can collaborate on notebooks and share information. They can also publish notes to the internet or within your own intranet. All that secured by Joplin end-to-end encryption.
+
+Interested? [Contact us for a quote](mailto:jsb-inquiry@joplin.cloud?subject=Joplin%20Server%20Business%20inquiry)
+
+</div>
+
+## Smart teamwork with Joplin Server
+
+### Self-host to keep your data within your organisation
+
+<div style="overflow: auto;">
+
+<img src="https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/joplin_server_business/self_host.jpg" width="200px" style="float: left; margin-right: 16px; margin-bottom: 16px;"/>
+
+The data is hosted on your own server, giving you full control over it and ensuring it stays within your organisation.
+
+</div>
+
+### Share and collaborate on a notebook
+
+<div style="overflow: auto;">
+
+<img src="https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/joplin_server_business/share.jpg" width="200px" style="float: left; margin-right: 16px; margin-bottom: 16px;"/>
+
+Our service allows you to share notes and documents across unlimited devices. Create and modify teams to manage projects and planning.
+
+</div>
+
+### Publish notes to the internet
+
+<div style="overflow: auto;">
+
+<img src="https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/joplin_server_business/publish.jpg" width="200px" style="float: left; margin-right: 16px; margin-bottom: 16px;"/>
+
+You can publish a note so that it can be viewed in a browser by your colleagues and customers. The note can be available publicly on the internet or remain within your intranet.
+
+</div>
+
+### Manage multiples users and teams
+
+<div style="overflow: auto;">
+
+<img src="https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/joplin_server_business/teams.jpg" width="200px" style="float: left; margin-right: 16px; margin-bottom: 16px;"/>
+
+Using Joplin Server Business you can create and manage teams of users. Each team can collaborate on notebooks and notes and share information.
+
+</div>
+
+## By choosing Joplin Server Business your organisation benefits also from other features including:
+
+### End-to-end encryption
+
+Activate encryption to protect your data and secure communications across teams.
+
+### Web clipper
+
+Capture web pages and screenshots and save them as notes in Joplin.
+
+### Open source code
+
+Our desktop and mobile applications, as well as the end-to-end technology, are fully open source, ensuring transparency and increased security.
+
+### Synchronization across devices
+
+Securely synchronise your data across multiple devices - including iOS, Android, Windows, macOS and Linux.
+
+### Customise it
+
+Customise the app with plugins, custom themes and multiple text editors (Rich Text or Markdown). Or create your own company-specific workflow by developing scripts and plugins using the Extension API.
+
+### Open source code
+
+Our desktop and mobile applications, as well as the end-to-end technology, are fully open source, ensuring transparency and increased security.
+
+### Multimedia notes (PDF, images, etc.)
+
+Keep all your resources in one place. Save and share images, PDFs, videos, audio files and math expressions.
+
+## Did you know that there are over 150 plugins available for Joplin products ?
+
+[Go to the plugin website](https://joplinapp.org/plugins/)
+
+## Ready to give it a try ?
+
+To find out more about Joplin Server Business and how it can be integrated to your organisation, feel free to contact us. Our experts can prepare a demo for you. We can provide a quote to accommodate your company’s needs.
+
+[Contact us for a quote!](mailto:jsb-inquiry@joplin.cloud?subject=Joplin%20Server%20Business%20inquiry)