Skip to content

Commit 5cd88d4

Browse files
tobihagemanntobihagemann
committed
Add Community Edition column to Hub billing checkout
1 parent 59387a5 commit 5cd88d4

4 files changed

Lines changed: 75 additions & 8 deletions

File tree

‎assets/js/hubsubscription.js‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,18 @@ class HubSubscription {
1212
constructor(form, subscriptionData, searchParams) {
1313
this._form = form;
1414
this._subscriptionData = subscriptionData;
15-
this._subscriptionData.hubId = searchParams.get('hub_id');
16-
let encodedReturnUrl = searchParams.get('return_url');
15+
let fragmentParams = new URLSearchParams(location.hash.substring(1));
16+
this._subscriptionData.hubToken = fragmentParams.get('oldLicense');
17+
if (this._subscriptionData.hubToken) {
18+
let base64 = this._subscriptionData.hubToken.split('.')[1].replace(/-/g, '+').replace(/_/g, '/');
19+
this._subscriptionData.hubId = JSON.parse(atob(base64)).jti;
20+
}
21+
this._subscriptionData.hubId = this._subscriptionData.hubId ?? searchParams.get('hub_id');
22+
let encodedReturnUrl = fragmentParams.get('returnUrl') ?? searchParams.get('return_url');
1723
if (encodedReturnUrl) {
18-
this._subscriptionData.returnUrl = decodeURIComponent(encodedReturnUrl);
24+
this._subscriptionData.returnUrl = decodeURIComponent(encodedReturnUrl);
1925
}
20-
this._subscriptionData.session = searchParams.get('session');
26+
this._subscriptionData.session = fragmentParams.get('session') ?? searchParams.get('session');
2127
if (this._subscriptionData.hubId && this._subscriptionData.hubId.length > 0 && this._subscriptionData.returnUrl && this._subscriptionData.returnUrl.length > 0) {
2228
this._subscriptionData.state = 'LOADING';
2329
this.loadSubscription();

‎i18n/de.yaml‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -615,6 +615,19 @@
615615
- id: hub_billing_checkout_standard_submit
616616
translation: "Zur Zahlung"
617617

618+
- id: hub_billing_checkout_community_title
619+
translation: "Community"
620+
- id: hub_billing_checkout_community_statement
621+
translation: "Kostenlos"
622+
- id: hub_billing_checkout_community_description
623+
translation: "bis zu 5 Sitze inklusive"
624+
- id: hub_billing_checkout_community_subtitle
625+
translation: "Kostenlos starten"
626+
- id: hub_billing_checkout_community_cta
627+
translation: "Deine Hub-Instanz unterstützt die Community Edition. Registriere dich für eine kostenlose Lizenz mit bis zu 5 Sitzen."
628+
- id: hub_billing_checkout_community_action
629+
translation: "Kostenlos registrieren"
630+
618631
- id: hub_billing_checkout_enterprise_title
619632
translation: "Enterprise"
620633
- id: hub_billing_checkout_enterprise_statement

‎i18n/en.yaml‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -615,6 +615,19 @@
615615
- id: hub_billing_checkout_standard_submit
616616
translation: "Checkout"
617617

618+
- id: hub_billing_checkout_community_title
619+
translation: "Community"
620+
- id: hub_billing_checkout_community_statement
621+
translation: "Free"
622+
- id: hub_billing_checkout_community_description
623+
translation: "up to 5 seats included"
624+
- id: hub_billing_checkout_community_subtitle
625+
translation: "Get Started for Free"
626+
- id: hub_billing_checkout_community_cta
627+
translation: "Your Hub instance supports the Community Edition. Register for a free license with up to 5 seats."
628+
- id: hub_billing_checkout_community_action
629+
translation: "Register for Free"
630+
618631
- id: hub_billing_checkout_enterprise_title
619632
translation: "Enterprise"
620633
- id: hub_billing_checkout_enterprise_statement

‎layouts/hub-billing/single.html‎

Lines changed: 39 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
{{ end }}
44
{{ define "main" }}
55
<div class="container pt-12 pb-24">
6-
<form x-data="{subscriptionData: {state: 'MISSING_PARAMS', captcha: null, hubId: null, returnUrl: null, session: null, customBilling: null, billingInterval: 'yearly', savingsPercent: null, errorMessage: '', inProgress: false, restartModal: {open: false, nextPayment: null}, changeSeatsModal: {open: false, confirmation: false, immediatePayment: null}, token: null, details: null, quantity: 5, email: '', needsTokenRefresh: false, shouldTransferToHub: false}, acceptTerms: false, hubSubscription: null, captchaState: null}" x-init="hubSubscription = new HubSubscription($refs.form, subscriptionData, new URLSearchParams(location.search))" x-ref="form" @submit.prevent="hubSubscription.createSession(); $refs.captcha.reset()">
6+
<form x-data="{subscriptionData: {state: 'MISSING_PARAMS', captcha: null, hubId: null, returnUrl: null, session: null, hubToken: null, customBilling: null, billingInterval: 'yearly', savingsPercent: null, errorMessage: '', inProgress: false, restartModal: {open: false, nextPayment: null}, changeSeatsModal: {open: false, confirmation: false, immediatePayment: null}, token: null, details: null, quantity: 5, email: '', needsTokenRefresh: false, shouldTransferToHub: false}, acceptTerms: false, hubSubscription: null, captchaState: null}" x-init="hubSubscription = new HubSubscription($refs.form, subscriptionData, new URLSearchParams(location.search))" x-ref="form" @submit.prevent="hubSubscription.createSession(); $refs.captcha.reset()">
77
<template x-if="subscriptionData.state == 'MISSING_PARAMS'">
88
<div class="text-center max-w-xl mx-auto">
99
<h3 class="font-headline text-xl md:text-2xl leading-relaxed mb-4">
@@ -314,7 +314,8 @@ <h3 class="font-headline text-xl md:text-2xl leading-relaxed mb-4" id="change-se
314314
<h1 class="font-h1 mb-8">{{ .Title }}</h1>
315315
<p class="lead">{{ i18n "hub_billing_checkout_description" . }}</p>
316316
</header>
317-
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-12">
317+
<div class="grid grid-cols-1 gap-4 mb-12" :class="subscriptionData.hubToken && !subscriptionData.customBilling?.managed ? 'md:grid-cols-3' : 'md:grid-cols-2'">
318+
<div x-show="subscriptionData.hubToken && !subscriptionData.customBilling?.managed" class="hidden md:block"></div>
318319
<div class="flex justify-center">
319320
<button class="w-1/2 py-2 border border-gray-300 rounded-l bg-gray-300 text-gray-700 hover:border-gray-400 hover:bg-gray-400 focus:bg-gray-400 focus:border-secondary" :class="{'border-gray-400 bg-gray-400 text-gray-800 font-medium': audience === 'business'}" @click.prevent="audience = 'business'">
320321
<i class="fa-building" :class="{'fas': audience === 'business', 'far': audience !== 'business'}"></i>
@@ -326,6 +327,40 @@ <h1 class="font-h1 mb-8">{{ .Title }}</h1>
326327
</button>
327328
</div>
328329
<div class="hidden md:block"></div>
330+
<div x-show="subscriptionData.hubToken && !subscriptionData.customBilling?.managed" class="flex flex-col white-box">
331+
<div class="p-4 border-b border-primary">
332+
<h2 class="inline-flex px-4 py-1 rounded-full text-sm font-medium tracking-wide uppercase bg-primary-l2 text-dark mb-4">
333+
{{ i18n "hub_billing_checkout_community_title" . }}
334+
</h2>
335+
<div x-show="!subscriptionData.customBilling?.override?.prices" class="lg:h-[22px]"></div>
336+
<p class="text-5xl font-bold">
337+
{{ i18n "hub_billing_checkout_community_statement" . }}
338+
</p>
339+
<p class="text-lg text-gray-500 mb-4">
340+
{{ i18n "hub_billing_checkout_community_description" . }}
341+
</p>
342+
</div>
343+
<div class="grow">
344+
<div class="flex flex-col items-center text-center h-full px-4 py-8">
345+
<h3 class="font-h3 mb-4 md:mb-0">
346+
{{ i18n "hub_billing_checkout_community_subtitle" . }}
347+
</h3>
348+
<div class="mb-4 md:my-auto lg:max-w-sm">
349+
<div class="fa-stack text-5xl text-primary-l2 mb-4">
350+
<i class="fa-solid fa-circle fa-stack-2x"></i>
351+
<i class="fa-solid fa-people-group fa-stack-1x text-primary"></i>
352+
</div>
353+
<p class="font-p">
354+
{{ i18n "hub_billing_checkout_community_cta" . }}
355+
</p>
356+
</div>
357+
<a :href="`{{ "hub/register" | relLangURL }}#oldLicense=${encodeURIComponent(subscriptionData.hubToken)}&returnUrl=${encodeURIComponent(subscriptionData.returnUrl)}`" role="button" class="btn btn-primary w-full">
358+
<i class="fa-solid fa-user-plus"></i>
359+
{{ i18n "hub_billing_checkout_community_action" . }}
360+
</a>
361+
</div>
362+
</div>
363+
</div>
329364
<div class="white-box">
330365
<div class="p-4 border-b border-primary">
331366
<h2 class="inline-flex px-4 py-1 rounded-full text-sm font-medium tracking-wide uppercase bg-primary-l2 text-dark mb-4">
@@ -407,7 +442,7 @@ <h2 class="inline-flex px-4 py-1 rounded-full text-sm font-medium tracking-wide
407442
</p>
408443
<p x-show="subscriptionData.customBilling?.managed" class="font-p mb-4">{{ partial "checkbox.html" (dict "context" . "alpineVariable" "acceptTerms" "label" (i18n "accept_hub_managed_terms_and_privacy" | safeHTML)) }}</p>
409444
<p x-show="!subscriptionData.customBilling?.managed" class="font-p mb-4">{{ partial "checkbox.html" (dict "context" . "alpineVariable" "acceptTerms" "label" (i18n "accept_terms_and_privacy" | safeHTML)) }}</p>
410-
<button :disabled="subscriptionData.inProgress || !acceptTerms" @click.prevent="hubSubscription.checkout('{{ .Site.Language.Lang }}')" type="button" class="btn btn-primary w-full lg:w-1/2">
445+
<button :disabled="subscriptionData.inProgress || !acceptTerms" @click.prevent="hubSubscription.checkout('{{ .Site.Language.Lang }}')" type="button" class="btn btn-primary w-full" :class="!(subscriptionData.hubToken && !subscriptionData.customBilling?.managed) && 'lg:w-1/2'">
411446
<i :class="{'fa-shopping-cart': !subscriptionData.inProgress, 'fa-check': !subscriptionData.inProgress, 'fa-spinner fa-spin': subscriptionData.inProgress}" class="fa-solid" aria-hidden="true"></i>
412447
{{ i18n "hub_billing_checkout_standard_submit" . }}
413448
</button>
@@ -442,7 +477,7 @@ <h3 class="font-h3 mb-4 md:mb-0">
442477
{{ i18n "hub_billing_checkout_enterprise_cta" . }}
443478
</p>
444479
</div>
445-
<a href="mailto:hub@cryptomator.org" role="button" class="btn btn-primary w-full lg:w-1/2">
480+
<a href="mailto:hub@cryptomator.org" role="button" class="btn btn-primary w-full" :class="!(subscriptionData.hubToken && !subscriptionData.customBilling?.managed) && 'lg:w-1/2'">
446481
<i class="fa-solid fa-envelope"></i>
447482
{{ i18n "hub_billing_checkout_enterprise_action" . }}
448483
</a>

0 commit comments

Comments
 (0)