From 1cc63625288fd915597375cbb49f806a9a41ba7e Mon Sep 17 00:00:00 2001 From: oriofir <97814056+oriofir@users.noreply.github.com> Date: Thu, 8 Sep 2022 16:07:19 -0700 Subject: [PATCH] added some fetch requests and added recaptcha provider to _app.tsx file --- package-lock.json | 21 +++++++ package.json | 1 + .../sections/partners/contact/index.tsx | 59 ++++++++++++++++++- src/pages/_app.tsx | 39 +++++++----- yarn.lock | 13 +++- 5 files changed, 115 insertions(+), 18 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0d41689..f51733b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37,6 +37,7 @@ "react-dom": "^18.2.0", "react-fast-marquee": "^1.3.1", "react-google-recaptcha": "^2.1.0", + "react-google-recaptcha-v3": "^1.10.0", "react-hook-form": "^7.30.0", "react-mailchimp-subscribe": "^2.1.3", "react-merge-refs": "^1.1.0", @@ -9298,6 +9299,18 @@ "react": ">=16.4.1" } }, + "node_modules/react-google-recaptcha-v3": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/react-google-recaptcha-v3/-/react-google-recaptcha-v3-1.10.0.tgz", + "integrity": "sha512-JBoqU107X8klQmS8tQSbQh1IMsT1fH3kVoArIqnia0rtn0rPNG9Ld+9rD/dHJMculIczSZpGvIJTXXwtsolMcg==", + "dependencies": { + "hoist-non-react-statics": "^3.3.2" + }, + "peerDependencies": { + "react": "^17.0 || ^18.0", + "react-dom": "^17.0 || ^18.0" + } + }, "node_modules/react-hook-form": { "version": "7.30.0", "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.30.0.tgz", @@ -18546,6 +18559,14 @@ "react-async-script": "^1.1.1" } }, + "react-google-recaptcha-v3": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/react-google-recaptcha-v3/-/react-google-recaptcha-v3-1.10.0.tgz", + "integrity": "sha512-JBoqU107X8klQmS8tQSbQh1IMsT1fH3kVoArIqnia0rtn0rPNG9Ld+9rD/dHJMculIczSZpGvIJTXXwtsolMcg==", + "requires": { + "hoist-non-react-statics": "^3.3.2" + } + }, "react-hook-form": { "version": "7.30.0", "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.30.0.tgz", diff --git a/package.json b/package.json index d9c5ea8..2820ce6 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "react-dom": "^18.2.0", "react-fast-marquee": "^1.3.1", "react-google-recaptcha": "^2.1.0", + "react-google-recaptcha-v3": "^1.10.0", "react-hook-form": "^7.30.0", "react-mailchimp-subscribe": "^2.1.3", "react-merge-refs": "^1.1.0", diff --git a/src/components/sections/partners/contact/index.tsx b/src/components/sections/partners/contact/index.tsx index e80b9da..02a6a4d 100644 --- a/src/components/sections/partners/contact/index.tsx +++ b/src/components/sections/partners/contact/index.tsx @@ -1,6 +1,7 @@ -import { useState } from 'react' +import { 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 Line from '~/components/icons/line' @@ -56,8 +57,57 @@ 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() + const { executeRecaptcha } = newFunction() + + const handleSubmitForm = useCallback( + (e) => { + e.preventDefault() + if (!executeRecaptcha) { + // eslint-disable-next-line no-console + console.log('Execute recaptcha not yet available') + return + } + executeRecaptcha('enquiryFormSubmit').then((gReCaptchaToken: string) => { + // eslint-disable-next-line no-console + console.log(gReCaptchaToken, 'response Google reCaptcha server') + submitEnquiryForm(gReCaptchaToken) + }) + }, + [executeRecaptcha] + ) + + const submitEnquiryForm = (gReCaptchaToken: string) => { + fetch('/api/inquiry', { + method: 'POST', + headers: { + Accept: 'application/json, text/plain, */*', + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + _gRecaptchaToken: gReCaptchaToken, + get gRecaptchaToken() { + return this._gRecaptchaToken + }, + set gRecaptchaToken(value) { + this._gRecaptchaToken = value + } + }) + }) + .then((res) => res.json()) + .then((res) => { + // eslint-disable-next-line no-console + console.log(res, 'response from backend') + if (res?.status === 'success') { + setNotification(res?.message) + } else { + setNotification(res?.message) + } + }) + } + const handleSubmit = async (e: any) => { e.preventDefault() @@ -210,6 +260,10 @@ const CustomForm = ({ data }: FormProps) => { ) + + function newFunction(): { executeRecaptcha: any } { + return useGoogleReCaptcha() + } } const Contact = ({ data }: DataProps) => { @@ -239,3 +293,6 @@ const Contact = ({ data }: DataProps) => { } export default Contact +function submitEnquiryForm(gReCaptchaToken: string) { + throw new Error('Function not implemented.') +} diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 07deea1..80b0334 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -5,6 +5,7 @@ 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' @@ -59,20 +60,30 @@ const App = ({ Component, pageProps, ...rest }: AppProps) => { (({ Component, pageProps }) => ) return ( - - - - - - - - {/*
*/} - {getLayout({ Component, pageProps, ...rest })} - {/*