Refactor pricing page into unified layout with toggle bar

Author: tobihagemann

assets/js/hubpricing.js

@@ -6,23 +6,43 @@ class HubPricing {
     this._data = data;
   }
 
-  loadPrice() {
+  loadPrices() {
     $.ajax({
       url: PADDLE_PRICES_URL,
       dataType: 'jsonp',
       data: {
-        product_ids: `${PADDLE_HUB_SELF_HOSTED_YEARLY_PLAN_ID},${PADDLE_HUB_MANAGED_YEARLY_PLAN_ID}`
+        product_ids: `${PADDLE_HUB_SELF_HOSTED_YEARLY_PLAN_ID},${PADDLE_HUB_SELF_HOSTED_MONTHLY_PLAN_ID},${PADDLE_HUB_MANAGED_YEARLY_PLAN_ID},${PADDLE_HUB_MANAGED_MONTHLY_PLAN_ID}`
       },
     }).done(data => {
-      this._data.selfHostedMonthlyPrice = {
-        amount: data.response.products[0].subscription.price.net / 12,
-        currency: data.response.products[0].currency
-      };
-      this._data.managedMonthlyPrice = {
-        amount: data.response.products[1].subscription.price.net / 12,
-        currency: data.response.products[1].currency
-      };
+      const priceMap = {};
+      data.response.products.forEach(p => {
+        priceMap[p.product_id] = {
+          amount: p.subscription.price.net,
+          currency: p.currency
+        };
+      });
+
+      this._assignPrice(priceMap, PADDLE_HUB_SELF_HOSTED_YEARLY_PLAN_ID, 'selfHostedYearlyPrice', 12);
+      this._assignPrice(priceMap, PADDLE_HUB_SELF_HOSTED_MONTHLY_PLAN_ID, 'selfHostedMonthlyPrice', 1);
+      this._assignPrice(priceMap, PADDLE_HUB_MANAGED_YEARLY_PLAN_ID, 'managedYearlyPrice', 12);
+      this._assignPrice(priceMap, PADDLE_HUB_MANAGED_MONTHLY_PLAN_ID, 'managedMonthlyPrice', 1);
+
+      const mYearly = priceMap[PADDLE_HUB_MANAGED_YEARLY_PLAN_ID];
+      const mMonthly = priceMap[PADDLE_HUB_MANAGED_MONTHLY_PLAN_ID];
+      if (mYearly && mMonthly) {
+        this._data.savingsPercent = Math.max(0, Math.round((1 - mYearly.amount / (mMonthly.amount * 12)) * 100));
+      }
     });
   }
 
+  _assignPrice(priceMap, planId, dataKey, divisor) {
+    const price = priceMap[planId];
+    if (price) {
+      this._data[dataKey] = {
+        amount: price.amount / divisor,
+        currency: price.currency
+      };
+    }
+  }
+
 }

content/hub-managed-terms.de.md

