umwd-components 0.1.70 → 0.1.72
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/cjs/components/ContactForm.js +27 -12
- package/dist/cjs/components/WhatsAppClickToChatButton.js +78 -0
- package/dist/cjs/index.js +2 -0
- package/dist/esm/components/ContactForm.js +27 -12
- package/dist/esm/components/WhatsAppClickToChatButton.js +74 -0
- package/dist/esm/index.js +1 -0
- package/package.json +2 -1
- package/src/components/ContactForm.tsx +49 -19
- package/src/components/WhatsAppClickToChatButton.tsx +74 -0
- package/src/index.js +1 -0
- package/src/stories/WhatsAppClickToChatButton.stories.js +69 -0
|
@@ -18,8 +18,6 @@ function ContactForm(_ref) {
|
|
|
18
18
|
data
|
|
19
19
|
} = _ref;
|
|
20
20
|
const {
|
|
21
|
-
id,
|
|
22
|
-
title,
|
|
23
21
|
maxWidth = "lg"
|
|
24
22
|
} = data;
|
|
25
23
|
const [formValues, setFormValues] = React.useState({
|
|
@@ -30,11 +28,24 @@ function ContactForm(_ref) {
|
|
|
30
28
|
});
|
|
31
29
|
const [formErrors, setFormErrors] = React.useState({});
|
|
32
30
|
const handleBlur = e => {
|
|
31
|
+
const {
|
|
32
|
+
id
|
|
33
|
+
} = e.target;
|
|
33
34
|
const errors = validate(formValues);
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
35
|
+
if (errors[id]) {
|
|
36
|
+
setFormErrors(prevErrors => ({
|
|
37
|
+
...prevErrors,
|
|
38
|
+
[id]: errors[id]
|
|
39
|
+
}));
|
|
40
|
+
} else {
|
|
41
|
+
setFormErrors(prevErrors => {
|
|
42
|
+
const updatedErrors = {
|
|
43
|
+
...prevErrors
|
|
44
|
+
};
|
|
45
|
+
delete updatedErrors[id];
|
|
46
|
+
return updatedErrors;
|
|
47
|
+
});
|
|
48
|
+
}
|
|
38
49
|
};
|
|
39
50
|
const handleChange = e => {
|
|
40
51
|
const {
|
|
@@ -45,10 +56,14 @@ function ContactForm(_ref) {
|
|
|
45
56
|
...formValues,
|
|
46
57
|
[id]: value
|
|
47
58
|
});
|
|
48
|
-
console.log("formValues", formValues);
|
|
49
59
|
};
|
|
50
60
|
const handleClear = () => {
|
|
51
|
-
setFormValues({
|
|
61
|
+
setFormValues({
|
|
62
|
+
name: "",
|
|
63
|
+
email: "",
|
|
64
|
+
subject: "",
|
|
65
|
+
message: ""
|
|
66
|
+
});
|
|
52
67
|
};
|
|
53
68
|
const handleSendCallback = () => {
|
|
54
69
|
console.log("Send callback");
|
|
@@ -74,7 +89,7 @@ function ContactForm(_ref) {
|
|
|
74
89
|
return errors;
|
|
75
90
|
};
|
|
76
91
|
return /*#__PURE__*/React.createElement(material.Container, {
|
|
77
|
-
maxWidth: maxWidth,
|
|
92
|
+
maxWidth: maxWidth || "lg",
|
|
78
93
|
sx: {
|
|
79
94
|
my: 1
|
|
80
95
|
}
|
|
@@ -95,8 +110,8 @@ function ContactForm(_ref) {
|
|
|
95
110
|
label: "Name",
|
|
96
111
|
value: formValues.name,
|
|
97
112
|
variant: "outlined",
|
|
98
|
-
onBlur:
|
|
99
|
-
onChange:
|
|
113
|
+
onBlur: handleBlur,
|
|
114
|
+
onChange: handleChange,
|
|
100
115
|
error: formErrors.name != undefined ? true : false,
|
|
101
116
|
helperText: formErrors.name
|
|
102
117
|
}), /*#__PURE__*/React.createElement(material.TextField, {
|
|
@@ -135,7 +150,7 @@ function ContactForm(_ref) {
|
|
|
135
150
|
}, /*#__PURE__*/React.createElement(material.Button, {
|
|
136
151
|
variant: "outlined",
|
|
137
152
|
color: "primary",
|
|
138
|
-
onClick:
|
|
153
|
+
onClick: handleClear
|
|
139
154
|
}, "Clear"), /*#__PURE__*/React.createElement(material.Button, {
|
|
140
155
|
variant: "contained",
|
|
141
156
|
color: "primary",
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
/*
|
|
3
|
+
* UMWD-Components
|
|
4
|
+
* @copyright Jelle Paulus
|
|
5
|
+
* @license MIT
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
'use strict';
|
|
9
|
+
|
|
10
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
|
+
|
|
12
|
+
var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
|
|
13
|
+
var React = require('react');
|
|
14
|
+
var material = require('@mui/material');
|
|
15
|
+
|
|
16
|
+
function WhatsAppClickToChatButton(_ref) {
|
|
17
|
+
let {
|
|
18
|
+
data
|
|
19
|
+
} = _ref;
|
|
20
|
+
const {
|
|
21
|
+
phoneNumber,
|
|
22
|
+
text,
|
|
23
|
+
message,
|
|
24
|
+
color,
|
|
25
|
+
round,
|
|
26
|
+
sx
|
|
27
|
+
} = data;
|
|
28
|
+
const theme = material.useTheme();
|
|
29
|
+
const formattedPhoneNumber = phoneNumber.replace(/\D/g, "");
|
|
30
|
+
const handleClick = () => {
|
|
31
|
+
let url = "https://wa.me/".concat(formattedPhoneNumber);
|
|
32
|
+
if (message) {
|
|
33
|
+
const formattedMessage = encodeURIComponent(message);
|
|
34
|
+
url = "https://wa.me/".concat(formattedPhoneNumber, "?text=").concat(formattedMessage);
|
|
35
|
+
}
|
|
36
|
+
window.open(url, "_blank");
|
|
37
|
+
};
|
|
38
|
+
return /*#__PURE__*/React.createElement(material.Button, {
|
|
39
|
+
variant: "contained",
|
|
40
|
+
onClick: handleClick,
|
|
41
|
+
startIcon: /*#__PURE__*/React.createElement(material.SvgIcon, {
|
|
42
|
+
sx: [round === true && {
|
|
43
|
+
m: 0,
|
|
44
|
+
p: 0
|
|
45
|
+
}]
|
|
46
|
+
}, /*#__PURE__*/React.createElement(WhatsAppIcon, {
|
|
47
|
+
fill: color || theme.palette.primary.contrastText
|
|
48
|
+
})),
|
|
49
|
+
sx: [{
|
|
50
|
+
...sx
|
|
51
|
+
}, round === true && {
|
|
52
|
+
display: "grid",
|
|
53
|
+
justifyContent: "center",
|
|
54
|
+
alignItems: "center",
|
|
55
|
+
borderRadius: "50%",
|
|
56
|
+
p: 1,
|
|
57
|
+
minWidth: "unset",
|
|
58
|
+
".MuiButton-startIcon": {
|
|
59
|
+
m: 0,
|
|
60
|
+
p: 0
|
|
61
|
+
}
|
|
62
|
+
}]
|
|
63
|
+
}, !round && (text || "Click to WhatsApp"));
|
|
64
|
+
}
|
|
65
|
+
function WhatsAppIcon(props) {
|
|
66
|
+
return /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.extends({
|
|
67
|
+
viewBox: "0 0 30.667 30.667"
|
|
68
|
+
}, props), /*#__PURE__*/React.createElement("g", {
|
|
69
|
+
"stroke-width": "0"
|
|
70
|
+
}), /*#__PURE__*/React.createElement("g", {
|
|
71
|
+
"stroke-linecap": "round",
|
|
72
|
+
"stroke-linejoin": "round"
|
|
73
|
+
}), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
|
|
74
|
+
d: "M30.667,14.939c0,8.25-6.74,14.938-15.056,14.938c-2.639,0-5.118-0.675-7.276-1.857L0,30.667l2.717-8.017 c-1.37-2.25-2.159-4.892-2.159-7.712C0.559,6.688,7.297,0,15.613,0C23.928,0.002,30.667,6.689,30.667,14.939z M15.61,2.382 c-6.979,0-12.656,5.634-12.656,12.56c0,2.748,0.896,5.292,2.411,7.362l-1.58,4.663l4.862-1.545c2,1.312,4.393,2.076,6.963,2.076 c6.979,0,12.658-5.633,12.658-12.559C28.27,8.016,22.59,2.382,15.61,2.382z M23.214,18.38c-0.094-0.151-0.34-0.243-0.708-0.427 c-0.367-0.184-2.184-1.069-2.521-1.189c-0.34-0.123-0.586-0.185-0.832,0.182c-0.243,0.367-0.951,1.191-1.168,1.437 c-0.215,0.245-0.43,0.276-0.799,0.095c-0.369-0.186-1.559-0.57-2.969-1.817c-1.097-0.972-1.838-2.169-2.052-2.536 c-0.217-0.366-0.022-0.564,0.161-0.746c0.165-0.165,0.369-0.428,0.554-0.643c0.185-0.213,0.246-0.364,0.369-0.609 c0.121-0.245,0.06-0.458-0.031-0.643c-0.092-0.184-0.829-1.984-1.138-2.717c-0.307-0.732-0.614-0.611-0.83-0.611 c-0.215,0-0.461-0.03-0.707-0.03S9.897,8.215,9.56,8.582s-1.291,1.252-1.291,3.054c0,1.804,1.321,3.543,1.506,3.787 c0.186,0.243,2.554,4.062,6.305,5.528c3.753,1.465,3.753,0.976,4.429,0.914c0.678-0.062,2.184-0.885,2.49-1.739 C23.307,19.268,23.307,18.533,23.214,18.38z"
|
|
75
|
+
})));
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
exports.default = WhatsAppClickToChatButton;
|
package/dist/cjs/index.js
CHANGED
|
@@ -15,6 +15,7 @@ var Footer = require('./components/Footer.js');
|
|
|
15
15
|
var ContactForm = require('./components/ContactForm.js');
|
|
16
16
|
var WebsitePlaceholder = require('./components/WebsitePlaceholder.js');
|
|
17
17
|
var BulletList = require('./components/BulletList.js');
|
|
18
|
+
var WhatsAppClickToChatButton = require('./components/WhatsAppClickToChatButton.js');
|
|
18
19
|
|
|
19
20
|
|
|
20
21
|
|
|
@@ -27,3 +28,4 @@ exports.Footer = Footer.default;
|
|
|
27
28
|
exports.ContactForm = ContactForm.default;
|
|
28
29
|
exports.WebsitePlaceholder = WebsitePlaceholder.default;
|
|
29
30
|
exports.BulletList = BulletList.default;
|
|
31
|
+
exports.WhatsAppClickToChatButton = WhatsAppClickToChatButton.default;
|
|
@@ -14,8 +14,6 @@ function ContactForm(_ref) {
|
|
|
14
14
|
data
|
|
15
15
|
} = _ref;
|
|
16
16
|
const {
|
|
17
|
-
id,
|
|
18
|
-
title,
|
|
19
17
|
maxWidth = "lg"
|
|
20
18
|
} = data;
|
|
21
19
|
const [formValues, setFormValues] = React.useState({
|
|
@@ -26,11 +24,24 @@ function ContactForm(_ref) {
|
|
|
26
24
|
});
|
|
27
25
|
const [formErrors, setFormErrors] = React.useState({});
|
|
28
26
|
const handleBlur = e => {
|
|
27
|
+
const {
|
|
28
|
+
id
|
|
29
|
+
} = e.target;
|
|
29
30
|
const errors = validate(formValues);
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
31
|
+
if (errors[id]) {
|
|
32
|
+
setFormErrors(prevErrors => ({
|
|
33
|
+
...prevErrors,
|
|
34
|
+
[id]: errors[id]
|
|
35
|
+
}));
|
|
36
|
+
} else {
|
|
37
|
+
setFormErrors(prevErrors => {
|
|
38
|
+
const updatedErrors = {
|
|
39
|
+
...prevErrors
|
|
40
|
+
};
|
|
41
|
+
delete updatedErrors[id];
|
|
42
|
+
return updatedErrors;
|
|
43
|
+
});
|
|
44
|
+
}
|
|
34
45
|
};
|
|
35
46
|
const handleChange = e => {
|
|
36
47
|
const {
|
|
@@ -41,10 +52,14 @@ function ContactForm(_ref) {
|
|
|
41
52
|
...formValues,
|
|
42
53
|
[id]: value
|
|
43
54
|
});
|
|
44
|
-
console.log("formValues", formValues);
|
|
45
55
|
};
|
|
46
56
|
const handleClear = () => {
|
|
47
|
-
setFormValues({
|
|
57
|
+
setFormValues({
|
|
58
|
+
name: "",
|
|
59
|
+
email: "",
|
|
60
|
+
subject: "",
|
|
61
|
+
message: ""
|
|
62
|
+
});
|
|
48
63
|
};
|
|
49
64
|
const handleSendCallback = () => {
|
|
50
65
|
console.log("Send callback");
|
|
@@ -70,7 +85,7 @@ function ContactForm(_ref) {
|
|
|
70
85
|
return errors;
|
|
71
86
|
};
|
|
72
87
|
return /*#__PURE__*/React.createElement(Container, {
|
|
73
|
-
maxWidth: maxWidth,
|
|
88
|
+
maxWidth: maxWidth || "lg",
|
|
74
89
|
sx: {
|
|
75
90
|
my: 1
|
|
76
91
|
}
|
|
@@ -91,8 +106,8 @@ function ContactForm(_ref) {
|
|
|
91
106
|
label: "Name",
|
|
92
107
|
value: formValues.name,
|
|
93
108
|
variant: "outlined",
|
|
94
|
-
onBlur:
|
|
95
|
-
onChange:
|
|
109
|
+
onBlur: handleBlur,
|
|
110
|
+
onChange: handleChange,
|
|
96
111
|
error: formErrors.name != undefined ? true : false,
|
|
97
112
|
helperText: formErrors.name
|
|
98
113
|
}), /*#__PURE__*/React.createElement(TextField, {
|
|
@@ -131,7 +146,7 @@ function ContactForm(_ref) {
|
|
|
131
146
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
132
147
|
variant: "outlined",
|
|
133
148
|
color: "primary",
|
|
134
|
-
onClick:
|
|
149
|
+
onClick: handleClear
|
|
135
150
|
}, "Clear"), /*#__PURE__*/React.createElement(Button, {
|
|
136
151
|
variant: "contained",
|
|
137
152
|
color: "primary",
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
/*
|
|
3
|
+
* UMWD-Components
|
|
4
|
+
* @copyright Jelle Paulus
|
|
5
|
+
* @license MIT
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
|
+
import React from 'react';
|
|
10
|
+
import { useTheme, Button, SvgIcon } from '@mui/material';
|
|
11
|
+
|
|
12
|
+
function WhatsAppClickToChatButton(_ref) {
|
|
13
|
+
let {
|
|
14
|
+
data
|
|
15
|
+
} = _ref;
|
|
16
|
+
const {
|
|
17
|
+
phoneNumber,
|
|
18
|
+
text,
|
|
19
|
+
message,
|
|
20
|
+
color,
|
|
21
|
+
round,
|
|
22
|
+
sx
|
|
23
|
+
} = data;
|
|
24
|
+
const theme = useTheme();
|
|
25
|
+
const formattedPhoneNumber = phoneNumber.replace(/\D/g, "");
|
|
26
|
+
const handleClick = () => {
|
|
27
|
+
let url = "https://wa.me/".concat(formattedPhoneNumber);
|
|
28
|
+
if (message) {
|
|
29
|
+
const formattedMessage = encodeURIComponent(message);
|
|
30
|
+
url = "https://wa.me/".concat(formattedPhoneNumber, "?text=").concat(formattedMessage);
|
|
31
|
+
}
|
|
32
|
+
window.open(url, "_blank");
|
|
33
|
+
};
|
|
34
|
+
return /*#__PURE__*/React.createElement(Button, {
|
|
35
|
+
variant: "contained",
|
|
36
|
+
onClick: handleClick,
|
|
37
|
+
startIcon: /*#__PURE__*/React.createElement(SvgIcon, {
|
|
38
|
+
sx: [round === true && {
|
|
39
|
+
m: 0,
|
|
40
|
+
p: 0
|
|
41
|
+
}]
|
|
42
|
+
}, /*#__PURE__*/React.createElement(WhatsAppIcon, {
|
|
43
|
+
fill: color || theme.palette.primary.contrastText
|
|
44
|
+
})),
|
|
45
|
+
sx: [{
|
|
46
|
+
...sx
|
|
47
|
+
}, round === true && {
|
|
48
|
+
display: "grid",
|
|
49
|
+
justifyContent: "center",
|
|
50
|
+
alignItems: "center",
|
|
51
|
+
borderRadius: "50%",
|
|
52
|
+
p: 1,
|
|
53
|
+
minWidth: "unset",
|
|
54
|
+
".MuiButton-startIcon": {
|
|
55
|
+
m: 0,
|
|
56
|
+
p: 0
|
|
57
|
+
}
|
|
58
|
+
}]
|
|
59
|
+
}, !round && (text || "Click to WhatsApp"));
|
|
60
|
+
}
|
|
61
|
+
function WhatsAppIcon(props) {
|
|
62
|
+
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
63
|
+
viewBox: "0 0 30.667 30.667"
|
|
64
|
+
}, props), /*#__PURE__*/React.createElement("g", {
|
|
65
|
+
"stroke-width": "0"
|
|
66
|
+
}), /*#__PURE__*/React.createElement("g", {
|
|
67
|
+
"stroke-linecap": "round",
|
|
68
|
+
"stroke-linejoin": "round"
|
|
69
|
+
}), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
|
|
70
|
+
d: "M30.667,14.939c0,8.25-6.74,14.938-15.056,14.938c-2.639,0-5.118-0.675-7.276-1.857L0,30.667l2.717-8.017 c-1.37-2.25-2.159-4.892-2.159-7.712C0.559,6.688,7.297,0,15.613,0C23.928,0.002,30.667,6.689,30.667,14.939z M15.61,2.382 c-6.979,0-12.656,5.634-12.656,12.56c0,2.748,0.896,5.292,2.411,7.362l-1.58,4.663l4.862-1.545c2,1.312,4.393,2.076,6.963,2.076 c6.979,0,12.658-5.633,12.658-12.559C28.27,8.016,22.59,2.382,15.61,2.382z M23.214,18.38c-0.094-0.151-0.34-0.243-0.708-0.427 c-0.367-0.184-2.184-1.069-2.521-1.189c-0.34-0.123-0.586-0.185-0.832,0.182c-0.243,0.367-0.951,1.191-1.168,1.437 c-0.215,0.245-0.43,0.276-0.799,0.095c-0.369-0.186-1.559-0.57-2.969-1.817c-1.097-0.972-1.838-2.169-2.052-2.536 c-0.217-0.366-0.022-0.564,0.161-0.746c0.165-0.165,0.369-0.428,0.554-0.643c0.185-0.213,0.246-0.364,0.369-0.609 c0.121-0.245,0.06-0.458-0.031-0.643c-0.092-0.184-0.829-1.984-1.138-2.717c-0.307-0.732-0.614-0.611-0.83-0.611 c-0.215,0-0.461-0.03-0.707-0.03S9.897,8.215,9.56,8.582s-1.291,1.252-1.291,3.054c0,1.804,1.321,3.543,1.506,3.787 c0.186,0.243,2.554,4.062,6.305,5.528c3.753,1.465,3.753,0.976,4.429,0.914c0.678-0.062,2.184-0.885,2.49-1.739 C23.307,19.268,23.307,18.533,23.214,18.38z"
|
|
71
|
+
})));
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
export { WhatsAppClickToChatButton as default };
|
package/dist/esm/index.js
CHANGED
|
@@ -13,3 +13,4 @@ export { default as Footer } from './components/Footer.js';
|
|
|
13
13
|
export { default as ContactForm } from './components/ContactForm.js';
|
|
14
14
|
export { default as WebsitePlaceholder } from './components/WebsitePlaceholder.js';
|
|
15
15
|
export { default as BulletList } from './components/BulletList.js';
|
|
16
|
+
export { default as WhatsAppClickToChatButton } from './components/WhatsAppClickToChatButton.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "umwd-components",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.72",
|
|
4
4
|
"description": "UMWD Component library",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -88,6 +88,7 @@
|
|
|
88
88
|
"@fontsource/roboto": "^5.0.12",
|
|
89
89
|
"@mui/types": "^7.2.14",
|
|
90
90
|
"@rollup/plugin-commonjs": "^25.0.7",
|
|
91
|
+
"@types/validator": "^13.11.9",
|
|
91
92
|
"next-router-mock": "^0.9.12",
|
|
92
93
|
"react": "^18.2.0",
|
|
93
94
|
"react-dnd": "^16.0.1",
|
|
@@ -10,47 +10,81 @@ import {
|
|
|
10
10
|
Button,
|
|
11
11
|
} from "@mui/material";
|
|
12
12
|
import isEmail from "validator/lib/isEmail";
|
|
13
|
+
import { Breakpoint } from "@mui/system";
|
|
13
14
|
|
|
14
15
|
interface ContactFormProps {
|
|
15
16
|
id: number;
|
|
17
|
+
__component: string;
|
|
16
18
|
title: string;
|
|
17
|
-
maxWidth:
|
|
19
|
+
maxWidth: Breakpoint;
|
|
18
20
|
}
|
|
19
21
|
|
|
20
22
|
function ContactForm({ data }: { readonly data: ContactFormProps }) {
|
|
21
|
-
const {
|
|
23
|
+
const { maxWidth = "lg" } = data;
|
|
22
24
|
|
|
23
|
-
|
|
25
|
+
type FormValues = {
|
|
26
|
+
name: string;
|
|
27
|
+
email: string;
|
|
28
|
+
subject: string;
|
|
29
|
+
message: string;
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
const [formValues, setFormValues] = React.useState<FormValues>({
|
|
24
33
|
name: "",
|
|
25
34
|
email: "",
|
|
26
35
|
subject: "",
|
|
27
36
|
message: "",
|
|
28
37
|
});
|
|
29
38
|
|
|
30
|
-
|
|
39
|
+
type FormErrors = {
|
|
40
|
+
name?: string;
|
|
41
|
+
email?: string;
|
|
42
|
+
subject?: string;
|
|
43
|
+
message?: string;
|
|
44
|
+
[key: string]: string | undefined; // Add index signature
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
const [formErrors, setFormErrors] = React.useState<FormErrors>({});
|
|
31
48
|
|
|
32
|
-
const handleBlur = (e:
|
|
49
|
+
const handleBlur = (e: React.FocusEvent<HTMLInputElement>): void => {
|
|
50
|
+
const { id } = e.target;
|
|
33
51
|
const errors = validate(formValues);
|
|
34
|
-
|
|
52
|
+
if (errors[id]) {
|
|
53
|
+
setFormErrors((prevErrors) => ({
|
|
54
|
+
...prevErrors,
|
|
55
|
+
[id]: errors[id],
|
|
56
|
+
}));
|
|
57
|
+
} else {
|
|
58
|
+
setFormErrors((prevErrors) => {
|
|
59
|
+
const updatedErrors = { ...prevErrors };
|
|
60
|
+
delete updatedErrors[id];
|
|
61
|
+
return updatedErrors;
|
|
62
|
+
});
|
|
63
|
+
}
|
|
35
64
|
};
|
|
36
65
|
|
|
37
|
-
const handleChange = (e:
|
|
66
|
+
const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
|
|
38
67
|
const { id, value } = e.target;
|
|
39
68
|
setFormValues({ ...formValues, [id]: value });
|
|
40
|
-
console.log("formValues", formValues);
|
|
41
69
|
};
|
|
42
70
|
|
|
43
71
|
const handleClear = () => {
|
|
44
|
-
setFormValues({
|
|
72
|
+
setFormValues({
|
|
73
|
+
name: "",
|
|
74
|
+
email: "",
|
|
75
|
+
subject: "",
|
|
76
|
+
message: "",
|
|
77
|
+
});
|
|
45
78
|
};
|
|
46
79
|
|
|
47
80
|
const handleSendCallback = () => {
|
|
48
81
|
console.log("Send callback");
|
|
49
82
|
};
|
|
50
83
|
|
|
51
|
-
const validate = (values) => {
|
|
84
|
+
const validate = (values: FormValues) => {
|
|
52
85
|
console.log("values from validate", values);
|
|
53
|
-
|
|
86
|
+
|
|
87
|
+
let errors: Partial<FormErrors> = {};
|
|
54
88
|
|
|
55
89
|
if (values.name === "") {
|
|
56
90
|
errors.name = "Name is required";
|
|
@@ -73,7 +107,7 @@ function ContactForm({ data }: { readonly data: ContactFormProps }) {
|
|
|
73
107
|
};
|
|
74
108
|
|
|
75
109
|
return (
|
|
76
|
-
<Container maxWidth={maxWidth} sx={{ my: 1 }}>
|
|
110
|
+
<Container maxWidth={maxWidth || "lg"} sx={{ my: 1 }}>
|
|
77
111
|
<Paper sx={{ p: 2 }}>
|
|
78
112
|
<Stack spacing={2}>
|
|
79
113
|
<Typography variant="h6" align="center">
|
|
@@ -87,8 +121,8 @@ function ContactForm({ data }: { readonly data: ContactFormProps }) {
|
|
|
87
121
|
label="Name"
|
|
88
122
|
value={formValues.name}
|
|
89
123
|
variant="outlined"
|
|
90
|
-
onBlur={
|
|
91
|
-
onChange={
|
|
124
|
+
onBlur={handleBlur}
|
|
125
|
+
onChange={handleChange}
|
|
92
126
|
error={formErrors.name != undefined ? true : false}
|
|
93
127
|
helperText={formErrors.name}
|
|
94
128
|
/>
|
|
@@ -125,11 +159,7 @@ function ContactForm({ data }: { readonly data: ContactFormProps }) {
|
|
|
125
159
|
helperText={formErrors.message}
|
|
126
160
|
/>
|
|
127
161
|
<Stack direction={"row"} spacing={2} justifyContent={"end"}>
|
|
128
|
-
<Button
|
|
129
|
-
variant="outlined"
|
|
130
|
-
color="primary"
|
|
131
|
-
onClick={() => handleClear}
|
|
132
|
-
>
|
|
162
|
+
<Button variant="outlined" color="primary" onClick={handleClear}>
|
|
133
163
|
Clear
|
|
134
164
|
</Button>
|
|
135
165
|
<Button
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { Button, SvgIcon, useTheme } from "@mui/material";
|
|
5
|
+
|
|
6
|
+
interface WhatsAppClickToChatButtonProps {
|
|
7
|
+
phoneNumber: string;
|
|
8
|
+
text?: string;
|
|
9
|
+
message?: string;
|
|
10
|
+
color?: string;
|
|
11
|
+
round?: boolean;
|
|
12
|
+
sx?: React.CSSProperties;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
function WhatsAppClickToChatButton({
|
|
16
|
+
data,
|
|
17
|
+
}: {
|
|
18
|
+
readonly data: WhatsAppClickToChatButtonProps;
|
|
19
|
+
}) {
|
|
20
|
+
const { phoneNumber, text, message, color, round, sx } = data;
|
|
21
|
+
|
|
22
|
+
const theme = useTheme();
|
|
23
|
+
|
|
24
|
+
const formattedPhoneNumber = phoneNumber.replace(/\D/g, "");
|
|
25
|
+
|
|
26
|
+
const handleClick = () => {
|
|
27
|
+
let url = `https://wa.me/${formattedPhoneNumber}`;
|
|
28
|
+
if (message) {
|
|
29
|
+
const formattedMessage = encodeURIComponent(message);
|
|
30
|
+
url = `https://wa.me/${formattedPhoneNumber}?text=${formattedMessage}`;
|
|
31
|
+
}
|
|
32
|
+
window.open(url, "_blank");
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
return (
|
|
36
|
+
<Button
|
|
37
|
+
variant="contained"
|
|
38
|
+
onClick={handleClick}
|
|
39
|
+
startIcon={
|
|
40
|
+
<SvgIcon sx={[round === true && { m: 0, p: 0 }]}>
|
|
41
|
+
<WhatsAppIcon fill={color || theme.palette.primary.contrastText} />
|
|
42
|
+
</SvgIcon>
|
|
43
|
+
}
|
|
44
|
+
sx={[
|
|
45
|
+
{ ...sx },
|
|
46
|
+
round === true && {
|
|
47
|
+
display: "grid",
|
|
48
|
+
justifyContent: "center",
|
|
49
|
+
alignItems: "center",
|
|
50
|
+
borderRadius: "50%",
|
|
51
|
+
p: 1,
|
|
52
|
+
minWidth: "unset",
|
|
53
|
+
".MuiButton-startIcon": { m: 0, p: 0 },
|
|
54
|
+
},
|
|
55
|
+
]}
|
|
56
|
+
>
|
|
57
|
+
{!round && (text || "Click to WhatsApp")}
|
|
58
|
+
</Button>
|
|
59
|
+
);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
export default WhatsAppClickToChatButton;
|
|
63
|
+
|
|
64
|
+
function WhatsAppIcon(props: any) {
|
|
65
|
+
return (
|
|
66
|
+
<svg viewBox="0 0 30.667 30.667" {...props}>
|
|
67
|
+
<g stroke-width="0"></g>
|
|
68
|
+
<g stroke-linecap="round" stroke-linejoin="round"></g>
|
|
69
|
+
<g>
|
|
70
|
+
<path d="M30.667,14.939c0,8.25-6.74,14.938-15.056,14.938c-2.639,0-5.118-0.675-7.276-1.857L0,30.667l2.717-8.017 c-1.37-2.25-2.159-4.892-2.159-7.712C0.559,6.688,7.297,0,15.613,0C23.928,0.002,30.667,6.689,30.667,14.939z M15.61,2.382 c-6.979,0-12.656,5.634-12.656,12.56c0,2.748,0.896,5.292,2.411,7.362l-1.58,4.663l4.862-1.545c2,1.312,4.393,2.076,6.963,2.076 c6.979,0,12.658-5.633,12.658-12.559C28.27,8.016,22.59,2.382,15.61,2.382z M23.214,18.38c-0.094-0.151-0.34-0.243-0.708-0.427 c-0.367-0.184-2.184-1.069-2.521-1.189c-0.34-0.123-0.586-0.185-0.832,0.182c-0.243,0.367-0.951,1.191-1.168,1.437 c-0.215,0.245-0.43,0.276-0.799,0.095c-0.369-0.186-1.559-0.57-2.969-1.817c-1.097-0.972-1.838-2.169-2.052-2.536 c-0.217-0.366-0.022-0.564,0.161-0.746c0.165-0.165,0.369-0.428,0.554-0.643c0.185-0.213,0.246-0.364,0.369-0.609 c0.121-0.245,0.06-0.458-0.031-0.643c-0.092-0.184-0.829-1.984-1.138-2.717c-0.307-0.732-0.614-0.611-0.83-0.611 c-0.215,0-0.461-0.03-0.707-0.03S9.897,8.215,9.56,8.582s-1.291,1.252-1.291,3.054c0,1.804,1.321,3.543,1.506,3.787 c0.186,0.243,2.554,4.062,6.305,5.528c3.753,1.465,3.753,0.976,4.429,0.914c0.678-0.062,2.184-0.885,2.49-1.739 C23.307,19.268,23.307,18.533,23.214,18.38z"></path>
|
|
71
|
+
</g>
|
|
72
|
+
</svg>
|
|
73
|
+
);
|
|
74
|
+
}
|
package/src/index.js
CHANGED
|
@@ -13,3 +13,4 @@ export { default as Footer } from "./components/Footer";
|
|
|
13
13
|
export { default as ContactForm } from "./components/ContactForm.tsx";
|
|
14
14
|
export { default as WebsitePlaceholder } from "./components/WebsitePlaceholder";
|
|
15
15
|
export { default as BulletList } from "./components/BulletList";
|
|
16
|
+
export { default as WhatsAppClickToChatButton } from "./components/WhatsAppClickToChatButton.tsx";
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import WhatsAppClickToChatButton from "../components/WhatsAppClickToChatButton.tsx";
|
|
3
|
+
|
|
4
|
+
export default {
|
|
5
|
+
title: "UMWD/WhatsAppClickToChatButton",
|
|
6
|
+
component: WhatsAppClickToChatButton,
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
const Template = ({ ...args }) => {
|
|
10
|
+
return <WhatsAppClickToChatButton {...args} />;
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export const Round = Template.bind({});
|
|
14
|
+
|
|
15
|
+
Round.args = {
|
|
16
|
+
data: {
|
|
17
|
+
phoneNumber: "+1234567890",
|
|
18
|
+
message: "Hello, how can I help you?",
|
|
19
|
+
color: "#25D366",
|
|
20
|
+
round: true,
|
|
21
|
+
sx: {
|
|
22
|
+
position: "fixed",
|
|
23
|
+
bottom: "20px",
|
|
24
|
+
right: "20px",
|
|
25
|
+
zIndex: 1000,
|
|
26
|
+
width: "40px",
|
|
27
|
+
height: "40px",
|
|
28
|
+
},
|
|
29
|
+
},
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
export const WithText = Template.bind({});
|
|
33
|
+
|
|
34
|
+
WithText.args = {
|
|
35
|
+
data: {
|
|
36
|
+
phoneNumber: "+1234567890",
|
|
37
|
+
message: "Hello, how can I help you?",
|
|
38
|
+
color: "red",
|
|
39
|
+
round: false,
|
|
40
|
+
sx: {
|
|
41
|
+
position: "fixed",
|
|
42
|
+
bottom: "20px",
|
|
43
|
+
right: "20px",
|
|
44
|
+
},
|
|
45
|
+
},
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
export const SX = Template.bind({});
|
|
49
|
+
|
|
50
|
+
SX.args = {
|
|
51
|
+
data: {
|
|
52
|
+
phoneNumber: "+1234567890",
|
|
53
|
+
message: "Hello, how can I help you?",
|
|
54
|
+
color: "red",
|
|
55
|
+
round: true,
|
|
56
|
+
sx: {
|
|
57
|
+
position: "fixed",
|
|
58
|
+
bottom: "20px",
|
|
59
|
+
right: "20px",
|
|
60
|
+
zIndex: 1000,
|
|
61
|
+
width: "70px",
|
|
62
|
+
height: "70px",
|
|
63
|
+
".MuiSvgIcon-root": {
|
|
64
|
+
width: "40px",
|
|
65
|
+
height: "40px",
|
|
66
|
+
},
|
|
67
|
+
},
|
|
68
|
+
},
|
|
69
|
+
};
|