@revenuecat/purchases-ui-js 3.12.0 → 4.0.0

package/dist/components/button/ButtonNodeTestWrapper.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import { setLocalizationContext } from "../../stores/localization";
+  import { setPackageInfoContext } from "../../stores/packageInfo";
   import { setPaywallContext } from "../../stores/paywall";
+  import { setVariablesContext } from "../../stores/variables";
   import { writable, readable } from "svelte/store";
   import ButtonNode from "./ButtonNode.svelte";
   import type { ButtonProps } from "../../types/components/button";
@@ -30,6 +32,8 @@
     uiConfig: {} as never,
     hideBackButtons,
   });
+  setPackageInfoContext(readable(undefined));
+  setVariablesContext(readable({}));
 </script>
 
 <ButtonNode {...buttonProps} />

package/dist/components/countdown/Countdown.svelte

@@ -50,6 +50,10 @@
     // Otherwise show countdown_stack
     return countdown_stack;
   });
+
+  const isVisible = $derived(props.visible !== false);
 </script>
 
-<Stack {...activeStack} />
+{#if isVisible}
+  <Stack {...activeStack} />
+{/if}

package/dist/components/express-purchase-button/ExpressPurchaseButton.svelte

@@ -31,8 +31,8 @@
   const shouldShowAvailableStack = $derived(
     Boolean(
       wallet_available_stack &&
-        walletButtonAvailable &&
-        !shouldShowWalletSkeleton,
+      walletButtonAvailable &&
+      !shouldShowWalletSkeleton,
     ),
   );
 
@@ -52,9 +52,9 @@
 </script>
 
 <Stack {...wrapperStackProps}>
-  <Stack
-    {...{ ...wallet_available_stack, visible: shouldShowAvailableStack }}
-  />
+  <div class={shouldShowAvailableStack ? "wallet-slot" : "wallet-slot-hidden"}>
+    <Stack {...wallet_available_stack} />
+  </div>
 
   {#if shouldShowWalletSkeleton}
     <Stack {...wallet_unknown_stack} />
@@ -62,3 +62,12 @@
     <Stack {...wallet_unavailable_stack} />
   {/if}
 </Stack>
+
+<style>
+  .wallet-slot {
+    display: contents;
+  }
+  .wallet-slot-hidden {
+    display: none;
+  }
+</style>

package/dist/components/icon/Icon.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import { getColorModeContext } from "../../stores/color-mode";
+  import { getOptionalPackageInfoContext } from "../../stores/packageInfo";
+  import { getPaywallContext } from "../../stores/paywall";
   import { getSelectedStateContext } from "../../stores/selected";
+  import { getOptionalVariablesContext } from "../../stores/variables";
   import type { IconProps } from "../../types/components/icon";
   import {
     css,
@@ -11,10 +14,16 @@
     mapSize,
     mapSpacing,
   } from "../../utils/base-utils";
-  import { getActiveStateProps } from "../../utils/style-utils";
+  import {
+    evaluateVisibilityConditions,
+    getActiveStateProps,
+  } from "../../utils/style-utils";
 
   const props: IconProps = $props();
   const selectedState = getSelectedStateContext();
+  const packageInfo = getOptionalPackageInfoContext();
+  const { selectedPackageId } = getPaywallContext();
+  const variables = getOptionalVariablesContext();
   const {
     base_url,
     formats,
@@ -66,8 +75,22 @@
       "-webkit-mask-repeat": "no-repeat",
     }),
   );
+
+  const isVisible = $derived(
+    evaluateVisibilityConditions(
+      {
+        selectedPackageId: $selectedPackageId,
+        packageInfo: $packageInfo,
+        variables: $variables ?? {},
+      },
+      props.overrides,
+      props.visible,
+    ),
+  );
 </script>
 
