@crystaldesign/widget-contact-form 25.2.0-rc.4 → 25.2.0-rc.5

package/build/esm/index.js

@@ -48,9 +48,13 @@ function styleInject(css, ref) {
 var form = "form-B77D-";
 var input = "input-oPXuT";
 var textarea = "textarea-cMW-q";
+var inputGroup = "inputGroup-gO790";
 var button = "button-fOW5S";
 var agbContainer = "agbContainer--O-xN";
-var css_248z = ".form-B77D- {\n  display: flex;\n  flex-direction: column;\n  padding: 10px;\n  gap: 1.3rem;\n  font-family: 'Roboto';\n}\n\n.input-oPXuT,\n.textarea-cMW-q {\n  padding: 0.5rem;\n  border: 1px solid #ccc;\n}\n\n.textarea-cMW-q {\n  min-height: 150px;\n  font-family: 'Roboto';\n}\n\n.button-fOW5S {\n  padding: 0.75rem;\n  background-color: #6c757d;\n  background-color: var(--primaryColor, #6c757d);\n  color: white;\n  border: none;\n  cursor: pointer;\n}\n\n.button-fOW5S:disabled {\n  background-color: #ccc;\n  cursor: not-allowed;\n  color: #666;\n}\n\n.button-fOW5S:enabled:hover {\n  background-color: #5a6268;\n  background-color: var(--primaryColor, #5a6268);\n}\n\n.agbContainer--O-xN {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 10px;\n}\n";
+var checkAgbText = "checkAgbText-Jl3wz";
+var errorBox = "errorBox-hMx0W";
+var errorMailValidation = "errorMailValidation-HNoLo";
+var css_248z = ".form-B77D- {\n  display: flex;\n  flex-direction: column;\n  padding: 10px;\n  gap: 1.3rem;\n  font-family: 'Roboto';\n}\n\n.input-oPXuT,\n.textarea-cMW-q {\n  padding: 0.5rem;\n  border: 1px solid #ccc;\n}\n\n.inputGroup-gO790 {\n  display: flex;\n  flex-direction: column;\n}\n.textarea-cMW-q {\n  min-height: 150px;\n  font-family: 'Roboto';\n  resize: none;\n}\n\n.button-fOW5S {\n  padding: 0.75rem;\n  background-color: #6c757d;\n  background-color: var(--primaryColor, #6c757d);\n  color: white;\n  border: none;\n  cursor: pointer;\n}\n\n.button-fOW5S:disabled {\n  background-color: #ccc;\n  cursor: not-allowed;\n  color: #666;\n}\n\n.button-fOW5S:enabled:hover {\n  background-color: #5a6268;\n  background-color: var(--primaryColor, #5a6268);\n}\n\n.agbContainer--O-xN {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 10px;\n}\n.agbContainer--O-xN input {\n  transform: scale(1.5);\n}\n\n.checkAgbText-Jl3wz {\n  display: flex;\n  flex-direction: column;\n  font-size: 12px;\n}\n\n.errorBox-hMx0W {\n  background-color: #fdecea; /* Helles Rot */\n  border-left: 4px solid #e53e3e; /* Dunkelrote linke Linie */\n  color: #b71c1c; /* Kräftiges Rot für den Text */\n  padding: 10px;\n  border-radius: 6px;\n  font-weight: bold;\n}\n.errorMailValidation-HNoLo {\n  color: #d9534f; /* Dezentes Rot */\n  font-size: 13px; /* Kleine Schrift */\n  margin-top: 4px;\n  font-weight: 500; /* Etwas kräftiger für bessere Lesbarkeit */\n}\n";
 styleInject(css_248z);
 
 /**
@@ -195,29 +199,27 @@ function useContactForm(settings) {
             _context.next = 7;
             return sendMail(apiConfig.messageService, jwt, organization._id, variant === 'CLIENT' ? email : contactFormSettings.mailTo, variant, data, attachments, (_ref = i18n.language.toUpperCase()) !== null && _ref !== void 0 ? _ref : 'DE');
           case 7:
+            toggleLoading('sendMail');
             openModal({
               content: t('modal.success.sendingcontactform'),
               accept: true
             });
-            _context.next = 13;
+            _context.next = 15;
             break;
-          case 10:
-            _context.prev = 10;
+          case 11:
+            _context.prev = 11;
             _context.t0 = _context["catch"](0);
+            toggleLoading('sendMail');
             openModal({
               title: t('Error'),
               content: t('modal.error.sendingcontactform') + _context.t0,
               accept: true
             });
-          case 13:
-            _context.prev = 13;
-            toggleLoading('sendMail');
-            return _context.finish(13);
-          case 16:
+          case 15:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[0, 10, 13, 16]]);
+      }, _callee, null, [[0, 11]]);
     }));
     return _sendEMail.apply(this, arguments);
   }
@@ -243,9 +245,14 @@ function useContactForm(settings) {
     }
     return undefined;
   }
+  var validateEmail = function validateEmail(email) {
+    var regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return regex.test(email);
+  };
   return {
     sendEMail: sendEMail,
-    navigationConfiguration: navigationConfiguration
+    navigationConfiguration: navigationConfiguration,
+    validateEmail: validateEmail
   };
 }
 
@@ -261,31 +268,50 @@ var MainComponent = function MainComponent(_ref) {
     t = _useTranslation.t;
   var _useContactForm = useContactForm(settings),
     sendEMail = _useContactForm.sendEMail,
-    navigationConfiguration = _useContactForm.navigationConfiguration;
+    navigationConfiguration = _useContactForm.navigationConfiguration,
+    validateEmail = _useContactForm.validateEmail;
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
-    name = _useState2[0],
-    setName = _useState2[1];
+    error = _useState2[0],
+    setError = _useState2[1];
   var _useState3 = useState(''),
     _useState4 = _slicedToArray(_useState3, 2),
-    email = _useState4[0],
-    setEmail = _useState4[1];
+    name = _useState4[0],
+    setName = _useState4[1];
   var _useState5 = useState(''),
     _useState6 = _slicedToArray(_useState5, 2),
-    message = _useState6[0],
-    setMessage = _useState6[1];
-  var _useState7 = useState(false),
+    email = _useState6[0],
+    setEmail = _useState6[1];
+  var _useState7 = useState(''),
     _useState8 = _slicedToArray(_useState7, 2),
-    acceptAgbs = _useState8[0],
-    setAcceptAgbs = _useState8[1];
+    message = _useState8[0],
+    setMessage = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    acceptAgbs = _useState10[0],
+    setAcceptAgbs = _useState10[1];
+  var _useState11 = useState(''),
+    _useState12 = _slicedToArray(_useState11, 2),
+    emailError = _useState12[0],
+    setEmailError = _useState12[1];
+  var inputOk = name && validateEmail(email) && message && acceptAgbs;
+  var handleEmailChange = function handleEmailChange(e) {
+    var value = e.target.value;
+    setEmail(value);
+    if (!validateEmail(value)) {
+      setEmailError(t('input.mail.validation.error'));
+    } else {
+      setEmailError('');
+    }
+  };
   var handleSubmit = function handleSubmit() {
     if (action === 'SEND_MAIL') {
-      if (name && email && message) {
+      if (inputOk) {
         var attachments = basket !== null && basket !== void 0 && basket.PDFDocumentURL ? [basket === null || basket === void 0 ? void 0 : basket.PDFDocumentURL] : undefined;
         sendEMail(name, email, message, 'DEFAULT', attachments, basket === null || basket === void 0 ? void 0 : basket.DivaNr);
         sendEMail(name, email, message, 'CLIENT', attachments, undefined);
       } else {
-        alert(t('contactform.error.fields'));
+        setError(t('contactform.error.fields'));
       }
     } else if (onSubmit) {
       onSubmit({
@@ -299,7 +325,6 @@ var MainComponent = function MainComponent(_ref) {
     children: [title && /*#__PURE__*/jsx("h2", {
       children: t(title, title)
     }), /*#__PURE__*/jsxs("div", {
-      id: "contactForm",
       className: form,
       children: [/*#__PURE__*/jsx("input", {
         type: "text",
@@ -311,16 +336,20 @@ var MainComponent = function MainComponent(_ref) {
         required: true,
         className: input,
         placeholder: t('contactform.placeholder.name')
-      }), /*#__PURE__*/jsx("input", {
-        type: "email",
-        id: "email",
-        value: email,
-        onChange: function onChange(e) {
-          return setEmail(e.target.value);
-        },
-        required: true,
-        className: input,
-        placeholder: t('contactform.placeholder.email')
+      }), /*#__PURE__*/jsxs("div", {
+        className: inputGroup,
+        children: [/*#__PURE__*/jsx("input", {
+          type: "email",
+          id: "email",
+          value: email,
+          onChange: handleEmailChange,
+          required: true,
+          className: input,
+          placeholder: t('contactform.placeholder.email')
+        }), emailError && /*#__PURE__*/jsx("div", {
+          className: errorMailValidation,
+          children: emailError
+        })]
       }), /*#__PURE__*/jsx("textarea", {
         id: "message",
         value: message,
@@ -339,18 +368,11 @@ var MainComponent = function MainComponent(_ref) {
           onChange: function onChange(e) {
             return setAcceptAgbs(e.target.checked);
           },
-          required: true,
-          style: {
-            transform: 'scale(1.5)'
-          }
+          required: true
         }), /*#__PURE__*/jsx("label", {
           htmlFor: "acceptAgbs",
           children: /*#__PURE__*/jsxs("div", {
-            style: {
-              display: 'flex',
-              flexDirection: 'column',
-              fontSize: 12
-            },
+            className: checkAgbText,
             children: [/*#__PURE__*/jsx("span", {
               children: t('auth.acceptprivacyandagb')
             }), /*#__PURE__*/jsxs("span", {
@@ -366,12 +388,15 @@ var MainComponent = function MainComponent(_ref) {
             })]
           })
         })]
+      }), error && /*#__PURE__*/jsx("div", {
+        className: errorBox,
+        children: error
       }), /*#__PURE__*/jsx("button", {
         type: "submit",
         id: "submitButton",
         className: button,
         onClick: handleSubmit,
-        disabled: !acceptAgbs,
+        disabled: !inputOk,
         children: submitButtonText ? t(submitButtonText, submitButtonText) : t('contactform.submitbuttontext')
       })]
     })]

