@revenuecat/purchases-ui-js 0.0.16 → 0.0.18

package/dist/components/paywall/Paywall.svelte

@@ -1,21 +1,26 @@
 <script lang="ts">
   import type {
-    BaseNodeBackgroundImage,
     Extra,
     NavigateToAction,
     PaywallData,
+    StackProps,
     SupportedActions,
   } from "../../data/entities";
 
   import Node from "./Node.svelte";
   import type { PurchaseState } from "../../data/state";
-  import { findSelectedPackageId, getLabelById } from "../../utils/style-utils";
-  import { type VariableDictionary } from "../../utils/variable-utils";
+  import { findSelectedPackageId } from "../../utils/style-utils";
+  import {
+    getLabelById,
+    type VariableDictionary,
+  } from "../../utils/variable-utils";
   import {
     getBackgroundImageSource,
     getBackgroundStyles,
   } from "./paywall-utils";
   import { prefersDarkMode } from "../../stores/theme";
+  import type { ColorMode } from "../../types";
+  import Footer from "../footer/Footer.svelte";
 
   interface Props {
     paywallData: PaywallData;
@@ -26,6 +31,8 @@
     onNavigateToUrlClicked?: (url: string) => void;
     selectedLocale?: string;
     variablesPerPackage?: Record<string, VariableDictionary>;
+    preferredColorMode?: ColorMode;
+    onError?: (error: unknown) => void;
   }
 
   const {
@@ -37,6 +44,8 @@
     onVisitCustomerCenterClicked,
     selectedLocale,
     variablesPerPackage = {},
+    preferredColorMode,
+    onError,
   }: Props = $props();
 
   let purchaseState: PurchaseState = $state({
@@ -44,6 +53,7 @@
     locale: selectedLocale || paywallData.default_locale,
     defaultLocale: paywallData.default_locale,
     variablesPerPackage,
+    colorMode: preferredColorMode || ($prefersDarkMode ? "dark" : "light"),
   });
 
   let variableDictionary = $state(
@@ -81,9 +91,9 @@
   };
 
   const onSelectPackageAction = (_: SupportedActions, data?: Extra) => {
-    purchaseState.selectedPackageId = data?.packageId;
+    purchaseState.selectedPackageId = data?.packageId as string | undefined;
     if (data?.packageId) {
-      variableDictionary = variablesPerPackage[data.packageId];
+      variableDictionary = variablesPerPackage[data.packageId as string];
     }
   };
 
@@ -113,125 +123,137 @@
         break;
     }
   };
-  const colorMode = $derived($prefersDarkMode ? "dark" : "light");
 
   const backgroundStyles = $derived(
     getBackgroundStyles({
       background: paywallData.components_config.base?.background,
-      colorMode,
+      colorMode: purchaseState.colorMode,
     }),
   );
   const backgroundImgSource = $derived(
-    getBackgroundImageSource(paywallData, $prefersDarkMode ? "dark" : "light"),
+    getBackgroundImageSource(paywallData, purchaseState.colorMode),
   );
 </script>
 
