@revenuecat/purchases-ui-js 2.1.0 → 2.1.1

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

@@ -2,7 +2,6 @@
   import Package from "./Package.svelte";
   import { componentDecorator } from "../../stories/component-decorator";
   import { localizationDecorator } from "../../stories/localization-decorator";
-  import type { PackageProps } from "../../types/components/package";
   import { defineMeta } from "@storybook/addon-svelte-csf";
 
   const defaultLocale = "en_US";

package/dist/components/package/Package.svelte

@@ -8,10 +8,15 @@
   } from "../../stores/variables";
   import type { PackageProps } from "../../types/components/package";
   import { derived } from "svelte/store";
+  import {
+    getPackageInfoContext,
+    setPackageInfoContext,
+  } from "../../stores/packageInfo";
 
   const { stack, package_id }: PackageProps = $props();
 
-  const { selectedPackageId, variablesPerPackage } = getPaywallContext();
+  const { selectedPackageId, variablesPerPackage, infoPerPackage } =
+    getPaywallContext();
 
   setSelectedStateContext(
     derived(selectedPackageId, (value) => value === package_id),
@@ -27,6 +32,13 @@
     (fallback) => $variablesPerPackage?.[package_id] ?? fallback,
   );
   setVariablesContext(variables);
+
+  const fallbackPackageInfo = getPackageInfoContext();
+  const packageInfo = derived(
+    fallbackPackageInfo,
+    (fallback) => $infoPerPackage?.[package_id] ?? fallback,
+  );
+  setPackageInfoContext(packageInfo);
 </script>
 
 <Stack {...stack} onclick={onPackageClick} />

package/dist/components/paywall/Paywall.svelte

@@ -12,7 +12,7 @@
   import type { SheetProps } from "../../types/components/sheet";
   import type { PaywallData } from "../../types/paywall";
   import type { UIConfig } from "../../types/ui-config";
-  import type { VariableDictionary } from "../../types/variables";
+  import type { PackageInfo, VariableDictionary } from "../../types/variables";
   import { mapBackground } from "../../utils/background-utils";
   import { css } from "../../utils/base-utils";
   import { registerFonts } from "../../utils/font-utils";
@@ -21,11 +21,16 @@
   import { derived, readable, writable } from "svelte/store";
   import Stack from "../stack/Stack.svelte";
   import Sheet from "./Sheet.svelte";
