@kindly/react-chat 2.40.4 → 2.41.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kindly/react-chat",
-  "version": "2.40.4",
+  "version": "2.41.1",
   "description": "Kindly Chat react component",
   "repository": "https://github.com/kindly-ai/kindly-chat/tree/main/packages/react-chat",
   "main": "dist/index.js",
@@ -8,14 +8,15 @@
   "scripts": {
     "start": "webpack-dev-server",
     "start:linked": "WRITETODISK=1 BABEL_ENV=production webpack-dev-server --config=webpack.prod.js",
-    "start:prod": "webpack-dev-server --env=production",
-    "build": "webpack -p --env=production --config=webpack.prod.js",
-    "build:dev": "webpack -p --env=development --config=webpack.prod.js",
-    "build:staging": "webpack -p --env=staging --config=webpack.prod.js",
-    "build:local": "webpack -p",
+    "start:dev": "webpack-dev-server --env envConfig=development",
+    "start:prod": "webpack-dev-server --env envConfig=production",
+    "build": "webpack --env envConfig=production --config=webpack.prod.js",
+    "build:dev": "webpack --env envConfig=development --config=webpack.prod.js",
+    "build:staging": "webpack --env envConfig=staging --config=webpack.prod.js",
+    "build:local": "webpack",
     "prepublishOnly": "npm run build",
     "test": "jest src",
-    "test:a11y": "test-storybook",
+    "test:storybook": "test-storybook",
     "update:browserslist": "npx browserslist@latest --update-db",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
@@ -47,84 +48,86 @@
     "react-hook-form": "^7.32.2",
     "react-idle-timer": "^4.2.12",
     "react-redux": "^7.1.1",
-    "react-shadow": "^18.0.1",
+    "react-shadow": "^20.0.0",
     "react-textarea-autosize": "^8.3.2",
     "redux": "^4.0.4",
     "redux-localstorage": "^0.4.1",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0",
-    "styled-components": "^5.3.1",
+    "stream-browserify": "^3.0.0",
+    "styled-components": "^5.3.6",
     "uuid": "^9.0.0"
   },
   "peerDependencies": {
-    "pusher-js": ">=5.0.0",
+    "pusher-js": ">=8.0.0",
     "pusher-redux": ">=0.5.0",
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.19.3",
+    "@babel/core": "^7.20.12",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-transform-runtime": "^7.19.1",
-    "@babel/preset-env": "^7.19.3",
+    "@babel/plugin-transform-runtime": "^7.19.6",
+    "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
-    "@storybook/addon-a11y": "^6.5.12",
-    "@storybook/addon-actions": "^6.5.12",
-    "@storybook/addon-essentials": "^6.5.12",
-    "@storybook/addon-interactions": "^6.5.12",
-    "@storybook/addon-links": "^6.5.12",
-    "@storybook/builder-webpack4": "^6.5.12",
+    "@storybook/addon-a11y": "^6.5.16",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-interactions": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
+    "@storybook/builder-webpack5": "^6.5.16",
     "@storybook/jest": "^0.0.10",
-    "@storybook/manager-webpack4": "^6.5.12",
-    "@storybook/react": "^6.5.12",
-    "@storybook/test-runner": "^0.7.2",
+    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/react": "^6.5.16",
+    "@storybook/test-runner": "^0.8.0",
     "@storybook/testing-library": "^0.0.13",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^11.2.7",
     "@types/react": "^16.14.32",
     "@types/react-dom": "^16.9.16",
     "axe-playwright": "^1.1.11",
-    "babel-jest": "^26.6.3",
-    "babel-loader": "^8.2.5",
+    "babel-jest": "^29.4.1",
+    "babel-loader": "^9.1.2",
     "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.4",
     "chromatic": "^6.10.1",
-    "clean-webpack-plugin": "^3.0.0",
-    "compression": "1.7.4",
-    "concurrently": "^7.4.0",
+    "clean-webpack-plugin": "^4.0.0",
     "dotenv": "8.6.0",
-    "exports-loader": "^0.7.0",
-    "express": "^4.18.1",
-    "file-loader": "^4.3.0",
-    "html-loader": "0.5.5",
-    "html-webpack-plugin": "^3.2.0",
+    "express": "^4.18.2",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.5.0",
     "husky": "3.1.0",
-    "jest": "^26.6.3",
-    "jest-each": "^26.6.2",
-    "jest-junit": "^12.3.0",
-    "jest-webpack-resolver": "^0.3.0",
+    "jest": "^29.4.1",
+    "jest-each": "^29.4.1",
+    "jest-environment-jsdom": "^29.4.1",
+    "jest-junit": "^15.0.0",
     "lodash.clonedeep": "^4.5.0",
-    "pusher-js": "^5.1.1",
+    "process": "^0.11.10",
+    "pusher-js": "^8.0.1",
     "pusher-redux": "^0.5.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-svg-loader": "^3.0.3",
     "react-test-renderer": "16.14.0",
     "resolve-url-loader": "^5.0.0",
-    "storybook-addon-mock": "^2.4.1",
-    "url-loader": "2.3.0",
+    "storybook-addon-mock": "^3.2.0",
+    "url-loader": "^4.1.1",
     "wait-on": "^6.0.1",
-    "webpack": "^4.46.0",
-    "webpack-bundle-analyzer": "^3.9.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.3",
-    "webpack-merge": "^4.2.2"
+    "webpack": "^5.75.0",
+    "webpack-bundle-analyzer": "^4.7.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.1",
+    "webpack-merge": "^5.8.0"
   },
