@revenuecat/purchases-ui-js 0.0.18 → 0.0.19

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/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);

package/dist/data/entities.d.ts

@@ -79,6 +79,11 @@ interface SharedComponentProps extends PaywallComponent, ActionsProps, PurchaseS
 interface Action {
     type: "restore_purchases" | "navigate_to" | "navigate_back" | "purchase" | "select_package";
 }
+type OverrideProps<T> = {
+    states?: {
+        [state: string]: T;
+    };
+};
 export interface RestorePurchasesAction extends Action {
     type: "restore_purchases";
 }
@@ -149,9 +154,7 @@ export interface StackProps extends SharedComponentProps {
         horizontal_alignment: keyof typeof TextAlignments;
         background_color: ColorType;
     };
-    overrides?: {
-        [state: string]: StackProps;
-    };
+    overrides?: OverrideProps<StackProps>;
 }
 export interface TextNodeProps extends SharedComponentProps {
     background_color?: ColorType;
@@ -167,9 +170,7 @@ export interface TextNodeProps extends SharedComponentProps {
     type: "text";
     size: SizeType;
     variableDictionary?: VariableDictionary;
-    overrides?: {
-        [state: string]: TextNodeProps;
-    };
+    overrides?: OverrideProps<TextNodeProps>;
 }
 type ImageSourceDictionaryType = {
     original: string;
@@ -197,9 +198,7 @@ export interface ImageProps extends SharedComponentProps {
     mask_shape?: ImageMaskShapeType;
     max_height?: number;
     override_source_lid?: string;
-    overrides?: {
-        [state: string]: ImageProps;
-    };
+    overrides?: OverrideProps<ImageProps>;
 }
 export type ItemProps = {
     title: {

package/dist/stories/fixtures.d.ts

@@ -8,7 +8,6 @@ export declare const gradientPaywallData: PaywallData;
 export declare const calmPaywallData: PaywallData;
 export declare const stateTemplate: PaywallData;
 export declare const posterMakerTemplate: PaywallData;
-export declare const e2eTestTemplate: PaywallData;
 export declare const zStackTemplate: PaywallData;
 export declare const labelsData: {
     en_US: {
@@ -22,3 +21,4 @@ export declare const colorModeOverrideTemplate: PaywallData;
 export declare const paywallWithFooter: PaywallData;
 export declare const errorPaywallData: PaywallData;
 export declare const fallbackPaywallData: PaywallData;
+export declare const e2eTestTemplate: PaywallData;