Merge pull request #2317 from graphcommerce-org/fix/various

Fix/various
graphcommerce-org · Jul 12, 2024 · 216bfbe · 216bfbe
2 parents eb9a214 + 4219347
commit 216bfbe
Show file tree

Hide file tree

Showing 24 changed files with 832 additions and 87 deletions.
diff --git a/.changeset/curly-ladybugs-cross.md b/.changeset/curly-ladybugs-cross.md
@@ -0,0 +1,5 @@
+---
+"@graphcommerce/magento-customer": patch
+---
+
+useSignInForm now optionally expects an email
diff --git a/.changeset/four-drinks-decide.md b/.changeset/four-drinks-decide.md
@@ -0,0 +1,6 @@
+---
+"@graphcommerce/googletagmanager": patch
+"@graphcommerce/googleanalytics": patch
+---
+
+Moved import locations of Google Analytics and Google Tagmanager scripts to their recommended locations
diff --git a/.changeset/violet-cherries-jog.md b/.changeset/violet-cherries-jog.md
@@ -0,0 +1,5 @@
+---
+'@graphcommerce/next-ui': patch
+---
+
+Added new plugin insertion points: `<DocumentHeadStart/>`, `<DocumentHeadEnd/>`, `<DocumentBodyEnd/>`, `<DocumentBodyStart/>` for the \_document.app to allow creating plugins for those locations to insert scripts etc.
diff --git a/examples/magento-graphcms/pages/_document.tsx b/examples/magento-graphcms/pages/_document.tsx
@@ -1,5 +1,9 @@
 import { LinguiDocumentProps, withLingui } from '@graphcommerce/lingui-next/server'
 import {
+  DocumentBodyEnd,
+  DocumentBodyStart,
+  DocumentHeadEnd,
+  DocumentHeadStart,
   EmotionCacheProps,
   getCssFlagsInitScript,
   normalizeLocale,
@@ -12,15 +16,19 @@ class Document extends NextDocument<EmotionCacheProps & LinguiDocumentProps> {
     return (
       <Html lang={normalizeLocale(this.props.locale)}>
         <Head>
+          <DocumentHeadStart key='head-start' {...this.props} />
           {getCssFlagsInitScript()}
           {/* Inject MUI styles first to match with the prepend: true configuration. */}
           <meta name='emotion-insertion-point' content='' />
           {this.props.emotionStyleTags}
           {this.props.linguiScriptTag}
+          <DocumentHeadEnd key='head-end' {...this.props} />
         </Head>
         <body>
+          <DocumentBodyStart key='body-start' {...this.props} />
           <Main />
           <NextScript />
+          <DocumentBodyEnd key='body-start' {...this.props} />
         </body>
       </Html>
     )

diff --git a/packages/googleanalytics/components/GoogleAnalyticsScript.tsx b/packages/googleanalytics/components/GoogleAnalyticsScript.tsx
diff --git a/packages/googleanalytics/components/index.ts b/packages/googleanalytics/components/index.ts
diff --git a/packages/googleanalytics/index.ts b/packages/googleanalytics/index.ts
@@ -0,0 +1 @@
+export {}
diff --git a/packages/googleanalytics/plugins/GoogleAnalyticsTag.tsx b/packages/googleanalytics/plugins/GoogleAnalyticsTag.tsx
@@ -1,23 +1,36 @@
-import type { PagesProps } from '@graphcommerce/framer-next-pages'
-import type { IfConfig, PluginConfig, PluginProps } from '@graphcommerce/next-config'
-import { GoogleAnalyticsScript } from '../components/GoogleAnalyticsScript'
-
-export const component = 'FramerNextPages'
-export const exported = '@graphcommerce/framer-next-pages'
-export const ifConfig: IfConfig = 'googleAnalyticsId'
+/* eslint-disable @next/next/no-document-import-in-page */
+/* eslint-disable @next/next/next-script-for-ga */
+/* eslint-disable react/no-danger */
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
+import { storefrontConfig } from '@graphcommerce/next-ui/server'
+import type { DocumentProps } from 'next/document'
 
 export const config: PluginConfig = {
   type: 'component',
-  module: '@graphcommerce/framer-next-pages',
+  module: '@graphcommerce/next-ui/server',
   ifConfig: 'googleAnalyticsId',
 }
 
-export function FramerNextPages(props: PluginProps<PagesProps>) {
+export function DocumentHeadEnd(props: PluginProps<DocumentProps>) {
   const { Prev, ...rest } = props
 
+  const id =
+    storefrontConfig(rest.locale)?.googleAnalyticsId ?? import.meta.graphCommerce.googleAnalyticsId
+
   return (
     <>
-      <GoogleAnalyticsScript />
+      <script async src='https://www.googletagmanager.com/gtag/js?id=G-E0275MGY12' />
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `
+window.dataLayer = window.dataLayer || [];
+function gtag(){dataLayer.push(arguments);}
+gtag('js', new Date());
+
+gtag('config', '${id}');
+`,
+        }}
+      />
       <Prev {...rest} />
     </>
   )

diff --git a/packages/googletagmanager/components/GoogleTagManagerNoScript.tsx b/packages/googletagmanager/components/GoogleTagManagerNoScript.tsx
diff --git a/packages/googletagmanager/components/GoogleTagManagerScript.tsx b/packages/googletagmanager/components/GoogleTagManagerScript.tsx
diff --git a/packages/googletagmanager/components/index.ts b/packages/googletagmanager/components/index.ts
diff --git a/packages/googletagmanager/index.ts b/packages/googletagmanager/index.ts
@@ -1 +1 @@
-export * from './components'
+export {}
diff --git a/packages/googletagmanager/plugins/GoogleTagmanagerTag.tsx b/packages/googletagmanager/plugins/GoogleTagmanagerTag.tsx
@@ -1,22 +1,62 @@
-import type { PagesProps } from '@graphcommerce/framer-next-pages'
-import type { IfConfig, PluginConfig, PluginProps } from '@graphcommerce/next-config'
-import { GoogleTagManagerScript } from '../components/GoogleTagManagerScript'
-
-export const component = 'FramerNextPages'
-export const exported = '@graphcommerce/framer-next-pages'
-export const ifConfig: IfConfig = 'googleTagmanagerId'
+/* eslint-disable react/no-danger */
+/* eslint-disable @next/next/next-script-for-ga */
+/* eslint-disable @next/next/no-document-import-in-page */
+/* eslint-disable @next/next/no-before-interactive-script-outside-document */
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
+import { storefrontConfig } from '@graphcommerce/next-ui/server'
+import type { DocumentProps } from 'next/document'
 
 export const config: PluginConfig = {
   type: 'component',
-  module: '@graphcommerce/framer-next-pages',
+  module: '@graphcommerce/next-ui/server',
   ifConfig: 'googleTagmanagerId',
 }
 
-export function FramerNextPages(props: PluginProps<PagesProps>) {
+export function DocumentBodyStart(props: PluginProps<DocumentProps>) {
+  const { Prev, ...rest } = props
+
+  const id =
+    storefrontConfig(rest.locale)?.googleTagmanagerId ??
+    import.meta.graphCommerce.googleTagmanagerId
+
+  if (!id) return <Prev {...rest} />
+
+  return (
+    <>
+      <noscript>
+        {/* eslint-disable-next-line jsx-a11y/iframe-has-title */}
+        <iframe
+          src={`https://www.googletagmanager.com/ns.html?id=${id}`}
+          height='0'
+          width='0'
+          style={{ display: 'none', visibility: 'hidden' }}
+        />
+      </noscript>
+      <Prev {...rest} />
+    </>
+  )
+}
+
+export function DocumentHeadEnd(props: PluginProps<DocumentProps>) {
   const { Prev, ...rest } = props
+
+  const id =
+    storefrontConfig(rest.locale)?.googleTagmanagerId ??
+    import.meta.graphCommerce.googleTagmanagerId
+
   return (
     <>
-      <GoogleTagManagerScript />
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `
+  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+  })(window,document,'script','dataLayer','${id}');
+`,
+        }}
+      />
       <Prev {...rest} />
     </>
   )

diff --git a/packages/magento-customer/hooks/useSignInForm.ts b/packages/magento-customer/hooks/useSignInForm.ts
@@ -10,7 +10,7 @@ import { signOut } from '../components/SignOutForm/signOut'
 import { CustomerDocument } from './Customer.gql'
 
 type UseSignInFormProps = {
-  email: string
+  email?: string
 } & UseFormGraphQlOptions<SignInMutation, SignInMutationVariables>
 
 /**
@@ -35,9 +35,8 @@ export function useSignInForm({ email, ...options }: UseSignInFormProps) {
          */
         if (oldEmail && oldEmail !== email) signOut(client)
 
-        return options?.onBeforeSubmit
-          ? options.onBeforeSubmit({ ...values, email })
-          : { ...values, email }
+        const newValues = email ? { ...values, email } : values
+        return options?.onBeforeSubmit ? options.onBeforeSubmit(newValues) : newValues
       },
       onComplete: (...args) => {
         setCssFlag('in-context', true)