@revenuecat/purchases-ui-js 0.0.16 → 0.0.18

package/dist/components/image/Image.svelte

@@ -1,48 +1,66 @@
 <script lang="ts">
   import { getImageComponentStyles } from "./image-utils";
-  import { stringifyStyles } from "../../utils/style-utils";
   import type { ImageProps } from "../../data/entities";
 
-  const { id, colorMode, source, ...restProps }: ImageProps = $props();
+  const { id, source, purchaseState, ...restProps }: ImageProps = $props();
 
   const { gradientStyles, imageStyles } = $derived(
-    getImageComponentStyles({ id, colorMode, source, ...restProps }),
+    getImageComponentStyles({
+      id,
+      colorMode: purchaseState.colorMode,
+      source,
+      purchaseState,
+      ...restProps,
+    }),
   );
-  const gradientStylesString = $derived(stringifyStyles(gradientStyles));
-  const imageStylesString = $derived(stringifyStyles(imageStyles));
+
+  const imageSource = $derived.by(() => {
+    const colorMode = purchaseState.colorMode;
+    if (source[colorMode]?.original) {
+      return source[colorMode].original;
+    } else {
+      return source["light"].original as string;
+    }
+  });
 </script>
 
 <div
-  class="image-container"
-  id={`image-container-${id}`}
-  style={imageStylesString}
+  class="rc-pw-image-container"
+  id={`rc-pw-image-container-${id}`}
+  style={imageStyles}
 >
-  <img class="image" src={source[colorMode || "light"]?.original} alt="" {id} />
-  <span class="image-overlay" style={gradientStylesString}></span>
+  <img class="rc-pw-image" src={imageSource} alt="" {id} />
+  <span class="rc-pw-image-overlay" style={gradientStyles}></span>
 </div>
 
 <style>
-  .image-container {
+  .rc-pw-image-container {
     position: relative;
-    height: var(--height, unset);
-    width: var(--width, unset);
     overflow: hidden;
-    border-radius: var(--corner-radius, unset);
-    clip-path: var(--clip-path, unset);
+    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);
     display: flex;
-    flex: var(--flex, 1 1 auto);
+    flex: var(--image-flex, 1 1 auto);
+    position: var(--image-position, relative);
+    inset: var(--image-inset, 0);
+    transform: var(--image-transform, initial);
+    height: var(--image-height, initial);
+    width: var(--image-width, initial);
   }
 
-  .image {
+  .rc-pw-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }
 
