@revenuecat/purchases-ui-js 0.0.18 → 0.0.20

package/dist/components/footer/Footer.svelte

@@ -2,12 +2,18 @@
   import type { FooterProps } from "../../data/entities";
   import Stack from "../stack/Stack.svelte";
 
-  const { stack, id, labels, purchaseState, variableDictionary }: FooterProps =
-    $props();
+  const {
+    stack,
+    id,
+    labels,
+    purchaseState,
+    variableDictionary,
+    onAction,
+  }: FooterProps = $props();
 </script>
 
 <div class="rc-pw-footer" {id}>
-  <Stack {...stack} {labels} {purchaseState} {variableDictionary} />
+  <Stack {...stack} {labels} {purchaseState} {variableDictionary} {onAction} />
 </div>
 
 <style>

package/dist/components/image/Image.stories.svelte

@@ -64,6 +64,38 @@
     mask_shape: { type: "rectangle" },
   }}
 />
+
+<!-- Rounded Rectangle story -->
+<Story
+  name="Rounded Rectangle"
+  args={{
+    purchaseState,
+    id: "example-id",
+    fit_mode: "fit",
+    size: {
+      width: { type: "fill" },
+      height: { type: "fill" },
+    },
+    source: {
+      light: {
+        original: "https://placehold.co/600x400",
+        heic: "https://placehold.co/600x400",
+        heic_low_res: "https://placehold.co/600x400",
+        webp: "https://placehold.co/600x400",
+        webp_low_res: "https://placehold.co/600x400",
+      },
+    },
+    mask_shape: {
+      type: "rectangle",
+      corners: {
+        top_leading: 32,
+        top_trailing: 32,
+        bottom_leading: 32,
+        bottom_trailing: 32,
+      },
+    },
+  }}
+/>
 <!-- Circle story -->
 <Story
   name="Circle"
@@ -133,9 +165,50 @@
     mask_shape: { type: "convex" },
   }}
 />
-<!-- Gradient story -->
+<!-- Radial Gradient story -->
+<Story
+  name="Overlay Radial Gradient"
+  args={{
+    purchaseState,
+    id: "example-id",
+    fit_mode: "fit",
+    size: {
+      width: { type: "fill" },
+      height: { type: "fill" },
+    },
+    source: {
+      light: {
+        original: "https://placehold.co/600x400",
+        heic: "https://placehold.co/600x400",
+        heic_low_res: "https://placehold.co/600x400",
+        webp: "https://placehold.co/600x400",
+        webp_low_res: "https://placehold.co/600x400",
+      },
+    },
+    color_overlay: {
+      dark: {
+        type: "hex",
+        value: "#000000FF",
+      },
+      light: {
+        points: [
+          {
+            color: "#020024ff",
+            percent: 0,
+          },
+          {
+            color: "#00d4ff00",
+            percent: 100,
+          },
+        ],
+        type: "radial",
+      },
+    },
+  }}
+/>
+<!-- Linear Gradient story -->
 <Story
-  name="Background Gradient"
+  name="Overlay Linear Gradient"
   args={{
     purchaseState,
     id: "example-id",
@@ -153,19 +226,57 @@
         webp_low_res: "https://placehold.co/600x400",
       },
     },
