@kindly/react-chat 2.35.2 → 2.36.1

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

@@ -0,0 +1,109 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable react/prop-types */
+import React from 'react';
+import withFetchMock from 'storybook-addon-mock';
+
+import { feedbackFormTypes } 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/Feedback',
+  component: KindlyChatButton,
+  decorators: [withFetchMock, withContainer, withMockProvider],
+};
+
+export const Emojis = Template.bind({});
+Emojis.parameters = {
+  botSettings: {
+    ...defaultBotSettings,
+    feedbackForm: {
+      ...defaultBotSettings.feedbackForm,
+      type: feedbackFormTypes.EMOJIS,
+    },
+  },
+  initialStateModifier: {
+    chatbubble: {
+      active: false,
+      currentLanguage: 'en',
+    },
+    feedback: {
+      feedbackFormOpen: true,
+    },
+  },
+};
+
+export const Binary = Template.bind({});
+Binary.parameters = {
+  botSettings: {
+    ...defaultBotSettings,
+    feedbackForm: {
+      ...defaultBotSettings.feedbackForm,
+      type: feedbackFormTypes.BINARY,
+    },
+  },
+  initialStateModifier: {
+    chatbubble: {
+      active: false,
+      currentLanguage: 'en',
+    },
+    feedback: {
+      feedbackFormOpen: true,
+    },
+  },
+};
+
+export const HappyOrNot = Template.bind({});
+HappyOrNot.parameters = {
+  botSettings: {
+    ...defaultBotSettings,
+    feedbackForm: {
+      ...defaultBotSettings.feedbackForm,
+      type: feedbackFormTypes.HAPPY_OR_NOT,
+    },
+  },
+  initialStateModifier: {
+    chatbubble: {
+      active: false,
+      currentLanguage: 'en',
+    },
+    feedback: {
+      feedbackFormOpen: true,
+    },
+  },
+};
+
+export const ExternalLink = Template.bind({});
+ExternalLink.parameters = {
+  botSettings: {
+    ...defaultBotSettings,
+    feedbackForm: {
+      ...defaultBotSettings.feedbackForm,
+      type: feedbackFormTypes.EXTERNAL_LINK,
+    },
+  },
+  initialStateModifier: {
+    chatbubble: {
+      active: false,
+      currentLanguage: 'en',
+    },
+    feedback: {
+      feedbackFormOpen: true,
+    },
+  },
+};

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

