@kindly/react-chat 2.37.1 → 2.38.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kindly/react-chat",
-  "version": "2.37.1",
+  "version": "2.38.1",
   "description": "Kindly Chat react component",
   "repository": "https://github.com/kindly-ai/kindly-chat/tree/main/packages/react-chat",
   "main": "dist/index.js",
@@ -15,10 +15,14 @@
     "build:local": "webpack -p",
     "prepublishOnly": "npm run build",
     "test": "jest src",
+    "test:a11y": "test-storybook",
     "update:browserslist": "npx browserslist@latest --update-db",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
   },
+  "scriptsComments": {
+    "test-a11y": "Runs the storybook test-runner. Currently running only axe-core for a11y tests."
+  },
   "browserslist": [
     "> 1% in NO",
     "not IE 11",
@@ -59,11 +63,12 @@
     "react-dom": ">=16.9.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.10",
+    "@babel/core": "^7.18.13",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-transform-runtime": "^7.18.10",
     "@babel/preset-env": "^7.18.10",
     "@babel/preset-react": "^7.18.6",
+    "@storybook/addon-a11y": "^6.5.10",
     "@storybook/addon-actions": "^6.5.10",
     "@storybook/addon-essentials": "^6.5.10",
     "@storybook/addon-interactions": "^6.5.10",
@@ -72,18 +77,23 @@
     "@storybook/jest": "^0.0.10",
     "@storybook/manager-webpack4": "^6.5.10",
     "@storybook/react": "^6.5.10",
+    "@storybook/test-runner": "^0.7.0",
     "@storybook/testing-library": "^0.0.13",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^11.2.7",
+    "@types/react": "^16.14.31",
+    "@types/react-dom": "^16.9.16",
+    "axe-playwright": "^1.1.11",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.5",
     "babel-plugin-styled-components": "^1.13.3",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "browserslist": "^4.21.3",
-    "chromatic": "^6.7.4",
+    "chromatic": "^6.8.0",
     "clean-webpack-plugin": "^3.0.0",
     "compression": "1.7.4",
+    "concurrently": "^7.3.0",
     "dotenv": "8.6.0",
     "exports-loader": "^0.7.0",
     "express": "^4.18.1",
@@ -105,6 +115,7 @@
     "resolve-url-loader": "^5.0.0",
     "storybook-addon-mock": "^2.4.1",
     "url-loader": "2.3.0",
+    "wait-on": "^6.0.1",
     "webpack": "^4.46.0",
     "webpack-bundle-analyzer": "^3.9.0",
     "webpack-cli": "^3.3.12",
@@ -115,5 +126,5 @@
     "silent": true,
     "webpackConfig": "./webpack.config.js"
   },
-  "gitHead": "9b795ef88a6a0d4fed3681669dede113dd14f416"
+  "gitHead": "a10766ab8e4d989cbebae6522e8586209bab9035"
 }

package/stories/screens.stories/Chat.stories.jsx

@@ -1,6 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable react/prop-types */
-import { expect } from '@storybook/jest';
 import { screen, userEvent } from '@storybook/testing-library';
 import React from 'react';
 import withFetchMock from 'storybook-addon-mock';
@@ -20,9 +19,9 @@ const defaultBotSettings = {
   ...settingsJSON,
 };
 
-const Template = (args, context) => {
+function Template(args, context) {
   return <KindlyChatButton {...args} {...context} />;
-};
+}
 
 export default {
   title: 'Screen/Chat',
@@ -100,6 +99,31 @@ Regular.parameters = {
   },
 };
 
