@kindly/react-chat 2.41.4 → 2.41.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kindly/react-chat",
-  "version": "2.41.4",
+  "version": "2.41.5",
   "description": "Kindly Chat react component",
   "repository": "https://github.com/kindly-ai/kindly-chat/tree/main/packages/react-chat",
   "main": "dist/index.js",
@@ -33,7 +33,6 @@
     "@babel/runtime-corejs3": "^7.15.4",
     "axios": "^0.21.1",
     "classnames": "^2.2.6",
-    "date-fns": "^2.16.1",
     "dompurify": "^2.0.7",
     "file-saver": "2.0.2",
     "framer-motion": "^1.11.1",
@@ -45,7 +44,7 @@
     "polished": "^3.4.3",
     "prop-types": "^15.7.2",
     "react-children-utilities": "^2.8.0",
-    "react-hook-form": "^7.32.2",
+    "react-hook-form": "^7.43.1",
     "react-idle-timer": "^4.2.12",
     "react-redux": "^7.1.1",
     "react-shadow": "^20.0.0",
@@ -65,9 +64,9 @@
     "react-dom": ">=16.9.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.12",
+    "@babel/core": "^7.21.0",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-transform-runtime": "^7.19.6",
+    "@babel/plugin-transform-runtime": "^7.21.0",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@storybook/addon-a11y": "^6.5.16",
@@ -79,29 +78,29 @@
     "@storybook/jest": "^0.0.10",
     "@storybook/manager-webpack5": "^6.5.16",
     "@storybook/react": "^6.5.16",
-    "@storybook/test-runner": "^0.8.0",
+    "@storybook/test-runner": "^0.9.4",
     "@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": "^29.4.1",
+    "@types/react": "^16.14.35",
+    "@types/react-dom": "^16.9.18",
+    "axe-playwright": "^1.2.3",
+    "babel-jest": "^29.4.3",
     "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",
+    "browserslist": "^4.21.5",
+    "chromatic": "^6.17.1",
     "clean-webpack-plugin": "^4.0.0",
     "dotenv": "8.6.0",
     "express": "^4.18.2",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.0",
     "husky": "3.1.0",
-    "jest": "^29.4.1",
-    "jest-each": "^29.4.1",
-    "jest-environment-jsdom": "^29.4.1",
+    "jest": "^29.4.3",
+    "jest-each": "^29.4.3",
+    "jest-environment-jsdom": "^29.4.3",
     "jest-junit": "^15.0.0",
     "lodash.clonedeep": "^4.5.0",
     "process": "^0.11.10",
@@ -116,7 +115,7 @@
     "url-loader": "^4.1.1",
     "wait-on": "^6.0.1",
     "webpack": "^5.75.0",
-    "webpack-bundle-analyzer": "^4.7.0",
+    "webpack-bundle-analyzer": "^4.8.0",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1",
     "webpack-merge": "^5.8.0"
@@ -129,5 +128,5 @@
       "pusher-js": "8.0.1"
     }
   },
-  "gitHead": "2902badc395a6dfd28ea96d126b2681e5b961b33"
+  "gitHead": "05968afdf3bf67d1ba109d2f41011eabc53629e5"
 }

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

