From e257bc7c93e08e64fc4e5b5507a2c30e851369e1 Mon Sep 17 00:00:00 2001 From: Dan Varnau Date: Tue, 30 Nov 2021 15:55:27 -0600 Subject: [PATCH 1/3] Add chat transcript modal --- package-lock.json | 694 ++++++++++++++++++++++++++++++++++++++ src/css/example.css | 12 +- src/css/transcript.css | 73 ++++ src/example.html | 32 +- src/framework.js | 28 +- src/scripts/example.js | 9 +- src/scripts/transcript.js | 92 +++++ 7 files changed, 916 insertions(+), 24 deletions(-) create mode 100644 package-lock.json create mode 100644 src/css/transcript.css create mode 100644 src/scripts/transcript.js diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..4cf348c --- /dev/null +++ b/package-lock.json @@ -0,0 +1,694 @@ +{ + "name": "purecloud-embeddable-framework-example", + "version": "1.0.0", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "name": "purecloud-embeddable-framework-example", + "version": "1.0.0", + "license": "MIT", + "devDependencies": { + "express": "~4.11.2" + } + }, + "node_modules/accepts": { + "version": "1.2.13", + "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.2.13.tgz", + "integrity": "sha1-5fHzkoxtlf2WVYw27D2dDeSm7Oo=", + "dev": true, + "dependencies": { + "mime-types": "~2.1.6", + "negotiator": "0.5.3" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/content-disposition": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.0.tgz", + "integrity": "sha1-QoT+auBjCHRjnkToCkGMKTQTXp4=", + "dev": true, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/cookie": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.1.2.tgz", + "integrity": "sha1-cv7D0k5Io0Mgc9kMEmQgBQYQBLE=", + "dev": true, + "engines": { + "node": "*" + } + }, + "node_modules/cookie-signature": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.5.tgz", + "integrity": "sha1-oSLj8VA+yg9TVXlbBxG7I2jUUPk=", + "dev": true + }, + "node_modules/crc": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/crc/-/crc-3.2.1.tgz", + "integrity": "sha1-XZyPt3okXNXsopHl0tAFM0urAII=", + "dev": true + }, + "node_modules/debug": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.1.3.tgz", + "integrity": "sha1-zoqxte6PvuK/o7Yzyrk9NmtjQY4=", + "dev": true, + "dependencies": { + "ms": "0.7.0" + } + }, + "node_modules/depd": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/depd/-/depd-1.0.1.tgz", + "integrity": "sha1-gK7GTJ1tl+ZcwqnKqTwKpqv3Oqo=", + "dev": true, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/destroy": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.3.tgz", + "integrity": "sha1-tDO0ck5x/YVR2YhRdIUcX8N34sk=", + "dev": true + }, + "node_modules/ee-first": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.0.tgz", + "integrity": "sha1-ag18YiHkkP7v2S7D9EHJzozQl/Q=", + "dev": true + }, + "node_modules/escape-html": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.1.tgz", + "integrity": "sha1-GBoobq05ejmpKFfPsdQwUuNWv/A=", + "dev": true + }, + "node_modules/etag": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/etag/-/etag-1.5.1.tgz", + "integrity": "sha1-VMUN4E7kJpVWKSWsVmWIKRvn6eo=", + "dev": true, + "dependencies": { + "crc": "3.2.1" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/express": { + "version": "4.11.2", + "resolved": "https://registry.npmjs.org/express/-/express-4.11.2.tgz", + "integrity": "sha1-jfPVqayEhYXwCgd3YBgj+uzTsUg=", + "dev": true, + "dependencies": { + "accepts": "~1.2.3", + "content-disposition": "0.5.0", + "cookie": "0.1.2", + "cookie-signature": "1.0.5", + "debug": "~2.1.1", + "depd": "~1.0.0", + "escape-html": "1.0.1", + "etag": "~1.5.1", + "finalhandler": "0.3.3", + "fresh": "0.2.4", + "media-typer": "0.3.0", + "merge-descriptors": "0.0.2", + "methods": "~1.1.1", + "on-finished": "~2.2.0", + "parseurl": "~1.3.0", + "path-to-regexp": "0.1.3", + "proxy-addr": "~1.0.6", + "qs": "2.3.3", + "range-parser": "~1.0.2", + "send": "0.11.1", + "serve-static": "~1.8.1", + "type-is": "~1.5.6", + "utils-merge": "1.0.0", + "vary": "~1.0.0" + }, + "engines": { + "node": ">= 0.10.0" + } + }, + "node_modules/finalhandler": { + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-0.3.3.tgz", + "integrity": "sha1-saCaoeamB7NUFmmwm8tyf0YM1CY=", + "dev": true, + "dependencies": { + "debug": "~2.1.1", + "escape-html": "1.0.1", + "on-finished": "~2.2.0" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/forwarded": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz", + "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=", + "dev": true, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/fresh": { + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.2.4.tgz", + "integrity": "sha1-NYJJkgbJcjcUGQ7ddLRgT+tKYUw=", + "dev": true, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/ipaddr.js": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.0.5.tgz", + "integrity": "sha1-X6eM8wG4JceKvDBC2BJyMEnqI8c=", + "dev": true, + "engines": { + "node": ">= 0.10" + } + }, + "node_modules/media-typer": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", + "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=", + "dev": true, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/merge-descriptors": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-0.0.2.tgz", + "integrity": "sha1-w2pSp4FDdRPFcnXzndnTF1FKyMc=", + "dev": true + }, + "node_modules/methods": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", + "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=", + "dev": true, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime": { + "version": "1.2.11", + "resolved": "https://registry.npmjs.org/mime/-/mime-1.2.11.tgz", + "integrity": "sha1-WCA+7Ybjpe8XrtK32evUfwpg3RA=", + "dev": true + }, + "node_modules/mime-db": { + "version": "1.51.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.51.0.tgz", + "integrity": "sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==", + "dev": true, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.34", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.34.tgz", + "integrity": "sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==", + "dev": true, + "dependencies": { + "mime-db": "1.51.0" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/ms": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.0.tgz", + "integrity": "sha1-hlvpTC5zl62KV9pqYzpuLzB5i4M=", + "dev": true + }, + "node_modules/negotiator": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.5.3.tgz", + "integrity": "sha1-Jp1cR2gQ7JLtvntsLygxY4T5p+g=", + "dev": true, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/on-finished": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.2.1.tgz", + "integrity": "sha1-XIXBzDYpn3gCllP2Z/J7a5nrwCk=", + "dev": true, + "dependencies": { + "ee-first": "1.1.0" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/parseurl": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", + "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==", + "dev": true, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/path-to-regexp": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.3.tgz", + "integrity": "sha1-IbmrgidCed4lsVbqCP0SylG4rss=", + "dev": true + }, + "node_modules/proxy-addr": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-1.0.10.tgz", + "integrity": "sha1-DUCoL4Afw1VWfS7LZe/j8HfxIcU=", + "dev": true, + "dependencies": { + "forwarded": "~0.1.0", + "ipaddr.js": "1.0.5" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/qs": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/qs/-/qs-2.3.3.tgz", + "integrity": "sha1-6eha2+ddoLvkyOBHaghikPhjtAQ=", + "dev": true + }, + "node_modules/range-parser": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.0.3.tgz", + "integrity": "sha1-aHKCNTXGkuLCoBA4Jq/YLC4P8XU=", + "dev": true, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/send": { + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/send/-/send-0.11.1.tgz", + "integrity": "sha1-G+q/1C+eJwn5kCivMHisErRwktU=", + "dev": true, + "dependencies": { + "debug": "~2.1.1", + "depd": "~1.0.0", + "destroy": "1.0.3", + "escape-html": "1.0.1", + "etag": "~1.5.1", + "fresh": "0.2.4", + "mime": "1.2.11", + "ms": "0.7.0", + "on-finished": "~2.2.0", + "range-parser": "~1.0.2" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/serve-static": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.8.1.tgz", + "integrity": "sha1-CPq9OZmfBQ/DEUQ/RtWIinfs/Hw=", + "dev": true, + "dependencies": { + "escape-html": "1.0.1", + "parseurl": "~1.3.0", + "send": "0.11.1", + "utils-merge": "1.0.0" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/type-is": { + "version": "1.5.7", + "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.5.7.tgz", + "integrity": "sha1-uTaKWTzG730GReeLL0xky+zQXpA=", + "dev": true, + "dependencies": { + "media-typer": "0.3.0", + "mime-types": "~2.0.9" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/type-is/node_modules/mime-db": { + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.12.0.tgz", + "integrity": "sha1-PQxjGA9FjrENMlqqN9fFiuMS6dc=", + "dev": true, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/type-is/node_modules/mime-types": { + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.14.tgz", + "integrity": "sha1-MQ4VnbI+B3+Lsit0jav6SVcUCqY=", + "dev": true, + "dependencies": { + "mime-db": "~1.12.0" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/utils-merge": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.0.tgz", + "integrity": "sha1-ApT7kiu5N1FTVBxPcJYjHyh8ivg=", + "dev": true, + "engines": { + "node": ">= 0.4.0" + } + }, + "node_modules/vary": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/vary/-/vary-1.0.1.tgz", + "integrity": "sha1-meSYFWaihhGN+yuBc1ffeZM3bRA=", + "dev": true, + "engines": { + "node": ">= 0.8" + } + } + }, + "dependencies": { + "accepts": { + "version": "1.2.13", + "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.2.13.tgz", + "integrity": "sha1-5fHzkoxtlf2WVYw27D2dDeSm7Oo=", + "dev": true, + "requires": { + "mime-types": "~2.1.6", + "negotiator": "0.5.3" + } + }, + "content-disposition": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.0.tgz", + "integrity": "sha1-QoT+auBjCHRjnkToCkGMKTQTXp4=", + "dev": true + }, + "cookie": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.1.2.tgz", + "integrity": "sha1-cv7D0k5Io0Mgc9kMEmQgBQYQBLE=", + "dev": true + }, + "cookie-signature": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.5.tgz", + "integrity": "sha1-oSLj8VA+yg9TVXlbBxG7I2jUUPk=", + "dev": true + }, + "crc": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/crc/-/crc-3.2.1.tgz", + "integrity": "sha1-XZyPt3okXNXsopHl0tAFM0urAII=", + "dev": true + }, + "debug": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.1.3.tgz", + "integrity": "sha1-zoqxte6PvuK/o7Yzyrk9NmtjQY4=", + "dev": true, + "requires": { + "ms": "0.7.0" + } + }, + "depd": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/depd/-/depd-1.0.1.tgz", + "integrity": "sha1-gK7GTJ1tl+ZcwqnKqTwKpqv3Oqo=", + "dev": true + }, + "destroy": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.3.tgz", + "integrity": "sha1-tDO0ck5x/YVR2YhRdIUcX8N34sk=", + "dev": true + }, + "ee-first": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.0.tgz", + "integrity": "sha1-ag18YiHkkP7v2S7D9EHJzozQl/Q=", + "dev": true + }, + "escape-html": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.1.tgz", + "integrity": "sha1-GBoobq05ejmpKFfPsdQwUuNWv/A=", + "dev": true + }, + "etag": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/etag/-/etag-1.5.1.tgz", + "integrity": "sha1-VMUN4E7kJpVWKSWsVmWIKRvn6eo=", + "dev": true, + "requires": { + "crc": "3.2.1" + } + }, + "express": { + "version": "4.11.2", + "resolved": "https://registry.npmjs.org/express/-/express-4.11.2.tgz", + "integrity": "sha1-jfPVqayEhYXwCgd3YBgj+uzTsUg=", + "dev": true, + "requires": { + "accepts": "~1.2.3", + "content-disposition": "0.5.0", + "cookie": "0.1.2", + "cookie-signature": "1.0.5", + "debug": "~2.1.1", + "depd": "~1.0.0", + "escape-html": "1.0.1", + "etag": "~1.5.1", + "finalhandler": "0.3.3", + "fresh": "0.2.4", + "media-typer": "0.3.0", + "merge-descriptors": "0.0.2", + "methods": "~1.1.1", + "on-finished": "~2.2.0", + "parseurl": "~1.3.0", + "path-to-regexp": "0.1.3", + "proxy-addr": "~1.0.6", + "qs": "2.3.3", + "range-parser": "~1.0.2", + "send": "0.11.1", + "serve-static": "~1.8.1", + "type-is": "~1.5.6", + "utils-merge": "1.0.0", + "vary": "~1.0.0" + } + }, + "finalhandler": { + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-0.3.3.tgz", + "integrity": "sha1-saCaoeamB7NUFmmwm8tyf0YM1CY=", + "dev": true, + "requires": { + "debug": "~2.1.1", + "escape-html": "1.0.1", + "on-finished": "~2.2.0" + } + }, + "forwarded": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz", + "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=", + "dev": true + }, + "fresh": { + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.2.4.tgz", + "integrity": "sha1-NYJJkgbJcjcUGQ7ddLRgT+tKYUw=", + "dev": true + }, + "ipaddr.js": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.0.5.tgz", + "integrity": "sha1-X6eM8wG4JceKvDBC2BJyMEnqI8c=", + "dev": true + }, + "media-typer": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", + "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=", + "dev": true + }, + "merge-descriptors": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-0.0.2.tgz", + "integrity": "sha1-w2pSp4FDdRPFcnXzndnTF1FKyMc=", + "dev": true + }, + "methods": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", + "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=", + "dev": true + }, + "mime": { + "version": "1.2.11", + "resolved": "https://registry.npmjs.org/mime/-/mime-1.2.11.tgz", + "integrity": "sha1-WCA+7Ybjpe8XrtK32evUfwpg3RA=", + "dev": true + }, + "mime-db": { + "version": "1.51.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.51.0.tgz", + "integrity": "sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==", + "dev": true + }, + "mime-types": { + "version": "2.1.34", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.34.tgz", + "integrity": "sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==", + "dev": true, + "requires": { + "mime-db": "1.51.0" + } + }, + "ms": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.0.tgz", + "integrity": "sha1-hlvpTC5zl62KV9pqYzpuLzB5i4M=", + "dev": true + }, + "negotiator": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.5.3.tgz", + "integrity": "sha1-Jp1cR2gQ7JLtvntsLygxY4T5p+g=", + "dev": true + }, + "on-finished": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.2.1.tgz", + "integrity": "sha1-XIXBzDYpn3gCllP2Z/J7a5nrwCk=", + "dev": true, + "requires": { + "ee-first": "1.1.0" + } + }, + "parseurl": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", + "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==", + "dev": true + }, + "path-to-regexp": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.3.tgz", + "integrity": "sha1-IbmrgidCed4lsVbqCP0SylG4rss=", + "dev": true + }, + "proxy-addr": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-1.0.10.tgz", + "integrity": "sha1-DUCoL4Afw1VWfS7LZe/j8HfxIcU=", + "dev": true, + "requires": { + "forwarded": "~0.1.0", + "ipaddr.js": "1.0.5" + } + }, + "qs": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/qs/-/qs-2.3.3.tgz", + "integrity": "sha1-6eha2+ddoLvkyOBHaghikPhjtAQ=", + "dev": true + }, + "range-parser": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.0.3.tgz", + "integrity": "sha1-aHKCNTXGkuLCoBA4Jq/YLC4P8XU=", + "dev": true + }, + "send": { + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/send/-/send-0.11.1.tgz", + "integrity": "sha1-G+q/1C+eJwn5kCivMHisErRwktU=", + "dev": true, + "requires": { + "debug": "~2.1.1", + "depd": "~1.0.0", + "destroy": "1.0.3", + "escape-html": "1.0.1", + "etag": "~1.5.1", + "fresh": "0.2.4", + "mime": "1.2.11", + "ms": "0.7.0", + "on-finished": "~2.2.0", + "range-parser": "~1.0.2" + } + }, + "serve-static": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.8.1.tgz", + "integrity": "sha1-CPq9OZmfBQ/DEUQ/RtWIinfs/Hw=", + "dev": true, + "requires": { + "escape-html": "1.0.1", + "parseurl": "~1.3.0", + "send": "0.11.1", + "utils-merge": "1.0.0" + } + }, + "type-is": { + "version": "1.5.7", + "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.5.7.tgz", + "integrity": "sha1-uTaKWTzG730GReeLL0xky+zQXpA=", + "dev": true, + "requires": { + "media-typer": "0.3.0", + "mime-types": "~2.0.9" + }, + "dependencies": { + "mime-db": { + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.12.0.tgz", + "integrity": "sha1-PQxjGA9FjrENMlqqN9fFiuMS6dc=", + "dev": true + }, + "mime-types": { + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.0.14.tgz", + "integrity": "sha1-MQ4VnbI+B3+Lsit0jav6SVcUCqY=", + "dev": true, + "requires": { + "mime-db": "~1.12.0" + } + } + } + }, + "utils-merge": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.0.tgz", + "integrity": "sha1-ApT7kiu5N1FTVBxPcJYjHyh8ivg=", + "dev": true + }, + "vary": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/vary/-/vary-1.0.1.tgz", + "integrity": "sha1-meSYFWaihhGN+yuBc1ffeZM3bRA=", + "dev": true + } + } +} diff --git a/src/css/example.css b/src/css/example.css index 53fe407..bcde9c9 100644 --- a/src/css/example.css +++ b/src/css/example.css @@ -4,6 +4,16 @@ position: fixed; top: 10px; right: 10px; + text-align: center; +} + +.softphone__transcript { + cursor: pointer; + margin-top: 20px; +} + +.softphone__transcript[disabled] { + cursor: default; } body > div > iframe { @@ -85,4 +95,4 @@ textarea { #updateAudioConfiguration { margin-top: 10px; -} \ No newline at end of file +} diff --git a/src/css/transcript.css b/src/css/transcript.css new file mode 100644 index 0000000..c8ce5b1 --- /dev/null +++ b/src/css/transcript.css @@ -0,0 +1,73 @@ + +.transcript { + height: 100%; + left: 0; + position: fixed; + top: 0; + width: 100%; +} + +.transcript.-hide { + display: none; +} + +.transcript::before { + background-color: black; + content: ''; + display: block; + height: 100%; + opacity: .6; + width: 100%; +} + +.transcript__wrapper { + background-color: white; + position: absolute; + left: 50%; + top: 30%; + transform: translate(-50%, -50%); + width: 500px; +} + +.transcript__heading { + background-color: #FF4F1F; + color: white; + padding: 14px 20px; + font-family: Roboto, sans-serif; + font-size: 28px; + font-weight: normal; + margin-top: 0; +} + +.transcript__close { + appearance: none; + background: transparent; + border: none; + color: white; + cursor: pointer; + font-size: 20px; + padding: 6px; + position: absolute; + right: 3px; + top: 0; + transform: scaleX(1.2); +} + +.transcript__list { + list-style-type: none; +} + +.transcript__item { + font-family: Roboto, sans-serif; + margin-bottom: 12px; +} + +.transcript__time { + color: gray; + font-size: 12px; +} + +.transcript__body { + font-size: 18px; + margin-top: 0; +} diff --git a/src/example.html b/src/example.html index 51bfa6b..1d787b8 100644 --- a/src/example.html +++ b/src/example.html @@ -1,10 +1,13 @@ + +
- + +
@@ -15,7 +18,7 @@

