1
- import { useEffect , useState } from ' react'
2
- import { useForm } from ' react-hook-form'
3
- import { toast } from ' react-hot-toast'
4
- import CountryCode from ' ../../data/countrycode.json'
5
- import { apiConnector } from ' ../../services/apiconnector'
6
- import { contactusEndpoint } from ' ../../services/apis'
1
+ import { useEffect , useState } from " react"
2
+ import { useForm } from " react-hook-form"
3
+ import { toast } from " react-hot-toast"
4
+ import CountryCode from " ../../data/countrycode.json"
5
+ import { apiConnector } from " ../../services/apiconnector"
6
+ import { contactusEndpoint } from " ../../services/apis"
7
7
8
8
const ContactUsForm = ( ) => {
9
9
const [ loading , setLoading ] = useState ( false )
@@ -15,26 +15,26 @@ const ContactUsForm = () => {
15
15
} = useForm ( ) // useform is used to collect data of input box in object form (read from internet)
16
16
17
17
const submitContactForm = async ( data ) => {
18
- const toastId = toast . loading ( ' Loading...' )
18
+ const toastId = toast . loading ( " Loading..." )
19
19
try {
20
20
setLoading ( true )
21
- await apiConnector ( ' POST' , contactusEndpoint . CONTACT_US_API , data )
22
- toast . success ( ' We got you data' )
21
+ await apiConnector ( " POST" , contactusEndpoint . CONTACT_US_API , data )
22
+ toast . success ( " We got you data" )
23
23
setLoading ( false )
24
24
} catch ( error ) {
25
- console . log ( ' ERROR MESSAGE - ' , error . message )
25
+ console . log ( " ERROR MESSAGE - " , error . message )
26
26
}
27
27
toast . dismiss ( toastId )
28
28
}
29
29
30
30
useEffect ( ( ) => {
31
31
if ( isSubmitSuccessful ) {
32
32
reset ( {
33
- email : '' ,
34
- firstname : '' ,
35
- lastname : '' ,
36
- message : '' ,
37
- phoneNo : '' ,
33
+ email : "" ,
34
+ firstname : "" ,
35
+ lastname : "" ,
36
+ message : "" ,
37
+ phoneNo : "" ,
38
38
} )
39
39
}
40
40
} , [ reset , isSubmitSuccessful ] )
@@ -47,7 +47,7 @@ const ContactUsForm = () => {
47
47
< div className = "flex flex-col gap-5 lg:flex-row" >
48
48
< div className = "flex flex-col gap-2 lg:w-[48%]" >
49
49
< label htmlFor = "firstname" className = "lable-style" >
50
- { ' ' }
50
+ { " " }
51
51
First Name < sup className = "text-pink-200" > *</ sup >
52
52
</ label >
53
53
< input
@@ -56,19 +56,19 @@ const ContactUsForm = () => {
56
56
id = "firstname"
57
57
placeholder = "Enter first name"
58
58
className = "form-style"
59
- { ...register ( ' firstname' , { required : true } ) }
59
+ { ...register ( " firstname" , { required : true } ) }
60
60
/>
61
61
{ errors . firstname && (
62
62
< span className = "-mt-1 text-[12px] text-yellow-100" >
63
- { ' ' }
64
- Please enter your name.{ ' ' }
63
+ { " " }
64
+ Please enter your name.{ " " }
65
65
</ span >
66
66
) }
67
67
</ div >
68
68
69
69
< div className = "flex flex-col gap-2 lg:w-[48%]" >
70
70
< label htmlFor = "lastname" className = "lable-style" >
71
- { ' ' }
71
+ { " " }
72
72
Last Name
73
73
</ label >
74
74
< input
@@ -77,14 +77,14 @@ const ContactUsForm = () => {
77
77
id = "lastname"
78
78
placeholder = "Enter last name"
79
79
className = "form-style"
80
- { ...register ( ' lastname' ) }
80
+ { ...register ( " lastname" ) }
81
81
/>
82
82
</ div >
83
83
</ div >
84
84
85
85
< div className = "flex flex-col gap-2" >
86
86
< label htmlFor = "email" className = "lable-style" >
87
- { ' ' }
87
+ { " " }
88
88
Email Address < sup className = "text-pink-200" > *</ sup >
89
89
</ label >
90
90
< input
@@ -93,19 +93,19 @@ const ContactUsForm = () => {
93
93
id = "email"
94
94
placeholder = "Enter email address"
95
95
className = "form-style"
96
- { ...register ( ' email' , { required : true } ) }
96
+ { ...register ( " email" , { required : true } ) }
97
97
/>
98
98
{ errors . email && (
99
99
< span className = "-mt-1 text-[12px] text-yellow-100" >
100
- { ' ' }
101
- Please enter your Email address.{ ' ' }
100
+ { " " }
101
+ Please enter your Email address.{ " " }
102
102
</ span >
103
103
) }
104
104
</ div >
105
105
106
106
< div className = "flex flex-col gap-2" >
107
107
< label htmlFor = "phonenumber" className = "lable-style" >
108
- { ' ' }
108
+ { " " }
109
109
Phone Number < sup className = "text-pink-200" > *</ sup >
110
110
</ label >
111
111
@@ -117,13 +117,13 @@ const ContactUsForm = () => {
117
117
id = "firstname"
118
118
placeholder = "Enter first name"
119
119
className = "form-style"
120
- { ...register ( ' countrycode' , { required : true } ) }
120
+ { ...register ( " countrycode" , { required : true } ) }
121
121
>
122
122
{ CountryCode . map ( ( ele , i ) => {
123
123
return (
124
124
< option key = { i } value = { ele . code } >
125
- { ' ' }
126
- { ele . code } - { ele . country } { ' ' }
125
+ { " " }
126
+ { ele . code } - { ele . country } { " " }
127
127
</ option >
128
128
)
129
129
} ) }
@@ -137,29 +137,29 @@ const ContactUsForm = () => {
137
137
id = "phonenumber"
138
138
placeholder = "12345 67890"
139
139
className = "form-style"
140
- { ...register ( ' phoneNo' , {
140
+ { ...register ( " phoneNo" , {
141
141
required : {
142
142
value : true ,
143
- message : ' Please enter your Phone Number.' ,
143
+ message : " Please enter your Phone Number." ,
144
144
} ,
145
- maxLength : { value : 12 , message : ' Invalid Phone Number' } ,
146
- minLength : { value : 10 , message : ' Invalid Phone Number' } ,
145
+ maxLength : { value : 12 , message : " Invalid Phone Number" } ,
146
+ minLength : { value : 10 , message : " Invalid Phone Number" } ,
147
147
} ) }
148
148
/>
149
149
</ div >
150
150
</ div >
151
151
152
152
{ errors . phoneNo && (
153
153
< span className = "-mt-1 text-[12px] text-yellow-100" >
154
- { ' ' }
155
- { errors . phoneNo . message } { ' ' }
154
+ { " " }
155
+ { errors . phoneNo . message } { " " }
156
156
</ span >
157
157
) }
158
158
</ div >
159
159
160
160
< div className = "flex flex-col gap-2" >
161
161
< label htmlFor = "message" className = "lable-style" >
162
- { ' ' }
162
+ { " " }
163
163
Message < sup className = "text-pink-200" > *</ sup >
164
164
</ label >
165
165
< textarea
@@ -169,12 +169,12 @@ const ContactUsForm = () => {
169
169
rows = "7"
170
170
placeholder = "Enter your message here"
171
171
className = "form-style"
172
- { ...register ( ' message' , { required : true } ) }
172
+ { ...register ( " message" , { required : true } ) }
173
173
/>
174
174
{ errors . message && (
175
175
< span className = "-mt-1 text-[12px] text-yellow-100" >
176
- { ' ' }
177
- Please enter your Message.{ ' ' }
176
+ { " " }
177
+ Please enter your Message.{ " " }
178
178
</ span >
179
179
) }
180
180
</ div >
@@ -184,7 +184,7 @@ const ContactUsForm = () => {
184
184
type = "submit"
185
185
className = { `rounded-md bg-yellow-50 px-6 py-3 text-center text-[13px] font-bold text-black shadow-[2px_2px_0px_0px_rgba(255,255,255,0.18)]
186
186
${ ! loading &&
187
- ' transition-all duration-200 hover:scale-95 hover:shadow-none'
187
+ " transition-all duration-200 hover:scale-95 hover:shadow-none"
188
188
} disabled:bg-richblack-500 sm:text-[16px] `}
189
189
>
190
190
Send Message
0 commit comments