added recaptcha to contact form

src/components/sections/contact/form/index.tsx

@@ -1,8 +1,10 @@
-import React, { useState } from 'react'
+import React, { useCallback, useState } from 'react'
 // eslint-disable-next-line import/no-named-as-default
+import ReCAPTCHA from 'react-google-recaptcha'
+import { useGoogleReCaptcha } from 'react-google-recaptcha-v3'
 import Select from 'react-select'
 
-import { Container } from '~/components/layout/container'
+import * as container from '~/components/layout/container'
 import Section from '~/components/layout/section'
 import { Button } from '~/components/primitives/button'
 import Heading from '~/components/primitives/heading'
@@ -40,8 +42,50 @@ const CustomForm = ({ data }: FormProps) => {
   const [errorMsg, setErrorMsg] = useState('')
   const [isFormSent, setIsFormSent] = useState(false)
   const [isSending, setIsSending] = useState(false)
+  const [notification, setNotification] = useState('')
   // const reRef = useRef<ReCAPTCHA>()
 
+  const { executeRecaptcha } = useGoogleReCaptcha()
+
+  function submitEnquiryForm(gReCaptchaToken: string) {
+    fetch('/api/inquiry', {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json, text/plain, */*',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        gRecaptchaToken: gReCaptchaToken
+      })
+    })
+      .then((res) => res.json())
+      .then((res) => {
+        // console.log(res, 'response from backend')
+        if (res?.status === 'success') {
+          setNotification(res?.message)
+        } else {
+          setNotification(res?.message)
+        }
+      })
+  }
+
+  const handleSubmitForm = useCallback(
+    (e: any) => {
+      e.preventDefault()
+      if (!executeRecaptcha) {
+        // eslint-disable-next-line no-console
+        console.log('Execute recaptcha not yet available')
+        return
+      }
+      executeRecaptcha('enquiryFormSubmit').then((gReCaptchaToken) => {
+        // eslint-disable-next-line no-console
+        console.log(gReCaptchaToken, 'response Google reCaptcha server')
+        submitEnquiryForm(gReCaptchaToken)
+      })
+    },
+    [executeRecaptcha]
+  )
+
   const handleSubmit = async (e: any) => {
     e.preventDefault()
 
@@ -61,8 +105,6 @@ const CustomForm = ({ data }: FormProps) => {
         inquiry: selectedOption.value
       }
 
-      // const token = await reRef.current.executeAsync()
-
       await fetch(`${process.env.NEXT_PUBLIC_API}/api/contact`, {
         method: 'POST',
         mode: 'no-cors',
@@ -127,9 +169,20 @@ const CustomForm = ({ data }: FormProps) => {
             onChange={(e) => setText(e.target.value)}
           ></textarea>
         </label>
+        <script
+          src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
+          async
+          defer
+        ></script>
+        <ReCAPTCHA
+          className="recaptcha"
+          sitekey="6LcJ5LkhAAAAAJ841sJnn6LkwOg-5vt33X-wGEJW"
+          onSubmit={handleSubmitForm}
+        />
         <Button size="medium" variant="primary">
           {data?.formLabelButton}
         </Button>
+        {notification && <p>{notification}</p>}
       </form>
     </div>
   )
@@ -138,7 +191,7 @@ const CustomForm = ({ data }: FormProps) => {
 const Form = ({ data }: DataProps) => {
   return (
     <Section className={s['section']} id="contactform">
-      <Container className={s['container']}>
+      <container.Container className={s['container']}>
         <div className={s['header']}>
           <Heading as="h2" variant="md">
             {data?.formHeading}
@@ -147,7 +200,7 @@ const Form = ({ data }: DataProps) => {
         </div>
         <CustomForm data={data} />
         <div className={s['gradient']} />
-      </Container>
+      </container.Container>
     </Section>
   )
 }

src/components/sections/partners/contact/index.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useState } from 'react'
 // eslint-disable-next-line import/no-named-as-default
 import ReCAPTCHA from 'react-google-recaptcha'
+// eslint-disable-next-line import/no-unresolved
 import { useGoogleReCaptcha } from 'react-google-recaptcha-v3'
 import Select from 'react-select'
 
@@ -57,12 +58,35 @@ const CustomForm = ({ data }: FormProps) => {
   const [errorMsg, setErrorMsg] = useState('')
   const [isFormSent, setIsFormSent] = useState(false)
   const [isSending, setIsSending] = useState(false)
+  const [notification, setNotification] = useState('')
   // const reRef = useRef<ReCAPTCHA>()
 
   const { executeRecaptcha } = useGoogleReCaptcha()
 
+  function submitEnquiryForm(gReCaptchaToken: string) {
+    fetch('/api/inquiry', {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json, text/plain, */*',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        gRecaptchaToken: gReCaptchaToken
+      })
+    })
+      .then((res) => res.json())
+      .then((res) => {
+        // console.log(res, 'response from backend')
+        if (res?.status === 'success') {
+          setNotification(res?.message)
+        } else {
+          setNotification(res?.message)
+        }
+      })
+  }
+
   const handleSubmitForm = useCallback(
-    (e) => {
+    (e: any) => {
       e.preventDefault()
       if (!executeRecaptcha) {
         // eslint-disable-next-line no-console
@@ -78,28 +102,6 @@ const CustomForm = ({ data }: FormProps) => {
     [executeRecaptcha]
   )
 
-  const submitEnquiryForm = (gReCaptchaToken) => {
-    fetch('/api/enquiry', {
-      method: 'POST',
-      headers: {
-        Accept: 'application/json, text/plain, */*',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        gRecaptchaToken: gReCaptchaToken
-      })
-    })
-      .then((res) => res.json())
-      .then((res) => {
-        console.log(res, 'response from backend')
-        if (res?.status === 'success') {
-          setNotification(res?.message)
-        } else {
-          setNotification(res?.message)
-        }
-      })
-  }
-
   async function handleSubmit(e: any) {
     e.preventDefault()
 
@@ -244,10 +246,12 @@ const CustomForm = ({ data }: FormProps) => {
         <ReCAPTCHA
           className="recaptcha"
           sitekey="6LcJ5LkhAAAAAJ841sJnn6LkwOg-5vt33X-wGEJW"
+          onSubmit={handleSubmitForm}
         />
         <Button size="medium" variant="primary">
           {data?.contactButtonLabel}
         </Button>
+        {notification && <p>{notification}</p>}
       </form>
     </div>
   )
@@ -280,6 +284,3 @@ const Contact = ({ data }: DataProps) => {
 }
 
 export default Contact
-function submitEnquiryForm(gReCaptchaToken: string) {
-  throw new Error('Function not implemented.')
-}

src/pages/_app.tsx

@@ -5,7 +5,6 @@ import { AppProps } from 'next/app'
 import { RealViewportProvider } from 'next-real-viewport'
 import { ThemeProvider } from 'next-themes'
 import * as React from 'react'
-import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3'
 import { QueryClient, QueryClientProvider } from 'react-query'
 
 // import { Footer } from '~/components/common/footer'
@@ -60,30 +59,20 @@ const App = ({ Component, pageProps, ...rest }: AppProps) => {
     (({ Component, pageProps }) => <Component {...pageProps} />)
 
   return (
-    <GoogleReCaptchaProvider
-      reCaptchaKey="6LeG_uMhAAAAAKZcHgAdoXnXLc_vFftxruHU59GO"
-      scriptProps={{
-        async: false,
-        defer: false,
-        appendTo: 'head',
-        nonce: undefined
-      }}
-    >
-      <QueryClientProvider client={queryClient}>
-        <RealViewportProvider debounceResize={false}>
-          <Noise />
-          <AnimationContextProvider>
-            <ThemeProvider enableSystem={false} defaultTheme="dark">
-              <GAScripts />
-              <FontsReadyScript />
-              {/* <Header /> */}
-              {getLayout({ Component, pageProps, ...rest })}
-              {/* <Footer /> */}
-            </ThemeProvider>
-          </AnimationContextProvider>
-        </RealViewportProvider>
-      </QueryClientProvider>
-    </GoogleReCaptchaProvider>
+    <QueryClientProvider client={queryClient}>
+      <RealViewportProvider debounceResize={false}>
+        <Noise />
+        <AnimationContextProvider>
+          <ThemeProvider enableSystem={false} defaultTheme="dark">
+            <GAScripts />
+            <FontsReadyScript />
+            {/* <Header /> */}
+            {getLayout({ Component, pageProps, ...rest })}
+            {/* <Footer /> */}
+          </ThemeProvider>
+        </AnimationContextProvider>
+      </RealViewportProvider>
+    </QueryClientProvider>
   )
 }