-<div class="rc-gradient-border" style={container}>
-  <div style={icon}></div>
-</div>
+{#if isVisible}
+  <div class="rc-gradient-border" style={container}>
+    <div style={icon}></div>
+  </div>
+{/if}

package/dist/components/image/Image.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import { getColorModeContext } from "../../stores/color-mode";
+  import { getOptionalPackageInfoContext } from "../../stores/packageInfo";
+  import { getPaywallContext } from "../../stores/paywall";
   import { getSelectedStateContext } from "../../stores/selected";
+  import { getOptionalVariablesContext } from "../../stores/variables";
   import type { ImageProps } from "../../types/components/image";
   import {
     css,
@@ -10,13 +13,19 @@
     mapSize,
     mapSpacing,
   } from "../../utils/base-utils";
-  import { getActiveStateProps } from "../../utils/style-utils";
+  import {
+    evaluateVisibilityConditions,
+    getActiveStateProps,
+  } from "../../utils/style-utils";
   import ClipPath from "./ClipPath.svelte";
   import Overlay from "./Overlay.svelte";
 
   const props: ImageProps = $props();
 
   const selectedState = getSelectedStateContext();
+  const packageInfo = getOptionalPackageInfoContext();
+  const { selectedPackageId } = getPaywallContext();
+  const variables = getOptionalVariablesContext();
   const {
     id,
     source,
@@ -112,68 +121,82 @@
   const overlay = $derived(
     color_overlay && mapColorMode(colorMode, color_overlay),
   );
+
+  const isVisible = $derived(
+    evaluateVisibilityConditions(
+      {
+        selectedPackageId: $selectedPackageId,
+        packageInfo: $packageInfo,
+        variables: $variables ?? {},
+      },
+      props.overrides,
+      props.visible,
+    ),
+  );
 </script>
 
-<div {style} bind:clientWidth={wrapperWidth}>
-  <svg
-    bind:contentRect={svgRect}
-    width="100%"
-    height="100%"
-    {viewBox}
-    style={svgStyle}
-  >
-    <defs>
-      <clipPath id={`${id}-path`}>
-        <ClipPath shape={mask_shape} width={svgWidth} height={svgHeight} />
-      </clipPath>
-
-      <g id={`${id}-border`}>
-        <ClipPath shape={mask_shape} width={svgWidth} height={svgHeight} />
-      </g>
+{#if isVisible}
+  <div {style} bind:clientWidth={wrapperWidth}>
+    <svg
+      bind:contentRect={svgRect}
+      width="100%"
+      height="100%"
+      {viewBox}
+      style={svgStyle}
+    >
+      <defs>
+        <clipPath id={`${id}-path`}>
+          <ClipPath shape={mask_shape} width={svgWidth} height={svgHeight} />
+        </clipPath>
+
+        <g id={`${id}-border`}>
+          <ClipPath shape={mask_shape} width={svgWidth} height={svgHeight} />
+        </g>
+
+        <Overlay id={`${id}-overlay`} {overlay} />
+        {#if border && border.width > 0}
+          <Overlay
+            id={`${id}-border-color`}
+            overlay={mapColorMode(colorMode, border.color)}
+          />
+        {/if}
+      </defs>
 
-      <Overlay id={`${id}-overlay`} {overlay} />
       {#if border && border.width > 0}
-        <Overlay
-          id={`${id}-border-color`}
-          overlay={mapColorMode(colorMode, border.color)}
-        />
-      {/if}
-    </defs>
-
-    {#if border && border.width > 0}
-      <use href={`#${id}-border`} fill="transparent" />
-    {/if}
-
-    <g clip-path={`url(#${id}-path)`}>
-      <foreignObject x="0" y="0" width="100%" height="100%">
-        <img
-          src={image.original}
-          style="object-fit:{mapFitMode(fit_mode)}"
-          alt=""
-        />
-      </foreignObject>
-
-      {#if overlay}
-        <rect
-          x="0"
-          y="0"
-          height="100%"
-          width="100%"
-          fill={`url(#${id}-overlay)`}
-        />
+        <use href={`#${id}-border`} fill="transparent" />
       {/if}
 
-      {#if border && border.width > 0}
-        <use
-          href={`#${id}-border`}
-          fill="none"
-          stroke={`url(#${id}-border-color)`}
-          stroke-width={border.width * 2}
-        />
-      {/if}
-    </g>
-  </svg>
-</div>
+      <g clip-path={`url(#${id}-path)`}>
+        <foreignObject x="0" y="0" width="100%" height="100%">
+          <img
+            src={image.original}
+            style="object-fit:{mapFitMode(fit_mode)}"
+            alt=""
+          />
+        </foreignObject>
+
+        {#if overlay}
+          <rect
+            x="0"
+            y="0"
+            height="100%"
+            width="100%"
+            fill={`url(#${id}-overlay)`}
+          />
+        {/if}
+
+        {#if border && border.width > 0}
+          <use
+            href={`#${id}-border`}
+            fill="none"
+            stroke={`url(#${id}-border-color)`}
+            stroke-width={border.width * 2}
+          />
+        {/if}
+      </g>
+    </svg>
+  </div>
+{/if}
 
 <style>
   img {

package/dist/components/input-text/InputText.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   import { getColorModeContext } from "../../stores/color-mode";
   import { getLocalizationContext } from "../../stores/localization";
+  import { getOptionalPackageInfoContext } from "../../stores/packageInfo";
   import { getPaywallContext } from "../../stores/paywall";
-  import { getVariablesContext } from "../../stores/variables";
+  import { getOptionalVariablesContext } from "../../stores/variables";
   import { FontWeights, TextAlignments } from "../../types";
   import type {
     InputTextKeyboardType,
@@ -22,6 +23,7 @@
     isFontRCFMManaged,
   } from "../../utils/font-utils";
   import {
+    evaluateVisibilityConditions,
     getErrorStateProps,
     getFocusStateProps,
   } from "../../utils/style-utils";
@@ -88,11 +90,12 @@
 
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
-  const { uiConfig, onInputChanged } = getPaywallContext();
+  const { uiConfig, onInputChanged, selectedPackageId } = getPaywallContext();
+  const packageInfo = getOptionalPackageInfoContext();
 
   const wrapperStyle = $derived(
     css({
-      display: props.visible === false ? "none" : "flex",
+      display: "flex",
       width: mapSize(size.width),
       height: mapSize(size.height),
       margin: mapSpacing(margin),
@@ -140,7 +143,7 @@
     });
   });
 
-  const variables = getVariablesContext();
+  const variables = getOptionalVariablesContext();
   const { getLocalizedString } = getLocalizationContext();
   const placeholder = $derived(
     replaceVariables(getLocalizedString(placeholder_lid), $variables),
@@ -161,21 +164,35 @@
         return "url";
     }
   });
+
+  const isVisible = $derived(
+    evaluateVisibilityConditions(
+      {
+        selectedPackageId: $selectedPackageId,
+        packageInfo: $packageInfo,
+        variables: $variables ?? {},
+      },
+      props.overrides,
+      props.visible,
+    ),
+  );
 </script>
 
-<div class="rc-gradient-border" style={wrapperStyle}>
-  <input
-    {type}
-    {placeholder}
-    {required}
-    inputmode={keyboard_type}
-    autocapitalize={capitalize}
-    style={inputStyle}
-    {oninput}
-    onfocus={() => (focused = true)}
-    {onblur}
-  />
-</div>
+{#if isVisible}
+  <div class="rc-gradient-border" style={wrapperStyle}>
+    <input
+      {type}
+      {placeholder}
+      {required}
+      inputmode={keyboard_type}
+      autocapitalize={capitalize}
+      style={inputStyle}
+      {oninput}
+      onfocus={() => (focused = true)}
+      {onblur}
+    />
+  </div>
+{/if}
 
 <style>
   input {

package/dist/components/layout/Main/Main.stories.svelte

@@ -0,0 +1,263 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import type { ComponentProps } from "svelte";
+  import Main from "./Main.svelte";
+  import Screen from "../../workflows/Screen.svelte";
+  import type { Background } from "../../../types/background";
+  import type { Component } from "../../../types/component";
+  import type { HeaderProps } from "../../../types/components/header";
+  import type { FooterProps } from "../../../types/components/footer";
+  import type { TextNodeProps } from "../../../types/components/text";
+  import type { WorkflowScreen } from "../../../types/workflow";
+  import { uiConfigData } from "../../../stories/fixtures";
+
+  function textComponent(id: string, textLid: string): TextNodeProps {
+    return {
+      type: "text",
+      id,
+      name: "",
+      text_lid: textLid,
+      font_name: null,
+      font_size: "body_m",
+      font_weight: "bold",
+      horizontal_alignment: "center",
+      color: { light: { type: "hex", value: "#ffffffff" } },
+      background_color: null,
+      padding: { top: 0, bottom: 0, leading: 0, trailing: 0 },
+      margin: { top: 0, bottom: 0, leading: 0, trailing: 0 },
+      size: { width: { type: "fit" }, height: { type: "fit" } },
+    };
+  }
+
+  function visibleStack(components: Component[] = []) {
+    return {
+      type: "stack" as const,
+      id: "s",
+      name: "",
+      components,
+      size: {
+        width: { type: "fill" as const },
+        height: { type: "fit" as const },
+      },
+      dimension: {
+        type: "vertical" as const,
+        alignment: "center" as const,
+        distribution: "center" as const,
+      },
+      spacing: 0,
+      margin: { top: 0, bottom: 0, leading: 0, trailing: 0 },
+      padding: { top: 16, bottom: 16, leading: 0, trailing: 0 },
+      background_color: { light: { type: "hex" as const, value: "#00000033" } },
+      background: null,
+      border: null,
+      shape: null,
+      shadow: null,
+      badge: null,
+    };
+  }
+
+  const minimalHeader: HeaderProps = {
+    id: "header",
+    name: "Header",
+    type: "header",
+    stack: visibleStack([textComponent("header-label", "header_label")]),
+  };
+
+  const minimalFooter: FooterProps = {
+    id: "footer",
+    name: "Footer",
+    type: "footer",
+    stack: visibleStack([textComponent("footer-label", "footer_label")]),
+  };
+
+  function shellData(
+    background: Background,
+    hasHeader: boolean,
+    hasFooter: boolean,
+  ): WorkflowScreen {
+    return {
+      id: "main-story",
+      default_locale: "en_US",
+      components_localizations: {
+        en_US: { header_label: "Header", footer_label: "Footer" },
+      },
+      asset_base_url: "https://assets.pawwalls.com",
+      config: {},
+      localized_strings: {},
+      localized_strings_by_tier: {},
+      name: "Main story",
+      offering_id: null,
+      revision: 1,
+      template_name: "stack",
+      components_config: {
+        base: {
+          background,
+          header: hasHeader ? minimalHeader : null,
+          sticky_footer: hasFooter ? minimalFooter : null,
+          stack: {
+            type: "stack" as const,
+            id: "content",
+            name: "",
+            components: [],
+            size: {
+              width: { type: "fill" as const },
+              height: { type: "fill" as const },
+            },
+            dimension: {
+              type: "vertical" as const,
+              alignment: "center" as const,
+              distribution: "start" as const,
+            },
+            spacing: 0,
+            margin: { top: 0, bottom: 0, leading: 0, trailing: 0 },
+            padding: { top: 0, bottom: 0, leading: 0, trailing: 0 },
+            background_color: null,
+            background: null,
+            border: null,
+            shape: null,
+            shadow: null,
+            badge: null,
+          },
+        },
+      },
+    };
+  }
+
+  const solidColour: Background = {
+    type: "color",
+    value: { light: { type: "hex", value: "#6B4FBBFF" } },
+  };
+
+  const gradient: Background = {
+    type: "color",
+    value: {
+      light: {
+        type: "linear",
+        degrees: 180,
+        points: [
+          { percent: 0, color: "#3B82F6FF" },
+          { percent: 100, color: "#9333EAFF" },
+        ],
+      },
+    },
+  };
+
+  const image: Background = {
+    type: "image",
+    fit_mode: "fill",
+    color_overlay: null,
+    value: {
+      light: {
+        width: 1170,
+        height: 2532,
+        original: "https://placehold.co/1170x2532",
+        heic: "https://placehold.co/1170x2532",
+        heic_low_res: "https://placehold.co/1170x2532",
+        webp: "https://placehold.co/1170x2532",
+        webp_low_res: "https://placehold.co/1170x2532",
+      },
+    },
+  };
+
+  const { Story } = defineMeta({
+    title: "Components/Layout/Main",
+    component: Main,
+    render: template,
+    args: { paywallData: shellData(solidColour, false, false) },
+  });
+</script>
+
+{#snippet template({
+  paywallData,
+  preferredColorMode,
+}: ComponentProps<typeof Main>)}
+  <div class="viewport-frame">
+    <Main {paywallData} {preferredColorMode}>
+      <div class="content-wrapper">
+        <Screen paywallComponents={paywallData} uiConfig={uiConfigData} />
+      </div>
+    </Main>
+  </div>
+{/snippet}
+
+<Story
+  name="Solid colour"
+  args={{ paywallData: shellData(solidColour, false, false) }}
+/>
+<Story
+  name="Solid colour — header"
+  args={{ paywallData: shellData(solidColour, true, false) }}
+/>
+<Story
+  name="Solid colour — footer"
+  args={{ paywallData: shellData(solidColour, false, true) }}
+/>
+<Story
+  name="Solid colour — header and footer"
+  args={{ paywallData: shellData(solidColour, true, true) }}
+/>
+
+<Story
+  name="Gradient"
+  args={{ paywallData: shellData(gradient, false, false) }}
+/>
+<Story
+  name="Gradient — header"
+  args={{ paywallData: shellData(gradient, true, false) }}
+/>
+<Story
+  name="Gradient — footer"
+  args={{ paywallData: shellData(gradient, false, true) }}
+/>
+<Story
+  name="Gradient — header and footer"
+  args={{ paywallData: shellData(gradient, true, true) }}
+/>
+
+<Story name="Image" args={{ paywallData: shellData(image, false, false) }} />
+<Story
+  name="Image — header"
+  args={{ paywallData: shellData(image, true, false) }}
+/>
+<Story
+  name="Image — footer"
+  args={{ paywallData: shellData(image, false, true) }}
+/>
+<Story
+  name="Image — header and footer"
+  args={{ paywallData: shellData(image, true, true) }}
+/>
+
+<style>
+  /* A fixed-position frame that emulates rc-workflows' <body> (see app.css).
+     Using position:fixed escapes Storybook's DOM chain (.sb-show-main, #storybook-root, PaywallWrapper) */
+  .viewport-frame {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    padding: env(safe-area-inset-top) env(safe-area-inset-right)
+      env(safe-area-inset-bottom) env(safe-area-inset-left);
+    background-color: var(--rc-purchases-ui-bg-color, Canvas);
+    color-scheme: light dark;
+    overflow: hidden;
+  }
+
+  .content-wrapper {
+    width: 100%;
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  /* Screen's containerId is "screen-container" by default */
+  :global(#screen-container) {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: hidden;
+  }
+</style>

package/dist/components/layout/Main/Main.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Main from "./Main.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 Main: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Main = InstanceType<typeof Main>;
+export default Main;