letsbe
/
MOPC-App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use PhoneInput component with country dropdown in onboarding 

Replace plain text input with the existing PhoneInput component that
includes country code dropdown with flags and auto-formatting.
Default country is set to Monaco (MC).

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Matt 2026-02-04 00:54:57 +01:00
parent a3cc73e49d
commit 39f7bc207b
1 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/(auth)/onboarding/page.tsx
View File

@ -6,6 +6,7 @@ import { trpc } from '@/lib/trpc/client'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label' import { Label } from '@/components/ui/label'
import { PhoneInput } from '@/components/ui/phone-input'
import { import {
Card, Card,
CardContent, CardContent,
@ -162,15 +163,15 @@ export default function OnboardingPage() {
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="phone">Phone Number (Optional)</Label> <Label htmlFor="phone">Phone Number (Optional)</Label>
<Input <PhoneInput
id="phone" id="phone"
type="tel"
value={phoneNumber} value={phoneNumber}
onChange={(e) => setPhoneNumber(e.target.value)} onChange={(value) => setPhoneNumber(value || '')}
placeholder="+377 12 34 56 78" defaultCountry="MC"
placeholder="Enter phone number"
/> />
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
Include country code for WhatsApp notifications Select your country and enter your number for WhatsApp notifications
</p> </p>
</div> </div>