@kindly/react-chat 2.35.3 → 2.37.0

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

@@ -0,0 +1,853 @@
+/* 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';
+
+import { IMAGE_SIZE } from 'app/constants';
+
+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,
+};
+
+const Template = (args, context) => {
+  return <KindlyChatButton {...args} {...context} />;
+};
+
+export default {
+  title: 'Screen/Chat',
+  component: KindlyChatButton,
+  decorators: [withFetchMock, withContainer, withMockProvider],
+  argTypes: {
+    initialStateModifierFromArgs: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export const Regular = Template.bind({});
+Regular.parameters = {
+  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:
+            "Hi! I'm Kindly's Chatbot. I can answer questions about Kindly and our services. How can I help you? 🙂\n<br>\n<br>Feel free to ask me a short and concise question!",
+          message_format: 'txt',
+          exchange_type: 'greeting',
+          exchange_id: '1',
+          reply_type: 'STANDARD',
+          created: '2022-06-09T18:46:51.672Z',
+          id: '1',
+        },
+        {
+          id: '2',
+          created: '2022-06-09T18:47:03.919Z',
+          message: 'What is the meaning of life?',
+          status: null,
+        },
+        {
+          session_id: '6061c1d4-54da-4886-85a2-7f555c9cd42c',
+          bot_id: 3875,
+          chat_id: '1',
+          chat_source: 'web',
+          chat_language_code: 'en',
+          from_bot: true,
+          sender: 'BOT',
+          reply_to_id: '2',
+          last_user_message_id: '2',
+          message:
+            'Well... I don\'t have a conclusive answer for what the meaning of life is, but here are some suggestions:\n<ul style="padding-left:12px;">\n<li>To live a good life\n<li>To spread love\n<li>42\n</ul>',
+          message_format: 'txt',
+          exchange_type: 'usersays',
+          exchange_id: '3',
+          title: 'The meaning of life',
+          created: '2022-06-09T18:47:04.009Z',
+          id: '3',
+        },
+      ],
+      messageSentTime: '2022-06-09T18:47:03.697Z',
+      lastMessageSeen: {
+        id: '3',
+        index: 3,
+      },
+    },
+  },
+};
+
+export const BotIsTyping = Template.bind({});
+BotIsTyping.parameters = {
+  botSettings: defaultBotSettings,
+  initialStateModifier: {
+    chatbubble: {
+      active: true,
+      chatHasStarted: true,
+      currentLanguage: 'en',
+    },
+    messages: {
+      chatMessages: [
+        {
+          id: '2',
+          created: '2022-06-09T18:47:03.919Z',
+          message: 'What is the meaning of life?',
+          status: null,
+        },
+      ],
+    },
+    bot: {
+      isTyping: true,
+    },
+  },
+};
+
+export const Maintenance = Template.bind({});
+Maintenance.parameters = {
+  botSettings: defaultBotSettings,
+  initialStateModifier: {
+    chatbubble: {
+      active: true,
+      chatHasStarted: true,
+      currentLanguage: 'en',
+    },
+    maintenanceAlert: {
+      show: true,
+      textContent: 'Maintenance mode!',
+      linkText: 'Click here to know more',
+      linkLocation: 'https://example.com',
+    },
+  },
+};
+
+export const HiddenInput = Template.bind({});
+HiddenInput.parameters = {
+  botSettings: defaultBotSettings,
+  initialStateModifier: {
+    chatbubble: {
+      active: true,
+      chatHasStarted: true,
+      currentLanguage: 'en',
+      hideInputField: true,
+    },
+    messages: {
+      chatMessages: [
+        {
+          id: '1',
+          chat_source: 'web',
+          chat_language_code: 'en',
+          from_bot: true,
+          sender: 'BOT',
+          message: 'Here is a button',
+          message_format: 'txt',
+          buttons: [
+            {
+              id: '1',
+              button_type: 'quick_reply',
+              language_code: 'en',
+              label: 'Click here to continue',
+              value: 'clicked',
+              index: 0,
+              created_at: '2022-06-11T20:14:06.290705Z',
+              updated_at: '2022-06-11T20:14:06.291003Z',
+              is_active: true,
+            },
+          ],
+          created: '2022-06-11T20:14:06.290705Z',
+          title: 'noinput',
+          chatbubble_hide_input_field: true,
+        },
+      ],
+    },
+  },
+};
+
+export const MultilineBotMessage = Template.bind({});
+const MESSAGES = {
+  single: 'Single-line lonely message',
+  double: "Double-line message \n\n vibin'",
+  multi: 'This is a \n\n three-multiline \n\n bot message',
+};
+MultilineBotMessage.storyName = 'Multiline Bot & User Messages';
+MultilineBotMessage.parameters = {
+  ...Regular.parameters,
+  initialStateModifier: {
+    ...Regular.parameters.initialStateModifier,
+    messages: {
+      chatMessages: [
+        {
+          from_bot: true,
+          sender: 'BOT',
+          message: MESSAGES.single,
+          created: '2022-06-09T18:46:51.672Z',
+          id: '1',
+        },
+        {
+          from_bot: true,
+          sender: 'BOT',
+          message: MESSAGES.double,
+          created: '2022-06-09T18:47:51.672Z',
+          id: '2',
+        },
+        {
+          from_bot: true,
+          sender: 'BOT',
+          message: MESSAGES.multi,
+          created: '2022-06-09T18:48:51.672Z',
+          id: '3',
+        },
+        {
+          from_bot: false,
+          sender: 'USER',
+          message: MESSAGES.single,
+          created: '2022-06-09T18:46:51.672Z',
+          id: '1',
+        },
+        {
+          from_bot: false,
+          sender: 'USER',
+          message: MESSAGES.double,
+          created: '2022-06-09T18:47:51.672Z',
+          id: '2',
+        },
+        {
+          from_bot: false,
+          sender: 'USER',
+          message: MESSAGES.multi,
+          created: '2022-06-09T18:48:51.672Z',
+          id: '3',
+        },
+      ],
+    },
+  },
+};
+
+export const GroupsOfMessages = Template.bind({});
+GroupsOfMessages.parameters = {
+  botSettings: defaultBotSettings,
+  initialStateModifier: {
+    chatbubble: {
+      active: true,
+      chatHasStarted: true,
+      currentLanguage: 'en',
+    },
+    messages: {
+      chatMessages: [
+        {
+          id: '1',
+          created: '2022-06-09T18:47:03.919Z',
+          message: 'Hipp',
+          status: null,
+        },
+        {
+          id: '2',
+          created: '2022-06-09T18:47:03.919Z',
+          message: 'Hipp',
+          status: null,
+        },
+        {
+          id: '3',
+          created: '2022-06-09T18:47:03.919Z',
+          message: 'Hurra!',
+          status: null,
+        },
+        {
+          id: '4',
+          from_bot: true,
+          sender: 'BOT',
+          message: 'Hipp',
+          created: '2022-06-09T18:47:04.009Z',
+        },
+        {
+          id: '5',
+          from_bot: true,
+          sender: 'BOT',
+          message: 'Hipp',
+          created: '2022-06-09T18:47:04.009Z',
+        },
+        {
+          id: '6',
+          from_bot: true,
+          sender: 'BOT',
+          message: 'Hurra!',
+          created: '2022-06-09T18:47:04.009Z',
+        },
+      ],
+    },
+  },
+};
+
+export const HandoverRequested = Template.bind({});
+HandoverRequested.parameters = {
+  botSettings: defaultBotSettings,
+  initialStateModifier: {
+    chatbubble: {
+      active: true,
+      chatHasStarted: true,
+      currentLanguage: 'en',
+    },
+    agent: {
+      requestedTakeover: true,
+      takeoverClosed: false,
+    },
+    messages: {
+      chatMessages: [
+        {
+          id: '1',
+          created: '2022-06-09T18:47:03.919Z',
+          message: 'Could I please talk with a human person?',
+          status: null,
+        },
+      ],
+    },
+  },
+};
+
+export const HandoverCancelled = Template.bind({});
+HandoverCancelled.parameters = HandoverRequested.parameters;
+HandoverCancelled.play = async () => {
+  expect(await screen.findByText(defaultBotSettings.text.takeover_queue_text.en)).toBeInTheDocument();
+  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();
+};
+
+export const Checkbox = Template.bind({});
+Checkbox.parameters = {
+  ...Regular.parameters,
+  initialStateModifier: {
+    ...Regular.parameters.initialStateModifier,
+    messages: {
+      chatMessages: [
+        {
+          chat_language_code: 'en',
+          from_bot: true,
+          sender: 'BOT',
+          message: 'Check out those checkboxes!',
+          message_format: 'txt',
+          buttons: [
+            {
+              id: '1',
+              button_type: 'checkbox',
+              language_code: 'en',
+              label: 'Checkbox label',
+              value: 'Checkbox value',
+              index: 0,
+              is_active: true,
+            },
+            {
+              id: '2',
+              button_type: 'checkbox',
+              language_code: 'en',
+              label: 'Checkbox label 2',
+              value: 'Checkbox value 2',
+              index: 1,
+              is_active: true,
+            },
+            {
+              id: '3',
+              button_type: 'submit',
+              language_code: 'en',
+              label: 'Submit',
+              index: 2,
+              is_active: true,
+            },
+          ],
+          created: '2022-06-11T16:13:00.143Z',
+        },
+      ],
+    },
+  },
+};
+
+const videoSources = [
+  ['YouTube', 'https://www.youtube.com/watch?v=vvg5AfQEmUc'],
+  ['Vimeo', 'https://vimeo.com/148751763'],
+  ['Self hosted', 'https://www.crockpot.se/wp-content/uploads/2019/02/Comp-1-1.mp4'],
+];
+export const VideoEmbed = Template.bind({});
+VideoEmbed.args = {
+  videoSource: videoSources[0][0],
+  videoSourceList: videoSources,
+  initialStateModifierFromArgs: ({ videoSource, videoSourceList }) => ({
+    ...Regular.parameters.initialStateModifier,
+    messages: {
+      chatMessages: [
+        {
+          id: '1',
+          chat_language_code: 'en',
+          from_bot: true,
+          sender: 'BOT',
+          message: 'Here is Video embed',
+          message_format: 'txt',
+          video_source: videoSourceList.find((videoSourceMap) => videoSourceMap[0] === videoSource)[1],
+          title: 'embed',
+          created: '2022-06-11T16:22:15.425Z',
+        },
+      ],
+    },
+  }),
+};
+VideoEmbed.argTypes = {
+  videoSource: {
+    options: videoSources.map((videoSource) => videoSource[0]),
+    control: { type: 'select' },
+  },
+  videoSourceList: {
+    table: {
+      disable: true,
+    },
+  },
+};
+VideoEmbed.parameters = {
+  botSettings: defaultBotSettings,
+};
+
+export const ImageGallery = Template.bind({});
+const textSizes = [
+  undefined,
+  'Lorem ipsum dolor sit amet.',
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+];
+ImageGallery.args = {
+  imageCarouselSize: 1000,
+  titleSize: 0,
+  descriptionSize: 0,
+  hasLink: false,
+  newTab: false,
+  initialStateModifierFromArgs: ({ imageCarouselSize, titleSize, descriptionSize, hasLink, newTab }) => ({
+    ...Regular.parameters.initialStateModifier,
+    messages: {
+      chatMessages: [
+        {
+          id: '1',
+          chat_source: 'web',
+          chat_language_code: 'en',
+          from_bot: true,
+          sender: 'BOT',
+          message: 'Here is an image gallery',
+          message_format: 'txt',
+          image_carousel: [
+            {
+              id: '1',
+              imageUrl: 'https://i.imgur.com/Iz1nJrw.jpg',
+              title: textSizes[titleSize],
+              description: textSizes[descriptionSize],
+              linkUrl: hasLink ? 'https://example.com' : undefined,
+              altText: textSizes[titleSize],
+              newTab,
+            },
+            {
+              id: '2',
+              imageUrl: 'https://i.imgur.com/H49sTpN.jpg',
+              title: textSizes[titleSize],
+              description: textSizes[descriptionSize],
+              linkUrl: hasLink ? 'https://example.com' : undefined,
+              altText: textSizes[titleSize],
+              newTab,
+            },
+            {
+              id: '3',
+              imageUrl: 'https://i.imgur.com/Htlr2rv.jpg',
+              title: textSizes[titleSize],
+              description: textSizes[descriptionSize],
+              linkUrl: hasLink ? 'https://example.com' : undefined,
+              altText: textSizes[titleSize],
+              newTab,
+            },
+          ],
+          image_carousel_size: imageCarouselSize,
+          title: 'Image Gallery',
+          created: '2022-06-11T16:44:33.885Z',
+        },
+      ],
+    },
+  }),
+};
+ImageGallery.argTypes = {
+  imageCarouselSize: {
+    options: Object.keys(IMAGE_SIZE).map((size) => parseInt(size, 10)),
+    control: { type: 'radio' },
+  },
+  titleSize: {
+    control: { type: 'range', min: 0, max: textSizes.length - 1, step: 1 },
+  },
+  descriptionSize: {
+    control: { type: 'range', min: 0, max: textSizes.length - 1, step: 1 },
+  },
+  hasLink: {
+    control: 'boolean',
+  },
+  newTab: {
+    control: 'boolean',
+  },
+};
+ImageGallery.parameters = {
+  botSettings: defaultBotSettings,
+};
+
+export const ImageGalleryWithDescription = Template.bind({});
+ImageGalleryWithDescription.args = {
+  ...ImageGallery.args,
+  titleSize: 2,
+  descriptionSize: 2,
+  hasLink: true,
+};
+ImageGalleryWithDescription.argTypes = ImageGallery.argTypes;
+ImageGalleryWithDescription.parameters = ImageGallery.parameters;
+
+export const Slider = Template.bind({});
+Slider.parameters = {
+  ...Regular.parameters,
+  initialStateModifier: {
+    ...Regular.parameters.initialStateModifier,
+    messages: {
+      chatMessages: [
+        {
+          chat_source: 'web',
+          chat_language_code: 'en',
+          from_bot: true,
+          sender: 'BOT',
+          message: 'Slide me!',
+          message_format: 'txt',
+          buttons: [
+            {
+              id: '1',
+              button_type: 'slider',
+              language_code: 'en',
+              label: 'Choose a value between 1 and 42',
+              index: 0,
+              created_at: '2022-06-15T19:03:46.186406Z',
+              slider_details: {
+                id: '1',
+                from_value: 1,
+                to_value: 42,
+                step_value: 1,
+                value: 10,
+                affix: 'SUFFIX',
+                affix_value: '%',
+              },
+            },
+            {
+              id: '2',
+              button_type: 'submit',
+              language_code: 'en',
+              label: 'Submit',
+              value: '1',
+              index: 1,
+              created_at: '2022-06-15T19:03:46.186495Z',
+            },
+          ],
+          created: '2022-06-15T19:03:46.186495Z',
+          title: 'slider',
+          id: '1',
+        },
+      ],
+    },
+  },
+};
+
+export const Form = Template.bind({});
+Form.parameters = {
+  ...Regular.parameters,
+  initialStateModifier: {
+    ...Regular.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',
+          title: '',
+          id: '1',
+          form: {
+            id: 'dddsauhi',
+            dialogue_id: 'ddda',
+            slug: 'ddas', // Auto generated by the backend, possibly humanly readable and unique
+            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',
+              },
+            ],
+            fields: [
+              {
+                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',
+                  },
+                ],
+                validators: [
+                  {
+                    required: true,
+                    texts: [
+                      {
+                        id: 'gruh',
+                        languageCode: 'en',
+                        message: 'This field is required',
+                      },
+                    ],
+                  },
+                  {
+                    maxLength: 30,
+                    texts: [
+                      {
+                        id: 'duh',
+                        languageCode: 'en',
+                        message: 'Maximum number of length is 30',
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                type: 'email',
+                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',
+                  },
+                ],
+                validators: [
+                  {
+                    required: true,
+                    texts: [
+                      {
+                        id: 'gigu',
+                        languageCode: 'en',
+                        message: 'This field is required',
+                      },
+                    ],
+                  },
+                  {
+                    pattern: /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/.toString(),
+                    texts: [
+                      {
+                        id: 'dada',
+                        languageCode: 'en',
+                        message: 'Please provide valid email',
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                type: 'range',
+                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',
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        },
+      ],
+    },
+  },
+};
+
+export const LeaveContactDetails = Template.bind({});
+LeaveContactDetails.parameters = {
+  ...Regular.parameters,
+  initialStateModifier: {
+    ...Regular.parameters.initialStateModifier,
+    messages: {
+      chatMessages: [
+        {
+          id: '1',
+          chat_language_code: 'en',
+          from_bot: true,
+          sender: 'BOT',
+          message: "Let's get in touch!",
+          message_format: 'txt',
+          buttons: [
+            {
+              id: '1',
+              button_type: 'phone',
+              language_code: 'en',
+              label: 'Call us',
+              value: '69420',
+              index: 0,
+              created_at: '2022-06-11T19:49:29.870793Z',
+              updated_at: '2022-06-11T19:49:29.871010Z',
+              is_active: true,
+            },
+            {
+              id: '2',
+              button_type: 'email',
+              language_code: 'en',
+              label: 'Email us',
+              value: "contact@kindly.ai?subject=Email%20from%20storybook&body=Don't%20send%20that!",
+              index: 1,
+              created_at: '2022-06-11T19:49:29.870865Z',
+              updated_at: '2022-06-11T19:49:29.871033Z',
+              is_active: true,
+              email_details: {
+                id: '1',
+                subject: 'Email from storybook',
+                body: "Don't send that!",
+              },
+            },
+            {
+              id: '3',
+              button_type: 'contact_details',
+              label: 'Contact me back',
+              index: 2,
+              is_active: true,
+              contact_details: {
+                id: 'ae14453c-0156-40c9-a13a-0037f46bd14a',
+                contact_type: 'email',
+                label: 'Your email:',
+                edit_text: 'Contact me back',
+                placeholder: 'me@example.com',
+              },
+            },
+          ],
+          title: 'Contacts',
+          created: '2022-06-11T19:58:43.883Z',
+        },
+      ],
+    },
+  },
+};
+LeaveContactDetails.play = async () => {
+  const LeaveContactButton = await screen.findByText(
+    LeaveContactDetails.parameters.initialStateModifier.messages.chatMessages[0].buttons[2].label,
+  );
+  await userEvent.click(LeaveContactButton);
+};