@kindly/react-chat 2.48.3 → 2.48.4

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

@@ -1,203 +0,0 @@
-import React from 'react';
-
-import { IMAGE_WIDTH } from '../../../src/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 todayTime = new Date();
-todayTime.setHours(13);
-todayTime.setMinutes(37);
-const created = todayTime.toISOString();
-
-export default {
-  title: 'Screen/Chat/ImageCarousel',
-  component: KindlyChatButton,
-  decorators: [withContainer, withMockProvider],
-  argTypes: {
-    initialStateModifierFromArgs: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-};
-
-const defaultParameters = {
-  botSettings: defaultBotSettings,
-  initialStateModifier: {
-    chatbubble: {
-      active: true,
-      chatHasStarted: true,
-      currentLanguage: 'en',
-    },
-  },
-};
-
-function Template(args, context) {
-  return <KindlyChatButton {...args} {...context} />;
-}
-
-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. \n\n Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-];
-const buttons = [
-  {
-    id: '1',
-    label: 'Add to cart',
-    value: 'https://example.com',
-    button_type: 'link',
-  },
-  {
-    id: '2',
-    label: 'Send as a gift',
-    value: '123',
-    button_type: 'dialogue_trigger',
-  },
-  {
-    id: '3',
-    label: 'Add to wishlist',
-    value: '234',
-    button_type: 'dialogue_trigger',
-  },
-];
-ImageGallery.args = {
-  imageCarouselSize: 1000,
-  titleSize: 0,
-  descriptionSize: 0,
-  imageQuantity: 3,
-  buttonQuantity: 0,
-  hasLink: false,
-  newTab: false,
-  initialStateModifierFromArgs: ({
-    imageCarouselSize,
-    imageQuantity,
-    titleSize,
-    descriptionSize,
-    buttonQuantity,
-    hasLink,
-    newTab,
-  }) => ({
-    ...defaultParameters.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] || 'Alt text',
-              newTab,
-              buttons: buttons.slice(0, buttonQuantity),
-            },
-            {
-              id: '2',
-              imageUrl: 'https://i.imgur.com/H49sTpN.jpg',
-              title: textSizes[titleSize],
-              description: textSizes[descriptionSize],
-              linkUrl: hasLink ? 'https://example.com' : undefined,
-              altText: textSizes[titleSize] || 'Alt text',
-              newTab,
-              buttons: buttons.slice(0, buttonQuantity - 1 > 0 ? buttonQuantity - 1 : 0),
-            },
-            {
-              id: '3',
-              imageUrl: 'https://i.imgur.com/Htlr2rv.jpg',
-              title: textSizes[titleSize],
-              description: textSizes[descriptionSize],
-              linkUrl: hasLink ? 'https://example.com' : undefined,
-              altText: textSizes[titleSize] || 'Alt text',
-              newTab,
-              buttons: buttons.slice(0, buttonQuantity - 2 > 0 ? buttonQuantity - 2 : 0),
-            },
-          ].slice(0, imageQuantity),
-          image_carousel_size: imageCarouselSize,
-          title: 'Image Gallery',
-          created,
-        },
-      ],
-    },
-  }),
-};
-ImageGallery.argTypes = {
-  imageCarouselSize: {
-    options: Object.keys(IMAGE_WIDTH).map((size) => parseInt(size, 10)),
-    control: { type: 'radio' },
-  },
-  imageQuantity: {
-    control: { type: 'range', min: 1, max: 3, step: 1 },
-  },
-  titleSize: {
-    control: { type: 'range', min: 0, max: textSizes.length - 1, step: 1 },
-  },
-  descriptionSize: {
-    control: { type: 'range', min: 0, max: textSizes.length - 1, step: 1 },
-  },
-  buttonQuantity: {
-    control: { type: 'range', min: 0, max: buttons.length, step: 1 },
-  },
-  hasLink: {
-    control: 'boolean',
-  },
-  newTab: {
-    control: 'boolean',
-  },
-};
-ImageGallery.parameters = {
-  botSettings: defaultBotSettings,
-};
-
-export const ImageGalleryWithDescription = Template.bind({});
-ImageGalleryWithDescription.args = {
-  ...ImageGallery.args,
-  titleSize: 2,
-  descriptionSize: 3,
-  hasLink: true,
-};
-ImageGalleryWithDescription.argTypes = ImageGallery.argTypes;
-ImageGalleryWithDescription.parameters = ImageGallery.parameters;
-
-export const ImageGalleryWithButtons = Template.bind({});
-ImageGalleryWithButtons.args = {
-  ...ImageGallery.args,
-  titleSize: 0,
-  descriptionSize: 0,
-  hasLink: true,
-  buttonQuantity: 3,
-};
-ImageGalleryWithButtons.argTypes = ImageGallery.argTypes;
-ImageGalleryWithButtons.parameters = ImageGallery.parameters;
-
-export const ImageGalleryWithButtonsAndDescription = Template.bind({});
-ImageGalleryWithButtonsAndDescription.args = {
-  ...ImageGallery.args,
-  titleSize: 1,
-  descriptionSize: 1,
-  hasLink: false,
-  buttonQuantity: 2,
-};
-ImageGalleryWithButtonsAndDescription.argTypes = ImageGallery.argTypes;
-ImageGalleryWithButtonsAndDescription.parameters = ImageGallery.parameters;

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