-  .image-overlay {
+  .rc-pw-image-overlay {
     position: absolute;
     inset: 0;
-    background: var(--background, none);
+    background: var(--image-background, none);
   }
 </style>

package/dist/components/image/Image.svelte.d.ts

@@ -1,3 +1,4 @@
 import type { ImageProps } from "../../data/entities";
 declare const Image: import("svelte").Component<ImageProps, {}, "">;
+type Image = ReturnType<typeof Image>;
 export default Image;

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

@@ -1,20 +1,10 @@
 import type { ImageProps } from "../../data/entities";
-type ImageStyleVariables = {
-    "--height": string;
-    "--width": string;
-    "--clip-path": string;
-    "--corner-radius": string;
-};
-type GradientStyleVariables = {
-    "--background": string;
-};
 /**
  * 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 declare const getImageComponentStyles: (props: ImageProps) => {
-    imageStyles: ImageStyleVariables;
-    gradientStyles: GradientStyleVariables;
+    imageStyles: string;
+    gradientStyles: string;
 };
-export {};

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

@@ -1,24 +1,41 @@
-import { getActiveStateProps, getGradientStyle, getMaskStyle, getSizeStyle, } from "../../utils/style-utils";
+import { getActiveStateProps, getGradientStyle, 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, colorMode, mask_shape, size, 
+    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, } = props;
+    overrides, componentState, purchaseState, zStackChildStyles, } = props;
+    const imageStyles = {
+        "--height": "unset",
+        "--width": "unset",
+        "--clip-path": "none",
+        "--border-end-start-radius": "unset",
+        "--border-end-end-radius": "unset",
+        "--border-start-start-radius": "unset",
+        "--border-start-end-radius": "unset",
+        "--position": "relative",
+        "--inset": "0",
+        "--transform": "initial",
+    };
+    Object.assign(imageStyles, zStackChildStyles);
+    const backgroundStyles = {
+        "--background": "none",
+    };
     const activeStateProps = getActiveStateProps(overrides, componentState);
-    const gradientStyles = getGradientStyle(colorMode, activeStateProps?.gradient_colors || gradient_colors);
-    const sizeStyles = getSizeStyle({ ...size, ...activeStateProps });
-    const maskStyles = getMaskStyle({
+    Object.assign(backgroundStyles, getGradientStyle(purchaseState.colorMode, activeStateProps?.gradient_colors || gradient_colors));
+    Object.assign(imageStyles, getSizeStyle({ ...size, ...activeStateProps }));
+    Object.assign(imageStyles, getMaskStyle({
         ...mask_shape,
         ...activeStateProps,
-    });
-    const imageStylesObject = {
-        ...sizeStyles,
-        ...maskStyles,
+    }));
+    const prefixedImageStyles = prefixObject(imageStyles, "image");
+    const prefixedGradientStyles = prefixObject(backgroundStyles, "image");
+    return {
+        imageStyles: stringifyStyles(prefixedImageStyles),
+        gradientStyles: stringifyStyles(prefixedGradientStyles),
     };
-    return { imageStyles: imageStylesObject, gradientStyles };
 };

package/dist/components/package/Package.stories.svelte

@@ -1,10 +1,11 @@
 <script module lang="ts">
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import Package from "./Package.svelte";
-  import { colorModeStoryMeta } from "../../stories/meta-templates";
   import type { Extra, SupportedActions } from "../../data/entities";
+  import type { PurchaseState } from "../../data/state";
+  import type { ColorMode } from "../../types";
 
-  const onAction = (action: SupportedActions, data: Extra) => {
+  const onAction = (action: SupportedActions, data?: Extra) => {
     alert(`${action.type} ${JSON.stringify(data)}`);
   };
 
@@ -13,7 +14,6 @@
     component: Package,
     tags: ["autodocs"],
     argTypes: {
-      colorMode: colorModeStoryMeta,
       stack: {
         control: { type: "object" },
         description: "Stack configuration for package content",
@@ -33,7 +33,8 @@
       QZ4ZmYsqjN: "$1.99",
     },
   };
-  const purchaseState = {
+  const purchaseState: PurchaseState = {
+    colorMode: "light" as ColorMode,
     locale: "en_US",
     defaultLocale: "en_US",
   };
@@ -232,7 +233,6 @@
       size: {
         height: {
           type: "fit",
-          value: null,
         },
         width: {
           type: "fixed",

package/dist/components/package/Package.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { PackageProps, SelectPackageAction } from "../../data/entities";
   import Stack from "../stack/Stack.svelte";
+  import { prefixObject, stringifyStyles } from "../../utils/style-utils";
 
   const {
     stack,
@@ -10,8 +11,8 @@
     onAction,
     purchaseState,
     variableDictionary,
+    zStackChildStyles,
   }: PackageProps = $props();
-
   const onPackageClick = (evt: MouseEvent) => {
     evt.preventDefault();
     evt.stopPropagation();
@@ -28,13 +29,18 @@
   const componentState = $derived({
     selected: purchaseState?.selectedPackageId === package_id,
   });
+
+  const styles = $derived(
+    stringifyStyles(prefixObject(zStackChildStyles, "package")),
+  );
 </script>
 
 <button
-  class="package"
+  class="rc-pw-package"
   class:selected={componentState.selected}
   {id}
   onclick={onPackageClick}
+  style={styles}
 >
   <Stack
     {...stack}
@@ -47,13 +53,16 @@
 </button>
 
 <style>
-  .package {
+  .rc-pw-package {
     width: 100%;
     display: flex;
     margin: 0;
     padding: 0;
-    background: unset;
-    border: unset;
-    text-align: unset;
+    background: initial;
+    border: initial;
+    text-align: initial;
+    position: var(--package-position, relative);
+    inset: var(--package-inset, 0);
+    transform: var(--package-transform, initial);
   }
 </style>

package/dist/components/package/Package.svelte.d.ts

@@ -1,3 +1,4 @@
 import type { PackageProps } from "../../data/entities";
 declare const Package: import("svelte").Component<PackageProps, {}, "">;
+type Package = ReturnType<typeof Package>;
 export default Package;

package/dist/components/paywall/Node.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { Stack, Image, PurchaseButton, Package, Footer } from "../..";
   import Self from "./Node.svelte";
   import {
     type ActionsProps,
@@ -10,46 +9,107 @@
     type SupportedActions,
   } from "../../data/entities";
   import { prefersDarkMode } from "../../stores/theme";
-  import ButtonNode from "../button/ButtonNode.svelte";
-  import TextNode from "../text/TextNode.svelte";
   import type { VariableDictionary } from "../../utils/variable-utils";
+  import type { ZStackChildStyles } from "../stack/stack-utils";
+  import TextNode from "../text/TextNode.svelte";
+  import {
+    Footer,
+    Image,
+    Package,
+    PurchaseButton,
+    Stack,
+    Timeline,
+  } from "../..";
+  import ButtonNode from "../button/ButtonNode.svelte";
+  import type { Component } from "svelte";
+
+  type SupportedComponents =
+    | TextNode
+    | Stack
+    | Image
+    | ButtonNode
+    | PurchaseButton
+    | Package
+    | Footer
+    | Timeline;
 
   interface Props extends ActionsProps, PurchaseStateProps {
     nodeData: PaywallComponent;
     labels: ComponentLocalizations;
     onAction?: (action: SupportedActions, data?: Extra) => void;
     variableDictionary?: VariableDictionary;
+    zStackChildStyles?: ZStackChildStyles;
   }
 
-  const {
-    nodeData,
-    labels,
-    onAction,
-    purchaseState,
-    variableDictionary,
-  }: Props = $props();
-
   const ComponentTypes = {
-    text: TextNode,
     stack: Stack,
+    text: TextNode,
     image: Image,
     button: ButtonNode,
     purchase_button: PurchaseButton,
     package: Package,
     footer: Footer,
+    timeline: Timeline,
   };
-  const MyComponent = $derived(ComponentTypes[nodeData.type]);
+
+  /**
+   * This function returns the component class and the node data for a given paywall component.
+   * It first checks if the component type is supported and returns the corresponding component class.
+   * If not supported, it checks if the fallback component type is supported and returns the corresponding component class,
+   * finally it throws an error if the component type is not supported and the fallback component type is not supported.
+   * @param nodeData:PaywallComponent - the PaywallComponent object representing a Node in the paywall
+   * @returns [Component<SupportedComponents>, PaywallComponent] - a tuple containing the component class and the node data
+   * @throws Error - if the component type and the fallback component type are not supported
+   */
+  export const getComponentClass: (
+    nodeData: PaywallComponent,
+  ) => [Component<SupportedComponents>, PaywallComponent] = (
+    nodeData: PaywallComponent,
+  ) => {
+    if (ComponentTypes[nodeData.type]) {
+      return [
+        ComponentTypes[nodeData.type] as Component<SupportedComponents>,
+        nodeData,
+      ];
+    }
+
+    const { fallback } = nodeData;
+    if (fallback && ComponentTypes[fallback?.type]) {
+      return [
+        ComponentTypes[fallback.type] as Component<SupportedComponents>,
+        fallback,
+      ];
+    }
+
+    // manually throwing error for this specific case until
+    // it's handled with fallback components
+    throw new Error(`Invalid component type: ${nodeData.type}`);
+  };
+
+  const {
+    nodeData,
+    labels,
+    onAction,
+    purchaseState,
+    variableDictionary,
+    zStackChildStyles,
+    ...restProps
+  }: Props = $props();
+
+  const [ComponentToRender, dataToUse] = $derived(getComponentClass(nodeData));
 </script>
 
-<MyComponent
-  {...(nodeData as any) || {}}
+<ComponentToRender
+  {...(dataToUse as any) || {}}
   {labels}
   prefersDarkMode={$prefersDarkMode}
   {onAction}
   {purchaseState}
   {variableDictionary}
+  {zStackChildStyles}
+  {...restProps}
 >
-  {#each nodeData.components as childData}
+  {#each nodeData.components as PaywallComponent[] as childData}
     <Self
       nodeData={childData}
       {labels}
@@ -58,4 +118,4 @@
       {variableDictionary}
     />
   {/each}
-</MyComponent>
+</ComponentToRender>

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

@@ -1,9 +1,28 @@
 import { type ActionsProps, type ComponentLocalizations, type Extra, type PaywallComponent, type PurchaseStateProps, type SupportedActions } from "../../data/entities";
 import type { VariableDictionary } from "../../utils/variable-utils";
-declare const Node: import("svelte").Component<ActionsProps & PurchaseStateProps & {
+import type { ZStackChildStyles } from "../stack/stack-utils";
+import TextNode from "../text/TextNode.svelte";
+import { Footer, Image, Package, PurchaseButton, Stack, Timeline } from "../..";
+import ButtonNode from "../button/ButtonNode.svelte";
+import type { Component } from "svelte";
+type SupportedComponents = TextNode | Stack | Image | ButtonNode | PurchaseButton | Package | Footer | Timeline;
+interface Props extends ActionsProps, PurchaseStateProps {
     nodeData: PaywallComponent;
     labels: ComponentLocalizations;
     onAction?: (action: SupportedActions, data?: Extra) => void;
     variableDictionary?: VariableDictionary;
-}, {}, "">;
+    zStackChildStyles?: ZStackChildStyles;
+}
+declare const Node: Component<Props, {
+    /**
+       * This function returns the component class and the node data for a given paywall component.
+       * It first checks if the component type is supported and returns the corresponding component class.
+       * If not supported, it checks if the fallback component type is supported and returns the corresponding component class,
+       * finally it throws an error if the component type is not supported and the fallback component type is not supported.
+       * @param nodeData:PaywallComponent - the PaywallComponent object representing a Node in the paywall
+       * @returns [Component<SupportedComponents>, PaywallComponent] - a tuple containing the component class and the node data
+       * @throws Error - if the component type and the fallback component type are not supported
+       */ getComponentClass: (nodeData: PaywallComponent) => [Component<SupportedComponents>, PaywallComponent];
+}, "">;
+type Node = ReturnType<typeof Node>;
 export default Node;

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

@@ -12,8 +12,15 @@
     variablesPastaPaywallData,
     stateTemplate,
     posterMakerTemplate,
+    e2eTestTemplate,
+    zStackTemplate,
+    colorModeOverrideTemplate,
+    errorPaywallData,
+    paywallWithFooter,
+    fallbackPaywallData,
   } from "../../stories/fixtures";
   import { fn } from "@storybook/test";
+  import type { VariableDictionary } from "../../utils/variable-utils";
 
   const { Story } = defineMeta({
     title: "Example/Paywall",
@@ -31,7 +38,7 @@
     paywallData: paywallData,
     onPurchaseClicked: fn(),
     onBackClicked: fn(),
-    onNavigateToClicked: fn(),
+    onNavigateToUrlClicked: fn(),
     onRestorePurchasesClicked: fn(),
   }}
 />
@@ -43,7 +50,7 @@
     selectedLocale: "it_IT",
     onPurchaseClicked: fn(),
     onBackClicked: fn(),
-    onNavigateToClicked: fn(),
+    onNavigateToUrlClicked: fn(),
     onRestorePurchasesClicked: fn(),
   }}
 />
