@kindly/react-chat 2.47.1 → 2.48.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kindly/react-chat",
-  "version": "2.47.1",
+  "version": "2.48.1",
   "description": "Kindly Chat react component",
   "repository": "https://github.com/kindly-ai/kindly-chat/tree/main/packages/react-chat",
   "main": "dist/index.js",
@@ -144,5 +144,5 @@
       }
     }
   },
-  "gitHead": "610dad2e9405f4193f1293d17dac2e6da16665b3"
+  "gitHead": "06a145945114368fb6ec162da2f1f16c7c98c098"
 }

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

@@ -0,0 +1,203 @@
+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/index.stories.jsx

@@ -3,7 +3,7 @@ import { fireEvent, userEvent, waitFor, within } from '@storybook/testing-librar
 import MockDate from 'mockdate';
 import React from 'react';
 
-import { HANDLERS, IMAGE_WIDTH } from 'app/constants';
+import { HANDLERS } from 'app/constants';
 
 import { chromaticViewports } from '../../../.storybook/preview';
 import KindlyChatButton from '../../../src/features/KindlyChatButton/KindlyChatButton';
@@ -564,157 +564,6 @@ Fallback.parameters = {
   },
 };
 
-const videoSources = [
-  ['YouTube', 'https://www.youtube.com/watch?v=vvg5AfQEmUc'],
-  ['Vimeo', 'https://vimeo.com/153882097'],
-  ['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 }) => ({
-    ...defaultParameters.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,
-        },
-      ],
-    },
-  }),
-};
-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. \n\n Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-];
-ImageGallery.args = {
-  imageCarouselSize: 1000,
-  titleSize: 0,
-  descriptionSize: 0,
-  imageQuantity: 3,
-  hasLink: false,
-  newTab: false,
-  thonImageAboveText: false,
-  initialStateModifierFromArgs: ({
-    imageCarouselSize,
-    imageQuantity,
-    titleSize,
-    descriptionSize,
-    hasLink,
-    newTab,
-    thonImageAboveText,
-  }) => ({
-    ...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',
-          thon_image_above_text: thonImageAboveText,
-          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,
-            },
-            {
-              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,
-            },
-            {
-              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,
-            },
-          ].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 },
-  },
-  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 Slider = Template.bind({});
 Slider.parameters = {
   ...defaultParameters,
@@ -764,75 +613,47 @@ Slider.parameters = {
   },
 };
 
-export const Buttons = Template.bind({});
-Buttons.parameters = {
-  ...defaultParameters,
-  initialStateModifier: {
+const videoSources = [
+  ['YouTube', 'https://www.youtube.com/watch?v=vvg5AfQEmUc'],
+  ['Vimeo', 'https://vimeo.com/153882097'],
+  ['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 }) => ({
     ...defaultParameters.initialStateModifier,
     messages: {
       chatMessages: [
         {
-          chat_source: 'web',
+          id: '1',
           chat_language_code: 'en',
           from_bot: true,
           sender: 'BOT',
-          message: 'Button list!',
+          message: 'Here is Video embed',
           message_format: 'txt',
-          buttons: [
-            {
-              id: '1',
-              button_type: 'EXTERNAL_LINK',
-              language_code: 'en',
-              label: 'Open a link',
-              value: 'https://example.com',
-              index: 0,
-            },
-            {
-              id: '2',
-              button_type: 'QUICK_REPLY',
-              language_code: 'en',
-              label: 'Quick reply',
-              value: 'This is a quick reply',
-              index: 1,
-            },
-            {
-              id: '3',
-              button_type: 'EMAIL',
-              language_code: 'en',
-              label: 'Email',
-              value: 'support@example.com',
-              index: 2,
-            },
-            {
-              id: '4',
-              button_type: 'PHONE',
-              language_code: 'en',
-              label: 'Phone',
-              value: '+46 070-174 06 05',
-              index: 3,
-            },
-            {
-              id: '5',
-              button_type: 'UPLOAD_ATTACHMENT',
-              language_code: 'en',
-              label: 'Upload attachment',
-              index: 4,
-            },
-            {
-              id: '6',
-              button_type: 'DIALOGUE_TRIGGER',
-              language_code: 'en',
-              label: 'Trigger another dialogue',
-              value: 'dialogue_id',
-              index: 5,
-            },
-          ],
+          video_source: videoSourceList.find((videoSourceMap) => videoSourceMap[0] === videoSource)[1],
+          title: 'embed',
           created,
-          id: '1',
         },
       ],
     },
+  }),
+};
+VideoEmbed.argTypes = {
+  videoSource: {
+    options: videoSources.map((videoSource) => videoSource[0]),
+    control: { type: 'select' },
   },
+  videoSourceList: {
+    table: {
+      disable: true,
+    },
+  },
+};
+VideoEmbed.parameters = {
+  botSettings: defaultBotSettings,
 };
 
 export const LeaveContactDetails = Template.bind({});