@playpilot/tpi 8.16.0 → 8.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.16.0",
+	"version": "8.17.0",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
@@ -16,7 +16,7 @@
 		"release": "node release.js"
 	},
 	"devDependencies": {
-		"@playpilot/retargeting-tracking": "^1.1.0",
+		"@playpilot/retargeting-tracking": "^1.2.0",
 		"@sveltejs/adapter-auto": "^7.0.1",
 		"@sveltejs/kit": "^2.56.1",
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",

package/src/lib/api/region.ts

@@ -1,3 +1,4 @@
+import { SupportedRegion } from '$lib/enums/Region'
 import { TrackingEvent } from '$lib/enums/TrackingEvent'
 import { track } from '$lib/tracking'
 
@@ -26,6 +27,16 @@ export async function getRegionBasedOnIp(timeout = 5000): Promise<string> {
   }
 }
 
+export async function isUserRegionSupported(region: string = ''): Promise<boolean> {
+  try {
+    region ||= await getRegionBasedOnIp()
+
+    return !region || Object.values(SupportedRegion).some(supportedRegion => supportedRegion === region)
+  } catch {
+    return true
+  }
+}
+
 function setSavedRegion(region: string): void {
   if (!window.PlayPilotLinkInjections) return
 

package/src/lib/api/titles.ts

@@ -4,7 +4,7 @@ import type { APIPaginatedResult } from '$lib/types/api'
 import { paramsToString } from '$lib/url'
 import type { TitleData } from '../types/title'
 import { api } from './api'
-import { getRegionBasedOnIp } from './region'
+import { getRegionBasedOnIp, isUserRegionSupported } from './region'
 
 export async function fetchTitles(params: Record<string, any> = {}): Promise<APIPaginatedResult<TitleData>> {
   const apiToken = getApiToken()
@@ -17,7 +17,13 @@ export async function fetchTitles(params: Record<string, any> = {}): Promise<API
     include_count: 'false',
   }
 
-  if (params.region !== null) params.region = params.region || await getRegionBasedOnIp()
+  if (params.region !== null) {
+    const region = params.region || await getRegionBasedOnIp()
+
+    if (!await isUserRegionSupported(region)) return { next: '', previous: '', results: [] }
+
+    params.region = region
+  }
 
   return await api<APIPaginatedResult<TitleData>>(`/titles/browse?api-token=${apiToken}&` + paramsToString(params))
 }

package/src/lib/data/translations.ts

@@ -296,6 +296,11 @@ export const translations = {
     [Language.Swedish]: 'Nämnda i den här artikeln',
     [Language.Danish]: 'Nævnt i denne artikel',
   },
+  'Sorry Region Not Supported': {
+    [Language.English]: 'Sorry, your region is not supported',
+    [Language.Swedish]: 'Tyvärr stöds inte din region',
+    [Language.Danish]: 'Beklager, din region understøttes ikke',
+  },
 
   // List titles
   'List: Trending': {

package/src/lib/enums/Language.ts

@@ -1,5 +1,5 @@
-export const Language = Object.freeze({
+export const Language = {
   English: 'en-US',
   Swedish: 'sv-SE',
   Danish: 'da-DK',
-})
+} as const

package/src/lib/enums/Region.ts

@@ -0,0 +1,30 @@
+export const SupportedRegion = {
+  Argentina: 'ar',
+  Australia: 'au',
+  Austria: 'at',
+  Belgium: 'be',
+  Brazil: 'br',
+  Canada: 'ca',
+  Chile: 'cl',
+  Colombia: 'co',
+  Denmark: 'dk',
+  Finland: 'fi',
+  France: 'fr',
+  Germany: 'de',
+  India: 'in',
+  Ireland: 'ie',
+  Italy: 'it',
+  Mexico: 'mx',
+  Netherlands: 'nl',
+  Norway: 'no',
+  Peru: 'pe',
+  Poland: 'pl',
+  Portugal: 'pt',
+  Russia: 'ru',
+  Singapore: 'sg',
+  Spain: 'es',
+  Sweden: 'se',
+  Switzerland: 'ch',
+  UK: 'uk',
+  USA: 'us',
+} as const

package/src/routes/components/Explore/ExploreLayout.svelte

@@ -6,6 +6,7 @@
   import { track } from '$lib/tracking'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { fetchAds } from '$lib/api/ads'
+  import { isUserRegionSupported } from '$lib/api/region'
   import { onMount, type Snippet } from 'svelte'
   import Search from './Filter/Search.svelte'
   import Filter from './Filter/Filter.svelte'
@@ -79,6 +80,14 @@
     </div>
   {/if}
 
+  {#await isUserRegionSupported() then isSupported}
+    {#if !isSupported}
+      <div class="unsupported-region">
+        {t('Sorry Region Not Supported')}
+      </div>
+    {/if}
+  {/await}
+
   {@render children()}
 </div>
 
@@ -165,4 +174,12 @@
     width: 100%;
     margin: margin(0.5) 0 margin(1.5);
   }
+
+  .unsupported-region {
+    padding: margin(0.5) margin(1);
+    margin: margin(0.5) 0;
+    border: 1px solid theme(warning);
+    background: theme(warning-dark);
+    border-radius: theme(border-radius);
+  }
 </style>

package/src/tests/lib/api/region.test.js

@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { getRegionBasedOnIp } from '$lib/api/region'
+import { getRegionBasedOnIp, isUserRegionSupported } from '$lib/api/region'
 import { fakeFetch } from '../../helpers'
 import { track } from '$lib/tracking'
 import { TrackingEvent } from '$lib/enums/TrackingEvent'
@@ -9,7 +9,7 @@ vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
 }))
 
