@revenuecat/purchases-ui-js 2.0.3 → 2.0.5

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

@@ -1,10 +1,10 @@
 <script module lang="ts">
   import ButtonNode from "./ButtonNode.svelte";
-  import type { TextNodeProps } from "../../types/components/text";
   import { componentDecorator } from "../../stories/component-decorator";
   import { localizationDecorator } from "../../stories/localization-decorator";
   import type { ButtonProps } from "../../types/components/button";
   import type { StackProps } from "../../types/components/stack";
+  import type { TextNodeProps } from "../../types/components/text";
   import { DEFAULT_TEXT_COLOR } from "../../utils/constants";
   import { defineMeta } from "@storybook/addon-svelte-csf";
 

package/dist/components/button/ButtonNode.svelte

@@ -1,12 +1,36 @@
 <script lang="ts">
   import Stack from "../stack/Stack.svelte";
   import { getPaywallContext } from "../../stores/paywall";
+  import { getSelectedStateContext } from "../../stores/selected";
   import type { ButtonProps } from "../../types/components/button";
+  import { getActiveStateProps } from "../../utils/style-utils";
+
+  const props: ButtonProps = $props();
+
+  const selectedState = getSelectedStateContext();
+  const { action } = $derived.by(() => {
+    return {
+      ...props,
+      ...getActiveStateProps($selectedState, props.overrides),
+    };
+  });
 
-  const { stack, action }: ButtonProps = $props();
   const { onButtonAction } = getPaywallContext();
 
-  const onclick = () => onButtonAction(action);
+  const onclick = () => onButtonAction(props.action);
+
+  const visible = $derived.by(() => {
+    switch (action.type) {
+      case "navigate_back":
+        return false;
+      case "navigate_to":
+        return action.destination !== "web_paywall_link";
+      default:
+        return true;
+    }
+  });
 </script>
 
-<Stack {...stack} {onclick} />
+{#if visible}
+  <Stack {...props.stack} {onclick} />
+{/if}