@kindly/react-chat 2.48.3 → 2.48.4

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

@@ -1,99 +0,0 @@
-import React from 'react';
-
-import { chromaticViewports } from '../../.storybook/preview';
-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,
-    },
-  ],
-});
-
-function Template({ options, ...args }) {
-  return <KindlyChat botKey="1234" options={options || {}} {...args} />;
-}
-
-export default {
-  title: 'Screen/Button',
-  component: KindlyChat,
-  decorators: [],
-  argTypes: {
-    options: {
-      table: {
-        disable: true,
-      },
-    },
-    setKindlyChatRef: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-};
-
-export const Regular = Template.bind({});
-Regular.parameters = {
-  ...mockSettings(),
-  chromatic: { viewports: chromaticViewports },
-};
-
-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,
-  },
-});
-
-export const WithBubbleAvatar = Template.bind({});
-WithBubbleAvatar.parameters = mockSettings({
-  ...settings,
-  settings: {
-    ...settings.settings,
-    bubbleAvatar: 'https://static.kindlycdn.com/v10.26.2/static/1753a14f761e7a21771e9d3b340c8cc1.svg',
-    bubble_size: 'SMALL',
-  },
-});

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

@@ -1,108 +0,0 @@
-import React from 'react';
-
-import { feedbackFormTypes } from 'app/constants';
-
-import { chromaticViewports } from '../../.storybook/preview';
-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,
-};
-
-function Template(args, context) {
-  return <KindlyChatButton {...args} {...context} />;
-}
-
-export default {
-  title: 'Screen/Feedback',
-  component: KindlyChatButton,
-  decorators: [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,
-    },
-  },
-  chromatic: { viewports: chromaticViewports },
-};
-
-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

@@ -1,123 +0,0 @@
-import React from 'react';
-
-import { chromaticViewports } from '../../.storybook/preview';
-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,
-    },
-  ],
-});
-
-function 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,
-};
-
-export const Product = Template.bind({});
-Product.parameters = { ...mockSettings(), chromatic: { viewports: chromaticViewports } };
-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

