@funnelsgrove/cli 0.1.246 → 0.1.255

package/template_scaffold/src/steps/step-32-paywall.tsx

@@ -14,6 +14,9 @@ import {
 import { stepPaywallContent } from '@/steps/content/step-32-paywall.content';
 import {
   PaymentRuntimeBoundary,
+  formatProviderMoney,
+  moneyToMajor,
+  type ProviderMoney,
   apiService,
   collectCurrentFunnelAttribution,
   readPaywallStateValue,
@@ -21,6 +24,7 @@ import {
   updatePaywallStateValue,
   useFunnel,
   useFunnelRuntimeConfig,
+  useBrowserOfferLocale,
   usePreviewStepLocalizedContent,
   useRuntimeMode,
   type FunnelStepMeta,
@@ -38,7 +42,9 @@ import {
   getDefaultPlanId,
   getPaywallPromoDisplayName,
   resolvePaywallDiscountState,
-  resolvePublishedBillingRuntime,
+  EMPTY_PUBLISHED_BILLING_RUNTIME,
+  resolvePublishedBillingRuntimeState,
+  usePinnedPublishedBillingRuntime,
   serializePaywallDiscountState,
   useStripeSubscriptionCheckoutSession,
   type PaywallDiscountState,
@@ -93,12 +99,7 @@ const deferPaywallStateSync = (syncState: () => void): (() => void) => {
   const timeoutId = window.setTimeout(syncState, 0);
   return () => window.clearTimeout(timeoutId);
 };
-const checkoutCurrencyFormatter = new Intl.NumberFormat('en-US', {
-  style: 'currency',
-  currency: 'USD',
-  minimumFractionDigits: 2,
-  maximumFractionDigits: 2,
-});
+
 const inactiveBillingDiscounts = buildBillingDiscountCatalog([
   {
     stage: 'first',
@@ -116,8 +117,8 @@ const inactiveBillingDiscounts = buildBillingDiscountCatalog([
   },
 ]);
 
-function formatCheckoutAmount(amountCents: number): string {
-  return checkoutCurrencyFormatter.format(amountCents / 100);
+function formatCheckoutAmount(amountMinor: number, money?: ProviderMoney): string {
+  return money ? formatProviderMoney({ ...money, amountMinor }, 'en-US') : '';
 }
 
 type StepPaywallProps = {
@@ -141,6 +142,7 @@ function StepPaywallRuntime({
   const checkoutMode = runtimeMode;
   const { user, setUser, attributes, featureFlags, completeStep, userBootstrapped } = useFunnel();
   const publishedRuntime = useFunnelRuntimeConfig();
+  const browserLocale = useBrowserOfferLocale();
   const content = usePreviewStepLocalizedContent(
     stepPaywallId,
     stepPaywallContent,
@@ -148,27 +150,33 @@ function StepPaywallRuntime({
   );
   const supportEmail = runtimePublicConfig.supportEmail;
   const paywallPreviewAsset = funnelManifest.assets.paywallPreview;
-  const activeBillingRuntime = useMemo(
-    () => resolvePublishedBillingRuntime({
-      config: publishedRuntime.config?.offerSets.length
-        ? publishedRuntime.config
-        : starterBillingRuntimeFallback,
-      featureFlags,
+  const billingResolution = useMemo(
+    () => resolvePublishedBillingRuntimeState({
+      config: publishedRuntime.config ?? (
+        publishedRuntime.status === 'fallback' && !publishedRuntime.error
+          ? starterBillingRuntimeFallback
+          : null
+      ),
+      featureFlags: publishedRuntime.featureFlags ?? featureFlags,
       mode: checkoutMode,
       search: typeof window === 'undefined' ? '' : window.location.search,
       baseCatalogsByMode: starterPlansByMode,
       fallbackDiscounts: billingDiscountList,
-    }),
-    [checkoutMode, featureFlags, publishedRuntime.config],
+      locale: browserLocale.status === 'resolved' ? browserLocale.locale : undefined,
+    }, browserLocale.status === 'resolved' && publishedRuntime.status !== 'loading'),
+    [browserLocale, checkoutMode, featureFlags, publishedRuntime.config, publishedRuntime.featureFlags, publishedRuntime.status, publishedRuntime.error],
   );
+  const billingSelection = usePinnedPublishedBillingRuntime(billingResolution);
+  const activeBillingRuntime = billingSelection.runtime ?? EMPTY_PUBLISHED_BILLING_RUNTIME;
+  const checkoutSelectionReady = billingSelection.resolution.status === 'resolved';
   const activeCheckoutRuntimeConfig = useMemo(() => ({
     ...checkoutRuntimeConfig,
-    funnelVersionId: publishedRuntime.config?.sourceVersionId ?? null,
+    funnelVersionId: activeBillingRuntime.sourceVersionId,
     paymentsApiVersion: activeBillingRuntime.paymentsApiVersion,
   }), [
     activeBillingRuntime.paymentsApiVersion,
     checkoutRuntimeConfig,
-    publishedRuntime.config?.sourceVersionId,
+    activeBillingRuntime.sourceVersionId,
   ]);
   const activeBillingDiscounts = useMemo(
     () => activeBillingRuntime.discounts ?? (
@@ -179,6 +187,28 @@ function StepPaywallRuntime({
     [activeBillingRuntime.discounts, activeBillingRuntime.provider],
   );
   const availablePlans = activeBillingRuntime.plans;
+  const unavailablePlanKeys = activeBillingRuntime.unavailablePlanKeys;
+  useEffect(() => {
+    if (unavailablePlanKeys.length === 0) {
+      return;
+    }
+
+    // Visitors only see the neutral note below; the author opening the funnel needs to know
+    // which published plans this payment mode cannot charge.
+    console.error('[funnelsgrove] published plans are unavailable in this payment mode', {
+      versionId: activeBillingRuntime.sourceVersionId,
+      revisionId: activeBillingRuntime.revisionId,
+      mode: activeBillingRuntime.mode,
+      offerSetId: activeBillingRuntime.offerSetId,
+      unavailablePlanKeys,
+    });
+  }, [
+    activeBillingRuntime.mode,
+    activeBillingRuntime.offerSetId,
+    activeBillingRuntime.revisionId,
+    activeBillingRuntime.sourceVersionId,
+    unavailablePlanKeys,
+  ]);
   const initialPlanId = useMemo(
     () =>
       availablePlans.find((plan) => plan.id === activeBillingRuntime.defaultPlanKey)?.id ??
@@ -227,8 +257,10 @@ function StepPaywallRuntime({
         plans: availablePlans,
         couponId: activeCouponId,
         discountPercent: discountState.discountPercent,
+        amountOffMinor: discountState.amountOffMinor,
+        discountCurrency: discountState.discountCurrency,
       }).map((plan) => localizePaywallPlanLabels(plan, content.catalogLabels)),
-    [activeCouponId, availablePlans, discountState.discountPercent, content.catalogLabels],
+    [activeCouponId, availablePlans, discountState.discountPercent, discountState.amountOffMinor, discountState.discountCurrency, content.catalogLabels],
   );
   const selectedPlan = useMemo(() => {
     if (availablePlans.length === 0) {
@@ -294,11 +326,12 @@ function StepPaywallRuntime({
 
     return Math.max(0, selectedDisplayPlan.baseAmountCents - selectedDisplayPlan.amountCents);
   }, [selectedDisplayPlan]);
-  const checkoutDiscountPercent = discountState.discountPercent ?? 0;
+  const checkoutDiscountPercent = discountState.amountOffMinor !== undefined && selectedDisplayPlan?.baseAmountCents
+    ? Number((appliedDiscountAmountCents / selectedDisplayPlan.baseAmountCents * 100).toFixed(2))
+    : discountState.discountPercent ?? 0;
   const checkoutPromoActive =
     Boolean(selectedDisplayPlan?.hasActiveDiscount) &&
     discountState.status === 'active' &&
-    checkoutDiscountPercent > 0 &&
     appliedDiscountAmountCents > 0;
   const checkoutAnalyticsMetadata = useMemo(() => {
     if (!selectedDisplayPlan) {
@@ -311,13 +344,18 @@ function StepPaywallRuntime({
       couponId: checkoutPromoActive ? selectedDisplayPlan.couponId : null,
       summaryLabel: checkoutSummaryLabel,
       amountCents: selectedDisplayPlan.amountCents,
-      currency: 'USD',
+      ...(selectedDisplayPlan.money ? { money: selectedDisplayPlan.money, currency: selectedDisplayPlan.money.currency, value: moneyToMajor(selectedDisplayPlan.money) } : {}),
       ...(typeof selectedDisplayPlan.analyticsPurchaseValue === 'number'
         ? { value: selectedDisplayPlan.analyticsPurchaseValue }
         : {}),
       environment: checkoutMode,
+      offerSetId: activeBillingRuntime.offerSetId,
+      runtimeConfigRevisionId: activeBillingRuntime.revisionId,
+      experimentId: activeBillingRuntime.experimentId,
+      variantKey: activeBillingRuntime.variantKey,
+      locale: activeBillingRuntime.locale,
     };
-  }, [checkoutMode, checkoutPromoActive, checkoutSummaryLabel, selectedDisplayPlan]);
+  }, [activeBillingRuntime, checkoutMode, checkoutPromoActive, checkoutSummaryLabel, selectedDisplayPlan]);
   const checkoutAnalyticsContext = useMemo(() => {
     if (!checkoutAnalyticsMetadata) {
       return null;
@@ -325,7 +363,7 @@ function StepPaywallRuntime({
 
     return {
       environment: checkoutMode,
-      featureFlags,
+      featureFlags: activeBillingRuntime.featureFlags,
       metadata: checkoutAnalyticsMetadata,
       runtimeConfig: activeCheckoutRuntimeConfig,
       stepId: analyticsStepId,
@@ -339,7 +377,7 @@ function StepPaywallRuntime({
     analyticsStepName,
     checkoutAnalyticsMetadata,
     checkoutMode,
-    featureFlags,
+    activeBillingRuntime.featureFlags,
   ]);
   const successReturnUrl = useMemo(() => {
     if (typeof window === 'undefined') {
@@ -383,7 +421,10 @@ function StepPaywallRuntime({
     couponId: checkoutPromoActive ? selectedDisplayPlan?.couponId ?? null : null,
     customerEmail: checkoutEmail || user.email,
     displayPlan: selectedDisplayPlan,
+    enabled: checkoutSelectionReady,
     onError: handleStripeCheckoutError,
+    onPreparationStart: billingSelection.pin,
+    onReset: billingSelection.reset,
     plan: checkoutProvider === 'stripe' ? selectedPlan : null,
     returnUrl: successReturnUrl,
     runtimeConfig: activeCheckoutRuntimeConfig,
@@ -404,11 +445,14 @@ function StepPaywallRuntime({
       customerEmail: checkoutEmail || user.email,
       customerName: user.name,
       displayPlan: selectedDisplayPlan,
+      enabled: checkoutSelectionReady,
       plan: selectedPlan,
       returnUrl: successReturnUrl,
       runtimeConfig: activeCheckoutRuntimeConfig,
       runtimeConfigRevisionId: activeBillingRuntime.revisionId,
       paymentProfileId: activeBillingRuntime.paymentProfileId,
+      onPreparationStart: billingSelection.pin,
+      onReset: billingSelection.reset,
       provider: checkoutProvider === 'stripe' ? 'stripe' : null,
       stripePublishableKey: activeBillingRuntime.stripePublishableKey,
       userId: user.id,
@@ -417,10 +461,13 @@ function StepPaywallRuntime({
       checkoutAnalyticsMetadata,
       checkoutEmail,
       checkoutMode,
+      checkoutSelectionReady,
       checkoutPromoActive,
       activeBillingRuntime.stripePublishableKey,
       activeBillingRuntime.paymentProfileId,
       activeBillingRuntime.revisionId,
+      billingSelection.pin,
+      billingSelection.reset,
       activeCheckoutRuntimeConfig,
       checkoutProvider,
       selectedDisplayPlan,
@@ -436,7 +483,7 @@ function StepPaywallRuntime({
     && activeBillingRuntime.offerSetId.trim()
     && selectedPlan?.funnelPlanKey?.trim(),
   );
-  const checkoutDisabled = !userBootstrapped || !selectedPlan || !selectedDisplayPlan || (
+  const checkoutDisabled = !checkoutSelectionReady || !userBootstrapped || !selectedPlan || !selectedDisplayPlan || (
     checkoutProvider === 'solidgate'
       ? !solidgateCheckoutConfigured
       : !checkoutSession.configured
@@ -462,12 +509,12 @@ function StepPaywallRuntime({
         String(checkoutDiscountPercent),
       )
     : '';
-  const checkoutDiscountAmountLabel = checkoutPromoActive
-    ? `-${formatCheckoutAmount(appliedDiscountAmountCents)}`
+  const checkoutDiscountAmountLabel = checkoutPromoActive && selectedDisplayPlan?.money
+    ? `-${formatCheckoutAmount(appliedDiscountAmountCents, selectedDisplayPlan?.money)}`
     : '';
-  const checkoutSavedLabel = checkoutPromoActive
+  const checkoutSavedLabel = checkoutPromoActive && selectedDisplayPlan?.money
     ? content.checkout.savedLabelTemplate
-        .replace('{amount}', formatCheckoutAmount(appliedDiscountAmountCents))
+        .replace('{amount}', formatCheckoutAmount(appliedDiscountAmountCents, selectedDisplayPlan?.money))
         .replace('{percent}', String(checkoutDiscountPercent))
     : '';
   useEffect(() => {
@@ -708,6 +755,8 @@ function StepPaywallRuntime({
   };
 
   const closeCheckoutDialog = () => {
+    if (checkoutProvider === 'stripe') checkoutSession.reset();
+    else billingSelection.reset();
     setCheckoutDialogOpen(false);
     setSolidgateAttemptKey(null);
     setError(null);
@@ -736,7 +785,10 @@ function StepPaywallRuntime({
     );
   };
 
-  if (!discountStateReady) {
+  if (billingSelection.resolution.status === 'error') {
+    return <div role='alert'>Payment options are temporarily unavailable.</div>;
+  }
+  if (!discountStateReady || billingSelection.resolution.status === 'pending') {
     return (
       <>
         <div className='paywall-v2-loading-screen' aria-live='polite'>
@@ -789,7 +841,7 @@ function StepPaywallRuntime({
         </div>
       ) : null}
 
-      {checkoutProvider === 'solidgate' &&
+      {checkoutSelectionReady && checkoutProvider === 'solidgate' &&
       checkoutDialogOpen &&
       solidgateAttemptKey &&
       selectedPlan?.funnelPlanKey ? (
@@ -846,6 +898,7 @@ function StepPaywallRuntime({
           onClose={closeCheckoutDialog}
           onCustomerEmailCommit={commitCheckoutEmail}
           onError={setError}
+          onPreparationStart={billingSelection.pin}
           onSuccess={handleCheckoutCompleted}
         />
       ) : null}
@@ -1001,7 +1054,7 @@ function StepPaywallRuntime({
                       </span>
                     ) : null}
                       <span className='paywall-v2-promo-upgrade-badge-main'>
-                        {content.checkout.discountLabelTemplate.replace('{percent}', String(discountState.discountPercent))}
+                        {content.checkout.discountLabelTemplate.replace('{percent}', String(checkoutDiscountPercent))}
                       </span>
                     </div>
                   <p className='paywall-v2-promo-upgrade-label'>{content.promo.upgradedLabel}</p>
@@ -1125,6 +1178,9 @@ function StepPaywallRuntime({
             {content.checkout.supportText}{' '}
             <a href={`mailto:${supportEmail}`}>{supportEmail}</a>
           </p>
+          {availablePlans.length === 0 ? (
+            <p className='paywall-v2-note' role='alert'>{content.plans.plansUnavailableNote}</p>
+          ) : null}
           {checkoutProvider === 'stripe' && !checkoutSession.configured ? (
             <p className='paywall-v2-note'>{content.plans.stripeUnavailableNote}</p>
           ) : null}

package/template_scaffold/docs/AGENT_FUNNEL_IMPLEMENTATION_SPEC.md

@@ -1,5 +0,0 @@
-# Compatibility: agent funnel implementation spec
-
-The canonical agent contract moved to [FunnelsGrove start here](funnelsgrove/START-HERE.md).
-
-This compatibility page intentionally contains no copied taxonomy or workflow rules. Update the canonical bundle instead.

package/template_scaffold/docs/ARCHITECTURE.md

@@ -1,5 +0,0 @@
-# Compatibility: funnel architecture
-
-Use the canonical [step metadata contract](funnelsgrove/contracts/step-metadata.md) for step structure and [flow routing contract](funnelsgrove/contracts/flow-routing.md) for graph behavior.
-
-This compatibility page intentionally contains no normative contract copy.

package/template_scaffold/docs/FLOW_CONFIG_AND_ROUTING.md

@@ -1,5 +0,0 @@
-# Compatibility: flow configuration and routing
-
-Use the canonical [flow routing contract](funnelsgrove/contracts/flow-routing.md).
-
-This compatibility page intentionally contains no copied routing rules.

package/template_scaffold/docs/PAYWALL_AND_PAYMENTS.md

@@ -1,5 +0,0 @@
-# Compatibility: paywall and payments
-
-Use the canonical [payments contract](funnelsgrove/contracts/payments.md).
-
-This compatibility page intentionally contains no copied paywall taxonomy or provider rules.

package/template_scaffold/docs/README.md

@@ -1,5 +0,0 @@
-# Compatibility: funnel template documentation
-
-Start with the canonical [FunnelsGrove agent contract](funnelsgrove/START-HERE.md).
-
-The canonical router links step types, recipes, QA, analytics, routing, answers, payments, and migration guidance.

package/template_scaffold/docs/references/funnel-sdk-user-answers.md

@@ -1,5 +0,0 @@
-# Compatibility: funnel SDK user answers
-
-Use the canonical [content and answers contract](../funnelsgrove/contracts/content-answers.md).
-
-This compatibility page intentionally contains no copied answer-key or choice-shape rules.