@@ -55,7 +62,7 @@
     selectedLocale: "en_US",
     onPurchaseClicked: fn(),
     onBackClicked: fn(),
-    onNavigateToClicked: fn(),
+    onNavigateToUrlClicked: fn(),
     onRestorePurchasesClicked: fn(),
   }}
 />
@@ -67,7 +74,7 @@
     selectedLocale: "en_US",
     onPurchaseClicked: fn(),
     onBackClicked: fn(),
-    onNavigateToClicked: fn(),
+    onNavigateToUrlClicked: fn(),
     onRestorePurchasesClicked: fn(),
   }}
 />
@@ -79,7 +86,7 @@
     selectedLocale: "en_US",
     onPurchaseClicked: fn(),
     onBackClicked: fn(),
-    onNavigateToClicked: fn(),
+    onNavigateToUrlClicked: fn(),
     onRestorePurchasesClicked: fn(),
   }}
 />
@@ -90,24 +97,24 @@
     selectedLocale: "en_US",
     onPurchaseClicked: fn(),
     onBackClicked: fn(),
-    onNavigateToClicked: fn(),
+    onNavigateToUrlClicked: fn(),
     onRestorePurchasesClicked: fn(),
     variablesPerPackage: {
       trial: {
         product_name: "This was a variable: Product A",
         price: "$19.99",
         price_per_period: "$19.99/yr",
-      },
+      } as VariableDictionary,
       $rc_weekly: {
         product_name: "This was a variable: Product B",
         price: "$29.99",
         price_per_period: "$29.99/yr",
-      },
+      } as VariableDictionary,
       $rc_daily: {
         product_name: "This was a variable: Product C",
         price: "$39.99",
-        price_per_period: "$39.99/yr",
-      },
+        price_per_period: "$19.99/yr",
+      } as VariableDictionary,
     },
   }}
 />
