all files / src/modal/ ScreenOne.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4×
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { h, Component } from 'preact';
 
import globalStyles from './styles.scss';
import styles from './ScreenOne.scss';
 
import getParagraphs from './utils/getParagraphs';
 
class ScreenOne extends Component {
    clickDescription(event) {
        if (event.target.dataset) {
            const { tracker } = this.props;
            if (event.target.dataset['privacyPolicy']) {
                tracker.trackPrivacyPolicyClick();
            } else if (event.target.dataset['partnerList']) {
                tracker.trackPartnerListClick();
            }
        }
    }
 
    render({ appOptions, content, clickLearnMore, clickAccept, clickReject, hasRejectAllFunctionality }) {
        return (
            <div
                data-tracking-opt-in-overlay="true"
                className={globalStyles.overlay}
                style={{
                    zIndex: appOptions.zIndex,
                }}
            >
                <div className={`${globalStyles.dialog} ${styles.dialog}`}>
                    <div className={styles.content}>
                        <div className={styles.usesCookiesText}> {content.mainHeadline} </div>
                        <div className={styles.bodyParagraphsContainer} onClick={(e) => this.clickDescription(e)}>
                            {getParagraphs(content.mainBody, content, appOptions.isCurse)}
                        </div>
                    </div>
                    <div className={globalStyles.footer}>
                        {/* These buttons are divs so that their styles aren't overridden */}
                        <div
                            data-tracking-opt-in-learn-more="true"
                            className={`${globalStyles.learnMoreButton} ${globalStyles.footerButton}`}
                            onClick={clickLearnMore}
                            key="learn"
                        >
                            {content.learnMoreButton}
                        </div>
                        <div className={globalStyles.consentButtons}>
                            <div
                                data-tracking-opt-in-accept="true"
                                className={`${globalStyles.acceptButton} ${globalStyles.footerButton}`}
                                onClick={clickAccept}
                                key="accept"
                            >
                                {content.acceptButton}
                            </div>
                            {hasRejectAllFunctionality &&
                                <div
                                    data-tracking-opt-in-reject="true"
                                    className={`${globalStyles.rejectButton} ${globalStyles.footerButton}`}
                                    onClick={clickReject}
                                    key="reject"
                                >
                                    {content.rejectAllButton}
                                </div>}
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}
 
export default ScreenOne;