Automattic · unDemian · Apr 2, 2018 · Mar 27, 2018 · Mar 27, 2018 · Mar 27, 2018
diff --git a/docs/HACKING.md b/docs/HACKING.md
@@ -2,11 +2,17 @@
 
 Topics discussed:
 
+* Configs
 * OAuth ID
 * Repository layout
 * The library renders within an iframe
 * Color palette and themes
 
+## Configs
+Config files are loaded based on the environment from the `src/config` directory. If you need to override 
+some of the values you can create a `development.local.json` that will be ignored by git.
+See [src/config/README.md](./src/config/README.md) for more info.
+
 ## OAuth ID
 
 The standalone target uses the `oauth_client_id` at [targets/standalone/config/index.js](./targets/standalone/config/index.js) to authenticate requests to WordPress.com.

diff --git a/src/config/README.md b/src/config/README.md
@@ -0,0 +1,10 @@
+## Config files
+
+Based on the value of `process.env.NODE_ENV` either `development.json` or `production.json` will be 
+loaded.
+
+If you need to use override some configuration fields while developing you can create a `development.local.json`
+file in this folder, which will be ignored by git and will get precedence over the values in `development.json`
+
+If there is a `development.local.json` file it will get merged with the JSON object from `development.json`
+overriding the values for the fields they share.
diff --git a/src/config/index.js b/src/config/index.js
@@ -1,4 +1,8 @@
 /** @format */
+/**
+ * External dependencies
+ */
+import merge from 'lodash/merge';
 
 /**
  * Internal dependencies
@@ -8,6 +12,11 @@ import createConfig from 'src/lib/create-config';
 let configFile;
 if ( 'development' === process.env.NODE_ENV ) {
 	configFile = require( 'src/config/development.json' );
+	try {
+		// check if we have local git ignored config and use it to override the development.json
+		const localConfig = require( 'src/config/development.local.json' );
+		merge( configFile, localConfig );
+	} catch ( e ) {}
 } else {
 	configFile = require( 'src/config/production.json' );
 }

diff --git a/src/index.js b/src/index.js
@@ -127,7 +127,15 @@ const createIframe = ( props, assetsLoadedHook = () => {} ) => {
 	const styleHC = document.createElement( 'link' );
 	styleHC.setAttribute( 'rel', 'stylesheet' );
 	styleHC.setAttribute( 'type', 'text/css' );
-	styleHC.setAttribute( 'href', 'https://widgets.wp.com/happychat/happychat.css' );
+
+	// while developing load local css
+	if ( process.env.NODE_ENV === 'development' ) {
+		styleHC.setAttribute( 'href', 'happychat.css' );
+	} else {
+		styleHC.setAttribute( 'href', 'https://widgets.wp.com/happychat/happychat.css' );
+	}
+
+	// TODO: rework this to use skills and have local themes loaded
 	const styleHCPromise = new Promise( resolve => ( styleHC.onload = () => resolve() ) );
 
 	const styleHCTheme = document.createElement( 'link' );

diff --git a/targets/standalone/index.html b/targets/standalone/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>Happychat Embedded</title>
+		<style>
+			body {
+				margin-left: 12%;
+				margin-right: 12%;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="support"></div>
+		<script type="text/javascript" src="./happychat.js" charset="utf-8"></script>
+		<script type="text/javascript">
+			Happychat.open( {
+				accessToken: window.HappychatAccessTokenPromise,
+				nodeId: 'support',
+				groups: ['woo'],
+				entryOptions: {
+					primaryOptions: [
+						{ 'value': 'before-buy', 'label': 'Before you buy', },
+						{ 'value': 'account', 'label': 'Help with my account', },
+						{ 'value': 'broken', 'label': 'Something is broken', canChat: false },
+					],
+					secondaryOptions: [
+						{ 'value': 'config', 'label': 'Help configuring', canChat: false, primary: [ 'account' ], },
+						{ 'value': 'order', 'label': 'Help with an order', primary: [ 'account' ], },
+						{ 'value': 'themes', 'label': 'Themes', canChat: false, primary: [ 'before-buy', 'broken' ], },
+						{ 'value': 'plugins', 'label': 'Plugins', primary: [ 'before-buy', 'broken' ], },
+					],
+					itemList: [
+						{ value: '2010', label: '2010 theme', primary: [ 'before-buy' ], secondary: [ 'themes' ] },
+						{ value: '2011', label: '2011 theme', primary: [ 'before-buy' ], secondary: [ 'themes' ] },
+						{ value: 'jp', label: 'Jetpack', secondary: [ 'plugins' ] },
+						{ value: 'wc', label: 'WooCommerce', secondary: [ 'plugins' ] },
+					],
+					fallbackTicket: {
+						headers: {
+							'X-Test-Header': 'test header',
+							'X-Test-Header-2': 'test 2'
+						},
+						pathToCreate: '/create-ticket',
+						pathToShow: '/show-ticket/<ticket-id>',
+					}
+				}
+			} );
+
+			// test events API
+			var reportChatStatus= function(chatStatus){
+				console.log('chatStatus is ', chatStatus);
+			}
+			Happychat.on('chatStatus', reportChatStatus);
+			var reportAvailability = function(availability){
+				console.log('availibility is ', availability);
+			}
+			Happychat.on('availability', reportAvailability);
+			window.unload = function() {
+				console.log('unload');
+				Happychat.of('availability', reportAvailability);
+				Happychat.of('chatStatus', reportChatStatus);
+			}
+		</script>
+	</body>
+</html>