@graphcommerce/googlerecaptcha 9.1.0-canary.16 → 9.1.0-canary.18

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 9.1.0-canary.18
+
+## 9.1.0-canary.17
+
+### Patch Changes
+
+- [#2496](https://github.com/graphcommerce-org/graphcommerce/pull/2496) [`a261149`](https://github.com/graphcommerce-org/graphcommerce/commit/a261149b6b32ad6a35606da2d530b8e41bfa10a0) - ReCaptcha now using the `recaptchaV3Config` query and add a fallback for Magento 2.4.6 and earlier to still use the configuration. Magento 2.4.7 doesn't need that configuration anymore. ([@paales](https://github.com/paales))
+
 ## 9.1.0-canary.16
 
 ## 9.1.0-canary.15

package/README.md

@@ -7,8 +7,8 @@ page so it isn't initialized on all pages.
 
 ## Configuration
 
-1. Configure the following ([configuration values](./Config.graphqls)) in your
-   graphcommerce.config.js
+1. Only Magento 2.4.6 and earlier, 2.4.7: Configure the following
+   ([configuration values](./Config.graphqls)) in your graphcommerce.config.js
 
 2. Add `X-Recaptcha` header to your `.meshrc.yml` if it isn't there.
    [example](../../examples/magento-graphcms/.meshrc.yml)

package/graphql/RecaptchaV3Config.graphql

@@ -0,0 +1,5 @@
+query RecaptchaV3Config {
+  recaptchaV3Config {
+    website_key
+  }
+}

package/link/recaptchaLink.ts

@@ -1,6 +1,7 @@
 import type { GraphQLRequest } from '@graphcommerce/graphql'
 import { setContext } from '@graphcommerce/graphql/apollo'
 import { Kind, OperationTypeNode } from 'graphql'
+import { RecaptchaV3ConfigDocument } from '../graphql/RecaptchaV3Config.gql'
 
 const isMutation = (operation: GraphQLRequest) =>
   operation.query.definitions.some(
@@ -11,8 +12,10 @@ const isMutation = (operation: GraphQLRequest) =>
 
 /** Apollo link that adds the Google reCAPTCHA token to the request context. */
 export const recaptchaLink = setContext(async (operation, context) => {
-  const recaptchaKey = import.meta.graphCommerce.googleRecaptchaKey
-  if (!recaptchaKey || !globalThis.grecaptcha || !isMutation(operation)) return context
+  const siteKey = context.cache?.readQuery({ query: RecaptchaV3ConfigDocument })?.recaptchaV3Config
+    ?.website_key
+
+  if (!siteKey || !globalThis.grecaptcha || !isMutation(operation)) return context
 
   await new Promise<void>((resolve) => {
     globalThis.grecaptcha?.ready(resolve)
@@ -23,7 +26,7 @@ export const recaptchaLink = setContext(async (operation, context) => {
   while (failure < 5) {
     try {
       // eslint-disable-next-line no-await-in-loop
-      token = await globalThis.grecaptcha.execute(recaptchaKey, { action: 'submit' })
+      token = await globalThis.grecaptcha.execute(siteKey, { action: 'submit' })
       break
     } catch {
       failure++

package/mesh/resolvers.ts

@@ -0,0 +1,31 @@
+import { storefrontFromContext, type Resolvers } from '@graphcommerce/graphql-mesh'
+
+export const resolvers: Resolvers = {
+  Query: {
+    recaptchaV3Config: (root, args, context, info) => {
+      const config = storefrontFromContext(context)
+      const key = config?.googleRecaptchaKey ?? import.meta.graphCommerce.googleRecaptchaKey
+
+      if (!key) return null
+      return {
+        website_key: key,
+        minimum_score: 0,
+        badge_position: '',
+        failure_message: '',
+        is_enabled: !!key,
+        forms: [
+          'PLACE_ORDER',
+          'CONTACT',
+          'CUSTOMER_LOGIN',
+          'CUSTOMER_FORGOT_PASSWORD',
+          'CUSTOMER_CREATE',
+          'CUSTOMER_EDIT',
+          'NEWSLETTER',
+          'PRODUCT_REVIEW',
+          'SENDFRIEND',
+          'BRAINTREE',
+        ],
+      }
+    },
+  },
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/googlerecaptcha",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.1.0-canary.16",
+  "version": "9.1.0-canary.18",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -15,15 +15,19 @@
     "@types/grecaptcha": "^3.0.9"
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.16",
-    "@graphcommerce/graphql": "^9.1.0-canary.16",
-    "@graphcommerce/next-ui": "^9.1.0-canary.16",
-    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.16",
-    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.16",
+    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.18",
+    "@graphcommerce/graphql": "^9.1.0-canary.18",
+    "@graphcommerce/graphql-mesh": "^9.1.0-canary.18",
+    "@graphcommerce/next-ui": "^9.1.0-canary.18",
+    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.18",
+    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.18",
     "@mui/material": "^5.10.16",
     "graphql": "^16.9.0",
     "next": "*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
+  },
+  "dependencies": {
+    "@types/react-recaptcha-v3": "^1.1.5"
   }
 }

package/plugins/GrecaptchaApolloErrorAlert.tsx

@@ -5,7 +5,6 @@ import { useGoogleRecaptcha } from '../hooks/useGoogleRecaptcha'
 export const config: PluginConfig = {
   type: 'component',
   module: '@graphcommerce/ecommerce-ui',
-  ifConfig: 'googleRecaptchaKey',
 }
 
 export function ApolloErrorAlert(props: PluginProps<ApolloErrorAlertProps>) {

package/plugins/GrecaptchaApolloErrorFullPage.tsx

@@ -5,7 +5,6 @@ import { useGoogleRecaptcha } from '../hooks/useGoogleRecaptcha'
 export const config: PluginConfig = {
   type: 'component',
   module: '@graphcommerce/ecommerce-ui',
-  ifConfig: 'googleRecaptchaKey',
 }
 
 export function ApolloErrorFullPage(props: PluginProps<ApolloErrorFullPageProps>) {

package/plugins/GrecaptchaApolloErrorSnackbar.tsx

@@ -5,7 +5,6 @@ import { useGoogleRecaptcha } from '../hooks/useGoogleRecaptcha'
 export const config: PluginConfig = {
   type: 'component',
   module: '@graphcommerce/ecommerce-ui',
-  ifConfig: 'googleRecaptchaKey',
 }
 
 export function ApolloErrorSnackbar(props: PluginProps<ApolloErrorSnackbarProps>) {

package/plugins/GrecaptchaGraphQLProvider.tsx

@@ -1,24 +1,37 @@
-import type { GraphQLProviderProps } from '@graphcommerce/graphql'
+import { useQuery, type GraphQLProviderProps } from '@graphcommerce/graphql'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { GlobalStyles } from '@mui/material'
 import Script from 'next/script'
 import { useMemo, useState } from 'react'
 import type { RecaptchaContext } from '../context/recaptchaContext'
 import { recaptchaContext } from '../context/recaptchaContext'
-import { useGoogleRecaptchaSiteKey } from '../hooks/useGoogleRecaptchaSiteKey'
+import { RecaptchaV3ConfigDocument } from '../graphql/RecaptchaV3Config.gql'
 import { recaptchaLink } from '../link/recaptchaLink'
 
 export const config: PluginConfig = {
   type: 'component',
   module: '@graphcommerce/graphql',
-  ifConfig: 'googleRecaptchaKey',
+}
+
+function ReCaptchaScript() {
+  const siteKey = useQuery(RecaptchaV3ConfigDocument).data?.recaptchaV3Config?.website_key
+
+  console.log(siteKey)
+
+  if (!siteKey) return null
+  return (
+    <Script
+      key='@graphcommerce/grecaptcha'
+      strategy='lazyOnload'
+      src={`https://www.google.com/recaptcha/api.js?render=${siteKey}`}
+    />
+  )
 }
 
 export function GraphQLProvider(props: PluginProps<GraphQLProviderProps>) {
-  const { Prev, links = [], ...prev } = props
+  const { Prev, links = [], children, ...prev } = props
 
   const [enabled, setEnabled] = useState(false)
-  const siteKey = useGoogleRecaptchaSiteKey()
 
   const context: RecaptchaContext = useMemo(
     () => ({ enabled, enable: () => setEnabled(true) }),
@@ -27,21 +40,15 @@ export function GraphQLProvider(props: PluginProps<GraphQLProviderProps>) {
 
   return (
     <recaptchaContext.Provider value={context}>
-      {enabled && (
-        <>
-          <Script
-            key='@graphcommerce/grecaptcha'
-            strategy='lazyOnload'
-            src={`https://www.google.com/recaptcha/api.js?render=${siteKey}`}
-          />
-          <GlobalStyles styles={{ '.grecaptcha-badge': { visibility: 'hidden' } }} />
-        </>
-      )}
       <Prev
         {...prev}
         // Add recaptcha headers to the request.
         links={[...links, recaptchaLink]}
-      />
+      >
+        {children}
+        {enabled && <ReCaptchaScript />}
+        {enabled && <GlobalStyles styles={{ '.grecaptcha-badge': { visibility: 'hidden' } }} />}
+      </Prev>
     </recaptchaContext.Provider>
   )
 }

package/plugins/meshRecaptcha.ts

@@ -0,0 +1,26 @@
+import type { meshConfig as meshConfigBase } from '@graphcommerce/graphql-mesh/meshConfig'
+import type { FunctionPlugin, PluginConfig } from '@graphcommerce/next-config'
+
+export const config: PluginConfig = {
+  module: '@graphcommerce/graphql-mesh/meshConfig',
+  type: 'function',
+}
+
+export const meshConfig: FunctionPlugin<typeof meshConfigBase> = (
+  prev,
+  baseConfig,
+  graphCommerceConfig,
+) => {
+  if (graphCommerceConfig.magentoVersion <= 247 || !graphCommerceConfig.googleRecaptchaKey)
+    return prev(baseConfig, graphCommerceConfig)
+  return prev(
+    {
+      ...baseConfig,
+      additionalResolvers: [
+        ...(baseConfig.additionalResolvers ?? []),
+        '@graphcommerce/googlerecaptcha/mesh/resolvers.ts',
+      ],
+    },
+    graphCommerceConfig,
+  )
+}

package/hooks/useGoogleRecaptchaSiteKey.ts

@@ -1,8 +0,0 @@
-import { useStorefrontConfig } from '@graphcommerce/next-ui'
-
-export function useGoogleRecaptchaSiteKey() {
-  const key =
-    useStorefrontConfig().googleRecaptchaKey ?? import.meta.graphCommerce.googleRecaptchaKey
-  if (!key) throw new Error('[@graphcommerce/googlerecaptcha]: googleRecaptchaKey not configured')
-  return key
-}