@@ -0,0 +1,125 @@
+/* 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 = ({ slug, nudgeLayout, trackEvent, options, ...args }) => {
+  return (
+    <KindlyChat
+      botKey={'1234'}
+      options={options || {}}
+      {...args}
+      setKindlyChatRef={(api) => {
+        api?.showNudge({
+          slug,
+          nudgeLayout,
+          trackEvent,
+        });
+      }}
+    />
+  );
+};
+
+export default {
+  title: 'Screen/Nudges',
+  component: KindlyChat,
+  decorators: [withMock],
+};
+
+export const Product = Template.bind({});
+Product.parameters = mockSettings();
+Product.args = {
+  slug: settings.nudges.product_nudges[0].slug,
+};
+
+export const Form = Template.bind({});
+Form.parameters = mockSettings();
+Form.args = {
+  slug: settings.nudges.form_nudges[0].slug,
+};
+
+export const MultipleChoice = Template.bind({});
+MultipleChoice.parameters = mockSettings();
+MultipleChoice.args = {
+  slug: settings.nudges.multiple_choice_nudges[0].slug,
+};
+
+export const TextNudge = Template.bind({});
+TextNudge.parameters = mockSettings();
+TextNudge.args = {
+  slug: settings.nudges.text_nudges[0].slug,
+};
+
+export const FullCustom = Template.bind({});
+FullCustom.parameters = mockSettings();
+FullCustom.args = {
+  nudgeLayout: {
+    sections: [
+      {
+        html: () => `
+          <style>
+            .nudge-text {
+              width: 50%;
+              font-weight: bold;
+            }
+        
+            p {
+              color: #333;
+              font-size: 14px;
+            }
+          </style>
+          <div class="nudge-wrapper">
+            <div class="nudge-text">
+              <p>Full Custom</p>
+            </div>
+          </div>
+        `,
+      },
+    ],
+  },
+};
+
+export const Custom = Template.bind({});
+Custom.parameters = mockSettings();
+Custom.args = {
+  slug: settings.nudges.custom_nudges[0].slug,
+  nudgeLayout: {
+    sections: [
+      {
+        html: (textContent) => `
+          <style>
+            .nudge-text {
+              width: 50%;
+              font-weight: bold;
+            }
+        
+            p {
+              color: #333;
+              font-size: 14px;
+            }
+          </style>
+          <div class="nudge-wrapper">
+            <div class="nudge-text">
+              <p>${textContent.text}</p>
+              <p>${textContent.text2}</p>
+              <p>${textContent.text3}</p>
+            </div>
+          </div>
+        `,
+      },
+    ],
+  },
+};

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

@@ -0,0 +1,126 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable react/prop-types */
+import { screen, userEvent } from '@storybook/testing-library';
+import React from 'react';
+import withFetchMock from 'storybook-addon-mock';
+
+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/Options',
+  component: KindlyChatButton,
+  decorators: [withFetchMock, withContainer, withMockProvider],
+};
+
+export const Regular = Template.bind({});
+Regular.parameters = {
+  botSettings: defaultBotSettings,
+  initialStateModifier: {
+    chatbubble: {
+      active: true,
+      chatHasStarted: true,
+      currentLanguage: 'en',
+      optionsScreenOpen: true,
+    },
+  },
+};
+
+export const WithLanguageChoice = Template.bind({});
+WithLanguageChoice.parameters = {
+  botSettings: {
+    ...defaultBotSettings,
+    languages: [
+      {
+        code: 'en',
+        name: 'English',
+        active: true,
+      },
+      {
+        code: 'nb',
+        name: 'Norsk (bokmål)',
+        active: true,
+      },
+    ],
+  },
+  initialStateModifier: {
+    chatbubble: {
+      active: true,
+      chatHasStarted: true,
+      currentLanguage: 'en',
+      optionsScreenOpen: true,
+    },
+  },
+};
+
+export const LanguageChoice = Template.bind({});
+LanguageChoice.parameters = WithLanguageChoice.parameters;
+LanguageChoice.play = async () => {
+  const languageButton = await screen.findByText(defaultBotSettings.text.change_language_button.en);
+  await userEvent.click(languageButton);
+};
+
+export const LanguageChoiceConfirm = Template.bind({});
+LanguageChoiceConfirm.parameters = WithLanguageChoice.parameters;
+LanguageChoiceConfirm.play = async () => {
+  const languageButton = await screen.findByText(defaultBotSettings.text.change_language_button.en);
+  await userEvent.click(languageButton);
+  const norskButton = await screen.findByText(LanguageChoiceConfirm.parameters.botSettings.languages[1].name);
+  await userEvent.click(norskButton);
+};
+
+export const DeleteConfirmation = Template.bind({});
+DeleteConfirmation.parameters = Regular.parameters;
+DeleteConfirmation.play = async () => {
+  const deleteButton = await screen.findByText(defaultBotSettings.text.delete_button.en);
+  await userEvent.click(deleteButton);
+};
+
+export const DeleteSuccess = Template.bind({});
+DeleteSuccess.parameters = {
+  ...Regular.parameters,
+  initialStateModifier: {
+    ...Regular.parameters.initialStateModifier,
+    privacy: {
+      chatDeleted: true,
+    },
+  },
+};
+
+export const DownloadChat = Template.bind({});
+DownloadChat.parameters = Regular.parameters;
+DownloadChat.play = async () => {
+  const downloadButton = await screen.findByText(defaultBotSettings.text.download_button.en);
+  await userEvent.click(downloadButton);
+};
+
+export const QuitChat = Template.bind({});
+QuitChat.parameters = {
+  ...Regular.parameters,
+  initialStateModifier: {
+    chatbubble: {
+      active: true,
+      chatHasStarted: true,
+      currentLanguage: 'en',
+    },
+  },
+};
+QuitChat.play = async () => {
+  const deleteButton = await screen.findByTestId('end-chat-button');
+  await userEvent.click(deleteButton);
+};

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

@@ -0,0 +1,109 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable react/prop-types */
+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 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/StartChat',
+  component: KindlyChatButton,
+  decorators: [withContainer, withMockProvider],
+  parameters: {
+    botSettings: defaultBotSettings,
+    initialStateModifier: {
+      chatbubble: {
+        active: true,
+      },
+    },
+  },
+};
+
+export const Regular = Template.bind({});
+
+export const WithLanguageChoice = Template.bind({});
+WithLanguageChoice.parameters = {
+  botSettings: {
+    ...defaultBotSettings,
+    languages: [
+      {
+        code: 'en',
+        name: 'English',
+        active: true,
+      },
+      {
+        code: 'nb',
+        name: 'Norsk (bokmål)',
+        active: true,
+      },
+    ],
+  },
+  initialStateModifier: {
+    chatbubble: {
+      active: true,
+    },
+  },
+};
+
+export const WithPicture = Template.bind({});
+WithPicture.parameters = {
+  botSettings: {
+    ...defaultBotSettings,
+    welcomePage: {
+      ...defaultBotSettings.welcomePage,
+      image: 'https://i.imgur.com/wcfVY0C.png',
+      type: 'PICTURE',
+    },
+  },
+  initialStateModifier: {
+    chatbubble: {
+      active: true,
+    },
+  },
+};
+
+export const TextLeftToRight = Template.bind({});
+TextLeftToRight.parameters = {
+  botSettings: {
+    ...defaultBotSettings,
+    text_right_to_left: true,
+    languages: [
+      {
+        code: 'ar',
+        name: 'Arabic',
+        active: true,
+      },
+    ],
+    welcomePage: {
+      ...defaultBotSettings.welcomePage,
+      header: {
+        en: 'مرحبا ، مرحبا بكم في chatbot لدينا!',
+      },
+      text: {
+        en: '<p>تم تدريب chatbot الخاص بنا على الإجابة عن الأسئلة المتعلقة بمنتجنا ، ولكنه يتعلم باستمرار. حاول أن تجعل أسئلتك دقيقة قدر الإمكان. لا تزود برنامج الدردشة الآلي بأي معلومات شخصية.</p>',
+      },
+      start_button: {
+        en: 'ابدأ الدردشة',
+      },
+    },
+  },
+  initialStateModifier: {
+    chatbubble: {
+      active: true,
+    },
+  },
+};