@revenuecat/purchases-ui-js 0.0.17 → 0.0.19

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

@@ -10,13 +10,13 @@
     paywallData,
     gradientPaywallData,
     variablesPastaPaywallData,
-    stateTemplate,
     posterMakerTemplate,
     e2eTestTemplate,
     zStackTemplate,
     colorModeOverrideTemplate,
     errorPaywallData,
     paywallWithFooter,
+    fallbackPaywallData,
   } from "../../stories/fixtures";
   import { fn } from "@storybook/test";
   import type { VariableDictionary } from "../../utils/variable-utils";
@@ -144,7 +144,7 @@
 <Story
   name="Dynamic state style overrides"
   args={{
-    paywallData: stateTemplate,
+    paywallData: e2eTestTemplate,
     onPurchaseClicked: fn(),
     onBackClicked: fn(),
     onNavigateToUrlClicked: fn(),
@@ -156,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: {
@@ -204,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",
+      },
+    },
   }}
 />
 
@@ -243,6 +305,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={{

package/dist/components/paywall/Paywall.svelte

@@ -9,8 +9,11 @@
 
   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,
@@ -100,7 +103,6 @@
     }
     onPurchaseClicked?.(purchaseState.selectedPackageId);
   };
-
   const onAction = (action: SupportedActions, data?: Extra) => {
     switch (action.type) {
       case "select_package":
@@ -133,7 +135,7 @@
 </script>
 
 <svelte:boundary onerror={onError}>
-  <div class="paywall">
+  <div class="rc-pw-paywall">
     <Node
       {onAction}
       nodeData={paywallData.components_config.base.stack}
@@ -150,107 +152,108 @@
         labels={paywallData.components_localizations}
         {purchaseState}
         {variableDictionary}
+        {onAction}
       />
     {/if}
     {#if paywallData.components_config.base.background?.type === "color"}
-      <div class="paywall-background" style={backgroundStyles}></div>
+      <div class="rc-pw-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 class="rc-pw-paywall-background rc-pw-image-container">
+        <img class="rc-pw-image" src={backgroundImgSource} alt="" />
       </div>
     {/if}
   </div>
 </svelte:boundary>
 
 <style>
-  /* 1. Use a more-intuitive box-sizing model */
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-    margin: 0;
-  }
-
-  .paywall {
+  .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-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,6 +1,13 @@
 <script module lang="ts">
   import { defineMeta } from "@storybook/addon-svelte-csf";
   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",
@@ -25,7 +32,8 @@
       "6gpcQ4q6T8": "Continue",
     },
   };
-  const purchaseState = {
+  const purchaseState: PurchaseState = {
+    colorMode: "light" as ColorMode,
     locale: "en_US",
     defaultLocale: "en_US",
   };
@@ -46,7 +54,6 @@
           value: "#a229f3",
         },
       },
-      border: null,
       components: [
         {
           purchaseState,
@@ -92,10 +99,10 @@
         },
       ],
       dimension: {
-        alignment: "leading",
+        alignment: "top",
         distribution: "space_between",
         type: "vertical",
-      },
+      } as DimensionType,
       id: "pbvAUBvilP",
       margin: {
         bottom: 16,
@@ -122,17 +129,17 @@
       size: {
         height: {
           type: "fit",
-          value: null,
         },
         width: {
           type: "fill",
-          value: null,
         },
       },
       spacing: 8,
       type: "stack",
+      labels: labelsData,
     },
     labels: labelsData,
     type: "purchase_button",
+    onAction,
   }}
 />

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/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;
+}