@graphcommerce/googlerecaptcha 2.1.23 → 2.2.0-canary.3

package/CHANGELOG.md

@@ -1,8 +1,16 @@
 # Change Log
 
-## 2.1.23
+## 2.2.0-canary.3
 
-## 2.1.22
+### Minor Changes
+
+- [#1733](https://github.com/graphcommerce-org/graphcommerce/pull/1733) [`493506480`](https://github.com/graphcommerce-org/graphcommerce/commit/4935064809501682ec4df55ea47e022550dcd336) - Google Recaptcha now uses the new plugin system. Whenever the @graphcommerce/ecommerce-ui ApolloErrorAlert, ApolloErrorFullPage and ApolloErrorSnackbar components are rendered it will activate the Google Recaptcha plugins. ([@paales](https://github.com/paales))
+
+## 2.1.22-canary.2
+
+## 2.1.22-canary.1
+
+## 2.1.22-canary.0
 
 ## 2.1.21
 

package/README.md

@@ -8,17 +8,14 @@ initialized on all pages.
 
 1. Add `NEXT_PUBLIC_GOOGLE_RECAPTCHA_V3_SITE_KEY` to your .env file.
    [example](../../examples/magento-graphcms/.env.example)
-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/graphql/GraphQLProvider.tsx)
-4. Add `X-Recaptcha` header to your `.meshrc.yml`.
+2. 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.
+If you have a form that uses GoogleRecaptcha make sure you are using one of
+ApolloErrorAlert, ApolloErrorFullPage and ApolloErrorSnackbar components. This
+will activate the Google Recaptcha plugins.
 
 ### Troubleshooting
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/googlerecaptcha",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "2.1.23",
+  "version": "2.2.0-canary.3",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -19,7 +19,7 @@
     "@types/grecaptcha": "^3.0.4"
   },
   "dependencies": {
-    "@graphcommerce/graphql": "4.30.2"
+    "@graphcommerce/graphql": "4.31.0-canary.3"
   },
   "peerDependencies": {
     "next": "^12.1.2",

package/plugins/GrecaptchaApolloErrorAlert.tsx

@@ -0,0 +1,14 @@
+import type { ApolloErrorAlertProps } from '@graphcommerce/ecommerce-ui'
+import type { PluginProps } from '@graphcommerce/next-config'
+import { useGoogleRecaptcha } from '../hooks/useGoogleRecaptcha'
+
+export const component = 'ApolloErrorAlert'
+export const exported = '@graphcommerce/ecommerce-ui'
+
+function GrecaptchaApolloErrorAlert(props: PluginProps<ApolloErrorAlertProps>) {
+  const { Prev } = props
+  useGoogleRecaptcha()
+  return <Prev {...props} />
+}
+
+export const Plugin = GrecaptchaApolloErrorAlert

package/plugins/GrecaptchaApolloErrorFullPage.tsx

@@ -0,0 +1,14 @@
+import type { ApolloErrorFullPageProps } from '@graphcommerce/ecommerce-ui'
+import type { PluginProps } from '@graphcommerce/next-config'
+import { useGoogleRecaptcha } from '../hooks/useGoogleRecaptcha'
+
+export const component = 'ApolloErrorFullPage'
+export const exported = '@graphcommerce/ecommerce-ui'
+
+function GrecaptchaApolloErrorFullPage(props: PluginProps<ApolloErrorFullPageProps>) {
+  const { Prev } = props
+  useGoogleRecaptcha()
+  return <Prev {...props} />
+}
+
+export const Plugin = GrecaptchaApolloErrorFullPage

package/plugins/GrecaptchaApolloErrorSnackbar.tsx

@@ -0,0 +1,14 @@
+import type { ApolloErrorSnackbarProps } from '@graphcommerce/ecommerce-ui'
+import type { PluginProps } from '@graphcommerce/next-config'
+import { useGoogleRecaptcha } from '../hooks/useGoogleRecaptcha'
+
+export const component = 'ApolloErrorSnackbar'
+export const exported = '@graphcommerce/ecommerce-ui'
+
+function GrecaptchaApolloErrorSnackbar(props: PluginProps<ApolloErrorSnackbarProps>) {
+  const { Prev } = props
+  useGoogleRecaptcha()
+  return <Prev {...props} />
+}
+
+export const Plugin = GrecaptchaApolloErrorSnackbar

package/plugins/GrecaptchaGraphQLProvider.tsx

@@ -0,0 +1,61 @@
+import { GraphQLProviderProps } from '@graphcommerce/graphql'
+import type { PluginProps } from '@graphcommerce/next-config'
+import { GlobalStyles } from '@mui/material'
+import Script from 'next/script'
+import { useState, useMemo } from 'react'
+import { recaptchaContext, RecaptchaContext } from '../context/recaptchaContext'
+import { recaptchaLink } from '../link/recaptchaLink'
+
+export const component = 'GraphQLProvider'
+export const exported = '@graphcommerce/graphql'
+
+let warned = false
+
+function GrecaptchaGraphQLProvider(props: PluginProps<GraphQLProviderProps>) {
+  const { Prev, links = [], ...prev } = props
+
+  const [enabled, setEnabled] = useState(false)
+  const context: RecaptchaContext = useMemo(
+    () => ({
+      enabled,
+      siteKey: process.env.NEXT_PUBLIC_GOOGLE_RECAPTCHA_V3_SITE_KEY,
+      enable: () => setEnabled(true),
+    }),
+    [enabled],
+  )
+
+  if (process.env.NEXT_PUBLIC_GOOGLE_RECAPTCHA_V3_SITE_KEY) {
+    return (
+      <recaptchaContext.Provider value={context}>
+        {enabled && (
+          <>
+            <Script
+              key='@graphcommerce/grecaptcha'
+              strategy='lazyOnload'
+              src={`https://www.google.com/recaptcha/api.js?render=${process.env.NEXT_PUBLIC_GOOGLE_RECAPTCHA_V3_SITE_KEY}`}
+            />
+            <GlobalStyles styles={{ '.grecaptcha-badge': { visibility: 'hidden' } }} />
+          </>
+        )}
+        <Prev
+          {...prev}
+          // Add recaptcha headers to the request.
+          links={[...links, recaptchaLink]}
+        />
+      </recaptchaContext.Provider>
+    )
+  }
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (!warned) {
+      console.info(
+        '[@graphcommerce/googlerecaptcha]: process.env.NEXT_PUBLIC_GOOGLE_RECAPTCHA_V3_SITE_KEY not found',
+      )
+      warned = true
+    }
+  }
+
+  return <Prev {...props} />
+}
+
+export const Plugin = GrecaptchaGraphQLProvider