@kindly/react-chat 2.39.4 → 2.39.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.js +4 -4
  2. package/dist/index.js.map +1 -1
  3. package/package.json +2 -2
  4. package/stories/screens.stories/Chat.stories.jsx +59 -162
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kindly/react-chat",
3
- "version": "2.39.4",
3
+ "version": "2.39.5",
4
4
  "description": "Kindly Chat react component",
5
5
  "repository": "https://github.com/kindly-ai/kindly-chat/tree/main/packages/react-chat",
6
6
  "main": "dist/index.js",
@@ -126,5 +126,5 @@
126
126
  "silent": true,
127
127
  "webpackConfig": "./webpack.config.js"
128
128
  },
129
- "gitHead": "d7deb45ab7212650f94d159204e63e1d869ec161"
129
+ "gitHead": "cff703081966dda917c36b8c8dc60d42e3e61cec"
130
130
  }
package/stories/screens.stories/Chat.stories.jsx CHANGED
@@ -704,191 +704,70 @@ Form.parameters = {
704
704
  message_format: 'txt',
705
705
  buttons: [],
706
706
  created: '2022-06-15T19:03:46.186495Z',
707
- title: '',
708
707
  id: '1',
709
708
  form: {
710
- id: 'dddsauhi',
711
- dialogue_id: 'ddda',
712
- slug: 'ddas', // Auto generated by the backend, possibly humanly readable and unique
709
+ submission_id: '1',
710
+ id: '2',
711
+ dialogue_id: '2',
712
+ slug: 'this-is-a-form',
713
713
  submit_dialogue_id: 'c0d685d3-3f11-41b8-9cfd-e35d54df2c95',
714
714
  abandon_dialogue_id: 'b1cde0f3-0715-48eb-8482-a9355fa11ba8',
715
- texts: [
716
- {
717
- id: 'hoho',
718
- languageCode: 'en',
719
- title: 'Form Title',
720
- abandon_dialogue_message: 'Form exited, please ask something else',
721
- unanswered_dialogue_message: 'Form unanswered',
722
- cancel_button_text: 'Cancel',
723
- send_button_text: 'Submit',
724
- },
725
- ],
715
+ languageCode: 'en',
716
+ texts: {
717
+ title: 'This is a form',
718
+ error_text: 'There was an error around here',
719
+ submit_button_text: 'Submit',
720
+ cancel_button_text: 'Exit',
721
+ unanswered_text: 'You failed to answer this form',
722
+ cancel_text: 'You have cancelled/exited this form',
723
+ },
726
724
  fields: [
727
725
  {
728
- type: 'text',
726
+ input_type: 'text',
729
727
  order: 0,
730
- slug: 'gigi', // Auto generated by the backend, possibly humanly readable and unique
731
- texts: [
732
- {
733
- id: 'gfd',
734
- languageCode: 'en',
735
- label: 'Name',
736
- placeholder: 'Your name',
737
- helper_text: 'Please fill in your full name here',
738
- },
739
- ],
728
+ slug: 'first-name-field',
729
+ texts: {
730
+ label: 'First name',
731
+ help_text: 'Please input your name here',
732
+ placeholder_text: 'First name',
733
+ required_text: 'This field is absolutely required',
734
+ },
735
+ required: true,
740
736
  validators: [
741
737
  {
742
- required: true,
743
- texts: [
744
- {
745
- id: 'gruh',
746
- languageCode: 'en',
747
- message: undefined,
748
- },
749
- ],
750
- },
751
- {
752
- maxLength: 30,
753
- texts: [
754
- {
755
- id: 'duh',
756
- languageCode: 'en',
757
- message: 'Maximum number of length is 30',
758
- },
759
- ],
738
+ max_length: 30,
739
+ texts: 'Maximum number of length is 30',
760
740
  },
761
741
  ],
762
742
  },
763
743
  {
764
- type: 'email',
744
+ input_type: 'text',
765
745
  order: 1,
766
- slug: 'bras', // Auto generated by the backend, possibly humanly readable and unique
767
- texts: [
768
- {
769
- id: 'tigg',
770
- languageCode: 'en',
771
- label: 'Email',
772
- placeholder: 'Your email',
773
- helper_text: 'Please fill in your email address here so we can contact you',
774
- },
775
- ],
746
+ slug: 'text-field',
747
+ texts: {
748
+ label: 'Text field',
749
+ placeholder_text: 'Free text',
750
+ required_text: 'This field is required',
751
+ },
752
+ required: true,
776
753
  validators: [
777
754
  {
778
- required: true,
779
- texts: [
780
- {
781
- id: 'gigu',
782
- languageCode: 'en',
783
- message: 'This field is required',
784
- },
785
- ],
755
+ min_length: 5,
756
+ text: 'This field should be at least 5 characters long',
786
757
  },
787
758
  {
788
- pattern: /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/.toString(),
789
- texts: [
790
- {
791
- id: 'dada',
792
- languageCode: 'en',
793
- message: 'Please provide valid email',
794
- },
795
- ],
759
+ max_length: 15,
796
760
  },
797
761
  ],
798
762
  },
799
763
  {
800
- type: 'range',
764
+ input_type: 'email',
801
765
  order: 2,
802
- affix: 'PREFIX',
803
- min: 10,
804
- max: 100,
805
- step: 10,
806
- slug: 'yoyo', // Auto generated by the backend, possibly humanly readable and unique
807
- texts: [
808
- {
809
- id: 'blabla',
810
- languageCode: 'en',
811
- label: 'Please select a value',
812
- helper_text: 'Please fill in your full name here',
813
- affix_value: '$',
814
- },
815
- ],
816
- validators: [],
817
- },
818
- {
819
- type: 'checkbox', // not included in the v1
820
- order: 3,
821
- slug: 'dodo', // Auto generated by the backend, possibly humanly readable and unique
822
- texts: [
823
- {
824
- id: 'gogo',
825
- languageCode: 'en',
826
- label: 'What animals do you like?',
827
- helper_text: '',
828
- },
829
- ],
830
- list: [
831
- {
832
- slug: 'hhh', // Not sure if this needs one
833
- value: 'cows',
834
- order: 0,
835
- texts: [
836
- {
837
- id: 'gras',
838
- languageCode: 'en',
839
- label: 'I like cows',
840
- },
841
- ],
842
- },
843
- {
844
- slug: 'ddsad',
845
- value: 'snakes',
846
- order: 1,
847
- texts: [
848
- {
849
- id: 'grq',
850
- languageCode: 'en',
851
- label: 'I like snakes',
852
- },
853
- ],
854
- },
855
- {
856
- slug: 'abv',
857
- value: 'foxes',
858
- order: 2,
859
- texts: [
860
- {
861
- id: 'abc',
862
- languageCode: 'en',
863
- label: 'I like foxes',
864
- },
865
- ],
866
- },
867
- {
868
- slug: '213',
869
- value: 'owls',
870
- order: 3,
871
- texts: [
872
- {
873
- id: '321',
874
- languageCode: 'en',
875
- label: 'I like owls',
876
- },
877
- ],
878
- },
879
- ],
880
- validators: [
881
- {
882
- required: true,
883
- texts: [
884
- {
885
- id: '432',
886
- languageCode: 'en',
887
- message: 'This field is required',
888
- },
889
- ],
890
- },
891
- ],
766
+ slug: 'email-field',
767
+ texts: {
768
+ label: 'Email',
769
+ placeholder_text: 'Email',
770
+ },
892
771
  },
893
772
  ],
894
773
  },
@@ -897,6 +776,24 @@ Form.parameters = {
897
776
  },
898
777
  },
899
778
  };
779
+ Form.play = async () => {
780
+ await screen.findByText('Please input your name here');
781
+ const textPlaceholderValue = 'Free text';
782
+ const textInput = await screen.findByPlaceholderText(textPlaceholderValue);
783
+ await userEvent.type(textInput, 'This');
784
+ await expect(textInput.value).toBe('This');
785
+ await fireEvent(await screen.getByRole('button', { name: /submit/i }), new MouseEvent('click'));
786
+ await screen.findByText('This field is absolutely required');
787
+ await screen.findByText('This field should be at least 5 characters long');
788
+ const textInputStyle = window.getComputedStyle(textInput);
789
+ expect(textInputStyle.border).not.toContain('#00000000');
790
+ expect(textInputStyle.border).not.toContain('transparent');
791
+ await userEvent.type(textInput, ' is too long');
792
+ await expect(textInput.value).toBe('This is too lon');
793
+ const emailPlaceholderValue = 'Email';
794
+ const emailInput = await screen.findByPlaceholderText(emailPlaceholderValue);
795
+ await userEvent.type(emailInput, 'this@is@not@an@email');
796
+ };
900
797
 
901
798
  export const LeaveContactDetails = Template.bind({});
902
799
  LeaveContactDetails.parameters = {