@olwiba/ui 0.2.8 → 0.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olwiba/ui",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "private": false,
   "type": "module",
   "sideEffects": false,

package/src/marketing/PricingSection.tsx

@@ -131,6 +131,15 @@ export interface PricingSectionProps {
   cadences?: PricingCadence[];
   /** Which cadence opens selected. Defaults to the first in `cadences`. */
   defaultCadence?: string;
+  /**
+   * Called when a plan's CTA is pressed, with the cadence currently selected —
+   * which is the half the caller can't otherwise know, since the toggle's state
+   * lives in here. Without it the CTA is inert: `PricingCard` takes an
+   * `onSelect` and this section had never passed one.
+   */
+  onSelectPlan?: (plan: PricingPlan, cadence?: string) => void;
+  /** Marks one plan as busy (e.g. its checkout is being created). */
+  pendingPlanName?: string;
 }
 
 const defaultRenderLink: AppShellRenderLink = ({ href, children, className }) => (
@@ -153,6 +162,8 @@ export function PricingSection({
   renderPlanFooter,
   cadences,
   defaultCadence,
+  onSelectPlan,
+  pendingPlanName,
 }: PricingSectionProps) {
   const [annual, setAnnual] = React.useState(false);
   const isOneTime = mode === 'one-time';
@@ -218,7 +229,12 @@ export function PricingSection({
                       >
                         {entry.label}
                         {saveBadges[entry.key] && (
-                          <Badge variant="secondary" className="text-xs">
+                          // `default` (primary), not `secondary`: the toggle is
+                          // `bg-muted` with a `bg-background` active tab, and a
+                          // secondary badge is the same grey as both — the
+                          // saving is the incentive, so it has to carry brand
+                          // colour to read at all.
+                          <Badge variant="default" className="text-xs">
                             {saveBadges[entry.key]}
                           </Badge>
                         )}
@@ -248,7 +264,7 @@ export function PricingSection({
                       >
                         Annual
                         {saveBadge && (
-                          <Badge variant="secondary" className="text-xs">{saveBadge}</Badge>
+                          <Badge variant="default" className="text-xs">{saveBadge}</Badge>
                         )}
                       </Button>
                     </>
@@ -290,12 +306,19 @@ export function PricingSection({
                   period={period}
                   description={plan.description}
                   features={plan.features}
-                  cta={plan.cta}
+                  cta={pendingPlanName === plan.name ? 'Redirecting…' : plan.cta}
                   highlighted={plan.highlighted}
                   disabled={plan.disabled}
-                  ctaDisabled={plan.ctaDisabled}
+                  // A plan mid-checkout is disabled too, so a second click
+                  // can't open a second session.
+                  ctaDisabled={plan.ctaDisabled || pendingPlanName === plan.name}
                   badge={badge}
                   footer={renderPlanFooter?.(plan)}
+                  onSelect={
+                    onSelectPlan
+                      ? () => onSelectPlan(plan, useCadences ? activeCadence : undefined)
+                      : undefined
+                  }
                 />
               );
             })}