@@ -119,7 +126,7 @@
     selectedLocale: "en_US",
     onPurchaseClicked: fn(),
     onBackClicked: fn(),
-    onNavigateToClicked: fn(),
+    onNavigateToUrlClicked: fn(),
     onRestorePurchasesClicked: fn(),
   }}
 />
@@ -130,7 +137,7 @@
     paywallData: gradientPaywallData,
     onPurchaseClicked: fn(),
     onBackClicked: fn(),
-    onNavigateToClicked: fn(),
+    onNavigateToUrlClicked: fn(),
     onRestorePurchasesClicked: fn(),
   }}
 />
@@ -141,7 +148,7 @@
     paywallData: stateTemplate,
     onPurchaseClicked: fn(),
     onBackClicked: fn(),
-    onNavigateToClicked: fn(),
+    onNavigateToUrlClicked: fn(),
     onRestorePurchasesClicked: fn(),
   }}
 />
@@ -174,7 +181,7 @@
     },
     onPurchaseClicked: fn(),
     onBackClicked: fn(),
-    onNavigateToClicked: fn(),
+    onNavigateToUrlClicked: fn(),
     onRestorePurchasesClicked: fn(),
   }}
 />
@@ -185,7 +192,78 @@
     paywallData: posterMakerTemplate,
     onPurchaseClicked: fn(),
     onBackClicked: fn(),
