Changes

src/pages/ConsultingBooking.tsx

@@ -7,6 +7,7 @@ import { AppLayout } from '@/components/AppLayout';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Calendar } from '@/components/ui/calendar';
 import { Skeleton } from '@/components/ui/skeleton';
@@ -43,6 +44,10 @@ interface TimeSlot {
   available: boolean;
 }
 
+interface Profile {
+  whatsapp_number: string | null;
+}
+
 export default function ConsultingBooking() {
   const { user, loading: authLoading } = useAuth();
   const navigate = useNavigate();
@@ -52,11 +57,13 @@ export default function ConsultingBooking() {
   const [workhours, setWorkhours] = useState<Workhour[]>([]);
   const [confirmedSlots, setConfirmedSlots] = useState<ConfirmedSlot[]>([]);
   const [loading, setLoading] = useState(true);
+  const [profile, setProfile] = useState<Profile | null>(null);
 
   const [selectedDate, setSelectedDate] = useState<Date | undefined>(addDays(new Date(), 1));
   const [selectedSlots, setSelectedSlots] = useState<string[]>([]);
   const [selectedCategory, setSelectedCategory] = useState('');
   const [notes, setNotes] = useState('');
+  const [whatsappInput, setWhatsappInput] = useState('');
   const [submitting, setSubmitting] = useState(false);
 
   useEffect(() => {
@@ -70,13 +77,15 @@ export default function ConsultingBooking() {
   }, [selectedDate]);
 
   const fetchData = async () => {
-    const [settingsRes, workhoursRes] = await Promise.all([
+    const [settingsRes, workhoursRes, profileRes] = await Promise.all([
       supabase.from('consulting_settings').select('*').single(),
       supabase.from('workhours').select('*').order('weekday'),
+      user ? supabase.from('profiles').select('whatsapp_number').eq('id', user.id).single() : Promise.resolve({ data: null }),
     ]);
 
     if (settingsRes.data) setSettings(settingsRes.data);
     if (workhoursRes.data) setWorkhours(workhoursRes.data);
+    if (profileRes.data) setProfile(profileRes.data);
     setLoading(false);
   };
 
@@ -174,6 +183,15 @@ export default function ConsultingBooking() {
     setSubmitting(true);
 
     try {
+      // Save WhatsApp number if provided and not already saved
+      if (whatsappInput && !profile?.whatsapp_number) {
+        let normalized = whatsappInput.replace(/\D/g, '');
+        if (normalized.startsWith('0')) normalized = '62' + normalized.substring(1);
+        if (!normalized.startsWith('+')) normalized = '+' + normalized;
+        
+        await supabase.from('profiles').update({ whatsapp_number: normalized }).eq('id', user.id);
+      }
+
       // Create order
       const { data: order, error: orderError } = await supabase
         .from('orders')
@@ -348,13 +366,29 @@ export default function ConsultingBooking() {
                   Catatan (Opsional)
                 </CardTitle>
               </CardHeader>
-              <CardContent>
+              <CardContent className="space-y-4">
                 <Textarea
                   value={notes}
                   onChange={(e) => setNotes(e.target.value)}
                   placeholder="Jelaskan topik atau pertanyaan yang ingin dibahas..."
                   className="border-2 min-h-[100px]"
                 />
+                
+                {/* WhatsApp prompt if not saved */}
+                {user && !profile?.whatsapp_number && (
+                  <div className="space-y-2 pt-2 border-t border-border">
+                    <Label className="text-sm">Nomor WhatsApp untuk pengingat sesi ini (opsional)</Label>
+                    <Input
+                      value={whatsappInput}
+                      onChange={(e) => setWhatsappInput(e.target.value)}
+                      placeholder="08123456789"
+                      className="border-2"
+                    />
+                    <p className="text-xs text-muted-foreground">
+                      Akan otomatis tersimpan ke profil Anda
+                    </p>
+                  </div>
+                )}
               </CardContent>
             </Card>
           </div>