@codesinger0/shared-components 1.0.51 → 1.0.53
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ContactUs.jsx +333 -0
- package/package.json +1 -1
|
@@ -0,0 +1,333 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
|
|
3
|
+
const ContactUs = ({
|
|
4
|
+
title = "צרו קשר",
|
|
5
|
+
subtitle = "נשמח לשמוע מכם ולענות על כל שאלה",
|
|
6
|
+
agreeToTermsText = `אני מסכים/ה לתנאי השימוש ומדיניות הפרטיות של האתר,
|
|
7
|
+
ומאשר/ת קבלת עדכונים שיווקיים באימייל
|
|
8
|
+
(ניתן לבטל בכל עת).`,
|
|
9
|
+
submitContactMessage = () => { },
|
|
10
|
+
businessInfo = {},
|
|
11
|
+
className = ""
|
|
12
|
+
}) => {
|
|
13
|
+
const [formData, setFormData] = useState({
|
|
14
|
+
name: '',
|
|
15
|
+
phone: '',
|
|
16
|
+
email: '',
|
|
17
|
+
message: '',
|
|
18
|
+
agreeToTerms: false
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
const [errors, setErrors] = useState({});
|
|
22
|
+
const [loading, setLoading] = useState(false);
|
|
23
|
+
const [submitted, setSubmitted] = useState(false);
|
|
24
|
+
const { submitContactMessage } = useContactMessage();
|
|
25
|
+
|
|
26
|
+
// Handle input changes
|
|
27
|
+
const handleInputChange = (e) => {
|
|
28
|
+
const { name, value, type, checked } = e.target;
|
|
29
|
+
setFormData(prev => ({
|
|
30
|
+
...prev,
|
|
31
|
+
[name]: type === 'checkbox' ? checked : value
|
|
32
|
+
}));
|
|
33
|
+
|
|
34
|
+
// Clear error for this field when user starts typing
|
|
35
|
+
if (errors[name]) {
|
|
36
|
+
setErrors(prev => ({ ...prev, [name]: '' }));
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
// Validation functions
|
|
41
|
+
const validateEmail = (email) => {
|
|
42
|
+
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
43
|
+
return emailRegex.test(email);
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
const validatePhone = (phone) => {
|
|
47
|
+
const phoneRegex = /^[0-9\-\+\(\)\s]{10,}$/;
|
|
48
|
+
return phoneRegex.test(phone.replace(/\s/g, ''));
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
// Form validation
|
|
52
|
+
const validateForm = () => {
|
|
53
|
+
const newErrors = {};
|
|
54
|
+
|
|
55
|
+
if (!formData.name.trim()) {
|
|
56
|
+
newErrors.name = 'שם מלא הוא שדה חובה';
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
if (!formData.phone.trim()) {
|
|
60
|
+
newErrors.phone = 'מספר טלפון הוא שדה חובה';
|
|
61
|
+
} else if (!validatePhone(formData.phone)) {
|
|
62
|
+
newErrors.phone = 'מספר טלפון לא תקין';
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
if (!formData.email.trim()) {
|
|
66
|
+
newErrors.email = 'כתובת אימייל היא שדה חובה';
|
|
67
|
+
} else if (!validateEmail(formData.email)) {
|
|
68
|
+
newErrors.email = 'כתובת אימייל לא תקינה';
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
if (formData.message && formData.message.trim().length > 500) {
|
|
72
|
+
newErrors.message = 'ההודעה לא יכולה להיות ארוכה מ-500 תווים';
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
if (!formData.agreeToTerms) {
|
|
76
|
+
newErrors.agreeToTerms = 'יש לאשר את תנאי השימוש והפרטיות';
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
setErrors(newErrors);
|
|
80
|
+
return Object.keys(newErrors).length === 0;
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
const handleSubmit = async () => {
|
|
84
|
+
if (!validateForm()) {
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
setLoading(true);
|
|
89
|
+
|
|
90
|
+
try {
|
|
91
|
+
const result = await submitContactMessage({
|
|
92
|
+
name: formData.name,
|
|
93
|
+
email: formData.email,
|
|
94
|
+
phone: formData.phone,
|
|
95
|
+
message: formData.message || `צרו קשר מהאתר - שם: ${formData.name}, טלפון: ${formData.phone}, אימייל: ${formData.email}. ${formData.agreeToTerms ? 'הסכים לתנאי השימוש.' : ''}`
|
|
96
|
+
});
|
|
97
|
+
|
|
98
|
+
if (result) {
|
|
99
|
+
console.log('Contact message submitted successfully:', result);
|
|
100
|
+
setSubmitted(true);
|
|
101
|
+
// Reset form
|
|
102
|
+
setFormData({
|
|
103
|
+
name: '',
|
|
104
|
+
phone: '',
|
|
105
|
+
email: '',
|
|
106
|
+
message: '',
|
|
107
|
+
agreeToTerms: false
|
|
108
|
+
});
|
|
109
|
+
} else {
|
|
110
|
+
setErrors({ submit: 'אירעה שגיאה בשליחת הטופס. אנא נסו שוב.' });
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
} catch (error) {
|
|
114
|
+
console.error('Submission error:', error);
|
|
115
|
+
setErrors({ submit: 'אירעה שגיאה בשליחת הטופס. אנא נסו שוב.' });
|
|
116
|
+
} finally {
|
|
117
|
+
setLoading(false);
|
|
118
|
+
}
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
// Success message component
|
|
123
|
+
if (submitted) {
|
|
124
|
+
return (
|
|
125
|
+
<section className={`py-16 px-4 bg-main ${className}`} dir="rtl">
|
|
126
|
+
<div className="max-w-4xl mx-auto">
|
|
127
|
+
<div className="glass-card p-8 text-center">
|
|
128
|
+
<h3 className="title mb-4">תודה רבה!</h3>
|
|
129
|
+
<p className="subtitle mb-6">
|
|
130
|
+
הטופס נשלח בהצלחה. נחזור אליכם בהקדם האפשרי.
|
|
131
|
+
</p>
|
|
132
|
+
<button
|
|
133
|
+
onClick={() => setSubmitted(false)}
|
|
134
|
+
className="btn-secondary"
|
|
135
|
+
>
|
|
136
|
+
שלח הודעה נוספת
|
|
137
|
+
</button>
|
|
138
|
+
</div>
|
|
139
|
+
</div>
|
|
140
|
+
</section>
|
|
141
|
+
);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
return (
|
|
145
|
+
<section className={`py-16 px-4 bg-main ${className}`} dir="rtl">
|
|
146
|
+
<div className="max-w-4xl mx-auto">
|
|
147
|
+
{/* Header */}
|
|
148
|
+
<div className="text-center mb-12">
|
|
149
|
+
<h2 className="title mb-4">{title}</h2>
|
|
150
|
+
<p className="subtitle text-gray-600">{subtitle}</p>
|
|
151
|
+
</div>
|
|
152
|
+
|
|
153
|
+
{/* Contact Form */}
|
|
154
|
+
<div className="glass-card p-8">
|
|
155
|
+
<div className="space-y-4">
|
|
156
|
+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
157
|
+
{/* Name Field */}
|
|
158
|
+
<div>
|
|
159
|
+
<label htmlFor="name" className="block subtitle font-semibold mb-2">
|
|
160
|
+
שם מלא *
|
|
161
|
+
</label>
|
|
162
|
+
<input
|
|
163
|
+
type="text"
|
|
164
|
+
id="name"
|
|
165
|
+
name="name"
|
|
166
|
+
value={formData.name}
|
|
167
|
+
onChange={handleInputChange}
|
|
168
|
+
className={`w-full p-4 rounded-lg border-2 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-20 ${errors.name
|
|
169
|
+
? 'border-red-500 bg-red-50'
|
|
170
|
+
: 'border-gray-300 hover:border-gray-400 focus:border-primary'
|
|
171
|
+
}`}
|
|
172
|
+
placeholder="הכניסו את שמכם המלא"
|
|
173
|
+
dir="rtl"
|
|
174
|
+
/>
|
|
175
|
+
{errors.name && (
|
|
176
|
+
<p className="text-red-500 text-sm mt-2">{errors.name}</p>
|
|
177
|
+
)}
|
|
178
|
+
</div>
|
|
179
|
+
|
|
180
|
+
{/* Phone Field */}
|
|
181
|
+
<div>
|
|
182
|
+
<label htmlFor="phone" className="block subtitle font-semibold mb-2">
|
|
183
|
+
מספר טלפון *
|
|
184
|
+
</label>
|
|
185
|
+
<input
|
|
186
|
+
type="tel"
|
|
187
|
+
id="phone"
|
|
188
|
+
name="phone"
|
|
189
|
+
value={formData.phone}
|
|
190
|
+
onChange={handleInputChange}
|
|
191
|
+
className={`w-full p-4 rounded-lg border-2 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-20 ${errors.phone
|
|
192
|
+
? 'border-red-500 bg-red-50'
|
|
193
|
+
: 'border-gray-300 hover:border-gray-400 focus:border-primary'
|
|
194
|
+
}`}
|
|
195
|
+
placeholder="050-1234567"
|
|
196
|
+
dir="ltr"
|
|
197
|
+
/>
|
|
198
|
+
{errors.phone && (
|
|
199
|
+
<p className="text-red-500 text-sm mt-2">{errors.phone}</p>
|
|
200
|
+
)}
|
|
201
|
+
</div>
|
|
202
|
+
</div>
|
|
203
|
+
|
|
204
|
+
{/* Email Field */}
|
|
205
|
+
<div>
|
|
206
|
+
<label htmlFor="email" className="block subtitle font-semibold mb-2">
|
|
207
|
+
כתובת אימייל *
|
|
208
|
+
</label>
|
|
209
|
+
<input
|
|
210
|
+
type="email"
|
|
211
|
+
id="email"
|
|
212
|
+
name="email"
|
|
213
|
+
value={formData.email}
|
|
214
|
+
onChange={handleInputChange}
|
|
215
|
+
className={`w-full p-4 rounded-lg border-2 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-20 ${errors.email
|
|
216
|
+
? 'border-red-500 bg-red-50'
|
|
217
|
+
: 'border-gray-300 hover:border-gray-400 focus:border-primary'
|
|
218
|
+
}`}
|
|
219
|
+
placeholder="example@email.com"
|
|
220
|
+
dir="ltr"
|
|
221
|
+
/>
|
|
222
|
+
{errors.email && (
|
|
223
|
+
<p className="text-red-500 text-sm mt-2">{errors.email}</p>
|
|
224
|
+
)}
|
|
225
|
+
</div>
|
|
226
|
+
|
|
227
|
+
{/* Message Field */}
|
|
228
|
+
<div>
|
|
229
|
+
<label htmlFor="message" className="block subtitle font-semibold mb-2">
|
|
230
|
+
הודעה (אופציונלי)
|
|
231
|
+
</label>
|
|
232
|
+
<textarea
|
|
233
|
+
id="message"
|
|
234
|
+
name="message"
|
|
235
|
+
value={formData.message}
|
|
236
|
+
onChange={handleInputChange}
|
|
237
|
+
rows={4}
|
|
238
|
+
maxLength={500}
|
|
239
|
+
className={`w-full p-4 rounded-lg border-2 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-20 resize-vertical ${errors.message
|
|
240
|
+
? 'border-red-500 bg-red-50'
|
|
241
|
+
: 'border-gray-300 hover:border-gray-400 focus:border-primary'
|
|
242
|
+
}`}
|
|
243
|
+
placeholder="ספרו לנו מה אתם מחפשים, איך אנחנו יכולים לעזור לכם, או כל דבר אחר שתרצו לשתף איתנו..."
|
|
244
|
+
dir="rtl"
|
|
245
|
+
/>
|
|
246
|
+
<div className="flex justify-between items-center mt-1">
|
|
247
|
+
{errors.message && (
|
|
248
|
+
<p className="text-red-500 text-sm">{errors.message}</p>
|
|
249
|
+
)}
|
|
250
|
+
<span className="text-xs text-gray-500 mr-auto">
|
|
251
|
+
{formData.message.length}/500 תווים
|
|
252
|
+
</span>
|
|
253
|
+
</div>
|
|
254
|
+
</div>
|
|
255
|
+
|
|
256
|
+
|
|
257
|
+
{/* Checkbox Agreement */}
|
|
258
|
+
<div className="px-4 rounded-lg">
|
|
259
|
+
<label className="flex items-start space-x-3 space-x-reverse cursor-pointer">
|
|
260
|
+
<input
|
|
261
|
+
type="checkbox"
|
|
262
|
+
name="agreeToTerms"
|
|
263
|
+
checked={formData.agreeToTerms}
|
|
264
|
+
onChange={handleInputChange}
|
|
265
|
+
className="mt-1 w-5 h-5 text-primary border-2 border-gray-300 rounded focus:ring-primary focus:ring-2 focus:ring-opacity-20"
|
|
266
|
+
/>
|
|
267
|
+
<div className="flex-1">
|
|
268
|
+
<span className="content-text leading-relaxed">
|
|
269
|
+
{agreeToTermsText}
|
|
270
|
+
</span>
|
|
271
|
+
</div>
|
|
272
|
+
</label>
|
|
273
|
+
{errors.agreeToTerms && (
|
|
274
|
+
<p className="text-red-500 text-sm mt-2">{errors.agreeToTerms}</p>
|
|
275
|
+
)}
|
|
276
|
+
</div>
|
|
277
|
+
|
|
278
|
+
{/* Submit Error */}
|
|
279
|
+
{errors.submit && (
|
|
280
|
+
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
|
|
281
|
+
{errors.submit}
|
|
282
|
+
</div>
|
|
283
|
+
)}
|
|
284
|
+
|
|
285
|
+
{/* Submit Button */}
|
|
286
|
+
<div className="text-center pt-4">
|
|
287
|
+
<button
|
|
288
|
+
onClick={handleSubmit}
|
|
289
|
+
disabled={loading}
|
|
290
|
+
className={`btn-primary text-lg px-8 py-4 inline-flex items-center gap-3 transition-all duration-200 ${loading
|
|
291
|
+
? 'opacity-50 cursor-not-allowed'
|
|
292
|
+
: 'hover:brightness-90 hover:scale-105'
|
|
293
|
+
}`}
|
|
294
|
+
>
|
|
295
|
+
{loading ? (
|
|
296
|
+
<>
|
|
297
|
+
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
|
|
298
|
+
שולח...
|
|
299
|
+
</>
|
|
300
|
+
) : (
|
|
301
|
+
<>
|
|
302
|
+
שלח הודעה
|
|
303
|
+
<span className="text-xl">→</span>
|
|
304
|
+
</>
|
|
305
|
+
)}
|
|
306
|
+
</button>
|
|
307
|
+
</div>
|
|
308
|
+
</div>
|
|
309
|
+
|
|
310
|
+
{/* Contact Info */}
|
|
311
|
+
<div className="mt-12 pt-8 border-t border-gray-200">
|
|
312
|
+
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
|
|
313
|
+
<div>
|
|
314
|
+
<h4 className="subtitle font-semibold mb-1">טלפון</h4>
|
|
315
|
+
<p className="content-text">{businessInfo.phone}</p>
|
|
316
|
+
</div>
|
|
317
|
+
<div>
|
|
318
|
+
<h4 className="subtitle font-semibold mb-1">אימייל</h4>
|
|
319
|
+
<p className="content-text">{businessInfo.email}</p>
|
|
320
|
+
</div>
|
|
321
|
+
<div>
|
|
322
|
+
<h4 className="subtitle font-semibold mb-1">שעות פעילות</h4>
|
|
323
|
+
<p className="content-text">{businessInfo.hours}</p>
|
|
324
|
+
</div>
|
|
325
|
+
</div>
|
|
326
|
+
</div>
|
|
327
|
+
</div>
|
|
328
|
+
</div>
|
|
329
|
+
</section>
|
|
330
|
+
);
|
|
331
|
+
};
|
|
332
|
+
|
|
333
|
+
export default ContactUs;
|