@revenuecat/purchases-ui-js 4.14.1 → 4.15.0

package/dist/components/button/ButtonNode.svelte

@@ -89,6 +89,12 @@
           componentName: props.name,
           componentValue: "screen_redirect",
         };
+      case "cookie_settings":
+        return {
+          componentType: "button",
+          componentName: props.name,
+          componentValue: "navigate_to_cookie_settings",
+        };
       case "privacy_policy":
       case "terms":
       case "url": {

package/dist/components/paywall/Paywall.svelte

@@ -106,6 +106,7 @@
     /** Called when a `close_workflow` button is pressed to dismiss the paywall/workflow. */
     onClose?: () => void;
     onVisitCustomerCenterClicked?: () => void;
+    onCookieSettingsClicked?: () => void;
     onRestorePurchasesClicked?: () => void;
     onNavigateToUrlClicked?: (url: string) => void;
     /**
@@ -180,6 +181,7 @@
     onBackClicked,
     onClose,
     onVisitCustomerCenterClicked,
+    onCookieSettingsClicked,
     onRestorePurchasesClicked,
     onNavigateToUrlClicked,
     onCompleteWorkflowNavigate,
@@ -322,6 +324,9 @@
       case "screen_redirect":
         onActionTriggered?.("screen_redirect");
         return;
+      case "cookie_settings":
+        onCookieSettingsClicked?.();
+        return;
       case "privacy_policy":
       case "terms":
       case "url":
@@ -478,6 +483,9 @@
   let headerHeight = $state(0);
   let footerHeight = $state(0);
 
+  // A horizontal root's direction is row, so the spacer would incorrectly sit beside the content
+  const spacerFitsRoot = stack.dimension.type !== "horizontal";
+
   const contentColumnStyle = $derived(
     maxContentWidth
       ? `max-width: ${maxContentWidth}; margin-inline: auto;`
@@ -501,6 +509,12 @@
     <div class="paywall-content" style={contentColumnStyle}>
       <Stack
         {...stack}
+        padding={sticky_footer && !spacerFitsRoot
+          ? {
+              ...stack.padding,
+              bottom: (stack.padding?.bottom ?? 0) + footerHeight,
+            }
+          : stack.padding}
         class="paywall-content-scroll"
         style={mapPaywallContentStackStyle(
           stack.size.height,
@@ -508,9 +522,9 @@
           headerHeight,
         )}
       >
-        {#if sticky_footer}
-          <!-- Adds a  real flex item rather than bottom padding to clear
-            a footer because iOS Safari ignores the padding if the content 
+        {#if sticky_footer && spacerFitsRoot}
+          <!-- Adds a real flex item rather than bottom padding to clear
+            a footer because iOS Safari ignores the padding if the content
             still fits on screen leaving content stuck behind the footer. -->
           <div
             class="footer-scroll-spacer"

package/dist/components/paywall/Paywall.svelte.d.ts

@@ -33,6 +33,7 @@ interface Props {
     /** Called when a `close_workflow` button is pressed to dismiss the paywall/workflow. */
     onClose?: () => void;
     onVisitCustomerCenterClicked?: () => void;
+    onCookieSettingsClicked?: () => void;
     onRestorePurchasesClicked?: () => void;
     onNavigateToUrlClicked?: (url: string) => void;
     /**

package/dist/components/stack/stack-utils.js

@@ -64,7 +64,8 @@ export function mapStackSize(size, parentDimension) {
 }
 export function mapDimension(dimension) {
     if (dimension.type === "zlayer") {
-        return {};
+        // The default direction is row, so we need to set it to column to keep the flow vertical.
+        return { "flex-direction": "column" };
     }
     const direction = dimension.type === "vertical" ? "column" : "row";
     const justify = DISTRIBUTION_MAP[dimension.distribution] || "center";

package/dist/components/workflows/Screen.svelte

@@ -61,6 +61,7 @@
     onNavigateToUrlClicked?: (url: string) => void;
     onRestorePurchasesClicked?: () => void;
     onVisitCustomerCenterClicked?: () => void;
+    onCookieSettingsClicked?: () => void;
     walletButtonRender?: WalletButtonRender;
     prepareWalletPurchase?: WalletPurchasePrepare;
     onWalletPurchaseClicked?: WalletPurchaseStart;
@@ -99,6 +100,7 @@
     onNavigateToUrlClicked,
     onRestorePurchasesClicked,
     onVisitCustomerCenterClicked,
+    onCookieSettingsClicked,
     walletButtonRender,
     prepareWalletPurchase,
     onWalletPurchaseClicked,
@@ -141,6 +143,7 @@
       }}
       {onCompleteWorkflowNavigate}
       onVisitCustomerCenterClicked={() => onVisitCustomerCenterClicked?.()}
+      onCookieSettingsClicked={() => onCookieSettingsClicked?.()}
       {onBackClicked}
       {onClose}
       onRestorePurchasesClicked={() => onRestorePurchasesClicked?.()}

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

@@ -35,6 +35,7 @@ interface Props {
     onNavigateToUrlClicked?: (url: string) => void;
     onRestorePurchasesClicked?: () => void;
     onVisitCustomerCenterClicked?: () => void;
+    onCookieSettingsClicked?: () => void;
     walletButtonRender?: WalletButtonRender;
     prepareWalletPurchase?: WalletPurchasePrepare;
     onWalletPurchaseClicked?: WalletPurchaseStart;

package/dist/components/workflows/Workflow.svelte

@@ -88,6 +88,7 @@
     onNavigateToUrlClicked?: (url: string) => void;
     onRestorePurchasesClicked?: () => void;
     onVisitCustomerCenterClicked?: () => void;
+    onCookieSettingsClicked?: () => void;
     onComponentInteraction?: OnComponentInteraction;
     onClose?: () => void;
     onExitBack?: () => void;
@@ -132,6 +133,7 @@
     onNavigateToUrlClicked,
     onRestorePurchasesClicked,
     onVisitCustomerCenterClicked,
+    onCookieSettingsClicked,
     onComponentInteraction,
     onClose,
     onExitBack,
@@ -401,6 +403,7 @@
     {onNavigateToUrlClicked}
     {onRestorePurchasesClicked}
     {onVisitCustomerCenterClicked}
+    {onCookieSettingsClicked}
     {onComponentInteraction}
     onBackClicked={handleBackClicked}
     onClose={() => {

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

@@ -42,6 +42,7 @@ interface Props {
     onNavigateToUrlClicked?: (url: string) => void;
     onRestorePurchasesClicked?: () => void;
     onVisitCustomerCenterClicked?: () => void;
+    onCookieSettingsClicked?: () => void;
     onComponentInteraction?: OnComponentInteraction;
     onClose?: () => void;
     onExitBack?: () => void;

package/dist/types/components/button.d.ts

@@ -17,7 +17,7 @@ interface CloseAction {
 }
 interface NavigateToAction {
     type: "navigate_to";
-    destination: "customer_center" | "offer_code" | "screen_redirect";
+    destination: "customer_center" | "offer_code" | "screen_redirect" | "cookie_settings";
 }
 interface NavigateToSheetAction {
     type: "navigate_to";

package/dist/types/paywall-component-interaction.d.ts

@@ -16,7 +16,7 @@ interface PackageTransition {
     destinationPackageId: string;
     defaultPackageId?: string;
 }
-type ButtonInteractionValue = "workflow" | "navigate_to_url" | "navigate_back" | "close_workflow" | "restore_purchases" | "navigate_to_customer_center" | "screen_redirect" | "navigate_to_privacy_policy" | "navigate_to_terms" | "navigate_to_sheet" | "navigate_to_offer_code" | "navigate_to_web_paywall_link";
+type ButtonInteractionValue = "workflow" | "navigate_to_url" | "navigate_back" | "close_workflow" | "restore_purchases" | "navigate_to_customer_center" | "navigate_to_cookie_settings" | "screen_redirect" | "navigate_to_privacy_policy" | "navigate_to_terms" | "navigate_to_sheet" | "navigate_to_offer_code" | "navigate_to_web_paywall_link";
 export type TabInteractionData = ComponentInteractionBase<"tab"> & IndexedTransition;
 export type SwitchInteractionData = ComponentInteractionBase<"switch", "on" | "off">;
 export type CarouselInteractionData = ComponentInteractionBase<"carousel"> & IndexedTransition;

package/package.json

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