From a10dcaae4adcdb5d1aa537d7e1729bf0ec26206e Mon Sep 17 00:00:00 2001
From: Marc Knaup <marc@knaup.io>
Date: Wed, 12 Jun 2024 02:34:25 +0700
Subject: [PATCH 1/4] Added `crossOrigin` config option

---
 README.md                                     |  1 +
 apps/playground/cypress/e2e/crossOrigin.ts    | 12 +++++
 apps/playground/src/app.tsx                   |  8 ++++
 .../src/modules/useIntercom/index.ts          |  1 +
 .../useIntercomWithCrossOrigin.tsx            | 44 +++++++++++++++++++
 packages/react-use-intercom/src/initialize.ts |  8 +++-
 packages/react-use-intercom/src/provider.tsx  |  3 +-
 packages/react-use-intercom/src/types.ts      |  4 ++
 8 files changed, 79 insertions(+), 2 deletions(-)
 create mode 100644 apps/playground/cypress/e2e/crossOrigin.ts
 create mode 100644 apps/playground/src/modules/useIntercom/useIntercomWithCrossOrigin.tsx

diff --git a/README.md b/README.md
index 65616e20..d2405cda 100644
--- a/README.md
+++ b/README.md
@@ -91,6 +91,7 @@ Place the `IntercomProvider` as high as possible in your application. This will
 | apiBase    | string | If you need to route your Messenger requests through a different endpoint than the default. Generally speaking, this is not needed.<br/> Format: `https://${INTERCOM_APP_ID}.intercom-messenger.com` (See: [https://github.com/devrnt/react-use-intercom/pull/96](https://github.com/devrnt/react-use-intercom/pull/96))         | false    |         |
 | initializeDelay | number | Indicates if the intercom initialization should be delayed, delay is in ms, defaults to 0. See https://github.com/devrnt/react-use-intercom/pull/236 | false    |         |
 | autoBootProps | IntercomProps | Pass properties to `boot` method when `autoBoot` is `true` | false    |         |
+| crossOrigin         | string           | `crossOrigin` attribute value to pass to `<script>` tag that loads the messenger        | false    |         |
 
 #### Example
 ```ts
diff --git a/apps/playground/cypress/e2e/crossOrigin.ts b/apps/playground/cypress/e2e/crossOrigin.ts
new file mode 100644
index 00000000..8f31b5e5
--- /dev/null
+++ b/apps/playground/cypress/e2e/crossOrigin.ts
@@ -0,0 +1,12 @@
+/// <reference types="cypress" />
+
+describe('use crossOrigin', () => {
+  it('should add attribute to script tag', () => {
+    cy.visit('/useIntercomWithCrossOrigin');
+
+    cy.document()
+      .get('head script')
+      .should('have.attr', 'crossOrigin')
+      .should('eq', 'anonymous');
+  });
+});
diff --git a/apps/playground/src/app.tsx b/apps/playground/src/app.tsx
index 2852c8bc..ccb477e7 100644
--- a/apps/playground/src/app.tsx
+++ b/apps/playground/src/app.tsx
@@ -9,6 +9,7 @@ import {
   ProviderPage,
   UseIntercomPage,
   UseIntercomTourPage,
+  UseIntercomWithCrossOrigin,
   UseIntercomWithDelay,
 } from './modules';
 import { Page, Style } from './modules/common';
@@ -52,6 +53,10 @@ const App = () => {
           />
           <Route path="/useIntercom" component={UseIntercomPage} />
           <Route path="/useIntercomTour" component={UseIntercomTourPage} />
+          <Route
+            path="/useIntercomWithCrossOrigin"
+            component={UseIntercomWithCrossOrigin}
+          />
           <Route
             path="/useIntercomWithTimeout"
             component={UseIntercomWithDelay}
@@ -70,6 +75,9 @@ const App = () => {
               <Link to="/useIntercomTour">
                 <code>useIntercom with tour</code>
               </Link>
+              <Link to="/useIntercomWithCrossOrigin">
+                <code>useIntercom with crossOrigin</code>
+              </Link>
               <Link to="/useIntercomWithTimeout">
                 <code>useIntercom with delayed boot</code>
               </Link>
diff --git a/apps/playground/src/modules/useIntercom/index.ts b/apps/playground/src/modules/useIntercom/index.ts
index 805f47aa..2b89a028 100644
--- a/apps/playground/src/modules/useIntercom/index.ts
+++ b/apps/playground/src/modules/useIntercom/index.ts
@@ -1,3 +1,4 @@
 export { default as UseIntercomPage } from './useIntercom';
 export { default as UseIntercomTourPage } from './useIntercomTour';
+export { default as UseIntercomWithCrossOrigin } from './useIntercomWithCrossOrigin';
 export { default as UseIntercomWithDelay } from './useIntercomWithDelay';
diff --git a/apps/playground/src/modules/useIntercom/useIntercomWithCrossOrigin.tsx b/apps/playground/src/modules/useIntercom/useIntercomWithCrossOrigin.tsx
new file mode 100644
index 00000000..5fddf1ba
--- /dev/null
+++ b/apps/playground/src/modules/useIntercom/useIntercomWithCrossOrigin.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { IntercomProvider } from 'react-use-intercom';
+import styled from 'styled-components';
+
+const Grid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  width: 100%;
+`;
+
+const Item = styled.div`
+  display: grid;
+  grid-template-rows: min-content;
+
+  &::after {
+    content: '';
+    margin: 2rem 0 1.5rem;
+    border-bottom: 2px solid var(--grey);
+    width: 100%;
+  }
+`;
+
+const RawUseIntercomPage = () => {
+  return (
+    <Grid>
+      <Item>
+        <p>
+          Intercom will be initialized with{' '}
+          <code>crossOrigin: "anonymous"</code> (and autobooted)
+        </p>
+      </Item>
+    </Grid>
+  );
+};
+
+const UseIntercomWithCrossOriginPage = () => {
+  return (
+    <IntercomProvider appId="jcabc7e3" autoBoot crossOrigin="anonymous">
+      <RawUseIntercomPage />
+    </IntercomProvider>
+  );
+};
+
+export default UseIntercomWithCrossOriginPage;
diff --git a/packages/react-use-intercom/src/initialize.ts b/packages/react-use-intercom/src/initialize.ts
index ba454aec..e9f65e5e 100644
--- a/packages/react-use-intercom/src/initialize.ts
+++ b/packages/react-use-intercom/src/initialize.ts
@@ -4,10 +4,15 @@
  *
  * @param appId - Intercom app id
  * @param [timeout=0] - Amount of milliseconds that the initialization should be delayed, defaults to 0
+ * @param [crossOrigin=undefined] - `crossOrigin` attribute value to use for the `<script>` tag, defaults to `undefined`
  *
  * @see {@link https://developers.intercom.com/installing-intercom/docs/basic-javascript}
  */
-const initialize = (appId: string, timeout = 0) => {
+const initialize = (
+  appId: string,
+  timeout = 0,
+  crossOrigin: string | undefined = undefined,
+) => {
   var w = window;
   var ic = w.Intercom;
   if (typeof ic === 'function') {
@@ -26,6 +31,7 @@ const initialize = (appId: string, timeout = 0) => {
     var l = function () {
       setTimeout(function () {
         var s = d.createElement('script');
+        s.crossOrigin = crossOrigin;
         s.type = 'text/javascript';
         s.async = true;
         s.src = 'https://widget.intercom.io/widget/' + appId;
diff --git a/packages/react-use-intercom/src/provider.tsx b/packages/react-use-intercom/src/provider.tsx
index 83d8076a..1db2a6f8 100644
--- a/packages/react-use-intercom/src/provider.tsx
+++ b/packages/react-use-intercom/src/provider.tsx
@@ -21,6 +21,7 @@ export const IntercomProvider: React.FC<
   autoBoot = false,
   autoBootProps,
   children,
+  crossOrigin,
   onHide,
   onShow,
   onUnreadCountChange,
@@ -84,7 +85,7 @@ export const IntercomProvider: React.FC<
   }, [onShow, setIsOpen]);
 
   if (!isSSR && shouldInitialize && !isInitialized.current) {
-    initialize(appId, initializeDelay);
+    initialize(appId, initializeDelay, crossOrigin);
 
     // attach listeners
     IntercomAPI('onHide', onHideWrapper);
diff --git a/packages/react-use-intercom/src/types.ts b/packages/react-use-intercom/src/types.ts
index 4f6d3ce7..db329e10 100644
--- a/packages/react-use-intercom/src/types.ts
+++ b/packages/react-use-intercom/src/types.ts
@@ -474,6 +474,10 @@ export type IntercomProviderProps = {
    * @remarks if `true`, 'boot' does not need to be called manually
    * */
   autoBoot?: boolean;
+  /**
+   * The optional `crossOrigin` attribute value to use for the `<script>` tag that loads the messenger.
+   */
+  crossOrigin?: 'anonymous' | 'use-credentials' | '' | undefined;
   /**
    * When we hide the messenger, you can hook into the event. This requires a function argument.
    */

From 32e3ad4f0adfa401d0d783302fb7e7c22a43be05 Mon Sep 17 00:00:00 2001
From: Marc Knaup <marc@knaup.io>
Date: Wed, 12 Jun 2024 05:08:45 +0700
Subject: [PATCH 2/4] Added `onLoad` and `onLoadFailed` callbacks to config

---
 README.md                                     |  8 +++
 apps/playground/cypress/e2e/loadCallbacks.ts  | 23 ++++++++
 apps/playground/src/app.tsx                   |  8 +++
 .../src/modules/useIntercom/index.ts          |  1 +
 .../useIntercomWithLoadCallbacks.tsx          | 53 +++++++++++++++++++
 packages/react-use-intercom/src/initialize.ts | 15 ++++++
 packages/react-use-intercom/src/provider.tsx  |  4 +-
 packages/react-use-intercom/src/types.ts      | 15 ++++++
 8 files changed, 126 insertions(+), 1 deletion(-)
 create mode 100644 apps/playground/cypress/e2e/loadCallbacks.ts
 create mode 100644 apps/playground/src/modules/useIntercom/useIntercomWithLoadCallbacks.tsx

diff --git a/README.md b/README.md
index d2405cda..1ae043a4 100644
--- a/README.md
+++ b/README.md
@@ -92,6 +92,8 @@ Place the `IntercomProvider` as high as possible in your application. This will
 | initializeDelay | number | Indicates if the intercom initialization should be delayed, delay is in ms, defaults to 0. See https://github.com/devrnt/react-use-intercom/pull/236 | false    |         |
 | autoBootProps | IntercomProps | Pass properties to `boot` method when `autoBoot` is `true` | false    |         |
 | crossOrigin         | string           | `crossOrigin` attribute value to pass to `<script>` tag that loads the messenger        | false    |         |
+| onLoad              | () => void       | triggered when the Messenger script has been loaded successfully                        | false    |         |
+| onLoadFailed        | () => void       | triggered when the Messenger script has failed to load                                  | false    |         |
 
 #### Example
 ```ts
@@ -296,3 +298,9 @@ These props are `JavaScript` 'friendly', so [camelCase](https://en.wikipedia.org
 Since [v1.2.0](https://github.com/devrnt/react-use-intercom/releases/tag/v1.2.0) it's possible to delay this initialisation by passing `initializeDelay` in `<IntercomProvider />` (it's in milliseconds). However most of the users won't need to mess with this.
 
 For reference see https://github.com/devrnt/react-use-intercom/pull/236 and https://forum.intercom.com/s/question/0D52G00004WxWLs/can-i-delay-loading-intercom-on-my-site-to-reduce-the-js-load
+
+### Detect a broken Messenger
+
+There can be various reasons why the Messenger script has failed to load, e.g. network issues, Intercom downtime, firewall issues, or browser extensions like tracking blockers.
+
+By using the `onLoadFailed` callback it's possible to detect when that happens and provide the user with alternative means of customer support.
diff --git a/apps/playground/cypress/e2e/loadCallbacks.ts b/apps/playground/cypress/e2e/loadCallbacks.ts
new file mode 100644
index 00000000..77884f62
--- /dev/null
+++ b/apps/playground/cypress/e2e/loadCallbacks.ts
@@ -0,0 +1,23 @@
+/// <reference types="cypress" />
+
+describe('onLoad/onLoadFailed', () => {
+  it('should call onLoad when successful', () => {
+    cy.visit('/useIntercomWithLoadCallbacks');
+
+    cy.get('[data-cy=call]').should(($p) =>
+      expect($p).to.have.text('onLoad was called!'),
+    );
+  });
+
+  it('should call onLoadFailed when not successful', () => {
+    cy.visit('/useIntercomWithLoadCallbacks');
+
+    cy.intercept('https://widget.intercom.io/widget/jcabc7e3', {
+      forceNetworkError: true,
+    });
+
+    cy.get('[data-cy=call]').should(($p) =>
+      expect($p).to.have.text('onLoadFailed was called!'),
+    );
+  });
+});
diff --git a/apps/playground/src/app.tsx b/apps/playground/src/app.tsx
index ccb477e7..1a2dbfd0 100644
--- a/apps/playground/src/app.tsx
+++ b/apps/playground/src/app.tsx
@@ -11,6 +11,7 @@ import {
   UseIntercomTourPage,
   UseIntercomWithCrossOrigin,
   UseIntercomWithDelay,
+  UseIntercomWithLoadCallbacks,
 } from './modules';
 import { Page, Style } from './modules/common';
 
@@ -57,6 +58,10 @@ const App = () => {
             path="/useIntercomWithCrossOrigin"
             component={UseIntercomWithCrossOrigin}
           />
+          <Route
+            path="/useIntercomWithLoadCallbacks"
+            component={UseIntercomWithLoadCallbacks}
+          />
           <Route
             path="/useIntercomWithTimeout"
             component={UseIntercomWithDelay}
@@ -81,6 +86,9 @@ const App = () => {
               <Link to="/useIntercomWithTimeout">
                 <code>useIntercom with delayed boot</code>
               </Link>
+              <Link to="/useIntercomWithLoadCallbacks">
+                <code>useIntercom with load callbacks</code>
+              </Link>
             </Navigation>
           </Route>
         </Router>
diff --git a/apps/playground/src/modules/useIntercom/index.ts b/apps/playground/src/modules/useIntercom/index.ts
index 2b89a028..9c4ad7d7 100644
--- a/apps/playground/src/modules/useIntercom/index.ts
+++ b/apps/playground/src/modules/useIntercom/index.ts
@@ -2,3 +2,4 @@ export { default as UseIntercomPage } from './useIntercom';
 export { default as UseIntercomTourPage } from './useIntercomTour';
 export { default as UseIntercomWithCrossOrigin } from './useIntercomWithCrossOrigin';
 export { default as UseIntercomWithDelay } from './useIntercomWithDelay';
+export { default as UseIntercomWithLoadCallbacks } from './useIntercomWithLoadCallbacks';
diff --git a/apps/playground/src/modules/useIntercom/useIntercomWithLoadCallbacks.tsx b/apps/playground/src/modules/useIntercom/useIntercomWithLoadCallbacks.tsx
new file mode 100644
index 00000000..8a8d4d5e
--- /dev/null
+++ b/apps/playground/src/modules/useIntercom/useIntercomWithLoadCallbacks.tsx
@@ -0,0 +1,53 @@
+import { useState } from 'react';
+import * as React from 'react';
+import { IntercomProvider } from 'react-use-intercom';
+import styled from 'styled-components';
+
+const Grid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  width: 100%;
+`;
+
+const Item = styled.div`
+  display: grid;
+  grid-template-rows: min-content;
+
+  &::after {
+    content: '';
+    margin: 2rem 0 1.5rem;
+    border-bottom: 2px solid var(--grey);
+    width: 100%;
+  }
+`;
+
+const RawUseIntercomPage = ({ call }: { call: string | undefined }) => {
+  return (
+    <Grid>
+      <Item>
+        <p>
+          The Intercom Messenger script will be loaded and{' '}
+          <code>onLoad/onLoadFailed</code> be called
+        </p>
+        <p data-cy="call">{call ?? 'Waiting…'}</p>
+      </Item>
+    </Grid>
+  );
+};
+
+const UseIntercomWithLoadCallbacks = () => {
+  const [call, setCall] = useState<string>();
+
+  return (
+    <IntercomProvider
+      appId="jcabc7e3"
+      autoBoot
+      onLoad={() => setCall('onLoad was called!')}
+      onLoadFailed={() => setCall('onLoadFailed was called!')}
+    >
+      <RawUseIntercomPage call={call} />
+    </IntercomProvider>
+  );
+};
+
+export default UseIntercomWithLoadCallbacks;
diff --git a/packages/react-use-intercom/src/initialize.ts b/packages/react-use-intercom/src/initialize.ts
index e9f65e5e..49a1c03c 100644
--- a/packages/react-use-intercom/src/initialize.ts
+++ b/packages/react-use-intercom/src/initialize.ts
@@ -5,6 +5,8 @@
  * @param appId - Intercom app id
  * @param [timeout=0] - Amount of milliseconds that the initialization should be delayed, defaults to 0
  * @param [crossOrigin=undefined] - `crossOrigin` attribute value to use for the `<script>` tag, defaults to `undefined`
+ * @param [onLoad=undefined] - Called when the Messenger script has been loaded successfully, defaults to `undefined`.
+ * @param [onLoadFailed=undefined] - Called when the Messenger script has failed to load, defaults to `undefined`.
  *
  * @see {@link https://developers.intercom.com/installing-intercom/docs/basic-javascript}
  */
@@ -12,6 +14,8 @@ const initialize = (
   appId: string,
   timeout = 0,
   crossOrigin: string | undefined = undefined,
+  onLoad: () => void = undefined,
+  onLoadFailed: () => void = undefined,
 ) => {
   var w = window;
   var ic = w.Intercom;
@@ -35,6 +39,17 @@ const initialize = (
         s.type = 'text/javascript';
         s.async = true;
         s.src = 'https://widget.intercom.io/widget/' + appId;
+        if (onLoad) {
+          s.addEventListener('load', () => {
+            onLoad();
+          });
+        }
+        if (onLoadFailed) {
+          s.addEventListener('error', () => {
+            // No need to pass any information from the ErrorEvent because it will contain no information about the error.
+            onLoadFailed();
+          });
+        }
         var x = d.getElementsByTagName('script')[0];
         x.parentNode.insertBefore(s, x);
       }, timeout);
diff --git a/packages/react-use-intercom/src/provider.tsx b/packages/react-use-intercom/src/provider.tsx
index 1db2a6f8..45b0f4f3 100644
--- a/packages/react-use-intercom/src/provider.tsx
+++ b/packages/react-use-intercom/src/provider.tsx
@@ -23,6 +23,8 @@ export const IntercomProvider: React.FC<
   children,
   crossOrigin,
   onHide,
+  onLoad,
+  onLoadFailed,
   onShow,
   onUnreadCountChange,
   onUserEmailSupplied,
@@ -85,7 +87,7 @@ export const IntercomProvider: React.FC<
   }, [onShow, setIsOpen]);
 
   if (!isSSR && shouldInitialize && !isInitialized.current) {
-    initialize(appId, initializeDelay, crossOrigin);
+    initialize(appId, initializeDelay, crossOrigin, onLoad, onLoadFailed);
 
     // attach listeners
     IntercomAPI('onHide', onHideWrapper);
diff --git a/packages/react-use-intercom/src/types.ts b/packages/react-use-intercom/src/types.ts
index db329e10..41d17f9d 100644
--- a/packages/react-use-intercom/src/types.ts
+++ b/packages/react-use-intercom/src/types.ts
@@ -476,12 +476,27 @@ export type IntercomProviderProps = {
   autoBoot?: boolean;
   /**
    * The optional `crossOrigin` attribute value to use for the `<script>` tag that loads the messenger.
+   *
+   * Use `crossOrigin: "anonymous"` to have errors thrown by the Messenger contain all information (file name, line, message, etc.).
+   * This is useful for error logging and following up with Intercom's own tech support.
+   *
+   * Note that this doesn't work for errors thrown because the Messenger script file has failed to load.
    */
   crossOrigin?: 'anonymous' | 'use-credentials' | '' | undefined;
   /**
    * When we hide the messenger, you can hook into the event. This requires a function argument.
    */
   onHide?: () => void;
+  /**
+   * Called when the Messenger script file has been loaded successfully.
+   */
+  onLoad?: () => void;
+  /**
+   * Called when the Messenger script file has failed to load.
+   *
+   * You can use this to let the customer know the support chat is unavailable and provide an alternative communication method.
+   */
+  onLoadFailed?: () => void;
   /**
    * When we show the messenger, you can hook into the event. This requires a function argument.
    */

From a58608e70e426c43fec38ccfae57199cf8c9c9be Mon Sep 17 00:00:00 2001
From: Marc Knaup <marc@knaup.io>
Date: Wed, 12 Jun 2024 05:19:53 +0700
Subject: [PATCH 3/4] Added changeset

---
 .changeset/nice-dryers-begin.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/nice-dryers-begin.md

diff --git a/.changeset/nice-dryers-begin.md b/.changeset/nice-dryers-begin.md
new file mode 100644
index 00000000..35b5d443
--- /dev/null
+++ b/.changeset/nice-dryers-begin.md
@@ -0,0 +1,5 @@
+---
+'react-use-intercom': minor
+---
+
+Added crossOrigin, onLoad, and onLoadFailed config options

From e7954c5f5d6c35e724bffe5c168b1057da7a2c60 Mon Sep 17 00:00:00 2001
From: Marc Knaup <marc@knaup.io>
Date: Wed, 12 Jun 2024 05:35:08 +0700
Subject: [PATCH 4/4] Prevent caching of Intercom Messenger script during
 onLoad Cypress test

---
 apps/playground/cypress/e2e/loadCallbacks.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/apps/playground/cypress/e2e/loadCallbacks.ts b/apps/playground/cypress/e2e/loadCallbacks.ts
index 77884f62..493cd763 100644
--- a/apps/playground/cypress/e2e/loadCallbacks.ts
+++ b/apps/playground/cypress/e2e/loadCallbacks.ts
@@ -2,6 +2,12 @@
 
 describe('onLoad/onLoadFailed', () => {
   it('should call onLoad when successful', () => {
+    cy.intercept('https://widget.intercom.io/widget/jcabc7e3', (request) => {
+      request.continue((response) => {
+        response.headers['cache-control'] = 'no-cache';
+      });
+    });
+
     cy.visit('/useIntercomWithLoadCallbacks');
 
     cy.get('[data-cy=call]').should(($p) =>
@@ -10,12 +16,12 @@ describe('onLoad/onLoadFailed', () => {
   });
 
   it('should call onLoadFailed when not successful', () => {
-    cy.visit('/useIntercomWithLoadCallbacks');
-
     cy.intercept('https://widget.intercom.io/widget/jcabc7e3', {
       forceNetworkError: true,
     });
 
+    cy.visit('/useIntercomWithLoadCallbacks');
+
     cy.get('[data-cy=call]').should(($p) =>
       expect($p).to.have.text('onLoadFailed was called!'),
     );