@revenuecat/purchases-ui-js 4.8.2 → 4.8.3

package/dist/components/countdown/Countdown.svelte

@@ -5,24 +5,26 @@
     setVariablesContext,
   } from "../../stores/variables";
   import type { CountdownProps } from "../../types/components/countdown";
-  import { derived, writable } from "svelte/store";
+  import { derived, toStore } from "svelte/store";
   import {
     calculateCountdownValues,
     hasCountdownEnded,
   } from "./countdown-utils";
+  import { sharedNow } from "./shared-ticker";
 
   const props: CountdownProps = $props();
   const { countdown_stack, end_stack } = props;
 
-  // State for countdown values that updates every second
-  let countdownValues = $state(calculateCountdownValues(props.style.date));
-  let isEnded = $state(hasCountdownEnded(props.style.date));
+  // All countdowns read one shared ticker so they stay in lockstep.
+  const countdownValues = $derived(
+    calculateCountdownValues(props.style.date, $sharedNow),
+  );
+  const isEnded = $derived(hasCountdownEnded(props.style.date, $sharedNow));
 
-  // Provide countdown variables to child Text components
+  // Expose countdown variables to child Text components via context.
   const fallbackVariables = getVariablesContext();
-  const countdownValuesStore = writable(countdownValues);
   const variables = derived(
-    [fallbackVariables, countdownValuesStore],
+    [fallbackVariables, toStore(() => countdownValues)],
     ([fallback, countdown]) => ({
       ...fallback,
       ...countdown,
@@ -30,17 +32,6 @@
   );
   setVariablesContext(variables);
 
-  // Setup interval to update countdown every second
-  $effect(() => {
-    const interval = setInterval(() => {
-      countdownValues = calculateCountdownValues(props.style.date);
-      isEnded = hasCountdownEnded(props.style.date);
-      countdownValuesStore.set(countdownValues);
-    }, 1000);
-
-    return () => clearInterval(interval);
-  });
-
   // Determine which stack to show
   const activeStack = $derived.by(() => {
     // If countdown has ended and end_stack exists, show end_stack

package/dist/components/countdown/countdown-utils.d.ts

@@ -6,8 +6,8 @@
  * - count_minutes_with_zero / count_minutes_without_zero
  * - count_seconds_with_zero / count_seconds_without_zero
  */
-export declare function calculateCountdownValues(targetDate: string): Record<string, string>;
+export declare function calculateCountdownValues(targetDate: string, nowMs?: number): Record<string, string>;
 /**
  * Checks if a countdown has ended (target date is in the past)
  */
-export declare function hasCountdownEnded(targetDate: string): boolean;
+export declare function hasCountdownEnded(targetDate: string, nowMs?: number): boolean;

package/dist/components/countdown/countdown-utils.js

@@ -18,10 +18,9 @@ function formatWithoutZero(value) {
  * - count_minutes_with_zero / count_minutes_without_zero
  * - count_seconds_with_zero / count_seconds_without_zero
  */
-export function calculateCountdownValues(targetDate) {
-    const now = new Date();
+export function calculateCountdownValues(targetDate, nowMs = Date.now()) {
     const target = new Date(targetDate);
-    const diffInMs = target.getTime() - now.getTime();
+    const diffInMs = target.getTime() - nowMs;
     // If past target date, return all zeros
     if (diffInMs <= 0) {
         return {
@@ -59,8 +58,7 @@ export function calculateCountdownValues(targetDate) {
 /**
  * Checks if a countdown has ended (target date is in the past)
  */
-export function hasCountdownEnded(targetDate) {
-    const now = new Date();
+export function hasCountdownEnded(targetDate, nowMs = Date.now()) {
     const target = new Date(targetDate);
-    return target.getTime() <= now.getTime();
+    return target.getTime() <= nowMs;
 }

package/dist/components/countdown/shared-ticker.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Wall-clock now (epoch ms) shared by every countdown so they tick in lockstep.
+ * The interval runs only while at least one countdown is subscribed: Svelte's
+ * `readable` starts on the first subscriber and stops on the last.
+ */
+export declare const sharedNow: import("svelte/store").Readable<number>;

package/dist/components/countdown/shared-ticker.js

@@ -0,0 +1,20 @@
+import { readable } from "svelte/store";
+/**
+ * Wall-clock now (epoch ms) shared by every countdown so they tick in lockstep.
+ * The interval runs only while at least one countdown is subscribed: Svelte's
+ * `readable` starts on the first subscriber and stops on the last.
+ */
+export const sharedNow = readable(Date.now(), (set) => {
+    set(Date.now());
+    // Align the first tick to the whole second, then tick every second.
+    let interval;
+    const boundaryTimeout = setTimeout(() => {
+        set(Date.now());
+        interval = setInterval(() => set(Date.now()), 1000);
+    }, 1000 - (Date.now() % 1000));
+    return () => {
+        clearTimeout(boundaryTimeout);
+        if (interval !== undefined)
+            clearInterval(interval);
+    };
+});

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { getColorModeContext } from "../../stores/color-mode";
+  import { getInputValidationContext } from "../../stores/inputValidation";
   import { getLocalizationContext } from "../../stores/localization";
   import { getOptionalPackageInfoContext } from "../../stores/packageInfo";
   import { getPaywallContext } from "../../stores/paywall";
@@ -35,6 +36,7 @@
 
   let focused = $state(false);
   let error = $state(false);
+  let valid = $state(!props.required);
 
   const {
     placeholder_lid,
@@ -69,12 +71,7 @@
     };
   });
 
-  function handleValueChange(input: HTMLInputElement) {
-    error = !input.validity.valid;
-    if (error) {
-      return;
-    }
-
+  function commitValue(input: HTMLInputElement) {
     const value = input.value.trim();
     if (reserved_attribute) {
       if (!onReservedAttributeChanged) {
@@ -87,17 +84,35 @@
     }
   }
 
+  function handleValueChange(input: HTMLInputElement) {
+    error = !input.validity.valid;
+    if (error) {
+      return;
+    }
+    commitValue(input);
+  }
+
   const oninput: FormEventHandler<HTMLInputElement> = (event) => {
+    const input = event.currentTarget;
+    valid = input.validity.valid;
+    // Keep the propagated value in lockstep with `valid` so Continue can
+    // never unlock before the workflow has received the current value.
+    if (valid) {
+      commitValue(input);
+    }
     if (error) {
-      handleValueChange(event.currentTarget);
+      handleValueChange(input);
     }
   };
 
   const onblur: FormEventHandler<HTMLInputElement> = (event) => {
     focused = false;
+    valid = event.currentTarget.validity.valid;
     handleValueChange(event.currentTarget);
   };
 
+  const validationContext = getInputValidationContext();
+
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
   const {
@@ -201,6 +216,14 @@
       props.visible,
     ),
   );
+
+  if (validationContext) {
+    $effect(() => {
+      // A hidden field can't be filled in, so it shouldn't be able to block
+      // Continue for the rest of the screen.
+      validationContext.updateSatisfaction(!isVisible || valid);
+    });
+  }
 </script>
 
 {#if isVisible}

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

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { setColorModeContext } from "../../stores/color-mode";
+  import {
+    createInputValidationContext,
+    setInputValidationContext,
+  } from "../../stores/inputValidation";
+  import { setLocalizationContext } from "../../stores/localization";
+  import { setPackageInfoContext } from "../../stores/packageInfo";
+  import { setPaywallContext } from "../../stores/paywall";
+  import { setVariablesContext } from "../../stores/variables";
+  import { readable, writable } from "svelte/store";
+  import InputText from "./InputText.svelte";
+  import type { InputTextProps } from "../../types/components/input-text";
+
+  interface Props extends InputTextProps {
+    onInputChanged?: (fieldId: string, value: string) => void;
+    onSatisfactionChange?: (satisfied: boolean) => void;
+  }
+
+  const { onInputChanged, onSatisfactionChange, ...inputTextProps }: Props =
+    $props();
+
+  const validationContext = createInputValidationContext();
+  setInputValidationContext(validationContext);
+  if (onSatisfactionChange) {
+    validationContext.isSatisfied.subscribe(onSatisfactionChange);
+  }
+
+  setColorModeContext();
+  setLocalizationContext(() => ({
+    defaultLocale: "en_US",
+    localizations: {
+      en_US: {},
+    },
+  }));
+
+  setPaywallContext({
+    selectedPackageId: writable(undefined),
+    variablesPerPackage: readable(undefined),
+    baseVariables: readable(undefined),
+    infoPerPackage: readable(undefined),
+    onPurchase: () => {},
+    emitComponentInteraction: () => {},
+    onButtonAction: () => {},
+    onInputChanged,
+    uiConfig: { app: { fonts: {} } } as never,
+    hideBackButtons: false,
+  });
+  setPackageInfoContext(readable(undefined));
+  setVariablesContext(readable({}));
+</script>
+
+<InputText {...inputTextProps} />

package/dist/components/input-text/InputTextTestWrapper.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { InputTextProps } from "../../types/components/input-text";
+interface Props extends InputTextProps {
+    onInputChanged?: (fieldId: string, value: string) => void;
+    onSatisfactionChange?: (satisfied: boolean) => void;
+}
+declare const InputTextTestWrapper: import("svelte").Component<Props, {}, "">;
+type InputTextTestWrapper = ReturnType<typeof InputTextTestWrapper>;
+export default InputTextTestWrapper;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@revenuecat/purchases-ui-js",
   "description": "Web components for Paywalls. Powered by RevenueCat",
   "private": false,
-  "version": "4.8.2",
+  "version": "4.8.3",
   "author": {
     "name": "RevenueCat, Inc."
   },