fix: show app not found for app store links with a percent sign

packages/web-app-app-store/src/helpers/routes.ts

@@ -7,5 +7,5 @@ export function getAppListRoute(tag?: string): RouteLocationRaw {
 }
 
 export function getAppDetailsRoute(app: App): RouteLocationRaw {
-  return { name: `${APPID}-details`, params: { appId: encodeURIComponent(app.id) } }
+  return { name: `${APPID}-details`, params: { appId: app.id } }
 }

packages/web-app-app-store/src/views/AppDetails.vue

@@ -52,8 +52,7 @@ import AppDetailsGallery from '../components/AppDetailsGallery.vue'
 import AppDetailsInfo from '../components/AppDetailsInfo.vue'
 import AppVersions from '../components/AppVersions.vue'
 
-const appIdRouteParam = useRouteParam('appId')
-const appId = computed(() => decodeURIComponent(unref(appIdRouteParam)))
+const appId = useRouteParam('appId')
 const appsStore = useAppsStore()
 const router = useRouter()
 

packages/web-app-app-store/tests/unit/helpers/routes.spec.ts

@@ -0,0 +1,19 @@
+import { createMemoryHistory, createRouter } from 'vue-router'
+import { mock } from 'vitest-mock-extended'
+import { getAppDetailsRoute } from '../../../src/helpers'
+import { APPID } from '../../../src/appid'
+import { App } from '../../../src/types'
+
+describe('getAppDetailsRoute', () => {
+  it.each(['com.example.app', 'a/b', 'a#b', 'a?b', '50%-off', 'a b'])(
+    'resolves the app id "%s" from its link',
+    (id) => {
+      const router = createRouter({
+        history: createMemoryHistory(),
+        routes: [{ path: '/app-store/app/:appId', name: `${APPID}-details`, component: {} }]
+      })
+      const { href } = router.resolve(getAppDetailsRoute(mock<App>({ id })))
+      expect(router.resolve(href).params.appId).toBe(id)
+    }
+  )
+})

packages/web-app-app-store/tests/unit/views/AppDetails.spec.ts

@@ -50,6 +50,11 @@ describe('AppDetails', () => {
     expect(wrapper.find(selectors.notFound).exists()).toBeTruthy()
     expect(wrapper.find(selectors.details).exists()).toBeFalsy()
   })
+  it.each(['%', '50%-off'])('shows a message for the unknown app id "%s"', (appId) => {
+    const { wrapper, getById } = getWrapper(undefined, { appId })
+    expect(getById).toHaveBeenCalledWith(appId)
+    expect(wrapper.find(selectors.notFound).exists()).toBeTruthy()
+  })
   it('renders the details of the app from the route', () => {
     const { wrapper, getById } = getWrapper(app)
     expect(getById).toHaveBeenCalledWith('com.example.app')
@@ -90,7 +95,11 @@ describe('AppDetails', () => {
 
 function getWrapper(
   resolvedApp: App | undefined,
-  { back = null, resolvedRouteName = '' }: { back?: string; resolvedRouteName?: string } = {}
+  {
+    back = null,
+    resolvedRouteName = '',
+    appId = 'com.example.app'
+  }: { back?: string; resolvedRouteName?: string; appId?: string } = {}
 ) {
   const mocks = defaultComponentMocks()
   writable(mocks.$router).options = mock<Router['options']>({
@@ -100,7 +109,7 @@ function getWrapper(
     mock<ReturnType<typeof mocks.$router.resolve>>({ name: resolvedRouteName })
   )
   vi.mocked(useRouter).mockReturnValue(mocks.$router)
-  vi.mocked(useRouteParam).mockReturnValue(ref(encodeURIComponent('com.example.app')))
+  vi.mocked(useRouteParam).mockReturnValue(ref(appId))
 
   const plugins = defaultPlugins()
   const { getById } = useAppsStore()