@@ -142,7 +142,7 @@ Gegenstand des Vertrags ist die entgeltliche und zeitlich auf die Dauer des Vert
 Unabhängig des Widerrufsrechts ([§ 15](#withdrawal)) steht dem Kunden, d.h. sowohl dem Verbraucher wie auch Unternehmer, das Recht zu, die Software 30 Tage kostenfrei und für beide Seiten unverbindlich zu nutzen (nachfolgend „Testphase“). In der Testphase hat der Kunde insbesondere keinen Anspruch auf uneingeschränkten Funktionsumfang der Software oder Störungsbehebung sowie Vertragsstrafe nach [§ 6](#sla).
 
 ## §13 Vergütungs- und Zahlungsbedingungen {#fees}
-13.1 Die Preise für die Software und Services kann der Kunde auf der Website ([https://cryptomator.org/de/pricing/#for-teams](https://cryptomator.org/de/pricing/#for-teams)) einsehen. Soweit nicht anders vereinbart (Individualvereinbarung, Rabatt-Aktion o.ä.) hat der Kunde – nach Ablauf der Testphase ([§ 12](#trial)) – monatlich ein Entgelt in Höhe von 12 EUR pro aktiven Nutzer an den Provider zu zahlen.
+13.1 Die Preise für die Software und Services kann der Kunde auf der Website ([https://cryptomator.org/de/pricing/](https://cryptomator.org/de/pricing/)) einsehen. Soweit nicht anders vereinbart (Individualvereinbarung, Rabatt-Aktion o.ä.) hat der Kunde – nach Ablauf der Testphase ([§ 12](#trial)) – monatlich ein Entgelt in Höhe von 12 EUR pro aktiven Nutzer an den Provider zu zahlen.
 
 13.2 Vom Provider nach [§ 6 (7)](#sla) verwirkte Vertragsstrafen werden automatisch monatlich mit dem zu zahlenden Entgelt verrechnet.
 

content/hub-managed-terms.en.md

@@ -146,7 +146,7 @@ The subject of the agreement is the provision of "Cryptomator Hub" (hereinafter
 Irrespective of the right of withdrawal ([§ 16](#withdrawal)), the Customer, i.e. both the consumer and the entrepreneur, shall be entitled to use the software for 30 days free of charge and without obligation for both parties (hereinafter "test phase"). During the Test Phase, the Customer shall in particular have no claim to unrestricted functional scope of the Software or troubleshooting as well as contractual penalty pursuant to [§ 6](#sla).
 
 ## §13 Remuneration and Payment Conditions {#fees}
-13.1 The Customer can view the prices for the software and services on the website ([https://cryptomator.org/pricing/#for-teams](https://cryptomator.org/pricing/#for-teams)). Unless otherwise agreed (individual agreement, discount campaign or similar), the Customer shall - after expiry of the test phase ([§ 12](#trial)) - pay a monthly fee of EUR 12 per active user to the Provider.
+13.1 The Customer can view the prices for the software and services on the website ([https://cryptomator.org/pricing/](https://cryptomator.org/pricing/)). Unless otherwise agreed (individual agreement, discount campaign or similar), the Customer shall - after expiry of the test phase ([§ 12](#trial)) - pay a monthly fee of EUR 12 per active user to the Provider.
 
 13.2 Contractual penalties forfeited by the Provider pursuant to [§ 6 (7)](#sla) shall be automatically offset against the payable fee on a monthly basis.
 

i18n/de.yaml

@@ -863,10 +863,12 @@
 # Pricing
 - id: pricing_title
   translation: "Finde die passende Option für dich"
-- id: pricing_individuals
-  translation: "Für Einzelnutzer"
-- id: pricing_teams
-  translation: "Für Teams"
+- id: pricing_billing_monthly
+  translation: "Monatlich"
+- id: pricing_billing_yearly
+  translation: "Jährlich"
+- id: pricing_billing_save
+  translation: "Spare"
 - id: pricing_vat_excluded
   translation: "zzgl. USt."
 - id: pricing_vat_included
@@ -876,52 +878,39 @@
 - id: hub_different_recurring_description
   translation: "nach dem ersten Jahr"
 
-- id: pricing_desktop_price_description
-  translation: "Donationware"
-- id: pricing_desktop_cta_1
-  translation: "Jetzt herunterladen"
-- id: pricing_desktop_cta_2
-  translation: "Unterstütze uns"
-- id: pricing_desktop_benefit_1
-  translation: "Kompatibel mit jedem Cloud-Speicher mit Dateisystem-Synchronisierung, z.B. Dropbox, Google Drive, OneDrive, Nextcloud uvm."
-- id: pricing_desktop_benefit_2
-  translation: "Clientseitige Verschlüsselung für Privatsphäre"
-- id: pricing_desktop_benefit_3
-  translation: "Zugriff über virtuelles Laufwerk"
-- id: pricing_desktop_benefit_4
-  translation: "Keine Accounts, keine Datenweitergabe"
-
 - id: pricing_android_price
   translation: "29,99 €"
-- id: pricing_android_price_description
-  translation: "Lebenslange Lizenz"
-- id: pricing_android_cta
-  translation: "Jetzt herunterladen"
-- id: pricing_android_benefit_1
-  translation: "Kompatibel mit Dropbox, Google Drive, OneDrive, pCloud, WebDAV- und S3-basiertem Cloud-Speicher"
-- id: pricing_android_benefit_2
-  translation: "Mobiler Zugriff auf verschlüsselte Dateien"
-- id: pricing_android_benefit_3
-  translation: "Tresore mit biometrischer Auth entsperren"
-- id: pricing_android_benefit_4
-  translation: "Keine Accounts, keine Datenweitergabe"
-
-- id: pricing_ios_free_description
-  translation: "Lesezugriff"
 - id: pricing_ios_price
   translation: "29,99 €"
-- id: pricing_ios_price_description
-  translation: "Lebenslange Lizenz"
-- id: pricing_ios_cta
+
+- id: pricing_individual_title
+  translation: "Individuell"
+- id: pricing_individual_subtitle
+  translation: "Verschlüssele deine persönlichen Cloud-Dateien. Open Source und für immer kostenlos."
+- id: pricing_individual_price_description
+  translation: "für den persönlichen Gebrauch"
+- id: pricing_individual_cta
   translation: "Jetzt herunterladen"
-- id: pricing_ios_benefit_1
-  translation: "Kompatibel mit iCloud Drive, Dropbox, Google Drive, OneDrive, pCloud, Box, WebDAV- und S3-basiertem Cloud-Speicher"
-- id: pricing_ios_benefit_2
-  translation: "Vollständig in die Dateien-App integriert"
-- id: pricing_ios_benefit_3
-  translation: "Tresore mit Face ID / Touch ID entsperren"
-- id: pricing_ios_benefit_4
-  translation: "Keine Accounts, keine Datenweitergabe"
+- id: pricing_individual_benefit_1
+  translation: "Unbegrenzte Tresore"
+- id: pricing_individual_benefit_2
+  translation: "Kompatibel mit jedem Cloud-Speicher"
+- id: pricing_individual_benefit_3
+  translation: "Voller Zugriff über Desktop-App"
+- id: pricing_individual_benefit_4
+  translation: "Community-Support"
+- id: pricing_individual_mobile_upgrades_title
+  translation: "Optionale Upgrades"
+- id: pricing_individual_upgrade_dark_mode
+  translation: "Dark Mode auf dem Desktop"
+- id: pricing_supporter_cert_price
+  translation: "ab 29,99 €"
+- id: pricing_individual_mobile_android
+  translation: "Voller Zugriff auf Android"
+- id: pricing_individual_mobile_ios
+  translation: "Voller Zugriff auf iOS"
+- id: pricing_individual_upgrades_note
+  translation: "Separate Einmalkäufe je Plattform. Preise können je nach Region variieren."
 
 - id: pricing_hub_self_hosted_title
   translation: "Self-Hosted"
@@ -935,33 +924,25 @@
 
 - id: pricing_hub_community_title
   translation: "Community"
-- id: pricing_hub_community_price_description
-  translation: "zum Loslegen"
+- id: pricing_hub_community_subtitle
+  translation: "Kostenlos und Open Source für kleine Teams. Auf eigener Infrastruktur deployen mit voller Kontrolle über die Daten."
 - id: pricing_hub_community_benefit_1
-  translation: "Unbegrenzte Tresore"
+  translation: "Inklusive 5 Sitze"
 - id: pricing_hub_community_benefit_2
-  translation: "5 Sitze"
-- id: pricing_hub_community_benefit_3
-  translation: "Voller Zugriff über Desktop-App"
-- id: pricing_hub_community_benefit_4
-  translation: "Lesender Zugriff über Mobile-Apps"
-- id: pricing_hub_community_benefit_4_tooltip
-  translation: "Wenn du die Vollversion der mobilen App freigeschaltet hast, erhältst du vollen Zugriff."
-- id: pricing_hub_community_benefit_5
-  translation: "Community-Support"
+  translation: "Nur Self-Hosted"
 
 - id: pricing_hub_standard_title
   translation: "Standard"
+- id: pricing_hub_standard_subtitle
+  translation: "Für Teams, die skalierbare und sichere Dateiverschlüsselung benötigen."
 - id: pricing_hub_standard_price_description
   translation: "pro Sitz, pro Monat"
 - id: pricing_hub_standard_benefit_1
-  translation: "Alles in Community"
+  translation: "Alle Cryptomator-Features, plus:"
 - id: pricing_hub_standard_benefit_2
-  translation: "Ab 3 Sitze"
+  translation: "Benutzer- und Gruppenverwaltung"
 - id: pricing_hub_standard_benefit_3
   translation: "Voller Zugriff über Mobile-Apps"
-- id: pricing_hub_standard_benefit_3_tooltip
-  translation: "Du erhältst vollen Zugriff, ohne die Vollversion der mobilen App freischalten zu müssen."
 - id: pricing_hub_standard_benefit_4
   translation: "Audit-Logs"
 - id: pricing_hub_standard_benefit_5
@@ -973,6 +954,8 @@
 
 - id: pricing_hub_enterprise_title
   translation: "Enterprise"
+- id: pricing_hub_enterprise_subtitle
+  translation: "Für großflächige Deployments mit Premium-Support."
 - id: pricing_hub_enterprise_price
   translation: "Individuell"
 - id: pricing_hub_enterprise_price_description
@@ -982,10 +965,12 @@
 - id: pricing_hub_enterprise_benefit_1
   translation: "Alles in Standard"
 - id: pricing_hub_enterprise_benefit_2
-  translation: "Beratung und Unterstützung durch Experten"
+  translation: "Notfallzugriff"
 - id: pricing_hub_enterprise_benefit_3
-  translation: "Dedizierter Kundenbetreuer"
+  translation: "Beratung und Unterstützung durch Experten"
 - id: pricing_hub_enterprise_benefit_4
+  translation: "Dedizierter Kundenbetreuer"
+- id: pricing_hub_enterprise_benefit_5
   translation: "Vorrangiger E-Mail-Support"
 
 - id: pricing_support_us_title
@@ -997,6 +982,11 @@
 - id: pricing_support_us_sponsor_button
   translation: "Werde Sponsor"
 
+- id: pricing_faq_individual_badge
+  translation: "Für Einzelnutzer"
+- id: pricing_faq_teams_badge
+  translation: "Für Teams"
+
 # Supporter Certificate
 - id: supporter_cert_common_email
   translation: "E-Mail"