Actions

Click-to-Dial

-

You can raise events from the main application to automatically place a call using the embedded client. 3172222222

+

You can raise events from the main application to automatically place a call using the embedded client. 317-696-6379

@@ -44,7 +47,7 @@

Contact Search Options

contactSearch allows you to define which contacts the integration returns from an external CRM when agents search for names or phone numbers before making calls or transferring interactions.

- +

Update User Status

User.updateStatus allows status management between PureCloud and third-party systems.

@@ -55,7 +58,7 @@

Update User Status

- +

Set User View

User.setView sets the embedded client to a specific view when a user creates an interaction (makes a call, sends an email, or sends an SMS message). Available views: interactionList, callLog, newInteraction, callback, settings.

@@ -125,7 +128,7 @@

Events

Screen Pop

screenPop is raised for inbound alerting interactions.

- +
@@ -147,20 +150,31 @@

Subscribe

Type: Interaction

Subscribing to Interaction events allows you to make smart decisions based on an interaction's life cycle.

- +

Type: UserAction

Subscribing to UserAction events allows you to align the agent's interface outside of the embeddable framework with their current task.

- +

Type: Notification

Subscribing to Notification events allows contextual information such as when an interaction selection changed.

- +
- \ No newline at end of file + +
+
+ +

Most recent customer messages

