@revenuecat/purchases-ui-js 3.11.3 → 3.11.4

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

@@ -76,6 +76,7 @@
             id3: "Navigate to",
             id4: "URL navigation",
             id5: "Workflow Action",
+            id6: "Border",
           },
         },
       }),
@@ -186,3 +187,25 @@
     },
   }}
 />
+
+<Story
+  name="Border"
+  args={{
+    stack: {
+      ...stackProps(6),
+      border: {
+        width: 10,
+        color: {
+          light: {
+            type: "linear",
+            degrees: 90,
+            points: [
+              { color: "#000000", percent: 0 },
+              { color: "#FF0000", percent: 100 },
+            ],
+          },
+        },
+      },
+    },
+  }}
+/>

package/dist/components/button/ButtonNode.svelte

@@ -1,9 +1,14 @@
 <script lang="ts">
   import Stack from "../stack/Stack.svelte";
   import { getInputValidationContext } from "../../stores/inputValidation";
+  import { getLocalizationContext } from "../../stores/localization";
   import { getPaywallContext } from "../../stores/paywall";
   import { getSelectedStateContext } from "../../stores/selected";
   import type { ButtonProps } from "../../types/components/button";
+  import type {
+    ButtonInteractionData,
+    PackageSelectionSheetInteractionData,
+  } from "../../types/paywall-component-interaction";
   import { getActiveStateProps } from "../../utils/style-utils";
   import { readable } from "svelte/store";
 
@@ -17,8 +22,14 @@
     };
   });
 
-  const { onButtonAction, hideBackButtons } = getPaywallContext();
+  const {
+    emitComponentInteraction,
+    onButtonAction,
+    hideBackButtons,
+    selectedPackageId,
+  } = getPaywallContext();
   const validationContext = getInputValidationContext();
+  const { getLocalizedString } = getLocalizationContext();
 
   // Reactive store for input satisfaction (defaults to true if no validation context)
   const inputSatisfied = validationContext?.isSatisfied ?? readable(true);
@@ -29,10 +40,111 @@
       !$inputSatisfied,
   );
 
