gatsby-matrix-theme 25.0.0 → 25.1.1
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.
- package/CHANGELOG.md +16 -0
- package/package.json +1 -1
- package/src/components/molecules/wagering-calculator/index.js +125 -63
- package/src/components/molecules/wagering-calculator/wagering-calculator.module.scss +81 -81
- package/src/components/molecules/wagering-calculator/wagering-calculator.stories.js +18 -0
- package/src/components/molecules/wagering-calculator/wagering-calculator.test.js +18 -0
- package/src/helpers/common.js +13 -0
- package/storybook/public/iframe.html +1 -1
- package/storybook/public/main.acece55b.iframe.bundle.js +1 -0
- package/tests/factories/pages/operator.factory.js +6 -0
- package/storybook/public/main.5d202e0b.iframe.bundle.js +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,19 @@
|
|
|
1
|
+
## [25.1.1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v25.1.0...v25.1.1) (2023-06-02)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* limited reccommended casinos ([aa8b10e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/aa8b10e35c842c62aa5a4167679aa6b7c4cf97f4))
|
|
7
|
+
* limited reccommended casinos ([d9b7741](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d9b77414b46bc6517aefa18f1e79485dfea39409))
|
|
8
|
+
* limited reccommended casinos ([fc23123](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fc231237ac400a603ff169469b92406cf80571ea))
|
|
9
|
+
|
|
10
|
+
# [25.1.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v25.0.0...v25.1.0) (2023-06-02)
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
|
|
15
|
+
* added recommended casinos in wagering calculator ([5cf12f3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5cf12f355428a62c15518fc5ea8160cff2f7fef1))
|
|
16
|
+
|
|
1
17
|
# [25.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v24.0.0...v25.0.0) (2023-05-31)
|
|
2
18
|
|
|
3
19
|
|
package/package.json
CHANGED
|
@@ -4,20 +4,34 @@ import PropTypes from 'prop-types';
|
|
|
4
4
|
import { MdClose } from '@react-icons/all-files/md/MdClose';
|
|
5
5
|
import { AiOutlineQuestionCircle } from '@react-icons/all-files/ai/AiOutlineQuestionCircle';
|
|
6
6
|
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
|
|
7
|
-
import {
|
|
7
|
+
import {
|
|
8
|
+
translate,
|
|
9
|
+
prettyTracker,
|
|
10
|
+
getAltText,
|
|
11
|
+
imagePrettyUrl,
|
|
12
|
+
} from 'gatsby-core-theme/src/helpers/getters';
|
|
13
|
+
import Bonus from 'gatsby-core-theme/src/components/atoms/bonus';
|
|
14
|
+
import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta-button';
|
|
8
15
|
import Button from 'gatsby-core-theme/src/components/atoms/button';
|
|
16
|
+
import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
|
|
17
|
+
import { getRecommendedToplist } from '../../../helpers/common';
|
|
9
18
|
import styles from './wagering-calculator.module.scss';
|
|
10
19
|
|
|
11
20
|
const WageringCalculator = ({
|
|
12
21
|
mainTitle = 'Wagering Requirement Calculator',
|
|
13
22
|
infoIcon,
|
|
14
|
-
infoTitle,
|
|
15
|
-
infoText,
|
|
23
|
+
infoTitle = 'Example: 20x Wagering Requirement',
|
|
24
|
+
infoText = 'Lorem ipsum dolor sit amet consectetur. Pharetra sed etiam placerat interdum ut. Pretium ipsum ultrices interdum condimentum nullam. Suscipit augue placerat laoreet hendrerit dui euismod quam rutrum. Magna in luctus egestas massa erat. Lorem ipsum dolor sit amet consectetur. Pharetra sed etiam placerat interdum ut. Pretium ipsum ultrices interdum condimentum nullam. Suscipit augue placerat laoreet hendrerit dui euismod quam rutrum. Magna in luctus egestas massa erat. Lorem ipsum dolor sit amet consectetur. Pharetra sed etiam placerat interdum ut. Pretium ipsum ultrices interdum condimentum nullam. Suscipit augue placerat laoreet hendrerit dui euismod quam rutrum. Magna in luctus egestas massa erat. Lorem ipsum dolor sit amet consectetur. Pharetra sed etiam placerat interdum ut. Pretium ipsum ultrices interdum condimentum nullam. Suscipit augue placerat laoreet hendrerit dui euismod quam rutrum. Magna in luctus egestas massa erat.',
|
|
25
|
+
pageContext = {},
|
|
16
26
|
}) => {
|
|
17
27
|
const [isInfoOpen, setIsInfoOpen] = useState(false);
|
|
28
|
+
const [isRecommendedOperators, setIsRecommendedOperators] = useState(false);
|
|
18
29
|
const [result, setResult] = useState(null);
|
|
19
30
|
const { translations } = useContext(Context);
|
|
20
31
|
const InfoIcon = infoIcon || AiOutlineQuestionCircle;
|
|
32
|
+
const operators = pageContext.marketSections
|
|
33
|
+
? getRecommendedToplist(pageContext.marketSections)
|
|
34
|
+
: [];
|
|
21
35
|
|
|
22
36
|
const Calculate = ({ target: { elements } }) => {
|
|
23
37
|
// eslint-disable-next-line
|
|
@@ -30,69 +44,111 @@ const WageringCalculator = ({
|
|
|
30
44
|
(100 / Number(elements.wgc_contribution.value))
|
|
31
45
|
)
|
|
32
46
|
);
|
|
47
|
+
setIsRecommendedOperators(true);
|
|
33
48
|
};
|
|
34
49
|
|
|
35
50
|
return (
|
|
36
|
-
<
|
|
37
|
-
className={styles.container}
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
51
|
+
<div>
|
|
52
|
+
<div className={styles.container}>
|
|
53
|
+
<form
|
|
54
|
+
onSubmit={Calculate}
|
|
55
|
+
// eslint-disable-next-line
|
|
56
|
+
action="javascript:void(0);"
|
|
57
|
+
target="_self"
|
|
58
|
+
>
|
|
59
|
+
<h2 className={styles.mainTitle}>
|
|
60
|
+
{mainTitle}
|
|
61
|
+
{infoTitle && infoText && <InfoIcon onClick={() => setIsInfoOpen(true)} />}
|
|
62
|
+
</h2>
|
|
63
|
+
<div className={styles.inputContainer}>
|
|
64
|
+
<label className={styles.label} htmlFor="deposit">
|
|
65
|
+
{translate(translations, 'wagecalc_deposit_amount', 'Deposit amount')}
|
|
66
|
+
</label>
|
|
67
|
+
<input className={styles.input} id="wgc_deposit" type="number" min={0} />
|
|
68
|
+
</div>
|
|
69
|
+
<div className={styles.inputContainer}>
|
|
70
|
+
<label className={styles.label} htmlFor="bonus">
|
|
71
|
+
{translate(translations, 'wagecalc_bonus_amount', 'Bonus amount')}
|
|
72
|
+
</label>
|
|
73
|
+
<input className={styles.input} id="wgc_bonus" type="number" min={0} required />
|
|
74
|
+
</div>
|
|
75
|
+
<div className={styles.inputContainer}>
|
|
76
|
+
<label className={styles.label} htmlFor="wagering">
|
|
77
|
+
{translate(translations, 'wagecalc_wagering', 'Wagering')}
|
|
78
|
+
</label>
|
|
79
|
+
<input className={styles.input} id="wgc_wagering" type="number" min={0} required />
|
|
80
|
+
</div>
|
|
81
|
+
<div className={styles.inputContainer}>
|
|
82
|
+
<select
|
|
83
|
+
className={styles.select}
|
|
84
|
+
id="wgc_calc_select"
|
|
85
|
+
onChange={({ target }) => {
|
|
86
|
+
const deposit = document.getElementById('wgc_deposit');
|
|
87
|
+
deposit.required = target.value !== 'bonus';
|
|
88
|
+
deposit.checkValidity();
|
|
89
|
+
}}
|
|
90
|
+
>
|
|
91
|
+
<option value="bonus">{translate(translations, 'wagecalc_bonus', 'Bonus')}</option>
|
|
92
|
+
<option value="bonus_deposit">
|
|
93
|
+
{translate(translations, 'wagecalc_deposit_bonus', 'Deposit + Bonus')}
|
|
94
|
+
</option>
|
|
95
|
+
</select>
|
|
96
|
+
</div>
|
|
97
|
+
<div className={styles.inputContainer}>
|
|
98
|
+
<label className={styles.label} htmlFor="contribution">
|
|
99
|
+
{translate(translations, 'wagecalc_contribution', 'Contribution %')}
|
|
100
|
+
</label>
|
|
101
|
+
<input className={styles.input} id="wgc_contribution" type="number" min={0} max={100} />
|
|
102
|
+
</div>
|
|
103
|
+
<Button
|
|
104
|
+
isButton
|
|
105
|
+
primaryColor
|
|
106
|
+
btnText={translate(translations, 'wagecalc_calculate', 'Calculate')}
|
|
107
|
+
/>
|
|
108
|
+
|
|
109
|
+
{!!result && (
|
|
110
|
+
<div className={styles.resultContainer}>
|
|
111
|
+
<span>{translate(translations, 'wagecalc_result', 'Result')}</span>
|
|
112
|
+
<span>{result}</span>
|
|
113
|
+
</div>
|
|
114
|
+
)}
|
|
115
|
+
</form>
|
|
116
|
+
{isInfoOpen && (
|
|
117
|
+
<div className={styles.info}>
|
|
118
|
+
<h2 className={styles.infoTitle}>{infoTitle}</h2>
|
|
119
|
+
<MdClose onClick={() => setIsInfoOpen(false)} />
|
|
120
|
+
<p className={styles.infoText}>{infoText}</p>
|
|
121
|
+
</div>
|
|
122
|
+
)}
|
|
123
|
+
{operators.length > 0 && isRecommendedOperators && (
|
|
124
|
+
<div className={styles.reccommendedCasinos}>
|
|
125
|
+
<h3>{translate(translations, 'recommended_casinos', 'Recommended Casinos')}</h3>
|
|
126
|
+
{operators.slice(0, 3).map((operator) => {
|
|
127
|
+
const prettyLink = prettyTracker(operator, 'main', false);
|
|
128
|
+
const imageObject =
|
|
129
|
+
operator?.standardised_logo_url_object || operator?.logo_url_object;
|
|
130
|
+
|
|
131
|
+
return (
|
|
132
|
+
<div>
|
|
133
|
+
<a href={prettyLink} aria-label={operator.name} target="_blank" rel="noreferrer">
|
|
134
|
+
<LazyImage
|
|
135
|
+
alt={getAltText(imageObject, operator.name)}
|
|
136
|
+
src={imagePrettyUrl(imageObject?.filename || operator?.logo_url, 64, 64)}
|
|
137
|
+
width={64}
|
|
138
|
+
height={64}
|
|
139
|
+
/>
|
|
140
|
+
</a>
|
|
141
|
+
<div>
|
|
142
|
+
<Bonus item={operator} tracker="main" />
|
|
143
|
+
</div>
|
|
144
|
+
<OperatorCta operator={operator} tracker="main" />
|
|
145
|
+
</div>
|
|
146
|
+
);
|
|
147
|
+
})}
|
|
148
|
+
</div>
|
|
149
|
+
)}
|
|
150
|
+
</div>
|
|
151
|
+
</div>
|
|
96
152
|
);
|
|
97
153
|
};
|
|
98
154
|
|
|
@@ -101,6 +157,12 @@ WageringCalculator.propTypes = {
|
|
|
101
157
|
infoTitle: PropTypes.string,
|
|
102
158
|
infoText: PropTypes.string,
|
|
103
159
|
infoIcon: PropTypes.element,
|
|
160
|
+
pageContext: PropTypes.shape({
|
|
161
|
+
marketSections: PropTypes.shape({
|
|
162
|
+
// eslint-disable-next-line react/forbid-prop-types
|
|
163
|
+
recommended_casinos: PropTypes.array,
|
|
164
|
+
}),
|
|
165
|
+
}),
|
|
104
166
|
};
|
|
105
167
|
|
|
106
168
|
export default WageringCalculator;
|
|
@@ -1,48 +1,58 @@
|
|
|
1
1
|
.container {
|
|
2
2
|
margin: 0 auto;
|
|
3
|
+
position: relative;
|
|
3
4
|
padding: 1.6rem;
|
|
4
|
-
max-width: 34.3rem;
|
|
5
5
|
display: flex;
|
|
6
6
|
flex-direction: column;
|
|
7
7
|
border-radius: 1.2rem;
|
|
8
8
|
box-shadow: 0px -3px 14px rgba(0, 0, 0, 0.09);
|
|
9
9
|
background-color: var(--color-4);
|
|
10
|
+
z-index: 1;
|
|
11
|
+
|
|
10
12
|
@include min(tablet) {
|
|
11
13
|
padding: 2.4rem;
|
|
12
14
|
max-width: 96rem;
|
|
13
15
|
}
|
|
14
|
-
}
|
|
15
16
|
|
|
16
|
-
form
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
17
|
+
> form {
|
|
18
|
+
position: relative;
|
|
19
|
+
gap: 1rem;
|
|
20
|
+
@include flex-direction(column);
|
|
21
|
+
svg {
|
|
22
|
+
margin-left: 1.2rem;
|
|
23
|
+
height: 2.67rem;
|
|
24
|
+
width: 2.67rem;
|
|
25
|
+
vertical-align: text-bottom;
|
|
26
|
+
cursor: pointer;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
button {
|
|
30
|
+
align-self: end;
|
|
31
|
+
height: 4.8rem !important;
|
|
32
|
+
width: 100%;
|
|
33
|
+
}
|
|
34
|
+
|
|
28
35
|
@include min(tablet) {
|
|
29
|
-
|
|
36
|
+
display: grid;
|
|
37
|
+
grid-template-columns: 1fr 1fr;
|
|
38
|
+
gap: 1rem;
|
|
30
39
|
}
|
|
31
40
|
}
|
|
32
|
-
@include min(tablet) {
|
|
33
|
-
display: flex;
|
|
34
|
-
flex-direction: row;
|
|
35
|
-
flex-wrap: wrap;
|
|
36
|
-
justify-content: space-between;
|
|
37
|
-
}
|
|
38
41
|
}
|
|
39
42
|
|
|
40
|
-
|
|
41
|
-
|
|
43
|
+
.inputContainer {
|
|
44
|
+
@include flex-direction(column);
|
|
45
|
+
justify-content: flex-end;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.info {
|
|
49
|
+
height: 100vh;
|
|
42
50
|
position: absolute;
|
|
43
51
|
top: 0;
|
|
44
52
|
left: 0;
|
|
45
53
|
z-index: 3;
|
|
54
|
+
background: white;
|
|
55
|
+
padding: 2.4rem;
|
|
46
56
|
svg {
|
|
47
57
|
position: absolute;
|
|
48
58
|
top: 1.99rem;
|
|
@@ -54,6 +64,7 @@ div.container {
|
|
|
54
64
|
.mainTitle {
|
|
55
65
|
line-height: 3.4rem;
|
|
56
66
|
font-size: 2.4rem;
|
|
67
|
+
grid-column: 1/3;
|
|
57
68
|
}
|
|
58
69
|
|
|
59
70
|
.infoTitle {
|
|
@@ -86,77 +97,22 @@ div.container {
|
|
|
86
97
|
|
|
87
98
|
.input,
|
|
88
99
|
.select {
|
|
89
|
-
padding:
|
|
90
|
-
height:
|
|
91
|
-
background:
|
|
100
|
+
padding: 14px;
|
|
101
|
+
height: 4.8rem;
|
|
102
|
+
background: #f8f7f5;
|
|
92
103
|
border-radius: 4px;
|
|
93
104
|
}
|
|
94
105
|
|
|
95
|
-
.input {
|
|
96
|
-
margin: 0.8rem 0;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
106
|
.input:invalid:required {
|
|
100
107
|
border-bottom: 0.4rem solid var(--color-11);
|
|
101
108
|
}
|
|
102
109
|
|
|
103
|
-
.select {
|
|
104
|
-
margin-top: 3.4rem;
|
|
105
|
-
margin-bottom: 2.4rem;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
110
|
.infoText {
|
|
109
111
|
padding-right: 1.6rem;
|
|
110
112
|
overflow-y: auto;
|
|
111
113
|
text-align: justify;
|
|
112
114
|
}
|
|
113
115
|
|
|
114
|
-
.label,
|
|
115
|
-
.input,
|
|
116
|
-
.select {
|
|
117
|
-
@include min(tablet) {
|
|
118
|
-
width: calc(50% - 1.2rem);
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
@include min(tablet) {
|
|
123
|
-
.label:nth-child(2) {
|
|
124
|
-
order: 1;
|
|
125
|
-
}
|
|
126
|
-
.label:nth-child(4) {
|
|
127
|
-
order: 2;
|
|
128
|
-
}
|
|
129
|
-
.label:nth-child(6) {
|
|
130
|
-
width: 100%;
|
|
131
|
-
order: 5;
|
|
132
|
-
}
|
|
133
|
-
.label:nth-child(9) {
|
|
134
|
-
width: 100%;
|
|
135
|
-
order: 8;
|
|
136
|
-
}
|
|
137
|
-
.input:nth-child(3) {
|
|
138
|
-
order: 3;
|
|
139
|
-
}
|
|
140
|
-
.input:nth-child(5) {
|
|
141
|
-
order: 4;
|
|
142
|
-
}
|
|
143
|
-
.input:nth-child(7) {
|
|
144
|
-
order: 6;
|
|
145
|
-
}
|
|
146
|
-
.input:nth-child(10) {
|
|
147
|
-
margin-bottom: 0;
|
|
148
|
-
order: 9;
|
|
149
|
-
}
|
|
150
|
-
.select {
|
|
151
|
-
margin: 0.8rem 0;
|
|
152
|
-
order: 7;
|
|
153
|
-
}
|
|
154
|
-
form.container button[type='submit'] {
|
|
155
|
-
margin-top: 0.8rem;
|
|
156
|
-
order: 10;
|
|
157
|
-
}
|
|
158
|
-
}
|
|
159
|
-
|
|
160
116
|
.resultContainer {
|
|
161
117
|
position: relative;
|
|
162
118
|
order: 11;
|
|
@@ -170,6 +126,7 @@ div.container {
|
|
|
170
126
|
line-height: 34px;
|
|
171
127
|
flex-direction: column;
|
|
172
128
|
gap: 1rem;
|
|
129
|
+
grid-column: 1/3;
|
|
173
130
|
|
|
174
131
|
@include min(tablet) {
|
|
175
132
|
flex-direction: row;
|
|
@@ -204,3 +161,46 @@ div.container {
|
|
|
204
161
|
@include flex-align(center, center);
|
|
205
162
|
}
|
|
206
163
|
}
|
|
164
|
+
|
|
165
|
+
.reccommendedCasinos {
|
|
166
|
+
> h2 {
|
|
167
|
+
margin-top: 1rem;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
> div {
|
|
171
|
+
margin-bottom: 0.8rem;
|
|
172
|
+
background: #f1efec;
|
|
173
|
+
border-radius: 1.6rem;
|
|
174
|
+
@include flex-align(center, space-between);
|
|
175
|
+
padding: 1.6rem;
|
|
176
|
+
gap: 1rem;
|
|
177
|
+
|
|
178
|
+
img {
|
|
179
|
+
border-radius: 0.8rem;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
> div {
|
|
183
|
+
flex-grow: 1;
|
|
184
|
+
@include flex-align(flex-start, center);
|
|
185
|
+
@include flex-direction(column);
|
|
186
|
+
|
|
187
|
+
@include min(tablet) {
|
|
188
|
+
@include flex-align(center, flex-start);
|
|
189
|
+
@include flex-direction(row);
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
> span {
|
|
193
|
+
font-weight: 700;
|
|
194
|
+
color: #090e13;
|
|
195
|
+
font-size: 14px;
|
|
196
|
+
line-height: 22px;
|
|
197
|
+
|
|
198
|
+
@include min(tablet) {
|
|
199
|
+
@include flex-direction(row);
|
|
200
|
+
font-size: 20px;
|
|
201
|
+
line-height: 30px;
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
|
|
4
4
|
import { AiOutlineQuestionCircle } from '@react-icons/all-files/ai/AiOutlineQuestionCircle';
|
|
5
|
+
import getOperatorData from '../../../../tests/factories/pages/operator.factory';
|
|
5
6
|
import WageringCalculator from '.';
|
|
6
7
|
|
|
7
8
|
export default {
|
|
@@ -33,6 +34,23 @@ export default {
|
|
|
33
34
|
defaultValue:
|
|
34
35
|
'Lorem ipsum dolor sit amet consectetur. Pharetra sed etiam placerat interdum ut. Pretium ipsum ultrices interdum condimentum nullam. Suscipit augue placerat laoreet hendrerit dui euismod quam rutrum. Magna in luctus egestas massa erat. Lorem ipsum dolor sit amet consectetur. Pharetra sed etiam placerat interdum ut. Pretium ipsum ultrices interdum condimentum nullam. Suscipit augue placerat laoreet hendrerit dui euismod quam rutrum. Magna in luctus egestas massa erat. Lorem ipsum dolor sit amet consectetur. Pharetra sed etiam placerat interdum ut. Pretium ipsum ultrices interdum condimentum nullam. Suscipit augue placerat laoreet hendrerit dui euismod quam rutrum. Magna in luctus egestas massa erat. Lorem ipsum dolor sit amet consectetur. Pharetra sed etiam placerat interdum ut. Pretium ipsum ultrices interdum condimentum nullam. Suscipit augue placerat laoreet hendrerit dui euismod quam rutrum. Magna in luctus egestas massa erat.',
|
|
35
36
|
},
|
|
37
|
+
pageContext: {
|
|
38
|
+
defaultValue: {
|
|
39
|
+
marketSections: {
|
|
40
|
+
recommended_casinos: {
|
|
41
|
+
modules: [
|
|
42
|
+
{
|
|
43
|
+
items: [
|
|
44
|
+
{
|
|
45
|
+
items: [getOperatorData(), getOperatorData(), getOperatorData()],
|
|
46
|
+
},
|
|
47
|
+
],
|
|
48
|
+
},
|
|
49
|
+
],
|
|
50
|
+
},
|
|
51
|
+
},
|
|
52
|
+
},
|
|
53
|
+
},
|
|
36
54
|
},
|
|
37
55
|
};
|
|
38
56
|
|
|
@@ -4,6 +4,7 @@ import { render, cleanup, fireEvent, waitFor } from '@testing-library/react';
|
|
|
4
4
|
import '@testing-library/jest-dom/extend-expect';
|
|
5
5
|
import { MdInfo } from '@react-icons/all-files/md/MdInfo';
|
|
6
6
|
import MainProvider from '~context/MainProvider';
|
|
7
|
+
import getOperatorData from '../../../../tests/factories/pages/operator.factory';
|
|
7
8
|
import WageringCalculator from '.';
|
|
8
9
|
|
|
9
10
|
const props = {
|
|
@@ -11,6 +12,21 @@ const props = {
|
|
|
11
12
|
infoTitle: 'Test Info Title',
|
|
12
13
|
infoText: 'Test Info Text',
|
|
13
14
|
infoIcon: MdInfo,
|
|
15
|
+
pageContext: {
|
|
16
|
+
marketSections: {
|
|
17
|
+
recommended_casinos: {
|
|
18
|
+
modules: [
|
|
19
|
+
{
|
|
20
|
+
items: [
|
|
21
|
+
{
|
|
22
|
+
items: [getOperatorData(), getOperatorData()],
|
|
23
|
+
},
|
|
24
|
+
],
|
|
25
|
+
},
|
|
26
|
+
],
|
|
27
|
+
},
|
|
28
|
+
},
|
|
29
|
+
},
|
|
14
30
|
};
|
|
15
31
|
|
|
16
32
|
describe('Wagering Calculator', () => {
|
|
@@ -45,6 +61,8 @@ describe('Wagering Calculator', () => {
|
|
|
45
61
|
fireEvent.click(calculate);
|
|
46
62
|
await waitFor(() => {
|
|
47
63
|
expect(container.querySelector('.resultContainer')).toBeTruthy();
|
|
64
|
+
expect(container.querySelector('.reccommendedCasinos')).toBeTruthy();
|
|
65
|
+
expect(container.querySelectorAll('.reccommendedCasinos > div')).toHaveLength(2);
|
|
48
66
|
});
|
|
49
67
|
});
|
|
50
68
|
});
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
// eslint-disable-next-line import/prefer-default-export
|
|
2
|
+
export function getRecommendedToplist(marketSections) {
|
|
3
|
+
if (marketSections.recommended_casinos && marketSections.recommended_casinos.modules) {
|
|
4
|
+
if (
|
|
5
|
+
marketSections.recommended_casinos.modules.length > 0 &&
|
|
6
|
+
marketSections.recommended_casinos.modules[0].items.length > 0
|
|
7
|
+
) {
|
|
8
|
+
return marketSections.recommended_casinos.modules[0].items[0].items;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
return null;
|
|
13
|
+
}
|
|
@@ -345,4 +345,4 @@
|
|
|
345
345
|
|
|
346
346
|
|
|
347
347
|
|
|
348
|
-
window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"}];</script><script src="runtime~main.349b6fb9.iframe.bundle.js"></script><script src="134.19897eea.iframe.bundle.js"></script><script src="main.
|
|
348
|
+
window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"}];</script><script src="runtime~main.349b6fb9.iframe.bundle.js"></script><script src="134.19897eea.iframe.bundle.js"></script><script src="main.acece55b.iframe.bundle.js"></script></body></html>
|