-<div class="paywall">
-  <Node
-    {onAction}
-    nodeData={paywallData.components_config.base.stack}
-    labels={paywallData.components_localizations}
-    {purchaseState}
-    {variableDictionary}
-  />
-  {#if paywallData.components_config.base.background?.type === "color"}
-    <div class="paywall-background" style={backgroundStyles}></div>
-  {:else if paywallData.components_config.base.background?.type === "image"}
-    <div class="paywall-background image-container">
-      <img class="image" src={backgroundImgSource} alt="" />
-    </div>
-  {/if}
-</div>
+<svelte:boundary onerror={onError}>
+  <div class="rc-pw-paywall">
+    <Node
+      {onAction}
+      nodeData={paywallData.components_config.base.stack}
+      labels={paywallData.components_localizations}
+      {purchaseState}
+      {variableDictionary}
+    />
 
-<style>
-  /* 1. Use a more-intuitive box-sizing model */
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-    margin: 0;
-  }
+    {#if paywallData.components_config.base.sticky_footer}
+      <Footer
+        {...paywallData.components_config.base.sticky_footer}
+        stack={paywallData.components_config.base.sticky_footer
+          .stack as StackProps}
+        labels={paywallData.components_localizations}
+        {purchaseState}
+        {variableDictionary}
+      />
+    {/if}
+    {#if paywallData.components_config.base.background?.type === "color"}
+      <div class="rc-pw-paywall-background" style={backgroundStyles}></div>
+    {:else if paywallData.components_config.base.background?.type === "image"}
+      <div class="rc-pw-paywall-background rc-pw-image-container">
+        <img class="rc-pw-image" src={backgroundImgSource} alt="" />
+      </div>
+    {/if}
+  </div>
+</svelte:boundary>
 
-  .paywall {
+<style>
+  .rc-pw-paywall {
     position: relative;
+    display: block;
+    max-height: 100%;
   }
 
-  .paywall-background {
+  .rc-pw-paywall-background {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background: var(--background, none);
+    background: var(--paywall-background, none);
     z-index: -1;
   }
-  .image-container {
+  .rc-pw-image-container {
     overflow: hidden;
     background: none;
   }
 
-  .image {
+  .rc-pw-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }
 
-  body {
-    /* 3. Add accessible line-height */
-    line-height: 1.5;
-    /* 4. Improve text rendering */
-    -webkit-font-smoothing: antialiased;
-  }
-
-  /* 5. Improve media defaults */
-  img,
-  picture,
-  video,
-  canvas,
-  svg {
-    display: block;
-    max-width: 100%;
-  }
+  :global {
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      font-family: sans-serif;
+    }
+    body {
+      line-height: 1.5;
+      -webkit-font-smoothing: antialiased;
+    }
+    img,
+    picture,
+    video,
+    canvas,
+    svg {
+      display: block;
+      max-width: 100%;
+    }
 
-  /* 6. Inherit fonts for form controls */
-  input,
-  button,
-  textarea,
-  select {
-    font: inherit;
-  }
+    input,
+    button,
+    textarea,
+    select {
+      font: inherit;
+    }
+    button {
+      border: none;
+      cursor: pointer;
+      background: transparent;
+      width: fit-content;
+    }
 
-  /* 7. Avoid text overflows */
-  p,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    overflow-wrap: break-word;
-  }
+    p,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      overflow-wrap: break-word;
+    }
 
-  /* 8. Improve line wrapping */
-  p {
-    text-wrap: pretty;
-  }
+    p {
+      text-wrap: pretty;
+    }
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    text-wrap: balance;
-  }
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      text-wrap: balance;
+    }
 
-  /*
-          9. Create a root stacking context
-        */
-  #root,
-  #__next {
-    isolation: isolate;
+    #root,
+    #__next {
+      isolation: isolate;
+    }
   }
 </style>

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

@@ -1,5 +1,6 @@
 import type { PaywallData } from "../../data/entities";
 import { type VariableDictionary } from "../../utils/variable-utils";
+import type { ColorMode } from "../../types";
 declare const Paywall: import("svelte").Component<{
     paywallData: PaywallData;
     onPurchaseClicked?: (selectedPackageId: string) => void;
@@ -9,5 +10,8 @@ declare const Paywall: import("svelte").Component<{
     onNavigateToUrlClicked?: (url: string) => void;
     selectedLocale?: string;
     variablesPerPackage?: Record<string, VariableDictionary>;
+    preferredColorMode?: ColorMode;
+    onError?: (error: unknown) => void;
 }, {}, "">;
+type Paywall = ReturnType<typeof Paywall>;
 export default Paywall;

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

@@ -3,5 +3,5 @@ import type { ColorMode } from "../../types";
 export declare function getBackgroundStyles({ background, colorMode, }: {
     background?: BaseNodeBackgroundType;
     colorMode: ColorMode;
-}): string | undefined;
+}): string;
 export declare function getBackgroundImageSource(paywallData: PaywallData, colorMode: ColorMode): string;

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

