Merge pull request #1193 from ita-social-projects/bugfix/fix-recaptcha-messages

add a limit to the number of messages

Author: IvannYad

src/app/common/components/ContactForm/ContactForm.component.tsx

@@ -18,7 +18,7 @@ interface Props {
 const ContactForm = forwardRef((customClass: Props, ref) => {
     const [formData, setFormData] = useState({ email: '', message: '' });
     const [isVerified, setIsVerified] = useState(false);
-    const [messageApi, messageContextHolder] = message.useMessage();
+    const [messageApi, messageContextHolder] = message.useMessage({maxCount: 3});
     const [form] = Form.useForm();
     const recaptchaRef = useRef<ReCAPTCHA>(null);
     const siteKey = window._env_.RECAPTCHA_SITE_KEY;
@@ -30,6 +30,10 @@ const ContactForm = forwardRef((customClass: Props, ref) => {
         setIsVerified(true);
     };
 
+    const handleExpiration = () => {
+        setIsVerified(false);
+    };
+
     useImperativeHandle(ref, () => ({
         clearModal() {
             form.resetFields();
@@ -133,6 +137,7 @@ const ContactForm = forwardRef((customClass: Props, ref) => {
                         className="required-captcha"
                         sitekey={siteKey ? siteKey : ""}
                         onChange={handleVerify}
+                        onExpired={handleExpiration}
                         ref={recaptchaRef}
                     />
                 </div>

src/app/common/components/modals/Partners/PartnersModal.component.tsx

@@ -24,7 +24,7 @@ const PartnersModal = () => {
     const { setModal, modalsState: { partners } } = modalStore;
     const [form] = Form.useForm();
     const [formData, setFormData] = useState({ email: '', message: '' });
-    const [messageApi, messageContextHolder] = message.useMessage();
+    const [messageApi, messageContextHolder] = message.useMessage({maxCount: 3});
     const [isVerified, setIsVerified] = useState(false);
     const recaptchaRef = useRef<ReCAPTCHA>(null);
     const siteKey = window._env_.RECAPTCHA_SITE_KEY;
@@ -72,6 +72,10 @@ const PartnersModal = () => {
         setIsVerified(true);
     };
 
+    const handleExpiration = () => {
+        setIsVerified(false);
+    };
+
     const successMessage = () => {
         messageApi.open({
             type: 'success',
@@ -174,6 +178,7 @@ const PartnersModal = () => {
                                 className="required-input"
                                 sitekey={siteKey ? siteKey : ""}
                                 onChange={handleVerify}
+                                onExpired={handleExpiration}
                                 ref={recaptchaRef}
                             />
                         </div>