@revenuecat/purchases-ui-js 2.0.4 → 2.0.6

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

@@ -19,11 +19,20 @@
 
   const onclick = () => onButtonAction(props.action);
 
-  const isWebPurchaseLink = $derived(
-    action.type === "navigate_to" && action.destination === "web_paywall_link",
-  );
+  const visible = $derived.by(() => {
+    switch (action.type) {
+      case "navigate_back":
+        return false;
+      case "navigate_to":
+        return action.destination !== "web_paywall_link";
+      default:
+        return true;
+    }
+  });
+
+  const style = $derived({
+    visibility: visible ? "visible" : "hidden",
+  });
 </script>
 
-{#if !isWebPurchaseLink}
-  <Stack {...props.stack} {onclick} />
-{/if}
+<Stack {...props.stack} {onclick} {style} />

package/dist/components/package/Package.svelte

@@ -13,7 +13,9 @@
 
   const { selectedPackageId, variablesPerPackage } = getPaywallContext();
 
-  setSelectedStateContext(package_id);
+  setSelectedStateContext(
+    derived(selectedPackageId, (value) => value === package_id),
+  );
 
   const onPackageClick = () => {
     $selectedPackageId = package_id;

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";
@@ -13,18 +14,10 @@
   import type { Component as SvelteComponent } from "svelte";
   import Carousel from "../carousel/Carousel.svelte";
   import Icon from "../icon/Icon.svelte";
-
-  type SupportedComponents =
-    | ButtonNode
-    | Carousel
-    | Footer
-    | Icon
-    | Image
-    | Package
-    | PurchaseButton
-    | Stack
-    | TextNode
-    | Timeline;
+  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 {
     nodeData: Component;
@@ -39,8 +32,13 @@
     package: Package,
     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 }>
@@ -58,12 +56,12 @@
    */
   export const getComponentClass: (
     nodeData: Component,
-  ) => [SvelteComponent<SupportedComponents>, Component] | undefined = (
+  ) => [SvelteComponent<Component>, Component] | undefined = (
     nodeData: Component,
   ) => {
     if (ComponentTypes[nodeData.type]) {
       return [
-        ComponentTypes[nodeData.type] as SvelteComponent<SupportedComponents>,
+        ComponentTypes[nodeData.type] as SvelteComponent<Component>,
         nodeData,
       ];
     }
@@ -71,7 +69,7 @@
     const { fallback } = nodeData;
     if (fallback && ComponentTypes[fallback?.type]) {
       return [
-        ComponentTypes[fallback.type] as SvelteComponent<SupportedComponents>,
+        ComponentTypes[fallback.type] as SvelteComponent<Component>,
         fallback,
       ];
     }

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

@@ -1,11 +1,5 @@
 import { SvelteComponent } from "svelte";
-import { Footer, Image, Package, PurchaseButton, Stack, Timeline } from "../..";
-import ButtonNode from "../button/ButtonNode.svelte";
-import TextNode from "../text/TextNode.svelte";
 import type { Component } from "../../types/component";
-import Carousel from "../carousel/Carousel.svelte";
-import Icon from "../icon/Icon.svelte";
-type SupportedComponents = ButtonNode | Carousel | Footer | Icon | Image | Package | PurchaseButton | Stack | TextNode | Timeline;
 interface Props {
     nodeData: Component;
 }
@@ -18,7 +12,7 @@ declare const Node: import("svelte").Component<Props, {
        * @param nodeData:Component - the Component object representing a Node in the paywall
        * @returns [Component<SupportedComponents>, Component] - a tuple containing the component class and the node data
        * @throws Error - if the component type and the fallback component type are not supported
-       */ getComponentClass: (nodeData: Component) => [SvelteComponent<SupportedComponents>, Component] | undefined;
+       */ getComponentClass: (nodeData: Component) => [SvelteComponent<Component>, Component] | undefined;
 }, "">;
 type Node = ReturnType<typeof Node>;
 export default Node;

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

@@ -19,7 +19,11 @@
     uiConfigData,
     zStackTemplate,
   } from "../../stories/fixtures";
+  import { waitForAnimations } from "storybook/internal/preview-api";
+  import { viewportDecorator } from "../../stories/viewport-decorator";
+  import { BACKGROUND_PAYWALL } from "./fixtures/background-paywall";
   import { OVERRIDE_PAYWALL } from "./fixtures/override-paywall";
+  import { SHEET_PAYWALL } from "./fixtures/sheet-paywall";
   import { STACK_PAYWALL } from "./fixtures/stack-paywall";
   import { VARIABLES } from "./fixtures/variables";
 
@@ -53,6 +57,157 @@
   }}
 />
 
