@constructor-io/constructorio-ui-quizzes 1.9.9 → 1.10.0

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 (86) hide show
  1. package/README.md +2 -3
  2. package/dist/constructorio-ui-quizzes-bundled.js +14 -14
  3. package/lib/cjs/components/CioQuiz/actions.js +1 -0
  4. package/lib/cjs/components/CioQuiz/index.js +10 -6
  5. package/lib/cjs/components/CioQuiz/quizApiReducer.js +4 -1
  6. package/lib/cjs/components/ResultContainer/ResultContainer.js +25 -19
  7. package/lib/cjs/components/ShareButton/ShareButton.js +17 -0
  8. package/lib/cjs/components/ShareButton/ShareSVG.js +11 -0
  9. package/lib/cjs/components/ShareResultsModal/AlertCircleSVG.js +11 -0
  10. package/lib/cjs/components/ShareResultsModal/CheckMarkCircleSVG.js +10 -0
  11. package/lib/cjs/components/ShareResultsModal/CloseSVG.js +10 -0
  12. package/lib/cjs/components/ShareResultsModal/EmailField.js +50 -0
  13. package/lib/cjs/components/ShareResultsModal/LinkField.js +30 -0
  14. package/lib/cjs/components/ShareResultsModal/ShareResultsModal.js +24 -0
  15. package/lib/cjs/constants.js +3 -42
  16. package/lib/cjs/hooks/useConsoleErrors.js +4 -8
  17. package/lib/cjs/hooks/usePropsGetters/index.js +2 -0
  18. package/lib/cjs/hooks/useQueryParams.js +31 -0
  19. package/lib/cjs/hooks/useQuiz.js +3 -3
  20. package/lib/cjs/hooks/useQuizEvents/index.js +10 -5
  21. package/lib/cjs/hooks/useQuizEvents/useQuizResetClick.js +15 -2
  22. package/lib/cjs/hooks/useQuizState/useQuizApiState.js +27 -2
  23. package/lib/cjs/hooks/useShareResultsLink.js +18 -0
  24. package/lib/cjs/index.js +3 -1
  25. package/lib/cjs/services/index.js +3 -1
  26. package/lib/cjs/stories/Quiz/argTypes.js +258 -7
  27. package/lib/cjs/utils.js +1 -0
  28. package/lib/cjs/version.js +1 -1
  29. package/lib/mjs/components/CioQuiz/actions.js +1 -0
  30. package/lib/mjs/components/CioQuiz/index.js +10 -6
  31. package/lib/mjs/components/CioQuiz/quizApiReducer.js +9 -0
  32. package/lib/mjs/components/ResultContainer/ResultContainer.js +25 -19
  33. package/lib/mjs/components/ShareButton/ShareButton.js +14 -0
  34. package/lib/mjs/components/ShareButton/ShareSVG.js +7 -0
  35. package/lib/mjs/components/ShareResultsModal/AlertCircleSVG.js +7 -0
  36. package/lib/mjs/components/ShareResultsModal/CheckMarkCircleSVG.js +6 -0
  37. package/lib/mjs/components/ShareResultsModal/CloseSVG.js +6 -0
  38. package/lib/mjs/components/ShareResultsModal/EmailField.js +46 -0
  39. package/lib/mjs/components/ShareResultsModal/LinkField.js +26 -0
  40. package/lib/mjs/components/ShareResultsModal/ShareResultsModal.js +20 -0
  41. package/lib/mjs/constants.js +2 -41
  42. package/lib/mjs/hooks/useConsoleErrors.js +4 -8
  43. package/lib/mjs/hooks/usePropsGetters/index.js +2 -0
  44. package/lib/mjs/hooks/useQueryParams.js +29 -0
  45. package/lib/mjs/hooks/useQuiz.js +3 -3
  46. package/lib/mjs/hooks/useQuizEvents/index.js +10 -5
  47. package/lib/mjs/hooks/useQuizEvents/useQuizResetClick.js +14 -2
  48. package/lib/mjs/hooks/useQuizState/useQuizApiState.js +28 -3
  49. package/lib/mjs/hooks/useShareResultsLink.js +14 -0
  50. package/lib/mjs/index.js +1 -0
  51. package/lib/mjs/services/index.js +1 -0
  52. package/lib/mjs/stories/Quiz/argTypes.js +257 -6
  53. package/lib/mjs/utils.js +1 -0
  54. package/lib/mjs/version.js +1 -1
  55. package/lib/styles.css +194 -2
  56. package/lib/types/components/CioQuiz/actions.d.ts +7 -3
  57. package/lib/types/components/CioQuiz/context.d.ts +2 -1
  58. package/lib/types/components/CioQuiz/quizApiReducer.d.ts +2 -2
  59. package/lib/types/components/ResultCard/ResultCard.d.ts +2 -2
  60. package/lib/types/components/ResultContainer/ResultContainer.d.ts +5 -3
  61. package/lib/types/components/Results/Results.d.ts +2 -2
  62. package/lib/types/components/ShareButton/ShareButton.d.ts +7 -0
  63. package/lib/types/components/ShareButton/ShareSVG.d.ts +2 -0
  64. package/lib/types/components/ShareResultsModal/AlertCircleSVG.d.ts +2 -0
  65. package/lib/types/components/ShareResultsModal/CheckMarkCircleSVG.d.ts +2 -0
  66. package/lib/types/components/ShareResultsModal/CloseSVG.d.ts +2 -0
  67. package/lib/types/components/ShareResultsModal/EmailField.d.ts +6 -0
  68. package/lib/types/components/ShareResultsModal/LinkField.d.ts +6 -0
  69. package/lib/types/components/ShareResultsModal/ShareResultsModal.d.ts +9 -0
  70. package/lib/types/constants.d.ts +1 -5
  71. package/lib/types/hooks/usePropsGetters/index.d.ts +2 -1
  72. package/lib/types/hooks/useQueryParams.d.ts +7 -0
  73. package/lib/types/hooks/useQuizEvents/useQuizNextClick.d.ts +2 -2
  74. package/lib/types/hooks/useQuizEvents/useQuizResetClick.d.ts +9 -2
  75. package/lib/types/hooks/useQuizEvents/useQuizSkipClick.d.ts +2 -2
  76. package/lib/types/hooks/useShareResultsLink.d.ts +2 -0
  77. package/lib/types/index.d.ts +1 -0
  78. package/lib/types/services/index.d.ts +6 -5
  79. package/lib/types/stories/Quiz/argTypes.d.ts +253 -6
  80. package/lib/types/types.d.ts +32 -14
  81. package/lib/types/utils.d.ts +2 -1
  82. package/lib/types/version.d.ts +1 -1
  83. package/package.json +2 -2
  84. package/lib/cjs/stories/Quiz/tests/mocks.js +0 -170
  85. package/lib/mjs/stories/Quiz/tests/mocks.js +0 -198
  86. package/lib/types/stories/Quiz/tests/mocks.d.ts +0 -44