+
+
    +
+
+
+
+ diff --git a/src/framework.js b/src/framework.js index 271e3ac..d59b1ec 100644 --- a/src/framework.js +++ b/src/framework.js @@ -8,7 +8,7 @@ window.Framework = { 'mypurecloud.ie': '', 'mypurecloud.com.au': '', 'mypurecloud.jp': '', - 'mypurecloud.de': '' + 'mypurecloud.de': '', }, customInteractionAttributes: ['PT_URLPop', 'PT_SearchValue', 'PT_TransferContext'], settings: { @@ -30,22 +30,30 @@ window.Framework = { initialSetup: function () { window.PureCloud.subscribe([ { - type: 'Interaction', - callback: function (category, interaction) { + type: 'Interaction', + callback: (category, interaction) => { window.parent.postMessage(JSON.stringify({type:"interactionSubscription", data:{category:category, interaction:interaction}}) , "*"); - } + } }, { - type: 'UserAction', + type: 'UserAction', callback: function (category, data) { window.parent.postMessage(JSON.stringify({type:"userActionSubscription", data:{category:category, data:data}}) , "*"); - } + } }, { - type: 'Notification', + type: 'Notification', callback: function (category, data) { window.parent.postMessage(JSON.stringify({type:"notificationSubscription", data:{category:category, data:data}}) , "*"); - } + + if (category === 'chatUpdate') { + const messages = data.messages; + + if (messages.length) { + window.parent.postMessage(JSON.stringify({type: category, data: messages}), '*'); + } + } + } } ]); @@ -102,5 +110,5 @@ window.Framework = { contactSearch: function(searchString, onSuccess, onFailure) { contactSearchCallback = onSuccess; window.parent.postMessage(JSON.stringify({type:"contactSearch" , data:{searchString:searchString}}) , "*"); - } -}; \ No newline at end of file + }, +}; diff --git a/src/scripts/example.js b/src/scripts/example.js index f2335db..94ad6d2 100644 --- a/src/scripts/example.js +++ b/src/scripts/example.js @@ -1,5 +1,5 @@ document.addEventListener('DOMContentLoaded',function(){ - + document.getElementById("clickToDial").addEventListener("click", clickToDial); document.getElementById("addAssociation").addEventListener("click", addAssociation); document.getElementById("addAttribute").addEventListener("click", addAttribute); @@ -12,7 +12,7 @@ document.addEventListener('DOMContentLoaded',function(){ document.getElementById('muteInteraction').addEventListener("click", updateInteractionState); document.getElementById('updateAudioConfiguration').addEventListener("click", updateAudioConfiguration); document.getElementById('sendCustomNotification').addEventListener("click", sendCustomNotification); - + document.getElementById('view-interactionList').addEventListener("click", setView); document.getElementById('view-calllog').addEventListener("click", setView); document.getElementById('view-newInteraction').addEventListener("click", setView); @@ -33,6 +33,7 @@ document.addEventListener('DOMContentLoaded',function(){ } else if(message.type == "userActionSubscription"){ document.getElementById("userActionSubscriptionPayload").value = event.data; } else if(message.type == "notificationSubscription"){ + console.log('notificationsubscription'); document.getElementById("notificationSubscriptionPayload").value = event.data; } else if(message.type == "contactSearch") { document.getElementById("searchText").innerHTML = ": " + message.data.searchString; @@ -128,7 +129,7 @@ document.addEventListener('DOMContentLoaded',function(){ function setView(event) { console.log('process view update'); let payload = { - type:"main", + type:"main", view: { name:event.target.outerText } @@ -143,7 +144,7 @@ document.addEventListener('DOMContentLoaded',function(){ console.log('Send Custom User Notification'); var payload = { message: document.getElementById('customNotificationMessage').value, - type: document.getElementById('notificationType').value, + type: document.getElementById('notificationType').value, timeout: document.getElementById('notificationTimeout').value }; document.getElementById("softphone").contentWindow.postMessage(JSON.stringify({ diff --git a/src/scripts/transcript.js b/src/scripts/transcript.js new file mode 100644 index 0000000..43e0e1a --- /dev/null +++ b/src/scripts/transcript.js @@ -0,0 +1,92 @@ +class Transcript { + constructor() { + this.transcript = document.getElementById('transcript'); + this.list = document.getElementById('transcriptList'); + this.initialSet = false; + this.hidden = true; + this.messages = []; + this.formattedMessages = []; + this.maxMessages = 5; + this.close = document.getElementById('closeTranscript'); + this.open = document.getElementById('openTranscript'); + } + + hide() { + this.transcript.classList.add('-hide'); + this.hidden = true; + } + + show() { + this.transcript.classList.remove('-hide'); + this.hidden = false; + } + + manage(message) { + // Manage multiple messages + if (Array.isArray(message)) { + this.messages = [...this.messages, ...message]; + + this.messages.forEach((el) => { + this.formattedMessages.push(this.format(el)); + }); + } else { + // Manage one message + this.messages.push(message); + + if (this.formattedMessages.length === this.maxMessages) { + this.formattedMessages.shift(); + } + + this.formattedMessages.push(this.format(this.messages[this.messages.length - 1])); + } + + this.list.innerHTML = this.formattedMessages.join(''); + + if (!this.initialSet && this.messages.length) { + this.open.removeAttribute('disabled'); + + this.open.addEventListener('click', () => { + this.show(); + }); + + this.close.addEventListener('click', () => { + this.hide(); + }); + + this.initialSet = true; + } + } + + format(message) { + const date = new Date(message.time); + + return ` +
  • + ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()} +

    ${message.body}

    +
    • + `; + } +} + +document.addEventListener('DOMContentLoaded', function () { + const transcript = new Transcript(); + + window.addEventListener('message', function (event) { + const data = JSON.parse(event.data); + + if (data.type === 'chatUpdate') { + const messages = data.data; + + // If multiple messages already exist, ie refreshing in the middle of a chat, send most recent + if (!transcript.initialSet && messages.length > 1) { + transcript.manage(messages.filter((m) => m.role === 'customer')); + } else { + // Just send the most recent message + if (messages[messages.length - 1].role === 'customer') { + transcript.manage(messages[messages.length - 1]); + } + }; + } + }); +}); From 844f8e8f6605f92da5fb455acf6bcb33333fd182 Mon Sep 17 00:00:00 2001 From: Dan Varnau Date: Wed, 1 Dec 2021 08:27:00 -0600 Subject: [PATCH 2/3] Remove personal phone number --- src/example.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/example.html b/src/example.html index 1d787b8..e9f2142 100644 --- a/src/example.html +++ b/src/example.html @@ -18,7 +18,7 @@

    Actions

    Click-to-Dial

    -

    You can raise events from the main application to automatically place a call using the embedded client. 317-696-6379

    +

    You can raise events from the main application to automatically place a call using the embedded client. 317-222-2222

    From 718ac29c5d4ede455828e578dd63df9e01b0c081 Mon Sep 17 00:00:00 2001 From: Dan Varnau Date: Thu, 2 Dec 2021 11:11:09 -0600 Subject: [PATCH 3/3] Specify categories for notification subscription --- src/framework.js | 1 + src/scripts/transcript.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/framework.js b/src/framework.js index d59b1ec..c0f7918 100644 --- a/src/framework.js +++ b/src/framework.js @@ -43,6 +43,7 @@ window.Framework = { }, { type: 'Notification', + categories: ['chatUpdate'], callback: function (category, data) { window.parent.postMessage(JSON.stringify({type:"notificationSubscription", data:{category:category, data:data}}) , "*"); diff --git a/src/scripts/transcript.js b/src/scripts/transcript.js index 43e0e1a..e51d67d 100644 --- a/src/scripts/transcript.js +++ b/src/scripts/transcript.js @@ -86,7 +86,7 @@ document.addEventListener('DOMContentLoaded', function () { if (messages[messages.length - 1].role === 'customer') { transcript.manage(messages[messages.length - 1]); } - }; + } } }); });