@legenki/studio-core 0.2.0 → 0.3.0

package/README.md

@@ -134,7 +134,7 @@ npm version patch     # or minor / major
 git push && git push --tags
 ```
 
-That runs lint and tests, then publishes to npm with provenance. Needs an
+That runs lint and tests, then publishes to npm. Needs an
 `NPM_TOKEN` repo secret.
 
 Because all four studios pin this package, a breaking change here should be a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legenki/studio-core",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Shared auth, paywall and utilities for the Legenki browser studios (Grafema, Ritmo, Divix, Lumen).",
   "type": "module",
   "license": "ISC",

package/src/paywall.js

@@ -23,10 +23,10 @@ let _selectedPlan = 'yearly';
  * @property {string}   appName   e.g. "Grafema" — titles the modal.
  * @property {string}   [subtitle] One-line summary of what Pro unlocks.
  * @property {string[]} [features] Bullet list shown in the modal.
- * @property {string}   [monthly]  Display price, e.g. "$5".
+ * @property {string}   [monthly]  Display price, e.g. "$8".
  * @property {string}   [yearly]   Display price, e.g. "$40".
- * @property {string}   [yearlyPerMonth] e.g. "$3.33 / month".
- * @property {string}   [yearlyNote]     e.g. "Yearly · save 33%".
+ * @property {string}   [yearlyPerMonth] Override; derived from `yearly` if unset.
+ * @property {string}   [yearlyNote]     Override; derived from both prices if unset.
  */
 
 /** @type {Required<PaywallConfig>} */
@@ -34,12 +34,37 @@ const config = {
   appName: 'Pro',
   subtitle: '',
   features: [],
-  monthly: '$5',
+  monthly: '$8',
   yearly: '$40',
-  yearlyPerMonth: '$3.33 / month',
-  yearlyNote: 'Yearly · save 33%',
+  // Left unset by default: both are derived from the prices below, so a price
+  // change cannot leave a stale "save 33%" sitting next to it. Pass them
+  // explicitly only to override the wording.
+  yearlyPerMonth: '',
+  yearlyNote: '',
 };
 
+/**
+ * Yearly savings, derived from the two prices rather than hardcoded.
+ * Falls back to the caller's override when one was supplied.
+ */
+function yearlyNote() {
+  if (config.yearlyNote) return config.yearlyNote;
+  const m = Number(String(config.monthly).replace(/[^0-9.]/g, ''));
+  const y = Number(String(config.yearly).replace(/[^0-9.]/g, ''));
+  if (!m || !y) return 'Yearly';
+  const percent = Math.round(((m * 12 - y) / (m * 12)) * 100);
+  return percent > 0 ? `Yearly · save ${percent}%` : 'Yearly';
+}
+
+/** Effective monthly cost of the yearly plan, e.g. "$3.33 / month". */
+function yearlyPerMonth() {
+  if (config.yearlyPerMonth) return config.yearlyPerMonth;
+  const y = Number(String(config.yearly).replace(/[^0-9.]/g, ''));
+  if (!y) return '';
+  const symbol = String(config.yearly).replace(/[0-9.,\s]/g, '') || '$';
+  return `${symbol}${(y / 12).toFixed(2)} / month`;
+}
+
 /**
  * Sets the app-specific copy. Call once at startup, before openPaywall().
  * Re-configuring discards any modal already built so the new copy takes effect.
@@ -92,9 +117,9 @@ function getModal() {
           <div class="paywall-plan-period">per month</div>
         </div>
         <div class="paywall-plan selected" data-plan="yearly">
-          <div class="paywall-plan-label">${escapeHtml(config.yearlyNote)}</div>
+          <div class="paywall-plan-label">${escapeHtml(yearlyNote())}</div>
           <div class="paywall-plan-amount">${escapeHtml(config.yearly)}</div>
-          <div class="paywall-plan-period">${escapeHtml(config.yearlyPerMonth)}</div>
+          <div class="paywall-plan-period">${escapeHtml(yearlyPerMonth())}</div>
         </div>
       </div>
       <button class="paywall-cta btn btn-accent">${escapeHtml(ctaLabel())}</button>