@revenuecat/purchases-ui-js 2.2.0 → 3.0.0

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

@@ -1,5 +1,6 @@
 <script module lang="ts">
   import Package from "./Package.svelte";
+  import type { PackageProps } from "../../types/components/package";
   import { componentDecorator } from "../../stories/component-decorator";
   import { localizationDecorator } from "../../stories/localization-decorator";
   import { defineMeta } from "@storybook/addon-svelte-csf";

package/dist/components/paywall/Node.svelte

@@ -9,6 +9,7 @@
     Video,
   } from "../..";
   import ButtonNode from "../button/ButtonNode.svelte";
+  import Countdown from "../countdown/Countdown.svelte";
   import InputMultipleChoice from "../options/InputMultipleChoice.svelte";
   import InputOption from "../options/InputOption.svelte";
   import InputSingleChoice from "../options/InputSingleChoice.svelte";
@@ -29,6 +30,7 @@
   const ComponentTypes = {
     button: ButtonNode,
     carousel: Carousel,
+    countdown: Countdown,
     footer: Footer,
     icon: Icon,
     image: Image,

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

@@ -26,13 +26,17 @@
   import { SHEET_PAYWALL } from "./fixtures/sheet-paywall";
   import { STACK_PAYWALL } from "./fixtures/stack-paywall";
   import { VARIABLES } from "./fixtures/variables";
+  import { COUNTDOWN_PAYWALL } from "../countdown/fixtures/countdown-paywall";
+  import { mockDateDecorator } from "storybook-mock-date-decorator";
 
   const { Story } = defineMeta({
     title: "Example/Paywall",
     component: Paywall,
     args: {
-      onPurchaseClicked: (selectedPackageId: string) =>
-        alert(`Purchase package ${selectedPackageId}`),
+      onPurchaseClicked: (selectedPackageId: string, actionId: string) =>
+        alert(
+          `Purchase package ${selectedPackageId}${actionId ? ` with action ${actionId}` : ""}`,
+        ),
       onBackClicked: () => alert("Go back"),
       onVisitCustomerCenterClicked: () => alert("Visit customer center"),
       onRestorePurchasesClicked: () => alert("Restore purchases"),
@@ -322,3 +326,30 @@
     paywallData: listTemplate,
   }}
 />
+
+<Story
+  name="With Countdown"
+  decorators={[mockDateDecorator]}
+  parameters={{
+    date: new Date("2024-01-15T12:00:00Z"),
+  }}
+  args={{
+    paywallData: COUNTDOWN_PAYWALL,
+  }}
+/>
+
+<Story
+  name="Wallet Button"
+  args={{
+    paywallData: pastaPaywallData,
+    walletButtonRender: (element: HTMLElement, selectedPackageId) => {
+      const newDiv = document.createElement("div");
+      newDiv.innerText = "Hi! I was injected from the walletButtonRender";
+      newDiv.style.width = "100%";
+      newDiv.style.textAlign = "center";
+      newDiv.style.border = "1px solid black";
+      element.append(newDiv);
+      return {};
+    },
+  }}
+/>

package/dist/components/paywall/Paywall.svelte

@@ -33,13 +33,20 @@
     infoPerPackage?: Record<string, PackageInfo>;
     uiConfig: UIConfig;
     preferredColorMode?: ColorMode;
-    onPurchaseClicked?: (selectedPackageId: string) => void;
+    onPurchaseClicked?: (selectedPackageId: string, actionId: string) => void;
     onBackClicked?: () => void;
     onVisitCustomerCenterClicked?: () => void;
     onRestorePurchasesClicked?: () => void;
     onNavigateToUrlClicked?: (url: string) => void;
     onActionTriggered?: (actionId: string) => void;
     onError?: (error: unknown) => void;
+    walletButtonRender?: (
+      node: HTMLElement,
+      selectedPackageId: string,
+    ) => {
+      destroy?: () => void;
+      update?: (selectedPackageId: string) => void;
+    };
   }
 
   const {
@@ -56,6 +63,7 @@
     onActionTriggered,
     onError,
     uiConfig,
+    walletButtonRender,
   }: Props = $props();
 
   const getColorMode = setColorModeContext(() => preferredColorMode);
@@ -75,10 +83,10 @@
     findSelectedPackageId(base),
   );
 
-  const onPurchase = () => {
+  const onPurchase = (actionId?: string) => {
     const packageId = $selectedPackageId;
     if (packageId !== undefined) {
-      onPurchaseClicked?.(packageId);
+      onPurchaseClicked?.(packageId, actionId ?? "");
     }
   };
 
@@ -127,6 +135,7 @@
     infoPerPackage: readable(infoPerPackage),
     onPurchase,
     onButtonAction,
+    walletButtonRender,
     uiConfig,
   });
 

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

