@kindly/react-chat 2.48.3 → 2.48.4

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

@@ -1,669 +0,0 @@
-import { expect } from '@storybook/jest';
-import { fireEvent, userEvent, within } from '@storybook/testing-library';
-import React from 'react';
-
-import { FIELDS } from '../../../src/components/Form/utils/constants';
-import KindlyChatButton from '../../../src/features/KindlyChatButton/KindlyChatButton';
-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,
-};
-
-export default {
-  title: 'Screen/Chat/Form',
-  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 FormActive = Template.bind({});
-FormActive.parameters = {
-  ...defaultParameters,
-  initialStateModifier: {
-    ...defaultParameters.initialStateModifier,
-    messages: {
-      chatMessages: [
-        {
-          chat_source: 'web',
-          chat_language_code: 'en',
-          from_bot: true,
-          sender: 'BOT',
-          message: '',
-          message_format: 'txt',
-          buttons: [],
-          created: '2022-06-15T19:03:46.186495Z',
-          id: '1',
-          form: {
-            submission_id: 'submissionId',
-            id: 'formId',
-            dialogue_id: '2',
-            submit_dialogue_id: 'c0d685d3-3f11-41b8-9cfd-e35d54df2c95',
-            abandon_dialogue_id: 'b1cde0f3-0715-48eb-8482-a9355fa11ba8',
-            languageCode: 'en',
-            texts: {
-              title: 'This is a form',
-              error_text: 'There was an error around here',
-              submit_button_text: 'Submit',
-              cancel_button_text: 'Exit',
-              unanswered_text: 'You failed to answer this form',
-              cancel_text: 'You have cancelled/exited this form',
-            },
-            fields: [
-              {
-                input_type: FIELDS.CHECKBOX,
-                order: 1,
-                required: true,
-                slug: 'checkbox-field',
-                attributes: {
-                  options: [
-                    {
-                      value: 'volvo',
-                      label: 'Volvo',
-                    },
-                    {
-                      value: 'mercedes',
-                      label: 'Mercedes',
-                    },
-                    {
-                      value: 'audi',
-                      label: 'Audi',
-                    },
-                  ],
-                },
-                texts: {
-                  label: 'Checkbox',
-                },
-                validators: [],
-              },
-              {
-                input_type: FIELDS.SELECT,
-                order: 2,
-                required: true,
-                slug: 'select-field',
-                attributes: {
-                  default_value: '2',
-                  options: [
-                    {
-                      value: '1',
-                      label: 'One',
-                    },
-                    {
-                      value: '2',
-                      label: 'Two',
-                    },
-                    {
-                      value: '3',
-                      label: 'Three',
-                    },
-                    {
-                      value: '4',
-                      label: 'Four',
-                    },
-                    {
-                      value: 'Very long message',
-                      label: 'Very long message, this is a very long message',
-                    },
-                  ],
-                },
-                texts: {
-                  label: 'Select',
-                  placeholder_text: 'Please select option',
-                },
-                validators: [],
-              },
-              {
-                input_type: FIELDS.TEXT,
-                order: 3,
-                slug: 'first-name-field',
-                texts: {
-                  label: 'First name',
-                  help_text: 'Please input your name here',
-                  placeholder_text: 'First name',
-                  // required_text: 'This field is absolutely required',
-                },
-                required: true,
-                validators: [
-                  {
-                    max_length: 30,
-                    texts: {
-                      text: 'Maximum number of length is 30',
-                    },
-                  },
-                ],
-              },
-              {
-                input_type: FIELDS.TEXT,
-                order: 4,
-                slug: 'text-field',
-                texts: {
-                  label: 'Text field',
-                  placeholder_text: 'Free text',
-                  required_text: 'This field is required',
-                },
-                required: true,
-                validators: [
-                  {
-                    min_length: 5,
-                    texts: {
-                      text: 'This field should be at least 5 characters long',
-                    },
-                  },
-                  {
-                    max_length: 15,
-                  },
-                ],
-              },
-              {
-                input_type: FIELDS.EMAIL,
-                order: 5,
-                slug: 'email-field',
-                texts: {
-                  label: 'Email',
-                  placeholder_text: 'Email',
-                },
-              },
-              {
-                input_type: FIELDS.NUMBER,
-                order: 6,
-                affix: 'PREFIX',
-                slug: 'number-field',
-                texts: {
-                  label: 'Number',
-                  affix_value: 'NOK',
-                  placeholder_text: 'Number',
-                },
-                validators: [
-                  {
-                    minimum: 1,
-                  },
-                  {
-                    maximum: 12,
-                  },
-                ],
-              },
-              {
-                input_type: FIELDS.RANGE,
-                order: 7,
-                affix: 'SUFFIX',
-                slug: 'range-field',
-                attributes: {
-                  default_value: '50',
-                  step: 10,
-                },
-                texts: {
-                  label: 'Slider',
-                  affix_value: 'NOK',
-                  placeholder_text: 'Slider',
-                },
-                validators: [
-                  {
-                    minimum: 1,
-                  },
-                  {
-                    maximum: 100,
-                  },
-                ],
-              },
-            ],
-          },
-        },
-      ],
-    },
-  },
-};
-FormActive.play = async ({ canvasElement }) => {
-  await within(canvasElement).findByText('Please input your name here', undefined, { timeout: 5000 });
-  const textPlaceholderValue = 'Free text';
-  const textInput = await within(canvasElement).findByPlaceholderText(textPlaceholderValue);
-  await userEvent.type(textInput, 'This');
-  await expect(textInput.value).toBe('This');
-  await fireEvent(await within(canvasElement).getByRole('button', { name: /submit/i }), new MouseEvent('click'));
-  // await within(canvasElement).findByText('This field is absolutely required');
-  await within(canvasElement).findByText('This field should be at least 5 characters long');
-  const textInputStyle = window.getComputedStyle(textInput);
-  expect(textInputStyle.border).not.toContain('#00000000');
-  expect(textInputStyle.border).not.toContain('transparent');
-  await userEvent.type(textInput, ' is too long');
-  await expect(textInput.value).toBe('This is too lon');
-  const emailPlaceholderValue = 'Email';
-  const emailInput = await within(canvasElement).findByPlaceholderText(emailPlaceholderValue);
-  await userEvent.type(emailInput, 'this@is@not@an@email');
-
-  const chatBody = await within(canvasElement).findByTestId('chat-body-container');
-  await wait(300); // wait for the autoscroll to finish, so we can bottom for the Chromatic snapshot
-  fireEvent.scroll(chatBody, { target: { scrollTop: chatBody.clientHeight } });
-};
-
-export const FormActive2 = Template.bind({});
-FormActive2.parameters = {
-  ...defaultParameters,
-  initialStateModifier: {
-    ...defaultParameters.initialStateModifier,
-    messages: {
-      chatMessages: [
-        {
-          chat_source: 'web',
-          chat_language_code: 'en',
-          from_bot: true,
-          sender: 'BOT',
-          message: '',
-          message_format: 'txt',
-          buttons: [],
-          created: '2022-06-15T19:03:46.186495Z',
-          id: '1',
-          form: {
-            submission_id: 'submissionId',
-            id: 'formId',
-            dialogue_id: '2',
-            submit_dialogue_id: 'c0d685d3-3f11-41b8-9cfd-e35d54df2c95',
-            abandon_dialogue_id: 'b1cde0f3-0715-48eb-8482-a9355fa11ba8',
-            languageCode: 'en',
-            texts: {
-              title: 'This is a form',
-              error_text: 'There was an error around here',
-              submit_button_text: 'Submit',
-              cancel_button_text: 'Exit',
-              unanswered_text: 'You failed to answer this form',
-              cancel_text: 'You have cancelled/exited this form',
-            },
-            fields: [
-              {
-                input_type: FIELDS.SELECT,
-                order: 5,
-                required: true,
-                slug: 'select-field',
-                attributes: {
-                  default_value: '2',
-                  options: [
-                    {
-                      value: '1',
-                      label: 'One',
-                    },
-                    {
-                      value: '2',
-                      label: 'Two',
-                    },
-                    {
-                      value: '3',
-                      label: 'Three',
-                    },
-                    {
-                      value: '4',
-                      label: 'Four',
-                    },
-                    {
-                      value: 'Very long message',
-                      label: 'Very long message, this is a very long message',
-                    },
-                  ],
-                },
-                texts: {
-                  label: 'Select',
-                  placeholder_text: 'Please select option',
-                },
-                validators: [],
-              },
-              {
-                input_type: FIELDS.CHECKBOX,
-                order: 6,
-                required: true,
-                slug: 'checkbox-cars',
-                attributes: {
-                  options: [
-                    {
-                      value: 'volvo',
-                      label: 'Volvo',
-                    },
-                    {
-                      value: 'mercedes',
-                      label: 'Mercedes',
-                    },
-                    {
-                      value: 'Very long text',
-                      label:
-                        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-                    },
-                  ],
-                },
-                texts: {
-                  label: 'Checkbox',
-                },
-                validators: [],
-              },
-              {
-                input_type: FIELDS.CHECKBOX,
-                order: 6,
-                required: true,
-                slug: 'checkbox-terms',
-                attributes: {
-                  options: [
-                    {
-                      value: 'terms',
-                      label: 'Terms and conditions',
-                    },
-                  ],
-                },
-                texts: {
-                  label: 'Accept our terms to continue',
-                },
-                validators: [],
-              },
-            ],
-          },
-        },
-      ],
-    },
-  },
-};
-FormActive2.play = async ({ canvasElement }) => {
-  await within(canvasElement).findByText('Submit', undefined, { timeout: 5000 });
-  await fireEvent(await within(canvasElement).getByRole('button', { name: /submit/i }), new MouseEvent('click'));
-
-  const selectPlaceholderValue = 'Please select option';
-  const selectInput = await within(canvasElement).findByPlaceholderText(selectPlaceholderValue);
-  const selectInputStyle = window.getComputedStyle(selectInput);
-  expect(selectInputStyle.border).not.toContain('#00000000');
-  expect(selectInputStyle.border).not.toContain('transparent');
-  await wait(10); // This fixes inconsistent test results due to composer autofocus
-  await userEvent.selectOptions(selectInput, 'Very long message');
-  await expect(selectInputStyle.border).toContain('rgba(0, 0, 0, 0)');
-
-  const checkboxTerms = await within(canvasElement).findByLabelText('Terms and conditions');
-  await userEvent.click(checkboxTerms);
-
-  const chatBody = await within(canvasElement).findByTestId('chat-body-container');
-  await wait(300); // wait for the autoscroll to finish, so we can bottom for the Chromatic snapshot
-  fireEvent.scroll(chatBody, { target: { scrollTop: chatBody.clientHeight } });
-};
-
-export const FormActive3 = Template.bind({});
-FormActive3.parameters = {
-  ...defaultParameters,
-  initialStateModifier: {
-    ...defaultParameters.initialStateModifier,
-    messages: {
-      chatMessages: [
-        {
-          chat_source: 'web',
-          chat_language_code: 'en',
-          from_bot: true,
-          sender: 'BOT',
-          message: '',
-          message_format: 'txt',
-          buttons: [],
-          created: '2022-06-15T19:03:46.186495Z',
-          id: '1',
-          form: {
-            submission_id: 'submissionId',
-            id: 'formId',
-            dialogue_id: '2',
-            submit_dialogue_id: 'c0d685d3-3f11-41b8-9cfd-e35d54df2c95',
-            abandon_dialogue_id: 'b1cde0f3-0715-48eb-8482-a9355fa11ba8',
-            languageCode: 'en',
-            texts: {
-              title: 'This is a form',
-              error_text: 'There was an error around here',
-              submit_button_text: 'Submit',
-              cancel_button_text: 'Exit',
-              unanswered_text: 'You failed to answer this form',
-              cancel_text: 'You have cancelled/exited this form',
-            },
-            fields: [
-              {
-                input_type: FIELDS.RADIO,
-                order: 1,
-                required: true,
-                slug: 'radui-icecream-option',
-                attributes: {
-                  options: [
-                    {
-                      value: 'chocolate',
-                      label: 'Chocolate',
-                    },
-                    {
-                      value: 'vanilla',
-                      label: 'Vanilla',
-                    },
-                  ],
-                },
-                texts: {
-                  label: 'Please select an icecream flavour.',
-                },
-                validators: [],
-              },
-              {
-                input_type: FIELDS.RADIO,
-                order: 2,
-                required: true,
-                slug: 'radui-payment-method',
-                attributes: {
-                  options: [
-                    {
-                      value: 'paypal',
-                      label: 'Paypal',
-                    },
-                    {
-                      value: 'Debit',
-                      label: 'Debit',
-                    },
-                  ],
-                },
-                texts: {
-                  label: 'Please select a way to pay.',
-                },
-                validators: [],
-              },
-            ],
-          },
-        },
-      ],
-    },
-  },
-};
-FormActive3.play = async ({ canvasElement }) => {
-  await within(canvasElement).findByText('Submit', undefined, { timeout: 5000 });
-  await fireEvent(await within(canvasElement).getByRole('button', { name: /submit/i }), new MouseEvent('click'));
-
-  const checkboxTerms = await within(canvasElement).findByLabelText('Debit');
-  await userEvent.click(checkboxTerms);
-
-  const chatBody = await within(canvasElement).findByTestId('chat-body-container');
-  await wait(300); // wait for the autoscroll to finish, so we can bottom for the Chromatic snapshot
-  fireEvent.scroll(chatBody, { target: { scrollTop: chatBody.clientHeight } });
-};
-
-export const FormWithoutTitle = Template.bind({});
-FormWithoutTitle.parameters = {
-  ...defaultParameters,
-  initialStateModifier: {
-    ...defaultParameters.initialStateModifier,
-    messages: {
-      ...FormActive.parameters.initialStateModifier.messages,
-      chatMessages: [
-        {
-          chat_source: 'web',
-          chat_language_code: 'en',
-          from_bot: true,
-          sender: 'BOT',
-          message: '',
-          message_format: 'txt',
-          buttons: [],
-          created: '2022-06-15T19:03:46.186495Z',
-          id: '1',
-          form: {
-            submission_id: 'submissionId',
-            id: 'formId',
-            dialogue_id: '2',
-            submit_dialogue_id: 'c0d685d3-3f11-41b8-9cfd-e35d54df2c95',
-            abandon_dialogue_id: 'b1cde0f3-0715-48eb-8482-a9355fa11ba8',
-            languageCode: 'en',
-            texts: {
-              title: '',
-              error_text: 'There was an error around here',
-              submit_button_text: 'Submit',
-              cancel_button_text: 'Exit',
-              unanswered_text: 'You failed to answer this form',
-              cancel_text: 'You have cancelled/exited this form',
-            },
-            fields: [
-              {
-                input_type: FIELDS.TEXT,
-                order: 0,
-                slug: 'first-name-field',
-                texts: {
-                  label: 'First name',
-                  help_text: 'Please input your name here',
-                  placeholder_text: 'First name',
-                },
-                required: true,
-                validators: [
-                  {
-                    max_length: 30,
-                    text: 'Maximum number of length is 30',
-                  },
-                ],
-              },
-            ],
-          },
-        },
-      ],
-    },
-  },
-};
-
-export const FormSuccess = Template.bind({});
-FormSuccess.parameters = {
-  ...defaultParameters,
-  initialStateModifier: {
-    ...defaultParameters.initialStateModifier,
-    messages: {
-      ...FormActive.parameters.initialStateModifier.messages,
-      forms: {
-        // prettier-ignore
-        "formId_submission_submissionId": {
-          formKey: 'formId_submission_submissionId',
-          formId: 'formId',
-          formSubmitState: 'SUBMITTED',
-          formCompleteMessage: 'Should not display',
-          formValue: {
-            'should-not-display': 'Should not display',
-            'first-name-field': 'First Name',
-            'text-field': 'Text',
-            'email-field': 'email@kindly.ai',
-            'number-field': '42',
-            'range-field': '7',
-            'select-field': '2',
-            'checkbox-field': 'audi'
-          },
-        },
-      },
-    },
-  },
-};
-
-FormSuccess.play = async ({ canvasElement }) => {
-  const selectFieldLabel = await within(canvasElement).findByText('Two');
-  await expect(selectFieldLabel).toBeInTheDocument();
-  const checkboxFieldLabel = await within(canvasElement).findByText('Audi');
-  await expect(checkboxFieldLabel).toBeInTheDocument();
-  const shouldNotDisplay = await within(canvasElement).queryByText('Should not display');
-  await expect(shouldNotDisplay).not.toBeInTheDocument();
-};
-
-export const FormErrored = Template.bind({});
-FormErrored.parameters = {
-  ...defaultParameters,
-  initialStateModifier: {
-    ...defaultParameters.initialStateModifier,
-    messages: {
-      ...FormActive.parameters.initialStateModifier.messages,
-      forms: {
-        // prettier-ignore
-        "formId_submission_submissionId": {
-          formKey: 'formId_submission_submissionId',
-          formId: 'formId',
-          formSubmitState: 'ERRORED',
-          formCompleteMessage: 'Something went wrong',
-          formValue: {
-            'text-field': 'Text',
-          },
-        },
-      },
-    },
-  },
-};
-
-export const FormCanceled = Template.bind({});
-FormCanceled.parameters = {
-  ...defaultParameters,
-  initialStateModifier: {
-    ...defaultParameters.initialStateModifier,
-    messages: {
-      ...FormActive.parameters.initialStateModifier.messages,
-      forms: {
-        // prettier-ignore
-        "formId_submission_submissionId": {
-          formKey: 'formId_submission_submissionId',
-          formId: 'formId',
-          formSubmitState: 'CANCELED',
-          formCompleteMessage: 'This form was canceled',
-          formValue: {
-            'text-field': 'Text',
-          },
-        },
-      },
-    },
-  },
-};
-
-export const FormUnanswered = Template.bind({});
-FormUnanswered.parameters = {
-  ...defaultParameters,
-  initialStateModifier: {
-    ...defaultParameters.initialStateModifier,
-    messages: {
-      ...FormActive.parameters.initialStateModifier.messages,
-      forms: {
-        // prettier-ignore
-        "formId_submission_submissionId": {
-          formKey: 'formId_submission_submissionId',
-          formId: 'formId',
-          formSubmitState: 'UNANSWERED',
-          formCompleteMessage: 'This form was unanswered',
-          formValue: {
-            'text-field': 'Text',
-          },
-        },
-      },
-    },
-  },
-};