@revenuecat/purchases-ui-js 4.8.0 → 4.8.2

package/dist/components/carousel/Carousel.stories.svelte

@@ -364,7 +364,7 @@
     title: "Components/Carousel",
     component: Carousel,
     decorators: [
-      viewportDecorator(400, 300, 0),
+      viewportDecorator(350, 300, 0),
       componentDecorator(),
       localizationDecorator({
         defaultLocale,

package/dist/components/carousel/Carousel.svelte

@@ -355,6 +355,7 @@
     display: flex;
     flex-direction: column;
     flex-shrink: 0;
+    align-self: stretch;
   }
 
   .carousel-clip {
@@ -401,6 +402,8 @@
     transition-delay: 2500ms;
     transform: translateX(0);
 
+    touch-action: pan-y;
+
     cursor: grab;
 
     &:active {

package/dist/components/paywall/Paywall.svelte

@@ -445,10 +445,11 @@
       box-sizing: border-box;
       margin: 0;
       padding: 0;
-      font-family: sans-serif;
+      font-family: inherit;
     }
 
     .paywall {
+      font-family: sans-serif;
       line-height: 1.5;
       -webkit-font-smoothing: antialiased;
     }

package/dist/components/workflows/Workflow.svelte

@@ -8,7 +8,10 @@
   import type { WalletButtonRender } from "../../types/wallet";
   import type { UIConfig } from "../../types/ui-config";
   import type { ReservedAttribute } from "../../types/components/input-text";
-  import type { WorkflowNavData } from "../../types/workflow-nav";
+  import type {
+    WorkflowNavData,
+    WorkflowStepChangeEvent,
+  } from "../../types/workflow-nav";
   import type {
     WorkflowStepTriggerAction,
     WorkflowStep,
@@ -59,6 +62,12 @@
     onComponentInteraction?: OnComponentInteraction;
     onClose?: () => void;
     onExitBack?: () => void;
+    /**
+     * Called whenever the current workflow step changes — on initial load,
+     * forward navigation, back navigation, and when leaving a step (close,
+     * purchase, error). Used by the host to fire workflow lifecycle events.
+     */
+    onStepChanged?: (event: WorkflowStepChangeEvent) => void;
   }
 
   const {
@@ -83,6 +92,7 @@
     onComponentInteraction,
     onClose,
     onExitBack,
+    onStepChanged,
   }: Props = $props();
 
   // ── Nav stack ─────────────────────────────────────────────────────────────
@@ -118,9 +128,39 @@
           stepId: workflow.initial_step_id,
         },
       ];
+      emitStepChange({
+        workflowId: workflow.workflowId,
+        stepId: workflow.initial_step_id,
+        fromStepId: undefined,
+        toStepId: undefined,
+        reason: "start",
+        ...stepFlags(workflow.initial_step_id),
+      });
     }
   });
 
+  function stepFlags(stepId: string): {
+    isFirstStep: boolean;
+    isLastStep: boolean;
+  } {
+    const step = workflow.steps[stepId];
+    return {
+      isFirstStep: stepId === workflow.initial_step_id,
+      // A step is "last" when it has no step-type trigger actions — i.e. no
+      // client-resolvable forward navigation. Condition-based actions fall back
+      // to onActionTriggered and are not counted here.
+      isLastStep:
+        step !== undefined &&
+        !Object.values(step.trigger_actions).some((a) =>
+          isStepTriggerAction(a),
+        ),
+    };
+  }
+
+  function emitStepChange(event: WorkflowStepChangeEvent) {
+    onStepChanged?.(event);
+  }
+
   /**
    * Resolves a "workflow"-type button action and navigates to the next screen.
    *
@@ -191,17 +231,58 @@
       return;
     }
 
-    navStack = [
-      ...navStack,
-      { pageId: nextPageId, stepId: triggerAction.step_id },
-    ];
+    const fromStepId = current.stepId;
+    const toStepId = triggerAction.step_id;
+    emitStepChange({
+      workflowId: workflow.workflowId,
+      stepId: fromStepId,
+      fromStepId: undefined,
+      toStepId,
+      reason: "completed",
+      ...stepFlags(fromStepId),
+    });
+    navStack = [...navStack, { pageId: nextPageId, stepId: toStepId }];
+    emitStepChange({
+      workflowId: workflow.workflowId,
+      stepId: toStepId,
+      fromStepId,
+      toStepId: undefined,
+      reason: "forward",
+      ...stepFlags(toStepId),
+    });
   }
 
   function handleBackClicked() {
     if (navStack.length > 1) {
+      const fromStepId = current.stepId;
+      const toStepId = navStack[navStack.length - 2].stepId;
+      emitStepChange({
+        workflowId: workflow.workflowId,
+        stepId: fromStepId,
+        fromStepId: undefined,
+        toStepId,
+        reason: "completed",
+        ...stepFlags(fromStepId),
+      });
       navStack = navStack.slice(0, -1);
+      emitStepChange({
+        workflowId: workflow.workflowId,
+        stepId: toStepId,
+        fromStepId,
+        toStepId: undefined,
+        reason: "back",
+        ...stepFlags(toStepId),
+      });
     } else {
       // Already at root — bubble up to the host.
+      emitStepChange({
+        workflowId: workflow.workflowId,
+        stepId: current.stepId,
+        fromStepId: undefined,
+        toStepId: undefined,
+        reason: "completed",
+        ...stepFlags(current.stepId),
+      });
       onExitBack?.();
     }
   }
@@ -229,6 +310,16 @@
     {onVisitCustomerCenterClicked}
     {onComponentInteraction}
     onBackClicked={handleBackClicked}
-    {onClose}
+    onClose={() => {
+      emitStepChange({
+        workflowId: workflow.workflowId,
+        stepId: current.stepId,
+        fromStepId: undefined,
+        toStepId: undefined,
+        reason: "completed",
+        ...stepFlags(current.stepId),
+      });
+      onClose?.();
+    }}
   />
 {/key}

package/dist/components/workflows/Workflow.svelte.d.ts

@@ -6,7 +6,7 @@ import type { VariableDictionary } from "../../types/variables";
 import type { WalletButtonRender } from "../../types/wallet";
 import type { UIConfig } from "../../types/ui-config";
 import type { ReservedAttribute } from "../../types/components/input-text";
-import type { WorkflowNavData } from "../../types/workflow-nav";
+import type { WorkflowNavData, WorkflowStepChangeEvent } from "../../types/workflow-nav";
 interface Props {
     workflow: WorkflowNavData;
     uiConfig: UIConfig;
@@ -29,6 +29,12 @@ interface Props {
     onComponentInteraction?: OnComponentInteraction;
     onClose?: () => void;
     onExitBack?: () => void;
+    /**
+     * Called whenever the current workflow step changes — on initial load,
+     * forward navigation, back navigation, and when leaving a step (close,
+     * purchase, error). Used by the host to fire workflow lifecycle events.
+     */
+    onStepChanged?: (event: WorkflowStepChangeEvent) => void;
 }
 declare const Workflow: import("svelte").Component<Props, {}, "">;
 type Workflow = ReturnType<typeof Workflow>;

