@playpilot/tpi 5.32.2 → 5.32.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "5.32.2",
+	"version": "5.32.3",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/enums/SplitTest.ts

@@ -9,4 +9,9 @@ export const SplitTest = {
     numberOfVariants: 2,
     variantNames: ['Image', 'Label'] as string[],
   },
+  UserTimeSpent: {
+    key: 'user_time_spent',
+    numberOfVariants: 10,
+    variantNames: ['No Links', 'Default', 'Default', 'Default', 'Default', 'Default', 'Default', 'Default', 'Default', 'Default'] as string[],
+  }
 } as const

package/src/lib/scss/_functions.scss

@@ -12,7 +12,7 @@
   // If the fallback value is not given at all we assume it's meant to be a variable straight up without fallback.
   @if $fallback == "" {
     @return var(--playpilot-#{$scope});
-  } @if meta.type-of($fallback) == "string" {
+  } @if meta.type-of($fallback) == "string" and $fallback != currentColor {
     @return var(--playpilot-#{$scope}, var(--playpilot-#{$fallback}));
   } @else {
     @return var(--playpilot-#{$scope}, $fallback);

package/src/routes/+page.svelte

@@ -9,6 +9,8 @@
   import { fetchAds } from '$lib/api/ads'
   import { fetchConfig } from '$lib/api/config'
   import { authorize, getAuthToken, isEditorialModeEnabled, removeAuthCookie, setEditorialParamInUrl } from '$lib/api/auth'
+  import { getSplitTestVariantName } from '$lib/splitTest'
+  import { SplitTest } from '$lib/enums/SplitTest'
   import type { LinkInjectionResponse, LinkInjection, LinkInjectionTypes } from '$lib/types/injection'
   import Editor from './components/Editorial/Editor.svelte'
   import EditorTrigger from './components/Editorial/EditorTrigger.svelte'
@@ -129,9 +131,15 @@
   }
 
   function inject(injections: LinkInjectionTypes = { aiInjections, manualInjections }): void {
+      // This is part of a split test were we are not injecting for 10% of users.
+      // The action is tracked as part of the UserLeft event in /components/UserJourney.svelte.
+      const hasAnyInjections = aiInjections?.length || manualInjections?.length
+      if (process.env.NODE_ENV !== 'test' && hasAnyInjections && getSplitTestVariantName(SplitTest.UserTimeSpent) === 'No Links') return
+
     // Get filtered injections as they are shown on the page.
     // Only update state if it they are different from current injections.
     const filteredInjections = injectLinksInDocument(elements, injections)
+
     if (JSON.stringify(filteredInjections) !== JSON.stringify(linkInjections)) {
       linkInjections = filteredInjections
 

package/src/routes/components/Modal.svelte

@@ -88,6 +88,12 @@
     onclose()
     destroyAllModals()
   }
+
+  function closeOnBackdropClick(event: MouseEvent): void {
+    if (event.target !== modalElement) return
+
+    close()
+  }
 </script>
 
 <svelte:window
@@ -95,7 +101,17 @@
   onhashchange={close}
   bind:innerWidth={windowWidth} />
 
-<div class="modal" style:--dialog-offset="{dialogOffset}px" transition:fade|global={{ duration: 150 }} bind:this={modalElement} use:focustrap class:has-bubble={!!bubble && inlineBubble} class:has-prepend={!!prepend}>
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  class="modal"
+  class:has-bubble={!!bubble && inlineBubble}
+  class:has-prepend={!!prepend}
+  style:--dialog-offset="{dialogOffset}px"
+  onclick={closeOnBackdropClick}
+  transition:fade|global={{ duration: 150 }}
+  bind:this={modalElement}
+  use:focustrap>
   {#if prepend}
     <div class="prepend" transition:scaleOrFly|global={{ y: window.innerHeight }} data-view-transition-new="playpilot-title-extra">
       {@render prepend()}
@@ -131,10 +147,6 @@
 
     {@render children()}
   </div>
-
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div class="backdrop" onclick={close}></div>
 </div>
 
 <style lang="scss">
@@ -211,15 +223,6 @@
     }
   }
 
-  .backdrop {
-    z-index: 0;
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
   .swipe-handle {
     z-index: 5;
     position: absolute;

package/src/routes/components/UserJourney.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
   import { isEditorialModeEnabled } from '$lib/api/auth'
+  import { SplitTest } from '$lib/enums/SplitTest'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { keyDataAttribute, keySelector } from '$lib/injection'
+  import { getSplitTestVariantName } from '$lib/splitTest'
   import { track } from '$lib/tracking'
   import { onMount } from 'svelte'
 
@@ -70,6 +72,7 @@
       existing_injections_count: totalInjectionElements.length,
       shown_injections_count: shownInjections.length,
       fired_events: window.PlayPilotLinkInjections?.tracked_events?.map(event => event.event) || [],
+      split_test_variant: getSplitTestVariantName(SplitTest.UserTimeSpent),
     })
   }
 </script>

package/src/tests/routes/components/Modal.test.js

@@ -19,15 +19,24 @@ describe('Modal.svelte', () => {
   const onclose = vi.fn()
   const children = createRawSnippet(() => ({ render: () => '<div></div>' }))
 
-  it('Should fire given onclose and destroyAllModals functions when backdrop is clicked', async () => {
+  it('Should fire given onclose and destroyAllModals functions when modal is clicked', async () => {
     const { container } = render(Modal, { children, onclose })
 
-    await fireEvent.click(/** @type {Node} */ (container.querySelector('.backdrop')))
+    await fireEvent.click(/** @type {Node} */ (container.querySelector('.modal')))
 
     expect(onclose).toHaveBeenCalled()
     expect(destroyAllModals).toHaveBeenCalled()
   })
 
+  it('Should not fire given onclose and destroyAllModals functions when dialog is clicked', async () => {
+    const { container } = render(Modal, { children, onclose })
+
+    await fireEvent.click(/** @type {Node} */ (container.querySelector('.dialog')))
+
+    expect(onclose).not.toHaveBeenCalled()
+    expect(destroyAllModals).not.toHaveBeenCalled()
+  })
+
   it('Should fire given onclose and destroyAllModals functions when close button is clicked', async () => {
     const { container } = render(Modal, { children, onclose })