@revenuecat/purchases-ui-js 0.0.17 → 0.0.18

package/dist/components/button/Button.svelte

@@ -18,16 +18,3 @@
 <button onclick={handleClick} class={clz} disabled={!onclick} {style}>
   {@render children?.()}
 </button>
-
-<style>
-  button {
-    border: none;
-    cursor: pointer;
-    background: transparent;
-    padding: 0;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-</style>

package/dist/components/button/ButtonNode.stories.svelte

@@ -1,7 +1,13 @@
 <script module lang="ts">
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import ButtonNode from "./ButtonNode.svelte";
-  import type { SupportedActions } from "../../data/entities";
+  import type {
+    ComponentTypes,
+    StackProps,
+    SupportedActions,
+  } from "../../data/entities";
+  import type { PurchaseState } from "../../data/state";
+  import type { ColorMode } from "../../types";
 
   const onAction = (action: SupportedActions) => {
     alert(action.type);
@@ -42,10 +48,10 @@
     },
   });
 
-  const purchaseState = {
+  const purchaseState: PurchaseState = {
     locale: "en_US",
     defaultLocale: "en_US",
-    colorMode: "light",
+    colorMode: "light" as ColorMode,
   };
 
   export const labelsData = {
@@ -58,7 +64,7 @@
   };
 
   const textProps = (id: number) => ({
-    type: "text",
+    type: "text" as ComponentTypes,
     name: "Button Text",
     components: [],
     id: "button-text-1",
@@ -83,7 +89,7 @@
     },
   });
 
-  const baseStackProps = {
+  const baseStackProps: Partial<StackProps> = {
     type: "stack",
     size: { width: { type: "fill" }, height: { type: "fill" } },
     labels: labelsData,
@@ -116,7 +122,8 @@
     stack: {
       ...baseStackProps,
       components: [textProps(1)],
-    },
+      purchaseState,
+    } as StackProps,
     purchaseState: purchaseState,
     onAction,
   }}
@@ -146,7 +153,7 @@
         light: { type: "hex", value: "#2E7D32" },
       },
       components: [textProps(2)],
-    },
+    } as StackProps,
     purchaseState: purchaseState,
   }}
 />
@@ -178,7 +185,7 @@
         light: { type: "hex", value: "#D32F2F" },
       },
       components: [textProps(3)],
-    },
+    } as StackProps,
     purchaseState: purchaseState,
   }}
 />
@@ -205,7 +212,7 @@
         light: { type: "hex", value: "#4A90E2" },
       },
       components: [textProps(4)],
-    },
+    } as StackProps,
     purchaseState: purchaseState,
   }}
 />

package/dist/components/button/ButtonNode.svelte

@@ -2,6 +2,7 @@
   import Button from "./Button.svelte";
   import type { ButtonNodeProps } from "../../data/entities";
   import Stack from "../stack/Stack.svelte";
+  import { getButtonStyles } from "./button-utils";
 
   const {
     stack,
@@ -10,12 +11,36 @@
     labels,
     purchaseState,
     variableDictionary,
+    ...restProps
   }: ButtonNodeProps = $props();
   const onClick = () => {
     onAction && onAction(action);
   };
+
+  const buttonStyles = $derived(
+    getButtonStyles({
+      stack,
+      action,
+      onAction,
+      labels,
+      purchaseState,
+      variableDictionary,
+      ...restProps,
+    }),
+  );
 </script>
 
-<Button onclick={onClick}>
+<Button onclick={onClick} style={buttonStyles} class={"rc-pw-button"}>
   <Stack {...stack} {labels} {purchaseState} {variableDictionary} />
 </Button>
+
+<style>
+  .rc-pw-button {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    background: initial;
+    border: initial;
+    text-align: initial;
+  }
+</style>

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

@@ -0,0 +1,2 @@
+import type { ButtonNodeProps } from "../../data/entities";
+export declare function getButtonStyles({ stack, zStackChildStyles }: ButtonNodeProps): string;

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

