Skip to content

Commit

Permalink
Big UPDATE
Browse files Browse the repository at this point in the history 
- removed all english descriptive text hardoded inside classes and moved text to translations.js (still have to clean some doubled JSON nodes)
- closing popup resets panel visibility to starting one
- added isShown event when CMP UI is shown to the user
- removed hardcoded purposes and features definition inside CustomVendorList
  • Loading branch information
@giegi
giegi committed Sep 21, 2019
1 parent a35e5d0 commit ae7169a
Show file tree
Hide file tree
Showing 13 changed files with 188 additions and 238 deletions.
11 changes: 11 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,15 @@
/coverage
/.idea
/.vscode
/CMP AppNexus/nbproject/private/
/CMP - AppNexus/nbproject/private/
/nbproject/private/
CMP - AppNexus/main.js
CMP - AppNexus/nbproject/project.properties
CMP - AppNexus/nbproject/project.xml
CMP - AppNexus/public/index.html
nbproject/project.properties
nbproject/project.xml
package.json
yarn.lock
src/purposes.json
8 changes: 4 additions & 4 deletions src/components/app.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default class App extends Component {
store: this.props.store,
selectedDetailsPanelIndex: SECTION_PURPOSES,
visitedPurposes: {},
visitedCustomPurposes: {},
visitedCustomPurposes: {},
};

onSave = () => {
Expand All @@ -31,9 +31,9 @@ export default class App extends Component {
});

};
onGeneralAcceptance = state => {
console.log("ENDED BY HERE", state);
};
onGeneralAcceptance = state => {
console.log("ENDED BY HERE", state);
};

