all files / src/modal/ AdditionalConsent.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2×
2×
 
2×
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { h, Component } from 'preact';
import { AC_PROVIDERS } from '../shared/consts';
import Switch from './Switch';
 
import globalStyles from './styles.scss';
// This is another (although unique) preferences section, so it uses the same styles
import sectionStyles from './PreferencesSection.scss';
import vendorListStyles from './PreferencesVendorList.scss';
import styles from './PreferencesVendorList.scss';
import Consented from './utils/isConsented';
 
class AdditionalConsent extends Component {
    state = {
        isExpanded: false,
    };
 
    toggleIsAdditionalConsentExpanded() {
        const { tracker } = this.props;
        const { isExpanded } = this.state;
        this.setState({ isExpanded: !isExpanded });
        this.forceUpdate();
        tracker.trackAdditionalConsentExpandClick();
    }
 
    toggleProvider(providerId, isEnabled) {
        const { tracker, consentedProviders, updateProviders } = this.props;
        let newConsentedProviders;
 
        if (isEnabled) {
            newConsentedProviders = [...consentedProviders, providerId];
        } else {
            newConsentedProviders = consentedProviders.filter(id => (providerId !== id));
        }
 
        updateProviders(newConsentedProviders);
 
        tracker.trackAdditionalConsentProviderToggleClick(providerId);
    }
 
    renderProviders() {
        const { content } = this.props;
 
        return AC_PROVIDERS.map((provider) => {
            const providerIsEnabled = Consented.isConsentedProvider(provider.id, this.props);
 
            return (
                <div className={styles.vendor} key={provider.name}>
                    <div className={styles.flex}>
                        <div>
                            <div className={styles.vendorName}>{provider.name}</div>
                            <div className={vendorListStyles.topSpacer}>
                                <a href={provider.policyUrl} className={vendorListStyles.link} target="_blank">
                                    {content.privacyPolicyLinkButton}
                                </a>
                            </div>
                        </div>
                        <Switch isOn={providerIsEnabled} onChange={() => this.toggleProvider(provider.id, !providerIsEnabled)} />
                    </div>
                </div>
            );
        });
    }
 
    render(props, state) {
        const { content } = props;
        const { isExpanded } = state;
 
        return (
            <div className={sectionStyles.section}>
                <div className={sectionStyles.flex}>
                    <div>
                        <div className={`${sectionStyles.sectionExpand} ${sectionStyles.sectionExpandNoHeading}`} onClick={() => this.toggleIsAdditionalConsentExpanded()}>
                            {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>
                </div>
                {isExpanded && (
                    <div>
                        <div className={vendorListStyles.vendorList}>
                            <div className={vendorListStyles.header}>{content.vendorsHeader}</div>
                            {this.renderProviders()}
                        </div>
                    </div>
                )}
            </div>
        );
    }
}
 
export default AdditionalConsent;