@@ -0,0 +1,19 @@
+import { prefixObject, stringifyStyles } from "../../utils/style-utils";
+export function getButtonStyles({ stack, zStackChildStyles }) {
+    // Get the width of the inner stack to adjust to the outer button wrapper
+    const width = stack?.size?.width?.type === "fill" ? "100%" : "fit-content";
+    // Define set of variables to be assigned to the button
+    // Define width as an inline style
+    const prefixedObject = prefixObject(zStackChildStyles || {}, "button");
+    const assignedVariables = {
+        position: "var(--button-position, relative)",
+        inset: "var(--button-inset, 0)",
+        transform: "var(--button-transform, initial)",
+        width,
+    };
+    const buttonInlineStyles = stringifyStyles({
+        ...prefixedObject,
+        ...assignedVariables,
+    });
+    return buttonInlineStyles;
+}

package/dist/components/footer/Footer.stories.svelte

@@ -36,6 +36,8 @@
           value: "#6c6c6cFF",
         },
       },
+      labels: labelsData,
+      purchaseState,
       border: undefined,
       components: [
         {

package/dist/components/footer/Footer.svelte

@@ -6,15 +6,15 @@
     $props();
 </script>
 
-<div class="footer" {id}>
+<div class="rc-pw-footer" {id}>
   <Stack {...stack} {labels} {purchaseState} {variableDictionary} />
 </div>
 
 <style>
-  .footer {
-    position: absolute;
+  .rc-pw-footer {
+    position: sticky;
     bottom: 0;
-    left: 0;
-    right: 0;
+    transform: translateY(50%);
+    width: 100%;
   }
 </style>

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

@@ -1,9 +1,13 @@
 <script module lang="ts">
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import Image from "./Image.svelte";
+  import type { PurchaseState } from "../../data/state";
+  import type { ColorMode } from "../../types";
 
-  const purchaseState = {
-    colorMode: "light",
+  const purchaseState: PurchaseState = {
+    colorMode: "light" as ColorMode,
+    locale: "en_US",
+    defaultLocale: "en_US",
   };
 
   const { Story } = defineMeta({

package/dist/components/image/Image.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { getImageComponentStyles } from "./image-utils";
-  import { stringifyStyles } from "../../utils/style-utils";
   import type { ImageProps } from "../../data/entities";
 
   const { id, source, purchaseState, ...restProps }: ImageProps = $props();
@@ -14,8 +13,6 @@
       ...restProps,
     }),
   );
-  const gradientStylesString = $derived(stringifyStyles(gradientStyles));
-  const imageStylesString = $derived(stringifyStyles(imageStyles));
 
   const imageSource = $derived.by(() => {
     const colorMode = purchaseState.colorMode;
@@ -28,36 +25,42 @@
 </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={imageSource} 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-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,4 +1,4 @@
-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
@@ -8,17 +8,34 @@ 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, } = 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(purchaseState.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

@@ -2,8 +2,10 @@
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import Package from "./Package.svelte";
   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)}`);
   };
 
@@ -31,7 +33,8 @@
       QZ4ZmYsqjN: "$1.99",
     },
   };
-  const purchaseState = {
+  const purchaseState: PurchaseState = {
+    colorMode: "light" as ColorMode,
     locale: "en_US",
     defaultLocale: "en_US",
   };
@@ -230,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/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,29 +9,41 @@
     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 Timeline from "../timeline/Timeline.svelte";
+  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,
@@ -40,21 +51,63 @@
     footer: Footer,
     timeline: Timeline,
   };
-  if (!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 MyComponent = $derived(ComponentTypes[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 PaywallComponent[] as childData}
     <Self
@@ -65,4 +118,4 @@
       {variableDictionary}
     />
   {/each}
-</MyComponent>
+</ComponentToRender>

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

@@ -1,11 +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";
+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: import("svelte").Component<Props, {}, "">;
+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

@@ -17,6 +17,7 @@
     colorModeOverrideTemplate,
     errorPaywallData,
     paywallWithFooter,
+    fallbackPaywallData,
   } from "../../stories/fixtures";
   import { fn } from "@storybook/test";
   import type { VariableDictionary } from "../../utils/variable-utils";
@@ -243,6 +244,19 @@
   }}
 />
 
+<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={{