Make Splitwise import a visible V1 path

Author: 0xkkonrad

apps/web/e2e/import.spec.ts

@@ -1,8 +1,6 @@
 import { expect, test } from '@playwright/test'
 import { SIMPLE_GROUP } from '../src/lib/__fixtures__/splitwise'
 
-test.skip(process.env.NEXT_PUBLIC_SPLIT_V2_ENABLED !== '1', 'Splitwise import belongs to the v2 surface')
-
 /**
  * The switch, end to end: a real Splitwise export goes in through the real file input, and the
  * room that comes out is asserted against the balances the file itself states.

apps/web/e2e/landing.spec.ts

@@ -1039,12 +1039,12 @@ test('the room handoff shares a localized message, the link, and the room drawin
     )
 })
 
-test('v1 does not expose AI or migration tooling in either landing variant', async ({ page }) => {
+test('v1 exposes Splitwise import without exposing AI tooling', async ({ page }) => {
     await openLanding(page)
-    await expect(page.getByRole('link', { name: 'Import from Splitwise' })).toHaveCount(0)
-    await expect(page.getByText(/quick add|scan a receipt|AI receipt|import your Splitwise/i)).toHaveCount(0)
+    await expect(page.getByRole('link', { name: 'Import from Splitwise' })).toBeVisible()
+    await expect(page.getByText(/quick add|scan a receipt|AI receipt/i)).toHaveCount(0)
 
-    expect((await page.goto('/import'))?.status()).toBe(404)
+    expect((await page.goto('/import'))?.status()).toBe(200)
     expect((await page.goto('/blog/scan-a-receipt-to-split-a-bill'))?.status()).toBe(404)
 })
 

apps/web/e2e/pwa.spec.ts

@@ -12,7 +12,7 @@ import { expect, test, type Page } from '@playwright/test'
  */
 test.use({ extraHTTPHeaders: { 'x-forwarded-for': '192.0.2.20' } })
 