@@ -0,0 +1,136 @@
+import cloneDeep from 'lodash.clonedeep';
+import set from 'lodash.set';
+import React from 'react';
+
+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/Chat/DateTime',
+  component: KindlyChatButton,
+  decorators: [withContainer, withMockProvider],
+  argTypes: {
+    initialStateModifierFromArgs: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+const todayTime = new Date();
+todayTime.setHours(13);
+todayTime.setMinutes(37);
+const created = todayTime.toISOString();
+
+const defaultParameters = {
+  botSettings: defaultBotSettings,
+  initialStateModifier: {
+    chatbubble: {
+      active: true,
+      chatHasStarted: true,
+      currentLanguage: 'en',
+    },
+    messages: {
+      chatMessages: [
+        {
+          session_id: '1',
+          bot_id: 1234,
+          chat_id: '1',
+          chat_source: 'web',
+          chat_language_code: 'en',
+          from_bot: true,
+          sender: 'BOT',
+          message: 'Why did the calendar get in trouble at work?',
+          message_format: 'txt',
+          exchange_type: 'greeting',
+          exchange_id: '1',
+          reply_type: 'STANDARD',
+          created,
+          id: '1',
+        },
+        {
+          id: '2',
+          created,
+          message: 'Because it took a day off!',
+          status: null,
+        },
+      ],
+      messageSentTime: '2020-12-01T12:00:00.000Z',
+      lastMessageSeen: {
+        id: '2',
+        index: 2,
+      },
+    },
+  },
+};
+
+export const WithTime = Template.bind({});
+WithTime.parameters = {
+  ...defaultParameters,
+};
+WithTime.args = {
+  language: 'en',
+  initialStateModifierFromArgs: ({ language }) => {
+    const withTimeStateModifier = cloneDeep(defaultParameters.initialStateModifier);
+    return set(withTimeStateModifier, 'chatbubble.currentLanguage', language);
+  },
+};
+WithTime.argTypes = {
+  language: { options: ['en', 'nb', 'en-GB', 'en-US', 'sv', 'fi', 'en-CA', 'nn'], control: { type: 'select' } },
+};
+WithTime.parameters = {
+  ...defaultParameters,
+};
+
+export const WithNorwegianTime = Template.bind({});
+const withNorwegianTimeParameters = cloneDeep(defaultParameters);
+set(withNorwegianTimeParameters, 'initialStateModifier.chatbubble.currentLanguage', 'nb');
+
+WithNorwegianTime.parameters = {
+  ...withNorwegianTimeParameters,
+};
+
+export const WithDate = Template.bind({});
+const withDateParameters = cloneDeep(defaultParameters);
+set(withDateParameters, 'initialStateModifier.messages.chatMessages[0].created', '2020-12-01T12:00:00.000Z');
+set(withDateParameters, 'initialStateModifier.messages.chatMessages[1].created', '2020-12-01T12:00:00.000Z');
+
+WithDate.parameters = {
+  ...withDateParameters,
+};
+WithDate.args = {
+  language: 'en',
+  initialStateModifierFromArgs: ({ language }) => {
+    const withDateStateModifier = cloneDeep(withDateParameters.initialStateModifier);
+    return set(withDateStateModifier, 'chatbubble.currentLanguage', language);
+  },
+};
+WithDate.argTypes = {
+  language: { options: ['en', 'nb', 'en-GB', 'en-US', 'sv', 'fi', 'en-CA', 'nn'], control: { type: 'select' } },
+};
+WithDate.parameters = {
+  ...defaultParameters,
+};
+
+export const WithNorwegianDate = Template.bind({});
+const withNorwegianDateParameters = cloneDeep(withDateParameters);
+set(withNorwegianDateParameters, 'initialStateModifier.chatbubble.currentLanguage', 'nb');
+
+WithNorwegianDate.parameters = {
+  ...withNorwegianDateParameters,
+};

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

@@ -78,15 +78,77 @@ FormActive.parameters = {
               cancel_text: 'You have cancelled/exited this form',
             },
             fields: [
+              {
+                input_type: FIELDS.CHECKBOX,
+                order: 1,
+                required: true,
+                slug: 'checkbox-field',
+                attributes: {
+                  options: [
+                    {
+                      value: 'volvo',
+                      label: 'Volvo',
+                    },
+                    {
+                      value: 'mercedes',
+                      label: 'Mercedes',
+                    },
+                    {
+                      value: 'audi',
+                      label: 'Audi',
+                    },
+                  ],
+                },
+                texts: {
+                  label: 'Checkbox',
+                },
+                validators: [],
+              },
+              {
+                input_type: FIELDS.SELECT,
+                order: 2,
+                required: true,
+                slug: 'select-field',
+                attributes: {
+                  default_value: '2',
+                  options: [
+                    {
+                      value: '1',
+                      label: 'One',
+                    },
+                    {
+                      value: '2',
+                      label: 'Two',
+                    },
+                    {
+                      value: '3',
+                      label: 'Three',
+                    },
+                    {
+                      value: '4',
+                      label: 'Four',
+                    },
+                    {
+                      value: 'Very long message',
+                      label: 'Very long message, this is a very long message',
+                    },
+                  ],
+                },
+                texts: {
+                  label: 'Select',
+                  placeholder_text: 'Please select option',
+                },
+                validators: [],
+              },
               {
                 input_type: FIELDS.TEXT,
-                order: 0,
+                order: 3,
                 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_text: 'This field is absolutely required',
                 },
                 required: true,
                 validators: [
@@ -98,7 +160,7 @@ FormActive.parameters = {
               },
               {
                 input_type: FIELDS.TEXT,
-                order: 1,
+                order: 4,
                 slug: 'text-field',
                 texts: {
                   label: 'Text field',
@@ -118,7 +180,7 @@ FormActive.parameters = {
               },
               {
                 input_type: FIELDS.EMAIL,
-                order: 2,
+                order: 5,
                 slug: 'email-field',
                 texts: {
                   label: 'Email',
@@ -127,7 +189,7 @@ FormActive.parameters = {
               },
               {
                 input_type: FIELDS.NUMBER,
-                order: 3,
+                order: 6,
                 affix: 'PREFIX',
                 slug: 'number-field',
                 texts: {
@@ -146,7 +208,7 @@ FormActive.parameters = {
               },
               {
                 input_type: FIELDS.RANGE,
-                order: 4,
+                order: 7,
                 affix: 'SUFFIX',
                 slug: 'range-field',
                 attributes: {
@@ -167,13 +229,76 @@ FormActive.parameters = {
                   },
                 ],
               },
+            ],
+          },
+        },
+      ],
+    },
+  },
+};
+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 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 FormActive2 = Template.bind({});
+FormActive2.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.SELECT,
                 order: 5,
                 required: true,
                 slug: 'select-field',
                 attributes: {
-                  default_value: '5',
+                  default_value: '2',
                   options: [
                     {
                       value: '1',
@@ -203,6 +328,51 @@ FormActive.parameters = {
                 },
                 validators: [],
               },
+              {
+                input_type: FIELDS.CHECKBOX,
+                order: 6,
+                required: true,
+                slug: 'checkbox-cars',
+                attributes: {
+                  options: [
+                    {
+                      value: 'volvo',
+                      label: 'Volvo',
+                    },
+                    {
+                      value: 'mercedes',
+                      label: 'Mercedes',
+                    },
+                    {
+                      value: 'Very long text',
+                      label:
+                        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+                    },
+                  ],
+                },
+                texts: {
+                  label: 'Checkbox',
+                },
+                validators: [],
+              },
+              {
+                input_type: FIELDS.CHECKBOX,
+                order: 6,
+                required: true,
+                slug: 'checkbox-terms',
+                attributes: {
+                  options: [
+                    {
+                      value: 'terms',
+                      label: 'Terms and conditions',
+                    },
+                  ],
+                },
+                texts: {
+                  label: 'Accept our terms to continue',
+                },
+                validators: [],
+              },
             ],
           },
         },
@@ -210,23 +380,10 @@ FormActive.parameters = {
     },
   },
 };
