@kindly/react-chat 2.41.6 → 2.42.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kindly/react-chat",
-  "version": "2.41.6",
+  "version": "2.42.0",
   "description": "Kindly Chat react component",
   "repository": "https://github.com/kindly-ai/kindly-chat/tree/main/packages/react-chat",
   "main": "dist/index.js",
@@ -129,5 +129,5 @@
       "pusher-js": "8.0.1"
     }
   },
-  "gitHead": "11707d313e234c7b0869451b803288221d198030"
+  "gitHead": "4b8f2bf59a0cce3540ea8262de8b7393e367239c"
 }

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

@@ -400,6 +400,102 @@ FormActive2.play = async ({ canvasElement }) => {
   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,

package/stories/screens.stories/Chat/index.stories.jsx

@@ -178,6 +178,24 @@ Maintenance.parameters = {
   },
 };
 
+export const Announcement = Template.bind({});
+Announcement.parameters = {
+  botSettings: defaultBotSettings,
+  initialStateModifier: {
+    chatbubble: {
+      active: true,
+      chatHasStarted: true,
+      currentLanguage: 'en',
+    },
+    announcement: {
+      show: true,
+      text: 'Maintenance mode!',
+      url: 'https://example.com',
+      type: 'WARNING',
+    },
+  },
+};
+
 export const HiddenInput = Template.bind({});
 HiddenInput.parameters = {
   botSettings: defaultBotSettings,