@revenuecat/purchases-ui-js 2.0.5 → 2.1.0

package/dist/components/button/ButtonNode.stories.svelte

@@ -75,6 +75,7 @@
             id2: "Navigate back",
             id3: "Navigate to",
             id4: "URL navigation",
+            id5: "Workflow Action",
           },
         },
       }),
@@ -166,3 +167,22 @@
     },
   }}
 />
+
+<Story
+  name="Workflow Action"
+  args={{
+    action: {
+      type: "workflow",
+    },
+    triggers: {
+      on_press: "workflow-action-id",
+    },
+    stack: {
+      ...stackProps(5),
+      background_color: {
+        dark: { type: "hex", value: "#9C27B0" },
+        light: { type: "hex", value: "#9C27B0" },
+      },
+    },
+  }}
+/>

package/dist/components/button/ButtonNode.svelte

@@ -17,10 +17,16 @@
 
   const { onButtonAction } = getPaywallContext();
 
-  const onclick = () => onButtonAction(props.action);
+  const onclick = () => {
+    const actionId = props.triggers?.on_press;
+    onButtonAction(props.action, actionId);
+  };
 
   const visible = $derived.by(() => {
     switch (action.type) {
+      case "workflow":
+        return true;
+      case "restore_purchases":
       case "navigate_back":
         return false;
       case "navigate_to":
@@ -29,8 +35,10 @@
         return true;
     }
   });
+
+  const style = $derived({
+    visibility: visible ? "visible" : "hidden",
+  });
 </script>
 
-{#if visible}
-  <Stack {...props.stack} {onclick} />
-{/if}
+<Stack {...props.stack} {onclick} {style} />

package/dist/components/paywall/Node.svelte

@@ -6,6 +6,7 @@
     PurchaseButton,
     Stack,
     Timeline,
+    Video,
   } from "../..";
   import ButtonNode from "../button/ButtonNode.svelte";
   import TextNode from "../text/TextNode.svelte";
@@ -15,6 +16,7 @@
   import Icon from "../icon/Icon.svelte";
   import TabControl from "../tabs/TabControl.svelte";
   import TabControlButton from "../tabs/TabControlButton.svelte";
+  import TabControlToggle from "../tabs/TabControlToggle.svelte";
   import Tabs from "../tabs/Tabs.svelte";
 
   interface Props {
@@ -31,10 +33,12 @@
     purchase_button: PurchaseButton,
     stack: Stack,
     tab_control_button: TabControlButton,
+    tab_control_toggle: TabControlToggle,
     tab_control: TabControl,
     tabs: Tabs,
     text: TextNode,
     timeline: Timeline,
+    video: Video,
   } satisfies {
     [key in Component["type"]]: SvelteComponent<
       Extract<Component, { type: key }>

package/dist/components/paywall/Paywall.svelte

@@ -19,8 +19,8 @@
   import { findSelectedPackageId } from "../../utils/style-utils";
   import { onMount } from "svelte";
   import { derived, readable, writable } from "svelte/store";
-  import Sheet from "./Sheet.svelte";
   import Stack from "../stack/Stack.svelte";
+  import Sheet from "./Sheet.svelte";
 
   interface Props {
     paywallData: PaywallData;
@@ -33,6 +33,7 @@
     onVisitCustomerCenterClicked?: () => void;
     onRestorePurchasesClicked?: () => void;
     onNavigateToUrlClicked?: (url: string) => void;
+    onActionTriggered?: (actionId: string) => void;
     onError?: (error: unknown) => void;
   }
 
@@ -46,6 +47,7 @@
     onVisitCustomerCenterClicked,
     onRestorePurchasesClicked,
     onNavigateToUrlClicked,
+    onActionTriggered,
     onError,
     uiConfig,
   }: Props = $props();
@@ -76,8 +78,13 @@
 
   let sheet = $state<SheetProps>();
 
