No submission to display.
- return (
-
+
{
+ if ((e.key === 'Enter' || e.key === ' ') && state === 'success') onClose?.()
+ }}
+ />
+
+
+
+
+ {variant.headline}
+
+
+
{variant.subline}
+
+
+
+ {state === 'queued' ? 'Draft reference' : 'Reference'}
+
+
{referenceCode}
+
+ {state === 'success'
+ ? `Submitted ${new Date().toLocaleTimeString()}`
+ : state === 'queued'
+ ? 'Will become final on send'
+ : 'Nothing is lost'}
+
+
+
+ {variant.receiverText ? (
+
+
+
{variant.receiverText}
+
+ ) : null}
+
+
+
+ {state !== 'success' ? (
+
+ ) : (
+
+ )}
+
+
+
+ {variant.secondaryButton ? (
+
+
+
+ ) : null}
+
+
{variant.permissionText}
+
+
+ )
+}
diff --git a/apps/citizen-pwa/src/components/SubmitReportForm.tsx b/apps/citizen-pwa/src/components/SubmitReportForm.tsx
deleted file mode 100644
index a4748652..00000000
--- a/apps/citizen-pwa/src/components/SubmitReportForm.tsx
+++ /dev/null
@@ -1,224 +0,0 @@
-import { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { addDoc, collection } from 'firebase/firestore'
-import { httpsCallable } from 'firebase/functions'
-import { db, fns, ensureSignedIn } from '../services/firebase.js'
-import { submitReport, type SubmitReportDeps } from '../services/submit-report.js'
-import { normalizeMsisdn } from '@bantayog/shared-validators'
-import type { ReportType, Severity } from '@bantayog/shared-types'
-
-function randomPublicRef(): string {
- const alphabet = 'abcdefghijklmnopqrstuvwxyz0123456789'
- const bytes = crypto.getRandomValues(new Uint8Array(8))
- return Array.from(bytes, (b) => alphabet[b % alphabet.length]).join('')
-}
-
-function randomSecret(): string {
- return crypto.randomUUID()
-}
-
-async function sha256Hex(input: string | Blob): Promise
{
- const buf =
- typeof input === 'string'
- ? new TextEncoder().encode(input)
- : new Uint8Array(await input.arrayBuffer())
- const digest = await crypto.subtle.digest('SHA-256', buf)
- return Array.from(new Uint8Array(digest))
- .map((b) => b.toString(16).padStart(2, '0'))
- .join('')
-}
-
-async function putBlob(url: string, blob: Blob): Promise {
- const res = await fetch(url, {
- method: 'PUT',
- body: blob,
- headers: { 'content-type': blob.type },
- })
- if (!res.ok) throw new Error('upload failed: ' + String(res.status))
-}
-
-export function SubmitReportForm() {
- const nav = useNavigate()
- const [reportType, setReportType] = useState('flood')
- const [severity, setSeverity] = useState('medium')
- const [description, setDescription] = useState('')
- const [photo, setPhoto] = useState(null)
- const [lat, setLat] = useState(null)
- const [lng, setLng] = useState(null)
- const [phone, setPhone] = useState('')
- const [smsConsent, setSmsConsent] = useState(false)
- const [phoneError, setPhoneError] = useState(null)
- const [busy, setBusy] = useState(false)
- const [error, setError] = useState(null)
-
- async function getLocation(): Promise {
- const pos = await new Promise((resolve, reject) => {
- navigator.geolocation.getCurrentPosition(resolve, reject, {
- enableHighAccuracy: true,
- timeout: 10000,
- })
- })
- setLat(pos.coords.latitude)
- setLng(pos.coords.longitude)
- }
-
- async function onCaptureLocation(): Promise {
- try {
- await getLocation()
- } catch (e: unknown) {
- setError(e instanceof Error ? e.message : 'location failed')
- }
- }
-
- async function onSubmit(e: React.SubmitEvent): Promise {
- e.preventDefault()
- if (lat === null || lng === null) {
- setError('Please capture your location.')
- return
- }
- if (phone) {
- try {
- normalizeMsisdn(phone)
- } catch {
- setPhoneError('Enter a valid PH mobile number (e.g. 09171234567 or +639171234567)')
- return
- }
- }
- setBusy(true)
- setError(null)
- try {
- const deps: SubmitReportDeps = {
- ensureSignedIn,
- requestUploadUrl: async (args) =>
- (await httpsCallable(fns(), 'requestUploadUrl')(args)).data as {
- uploadUrl: string
- uploadId: string
- storagePath: string
- expiresAt: number
- },
- putBlob,
- writeInbox: async (doc) => {
- const ref = await addDoc(collection(db(), 'report_inbox'), doc)
- return ref.id
- },
- randomUUID: () => crypto.randomUUID(),
- randomPublicRef,
- randomSecret,
- sha256Hex,
- now: () => Date.now(),
- }
- const result = await submitReport(deps, {
- reportType,
- severity,
- description,
- publicLocation: { lat, lng },
- ...(photo ? { photo } : {}),
- ...(phone && smsConsent ? { contact: { phone, smsConsent: true as const } } : {}),
- })
- // eslint-disable-next-line @typescript-eslint/no-floating-promises
- nav('/receipt', { state: result })
- } catch (e: unknown) {
- setError(e instanceof Error ? e.message : 'submission failed')
- } finally {
- setBusy(false)
- }
- }
-
- return (
-