diff --git a/__tests__/checkin.test.tsx b/__tests__/checkin.test.tsx index 2945b4de..a666ba68 100644 --- a/__tests__/checkin.test.tsx +++ b/__tests__/checkin.test.tsx @@ -21,6 +21,13 @@ beforeEach(() => { }) it('shows onboarding the first time', async () => { + fetchMock.get(`path:/areas/${areaId}`, { + id: areaId, + name: 'Test Tisch', + menuLink: null, + companyId: 'som-uuid', + }) + render(withTestRouter(, route)) await screen.findByLabelText('Name') await screen.findByLabelText('Telefon') diff --git a/lib/api.ts b/lib/api.ts index 62db8c6d..4497362e 100644 --- a/lib/api.ts +++ b/lib/api.ts @@ -89,10 +89,11 @@ type AreaPost = { companyId: string } -type AreaResponse = { +export type AreaResponse = { id: string name: string menuLink?: string + companyId: string } const api = ky.create({ prefixUrl: process.env.apiBase, timeout: false }) diff --git a/lib/db.ts b/lib/db.ts index efe2f771..06cbe2cd 100644 --- a/lib/db.ts +++ b/lib/db.ts @@ -21,6 +21,7 @@ export interface Guest { name: string phone: string address: string + checkedInCompanyIds?: string[] } export interface GuestChangeset { @@ -68,7 +69,7 @@ export async function getGuest(): Promise { } export async function updateGuest(changes: GuestChangeset): Promise { - let guest = await db.guests.toCollection().first() + let guest = await getGuest() await db.guests.update(guest.id, changes) guest = await getGuest() return guest @@ -176,3 +177,17 @@ export async function updateCheckin( const checkin = await getCheckin(id) return checkin } + +export async function setCheckedInCompanyIds( + companyId: string +): Promise { + let guest = await getGuest() + if (!guest) return + + if (!guest.checkedInCompanyIds) guest.checkedInCompanyIds = [] + if (guest.checkedInCompanyIds.indexOf(companyId) < 0) + guest.checkedInCompanyIds.push(companyId) + await db.guests.update(guest.id, guest) + guest = await getGuest() + return guest +} diff --git a/pages/checkin.tsx b/pages/checkin.tsx index ee21727e..e27d4df7 100644 --- a/pages/checkin.tsx +++ b/pages/checkin.tsx @@ -24,6 +24,14 @@ const CheckingPage: React.FC<{}> = () => { }) const [doCheckout] = useMutation(api.checkoutTicket) + const [area, setArea] = React.useState() + React.useEffect(() => { + if (!areaId) return + api.fetchArea(areaId).then((area) => { + setArea(area) + }) + }, [areaId]) + const performCheckin = React.useCallback( async (guest: db.Guest) => { const lastCheckin = await db.getLastCheckin() @@ -41,9 +49,10 @@ const CheckingPage: React.FC<{}> = () => { }, guest, }) + await db.setCheckedInCompanyIds(area?.companyId) router.replace('/my-checkins') }, - [doCheckin, doCheckout, publicKey, areaId, router] + [doCheckin, doCheckout, publicKey, areaId, router, area] ) // The loading spinner should only become visible after a small amount of time @@ -83,17 +92,23 @@ const CheckingPage: React.FC<{}> = () => { React.useEffect(() => { // Disallow empty data. This is the case on initial mount due to next's // static optimization - if (!publicKey || !areaId) return + if (!publicKey || !areaId || !area?.companyId) return // Check if a guest was already created, then do the checkin cha cha cha. db.getGuest().then((guest) => { - if (guest && guest.name && guest.phone && guest.address) { + if ( + guest && + guest.name && + guest.phone && + guest.address && + guest.checkedInCompanyIds?.indexOf(area?.companyId) >= 0 + ) { performCheckin(guest) } else { setShowOnboarding(true) } }) - }, [performCheckin, publicKey, areaId]) + }, [performCheckin, publicKey, areaId, area]) const showLoading = isDelayedLoading && !showOnboarding && !error diff --git a/ui/base/Input.tsx b/ui/base/Input.tsx index a6a322bc..e48dd856 100644 --- a/ui/base/Input.tsx +++ b/ui/base/Input.tsx @@ -24,6 +24,10 @@ const Input: React.FC = ({ const active = ownValue !== '' || focused const underline = focused || Boolean(error) + React.useEffect(() => { + setOwnValue(value) + }, [value]) + function handleChange(event): void { setOwnValue(event.target.value) rest?.onChange(event) diff --git a/ui/blocks/Onboarding.tsx b/ui/blocks/Onboarding.tsx index 33b8dda1..44e43ecb 100644 --- a/ui/blocks/Onboarding.tsx +++ b/ui/blocks/Onboarding.tsx @@ -20,6 +20,21 @@ const Onboarding: React.FC = ({ onFinish }) => { const [phoneError, setPhoneError] = React.useState(false) const [addressError, setAddressError] = React.useState(false) + React.useEffect(() => { + /* + Check if a guest was already created, then prefill form + This occurs if guest is checking in a new company + */ + db.getGuest().then((guest) => { + if (guest) { + setName(guest.name) + setPhone(guest.phone) + setAddress(guest.address) + setRememberMe(true) + } + }) + }, []) + function handleSubmit(event): void { event.preventDefault() if (!name || !phone || !address) {