-  "jestWebpackResolver": {
-    "silent": true,
-    "webpackConfig": "./webpack.config.js"
+  "engines": {
+    "npm": ">=8.3.0"
   },
-  "gitHead": "52b4d764eed71a0fbe3f5301c7114b6be833b50f"
+  "overrides": {
+    "pusher-redux": {
+      "pusher-js": "8.0.1"
+    }
+  },
+  "gitHead": "e8e325c85808d88ebc5b01cd1ca77375c791c4c4"
 }

package/stories/.eslintrc

@@ -0,0 +1,11 @@
+{
+  "extends": ["../../../.eslintrc.js"],
+  "overrides": [
+    {
+      "files": ["**/*.stories.jsx", "**/*.stories.tsx"],
+      "rules": {
+        "react/prop-types": "off"
+      }
+    }
+  ]
+}

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

@@ -0,0 +1,406 @@
+import { expect } from '@storybook/jest';
+import { fireEvent, userEvent, within } from '@storybook/testing-library';
+import React from 'react';
+
+import { FIELDS } from '../../../src/components/Form/utils/constants';
+import KindlyChatButton from '../../../src/features/KindlyChatButton/KindlyChatButton';
+import settingsJSON from '../../assets/settingsJson';
+import withContainer from '../../decorators/withContainer';
+import withMockProvider from '../../decorators/withProvider';
+import wait from '../../utils/wait';
+
+const defaultBotSettings = {
+  welcomePage: settingsJSON.welcome_page,
+  feedbackForm: settingsJSON.feedback_form,
+  maintenanceAlert: settingsJSON.maintenance_alert,
+  ...settingsJSON.settings,
+  ...settingsJSON,
+};
+
+export default {
+  title: 'Screen/Chat/Form',
+  component: KindlyChatButton,
+  decorators: [withContainer, withMockProvider],
+  argTypes: {
+    initialStateModifierFromArgs: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+const defaultParameters = {
+  botSettings: defaultBotSettings,
+  initialStateModifier: {
+    chatbubble: {
+      active: true,
+      chatHasStarted: true,
+      currentLanguage: 'en',
+    },
+  },
+};
+
+function Template(args, context) {
+  return <KindlyChatButton {...args} {...context} />;
+}
+
+export const FormActive = Template.bind({});
+FormActive.parameters = {
+  ...defaultParameters,
+  initialStateModifier: {
+    ...defaultParameters.initialStateModifier,
+    messages: {
+      chatMessages: [
+        {
+          chat_source: 'web',
+          chat_language_code: 'en',
+          from_bot: true,
+          sender: 'BOT',
+          message: '',
+          message_format: 'txt',
+          buttons: [],
+          created: '2022-06-15T19:03:46.186495Z',
+          id: '1',
+          form: {
+            submission_id: 'submissionId',
+            id: 'formId',
+            dialogue_id: '2',
+            submit_dialogue_id: 'c0d685d3-3f11-41b8-9cfd-e35d54df2c95',
+            abandon_dialogue_id: 'b1cde0f3-0715-48eb-8482-a9355fa11ba8',
+            languageCode: 'en',
+            texts: {
+              title: 'This is a form',
+              error_text: 'There was an error around here',
+              submit_button_text: 'Submit',
+              cancel_button_text: 'Exit',
+              unanswered_text: 'You failed to answer this form',
+              cancel_text: 'You have cancelled/exited this form',
+            },
+            fields: [
+              {
+                input_type: FIELDS.TEXT,
+                order: 0,
+                slug: 'first-name-field',
+                texts: {
+                  label: 'First name',
+                  help_text: 'Please input your name here',
+                  placeholder_text: 'First name',
+                  required_text: 'This field is absolutely required',
+                },
+                required: true,
+                validators: [
+                  {
+                    max_length: 30,
+                    text: 'Maximum number of length is 30',
+                  },
+                ],
+              },
+              {
+                input_type: FIELDS.TEXT,
+                order: 1,
+                slug: 'text-field',
+                texts: {
+                  label: 'Text field',
+                  placeholder_text: 'Free text',
+                  required_text: 'This field is required',
+                },
+                required: true,
+                validators: [
+                  {
+                    min_length: 5,
+                    text: 'This field should be at least 5 characters long',
+                  },
+                  {
+                    max_length: 15,
+                  },
+                ],
+              },
+              {
+                input_type: FIELDS.EMAIL,
+                order: 2,
+                slug: 'email-field',
+                texts: {
+                  label: 'Email',
+                  placeholder_text: 'Email',
+                },
+              },
+              {
+                input_type: FIELDS.NUMBER,
+                order: 3,
+                affix: 'PREFIX',
+                slug: 'number-field',
+                texts: {
+                  label: 'Number',
+                  affix_value: 'NOK',
+                  placeholder_text: 'Number',
+                },
+                validators: [
+                  {
+                    minimum: 1,
+                  },
+                  {
+                    maximum: 12,
+                  },
+                ],
+              },
+              {
+                input_type: FIELDS.RANGE,
+                order: 4,
+                affix: 'SUFFIX',
+                slug: 'range-field',
+                attributes: {
+                  default_value: '50',
+                  step: 10,
+                },
+                texts: {
+                  label: 'Slider',
+                  affix_value: 'NOK',
+                  placeholder_text: 'Slider',
+                },
+                validators: [
+                  {
+                    minimum: 1,
+                  },
+                  {
+                    maximum: 100,
+                  },
+                ],
+              },
+              {
+                input_type: FIELDS.SELECT,
+                order: 5,
+                required: true,
+                slug: 'select-field',
+                attributes: {
+                  default_value: '5',
+                  options: [
+                    {
+                      value: '1',
+                      label: 'One',
+                    },
+                    {
+                      value: '2',
+                      label: 'Two',
+                    },
+                    {
+                      value: '3',
+                      label: 'Three',
+                    },
+                    {
+                      value: '4',
+                      label: 'Four',
+                    },
+                    {
+                      value: '5',
+                      label: 'Five',
+                    },
+                  ],
+                },
+                texts: {
+                  label: 'Select',
+                  placeholder_text: 'Please select option',
+                },
+                validators: [],
+              },
+            ],
+          },
+        },
+      ],
+    },
+  },
+};
+FormActive.play = async ({ canvasElement }) => {
+  await within(canvasElement).findByText('Please input your name here', undefined, { timeout: 5000 });
+  const textPlaceholderValue = 'Free text';
+  const textInput = await within(canvasElement).findByPlaceholderText(textPlaceholderValue);
+  await userEvent.type(textInput, 'This');
+  await expect(textInput.value).toBe('This');
+  await fireEvent(await within(canvasElement).getByRole('button', { name: /submit/i }), new MouseEvent('click'));
+  await within(canvasElement).findByText('This field is absolutely required');
+  await within(canvasElement).findByText('This field should be at least 5 characters long');
+  const textInputStyle = window.getComputedStyle(textInput);
+  expect(textInputStyle.border).not.toContain('#00000000');
+  expect(textInputStyle.border).not.toContain('transparent');
+  await userEvent.type(textInput, ' is too long');
+  await expect(textInput.value).toBe('This is too lon');
+  const emailPlaceholderValue = 'Email';
+  const emailInput = await within(canvasElement).findByPlaceholderText(emailPlaceholderValue);
+  await userEvent.type(emailInput, 'this@is@not@an@email');
+  const selectPlaceholderValue = 'Please select option';
+  const selectInput = await within(canvasElement).findByPlaceholderText(selectPlaceholderValue);
+  const selectInputStyle = window.getComputedStyle(selectInput);
+  expect(selectInputStyle.border).not.toContain('#00000000');
+  expect(selectInputStyle.border).not.toContain('transparent');
+  await userEvent.selectOptions(selectInput, '2');
+  await expect(selectInputStyle.border).toContain('rgba(0, 0, 0, 0)');
+
+  const chatBody = await within(canvasElement).findByTestId('chat-body-container');
+  await wait(300); // wait for the autoscroll to finish, so we can bottom for the Chromatic snapshot
+  fireEvent.scroll(chatBody, { target: { scrollTop: chatBody.clientHeight } });
+};
+
+export const FormWithoutTitle = Template.bind({});
+FormWithoutTitle.parameters = {
+  ...defaultParameters,
+  initialStateModifier: {
+    ...defaultParameters.initialStateModifier,
+    messages: {
+      ...FormActive.parameters.initialStateModifier.messages,
+      chatMessages: [
+        {
+          chat_source: 'web',
+          chat_language_code: 'en',
+          from_bot: true,
+          sender: 'BOT',
+          message: '',
+          message_format: 'txt',
+          buttons: [],
+          created: '2022-06-15T19:03:46.186495Z',
+          id: '1',
+          form: {
+            submission_id: 'submissionId',
+            id: 'formId',
+            dialogue_id: '2',
+            submit_dialogue_id: 'c0d685d3-3f11-41b8-9cfd-e35d54df2c95',
+            abandon_dialogue_id: 'b1cde0f3-0715-48eb-8482-a9355fa11ba8',
+            languageCode: 'en',
+            texts: {
+              title: '',
+              error_text: 'There was an error around here',
+              submit_button_text: 'Submit',
+              cancel_button_text: 'Exit',
+              unanswered_text: 'You failed to answer this form',
+              cancel_text: 'You have cancelled/exited this form',
+            },
+            fields: [
+              {
+                input_type: FIELDS.TEXT,
+                order: 0,
+                slug: 'first-name-field',
+                texts: {
+                  label: 'First name',
+                  help_text: 'Please input your name here',
+                  placeholder_text: 'First name',
+                  required_text: 'This field is absolutely required',
+                },
+                required: true,
+                validators: [
+                  {
+                    max_length: 30,
+                    text: 'Maximum number of length is 30',
+                  },
+                ],
+              },
+            ],
+          },
+        },
+      ],
+    },
+  },
+};
+
+export const FormSuccess = Template.bind({});
+FormSuccess.parameters = {
+  ...defaultParameters,
+  initialStateModifier: {
+    ...defaultParameters.initialStateModifier,
+    messages: {
+      ...FormActive.parameters.initialStateModifier.messages,
+      forms: {
+        // prettier-ignore
+        "formId_submission_submissionId": {
+          formKey: 'formId_submission_submissionId',
+          formId: 'formId',
+          formSubmitState: 'SUBMITTED',
+          formCompleteMessage: 'Should not display',
+          formValue: {
+            'should-not-display': 'Should not display',
+            'first-name-field': 'First Name',
+            'text-field': 'Text',
+            'email-field': 'email@kindly.ai',
+            'number-field': '42',
+            'range-field': '7',
+            'select-field': '2',
+          },
+        },
+      },
+    },
+  },
+};
+
+FormSuccess.play = async ({ canvasElement }) => {
+  const selectFieldLabel = await within(canvasElement).findByText('Two');
+  await expect(selectFieldLabel).toBeInTheDocument();
+  const shouldNotDisplay = await within(canvasElement).queryByText('Should not display');
+  await expect(shouldNotDisplay).not.toBeInTheDocument();
+};
+
+export const FormErrored = Template.bind({});
+FormErrored.parameters = {
+  ...defaultParameters,
+  initialStateModifier: {
+    ...defaultParameters.initialStateModifier,
+    messages: {
+      ...FormActive.parameters.initialStateModifier.messages,
+      forms: {
+        // prettier-ignore
+        "formId_submission_submissionId": {
+          formKey: 'formId_submission_submissionId',
+          formId: 'formId',
+          formSubmitState: 'ERRORED',
+          formCompleteMessage: 'Something went wrong',
+          formValue: {
+            'text-field': 'Text',
+          },
+        },
+      },
+    },
+  },
+};
+
+export const FormCanceled = Template.bind({});
+FormCanceled.parameters = {
+  ...defaultParameters,
+  initialStateModifier: {
+    ...defaultParameters.initialStateModifier,
+    messages: {
+      ...FormActive.parameters.initialStateModifier.messages,
+      forms: {
+        // prettier-ignore
+        "formId_submission_submissionId": {
+          formKey: 'formId_submission_submissionId',
+          formId: 'formId',
+          formSubmitState: 'CANCELED',
+          formCompleteMessage: 'This form was canceled',
+          formValue: {
+            'text-field': 'Text',
+          },
+        },
+      },
+    },
+  },
+};
+
+export const FormUnanswered = Template.bind({});
+FormUnanswered.parameters = {
+  ...defaultParameters,
+  initialStateModifier: {
+    ...defaultParameters.initialStateModifier,
+    messages: {
+      ...FormActive.parameters.initialStateModifier.messages,
+      forms: {
+        // prettier-ignore
+        "formId_submission_submissionId": {
+          formKey: 'formId_submission_submissionId',
+          formId: 'formId',
+          formSubmitState: 'UNANSWERED',
+          formCompleteMessage: 'This form was unanswered',
+          formValue: {
+            'text-field': 'Text',
+          },
+        },
+      },
+    },
+  },
+};