+  const getButtonInteractionData = (): ButtonInteractionData => {
+    switch (action.type) {
+      case "workflow":
+        return {
+          componentType: "button",
+          componentName: props.name,
+          componentValue: "workflow",
+        };
+      case "complete_workflow": {
+        const url = getLocalizedString(action.url.url_lid);
+        return {
+          componentType: "button",
+          componentName: props.name,
+          componentValue: "navigate_to_url",
+          ...(url ? { componentURL: url } : {}),
+        };
+      }
+      case "navigate_back":
+        return {
+          componentType: "button",
+          componentName: props.name,
+          componentValue: "navigate_back",
+        };
+      case "restore_purchases":
+        return {
+          componentType: "button",
+          componentName: props.name,
+          componentValue: "restore_purchases",
+        };
+    }
+
+    switch (action.destination) {
+      case "customer_center":
+        return {
+          componentType: "button",
+          componentName: props.name,
+          componentValue: "navigate_to_customer_center",
+        };
+      case "screen_redirect":
+        return {
+          componentType: "button",
+          componentName: props.name,
+          componentValue: "screen_redirect",
+        };
+      case "privacy_policy":
+      case "terms":
+      case "url": {
+        const url = getLocalizedString(action.url.url_lid);
+        return {
+          componentType: "button",
+          componentName: props.name,
+          componentValue:
+            action.destination === "privacy_policy"
+              ? "navigate_to_privacy_policy"
+              : action.destination === "terms"
+                ? "navigate_to_terms"
+                : "navigate_to_url",
+          ...(url ? { componentURL: url } : {}),
+        };
+      }
+      case "sheet":
+        // Unreachable: sheet open/close paths short-circuit in onclick above
+        // and emit via getSheetOpenInteractionData() / Paywall.onButtonAction.
+        // Kept to preserve switch exhaustiveness over Action["destination"].
+        throw new Error(
+          "Sheet actions must be handled by the sheet branches in onclick",
+        );
+      case "offer_code":
+        return {
+          componentType: "button",
+          componentName: props.name,
+          componentValue: "navigate_to_offer_code",
+        };
+      case "web_paywall_link":
+        return {
+          componentType: "button",
+          componentName: props.name,
+          componentValue: "navigate_to_web_paywall_link",
+        };
+    }
+  };
+
+  const getSheetOpenInteractionData =
+    (): PackageSelectionSheetInteractionData => ({
+      componentType: "package_selection_sheet",
+      componentName: action.sheet?.name ?? props.name,
+      componentValue: "open",
+      currentPackageIdentifier: $selectedPackageId,
+    });
+
   const onclick = () => {
     if (isDisabled) return;
     const actionId = props.triggers?.on_press;
-    onButtonAction(props.action, actionId);
+    const isSheetAction =
+      action.type === "navigate_to" && action.destination === "sheet";
+    const isSheetOpenAction = isSheetAction && action.sheet != null;
+    const isSheetCloseAction = isSheetAction && action.sheet == null;
+
+    if (isSheetOpenAction) {
+      emitComponentInteraction(getSheetOpenInteractionData());
+    } else if (!isSheetCloseAction) {
+      emitComponentInteraction(getButtonInteractionData());
+    }
+
+    onButtonAction(action, actionId);
   };
 
   const visible = $derived.by(() => {

package/dist/components/button/ButtonNodeTestWrapper.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { setLocalizationContext } from "../../stores/localization";
   import { setPaywallContext } from "../../stores/paywall";
   import { writable, readable } from "svelte/store";
   import ButtonNode from "./ButtonNode.svelte";
@@ -10,12 +11,21 @@
 
   const { hideBackButtons = false, ...buttonProps }: Props = $props();
 
+  setLocalizationContext(() => ({
+    defaultLocale: "en_US",
+    localizations: {
+      en_US: {},
+    },
+  }));
+
   setPaywallContext({
+    defaultPackageId: undefined,
     selectedPackageId: writable(undefined),
     variablesPerPackage: readable(undefined),
     baseVariables: readable(undefined),
     infoPerPackage: readable(undefined),
     onPurchase: () => {},
+    emitComponentInteraction: () => {},
     onButtonAction: () => {},
     uiConfig: {} as never,
     hideBackButtons,

package/dist/components/carousel/Carousel.stories.svelte

@@ -1037,3 +1037,22 @@
     ],
   }}
 />
+
+<Story
+  name="Border"
+  args={{
+    border: {
+      width: 10,
+      color: {
+        light: {
+          type: "linear",
+          degrees: 90,
+          points: [
+            { color: "#000000", percent: 0 },
+            { color: "#FF0000", percent: 100 },
+          ],
+        },
+      },
+    },
+  }}
+/>

package/dist/components/carousel/Carousel.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { getColorModeContext } from "../../stores/color-mode";
+  import { getPaywallContext } from "../../stores/paywall";
   import { getSelectedStateContext } from "../../stores/selected";
   import type { CarouselProps } from "../../types/components/carousel";
   import { mapBackground } from "../../utils/background-utils";
@@ -43,13 +44,14 @@
 
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
+  const { emitComponentInteraction } = getPaywallContext();
 
   const carouselStyle = $derived(
     css({
       margin: mapSpacing(margin),
       padding: mapSpacing(padding),
       ...mapBackground(colorMode, null, background),
-      border: mapBorder(colorMode, border),
+      ...mapBorder(colorMode, border),
       "border-radius": mapBorderRadius(shape),
       "box-shadow": mapShadow(colorMode, shadow),
       "transition-duration": `${auto_advance?.ms_transition_time ?? 0}ms`,
@@ -102,6 +104,23 @@
   let carouselWidth = $state(0);
   let pageOffset = $derived(2 * page_peek + page_spacing);
   let pageWidth = $derived(carouselWidth - pageOffset);
+  let gestureStartPage = $state<number | null>(null);
+
+  function getDefaultPageIndex() {
+    return pages.at(initial_page_index) !== undefined ? initial_page_index : 0;
+  }
+
+  function normalizePageIndex(index: number) {
+    if (pages.length === 0) {
+      return 0;
+    }
+
+    return ((index % pages.length) + pages.length) % pages.length;
+  }
+
+  function getPageContextName(index: number) {
+    return pages[index]?.name;
+  }
 
   function startTransition(withDelay: boolean = true, durationMs?: number) {
     if (slider === null) {
@@ -154,8 +173,7 @@
   }
 
   onMount(() => {
-    const initialPage =
-      pages.at(initial_page_index) !== undefined ? initial_page_index : 0;
+    const initialPage = getDefaultPageIndex();
     currentPage = initialPage;
 
     stopTransition();
@@ -185,6 +203,7 @@
     const target = event.currentTarget as HTMLElement;
     target.setPointerCapture(event.pointerId);
     startTranslation = getTranslation(slider);
+    gestureStartPage = currentPage;
   }
 
   function onpointerup(event: PointerEvent) {
@@ -193,6 +212,22 @@
 
     const translation = getTranslation(slider);
     const page = getPageFromTranslation(translation);
+    const destinationPage = normalizePageIndex(page);
+
+    if (gestureStartPage !== null && gestureStartPage !== destinationPage) {
+      emitComponentInteraction({
+        componentType: "carousel",
+        componentName: props.name,
+        componentValue: destinationPage.toString(),
+        originIndex: gestureStartPage,
+        destinationIndex: destinationPage,
+        originContextName: getPageContextName(gestureStartPage),
+        destinationContextName: getPageContextName(destinationPage),
+        defaultIndex: getDefaultPageIndex(),
+      });
+    }
+
+    gestureStartPage = null;
     startTransition(false, 500);
     moveTo(page);
   }
@@ -217,56 +252,58 @@
   }
 </script>
 
-<div class="carousel" style={carouselStyle}>
-  <div
-    bind:this={slider}
-    bind:clientWidth={carouselWidth}
-    {ontransitionend}
-    {onpointerdown}
-    {onpointerup}
-    {onpointermove}
-    class="slider"
-    style={sliderStyle}
-    role="region"
-    aria-label="Feature carousel"
-    aria-roledescription="carousel"
-    aria-live="polite"
-  >
-    {#each prevPages as index}
-      <CarouselPage
-        page={pages[index]}
-        {index}
-        pages={pages.length}
-        selected={currentPage === index}
-        hidden
+<div class="carousel rc-gradient-border" style={carouselStyle}>
+  <div class="carousel-clip">
+    <div
+      bind:this={slider}
+      bind:clientWidth={carouselWidth}
+      {ontransitionend}
+      {onpointerdown}
+      {onpointerup}
+      {onpointermove}
+      class="slider"
+      style={sliderStyle}
+      role="region"
+      aria-label="Feature carousel"
+      aria-roledescription="carousel"
+      aria-live="polite"
+    >
+      {#each prevPages as index}
+        <CarouselPage
+          page={pages[index]}
+          {index}
+          pages={pages.length}
+          selected={currentPage === index}
+          hidden
+        />
+      {/each}
+      {#each pages as page, index}
+        <CarouselPage
+          {page}
+          {index}
+          pages={pages.length}
+          selected={currentPage === index}
+        />
+      {/each}
+      {#each nextPages as index}
+        <CarouselPage
+          page={pages[index]}
+          {index}
+          pages={pages.length}
+          selected={currentPage === index}
+          hidden
+        />
+      {/each}
+    </div>
+
+    {#if page_control != null}
+      <PageControl
+        {...page_control}
+        length={pages.length}
+        selected={currentPage}
       />
-    {/each}
-    {#each pages as page, index}
-      <CarouselPage
-        {page}
-        {index}
-        pages={pages.length}
-        selected={currentPage === index}
-      />
-    {/each}
-    {#each nextPages as index}
-      <CarouselPage
-        page={pages[index]}
-        {index}
-        pages={pages.length}
-        selected={currentPage === index}
-        hidden
-      />
-    {/each}
+    {/if}
   </div>
-
-  {#if page_control != null}
-    <PageControl
-      {...page_control}
-      length={pages.length}
-      selected={currentPage}
-    />
-  {/if}
 </div>
 
 <style>
@@ -274,10 +311,19 @@
     max-width: 100%;
     display: flex;
     flex-direction: column;
-    overflow: hidden;
     flex-shrink: 0;
   }
 
+  .carousel-clip {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+    border-radius: inherit;
+  }
+
   .slider {
     display: flex;
     flex-direction: row;

package/dist/components/carousel/PageControl.svelte

@@ -39,14 +39,15 @@
   const colorMode = $derived(getColorMode());
 
   function mapIndicatorBorder(indicator: PageControlIndicator) {
-    if (indicator.stroke_width == null || indicator.stroke_color == null) {
-      return "none";
-    }
-
-    return mapBorder(colorMode, {
-      width: indicator.stroke_width,
-      color: indicator.stroke_color,
-    });
+    return mapBorder(
+      colorMode,
+      indicator.stroke_width == null || indicator.stroke_color == null
+        ? null
+        : {
+            width: indicator.stroke_width,
+            color: indicator.stroke_color,
+          },
+    );
   }
 
   function mapIndicatorStyle(indicator: PageControlIndicator) {
@@ -54,7 +55,7 @@
       width: px(indicator.width),
       height: px(indicator.height),
       background: mapColor(colorMode, indicator.color),
-      border: mapIndicatorBorder(indicator),
+      ...mapIndicatorBorder(indicator),
       "border-radius": "9999px",
     });
   }
@@ -69,14 +70,14 @@
       margin: mapSpacing(margin),
       padding: mapSpacing(padding),
       ...mapBackground(colorMode, background_color, null),
-      border: mapBorder(colorMode, border),
+      ...mapBorder(colorMode, border),
       "border-radius": mapBorderRadius(shape),
       "box-shadow": mapShadow(colorMode, shadow),
     }),
   );
 </script>
 
-<div class="control" {style}>
+<div class="control rc-gradient-border" {style}>
   {#each { length }, index}
     <div style={index === selected ? activeStyle : defaultStyle}></div>
   {/each}

package/dist/components/countdown/Countdown.stories.svelte

@@ -8,6 +8,7 @@
   import { variablesDecorator } from "../../stories/variables-decorator";
   import { DEFAULT_TEXT_COLOR } from "../../utils/constants";
   import { defineMeta } from "@storybook/addon-svelte-csf";
+  import type { StackProps } from "../../types/components/stack";
 
   const defaultLocale = Object.keys(localizations)[0];
 
@@ -33,22 +34,64 @@
   const pastDate = new Date(frozenDate);
   pastDate.setHours(pastDate.getHours() - 1);
 
-  const { Story } = defineMeta({
-    title: "Components/Countdown",
-    component: Countdown,
-    decorators: [
-      mockDateDecorator,
-      componentDecorator(),
-      localizationDecorator({
-        defaultLocale,
-        localizations,
-      }),
-      variablesDecorator(undefined),
-    ],
-    parameters: {
-      date: frozenDate,
-    },
-    args: {
+  const countdownStackProps = () =>
+    ({
+      type: "stack",
+      id: "countdown-stack",
+      name: "Countdown Stack",
+      components: [
+        {
+          type: "text",
+          id: "countdown-text",
+          name: "Countdown Text",
+          text_lid: "countdown",
+          color: {
+            light: { type: "hex", value: DEFAULT_TEXT_COLOR },
+          },
+          font_size: "heading_xl",
+          font_weight: "bold",
+          horizontal_alignment: "center",
+          size: {
+            width: { type: "fit" },
+            height: { type: "fit" },
+          },
+          margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+          background_color: null,
+        },
+      ],
+      size: {
+        width: { type: "fit" },
+        height: { type: "fit" },
+      },
+      dimension: {
+        type: "vertical",
+        alignment: "center",
+        distribution: "center",
+      },
+      spacing: 8,
+      margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+      padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
+      background_color: {
+        light: { type: "hex", value: "#F0F0F0" },
+      },
+      background: null,
+      border: null,
+      shape: {
+        type: "rectangle",
+        corners: {
+          top_leading: 8,
+          top_trailing: 8,
+          bottom_leading: 8,
+          bottom_trailing: 8,
+        },
+      },
+      shadow: null,
+      badge: null,
+    }) satisfies StackProps;
+
+  const countdownProps = () =>
+    ({
       type: "countdown",
       id: "countdown",
       name: "Countdown",
@@ -56,60 +99,7 @@
         type: "date",
         date: futureDate.toISOString(),
       },
-      countdown_stack: {
-        type: "stack",
-        id: "countdown-stack",
-        name: "Countdown Stack",
-        components: [
-          {
-            type: "text",
-            id: "countdown-text",
-            name: "Countdown Text",
-            text_lid: "countdown",
-            color: {
-              light: { type: "hex", value: DEFAULT_TEXT_COLOR },
-            },
-            font_size: "heading_xl",
-            font_weight: "bold",
-            horizontal_alignment: "center",
-            size: {
-              width: { type: "fit" },
-              height: { type: "fit" },
-            },
-            margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
-            padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
-            background_color: null,
-          },
-        ],
-        size: {
-          width: { type: "fit" },
-          height: { type: "fit" },
-        },
-        dimension: {
-          type: "vertical",
-          alignment: "center",
-          distribution: "center",
-        },
-        spacing: 8,
-        margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
-        padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
-        background_color: {
-          light: { type: "hex", value: "#F0F0F0" },
-        },
-        background: null,
-        border: null,
-        shape: {
-          type: "rectangle",
-          corners: {
-            top_leading: 8,
-            top_trailing: 8,
-            bottom_leading: 8,
-            bottom_trailing: 8,
-          },
-        },
-        shadow: null,
-        badge: null,
-      },
+      countdown_stack: countdownStackProps(),
       end_stack: {
         type: "stack",
         id: "end-stack",
@@ -164,7 +154,24 @@
         shadow: null,
         badge: null,
       },
-    } satisfies CountdownProps,
+    }) satisfies CountdownProps;
+
+  const { Story } = defineMeta({
+    title: "Components/Countdown",
+    component: Countdown,
+    decorators: [
+      mockDateDecorator,
+      componentDecorator(),
+      localizationDecorator({
+        defaultLocale,
+        localizations,
+      }),
+      variablesDecorator(undefined),
+    ],
+    parameters: {
+      date: frozenDate,
+    },
+    args: countdownProps(),
   });
 </script>
 
@@ -363,3 +370,26 @@
     },
   }}
 />
+
+<Story
+  name="Border"
+  args={{
+    ...countdownProps(),
+    countdown_stack: {
+      ...countdownStackProps(),
+      border: {
+        width: 10,
+        color: {
+          light: {
+            type: "linear",
+            degrees: 90,
+            points: [
+              { color: "#000000", percent: 0 },
+              { color: "#FF0000", percent: 100 },
+            ],
+          },
+        },
+      },
+    },
+  }}
+/>