onSelectPurpose = purposeItem => {
const { visitedPurposes } = this.state;
Expand Down
50 changes: 15 additions & 35 deletions src/components/banner/banner.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,13 +90,11 @@ export default class Banner extends Component {
<div class={style.info}>
<div class={style.title} style={{ color: textColor }}>
<img class={style.logoimage} src="https://gedi.mgr.consensu.org/kwcmp/icon_gedidigital.jpg" />
<LocalLabel localizeKey='title'>Ads help us run this site</LocalLabel>
<LocalLabel localizeKey='title'></LocalLabel>
<br clear="all" />
</div>
<LocalLabel localizeKey='description'>
When you visit our site, pre-selected companies may access and use certain
information on your device and about this site to serve relevant ads or personalized content. If you click on "CONTINUE TO SITE", you accept this use. If you want to know more or personalize your choices, specifying which use you want to give consent to, click on the two other buttons. You will be able to change again your preferences by clicking on the link Cookie Preferences at the bottom of the page.
</LocalLabel>
</LocalLabel>

<div class={style.options}>
<div
Expand All @@ -106,31 +104,15 @@ export default class Banner extends Component {
class={style.detailExpand}
>
<ChevronIcon color={textLinkColor}/>
<LocalLabel localizeKey='links.data.title'>Information that may be
used
<LocalLabel localizeKey='links.data.title'>
</LocalLabel>
</a>
<div
className={style.optionDetails}
style={{ color: textLightColor }}
>
<LocalLabel localizeKey='links.data.description'>
<ul>
<li>Type of browser and its settings</li>
<li>Information about the device's operating system</li>
<li>Cookie information</li>
<li>Information about other identifiers assigned to the device</li>
<li>The IP address from which the device accesses a client's website or
mobile application
</li>
<li>Information about the user's activity on that device, including web
pages and mobile apps visited or used
</li>
<li>Information about the geographic location of the device when it
accesses
a website or mobile application
</li>
</ul>

</LocalLabel>
</div>
</div>
Expand All @@ -141,8 +123,7 @@ export default class Banner extends Component {
class={style.detailExpand}
>
<ChevronIcon color={textLinkColor} />
<LocalLabel localizeKey='links.purposes.title'>Purposes for storing
information</LocalLabel>
<LocalLabel localizeKey='links.purposes.title'></LocalLabel>
</a>

<div
Expand All @@ -169,7 +150,7 @@ export default class Banner extends Component {
class={style.detailExpand}
>
<ChevronIcon color={textLinkColor} />
<LocalLabel localizeKey='links.features.title'>Features</LocalLabel>
<LocalLabel localizeKey='links.features.title'></LocalLabel>
</a>

<div
Expand All @@ -178,19 +159,19 @@ export default class Banner extends Component {
>
<ul>
<li class={style.purposeItem}>
<LocalLabel class={style.featureName} localizeKey='links.features.feature1.name'>Matching Data to Offline Sources</LocalLabel>
<LocalLabel class={style.featureName} localizeKey='links.features.feature1.name'></LocalLabel>
<br />
<LocalLabel class={style.featureDescription} localizeKey='links.features.feature1.description'>Combining data from offline sources that were initially collected in other contexts.</LocalLabel>
<LocalLabel class={style.featureDescription} localizeKey='links.features.feature1.description'></LocalLabel>
</li>
<li class={style.purposeItem}>
<LocalLabel class={style.featureName} localizeKey='links.features.feature2.name'>Linking Devices</LocalLabel>
<LocalLabel class={style.featureName} localizeKey='links.features.feature2.name'></LocalLabel>
<br />
<LocalLabel class={style.featureDescription} localizeKey='links.features.feature2.description'>Allow processing of a user's data to connect such user across multiple devices.</LocalLabel>
<LocalLabel class={style.featureDescription} localizeKey='links.features.feature2.description'></LocalLabel>
</li>
<li class={style.purposeItem}>
<LocalLabel class={style.featureName} localizeKey='links.features.feature3.name'>Precise Geographic Location Data</LocalLabel>
<LocalLabel class={style.featureName} localizeKey='links.features.feature3.name'></LocalLabel>
<br />
<LocalLabel class={style.featureDescription} localizeKey='links.features.feature3.description'>Allow processing of a user's precise geographic location data in support of a purpose for which that certain third party has consent.</LocalLabel>
<LocalLabel class={style.featureDescription} localizeKey='links.features.feature3.description'></LocalLabel>
</li>
</ul>
</div>
Expand All @@ -199,7 +180,6 @@ export default class Banner extends Component {
<div class={style.optionDetails} style={{ color: textLightColor }}>
<a class={style.learnMore} onClick={this.handleVendorListClick} style={{color: textLinkColor}}>
<LocalLabel localizeKey='descriptionvendorlink'>
View pre-selected companies list
</LocalLabel>
</a>
</div>
Expand All @@ -208,12 +188,12 @@ export default class Banner extends Component {
<div class={style.consent}>
<a class={style.learnMore} href="javascript:window.kw_customizeInfoPrivacy()"
style={{ color: primaryColor, borderColor: primaryColor }}>
<LocalLabel localizeKey='links.infoprivacy'>Know More</LocalLabel>
<LocalLabel localizeKey='links.infoprivacy'></LocalLabel>
</a>

<a class={style.learnMore} onClick={this.handleLearnMore}
style={{ color: primaryColor, borderColor: primaryColor }}>
<LocalLabel localizeKey='links.manage'>Manage Your Choices</LocalLabel>
<LocalLabel localizeKey='links.manage'></LocalLabel>
</a>

<a
Expand All @@ -225,7 +205,7 @@ export default class Banner extends Component {
color: primaryTextColor
}}
>
<LocalLabel localizeKey='links.accept'>Continue to site</LocalLabel>
<LocalLabel localizeKey='links.accept'></LocalLabel>
</a>
</div>
</div>
Expand Down
16 changes: 9 additions & 7 deletions src/components/popup/details/details.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,17 +125,19 @@ export default class Details extends Component {
<Panel selectedIndex={selectedPanelIndex}>
<Summary
purposes={purposes}
customPurposes={customPurposes}
visitedCustomPurposes={this.visitedCustomPurposes}
publisherConsentData={publisherConsentData}
customPurposes={customPurposes}
visitedCustomPurposes={this.visitedCustomPurposes}
publisherConsentData={publisherConsentData}
onPurposeClick={this.handlePurposeClick}
onCustomPurposeClick={this.handleCustomPurposeClick}
onGeneralPurposeClick={this.handleGeneralPurposeClick}
onCustomPurposeClick={this.handleCustomPurposeClick}
onGeneralPurposeClick={this.handleGeneralPurposeClick}
onVendorListClick={this.handlePanelClick(SECTION_VENDOR_LIST)}
onPurposeListClick={this.handlePanelClick(SECTION_PURPOSE_LIST)}
theme={theme}
/>
<VendorList
purposes={purposes}
customPurposes={customPurposes}
vendors={formattedVendors}
onBack={this.handleBack}
theme={theme}
Expand All @@ -162,14 +164,14 @@ export default class Details extends Component {
onClick={this.handleBack}
backgroundColor={secondaryColor}
textColor={secondaryTextColor}
>&lt; <LocalLabel localizeKey='back'>Back</LocalLabel></Button>
>&lt; <LocalLabel localizeKey='back'></LocalLabel></Button>
}
<Button
class={style.save}
onClick={onSave}
backgroundColor={primaryColor}
textColor={primaryTextColor}
><LocalLabel localizeKey='save'>Continue Using Site</LocalLabel></Button>
><LocalLabel localizeKey='save'></LocalLabel></Button>
</div>
</div>
);
Expand Down
16 changes: 4 additions & 12 deletions src/components/popup/details/purposeList/purposeList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,26 +31,18 @@ export default class PurposeList extends Component {
<div class={style.purposeList}>
<div class={style.header}>
<div class={detailsStyle.title} style={{color: textColor}}>
<LocalLabel localizeKey='title'>What information is being used?</LocalLabel>
<LocalLabel localizeKey='title'></LocalLabel>
</div>
</div>
<div class={detailsStyle.description} style={{color: textLightColor}}>
<LocalLabel localizeKey='description'>Below is a complete list of the information that may be gathered.</LocalLabel>
<LocalLabel localizeKey='description'></LocalLabel>
</div>
<div class={style.infoItems}>
<LocalLabel localizeKey='items'>
<ul>
<li>Type of browser and its settings</li>
<li>Information about the device's operating system</li>
<li>Cookie information</li>
<li>Information about other identifiers assigned to the device</li>
<li>The IP address from which the device accesses a client's website or mobile application</li>
<li>Information about the user's activity on that device, including web pages and mobile apps visited or used</li>
<li>Information about the geographic location of the device when it accesses a website or mobile application</li>
</ul>

</LocalLabel>
</div>
<a onClick={onBack} style={{color: textLinkColor}}><LocalLabel localizeKey='back'>Customize how this data is used from the previous page</LocalLabel></a>
<a onClick={onBack} style={{color: textLinkColor}}><LocalLabel localizeKey='back'></LocalLabel></a>
</div>
);
}
Expand Down
28 changes: 13 additions & 15 deletions src/components/popup/details/summary/summary.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,24 +70,23 @@ export default class Summary extends Component {
<div class={style.summary}>

<div class={detailsStyle.title} style={{color: textColor}}>
<SummaryLabel localizeKey='title'>Learn more about how information is being used?</SummaryLabel>
<SummaryLabel localizeKey='title'></SummaryLabel>
</div>
<div class={detailsStyle.description}>
<SummaryLabel localizeKey='description'>
We and select companies may access and use your information for the below purposes. You may
customize your choices below or continue using our site if you're OK with the purposes.

</SummaryLabel>
</div>

<div class={style.customPurposeSeparator}>
<LocalLabel localizeKey='links.purposes.titleGeneral'>Third Party Vendors</LocalLabel>
<LocalLabel localizeKey='links.purposes.titleGeneral'></LocalLabel>
</div>
<div class={style.purposeItems}>
{purposes.map((purposeItem, index) => (
<div class={style.purposeItem} style={{borderColor: dividerColor}}>
<span class={style.purposeTitle}><PurposesLabel localizeKey={`purpose${purposeItem.id}.menu`}>{purposeItem.name}</PurposesLabel></span>
<a class={style.learnMore} onClick={this.handlePurposeItemClick(purposeItem)} style={{color: textLinkColor}}>
<SummaryLabel localizeKey='detailLink'>Learn More & Set Preferences</SummaryLabel>
<SummaryLabel localizeKey='detailLink'></SummaryLabel>
</a>
</div>
))}
Expand All @@ -98,15 +97,15 @@ export default class Summary extends Component {
<div class={detailsStyle.description} style="display:none; margin-bottom: 30px;">
<center>
<a id="acceptGeneral" class={detailsStyle.selectAllConds} onClick={this.handleGeneralePurposeClick(true)} style="background-color: #FFFFFF;display: block;float: left;width: 40%;margin: 0 5%0 5%;">
<SummaryLabel localizeKey='acceptAll'>Accetta Tutto</SummaryLabel>
<SummaryLabel localizeKey='acceptAll'></SummaryLabel>
</a>
<a id="denyGeneral" class={detailsStyle.selectAllConds} onClick={this.handleGeneralePurposeClick(false)} style={{color: textLinkColor}} style="background-color: #FFFFFF;display: block;float: left;width: 40%;margin: 0 5%0 5%;">
<SummaryLabel localizeKey='denyAll'>Rifiuta Tutto</SummaryLabel>
<SummaryLabel localizeKey='denyAll'></SummaryLabel>
</a>
</center>
</div>
<div class={style.customPurposeSeparator}>
<LocalLabel localizeKey='links.purposes.titleCustom'>Other</LocalLabel>
<LocalLabel localizeKey='links.purposes.titleCustom'></LocalLabel>
</div>
<div class={style.customPurposeItems}>
{customPurposes.map((customPurposeItem, zindex) => (
Expand All @@ -130,23 +129,22 @@ export default class Summary extends Component {
</div>

<div class={detailsStyle.title} style={{color: textColor}}>
<SummaryLabel localizeKey='who.title'>Who is using this information?</SummaryLabel>
<SummaryLabel localizeKey='who.title'></SummaryLabel>
</div>
<div class={detailsStyle.description}>
<SummaryLabel localizeKey='who.description'>
We and pre-selected companies will use your information. You can see each company in
the links above or

</SummaryLabel>&nbsp;
<a onClick={onVendorListClick} style={{color: textLinkColor}}><SummaryLabel localizeKey='who.link'>see the complete list here.</SummaryLabel></a>
<a onClick={onVendorListClick} style={{color: textLinkColor}}><SummaryLabel localizeKey='who.link'></SummaryLabel></a>
</div>
<div class={detailsStyle.title} style={{color: textColor}}>
<SummaryLabel localizeKey='what.title'>What information is being used?</SummaryLabel>
<SummaryLabel localizeKey='what.title'></SummaryLabel>
</div>
<div class={detailsStyle.description}>
<SummaryLabel localizeKey='what.description'>
Different companies use different information,

</SummaryLabel>&nbsp;
<a onClick={onPurposeListClick} style={{color: textLinkColor}}><SummaryLabel localizeKey='what.link'>see the complete list here.</SummaryLabel></a>
<a onClick={onPurposeListClick} style={{color: textLinkColor}}><SummaryLabel localizeKey='what.link'></SummaryLabel></a>
</div>
</div>
);
Expand Down
Loading

0 comments on commit ae7169a

Please sign in to comment.