mirror of
https://github.com/laurent22/joplin.git
synced 2024-12-21 09:38:01 +02:00
122 lines
3.7 KiB
Plaintext
122 lines
3.7 KiB
Plaintext
<div id="plans-section" class="env-{{env}}">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12 title-box">
|
|
<h1 class="text-center">
|
|
Joplin Cloud <span class="frame-bg frame-bg-yellow">plans</span>
|
|
</h1>
|
|
<p 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 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 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.business}}
|
|
{{> plan}}
|
|
{{/plans.business}}
|
|
|
|
<p class="joplin-cloud-login-info">Already have a Joplin Cloud account? <a href="https://joplincloud.com">Login now</a></p>
|
|
</div>
|
|
|
|
<div class="row">
|
|
{{{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);
|
|
|
|
return fetch("{{{stripeConfig.webhookBaseUrl}}}/stripe/createCheckoutSession", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json"
|
|
},
|
|
body: JSON.stringify({
|
|
priceId,
|
|
promotionCode,
|
|
email: checkoutSessionUser ? checkoutSessionUser.email : '',
|
|
})
|
|
}).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 support@joplincloud.com for support.');
|
|
} else {
|
|
return result.json();
|
|
}
|
|
});
|
|
};
|
|
|
|
$(() => {
|
|
$("input[name='pay-radio']").change(function() {
|
|
const period = $("input[type='radio'][name='pay-radio']:checked").val();
|
|
subscriptionPeriod = period;
|
|
|
|
$('.plan-group').removeClass(period === 'monthly' ? 'plan-prices-yearly' : 'plan-prices-monthly');
|
|
$('.plan-group').addClass('plan-prices-' + period);
|
|
});
|
|
|
|
setupBetaHandling(urlQuery);
|
|
});
|
|
</script>
|
|
</div>
|