1+ import React , { useEffect } from "react" ;
2+ import { useForm } from "react-hook-form" ;
3+
4+ export default function UserAccountModal ( {
5+ open,
6+ setOpen,
7+ profileData,
8+ onProfileUpdate,
9+ onSubmit
10+ } ) {
11+ const {
12+ register,
13+ handleSubmit,
14+ reset,
15+ setValue,
16+ watch,
17+ formState : { isSubmitting }
18+ } = useForm ( ) ;
19+
20+ // Watch phone value for formatting
21+ const phoneValue = watch ( "phone" ) ;
22+
23+ // Function to convert date format from dd-MM-yyyy to yyyy-MM-dd
24+ const formatDateForInput = ( dateString ) => {
25+ if ( ! dateString ) return "" ;
26+
27+ // If already in yyyy-MM-dd format, return as is
28+ if ( dateString . match ( / ^ \d { 4 } - \d { 2 } - \d { 2 } $ / ) ) {
29+ return dateString ;
30+ }
31+
32+ // Convert from dd-MM-yyyy to yyyy-MM-dd
33+ if ( dateString . match ( / ^ \d { 2 } - \d { 2 } - \d { 4 } $ / ) ) {
34+ const [ day , month , year ] = dateString . split ( '-' ) ;
35+ return `${ year } ${ month } ${ day } ;
36+ }
37+
38+ return dateString ;
39+ } ;
40+
41+ // Function to convert date format from yyyy-MM-dd to dd-MM-yyyy
42+ const formatDateForStorage = ( dateString ) => {
43+ if ( ! dateString ) return "" ;
44+
45+ // If already in dd-MM-yyyy format, return as is
46+ if ( dateString . match ( / ^ \d { 2 } - \d { 2 } - \d { 4 } $ / ) ) {
47+ return dateString ;
48+ }
49+
50+ // Convert from yyyy-MM-dd to dd-MM-yyyy
51+ if ( dateString . match ( / ^ \d { 4 } - \d { 2 } - \d { 2 } $ / ) ) {
52+ const [ year , month , day ] = dateString . split ( '-' ) ;
53+ return `${ day } ${ month } ${ year } ;
54+ }
55+
56+ return dateString ;
57+ } ;
58+
59+ useEffect ( ( ) => {
60+ if ( profileData ) {
61+ reset ( {
62+ name : profileData . name || "" ,
63+ surname : profileData . surname || "" ,
64+ location : profileData . role ?. developer ?. location || "" ,
65+ phone : profileData . phone || "" ,
66+ birthDate : formatDateForInput ( profileData . birthDate ) || "" ,
67+ } ) ;
68+ } else {
69+ reset ( {
70+ name : "" ,
71+ surname : "" ,
72+ location : "" ,
73+ phone : "" ,
74+ birthDate : "" ,
75+ } ) ;
76+ }
77+ } , [ profileData , reset ] ) ;
78+
79+ // Format phone number similar to UserComponent
80+ const handlePhoneChange = ( e ) => {
81+ let value = e . target . value . replace ( / [ ^ \d + ] / g, "" ) ;
82+ if ( ! value . startsWith ( "+" ) ) {
83+ value = "+" + value . replace ( / \+ / g, "" ) ;
84+ }
85+ if ( value . length > 3 ) {
86+ const prefix = value . slice ( 0 , 3 ) ;
87+ let rest = value . slice ( 3 ) . replace ( / \s + / g, "" ) ;
88+ value = prefix + " " + rest ;
89+ }
90+ setValue ( "phone" , value ) ;
91+ } ;
92+
93+ const handleClose = ( ) => {
94+ reset ( ) ;
95+ setOpen ( false ) ;
96+ } ;
97+
98+ const handleUserInfoSubmit = async ( data ) => {
99+ try {
100+ // console.log('Raw form data:', data); // Debug log
101+
102+ // Format birthDate back to dd-MM-yyyy before sending
103+ const formattedData = {
104+ ...data ,
105+ birthDate : formatDateForStorage ( data . birthDate )
106+ } ;
107+
108+ // console.log('Formatted data from modal:', formattedData);
109+
110+ if ( onSubmit ) {
111+ await onSubmit ( formattedData ) ;
112+ }
113+
114+ if ( onProfileUpdate ) {
115+ onProfileUpdate ( formattedData ) ;
116+ }
117+
118+ handleClose ( ) ;
119+ } catch ( error ) {
120+ console . error ( "Error when you tried to update user information: " , error ) ;
121+ }
122+ } ;
123+
124+ if ( ! open ) return null ;
125+
126+ return (
127+ < div className = "modal modal-open fixed inset-0 flex justify-center items-center z-50" >
128+ < div className = "modal-box max-w-3xl bg-neutral-80 border border-neutral-70 rounded-lg p-6 relative" >
129+ < form onSubmit = { handleSubmit ( handleUserInfoSubmit ) } className = "flex flex-col gap-4" >
130+ < h2 className = "text-2xl font-bold text-center" > Edit User Information</ h2 >
131+
132+ { /* Name and Surname */ }
133+ < div className = "grid grid-cols-1 md:grid-cols-2 gap-4" >
134+ < div className = "form-control" >
135+ < label className = "block text-sm text-neutral-20 mb-1" >
136+ < span className = "label-text font-semibold" > Name</ span >
137+ </ label >
138+ < input
139+ { ...register ( "name" ) }
140+ placeholder = "Name"
141+ className = "input input-bordered bg-neutral-90 text-neutral-0 border-neutral-60 w-full placeholder-neutral-40 placeholder:italic"
142+ />
143+ </ div >
144+ < div className = "form-control" >
145+ < label className = "block text-sm text-neutral-20 mb-1" >
146+ < span className = "label-text font-semibold" > Surname</ span >
147+ </ label >
148+ < input
149+ { ...register ( "surname" ) }
150+ placeholder = "Surname"
151+ className = "input input-bordered bg-neutral-90 text-neutral-0 border-neutral-60 w-full placeholder-neutral-40 placeholder:italic"
152+ />
153+ </ div >
154+ </ div >
155+
156+ { /* Location */ }
157+ < div className = "form-control" >
158+ < label className = "block text-sm text-neutral-20 mb-1" >
159+ < span className = "label-text font-semibold" > Location</ span >
160+ </ label >
161+ < input
162+ { ...register ( "location" ) }
163+ placeholder = "Location"
164+ className = "input input-bordered bg-neutral-90 text-neutral-0 border-neutral-60 w-full placeholder-neutral-40 placeholder:italic"
165+ />
166+ </ div >
167+
168+ { /* Phone and Birth Date */ }
169+ < div className = "grid grid-cols-1 md:grid-cols-2 gap-4" >
170+ < div className = "form-control" >
171+ < label className = "block text-sm text-neutral-20 mb-1" >
172+ < span className = "label-text font-semibold" > Phone</ span >
173+ </ label >
174+ < input
175+ { ...register ( "phone" ) }
176+ placeholder = "+34 600600600"
177+ className = "input input-bordered bg-neutral-90 text-neutral-0 border-neutral-60 w-full placeholder-neutral-40 placeholder:italic"
178+ value = { phoneValue || "" }
179+ onChange = { handlePhoneChange }
180+ maxLength = { 16 }
181+ />
182+ </ div >
183+ < div className = "form-control" >
184+ < label className = "block text-sm text-neutral-20 mb-1" >
185+ < span className = "label-text font-semibold" > Birth Date</ span >
186+ </ label >
187+ < input
188+ { ...register ( "birthDate" ) }
189+ placeholder = "Select your birth date"
190+ type = "date"
191+ className = "input input-bordered bg-neutral-90 text-neutral-0 border-neutral-60 w-full placeholder-neutral-40 placeholder:italic"
192+ />
193+ </ div >
194+ </ div >
195+
196+ { /* Buttons */ }
197+ < div className = "flex justify-end gap-4 pt-4" >
198+ < button
199+ type = "submit"
200+ disabled = { isSubmitting }
201+ className = "btn bg-primary-60 text-neutral-0 hover:bg-primary-50 border border-primary-50"
202+ >
203+ { isSubmitting ? "Updating..." : "Update Information" }
204+ </ button >
205+ < button
206+ type = "button"
207+ onClick = { handleClose }
208+ className = "btn bg-neutral-90 border border-neutral-70 text-neutral-0 hover:text-primary-40"
209+ >
210+ Cancel
211+ </ button >
212+ </ div >
213+ </ form >
214+ </ div >
215+ </ div >
216+ ) ;
217+ }
0 commit comments