-test('the manifest names the app Split, offers one shortcut, and carries no room', async ({ request }) => {
+test('the manifest names the app Split, offers v1 creation shortcuts, and carries no room', async ({ request }) => {
     const response = await request.get('/manifest.webmanifest')
     expect(response.status()).toBe(200)
 
@@ -25,7 +25,7 @@ test('the manifest names the app Split, offers one shortcut, and carries no room
 
     expect(manifest.name).toBe('Split')
     expect(manifest.short_name).toBe('Split')
-    expect(manifest.shortcuts?.map((shortcut) => shortcut.url)).toEqual(['/new'])
+    expect(manifest.shortcuts?.map((shortcut) => shortcut.url)).toEqual(['/new', '/import'])
     // The share sheet is v2's, and this build is v1. An entry here would put Split in every
     // Android photo share sheet and then decline the photo.
     expect(manifest.share_target).toBeUndefined()

apps/web/e2e/room.spec.ts

@@ -579,21 +579,34 @@ test('a link holder can export the room without exporting the room credential',
     const url = (await roomLink.innerText()).trim()
     await page.getByTestId('go-to-room').click()
 
-    // Export is a row in Settings now, not a top-bar menu. The row says what you
-    // would get; the sheet behind it says who is in the file, and hands it over.
+    // Import/export is one row in Settings. It names both jobs without implying
+    // that a Splitwise file will be merged into the room currently open.
     await page.getByTestId('open-room-settings').click()
     await expect(page.getByTestId('settings-sheet')).toBeVisible({ timeout: 15_000 })
     const exportRow = page.getByTestId('export-row')
-    await expect(exportRow).toContainText('CSV · JSON')
+    await expect(exportRow).toContainText('Import / export')
+    await expect(exportRow).toContainText('Splitwise · CSV · JSON')
     await exportRow.click()
 
     const exportSheet = page.getByTestId('export-sheet')
     await expect(exportSheet).toBeVisible()
+    await expect(exportSheet).toContainText('Bring over a Splitwise group')
+    await expect(exportSheet).toContainText('This creates a new room. Your current room stays as it is.')
+    await expect(page.getByTestId('open-splitwise-import')).toBeVisible()
     // One disclosure sentence, and it does not claim to be the whole money
     // history — deleted records are left out, so that wording would be false.
+    await expect(exportSheet).toContainText('Export this room')
     await expect(exportSheet).toContainText('The file has everyone’s names and every expense and payment.')
     await expect(exportSheet).not.toContainText('money history')
 
+    const csvDownloadPromise = page.waitForEvent('download')
+    await exportSheet.getByRole('button', { name: 'Download CSV' }).click()
+    const csvDownload = await csvDownloadPromise
+    expect(csvDownload.suggestedFilename()).toBe('export-room.csv')
+    const csvPath = await csvDownload.path()
+    expect(csvPath).not.toBeNull()
+    expect(await readFile(csvPath!, 'utf8')).not.toContain(new URL(url).pathname)
+
     const jsonDownloadPromise = page.waitForEvent('download')
     await exportSheet.getByRole('button', { name: 'Download JSON' }).click()
     const jsonDownload = await jsonDownloadPromise
@@ -612,4 +625,9 @@ test('a link holder can export the room without exporting the room credential',
     await page.getByTestId('close-export-sheet').click()
     await expect(exportSheet).toHaveAttribute('data-state', 'closed')
     await expect(page.getByTestId('settings-sheet')).toBeVisible()
+
+    await exportRow.click()
+    await page.getByTestId('open-splitwise-import').click()
+    await page.waitForURL('/import')
+    await expect(page.getByTestId('import-choose')).toBeVisible()
 })

apps/web/src/app/(marketing)/import/opengraph-image.tsx

@@ -1,9 +1,7 @@
 import { ImageResponse } from 'next/og'
-import { notFound } from 'next/navigation'
 import { BrandCard, OG_CONTENT_TYPE, OG_SIZE } from '@/server/og/card'
 import { ogFonts } from '@/server/og/fonts'
 import { marketingCopy } from '@/components/marketing/copy'
-import { splitV2Enabled } from '@/lib/flags'
 
 /**
  * Unfurl for the importer. It was sharing as a blank card: the `(marketing)` group's landing
@@ -20,7 +18,6 @@ export const contentType = OG_CONTENT_TYPE
 export const alt = marketingCopy.importPage.meta.title
 
 export default async function ImportOgImage() {
-    if (!splitV2Enabled()) notFound()
     return new ImageResponse(<BrandCard lines={['SPLIT', 'IT']} tagline={marketingCopy.importPage.hero.title} />, {
         ...OG_SIZE,
         fonts: await ogFonts(),

apps/web/src/app/(marketing)/import/page.tsx

@@ -1,13 +1,11 @@
 import type { Metadata } from 'next'
 import Link from 'next/link'
-import { notFound } from 'next/navigation'
 import { Breadcrumbs } from '@/components/marketing/Breadcrumbs'
 import { JsonLd } from '@/components/marketing/JsonLd'
 import { SiteFooter } from '@/components/marketing/SiteFooter'
 import { marketingCopy } from '@/components/marketing/copy'
 import { SplitwiseImport } from '@/components/import/SplitwiseImport'
 import { Button } from '@/components/ui/Button'
-import { splitV2Enabled } from '@/lib/flags'
 import { breadcrumbSchema, pageMetadata } from '@/lib/seo'
 
 const { importPage } = marketingCopy
@@ -48,8 +46,6 @@ const faqJsonLd = {
 }
 
 export default function ImportPage() {
-    if (!splitV2Enabled()) notFound()
-
     return (
         <main className="flex min-h-dvh flex-col gap-10 bg-background">
             <JsonLd data={faqJsonLd} />

apps/web/src/app/api/import/route.ts

@@ -1,10 +1,9 @@
-import { badRequest, notFound, readJsonCapped, respond } from '@/server/http'
+import { badRequest, readJsonCapped, respond } from '@/server/http'
 import { CREATE_LIMIT, enforceRateLimit } from '@/server/rateLimit'
 import { toRoomState } from '@/server/roomState'
 import { importRoom } from '@/server/splitwiseImport'
 import { importRoomSchema } from '@/server/validation'
 import type { RoomStateWithMember } from '@/lib/api-types'
-import { splitV2Enabled } from '@/lib/flags'
 import { MAX_EXPENSES, MAX_MEMBERS } from '@/lib/splitwise-csv'
 
 export const dynamic = 'force-dynamic'
@@ -62,7 +61,6 @@ export function assertImportCardinality(raw: unknown): void {
  */
 export const POST = (request: Request) =>
     respond(async (): Promise<RoomStateWithMember> => {
-        if (!splitV2Enabled()) throw notFound('not found')
         enforceRateLimit(request, CREATE_LIMIT, 'create')
 
         const raw = await readJsonCapped(

apps/web/src/app/manifest.test.ts

@@ -38,14 +38,11 @@ describe('the installed app is named Split', () => {
 })
 
 describe('shortcuts', () => {
-    it('offers only the screen that works with no room on the device', async () => {
-        const manifest = await manifestWith(false)
-        expect(manifest.shortcuts).toEqual([{ name: 'New split', url: '/new' }])
-    })
-
-    it('adds the importer only where /import is not a 404', async () => {
-        const manifest = await manifestWith(true)
-        expect(manifest.shortcuts?.map((shortcut) => shortcut.url)).toEqual(['/new', '/import'])
+    it('offers new-room and import entry points in both flag states', async () => {
+        for (const v2 of [false, true]) {
+            const manifest = await manifestWith(v2)
+            expect(manifest.shortcuts?.map((shortcut) => shortcut.url)).toEqual(['/new', '/import'])
+        }
     })
 })
 

apps/web/src/app/manifest.ts

@@ -33,9 +33,7 @@ export default function manifest(): MetadataRoute.Manifest {
             // The one thing somebody opens the app cold to do, and the only screen that works with
             // no room on this device at all. `start_url` already covers "take me to my rooms".
             { name: 'New split', url: '/new' },
-            // Only on a deployment that opted into v2 — /import calls notFound() otherwise, and a
-            // launcher shortcut to a 404 is the definition of a dead end.
-            ...(splitV2Enabled() ? [{ name: 'Import from Splitwise', url: '/import' }] : []),
+            { name: 'Import from Splitwise', url: '/import' },
         ],
         /**
          * Split in the OS share sheet, for a photo of a bill — v2 only.

apps/web/src/components/marketing/ReadMore.tsx

@@ -7,7 +7,6 @@ import { motion } from 'motion/react'
 import { Doodle } from '@/components/ui/Doodle'
 import type { DoodleName } from '@/components/ui/doodles'
 import { Icon } from '@/components/ui/Icon'
-import { splitV2Enabled } from '@/lib/flags'
 import { useMotionAllowed } from '@/lib/use-motion'
 import { useFeedback } from '@/lib/use-settings'
 import { LANDING_CAST, LandingPersona } from './LandingPersona'
@@ -194,10 +193,7 @@ export function ReadMore() {
                         <Fold key={question} title={t(`faq.${question}.q`)} onToggle={onToggle}>
                             <p className="max-w-xl text-sm leading-6 text-grey-1">
                                 {t(`faq.${question}.a`)}
-                                {/* The importer is v2-only surface: /import 404s in a v1 build,
-                                    so pointing at it there would send the one reader who raised
-                                    this objection to a dead page. */}
-                                {question === 'retype' && splitV2Enabled() && ` ${t('faq.retype.import')}`}
+                                {question === 'retype' && ` ${t('faq.retype.import')}`}
                             </p>
                         </Fold>
                     ))}