Implements final changes for v1.0.0-alpha release

.eslintrc

@@ -9,6 +9,7 @@
     "react/jsx-filename-extension": "off",
     "import/no-unresolved": "off",
     "import/extensions": "off",
+    "import/prefer-default-export": "off",
     "jsx-a11y/anchor-is-valid": "off",
     "react/no-unescaped-entities": "off",
     "react/sort-comp": "off",
@@ -20,7 +21,9 @@
         "devDependencies": ["**/*.test.tsx"]
       }
     ],
-    "no-use-before-define": "off"
+    "no-use-before-define": "off",
+    "no-restricted-syntax": "off",
+    "no-continue": "off"
   },
   "env": {
     "browser": true,

README.md

@@ -12,19 +12,20 @@ An [Intercom](http://intercom.com/) component for React that truly encapsulates
 yarn add intercom-react
 ```
 
+_Before you install the library make sure to read the [notes on reliability](#️-a-few-notes-on-reliability)._
+
 ## Setup
 
 ```tsx
 <Intercom
   open
   appId="fyq3wodw"
-  userData={{
+  user={{
     user_id: '9876',
     email: 'john.doe@example.com',
     created_at: 1234567890,
     name: 'John Doe',
   }}
-  locationKey="/home"
   onOpen={() => {}}
   onClose={() => {}}
   onUnreadCountChange={unreadCount => {}}
@@ -33,13 +34,13 @@ yarn add intercom-react
 ```
 
 * `appId`: the ID of your app.
-* `userData`: all user data. If this changes during the lifecycle the component will call `intercom('update', userData)`.
+* `user` (optional): all user data. If this changes during the lifecycle the component will call `intercom('update', userData)`.
 * `open` (optional): whether Intercom is showing or not.
-* `locationKey`: (optional): a key for the component to detect if the location changes. If this changes during the lifecycle the component will call `intercom('update', userData)`.
 * `onOpen` (optional): called when intercom opens.
 * `onClose` (optional): called when intercom closes.
 * `onUnreadCountChange` (optional): called when the unread count changes.
 * `onInitialization` (optional): called when intercom has initialized. The component passes the `intercom` method to this callback in case you require advanced usage like [emitting events](https://developers.intercom.com/docs/intercom-javascript#section-intercomtrackevent) or [pre-populating content](https://developers.intercom.com/docs/intercom-javascript#section-intercomshownewmessage).
+* `launcher` (optional): whether a launcher button should be shown. Defaults to `true`.
 
 ## How is this different?
 
@@ -49,6 +50,14 @@ What this means is that if you would get into a situation where you would have t
 
 I wrote this component to create an isolated Intercom component that cleans up after itself when unmounted for a "true" React experience.
 
+## ⚠️ A few notes on reliability
+
+The main purpose of this component is to provide a way for you to integrate Intercom into your project without having it live in the global scope and it therefor being unmountable.
+
+Getting that to work took quite a bit of [reverse engineering](https://github.com/kvendrik/intercom-react/pull/15) and I haven't been able to find a way to include a specific version of the library yet which means that **things might stop working in future versions of the Intercom library**. I would therefor recommend that you only use this library if you have a solid reason for needing Intercom to be unmountable. If not I recommend you use a solution like [`react-intercom`](https://github.com/nhagen/react-intercom) which simply mounts Intercom to the global scope.
+
+Having that said I appreciate your interest in the library and look forward to hearing your experience with it 🙌 .
+
 ## 🏗 Contributing
 
 1.  Make your changes.

package.json

@@ -1,45 +1,45 @@
 {
   "name": "intercom-react",
-  "version": "1.0.0",
+  "version": "1.0.0-alpha.1",
   "description": "An Intercom component for React.",
   "repository": {
     "type": "git",
     "url": "https://github.com/kvendrik/intercom-react.git"
   },
-  "keywords": [
-    "intercom",
-    "react",
-    "live",
-    "chat",
-    "support"
-  ],
+  "keywords": ["intercom", "react", "live", "chat", "support"],
   "main": "build/index.js",
   "module": "build/index.es.js",
   "types": "build/types/index.d.ts",
   "author": "Koen Vendrik <k.vendrik@gmail.com>",
   "license": "MIT",
   "scripts": {
-    "playground": "webpack-dev-server --hot --inline --config ./playground/webpack.config.js",
+    "playground":
+      "webpack-dev-server --hot --inline --config ./playground/webpack.config.js",
     "lint": "yarn lint:ts && yarn lint:tslint && yarn lint:eslint",
     "lint:ts": "tsc --noEmit",
-    "lint:eslint": "eslint src --ext .tsx --ext .ts && eslint playground --ext .tsx --ext .ts",
-    "lint:tslint": "tslint -c tslint.json --project tsconfig.json 'src/**/*.ts' 'src/**/*.tsx' --exclude 'src/**/*.d.ts' && tslint -c tslint.json --project tsconfig.json 'playground/**/*.ts' 'playground/**/*.tsx' --exclude 'playground/**/*.d.ts'",
-    "test": "jest --silent",
+    "lint:eslint":
+      "eslint src --ext .tsx --ext .ts && eslint playground --ext .tsx --ext .ts",
+    "lint:tslint":
+      "tslint -c tslint.json --project tsconfig.json 'src/**/*.ts' 'src/**/*.tsx' --exclude 'src/**/*.d.ts' && tslint -c tslint.json --project tsconfig.json 'playground/**/*.ts' 'playground/**/*.tsx' --exclude 'playground/**/*.d.ts'",
+    "test": "jest",
     "test:bundle": "yarn build && bundlesize",
     "test:debug": "jest",
     "test:coverage": "yarn test --coverage",
-    "test:coveralls": "yarn test --coverage --coverageReporters=text-lcov | coveralls",
-    "test:ci": "yarn lint && yarn test && yarn test:coveralls && yarn test:bundle",
-    "build": "rollup -c && mv build/src build/types",
+    "test:coveralls":
+      "yarn test --coverage --coverageReporters=text-lcov | coveralls",
+    "test:ci":
+      "yarn lint && yarn test && yarn test:coveralls && yarn test:bundle",
+    "build": "yarn clean && rollup -c && mv build/src build/types",
     "clean": "rm -rf build"
   },
   "bundlesize": [
     {
       "path": "build/index.js",
-      "maxSize": "3 kB"
+      "maxSize": "4 kB"
     }
   ],
   "devDependencies": {
+    "@shopify/enzyme-utilities": "^1.1.4",
     "@types/enzyme": "^3.1.9",
     "@types/jest": "^22.2.3",
     "@types/react": "^16.3.11",
@@ -92,7 +92,7 @@
     "webpack-dev-server": "^3.1.3"
   },
   "dependencies": {
-    "lodash-decorators": "^5.0.1",
+    "lodash-decorators": "^6.0.0",
     "react": "^16.3.2",
     "react-dom": "^16.3.2"
   }

playground/Playground.tsx

@@ -1,5 +1,33 @@
 import * as React from 'react';
-
+import {bind} from 'lodash-decorators';
 import Intercom from '../src';
 
-export default () => <Intercom appId="fyq3wodw" userData={{}} />;
+interface State {
+  open: boolean;
+}
+
+export default class Playground extends React.PureComponent<{}, State> {
+  state = {
+    open: false,
+  };
+
+  render() {
+    const {open} = this.state;
+    return (
+      <>
+        <button onClick={this.openIntercom}>Open</button>
+        <Intercom appId="fyq3wodw" open={open} onClose={this.closeIntercom} />
+      </>
+    );
+  }
+
+  @bind()
+  private openIntercom() {
+    this.setState({open: true});
+  }
+
+  @bind()
+  private closeIntercom() {
+    this.setState({open: false});
+  }
+}

playground/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../tsconfig.json",
+  "include": ["./**/*"],
+  "exclude": []
+}

src/Intercom.scss

@@ -3,19 +3,24 @@
   bottom: 0;
   right: 0;
   z-index: 999;
-  width: 90px;
-  height: 90px;
+  width: 0;
+  height: 0;
   background: transparent;
   border: none;
 }
 
+.IntercomHasLauncher {
+  width: 90px;
+  height: 90px;
+}
+
 .IntercomAnimating {
   pointer-events: none;
 }
 
 .IntercomOpen {
   // copied over directly from the styles
-  // intercom injects inside on the iframe
+  // intercom injects inside the iframe
   width: 100%;
   max-width: 451px;