+<Story
+  name="Sheet"
+  decorators={[viewportDecorator(500, 500, 0)]}
+  play={async ({ canvasElement }) => {
+    const button = canvasElement.querySelector("button");
+    button?.click();
+    await waitForAnimations();
+  }}
+  args={{
+    paywallData: SHEET_PAYWALL,
+  }}
+/>
+
+<Story
+  name="Background - Color"
+  decorators={[viewportDecorator(500, 500, 0)]}
+  args={{
+    paywallData: BACKGROUND_PAYWALL({
+      type: "color",
+      value: {
+        light: {
+          type: "hex",
+          value: "#ddffddff",
+        },
+      },
+    }),
+  }}
+/>
+
+<Story
+  name="Background - Linear gradient"
+  decorators={[viewportDecorator(500, 500, 0)]}
+  args={{
+    paywallData: BACKGROUND_PAYWALL({
+      type: "color",
+      value: {
+        light: {
+          type: "linear",
+          degrees: 0,
+          points: [
+            { percent: 0, color: "#ddffddff" },
+            {
+              percent: 100,
+              color: "#000000ff",
+            },
+          ],
+        },
+      },
+    }),
+  }}
+/>
+
+<Story
+  name="Background - Radial gradient"
+  decorators={[viewportDecorator(500, 500, 0)]}
+  args={{
+    paywallData: BACKGROUND_PAYWALL({
+      type: "color",
+      value: {
+        light: {
+          type: "radial",
+          points: [
+            { percent: 0, color: "#ddffddff" },
+            {
+              percent: 100,
+              color: "#000000ff",
+            },
+          ],
+        },
+      },
+    }),
+  }}
+/>
+
+<Story
+  name="Background - Image fit"
+  decorators={[viewportDecorator(500, 500, 0)]}
+  args={{
+    paywallData: BACKGROUND_PAYWALL({
+      type: "image",
+      fit_mode: "fit",
+      color_overlay: null,
+      value: {
+        light: {
+          width: 600,
+          height: 400,
+          original: "https://placehold.co/500x1000",
+          heic: "https://placehold.co/500x1000",
+          heic_low_res: "https://placehold.co/500x1000",
+          webp: "https://placehold.co/500x1000",
+          webp_low_res: "https://placehold.co/500x1000",
+        },
+      },
+    }),
+  }}
+/>
+
+<Story
+  name="Background - Image fill"
+  decorators={[viewportDecorator(500, 500, 0)]}
+  args={{
+    paywallData: BACKGROUND_PAYWALL({
+      type: "image",
+      fit_mode: "fill",
+      color_overlay: null,
+      value: {
+        light: {
+          width: 600,
+          height: 400,
+          original: "https://placehold.co/500x1000",
+          heic: "https://placehold.co/500x1000",
+          heic_low_res: "https://placehold.co/500x1000",
+          webp: "https://placehold.co/500x1000",
+          webp_low_res: "https://placehold.co/500x1000",
+        },
+      },
+    }),
+  }}
+/>
+
+<Story
+  name="Background - Image overlay"
+  decorators={[viewportDecorator(500, 500, 0)]}
+  args={{
+    paywallData: BACKGROUND_PAYWALL({
+      type: "image",
+      fit_mode: "fill",
+      color_overlay: {
+        light: {
+          type: "radial",
+          points: [
+            { percent: 0, color: "#ddffdd7f" },
+            { percent: 100, color: "#0000007f" },
+          ],
+        },
+      },
+      value: {
+        light: {
+          width: 600,
+          height: 400,
+          original: "https://placehold.co/500x1000",
+          heic: "https://placehold.co/500x1000",
+          heic_low_res: "https://placehold.co/500x1000",
+          webp: "https://placehold.co/500x1000",
+          webp_low_res: "https://placehold.co/500x1000",
+        },
+      },
+    }),
+  }}
+/>
+
 <Story
   name="Primary"
   args={{

package/dist/components/paywall/Paywall.svelte

@@ -1,10 +1,5 @@
 <script lang="ts">
   import Footer from "../footer/Footer.svelte";
-  import Node from "./Node.svelte";
-  import {
-    getBackgroundImageSource,
-    getBackgroundStyles,
-  } from "./paywall-utils";
   import { setColorModeContext } from "../../stores/color-mode";
   import { setLocalizationContext } from "../../stores/localization";
   import { setPaywallContext } from "../../stores/paywall";
@@ -14,13 +9,18 @@
   } from "../../stores/variables";
   import type { ColorMode } from "../../types";
   import type { Action } from "../../types/components/button";
+  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 { mapBackground } from "../../utils/background-utils";
+  import { css } from "../../utils/base-utils";
   import { registerFonts } from "../../utils/font-utils";
   import { findSelectedPackageId } from "../../utils/style-utils";
   import { onMount } from "svelte";
   import { derived, readable, writable } from "svelte/store";
+  import Stack from "../stack/Stack.svelte";
+  import Sheet from "./Sheet.svelte";
 
   interface Props {
     paywallData: PaywallData;
@@ -53,14 +53,18 @@
   const getColorMode = setColorModeContext(() => preferredColorMode);
   const colorMode = $derived(getColorMode());
 
+  const { default_locale, components_config, components_localizations } =
+    paywallData;
+  const { base } = components_config;
+
   const { getLocalizedString } = setLocalizationContext(() => ({
-    defaultLocale: paywallData.default_locale,
+    defaultLocale: default_locale,
     selectedLocale,
-    localizations: paywallData.components_localizations!,
+    localizations: components_localizations!,
   }));
 
   const selectedPackageId = writable<string | undefined>(
-    findSelectedPackageId(paywallData),
+    findSelectedPackageId(base),
   );
 
   const onPurchase = () => {
@@ -70,6 +74,8 @@
     }
   };
 
+  let sheet = $state<SheetProps>();
+
   const onButtonAction = (action: Action) => {
     switch (action.type) {
       case "navigate_back":
@@ -92,10 +98,12 @@
           onNavigateToUrlClicked?.(url);
         }
         return;
-      case "offer_code":
       case "sheet":
+        sheet = action.sheet ?? undefined;
+        return;
+      case "offer_code":
       case "web_paywall_link":
-        // TODO: Implement later.
+        // Ignored.
         return;
     }
   };
