@kindly/react-chat 2.39.4 → 2.39.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kindly/react-chat",
-  "version": "2.39.4",
+  "version": "2.39.6",
   "description": "Kindly Chat react component",
   "repository": "https://github.com/kindly-ai/kindly-chat/tree/main/packages/react-chat",
   "main": "dist/index.js",
@@ -126,5 +126,5 @@
     "silent": true,
     "webpackConfig": "./webpack.config.js"
   },
-  "gitHead": "d7deb45ab7212650f94d159204e63e1d869ec161"
+  "gitHead": "904044d23976aa4fe6dd329b97e52929d3811655"
 }

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

@@ -1,12 +1,13 @@
 import { expect } from '@storybook/jest';
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable react/prop-types */
-import { fireEvent, screen, userEvent, waitFor } from '@storybook/testing-library';
+import { fireEvent, screen, userEvent } from '@storybook/testing-library';
 import React from 'react';
 import withFetchMock from 'storybook-addon-mock';
 
 import { IMAGE_WIDTH } from 'app/constants';
 
+import { chromaticViewports } from '../../.storybook/preview';
 import KindlyChatButton from '../../src/features/KindlyChatButton/KindlyChatButton';
 import settingsJSON from '../assets/settingsJson';
 import withContainer from '../decorators/withContainer';
@@ -37,8 +38,7 @@ export default {
   },
 };
 