@@ -1,184 +0,0 @@
-import React from 'react';
-
-import { DEFAULT_ALERT_TYPES } from '../../../src/constants';
-import KindlyChatButton from '../../../src/features/KindlyChatButton/KindlyChatButton';
-import { showInChatNotification } from '../../../src/state/actions';
-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/Notifications',
-  component: KindlyChatButton,
-  decorators: [withContainer, withMockProvider],
-  argTypes: {
-    initialStateModifierFromArgs: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-};
-
-export const Maintenance = Template.bind({});
-Maintenance.parameters = {
-  botSettings: defaultBotSettings,
-  initialStateModifier: {
-    chatbubble: {
-      active: true,
-      chatHasStarted: true,
-      currentLanguage: 'en',
-    },
-    bot: {
-      maintenanceAlert: {
-        alert_enabled: true,
-        link_text: { en: 'Click here to learn more', nb: '', nn: '', sv: '' },
-        link_location: { en: 'https://example.com', nb: '', nn: '', sv: '' },
-        text_content: { en: 'Maintenance!', nb: '', nn: '', sv: '' },
-      },
-      maintenanceAlertEnabled: true,
-    },
-  },
-};
-
-export const WithIcon = Template.bind({});
-WithIcon.parameters = {
-  botSettings: defaultBotSettings,
-  initialStateModifier: {
-    chatbubble: {
-      active: true,
-      chatHasStarted: true,
-      currentLanguage: 'en',
-    },
-  },
-};
-WithIcon.play = async () => {
-  const notification = {
-    content: 'I detected english and switched language. Go to [settings](#settings/language-select) to switch back.',
-    icon: 'language',
-  };
-  window.store.dispatch(showInChatNotification(notification, Math.random()));
-};
-
-export const WithIconAndButton = Template.bind({});
-WithIconAndButton.parameters = {
-  botSettings: defaultBotSettings,
-  initialStateModifier: {
-    chatbubble: {
-      active: true,
-      chatHasStarted: true,
-      currentLanguage: 'en',
-    },
-  },
-};
-WithIconAndButton.play = async () => {
-  const notification = {
-    content: 'I am a notification',
-    buttonHref: 'https://example.com',
-    buttonText: 'Click me',
-    icon: 'language',
-  };
-  window.store.dispatch(showInChatNotification(notification, Math.random()));
-};
-
-export const StackedNotifications = Template.bind({});
-StackedNotifications.parameters = {
-  botSettings: defaultBotSettings,
-  initialStateModifier: {
-    chatbubble: {
-      active: true,
-      chatHasStarted: true,
-      currentLanguage: 'en',
-    },
-  },
-};
-StackedNotifications.play = async () => {
-  const notifications = [
-    {
-      content: 'I am a notification',
-      buttonHref: 'https://example.com',
-      buttonText: 'Click me',
-    },
-    {
-      content: 'With a long text that will wrap. I am a notification. I am long. Maybe too long?',
-      buttonHref: 'https://example.com',
-      buttonText: 'With a long text that will wrap. I am a notification. I am long. Maybe too long?',
-    },
-    {
-      content: 'Without a button',
-    },
-  ];
-  notifications.forEach((notification) => {
-    window.store.dispatch(showInChatNotification(notification, Math.random()));
-  });
-  let i = 0;
-  const { store } = window;
-  const interval = setInterval(() => {
-    store.dispatch(showInChatNotification(notifications[(i + 1) % notifications.length], Math.random()));
-    i += 1;
-    if (window.store !== store) {
-      clearInterval(interval);
-    }
-  }, [4000]);
-};
-
-export const OnWelcomePage = Template.bind({});
-OnWelcomePage.parameters = {
-  botSettings: defaultBotSettings,
-  initialStateModifier: {
-    chatbubble: {
-      active: true,
-      chatHasStarted: false,
-      currentLanguage: 'en',
-    },
-  },
-};
-
-OnWelcomePage.play = async () => {
-  const notifications = [
-    {
-      content: 'I am a notification',
-      buttonHref: 'https://example.com',
-      buttonText: 'Click me',
-    },
-  ];
-  notifications.forEach((notification) => {
-    window.store.dispatch(showInChatNotification(notification, Math.random()));
-  });
-};
-
-export const QuickSetting = Template.bind({});
-QuickSetting.parameters = {
-  botSettings: defaultBotSettings,
-  initialStateModifier: {
-    chatbubble: {
-      active: true,
-      chatHasStarted: true,
-      currentLanguage: 'en',
-    },
-  },
-};
-
-QuickSetting.play = async () => {
-  const notifications = [
-    {
-      content:
-        'I detected [english](and) switched language. Go to [settings](#settings/language-select) to switch back.',
-    },
-  ];
-  notifications.forEach((notification) => {
-    window.store.dispatch(showInChatNotification(notification, DEFAULT_ALERT_TYPES.LANGUAGE_SWITCH));
-  });
-};

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

