npm - @pega/cosmos-react-demos - Versions diffs - 3.0.0-dev.9.0 → 3.0.0-rc.2 - Mend

@pega/cosmos-react-demos 3.0.0-dev.9.0 → 3.0.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (987) hide show

package/lib/cs/CallControlPanel/CallControlPanel.mocks.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import type { UserAvailabilityStatusOption } from '@pega/cosmos-react-cs';
 export declare const contactsList: {
     phoneNumber: string;
     primary: string;
@@ -8,9 +9,13 @@ export declare const transferReasons: {
     id: string;
     label: string;
 }[];
-export declare const userStatusOptions: {
+export declare const interactionOptions: {
     id: string;
     label: string;
-    status: string;
 }[];
+export declare const userStatusOptions: UserAvailabilityStatusOption[];
+declare type StyleVariableName = '--app-bg-color' | '--header-border-color' | '--text-color' | '--msg-border-radius' | '--msg-you-bg-color' | '--msg-you-text-color' | '--msg-me-bg-color' | '--msg-me-text-color' | '--input-height' | '--input-background-color' | '--input-border-color' | '--input-border-width' | '--input-border-radius' | '--input-focus-border-color' | '--input-focus-box-shadow' | '--input-text-color' | '--button-text-color' | '--button-height' | '--button-bg-color' | '--button-border-color' | '--button-border-radius' | '--button-hover-bg-color' | '--footer-bg-color';
+export declare type ExternalStyles = Partial<Record<StyleVariableName, string>>;
+export declare const createExternalIframeContent: (styles?: ExternalStyles | undefined) => string;
+export {};
 //# sourceMappingURL=CallControlPanel.mocks.d.ts.map

package/lib/cs/CallControlPanel/CallControlPanel.mocks.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CallControlPanel.mocks.d.ts","sourceRoot":"","sources":["../../../src/cs/CallControlPanel/CallControlPanel.mocks.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY;;;;;GAmExB,CAAC;AAEF,eAAO,MAAM,eAAe;;;GAa3B,CAAC;AAEF,eAAO,MAAM,iBAAiB~~;;;;GA0B7B~~,CAAC"}
1	+ {"version":3,"file":"CallControlPanel.mocks.d.ts","sourceRoot":"","sources":["../../../src/cs/CallControlPanel/CallControlPanel.mocks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,uBAAuB,CAAC;AAE1E,eAAO,MAAM,YAAY;;;;;GAmExB,CAAC;AAEF,eAAO,MAAM,eAAe;;;GAa3B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;GAa9B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,4BAA4B,EA4B3D,CAAC;AAEF,aAAK,iBAAiB,GAClB,gBAAgB,GAChB,uBAAuB,GACvB,cAAc,GACd,qBAAqB,GACrB,oBAAoB,GACpB,sBAAsB,GACtB,mBAAmB,GACnB,qBAAqB,GACrB,gBAAgB,GAChB,0BAA0B,GAC1B,sBAAsB,GACtB,sBAAsB,GACtB,uBAAuB,GACvB,4BAA4B,GAC5B,0BAA0B,GAC1B,oBAAoB,GACpB,qBAAqB,GACrB,iBAAiB,GACjB,mBAAmB,GACnB,uBAAuB,GACvB,wBAAwB,GACxB,yBAAyB,GACzB,mBAAmB,CAAC;AAExB,oBAAY,cAAc,GAAG,OAAO,CAAC,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC,CAAC;AAExE,eAAO,MAAM,2BAA2B,YAAY,cAAc,GAAG,SAAS,WA6H7E,CAAC"}

package/lib/cs/CallControlPanel/CallControlPanel.mocks.js CHANGED Viewed

@@ -80,12 +80,21 @@ export const transferReasons = [
         label: 'On break'
     }
 ];
-export const userStatusOptions = [
+export const interactionOptions = [
     {
-        id: 'offline',
-        label: 'Offline',
-        status: 'offline'
+        id: '4545455',
+        label: 'Gregory Rhodes'
     },
+    {
+        id: '123243434',
+        label: 'Ella Bridges'
+    },
+    {
+        id: '4545455',
+        label: 'Carrie Hanson'
+    }
+];
+export const userStatusOptions = [
     {
         id: 'available',
         label: 'Available',
@@ -94,17 +103,150 @@ export const userStatusOptions = [
     {
         id: 'not_available',
         label: 'Not available',
-        status: 'busy'
+        status: 'busy',
+        disabled: true
     },
     {
-        id: 'away',
-        label: 'Break',
-        status: 'away'
+        id: 'after_call_work',
+        label: 'After call work',
+        status: 'after_work'
     },
     {
         id: 'reconnecting',
         label: 'Reconnecting',
-        status: 'not_available'
+        status: 'unavailable',
+        disabled: true
+    },
+    {
+        id: 'offline',
+        label: 'Offline',
+        status: 'logout'
     }
 ];
+export const createExternalIframeContent = (styles = {}) => `
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      :root {
+        ${Object.entries(styles)
+    .map(([key, value]) => `${key}: ${value};`)
+    .join('\n')}
+      }
+    </style>
+    <style>
+      html {
+        height: 100vh;
+        background-color: var(--app-bg-color, #F5F0EF);
+        color: var(--text-color, black);
+      }
+      body {
+        max-width: 100vw;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        margin: 0;
+      }
+      header {
+        height: 3rem;
+        font-size: 10px;
+        border-bottom: 2px solid var(--header-border-color, black);
+        padding: 0 8px;
+      }
+      main {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        max-height: calc(100% - 3rem);
+      }
+      ul {
+        flex-grow: 1;
+        overflow: auto;
+        display: flex;
+        flex-direction: column;
+        list-style: none;
+        padding-inline: 10px;
+        gap: 6px;
+        margin-block-end: 0;
+      }
+      li {
+        padding: 8px;
+      }
+      li.you {
+        align-self: start;
+        background-color: var(--msg-you-bg-color, lightblue);
+        color: var(--msg-you-text-color, black);
+        border-radius: 0 var(--msg-border-radius, 4px) var(--msg-border-radius, 4px);
+      }
+      li.you:before {
+        content: "\\00B7";
+        margin-inline-end: 4px;
+      }
+      li.me {
+        align-self: end;
+        background-color: var(--msg-me-bg-color, pink);
+        color: var(--msg-me-text-color, black);
+        border-radius: var(--msg-border-radius, 4px) 0 var(--msg-border-radius, 4px) var(--msg-border-radius, 4px);
+      }
+      li.me:after {
+        content: "\\00B7";
+        margin-inline-start: 4px;
+      }
+      div {
+        display: flex;
+        justify-content: stretch;
+        align-items: center;
+        gap: 8px;
+        padding: 8px;
+        background-color: var(--footer-bg-color, transparent);
+      }
+      input {
+        outline: none;
+        color: var(--input-text-color, black);
+        height: var(--input-height, 2rem);
+        background-color: var(--input-background-color, white);
+        border-color: var(--input-border-color, black);
+        border-width: var(--input-border-width, 1px);
+        border-radius: var(--input-border-radius, 4px);
+        flex-grow: 1;
+      }
+      input:focus {
+        border-color: var(--input-focus-border-color, lightblue);
+        box-shadow: var(--input-focus-box-shadow, none);
+      }
+      button {
+        padding: 0 8px;
+        color: var(--button-text-color, black);
+        height: var(--button-height, 2rem);
+        background-color: var(--button-bg-color, white);
+        border: 1px solid var(--button-border-color, blue);
+        border-radius: var(--button-border-radius, 4px);
+      }
+      button:hover {
+        background-color: var(--button-hover-bg-color, gray);
+      }
+    </style>
+  </head>
+  <body>
+    <header><h1>Customer: Julian Brewster</h1></header>
+    <main>
+      <ul>
+        <li class="you">Hey!</li>
+        <li class="you">I want to check my account balance.</li>
+        <li class="me">Hello Mr Brewster.</li>
+        <li class="me">You have two accounts open. Which one do you want to check?</li>
+        <li class="you">The default one.</li>
+        <li class="me">Your account balance is $12345.45.</li>
+        <li class="me">Is there anything I can help you, Mr Brewster?</li>
+        <li class="you">I want to close the other account.</li>
+        <li class="me">Alright. What account the money should be transferred to?</li>
+      </ul>
+      <div>
+        <input name="message" autocomplete="off" />
+        <button>Send</button>
+      </div>
+    </main>
+  </body>
+</html>
+`;
 //# sourceMappingURL=CallControlPanel.mocks.js.map

package/lib/cs/CallControlPanel/CallControlPanel.mocks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CallControlPanel.mocks.js","sourceRoot":"","sources":["../../../src/cs/CallControlPanel/CallControlPanel.mocks.ts"],"names":[],"mappings":"~~AAAA~~,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B;QACE,WAAW,EAAE,WAAW;QACxB,OAAO,EAAE,gBAAgB;QACzB,SAAS,EAAE,YAAY;QACvB,QAAQ,EAAE,IAAI;KACf;IACD;QACE,WAAW,EAAE,WAAW;QACxB,OAAO,EAAE,cAAc;QACvB,SAAS,EAAE,gBAAgB;QAC3B,QAAQ,EAAE,IAAI;KACf;IACD;QACE,WAAW,EAAE,SAAS;QACtB,OAAO,EAAE,eAAe;QACxB,SAAS,EAAE,gBAAgB;QAC3B,QAAQ,EAAE,KAAK;KAChB;IACD;QACE,WAAW,EAAE,UAAU;QACvB,OAAO,EAAE,cAAc;QACvB,SAAS,EAAE,YAAY;QACvB,QAAQ,EAAE,KAAK;KAChB;IACD;QACE,WAAW,EAAE,UAAU;QACvB,OAAO,EAAE,aAAa;QACtB,SAAS,EAAE,YAAY;QACvB,QAAQ,EAAE,KAAK;KAChB;IACD;QACE,WAAW,EAAE,UAAU;QACvB,OAAO,EAAE,gBAAgB;QACzB,SAAS,EAAE,gBAAgB;QAC3B,QAAQ,EAAE,KAAK;KAChB;IACD;QACE,WAAW,EAAE,UAAU;QACvB,OAAO,EAAE,gBAAgB;QACzB,SAAS,EAAE,YAAY;QACvB,QAAQ,EAAE,KAAK;KAChB;IACD;QACE,WAAW,EAAE,UAAU;QACvB,OAAO,EAAE,aAAa;QACtB,SAAS,EAAE,gBAAgB;QAC3B,QAAQ,EAAE,KAAK;KAChB;IACD;QACE,WAAW,EAAE,WAAW;QACxB,OAAO,EAAE,WAAW;QACpB,SAAS,EAAE,YAAY;QACvB,QAAQ,EAAE,KAAK;KAChB;IACD;QACE,WAAW,EAAE,WAAW;QACxB,OAAO,EAAE,SAAS;QAClB,SAAS,EAAE,gBAAgB;QAC3B,QAAQ,EAAE,KAAK;KAChB;IACD;QACE,WAAW,EAAE,WAAW;QACxB,OAAO,EAAE,UAAU;QACnB,SAAS,EAAE,gBAAgB;QAC3B,QAAQ,EAAE,KAAK;KAChB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B;QACE,EAAE,EAAE,SAAS;QACb,KAAK,EAAE,SAAS;KACjB;IACD;QACE,EAAE,EAAE,MAAM;QACV,KAAK,EAAE,MAAM;KACd;IACD;QACE,EAAE,EAAE,UAAU;QACd,KAAK,EAAE,UAAU;KAClB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,~~iBAAiB~~,GAAG;~~IAC/B~~;QACE,EAAE,EAAE,SAAS;QACb,KAAK,EAAE,~~SAAS~~;~~QAChB~~,~~MAAM~~,EAAE,~~SAAS~~;~~KAClB~~;IACD;QACE,EAAE,EAAE,WAAW;QACf,KAAK,EAAE,WAAW;QAClB,MAAM,EAAE,WAAW;KACpB;IACD;QACE,EAAE,EAAE,eAAe;QACnB,KAAK,EAAE,eAAe;QACtB,MAAM,EAAE,MAAM;KACf;IACD;QACE,EAAE,EAAE,~~MAAM~~;~~QACV~~,KAAK,EAAE,~~OAAO~~;~~QACd~~,MAAM,EAAE,~~MAAM~~;~~KACf~~;IACD;QACE,EAAE,EAAE,cAAc;QAClB,KAAK,EAAE,cAAc;QACrB,MAAM,EAAE,~~eAAe~~;~~KACxB~~;CACF,CAAC","sourcesContent":["~~export~~ const contactsList = [\n {\n phoneNumber: '343445656',\n primary: 'Gregory Rhodes',\n secondary: 'Supervisor',\n favorite: true\n },\n {\n phoneNumber: '123243434',\n primary: 'Ella Bridges',\n secondary: 'Representative',\n favorite: true\n },\n {\n phoneNumber: '4545455',\n primary: 'Carrie Hanson',\n secondary: 'Representative',\n favorite: false\n },\n {\n phoneNumber: '48436346',\n primary: 'Chris Wallas',\n secondary: 'Supervisor',\n favorite: false\n },\n {\n phoneNumber: '34455656',\n primary: 'Craig Marsh',\n secondary: 'Supervisor',\n favorite: false\n },\n {\n phoneNumber: '45565678',\n primary: 'Derrick Sutton',\n secondary: 'Representative',\n favorite: false\n },\n {\n phoneNumber: '54367578',\n primary: 'Lizzie Johnson',\n secondary: 'Supervisor',\n favorite: false\n },\n {\n phoneNumber: '65345789',\n primary: 'Ivan Fuller',\n secondary: 'Representative',\n favorite: false\n },\n {\n phoneNumber: '764455478',\n primary: 'Sam Smith',\n secondary: 'Supervisor',\n favorite: false\n },\n {\n phoneNumber: '876464003',\n primary: 'Joe Doe',\n secondary: 'Representative',\n favorite: false\n },\n {\n phoneNumber: '426464003',\n primary: 'Jane Doe',\n secondary: 'Representative',\n favorite: false\n }\n];\n\nexport const transferReasons = [\n {\n id: 'offline',\n label: 'Offline'\n },\n {\n id: 'busy',\n label: 'Busy'\n },\n {\n id: 'on_break',\n label: 'On break'\n }\n];\n\nexport const ~~userStatusOptions~~ = [\n {\n id: '~~offline~~',\n label: '~~Offline~~',\n ~~status~~: '~~offline~~'\n },\n {\n id: 'available',\n label: 'Available',\n status: 'available'\n },\n {\n id: 'not_available',\n label: 'Not available',\n status: 'busy'\n },\n {\n id: '~~away~~',\n label: '~~Break~~',\n status: '~~away~~'\n },\n {\n id: 'reconnecting',\n label: 'Reconnecting',\n status: '~~not_available~~'\n }\n];\n"]}
1	+ {"version":3,"file":"CallControlPanel.mocks.js","sourceRoot":"","sources":["../../../src/cs/CallControlPanel/CallControlPanel.mocks.ts"],"names":[],"mappings":"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","sourcesContent":["import type { UserAvailabilityStatusOption } from '@pega/cosmos-react-cs';\n\nexport const contactsList = [\n {\n phoneNumber: '343445656',\n primary: 'Gregory Rhodes',\n secondary: 'Supervisor',\n favorite: true\n },\n {\n phoneNumber: '123243434',\n primary: 'Ella Bridges',\n secondary: 'Representative',\n favorite: true\n },\n {\n phoneNumber: '4545455',\n primary: 'Carrie Hanson',\n secondary: 'Representative',\n favorite: false\n },\n {\n phoneNumber: '48436346',\n primary: 'Chris Wallas',\n secondary: 'Supervisor',\n favorite: false\n },\n {\n phoneNumber: '34455656',\n primary: 'Craig Marsh',\n secondary: 'Supervisor',\n favorite: false\n },\n {\n phoneNumber: '45565678',\n primary: 'Derrick Sutton',\n secondary: 'Representative',\n favorite: false\n },\n {\n phoneNumber: '54367578',\n primary: 'Lizzie Johnson',\n secondary: 'Supervisor',\n favorite: false\n },\n {\n phoneNumber: '65345789',\n primary: 'Ivan Fuller',\n secondary: 'Representative',\n favorite: false\n },\n {\n phoneNumber: '764455478',\n primary: 'Sam Smith',\n secondary: 'Supervisor',\n favorite: false\n },\n {\n phoneNumber: '876464003',\n primary: 'Joe Doe',\n secondary: 'Representative',\n favorite: false\n },\n {\n phoneNumber: '426464003',\n primary: 'Jane Doe',\n secondary: 'Representative',\n favorite: false\n }\n];\n\nexport const transferReasons = [\n {\n id: 'offline',\n label: 'Offline'\n },\n {\n id: 'busy',\n label: 'Busy'\n },\n {\n id: 'on_break',\n label: 'On break'\n }\n];\n\nexport const interactionOptions = [\n {\n id: '4545455',\n label: 'Gregory Rhodes'\n },\n {\n id: '123243434',\n label: 'Ella Bridges'\n },\n {\n id: '4545455',\n label: 'Carrie Hanson'\n }\n];\n\nexport const userStatusOptions: UserAvailabilityStatusOption[] = [\n {\n id: 'available',\n label: 'Available',\n status: 'available'\n },\n {\n id: 'not_available',\n label: 'Not available',\n status: 'busy',\n disabled: true\n },\n {\n id: 'after_call_work',\n label: 'After call work',\n status: 'after_work'\n },\n {\n id: 'reconnecting',\n label: 'Reconnecting',\n status: 'unavailable',\n disabled: true\n },\n {\n id: 'offline',\n label: 'Offline',\n status: 'logout'\n }\n];\n\ntype StyleVariableName =\n \| '--app-bg-color'\n \| '--header-border-color'\n \| '--text-color'\n \| '--msg-border-radius'\n \| '--msg-you-bg-color'\n \| '--msg-you-text-color'\n \| '--msg-me-bg-color'\n \| '--msg-me-text-color'\n \| '--input-height'\n \| '--input-background-color'\n \| '--input-border-color'\n \| '--input-border-width'\n \| '--input-border-radius'\n \| '--input-focus-border-color'\n \| '--input-focus-box-shadow'\n \| '--input-text-color'\n \| '--button-text-color'\n \| '--button-height'\n \| '--button-bg-color'\n \| '--button-border-color'\n \| '--button-border-radius'\n \| '--button-hover-bg-color'\n \| '--footer-bg-color';\n\nexport type ExternalStyles = Partial<Record<StyleVariableName, string>>;\n\nexport const createExternalIframeContent = (styles: ExternalStyles \| undefined = {}) => `\n<!DOCTYPE html>\n<html>\n <head>\n <style>\n :root {\n ${Object.entries(styles)\n .map(([key, value]) => `${key}: ${value};`)\n .join('\\n')}\n }\n </style>\n <style>\n html {\n height: 100vh;\n background-color: var(--app-bg-color, #F5F0EF);\n color: var(--text-color, black);\n }\n body {\n max-width: 100vw;\n height: 100%;\n display: flex;\n flex-direction: column;\n margin: 0;\n }\n header {\n height: 3rem;\n font-size: 10px;\n border-bottom: 2px solid var(--header-border-color, black);\n padding: 0 8px;\n }\n main {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n max-height: calc(100% - 3rem);\n }\n ul {\n flex-grow: 1;\n overflow: auto;\n display: flex;\n flex-direction: column;\n list-style: none;\n padding-inline: 10px;\n gap: 6px;\n margin-block-end: 0;\n }\n li {\n padding: 8px;\n }\n li.you {\n align-self: start;\n background-color: var(--msg-you-bg-color, lightblue);\n color: var(--msg-you-text-color, black);\n border-radius: 0 var(--msg-border-radius, 4px) var(--msg-border-radius, 4px);\n }\n li.you:before {\n content: \"\\\\00B7\";\n margin-inline-end: 4px;\n }\n li.me {\n align-self: end;\n background-color: var(--msg-me-bg-color, pink);\n color: var(--msg-me-text-color, black);\n border-radius: var(--msg-border-radius, 4px) 0 var(--msg-border-radius, 4px) var(--msg-border-radius, 4px);\n }\n li.me:after {\n content: \"\\\\00B7\";\n margin-inline-start: 4px;\n }\n div {\n display: flex;\n justify-content: stretch;\n align-items: center;\n gap: 8px;\n padding: 8px;\n background-color: var(--footer-bg-color, transparent);\n }\n input {\n outline: none;\n color: var(--input-text-color, black);\n height: var(--input-height, 2rem);\n background-color: var(--input-background-color, white);\n border-color: var(--input-border-color, black);\n border-width: var(--input-border-width, 1px);\n border-radius: var(--input-border-radius, 4px);\n flex-grow: 1;\n }\n input:focus {\n border-color: var(--input-focus-border-color, lightblue);\n box-shadow: var(--input-focus-box-shadow, none);\n }\n button {\n padding: 0 8px;\n color: var(--button-text-color, black);\n height: var(--button-height, 2rem);\n background-color: var(--button-bg-color, white);\n border: 1px solid var(--button-border-color, blue);\n border-radius: var(--button-border-radius, 4px);\n }\n button:hover {\n background-color: var(--button-hover-bg-color, gray);\n }\n </style>\n </head>\n <body>\n <header><h1>Customer: Julian Brewster</h1></header>\n <main>\n <ul>\n <li class=\"you\">Hey!</li>\n <li class=\"you\">I want to check my account balance.</li>\n <li class=\"me\">Hello Mr Brewster.</li>\n <li class=\"me\">You have two accounts open. Which one do you want to check?</li>\n <li class=\"you\">The default one.</li>\n <li class=\"me\">Your account balance is $12345.45.</li>\n <li class=\"me\">Is there anything I can help you, Mr Brewster?</li>\n <li class=\"you\">I want to close the other account.</li>\n <li class=\"me\">Alright. What account the money should be transferred to?</li>\n </ul>\n <div>\n <input name=\"message\" autocomplete=\"off\" />\n <button>Send</button>\n </div>\n </main>\n </body>\n</html>\n`;\n"]}

package/lib/cs/CallControlPanel/CallControlPanel.stories.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/react';
-import { UserAvailabilityStatusOption } from '@pega/cosmos-react-cs';
+import { UserAvailabilityStatusOption, CallControlPanelProps } from '@pega/cosmos-react-cs';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 interface CallControlPanelStoryProps {
@@ -7,7 +7,10 @@ interface CallControlPanelStoryProps {
     isDraggable?: boolean;
     status?: UserAvailabilityStatusOption['id'];
     onStatusChange?: (newStatus: UserAvailabilityStatusOption) => void;
+    visible?: CallControlPanelProps['visible'];
 }
 export declare const CallControlPanelDemo: Story<CallControlPanelStoryProps>;
-export declare const NewCallDemo: Story;
+export declare const ExternalCTIDemo: Story<CallControlPanelStoryProps & {
+    applyAppStyling: boolean;
+}>;
 //# sourceMappingURL=CallControlPanel.stories.d.ts.map

package/lib/cs/CallControlPanel/CallControlPanel.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CallControlPanel.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/CallControlPanel/CallControlPanel.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;~~AAG~~/C,OAAO,~~EAIL~~,4BAA4B,~~EAC7B~~,MAAM,uBAAuB,CAAC;;~~AAI~~/B,wBAWU;AAEV,UAAU,0BAA0B;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,4BAA4B,CAAC,IAAI,CAAC,CAAC;IAC5C,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,4BAA4B,KAAK,IAAI,CAAC;~~CACpE~~;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,0BAA0B,~~CA+LlE~~,CAAC;AAEF,eAAO,MAAM,~~WAAW~~,EAAE,~~KAczB~~,CAAC"}
1	+ {"version":3,"file":"CallControlPanel.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/CallControlPanel/CallControlPanel.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,EAOL,4BAA4B,EAC5B,qBAAqB,EACtB,MAAM,uBAAuB,CAAC;;AAW/B,wBAWU;AAEV,UAAU,0BAA0B;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,4BAA4B,CAAC,IAAI,CAAC,CAAC;IAC5C,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,4BAA4B,KAAK,IAAI,CAAC;IACnE,OAAO,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,0BAA0B,CAyQlE,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,0BAA0B,GAAG;IAAE,eAAe,EAAE,OAAO,CAAA;CAAE,CA0D5F,CAAC"}

package/lib/cs/CallControlPanel/CallControlPanel.stories.js CHANGED Viewed

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { action } from '@storybook/addon-actions';
-import { useRef, useState } from 'react';
-import { createUID } from '@pega/cosmos-react-core';
-import { CallControlPanel, CalleePicker } from '@pega/cosmos-react-cs';
-import { contactsList, transferReasons, userStatusOptions } from './CallControlPanel.mocks';
+import { useEffect, useRef, useState } from 'react';
+import { lighten, readableColor } from 'polished';
+import { createUID, tryCatch, useTheme } from '@pega/cosmos-react-core';
+import { CallControlPanel, ExternalCTI } from '@pega/cosmos-react-cs';
+import { contactsList, createExternalIframeContent, interactionOptions, transferReasons, userStatusOptions } from './CallControlPanel.mocks';
 export default {
     title: 'Customer Service/CallControlPanel',
     component: CallControlPanel,
@@ -21,135 +22,198 @@ export const CallControlPanelDemo = (args) => {
     const inStatusSince = useRef(Date.now());
     const [calls, setCalls] = useState([]);
     const [contacts, setContacts] = useState(contactsList);
-    const [error, setError] = useState();
     const callsList = useRef(calls);
     callsList.current = calls;
-    const onPauseToggle = (id) => {
-        const activeCallIndex = callsList.current.findIndex((call) => call.id === id);
-        const activeCall = callsList.current[activeCallIndex];
-        callsList.current.splice(activeCallIndex, 1, {
-            ...activeCall,
-            onHoldSince: activeCall.onHoldSince === undefined ? Date.now() : undefined
-        });
-        setCalls([...callsList.current]);
-    };
+    const [showInteractionTransfer, setShowInteractionTransfer] = useState(false);
     const onMuteToggle = (id) => {
-        const activeCallIndex = callsList.current.findIndex((call) => call.id === id);
-        const activeCall = callsList.current[activeCallIndex];
-        callsList.current.splice(activeCallIndex, 1, {
-            ...activeCall,
-            muted: !activeCall.muted
+        const thisCallIndex = callsList.current.findIndex(call => call.id === id);
+        if (thisCallIndex < 0)
+            return;
+        const thisCall = callsList.current[thisCallIndex];
+        callsList.current.splice(thisCallIndex, 1, {
+            ...thisCall,
+            muted: !thisCall.muted
         });
         setCalls([...callsList.current]);
     };
     const onMergeCall = (id) => {
-        const activeCall = callsList.current.find((call) => call.id === id);
-        if (!activeCall)
+        const thisCall = callsList.current.find(call => call.id === id);
+        const activeCallIndex = callsList.current.findIndex(call => !call.onHoldSince);
+        const currentCall = callsList.current[activeCallIndex];
+        if (!thisCall || !activeCallIndex)
             return;
-        callsList.current.splice(0, 1, {
-            ...callsList.current[0],
-            participants: [...callsList.current[0].participants, ...activeCall.participants],
+        callsList.current.splice(activeCallIndex, 1, {
+            ...currentCall,
+            participants: [...currentCall.participants, ...thisCall.participants],
             onHoldSince: undefined
         });
-        setCalls([...callsList.current.filter(callId => callId.id !== id)]);
+        setCalls([...callsList.current.filter(call => call.id !== id)]);
+    };
+    const onHandOffCall = (id) => {
+        setCalls([
+            ...callsList.current.filter(call => call.id !== id && call.onHoldSince)
+        ]);
+    };
+    const onPauseToggle = (id) => {
+        const thisCall = callsList.current.find(call => call.id === id);
+        if (!thisCall)
+            return;
+        const wasPaused = !!thisCall.onHoldSince;
+        callsList.current = callsList.current.map(call => {
+            if (thisCall.id === call.id)
+                return {
+                    ...call,
+                    onHoldSince: wasPaused ? undefined : Date.now(),
+                    onMergeCall: wasPaused ? onMergeCall : undefined,
+                    onHandOffCall: wasPaused ? onHandOffCall : undefined
+                };
+            return {
+                ...call,
+                onPauseToggle: wasPaused ? undefined : onPauseToggle,
+                onMergeCall: wasPaused ? onMergeCall : undefined,
+                onHandOffCall: wasPaused ? onHandOffCall : undefined
+            };
+        });
+        setCalls([...callsList.current]);
     };
     const onEndCall = (id) => {
-        const newList = callsList.current.filter(item => item.id !== id);
-        setCalls(newList);
+        setCalls(callsList.current.filter(item => item.id !== id));
+        setCurrentStatus('available');
     };
-    const onConsultAction = (id, phoneNumber) => {
-        const caller = contactsList.find(person => person.phoneNumber === phoneNumber);
-        const consultCall = {
+    const onHangUp = (callId, participantId) => {
+        const currentCallIndex = callsList.current.findIndex(call => call.id === callId);
+        if (currentCallIndex < 0)
+            return;
+        const currentCall = callsList.current[currentCallIndex];
+        callsList.current.splice(currentCallIndex, 1, {
+            ...currentCall,
+            participants: [
+                ...currentCall.participants.filter(participant => participant.id !== participantId)
+            ]
+        });
+        setCalls([...callsList.current]);
+    };
+    const onConferenceAction = (id, data) => {
+        const caller = contactsList.find(person => person.phoneNumber === data.phoneNumber);
+        const conferenceCall = {
             id: createUID(),
             startedAt: Date.now(),
             onMergeCall,
             transferOptions: transferReasons,
+            interactionOptions,
             muted: false,
             onMuteToggle,
             onPauseToggle,
+            onHandOffCall,
+            onEndCall,
             participants: [
                 {
                     name: caller?.primary || '',
                     info: caller?.secondary || '',
                     id: caller?.primary || '',
-                    onEndCall: (callId, participantId) => {
-                        // find consult call
-                        const callIndex = callsList.current.findIndex(call => call.id === consultCall.id);
-                        // end consult call if still exists
-                        if (callIndex !== -1)
-                            onEndCall(callId);
-                        else {
-                            const activeCallIndex = callsList.current.findIndex(call => call.id === callId);
-                            const activeCall = callsList.current[activeCallIndex];
-                            callsList.current.splice(activeCallIndex, 1, {
-                                ...activeCall,
-                                participants: [
-                                    ...activeCall.participants.filter(participant => participant.id === participantId)
-                                ]
-                            });
-                            setCalls([...callsList.current]);
-                        }
-                    }
+                    onHangUp
                 }
             ]
         };
-        const updatedCalls = callsList.current.map((call) => {
-            return { ...call, onHoldSince: Date.now() };
+        const currentCall = callsList.current[0];
+        callsList.current.splice(0, 1, {
+            ...callsList.current[0],
+            participants: [...currentCall.participants, ...conferenceCall.participants],
+            onHoldSince: undefined
         });
-        updatedCalls.push(consultCall);
-        setCalls(updatedCalls);
+        setCalls([...callsList.current.filter(call => call.id !== conferenceCall.id)]);
     };
-    const onConferenceAction = (id, phoneNumber) => {
-        const caller = contactsList.find(person => person.phoneNumber === phoneNumber);
-        const conferenceCall = {
+    const onConsultAction = (id, data) => {
+        const caller = contactsList.find(person => person.phoneNumber === data.phoneNumber);
+        const consultCall = {
             id: createUID(),
             startedAt: Date.now(),
-            onMergeCall,
             transferOptions: transferReasons,
             muted: false,
             onMuteToggle,
             onPauseToggle,
+            onMergeCall,
+            onHandOffCall,
+            onDTMFPress: action('onDTMFPress'),
+            onTransferAction: (callId, transferData) => {
+                action('onTransferAction')(callId, transferData);
+                if (transferData.interaction)
+                    setShowInteractionTransfer(true);
+                onEndCall(id);
+            },
+            onConsultAction,
+            onConferenceAction,
+            onEndCall,
             participants: [
                 {
                     name: caller?.primary || '',
                     info: caller?.secondary || '',
                     id: caller?.primary || '',
-                    onEndCall: (callId, participantId) => {
-                        // find conference call
-                        const callIndex = callsList.current.findIndex(call => call.id === conferenceCall.id);
-                        // end conference call if still exists
-                        if (callIndex !== -1)
-                            onEndCall(callId);
-                        else {
-                            const activeCallIndex = callsList.current.findIndex(call => call.id === callId);
-                            const activeCall = callsList.current[activeCallIndex];
-                            callsList.current.splice(activeCallIndex, 1, {
-                                ...activeCall,
-                                participants: [
-                                    ...activeCall.participants.filter(participant => participant.id === participantId)
-                                ]
-                            });
-                            setCalls([...callsList.current]);
-                        }
-                    }
+                    onHangUp
                 }
             ]
         };
-        callsList.current.splice(0, 1, {
-            ...callsList.current[0],
-            participants: [...callsList.current[0].participants, ...conferenceCall.participants],
-            onHoldSince: undefined
+        const updatedCalls = callsList.current.map(call => {
+            return { ...call, onHoldSince: Date.now(), onMergeCall, onPauseToggle: undefined };
         });
-        setCalls([...callsList.current.filter(callId => callId.id !== conferenceCall.id)]);
+        updatedCalls.push(consultCall);
+        setCalls(updatedCalls);
     };
-    return (_jsx(CallControlPanel, { heading: args.heading, statusOptions: userStatusOptions, status: currentStatus, inStatusSince: inStatusSince.current, onStatusChange: value => {
-            if (value === 'reconnecting') {
-                setError('You cannot set this status');
-                return;
-            }
+    useEffect(() => {
+        const timeoutId = setTimeout(() => {
+            const caller = contactsList[0];
+            const consultCall = {
+                id: createUID(),
+                startedAt: Date.now(),
+                transferOptions: transferReasons,
+                muted: false,
+                onMuteToggle,
+                onPauseToggle,
+                onMergeCall,
+                onHandOffCall,
+                onDTMFPress: action('onDTMFPress'),
+                onTransferAction: (callId, transferData) => {
+                    action('onTransferAction')(callId, transferData);
+                    if (transferData.interaction)
+                        setShowInteractionTransfer(true);
+                    onEndCall(callId);
+                },
+                onConsultAction,
+                onConferenceAction,
+                onEndCall,
+                participants: [
+                    {
+                        name: caller?.primary || '',
+                        info: caller?.secondary || '',
+                        id: caller?.primary || '',
+                        onHangUp
+                    }
+                ]
+            };
+            const incomingCall = {
+                id: createUID(),
+                onAcceptCall: () => {
+                    setCalls([consultCall]);
+                },
+                participant: {
+                    name: contactsList[0].primary,
+                    info: contactsList[0].secondary,
+                    id: contactsList[0].primary
+                }
+            };
+            setCalls([incomingCall, ...callsList.current]);
+        }, 4000);
+        return () => clearTimeout(timeoutId);
+    }, []);
+    return (_jsx(CallControlPanel, { visible: args.visible ?? true, heading: args.heading, statusOptions: userStatusOptions, status: currentStatus, inStatusSince: inStatusSince.current, onStatusChange: value => {
             setCurrentStatus(value);
-            args.onStatusChange?.(userStatusOptions.find(s => s.id === value));
-        }, message: error, calls: calls, draggable: args.isDraggable, onAddCall: (phoneNumber) => {
+            args.onStatusChange?.(userStatusOptions.find(s => s.id === value) ?? userStatusOptions[0]);
+        }, interactionTransfer: showInteractionTransfer
+            ? {
+                onCancel: () => setShowInteractionTransfer(false),
+                onComplete: () => setShowInteractionTransfer(false)
+            }
+            : undefined, calls: calls, draggable: args.isDraggable, onAddCall: (phoneNumber) => {
             const call = {
                 id: createUID(),
                 startedAt: Date.now(),
@@ -157,20 +221,25 @@ export const CallControlPanelDemo = (args) => {
                 onConsultAction,
                 onConferenceAction,
                 transferOptions: transferReasons,
+                interactionOptions,
                 onTransferAction: (id, data) => {
                     action('onTransferAction')(id, data);
+                    if (data.interaction)
+                        setShowInteractionTransfer(true);
                     onEndCall(id);
                 },
                 muted: false,
                 onMuteToggle,
                 onPauseToggle,
+                onMergeCall,
                 onDTMFPress: action('onDTMFPress'),
+                onEndCall: () => onEndCall(call.id),
                 participants: [
                     {
                         id: contactsList.find(person => person.phoneNumber === phoneNumber)?.primary || '',
                         name: contactsList.find(person => person.phoneNumber === phoneNumber)?.primary ||
                             'Unknown',
-                        onEndCall: () => onEndCall(call.id)
+                        onHangUp
                     }
                 ]
             };
@@ -182,12 +251,57 @@ export const CallControlPanelDemo = (args) => {
             setContacts([...contacts]);
         } }));
 };
-export const NewCallDemo = () => {
-    const [items, setItems] = useState(contactsList);
-    return (_jsx(CalleePicker, { heading: 'New call', contactsList: contactsList, onFavoriteToggle: (phoneNumber, favorite) => {
-            const element = items.find(item => item.phoneNumber === phoneNumber);
-            element.favorite = !favorite;
-            setItems([...items]);
-        }, onCall: phoneNumber => action('onCall')(phoneNumber) }));
+export const ExternalCTIDemo = (args) => {
+    const containerRef = useRef(null);
+    const { base, components } = useTheme();
+    const styling = args.applyAppStyling
+        ? {
+            '--app-bg-color': base.palette['app-background'],
+            '--header-border-color': base.palette['secondary-background'],
+            '--text-color': base.palette['foreground-color'],
+            '--msg-me-bg-color': base.palette.interactive,
+            '--msg-me-text-color': tryCatch(() => readableColor(base.palette.interactive)),
+            '--msg-you-bg-color': base.palette['primary-background'],
+            '--msg-you-text-color': tryCatch(() => readableColor(base.palette['primary-background'])),
+            '--msg-border-radius': '16px',
+            '--button-text-color': tryCatch(() => readableColor(components.button.color)),
+            '--button-bg-color': components.button.color,
+            '--button-border-color': 'transparent',
+            '--button-border-radius': `calc(${components.button['border-radius']} * ${base['border-radius']})`,
+            '--button-hover-bg-color': tryCatch(() => lighten(0.1, components.button.color)),
+            '--button-height': components.input.height,
+            '--input-height': components.input.height,
+            '--input-background-color': components.input['background-color'],
+            '--input-text-color': base.palette['foreground-color'],
+            '--input-border-radius': `calc(0.5 * ${base['border-radius']})`,
+            '--input-focus-border-color': 'transparent',
+            '--input-focus-box-shadow': components.button['focus-shadow'],
+            '--footer-bg-color': base.palette['app-background']
+        }
+        : undefined;
+    useEffect(() => {
+        if (containerRef.current) {
+            containerRef.current.innerHTML = `
+        <iframe id='external-cti' srcdoc='${createExternalIframeContent(styling)}' width='100%' height='500px'></iframe>
+      `;
+        }
+    }, [containerRef.current, styling]);
+    return (_jsx(ExternalCTI, { heading: args.heading, draggable: args.isDraggable, visible: args.visible, ref: containerRef, attachInteractionProps: {
+            onAddInteraction: () => { },
+            onCancel: () => null,
+            reasonOptions: transferReasons,
+            interactionOptions,
+            heading: 'Attach interaction to call'
+        } }));
+};
+ExternalCTIDemo.args = {
+    heading: 'External CTI',
+    isDraggable: true,
+    applyAppStyling: false
+};
+ExternalCTIDemo.argTypes = {
+    heading: { control: { type: 'text' } },
+    isDraggable: { control: { type: 'boolean' } },
+    applyAppStyling: { control: { type: 'boolean' } }
 };
 //# sourceMappingURL=CallControlPanel.stories.js.map