@@ -115,49 +123,52 @@
 
   setVariablesContext(variables);
 
-  const backgroundStyles = $derived(
-    getBackgroundStyles({
-      background: paywallData.components_config.base?.background,
-      colorMode,
+  const style = $derived(
+    css({
+      ...mapBackground(colorMode, null, base.background),
     }),
   );
-  const backgroundImgSource = $derived(
-    getBackgroundImageSource(paywallData, colorMode),
-  );
 
   onMount(() => {
     registerFonts(uiConfig);
   });
+
+  const paywallClass = $derived(sheet ? "paywall blur" : "paywall");
+
+  const { stack, sticky_footer } = base;
 </script>
 
 <svelte:boundary onerror={onError}>
-  <div class="rc-pw-paywall">
-    <Node nodeData={paywallData.components_config.base.stack} />
-
-    {#if paywallData.components_config.base.sticky_footer}
-      <Footer
-        {...paywallData.components_config.base.sticky_footer}
-        stack={paywallData.components_config.base.sticky_footer.stack}
-      />
-    {/if}
-    {#if paywallData.components_config.base.background?.type === "color"}
-      <div class="rc-pw-paywall-background" style={backgroundStyles}></div>
-    {:else if paywallData.components_config.base.background?.type === "image"}
-      <div class="rc-pw-paywall-background rc-pw-image-container">
-        <img class="rc-pw-image" src={backgroundImgSource} alt="" />
-      </div>
+  <div class={paywallClass} {style}>
+    <Stack {...stack} />
+
+    {#if sticky_footer}
+      <Footer {...sticky_footer} />
     {/if}
   </div>
+
+  {#if sheet}
+    <Sheet {...sheet} />
+  {/if}
 </svelte:boundary>
 
 <style>
-  .rc-pw-paywall {
+  .paywall {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: stretch;
     height: 100%;
-    overflow: hidden;
+
+    transition-property: filter, transform;
+    transition-duration: 0.1s;
+    transition-timing-function: ease-in-out;
+    transform-origin: center;
+
+    &:global(.blur) {
+      filter: blur(10px) brightness(0.8);
+      transform: scale(1.045);
+    }
 
     & > :global(*:first-child) {
       flex-grow: 1;
@@ -165,27 +176,6 @@
     }
   }
 
-  .rc-pw-paywall-background {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: var(--paywall-background, none);
-    z-index: -1;
-  }
-  .rc-pw-image-container {
-    overflow: hidden;
-    background: none;
-  }
-
-  .rc-pw-image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
-  }
-
   :global {
     *,
     *::before,

package/dist/components/paywall/Sheet.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+  import { getColorModeContext } from "../../stores/color-mode";
+  import { getPaywallContext } from "../../stores/paywall";
+  import { getSelectedStateContext } from "../../stores/selected";
+  import type { SheetProps } from "../../types/components/sheet";
+  import { mapBackground } from "../../utils/background-utils";
+  import { css, mapSize } from "../../utils/base-utils";
+  import { getActiveStateProps } from "../../utils/style-utils";
+  import { onMount } from "svelte";
+  import Stack from "../stack/Stack.svelte";
+
+  const props: SheetProps = $props();
+  const { stack } = props;
+
+  const selectedState = getSelectedStateContext();
+  const { size, background, background_blur, position } = $derived.by(() => {
+    return {
+      ...props,
+      ...getActiveStateProps($selectedState, props.overrides),
+    };
+  });
+
+  const getColorMode = getColorModeContext();
+  const colorMode = $derived(getColorMode());
+
+  const backdropStyle = $derived(
+    css({
+      background: background_blur ? "#0000003f" : "",
+    }),
+  );
+
+  const sheetStyle = $derived(
+    css({
+      height: mapSize(size.height),
+      ...mapBackground(colorMode, null, background),
+    }),
+  );
+
+  const { onButtonAction } = getPaywallContext();
+
+  let sheet: HTMLDivElement | undefined;
+  let visible = $state(false);
+
+  onMount(() => {
+    requestAnimationFrame(() => {
+      visible = true;
+    });
+  });
+
+  const hideSheet = () => {
+    visible = false;
+  };
+
+  const ontransitionend = () => {
+    if (visible) {
+      return;
+    }
+
+    onButtonAction({
+      type: "navigate_to",
+      destination: "sheet",
+      sheet: null,
+    });
+  };
+
+  const onclick = (event: MouseEvent) => {
+    if (event.target === event.currentTarget) {
+      hideSheet();
+    }
+  };
+
+  const onkeydown = (event: KeyboardEvent) => {
+    if (event.key === "Escape") {
+      hideSheet();
+    }
+  };
+
+  let sheetClass = $derived(`sheet ${visible ? "visible" : ""}`);
+</script>
+
+<div
+  class="backdrop"
+  style={backdropStyle}
+  {onclick}
+  {onkeydown}
+  role="presentation"
+  tabindex="-1"
+  aria-hidden="true"
+>
+  <div
+    bind:this={sheet}
+    class={sheetClass}
+    style={sheetStyle}
+    role="dialog"
+    aria-modal="true"
+    {ontransitionend}
+  >
+    <Stack {...stack} />
+  </div>
+</div>
+
+<style>
+  .backdrop {
+    position: absolute;
+    inset: 0 0 0 0;
+    width: 100%;
+    height: 100%;
+    background-color: #0000003f;
+
+    display: flex;
+    flex-direction: column;
+  }
+
+  .sheet {
+    position: absolute;
+    inset: auto 0 0 0;
+    transition-property: transform;
+    transition-duration: 225ms;
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    transform: translateY(100%);
+
+    &.visible {
+      transform: translateY(0);
+    }
+  }
+</style>

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

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

package/dist/components/paywall/fixtures/background-paywall.d.ts

@@ -0,0 +1,3 @@
+import type { Background } from "../../../types/background";
+import type { PaywallData } from "../../../types/paywall";
+export declare const BACKGROUND_PAYWALL: (background: Background) => PaywallData;

package/dist/components/paywall/fixtures/background-paywall.js

@@ -0,0 +1,62 @@
+export const BACKGROUND_PAYWALL = (background) => {
+    return {
+        default_locale: "en_US",
+        components_localizations: {
+            en_US: {},
+        },
+        components_config: {
+            base: {
+                background,
+                stack: {
+                    background: null,
+                    background_color: null,
+                    badge: null,
+                    border: null,
+                    components: [],
+                    dimension: {
+                        alignment: "center",
+                        distribution: "start",
+                        type: "vertical",
+                    },
+                    id: "rocJhuHfiP",
+                    margin: {
+                        bottom: 0,
+                        leading: 0,
+                        top: 0,
+                        trailing: 0,
+                    },
+                    name: "Content",
+                    padding: {
+                        bottom: 0,
+                        leading: 0,
+                        top: 0,
+                        trailing: 0,
+                    },
+                    shadow: null,
+                    shape: {
+                        corners: {
+                            bottom_leading: 0,
+                            bottom_trailing: 0,
+                            top_leading: 0,
+                            top_trailing: 0,
+                        },
+                        type: "rectangle",
+                    },
+                    size: {
+                        height: {
+                            type: "fit",
+                            value: null,
+                        },
+                        width: {
+                            type: "fill",
+                            value: null,
+                        },
+                    },
+                    spacing: 16,
+                    type: "stack",
+                },
+                sticky_footer: null,
+            },
+        },
+    };
+};

package/dist/components/paywall/fixtures/sheet-paywall.d.ts

@@ -0,0 +1,2 @@
+import type { PaywallData } from "../../../types/paywall";
+export declare const SHEET_PAYWALL: PaywallData;