diff --git a/apps/citizen-pwa/package.json b/apps/citizen-pwa/package.json index d7d6beb6..abec3566 100644 --- a/apps/citizen-pwa/package.json +++ b/apps/citizen-pwa/package.json @@ -15,6 +15,7 @@ "@bantayog/shared-firebase": "workspace:*", "@bantayog/shared-types": "workspace:*", "@bantayog/shared-ui": "workspace:*", + "@bantayog/shared-validators": "workspace:*", "firebase": "^12.12.0", "react": "^19.2.5", "react-dom": "^19.2.5", diff --git a/apps/citizen-pwa/src/components/SubmitReportForm.tsx b/apps/citizen-pwa/src/components/SubmitReportForm.tsx index 52c8b11c..a4748652 100644 --- a/apps/citizen-pwa/src/components/SubmitReportForm.tsx +++ b/apps/citizen-pwa/src/components/SubmitReportForm.tsx @@ -4,6 +4,7 @@ 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 { @@ -44,6 +45,9 @@ export function SubmitReportForm() { 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) @@ -72,6 +76,14 @@ export function SubmitReportForm() { 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 { @@ -101,6 +113,7 @@ export function SubmitReportForm() { 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 }) @@ -165,6 +178,30 @@ export function SubmitReportForm() { }} /> + + {phoneError &&

{phoneError}

} +