microsoft · compulim · Oct 16, 2023 · Oct 16, 2023 · Oct 16, 2023 · Oct 16, 2023
@@ -81,7 +81,7 @@ rules:
   react/no-will-update-set-state: error
   react/prefer-es6-class: error
   react/prefer-read-only-props: error
-  react/require-default-props: error
+  react/require-default-props: off # defaultProps is being deprecated
   react/self-closing-comp: error
   react/sort-default-props: error
   react/sort-prop-types: error

@@ -40,6 +40,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Resolves [#4841](https://github.com/microsoft/BotFramework-WebChat/issues/4841). Added link definitions UI in Markdown, by [@compulim](https://github.com/compulim), in PR [#4846](https://github.com/microsoft/BotFramework-WebChat/pull/4846)
 -  Resolves [#4842](https://github.com/microsoft/BotFramework-WebChat/issues/4842). Added provenance in activity status, by [@compulim](https://github.com/compulim), in PR [#4846](https://github.com/microsoft/BotFramework-WebChat/pull/4846)
 -  Resolves [#4856](https://github.com/microsoft/BotFramework-WebChat/issues/4856). Added types for `useStyleSet`, by [@compulim](https://github.com/compulim), in PR [#4857](https://github.com/microsoft/BotFramework-WebChat/pull/4857)
+-  Resolves [#2770](https://github.com/microsoft/BotFramework-WebChat/issues/2770). Added customer satisfactory (CSAT) card, by [@compulim](https://github.com/compulim), in PR [#4899](https://github.com/microsoft/BotFramework-WebChat/pull/4899)
 
 ## [4.15.9] - 2023-08-25
 

@@ -0,0 +1,147 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script>
+      run(async function () {
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity({
+          from: {
+            role: 'bot'
+          },
+          type: 'message',
+          attachments: [
+            {
+              content: {
+                '@context': 'https://schema.org',
+                '@type': 'ReviewAction',
+                actionStatus: 'PotentialActionStatus',
+                description: 'Great! Please rate your experience.',
+                resultReview: {
+                  '@type': 'Review',
+                  reviewRating: {
+                    '@type': 'Rating',
+                    description: ['Bad', 'Poor', 'Average', 'Good', 'Excellent'],
+                    'ratingValue-input': {
+                      '@type': 'PropertyValueSpecification',
+                      valueName: 'rate'
+                    }
+                  }
+                },
+                target: {
+                  '@type': 'EntryPoint',
+                  actionPlatform: 'https://directline.botframework.com',
+                  urlTemplate:
+                    'ms-directline-postback:?valuetype=application/json&value=%7B%22rate%22%3A%22{rate}%22%7D'
+                }
+              },
+              contentType: 'application/ld+json'
+            }
+          ]
+        });
+
+        await host.snapshot();
+
+        const [firstActivity] = pageElements.activities();
+        const buttons = firstActivity.querySelectorAll('[role="radio"]');
+        const submitButton = firstActivity.querySelector('[type="submit"]');
+
+        expect(buttons[0]).toHaveProperty('title', 'Bad');
+        expect(buttons[1]).toHaveProperty('title', 'Poor');
+        expect(buttons[2]).toHaveProperty('title', 'Average');
+        expect(buttons[3]).toHaveProperty('title', 'Good');
+        expect(buttons[4]).toHaveProperty('title', 'Excellent');
+
+        pageElements.sendBoxTextBox().focus();
+
+        expect(submitButton).toHaveProperty('ariaDisabled', 'true');
+
+        await host.sendShiftTab(3);
+        await host.sendKeys('ENTER');
+        expect(document.activeElement).toBe(buttons[0]);
+        expect(buttons[0]).toHaveProperty('ariaChecked', 'true');
+        expect(buttons[1]).toHaveProperty('ariaChecked', 'false');
+        expect(buttons[2]).toHaveProperty('ariaChecked', 'false');
+        expect(buttons[3]).toHaveProperty('ariaChecked', 'false');
+        expect(buttons[4]).toHaveProperty('ariaChecked', 'false');
+        expect(submitButton).not.toHaveProperty('ariaDisabled', 'true');
+        await host.snapshot();
+
+        await host.sendKeys('ARROW_RIGHT');
+        expect(document.activeElement).toBe(buttons[1]);
+        expect(buttons[0]).toHaveProperty('ariaChecked', 'true');
+        expect(buttons[1]).toHaveProperty('ariaChecked', 'true');
+        expect(buttons[2]).toHaveProperty('ariaChecked', 'false');
+        expect(buttons[3]).toHaveProperty('ariaChecked', 'false');
+        expect(buttons[4]).toHaveProperty('ariaChecked', 'false');
+        expect(submitButton).not.toHaveProperty('ariaDisabled', 'true');
+        await host.snapshot();
+
+        await host.sendKeys('HOME');
+        expect(document.activeElement).toBe(buttons[0]);
+        expect(buttons[0]).toHaveProperty('ariaChecked', 'true');
+        expect(buttons[1]).toHaveProperty('ariaChecked', 'false');
+        expect(buttons[2]).toHaveProperty('ariaChecked', 'false');
+        expect(buttons[3]).toHaveProperty('ariaChecked', 'false');
+        expect(buttons[4]).toHaveProperty('ariaChecked', 'false');
+        expect(submitButton).not.toHaveProperty('ariaDisabled', 'true');
+        await host.snapshot();
+
+        await host.click(buttons[3]);
+        expect(document.activeElement).toBe(buttons[3]);
+        expect(buttons[0]).toHaveProperty('ariaChecked', 'true');
+        expect(buttons[1]).toHaveProperty('ariaChecked', 'true');
+        expect(buttons[2]).toHaveProperty('ariaChecked', 'true');
+        expect(buttons[3]).toHaveProperty('ariaChecked', 'true');
+        expect(buttons[4]).toHaveProperty('ariaChecked', 'false');
+        expect(submitButton).not.toHaveProperty('ariaDisabled', 'true');
+        await host.snapshot();
+
+        await host.moveTo(document.body.clientWidth, document.body.clientHeight);
+        await host.sendKeys('END');
+        expect(document.activeElement).toBe(buttons[4]);
+        expect(buttons[0]).toHaveProperty('ariaChecked', 'true');
+        expect(buttons[1]).toHaveProperty('ariaChecked', 'true');
+        expect(buttons[2]).toHaveProperty('ariaChecked', 'true');
+        expect(buttons[3]).toHaveProperty('ariaChecked', 'true');
+        expect(buttons[4]).toHaveProperty('ariaChecked', 'true');
+        expect(submitButton).not.toHaveProperty('ariaDisabled', 'true');
+        await host.snapshot();
+
+        await host.sendTab();
+        expect(document.activeElement).toBe(submitButton);
+        await host.snapshot();
+
+        const { activity, resolveAll } = await directLine.actPostActivity(() => host.sendKeys('ENTER'));
+
+        expect(document.activeElement).toBe(pageElements.sendBoxTextBox());
+        expect(submitButton).toHaveProperty('ariaDisabled', 'true');
+        expect(submitButton).toHaveProperty('ariaPressed', 'true');
+        await host.snapshot();
+
+        expect(activity).toHaveProperty('channelData.postBack', true);
+        expect(activity).toHaveProperty('text', undefined);
+        expect(activity).toHaveProperty('type', 'message');
+        expect(activity).toHaveProperty('value', { rate: '5' });
+        await resolveAll();
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('customer satisfactory attachment', () => {
+  test('should work', () => runHTML('attachment/customerSatisfactory/basic'));
+});
@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script>
+      run(async function () {
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity({
+          from: {
+            role: 'bot'
+          },
+          type: 'message',
+          attachments: [
+            {
+              content: {
+                '@context': 'https://schema.org',
+                '@type': 'ReviewAction',
+                actionStatus: 'CompletedActionStatus',
+                description: 'Great! Please rate your experience.',
+                resultReview: {
+                  '@type': 'Review',
+                  reviewRating: {
+                    '@type': 'Rating',
+                    ratingValue: 4
+                  }
+                }
+              },
+              contentType: 'application/ld+json'
+            }
+          ]
+        });
+
+        const [firstActivity] = pageElements.activities();
+        const buttons = firstActivity.querySelectorAll('[role="radio"]');
+        const submitButton = firstActivity.querySelector('[type="submit"]');
+
+        pageElements.sendBoxTextBox().focus();
+
+        expect(submitButton).toHaveProperty('ariaDisabled', 'true');
+        expect(submitButton).toHaveProperty('ariaPressed', 'true');
+        expect(buttons[0]).toHaveProperty('ariaChecked', 'true');
+        expect(buttons[1]).toHaveProperty('ariaChecked', 'true');
+        expect(buttons[2]).toHaveProperty('ariaChecked', 'true');
+        expect(buttons[3]).toHaveProperty('ariaChecked', 'true');
+        expect(buttons[4]).toHaveProperty('ariaChecked', 'false');
+        expect(buttons[0]).toHaveProperty('ariaDisabled', 'true');
+        expect(buttons[1]).toHaveProperty('ariaDisabled', 'true');
+        expect(buttons[2]).toHaveProperty('ariaDisabled', 'true');
+        expect(buttons[3]).toHaveProperty('ariaDisabled', 'true');
+        expect(buttons[4]).toHaveProperty('ariaDisabled', 'true');
+        await host.snapshot();
+
+        await host.sendShiftTab(3);
+        await host.sendKeys('ENTER');
+        expect(document.activeElement).toBe(pageElements.transcript());
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('customer satisfactory attachment with completed action', () => {
+  test('should work', () => runHTML('attachment/customerSatisfactory/completed'));
+});
@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script>
+      run(async function () {
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity({
+          from: {
+            role: 'bot'
+          },
+          type: 'message',
+          attachments: [
+            {
+              content: {
+                '@context': 'https://schema.org',
+                '@type': 'ReviewAction',
+                actionStatus: 'PotentialActionStatus',
+                description: 'Great! Please rate your experience.',
+                resultReview: {
+                  '@type': 'Review',
+                  reviewRating: {
+                    '@type': 'Rating',
+                    'ratingValue-input': {
+                      '@type': 'PropertyValueSpecification',
+                      valueName: 'rate'
+                    }
+                  }
+                },
+                target: {
+                  '@type': 'EntryPoint',
+                  actionPlatform: 'https://directline.botframework.com',
+                  urlTemplate: 'ms-directline-imback:?title={rate}'
+                }
+              },
+              contentType: 'application/ld+json'
+            }
+          ]
+        });
+
+        const [firstActivity] = pageElements.activities();
+        const buttons = firstActivity.querySelectorAll('[role="radio"]');
+        const submitButton = firstActivity.querySelector('[type="submit"]');
+
+        pageElements.sendBoxTextBox().focus();
+
+        expect(submitButton).toHaveProperty('ariaDisabled', 'true');
+
+        await host.click(buttons[4]);
+
+        const { activity, resolveAll } = await directLine.actPostActivity(() => host.click(submitButton));
+
+        expect(activity).toHaveProperty('text', '5');
+        expect(activity).toHaveProperty('type', 'message');
+        await resolveAll();
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('customer satisfactory attachment with imBack of title', () => {
+  test('should work', () => runHTML('attachment/customerSatisfactory/imBack.title'));
+});