@revenuecat/purchases-ui-js 2.2.0 → 3.0.0

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

@@ -0,0 +1,365 @@
+<script module lang="ts">
+  import Countdown from "./Countdown.svelte";
+  import type { CountdownProps } from "../../types/components/countdown";
+  import { componentDecorator } from "../../stories/component-decorator";
+  import { mockDateDecorator } from "storybook-mock-date-decorator";
+  import { localizations } from "../../stories/fixtures";
+  import { localizationDecorator } from "../../stories/localization-decorator";
+  import { variablesDecorator } from "../../stories/variables-decorator";
+  import { DEFAULT_TEXT_COLOR } from "../../utils/constants";
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  const defaultLocale = Object.keys(localizations)[0];
+
+  // Freeze date for consistent Chromatic snapshots
+  // Using a fixed date: 2024-01-15T12:00:00Z
+  const frozenDate = new Date("2024-01-15T12:00:00Z");
+
+  // Create dates relative to frozen date for consistent stories
+  // Target: 1 day, 23 hours, 45 minutes, 56 seconds from frozen date
+  // This equals 47 hours, 45 minutes, 56 seconds = 2024-01-17T11:45:56Z
+  const futureDate = new Date(frozenDate);
+  futureDate.setDate(futureDate.getDate() + 1); // +1 day = 24 hours
+  futureDate.setHours(futureDate.getHours() + 23); // +23 hours (total 47 hours from start)
+  futureDate.setMinutes(futureDate.getMinutes() + 45); // +45 minutes
+  futureDate.setSeconds(futureDate.getSeconds() + 56); // +56 seconds
+
+  // 3 days from frozen date (for multi-day story)
+  const threeDaysFromNow = new Date(frozenDate);
+  threeDaysFromNow.setDate(threeDaysFromNow.getDate() + 3);
+  threeDaysFromNow.setHours(threeDaysFromNow.getHours() + 5); // Add 5 hours to show hours too
+
+  // Create a date in the past for ended countdown
+  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: {
+      type: "countdown",
+      id: "countdown",
+      name: "Countdown",
+      style: {
+        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,
+      },
+      end_stack: {
+        type: "stack",
+        id: "end-stack",
+        name: "End Stack",
+        components: [
+          {
+            type: "text",
+            id: "end-text",
+            name: "End Text",
+            text_lid: "ended",
+            color: {
+              light: { type: "hex", value: "#FF0000" },
+            },
+            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: "#FFE0E0" },
+        },
+        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 CountdownProps,
+  });
+</script>
+
+<Story
+  name="Active Countdown"
+  args={{
+    style: {
+      type: "date",
+      date: futureDate.toISOString(),
+    },
+  }}
+/>
+
+<Story
+  name="Ended Countdown"
+  args={{
+    style: {
+      type: "date",
+      date: pastDate.toISOString(),
+    },
+  }}
+/>
+
+<Story
+  name="Countdown with Variables"
+  args={{
+    style: {
+      type: "date",
+      date: futureDate.toISOString(),
+    },
+    countdown_stack: {
+      type: "stack",
+      id: "countdown-stack-vars",
+      name: "Countdown Stack with Variables",
+      components: [
+        {
+          type: "text",
+          id: "days",
+          name: "Days",
+          text_lid: "days",
+          color: {
+            light: { type: "hex", value: DEFAULT_TEXT_COLOR },
+          },
+          font_size: "heading_xxl",
+          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,
+        },
+        {
+          type: "text",
+          id: "time",
+          name: "Time",
+          text_lid: "time",
+          color: {
+            light: { type: "hex", value: "#666666" },
+          },
+          font_size: "heading_l",
+          font_weight: "regular",
+          horizontal_alignment: "center",
+          size: {
+            width: { type: "fit" },
+            height: { type: "fit" },
+          },
+          margin: { top: 8, 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: 0,
+      margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+      padding: { top: 32, trailing: 32, bottom: 32, leading: 32 },
+      background_color: {
+        light: { type: "hex", value: "#E8F5E9" },
+      },
+      background: null,
+      border: {
+        width: 2,
+        color: {
+          light: { type: "hex", value: "#4CAF50" },
+        },
+      },
+      shape: {
+        type: "rectangle",
+        corners: {
+          top_leading: 16,
+          top_trailing: 16,
+          bottom_leading: 16,
+          bottom_trailing: 16,
+        },
+      },
+      shadow: null,
+      badge: null,
+    },
+  }}
+/>
+
+<Story
+  name="Countdown with Multiple Days"
+  args={{
+    style: {
+      type: "date",
+      date: threeDaysFromNow.toISOString(),
+    },
+    countdown_stack: {
+      type: "stack",
+      id: "countdown-stack-multi-day",
+      name: "Countdown Stack with Multiple Days",
+      components: [
+        {
+          type: "text",
+          id: "days",
+          name: "Days",
+          text_lid: "days",
+          color: {
+            light: { type: "hex", value: DEFAULT_TEXT_COLOR },
+          },
+          font_size: "heading_xxl",
+          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,
+        },
+        {
+          type: "text",
+          id: "time",
+          name: "Time",
+          text_lid: "time",
+          color: {
+            light: { type: "hex", value: "#666666" },
+          },
+          font_size: "heading_l",
+          font_weight: "regular",
+          horizontal_alignment: "center",
+          size: {
+            width: { type: "fit" },
+            height: { type: "fit" },
+          },
+          margin: { top: 8, 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: 0,
+      margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+      padding: { top: 32, trailing: 32, bottom: 32, leading: 32 },
+      background_color: {
+        light: { type: "hex", value: "#E3F2FD" },
+      },
+      background: null,
+      border: {
+        width: 2,
+        color: {
+          light: { type: "hex", value: "#2196F3" },
+        },
+      },
+      shape: {
+        type: "rectangle",
+        corners: {
+          top_leading: 16,
+          top_trailing: 16,
+          bottom_leading: 16,
+          bottom_trailing: 16,
+        },
+      },
+      shadow: null,
+      badge: null,
+    },
+  }}
+/>

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

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

package/dist/components/countdown/Countdown.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import Stack from "../stack/Stack.svelte";
+  import {
+    getVariablesContext,
+    setVariablesContext,
+  } from "../../stores/variables";
+  import type { CountdownProps } from "../../types/components/countdown";
+  import { derived, writable } from "svelte/store";
+  import {
+    calculateCountdownValues,
+    hasCountdownEnded,
+  } from "./countdown-utils";
+
+  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));
+
+  // Provide countdown variables to child Text components
+  const fallbackVariables = getVariablesContext();
+  const countdownValuesStore = writable(countdownValues);
+  const variables = derived(
+    [fallbackVariables, countdownValuesStore],
+    ([fallback, countdown]) => ({
+      ...fallback,
+      ...countdown,
+    }),
+  );
+  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
+    if (isEnded && end_stack) {
+      return end_stack;
+    }
+    // Otherwise show countdown_stack
+    return countdown_stack;
+  });
+</script>
+
+<Stack {...activeStack} />

package/dist/components/countdown/Countdown.svelte.d.ts

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

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

@@ -0,0 +1,13 @@
+/**
+ * Calculates countdown values from a target date
+ * Returns 8 countdown variables for use in Text components:
+ * - count_days_with_zero / count_days_without_zero
+ * - count_hours_with_zero / count_hours_without_zero
+ * - 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>;
+/**
+ * Checks if a countdown has ended (target date is in the past)
+ */
+export declare function hasCountdownEnded(targetDate: string): boolean;

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

@@ -0,0 +1,66 @@
+/**
+ * Formats a number with leading zero if it's less than 10
+ */
+function formatWithZero(value) {
+    return value < 10 ? `0${value}` : `${value}`;
+}
+/**
+ * Formats a number without leading zero
+ */
+function formatWithoutZero(value) {
+    return `${value}`;
+}
+/**
+ * Calculates countdown values from a target date
+ * Returns 8 countdown variables for use in Text components:
+ * - count_days_with_zero / count_days_without_zero
+ * - count_hours_with_zero / count_hours_without_zero
+ * - count_minutes_with_zero / count_minutes_without_zero
+ * - count_seconds_with_zero / count_seconds_without_zero
+ */
+export function calculateCountdownValues(targetDate) {
+    const now = new Date();
+    const target = new Date(targetDate);
+    const diffInMs = target.getTime() - now.getTime();
+    // If past target date, return all zeros
+    if (diffInMs <= 0) {
+        return {
+            count_days_with_zero: "00",
+            count_days_without_zero: "0",
+            count_hours_with_zero: "00",
+            count_hours_without_zero: "0",
+            count_minutes_with_zero: "00",
+            count_minutes_without_zero: "0",
+            count_seconds_with_zero: "00",
+            count_seconds_without_zero: "0",
+        };
+    }
+    // Calculate time units
+    const totalSeconds = Math.floor(diffInMs / 1000);
+    const totalMinutes = Math.floor(totalSeconds / 60);
+    const totalHours = Math.floor(totalMinutes / 60);
+    const totalDays = Math.floor(totalHours / 24);
+    // Calculate remaining partial units (hours 0-23, minutes 0-59, seconds 0-59)
+    const days = totalDays;
+    const hours = totalHours % 24;
+    const minutes = totalMinutes % 60;
+    const seconds = totalSeconds % 60;
+    return {
+        count_days_with_zero: formatWithZero(days),
+        count_days_without_zero: formatWithoutZero(days),
+        count_hours_with_zero: formatWithZero(hours),
+        count_hours_without_zero: formatWithoutZero(hours),
+        count_minutes_with_zero: formatWithZero(minutes),
+        count_minutes_without_zero: formatWithoutZero(minutes),
+        count_seconds_with_zero: formatWithZero(seconds),
+        count_seconds_without_zero: formatWithoutZero(seconds),
+    };
+}
+/**
+ * Checks if a countdown has ended (target date is in the past)
+ */
+export function hasCountdownEnded(targetDate) {
+    const now = new Date();
+    const target = new Date(targetDate);
+    return target.getTime() <= now.getTime();
+}

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

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