@@ -1,198 +0,0 @@
1
- import { quizSessionStateKey, RequestStates } from '../../../constants';
2
- import useOpenTextInputProps from '../../../hooks/usePropsGetters/useOpenTextInputProps';
3
- import useCoverQuestionProps from '../../../hooks/usePropsGetters/useCoverQuestionProps';
4
- import useSelectInputProps from '../../../hooks/usePropsGetters/useSelectInputProps';
5
- export const getMockQuestion = (type) => ({
6
- id: 1,
7
- title: 'This is question title',
8
- description: 'This is question description',
9
- cta_text: 'Continue',
10
- type,
11
- input_placeholder: 'Answer here...',
12
- });
13
- const getMockImages = () => ({
14
- images: {
15
- primary_url: 'https://demo.constructor.io/sandbox_files/farmstandquizassets/HiThereNameInput.png',
16
- },
17
- });
18
- export const getMockQuestionWithImage = (type) => ({
19
- ...getMockQuestion(type),
20
- ...getMockImages(),
21
- });
22
- const getMockOption = (id, value) => ({
23
- id,
24
- value,
25
- attribute: {
26
- name: value,
27
- value,
28
- },
29
- });
30
- const getMockOptionWithImage = (id, value) => ({
31
- ...getMockOption(id, value),
32
- ...getMockImages(),
33
- });
34
- export const questionOptionsWithImages = [
35
- {
36
- ...getMockOptionWithImage(0, 'coffee'),
37
- },
38
- {
39
- ...getMockOptionWithImage(1, 'tea'),
40
- },
41
- {
42
- ...getMockOptionWithImage(2, 'water'),
43
- },
44
- ];
45
- export const questionOptions = [
46
- {
47
- ...getMockOption(0, 'coffee'),
48
- },
49
- {
50
- ...getMockOption(1, 'tea'),
51
- },
52
- {
53
- ...getMockOption(2, 'water'),
54
- },
55
- ];
56
- export const getMockState = (question) => ({
57
- answers: {
58
- inputs: {
59
- 1: {
60
- type: question?.type,
61
- value: '',
62
- },
63
- }, // Key is the question Id and value is the answer input
64
- },
65
- quiz: {
66
- requestState: RequestStates.Success,
67
- versionId: '',
68
- sessionId: '',
69
- currentQuestion: {
70
- next_question: question,
71
- isFirstQuestion: false,
72
- isOpenQuestion: question?.type === 'open',
73
- isCoverQuestion: question?.type === 'cover',
74
- isSingleQuestion: question?.type === 'single',
75
- isMultipleQuestion: question?.type === 'multiple',
76
- isSelectQuestion: question?.type === 'single',
77
- total_questions: 1,
78
- },
79
- results: {
80
- response: {
81
- results: [
82
- {
83
- value: 'This is a result card item',
84
- data: {
85
- id: '0',
86
- price: 100,
87
- ratingCount: '12',
88
- ratingScore: '4',
89
- image_url: 'https://demo.constructor.io/sandbox_files/farmstandquizassets/HiThereNameInput.png',
90
- discount: '59.9',
91
- },
92
- },
93
- {
94
- value: 'This is a result card item',
95
- data: {
96
- id: '1',
97
- price: 200,
98
- salePrice: 150,
99
- ratingCount: '6',
100
- ratingScore: '3',
101
- image_url: 'https://demo.constructor.io/sandbox_files/farmstandquizassets/HiThereNameInput.png',
102
- },
103
- },
104
- {
105
- value: 'This is a result card item',
106
- data: {
107
- id: '2',
108
- price: 300,
109
- salePrice: 250,
110
- ratingCount: '2',
111
- ratingScore: '5',
112
- image_url: 'https://demo.constructor.io/sandbox_files/farmstandquizassets/HiThereNameInput.png',
113
- },
114
- },
115
- ],
116
- facets: [],
117
- groups: [],
118
- sort_options: [],
119
- refined_content: [],
120
- total_num_results: 10,
121
- features: [],
122
- result_sources: {},
123
- },
124
- quiz_id: '',
125
- quiz_session_id: '',
126
- quiz_version_id: '',
127
- quiz_selected_options: [
128
- { value: 'Chocolate', has_attribute: true },
129
- { value: 'Medium', has_attribute: true },
130
- ],
131
- },
132
- selectedOptionsWithAttributes: ['Chocolate', 'Medium'],
133
- },
134
- quizSessionStorageState: {
135
- key: quizSessionStateKey,
136
- skipToResults: true,
137
- hasSessionStorageState: () => true,
138
- },
139
- });
140
- const mockElementProps = {
141
- className: '',
142
- type: 'submit',
143
- onClick: () => { },
144
- onChange: () => { },
145
- onKeyDown: () => { },
146
- role: 'button',
147
- tabIndex: 0,
148
- key: 0,
149
- style: {},
150
- placeholder: '',
151
- value: '',
152
- };
153
- export const useMockContextValue = (question) => {
154
- const getOpenTextInputProps = useOpenTextInputProps(() => { }, () => { }, question);
155
- const getCoverQuestionProps = useCoverQuestionProps(() => { }, question);
156
- const getSelectInputProps = useSelectInputProps(() => { }, () => { }, question);
157
- return {
158
- state: getMockState(question),
159
- getCoverQuestionProps,
160
- getOpenTextInputProps,
161
- getSelectInputProps,
162
- getAddToCartButtonProps: () => ({
163
- ...mockElementProps,
164
- className: 'cio-result-card-cta-button',
165
- }),
166
- getAddToFavoritesButtonProps: () => ({
167
- ...mockElementProps,
168
- className: 'cio-result-card-favorites-button',
169
- }),
170
- getHydrateQuizButtonProps: () => ({
171
- ...mockElementProps,
172
- className: 'cio-question-cta-button',
173
- }),
174
- getNextQuestionButtonProps: () => ({
175
- ...mockElementProps,
176
- className: 'cio-question-cta-button',
177
- }),
178
- getSkipQuestionButtonProps: () => ({
179
- ...mockElementProps,
180
- className: 'cio-question-skip-button',
181
- }),
182
- getPreviousQuestionButtonProps: () => ({
183
- ...mockElementProps,
184
- className: 'cio-question-back-button',
185
- }),
186
- getQuizImageProps: () => mockElementProps,
187
- getQuizResultButtonProps: () => mockElementProps,
188
- getQuizResultLinkProps: () => mockElementProps,
189
- getResetQuizButtonProps: () => ({ ...mockElementProps, className: 'cio-question-redo-button' }),
190
- primaryColorStyles: {
191
- '--primary-color-h': '12',
192
- '--primary-color-s': '14',
193
- '--primary-color-l': '14',
194
- },
195
- customClickItemCallback: false,
196
- customAddToFavoritesCallback: true,
197
- };
198
- };
@@ -1,44 +0,0 @@
1
- import { Question } from '@constructor-io/constructorio-client-javascript/lib/types';
2
- import { QuizReturnState } from '../../../types';
3
- import { QuestionTypes } from '../../../components/CioQuiz/actions';
4
- import { QuizContextValue } from '../../../components/CioQuiz/context';
5
- export declare const getMockQuestion: (type: `${QuestionTypes}`) => {
6
- id: number;
7
- title: string;
8
- description: string;
9
- cta_text: string;
10
- type: "reset" | "open" | "cover" | "single" | "multiple" | "next" | "skip" | "back" | "hydrate" | "complete";
11
- input_placeholder: string;
12
- };
13
- export declare const getMockQuestionWithImage: (type: QuestionTypes) => {
14
- images: {
15
- primary_url: string;
16
- };
17
- id: number;
18
- title: string;
19
- description: string;
20
- cta_text: string;
21
- type: "reset" | "open" | "cover" | "single" | "multiple" | "next" | "skip" | "back" | "hydrate" | "complete";
22
- input_placeholder: string;
23
- };
24
- export declare const questionOptionsWithImages: {
25
- images: {
26
- primary_url: string;
27
- };
28
- id: any;
29
- value: any;
30
- attribute: {
31
- name: any;
32
- value: any;
33
- };
34
- }[];
35
- export declare const questionOptions: {
36
- id: any;
37
- value: any;
38
- attribute: {
39
- name: any;
40
- value: any;
41
- };
42
- }[];
43
- export declare const getMockState: (question?: Question) => QuizReturnState;
44
- export declare const useMockContextValue: (question?: Question) => QuizContextValue;