-    gradient_colors: [
-      {
-        dark: { type: "hex", value: "#FFFFFF80" },
-        light: { type: "hex", value: "#FFFFFF80" },
+    color_overlay: {
+      dark: {
+        type: "hex",
+        value: "#000000FF",
+      },
+      light: {
+        degrees: 180,
+        points: [
+          {
+            color: "#020024ff",
+            percent: 0,
+          },
+          {
+            color: "#00d4ff00",
+            percent: 100,
+          },
+        ],
+        type: "linear",
+      },
+    },
+  }}
+/>
+<!-- Solid overlay -->
+<Story
+  name="Overlay Solid"
+  args={{
+    purchaseState,
+    id: "example-id",
+    fit_mode: "fit",
+    size: {
+      width: { type: "fill" },
+      height: { type: "fill" },
+    },
+    source: {
+      light: {
+        original: "https://placehold.co/600x400",
+        heic: "https://placehold.co/600x400",
+        heic_low_res: "https://placehold.co/600x400",
+        webp: "https://placehold.co/600x400",
+        webp_low_res: "https://placehold.co/600x400",
       },
-      {
-        dark: { type: "hex", value: "#FFFFFF80" },
-        light: { type: "hex", value: "#FFFFFF80" },
+    },
+    color_overlay: {
+      dark: {
+        type: "hex",
+        value: "#000000FF",
       },
-      {
-        dark: { type: "hex", value: "#000000" },
-        light: { type: "hex", value: "#000000" },
+      light: {
+        type: "hex",
+        value: "#e7c00069",
       },
-    ],
+    },
   }}
 />

package/dist/components/image/Image.svelte

@@ -4,13 +4,23 @@
 
   const { id, source, purchaseState, ...restProps }: ImageProps = $props();
 
-  const { gradientStyles, imageStyles } = $derived(
+  let imageAspectRatio = $state(0);
+  let imageElement: HTMLImageElement | null;
+
+  // Calculate aspect ratio once image loads
+  function onImageLoad() {
+    if (imageElement) {
+      imageAspectRatio = imageElement.naturalHeight / imageElement.naturalWidth;
+    }
+  }
+  const { imageStyles, maskPath, linearGradientAngle } = $derived(
     getImageComponentStyles({
       id,
       colorMode: purchaseState.colorMode,
       source,
       purchaseState,
       ...restProps,
+      imageAspectRatio,
     }),
   );
 
@@ -24,24 +34,110 @@
   });
 </script>
 
-<div
+<img
+  src={imageSource}
+  bind:this={imageElement}
+  onload={onImageLoad}
+  style="display: none;"
+  alt=""
+/>
+
+<svg
   class="rc-pw-image-container"
   id={`rc-pw-image-container-${id}`}
   style={imageStyles}
+  preserveAspectRatio="xMidYMid slice"
+  viewBox={`0 0 100 ${imageAspectRatio * 100}`}
 >
