Add Adobe Dynamic Chat Provider

Author: enjoyjeremy-bc

README.md

@@ -7,7 +7,7 @@
 
 An npm module that allows you to mitigate the negative performance and user
 experience impact of chat tools. `react-live-chat-loader` shows a fake widget
-until the page has become idle or users are ready to interact with chat. Currently works with [Intercom](#intercom), [Help Scout](#help-scout), [Drift](#drift), [Messenger](#messenger), [Userlike](#userlike), [Front](#front), [Chatwoot](#chatwoot) and [Hubspot](#hubspot).
+until the page has become idle or users are ready to interact with chat. Currently works with [Intercom](#intercom), [Help Scout](#help-scout), [Drift](#drift), [Messenger](#messenger), [Userlike](#userlike), [Front](#front), [Chatwoot](#chatwoot), [Hubspot](#hubspot) and [Adobe Dynamic Chat](#adobe-dynamic-chat)
 
 Made by the team at [♠ Calibre](https://calibreapp.com/), your performance companion.
 
@@ -417,6 +417,46 @@ You can customise the Hubspot placeholder by passing the following props to the
 
 </details>
 
+<details>
+<summary id="adobe-dynamic-chat">Adobe Dynamic Chat</summary>
+
+To use Adobe Dynamic Chat import the `LiveChatLoaderProvider` and set the `provider` prop
+as `adobeDynamicChat` and the props for your instance as found in your Chatbot settings > Installation > Javascript snippet.
+
+For example, your script URL will look something like this:
+`<script src="https://assets.adoberesources.net/loader.js?orgId=ABCD1234ABCD1234ABCD123%40AdobeOrg&instanceId=yourinstance&env=prod&geo=va7"></script>`
+
+Then import the `AdobeDynamicChat` component.
+
+```jsx
+import { LiveChatLoaderProvider, AdobeDynamicChat } from 'react-live-chat-loader'
+
+export default class App extends React.Component {
+  render() {
+    return (
+      <LiveChatLoaderProvider 
+        providerKey="ABCD1234ABCD1234ABCD123%40AdobeOrg"  // Use "orgId" query parameter found in script URL
+        instanceId="yourinstance"                   // Use "instanceId" query parameter found in script URL
+        env="prod"                                  // Use "env" query parameter found in script URL
+        geo="va7"                                   // Use "geo" query parameter found in script URL
+        provider="adobeDynamicChat"
+      >
+        /* ... */
+        <AdobeDynamicChat />
+      </LiveChatLoaderProvider>
+    )
+  }
+}
+```
+
+You can customise the Adobe Dynamic Chat placeholder icon by passing the following props to the `AdobeDynamicChat` component:
+
+- `color`: The background color of the placeholder widget
+- `containerClass`: Class to be added to the placeholder element, defaults to `live-chat-loader-placeholder`
+- `icon`: Override the default Adobe Dynamic Chat icon, can be any JSX element.
+
+</details>
+
 ## ➕ Adding a Provider
 
 To add a new live chat provider, follow the steps in [Contributing: Adding a Provider](CONTRIBUTING.md#-adding-a-provider).
@@ -464,6 +504,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://github.com/lauGutierrezz"><img src="https://avatars.githubusercontent.com/u/52488696?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Laura Gutiérrez López de la Franca</b></sub></a><br /><a href="https://github.com/calibreapp/react-live-chat-loader/commits?author=lauGutierrezz" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/38ri581oq480"><img src="https://avatars.githubusercontent.com/u/64654807?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kirill Vakalov</b></sub></a><br /><a href="https://github.com/calibreapp/react-live-chat-loader/commits?author=38ri581oq480" title="Code">💻</a></td>
     <td align="center"><a href="http://luisrudge.net"><img src="https://avatars.githubusercontent.com/u/941075?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Luís Rudge</b></sub></a><br /><a href="https://github.com/calibreapp/react-live-chat-loader/commits?author=luisrudge" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/enjoyjeremy-bc"><img src="https://avatars.githubusercontent.com/u/260613?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jeremy Adam</b></sub></a><br /><a href="https://github.com/calibreapp/react-live-chat-loader/commits?author=enjoyjeremy-bc" title="Code">💻</a></td>
   </tr>
 </table>
 

package.json

@@ -29,7 +29,8 @@
     "chatwoot",
     "userlike",
     "facebook messenger",
-    "messenger"
+    "messenger",
+    "adobe dynamic chat"
   ],
   "author": "calibreapp.com",
   "license": "MIT",

src/components/AdobeDynamicChat/index.tsx

@@ -0,0 +1,129 @@
+import React, { useState, useEffect, CSSProperties, ReactElement } from 'react'
+
+import useChat from '../../hooks/useChat'
+import useWindowWidth from '../../hooks/useWindowWidth'
+import { ProviderProps, ClassNames } from '../../types'
+
+const styles: {
+  container: CSSProperties
+  button: CSSProperties
+  icon: CSSProperties
+  iconWrapper: CSSProperties
+} = {
+  container: {
+    WebkitFontSmoothing: 'antialiased',
+    fontSize: 16,
+    display: 'flex',
+    alignItems: 'flex-end',
+    padding: '12px',
+    flexDirection: 'column'
+  },
+  button: {
+    textAlign: 'center',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    fill: '#fff',
+    cursor: 'pointer',
+    height: '56px',
+    width: '56px',
+    borderRadius: '.3125rem',
+    boxShadow: '0 2px 6px 0 rgba(0,0,0,.4)',
+    overflow: 'hidden',
+    outline: 'none',
+    border: 'none'
+  },
+  icon: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'absolute',
+    top: '0',
+    left: '0',
+    width: '48px',
+    height: '48px',
+    transition: 'transform 100ms linear, opacity 80ms linear'
+  },
+  iconWrapper: {
+    fill: 'inherit',
+    stroke: 'inherit',
+    width: '100%',
+    padding: 0,
+    lineHeight: 0
+  }
+}
+
+interface Props extends ProviderProps {
+  color?: string
+  icon?: ReactElement
+}
+
+const AdobeDynamicChat = ({
+  color = '#0265dc',
+  icon: Icon,
+  containerClass = ClassNames.container
+}: Props): JSX.Element | null => {
+  const [state, loadChat] = useChat({ loadWhenIdle: true })
+  const windowWidth = useWindowWidth()
+  const [positionStyles, setPositionStyles] = useState<CSSProperties>({
+    zIndex: 100,
+    position: 'fixed',
+    display: 'block'
+  })
+
+  useEffect(() => {
+    setPositionStyles(state => ({
+      ...state,
+      bottom: windowWidth < 768 ? 0 : '48px',
+      right: windowWidth < 768 ? 0 : '48px'
+    }))
+  }, [windowWidth])
+
+  if (state === 'complete') {
+    return null
+  }
+
+  return (
+    <div className={containerClass} style={positionStyles}>
+      <div style={styles.container}>
+        <div
+          role="button"
+          aria-label="Load Chat"
+          aria-busy="true"
+          aria-live="polite"
+          onClick={() => loadChat({ open: true })}
+          onMouseEnter={() => loadChat({ open: false })}
+          style={{
+            backgroundColor: color,
+            ...styles.icon,
+            ...styles.button
+          }}
+        >
+          {Icon || (
+            <svg
+              focusable="false"
+              width="36"
+              height="36"
+              viewBox="0 0 36 36"
+              fill="none"
+              aria-hidden="true"
+              role="img"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <g>
+                <path
+                  fill="#ffffff"
+                  d="M32.667 14h-1.334A1.335 1.335 0 0030 15.337v-1.8a5.508 5.508 0 00-5.508-5.508h-4.283L20.222 8l-1.59-5.477a.643.643 0 00-1.264 0L15.778 8l.01.031h-4.28A5.508 5.508 0 006 13.539v1.8A1.335 1.335 0 004.667 14H3.333A1.335 1.335 0 002 15.337v7.325A1.336 1.336 0 003.333 24h1.334A1.336 1.336 0 006 22.662v1.83A5.508 5.508 0 0011.508 30h12.984A5.508 5.508 0 0030 24.492v-1.83A1.336 1.336 0 0031.333 24h1.334A1.336 1.336 0 0034 22.662v-7.325A1.335 1.335 0 0032.667 14zM10 17a3 3 0 113 3 3 3 0 01-3-3zm12 8.49a.5.5 0 01-.5.5h-7a.5.5 0 01-.5-.5v-1a.5.5 0 01.5-.5h7a.5.5 0 01.5.5zM23 20a3 3 0 113-3 3 3 0 01-3 3z"
+                ></path>
+                <circle fill="#ffffff" cx="13" cy="17" r="1.5"></circle>
+                <circle fill="#ffffff" cx="23" cy="17" r="1.5"></circle>
+              </g>
+            </svg>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default AdobeDynamicChat

src/components/LiveChatLoaderProvider.tsx

@@ -12,6 +12,10 @@ interface LiveChatLoaderProps {
   baseUrl?: string
   // locale is only relevant to certain providers, e.g. Messenger and Chatwoot
   locale?: string
+  // instanceId, env and geo are only relevant for Adobe Dynamic Chat
+  instanceId?: string
+  env?: string
+  geo?: string
   beforeInit?: () => void
   onReady?: () => void
 }

src/context.ts

@@ -11,6 +11,10 @@ interface Context {
   locale?: string
   idlePeriod?: number
   baseUrl?: string
+  // instanceId, env and geo are only relevant for Adobe Dynamic Chat
+  instanceId?: string
+  env?: string
+  geo?: string
   beforeInit?: () => void
   onReady?: () => void
 }

src/hooks/useChat.ts

@@ -28,6 +28,10 @@ const useChat = (
     appID,
     locale,
     baseUrl,
+    // instanceId, env and geo are only relevant for Adobe Dynamic Chat
+    instanceId,
+    env,
+    geo,
     beforeInit,
     onReady
   } = useContext(LiveChatLoaderContext)
@@ -92,6 +96,9 @@ const useChat = (
         appID,
         locale,
         baseUrl,
+        instanceId,
+        env,
+        geo,
         beforeInit,
         onReady
       })

src/index.ts

@@ -8,4 +8,5 @@ export { default as Userlike } from './components/Userlike'
 export { default as Chatwoot } from './components/Chatwoot'
 export { default as Front } from './components/Front'
 export { default as HubSpot } from './components/HubSpot'
+export { default as AdobeDynamicChat } from './components/AdobeDynamicChat'
 export { default as LiveChatLoaderProvider } from './components/LiveChatLoaderProvider'

src/providers/adobeDynamicChat.ts

@@ -0,0 +1,72 @@
+import { State } from '../types'
+import waitForLoad from '../utils/waitForLoad'
+
+const domain = 'https://assets.adoberesources.net'
+
+declare global {
+  interface Window {
+    //eslint-disable-next-line @typescript-eslint/no-explicit-any
+    AdobeDX: any
+  }
+}
+
+/* eslint-disable */
+const loadScript = (srcUrl: string): boolean => {
+  if (window.AdobeDX) return false
+  ;(function(d, t) {
+    var script: HTMLScriptElement = d.createElement('script')
+    var firstScript = d.getElementsByTagName('script')[0]
+    script.src = srcUrl
+    firstScript.parentNode?.insertBefore(script, firstScript)
+  })(document)
+  return true
+}
+/* eslint-enable */
+
+const load = ({
+  setState,
+  baseUrl = domain,
+  providerKey,
+  instanceId,
+  env,
+  geo,
+  beforeInit = () => undefined,
+  onReady = () => undefined
+}: {
+  setState: (state: State) => void
+  baseUrl?: string
+  providerKey?: string
+  instanceId?: string
+  env?: string
+  geo?: string
+  beforeInit?: () => void
+  onReady?: () => void
+}): void => {
+  const srcUrl = `${baseUrl}/loader.js?orgId=${providerKey}&instanceId=${instanceId}&env=${env}&&geo=${geo}`
+  const loaded = loadScript(srcUrl)
+
+  // Continue as long as Adobe hasn’t already been initialised.
+  if (loaded) {
+    beforeInit()
+    waitForLoad(
+      () => window.AdobeDX,
+      // Allow Adobe to complete loading before removing fake widget
+      () =>
+        setTimeout(() => {
+          setState('complete')
+          onReady()
+        }, 2000)
+    )
+  }
+}
+
+const open = (): void =>
+  window.addEventListener('adobedx.conversations.ready', () => {
+    // There is no way to open the chat programmatically
+  });
+
+export default {
+  domain,
+  load,
+  open
+}

src/providers/index.ts

@@ -6,3 +6,4 @@ export { default as userlike } from './userlike'
 export { default as front } from './front'
 export { default as chatwoot } from './chatwoot'
 export { default as hubSpot } from './hubSpot'
+export { default as adobeDynamicChat } from './adobeDynamicChat'

src/types.ts

@@ -16,3 +16,4 @@ export type Provider =
   | 'chatwoot'
   | 'front'
   | 'hubSpot'
+  | 'adobeDynamicChat'