@ada-support/embed2 1.10.0 → 1.11.0

package/dist/npm-entry/client/components/ChatFrame/fallback-html.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Returns a data URI containing the fallback HTML.
+ * This is used when the chat iframe fails to load within the timeout period.
+ */
+export declare function getFallbackDataURI(): string;

package/dist/npm-entry/client/components/ChatFrame/index.d.ts

@@ -38,6 +38,7 @@ type ChatFrameProps = PropsFromState & OwnProps & PropsFromDispatch;
 interface ChatFrameState {
     isMounted: boolean;
     closeTransitionTime: number;
+    showFallback: boolean;
 }
 export declare class ChatFrame extends Component<ChatFrameProps, ChatFrameState> {
     iframeRef: import("preact").RefObject<any>;
@@ -50,6 +51,10 @@ export declare class ChatFrame extends Component<ChatFrameProps, ChatFrameState>
     componentDidMount(): void;
     componentDidUpdate(prevProps: ChatFrameProps): void;
     componentWillUnmount(): void;
+    /**
+     * Clears the fallback timeout and ensures cleanup
+     */
+    clearFallbackTimeout(): void;
     get darkMode(): boolean;
     getIframeSrc(): string;
     get styles(): string;
@@ -59,6 +64,7 @@ export declare class ChatFrame extends Component<ChatFrameProps, ChatFrameState>
     get chooseStyles(): string;
     handleScrollLock(): void;
     collapseIframe(): void;
+    handleFallbackMessage(event: MessageEvent): void;
     /**
      * Initial body "overflow" style may be set to something other than "auto"
      * We should remember it, to put back the initial value when we unlock the scrolling

package/dist/npm-entry/common/constants/timeouts.d.ts

@@ -1 +1,2 @@
 export declare const ANIMATION_DELAY = 50;
+export declare const CHAT_FALLBACK_DELAY_MS = 5000;

package/dist/npm-entry/common/types/store-state.d.ts

@@ -64,4 +64,5 @@ export interface StartOptionsNoFunction {
     crossWindowPersistence?: boolean;
     testMode?: boolean;
     preload?: boolean;
+    showFallbackOnTimeout?: boolean;
 }

package/dist/npm-entry/index.js

@@ -15919,7 +15919,7 @@ const client = new BrowserClient({
     return event;
   },
   environment: "production",
-  release: "1.10.0-3873935",
+  release: "1.11.0-67295d0",
   sampleRate: 0.25,
   autoSessionTracking: false,
   // Integrations don't seem to work with Sentry: https://github.com/getsentry/sentry-javascript/issues/2541
@@ -16496,7 +16496,7 @@ function getEmbedURL(_ref) {
   } else {
     host = `http://${handle}.localhost:9001`;
   }
-  return `${host}/embed/${frameName}/${"3873935"}/index.html`;
+  return `${host}/embed/${frameName}/${"67295d0"}/index.html`;
 }
 function constructQueryString(query) {
   return Object.keys(query).map(key => {
@@ -17036,7 +17036,8 @@ const getInitialState = adaSettings => ({
   chatterInLiveChat: false,
   wasCampaignShownButNowClosed: false,
   proactiveCampaignHadMessages: false,
-  deviceToken: null
+  deviceToken: null,
+  showFallbackOnTimeout: false
 });
 ;// CONCATENATED MODULE: ./src/common/helpers/get-intro-for-url.ts
 function getProcessedPath(path) {
@@ -17676,9 +17677,9 @@ async function log(message, extra, options) {
       service: "embed",
       env: "production",
       embedVersion: 2,
-      version: "1.10.0",
+      version: "1.11.0",
       isNpm: true,
-      commitHash: "3873935"
+      commitHash: "67295d0"
     }))
   });
 }
@@ -18720,6 +18721,7 @@ function ButtonFrame_mapStateToProps(storeState) {
 /* harmony default export */ var components_ButtonFrame = (connect(ButtonFrame_mapStateToProps)(ButtonFrame));
 ;// CONCATENATED MODULE: ./src/common/constants/timeouts.ts
 const ANIMATION_DELAY = 50;
+const CHAT_FALLBACK_DELAY_MS = 5000;
 ;// CONCATENATED MODULE: ./src/common/helpers/is-mobile.ts
 const isMobile = /(iPhone)|(iPod)|(android)|(webOS)/i.exec(navigator.userAgent) !== null;
 ;// CONCATENATED MODULE: ./src/client/components/ChatFrame/chatFrameEvents/chatterEvent/index.ts
@@ -18742,6 +18744,134 @@ function storeChatterEventDataInBrowser(client, payload) {
 }
 ;// CONCATENATED MODULE: ./src/client/components/ChatFrame/chatFrameEvents/index.ts
 
+;// CONCATENATED MODULE: ./src/client/components/ChatFrame/fallback-html.ts
+/**
+ * Fallback HTML shown when the chat iframe fails to load within the timeout period.
+ * This is a self-contained HTML page with inline styles and JavaScript.
+ */
+const FALLBACK_HTML = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, height=device-height">
+  <meta http-equiv="x-ua-compatible" content="IE=edge">
+  <title>Chat - Technical Difficulties</title>
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+    body {
+      margin: 0;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+    .container {
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+      background-color: #ffffff;
+    }
+    .content-area {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px 16px;
+    }
+    .message-container {
+      width: 100%;
+      max-width: 351px;
+    }
+    .message-card {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 24px 16px;
+      border: 1px solid #e8e8eb;
+      border-radius: 16px;
+      background-color: #ffffff;
+      box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.06);
+    }
+    .icon-container {
+      margin-bottom: 8px;
+    }
+    .icon-container svg {
+      fill: rgba(0, 0, 0, 0.65);
+      display: block;
+    }
+    .message-text {
+      margin: 8px 0 0 0;
+      line-height: 20px;
+      font-size: 1rem;
+      text-align: center;
+      color: rgba(0, 0, 0, 0.95);
+    }
+    .close-button {
+      margin-top: 16px;
+      padding: 12px 24px;
+      font-size: 14px;
+      font-weight: 500;
+      color: #ffffff;
+      background-color: #000000;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: background-color 0.2s ease;
+      font-family: inherit;
+    }
+    .close-button:hover {
+      background-color: #333333;
+    }
+    .close-button:active {
+      background-color: #1a1a1a;
+    }
+    .close-button:focus {
+      outline: 2px solid #4d90fe;
+      outline-offset: 2px;
+    }
+  </style>
+</head>
+<body style="margin:0">
+  <div id="app">
+    <div class="container">
+      <div class="content-area">
+        <div class="message-container">
+          <div class="message-card">
+            <div class="icon-container">
+              <svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M12,9a1,1,0,0,0-1,1v3a1,1,0,0,0,2,0V10A1,1,0,0,0,12,9Zm7-7H5A3,3,0,0,0,2,5V15a3,3,0,0,0,3,3H16.59l3.7,3.71A1,1,0,0,0,21,22a.84.84,0,0,0,.38-.08A1,1,0,0,0,22,21V5A3,3,0,0,0,19,2Zm1,16.59-2.29-2.3A1,1,0,0,0,17,16H5a1,1,0,0,1-1-1V5A1,1,0,0,1,5,4H19a1,1,0,0,1,1,1ZM12,6a1,1,0,1,0,1,1A1,1,0,0,0,12,6Z"></path>
+              </svg>
+            </div>
+            <p role="alert" data-testid="default-outage-message" class="message-text">
+              The chat is experiencing technical difficulties and we're working to fix them as soon as possible. Please check back for an update in a few minutes.
+            </p>
+            <button class="close-button" id="closeButton" aria-label="Close chat window">Close</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    document.getElementById('closeButton').addEventListener('click', function() {
+      try {
+        window.parent.postMessage('ADA_FALLBACK_CLOSE', '*');
+      } catch (error) {
+        console.error('Failed to close chat:', error);
+      }
+    });
+  </script>
+</body>
+</html>`;
+
+/**
+ * Returns a data URI containing the fallback HTML.
+ * This is used when the chat iframe fails to load within the timeout period.
+ */
+function getFallbackDataURI() {
+  return `data:text/html;charset=utf-8,${encodeURIComponent(FALLBACK_HTML)}`;
+}
 ;// CONCATENATED MODULE: ./src/client/components/ChatFrame/index.tsx
 
 
@@ -18760,6 +18890,7 @@ function storeChatterEventDataInBrowser(client, payload) {
 
 
 
+
 class ChatFrame extends d {
   constructor() {
     super(...arguments);
@@ -18771,7 +18902,8 @@ class ChatFrame extends d {
     _defineProperty(this, "url", this.getIframeSrc());
     _defineProperty(this, "state", {
       isMounted: false,
-      closeTransitionTime: 200
+      closeTransitionTime: 200,
+      showFallback: false
     });
   } // This url must be a static property - if getIframeSrc is called repeatedly, the resulting URL may change improperly
   // For example, the skipGreeting query parameter was being changed from true to false, causing the AFM-384 bug
@@ -18792,6 +18924,9 @@ class ChatFrame extends d {
     this.bindChatEventHandlers();
     this.handleScrollLock();
 
+    // Listen for messages from the fallback iframe
+    window.addEventListener("message", this.handleFallbackMessage.bind(this));
+
     // We use this log to track number of chat impressions (times when users see chat iFrame render first time).
     log("Chat frame mount", {
       handle,
@@ -18809,8 +18944,23 @@ class ChatFrame extends d {
     const {
       isDrawerOpen
     } = this.props;
+    const {
+      showFallback
+    } = this.state;
     if (isDrawerOpen !== prevProps.isDrawerOpen) {
       this.handleScrollLock();
+
+      // When opening after fallback was shown, reset state and reload iframe
+      if (isDrawerOpen && !prevProps.isDrawerOpen && showFallback) {
+        this.setState({
+          showFallback: false
+        });
+
+        // Force reload by updating src (frameLoaded will handle timeout setup)
+        if (this.iframeRef.current) {
+          this.iframeRef.current.src = this.url;
+        }
+      }
     }
   }
   componentWillUnmount() {
@@ -18818,6 +18968,17 @@ class ChatFrame extends d {
       messageService
     } = this.props;
     messageService.unregisterChannel("chat");
+    this.clearFallbackTimeout();
+  }
+
+  /**
+   * Clears the fallback timeout and ensures cleanup
+   */
+  clearFallbackTimeout() {
+    if (this.chatRenderTimeout) {
+      clearTimeout(this.chatRenderTimeout);
+      this.chatRenderTimeout = undefined;
+    }
   }
   get darkMode() {
     var _client$ui_settings, _client$ui_settings$c;
@@ -18852,7 +19013,7 @@ class ChatFrame extends d {
     const hostPageUrlParams = new URL(window.location.href).searchParams;
     const smsToken = hostPageUrlParams.get("adaSMSToken");
     const queryParams = {
-      embedVersion: "3873935".slice(0, 7),
+      embedVersion: "67295d0".slice(0, 7),
       greeting,
       language,
       skipGreeting,
@@ -19062,6 +19223,19 @@ class ChatFrame extends d {
     this.iframeRef.current.style.width = 0;
     this.iframeRef.current.style.height = 0;
   }
+  handleFallbackMessage(event) {
+    var _this$iframeRef$curre;
+    // Only accept messages from our own iframe
+    if (!event.source || event.source !== ((_this$iframeRef$curre = this.iframeRef.current) === null || _this$iframeRef$curre === void 0 ? void 0 : _this$iframeRef$curre.contentWindow)) {
+      return;
+    }
+    if (event.data === "ADA_FALLBACK_CLOSE") {
+      const {
+        toggleChat
+      } = this.props;
+      toggleChat();
+    }
+  }
 
   /**
    * Initial body "overflow" style may be set to something other than "auto"
@@ -19138,7 +19312,7 @@ class ChatFrame extends d {
           if (!this.channel) {
             throw new AdaEmbedError("`this.channel` is not defined");
           }
-          clearTimeout(this.chatRenderTimeout);
+          this.clearFallbackTimeout();
           this.channel.isConnected = true;
           setConnectionState({
             chat: ConnectionState.Done
@@ -19406,33 +19580,72 @@ class ChatFrame extends d {
     });
   }
   frameLoaded() {
+    var _this$iframeRef$curre2;
     const {
       handle,
-      adaSettings
+      adaSettings,
+      isDrawerOpen
     } = this.props;
+    const {
+      showFallback
+    } = this.state;
     // SUP-1141- TODO: Remove chatFrameTimeoutCallback
     const {
-      chatFrameTimeoutCallback
+      chatFrameTimeoutCallback,
+      showFallbackOnTimeout
     } = adaSettings;
+
+    // Don't start timeout if drawer is closed
+    if (!isDrawerOpen) {
+      return;
+    }
+
+    // Don't start timeout if already showing fallback (prevents redundant timeouts)
+    if (showFallback) {
+      return;
+    }
+
+    // Don't start timeout if loading fallback data URI (would create infinite loop)
+    const currentSrc = (_this$iframeRef$curre2 = this.iframeRef.current) === null || _this$iframeRef$curre2 === void 0 ? void 0 : _this$iframeRef$curre2.src;
+    if (currentSrc !== null && currentSrc !== void 0 && currentSrc.startsWith("data:text/html")) {
+      return;
+    }
+
+    // Clear any existing timeout before starting new one (prevents orphaned timeouts)
+    this.clearFallbackTimeout();
     this.chatRenderTimeout = window.setTimeout(() => {
       var _this$channel;
-      log("Chat frame took over 5 seconds to respond", {
-        handle,
-        embedSettings: adaSettings
-      });
-      if (!((_this$channel = this.channel) !== null && _this$channel !== void 0 && _this$channel.isConnected)) {
+      const {
+        isDrawerOpen: drawerIsOpen
+      } = this.props;
+
+      // Only show fallback if drawer is STILL open and chat hasn't connected
+      if (!((_this$channel = this.channel) !== null && _this$channel !== void 0 && _this$channel.isConnected) && drawerIsOpen) {
+        log("Chat frame took over 5 seconds to respond", {
+          handle,
+          embedSettings: adaSettings
+        });
+
         // SUP-1141- TODO: Remove chatFrameTimeoutCallback
         if (chatFrameTimeoutCallback) {
           chatFrameTimeoutCallback();
         }
         publishEvent("ada:chat_frame_timeout", undefined);
+        if (showFallbackOnTimeout) {
+          this.setState({
+            showFallback: true
+          });
+        }
       }
-    }, 5000);
+    }, CHAT_FALLBACK_DELAY_MS);
   }
   render() {
     const {
       client
     } = this.props;
+    const {
+      showFallback
+    } = this.state;
     const iFrameName = `ada-chat-frame`;
     const sandboxParams = "allow-downloads allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation allow-forms allow-modals";
     const roleDescription = () => {
@@ -19441,8 +19654,11 @@ class ChatFrame extends d {
       }
       return `${client.handle.charAt(0).toUpperCase() + client.handle.slice(1)} Chat Window`;
     };
+
+    // Use fallback URL if showFallback is true, otherwise use normal chat URL
+    const iframeSrc = showFallback ? getFallbackDataURI() : this.url;
     return v("iframe", {
-      src: this.url,
+      src: iframeSrc,
       scrolling: "no",
       style: this.chooseStyles,
       frameBorder: "0",
@@ -19498,6 +19714,8 @@ function ChatFrame_mapDispatchToProps(dispatch) {
     toggleChat: bindActionCreators(ActionCreators.TOGGLE_CHAT_ACTION, dispatch)
   };
 }
+
+// eslint-disable-next-line import/no-default-export
 /* harmony default export */ var components_ChatFrame = (connect(ChatFrame_mapStateToProps, ChatFrame_mapDispatchToProps)(ChatFrame));
 ;// CONCATENATED MODULE: ./src/client/components/IntroFrame/index.tsx
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ada-support/embed2",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "description": "",
   "main": "dist/npm-entry",
   "typings": "dist/npm-entry/index-npm.d.ts",
@@ -52,8 +52,8 @@
     "@babel/plugin-transform-runtime": "^7.16.10",
     "@babel/preset-env": "^7.23.2",
     "@babel/preset-typescript": "^7.23.2",
+    "@testing-library/jest-dom": "^5",
     "@testing-library/preact": "^2.0.1",
-    "@types/enzyme": "^3.10.18",
     "@types/jest": "^27.0.2",
     "@types/json-stable-stringify": "^1.0.33",
     "@types/lodash.debounce": "^4.0.6",
@@ -62,15 +62,12 @@
     "@types/uniqid": "^5.3.2",
     "@types/webpack": "^5.28.0",
     "@types/webpack-bundle-analyzer": "^4.4.1",
-    "@types/webpack-dev-server": "^4.7.2",
     "babel-loader": "9.1.2",
     "babel-preset-preact": "^2.0.0",
     "browserslist": "^4.17.4",
-    "cypress": "^9.6.1",
+    "cypress": "^13.0.0",
     "depcheck": "^1.4.3",
     "dotenv": "^8.2.0",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-preact-pure": "^4.0.1",
     "eslint": "^8.8.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-chai-friendly": "^0.7.2",
@@ -85,14 +82,14 @@
     "mock-xmlhttprequest": "^7.0.4",
     "npm-run-all": "^4.1.5",
     "prettier": "2.7.1",
-    "start-server-and-test": "^2.0.4",
+    "start-server-and-test": "^2.1.2",
     "ts-node": "^10.2.1",
     "tsconfig-paths": "^3.11.0",
     "typescript": "^5.6.3",
     "webpack": "^5.76.0",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.3.1",
+    "webpack-dev-server": "^5.2.2",
     "webpack-merge": "^5.8.0"
   },
   "dependencies": {
@@ -113,7 +110,8 @@
     "minimist": ">=1.2.6",
     "terser": ">=5.14.2",
     "@babel/traverse": ">=7.23.2",
-    "semver": ">=7.5.2"
+    "semver": ">=7.5.2",
+    "form-data": ">=4.0.4"
   },
   "files": [
     "dist/npm-entry"
@@ -125,4 +123,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}