-    onNavigateToClicked: fn(),
+    onNavigateToUrlClicked: fn(),
+    onRestorePurchasesClicked: fn(),
+  }}
+/>
+
+<Story
+  name="E2E Test with variables"
+  args={{
+    paywallData: e2eTestTemplate,
+    onPurchaseClicked: fn(),
+    onBackClicked: fn(),
+    onNavigateToUrlClicked: fn(),
+    onRestorePurchasesClicked: fn(),
+  }}
+/>
+
+<Story
+  name="Z Stack"
+  args={{
+    paywallData: zStackTemplate,
+    onPurchaseClicked: fn(),
+    onBackClicked: fn(),
+    onNavigateToUrlClicked: fn(),
+    onRestorePurchasesClicked: fn(),
+  }}
+/>
+
+<Story
+  name="Color Mode Override"
+  args={{
+    paywallData: colorModeOverrideTemplate,
+    onPurchaseClicked: fn(),
+    onBackClicked: fn(),
+    onNavigateToUrlClicked: fn(),
+    onRestorePurchasesClicked: fn(),
+    preferredColorMode: "dark",
+  }}
+/>
+
+<Story
+  name="Invalid component type"
+  args={{
+    paywallData: errorPaywallData,
+    onPurchaseClicked: fn(),
+    onBackClicked: fn(),
+    onNavigateToUrlClicked: fn(),
+    onRestorePurchasesClicked: fn(),
+    preferredColorMode: "dark",
+    onError: (error: unknown) => alert(`Error - ${error}`),
+  }}
+/>
+
+<Story
+  name="Fallback Paywall"
+  args={{
+    paywallData: fallbackPaywallData,
+    onPurchaseClicked: fn(),
+    onBackClicked: fn(),
+    onNavigateToUrlClicked: fn(),
+    onRestorePurchasesClicked: fn(),
+    preferredColorMode: "dark",
+    onError: (error: unknown) => console.error(`Error - ${error}`),
+  }}
+/>
+
+<Story
+  name="Sticky Footer"
+  args={{
+    paywallData: paywallWithFooter,
+    onPurchaseClicked: fn(),
+    onBackClicked: fn(),
+    onNavigateToUrlClicked: fn(),
     onRestorePurchasesClicked: fn(),
   }}
 />