joplin/Assets/WebsiteAssets/templates/plans.mustache

<div id="plans-section" class="env-{{env}}">
	<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>
				</h1>

				<button id="myButton">My button</button>

				<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>

		<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="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">
					Pay Monthly
				</label>
			</div>

			<div class="form-check form-check-inline">
				<input id="pay-yearly-radio" class="form-check-input" type="radio" name="pay-radio" value="yearly">
				<label translate style="font-weight: bold" class="form-check-label" for="pay-yearly-radio">
					Pay Yearly
				</label>
			</div>	
		</div>
		
		<div class="row plan-group plan-prices-monthly">
			{{#plans.basic}}
				{{> plan}}
			{{/plans.basic}}

			{{#plans.pro}}
				{{> plan}}
			{{/plans.pro}}

			{{#plans.teams}}
				{{> 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>
		</div>

		<div class="row">
			<div>
				<h1>Feature comparison</h1>
				<div class="joplin-cloud-feature-list">
					{{{featureListHtml}}}
				</div>
				<p>&nbsp;</p>
			</div>
		</div>

		<div class="row faq">
			{{{faqHtml}}}
		</div>
	</div>

	<script src="https://js.stripe.com/v3/"></script>

	<script>
		const urlQuery = new URLSearchParams(location.search);
		let subscriptionPeriod = 'monthly';
		const stripe = Stripe('{{{stripeConfig.publishableKey}}}');

		let checkoutSessionUser = null;

		// Temporary setup to allow Beta users to start their subscription.
		function setupBetaHandling(query) {
			let accountType = Number(query.get('account_type'));
			if (isNaN(accountType)) accountType = 1;

			const email = query.get('email');
			if (!email) return;
		
			$('.account-type-3').css('display', 'none');
			$('.subscribeButton').text('Buy now');
			
			if (accountType === 2) {
				$('.account-type-1').css('display', 'none');
			}

			checkoutSessionUser = { email, accountType };
		}

		var createCheckoutSession = function(priceId) {
			const promotionCode = urlQuery.get('promo') || '';

			console.info('Creating Stripe session for price:', priceId, 'Promotion code:', promotionCode);

			const source = localStorage.getItem('source');

			return fetch("{{{stripeConfig.webhookBaseUrl}}}/stripe/createCheckoutSession", {
				method: "POST",
				headers: {
					"Content-Type": "application/json"
				},
				body: JSON.stringify({
					priceId,
					promotionCode,
					email: checkoutSessionUser ? checkoutSessionUser.email : '',
					source,
				})
			}).then(async function(result) {
				if (!result.ok) {
					console.error('Could not create Stripe checkout session', await result.text());
					alert('The checkout session could not be created. Please contact us on the forum for support.');
				} else {
					return result.json();
				}
			});
		};

		const applyPeriod = (period) => {
			subscriptionPeriod = period;
			$('.plan-group').removeClass(period === 'monthly' ? 'plan-prices-yearly' : 'plan-prices-monthly');
			$('.plan-group').addClass('plan-prices-' + period);
			$("#pay-" + period + '-radio').prop('checked', true);
		}

		$(() => {
			$("input[name='pay-radio']").change(function() {
				const period = $("input[type='radio'][name='pay-radio']:checked").val();
				applyPeriod(period);
			});

			setupBetaHandling(urlQuery);
			if (urlQuery.get('period') === 'monthly') {
				// Nothing - this is the default
			} else {
				applyPeriod('yearly');
			}

			$('.feature-description').hide();

			$('.feature-title').click((event) => {
				event.preventDefault();
				const featureId = event.currentTarget.getAttribute('data-id');
				$('.feature-description-' + featureId).show();
			});
		});
	</script>
</div>