@@ -9,13 +9,17 @@ interface Props {
     infoPerPackage?: Record<string, PackageInfo>;
     uiConfig: UIConfig;
     preferredColorMode?: ColorMode;
-    onPurchaseClicked?: (selectedPackageId: string) => void;
+    onPurchaseClicked?: (selectedPackageId: string, actionId: string) => void;
     onBackClicked?: () => void;
     onVisitCustomerCenterClicked?: () => void;
     onRestorePurchasesClicked?: () => void;
     onNavigateToUrlClicked?: (url: string) => void;
     onActionTriggered?: (actionId: string) => void;
     onError?: (error: unknown) => void;
+    walletButtonRender?: (node: HTMLElement, selectedPackageId: string) => {
+        destroy?: () => void;
+        update?: (selectedPackageId: string) => void;
+    };
 }
 declare const Paywall: import("svelte").Component<Props, {}, "">;
 type Paywall = ReturnType<typeof Paywall>;

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

@@ -2,10 +2,61 @@
   import Stack from "../stack/Stack.svelte";
   import { getPaywallContext } from "../../stores/paywall";
   import type { PurchaseButtonProps } from "../../types/components/purchase-button";
+  import { getSelectedStateContext } from "../../stores/selected";
+  import { getActiveStateProps } from "../../utils/style-utils";
+  import {
+    type CSS,
+    css,
+    mapSize,
+    mapSpacing,
+    px,
+  } from "../../utils/base-utils";
+  import { mapDimension } from "../stack/stack-utils";
+  import type { StackProps } from "../../types/components/stack";
 
-  const { stack }: PurchaseButtonProps = $props();
+  const props: PurchaseButtonProps = $props();
+  const { stack } = props;
 
-  const { onPurchase } = getPaywallContext();
+  const { onPurchase, walletButtonRender, selectedPackageId } =
+    getPaywallContext();
+
+  const stackProps: StackProps & { style?: CSS } = { ...stack };
+  const selectedState = getSelectedStateContext();
+  const { size, dimension, spacing, margin } = $derived.by(() => {
+    return {
+      ...stackProps,
+      ...getActiveStateProps($selectedState, stackProps.overrides),
+    };
+  });
+
+  const stackStyle = $derived(
+    css({
+      ...stackProps.style,
+      display: "flex",
+      position: "relative",
+      width: mapSize(size.width),
+      height: mapSize(size.height),
+      ...mapDimension(dimension),
+      gap: px(spacing),
+      margin: mapSpacing(margin),
+    }),
+  );
+
+  const onclick = () => {
+    const actionId = props.triggers?.on_purchase_press;
+    onPurchase(actionId);
+  };
 </script>
 
