From 0d91aa766feb7fdee2cf30a937182bb48817a24a Mon Sep 17 00:00:00 2001
From: Emmanuel Chambon <echambon@scaleway.com>
Date: Tue, 12 Apr 2022 17:39:20 +0200
Subject: [PATCH] fix(use-gtm): ensure environment auth is present before
 injecting url

---
 .../src/__tests__/__snapshots__/index.tsx.snap    | 15 +++++++++++++++
 packages/use-gtm/src/__tests__/index.tsx          | 14 ++++++++++++++
 packages/use-gtm/src/scripts.ts                   |  6 +++---
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/packages/use-gtm/src/__tests__/__snapshots__/index.tsx.snap b/packages/use-gtm/src/__tests__/__snapshots__/index.tsx.snap
index 358a025c0..41761c890 100644
--- a/packages/use-gtm/src/__tests__/__snapshots__/index.tsx.snap
+++ b/packages/use-gtm/src/__tests__/__snapshots__/index.tsx.snap
@@ -15,6 +15,21 @@ exports[`GTM hook Provider should call onLoadError if script fail to load 1`] =
   })(window,document,'script','dataLayer','testId');</script>"
 `;
 
+exports[`GTM hook Provider should load env when environment auth is missing 1`] = `
+"<script src=\\"https://www.googletagmanager.com/gtm.js?id=testId\\"></script><script>window.dataLayer = window.dataLayer || [];</script><script>(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+'';
+
+    j.addEventListener('error', function() {
+        var _ge = new CustomEvent('gtm_loading_error', { bubbles: true });
+        d.dispatchEvent(_ge);
+    });
+
+    f.parentNode.insertBefore(j,f);
+  })(window,document,'script','dataLayer','testId');</script>"
+`;
+
 exports[`GTM hook Provider should load when id and environment is provided 1`] = `
 "<script src=\\"https://www.googletagmanager.com/gtm.js?id=testId&amp;gtm_auth=gtm&amp;gtm_preview=world&amp;gtm_cookies_win=x\\"></script><script>window.dataLayer = window.dataLayer || [];</script><script>(function(w,d,s,l,i){w[l]=w[l]||[];
     w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});
diff --git a/packages/use-gtm/src/__tests__/index.tsx b/packages/use-gtm/src/__tests__/index.tsx
index 6ac73a19f..1f9500bc3 100644
--- a/packages/use-gtm/src/__tests__/index.tsx
+++ b/packages/use-gtm/src/__tests__/index.tsx
@@ -88,6 +88,20 @@ describe('GTM hook', () => {
     expect(document.head.innerHTML).toMatchSnapshot()
   })
 
+  it('Provider should load env when environment auth is missing', () => {
+    renderHook(() => useGTM<DefaultEvents>(), {
+      wrapper: wrapper({
+        // @ts-expect-error we test a failing case
+        environment: {
+          preview: 'world',
+        },
+        id: 'testId',
+      }),
+    })
+
+    expect(document.head.innerHTML).toMatchSnapshot()
+  })
+
   it('Provider should load with events when provided', () => {
     const { result } = renderHook(() => useGTM<DefaultEvents>(), {
       wrapper: wrapper({
diff --git a/packages/use-gtm/src/scripts.ts b/packages/use-gtm/src/scripts.ts
index 9124a9a5f..ba920d48f 100644
--- a/packages/use-gtm/src/scripts.ts
+++ b/packages/use-gtm/src/scripts.ts
@@ -4,11 +4,11 @@ export const DATALAYER_NAME = 'dataLayer'
 export const LOAD_ERROR_EVENT = 'gtm_loading_error'
 
 const flattenEnvironment = (environment?: GTMEnvironment) =>
-  environment
-    ? `&${Object.entries(environment)
+  environment && environment.auth
+    ? `&${Object.entries({ ...environment, cookies_win: 'x' })
         .filter(([, value]) => !!value)
         .map(([key, value]) => `gtm_${key}=${value}`, '')
-        .join('&')}&gtm_cookies_win=x`
+        .join('&')}`
     : ''
 
 const generateSnippets = (id: string, environment?: GTMEnvironment) => {