Merge pull request #783 from TrustlessComputer/fix/contact-form

fix contact
TrustlessComputer · Sep 4, 2024 · 7c781f2 · 7c781f2
2 parents 35de9ef + d3b6269
commit 7c781f2
Showing 1 changed file with 30 additions and 9 deletions.
diff --git a/src/components/ContactUsModal/index.tsx b/src/components/ContactUsModal/index.tsx
@@ -1,7 +1,7 @@
 import { Flex, Text, Input, Textarea } from '@chakra-ui/react';
 import BaseModal from '../BaseModal';
 import s from './styles2.module.scss';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { isEmpty } from 'lodash';
 
 import { submitContact } from '@/services/api/l2services';
@@ -12,6 +12,7 @@ import { Select } from '@chakra-ui/react';
 import { useL2ServiceTracking } from '@/hooks/useL2ServiceTracking';
 import { DATA_BRAND } from '@/modules/landingV3/data-sections';
 import Image from 'next/image';
+import { throttle } from 'lodash';
 
 const SUBJECT_LIST = [
   `I'd like to build a Rollup on Bitcoin`,
@@ -106,8 +107,17 @@ const ContactUsModal = ({
     }
   };
 
-  const submitHandler = async () => {
+  const submitHandler = async (
+    methodInputStr: any,
+    methodContact: METHODS_CONTACT_ENUM,
+  ) => {
+    // console.log('submitHandler Params ', {
+    //   methodInputStr,
+    //   methodContact,
+    // });
+
     tracking('SUBMIT_CONTACT_US');
+
     try {
       let valid = true;
       // if (!valideYourXAcc(yourXAcc)) {
@@ -120,12 +130,12 @@ const ContactUsModal = ({
       //   valid = false;
       // }
 
-      if (!validateMethodContact(methodInput)) {
+      if (!validateMethodContact(methodInputStr)) {
         valid = false;
       }
 
-      // console.log('valid ', valid);
-      // console.log('methodContact ', methodContact);
+      // console.log('LOG valid ', valid);
+      // console.log('LOG methodContact ', methodContact);
 
       if (valid) {
         let submitParams: SubmitFormParams = {
@@ -144,21 +154,21 @@ const ContactUsModal = ({
         if (methodContact === METHODS_CONTACT_ENUM.Email) {
           submitParams = {
             ...submitParams,
-            email: methodInput,
+            email: methodInputStr,
           };
         }
 
         if (methodContact === METHODS_CONTACT_ENUM.Telegram) {
           submitParams = {
             ...submitParams,
-            telegram: methodInput,
+            telegram: methodInputStr,
           };
         }
 
         if (methodContact === METHODS_CONTACT_ENUM.Twitter) {
           submitParams = {
             ...submitParams,
-            twName: methodInput,
+            twName: methodInputStr,
           };
         }
 
@@ -176,6 +186,14 @@ const ContactUsModal = ({
     }
   };
 
+  const submitHanlderDebouce = useCallback(
+    throttle(submitHandler, 500, {
+      trailing: true,
+      leading: false,
+    }),
+    [],
+  );
+
   const renderXfield = () => {
     return (
       <Flex
@@ -636,7 +654,10 @@ const ContactUsModal = ({
             {/*  }}*/}
             {/*>*/}
             {/*</Flex>*/}
-            <div className={s.submitBtn} onClick={submitHandler}>
+            <div
+              className={s.submitBtn}
+              onClick={() => submitHanlderDebouce(methodInput, methodContact)}
+            >
               <p>Submit</p>
             </div>
           </Flex>