feat(Twilio Flex): Add Twilio Flex integration example

BREAKING CHANGE: Make buildEntry getInstance environment variable driven

Twilio Flex integration is implemented. Documentation added.

.env-sample

@@ -0,0 +1,2 @@
+#name of the service desk class to be instantiated. Ex: ExampleServiceDesk, TwilioFlex, GenesysServiceDesk
+SERVICE_DESK_CLASS=ExampleServiceDesk

CHANGELOG.md

@@ -7,3 +7,10 @@ All notable changes to this project will be documented in this file. See [standa
 ### Features
 
 - Add Genesys PureCloud integration example ([1bb6d65](/~https://github.com/watson-developer-cloud/assistant-web-chat-service-desk-starter/commit/1bb6d6556df7429f2a8cd2203a5b641bb38b7751))
+
+## 2.0.0 (2020-10-22)
+
+### Features
+
+- Add Twilio Flex integration example
+- BREAKING CHANGE: Make buildEntry getInstance environment variable driven

README.md

@@ -56,7 +56,15 @@ In order to make this project available to your web chat, you simply need to pas
 
 ## Development
 
-To set up your development environment, first fork this repository. Then run `npm run dev` to get a development environment running in your browser on port `9000`.
+To set up your development environment, first fork this repository. 
+
+Copy `.env-sample` to `.env` and change the `SERVICE_DESK_CLASS` variable to run the target service desk implementation. If you do not provide any value, it will run the Mock service desk that we provide by default.
+
+If you want to run twilio flex, then `src/middleware` folder has a `flex` folder which has instructions on how to run the middleware.
+
+Run `npm install` 
+
+Then run `npm run dev` to get a development environment running in your browser on port `9000`.
 
 The files you will be editing are in the `src` directory, starting with the [buildEntry.ts](./src/buildEntry.ts) file. This script returns the `WebChatServiceDeskFactory` function that is available at `window.WebChatServiceDeskFactory` when this file is built. This function is what you will pass into the web chat configuration object as the `serviceDeskFactory`.
 

package.json

@@ -12,6 +12,7 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.10.4",
+    "twilio-chat": "^4.0.0",
     "uuid": "^3.3.3"
   },
   "devDependencies": {
@@ -27,8 +28,10 @@
     "@typescript-eslint/eslint-plugin": "^3.6.0",
     "@typescript-eslint/parser": "^3.6.0",
     "babel-loader": "^8.1.0",
+    "babel-runtime": "^6.26.0",
     "commitizen": "^4.2.1",
     "cz-conventional-changelog": "^3.3.0",
+    "dotenv-webpack": "^4.0.0",
     "eslint": "^7.4.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-airbnb-base": "^14.2.0",

src/actualServiceDeskExamples/genesysPureCloud/README.md

@@ -12,7 +12,7 @@ The client side component manages the communication between the end user and the
 ## Setting it up
 
 0. If you haven't already, follow the setup steps in the root-level [README](../../../README.md) to ensure you can run an instance of [ExampleServiceDesk](../../serviceDesks/exampleServiceDesk.ts).
-1. Rename [purecloudSetup-sample.ts](./purecloudSetup-sample.ts) to `purecloudSetup.ts` and populate with your organization information.
+1. Update [purecloudSetup.ts](./purecloudSetup.ts) to populate with your organization information.
     - `DEPLOYMENT_ID` -> [create a web chat widget v1.1](https://help.mypurecloud.com/articles/create-a-widget-for-web-chat/)
     - `ORGANIZATION_ID` -> [find my organization ID](https://help.mypurecloud.com/faq/how-do-i-find-my-organization-id/)
 

src/buildEntry.ts

@@ -11,8 +11,9 @@
  * specific language governing permissions and limitations under the License.
  *
  */
-
-import { ExampleServiceDesk } from './serviceDesks/exampleServiceDesk'; // You should replace this with your own service desk.
+import { GenesysServiceDesk } from './actualServiceDeskExamples/genesysPureCloud/genesysServiceDesk';
+import { ExampleServiceDesk } from './serviceDesks/exampleServiceDesk';
+import { TwilioFlex } from './serviceDesks/twilioFlex';
 import { ServiceDesk, ServiceDeskFactoryParameters } from './types/serviceDesk';
 
 /**
@@ -26,7 +27,13 @@ import { ServiceDesk, ServiceDeskFactoryParameters } from './types/serviceDesk';
  * @param parameters ServiceDeskFactoryParameters passed from web chat into service desk.
  */
 function WebChatServiceDeskFactory(parameters: ServiceDeskFactoryParameters): ServiceDesk {
-  return new ExampleServiceDesk(parameters);
+  return getInstance(parameters);
+}
+
+function getInstance(parameters: ServiceDeskFactoryParameters): TwilioFlex | ExampleServiceDesk | GenesysServiceDesk {
+  const serviceDeskClass: string = process.env.SERVICE_DESK_CLASS || 'ExampleServiceDesk';
+  const constructors: any = { TwilioFlex, ExampleServiceDesk, GenesysServiceDesk };
+  return new constructors[serviceDeskClass](parameters);
 }
 
 export default WebChatServiceDeskFactory;

src/middleware/flex/.env-sample

@@ -0,0 +1,18 @@
+#twilio Account ID
+ACCOUNT_ID='ACXXXXXX'
+
+#twilio Auth Token
+AUTH_TOKEN='XXXX'
+
+#Flex custom Flow id
+FLEX_FLOW_ID='FOXXXXX'
+
+#twilio API Key
+API_KEY='SKXXXXX'
+
+#twilio API Secret
+API_SECRET='XXXX'
+
+#Twilio Chat Service Id
+CHAT_SERVICE_ID='ISXXXXXXX'
+