-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');
+FormActive2.play = async ({ canvasElement }) => {
+  await within(canvasElement).findByText('Submit', undefined, { timeout: 5000 });
   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);
@@ -235,6 +392,9 @@ FormActive.play = async ({ canvasElement }) => {
   await userEvent.selectOptions(selectInput, 'Very long message');
   await expect(selectInputStyle.border).toContain('rgba(0, 0, 0, 0)');
 
+  const checkboxTerms = await within(canvasElement).findByLabelText('Terms and conditions');
+  await userEvent.click(checkboxTerms);
+
   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 } });
@@ -282,7 +442,6 @@ FormWithoutTitle.parameters = {
                   label: 'First name',
                   help_text: 'Please input your name here',
                   placeholder_text: 'First name',
-                  required_text: 'This field is absolutely required',
                 },
                 required: true,
                 validators: [
@@ -322,6 +481,7 @@ FormSuccess.parameters = {
             'number-field': '42',
             'range-field': '7',
             'select-field': '2',
+            'checkbox-field': 'audi'
           },
         },
       },
@@ -332,6 +492,8 @@ FormSuccess.parameters = {
 FormSuccess.play = async ({ canvasElement }) => {
   const selectFieldLabel = await within(canvasElement).findByText('Two');
   await expect(selectFieldLabel).toBeInTheDocument();
+  const checkboxFieldLabel = await within(canvasElement).findByText('Audi');
+  await expect(checkboxFieldLabel).toBeInTheDocument();
   const shouldNotDisplay = await within(canvasElement).queryByText('Should not display');
   await expect(shouldNotDisplay).not.toBeInTheDocument();
 };