-describe('getRegionBasedOnIp', () => {
+describe('region.ts', () => {
   beforeEach(() => {
     vi.resetAllMocks()
     fakeFetch()
@@ -18,79 +18,109 @@ describe('getRegionBasedOnIp', () => {
     window.PlayPilotLinkInjections = {}
   })
 
-  it('Should return saved region if present', async () => {
-    // @ts-ignore
-    window.PlayPilotLinkInjections = {
-      region: 'se',
-    }
+  describe('getRegionBasedOnIp', () => {
+    it('Should return saved region if present', async () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections = {
+        region: 'se',
+      }
 
-    expect(await getRegionBasedOnIp()).toBe('se')
-    expect(global.fetch).not.toHaveBeenCalled()
-  })
+      expect(await getRegionBasedOnIp()).toBe('se')
+      expect(global.fetch).not.toHaveBeenCalled()
+    })
 
-  it('Should fetch region and return country code as lowercase', async () => {
-    fakeFetch({ response: { ip: '127.0.0.1', country: 'SE' }})
+    it('Should fetch region and return country code as lowercase', async () => {
+      fakeFetch({ response: { ip: '127.0.0.1', country: 'SE' }})
 
-    // @ts-ignore
-    window.PlayPilotLinkInjections = {}
+      // @ts-ignore
+      window.PlayPilotLinkInjections = {}
 
-    const result = await getRegionBasedOnIp()
+      const result = await getRegionBasedOnIp()
 
-    expect(global.fetch).toHaveBeenCalledWith('https://api.country.is/', expect.any(Object))
-    expect(result).toBe('se')
-    expect(window.PlayPilotLinkInjections.region).toBe('se')
-  })
+      expect(global.fetch).toHaveBeenCalledWith('https://api.country.is/', expect.any(Object))
+      expect(result).toBe('se')
+      expect(window.PlayPilotLinkInjections.region).toBe('se')
+    })
 
-  it('Should return empty string if API returns no country, saved region was empty, and no fallback region is given', async () => {
-    fakeFetch({ response: { ip: '127.0.0.1' }})
+    it('Should return empty string if API returns no country, saved region was empty, and no fallback region is given', async () => {
+      fakeFetch({ response: { ip: '127.0.0.1' }})
 
-    // @ts-ignore
-    window.PlayPilotLinkInjections = {}
+      // @ts-ignore
+      window.PlayPilotLinkInjections = {}
 
-    expect(await getRegionBasedOnIp()).toBe('')
-  })
+      expect(await getRegionBasedOnIp()).toBe('')
+    })
 
-  it('Should return fallback region if fetch throws', async () => {
-    fakeFetch({ ok: false })
+    it('Should return fallback region if fetch throws', async () => {
+      fakeFetch({ ok: false })
 
-    // @ts-ignore
-    window.PlayPilotLinkInjections = {
-      config: { fallback_region: 'dk' },
-    }
+      // @ts-ignore
+      window.PlayPilotLinkInjections = {
+        config: { fallback_region: 'dk' },
+      }
 
-    expect(await getRegionBasedOnIp()).toBe('dk')
-    expect(global.fetch).toHaveBeenCalled()
-    expect(track).toHaveBeenCalledWith(TrackingEvent.RegionRequestFailed, null, { message: expect.any(String) })
-  })
+      expect(await getRegionBasedOnIp()).toBe('dk')
+      expect(global.fetch).toHaveBeenCalled()
+      expect(track).toHaveBeenCalledWith(TrackingEvent.RegionRequestFailed, null, { message: expect.any(String) })
+    })
 
-  it('Should not throw if PlayPilotLinkInjections is missing when saving region', async () => {
-    fakeFetch({ response: { ip: '127.0.0.1', country: 'NO' } })
+    it('Should not throw if PlayPilotLinkInjections is missing when saving region', async () => {
+      fakeFetch({ response: { ip: '127.0.0.1', country: 'NO' } })
 
-    expect(await getRegionBasedOnIp()).toBe('no')
-  })
+      expect(await getRegionBasedOnIp()).toBe('no')
+    })
 
-  it('Should use the fallback region if api request takes longer than the given timeout', async () => {
-    vi.useFakeTimers()
+    it('Should use the fallback region if api request takes longer than the given timeout', async () => {
+      vi.useFakeTimers()
 
-    // @ts-ignore
-    window.PlayPilotLinkInjections = {
-      config: { fallback_region: 'dk' },
-    }
+      // @ts-ignore
+      window.PlayPilotLinkInjections = {
+        config: { fallback_region: 'dk' },
+      }
+
+      fakeFetch({ response: { ip: '127.0.0.1', country: 'NO' }, responseTime: 1000 })
 
-    fakeFetch({ response: { ip: '127.0.0.1', country: 'NO' }, responseTime: 1000 })
+      const result = await getRegionBasedOnIp()
 
-    const result = await getRegionBasedOnIp()
+      vi.advanceTimersByTime(2000)
 
-    vi.advanceTimersByTime(2000)
+      expect(result).toBe('dk')
 
-    expect(result).toBe('dk')
+      vi.useRealTimers()
+    })
 
-    vi.useRealTimers()
+    it('Should use uk region when GB is returned by api endpoint', async () => {
+      fakeFetch({ response: { ip: '127.0.0.1', country: 'GB' } })
+
+      expect(await getRegionBasedOnIp()).toBe('uk')
+    })
   })
 
-  it('Should use uk region when GB is returned by api endpoint', async () => {
-    fakeFetch({ response: { ip: '127.0.0.1', country: 'GB' } })
+  describe('isUserRegionSupported', () => {
+    it('Should return false if region is not supported', async () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections.region = 'not'
+
+      expect(await isUserRegionSupported()).toBe(false)
+    })
+
+    it('Should return true if region is supported', async () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections.region = 'se'
+
+      expect(await isUserRegionSupported()).toBe(true)
+    })
+
+    it('Should return true if no region was returned', async () => {
+      fakeFetch({ response: { ip: '127.0.0.1', country: '' } })
+
+      expect(await isUserRegionSupported()).toBe(true)
+    })
+
+    it('Should return true if region request failed', async () => {
+      fakeFetch({ ok: false })
 
-    expect(await getRegionBasedOnIp()).toBe('uk')
+      expect(await isUserRegionSupported()).toBe(true)
+    })
   })
 })

package/src/tests/lib/api/titles.test.js

@@ -5,6 +5,7 @@ import { fetchSimilarTitles, fetchTitleBySid, fetchTitles } from '$lib/api/title
 import { title } from '$lib/fakeData'
 import { getApiToken } from '$lib/token'
 import { fakeFetch } from '../../helpers'
+import { getRegionBasedOnIp, isUserRegionSupported } from '$lib/api/region'
 
 vi.mock('$lib/token', () => ({
   getApiToken: vi.fn(),
@@ -14,11 +15,20 @@ vi.mock('$lib/api/api', () => ({
   api: vi.fn(),
 }))
 
+vi.mock('$lib/api/region', () => ({
+  getRegionBasedOnIp: vi.fn(),
+  isUserRegionSupported: vi.fn(),
+}))
+
 describe('$lib/api/titles', () => {
   beforeEach(() => {
     vi.resetAllMocks()
     vi.mocked(getApiToken).mockReturnValue('some-token')
+    vi.mocked(isUserRegionSupported).mockResolvedValue(true)
+
     fakeFetch()
+
+    window.PlayPilotLinkInjections.region = ''
   })
 
   describe('fetchTitles', () => {
@@ -38,7 +48,7 @@ describe('$lib/api/titles', () => {
     })
 
     it('Should include region if set', async () => {
-      window.PlayPilotLinkInjections.region = 'nl'
+      vi.mocked(getRegionBasedOnIp).mockResolvedValue('nl')
 
       await fetchTitles()
 
@@ -56,6 +66,22 @@ describe('$lib/api/titles', () => {
 
       expect(api).toHaveBeenCalledWith('/titles/browse?api-token=some-token&region=be&language=en-US&include_count=false')
     })
+
+    it('Should not fetch and return empty results if region is not supported', async () => {
+      vi.mocked(isUserRegionSupported).mockResolvedValue(false)
+
+      await fetchTitles()
+
+      expect(api).not.toHaveBeenCalled()
+    })
+
+    it('Should fetch if region is unsupported but region was given as null', async () => {
+      vi.mocked(isUserRegionSupported).mockResolvedValue(false)
+
+      await fetchTitles({ region: null })
+
+      expect(api).toHaveBeenCalled()
+    })
   })
 
   describe('fetchSimilarTitles', () => {

package/src/tests/routes/components/Explore/ExploreLayout.test.js

@@ -65,4 +65,26 @@ describe('ExploreLayout.svelte', () => {
 
     expect(fetchAds).not.toHaveBeenCalled()
   })
+
+  it('Should show message for unsupported regions', async () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections.region = 'not'
+
+    const { getByText } = render(ExploreLayout, { children })
+
+    await waitFor(() => {
+      expect(getByText('Sorry, your region is not supported')).toBeTruthy()
+    })
+  })
+
+  it('Should not show message for supported regions', async () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections.region = 'se'
+
+    const { queryByText } = render(ExploreLayout, { children })
+
+    await new Promise(res => setTimeout(res, 10))
+
+    expect(queryByText('Sorry, your region is not supported')).not.toBeTruthy()
+  })
 })