-  const onButtonAction = (action: Action) => {
+  const onButtonAction = (action: Action, actionId?: string) => {
     switch (action.type) {
+      case "workflow":
+        if (actionId) {
+          onActionTriggered?.(actionId);
+        }
+        return;
       case "navigate_back":
         onBackClicked?.();
         return;
@@ -139,7 +146,7 @@
 </script>
 
 <svelte:boundary onerror={onError}>
-  <div id="paywall" class={paywallClass} {style}>
+  <div class={paywallClass} {style}>
     <Stack {...stack} />
 
     {#if sticky_footer}
@@ -159,9 +166,8 @@
     flex-direction: column;
     align-items: stretch;
     height: 100%;
-    overflow: hidden;
 
-    transition-property: filter transform;
+    transition-property: filter, transform;
     transition-duration: 0.1s;
     transition-timing-function: ease-in-out;
     transform-origin: center;

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

@@ -13,6 +13,7 @@ interface Props {
     onVisitCustomerCenterClicked?: () => void;
     onRestorePurchasesClicked?: () => void;
     onNavigateToUrlClicked?: (url: string) => void;
+    onActionTriggered?: (actionId: string) => void;
     onError?: (error: unknown) => void;
 }
 declare const Paywall: import("svelte").Component<Props, {}, "">;

package/dist/components/stack/Stack.svelte

@@ -12,6 +12,7 @@
     mapSize,
     mapSpacing,
     px,
+    type CSS,
   } from "../../utils/base-utils";
   import { getActiveStateProps } from "../../utils/style-utils";
   import type { Snippet } from "svelte";
@@ -20,10 +21,11 @@
   interface MiscProps {
     onclick?: () => void;
     children?: Snippet;
+    style?: CSS;
   }
 
   const props: StackProps & MiscProps = $props();
-  const { onclick, children } = props;
+  const { onclick, children, style } = props;
 
   const selectedState = getSelectedStateContext();
   const {
@@ -49,8 +51,9 @@
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
 
-  const style = $derived(
+  const stackStyle = $derived(
     css({
+      ...style,
       display: "flex",
       position: "relative",
       width: mapSize(size.width),
@@ -91,7 +94,7 @@
   this={onclick !== undefined ? "button" : "div"}
   role={onclick !== undefined ? "button" : undefined}
   {onclick}
-  {style}
+  style={stackStyle}
   class="stack"
 >
   {#if badge}

package/dist/components/stack/Stack.svelte.d.ts

@@ -1,8 +1,10 @@
 import type { StackProps } from "../../types/components/stack";
+import { type CSS } from "../../utils/base-utils";
 import type { Snippet } from "svelte";
 interface MiscProps {
     onclick?: () => void;
     children?: Snippet;
+    style?: CSS;
 }
 type $$ComponentProps = StackProps & MiscProps;
 declare const Stack: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/tabs/TabControlToggle.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+  import { getColorModeContext } from "../../stores/color-mode";
+  import {
+    getSelectedStateContext,
+    setSelectedStateContext,
+  } from "../../stores/selected";
+  import type { TabControlToggleProps } from "../../types/components/tabs";
+  import { css, mapColor } from "../../utils/base-utils";
+  import { getActiveStateProps } from "../../utils/style-utils";
+  import { getTabsContext } from "./tabs-context";
+
+  const props: TabControlToggleProps = $props();
+
+  const selectedState = getSelectedStateContext();
+  const {
+    default_value,
+    thumb_color_on,
+    thumb_color_off,
+    track_color_on,
+    track_color_off,
+  } = $derived.by(() => {
+    return {
+      ...props,
+      ...getActiveStateProps($selectedState, props.overrides),
+    };
+  });
+
+  const { isActive, selectTab } = getTabsContext();
+  setSelectedStateContext(isActive);
+
+  const getColorMode = getColorModeContext();
+  const colorMode = $derived(getColorMode());
+
+  const toggleStyle = $derived(
+    css({
+      background: $isActive
+        ? mapColor(colorMode, track_color_on)
+        : mapColor(colorMode, track_color_off),
+    }),
+  );
+
+  const thumbStyle = $derived(
+    css({
+      left: $isActive ? "22px" : "2px",
+      background: $isActive
+        ? mapColor(colorMode, thumb_color_on)
+        : mapColor(colorMode, thumb_color_off),
+    }),
+  );
+
+  const onclick = () => {
+    selectTab("", $isActive ? 0 : 1);
+  };
+
+  const onkeydown = (event: KeyboardEvent) => {
+    if (event.code === "Enter" || event.code === "Space") {
+      onclick();
+    }
+  };
+</script>
+
+<div
+  role="button"
+  tabindex="0"
+  aria-label="Toggle"
+  class="toggle"
+  style={toggleStyle}
+  {onclick}
+  {onkeydown}
+>
+  <div class="thumb" style={thumbStyle}></div>
+</div>
+
+<style>
+  .toggle {
+    appearance: none;
+
+    --height: 31px;
+
+    position: relative;
+    width: 51px;
+    height: var(--height);
+    border-radius: calc(var(--height) / 2);
+    cursor: pointer;
+    user-select: none;
+    transition: background-color 300ms ease;
+  }
+
+  .thumb {
+    --size: 27px;
+    position: absolute;
+    top: 2px;
+    width: var(--size);
+    height: var(--size);
+    border-radius: 50%;
+    box-shadow:
+      0 1px 3px rgba(0, 0, 0, 0.2),
+      0 1px 2px rgba(0, 0, 0, 0.12);
+    transition:
+      left 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
+      background-color 300ms ease;
+  }
+</style>

package/dist/components/tabs/TabControlToggle.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TabControlToggleProps } from "../../types/components/tabs";
+declare const TabControlToggle: import("svelte").Component<TabControlToggleProps, {}, "">;
+type TabControlToggle = ReturnType<typeof TabControlToggle>;
+export default TabControlToggle;