all files / src/modal/ PreferencesSection.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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { h, Component } from 'preact';
import { PURPOSES } from '../shared/utils';
import PreferencesVendorList from './PreferencesVendorList';
import Switch from './Switch';
 
import globalStyles from './styles.scss';
import styles from './PreferencesSection.scss';
 
class PreferencesSection extends Component {
    state = {
        isExpanded: false,
    };
 
    isItemEnabled(item) {
        switch (item.type) {
            case 'purpose':
                return this.isConsentedPurpose(item.id);
            case 'specialFeature':
                return this.isConsentedSpecialFeature(item.id);
        }
    }
 
    isConsentedPurpose(purposeId) {
        return this.props.consentedPurposes.includes(purposeId);
    }
 
    isConsentedSpecialFeature(featureId) {
        return this.props.consentedSpecialFeatures.includes(featureId);
    }
 
    toggleIsExpanded() {
        const { item, tracker } = this.props;
        const { isExpanded } = this.state;
        this.setState({ isExpanded: !isExpanded });
        this.forceUpdate();
 
        switch (item.type) {
            case 'purpose':
                tracker.trackPurposeExpandClick(item.id);
                break;
            case 'specialFeature':
                tracker.trackSpecialFeatureExpandClick(item.id);
                break;
        }
    }
 
    render(props, state) {
		const {
            content,
            onToggleItem,
            onToggleVendor,
            allPurposes,
            allPurposesSpecial,
            allFeatures,
            allFeaturesSpecial,
            allItems,
            consentedVendors,
            consentedPurposes,
            consentedSpecialFeatures,
            item,
            tracker,
        } = props;
        const { isExpanded } = state;
 
        return (
            <div className={styles.section} key={item.id}>
                <div className={styles.flex}>
                    <div>
                        <div className={styles.heading}>{allItems[item.id].name}</div>
                        <div className={styles.sectionExpand} onClick={() => this.toggleIsExpanded()}>
                            {isExpanded ? content.hidePurposeDetailsButton : content.showPurposeDetailsButton}
                            <svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" className={`${globalStyles.chevron} ${isExpanded ? globalStyles.chevronExpanded : ''}`}>
                                <path d="M11.707 3.293a.999.999 0 0 0-1.414 0L6 7.586 1.707 3.293A.999.999 0 1 0 .293 4.707l5 5a.997.997 0 0 0 1.414 0l5-5a.999.999 0 0 0 0-1.414" fill-rule="evenodd"/>
                            </svg>
                        </div>
                    </div>
                    <Switch isOn={this.isItemEnabled(item)} onChange={() => onToggleItem(item.id, !this.isItemEnabled(item))} />
                </div>
                {isExpanded && (
                    <div>
                        <div className={styles.description}>{allItems[item.id].descriptionLegal}</div>
                        <PreferencesVendorList
                            content={content}
                            vendors={item.vendors}
                            onToggleVendor={onToggleVendor}
                            allPurposes={allPurposes}
                            allPurposesSpecial={allPurposesSpecial}
                            allFeatures={allFeatures}
                            allFeaturesSpecial={allFeaturesSpecial}
                            consentedVendors={consentedVendors}
                            consentedPurposes={consentedPurposes}
                            consentedSpecialFeatures={consentedSpecialFeatures}
                            tracker={tracker}
                        />
                    </div>
                )}
            </div>
        );
    }
}
 
export default PreferencesSection;