@@ -1,220 +0,0 @@
-import { userEvent, within } from '@storybook/testing-library';
-import React from 'react';
-
-import { chromaticViewports } from '../../.storybook/preview';
-import KindlyChatButton from '../../src/features/KindlyChatButton/KindlyChatButton';
-import { OPTION_VIEW } from '../../src/features/OptionsScreen/constants';
-import settingsJSON from '../assets/settingsJson';
-import withContainer from '../decorators/withContainer';
-import withMockProvider from '../decorators/withProvider';
-import wait from '../utils/wait';
-
-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/Options',
-  component: KindlyChatButton,
-  decorators: [withContainer, withMockProvider],
-};
-
-const defaultParameters = {
-  botSettings: defaultBotSettings,
-  initialStateModifier: {
-    chatbubble: {
-      active: true,
-      chatHasStarted: true,
-      currentLanguage: 'en',
-      optionsScreenView: OPTION_VIEW.GENERIC,
-    },
-  },
-};
-
-export const Regular = Template.bind({});
-Regular.parameters = {
-  ...defaultParameters,
-  chromatic: { viewports: chromaticViewports },
-};
-
-export const WithLanguageChoice = Template.bind({});
-WithLanguageChoice.parameters = {
-  botSettings: {
-    ...defaultBotSettings,
-    languages: [
-      {
-        code: 'en',
-        name: 'English',
-        active: true,
-      },
-      {
-        code: 'nb',
-        name: 'Norsk (bokmål)',
-        active: true,
-      },
-    ],
-    text: {
-      ...defaultBotSettings.text,
-      change_language_button: {
-        en: 'Change language, in a very long icon-text version, that will probably not fit in the button',
-        nb: 'Endre språk, in a very long icon-text version, that will probably not fit in the button',
-        nn: 'Endre språk, in a very long icon-text version, that will probably not fit in the button',
-        sv: 'Ändra språk, in a very long icon-text version, that will probably not fit in the button',
-      },
-    },
-  },
-  initialStateModifier: {
-    chatbubble: {
-      active: true,
-      chatHasStarted: true,
-      currentLanguage: 'en',
-      optionsScreenView: OPTION_VIEW.GENERIC,
-    },
-  },
-};
-
-const availableLanguages = [
-  {
-    code: 'en',
-    name: 'English',
-    active: true,
-  },
-  {
-    code: 'nb',
-    name: 'Norsk (bokmål)',
-    active: true,
-  },
-  {
-    code: 'aa',
-    name: 'Afar',
-    active: true,
-  },
-  {
-    code: 'af',
-    name: 'Afrikaans',
-    active: true,
-  },
-  {
-    code: 'ak',
-    name: 'Akana',
-    active: true,
-  },
-  {
-    code: 'an',
-    name: 'Aragonés',
-    active: true,
-  },
-  {
-    code: 'ar',
-    name: 'العربية',
-    active: true,
-  },
-  {
-    code: 'yi',
-    name: 'ייִדיש',
-    active: true,
-  },
-  {
-    code: 'yo',
-    name: 'Yorùbá',
-    active: true,
-  },
-  {
-    code: 'za',
-    name: 'Cuengh / Tôô / 壮语',
-    active: true,
-  },
-  {
-    code: 'zu',
-    name: 'isiZulu',
-    active: true,
-  },
-];
-
-export const LanguageChoice = Template.bind({});
-LanguageChoice.args = {
-  languageQuantity: 10,
-  initialStateModifierFromArgs: ({ languageQuantity }) => ({
-    chatbubble: {
-      active: true,
-      chatHasStarted: true,
-      currentLanguage: 'en',
-      optionsScreenView: OPTION_VIEW.LANGUAGE_SELECT,
-    },
-    bot: {
-      languages: availableLanguages.slice(0, languageQuantity),
-    },
-  }),
-};
-LanguageChoice.argTypes = {
-  languageQuantity: {
-    control: { type: 'range', min: 2, max: availableLanguages.length - 1, step: 1 },
-  },
-};
-LanguageChoice.parameters = {
-  botSettings: {
-    ...defaultBotSettings,
-  },
-};
-
-export const LanguageChoiceConfirm = Template.bind({});
-LanguageChoiceConfirm.args = {
-  ...LanguageChoice.args,
-  languageQuantity: 2,
-};
-LanguageChoiceConfirm.argTypes = LanguageChoice.argTypes;
-LanguageChoiceConfirm.parameters = LanguageChoice.parameters;
-LanguageChoiceConfirm.play = async ({ canvasElement }) => {
-  const norskButton = await within(canvasElement).findByText(availableLanguages[1].name);
-  await wait(10); // This fixes inconsistent test results due to composer autofocus
-  await userEvent.click(norskButton);
-};
-
-export const DeleteConfirmation = Template.bind({});
-DeleteConfirmation.parameters = defaultParameters;
-DeleteConfirmation.play = async ({ canvasElement }) => {
-  const deleteButton = await within(canvasElement).findByText(defaultBotSettings.text.delete_button.en);
-  await userEvent.click(deleteButton);
-};
-
-export const DeleteSuccess = Template.bind({});
-DeleteSuccess.parameters = {
-  ...defaultParameters,
-  initialStateModifier: {
-    ...defaultParameters.initialStateModifier,
-    privacy: {
-      chatDeleted: true,
-    },
-  },
-};
-
-export const DownloadChat = Template.bind({});
-DownloadChat.parameters = defaultParameters;
-DownloadChat.play = async ({ canvasElement }) => {
-  const downloadButton = await within(canvasElement).findByText(defaultBotSettings.text.download_button.en);
-  await userEvent.click(downloadButton);
-};
-
-export const QuitChat = Template.bind({});
-QuitChat.parameters = {
-  ...defaultParameters,
-  initialStateModifier: {
-    chatbubble: {
-      active: true,
-      chatHasStarted: true,
-      currentLanguage: 'en',
-    },
-  },
-};
-QuitChat.play = async ({ canvasElement }) => {
-  const deleteButton = await within(canvasElement).findByTestId('end-chat-button');
-  await userEvent.click(deleteButton);
-};

package/stories/screens.stories/PushGreeting.stories.jsx

@@ -1,81 +0,0 @@
-import React from 'react';
-
-import { chromaticViewports } from '../../.storybook/preview';
-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,
-};
-
-function Template(args, context) {
-  return <KindlyChatButton {...args} {...context} />;
-}
-
-export default {
-  title: 'Screen/PushGreeting',
-  component: KindlyChatButton,
-  decorators: [withContainer, withMockProvider],
-};
-
-export const Default = Template.bind({});
-Default.parameters = {
-  botSettings: {
-    ...defaultBotSettings,
-  },
-  initialStateModifier: {
-    pushMessages: {
-      dismissedMessages: [],
-      show: true,
-      type: 'message',
-      text: 'This is a push greeting',
-    },
-  },
-  chromatic: { viewports: chromaticViewports },
-};
-
-export const NewMessage = Template.bind({});
-NewMessage.args = {
-  agentName: 'John Doe',
-  avatar: null,
-  text: 'has sent a new message',
-  initialStateModifierFromArgs: ({ agentName, avatar, text }) => ({
-    botSettings: {
-      ...defaultBotSettings,
-    },
-    pushMessages: {
-      dismissedMessages: [],
-      show: true,
-      type: 'takeover',
-      agent: {
-        name: agentName,
-        avatar,
-      },
-      text,
-    },
-  }),
-};
-
-const avatars = {
-  undefined: 'undefined',
-  'https://i.imgur.com/Iz1nJrw.jpg': 'Arash',
-};
-
-NewMessage.argTypes = {
-  avatar: {
-    options: Object.keys(avatars),
-    control: {
-      type: 'select',
-      labels: avatars,
-    },
-  },
-};
-NewMessage.parameters = {
-  botSettings: defaultBotSettings,
-};