@nauticana/sail 1.0.2 → 1.0.3

package/README.md

@@ -315,7 +315,7 @@ If "trust this device" appears to do nothing (user is 2FA-prompted on every logi
 
 ## Billing
 
-sail ships a shared `BillingService` and nine billing components backed by keel's payment endpoints (see [keel/SHARED_PAYMENT.md](https://github.com/nauticana/keel/blob/main/SHARED_PAYMENT.md) for the provider contract — Stripe by default, pluggable).
+sail ships a shared `BillingService` and ten billing components backed by keel's payment endpoints (see [keel/SHARED_PAYMENT.md](https://github.com/nauticana/keel/blob/main/SHARED_PAYMENT.md) for the provider contract — Stripe by default, pluggable).
 
 ### Service
 
@@ -356,10 +356,24 @@ export class PricingPage {
 </sail-plan-selector>
 ```
 
-**Checkout button** — calls `createCheckout()` and redirects to the provider-hosted URL. `PublicPlan.priceId` lets you wire the picker directly to checkout without a local mapping table:
+**Offer / price picker (v1.0.5)** — a plan no longer has a single price. keel v1.0.5 sells per-plan **offers** in the `subscription_plan_price` table (billing cycle × commitment term, each with its own `provider_price_id`), surfaced as `PublicPlan.prices: PlanPrice[]`. The customer picks an offer **at checkout**; its `priceId` is what flows to `<sail-checkout-button>`:
+
+```html
+<sail-price-selector
+    [prices]="selectedPlan().prices ?? []"
+    [selected]="offer()?.priceId"
+    (selectionChange)="offer.set($event)">
+</sail-price-selector>
+```
+
+`<sail-price-selector>` is presentational (a `radiogroup` of offers), formats each amount with `Intl` from the offer's currency (so JPY/BHD render with the right number of decimals), and maps PERIOD_TYPE codes to copy via `[cycleLabels]`. It emits the full `PlanPrice` so you keep the chosen terms, not just the id.
+
+> **Migration.** The flat `PublicPlan.priceId` is deprecated (keel v1.0.5 dropped `subscription_plan.provider_price_id`) — read the id from the selected offer (`offer().priceId`). **keel v1.0.7 also removed `PublicPlan.monthlyCost`/`annualCost`** from both `/public/plans` and the billing catalog, so any plan-card code reading them now gets `undefined`. Derive a display price from the offers with `fromPriceLabel(plan.prices)` (used by `<sail-plan-selector>`), or render the per-offer amounts via `<sail-price-selector>`. These fields are removed from sail's `PublicPlan` type so the compiler flags any remaining references.
+
+**Checkout button** — calls `createCheckout()` and redirects to the provider-hosted URL. Feed it the chosen offer's `priceId`:
 ```html
 <sail-checkout-button
-    [priceId]="selectedPlan().priceId!"
+    [priceId]="offer()!.priceId!"
     [mode]="'subscription'"
     [successUrl]="'https://app.example.com/billing/done'"
     [cancelUrl]="'https://app.example.com/billing'"
@@ -521,8 +535,9 @@ A complete screen is the pieces above assembled over `BillingService` — no met
 <sail-trial-banner [trialEnd]="sub()?.trialEnd"></sail-trial-banner>
 <sail-status-chip [value]="sub()?.status"></sail-status-chip>
 <sail-plan-selector [plans]="plans()" [selected]="sub()?.planId" (selectionChange)="onPlanPicked($event)"></sail-plan-selector>
+<sail-price-selector [prices]="selectedPlan()?.prices ?? []" [selected]="offer()?.priceId" (selectionChange)="offer.set($event)"></sail-price-selector>
 <sail-seat-selector [seats]="sub()?.seats ?? 1" (seatsChange)="seats.set($event)"></sail-seat-selector>
-<sail-checkout-button [priceId]="priceFor(selected())" [quantity]="seats()" [successUrl]="okUrl" [cancelUrl]="backUrl"></sail-checkout-button>
+<sail-checkout-button [priceId]="offer()!.priceId!" [quantity]="seats()" [successUrl]="okUrl" [cancelUrl]="backUrl"></sail-checkout-button>
 <sail-usage-meter [meters]="usage()"></sail-usage-meter>
 <sail-payment-methods></sail-payment-methods>
 <sail-portal-button></sail-portal-button>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nauticana/sail",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Metadata-driven Angular component library for CRUD admin frontends backed by the keel Go backend. Tables, forms, navigation, OTP/2FA/social auth, billing, payout onboarding.",
   "main": "src/index.ts",
   "files": [

package/src/component/billing/plan_selector.html

@@ -2,10 +2,11 @@
   @for (plan of plans(); track plan.id) {
     <div class="plan-card" [class.plan-selected]="plan.id === selected()">
       <h3 class="plan-caption">{{ plan.caption }}</h3>
-      <div class="plan-price">
-        <span class="plan-amount">{{ plan.monthlyCost }}</span>
-        <span class="plan-period">/ month</span>
-      </div>
+      @if (priceLabels()[plan.id]; as priceLabel) {
+        <div class="plan-price">
+          <span class="plan-amount">{{ priceLabel }}</span>
+        </div>
+      }
       @if (featuresFor(plan.id).length > 0) {
         <ul class="plan-features">
           @for (feature of featuresFor(plan.id); track feature) {

package/src/component/billing/plan_selector.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input, output } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { PublicPlan } from '../../model/appdata';
+import { fromPriceLabel } from '../../util/money';
 
 /**
  * Plan picker. Pure presentational component — stateless, no service calls.
@@ -42,6 +43,13 @@ export class PlanSelectorComponent {
     return out;
   });
 
+  /** planId → indicative "from" price derived from the plan's offers ('' = none). */
+  readonly priceLabels = computed<Record<string, string>>(() => {
+    const out: Record<string, string> = {};
+    for (const plan of this.plans()) out[plan.id] = fromPriceLabel(plan.prices);
+    return out;
+  });
+
   onSelect(planId: string): void {
     this.selectionChange.emit(planId);
   }

package/src/component/billing/price_selector.html

@@ -0,0 +1,17 @@
+<div class="price-selector" role="radiogroup" aria-label="Billing options">
+  @for (offer of offers(); track offer.key) {
+    <button class="price-offer" type="button"
+            role="radio"
+            [class.price-selected]="offer.key === selected()"
+            [attr.aria-checked]="offer.key === selected()"
+            (click)="onSelect(offer)">
+      <span class="price-amount">{{ offer.amountText }}</span>
+      <span class="price-cycle">/ {{ offer.cycleText }}</span>
+      @if (offer.termText) {
+        <span class="price-term">{{ offer.termText }}</span>
+      }
+    </button>
+  } @empty {
+    <p class="empty-state">No billing options available.</p>
+  }
+</div>

package/src/component/billing/price_selector.ts

@@ -0,0 +1,66 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input, output } from '@angular/core';
+import { PlanPrice } from '../../model/appdata';
+import { formatCurrency } from '../../util/money';
+
+/** Per-offer view model for accessible, currency-formatted rendering. */
+interface OfferRow {
+  key:        string;   // stable id for tracking / selection (priceId or composite)
+  price:      PlanPrice;
+  amountText: string;   // currency-formatted major amount
+  cycleText:  string;   // "Monthly" / "Annual" / …
+  termText:   string;   // commitment note, '' when the term is a single cycle
+}
+
+/**
+ * Offer picker for a plan's `subscription_plan_price` rows (keel v1.0.5). A plan
+ * sells several offers (billing cycle × commitment term); the customer picks one
+ * at checkout, then its `priceId` feeds `<sail-checkout-button [priceId]>`.
+ *
+ * Pure presentational — stateless. Amounts are formatted with `Intl` from each
+ * offer's currency, so non-2-decimal currencies (JPY 0, BHD 3) render correctly.
+ * Period codes map to copy via `[cycleLabels]` (override/extend the defaults).
+ */
+@Component({
+  selector: 'sail-price-selector',
+  templateUrl: './price_selector.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class PriceSelectorComponent {
+  private static readonly DEFAULT_CYCLE: Record<string, string> = {
+    D: 'Daily',
+    W: 'Weekly',
+    M: 'Monthly',
+    Q: 'Quarterly',
+    A: 'Annual',
+  };
+
+  readonly prices = input<PlanPrice[]>([]);
+  /** Selected offer key — a `priceId`, or the composite key when priceId is empty. */
+  readonly selected = input<string | undefined>(undefined);
+  /** PERIOD_TYPE code → label; overrides/extends the built-in defaults. */
+  readonly cycleLabels = input<{[periodCode: string]: string}>({});
+  readonly selectionChange = output<PlanPrice>();
+
+  readonly offers = computed<OfferRow[]>(() => {
+    const labels = this.cycleLabels();
+    const cycleLabel = (code: string) =>
+      labels[code] ?? PriceSelectorComponent.DEFAULT_CYCLE[code] ?? code;
+    return this.prices().map((p) => {
+      const singleCycle = p.termCount === 1 && p.termType === p.billingCycle;
+      return {
+        key:        p.priceId || `${p.billingCycle}-${p.termType}-${p.termCount}`,
+        price:      p,
+        amountText: formatCurrency(p.amount, p.currency),
+        cycleText:  cycleLabel(p.billingCycle),
+        termText:   singleCycle
+          ? ''
+          : `${p.termCount} ${cycleLabel(p.termType)}${p.termCount > 1 ? 's' : ''} commitment`,
+      };
+    });
+  });
+
+  onSelect(offer: OfferRow): void {
+    this.selectionChange.emit(offer.price);
+  }
+}

package/src/component/login/register_component.html

@@ -46,7 +46,7 @@
         <mat-select formControlName="PlanID" required>
           @for (p of plans(); track p.id) {
             <mat-option [value]="p.id">
-              {{ p.caption }}@if (p.monthlyCost > 0) { — \${{ p.monthlyCost }}/mo }
+              {{ p.caption }}@if (priceHint(p); as hint) { — {{ hint }} }
             </mat-option>
           }
         </mat-select>

package/src/component/login/register_component.ts

@@ -13,6 +13,7 @@ import { firstValueFrom, map, merge } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { PartnerRegistration, PublicPlan } from '../../model/appdata';
 import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
+import { fromPriceLabel } from '../../util/money';
 
 @Component({
   selector: 'sail-register',
@@ -76,6 +77,11 @@ export class RegisterComponent implements OnInit {
     return this.guiConfig.googleMapsApiKey ?? '';
   }
 
+  /** Indicative "from" price for a plan option, derived from its offers ('' = free/none). */
+  protected priceHint(plan: PublicPlan): string {
+    return fromPriceLabel(plan.prices);
+  }
+
   ngOnInit() {
     this.billing.listPlans().subscribe({
       next: (list) => this.plans.set(list ?? []),

package/src/index.ts

@@ -30,6 +30,7 @@ export * from './component/security/twofactor_setup';
 export * from './component/security/twofactor_verify';
 export * from './component/security/trusted_devices';
 export * from './component/billing/plan_selector';
+export * from './component/billing/price_selector';
 export * from './component/billing/checkout_button';
 export * from './component/billing/payment_methods';
 export * from './component/billing/portal_button';
@@ -55,3 +56,4 @@ export * from './service/rest_url';
 export * from './service/label.service';
 export * from './service/base_rest.service';
 export * from './util/text';
+export * from './util/money';

package/src/model/appdata.ts

@@ -201,17 +201,39 @@ export interface PartnerRegistration {
 	PlanID:               string;
 }
 
+// One purchasable offer for a plan — a (billing cycle × commitment term) row of
+// keel's `subscription_plan_price` table (v1.0.5). A plan sells several; the
+// customer picks one at checkout via `<sail-price-selector>`. Mirrors keel
+// `billing.PlanPrice`.
+export interface PlanPrice {
+	billingCycle: string;   // PERIOD_TYPE code (D/W/M/A) — how often charged
+	termCount:    number;   // commitment length, in termType units
+	termType:     string;   // PERIOD_TYPE code — commitment/pricing unit
+	amountMinor:  number;   // price per termType unit, in minor units (cents)
+	amount:       number;   // same amount in major units (currency-exponent applied)
+	currency:     string;   // ISO 4217
+	// Provider price id (Stripe Price). Empty for free/unpriced offers; pass to
+	// `<sail-checkout-button [priceId]>` / `createCheckout({ priceId })`.
+	priceId?:     string;
+}
+
 // PublicPlan — shape returned by GET /public/plans. Used on the registration
 // page to render the plan picker and to drive `<sail-checkout-button>` flows.
 export interface PublicPlan {
 	id:          string;
 	caption:     string;
-	monthlyCost: number;
-	annualCost:  number;
-	// Stripe price ID (or provider-equivalent). Optional because keel only
-	// populates it when a plan is wired to a billing provider; FREE plans and
-	// not-yet-priced tiers leave it empty. Pass straight to
-	// `<sail-checkout-button [priceId]>` / `BillingService.createCheckout({ priceId })`.
+	// NOTE: keel v1.0.7 REMOVED the flat `monthlyCost`/`annualCost` from the plan
+	// JSON (both `/public/plans` and the billing catalog). Price lives per-offer
+	// in `prices[]`; derive a display price with `fromPriceLabel(plan.prices)`.
+	// Purchasable offers (keel v1.0.5 `subscription_plan_price`, nested under the
+	// plan). The source of truth for checkout — feed a chosen offer's `priceId`
+	// to `<sail-checkout-button>`. Returned by `/public/plans` as of keel v1.0.6
+	// (so `<sail-price-selector>` works on the registration page too); absent on
+	// pre-v1.0.6 backends.
+	prices?:     PlanPrice[];
+	// @deprecated keel v1.0.5 moved per-offer prices into `prices[]`
+	// (`subscription_plan.provider_price_id` was dropped). Use
+	// `prices?.[…].priceId`. Kept optional for pre-v1.0.5 backends.
 	priceId?:    string;
 	// keel `subscription_plan.activation_mode` (SUBSCRIPTION_ACTIVATION_MODE
 	// dictionary, single char — e.g. 'P' paid, 'F' free, 'T' trial). Drives the
@@ -320,6 +342,9 @@ export interface Subscription {
 	monthlyCost: number;
 	currency:    string;
 	autoRenew:   boolean;
+	// PERIOD_TYPE code (D/W/M/A) the sub is charged on, copied from the chosen
+	// offer (keel `billing_cycle`); absent on pre-v1.0.5 backends.
+	billingCycle?: string;
 	// ISO timestamp the trial ends (keel `trial_end`); empty/absent when not
 	// trialing. Drives `<sail-trial-banner>`.
 	trialEnd?:   string;

package/src/util/money.ts

@@ -0,0 +1,29 @@
+import { PlanPrice } from '../model/appdata';
+
+/**
+ * Format a major-unit amount in its currency, honouring the currency exponent
+ * (JPY 0 decimals, BHD 3, …) via `Intl`. Falls back to "<amount> <currency>"
+ * for an unknown currency code rather than throwing.
+ */
+export function formatCurrency(amount: number, currency: string): string {
+  try {
+    return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(amount);
+  } catch {
+    return `${amount} ${currency}`;
+  }
+}
+
+/**
+ * "From" price teaser for a plan card / dropdown — the lowest priced offer,
+ * currency-formatted, prefixed "from " when the plan sells more than one priced
+ * offer. Returns '' when the plan has no priced offers (free/trial), so callers
+ * can omit the price line entirely. The exact offer is chosen later via
+ * `<sail-price-selector>`.
+ */
+export function fromPriceLabel(prices: PlanPrice[] | undefined): string {
+  const priced = (prices ?? []).filter((p) => p.amount > 0);
+  if (priced.length === 0) return '';
+  const lowest = priced.reduce((a, b) => (b.amount < a.amount ? b : a));
+  const formatted = formatCurrency(lowest.amount, lowest.currency);
+  return priced.length > 1 ? `from ${formatted}` : formatted;
+}