umwd-components 0.1.69 → 0.1.71

package/dist/cjs/components/ContactForm.js

@@ -10,11 +10,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-require('prop-types');
 var material = require('@mui/material');
 var isEmail = require('validator/lib/isEmail');
 
 function ContactForm(_ref) {
+  let {
+    data
+  } = _ref;
+  const {
+    maxWidth = "lg"
+  } = data;
   const [formValues, setFormValues] = React.useState({
     name: "",
     email: "",
@@ -23,14 +28,24 @@ function ContactForm(_ref) {
   });
   const [formErrors, setFormErrors] = React.useState({});
   const handleBlur = e => {
-    console.log(e.target.id);
-    console.log(e.target.value);
+    const {
+      id
+    } = e.target;
     const errors = validate(formValues);
-    console.log(errors);
-    setFormErrors({
-      ...formErrors,
-      [e.target.id]: errors[e.target.id]
-    });
+    if (errors[id]) {
+      setFormErrors(prevErrors => ({
+        ...prevErrors,
+        [id]: errors[id]
+      }));
+    } else {
+      setFormErrors(prevErrors => {
+        const updatedErrors = {
+          ...prevErrors
+        };
+        delete updatedErrors[id];
+        return updatedErrors;
+      });
+    }
   };
   const handleChange = e => {
     const {
@@ -41,10 +56,14 @@ function ContactForm(_ref) {
       ...formValues,
       [id]: value
     });
-    console.log("formValues", formValues);
   };
   const handleClear = () => {
-    setFormValues({});
+    setFormValues({
+      name: "",
+      email: "",
+      subject: "",
+      message: ""
+    });
   };
   const handleSendCallback = () => {
     console.log("Send callback");
@@ -69,7 +88,16 @@ function ContactForm(_ref) {
     console.log("errors from validate", errors);
     return errors;
   };
-  return /*#__PURE__*/React.createElement(material.Stack, {
+  return /*#__PURE__*/React.createElement(material.Container, {
+    maxWidth: maxWidth || "lg",
+    sx: {
+      my: 1
+    }
+  }, /*#__PURE__*/React.createElement(material.Paper, {
+    sx: {
+      p: 2
+    }
+  }, /*#__PURE__*/React.createElement(material.Stack, {
     spacing: 2
   }, /*#__PURE__*/React.createElement(material.Typography, {
     variant: "h6",
@@ -82,8 +110,8 @@ function ContactForm(_ref) {
     label: "Name",
     value: formValues.name,
     variant: "outlined",
-    onBlur: e => handleBlur(e),
-    onChange: e => handleChange(e),
+    onBlur: handleBlur,
+    onChange: handleChange,
     error: formErrors.name != undefined ? true : false,
     helperText: formErrors.name
   }), /*#__PURE__*/React.createElement(material.TextField, {
@@ -122,13 +150,12 @@ function ContactForm(_ref) {
   }, /*#__PURE__*/React.createElement(material.Button, {
     variant: "outlined",
     color: "primary",
-    onClick: () => handleClear
+    onClick: handleClear
   }, "Clear"), /*#__PURE__*/React.createElement(material.Button, {
     variant: "contained",
     color: "primary",
     onClick: handleSendCallback
-  }, "Send")));
+  }, "Send")))));
 }
-ContactForm.propTypes = {};
 
 exports.default = ContactForm;

package/dist/cjs/components/Page.js

@@ -16,6 +16,7 @@ var HeroSection = require('./HeroSection.js');
 var FeaturesSection = require('./FeaturesSection.js');
 var IconSection = require('./IconSection.js');
 var material = require('@mui/material');
+var ContactForm = require('./ContactForm.js');
 
 function blockRenderer(block) {
   switch (block.__component) {
@@ -29,6 +30,11 @@ function blockRenderer(block) {
         key: block.id,
         data: block
       });
+    case "layout.contact-section":
+      return /*#__PURE__*/React.createElement(ContactForm.default, {
+        key: block.id,
+        data: block
+      });
     case "layout.text-image-section":
       return /*#__PURE__*/React.createElement(TextImageSection.default, {
         key: block.id,

package/dist/cjs/components/TextImageSection.js

@@ -23,7 +23,7 @@ function TextImageSection(_ref) {
     text,
     image,
     reverse = false,
-    maxWidth
+    maxWidth = "lg"
   } = data;
 
   /* TODO Text_content should deal with linebreaks,

package/dist/cjs/components/WhatsAppClickToChatButton.js

@@ -0,0 +1,77 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var material = require('@mui/material');
+
+function WhatsAppClickToChatButton(_ref) {
+  let {
+    data
+  } = _ref;
+  const {
+    phoneNumber,
+    text,
+    message,
+    color,
+    round,
+    sx
+  } = data;
+  const theme = material.useTheme();
+  const formattedPhoneNumber = phoneNumber.replace(/\D/g, "");
+  const handleClick = () => {
+    let url = "https://wa.me/".concat(formattedPhoneNumber);
+    if (message) {
+      const formattedMessage = encodeURIComponent(message);
+      url = "https://wa.me/".concat(formattedPhoneNumber, "?text=").concat(formattedMessage);
+    }
+    window.open(url, "_blank");
+  };
+  return /*#__PURE__*/React.createElement(material.Button, {
+    variant: "contained",
+    onClick: handleClick,
+    startIcon: /*#__PURE__*/React.createElement(material.SvgIcon, {
+      sx: [round === true && {
+        m: 0,
+        p: 0
+      }]
+    }, /*#__PURE__*/React.createElement(WhatsAppIcon, {
+      fill: color || theme.palette.primary.contrastText
+    })),
+    sx: [{
+      ...sx
+    }, round === true && {
+      display: "grid",
+      justifyContent: "center",
+      alignItems: "center",
+      borderRadius: "50%",
+      p: 1,
+      minWidth: "unset",
+      ".MuiButton-startIcon": {
+        m: 0,
+        p: 0
+      }
+    }]
+  }, !round && (text || "Click to WhatsApp"));
+}
+function WhatsAppIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.extends({
+    viewBox: "0 0 30.667 30.667"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    "stroke-width": "0"
+  }), /*#__PURE__*/React.createElement("g", {
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("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"
+  })));
+}
+
+exports.default = WhatsAppClickToChatButton;

package/dist/cjs/index.js

@@ -15,6 +15,7 @@ var Footer = require('./components/Footer.js');
 var ContactForm = require('./components/ContactForm.js');
 var WebsitePlaceholder = require('./components/WebsitePlaceholder.js');
 var BulletList = require('./components/BulletList.js');
+var WhatsAppClickToChatButton = require('./components/WhatsAppClickToChatButton.js');
 
 
 
@@ -27,3 +28,4 @@ exports.Footer = Footer.default;
 exports.ContactForm = ContactForm.default;
 exports.WebsitePlaceholder = WebsitePlaceholder.default;
 exports.BulletList = BulletList.default;
+exports.WhatsAppClickToChatButton = WhatsAppClickToChatButton.default;

package/dist/esm/components/ContactForm.js

@@ -6,11 +6,16 @@
  */
   
 import React from 'react';
-import 'prop-types';
-import { Stack, Typography, TextField, Button } from '@mui/material';
+import { Container, Paper, Stack, Typography, TextField, Button } from '@mui/material';
 import isEmail from 'validator/lib/isEmail';
 
 function ContactForm(_ref) {
+  let {
+    data
+  } = _ref;
+  const {
+    maxWidth = "lg"
+  } = data;
   const [formValues, setFormValues] = React.useState({
     name: "",
     email: "",
@@ -19,14 +24,24 @@ function ContactForm(_ref) {
   });
   const [formErrors, setFormErrors] = React.useState({});
   const handleBlur = e => {
-    console.log(e.target.id);
-    console.log(e.target.value);
+    const {
+      id
+    } = e.target;
     const errors = validate(formValues);
-    console.log(errors);
-    setFormErrors({
-      ...formErrors,
-      [e.target.id]: errors[e.target.id]
-    });
+    if (errors[id]) {
+      setFormErrors(prevErrors => ({
+        ...prevErrors,
+        [id]: errors[id]
+      }));
+    } else {
+      setFormErrors(prevErrors => {
+        const updatedErrors = {
+          ...prevErrors
+        };
+        delete updatedErrors[id];
+        return updatedErrors;
+      });
+    }
   };
   const handleChange = e => {
     const {
@@ -37,10 +52,14 @@ function ContactForm(_ref) {
       ...formValues,
       [id]: value
     });
-    console.log("formValues", formValues);
   };
   const handleClear = () => {
-    setFormValues({});
+    setFormValues({
+      name: "",
+      email: "",
+      subject: "",
+      message: ""
+    });
   };
   const handleSendCallback = () => {
     console.log("Send callback");
@@ -65,7 +84,16 @@ function ContactForm(_ref) {
     console.log("errors from validate", errors);
     return errors;
   };
-  return /*#__PURE__*/React.createElement(Stack, {
+  return /*#__PURE__*/React.createElement(Container, {
+    maxWidth: maxWidth || "lg",
+    sx: {
+      my: 1
+    }
+  }, /*#__PURE__*/React.createElement(Paper, {
+    sx: {
+      p: 2
+    }
+  }, /*#__PURE__*/React.createElement(Stack, {
     spacing: 2
   }, /*#__PURE__*/React.createElement(Typography, {
     variant: "h6",
@@ -78,8 +106,8 @@ function ContactForm(_ref) {
     label: "Name",
     value: formValues.name,
     variant: "outlined",
-    onBlur: e => handleBlur(e),
-    onChange: e => handleChange(e),
+    onBlur: handleBlur,
+    onChange: handleChange,
     error: formErrors.name != undefined ? true : false,
     helperText: formErrors.name
   }), /*#__PURE__*/React.createElement(TextField, {
@@ -118,13 +146,12 @@ function ContactForm(_ref) {
   }, /*#__PURE__*/React.createElement(Button, {
     variant: "outlined",
     color: "primary",
-    onClick: () => handleClear
+    onClick: handleClear
   }, "Clear"), /*#__PURE__*/React.createElement(Button, {
     variant: "contained",
     color: "primary",
     onClick: handleSendCallback
-  }, "Send")));
+  }, "Send")))));
 }
-ContactForm.propTypes = {};
 
 export { ContactForm as default };

package/dist/esm/components/Page.js

@@ -12,6 +12,7 @@ import { HeroSection } from './HeroSection.js';
 import { FeatureSection } from './FeaturesSection.js';
 import { IconSection } from './IconSection.js';
 import { Box } from '@mui/material';
+import ContactForm from './ContactForm.js';
 
 function blockRenderer(block) {
   switch (block.__component) {
@@ -25,6 +26,11 @@ function blockRenderer(block) {
         key: block.id,
         data: block
       });
+    case "layout.contact-section":
+      return /*#__PURE__*/React.createElement(ContactForm, {
+        key: block.id,
+        data: block
+      });
     case "layout.text-image-section":
       return /*#__PURE__*/React.createElement(TextImageSection, {
         key: block.id,

package/dist/esm/components/TextImageSection.js

@@ -19,7 +19,7 @@ function TextImageSection(_ref) {
     text,
     image,
     reverse = false,
-    maxWidth
+    maxWidth = "lg"
   } = data;
 
   /* TODO Text_content should deal with linebreaks,

package/dist/esm/components/WhatsAppClickToChatButton.js

@@ -0,0 +1,73 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import { useTheme, Button, SvgIcon } from '@mui/material';
+
+function WhatsAppClickToChatButton(_ref) {
+  let {
+    data
+  } = _ref;
+  const {
+    phoneNumber,
+    text,
+    message,
+    color,
+    round,
+    sx
+  } = data;
+  const theme = useTheme();
+  const formattedPhoneNumber = phoneNumber.replace(/\D/g, "");
+  const handleClick = () => {
+    let url = "https://wa.me/".concat(formattedPhoneNumber);
+    if (message) {
+      const formattedMessage = encodeURIComponent(message);
+      url = "https://wa.me/".concat(formattedPhoneNumber, "?text=").concat(formattedMessage);
+    }
+    window.open(url, "_blank");
+  };
+  return /*#__PURE__*/React.createElement(Button, {
+    variant: "contained",
+    onClick: handleClick,
+    startIcon: /*#__PURE__*/React.createElement(SvgIcon, {
+      sx: [round === true && {
+        m: 0,
+        p: 0
+      }]
+    }, /*#__PURE__*/React.createElement(WhatsAppIcon, {
+      fill: color || theme.palette.primary.contrastText
+    })),
+    sx: [{
+      ...sx
+    }, round === true && {
+      display: "grid",
+      justifyContent: "center",
+      alignItems: "center",
+      borderRadius: "50%",
+      p: 1,
+      minWidth: "unset",
+      ".MuiButton-startIcon": {
+        m: 0,
+        p: 0
+      }
+    }]
+  }, !round && (text || "Click to WhatsApp"));
+}
+function WhatsAppIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 30.667 30.667"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    "stroke-width": "0"
+  }), /*#__PURE__*/React.createElement("g", {
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("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"
+  })));
+}
+
+export { WhatsAppClickToChatButton as default };

package/dist/esm/index.js

@@ -13,3 +13,4 @@ export { default as Footer } from './components/Footer.js';
 export { default as ContactForm } from './components/ContactForm.js';
 export { default as WebsitePlaceholder } from './components/WebsitePlaceholder.js';
 export { default as BulletList } from './components/BulletList.js';
+export { default as WhatsAppClickToChatButton } from './components/WhatsAppClickToChatButton.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umwd-components",
-  "version": "0.1.69",
+  "version": "0.1.71",
   "description": "UMWD Component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -88,6 +88,7 @@
     "@fontsource/roboto": "^5.0.12",
     "@mui/types": "^7.2.14",
     "@rollup/plugin-commonjs": "^25.0.7",
+    "@types/validator": "^13.11.9",
     "next-router-mock": "^0.9.12",
     "react": "^18.2.0",
     "react-dnd": "^16.0.1",

package/src/components/ContactForm.tsx

@@ -0,0 +1,179 @@
+"use client";
+
+import React from "react";
+import {
+  Container,
+  Paper,
+  TextField,
+  Typography,
+  Stack,
+  Button,
+} from "@mui/material";
+import isEmail from "validator/lib/isEmail";
+import { Breakpoint } from "@mui/system";
+
+interface ContactFormProps {
+  id: number;
+  __component: string;
+  title: string;
+  maxWidth: Breakpoint;
+}
+
+function ContactForm({ data }: { readonly data: ContactFormProps }) {
+  const { maxWidth = "lg" } = data;
+
+  type FormValues = {
+    name: string;
+    email: string;
+    subject: string;
+    message: string;
+  };
+
+  const [formValues, setFormValues] = React.useState<FormValues>({
+    name: "",
+    email: "",
+    subject: "",
+    message: "",
+  });
+
+  type FormErrors = {
+    name?: string;
+    email?: string;
+    subject?: string;
+    message?: string;
+    [key: string]: string | undefined; // Add index signature
+  };
+
+  const [formErrors, setFormErrors] = React.useState<FormErrors>({});
+
+  const handleBlur = (e: React.FocusEvent<HTMLInputElement>): void => {
+    const { id } = e.target;
+    const errors = validate(formValues);
+    if (errors[id]) {
+      setFormErrors((prevErrors) => ({
+        ...prevErrors,
+        [id]: errors[id],
+      }));
+    } else {
+      setFormErrors((prevErrors) => {
+        const updatedErrors = { ...prevErrors };
+        delete updatedErrors[id];
+        return updatedErrors;
+      });
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    const { id, value } = e.target;
+    setFormValues({ ...formValues, [id]: value });
+  };
+
+  const handleClear = () => {
+    setFormValues({
+      name: "",
+      email: "",
+      subject: "",
+      message: "",
+    });
+  };
+
+  const handleSendCallback = () => {
+    console.log("Send callback");
+  };
+
+  const validate = (values: FormValues) => {
+    console.log("values from validate", values);
+
+    let errors: Partial<FormErrors> = {};
+
+    if (values.name === "") {
+      errors.name = "Name is required";
+    }
+    if (values.email === "") {
+      errors.email = "Email is required";
+    } else if (!isEmail(values.email)) {
+      errors.email = "Invalid email";
+    }
+    if (values.subject === "") {
+      errors.subject = "Subject is required";
+    }
+    if (values.message === "") {
+      errors.message = "Message is required";
+    }
+
+    console.log("errors from validate", errors);
+
+    return errors;
+  };
+
+  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>
+          </Stack>
+        </Stack>
+      </Paper>
+    </Container>
+  );
+}
+
+export default ContactForm;

package/src/components/Page.js

@@ -7,6 +7,7 @@ import { HeroSection } from "./HeroSection.tsx";
 import { FeatureSection } from "./FeaturesSection.tsx";
 import { IconSection } from "./IconSection.tsx";
 import { Box } from "@mui/material";
+import ContactForm from "./ContactForm.tsx";
 
 function blockRenderer(block) {
   switch (block.__component) {
@@ -14,10 +15,13 @@ function blockRenderer(block) {
       return <HeroSection key={block.id} data={block} />;
     case "layout.features-section":
       return <FeatureSection key={block.id} data={block} />;
+    case "layout.contact-section":
+      return <ContactForm key={block.id} data={block} />;
     case "layout.text-image-section":
       return <TextImageSection key={block.id} data={block} />;
     case "layout.icon-section":
       return <IconSection key={block.id} data={block} />;
+
     default:
       return null;
   }

package/src/components/TextImageSection.tsx

@@ -24,7 +24,7 @@ interface TextImageSectionProps {
 }
 
 function TextImageSection({ data }: Readonly<TextImageSectionProps>) {
-  const { title, text, image, reverse = false, maxWidth } = data;
+  const { title, text, image, reverse = false, maxWidth = "lg" } = data;
 
   /* TODO Text_content should deal with linebreaks,
   reading up upon mui-markdown docs is advised */

package/src/components/WhatsAppClickToChatButton.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { Button, SvgIcon, useTheme } from "@mui/material";
+
+interface WhatsAppClickToChatButtonProps {
+  phoneNumber: string;
+  text?: string;
+  message?: string;
+  color?: string;
+  round?: boolean;
+  sx?: React.CSSProperties;
+}
+
+function WhatsAppClickToChatButton({
+  data,
+}: {
+  readonly data: WhatsAppClickToChatButtonProps;
+}) {
+  const { phoneNumber, text, message, color, round, sx } = data;
+
+  const theme = useTheme();
+
+  const formattedPhoneNumber = phoneNumber.replace(/\D/g, "");
+
+  const handleClick = () => {
+    let url = `https://wa.me/${formattedPhoneNumber}`;
+    if (message) {
+      const formattedMessage = encodeURIComponent(message);
+      url = `https://wa.me/${formattedPhoneNumber}?text=${formattedMessage}`;
+    }
+    window.open(url, "_blank");
+  };
+
+  return (
+    <Button
+      variant="contained"
+      onClick={handleClick}
+      startIcon={
+        <SvgIcon sx={[round === true && { m: 0, p: 0 }]}>
+          <WhatsAppIcon fill={color || theme.palette.primary.contrastText} />
+        </SvgIcon>
+      }
+      sx={[
+        { ...sx },
+        round === true && {
+          display: "grid",
+          justifyContent: "center",
+          alignItems: "center",
+          borderRadius: "50%",
+          p: 1,
+          minWidth: "unset",
+          ".MuiButton-startIcon": { m: 0, p: 0 },
+        },
+      ]}
+    >
+      {!round && (text || "Click to WhatsApp")}
+    </Button>
+  );
+}
+
+export default WhatsAppClickToChatButton;
+
+function WhatsAppIcon(props: any) {
+  return (
+    <svg viewBox="0 0 30.667 30.667" {...props}>
+      <g stroke-width="0"></g>
+      <g stroke-linecap="round" stroke-linejoin="round"></g>
+      <g>
+        <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>
+      </g>
+    </svg>
+  );
+}

package/src/index.js

@@ -10,6 +10,7 @@ export { default as NavBar } from "./components/NavBar";
 export { default as TextImageSection } from "./components/TextImageSection.tsx";
 export { default as Page } from "./components/Page";
 export { default as Footer } from "./components/Footer";
-export { default as ContactForm } from "./components/ContactForm";
+export { default as ContactForm } from "./components/ContactForm.tsx";
 export { default as WebsitePlaceholder } from "./components/WebsitePlaceholder";
 export { default as BulletList } from "./components/BulletList";
+export { default as WhatsAppClickToChatButton } from "./components/WhatsAppClickToChatButton.tsx";

package/src/stories/Page.stories.js

@@ -313,5 +313,10 @@ AMH.args = {
         },
       ],
     },
+    {
+      id: 1,
+      __component: "layout.contact-section",
+      title: "Contact us",
+    },
   ],
 };

package/src/stories/WhatsAppClickToChatButton.stories.js

@@ -0,0 +1,69 @@
+import React from "react";
+import WhatsAppClickToChatButton from "../components/WhatsAppClickToChatButton.tsx";
+
+export default {
+  title: "UMWD/WhatsAppClickToChatButton",
+  component: WhatsAppClickToChatButton,
+};
+
+const Template = ({ ...args }) => {
+  return <WhatsAppClickToChatButton {...args} />;
+};
+
+export const Round = Template.bind({});
+
+Round.args = {
+  data: {
+    phoneNumber: "+1234567890",
+    message: "Hello, how can I help you?",
+    color: "#25D366",
+    round: true,
+    sx: {
+      position: "fixed",
+      bottom: "20px",
+      right: "20px",
+      zIndex: 1000,
+      width: "40px",
+      height: "40px",
+    },
+  },
+};
+
+export const WithText = Template.bind({});
+
+WithText.args = {
+  data: {
+    phoneNumber: "+1234567890",
+    message: "Hello, how can I help you?",
+    color: "red",
+    round: false,
+    sx: {
+      position: "fixed",
+      bottom: "20px",
+      right: "20px",
+    },
+  },
+};
+
+export const SX = Template.bind({});
+
+SX.args = {
+  data: {
+    phoneNumber: "+1234567890",
+    message: "Hello, how can I help you?",
+    color: "red",
+    round: true,
+    sx: {
+      position: "fixed",
+      bottom: "20px",
+      right: "20px",
+      zIndex: 1000,
+      width: "70px",
+      height: "70px",
+      ".MuiSvgIcon-root": {
+        width: "40px",
+        height: "40px",
+      },
+    },
+  },
+};

package/src/components/ContactForm.js

@@ -1,131 +0,0 @@
-"use client";
-
-import React from "react";
-import PropTypes from "prop-types";
-import { TextField, Typography, Stack, Button } from "@mui/material";
-import isEmail from "validator/lib/isEmail";
-
-function ContactForm({ ...args }) {
-  const [formValues, setFormValues] = React.useState({
-    name: "",
-    email: "",
-    subject: "",
-    message: "",
-  });
-  const [formErrors, setFormErrors] = React.useState({});
-
-  const handleBlur = (e) => {
-    console.log(e.target.id);
-    console.log(e.target.value);
-    const errors = validate(formValues);
-    console.log(errors);
-    setFormErrors({ ...formErrors, [e.target.id]: errors[e.target.id] });
-  };
-
-  const handleChange = (e) => {
-    const { id, value } = e.target;
-    setFormValues({ ...formValues, [id]: value });
-    console.log("formValues", formValues);
-  };
-
-  const handleClear = () => {
-    setFormValues({});
-  };
-
-  const handleSendCallback = () => {
-    console.log("Send callback");
-  };
-
-  const validate = (values) => {
-    console.log("values from validate", values);
-    let errors = {};
-
-    if (values.name === "") {
-      errors.name = "Name is required";
-    }
-    if (values.email === "") {
-      errors.email = "Email is required";
-    } else if (!isEmail(values.email)) {
-      errors.email = "Invalid email";
-    }
-    if (values.subject === "") {
-      errors.subject = "Subject is required";
-    }
-    if (values.message === "") {
-      errors.message = "Message is required";
-    }
-
-    console.log("errors from validate", errors);
-
-    return errors;
-  };
-
-  return (
-    <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={(e) => handleBlur(e)}
-        onChange={(e) => handleChange(e)}
-        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>
-      </Stack>
-    </Stack>
-  );
-}
-
-ContactForm.propTypes = {};
-
-export default ContactForm;