-<Stack {...stack} onclick={onPurchase} />
+{#if walletButtonRender}
+  {#if $selectedPackageId}
+    <div style={stackStyle}>
+      <div
+        style="flex-grow: 1"
+        use:walletButtonRender={$selectedPackageId}
+      ></div>
+    </div>
+  {/if}
+{/if}
+
+<Stack {...stack} {onclick} />

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { default as ButtonDeprecated } from "./components/button/Button.svelte";
+export { default as Countdown } from "./components/countdown/Countdown.svelte";
 export { default as Footer } from "./components/footer/Footer.svelte";
 export { default as Image } from "./components/image/Image.svelte";
 export { default as InputMultipleChoice } from "./components/options/InputMultipleChoice.svelte";

package/dist/index.js

@@ -1,5 +1,6 @@
 // Reexport your entry components here
 export { default as ButtonDeprecated } from "./components/button/Button.svelte";
+export { default as Countdown } from "./components/countdown/Countdown.svelte";
 export { default as Footer } from "./components/footer/Footer.svelte";
 export { default as Image } from "./components/image/Image.svelte";
 export { default as InputMultipleChoice } from "./components/options/InputMultipleChoice.svelte";

package/dist/stores/paywall.d.ts

@@ -6,7 +6,11 @@ type PaywallContext = Readonly<{
     selectedPackageId: Writable<string | undefined>;
     variablesPerPackage: Readable<Record<string, VariableDictionary> | undefined>;
     infoPerPackage: Readable<Record<string, PackageInfo> | undefined>;
-    onPurchase: () => void;
+    onPurchase: (actionId?: string) => void;
+    walletButtonRender?: (node: HTMLElement, selectedPackageId: string) => {
+        destroy?: () => void;
+        update?: (selectedPackageId: string) => void;
+    };
     onButtonAction: (action: Action, actionId?: string) => void;
     uiConfig: UIConfig;
 }>;

package/dist/stories/fixtures.d.ts

@@ -18,6 +18,10 @@ export declare const localizations: {
         id2: string;
         id3: string;
         badge: string;
+        countdown: string;
+        ended: string;
+        days: string;
+        time: string;
     };
 };
 export declare const colorModeOverrideTemplate: PaywallData;

package/dist/stories/fixtures.js

@@ -17307,6 +17307,10 @@ export const localizations = {
         id2: "Item 2",
         id3: "Item 3",
         badge: "Badge Text",
+        countdown: "{{ count_days_with_zero }} : {{ count_hours_with_zero }} : {{ count_minutes_with_zero }} : {{ count_seconds_with_zero }}",
+        ended: "Time's up!",
+        days: "{{ count_days_without_zero }} days",
+        time: "{{ count_hours_with_zero }}:{{ count_minutes_with_zero }}:{{ count_seconds_with_zero }}",
     },
 };
 export const colorModeOverrideTemplate = {

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

@@ -1,2 +1,5 @@
 import type { DecoratorFunction, Renderer } from "storybook/internal/csf";
-export declare function paywallDecorator<TRenderer extends Renderer, TArgs>(): DecoratorFunction<TRenderer, TArgs>;
+export declare function paywallDecorator<TRenderer extends Renderer, TArgs>(walletButtonRender?: (node: HTMLElement, selectedPackageId: string) => {
+    destroy?: () => void;
+    update?: (selectedPackageId: string) => void;
+}): DecoratorFunction<TRenderer, TArgs>;

package/dist/stories/paywall-decorator.js

@@ -1,6 +1,6 @@
 import { setPaywallContext } from "../stores/paywall";
 import { readable, writable } from "svelte/store";
-export function paywallDecorator() {
+export function paywallDecorator(walletButtonRender) {
     return (Story) => {
         const selectedPackageId = writable(undefined);
         selectedPackageId.subscribe((packageId) => {
@@ -19,6 +19,7 @@ export function paywallDecorator() {
             infoPerPackage: readable(undefined),
             onPurchase: () => window.alert("Purchase clicked"),
             onButtonAction: (action, actionId) => window.alert(`Button clicked: ${JSON.stringify({ action, actionId }, undefined, 2)}`),
+            walletButtonRender,
             uiConfig: emptyUiConfig,
         });
         return Story();

package/dist/types/component.d.ts

@@ -1,5 +1,6 @@
 import type { ButtonProps } from "./components/button";
 import type { CarouselProps } from "./components/carousel";
+import type { CountdownProps } from "./components/countdown";
 import type { FooterProps } from "./components/footer";
 import type { IconProps } from "./components/icon";
 import type { ImageProps } from "./components/image";
@@ -11,4 +12,4 @@ import type { TabControlButtonProps, TabControlProps, TabControlToggleProps, Tab
 import type { TextNodeProps } from "./components/text";
 import type { TimelineProps } from "./components/timeline";
 import type { VideoProps } from "./components/video";
-export type Component = ButtonProps | CarouselProps | FooterProps | IconProps | ImageProps | InputMultipleChoiceProps | InputOptionProps | InputSingleChoiceProps | PackageProps | PurchaseButtonProps | StackProps | TabControlButtonProps | TabControlToggleProps | TabControlProps | TabsProps | TextNodeProps | TimelineProps | VideoProps;
+export type Component = ButtonProps | CarouselProps | CountdownProps | FooterProps | IconProps | ImageProps | InputMultipleChoiceProps | InputOptionProps | InputSingleChoiceProps | PackageProps | PurchaseButtonProps | StackProps | TabControlButtonProps | TabControlToggleProps | TabControlProps | TabsProps | TextNodeProps | TimelineProps | VideoProps;

package/dist/types/components/countdown.d.ts

@@ -0,0 +1,13 @@
+import type { BaseComponent } from "../base";
+import type { StackProps } from "./stack";
+export interface CountdownStyle {
+    type: "date";
+    date: string;
+}
+export interface CountdownProps extends BaseComponent {
+    type: "countdown";
+    visible?: boolean | null;
+    style: CountdownStyle;
+    countdown_stack: StackProps;
+    end_stack: StackProps | null;
+}

package/dist/types/components/countdown.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -2,7 +2,7 @@
   "name": "@revenuecat/purchases-ui-js",
   "description": "Web components for Paywalls. Powered by RevenueCat",
   "private": false,
-  "version": "2.2.0",
+  "version": "3.0.0",
   "author": {
     "name": "RevenueCat, Inc."
   },
@@ -97,6 +97,7 @@
     "prettier-plugin-svelte": "3.4.0",
     "publint": "0.3.15",
     "storybook": "9.1.10",
+    "storybook-mock-date-decorator": "^3.0.0",
     "svelte": "5.43.0",
     "svelte-check": "4.3.3",
     "typescript": "5.9.3",