umwd-components 0.1.84 → 0.1.85

package/dist/cjs/components/ContactForm.js

@@ -18,7 +18,7 @@ function ContactForm(_ref) {
     data
   } = _ref;
   const {
-    maxWidth = "lg"
+    maxWidth
   } = data;
   const [formValues, setFormValues] = React.useState({
     name: "",
@@ -27,36 +27,43 @@ function ContactForm(_ref) {
     message: ""
   });
   const [formErrors, setFormErrors] = React.useState({});
+
+  // Setting button text on form submission
+  React.useState("Send");
+
+  // Setting success or failure messages states
+  const [showSuccessMessage, setShowSuccessMessage] = React.useState(false);
+  const [showFailureMessage, setShowFailureMessage] = React.useState(false);
+  const handleChange = e => {
+    const {
+      name,
+      value
+    } = e.target;
+    setFormValues({
+      ...formValues,
+      [name]: value
+    });
+  };
   const handleBlur = e => {
     const {
-      id
+      name
     } = e.target;
     const errors = validate(formValues);
-    if (errors[id]) {
+    if (errors[name]) {
       setFormErrors(prevErrors => ({
         ...prevErrors,
-        [id]: errors[id]
+        [name]: errors[name]
       }));
     } else {
       setFormErrors(prevErrors => {
         const updatedErrors = {
           ...prevErrors
         };
-        delete updatedErrors[id];
+        delete updatedErrors[name];
         return updatedErrors;
       });
     }
   };
-  const handleChange = e => {
-    const {
-      id,
-      value
-    } = e.target;
-    setFormValues({
-      ...formValues,
-      [id]: value
-    });
-  };
   const handleClear = () => {
     setFormValues({
       name: "",
@@ -65,8 +72,38 @@ function ContactForm(_ref) {
       message: ""
     });
   };
-  const handleSendCallback = () => {
-    console.log("Send callback");
+
+  /* const handleSendCallback = () => {
+    console.log("Send callback");
+  }; */
+
+  const handleSubmit = async e => {
+    e.preventDefault();
+    let isValidForm = validate(formValues);
+    if (Object.keys(isValidForm).length === 0) {
+      const res = await fetch("/api/sendgrid", {
+        body: JSON.stringify({
+          email: formValues.email,
+          fullname: formValues.name,
+          subject: formValues.subject,
+          message: formValues.message
+        }),
+        headers: {
+          "Content-Type": "application/json"
+        },
+        method: "POST"
+      });
+      const {
+        error
+      } = await res.json();
+      if (error) {
+        setShowFailureMessage(true);
+        console.log(error);
+        return;
+      } else {
+        setShowSuccessMessage(true);
+      }
+    }
   };
   const validate = values => {
     console.log("values from validate", values);
@@ -89,24 +126,46 @@ function ContactForm(_ref) {
     return errors;
   };
   return /*#__PURE__*/React.createElement(material.Container, {
-    maxWidth: maxWidth || "lg",
+    maxWidth: maxWidth ? maxWidth : "lg",
     sx: {
       my: 1
     }
-  }, /*#__PURE__*/React.createElement(material.Paper, {
+  }, /*#__PURE__*/React.createElement(material.Stack, {
+    spacing: 2,
     sx: {
-      p: 2
+      width: "100%"
     }
-  }, /*#__PURE__*/React.createElement(material.Stack, {
-    spacing: 2
   }, /*#__PURE__*/React.createElement(material.Typography, {
     variant: "h6",
     align: "center"
   }, "Write us"), /*#__PURE__*/React.createElement(material.Typography, {
     variant: "body1",
     align: "center"
-  }, "We're open for any suggestion or just to have a chat"), /*#__PURE__*/React.createElement(material.TextField, {
+  }, "We're open for any suggestion or just to have a chat"), showSuccessMessage && /*#__PURE__*/React.createElement(material.Paper, {
+    sx: {
+      p: 2
+    }
+  }, /*#__PURE__*/React.createElement(material.Stack, {
+    spacing: 2
+  }, /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "h6"
+  }, "Thank you!"), /*#__PURE__*/React.createElement(material.Typography, null, "Your e-mail has been successfully sent!"))), showFailureMessage && /*#__PURE__*/React.createElement(material.Paper, {
+    sx: {
+      p: 2
+    }
+  }, /*#__PURE__*/React.createElement(material.Stack, {
+    spacing: 2
+  }, /*#__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, {
+    variant: "contained"
+  }, "try again")))), !showSuccessMessage && !showFailureMessage && /*#__PURE__*/React.createElement(material.Paper, {
+    sx: {
+      p: 2
+    }
+  }, /*#__PURE__*/React.createElement(material.Stack, {
+    spacing: 2
+  }, /*#__PURE__*/React.createElement(material.TextField, {
     id: "name",
+    name: "name",
     label: "Name",
     value: formValues.name,
     variant: "outlined",
@@ -116,6 +175,7 @@ function ContactForm(_ref) {
     helperText: formErrors.name
   }), /*#__PURE__*/React.createElement(material.TextField, {
     id: "email",
+    name: "email",
     label: "Email",
     value: formValues.email,
     variant: "outlined",
@@ -125,6 +185,7 @@ function ContactForm(_ref) {
     helperText: formErrors.email
   }), /*#__PURE__*/React.createElement(material.TextField, {
     id: "subject",
+    name: "subject",
     label: "Subject",
     value: formValues.subject,
     variant: "outlined",
@@ -134,6 +195,7 @@ function ContactForm(_ref) {
     helperText: formErrors.subject
   }), /*#__PURE__*/React.createElement(material.TextField, {
     id: "message",
+    name: "message",
     label: "Message",
     value: formValues.message,
     variant: "outlined",
@@ -153,8 +215,7 @@ function ContactForm(_ref) {
     onClick: handleClear
   }, "Clear"), /*#__PURE__*/React.createElement(material.Button, {
     variant: "contained",
-    color: "primary",
-    onClick: handleSendCallback
+    onClick: handleSubmit
   }, "Send")))));
 }
 

package/dist/esm/components/ContactForm.js

@@ -6,7 +6,7 @@
  */
   
 import React from 'react';
-import { Container, Paper, Stack, Typography, TextField, Button } from '@mui/material';
+import { Container, Stack, Typography, Paper, Button, TextField } from '@mui/material';
 import isEmail from 'validator/lib/isEmail';
 
 function ContactForm(_ref) {
@@ -14,7 +14,7 @@ function ContactForm(_ref) {
     data
   } = _ref;
   const {
-    maxWidth = "lg"
+    maxWidth
   } = data;
   const [formValues, setFormValues] = React.useState({
     name: "",
@@ -23,36 +23,43 @@ function ContactForm(_ref) {
     message: ""
   });
   const [formErrors, setFormErrors] = React.useState({});
+
+  // Setting button text on form submission
+  React.useState("Send");
+
+  // Setting success or failure messages states
+  const [showSuccessMessage, setShowSuccessMessage] = React.useState(false);
+  const [showFailureMessage, setShowFailureMessage] = React.useState(false);
+  const handleChange = e => {
+    const {
+      name,
+      value
+    } = e.target;
+    setFormValues({
+      ...formValues,
+      [name]: value
+    });
+  };
   const handleBlur = e => {
     const {
-      id
+      name
     } = e.target;
     const errors = validate(formValues);
-    if (errors[id]) {
+    if (errors[name]) {
       setFormErrors(prevErrors => ({
         ...prevErrors,
-        [id]: errors[id]
+        [name]: errors[name]
       }));
     } else {
       setFormErrors(prevErrors => {
         const updatedErrors = {
           ...prevErrors
         };
-        delete updatedErrors[id];
+        delete updatedErrors[name];
         return updatedErrors;
       });
     }
   };
-  const handleChange = e => {
-    const {
-      id,
-      value
-    } = e.target;
-    setFormValues({
-      ...formValues,
-      [id]: value
-    });
-  };
   const handleClear = () => {
     setFormValues({
       name: "",
@@ -61,8 +68,38 @@ function ContactForm(_ref) {
       message: ""
     });
   };
-  const handleSendCallback = () => {
-    console.log("Send callback");
+
+  /* const handleSendCallback = () => {
+    console.log("Send callback");
+  }; */
+
+  const handleSubmit = async e => {
+    e.preventDefault();
+    let isValidForm = validate(formValues);
+    if (Object.keys(isValidForm).length === 0) {
+      const res = await fetch("/api/sendgrid", {
+        body: JSON.stringify({
+          email: formValues.email,
+          fullname: formValues.name,
+          subject: formValues.subject,
+          message: formValues.message
+        }),
+        headers: {
+          "Content-Type": "application/json"
+        },
+        method: "POST"
+      });
+      const {
+        error
+      } = await res.json();
+      if (error) {
+        setShowFailureMessage(true);
+        console.log(error);
+        return;
+      } else {
+        setShowSuccessMessage(true);
+      }
+    }
   };
   const validate = values => {
     console.log("values from validate", values);
@@ -85,24 +122,46 @@ function ContactForm(_ref) {
     return errors;
   };
   return /*#__PURE__*/React.createElement(Container, {
-    maxWidth: maxWidth || "lg",
+    maxWidth: maxWidth ? maxWidth : "lg",
     sx: {
       my: 1
     }
-  }, /*#__PURE__*/React.createElement(Paper, {
+  }, /*#__PURE__*/React.createElement(Stack, {
+    spacing: 2,
     sx: {
-      p: 2
+      width: "100%"
     }
-  }, /*#__PURE__*/React.createElement(Stack, {
-    spacing: 2
   }, /*#__PURE__*/React.createElement(Typography, {
     variant: "h6",
     align: "center"
   }, "Write us"), /*#__PURE__*/React.createElement(Typography, {
     variant: "body1",
     align: "center"
-  }, "We're open for any suggestion or just to have a chat"), /*#__PURE__*/React.createElement(TextField, {
+  }, "We're open for any suggestion or just to have a chat"), showSuccessMessage && /*#__PURE__*/React.createElement(Paper, {
+    sx: {
+      p: 2
+    }
+  }, /*#__PURE__*/React.createElement(Stack, {
+    spacing: 2
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "h6"
+  }, "Thank you!"), /*#__PURE__*/React.createElement(Typography, null, "Your e-mail has been successfully sent!"))), showFailureMessage && /*#__PURE__*/React.createElement(Paper, {
+    sx: {
+      p: 2
+    }
+  }, /*#__PURE__*/React.createElement(Stack, {
+    spacing: 2
+  }, /*#__PURE__*/React.createElement(Typography, null, "I am sorry, something went wrong, you could email me directly on info@jellepaulus.nl"), /*#__PURE__*/React.createElement(Button, {
+    variant: "contained"
+  }, "try again")))), !showSuccessMessage && !showFailureMessage && /*#__PURE__*/React.createElement(Paper, {
+    sx: {
+      p: 2
+    }
+  }, /*#__PURE__*/React.createElement(Stack, {
+    spacing: 2
+  }, /*#__PURE__*/React.createElement(TextField, {
     id: "name",
+    name: "name",
     label: "Name",
     value: formValues.name,
     variant: "outlined",
@@ -112,6 +171,7 @@ function ContactForm(_ref) {
     helperText: formErrors.name
   }), /*#__PURE__*/React.createElement(TextField, {
     id: "email",
+    name: "email",
     label: "Email",
     value: formValues.email,
     variant: "outlined",
@@ -121,6 +181,7 @@ function ContactForm(_ref) {
     helperText: formErrors.email
   }), /*#__PURE__*/React.createElement(TextField, {
     id: "subject",
+    name: "subject",
     label: "Subject",
     value: formValues.subject,
     variant: "outlined",
@@ -130,6 +191,7 @@ function ContactForm(_ref) {
     helperText: formErrors.subject
   }), /*#__PURE__*/React.createElement(TextField, {
     id: "message",
+    name: "message",
     label: "Message",
     value: formValues.message,
     variant: "outlined",
@@ -149,8 +211,7 @@ function ContactForm(_ref) {
     onClick: handleClear
   }, "Clear"), /*#__PURE__*/React.createElement(Button, {
     variant: "contained",
-    color: "primary",
-    onClick: handleSendCallback
+    onClick: handleSubmit
   }, "Send")))));
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umwd-components",
-  "version": "0.1.84",
+  "version": "0.1.85",
   "description": "UMWD Component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/ContactForm.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+// this component requires the app/api/sendgrid.js function to be created
+
 import React from "react";
 import {
   Container,
@@ -10,17 +12,18 @@ import {
   Button,
 } from "@mui/material";
 import isEmail from "validator/lib/isEmail";
-import { Breakpoint } from "@mui/system";
+
+type MaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false | undefined;
 
 interface ContactFormProps {
   id: number;
   __component: string;
   title: string;
-  maxWidth: Breakpoint;
+  maxWidth: MaxWidth;
 }
 
 function ContactForm({ data }: { readonly data: ContactFormProps }) {
-  const { maxWidth = "lg" } = data;
+  const { maxWidth } = data;
 
   type FormValues = {
     name: string;
@@ -46,28 +49,35 @@ function ContactForm({ data }: { readonly data: ContactFormProps }) {
 
   const [formErrors, setFormErrors] = React.useState<FormErrors>({});
 
+  // Setting button text on form submission
+  const [buttonText, setButtonText] = React.useState("Send");
+
+  // Setting success or failure messages states
+  const [showSuccessMessage, setShowSuccessMessage] = React.useState(false);
+  const [showFailureMessage, setShowFailureMessage] = React.useState(false);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    const { name, value } = e.target;
+    setFormValues({ ...formValues, [name]: value });
+  };
+
   const handleBlur = (e: React.FocusEvent<HTMLInputElement>): void => {
-    const { id } = e.target;
+    const { name } = e.target;
     const errors = validate(formValues);
-    if (errors[id]) {
+    if (errors[name]) {
       setFormErrors((prevErrors) => ({
         ...prevErrors,
-        [id]: errors[id],
+        [name]: errors[name],
       }));
     } else {
       setFormErrors((prevErrors) => {
         const updatedErrors = { ...prevErrors };
-        delete updatedErrors[id];
+        delete updatedErrors[name];
         return updatedErrors;
       });
     }
   };
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
-    const { id, value } = e.target;
-    setFormValues({ ...formValues, [id]: value });
-  };
-
   const handleClear = () => {
     setFormValues({
       name: "",
@@ -77,8 +87,39 @@ function ContactForm({ data }: { readonly data: ContactFormProps }) {
     });
   };
 
-  const handleSendCallback = () => {
+  /* const handleSendCallback = () => {
     console.log("Send callback");
+  }; */
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    let isValidForm = validate(formValues);
+
+    if (Object.keys(isValidForm).length === 0) {
+      const res = await fetch("/api/sendgrid", {
+        body: JSON.stringify({
+          email: formValues.email,
+          fullname: formValues.name,
+          subject: formValues.subject,
+          message: formValues.message,
+        }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+        method: "POST",
+      });
+
+      const { error } = await res.json();
+
+      if (error) {
+        setShowFailureMessage(true);
+        console.log(error);
+        return;
+      } else {
+        setShowSuccessMessage(true);
+      }
+    }
   };
 
   const validate = (values: FormValues) => {
@@ -107,71 +148,97 @@ function ContactForm({ data }: { readonly data: ContactFormProps }) {
   };
 
   return (
-    <Container maxWidth={maxWidth || "lg"} sx={{ my: 1 }}>
-      <Paper sx={{ p: 2 }}>
-        <Stack spacing={2}>
-          <Typography variant="h6" align="center">
-            Write us
-          </Typography>
-          <Typography variant="body1" align="center">
-            We're open for any suggestion or just to have a chat
-          </Typography>
-          <TextField
-            id="name"
-            label="Name"
-            value={formValues.name}
-            variant="outlined"
-            onBlur={handleBlur}
-            onChange={handleChange}
-            error={formErrors.name != undefined ? true : false}
-            helperText={formErrors.name}
-          />
-          <TextField
-            id="email"
-            label="Email"
-            value={formValues.email}
-            variant="outlined"
-            onBlur={handleBlur}
-            onChange={handleChange}
-            error={formErrors.email != undefined ? true : false}
-            helperText={formErrors.email}
-          />
-          <TextField
-            id="subject"
-            label="Subject"
-            value={formValues.subject}
-            variant="outlined"
-            onBlur={handleBlur}
-            onChange={handleChange}
-            error={formErrors.subject != undefined}
-            helperText={formErrors.subject}
-          />
-          <TextField
-            id="message"
-            label="Message"
-            value={formValues.message}
-            variant="outlined"
-            multiline
-            minRows={5}
-            onBlur={handleBlur}
-            onChange={handleChange}
-            error={formErrors.message != undefined}
-            helperText={formErrors.message}
-          />
-          <Stack direction={"row"} spacing={2} justifyContent={"end"}>
-            <Button variant="outlined" color="primary" onClick={handleClear}>
-              Clear
-            </Button>
-            <Button
-              variant="contained"
-              color="primary"
-              onClick={handleSendCallback}
-            >
-              Send
-            </Button>
+    <Container maxWidth={maxWidth ? maxWidth : "lg"} sx={{ my: 1 }}>
+      <Stack spacing={2} sx={{ width: "100%" }}>
+        <Typography variant="h6" align="center">
+          Write us
+        </Typography>
+        <Typography variant="body1" align="center">
+          We're open for any suggestion or just to have a chat
+        </Typography>
+        {showSuccessMessage && (
+          <Paper sx={{ p: 2 }}>
+            <Stack spacing={2}>
+              <Typography variant="h6">Thank you!</Typography>
+              <Typography>Your e-mail has been successfully sent!</Typography>
+            </Stack>
+          </Paper>
+        )}
+        {showFailureMessage && (
+          <Paper sx={{ p: 2 }}>
+            <Stack spacing={2}>
+              <Typography>
+                I am sorry, something went wrong, you could email me directly on
+                info@jellepaulus.nl
+              </Typography>
+              <Button variant="contained">try again</Button>
+            </Stack>
+          </Paper>
+        )}
+      </Stack>
+      {!showSuccessMessage && !showFailureMessage && (
+        <Paper sx={{ p: 2 }}>
+          <Stack spacing={2}>
+            <TextField
+              id="name"
+              name="name"
+              label="Name"
+              value={formValues.name}
+              variant="outlined"
+              onBlur={handleBlur}
+              onChange={handleChange}
+              error={formErrors.name != undefined ? true : false}
+              helperText={formErrors.name}
+            />
+
+            <TextField
+              id="email"
+              name="email"
+              label="Email"
+              value={formValues.email}
+              variant="outlined"
+              onBlur={handleBlur}
+              onChange={handleChange}
+              error={formErrors.email != undefined ? true : false}
+              helperText={formErrors.email}
+            />
+
+            <TextField
+              id="subject"
+              name="subject"
+              label="Subject"
+              value={formValues.subject}
+              variant="outlined"
+              onBlur={handleBlur}
+              onChange={handleChange}
+              error={formErrors.subject != undefined}
+              helperText={formErrors.subject}
+            />
+
+            <TextField
+              id="message"
+              name="message"
+              label="Message"
+              value={formValues.message}
+              variant="outlined"
+              multiline
+              minRows={5}
+              onBlur={handleBlur}
+              onChange={handleChange}
+              error={formErrors.message != undefined}
+              helperText={formErrors.message}
+            />
+            <Stack direction={"row"} spacing={2} justifyContent={"end"}>
+              <Button variant="outlined" color="primary" onClick={handleClear}>
+                Clear
+              </Button>
+              <Button variant="contained" onClick={handleSubmit}>
+                Send
+              </Button>
+            </Stack>
           </Stack>
-        </Stack>
-      </Paper>
+        </Paper>
+      )}
     </Container>
   );
 }

package/src/stories/ContactForm.stories.js

@@ -1,4 +1,4 @@
-import ContactForm from "../components/ContactForm";
+import ContactForm from "../components/ContactForm.tsx";
 import React from "react";
 
 export default {
@@ -6,8 +6,8 @@ export default {
   component: ContactForm,
 };
 
-const Template = ({ ...args }) => <ContactForm />;
+const Template = ({ ...args }) => <ContactForm data={{ ...args }} />;
 
 export const HelloWorld = Template.bind({});
 
-HelloWorld.args = {};
+HelloWorld.args = { maxWidth: "md" };