+  import {
+    type PackageInfoStore,
+    setPackageInfoContext,
+  } from "../../stores/packageInfo";
 
   interface Props {
     paywallData: PaywallData;
     selectedLocale?: string;
     variablesPerPackage?: Record<string, VariableDictionary>;
+    infoPerPackage?: Record<string, PackageInfo>;
     uiConfig: UIConfig;
     preferredColorMode?: ColorMode;
     onPurchaseClicked?: (selectedPackageId: string) => void;
@@ -41,6 +46,7 @@
     paywallData,
     selectedLocale,
     variablesPerPackage = {},
+    infoPerPackage = {},
     preferredColorMode,
     onPurchaseClicked,
     onBackClicked,
@@ -118,6 +124,7 @@
   setPaywallContext({
     selectedPackageId,
     variablesPerPackage: readable(variablesPerPackage),
+    infoPerPackage: readable(infoPerPackage),
     onPurchase,
     onButtonAction,
     uiConfig,
@@ -130,6 +137,13 @@
 
   setVariablesContext(variables);
 
+  const packageInfo: PackageInfoStore = derived(
+    selectedPackageId,
+    (packageId) => infoPerPackage[packageId || ""],
+  );
+
+  setPackageInfoContext(packageInfo);
+
   const style = $derived(
     css({
       ...mapBackground(colorMode, null, base.background),
@@ -192,10 +206,12 @@
       padding: 0;
       font-family: sans-serif;
     }
+
     body {
       line-height: 1.5;
       -webkit-font-smoothing: antialiased;
     }
+
     img,
     picture,
     video,
@@ -211,6 +227,7 @@
     select {
       font: inherit;
     }
+
     p,
     h1,
     h2,

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

@@ -1,11 +1,12 @@
 import type { ColorMode } from "../../types";
 import type { PaywallData } from "../../types/paywall";
 import type { UIConfig } from "../../types/ui-config";
-import type { VariableDictionary } from "../../types/variables";
+import type { PackageInfo, VariableDictionary } from "../../types/variables";
 interface Props {
     paywallData: PaywallData;
     selectedLocale?: string;
     variablesPerPackage?: Record<string, VariableDictionary>;
+    infoPerPackage?: Record<string, PackageInfo>;
     uiConfig: UIConfig;
     preferredColorMode?: ColorMode;
     onPurchaseClicked?: (selectedPackageId: string) => void;

package/dist/components/text/TextNode.stories.svelte

@@ -3,7 +3,7 @@
   import { localizationDecorator } from "../../stories/localization-decorator";
   import { variablesDecorator } from "../../stories/variables-decorator";
   import type { Localizations } from "../../types/localization";
-  import type { VariableDictionary } from "../../types/variables";
+  import type { PackageInfo, VariableDictionary } from "../../types/variables";
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import { VARIABLES } from "../paywall/fixtures/variables";
   import { DEFAULT_SPACING } from "../../utils/constants";
@@ -52,6 +52,18 @@
     "product.price": "$39.99",
     "product.price_per_period": "$39.99/yr",
   } satisfies VariableDictionary;
+
+  const mockPackageInfoWithIntroOffer: PackageInfo = {
+    hasIntroOffer: true,
+  };
+
+  const mockPackageInfoWithTrial: PackageInfo = {
+    hasTrial: true,
+  };
+</script>
+
+<script>
+  import { packageInfoDecorator } from "../../stories/packageInfo-decorator";
 </script>
 
 <Story name="Default" args={{ name: "hello world!" }} />
@@ -246,3 +258,35 @@
     } satisfies Localizations,
   }}
 />
+
+<Story
+  name="With overrides for Intro Offers"
+  args={{
+    font_weight: "regular",
+    horizontal_alignment: "leading",
+    padding: { top: 16, trailing: 24, bottom: 16, leading: 24 },
+    margin: { top: 8, trailing: 0, bottom: 8, leading: 0 },
+    name: "hello world!",
+    overrides: [
+      {
+        conditions: [{ type: "intro_offer" }],
+        properties: { text_lid: "override_text_lid" },
+      },
+    ],
+    text_lid,
+  }}
+  decorators={[
+    variablesDecorator(mockVariableDictionary),
+    packageInfoDecorator(mockPackageInfoWithIntroOffer),
+  ]}
+  parameters={{
+    localizations: {
+      [defaultLocale]: {
+        [text_lid]:
+          "This is a text with variables: {{ product.store_product_name }} for {{ product.price }} per {{ product.price_per_period }} and a missing variable: {{ sub_period_abbreviated }}",
+        override_text_lid:
+          "This text is shown only when an intro offer is defined for the current package.",
+      },
+    } satisfies Localizations,
+  }}
+/>

package/dist/components/text/TextNode.svelte

@@ -11,16 +11,25 @@
   import { getSelectedStateContext } from "../../stores/selected";
   import { getVariablesContext } from "../../stores/variables";
   import type { TextNodeProps } from "../../types/components/text";
-  import { getActiveStateProps } from "../../utils/style-utils";
+  import {
+    getActiveStateProps,
+    getIntroOfferStateProps,
+  } from "../../utils/style-utils";
   import { replaceVariables } from "../../utils/variable-utils";
+  import { getPackageInfoContext } from "../../stores/packageInfo";
 
   const props: TextNodeProps = $props();
 
   const selectedState = getSelectedStateContext();
+  const packageInfo = getPackageInfoContext();
   const actualProps = $derived.by(() => {
     return {
       ...props,
       ...getActiveStateProps($selectedState, props.overrides),
+      ...getIntroOfferStateProps(
+        !!$packageInfo?.hasIntroOffer,
+        props.overrides,
+      ),
     };
   });
 

package/dist/index.d.ts

@@ -11,6 +11,6 @@ export { default as Video } from "./components/video/Video.svelte";
 export * from "./types";
 export { type PaywallData } from "./types/paywall";
 export { type UIConfig } from "./types/ui-config";
-export { type VariableDictionary } from "./types/variables";
+export { type VariableDictionary, type PackageInfo, } from "./types/variables";
 export * from "./ui/globals";
 export { default as Button } from "./ui/molecules/button.svelte";

package/dist/stores/packageInfo.d.ts

@@ -0,0 +1,5 @@
+import type { PackageInfo } from "../types/variables";
+import { type Readable } from "svelte/store";
+export type PackageInfoStore = Readable<PackageInfo | undefined>;
+export declare function setPackageInfoContext(variables: PackageInfoStore): void;
+export declare function getPackageInfoContext(): PackageInfoStore;

package/dist/stores/packageInfo.js

@@ -0,0 +1,13 @@
+import { getContext, setContext } from "svelte";
+import {} from "svelte/store";
+const key = Symbol("packageInfo");
+export function setPackageInfoContext(variables) {
+    setContext(key, variables);
+}
+export function getPackageInfoContext() {
+    const context = getContext(key);
+    if (context === undefined) {
+        throw new Error("PackageInfo context not found");
+    }
+    return context;
+}

package/dist/stores/paywall.d.ts

@@ -1,10 +1,11 @@
 import type { Action } from "../types/components/button";
 import type { UIConfig } from "../types/ui-config";
-import type { VariableDictionary } from "../types/variables";
+import type { PackageInfo, VariableDictionary } from "../types/variables";
 import { type Readable, type Writable } from "svelte/store";
 type PaywallContext = Readonly<{
     selectedPackageId: Writable<string | undefined>;
     variablesPerPackage: Readable<Record<string, VariableDictionary> | undefined>;
+    infoPerPackage: Readable<Record<string, PackageInfo> | undefined>;
     onPurchase: () => void;
     onButtonAction: (action: Action, actionId?: string) => void;
     uiConfig: UIConfig;

package/dist/stories/packageInfo-decorator.d.ts

@@ -0,0 +1,3 @@
+import type { PackageInfo } from "../types/variables";
+import type { DecoratorFunction, Renderer } from "storybook/internal/csf";
+export declare function packageInfoDecorator<TRenderer extends Renderer, TArgs>(packageInfo?: PackageInfo): DecoratorFunction<TRenderer, TArgs>;

package/dist/stories/packageInfo-decorator.js

@@ -0,0 +1,9 @@
+import { readable } from "svelte/store";
+import { setPackageInfoContext } from "../stores/packageInfo";
+export function packageInfoDecorator(packageInfo) {
+    const store = readable(packageInfo);
+    return (Story) => {
+        setPackageInfoContext(store);
+        return Story();
+    };
+}

package/dist/stories/paywall-decorator.js

@@ -16,6 +16,7 @@ export function paywallDecorator() {
         setPaywallContext({
             selectedPackageId,
             variablesPerPackage: readable(undefined),
+            infoPerPackage: readable(undefined),
             onPurchase: () => window.alert("Purchase clicked"),
             onButtonAction: (action, actionId) => window.alert(`Button clicked: ${JSON.stringify({ action, actionId }, undefined, 2)}`),
             uiConfig: emptyUiConfig,

package/dist/types/variables.d.ts

@@ -10,4 +10,8 @@ export declare enum PackageIdentifier {
 type VariableName = "product.price" | "product.price_per_period" | "product.price_per_period_abbreviated" | "product.price_per_day" | "product.price_per_week" | "product.price_per_month" | "product.price_per_year" | "product.period" | "product.period_abbreviated" | "product.periodly" | "product.period_in_days" | "product.period_in_weeks" | "product.period_in_months" | "product.period_in_years" | "product.period_with_unit" | "product.currency_code" | "product.currency_symbol" | "product.offer_price" | "product.offer_price_per_day" | "product.offer_price_per_week" | "product.offer_price_per_month" | "product.offer_price_per_year" | "product.offer_period" | "product.offer_period_abbreviated" | "product.offer_period_in_days" | "product.offer_period_in_weeks" | "product.offer_period_in_months" | "product.offer_period_in_years" | "product.offer_period_with_unit" | "product.offer_end_date" | "product.secondary_offer_price" | "product.secondary_offer_period" | "product.secondary_offer_period_abbreviated" | "product.relative_discount" | "product.store_product_name";
 export type VariableDictionary = Record<VariableName, string>;
 export type VariablesDictionary = Record<PackageIdentifier, VariableDictionary>;
+export interface PackageInfo {
+    hasIntroOffer?: boolean;
+    hasTrial?: boolean;
+}
 export {};

package/dist/utils/style-utils.d.ts

@@ -8,3 +8,4 @@ import type { RootPaywall } from "../types/paywall.js";
  */
 export declare function findSelectedPackageId({ stack, sticky_footer, }: RootPaywall): string | undefined;
 export declare const getActiveStateProps: <T extends Component>(selectedState: boolean, overrides?: Overrides<T>) => Partial<T>;
+export declare const getIntroOfferStateProps: <T extends Component>(hasIntroOffer: boolean, overrides?: Overrides<T>) => Partial<T>;

package/dist/utils/style-utils.js

@@ -43,3 +43,11 @@ export const getActiveStateProps = (selectedState, overrides) => {
     const override = overrides?.find((override) => override.conditions.find((condition) => condition.type === "selected"));
     return override?.properties ?? {};
 };
+export const getIntroOfferStateProps = (hasIntroOffer, overrides) => {
+    if (!hasIntroOffer) {
+        return {};
+    }
+    const override = overrides?.find((override) => override.conditions.find((condition) => condition.type === "intro_offer" ||
+        condition.type === "introductory_offer"));
+    return override?.properties ?? {};
+};