-export const Regular = Template.bind({});
-Regular.parameters = {
+const defaultParameters = {
   botSettings: defaultBotSettings,
   initialStateModifier: {
     chatbubble: {
@@ -100,12 +100,18 @@ Regular.parameters = {
   },
 };
 
+export const Regular = Template.bind({});
+Regular.parameters = {
+  ...defaultParameters,
+  chromatic: { viewports: chromaticViewports },
+};
+
 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,
+    ...defaultParameters.initialStateModifier,
     announcement: {
       show: true,
       type,
@@ -218,9 +224,9 @@ const MESSAGES = {
 };
 MultilineBotMessage.storyName = 'Multiline Bot & User Messages';
 MultilineBotMessage.parameters = {
-  ...Regular.parameters,
+  ...defaultParameters,
   initialStateModifier: {
-    ...Regular.parameters.initialStateModifier,
+    ...defaultParameters.initialStateModifier,
     messages: {
       chatMessages: [
         {
@@ -274,16 +280,19 @@ MultilineBotMessage.play = async () => {
   await screen.findAllByText('Single-line lonely message');
   // wait for the auto-scroll to execute
   await new Promise((resolve) => {
-    setTimeout(resolve, 10);
+    setTimeout(resolve, 50);
   });
   fireEvent.scroll(chatBody, { target: { scrollTop: 0 } });
+
   const chatNewMessage = await screen.findByTestId('chat-new-message');
-  await waitFor(
-    async () => {
-      await expect(chatNewMessage).toBeVisible();
-    },
-    { timeout: 5000 },
-  );
+
+  // TODO: We used to use `waitFor`, but it seems to fail in Chromatic.
+  // Wait for the newMessage button to be visible
+  await new Promise((resolve) => {
+    setTimeout(resolve, 1400);
+  });
+
+  await expect(chatNewMessage).toBeVisible();
 };
 
 export const GroupsOfMessages = Template.bind({});
@@ -378,9 +387,9 @@ HandoverCancelled.play = async () => {
 
 export const Checkbox = Template.bind({});
 Checkbox.parameters = {
-  ...Regular.parameters,
+  ...defaultParameters,
   initialStateModifier: {
-    ...Regular.parameters.initialStateModifier,
+    ...defaultParameters.initialStateModifier,
     messages: {
       chatMessages: [
         {
@@ -426,9 +435,9 @@ Checkbox.parameters = {
 
 export const Fallback = Template.bind({});
 Fallback.parameters = {
-  ...Regular.parameters,
+  ...defaultParameters,
   initialStateModifier: {
-    ...Regular.parameters.initialStateModifier,
+    ...defaultParameters.initialStateModifier,
     messages: {
       chatMessages: [
         {
@@ -499,7 +508,7 @@ VideoEmbed.args = {
   videoSource: videoSources[0][0],
   videoSourceList: videoSources,
   initialStateModifierFromArgs: ({ videoSource, videoSourceList }) => ({
-    ...Regular.parameters.initialStateModifier,
+    ...defaultParameters.initialStateModifier,
     messages: {
       chatMessages: [
         {
@@ -554,7 +563,7 @@ ImageGallery.args = {
     hasLink,
     newTab,
   }) => ({
-    ...Regular.parameters.initialStateModifier,
+    ...defaultParameters.initialStateModifier,
     messages: {
       chatMessages: [
         {
@@ -639,9 +648,9 @@ ImageGalleryWithDescription.parameters = ImageGallery.parameters;
 
 export const Slider = Template.bind({});
 Slider.parameters = {
-  ...Regular.parameters,
+  ...defaultParameters,
   initialStateModifier: {
-    ...Regular.parameters.initialStateModifier,
+    ...defaultParameters.initialStateModifier,
     messages: {
       chatMessages: [
         {
@@ -690,9 +699,9 @@ Slider.parameters = {
 
 export const Form = Template.bind({});
 Form.parameters = {
-  ...Regular.parameters,
+  ...defaultParameters,
   initialStateModifier: {
-    ...Regular.parameters.initialStateModifier,
+    ...defaultParameters.initialStateModifier,
     messages: {
       chatMessages: [
         {
@@ -704,191 +713,70 @@ Form.parameters = {
           message_format: 'txt',
           buttons: [],
           created: '2022-06-15T19:03:46.186495Z',
-          title: '',
           id: '1',
           form: {
-            id: 'dddsauhi',
-            dialogue_id: 'ddda',
-            slug: 'ddas', // Auto generated by the backend, possibly humanly readable and unique
+            submission_id: '1',
+            id: '2',
+            dialogue_id: '2',
+            slug: 'this-is-a-form',
             submit_dialogue_id: 'c0d685d3-3f11-41b8-9cfd-e35d54df2c95',
             abandon_dialogue_id: 'b1cde0f3-0715-48eb-8482-a9355fa11ba8',
-            texts: [
-              {
-                id: 'hoho',
-                languageCode: 'en',
-                title: 'Form Title',
-                abandon_dialogue_message: 'Form exited, please ask something else',
-                unanswered_dialogue_message: 'Form unanswered',
-                cancel_button_text: 'Cancel',
-                send_button_text: 'Submit',
-              },
-            ],
+            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: [
               {
-                type: 'text',
+                input_type: 'text',
                 order: 0,
-                slug: 'gigi', // Auto generated by the backend, possibly humanly readable and unique
-                texts: [
-                  {
-                    id: 'gfd',
-                    languageCode: 'en',
-                    label: 'Name',
-                    placeholder: 'Your name',
-                    helper_text: 'Please fill in your full name here',
-                  },
-                ],
+                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: [
                   {
-                    required: true,
-                    texts: [
-                      {
-                        id: 'gruh',
-                        languageCode: 'en',
-                        message: undefined,
-                      },
-                    ],
-                  },
-                  {
-                    maxLength: 30,
-                    texts: [
-                      {
-                        id: 'duh',
-                        languageCode: 'en',
-                        message: 'Maximum number of length is 30',
-                      },
-                    ],
+                    max_length: 30,
+                    texts: 'Maximum number of length is 30',
                   },
                 ],
               },
               {
-                type: 'email',
+                input_type: 'text',
                 order: 1,
-                slug: 'bras', // Auto generated by the backend, possibly humanly readable and unique
-                texts: [
-                  {
-                    id: 'tigg',
-                    languageCode: 'en',
-                    label: 'Email',
-                    placeholder: 'Your email',
-                    helper_text: 'Please fill in your email address here so we can contact you',
-                  },
-                ],
+                slug: 'text-field',
+                texts: {
+                  label: 'Text field',
+                  placeholder_text: 'Free text',
+                  required_text: 'This field is required',
+                },
+                required: true,
                 validators: [
                   {
-                    required: true,
-                    texts: [
-                      {
-                        id: 'gigu',
-                        languageCode: 'en',
-                        message: 'This field is required',
-                      },
-                    ],
+                    min_length: 5,
+                    text: 'This field should be at least 5 characters long',
                   },
                   {
-                    pattern: /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/.toString(),
-                    texts: [
-                      {
-                        id: 'dada',
-                        languageCode: 'en',
-                        message: 'Please provide valid email',
-                      },
-                    ],
+                    max_length: 15,
                   },
                 ],
               },
               {
-                type: 'range',
+                input_type: 'email',
                 order: 2,
-                affix: 'PREFIX',
-                min: 10,
-                max: 100,
-                step: 10,
-                slug: 'yoyo', // Auto generated by the backend, possibly humanly readable and unique
-                texts: [
-                  {
-                    id: 'blabla',
-                    languageCode: 'en',
-                    label: 'Please select a value',
-                    helper_text: 'Please fill in your full name here',
-                    affix_value: '$',
-                  },
-                ],
-                validators: [],
-              },
-              {
-                type: 'checkbox', // not included in the v1
-                order: 3,
-                slug: 'dodo', // Auto generated by the backend, possibly humanly readable and unique
-                texts: [
-                  {
-                    id: 'gogo',
-                    languageCode: 'en',
-                    label: 'What animals do you like?',
-                    helper_text: '',
-                  },
-                ],
-                list: [
-                  {
-                    slug: 'hhh', // Not sure if this needs one
-                    value: 'cows',
-                    order: 0,
-                    texts: [
-                      {
-                        id: 'gras',
-                        languageCode: 'en',
-                        label: 'I like cows',
-                      },
-                    ],
-                  },
-                  {
-                    slug: 'ddsad',
-                    value: 'snakes',
-                    order: 1,
-                    texts: [
-                      {
-                        id: 'grq',
-                        languageCode: 'en',
-                        label: 'I like snakes',
-                      },
-                    ],
-                  },
-                  {
-                    slug: 'abv',
-                    value: 'foxes',
-                    order: 2,
-                    texts: [
-                      {
-                        id: 'abc',
-                        languageCode: 'en',
-                        label: 'I like foxes',
-                      },
-                    ],
-                  },
-                  {
-                    slug: '213',
-                    value: 'owls',
-                    order: 3,
-                    texts: [
-                      {
-                        id: '321',
-                        languageCode: 'en',
-                        label: 'I like owls',
-                      },
-                    ],
-                  },
-                ],
-                validators: [
-                  {
-                    required: true,
-                    texts: [
-                      {
-                        id: '432',
-                        languageCode: 'en',
-                        message: 'This field is required',
-                      },
-                    ],
-                  },
-                ],
+                slug: 'email-field',
+                texts: {
+                  label: 'Email',
+                  placeholder_text: 'Email',
+                },
               },
             ],
           },
@@ -897,12 +785,30 @@ Form.parameters = {
     },
   },
 };
+Form.play = async () => {
+  await screen.findByText('Please input your name here');
+  const textPlaceholderValue = 'Free text';
+  const textInput = await screen.findByPlaceholderText(textPlaceholderValue);
+  await userEvent.type(textInput, 'This');
+  await expect(textInput.value).toBe('This');
+  await fireEvent(await screen.getByRole('button', { name: /submit/i }), new MouseEvent('click'));
+  await screen.findByText('This field is absolutely required');
+  await screen.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 screen.findByPlaceholderText(emailPlaceholderValue);
+  await userEvent.type(emailInput, 'this@is@not@an@email');
+};
 
 export const LeaveContactDetails = Template.bind({});
 LeaveContactDetails.parameters = {
-  ...Regular.parameters,
+  ...defaultParameters,
   initialStateModifier: {
-    ...Regular.parameters.initialStateModifier,
+    ...defaultParameters.initialStateModifier,
     messages: {
       chatMessages: [
         {

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

@@ -2,6 +2,7 @@
 import React from 'react';
 import withMock from 'storybook-addon-mock';
 
+import { chromaticViewports } from '../../.storybook/preview';
 import KindlyChat from '../../src/KindlyChat';
 import settings from '../assets/settingsJson';
 
@@ -39,7 +40,10 @@ export default {
 };
 
 export const Regular = Template.bind({});
-Regular.parameters = mockSettings();
+Regular.parameters = {
+  ...mockSettings(),
+  chromatic: { viewports: chromaticViewports },
+};
 
 export const Christmas = Template.bind({});
 Christmas.parameters = mockSettings({

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

@@ -5,6 +5,7 @@ import withFetchMock from 'storybook-addon-mock';
 
 import { feedbackFormTypes } from 'app/constants';
 
+import { chromaticViewports } from '../../.storybook/preview';
 import KindlyChatButton from '../../src/features/KindlyChatButton/KindlyChatButton';
 import settingsJSON from '../assets/settingsJson';
 import withContainer from '../decorators/withContainer';
@@ -46,6 +47,7 @@ Emojis.parameters = {
       feedbackFormOpen: true,
     },
   },
+  chromatic: { viewports: chromaticViewports },
 };
 
 export const Binary = Template.bind({});

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

@@ -2,6 +2,7 @@
 import React from 'react';
 import withMock from 'storybook-addon-mock';
 
+import { chromaticViewports } from '../../.storybook/preview';
 import KindlyChat from '../../src/KindlyChat';
 import settings from '../assets/settingsJson';
 
@@ -40,7 +41,7 @@ export default {
 };
 
 export const Product = Template.bind({});
-Product.parameters = mockSettings();
+Product.parameters = { ...mockSettings(), chromatic: { viewports: chromaticViewports } };
 Product.args = {
   slug: settings.nudges.product_nudges[0].slug,
 };

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

@@ -4,6 +4,7 @@ import { screen, userEvent } from '@storybook/testing-library';
 import React from 'react';
 import withFetchMock from 'storybook-addon-mock';
 
+import { chromaticViewports } from '../../.storybook/preview';
 import KindlyChatButton from '../../src/features/KindlyChatButton/KindlyChatButton';
 import settingsJSON from '../assets/settingsJson';
 import withContainer from '../decorators/withContainer';
@@ -27,8 +28,7 @@ export default {
   decorators: [withFetchMock, withContainer, withMockProvider],
 };
 
-export const Regular = Template.bind({});
-Regular.parameters = {
+const defaultParameters = {
   botSettings: defaultBotSettings,
   initialStateModifier: {
     chatbubble: {
@@ -40,6 +40,12 @@ Regular.parameters = {
   },
 };
 
+export const Regular = Template.bind({});
+Regular.parameters = {
+  ...defaultParameters,
+  chromatic: { viewports: chromaticViewports },
+};
+
 export const WithLanguageChoice = Template.bind({});
 WithLanguageChoice.parameters = {
   botSettings: {
@@ -179,7 +185,7 @@ LanguageChoiceConfirm.play = async () => {
 };
 
 export const DeleteConfirmation = Template.bind({});
-DeleteConfirmation.parameters = Regular.parameters;
+DeleteConfirmation.parameters = defaultParameters;
 DeleteConfirmation.play = async () => {
   const deleteButton = await screen.findByText(defaultBotSettings.text.delete_button.en);
   await userEvent.click(deleteButton);
@@ -187,9 +193,9 @@ DeleteConfirmation.play = async () => {
 
 export const DeleteSuccess = Template.bind({});
 DeleteSuccess.parameters = {
-  ...Regular.parameters,
+  ...defaultParameters,
   initialStateModifier: {
-    ...Regular.parameters.initialStateModifier,
+    ...defaultParameters.initialStateModifier,
     privacy: {
       chatDeleted: true,
     },
@@ -197,7 +203,7 @@ DeleteSuccess.parameters = {
 };
 
 export const DownloadChat = Template.bind({});
-DownloadChat.parameters = Regular.parameters;
+DownloadChat.parameters = defaultParameters;
 DownloadChat.play = async () => {
   const downloadButton = await screen.findByText(defaultBotSettings.text.download_button.en);
   await userEvent.click(downloadButton);
@@ -205,7 +211,7 @@ DownloadChat.play = async () => {
 
 export const QuitChat = Template.bind({});
 QuitChat.parameters = {
-  ...Regular.parameters,
+  ...defaultParameters,
   initialStateModifier: {
     chatbubble: {
       active: true,

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

@@ -3,6 +3,7 @@
 import React from 'react';
 import withFetchMock from 'storybook-addon-mock';
 
+import { chromaticViewports } from '../../.storybook/preview';
 import KindlyChatButton from '../../src/features/KindlyChatButton/KindlyChatButton';
 import settingsJSON from '../assets/settingsJson';
 import withContainer from '../decorators/withContainer';
@@ -39,6 +40,7 @@ Default.parameters = {
       text: 'This is a push greeting',
     },
   },
+  chromatic: { viewports: chromaticViewports },
 };
 
 export const NewMessage = Template.bind({});

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

@@ -2,6 +2,7 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 
+import { chromaticViewports } from '../../.storybook/preview';
 import KindlyChatButton from '../../src/features/KindlyChatButton/KindlyChatButton';
 import settingsJSON from '../assets/settingsJson';
 import withContainer from '../decorators/withContainer';
@@ -34,6 +35,7 @@ export default {
 };
 
 export const Regular = Template.bind({});
+Regular.parameters = { chromatic: { viewports: chromaticViewports } };
 
 export const WithLanguageChoice = Template.bind({});
 WithLanguageChoice.parameters = {