package/build/types/widget-contact-form/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAI5C,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA+EpD,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAI5C,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAiGpD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/build/types/widget-contact-form/src/useContactForm.d.ts

@@ -1,5 +1,6 @@
 export default function useContactForm(settings?: any): {
     sendEMail: (name: string, email: string, message: string, variant: string, attachments?: string[], divaNr?: string) => Promise<void>;
     navigationConfiguration: import("packages/core/src/types").NavigationConfiguration;
+    validateEmail: (email: string) => boolean;
 };
 //# sourceMappingURL=useContactForm.d.ts.map

package/build/types/widget-contact-form/src/useContactForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useContactForm.d.ts","sourceRoot":"","sources":["../../../../src/useContactForm.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,QAAQ,CAAC,EAAE,GAAG;sBA0BpB,MAAM,SAAS,MAAM,WAAW,MAAM,WAAW,MAAM,gBAAgB,MAAM,EAAE,WAAW,MAAM;;EA8ChI"}
+{"version":3,"file":"useContactForm.d.ts","sourceRoot":"","sources":["../../../../src/useContactForm.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,QAAQ,CAAC,EAAE,GAAG;sBA0BpB,MAAM,SAAS,MAAM,WAAW,MAAM,WAAW,MAAM,gBAAgB,MAAM,EAAE,WAAW,MAAM;;2BA2CjG,MAAM;EAMrC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystaldesign/widget-contact-form",
-  "version": "25.2.0-rc.4",
+  "version": "25.2.0-rc.5",
   "license": "MIT",
   "scripts": {
     "storybook": "storybook dev -p 6006",
@@ -27,5 +27,5 @@
   },
   "module": "build/esm/index.js",
   "types": "./build/types/widget-contact-form/src/index.d.ts",
-  "gitHead": "d4e8f0af055f00b40b87a2ba6f9e830de684b26e"
+  "gitHead": "527d19211a04e6f8748b2a8c33cf73084d549fc5"
 }