-  <img class="rc-pw-image" src={imageSource} alt="" {id} />
-  <span class="rc-pw-image-overlay" style={gradientStyles}></span>
-</div>
+  <defs>
+    <clipPath id={`clip-path-${id}`}>
+      {#if restProps.mask_shape?.type === "circle"}
+        <ellipse
+          cx="50"
+          cy={imageAspectRatio * 50}
+          rx="50"
+          ry={imageAspectRatio * 50}
+        />
+      {:else}
+        <path d={maskPath} />
+      {/if}
+    </clipPath>
+
+    {#if restProps.color_overlay?.[purchaseState.colorMode]?.type === "linear"}
+      <linearGradient
+        id={`gradient-${id}`}
+        x1={linearGradientAngle.x1}
+        y1={linearGradientAngle.y1}
+        x2={linearGradientAngle.x2}
+        y2={linearGradientAngle.y2}
+      >
+        {#each restProps.color_overlay?.[purchaseState.colorMode]?.points || restProps.color_overlay?.["light"]?.points || [] as stop}
+          <stop
+            offset={`${stop.percent}%`}
+            style={`stop-color: ${stop.color}`}
+          />
+        {/each}
+      </linearGradient>
+    {:else if restProps.color_overlay?.[purchaseState.colorMode]?.type === "radial"}
+      <radialGradient
+        id={`gradient-${id}`}
+        cx="50%"
+        cy="50%"
+        r="50%"
+        fx="50%"
+        fy="50%"
+      >
+        {#each restProps.color_overlay?.[purchaseState.colorMode]?.points || restProps.color_overlay?.["light"]?.points || [] as stop}
+          <stop
+            offset={`${stop.percent}%`}
+            style={`stop-color: ${stop.color}`}
+          />
+        {/each}
+      </radialGradient>
+    {:else if restProps.color_overlay?.[purchaseState.colorMode]?.type === "hex"}
+      <linearGradient id={`gradient-${id}`}>
+        <stop
+          offset="0%"
+          style={`stop-color: ${
+            restProps.color_overlay[purchaseState.colorMode]?.value ||
+            restProps.color_overlay?.["light"]?.value
+          }`}
+        />
+      </linearGradient>
+    {/if}
+  </defs>
+
+  <image
+    class="rc-pw-image"
+    href={imageSource}
+    x="0"
+    y="0"
+    width="100"
+    height={imageAspectRatio * 100}
+    clip-path={`url(#clip-path-${id})`}
+    preserveAspectRatio="xMidYMid slice"
+    {id}
+  />
+
+  <rect
+    class="rc-pw-image-overlay"
+    x="0"
+    y="0"
+    width="100"
+    height={imageAspectRatio * 100}
+    clip-path={`url(#clip-path-${id})`}
+    fill={`url(#gradient-${id})`}
+  />
+</svg>
 
 <style>
   .rc-pw-image-container {
-    position: relative;
-    overflow: hidden;
     border-end-start-radius: var(--image-border-end-start-radius, 0px);
     border-end-end-radius: var(--image-border-end-end-radius, 0px);
     border-start-start-radius: var(--image-border-start-start-radius, 0px);
     border-start-end-radius: var(--image-border-start-end-radius, 0px);
-    clip-path: var(--image-clip-path, initial);
+    position: relative;
+    overflow: hidden;
     display: flex;
     flex: var(--image-flex, 1 1 auto);
     position: var(--image-position, relative);
@@ -61,6 +157,5 @@
   .rc-pw-image-overlay {
     position: absolute;
     inset: 0;
-    background: var(--image-background, none);
   }
 </style>

package/dist/components/image/image-utils.d.ts

@@ -4,7 +4,15 @@ import type { ImageProps } from "../../data/entities";
  * @param props - Image component properties including gradient, mask and size
  * @returns Object containing image style variables and gradient style variables
  */
-export declare const getImageComponentStyles: (props: ImageProps) => {
+export declare const getImageComponentStyles: (props: ImageProps & {
+    imageAspectRatio: number;
+}) => {
     imageStyles: string;
-    gradientStyles: string;
+    maskPath: string;
+    linearGradientAngle: {
+        x1: string;
+        y1: string;
+        x2: string;
+        y2: string;
+    };
 };

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

@@ -1,14 +1,11 @@
-import { getActiveStateProps, getGradientStyle, getMaskStyle, getSizeStyle, prefixObject, stringifyStyles, } from "../../utils/style-utils";
+import { getActiveStateProps, getLinearGradientAngle, getMaskPath, getMaskStyle, getSizeStyle, prefixObject, stringifyStyles, } from "../../utils/style-utils";
 /**
  * Generates comprehensive styles for image components by combining gradient and size styles
  * @param props - Image component properties including gradient, mask and size
  * @returns Object containing image style variables and gradient style variables
  */
 export const getImageComponentStyles = (props) => {
-    const { gradient_colors, mask_shape, size, 
-    // max_height, // TODO: implement this. still waiting on spec
-    // override_source_lid, // TODO: Implement this once structure is defined
-    overrides, componentState, purchaseState, zStackChildStyles, } = props;
+    const { size, overrides, componentState, zStackChildStyles } = props;
     const imageStyles = {
         "--height": "unset",
         "--width": "unset",
@@ -21,21 +18,16 @@ export const getImageComponentStyles = (props) => {
         "--inset": "0",
         "--transform": "initial",
     };
-    Object.assign(imageStyles, zStackChildStyles);
-    const backgroundStyles = {
-        "--background": "none",
-    };
     const activeStateProps = getActiveStateProps(overrides, componentState);
-    Object.assign(backgroundStyles, getGradientStyle(purchaseState.colorMode, activeStateProps?.gradient_colors || gradient_colors));
+    Object.assign(imageStyles, zStackChildStyles);
     Object.assign(imageStyles, getSizeStyle({ ...size, ...activeStateProps }));
-    Object.assign(imageStyles, getMaskStyle({
-        ...mask_shape,
-        ...activeStateProps,
-    }));
+    Object.assign(imageStyles, getMaskStyle(props.mask_shape));
     const prefixedImageStyles = prefixObject(imageStyles, "image");
-    const prefixedGradientStyles = prefixObject(backgroundStyles, "image");
+    const maskPath = getMaskPath(props);
+    const linearGradientAngle = getLinearGradientAngle(props);
     return {
         imageStyles: stringifyStyles(prefixedImageStyles),
-        gradientStyles: stringifyStyles(prefixedGradientStyles),
+        maskPath,
+        linearGradientAngle,
     };
 };

package/dist/components/paywall/Node.svelte

@@ -3,6 +3,7 @@
   import {
     type ActionsProps,
     type ComponentLocalizations,
+    type ComponentState,
     type Extra,
     type PaywallComponent,
     type PurchaseStateProps,
@@ -39,6 +40,7 @@
     onAction?: (action: SupportedActions, data?: Extra) => void;
     variableDictionary?: VariableDictionary;
     zStackChildStyles?: ZStackChildStyles;
+    componentState?: ComponentState;
   }
 
   const ComponentTypes = {
@@ -116,6 +118,7 @@
       {onAction}
       {purchaseState}
       {variableDictionary}
+      {...restProps}
     />
   {/each}
 </ComponentToRender>

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

@@ -1,4 +1,4 @@
-import { type ActionsProps, type ComponentLocalizations, type Extra, type PaywallComponent, type PurchaseStateProps, type SupportedActions } from "../../data/entities";
+import { type ActionsProps, type ComponentLocalizations, type ComponentState, type Extra, type PaywallComponent, type PurchaseStateProps, type SupportedActions } from "../../data/entities";
 import type { VariableDictionary } from "../../utils/variable-utils";
 import type { ZStackChildStyles } from "../stack/stack-utils";
 import TextNode from "../text/TextNode.svelte";
@@ -12,6 +12,7 @@ interface Props extends ActionsProps, PurchaseStateProps {
     onAction?: (action: SupportedActions, data?: Extra) => void;
     variableDictionary?: VariableDictionary;
     zStackChildStyles?: ZStackChildStyles;
+    componentState?: ComponentState;
 }
 declare const Node: Component<Props, {
     /**

package/dist/components/paywall/Paywall.stories.svelte

@@ -10,7 +10,6 @@
     paywallData,
     gradientPaywallData,
     variablesPastaPaywallData,
-    stateTemplate,
     posterMakerTemplate,
     e2eTestTemplate,
     zStackTemplate,
@@ -145,7 +144,7 @@
 <Story
   name="Dynamic state style overrides"
   args={{
-    paywallData: stateTemplate,
+    paywallData: e2eTestTemplate,
     onPurchaseClicked: fn(),
     onBackClicked: fn(),
     onNavigateToUrlClicked: fn(),
@@ -157,11 +156,11 @@
   name="Dynamic state style overrides with background image"
   args={{
     paywallData: {
-      ...stateTemplate,
+      ...e2eTestTemplate,
       components_config: {
-        ...stateTemplate.components_config,
+        ...e2eTestTemplate.components_config,
         base: {
-          ...stateTemplate.components_config.base,
+          ...e2eTestTemplate.components_config.base,
           background: {
             type: "image",
             value: {
@@ -205,6 +204,68 @@
     onBackClicked: fn(),
     onNavigateToUrlClicked: fn(),
     onRestorePurchasesClicked: fn(),
+    variablesPerPackage: {
+      $rc_annual: {
+        product_name: "Yearly sub",
+        price: "$19.99",
+        price_per_period: "$19.99/1yr",
+        price_per_period_full: "$19.99/1year",
+        total_price_and_per_month: "$19.99/1yr($1.67/mo)",
+        total_price_and_per_month_full: "$19.99/1year($1.67/month)",
+        sub_price_per_month: "$1.67",
+        sub_price_per_week: "$0.42",
+        sub_duration: "1 year",
+        sub_duration_in_months: "12 months",
+        sub_period: "yearly",
+        sub_period_length: "year",
+        sub_period_abbreviated: "yr",
+        sub_relative_discount: "33% off",
+        sub_offer_duration: "undefined",
+        sub_offer_duration_2: "undefined",
+        sub_offer_price: "undefined",
+        sub_offer_price_2: "undefined",
+      },
+      $rc_monthly: {
+        product_name: "Monthly sub",
+        price: "$30.00",
+        price_per_period: "$30.00/1mo",
+        price_per_period_full: "$30.00/1month",
+        total_price_and_per_month: "$30.00",
+        total_price_and_per_month_full: "$30.00",
+        sub_price_per_month: "$30.00",
+        sub_price_per_week: "$30.00",
+        sub_duration: "1 month",
+        sub_duration_in_months: "1 month",
+        sub_period: "monthly",
+        sub_period_length: "month",
+        sub_period_abbreviated: "mo",
+        sub_relative_discount: "",
+        sub_offer_duration: "undefined",
+        sub_offer_duration_2: "undefined",
+        sub_offer_price: "undefined",
+        sub_offer_price_2: "undefined",
+      },
+      $rc_weekly: {
+        product_name: "Weekly no trial",
+        price: "$1.25",
+        price_per_period: "$1.25/1wk",
+        price_per_period_full: "$1.25/1week",
+        total_price_and_per_month: "$1.25/1wk($5.00/mo)",
+        total_price_and_per_month_full: "$1.25/1week($5.00/month)",
+        sub_price_per_month: "$5.00",
+        sub_price_per_week: "$1.25",
+        sub_duration: "1 week",
+        sub_duration_in_months: "1 week",
+        sub_period: "weekly",
+        sub_period_length: "week",
+        sub_period_abbreviated: "wk",
+        sub_relative_discount: "96% off",
+        sub_offer_duration: "undefined",
+        sub_offer_duration_2: "undefined",
+        sub_offer_price: "undefined",
+        sub_offer_price_2: "undefined",
+      },
+    },
   }}
 />
 

package/dist/components/paywall/Paywall.svelte

@@ -103,7 +103,6 @@
     }
     onPurchaseClicked?.(purchaseState.selectedPackageId);
   };
-
   const onAction = (action: SupportedActions, data?: Extra) => {
     switch (action.type) {
       case "select_package":
@@ -153,6 +152,7 @@
         labels={paywallData.components_localizations}
         {purchaseState}
         {variableDictionary}
+        {onAction}
       />
     {/if}
     {#if paywallData.components_config.base.background?.type === "color"}

package/dist/components/purchase-button/PurchaseButton.stories.svelte

@@ -3,6 +3,11 @@
   import PurchaseButton from "./PurchaseButton.svelte";
   import type { PurchaseState } from "../../data/state";
   import type { ColorMode, DimensionType } from "../../types";
+  import type { SupportedActions } from "../../data/entities";
+
+  const onAction = (action: SupportedActions) => {
+    alert(action.type);
+  };
 
   const { Story } = defineMeta({
     title: "Components/PurchaseButton",
@@ -135,5 +140,6 @@
     },
     labels: labelsData,
     type: "purchase_button",
+    onAction,
   }}
 />

package/dist/components/stack/Stack.svelte

@@ -96,6 +96,7 @@
           {onAction}
           {purchaseState}
           {variableDictionary}
+          componentState={restProps.componentState}
           zStackChildStyles={index > 0 ? zStackChildrenStyles : undefined}
         />
       {:else}
@@ -105,6 +106,7 @@
           {onAction}
           {purchaseState}
           {variableDictionary}
+          componentState={restProps.componentState}
         />
       {/if}
     {/each}

package/dist/components/stack/stack-utils.d.ts

@@ -22,9 +22,9 @@ export declare function getStackBadgeTextStyles(props: StackProps): {
     tagToRender: string;
     textStyles: string;
 };
+export declare function getZStackChildStyles(props: StackProps): ZStackChildStyles | undefined;
 export type ZStackChildStyles = {
     "--inset": string;
     "--transform": string;
     "--position": string;
 };
-export declare function getZStackChildStyles(props: StackProps): ZStackChildStyles | undefined;

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

@@ -37,7 +37,7 @@ export const getStackComponentStyles = (props) => {
     };
     const activeStateProps = getActiveStateProps(overrides, componentState);
     Object.assign(stackStyles, getComponentStyles({
-        backgroundColor: background_color,
+        background_color,
         margin,
         padding,
         border,
@@ -91,8 +91,8 @@ export function getBadgeStyles(props) {
         alignment: badge.alignment,
     }), getComponentStyles({
         ...badge,
-        backgroundColor: badge.background_color,
-        textColor: badge.color,
+        background_color: badge.background_color,
+        color: badge.color,
         colorMode: props.purchaseState.colorMode,
     }));
     if (badge.style === "overlay") {

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

@@ -43,8 +43,8 @@ export const getTextComponentStyles = (props) => {
     const tagToRender = getTextComponentTag(font_size);
     const textStyles = getTextStyles({ ...props, ...activeStateProps }, purchaseState.colorMode);
     const componentStyles = getComponentStyles({
-        backgroundColor: background_color,
-        textColor: color,
+        background_color,
+        color,
         margin,
         padding,
         colorMode: purchaseState.colorMode,
@@ -88,7 +88,7 @@ export function getTextWrapperStyles(restProps, size, background_color) {
         "--transform": "initial",
     };
     Object.assign(styles, getComponentStyles({
-        backgroundColor: background_color,
+        background_color,
         ...restProps,
     }), getSizeStyle(size));
     Object.assign(styles, restProps.zStackChildStyles);