@kindly/react-chat 2.41.5 → 2.42.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kindly/react-chat",
-  "version": "2.41.5",
+  "version": "2.42.0",
   "description": "Kindly Chat react component",
   "repository": "https://github.com/kindly-ai/kindly-chat/tree/main/packages/react-chat",
   "main": "dist/index.js",
@@ -64,7 +64,7 @@
     "react-dom": ">=16.9.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.0",
+    "@babel/core": "^7.21.3",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-transform-runtime": "^7.21.0",
     "@babel/preset-env": "^7.20.2",
@@ -85,7 +85,7 @@
     "@types/react": "^16.14.35",
     "@types/react-dom": "^16.9.18",
     "axe-playwright": "^1.2.3",
-    "babel-jest": "^29.4.3",
+    "babel-jest": "^29.5.0",
     "babel-loader": "^9.1.2",
     "babel-plugin-styled-components": "^1.13.3",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
@@ -98,11 +98,12 @@
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.0",
     "husky": "3.1.0",
-    "jest": "^29.4.3",
-    "jest-each": "^29.4.3",
-    "jest-environment-jsdom": "^29.4.3",
+    "jest": "^29.5.0",
+    "jest-each": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
     "jest-junit": "^15.0.0",
     "lodash.clonedeep": "^4.5.0",
+    "lodash.set": "^4.3.2",
     "process": "^0.11.10",
     "pusher-js": "^8.0.1",
     "pusher-redux": "^0.5.0",
@@ -114,10 +115,10 @@
     "storybook-addon-mock": "^3.2.0",
     "url-loader": "^4.1.1",
     "wait-on": "^6.0.1",
-    "webpack": "^5.75.0",
+    "webpack": "^5.76.1",
     "webpack-bundle-analyzer": "^4.8.0",
     "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.11.1",
+    "webpack-dev-server": "^4.12.0",
     "webpack-merge": "^5.8.0"
   },
   "engines": {
@@ -128,5 +129,5 @@
       "pusher-js": "8.0.1"
     }
   },
-  "gitHead": "05968afdf3bf67d1ba109d2f41011eabc53629e5"
+  "gitHead": "4b8f2bf59a0cce3540ea8262de8b7393e367239c"
 }

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

@@ -400,6 +400,102 @@ FormActive2.play = async ({ canvasElement }) => {
   fireEvent.scroll(chatBody, { target: { scrollTop: chatBody.clientHeight } });
 };
 
+export const FormActive3 = Template.bind({});
+FormActive3.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.RADIO,
+                order: 1,
+                required: true,
+                slug: 'radui-icecream-option',
+                attributes: {
+                  options: [
+                    {
+                      value: 'chocolate',
+                      label: 'Chocolate',
+                    },
+                    {
+                      value: 'vanilla',
+                      label: 'Vanilla',
+                    },
+                  ],
+                },
+                texts: {
+                  label: 'Please select an icecream flavour.',
+                },
+                validators: [],
+              },
+              {
+                input_type: FIELDS.RADIO,
+                order: 2,
+                required: true,
+                slug: 'radui-payment-method',
+                attributes: {
+                  options: [
+                    {
+                      value: 'paypal',
+                      label: 'Paypal',
+                    },
+                    {
+                      value: 'Debit',
+                      label: 'Debit',
+                    },
+                  ],
+                },
+                texts: {
+                  label: 'Please select a way to pay.',
+                },
+                validators: [],
+              },
+            ],
+          },
+        },
+      ],
+    },
+  },
+};
+FormActive3.play = async ({ canvasElement }) => {
+  await within(canvasElement).findByText('Submit', undefined, { timeout: 5000 });
+  await fireEvent(await within(canvasElement).getByRole('button', { name: /submit/i }), new MouseEvent('click'));
+
+  const checkboxTerms = await within(canvasElement).findByLabelText('Debit');
+  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 } });
+};
+
 export const FormWithoutTitle = Template.bind({});
 FormWithoutTitle.parameters = {
   ...defaultParameters,

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

@@ -178,6 +178,24 @@ Maintenance.parameters = {
   },
 };
 
+export const Announcement = Template.bind({});
+Announcement.parameters = {
+  botSettings: defaultBotSettings,
+  initialStateModifier: {
+    chatbubble: {
+      active: true,
+      chatHasStarted: true,
+      currentLanguage: 'en',
+    },
+    announcement: {
+      show: true,
+      text: 'Maintenance mode!',
+      url: 'https://example.com',
+      type: 'WARNING',
+    },
+  },
+};
+
 export const HiddenInput = Template.bind({});
 HiddenInput.parameters = {
   botSettings: defaultBotSettings,
@@ -327,7 +345,7 @@ NewUnreadMessages.play = async ({ canvasElement }) => {
       { timeout: 5000 },
     );
     mockMessage(window.store, 'This is a new message');
-    await wait(50);
+    await wait(200);
     await expect(chatNewMessage).toHaveTextContent('This is a new message');
   }
 };