@revenuecat/purchases-ui-js 3.0.0 → 3.1.0

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

@@ -342,13 +342,44 @@
   name="Wallet Button"
   args={{
     paywallData: pastaPaywallData,
-    walletButtonRender: (element: HTMLElement, selectedPackageId) => {
+    walletButtonRender: (
+      element: HTMLElement,
+      { selectedPackageId, onReady },
+    ) => {
       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);
+
+      setTimeout(() => {
+        element.append(newDiv);
+        onReady && onReady();
+      }, 3000);
+      return {};
+    },
+  }}
+/>
+
+<Story
+  name="Wallet Button Dark"
+  args={{
+    paywallData: STACK_PAYWALL,
+    walletButtonRender: (
+      element: HTMLElement,
+      { selectedPackageId, onReady },
+    ) => {
+      const newDiv = document.createElement("div");
+      newDiv.innerText = "Hi! I was injected from the walletButtonRender";
+      newDiv.style.width = "100%";
+      newDiv.style.textAlign = "center";
+      newDiv.style.color = "white";
+      newDiv.style.border = "1px solid white";
+
+      setTimeout(() => {
+        element.append(newDiv);
+        onReady && onReady();
+      }, 3000);
       return {};
     },
   }}

package/dist/components/paywall/Paywall.svelte