+export const Annoucement = Template.bind({});
+Annoucement.args = {
+  type: 'WARNING',
+  text: 'You seem to be offline, please check your internet connection',
+  initialStateModifierFromArgs: ({ type, text }) => ({
+    ...Regular.parameters.initialStateModifier,
+    announcement: {
+      show: true,
+      type,
+      text,
+    },
+  }),
+};
+Annoucement.argTypes = {
+  type: {
+    options: ['WARNING', 'CRITICAL'],
+    control: {
+      type: 'select',
+    },
+  },
+};
+Annoucement.parameters = {
+  botSettings: defaultBotSettings,
+};
+
 export const BotIsTyping = Template.bind({});
 BotIsTyping.parameters = {
   botSettings: defaultBotSettings,
@@ -329,10 +353,10 @@ HandoverRequested.parameters = {
 export const HandoverCancelled = Template.bind({});
 HandoverCancelled.parameters = HandoverRequested.parameters;
 HandoverCancelled.play = async () => {
-  expect(await screen.findByText(defaultBotSettings.text.takeover_queue_text.en)).toBeInTheDocument();
+  await screen.findByText(defaultBotSettings.text.takeover_queue_text.en);
   const leaveQueueButton = await screen.findByText(defaultBotSettings.text.takeover_queue_link.en);
   await userEvent.click(leaveQueueButton);
-  expect(await screen.findByText(defaultBotSettings.text.leave_queue_text.en)).toBeInTheDocument();
+  await screen.findByText(defaultBotSettings.text.leave_queue_text.en);
 };
 
 export const Checkbox = Template.bind({});
@@ -383,9 +407,74 @@ Checkbox.parameters = {
   },
 };
 
+export const Fallback = Template.bind({});
+Fallback.parameters = {
+  ...Regular.parameters,
+  initialStateModifier: {
+    ...Regular.parameters.initialStateModifier,
+    messages: {
+      chatMessages: [
+        {
+          id: '0',
+          created: '2022-08-29T07:55:00.923Z',
+          message: 'What does recursive mean?',
+          status: null,
+        },
+        {
+          id: '1',
+          from_bot: true,
+          sender: 'BOT',
+          reply_to_message: 'What does recursive mean?',
+          message: "I didn't quite understand this.",
+          exchange_type: 'fallback_suggestion',
+          title: "I didn't quite understand this.",
+          chatbubble_hide_input_field: true,
+          handler: 'FALLBACK_SUGGESTION',
+          suggestions: [
+            {
+              preface: 'Did you mean:',
+              message: 'What does recursive mean?',
+              buttons: [
+                {
+                  id: '2',
+                  label: 'Yes',
+                  value: '1',
+                  button_type: 'suggestion_dialogue_trigger',
+                  is_active: true,
+                },
+                {
+                  id: '2',
+                  label: 'No',
+                  value: 'SUGGESTION_FALLBACK',
+                  exchange_id: 'SUGGESTION_FALLBACK',
+                  button_type: 'suggestion_dialogue_trigger',
+                  is_active: true,
+                },
+              ],
+            },
+          ],
+          created: '2022-06-11T16:13:00.143Z',
+        },
+        {
+          from_bot: true,
+          sender: 'BOT',
+          reply_to_message: '🙅 [Fallback suggestion dismissed by user]',
+          message:
+            "I'm having trouble understanding what you mean. Feel free to rephrase your question and remember that I understand short and precise sentences the best.",
+          exchange_type: 'fallback',
+          title: '🙅 [Fallback suggestion dismissed by user]',
+          handler: 'FALLBACK',
+          created: '2022-08-29T08:15:42.712Z',
+          id: '2',
+        },
+      ],
+    },
+  },
+};
+
 const videoSources = [
   ['YouTube', 'https://www.youtube.com/watch?v=vvg5AfQEmUc'],
-  ['Vimeo', 'https://vimeo.com/148751763'],
+  ['Vimeo', 'https://vimeo.com/153882097'],
   ['Self hosted', 'https://www.crockpot.se/wp-content/uploads/2019/02/Comp-1-1.mp4'],
 ];
 export const VideoEmbed = Template.bind({});
@@ -437,9 +526,17 @@ ImageGallery.args = {
   imageCarouselSize: 1000,
   titleSize: 0,
   descriptionSize: 0,
+  imageQuantity: 3,
   hasLink: false,
   newTab: false,
-  initialStateModifierFromArgs: ({ imageCarouselSize, titleSize, descriptionSize, hasLink, newTab }) => ({
+  initialStateModifierFromArgs: ({
+    imageCarouselSize,
+    imageQuantity,
+    titleSize,
+    descriptionSize,
+    hasLink,
+    newTab,
+  }) => ({
     ...Regular.parameters.initialStateModifier,
     messages: {
       chatMessages: [
@@ -458,7 +555,7 @@ ImageGallery.args = {
               title: textSizes[titleSize],
               description: textSizes[descriptionSize],
               linkUrl: hasLink ? 'https://example.com' : undefined,
-              altText: textSizes[titleSize],
+              altText: textSizes[titleSize] || 'Alt text',
               newTab,
             },
             {
@@ -467,7 +564,7 @@ ImageGallery.args = {
               title: textSizes[titleSize],
               description: textSizes[descriptionSize],
               linkUrl: hasLink ? 'https://example.com' : undefined,
-              altText: textSizes[titleSize],
+              altText: textSizes[titleSize] || 'Alt text',
               newTab,
             },
             {
@@ -476,10 +573,10 @@ ImageGallery.args = {
               title: textSizes[titleSize],
               description: textSizes[descriptionSize],
               linkUrl: hasLink ? 'https://example.com' : undefined,
-              altText: textSizes[titleSize],
+              altText: textSizes[titleSize] || 'Alt text',
               newTab,
             },
-          ],
+          ].slice(0, imageQuantity),
           image_carousel_size: imageCarouselSize,
           title: 'Image Gallery',
           created: '2022-06-11T16:44:33.885Z',
@@ -493,6 +590,9 @@ ImageGallery.argTypes = {
     options: Object.keys(IMAGE_SIZE).map((size) => parseInt(size, 10)),
     control: { type: 'radio' },
   },
+  imageQuantity: {
+    control: { type: 'range', min: 1, max: 3, step: 1 },
+  },
   titleSize: {
     control: { type: 'range', min: 0, max: textSizes.length - 1, step: 1 },
   },

package/stories/screens.stories/ClosedButton.stories.jsx

@@ -16,9 +16,9 @@ const mockSettings = (response = settings) => ({
   ],
 });
 
-const Template = (args) => {
-  return <KindlyChat botKey={'1234'} options={args.options || {}} {...args} />;
-};
+function Template({ options, ...args }) {
+  return <KindlyChat botKey="1234" options={options || {}} {...args} />;
+}
 
 export default {
   title: 'Screen/Button',

package/stories/screens.stories/Feedback.stories.jsx

@@ -18,9 +18,9 @@ const defaultBotSettings = {
   ...settingsJSON,
 };
 
-const Template = (args, context) => {
+function Template(args, context) {
   return <KindlyChatButton {...args} {...context} />;
-};
+}
 
 export default {
   title: 'Screen/Feedback',

package/stories/screens.stories/Nudge.stories.jsx

@@ -16,10 +16,10 @@ const mockSettings = (response = settings) => ({
   ],
 });
 
-const Template = ({ slug, nudgeLayout, trackEvent, options, ...args }) => {
+function Template({ slug, nudgeLayout, trackEvent, options, ...args }) {
   return (
     <KindlyChat
-      botKey={'1234'}
+      botKey="1234"
       options={options || {}}
       {...args}
       setKindlyChatRef={(api) => {
@@ -31,7 +31,7 @@ const Template = ({ slug, nudgeLayout, trackEvent, options, ...args }) => {
       }}
     />
   );
-};
+}
 
 export default {
   title: 'Screen/Nudges',

package/stories/screens.stories/Options.stories.jsx

@@ -17,9 +17,9 @@ const defaultBotSettings = {
   ...settingsJSON,
 };
 
-const Template = (args, context) => {
+function Template(args, context) {
   return <KindlyChatButton {...args} {...context} />;
-};
+}
 
 export default {
   title: 'Screen/Options',

package/stories/screens.stories/PushGreeting.stories.jsx

@@ -0,0 +1,82 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable react/prop-types */
+import React from 'react';
+import withFetchMock from 'storybook-addon-mock';
+
+import KindlyChatButton from '../../src/features/KindlyChatButton/KindlyChatButton';
+import settingsJSON from '../assets/settingsJson';
+import withContainer from '../decorators/withContainer';
+import withMockProvider from '../decorators/withProvider';
+
+const defaultBotSettings = {
+  welcomePage: settingsJSON.welcome_page,
+  feedbackForm: settingsJSON.feedback_form,
+  maintenanceAlert: settingsJSON.maintenance_alert,
+  ...settingsJSON.settings,
+  ...settingsJSON,
+};
+
+function Template(args, context) {
+  return <KindlyChatButton {...args} {...context} />;
+}
+
+export default {
+  title: 'Screen/PushGreeting',
+  component: KindlyChatButton,
+  decorators: [withFetchMock, withContainer, withMockProvider],
+};
+
+export const Default = Template.bind({});
+Default.parameters = {
+  botSettings: {
+    ...defaultBotSettings,
+  },
+  initialStateModifier: {
+    pushMessages: {
+      dismissedMessages: [],
+      show: true,
+      type: 'message',
+      text: 'This is a push greeting',
+    },
+  },
+};
+
+export const NewMessage = Template.bind({});
+NewMessage.args = {
+  agentName: 'John Doe',
+  avatar: null,
+  text: 'has sent a new message',
+  initialStateModifierFromArgs: ({ agentName, avatar, text }) => ({
+    botSettings: {
+      ...defaultBotSettings,
+    },
+    pushMessages: {
+      dismissedMessages: [],
+      show: true,
+      type: 'takeover',
+      agent: {
+        name: agentName,
+        avatar,
+      },
+      text,
+    },
+  }),
+};
+
+const avatars = {
+  undefined: 'undefined',
+  'https://i.imgur.com/Iz1nJrw.jpg': 'Arash',
+};
+
+NewMessage.argTypes = {
+  avatar: {
+    options: Object.keys(avatars),
+    control: {
+      type: 'select',
+      labels: avatars,
+    },
+  },
+};
+NewMessage.parameters = {
+  botSettings: defaultBotSettings,
+};

package/stories/screens.stories/StartChat.stories.jsx

@@ -15,9 +15,9 @@ const defaultBotSettings = {
   ...settingsJSON,
 };
 
-const Template = (args, context) => {
+function Template(args, context) {
   return <KindlyChatButton {...args} {...context} />;
-};
+}
 
 export default {
   title: 'Screen/StartChat',

package/jsconfig.json

@@ -1,9 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "app/*": ["src/*"]
-    }
-  },
-  "exclude": ["node_modules"]
-}