@@ -1,15 +1,17 @@
-import { getColor } from "../../utils/style-utils";
+import { getColor, prefixObject, stringifyStyles, } from "../../utils/style-utils";
 export function getBackgroundStyles({ background, colorMode, }) {
-    if (!background)
-        return "";
-    if (background.type === "color") {
-        const style = getColor({
-            colorMap: background.value,
-            colorMode,
-            fallback: "transparent",
+    const styles = { "--background": "initial" };
+    if (background?.type === "color") {
+        Object.assign(styles, {
+            "--background": getColor({
+                colorMap: background.value,
+                colorMode,
+                fallback: "transparent",
+            }),
         });
-        return `--background: ${style};`;
     }
+    const prefixedStyles = prefixObject(styles, "paywall");
+    return stringifyStyles(prefixedStyles);
 }
 export function getBackgroundImageSource(paywallData, colorMode) {
     if (paywallData.components_config.base?.background?.type !== "image")

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

@@ -1,14 +1,14 @@
 <script module lang="ts">
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import PurchaseButton from "./PurchaseButton.svelte";
-  import { colorModeStoryMeta } from "../../stories/meta-templates";
+  import type { PurchaseState } from "../../data/state";
+  import type { ColorMode, DimensionType } from "../../types";
 
   const { Story } = defineMeta({
     title: "Components/PurchaseButton",
     component: PurchaseButton,
     tags: ["autodocs"],
     argTypes: {
-      colorMode: colorModeStoryMeta,
       stack: {
         control: { type: "object" },
         description: "Stack configuration for button content",
@@ -27,7 +27,8 @@
       "6gpcQ4q6T8": "Continue",
     },
   };
-  const purchaseState = {
+  const purchaseState: PurchaseState = {
+    colorMode: "light" as ColorMode,
     locale: "en_US",
     defaultLocale: "en_US",
   };
@@ -48,7 +49,6 @@
           value: "#a229f3",
         },
       },
-      border: null,
       components: [
         {
           purchaseState,
@@ -94,10 +94,10 @@
         },
       ],
       dimension: {
-        alignment: "leading",
+        alignment: "top",
         distribution: "space_between",
         type: "vertical",
-      },
+      } as DimensionType,
       id: "pbvAUBvilP",
       margin: {
         bottom: 16,
@@ -124,15 +124,14 @@
       size: {
         height: {
           type: "fit",
-          value: null,
         },
         width: {
           type: "fill",
-          value: null,
         },
       },
       spacing: 8,
       type: "stack",
+      labels: labelsData,
     },
     labels: labelsData,
     type: "purchase_button",

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

@@ -2,6 +2,7 @@
   import type { PurchaseButtonProps } from "../../data/entities";
   import Stack from "../stack/Stack.svelte";
   import { Button } from "../../index";
+  import { getPurchaseButtonStyles } from "./purchase-button-utils";
 
   const {
     stack,
@@ -9,25 +10,38 @@
     onAction,
     purchaseState,
     variableDictionary,
+    zStackChildStyles,
+    ...restProps
   }: PurchaseButtonProps = $props();
   const handleClick = () => {
     onAction && onAction({ type: "purchase" });
   };
+
+  const buttonStyles = $derived(
+    getPurchaseButtonStyles({
+      stack,
+      labels,
+      onAction,
+      purchaseState,
+      variableDictionary,
+      zStackChildStyles,
+      ...restProps,
+    }),
+  );
 </script>
 
-<Button onclick={handleClick} class="purchase-button">
+<Button
+  onclick={handleClick}
+  class="rc-pw-purchase-button"
+  style={buttonStyles}
+>
   <Stack {...stack} {labels} {purchaseState} {variableDictionary} />
 </Button>
 
 <style>
-  .purchase-button {
-    border: none;
-    cursor: pointer;
-    background: transparent;
-    padding: 0;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  .rc-pw-purchase-button {
+    position: var(--purchase-button-position, relative);
+    inset: var(--purchase-button-inset, 0);
+    transform: var(--purchase-button-transform, initial);
   }
 </style>

package/dist/components/purchase-button/PurchaseButton.svelte.d.ts

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

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

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

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

@@ -0,0 +1,20 @@
+import { prefixObject, stringifyStyles } from "../../utils/style-utils";
+export function getPurchaseButtonStyles({ 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";
+    // Prefix zStack child styles with purchase-button to prevent class overlap conflicts
+    const prefixedObject = prefixObject(zStackChildStyles || {}, "purchase-button");
+    // Define set of variables to be assigned to the purchase button
+    // Define width as an inline style
+    const assignedVariables = {
+        position: "var(--purchase-button-position, relative)",
+        inset: "var(--purchase-button-inset, 0)",
+        transform: "var(--purchase-button-transform, initial)",
+        width,
+    };
+    const purchaseButtonInlineStyles = stringifyStyles({
+        ...prefixedObject,
+        ...assignedVariables,
+    });
+    return purchaseButtonInlineStyles;
+}