package/dist/components/workflows/fixtures/two-page-workflow.js

@@ -7,6 +7,7 @@
  *   "rcpaywall_details" — details screen with "← Back" and "✕ Close" buttons
  */
 export const TWO_PAGE_WORKFLOW = {
+    workflowId: "wf_two_page_fixture",
     initial_page_id: "rcpaywall_welcome",
     initial_step_id: "step_welcome",
     steps: {

package/dist/index.d.ts

@@ -17,7 +17,7 @@ export { default as Workflow } from "./components/workflows/Workflow.svelte";
 export { default as Video } from "./components/video/Video.svelte";
 export * from "./types";
 export { type PaywallData } from "./types/paywall";
-export { type WorkflowNavData, workflowDataToNavData, } from "./types/workflow-nav";
+export { type WorkflowNavData, type WorkflowStepChangeEvent, workflowDataToNavData, } from "./types/workflow-nav";
 export { type WorkflowData, type WorkflowStep } from "./types/workflow";
 export { type InitialInputSelections } from "./stores/inputValidation";
 export { type UIConfig } from "./types/ui-config";

package/dist/types/workflow-nav.d.ts

@@ -1,10 +1,27 @@
 import type { WorkflowData, WorkflowScreen, WorkflowStep } from "./workflow";
+export interface WorkflowStepChangeEvent {
+    workflowId: string;
+    stepId: string;
+    fromStepId: string | undefined;
+    toStepId: string | undefined;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    /**
+     * Why this event was emitted:
+     * - `"start"` / `"forward"` / `"back"` — step is being entered (fire step_started)
+     * - `"completed"` — step is being left (fire step_completed); toStepId is set
+     *   for forward nav, undefined when the workflow is dismissed/closed.
+     */
+    reason: "start" | "forward" | "back" | "completed";
+}
 /**
  * A self-contained multi-page workflow payload for use with the Workflow
  * component. This mirrors the shape of rc-workflows' WorkflowData but only
  * includes the fields needed for client-side page navigation.
  */
 export interface WorkflowNavData {
+    /** The workflow's unique identifier. */
+    workflowId: string;
     /** ID of the first page to display. Must be a key in `pages`. */
     initial_page_id: string;
     /**

package/dist/types/workflow-nav.js

@@ -24,6 +24,7 @@ export function workflowDataToNavData(data) {
         return null;
     }
     return {
+        workflowId: data.id,
         initial_page_id: initialPageId,
         initial_step_id: data.initial_step_id,
         // Shared by reference intentionally — screens/steps are never mutated after

package/package.json

@@ -2,7 +2,7 @@
   "name": "@revenuecat/purchases-ui-js",
   "description": "Web components for Paywalls. Powered by RevenueCat",
   "private": false,
-  "version": "4.8.0",
+  "version": "4.8.2",
   "author": {
     "name": "RevenueCat, Inc."
   },