@mmailaender/convex-creem 0.1.0

package/src/svelte/primitives/PricingCard.svelte

@@ -0,0 +1,356 @@
+<script lang="ts">
+  import CheckoutButton from "./CheckoutButton.svelte";
+  import NumberInput from "./NumberInput.svelte";
+  import type { UIPlanEntry, RecurringCycle } from "../../core/types.js";
+  import type { ConnectedProduct } from "../widgets/types.js";
+  import { resolveProductIdForPlan, formatPriceWithInterval, formatSeatPrice } from "./shared.js";
+
+  interface Props {
+    plan: UIPlanEntry;
+    selectedCycle?: RecurringCycle;
+    activePlanId?: string | null;
+    subscriptionProductId?: string | null;
+    subscriptionStatus?: string | null;
+    subscriptionTrialEnd?: string | null;
+    products?: ConnectedProduct[];
+    units?: number;
+    showSeatPicker?: boolean;
+    subscribedSeats?: number | null;
+    isGroupSubscribed?: boolean;
+    disableCheckout?: boolean;
+    disableSwitch?: boolean;
+    disableSeats?: boolean;
+    className?: string;
+    onCheckout?: (payload: {
+      plan: UIPlanEntry;
+      productId: string;
+      units?: number;
+    }) => Promise<void> | void;
+    onSwitchPlan?: (payload: {
+      plan: UIPlanEntry;
+      productId: string;
+      units?: number;
+    }) => Promise<void> | void;
+    onUpdateSeats?: (payload: { units: number }) => Promise<void> | void;
+    onContactSales?: (payload: { plan: UIPlanEntry }) => Promise<void> | void;
+    onCancelSubscription?: () => void;
+  }
+
+  let {
+    plan,
+    selectedCycle = undefined,
+    activePlanId = undefined,
+    subscriptionProductId = null,
+    subscriptionStatus = null,
+    subscriptionTrialEnd = null,
+    products = [],
+    units = undefined,
+    showSeatPicker = false,
+    subscribedSeats = null,
+    isGroupSubscribed = false,
+    disableCheckout = false,
+    disableSwitch = false,
+    disableSeats = false,
+    className = "",
+    onCheckout,
+    onSwitchPlan,
+    onUpdateSeats,
+    onContactSales,
+    onCancelSubscription,
+  }: Props = $props();
+
+  const isSeatPlan = $derived(plan.pricingModel === "seat");
+  let seatCount = $derived(1);
+  let seatAdjustCount = $state(1);
+  let editingSeats = $state(false);
+  $effect(() => {
+    seatCount = units ?? 1;
+  });
+  $effect(() => {
+    seatAdjustCount = subscribedSeats ?? units ?? 1;
+    editingSeats = false;
+  });
+  const effectiveUnits = $derived(
+    isSeatPlan ? (showSeatPicker ? seatCount : units) : undefined,
+  );
+
+  const productId = $derived(resolveProductIdForPlan(plan, selectedCycle));
+  const priceLabel = $derived(formatPriceWithInterval(productId, products));
+
+  // Exact match: user is subscribed to THIS specific product (plan + cycle)
+  const isActiveProduct = $derived(
+    subscriptionProductId != null && productId != null && productId === subscriptionProductId,
+  );
+  const isTrialing = $derived(isActiveProduct && subscriptionStatus === "trialing");
+  const trialDaysLeft = $derived.by(() => {
+    if (!isTrialing || !subscriptionTrialEnd) return null;
+    const end = new Date(subscriptionTrialEnd).getTime();
+    const now = Date.now();
+    const days = Math.max(0, Math.ceil((end - now) / (1000 * 60 * 60 * 24)));
+    return days;
+  });
+  // Same plan but different billing cycle — offer to switch interval
+  const isActivePlanOtherCycle = $derived(
+    !isActiveProduct && activePlanId === plan.planId && productId != null,
+  );
+  // Free plan is active when activePlanId matches and the plan has no product (no subscription)
+  const isActiveFreePlan = $derived(
+    !isActiveProduct && plan.category === "free" && activePlanId === plan.planId,
+  );
+  // Sibling plan in the same <Subscription> group that already has a subscription
+  const isSiblingPlan = $derived(
+    !isActiveProduct && !isActivePlanOtherCycle && isGroupSubscribed && productId != null && plan.category !== "free" && plan.category !== "enterprise",
+  );
+  const showSeatCheckoutControls = $derived(
+    isSeatPlan && showSeatPicker && !isActiveProduct && !isSiblingPlan,
+  );
+  const reserveSeatActionHeight = $derived(
+    isSeatPlan && showSeatPicker && (isActiveProduct || isSiblingPlan || isActivePlanOtherCycle),
+  );
+
+  const seatPriceLabel = $derived(
+    isActiveProduct && isSeatPlan && subscribedSeats
+      ? formatSeatPrice(productId, products, subscribedSeats)
+      : null,
+  );
+  const seatsChanged = $derived(
+    isActiveProduct && isSeatPlan && subscribedSeats != null && seatAdjustCount !== subscribedSeats,
+  );
+
+  const checkoutLabel = $derived(
+    isActivePlanOtherCycle
+      ? "Switch interval"
+      : isSiblingPlan
+        ? "Switch plan"
+        : plan.billingType === "onetime"
+          ? "Buy now"
+          : "Subscribe",
+  );
+  const handleCheckout = (payload: { productId: string }) => {
+    if ((isSiblingPlan || isActivePlanOtherCycle) && onSwitchPlan) {
+      onSwitchPlan({ plan, productId: payload.productId, units: isSeatPlan ? (subscribedSeats ?? effectiveUnits) : effectiveUnits });
+    } else {
+      onCheckout?.({ plan, productId: payload.productId, units: effectiveUnits });
+    }
+  };
+
+  const splitPriceLabel = (value: string | null): { main: string; suffix: string | null; tail: string } | null => {
+    if (!value) return null;
+    const match = value.match(/^(.*?)(\/[a-z0-9]+)(.*)$/i);
+    if (!match) return { main: value, suffix: null, tail: "" };
+    return {
+      main: match[1]?.trim() ?? value,
+      suffix: match[2] ?? null,
+      tail: match[3]?.trim() ?? "",
+    };
+  };
+
+  const splitPrice = $derived(splitPriceLabel(seatPriceLabel ?? priceLabel));
+
+  const descriptionLines = $derived.by<string[]>(() => {
+    if (!plan.description) return [];
+    return plan.description
+      .split(/\r?\n/)
+      .map((line) => line.trim())
+      .filter(Boolean)
+      .map((line) => line.replace(/^(?:[-*]\s+|[✔✓]\s*)/, "").trim())
+      .filter(Boolean);
+  });
+
+  const featureLines = $derived.by<string[]>(() => {
+    if (descriptionLines.length < 3) return [];
+    return descriptionLines;
+  });
+
+  const leadDescription = $derived.by<string | null>(() => {
+    if (!descriptionLines.length || featureLines.length > 0) return null;
+    return descriptionLines[0] ?? null;
+  });
+</script>
+
+<section
+  class={`relative flex flex-col rounded-2xl bg-surface-base p-6 ${
+    plan.recommended ? "border-2 border-primary-border-default" : ""
+  } ${className}`}
+>
+  <div class="mb-3 flex h-5 items-center justify-between gap-2">
+    <h3 class="title-s text-foreground-default">
+      {plan.title ?? plan.planId}
+    </h3>
+    {#if isActiveProduct || isActiveFreePlan}
+      <span class="badge-faded-sm">
+        {#if isTrialing}
+          Free trial{#if trialDaysLeft != null}&ensp;·&ensp;{trialDaysLeft} day{trialDaysLeft === 1 ? '' : 's'} left{/if}
+        {:else}
+          Current plan
+        {/if}
+      </span>
+    {:else if plan.recommended}
+      <span class="badge-filled-sm">
+        Recommended
+      </span>
+    {/if}
+  </div>
+
+  <div class="flex items-baseline gap-1">
+    {#if plan.category === "free"}
+      <span class="heading-s text-foreground-default">Free</span>
+    {:else if plan.category === "enterprise"}
+      <span class="heading-s text-foreground-default">Custom</span>
+    {:else if splitPrice}
+      <span class="heading-s text-foreground-default">{splitPrice.main}</span>
+      {#if splitPrice.suffix}
+        <span class="title-s text-foreground-placeholder">{splitPrice.suffix}</span>
+      {/if}
+      {#if splitPrice.tail}
+        <span class="title-s text-foreground-placeholder">{splitPrice.tail}</span>
+      {/if}
+    {/if}
+  </div>
+
+  {#if leadDescription}
+    <p class="mb-4 body-m text-foreground-muted">{leadDescription}</p>
+  {/if}
+
+  <div class={`mb-4 mt-6 ${showSeatCheckoutControls ? "flex flex-col gap-2" : "flex min-h-8 items-start"}`}>
+    {#if showSeatCheckoutControls}
+      <div class="flex w-full items-center justify-between rounded-xl bg-surface-subtle py-2 pl-4 pr-2">
+        <span class="label-m text-foreground-default">Seats:</span>
+        <NumberInput
+          value={seatCount}
+          min={1}
+          compact
+          disabled={disableSeats}
+          onValueChange={(next) => {
+            if (next > 0) seatCount = next;
+          }}
+        />
+      </div>
+    {/if}
+
+    <div
+      class={`${showSeatCheckoutControls ? "w-full" : "flex min-h-8 items-start w-full"} ${
+        reserveSeatActionHeight ? "min-h-[4.5rem]" : ""
+      }`}
+    >
+    {#if isActiveProduct && isSeatPlan && showSeatPicker && onUpdateSeats}
+      <div class="flex w-full flex-col gap-2">
+        {#if editingSeats}
+          <div class="flex w-full items-center justify-between rounded-xl bg-surface-subtle py-2 pl-4 pr-2">
+            <span class="label-m text-foreground-default">Seats:</span>
+            <NumberInput
+              value={seatAdjustCount}
+              min={1}
+              compact
+              disabled={disableSeats}
+              onValueChange={(next) => {
+                if (next > 0) seatAdjustCount = next;
+              }}
+            />
+          </div>
+          <div class="flex w-full items-center gap-2">
+            <button
+              type="button"
+              class="button-faded h-8 w-full"
+              onclick={() => { seatAdjustCount = subscribedSeats ?? 1; editingSeats = false; }}
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              disabled={disableSeats || !seatsChanged}
+              class="button-filled h-8 w-full disabled:cursor-not-allowed disabled:opacity-50"
+              onclick={() => onUpdateSeats?.({ units: seatAdjustCount })}
+            >
+              Update
+            </button>
+          </div>
+        {:else}
+          <button type="button" class="button-faded w-full" onclick={() => editingSeats = true}>
+            Change seats
+          </button>
+          {#if onCancelSubscription}
+            <button type="button" class="button-outline w-full" onclick={onCancelSubscription}>
+              Cancel subscription
+            </button>
+          {/if}
+        {/if}
+      </div>
+    {:else if isActiveProduct && onCancelSubscription}
+      <button type="button" class="button-outline w-full" onclick={onCancelSubscription}>
+        Cancel subscription
+      </button>
+    {:else if isActiveProduct || isActiveFreePlan}
+      <!-- Keep CTA row height but intentionally empty when current plan has no action -->
+    {:else if (isSiblingPlan || isActivePlanOtherCycle) && productId}
+      <CheckoutButton
+        {productId}
+        disabled={disableSwitch}
+        onCheckout={handleCheckout}
+        className={`${plan.recommended ? "button-filled" : "button-faded"} w-full`}
+      >
+        {checkoutLabel}
+      </CheckoutButton>
+    {:else if plan.category === "enterprise"}
+      {#if plan.contactUrl}
+        <a
+          href={plan.contactUrl}
+          class="button-outline w-full"
+        >
+          Contact sales
+        </a>
+      {:else if onContactSales}
+        <button
+          type="button"
+          class="button-outline w-full"
+          onclick={() => onContactSales?.({ plan })}
+        >
+          Contact sales
+        </button>
+      {/if}
+    {:else if productId}
+        <CheckoutButton
+          {productId}
+          disabled={disableCheckout}
+          onCheckout={handleCheckout}
+          className={`${plan.recommended ? "button-filled" : "button-faded"} w-full`}
+        >
+          {checkoutLabel}
+        </CheckoutButton>
+      {:else if plan.category !== "free"}
+        <span class="body-m text-foreground-muted">
+          Configure a checkout handler to activate this plan.
+        </span>
+      {/if}
+    </div>
+  </div>
+
+  {#if featureLines.length > 0}
+    <div class="w-full pt-4">
+      <p class="label-m mb-4 font-semibold text-foreground-default">What's included:</p>
+      <ul class="space-y-2">
+        {#each featureLines as feature (feature)}
+          <li class="flex items-center gap-2">
+            <span class="inline-flex h-5 w-5 shrink-0 items-center justify-center text-foreground-muted">
+              <svg
+                aria-hidden="true"
+                viewBox="0 0 24 24"
+                fill="none"
+                class="h-4 w-4"
+              >
+                <path
+                  d="M20 6L9 17L4 12"
+                  stroke="currentColor"
+                  stroke-width="2.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </span>
+            <span class="body-m text-foreground-default">{feature}</span>
+          </li>
+        {/each}
+      </ul>
+    </div>
+  {/if}
+</section>

package/src/svelte/primitives/PricingSection.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+  import BillingToggle from "./BillingToggle.svelte";
+  import PricingCard from "./PricingCard.svelte";
+  import type { BillingSnapshot, UIPlanEntry, RecurringCycle } from "../../core/types.js";
+  import type { ConnectedProduct } from "../widgets/types.js";
+    import { SvelteSet } from "svelte/reactivity";
+
+  interface Props {
+    plans?: UIPlanEntry[];
+    snapshot?: BillingSnapshot | null;
+    selectedCycle?: RecurringCycle;
+    products?: ConnectedProduct[];
+    subscriptionProductId?: string | null;
+    subscriptionStatus?: string | null;
+    subscriptionTrialEnd?: string | null;
+    units?: number;
+    showSeatPicker?: boolean;
+    twoColumnLayout?: boolean;
+    subscribedSeats?: number | null;
+    isGroupSubscribed?: boolean;
+    disableCheckout?: boolean;
+    disableSwitch?: boolean;
+    disableSeats?: boolean;
+    className?: string;
+    onCycleChange?: (cycle: RecurringCycle) => void;
+    onCheckout?: (payload: {
+      plan: UIPlanEntry;
+      productId: string;
+      units?: number;
+    }) => Promise<void> | void;
+    onSwitchPlan?: (payload: {
+      plan: UIPlanEntry;
+      productId: string;
+      units?: number;
+    }) => Promise<void> | void;
+    onUpdateSeats?: (payload: { units: number }) => Promise<void> | void;
+    onContactSales?: (payload: { plan: UIPlanEntry }) => Promise<void> | void;
+    onCancelSubscription?: () => void;
+  }
+
+  let {
+    plans = [],
+    snapshot = null,
+    selectedCycle = undefined,
+    products = [],
+    subscriptionProductId = null,
+    subscriptionStatus = null,
+    subscriptionTrialEnd = null,
+    units = undefined,
+    showSeatPicker = false,
+    twoColumnLayout = false,
+    subscribedSeats = null,
+    isGroupSubscribed = false,
+    disableCheckout = false,
+    disableSwitch = false,
+    disableSeats = false,
+    className = "",
+    onCycleChange,
+    onCheckout,
+    onSwitchPlan,
+    onUpdateSeats,
+    onContactSales,
+    onCancelSubscription,
+  }: Props = $props();
+
+  const toUniqueCycles = (entries: UIPlanEntry[]) => {
+    const set = new SvelteSet<RecurringCycle>();
+    for (const plan of entries) {
+      for (const cycle of plan.billingCycles ?? []) {
+        set.add(cycle);
+      }
+    }
+    return Array.from(set);
+  };
+
+  const availableCycles = $derived(toUniqueCycles(plans));
+  const hasEnterprisePlan = $derived(plans.some((plan) => plan.category === "enterprise"));
+  const effectiveCycle = $derived(
+    selectedCycle ?? snapshot?.recurringCycle ?? availableCycles[0],
+  );
+  const showToggle = $derived(availableCycles.length > 1);
+</script>
+
+<section class={className}>
+  {#if showToggle}
+    <div class="mb-[6.5rem] flex justify-center">
+      <BillingToggle
+        cycles={availableCycles}
+        value={effectiveCycle}
+        onValueChange={onCycleChange}
+      />
+    </div>
+  {/if}
+
+  <div class={`grid grid-cols-1 gap-1 ${showSeatPicker || twoColumnLayout ? "md:grid-cols-2" : hasEnterprisePlan ? "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4" : "sm:grid-cols-2 md:grid-cols-3"}`}>
+    {#each plans as plan (plan.planId)}
+      <PricingCard
+        {plan}
+        selectedCycle={effectiveCycle}
+        activePlanId={snapshot?.activePlanId}
+        {subscriptionProductId}
+        {subscriptionStatus}
+        {subscriptionTrialEnd}
+        {products}
+        {units}
+        {showSeatPicker}
+        {subscribedSeats}
+        {isGroupSubscribed}
+        {disableCheckout}
+        {disableSwitch}
+        {disableSeats}
+        {onCheckout}
+        {onSwitchPlan}
+        {onUpdateSeats}
+        {onContactSales}
+        {onCancelSubscription}
+        className=""
+      />
+    {/each}
+  </div>
+</section>

package/src/svelte/primitives/ScheduledChangeBanner.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  /* global $props, $derived */
+  import type { BillingSnapshot } from "../../core/types.js";
+
+  interface Props {
+    snapshot?: BillingSnapshot | null;
+    className?: string;
+    isLoading?: boolean;
+    onResume?: () => void;
+  }
+
+  let { snapshot = null, className = "", isLoading = false, onResume = undefined }: Props = $props();
+
+  const show = $derived(snapshot?.metadata?.cancelAtPeriodEnd === true);
+  const currentPeriodEnd = $derived(
+    typeof snapshot?.metadata?.currentPeriodEnd === "string"
+      ? snapshot.metadata.currentPeriodEnd
+      : undefined,
+  );
+</script>
+
+{#if show}
+  <div
+    class={`rounded-xl bg-surface-base p-6 ${className}`}
+  >
+    <div class="flex flex-col gap-6 md:flex-row md:items-start md:justify-between md:gap-4">
+      <div class="space-y-2">
+        <p class="title-s text-foreground-default">Cancellation scheduled</p>
+        <p class="body-m text-foreground-muted">
+          You will continue to have access until the end of your current billing period
+          {#if currentPeriodEnd} ({new Date(currentPeriodEnd).toLocaleDateString()}){/if}.
+        </p>
+      </div>
+      {#if onResume}
+        <button
+          type="button"
+          class="button-faded h-8 shrink-0 disabled:cursor-not-allowed disabled:opacity-50"
+          disabled={isLoading}
+          onclick={onResume}
+        >
+          {isLoading ? "Resuming…" : "Undo cancellation"}
+        </button>
+      {/if}
+    </div>
+  </div>
+{/if}

package/src/svelte/primitives/SegmentControl.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import SegmentGroup from "./SegmentGroup.svelte";
+
+  export type SegmentControlItem = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+  };
+
+  interface Props {
+    items?: SegmentControlItem[];
+    value?: string | null;
+    defaultValue?: string;
+    disabled?: boolean;
+    className?: string;
+    onValueChange?: (value: string) => void;
+  }
+
+  let {
+    items = [],
+    value = undefined,
+    defaultValue = undefined,
+    disabled = false,
+    className = "",
+    onValueChange,
+  }: Props = $props();
+</script>
+
+{#if items.length > 1}
+  <SegmentGroup
+    {items}
+    {value}
+    {defaultValue}
+    {disabled}
+    {onValueChange}
+    className={className}
+  />
+{/if}

package/src/svelte/primitives/SegmentGroup.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { SegmentGroup as ArkSegmentGroup } from "@ark-ui/svelte/segment-group";
+
+  export type SegmentGroupItem = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+  };
+
+  interface Props {
+    items?: SegmentGroupItem[];
+    value?: string | null;
+    defaultValue?: string;
+    disabled?: boolean;
+    className?: string;
+    onValueChange?: (value: string) => void;
+  }
+
+  let {
+    items = [],
+    value = undefined,
+    defaultValue = undefined,
+    disabled = false,
+    className = "",
+    onValueChange,
+  }: Props = $props();
+</script>
+
+{#if items.length > 1}
+  <ArkSegmentGroup.Root
+    {value}
+    {defaultValue}
+    {disabled}
+    class={`segment-group ${className}`}
+    onValueChange={(details: { value: string }) => onValueChange?.(details.value)}
+  >
+    <ArkSegmentGroup.Indicator class="segment-group-indicator" />
+    {#each items as item (item.value)}
+      <ArkSegmentGroup.Item
+        value={item.value}
+        disabled={item.disabled}
+        class="segment-group-item"
+      >
+        <ArkSegmentGroup.ItemText class="segment-group-item-text label-m">
+          {item.label}
+        </ArkSegmentGroup.ItemText>
+        <ArkSegmentGroup.ItemControl class="segment-group-item-control" />
+        <ArkSegmentGroup.ItemHiddenInput />
+      </ArkSegmentGroup.Item>
+    {/each}
+  </ArkSegmentGroup.Root>
+{/if}

package/src/svelte/primitives/TrialLimitBanner.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { BillingSnapshot } from "../../core/types.js";
+
+  interface Props {
+    snapshot?: BillingSnapshot | null;
+    trialEndsAt?: string | null;
+    className?: string;
+  }
+
+  let { snapshot, trialEndsAt = null, className = "" }: Props = $props();
+
+  const show = $derived(snapshot?.activeCategory === "trial");
+  const resolvedTrialEnd = $derived(
+    trialEndsAt ??
+      (typeof snapshot?.metadata?.trialEnd === "string"
+        ? snapshot.metadata.trialEnd
+        : null),
+  );
+</script>
+
+{#if show}
+  <div
+    class={`rounded-lg border border-sky-300 bg-sky-50 px-4 py-3 text-sm text-sky-900 dark:border-sky-800 dark:bg-sky-950/40 dark:text-sky-200 ${className}`}
+  >
+    Trial plan active
+    {#if resolvedTrialEnd}
+      until {new Date(resolvedTrialEnd).toLocaleDateString()}.
+    {:else}
+      . Upgrade before your trial ends to avoid interruptions.
+    {/if}
+  </div>
+{/if}