@revenuecat/purchases-ui-js 2.0.3 → 2.0.5

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,12 +1,5 @@
 <script lang="ts">
-  import type { PaywallData, UIConfig } from "../../data/entities";
-
   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";
@@ -16,11 +9,18 @@
   } from "../../stores/variables";
   import type { ColorMode } from "../../types";
   import type { Action } from "../../types/components/button";
-  import { findSelectedPackageId } from "../../utils/style-utils";
+  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 { derived, readable, writable } from "svelte/store";
+  import { findSelectedPackageId } from "../../utils/style-utils";
   import { onMount } from "svelte";
-  import type { VariableDictionary } from "../../types/variables";
+  import { derived, readable, writable } from "svelte/store";
+  import Sheet from "./Sheet.svelte";
+  import Stack from "../stack/Stack.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,43 +123,37 @@
 
   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 id="paywall" 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;
@@ -159,33 +161,22 @@
     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;
       overflow-y: auto;
     }
   }
 
-  .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/Paywall.svelte.d.ts

@@ -1,5 +1,6 @@
-import type { PaywallData, UIConfig } from "../../data/entities";
 import type { ColorMode } from "../../types";
+import type { PaywallData } from "../../types/paywall";
+import type { UIConfig } from "../../types/ui-config";
 import type { VariableDictionary } from "../../types/variables";
 interface Props {
     paywallData: PaywallData;

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/override-paywall.d.ts

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

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;