@codesinger0/shared-components 1.1.14 → 1.1.15
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.
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { motion } from 'framer-motion';
|
|
3
|
+
import { MessageCircle } from 'lucide-react';
|
|
4
|
+
|
|
5
|
+
const FloatingWhatsAppButton = ({
|
|
6
|
+
phoneNumber,
|
|
7
|
+
message = 'שלום, אשמח לקבל מידע נוסף',
|
|
8
|
+
position = 'bottom-left', // 'bottom-left' or 'bottom-right'
|
|
9
|
+
bottomOffset = '1.5rem', // distance from bottom
|
|
10
|
+
sideOffset = '1.5rem', // distance from left/right edge
|
|
11
|
+
size = 'large', // 'small', 'medium', 'large'
|
|
12
|
+
className = '',
|
|
13
|
+
onBeforeOpen = null, // callback before opening WhatsApp
|
|
14
|
+
...props
|
|
15
|
+
}) => {
|
|
16
|
+
// Size configurations
|
|
17
|
+
const sizeClasses = {
|
|
18
|
+
small: 'w-12 h-12',
|
|
19
|
+
medium: 'w-14 h-14',
|
|
20
|
+
large: 'w-16 h-16'
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
const iconSizes = {
|
|
24
|
+
small: 20,
|
|
25
|
+
medium: 24,
|
|
26
|
+
large: 28
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
// Position styles
|
|
30
|
+
const positionStyles = {
|
|
31
|
+
'bottom-left': {
|
|
32
|
+
bottom: bottomOffset,
|
|
33
|
+
left: sideOffset,
|
|
34
|
+
right: 'auto'
|
|
35
|
+
},
|
|
36
|
+
'bottom-right': {
|
|
37
|
+
bottom: bottomOffset,
|
|
38
|
+
right: sideOffset,
|
|
39
|
+
left: 'auto'
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
const openWhatsApp = () => {
|
|
44
|
+
// Call the callback if provided (e.g., for analytics)
|
|
45
|
+
if (onBeforeOpen) {
|
|
46
|
+
onBeforeOpen();
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
// Format phone number (remove any non-digits, ensure international format)
|
|
50
|
+
const cleanPhone = phoneNumber.replace(/\D/g, '');
|
|
51
|
+
const encodedMessage = encodeURIComponent(message);
|
|
52
|
+
|
|
53
|
+
// Open WhatsApp in new tab
|
|
54
|
+
window.open(
|
|
55
|
+
`https://wa.me/${cleanPhone}?text=${encodedMessage}`,
|
|
56
|
+
'_blank'
|
|
57
|
+
);
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
return (
|
|
61
|
+
<motion.button
|
|
62
|
+
onClick={openWhatsApp}
|
|
63
|
+
className={`fixed z-50 bg-green-500 hover:bg-green-600 text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center ${sizeClasses[size]} ${className}`}
|
|
64
|
+
style={positionStyles[position]}
|
|
65
|
+
initial={{ scale: 0, opacity: 0 }}
|
|
66
|
+
animate={{ scale: 1, opacity: 1 }}
|
|
67
|
+
whileHover={{ scale: 1.1 }}
|
|
68
|
+
whileTap={{ scale: 0.9 }}
|
|
69
|
+
transition={{
|
|
70
|
+
type: "spring",
|
|
71
|
+
stiffness: 300,
|
|
72
|
+
damping: 25
|
|
73
|
+
}}
|
|
74
|
+
aria-label="פתח WhatsApp"
|
|
75
|
+
{...props}
|
|
76
|
+
>
|
|
77
|
+
<MessageCircle size={iconSizes[size]} />
|
|
78
|
+
</motion.button>
|
|
79
|
+
);
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
// Demo Component
|
|
83
|
+
const Demo = () => {
|
|
84
|
+
const handleBeforeOpen = () => {
|
|
85
|
+
console.log('WhatsApp button clicked - you can add analytics here');
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
return (
|
|
89
|
+
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-8" dir="rtl">
|
|
90
|
+
<div className="max-w-4xl mx-auto">
|
|
91
|
+
<h1 className="text-4xl font-bold text-gray-800 mb-6 text-center">
|
|
92
|
+
WhatsApp Floating Button Demo
|
|
93
|
+
</h1>
|
|
94
|
+
|
|
95
|
+
<div className="bg-white rounded-xl shadow-lg p-8 mb-8">
|
|
96
|
+
<h2 className="text-2xl font-semibold mb-4">תכונות:</h2>
|
|
97
|
+
<ul className="space-y-2 text-gray-700">
|
|
98
|
+
<li>✅ מיקום גמיש (שמאל/ימין למטה)</li>
|
|
99
|
+
<li>✅ שליטה מלאה על המרחקים מהקצוות</li>
|
|
100
|
+
<li>✅ 3 גדלים: small, medium, large</li>
|
|
101
|
+
<li>✅ הודעה מותאמת אישית</li>
|
|
102
|
+
<li>✅ Callback לפני פתיחה (לאנליטיקס)</li>
|
|
103
|
+
<li>✅ אנימציות חלקות עם Framer Motion</li>
|
|
104
|
+
</ul>
|
|
105
|
+
</div>
|
|
106
|
+
|
|
107
|
+
<div className="bg-white rounded-xl shadow-lg p-8">
|
|
108
|
+
<h2 className="text-2xl font-semibold mb-4">דוגמאות שימוש:</h2>
|
|
109
|
+
|
|
110
|
+
<div className="space-y-4 text-sm bg-gray-50 p-4 rounded-lg font-mono text-left" dir="ltr">
|
|
111
|
+
<div className="bg-white p-3 rounded border">
|
|
112
|
+
<div className="text-gray-500 mb-2">// Bottom Left (default)</div>
|
|
113
|
+
<code className="text-blue-600">
|
|
114
|
+
{`<FloatingWhatsAppButton
|
|
115
|
+
phoneNumber="972542397230"
|
|
116
|
+
message="שלום, אני מעוניין לקבוע פגישה"
|
|
117
|
+
position="bottom-left"
|
|
118
|
+
/>`}
|
|
119
|
+
</code>
|
|
120
|
+
</div>
|
|
121
|
+
|
|
122
|
+
<div className="bg-white p-3 rounded border">
|
|
123
|
+
<div className="text-gray-500 mb-2">// Bottom Right with custom offsets</div>
|
|
124
|
+
<code className="text-blue-600">
|
|
125
|
+
{`<FloatingWhatsAppButton
|
|
126
|
+
phoneNumber="972542397230"
|
|
127
|
+
position="bottom-right"
|
|
128
|
+
bottomOffset="2rem"
|
|
129
|
+
sideOffset="2rem"
|
|
130
|
+
size="medium"
|
|
131
|
+
/>`}
|
|
132
|
+
</code>
|
|
133
|
+
</div>
|
|
134
|
+
|
|
135
|
+
<div className="bg-white p-3 rounded border">
|
|
136
|
+
<div className="text-gray-500 mb-2">// With analytics callback</div>
|
|
137
|
+
<code className="text-blue-600">
|
|
138
|
+
{`<FloatingWhatsAppButton
|
|
139
|
+
phoneNumber="972542397230"
|
|
140
|
+
onBeforeOpen={() => {
|
|
141
|
+
// Send analytics event
|
|
142
|
+
sendAdsConversion({...});
|
|
143
|
+
}}
|
|
144
|
+
/>`}
|
|
145
|
+
</code>
|
|
146
|
+
</div>
|
|
147
|
+
</div>
|
|
148
|
+
</div>
|
|
149
|
+
|
|
150
|
+
<div className="mt-8 text-center text-gray-600">
|
|
151
|
+
<p>גלול למטה כדי לראות את הכפתור בפעולה! 👇</p>
|
|
152
|
+
<div className="mt-4 h-96"></div>
|
|
153
|
+
</div>
|
|
154
|
+
</div>
|
|
155
|
+
|
|
156
|
+
{/* Demo Buttons */}
|
|
157
|
+
<FloatingWhatsAppButton
|
|
158
|
+
phoneNumber="972542397230"
|
|
159
|
+
message="שלום, אני מעוניין לקבוע פגישה לטיפול פסיכולוגי"
|
|
160
|
+
position="bottom-left"
|
|
161
|
+
bottomOffset="1.5rem"
|
|
162
|
+
sideOffset="1.5rem"
|
|
163
|
+
size="large"
|
|
164
|
+
onBeforeOpen={handleBeforeOpen}
|
|
165
|
+
/>
|
|
166
|
+
|
|
167
|
+
<FloatingWhatsAppButton
|
|
168
|
+
phoneNumber="972542397230"
|
|
169
|
+
message="היי! רציתי לשאול משהו"
|
|
170
|
+
position="bottom-right"
|
|
171
|
+
bottomOffset="1.5rem"
|
|
172
|
+
sideOffset="1.5rem"
|
|
173
|
+
size="medium"
|
|
174
|
+
onBeforeOpen={handleBeforeOpen}
|
|
175
|
+
/>
|
|
176
|
+
</div>
|
|
177
|
+
);
|
|
178
|
+
};
|
|
179
|
+
|
|
180
|
+
export default FloatingWhatsAppButton;
|
package/dist/index.js
CHANGED
|
@@ -17,6 +17,7 @@ export { default as ProductsDisplay } from './components/products/ProductsDispla
|
|
|
17
17
|
export { default as ProductsSidebar } from './components/products/ProductsSidebar'
|
|
18
18
|
export { default as MyOrdersDisplay } from './components/MyOrdersDisplay'
|
|
19
19
|
export { default as AccessibilityMenu } from './components/AccessibilityMenu'
|
|
20
|
+
export { default as FloatingWhatsAppButton } from './components/FloatingWhatsAppButton'
|
|
20
21
|
|
|
21
22
|
// Modals
|
|
22
23
|
export { default as ItemDetailsModal } from './components/modals/ItemDetailsModal'
|