@kindly/react-chat 2.35.2 → 2.36.1

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

@@ -0,0 +1,602 @@
+/* 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({});
+MultilineBotMessage.parameters = {
+  ...Regular.parameters,
+  initialStateModifier: {
+    ...Regular.parameters.initialStateModifier,
+    messages: {
+      chatMessages: [
+        {
+          from_bot: true,
+          sender: 'BOT',
+          message: 'This is a \n\n multiline \n\n bot message',
+          created: '2022-06-09T18:46:51.672Z',
+          id: '1',
+        },
+      ],
+    },
+  },
+};
+
+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 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);
+};

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

@@ -0,0 +1,87 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import withMock from 'storybook-addon-mock';
+
+import KindlyChat from '../../src/KindlyChat';
+import settings from '../assets/settingsJson';
+
+const mockSettings = (response = settings) => ({
+  mockData: [
+    {
+      url: 'https://example.com/mockme/settings/1234.json?version=:version&kindly-chat-browser-id=:browserId',
+      method: 'GET',
+      status: 200,
+      response,
+    },
+  ],
+});
+
+const Template = (args) => {
+  return <KindlyChat botKey={'1234'} options={args.options || {}} {...args} />;
+};
+
+export default {
+  title: 'Screen/Button',
+  component: KindlyChat,
+  decorators: [withMock],
+  argTypes: {
+    options: {
+      table: {
+        disable: true,
+      },
+    },
+    setKindlyChatRef: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export const Regular = Template.bind({});
+Regular.parameters = mockSettings();
+
+export const Christmas = Template.bind({});
+Christmas.parameters = mockSettings({
+  ...settings,
+  settings: {
+    ...settings.settings,
+    seasonal_appearance: 'CHRISTMAS',
+  },
+});
+
+export const Pride = Template.bind({});
+Pride.parameters = mockSettings({
+  ...settings,
+  settings: {
+    ...settings.settings,
+    seasonal_appearance: 'PRIDE',
+  },
+});
+
+export const Easter = Template.bind({});
+Easter.parameters = mockSettings({
+  ...settings,
+  settings: {
+    ...settings.settings,
+    seasonal_appearance: 'EASTER',
+  },
+});
+
+export const SmallerOnTablet = Template.bind({});
+SmallerOnTablet.parameters = mockSettings({
+  ...settings,
+  settings: {
+    ...settings.settings,
+    bubble_size: 'SMALL',
+  },
+});
+
+export const WithOutline = Template.bind({});
+WithOutline.parameters = mockSettings({
+  ...settings,
+  settings: {
+    ...settings.settings,
+    use_bubble_outline: true,
+  },
+});