@graphcommerce/googlerecaptcha 2.0.5 → 2.1.2

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Change Log
 
+## 2.1.2
+
+### Patch Changes
+
+- [#1378](https://github.com/graphcommerce-org/graphcommerce/pull/1378) [`b610a6e40`](https://github.com/graphcommerce-org/graphcommerce/commit/b610a6e4049e8c9e8b5d2aeff31b8e1bfc24abe5) Thanks [@paales](https://github.com/paales)! - Pin all versions internally so we can’t end up in an unfixable state for the user
+
+- Updated dependencies [[`b610a6e40`](https://github.com/graphcommerce-org/graphcommerce/commit/b610a6e4049e8c9e8b5d2aeff31b8e1bfc24abe5)]:
+  - @graphcommerce/graphql@3.0.7
+
+## 2.1.1
+
+### Patch Changes
+
+- [#1369](https://github.com/graphcommerce-org/graphcommerce/pull/1369) [`ae6449502`](https://github.com/graphcommerce-org/graphcommerce/commit/ae64495024a455bbe5188588604368c1542840c9) Thanks [@paales](https://github.com/paales)! - Upgraded dependencies
+
+- Updated dependencies [[`892018809`](https://github.com/graphcommerce-org/graphcommerce/commit/8920188093d0422ec50580e408dc28ac5f93e46a), [`ae6449502`](https://github.com/graphcommerce-org/graphcommerce/commit/ae64495024a455bbe5188588604368c1542840c9), [`892018809`](https://github.com/graphcommerce-org/graphcommerce/commit/8920188093d0422ec50580e408dc28ac5f93e46a)]:
+  - @graphcommerce/graphql@3.0.6
+
+## 2.1.0
+
+### Minor Changes
+
+- [#1344](https://github.com/graphcommerce-org/graphcommerce/pull/1344) [`5ab19683c`](https://github.com/graphcommerce-org/graphcommerce/commit/5ab19683ca4e1ff78c21dbe09b73aeea43ef3b64) Thanks [@paales](https://github.com/paales)! - Added Google reCAPTCHA conditional loading to make it fully compatible, but load the reCAPTCHA only on pages with forms.
+
 ## 2.0.5
 
 ### Patch Changes

package/README.md

@@ -1,14 +1,28 @@
 # @graphcommerce/googlerecaptcha
 
-This package makes it easy to add Google Recaptcha v3 to GraphCommerce
+This package makes it easy to add Google Recaptcha v3 to GraphCommerce. It
+allows you to load the Recatcha script conditionally on the page so it isn't
+initialized on all pages.
 
-### Usage
+### Installation
 
 1. Add `NEXT_PUBLIC_GOOGLE_RECAPTCHA_V3_SITE_KEY` to your .env file.
    [example](../../examples/magento-graphcms/.env.example)
-2. Add `<GoogleRecaptchaV3Script/>` to your `pages/_app.tsx` file
+2. Add `<GoogleRecaptchaProvider/>` to your `pages/_app.tsx` file
    [example](../../examples/magento-graphcms/pages/_app.tsx)
 3. Add `recaptchaLink` to your Apollo Client.
-   [example](../../examples/magento-graphcms/lib/createApolloClient.ts)
+   [example](../../examples/magento-graphcms/lib/graphql/GraphQLProvider.tsx)
 4. Add `X-Recaptcha` header to your `.meshrc.yml`.
    [example](../../examples/magento-graphcms/.meshrc.yml)
+
+### Usage
+
+If you have a form that uses GoogleRecaptcha add `useGoogleRecaptcha()` in the
+root of your component.
+
+### Troubleshooting
+
+`ReCaptcha validation failed, please try again`  
+: Magento is configured correctly and this is an error coming from Google
+directly. You have misconfigured something on the Google side. Make sure the
+domains are set up correctly, etc.

package/components/GoogleRecaptchaProvider.tsx

@@ -0,0 +1,20 @@
+import React, { useMemo, useState } from 'react'
+import { RecaptchaContext, recaptchaContext } from '../context/recaptchaContext'
+import { GoogleRecaptchaV3Script } from './GoogleRecaptchaV3Script'
+
+export function GoogleRecaptchaProvider(props: { children: React.ReactNode; siteKey?: string }) {
+  const { children, siteKey = process.env.NEXT_PUBLIC_GOOGLE_RECAPTCHA_V3_SITE_KEY } = props
+  const [enabled, setEnabled] = useState(false)
+
+  const context: RecaptchaContext = useMemo(
+    () => ({ enabled, siteKey, enable: () => setEnabled(true) }),
+    [enabled, siteKey],
+  )
+
+  return (
+    <recaptchaContext.Provider value={context}>
+      <GoogleRecaptchaV3Script />
+      {children}
+    </recaptchaContext.Provider>
+  )
+}

package/components/GoogleRecaptchaV3Script.tsx

@@ -1,23 +1,26 @@
+import { GlobalStyles } from '@mui/material'
 import Script from 'next/script'
-import React from 'react'
+import { useContext } from 'react'
+import { recaptchaContext } from '../context/recaptchaContext'
 
 export function GoogleRecaptchaV3Script() {
-  const siteKey = process.env.NEXT_PUBLIC_GOOGLE_RECAPTCHA_V3_SITE_KEY
+  const { siteKey, enabled } = useContext(recaptchaContext)
 
-  if (process.env.NODE_ENV !== 'production' && !siteKey)
+  if (process.env.NODE_ENV !== 'production' && !siteKey && enabled)
     console.warn(
       '[@graphcommerce/googletagmanager]: NEXT_PUBLIC_GOOGLE_RECAPTCHA_V3_SITE_KEY not found',
     )
 
-  if (!siteKey) return null
+  if (!siteKey || !enabled) return null
 
   return (
     <>
       <Script
+        key='google-recaptcha-v3'
         strategy='lazyOnload'
         src={`https://www.google.com/recaptcha/api.js?render=${siteKey}`}
       />
-      <style>{`.grecaptcha-badge': { visibility: 'hidden' }`}</style>
+      <GlobalStyles styles={{ '.grecaptcha-badge': { visibility: 'hidden' } }} />
     </>
   )
 }

package/context/recaptchaContext.tsx

@@ -0,0 +1,9 @@
+import { createContext } from 'react'
+
+export type RecaptchaContext = {
+  enabled: boolean
+  enable?: () => void
+  siteKey?: string
+}
+
+export const recaptchaContext = createContext<RecaptchaContext>({ enabled: false })

package/hooks/useGoogleRecaptcha.tsx

@@ -0,0 +1,4 @@
+import { useContext } from 'react'
+import { recaptchaContext } from '../context/recaptchaContext'
+
+export const useGoogleRecaptcha = () => useContext(recaptchaContext).enable?.()

package/index.ts

@@ -1,2 +1,4 @@
 export * from './components/GoogleRecaptchaV3Script'
+export * from './components/GoogleRecaptchaProvider'
 export * from './link/recaptchaLink'
+export * from './hooks/useGoogleRecaptcha'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/googlerecaptcha",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "2.0.5",
+  "version": "2.1.2",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,19 +12,19 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.1.1",
-    "@graphcommerce/prettier-config-pwa": "^4.0.3",
+    "@graphcommerce/eslint-config-pwa": "^4.1.4",
+    "@graphcommerce/prettier-config-pwa": "^4.0.5",
     "@graphcommerce/typescript-config-pwa": "^4.0.2",
-    "@playwright/test": "^1.19.2",
+    "@playwright/test": "^1.20.1",
     "@types/grecaptcha": "^3.0.4"
   },
   "dependencies": {
-    "@graphcommerce/graphql": "^3.0.5"
+    "@graphcommerce/graphql": "3.0.7"
   },
   "peerDependencies": {
-    "next": "^12.0.10",
+    "next": "12.1.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "@mui/material": "^5.4.1"
+    "@mui/material": "5.5.3"
   }
 }