umwd-components 0.1.83 → 0.1.85
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 +86 -25
- package/dist/cjs/components/WebsitePlaceholder.js +29 -5
- package/dist/esm/components/ContactForm.js +87 -26
- package/dist/esm/components/WebsitePlaceholder.js +29 -5
- package/package.json +1 -1
- package/src/components/ContactForm.tsx +144 -77
- package/src/components/WebsitePlaceholder.js +34 -4
- package/src/stories/ContactForm.stories.js +3 -3
|
@@ -18,7 +18,7 @@ function ContactForm(_ref) {
|
|
|
18
18
|
data
|
|
19
19
|
} = _ref;
|
|
20
20
|
const {
|
|
21
|
-
maxWidth
|
|
21
|
+
maxWidth
|
|
22
22
|
} = data;
|
|
23
23
|
const [formValues, setFormValues] = React.useState({
|
|
24
24
|
name: "",
|
|
@@ -27,36 +27,43 @@ function ContactForm(_ref) {
|
|
|
27
27
|
message: ""
|
|
28
28
|
});
|
|
29
29
|
const [formErrors, setFormErrors] = React.useState({});
|
|
30
|
+
|
|
31
|
+
// Setting button text on form submission
|
|
32
|
+
React.useState("Send");
|
|
33
|
+
|
|
34
|
+
// Setting success or failure messages states
|
|
35
|
+
const [showSuccessMessage, setShowSuccessMessage] = React.useState(false);
|
|
36
|
+
const [showFailureMessage, setShowFailureMessage] = React.useState(false);
|
|
37
|
+
const handleChange = e => {
|
|
38
|
+
const {
|
|
39
|
+
name,
|
|
40
|
+
value
|
|
41
|
+
} = e.target;
|
|
42
|
+
setFormValues({
|
|
43
|
+
...formValues,
|
|
44
|
+
[name]: value
|
|
45
|
+
});
|
|
46
|
+
};
|
|
30
47
|
const handleBlur = e => {
|
|
31
48
|
const {
|
|
32
|
-
|
|
49
|
+
name
|
|
33
50
|
} = e.target;
|
|
34
51
|
const errors = validate(formValues);
|
|
35
|
-
if (errors[
|
|
52
|
+
if (errors[name]) {
|
|
36
53
|
setFormErrors(prevErrors => ({
|
|
37
54
|
...prevErrors,
|
|
38
|
-
[
|
|
55
|
+
[name]: errors[name]
|
|
39
56
|
}));
|
|
40
57
|
} else {
|
|
41
58
|
setFormErrors(prevErrors => {
|
|
42
59
|
const updatedErrors = {
|
|
43
60
|
...prevErrors
|
|
44
61
|
};
|
|
45
|
-
delete updatedErrors[
|
|
62
|
+
delete updatedErrors[name];
|
|
46
63
|
return updatedErrors;
|
|
47
64
|
});
|
|
48
65
|
}
|
|
49
66
|
};
|
|
50
|
-
const handleChange = e => {
|
|
51
|
-
const {
|
|
52
|
-
id,
|
|
53
|
-
value
|
|
54
|
-
} = e.target;
|
|
55
|
-
setFormValues({
|
|
56
|
-
...formValues,
|
|
57
|
-
[id]: value
|
|
58
|
-
});
|
|
59
|
-
};
|
|
60
67
|
const handleClear = () => {
|
|
61
68
|
setFormValues({
|
|
62
69
|
name: "",
|
|
@@ -65,8 +72,38 @@ function ContactForm(_ref) {
|
|
|
65
72
|
message: ""
|
|
66
73
|
});
|
|
67
74
|
};
|
|
68
|
-
|
|
69
|
-
|
|
75
|
+
|
|
76
|
+
/* const handleSendCallback = () => {
|
|
77
|
+
console.log("Send callback");
|
|
78
|
+
}; */
|
|
79
|
+
|
|
80
|
+
const handleSubmit = async e => {
|
|
81
|
+
e.preventDefault();
|
|
82
|
+
let isValidForm = validate(formValues);
|
|
83
|
+
if (Object.keys(isValidForm).length === 0) {
|
|
84
|
+
const res = await fetch("/api/sendgrid", {
|
|
85
|
+
body: JSON.stringify({
|
|
86
|
+
email: formValues.email,
|
|
87
|
+
fullname: formValues.name,
|
|
88
|
+
subject: formValues.subject,
|
|
89
|
+
message: formValues.message
|
|
90
|
+
}),
|
|
91
|
+
headers: {
|
|
92
|
+
"Content-Type": "application/json"
|
|
93
|
+
},
|
|
94
|
+
method: "POST"
|
|
95
|
+
});
|
|
96
|
+
const {
|
|
97
|
+
error
|
|
98
|
+
} = await res.json();
|
|
99
|
+
if (error) {
|
|
100
|
+
setShowFailureMessage(true);
|
|
101
|
+
console.log(error);
|
|
102
|
+
return;
|
|
103
|
+
} else {
|
|
104
|
+
setShowSuccessMessage(true);
|
|
105
|
+
}
|
|
106
|
+
}
|
|
70
107
|
};
|
|
71
108
|
const validate = values => {
|
|
72
109
|
console.log("values from validate", values);
|
|
@@ -89,24 +126,46 @@ function ContactForm(_ref) {
|
|
|
89
126
|
return errors;
|
|
90
127
|
};
|
|
91
128
|
return /*#__PURE__*/React.createElement(material.Container, {
|
|
92
|
-
maxWidth: maxWidth
|
|
129
|
+
maxWidth: maxWidth ? maxWidth : "lg",
|
|
93
130
|
sx: {
|
|
94
131
|
my: 1
|
|
95
132
|
}
|
|
96
|
-
}, /*#__PURE__*/React.createElement(material.
|
|
133
|
+
}, /*#__PURE__*/React.createElement(material.Stack, {
|
|
134
|
+
spacing: 2,
|
|
97
135
|
sx: {
|
|
98
|
-
|
|
136
|
+
width: "100%"
|
|
99
137
|
}
|
|
100
|
-
}, /*#__PURE__*/React.createElement(material.Stack, {
|
|
101
|
-
spacing: 2
|
|
102
138
|
}, /*#__PURE__*/React.createElement(material.Typography, {
|
|
103
139
|
variant: "h6",
|
|
104
140
|
align: "center"
|
|
105
141
|
}, "Write us"), /*#__PURE__*/React.createElement(material.Typography, {
|
|
106
142
|
variant: "body1",
|
|
107
143
|
align: "center"
|
|
108
|
-
}, "We're open for any suggestion or just to have a chat"), /*#__PURE__*/React.createElement(material.
|
|
144
|
+
}, "We're open for any suggestion or just to have a chat"), showSuccessMessage && /*#__PURE__*/React.createElement(material.Paper, {
|
|
145
|
+
sx: {
|
|
146
|
+
p: 2
|
|
147
|
+
}
|
|
148
|
+
}, /*#__PURE__*/React.createElement(material.Stack, {
|
|
149
|
+
spacing: 2
|
|
150
|
+
}, /*#__PURE__*/React.createElement(material.Typography, {
|
|
151
|
+
variant: "h6"
|
|
152
|
+
}, "Thank you!"), /*#__PURE__*/React.createElement(material.Typography, null, "Your e-mail has been successfully sent!"))), showFailureMessage && /*#__PURE__*/React.createElement(material.Paper, {
|
|
153
|
+
sx: {
|
|
154
|
+
p: 2
|
|
155
|
+
}
|
|
156
|
+
}, /*#__PURE__*/React.createElement(material.Stack, {
|
|
157
|
+
spacing: 2
|
|
158
|
+
}, /*#__PURE__*/React.createElement(material.Typography, null, "I am sorry, something went wrong, you could email me directly on info@jellepaulus.nl"), /*#__PURE__*/React.createElement(material.Button, {
|
|
159
|
+
variant: "contained"
|
|
160
|
+
}, "try again")))), !showSuccessMessage && !showFailureMessage && /*#__PURE__*/React.createElement(material.Paper, {
|
|
161
|
+
sx: {
|
|
162
|
+
p: 2
|
|
163
|
+
}
|
|
164
|
+
}, /*#__PURE__*/React.createElement(material.Stack, {
|
|
165
|
+
spacing: 2
|
|
166
|
+
}, /*#__PURE__*/React.createElement(material.TextField, {
|
|
109
167
|
id: "name",
|
|
168
|
+
name: "name",
|
|
110
169
|
label: "Name",
|
|
111
170
|
value: formValues.name,
|
|
112
171
|
variant: "outlined",
|
|
@@ -116,6 +175,7 @@ function ContactForm(_ref) {
|
|
|
116
175
|
helperText: formErrors.name
|
|
117
176
|
}), /*#__PURE__*/React.createElement(material.TextField, {
|
|
118
177
|
id: "email",
|
|
178
|
+
name: "email",
|
|
119
179
|
label: "Email",
|
|
120
180
|
value: formValues.email,
|
|
121
181
|
variant: "outlined",
|
|
@@ -125,6 +185,7 @@ function ContactForm(_ref) {
|
|
|
125
185
|
helperText: formErrors.email
|
|
126
186
|
}), /*#__PURE__*/React.createElement(material.TextField, {
|
|
127
187
|
id: "subject",
|
|
188
|
+
name: "subject",
|
|
128
189
|
label: "Subject",
|
|
129
190
|
value: formValues.subject,
|
|
130
191
|
variant: "outlined",
|
|
@@ -134,6 +195,7 @@ function ContactForm(_ref) {
|
|
|
134
195
|
helperText: formErrors.subject
|
|
135
196
|
}), /*#__PURE__*/React.createElement(material.TextField, {
|
|
136
197
|
id: "message",
|
|
198
|
+
name: "message",
|
|
137
199
|
label: "Message",
|
|
138
200
|
value: formValues.message,
|
|
139
201
|
variant: "outlined",
|
|
@@ -153,8 +215,7 @@ function ContactForm(_ref) {
|
|
|
153
215
|
onClick: handleClear
|
|
154
216
|
}, "Clear"), /*#__PURE__*/React.createElement(material.Button, {
|
|
155
217
|
variant: "contained",
|
|
156
|
-
|
|
157
|
-
onClick: handleSendCallback
|
|
218
|
+
onClick: handleSubmit
|
|
158
219
|
}, "Send")))));
|
|
159
220
|
}
|
|
160
221
|
|
|
@@ -66,6 +66,7 @@ function WebsitePlaceholder(_ref) {
|
|
|
66
66
|
backgroundColor: theme.palette.primary.main,
|
|
67
67
|
backgroundImage: "url(".concat(theme.palette.mode === "light" ? lmBackgroundUrl : dmBackgroundUrl, ")"),
|
|
68
68
|
backgroundSize: "cover",
|
|
69
|
+
backgroundPosition: "center",
|
|
69
70
|
height: "100vh",
|
|
70
71
|
maxHeight: "100vh",
|
|
71
72
|
width: "100vw",
|
|
@@ -74,19 +75,42 @@ function WebsitePlaceholder(_ref) {
|
|
|
74
75
|
top: 0,
|
|
75
76
|
left: 0,
|
|
76
77
|
zIndex: 9000,
|
|
77
|
-
isolation: "isolate"
|
|
78
|
+
isolation: "isolate",
|
|
79
|
+
p: 2
|
|
78
80
|
}]
|
|
79
81
|
}, visible && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(material.Typography, {
|
|
80
82
|
variant: "h1",
|
|
81
|
-
align: "center"
|
|
83
|
+
align: "center",
|
|
84
|
+
sx: {
|
|
85
|
+
[theme.breakpoints.down("sm")]: {
|
|
86
|
+
fontSize: "2rem"
|
|
87
|
+
},
|
|
88
|
+
[theme.breakpoints.up("sm")]: {
|
|
89
|
+
fontSize: "4rem"
|
|
90
|
+
},
|
|
91
|
+
[theme.breakpoints.up("lg")]: {
|
|
92
|
+
fontSize: "6rem"
|
|
93
|
+
}
|
|
94
|
+
}
|
|
82
95
|
}, title), (logo === null || logo === void 0 ? void 0 : logo.url) && /*#__PURE__*/React.createElement(Image, {
|
|
83
96
|
src: logo.url,
|
|
84
97
|
alt: logo.alt || "logo",
|
|
85
|
-
width:
|
|
86
|
-
height:
|
|
98
|
+
width: 300,
|
|
99
|
+
height: 300
|
|
87
100
|
}), /*#__PURE__*/React.createElement(material.Typography, {
|
|
88
101
|
variant: "h3",
|
|
89
|
-
align: "center"
|
|
102
|
+
align: "center",
|
|
103
|
+
sx: {
|
|
104
|
+
[theme.breakpoints.down("sm")]: {
|
|
105
|
+
fontSize: "1.5rem"
|
|
106
|
+
},
|
|
107
|
+
[theme.breakpoints.up("sm")]: {
|
|
108
|
+
fontSize: "2rem"
|
|
109
|
+
},
|
|
110
|
+
[theme.breakpoints.up("lg")]: {
|
|
111
|
+
fontSize: "3rem"
|
|
112
|
+
}
|
|
113
|
+
}
|
|
90
114
|
}, announcement)), !visible && /*#__PURE__*/React.createElement(React.Fragment, null, children));
|
|
91
115
|
}
|
|
92
116
|
WebsitePlaceholder.propTypes = {
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import React from 'react';
|
|
9
|
-
import { Container,
|
|
9
|
+
import { Container, Stack, Typography, Paper, Button, TextField } from '@mui/material';
|
|
10
10
|
import isEmail from 'validator/lib/isEmail';
|
|
11
11
|
|
|
12
12
|
function ContactForm(_ref) {
|
|
@@ -14,7 +14,7 @@ function ContactForm(_ref) {
|
|
|
14
14
|
data
|
|
15
15
|
} = _ref;
|
|
16
16
|
const {
|
|
17
|
-
maxWidth
|
|
17
|
+
maxWidth
|
|
18
18
|
} = data;
|
|
19
19
|
const [formValues, setFormValues] = React.useState({
|
|
20
20
|
name: "",
|
|
@@ -23,36 +23,43 @@ function ContactForm(_ref) {
|
|
|
23
23
|
message: ""
|
|
24
24
|
});
|
|
25
25
|
const [formErrors, setFormErrors] = React.useState({});
|
|
26
|
+
|
|
27
|
+
// Setting button text on form submission
|
|
28
|
+
React.useState("Send");
|
|
29
|
+
|
|
30
|
+
// Setting success or failure messages states
|
|
31
|
+
const [showSuccessMessage, setShowSuccessMessage] = React.useState(false);
|
|
32
|
+
const [showFailureMessage, setShowFailureMessage] = React.useState(false);
|
|
33
|
+
const handleChange = e => {
|
|
34
|
+
const {
|
|
35
|
+
name,
|
|
36
|
+
value
|
|
37
|
+
} = e.target;
|
|
38
|
+
setFormValues({
|
|
39
|
+
...formValues,
|
|
40
|
+
[name]: value
|
|
41
|
+
});
|
|
42
|
+
};
|
|
26
43
|
const handleBlur = e => {
|
|
27
44
|
const {
|
|
28
|
-
|
|
45
|
+
name
|
|
29
46
|
} = e.target;
|
|
30
47
|
const errors = validate(formValues);
|
|
31
|
-
if (errors[
|
|
48
|
+
if (errors[name]) {
|
|
32
49
|
setFormErrors(prevErrors => ({
|
|
33
50
|
...prevErrors,
|
|
34
|
-
[
|
|
51
|
+
[name]: errors[name]
|
|
35
52
|
}));
|
|
36
53
|
} else {
|
|
37
54
|
setFormErrors(prevErrors => {
|
|
38
55
|
const updatedErrors = {
|
|
39
56
|
...prevErrors
|
|
40
57
|
};
|
|
41
|
-
delete updatedErrors[
|
|
58
|
+
delete updatedErrors[name];
|
|
42
59
|
return updatedErrors;
|
|
43
60
|
});
|
|
44
61
|
}
|
|
45
62
|
};
|
|
46
|
-
const handleChange = e => {
|
|
47
|
-
const {
|
|
48
|
-
id,
|
|
49
|
-
value
|
|
50
|
-
} = e.target;
|
|
51
|
-
setFormValues({
|
|
52
|
-
...formValues,
|
|
53
|
-
[id]: value
|
|
54
|
-
});
|
|
55
|
-
};
|
|
56
63
|
const handleClear = () => {
|
|
57
64
|
setFormValues({
|
|
58
65
|
name: "",
|
|
@@ -61,8 +68,38 @@ function ContactForm(_ref) {
|
|
|
61
68
|
message: ""
|
|
62
69
|
});
|
|
63
70
|
};
|
|
64
|
-
|
|
65
|
-
|
|
71
|
+
|
|
72
|
+
/* const handleSendCallback = () => {
|
|
73
|
+
console.log("Send callback");
|
|
74
|
+
}; */
|
|
75
|
+
|
|
76
|
+
const handleSubmit = async e => {
|
|
77
|
+
e.preventDefault();
|
|
78
|
+
let isValidForm = validate(formValues);
|
|
79
|
+
if (Object.keys(isValidForm).length === 0) {
|
|
80
|
+
const res = await fetch("/api/sendgrid", {
|
|
81
|
+
body: JSON.stringify({
|
|
82
|
+
email: formValues.email,
|
|
83
|
+
fullname: formValues.name,
|
|
84
|
+
subject: formValues.subject,
|
|
85
|
+
message: formValues.message
|
|
86
|
+
}),
|
|
87
|
+
headers: {
|
|
88
|
+
"Content-Type": "application/json"
|
|
89
|
+
},
|
|
90
|
+
method: "POST"
|
|
91
|
+
});
|
|
92
|
+
const {
|
|
93
|
+
error
|
|
94
|
+
} = await res.json();
|
|
95
|
+
if (error) {
|
|
96
|
+
setShowFailureMessage(true);
|
|
97
|
+
console.log(error);
|
|
98
|
+
return;
|
|
99
|
+
} else {
|
|
100
|
+
setShowSuccessMessage(true);
|
|
101
|
+
}
|
|
102
|
+
}
|
|
66
103
|
};
|
|
67
104
|
const validate = values => {
|
|
68
105
|
console.log("values from validate", values);
|
|
@@ -85,24 +122,46 @@ function ContactForm(_ref) {
|
|
|
85
122
|
return errors;
|
|
86
123
|
};
|
|
87
124
|
return /*#__PURE__*/React.createElement(Container, {
|
|
88
|
-
maxWidth: maxWidth
|
|
125
|
+
maxWidth: maxWidth ? maxWidth : "lg",
|
|
89
126
|
sx: {
|
|
90
127
|
my: 1
|
|
91
128
|
}
|
|
92
|
-
}, /*#__PURE__*/React.createElement(
|
|
129
|
+
}, /*#__PURE__*/React.createElement(Stack, {
|
|
130
|
+
spacing: 2,
|
|
93
131
|
sx: {
|
|
94
|
-
|
|
132
|
+
width: "100%"
|
|
95
133
|
}
|
|
96
|
-
}, /*#__PURE__*/React.createElement(Stack, {
|
|
97
|
-
spacing: 2
|
|
98
134
|
}, /*#__PURE__*/React.createElement(Typography, {
|
|
99
135
|
variant: "h6",
|
|
100
136
|
align: "center"
|
|
101
137
|
}, "Write us"), /*#__PURE__*/React.createElement(Typography, {
|
|
102
138
|
variant: "body1",
|
|
103
139
|
align: "center"
|
|
104
|
-
}, "We're open for any suggestion or just to have a chat"), /*#__PURE__*/React.createElement(
|
|
140
|
+
}, "We're open for any suggestion or just to have a chat"), showSuccessMessage && /*#__PURE__*/React.createElement(Paper, {
|
|
141
|
+
sx: {
|
|
142
|
+
p: 2
|
|
143
|
+
}
|
|
144
|
+
}, /*#__PURE__*/React.createElement(Stack, {
|
|
145
|
+
spacing: 2
|
|
146
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
147
|
+
variant: "h6"
|
|
148
|
+
}, "Thank you!"), /*#__PURE__*/React.createElement(Typography, null, "Your e-mail has been successfully sent!"))), showFailureMessage && /*#__PURE__*/React.createElement(Paper, {
|
|
149
|
+
sx: {
|
|
150
|
+
p: 2
|
|
151
|
+
}
|
|
152
|
+
}, /*#__PURE__*/React.createElement(Stack, {
|
|
153
|
+
spacing: 2
|
|
154
|
+
}, /*#__PURE__*/React.createElement(Typography, null, "I am sorry, something went wrong, you could email me directly on info@jellepaulus.nl"), /*#__PURE__*/React.createElement(Button, {
|
|
155
|
+
variant: "contained"
|
|
156
|
+
}, "try again")))), !showSuccessMessage && !showFailureMessage && /*#__PURE__*/React.createElement(Paper, {
|
|
157
|
+
sx: {
|
|
158
|
+
p: 2
|
|
159
|
+
}
|
|
160
|
+
}, /*#__PURE__*/React.createElement(Stack, {
|
|
161
|
+
spacing: 2
|
|
162
|
+
}, /*#__PURE__*/React.createElement(TextField, {
|
|
105
163
|
id: "name",
|
|
164
|
+
name: "name",
|
|
106
165
|
label: "Name",
|
|
107
166
|
value: formValues.name,
|
|
108
167
|
variant: "outlined",
|
|
@@ -112,6 +171,7 @@ function ContactForm(_ref) {
|
|
|
112
171
|
helperText: formErrors.name
|
|
113
172
|
}), /*#__PURE__*/React.createElement(TextField, {
|
|
114
173
|
id: "email",
|
|
174
|
+
name: "email",
|
|
115
175
|
label: "Email",
|
|
116
176
|
value: formValues.email,
|
|
117
177
|
variant: "outlined",
|
|
@@ -121,6 +181,7 @@ function ContactForm(_ref) {
|
|
|
121
181
|
helperText: formErrors.email
|
|
122
182
|
}), /*#__PURE__*/React.createElement(TextField, {
|
|
123
183
|
id: "subject",
|
|
184
|
+
name: "subject",
|
|
124
185
|
label: "Subject",
|
|
125
186
|
value: formValues.subject,
|
|
126
187
|
variant: "outlined",
|
|
@@ -130,6 +191,7 @@ function ContactForm(_ref) {
|
|
|
130
191
|
helperText: formErrors.subject
|
|
131
192
|
}), /*#__PURE__*/React.createElement(TextField, {
|
|
132
193
|
id: "message",
|
|
194
|
+
name: "message",
|
|
133
195
|
label: "Message",
|
|
134
196
|
value: formValues.message,
|
|
135
197
|
variant: "outlined",
|
|
@@ -149,8 +211,7 @@ function ContactForm(_ref) {
|
|
|
149
211
|
onClick: handleClear
|
|
150
212
|
}, "Clear"), /*#__PURE__*/React.createElement(Button, {
|
|
151
213
|
variant: "contained",
|
|
152
|
-
|
|
153
|
-
onClick: handleSendCallback
|
|
214
|
+
onClick: handleSubmit
|
|
154
215
|
}, "Send")))));
|
|
155
216
|
}
|
|
156
217
|
|
|
@@ -62,6 +62,7 @@ function WebsitePlaceholder(_ref) {
|
|
|
62
62
|
backgroundColor: theme.palette.primary.main,
|
|
63
63
|
backgroundImage: "url(".concat(theme.palette.mode === "light" ? lmBackgroundUrl : dmBackgroundUrl, ")"),
|
|
64
64
|
backgroundSize: "cover",
|
|
65
|
+
backgroundPosition: "center",
|
|
65
66
|
height: "100vh",
|
|
66
67
|
maxHeight: "100vh",
|
|
67
68
|
width: "100vw",
|
|
@@ -70,19 +71,42 @@ function WebsitePlaceholder(_ref) {
|
|
|
70
71
|
top: 0,
|
|
71
72
|
left: 0,
|
|
72
73
|
zIndex: 9000,
|
|
73
|
-
isolation: "isolate"
|
|
74
|
+
isolation: "isolate",
|
|
75
|
+
p: 2
|
|
74
76
|
}]
|
|
75
77
|
}, visible && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
|
|
76
78
|
variant: "h1",
|
|
77
|
-
align: "center"
|
|
79
|
+
align: "center",
|
|
80
|
+
sx: {
|
|
81
|
+
[theme.breakpoints.down("sm")]: {
|
|
82
|
+
fontSize: "2rem"
|
|
83
|
+
},
|
|
84
|
+
[theme.breakpoints.up("sm")]: {
|
|
85
|
+
fontSize: "4rem"
|
|
86
|
+
},
|
|
87
|
+
[theme.breakpoints.up("lg")]: {
|
|
88
|
+
fontSize: "6rem"
|
|
89
|
+
}
|
|
90
|
+
}
|
|
78
91
|
}, title), (logo === null || logo === void 0 ? void 0 : logo.url) && /*#__PURE__*/React.createElement(Image, {
|
|
79
92
|
src: logo.url,
|
|
80
93
|
alt: logo.alt || "logo",
|
|
81
|
-
width:
|
|
82
|
-
height:
|
|
94
|
+
width: 300,
|
|
95
|
+
height: 300
|
|
83
96
|
}), /*#__PURE__*/React.createElement(Typography, {
|
|
84
97
|
variant: "h3",
|
|
85
|
-
align: "center"
|
|
98
|
+
align: "center",
|
|
99
|
+
sx: {
|
|
100
|
+
[theme.breakpoints.down("sm")]: {
|
|
101
|
+
fontSize: "1.5rem"
|
|
102
|
+
},
|
|
103
|
+
[theme.breakpoints.up("sm")]: {
|
|
104
|
+
fontSize: "2rem"
|
|
105
|
+
},
|
|
106
|
+
[theme.breakpoints.up("lg")]: {
|
|
107
|
+
fontSize: "3rem"
|
|
108
|
+
}
|
|
109
|
+
}
|
|
86
110
|
}, announcement)), !visible && /*#__PURE__*/React.createElement(React.Fragment, null, children));
|
|
87
111
|
}
|
|
88
112
|
WebsitePlaceholder.propTypes = {
|
package/package.json
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
|
+
// this component requires the app/api/sendgrid.js function to be created
|
|
4
|
+
|
|
3
5
|
import React from "react";
|
|
4
6
|
import {
|
|
5
7
|
Container,
|
|
@@ -10,17 +12,18 @@ import {
|
|
|
10
12
|
Button,
|
|
11
13
|
} from "@mui/material";
|
|
12
14
|
import isEmail from "validator/lib/isEmail";
|
|
13
|
-
|
|
15
|
+
|
|
16
|
+
type MaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false | undefined;
|
|
14
17
|
|
|
15
18
|
interface ContactFormProps {
|
|
16
19
|
id: number;
|
|
17
20
|
__component: string;
|
|
18
21
|
title: string;
|
|
19
|
-
maxWidth:
|
|
22
|
+
maxWidth: MaxWidth;
|
|
20
23
|
}
|
|
21
24
|
|
|
22
25
|
function ContactForm({ data }: { readonly data: ContactFormProps }) {
|
|
23
|
-
const { maxWidth
|
|
26
|
+
const { maxWidth } = data;
|
|
24
27
|
|
|
25
28
|
type FormValues = {
|
|
26
29
|
name: string;
|
|
@@ -46,28 +49,35 @@ function ContactForm({ data }: { readonly data: ContactFormProps }) {
|
|
|
46
49
|
|
|
47
50
|
const [formErrors, setFormErrors] = React.useState<FormErrors>({});
|
|
48
51
|
|
|
52
|
+
// Setting button text on form submission
|
|
53
|
+
const [buttonText, setButtonText] = React.useState("Send");
|
|
54
|
+
|
|
55
|
+
// Setting success or failure messages states
|
|
56
|
+
const [showSuccessMessage, setShowSuccessMessage] = React.useState(false);
|
|
57
|
+
const [showFailureMessage, setShowFailureMessage] = React.useState(false);
|
|
58
|
+
|
|
59
|
+
const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
|
|
60
|
+
const { name, value } = e.target;
|
|
61
|
+
setFormValues({ ...formValues, [name]: value });
|
|
62
|
+
};
|
|
63
|
+
|
|
49
64
|
const handleBlur = (e: React.FocusEvent<HTMLInputElement>): void => {
|
|
50
|
-
const {
|
|
65
|
+
const { name } = e.target;
|
|
51
66
|
const errors = validate(formValues);
|
|
52
|
-
if (errors[
|
|
67
|
+
if (errors[name]) {
|
|
53
68
|
setFormErrors((prevErrors) => ({
|
|
54
69
|
...prevErrors,
|
|
55
|
-
[
|
|
70
|
+
[name]: errors[name],
|
|
56
71
|
}));
|
|
57
72
|
} else {
|
|
58
73
|
setFormErrors((prevErrors) => {
|
|
59
74
|
const updatedErrors = { ...prevErrors };
|
|
60
|
-
delete updatedErrors[
|
|
75
|
+
delete updatedErrors[name];
|
|
61
76
|
return updatedErrors;
|
|
62
77
|
});
|
|
63
78
|
}
|
|
64
79
|
};
|
|
65
80
|
|
|
66
|
-
const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
|
|
67
|
-
const { id, value } = e.target;
|
|
68
|
-
setFormValues({ ...formValues, [id]: value });
|
|
69
|
-
};
|
|
70
|
-
|
|
71
81
|
const handleClear = () => {
|
|
72
82
|
setFormValues({
|
|
73
83
|
name: "",
|
|
@@ -77,8 +87,39 @@ function ContactForm({ data }: { readonly data: ContactFormProps }) {
|
|
|
77
87
|
});
|
|
78
88
|
};
|
|
79
89
|
|
|
80
|
-
const handleSendCallback = () => {
|
|
90
|
+
/* const handleSendCallback = () => {
|
|
81
91
|
console.log("Send callback");
|
|
92
|
+
}; */
|
|
93
|
+
|
|
94
|
+
const handleSubmit = async (e: React.FormEvent) => {
|
|
95
|
+
e.preventDefault();
|
|
96
|
+
|
|
97
|
+
let isValidForm = validate(formValues);
|
|
98
|
+
|
|
99
|
+
if (Object.keys(isValidForm).length === 0) {
|
|
100
|
+
const res = await fetch("/api/sendgrid", {
|
|
101
|
+
body: JSON.stringify({
|
|
102
|
+
email: formValues.email,
|
|
103
|
+
fullname: formValues.name,
|
|
104
|
+
subject: formValues.subject,
|
|
105
|
+
message: formValues.message,
|
|
106
|
+
}),
|
|
107
|
+
headers: {
|
|
108
|
+
"Content-Type": "application/json",
|
|
109
|
+
},
|
|
110
|
+
method: "POST",
|
|
111
|
+
});
|
|
112
|
+
|
|
113
|
+
const { error } = await res.json();
|
|
114
|
+
|
|
115
|
+
if (error) {
|
|
116
|
+
setShowFailureMessage(true);
|
|
117
|
+
console.log(error);
|
|
118
|
+
return;
|
|
119
|
+
} else {
|
|
120
|
+
setShowSuccessMessage(true);
|
|
121
|
+
}
|
|
122
|
+
}
|
|
82
123
|
};
|
|
83
124
|
|
|
84
125
|
const validate = (values: FormValues) => {
|
|
@@ -107,71 +148,97 @@ function ContactForm({ data }: { readonly data: ContactFormProps }) {
|
|
|
107
148
|
};
|
|
108
149
|
|
|
109
150
|
return (
|
|
110
|
-
<Container maxWidth={maxWidth
|
|
111
|
-
<
|
|
112
|
-
<
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
<
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
<
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
151
|
+
<Container maxWidth={maxWidth ? maxWidth : "lg"} sx={{ my: 1 }}>
|
|
152
|
+
<Stack spacing={2} sx={{ width: "100%" }}>
|
|
153
|
+
<Typography variant="h6" align="center">
|
|
154
|
+
Write us
|
|
155
|
+
</Typography>
|
|
156
|
+
<Typography variant="body1" align="center">
|
|
157
|
+
We're open for any suggestion or just to have a chat
|
|
158
|
+
</Typography>
|
|
159
|
+
{showSuccessMessage && (
|
|
160
|
+
<Paper sx={{ p: 2 }}>
|
|
161
|
+
<Stack spacing={2}>
|
|
162
|
+
<Typography variant="h6">Thank you!</Typography>
|
|
163
|
+
<Typography>Your e-mail has been successfully sent!</Typography>
|
|
164
|
+
</Stack>
|
|
165
|
+
</Paper>
|
|
166
|
+
)}
|
|
167
|
+
{showFailureMessage && (
|
|
168
|
+
<Paper sx={{ p: 2 }}>
|
|
169
|
+
<Stack spacing={2}>
|
|
170
|
+
<Typography>
|
|
171
|
+
I am sorry, something went wrong, you could email me directly on
|
|
172
|
+
info@jellepaulus.nl
|
|
173
|
+
</Typography>
|
|
174
|
+
<Button variant="contained">try again</Button>
|
|
175
|
+
</Stack>
|
|
176
|
+
</Paper>
|
|
177
|
+
)}
|
|
178
|
+
</Stack>
|
|
179
|
+
{!showSuccessMessage && !showFailureMessage && (
|
|
180
|
+
<Paper sx={{ p: 2 }}>
|
|
181
|
+
<Stack spacing={2}>
|
|
182
|
+
<TextField
|
|
183
|
+
id="name"
|
|
184
|
+
name="name"
|
|
185
|
+
label="Name"
|
|
186
|
+
value={formValues.name}
|
|
187
|
+
variant="outlined"
|
|
188
|
+
onBlur={handleBlur}
|
|
189
|
+
onChange={handleChange}
|
|
190
|
+
error={formErrors.name != undefined ? true : false}
|
|
191
|
+
helperText={formErrors.name}
|
|
192
|
+
/>
|
|
193
|
+
|
|
194
|
+
<TextField
|
|
195
|
+
id="email"
|
|
196
|
+
name="email"
|
|
197
|
+
label="Email"
|
|
198
|
+
value={formValues.email}
|
|
199
|
+
variant="outlined"
|
|
200
|
+
onBlur={handleBlur}
|
|
201
|
+
onChange={handleChange}
|
|
202
|
+
error={formErrors.email != undefined ? true : false}
|
|
203
|
+
helperText={formErrors.email}
|
|
204
|
+
/>
|
|
205
|
+
|
|
206
|
+
<TextField
|
|
207
|
+
id="subject"
|
|
208
|
+
name="subject"
|
|
209
|
+
label="Subject"
|
|
210
|
+
value={formValues.subject}
|
|
211
|
+
variant="outlined"
|
|
212
|
+
onBlur={handleBlur}
|
|
213
|
+
onChange={handleChange}
|
|
214
|
+
error={formErrors.subject != undefined}
|
|
215
|
+
helperText={formErrors.subject}
|
|
216
|
+
/>
|
|
217
|
+
|
|
218
|
+
<TextField
|
|
219
|
+
id="message"
|
|
220
|
+
name="message"
|
|
221
|
+
label="Message"
|
|
222
|
+
value={formValues.message}
|
|
223
|
+
variant="outlined"
|
|
224
|
+
multiline
|
|
225
|
+
minRows={5}
|
|
226
|
+
onBlur={handleBlur}
|
|
227
|
+
onChange={handleChange}
|
|
228
|
+
error={formErrors.message != undefined}
|
|
229
|
+
helperText={formErrors.message}
|
|
230
|
+
/>
|
|
231
|
+
<Stack direction={"row"} spacing={2} justifyContent={"end"}>
|
|
232
|
+
<Button variant="outlined" color="primary" onClick={handleClear}>
|
|
233
|
+
Clear
|
|
234
|
+
</Button>
|
|
235
|
+
<Button variant="contained" onClick={handleSubmit}>
|
|
236
|
+
Send
|
|
237
|
+
</Button>
|
|
238
|
+
</Stack>
|
|
172
239
|
</Stack>
|
|
173
|
-
</
|
|
174
|
-
|
|
240
|
+
</Paper>
|
|
241
|
+
)}
|
|
175
242
|
</Container>
|
|
176
243
|
);
|
|
177
244
|
}
|
|
@@ -71,6 +71,7 @@ function WebsitePlaceholder({
|
|
|
71
71
|
theme.palette.mode === "light" ? lmBackgroundUrl : dmBackgroundUrl
|
|
72
72
|
})`,
|
|
73
73
|
backgroundSize: "cover",
|
|
74
|
+
backgroundPosition: "center",
|
|
74
75
|
height: "100vh",
|
|
75
76
|
maxHeight: "100vh",
|
|
76
77
|
width: "100vw",
|
|
@@ -80,23 +81,52 @@ function WebsitePlaceholder({
|
|
|
80
81
|
left: 0,
|
|
81
82
|
zIndex: 9000,
|
|
82
83
|
isolation: "isolate",
|
|
84
|
+
p: 2,
|
|
83
85
|
},
|
|
84
86
|
]}
|
|
85
87
|
>
|
|
86
88
|
{visible && (
|
|
87
89
|
<>
|
|
88
|
-
<Typography
|
|
90
|
+
<Typography
|
|
91
|
+
variant="h1"
|
|
92
|
+
align="center"
|
|
93
|
+
sx={{
|
|
94
|
+
[theme.breakpoints.down("sm")]: {
|
|
95
|
+
fontSize: "2rem",
|
|
96
|
+
},
|
|
97
|
+
[theme.breakpoints.up("sm")]: {
|
|
98
|
+
fontSize: "4rem",
|
|
99
|
+
},
|
|
100
|
+
[theme.breakpoints.up("lg")]: {
|
|
101
|
+
fontSize: "6rem",
|
|
102
|
+
},
|
|
103
|
+
}}
|
|
104
|
+
>
|
|
89
105
|
{title}
|
|
90
106
|
</Typography>
|
|
91
107
|
{logo?.url && (
|
|
92
108
|
<Image
|
|
93
109
|
src={logo.url}
|
|
94
110
|
alt={logo.alt || "logo"}
|
|
95
|
-
width={
|
|
96
|
-
height={
|
|
111
|
+
width={300}
|
|
112
|
+
height={300}
|
|
97
113
|
/>
|
|
98
114
|
)}
|
|
99
|
-
<Typography
|
|
115
|
+
<Typography
|
|
116
|
+
variant="h3"
|
|
117
|
+
align="center"
|
|
118
|
+
sx={{
|
|
119
|
+
[theme.breakpoints.down("sm")]: {
|
|
120
|
+
fontSize: "1.5rem",
|
|
121
|
+
},
|
|
122
|
+
[theme.breakpoints.up("sm")]: {
|
|
123
|
+
fontSize: "2rem",
|
|
124
|
+
},
|
|
125
|
+
[theme.breakpoints.up("lg")]: {
|
|
126
|
+
fontSize: "3rem",
|
|
127
|
+
},
|
|
128
|
+
}}
|
|
129
|
+
>
|
|
100
130
|
{announcement}
|
|
101
131
|
</Typography>
|
|
102
132
|
</>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import ContactForm from "../components/ContactForm";
|
|
1
|
+
import ContactForm from "../components/ContactForm.tsx";
|
|
2
2
|
import React from "react";
|
|
3
3
|
|
|
4
4
|
export default {
|
|
@@ -6,8 +6,8 @@ export default {
|
|
|
6
6
|
component: ContactForm,
|
|
7
7
|
};
|
|
8
8
|
|
|
9
|
-
const Template = ({ ...args }) => <ContactForm />;
|
|
9
|
+
const Template = ({ ...args }) => <ContactForm data={{ ...args }} />;
|
|
10
10
|
|
|
11
11
|
export const HelloWorld = Template.bind({});
|
|
12
12
|
|
|
13
|
-
HelloWorld.args = {};
|
|
13
|
+
HelloWorld.args = { maxWidth: "md" };
|