@@ -42,7 +42,10 @@
     onError?: (error: unknown) => void;
     walletButtonRender?: (
       node: HTMLElement,
-      selectedPackageId: string,
+      params: {
+        selectedPackageId: string;
+        onReady?: () => void;
+      },
     ) => {
       destroy?: () => void;
       update?: (selectedPackageId: string) => void;

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

@@ -16,7 +16,10 @@ interface Props {
     onNavigateToUrlClicked?: (url: string) => void;
     onActionTriggered?: (actionId: string) => void;
     onError?: (error: unknown) => void;
-    walletButtonRender?: (node: HTMLElement, selectedPackageId: string) => {
+    walletButtonRender?: (node: HTMLElement, params: {
+        selectedPackageId: string;
+        onReady?: () => void;
+    }) => {
         destroy?: () => void;
         update?: (selectedPackageId: string) => void;
     };

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

@@ -7,12 +7,18 @@
   import {
     type CSS,
     css,
+    mapBorder,
+    mapBorderRadius,
+    mapShadow,
     mapSize,
     mapSpacing,
     px,
   } from "../../utils/base-utils";
   import { mapDimension } from "../stack/stack-utils";
   import type { StackProps } from "../../types/components/stack";
+  import { DEFAULT_SPACING } from "../../utils/constants";
+  import { getColorModeContext } from "../../stores/color-mode";
+  import { onMount } from "svelte";
 
   const props: PurchaseButtonProps = $props();
   const { stack } = props;
@@ -22,23 +28,49 @@
 
   const stackProps: StackProps & { style?: CSS } = { ...stack };
   const selectedState = getSelectedStateContext();
-  const { size, dimension, spacing, margin } = $derived.by(() => {
-    return {
-      ...stackProps,
-      ...getActiveStateProps($selectedState, stackProps.overrides),
-    };
+  const { size, dimension, spacing, margin, border, shape, shadow } =
+    $derived.by(() => {
+      return {
+        ...stackProps,
+        ...getActiveStateProps($selectedState, stackProps.overrides),
+      };
+    });
+
+  const minDistanceBetweenPurchaseButtons = 10;
+  const maxWaitTimeBeforeClosingSkeleton = 3000;
+
+  const getColorMode = getColorModeContext();
+  const colorMode = $derived(getColorMode());
+
+  const stackLayoutRules = $derived({
+    ...stackProps.style,
+    display: "flex",
+    position: "relative",
+    width: mapSize(size.width),
+    height: mapSize(size.height),
+    ...mapDimension(dimension),
+    gap: px(spacing),
+    margin: mapSpacing({
+      ...(margin
+        ? {
+            ...margin,
+            bottom: Math.max(margin.bottom, minDistanceBetweenPurchaseButtons),
+          }
+        : {
+            ...DEFAULT_SPACING,
+            bottom: minDistanceBetweenPurchaseButtons,
+          }),
+    }),
   });
 
-  const stackStyle = $derived(
+  const stackStyle = $derived(css(stackLayoutRules));
+
+  const loaderStyle = $derived(
     css({
-      ...stackProps.style,
-      display: "flex",
-      position: "relative",
-      width: mapSize(size.width),
-      height: mapSize(size.height),
-      ...mapDimension(dimension),
-      gap: px(spacing),
-      margin: mapSpacing(margin),
+      ...stackLayoutRules,
+      border: mapBorder(colorMode, border),
+      "border-radius": mapBorderRadius(shape),
+      "box-shadow": mapShadow(colorMode, shadow),
     }),
   );
 
@@ -46,17 +78,83 @@
     const actionId = props.triggers?.on_purchase_press;
     onPurchase(actionId);
   };
+
+  let shouldShowWalletSkeleton = $state(!!walletButtonRender);
+  const onWalletButtonReady = () => {
+    shouldShowWalletSkeleton = false;
+  };
+
+  onMount(() => {
+    setTimeout(() => {
+      shouldShowWalletSkeleton = false;
+    }, maxWaitTimeBeforeClosingSkeleton);
+  });
 </script>
 
-{#if walletButtonRender}
-  {#if $selectedPackageId}
-    <div style={stackStyle}>
-      <div
-        style="flex-grow: 1"
-        use:walletButtonRender={$selectedPackageId}
-      ></div>
-    </div>
-  {/if}
+{#if walletButtonRender && $selectedPackageId}
+  <div style={stackStyle}>
+    <div
+      style="flex-grow: 1; width:100%;"
+      use:walletButtonRender={{
+        selectedPackageId: $selectedPackageId,
+        onReady: onWalletButtonReady,
+      }}
+    ></div>
+  </div>
+{/if}
+
+{#if shouldShowWalletSkeleton}
+  <div class="wallet-skeleton" style={loaderStyle} aria-hidden="true">
+    &nbsp;
+  </div>
+{:else}
+  <Stack {...stack} {onclick} />
 {/if}
 
-<Stack {...stack} {onclick} />
+<style>
+  .wallet-skeleton {
+    position: relative;
+    overflow: hidden;
+    border-radius: 9999px;
+    background-color: rgba(128, 128, 128, 0.16);
+    backdrop-filter: blur(18px);
+    min-height: 48px;
+    content: " ";
+    flex-grow: 1;
+    width: 100%;
+  }
+
+  .wallet-skeleton::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      135deg,
+      rgba(255, 255, 255, 0.2),
+      rgba(255, 255, 255, 0.01)
+    );
+    opacity: 0.9;
+    mix-blend-mode: screen;
+  }
+
+  .wallet-skeleton::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    transform: translateX(-100%);
+    background: linear-gradient(
+      120deg,
+      transparent 0%,
+      rgba(255, 255, 255, 0.6) 20%,
+      transparent 40%
+    );
+    opacity: 0.8;
+    animation: wallet-skeleton-shimmer 1.4s ease-in-out infinite;
+  }
+
+  @keyframes wallet-skeleton-shimmer {
+    100% {
+      transform: translateX(100%);
+    }
+  }
+</style>

package/dist/components/workflows/Screen.stories.svelte

@@ -0,0 +1,31 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import Screen from "./Screen.svelte";
+  import { paywallData, uiConfigData } from "../../stories/fixtures";
+  import type { WorkflowScreen } from "../../types/workflow";
+
+  const defaultScreen: WorkflowScreen = {
+    ...paywallData,
+    asset_base_url: "https://assets.pawwalls.com",
+    config: {},
+    localized_strings: {},
+    localized_strings_by_tier: {},
+    name: "Demo Screen",
+    offering_id: "demo_offering",
+    revision: 1,
+    template_name: "stack",
+  };
+
+  const { Story } = defineMeta({
+    title: "Components/Screen",
+    component: Screen,
+    args: {
+      paywallComponents: defaultScreen,
+      selectedLocale: defaultScreen.default_locale,
+      uiConfig: uiConfigData,
+    },
+  });
+</script>
+
+<Story name="Default" />

package/dist/components/workflows/Screen.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Screen from "./Screen.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Screen: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Screen = InstanceType<typeof Screen>;
+export default Screen;

package/dist/components/workflows/Screen.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import Paywall, {
+    type UIConfig,
+  } from "../paywall/Paywall.svelte";
+  import type { WorkflowScreen } from "../../types/workflow";
+  import { VARIABLES } from "../paywall/fixtures/variables";
+  interface Props {
+    paywallComponents: WorkflowScreen | null | undefined;
+    selectedLocale?: string;
+    uiConfig: UIConfig;
+    onActionTriggered?: (actionId: string) => void;
+    onPurchaseClicked?: (
+      packageId: string,
+      actionId: string,
+    ) => void | Promise<void>;
+    containerId?: string;
+  }
+  const {
+    paywallComponents,
+    selectedLocale = "en_US",
+    uiConfig,
+    onActionTriggered,
+    onPurchaseClicked,
+    containerId = "screen-container",
+  }: Props = $props();
+</script>
+
+<div id={containerId} class="paywall-container">
+  {#if paywallComponents}
+    <Paywall
+      paywallData={paywallComponents}
+      {selectedLocale}
+      {uiConfig}
+      variablesPerPackage={VARIABLES}
+      onNavigateToUrlClicked={() => {}}
+      onVisitCustomerCenterClicked={() => {}}
+      onBackClicked={() => {}}
+      onRestorePurchasesClicked={() => {}}
+      onActionTriggered={(actionId: string) => {
+        onActionTriggered?.(actionId);
+      }}
+      {onPurchaseClicked}
+      onError={(error) => {
+        console.error("Paywall error:", error);
+      }}
+    />
+  {:else}
+    <div>
+      <p>No paywall data provided</p>
+    </div>
+  {/if}
+</div>

package/dist/components/workflows/Screen.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type UIConfig } from "../paywall/Paywall.svelte";
+import type { WorkflowScreen } from "../../types/workflow";
+interface Props {
+    paywallComponents: WorkflowScreen | null | undefined;
+    selectedLocale?: string;
+    uiConfig: UIConfig;
+    onActionTriggered?: (actionId: string) => void;
+    onPurchaseClicked?: (packageId: string, actionId: string) => void | Promise<void>;
+    containerId?: string;
+}
+declare const Screen: import("svelte").Component<Props, {}, "">;
+type Screen = ReturnType<typeof Screen>;
+export default Screen;

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export { default as PurchaseButton } from "./components/purchase-button/Purchase
 export { default as Stack } from "./components/stack/Stack.svelte";
 export { default as Text } from "./components/text/Text.svelte";
 export { default as Timeline } from "./components/timeline/Timeline.svelte";
+export { default as Screen } from "./components/workflows/Screen.svelte";
 export { default as Video } from "./components/video/Video.svelte";
 export * from "./types";
 export { type PaywallData } from "./types/paywall";

package/dist/index.js

@@ -12,6 +12,7 @@ export { default as PurchaseButton } from "./components/purchase-button/Purchase
 export { default as Stack } from "./components/stack/Stack.svelte";
 export { default as Text } from "./components/text/Text.svelte";
 export { default as Timeline } from "./components/timeline/Timeline.svelte";
+export { default as Screen } from "./components/workflows/Screen.svelte";
 export { default as Video } from "./components/video/Video.svelte";
 export * from "./types";
 export {} from "./types/paywall";

package/dist/stores/paywall.d.ts

@@ -7,7 +7,10 @@ type PaywallContext = Readonly<{
     variablesPerPackage: Readable<Record<string, VariableDictionary> | undefined>;
     infoPerPackage: Readable<Record<string, PackageInfo> | undefined>;
     onPurchase: (actionId?: string) => void;
-    walletButtonRender?: (node: HTMLElement, selectedPackageId: string) => {
+    walletButtonRender?: (node: HTMLElement, params: {
+        selectedPackageId: string;
+        onReady?: () => void;
+    }) => {
         destroy?: () => void;
         update?: (selectedPackageId: string) => void;
     };

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

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

package/dist/types/workflow.d.ts

@@ -0,0 +1,15 @@
+import type { PaywallData } from "./paywall";
+/**
+ * Represents a screen/paywall configuration in a workflow.
+ * Extends core PaywallData with workflow-specific metadata.
+ */
+export interface WorkflowScreen extends PaywallData {
+    asset_base_url: string;
+    config: Record<string, unknown>;
+    localized_strings: Record<string, Record<string, string>>;
+    localized_strings_by_tier: Record<string, Record<string, string>>;
+    name: string;
+    offering_id: string | null;
+    revision: number;
+    template_name: string;
+}

package/dist/types/workflow.js

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

package/dist/types.d.ts

@@ -119,4 +119,4 @@ export declare enum StackDistribution {
     center = "center",
     end = "flex-end"
 }
-export {};
+export type { WorkflowScreen } from "./types/workflow";

package/package.json

@@ -2,7 +2,7 @@
   "name": "@revenuecat/purchases-ui-js",
   "description": "Web components for Paywalls. Powered by RevenueCat",
   "private": false,
-  "version": "3.0.0",
+  "version": "3.1.0",
   "author": {
     "name": "RevenueCat, Inc."
   },