@papercups-io/chat-widget - npm Package Compare versions

Comparing version 1.0.20-beta.0 to 1.0.20-beta.1

dist/components/EmbeddableWidget.d.ts

 /** @jsx jsx */
-/// <reference types="react" />
+import React from 'react';
 import { CustomerMetadata } from '../api';
@@ -15,3 +15,18 @@ declare type Props = {
 };
-declare const EmbeddableWidget: ({ accountId, title, subtitle, primaryColor, baseUrl, greeting, customer, newMessagePlaceholder, defaultIsOpen, }: Props) => JSX.Element;
+declare class EmbeddableWidget extends React.Component<Props, any> {
+    iframeRef: any;
+    storage: any;
+    unsubscribe: any;
+    constructor(props: Props);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: Props): void;
+    handlers: (msg: any) => any;
+    send: (event: string, payload?: any) => void;
+    handleChatLoaded: () => void;
+    sendCustomerUpdate: (payload: any) => void;
+    handleCacheCustomerId: (payload: any) => any;
+    handleToggleOpen: () => void;
+    render(): JSX.Element | null;
+}
 export default EmbeddableWidget;

dist/index.js

@@ -27,2 +27,8 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  subClass.__proto__ = superClass;
+}
+
 var Path = function Path(props) {
@@ -1301,103 +1307,98 @@ return React.createElement(framerMotion.motion.path, Object.assign({
 
-var EmbeddableWidget = function EmbeddableWidget(_ref) {
-  var accountId = _ref.accountId,
-      title = _ref.title,
-      subtitle = _ref.subtitle,
-      primaryColor = _ref.primaryColor,
-      baseUrl = _ref.baseUrl,
-      greeting = _ref.greeting,
-      customer = _ref.customer,
-      newMessagePlaceholder = _ref.newMessagePlaceholder,
-      _ref$defaultIsOpen = _ref.defaultIsOpen,
-      defaultIsOpen = _ref$defaultIsOpen === void 0 ? false : _ref$defaultIsOpen;
+var EmbeddableWidget = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(EmbeddableWidget, _React$Component);
 
-  var _React$useState = React.useState(false),
-      isOpen = _React$useState[0],
-      setIsOpen = _React$useState[1];
+  function EmbeddableWidget(props) {
+    var _this;
 
-  var iframeRef = React.useRef(null);
-  var win = window || {};
-  var storage = store(win);
-  var cachedCustomerId = storage.getCustomerId();
-  var query = React.useRef(qs.stringify({
-    accountId: accountId,
-    title: title,
-    subtitle: subtitle,
-    primaryColor: primaryColor,
-    baseUrl: baseUrl,
-    greeting: greeting,
-    newMessagePlaceholder: newMessagePlaceholder,
-    customerId: cachedCustomerId
-  })).current;
-  var theme = getThemeConfig({
-    primary: primaryColor
-  });
+    _this = _React$Component.call(this, props) || this;
 
-  var send = function send(event, payload) {
-    console.log('Sending from parent:', {
-      event: event,
-      payload: payload
-    });
-    var el = iframeRef.current;
-    el.contentWindow.postMessage({
-      event: event,
-      payload: payload
-    }, '*');
-  };
+    _this.handlers = function (msg) {
+      console.log('Handling in parent:', msg.data);
+      var _msg$data = msg.data,
+          event = _msg$data.event,
+          _msg$data$payload = _msg$data.payload,
+          payload = _msg$data$payload === void 0 ? {} : _msg$data$payload;
 
-  var handleChatLoaded = function handleChatLoaded() {
-    if (defaultIsOpen) {
-      setIsOpen(true);
-    }
+      switch (event) {
+        case 'chat:loaded':
+          return _this.handleChatLoaded();
 
-    return send('papercups:ping');
-  };
+        case 'customer:created':
+          return _this.handleCacheCustomerId(payload);
 
-  var sendCustomerUpdate = function sendCustomerUpdate(payload) {
-    var customerId = payload.customerId;
-    var customerBrowserInfo = getUserInfo(win);
+        case 'conversation:join':
+          return _this.sendCustomerUpdate(payload);
 
-    var metadata = _extends({}, customerBrowserInfo, customer);
+        default:
+          return null;
+      }
+    };
 
-    return send('customer:update', {
-      customerId: customerId,
-      metadata: metadata
-    });
-  };
+    _this.send = function (event, payload) {
+      console.log('Sending from parent:', {
+        event: event,
+        payload: payload
+      });
+      var el = _this.iframeRef;
+      el.contentWindow.postMessage({
+        event: event,
+        payload: payload
+      }, '*');
+    };
 
-  var handleCacheCustomerId = function handleCacheCustomerId(payload) {
-    var customerId = payload.customerId;
-    return storage.setCustomerId(customerId);
-  };
+    _this.handleChatLoaded = function () {
+      if (_this.props.defaultIsOpen) {
+        _this.setState({
+          isOpen: true
+        });
+      }
 
-  var handlers = function handlers(msg) {
-    console.log('Handling in parent:', msg.data);
-    var _msg$data = msg.data,
-        event = _msg$data.event,
-        _msg$data$payload = _msg$data.payload,
-        payload = _msg$data$payload === void 0 ? {} : _msg$data$payload;
+      return _this.send('papercups:ping');
+    };
 
-    switch (event) {
-      case 'chat:loaded':
-        return handleChatLoaded();
+    _this.sendCustomerUpdate = function (payload) {
+      var customerId = payload.customerId;
+      var customerBrowserInfo = getUserInfo(window);
 
-      case 'customer:created':
-        return handleCacheCustomerId(payload);
+      var metadata = _extends({}, customerBrowserInfo, _this.props.customer);
 
-      case 'conversation:join':
-        return sendCustomerUpdate(payload);
+      return _this.send('customer:update', {
+        customerId: customerId,
+        metadata: metadata
+      });
+    };
 
-      default:
-        return null;
-    }
-  };
+    _this.handleCacheCustomerId = function (payload) {
+      var customerId = payload.customerId;
+      return _this.storage.setCustomerId(customerId);
+    };
 
-  React.useEffect(function () {
-    var unsubscribe = setup(win, handlers);
-    return function () {
-      return unsubscribe();
+    _this.handleToggleOpen = function () {
+      _this.setState({
+        isOpen: !_this.state.isOpen
+      });
     };
-  }, []);
-  React.useEffect(function () {
-    send('config:update', {
+
+    _this.state = {
+      isOpen: false,
+      query: ''
+    };
+    return _this;
+  }
+
+  var _proto = EmbeddableWidget.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    var _this$props = this.props,
+        accountId = _this$props.accountId,
+        title = _this$props.title,
+        subtitle = _this$props.subtitle,
+        primaryColor = _this$props.primaryColor,
+        baseUrl = _this$props.baseUrl,
+        greeting = _this$props.greeting,
+        newMessagePlaceholder = _this$props.newMessagePlaceholder;
+    this.unsubscribe = setup(window, this.handlers);
+    this.storage = store(window);
+    var query = qs.stringify({
       accountId: accountId,
@@ -1409,52 +1410,104 @@ title: title,
       greeting: greeting,
-      newMessagePlaceholder: newMessagePlaceholder
+      newMessagePlaceholder: newMessagePlaceholder,
+      customerId: this.storage.getCustomerId()
     });
-  }, [accountId, title, subtitle, primaryColor, baseUrl, greeting, newMessagePlaceholder]);
+    this.setState({
+      query: query
+    });
+  };
 
-  var handleToggleOpen = function handleToggleOpen() {
-    return setIsOpen(!isOpen);
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    this.unsubscribe && this.unsubscribe();
   };
 
-  return themeUi.jsx(themeUi.ThemeProvider, {
-    theme: theme
-  }, themeUi.jsx(framerMotion.motion.iframe, {
-    ref: iframeRef,
-    className: 'Papercups-chatWindowContainer',
-    animate: isOpen ? 'open' : 'closed',
-    variants: {
-      closed: {
-        opacity: 0,
-        y: 4
-      },
-      open: {
-        opacity: 1,
-        y: 0
-      }
-    },
-    transition: {
-      duration: 0.2,
-      ease: 'easeIn'
-    },
-    src: IFRAME_URL + "?" + query,
-    style: isOpen ? {} : {
-      bottom: -9999
-    },
-    sx: {
-      border: 'none',
-      bg: 'background',
-      variant: 'styles.WidgetContainer'
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    var _this$props2 = this.props,
+        accountId = _this$props2.accountId,
+        title = _this$props2.title,
+        subtitle = _this$props2.subtitle,
+        primaryColor = _this$props2.primaryColor,
+        baseUrl = _this$props2.baseUrl,
+        greeting = _this$props2.greeting,
+        newMessagePlaceholder = _this$props2.newMessagePlaceholder;
+    var current = [accountId, title, subtitle, primaryColor, baseUrl, greeting, newMessagePlaceholder];
+    var prev = [prevProps.accountId, prevProps.title, prevProps.subtitle, prevProps.primaryColor, prevProps.baseUrl, prevProps.greeting, prevProps.newMessagePlaceholder];
+    var shouldUpdate = current.some(function (value, idx) {
+      return value !== prev[idx];
+    });
+
+    if (shouldUpdate) {
+      this.send('config:update', {
+        accountId: accountId,
+        title: title,
+        subtitle: subtitle,
+        primaryColor: primaryColor,
+        baseUrl: baseUrl,
+        greeting: greeting,
+        newMessagePlaceholder: newMessagePlaceholder
+      });
     }
-  }, "Loading..."), themeUi.jsx(framerMotion.motion.div, {
-    className: 'Papercups-toggleButtonContainer',
-    initial: false,
-    animate: isOpen ? 'open' : 'closed',
-    sx: {
-      variant: 'styles.WidgetToggleContainer'
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    var primaryColor = this.props.primaryColor;
+    var _this$state = this.state,
+        isOpen = _this$state.isOpen,
+        query = _this$state.query;
+
+    if (!query) {
+      return null;
     }
-  }, themeUi.jsx(WidgetToggle, {
-    toggle: handleToggleOpen
-  })));
-};
 
+    var theme = getThemeConfig({
+      primary: primaryColor
+    });
+    return themeUi.jsx(themeUi.ThemeProvider, {
+      theme: theme
+    }, themeUi.jsx(framerMotion.motion.iframe, {
+      ref: function ref(el) {
+        return _this2.iframeRef = el;
+      },
+      className: 'Papercups-chatWindowContainer',
+      animate: isOpen ? 'open' : 'closed',
+      variants: {
+        closed: {
+          opacity: 0,
+          y: 4
+        },
+        open: {
+          opacity: 1,
+          y: 0
+        }
+      },
+      transition: {
+        duration: 0.2,
+        ease: 'easeIn'
+      },
+      src: IFRAME_URL + "?" + query,
+      style: isOpen ? {} : {
+        bottom: -9999
+      },
+      sx: {
+        border: 'none',
+        bg: 'background',
+        variant: 'styles.WidgetContainer'
+      }
+    }, "Loading..."), themeUi.jsx(framerMotion.motion.div, {
+      className: 'Papercups-toggleButtonContainer',
+      initial: false,
+      animate: isOpen ? 'open' : 'closed',
+      sx: {
+        variant: 'styles.WidgetToggleContainer'
+      }
+    }, themeUi.jsx(WidgetToggle, {
+      toggle: this.handleToggleOpen
+    })));
+  };
+
+  return EmbeddableWidget;
+}(React.Component);
+
 module.exports = EmbeddableWidget;
 //# sourceMappingURL=index.js.map

dist/index.modern.js

@@ -25,2 +25,8 @@ import React from 'react';
 
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  subClass.__proto__ = superClass;
+}
+
 var Path = function Path(props) {
@@ -1299,103 +1305,98 @@ return React.createElement(motion.path, Object.assign({
 
-var EmbeddableWidget = function EmbeddableWidget(_ref) {
-  var accountId = _ref.accountId,
-      title = _ref.title,
-      subtitle = _ref.subtitle,
-      primaryColor = _ref.primaryColor,
-      baseUrl = _ref.baseUrl,
-      greeting = _ref.greeting,
-      customer = _ref.customer,
-      newMessagePlaceholder = _ref.newMessagePlaceholder,
-      _ref$defaultIsOpen = _ref.defaultIsOpen,
-      defaultIsOpen = _ref$defaultIsOpen === void 0 ? false : _ref$defaultIsOpen;
+var EmbeddableWidget = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(EmbeddableWidget, _React$Component);
 
-  var _React$useState = React.useState(false),
-      isOpen = _React$useState[0],
-      setIsOpen = _React$useState[1];
+  function EmbeddableWidget(props) {
+    var _this;
 
-  var iframeRef = React.useRef(null);
-  var win = window || {};
-  var storage = store(win);
-  var cachedCustomerId = storage.getCustomerId();
-  var query = React.useRef(qs.stringify({
-    accountId: accountId,
-    title: title,
-    subtitle: subtitle,
-    primaryColor: primaryColor,
-    baseUrl: baseUrl,
-    greeting: greeting,
-    newMessagePlaceholder: newMessagePlaceholder,
-    customerId: cachedCustomerId
-  })).current;
-  var theme = getThemeConfig({
-    primary: primaryColor
-  });
+    _this = _React$Component.call(this, props) || this;
 
-  var send = function send(event, payload) {
-    console.log('Sending from parent:', {
-      event: event,
-      payload: payload
-    });
-    var el = iframeRef.current;
-    el.contentWindow.postMessage({
-      event: event,
-      payload: payload
-    }, '*');
-  };
+    _this.handlers = function (msg) {
+      console.log('Handling in parent:', msg.data);
+      var _msg$data = msg.data,
+          event = _msg$data.event,
+          _msg$data$payload = _msg$data.payload,
+          payload = _msg$data$payload === void 0 ? {} : _msg$data$payload;
 
-  var handleChatLoaded = function handleChatLoaded() {
-    if (defaultIsOpen) {
-      setIsOpen(true);
-    }
+      switch (event) {
+        case 'chat:loaded':
+          return _this.handleChatLoaded();
 
-    return send('papercups:ping');
-  };
+        case 'customer:created':
+          return _this.handleCacheCustomerId(payload);
 
-  var sendCustomerUpdate = function sendCustomerUpdate(payload) {
-    var customerId = payload.customerId;
-    var customerBrowserInfo = getUserInfo(win);
+        case 'conversation:join':
+          return _this.sendCustomerUpdate(payload);
 
-    var metadata = _extends({}, customerBrowserInfo, customer);
+        default:
+          return null;
+      }
+    };
 
-    return send('customer:update', {
-      customerId: customerId,
-      metadata: metadata
-    });
-  };
+    _this.send = function (event, payload) {
+      console.log('Sending from parent:', {
+        event: event,
+        payload: payload
+      });
+      var el = _this.iframeRef;
+      el.contentWindow.postMessage({
+        event: event,
+        payload: payload
+      }, '*');
+    };
 
-  var handleCacheCustomerId = function handleCacheCustomerId(payload) {
-    var customerId = payload.customerId;
-    return storage.setCustomerId(customerId);
-  };
+    _this.handleChatLoaded = function () {
+      if (_this.props.defaultIsOpen) {
+        _this.setState({
+          isOpen: true
+        });
+      }
 
-  var handlers = function handlers(msg) {
-    console.log('Handling in parent:', msg.data);
-    var _msg$data = msg.data,
-        event = _msg$data.event,
-        _msg$data$payload = _msg$data.payload,
-        payload = _msg$data$payload === void 0 ? {} : _msg$data$payload;
+      return _this.send('papercups:ping');
+    };
 
-    switch (event) {
-      case 'chat:loaded':
-        return handleChatLoaded();
+    _this.sendCustomerUpdate = function (payload) {
+      var customerId = payload.customerId;
+      var customerBrowserInfo = getUserInfo(window);
 
-      case 'customer:created':
-        return handleCacheCustomerId(payload);
+      var metadata = _extends({}, customerBrowserInfo, _this.props.customer);
 
-      case 'conversation:join':
-        return sendCustomerUpdate(payload);
+      return _this.send('customer:update', {
+        customerId: customerId,
+        metadata: metadata
+      });
+    };
 
-      default:
-        return null;
-    }
-  };
+    _this.handleCacheCustomerId = function (payload) {
+      var customerId = payload.customerId;
+      return _this.storage.setCustomerId(customerId);
+    };
 
-  React.useEffect(function () {
-    var unsubscribe = setup(win, handlers);
-    return function () {
-      return unsubscribe();
+    _this.handleToggleOpen = function () {
+      _this.setState({
+        isOpen: !_this.state.isOpen
+      });
     };
-  }, []);
-  React.useEffect(function () {
-    send('config:update', {
+
+    _this.state = {
+      isOpen: false,
+      query: ''
+    };
+    return _this;
+  }
+
+  var _proto = EmbeddableWidget.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    var _this$props = this.props,
+        accountId = _this$props.accountId,
+        title = _this$props.title,
+        subtitle = _this$props.subtitle,
+        primaryColor = _this$props.primaryColor,
+        baseUrl = _this$props.baseUrl,
+        greeting = _this$props.greeting,
+        newMessagePlaceholder = _this$props.newMessagePlaceholder;
+    this.unsubscribe = setup(window, this.handlers);
+    this.storage = store(window);
+    var query = qs.stringify({
       accountId: accountId,
@@ -1407,52 +1408,104 @@ title: title,
       greeting: greeting,
-      newMessagePlaceholder: newMessagePlaceholder
+      newMessagePlaceholder: newMessagePlaceholder,
+      customerId: this.storage.getCustomerId()
     });
-  }, [accountId, title, subtitle, primaryColor, baseUrl, greeting, newMessagePlaceholder]);
+    this.setState({
+      query: query
+    });
+  };
 
-  var handleToggleOpen = function handleToggleOpen() {
-    return setIsOpen(!isOpen);
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    this.unsubscribe && this.unsubscribe();
   };
 
-  return jsx(ThemeProvider, {
-    theme: theme
-  }, jsx(motion.iframe, {
-    ref: iframeRef,
-    className: 'Papercups-chatWindowContainer',
-    animate: isOpen ? 'open' : 'closed',
-    variants: {
-      closed: {
-        opacity: 0,
-        y: 4
-      },
-      open: {
-        opacity: 1,
-        y: 0
-      }
-    },
-    transition: {
-      duration: 0.2,
-      ease: 'easeIn'
-    },
-    src: IFRAME_URL + "?" + query,
-    style: isOpen ? {} : {
-      bottom: -9999
-    },
-    sx: {
-      border: 'none',
-      bg: 'background',
-      variant: 'styles.WidgetContainer'
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    var _this$props2 = this.props,
+        accountId = _this$props2.accountId,
+        title = _this$props2.title,
+        subtitle = _this$props2.subtitle,
+        primaryColor = _this$props2.primaryColor,
+        baseUrl = _this$props2.baseUrl,
+        greeting = _this$props2.greeting,
+        newMessagePlaceholder = _this$props2.newMessagePlaceholder;
+    var current = [accountId, title, subtitle, primaryColor, baseUrl, greeting, newMessagePlaceholder];
+    var prev = [prevProps.accountId, prevProps.title, prevProps.subtitle, prevProps.primaryColor, prevProps.baseUrl, prevProps.greeting, prevProps.newMessagePlaceholder];
+    var shouldUpdate = current.some(function (value, idx) {
+      return value !== prev[idx];
+    });
+
+    if (shouldUpdate) {
+      this.send('config:update', {
+        accountId: accountId,
+        title: title,
+        subtitle: subtitle,
+        primaryColor: primaryColor,
+        baseUrl: baseUrl,
+        greeting: greeting,
+        newMessagePlaceholder: newMessagePlaceholder
+      });
     }
-  }, "Loading..."), jsx(motion.div, {
-    className: 'Papercups-toggleButtonContainer',
-    initial: false,
-    animate: isOpen ? 'open' : 'closed',
-    sx: {
-      variant: 'styles.WidgetToggleContainer'
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    var primaryColor = this.props.primaryColor;
+    var _this$state = this.state,
+        isOpen = _this$state.isOpen,
+        query = _this$state.query;
+
+    if (!query) {
+      return null;
     }
-  }, jsx(WidgetToggle, {
-    toggle: handleToggleOpen
-  })));
-};
 
+    var theme = getThemeConfig({
+      primary: primaryColor
+    });
+    return jsx(ThemeProvider, {
+      theme: theme
+    }, jsx(motion.iframe, {
+      ref: function ref(el) {
+        return _this2.iframeRef = el;
+      },
+      className: 'Papercups-chatWindowContainer',
+      animate: isOpen ? 'open' : 'closed',
+      variants: {
+        closed: {
+          opacity: 0,
+          y: 4
+        },
+        open: {
+          opacity: 1,
+          y: 0
+        }
+      },
+      transition: {
+        duration: 0.2,
+        ease: 'easeIn'
+      },
+      src: IFRAME_URL + "?" + query,
+      style: isOpen ? {} : {
+        bottom: -9999
+      },
+      sx: {
+        border: 'none',
+        bg: 'background',
+        variant: 'styles.WidgetContainer'
+      }
+    }, "Loading..."), jsx(motion.div, {
+      className: 'Papercups-toggleButtonContainer',
+      initial: false,
+      animate: isOpen ? 'open' : 'closed',
+      sx: {
+        variant: 'styles.WidgetToggleContainer'
+      }
+    }, jsx(WidgetToggle, {
+      toggle: this.handleToggleOpen
+    })));
+  };
+
+  return EmbeddableWidget;
+}(React.Component);
+
 export default EmbeddableWidget;
 //# sourceMappingURL=index.modern.js.map

package.json

 {
   "name": "@papercups-io/chat-widget",
-  "version": "1.0.20-beta.0",
+  "version": "1.0.20-beta.1",
   "description": "Papercups chat widget",
@@ -5,0 +5,0 @@ "author": "reichert621",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

277340

increased by2.58%

Lines of code

3772

increased by2.75%

No dependency changes