# 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.

| 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 |

# Development

## Install

```sh
npm install
```

## Running

List options using:

```sh
npm run
```

## 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.