# Example Vue Applications

This project provides some example Vue applications that are designed to run within the [Channel Automation: Adaptive Framework](https://em-docs.verint.com/15_3/em-integration/Content/AdaptiveFramework/Adaptive_Framework_Components.htm?Highlight=Adaptive%20Framework).

## Example Routes

### /debug

Provides debug infomation on cookies, [authentication](https://em-docs.verint.com/15_3/em-security-and-authentication/Content/AuthenticatingRESTServices/Authenticating_Secured_Web_Services_using_Cookies.htm) and contents of the [Tenant Properties Service](https://em-docs.verint.com/15_3/em-tech-config-and-sysadmin/Content/SystemProperties/Tenant_Properties_Service.htm).

### /telephonyContext

Displays Telephony Context Information. This route has been designed to be used withing a Call Interaction.

#### Parameters

Parameters prefixed with 'tps:' will fetch values from the Tenant Properties Service.

Paremeters prefixed with 'km:' will use Knowledge Management using the {contentID}(migratableReference)/{lang}.  For example, integrationCardDoc=km:DvudRWR4yd2iRSDtlboDp8/en-US.

| name                 | description                                                |
| -------------------- | ---------------------------------------------------------- |
| ani                  | Automatic Number Identification                            |
| dnis                 | Dialed Number Identification Service                       |
| queue                | Queue the Call was in before it was delivered to the agent |
| direction            | INBOUND, OUTBOUND etc.                                     |
| channel              | AmazonConnect etc.                                         |
| type                 | Voice, Voicemail etc.                                      |
| transferSummary      | Mock of Transfer Summary                                   |
| integrationCardTitle | Title over Integration card                                |
| integrationCardDoc   | HTML document for contents of integration card             |
| crsScore             | Call Risk Score (0-100)                                    |
| authenticated        | Authenticated in IVA/IVR (true/false)                      |

## Installing into an Innovation Lab

### Prerequisites

Make sure npm is installed and node us up to date

```sh
sudo apt update
sudo apt install npm
sudo npm install -g n
sudo n stable
hash -r
```

### Build the project

Clone this project, install and build.

```sh
cd /opt/em/projects/current/demo/static
git clone https://git.mortons.site/verint.com/ca_vue_apps.git
cd ca_vue_apps
npm install
touch .env
```

Edit the .env file to hold the Channel Automation api username & password we cannot use the '\_\_Host-VRNTOTCT' cookie because it is HttpOnly and not passed to browser side javascript. So we use the oidc-token-service to grant us a token using username/password.

```env
// file .env
VITE_API_USERNAME=apiclient
VITE_API_PASSWORD=apiclient
ASSET_URL=/ca_vue_apps
```

Build the distribution

```sh
npm run build
```

The 'static' directory is already served by Apache so this Application is now available. Configure the Web Integration URL to use it. See Screenshot below:

![WebIntegrationURL](screenshots/WebIntegrationURL_TelephonyContextExample.png)

## Development

### Install

```sh
npm install
```

### Running

List options using:

```sh
npm run
```

Overrided API Values using a .env file. For example:

```env
VITE_API_ORIGIN=https://em20.verint.live
VITE_API_USERNAME=apiclient
VITE_API_PASSWORD=apiclient
```

### CORS Work Around

When developing this on localhost against Channel Automation APIs hosted elsewhere, you will need to apply a work around for CORS because the preflight check will fail with a 401 Not Authorized error.

The fix is to use Apache Rewrite on the API host server to respond OK to the preflight check. For example, with 'tenant-properties-service' API:

```apache
<Location /tenant-properties-service>
         ProxyPass https://${HOSTNAME}:8312/tenant-properties-service
         ProxyPassReverse https://${HOSTNAME}:8312/tenant-properties-service

         // The following lines allow for un-'Authorization' header
         // preflight checks to pass
         RewriteEngine On
         RewriteCond %{REQUEST_METHOD} OPTIONS
         RewriteRule ^(.*)$ /blank.html [QSA,L]
</Location>
```

## Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

### Recommended IDE Setup

- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

### Type Support For `.vue` Imports in TS

TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.