DEVENGAGE-533: Remake client-app-sdk

Author: PrinceMerluza

client-app-sdk/config.yml

@@ -1,27 +1,25 @@
 ---
-title: Using Client App SDK
-description: See how to use URL Interpolation and send Toast using the Client App SDK.
+title: Using Client App SDK with Platform SDK
+description: Learn how to use the Client App SDK with the Platform SDK
 categories:
 - Architect
 - Notifications
 steps:
 - title: Introduction
   content: |
-    This tutorial walks through the steps how to integrate with [Genesys Cloud Client App SDK](https://developer.mypurecloud.com/api/client-apps/). The Client App SDK framework lets developers embed custom web based applicaitons in the Genesys Cloud web. 
+    This tutorial walks through the steps of integrating a web app with the [Genesys Cloud Client App SDK](/api/client-apps/) and the [Genesys Cloud Platform SDK](/api/rest/client-libraries/javascript/index.html). 
+    
+    The Client App SDK grants web applications access to unique functionalities when they're embedded as a Client App Integration or Interaction Widget.
 
-    The main topics that will be covered in the tutorial are the following:
+    The Javascript Platform SDK provides a way to consume the Genesys Cloud Platform API which is used in general purpose integrations with Genesys Cloud.
 
-    * Referencing the CDN library
-    * URL Interpolation to deterimine pcLangTag and pcEnvironment
-    * Sending toast message notifications
+    This tutorial shows how to set-up a simple integration using the two SDKs.
 
 - title: Referencing the Library
   content: |
-    The Client App SDK can be referenced by CDN at:
-    
-    ```
-    https://sdk-cdn.mypurecloud.com/client-apps/<taggedversion>/purecloud-client-app-sdk.js
-    ```
+    Provide a reference to both libraries.
+
+    The Platform SDK supports the `latest` tag while the Client App SDK requires the semver version value.
 
 - title: URL Interpolation to determine pcLangTag and pcEnvironment
   content: |
@@ -30,95 +28,50 @@ steps:
     * The configured app should have a URL defining the pcLangTag and pcEnvironment tags
 
     ```
-    ex. https://myapp.com?langTag={pcLangTag}&environment={pcEnvironment}
+    ex. https://myapp.com?language={pcLangTag}&environment={pcEnvironment}
     ```
 
     This will contain information on the user's locale and which environment they are running and will look similarly to:
 
     ```
-    https://myapp.com?langTag=en-us&environment=mypurecloud.com
-    ```
-
-    In this tutorial, the pcLangTag will be used to determine which language the app will use for displays. And the pcEnvironment will be used to determine which Client ID will be used for authentication.
-
-- title: Deep Dive on pcLangTag
-  content: |
-    Before the app loads, it needs to determine which language to be used for the HTML fields.
-
-    This logic gets the locale of the current user. This value follows the bcp 74 pattern. Once the locale is determined, HTML fields will be populated accordingly.
-
-- title: Deep Dive on pcLangTag
-  content: |
-    A separate JSON file is configured to store language translations per HTML field. If the locale does not have the language specified in the JSON file, it will default to en-us.
-
-- title: Deep Dive on pcEnvironment for Authentication
-  content: |
-    Before we can start making Genesys Cloud API calls, we need to determine the Genesys Cloud environment that the app is running in.
-    
-    ```
-    ex. mypurecloud.com, mypurecloud.ie, mypurecloud.com.au, mypurecloud.jp, etc.
+    https://myapp.com?language=en-us&environment=mypurecloud.com
     ```
 
-    Different regions have different OAuth Client IDs so it must be determined before attempting to authenticate.
+    After acquiring both the environment and language values from the query parameters, they will be persisted using the localStorage. This is important because in the Implicit Grant Authentication step, the page will be redirected without the query parameters values.
 
-    Once the pcEnvironment is determined, we can pass the value to the JavaScript method for authentication.
+    Once the page reloads and there are no query parameters, then it will attempt to reassign both the environment and language variables with the values that are stored in the localStorage.
 
-- title: Deep Dive on pcEnvironment for Authentication
+- title: Setting up the Client SDK
   content: |
-    We need to filter the object to get which Client ID to be used and call the loginImplicitGrant() method of the Javascript PureCloud SDK. If the pcEnvironment is not set, it will default to mypurecloud.com region.
+    A ClientApp instance needs to be created with the correct environment for its configuration.
 
-    Below is a sample of the clientIDs constant with different client IDs per region. For this sample, we are only using mypurecloud.com.
+    For more information on the Client App SDK, go to this [page](/api/client-apps/sdk/index.html/)
 
-    ```{"language":"json"}
-    {
-      'mypurecloud.com': 'your-client-id',	
-      'mypurecloud.ie': 'your-client-id',	
-      'mypurecloud.com.au': 'your-client-id',	
-      'mypurecloud.jp': 'your-client-id'	
-    }
-    ```
-- title: Creating Toast Notifications for Incoming Calls
+- title: Implicit Grant Authentication
   content: |
-    Aside form URL Interpolation, the Client App SDK also has the capability to send toast messages.
+    In order to use the Genesys Cloud API, an implicit grant authentication needs to be accomplished. After authentication it should redirect to the URL in the redirectUri variable.
 
-- title: Creating a Notification Channel and  Subscribing to Conversations
-  content: |
-    In order to send toast notifications for incoming calls, we need to create a channel and subscribe to call conversations of the current user.
+    For more information on authorization see this [page](/api/rest/authorization/)
 
-    We need to use the JavaScript Genesys Cloud SDK and call the postNotificationsChannels() and the postNotificationsChannelSubscriptions() of the Notifications API.
-
-- title: Handling Websocket Messages
+- title: Toast Popup
   content: |
-    For every websocket message the app receives, we need to determine if the Topic ID in the socket message matches the Topic ID we used in subscribing to the channel. Once the Topic ID has been validated, we can proceed in calling the method to send the toast message.
+    After setting up both the Client App SDK and the Platform SDK, they can now be used to their full advantages.
 
-- title: Calling Toast Popup in the Client App SDK
-  content: |
-    To show a toast popup in Genesys Cloud, we need to call the showToastPopup() method of the Alerting API on the Client App SDK passing the title, message and options (optional) as parameters.
+    In this example, we use the Platform SDK to query the user details and then, using the Client App SDK, show a Toast up in order to greet them.
 
-    For more details on how to configure options in the Toast Popup, you may read more about [alerting.showToastPopup(title, message, options)](https://developer.mypurecloud.com/api/client-apps/client-app-sdk.html#module_alerting).
 languages: 
   javascript:
     displayName: JavaScript
     steps:
     - file: "javascript/index.html"
-      highlight: "0-73"
+      highlight: "1-118"
     - file: "javascript/index.html"
-      highlight: "14-14"
+      highlight: "11-12"
     - file: "javascript/index.html"
-      highlight: "33-70"
+      highlight: "59-83"
     - file: "javascript/index.html"
-      highlight: "35-43"
+      highlight: "37-41"
     - file: "javascript/index.html"
-      highlight: "50-66"
+      highlight: "43-47"
     - file: "javascript/index.html"
-      highlight: "69-69"
-    - file: "javascript/client_app.js"
-      highlight: "22-27"
-    - file: "javascript/client_app.js"
-      highlight: "36-112"
-    - file: "javascript/client_app.js"
-      highlight: "36-47"
-    - file: "javascript/client_app.js"
-      highlight: "58-102"
-    - file: "javascript/client_app.js"
-      highlight: "104-112"  
+      highlight: "48-56"