From 39f7bc207b996c827c90329b8105aa9f710711b3 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Wed, 4 Feb 2026 00:54:57 +0100
Subject: [PATCH] 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>
---
 src/app/(auth)/onboarding/page.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

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