@@ -1,143 +0,0 @@
-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 todayTime = new Date();
-todayTime.setHours(13);
-todayTime.setMinutes(37);
-const created = todayTime.toISOString();
-
-const defaultBotSettings = {
-  welcomePage: settingsJSON.welcome_page,
-  feedbackForm: settingsJSON.feedback_form,
-  maintenanceAlert: settingsJSON.maintenance_alert,
-  ...settingsJSON.settings,
-  ...settingsJSON,
-};
-
-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:
-            "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,
-          id: '1',
-        },
-      ],
-      messageSentTime: '2020-12-01T12:00:00.000Z',
-      lastMessageSeen: {
-        id: '3',
-        index: 3,
-      },
-    },
-  },
-};
-
-export default {
-  title: 'Screen/Chat/TypingIndicator',
-  component: KindlyChatButton,
-  decorators: [withContainer, withMockProvider],
-  argTypes: {
-    initialStateModifierFromArgs: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-};
-
-function Template(args, context) {
-  return <KindlyChatButton {...args} {...context} />;
-}
-
-export const BotTypingIndicator = Template.bind({});
-
-BotTypingIndicator.parameters = {
-  botSettings: defaultBotSettings,
-  initialStateModifier: {
-    chatbubble: {
-      active: true,
-      chatHasStarted: true,
-      currentLanguage: 'en',
-    },
-    messages: {
-      chatMessages: [
-        {
-          id: '2',
-          created,
-          message: 'What is the meaning of life?',
-          status: null,
-        },
-      ],
-    },
-    bot: {
-      isTyping: true,
-    },
-  },
-};
-
-export const MimirTypingIndicator = Template.bind({});
-
-MimirTypingIndicator.parameters = {
-  botSettings: defaultBotSettings,
-  initialStateModifier: {
-    chatbubble: {
-      active: true,
-      chatHasStarted: true,
-      currentLanguage: 'en',
-    },
-    messages: {
-      chatMessages: [
-        {
-          id: '1',
-          created,
-          message: 'What is the meaning of life?',
-          status: null,
-        },
-      ],
-    },
-  },
-};
-
-MimirTypingIndicator.args = {
-  text: settingsJSON.text.gpt_search_text.en,
-  initialStateModifierFromArgs: ({ text }) => {
-    return {
-      ...defaultParameters.initialStateModifier,
-      bot: {
-        isMimirTyping: true,
-        text: {
-          gpt_search_text: {
-            en: text,
-          },
-        },
-      },
-    };
-  },
-};
-
-MimirTypingIndicator.argTypes = {
-  text: 'string',
-};