Show in vendors list Purposes and Features for each vendor

[alanStocco]

I haven't find anyway to show in the Vendor List the purposes and features of each vendor.
Like done in this CMP(https://cmp.sirdata.com/demo/ clicking details in the full list)

P.S. I'm trying to modify the file vendorList.jsx adding a loop in purposes but I got that is undefined for now.

[potench]

I have the same question, the following "Features" policy checks do not pass. Are there any plans to develop these features?

Summarized, policy check 10 and 13 require you to insert names and definitions of Features somewhere in your UI and add this information on a vendor per vendor basis. You can find names and definitions of Features and their employment per vendor in the GVL. https://vendorlist.consensu.org/vendorlist.json

POLICY CHECK <10>

IS THE USER ABLE TO REVIEW THE FULL NAME AND DESCRIPTION OF FEATURES?
Manual steps required for this check
Review the CMP user interface. Launch a separate incognito window if necessary to simulate a first time user.

---

Policy reference (TCF v1)

Appendix B: Policy C(f) The list of purposes and/or vendors shown in the UI must have the following characteristics: (II) At a minimum, vendor name, link to privacy policy, purposes and features must be displayed.

---

POLICY CHECK <13>

IS THE USER ABLE TO REVIEW THE FEATURES FOR EACH VENDOR?
Manual steps required for this check
Review the CMP user interface. Launch a separate incognito window if necessary to simulate a first time user.

---

Policy reference (TCF v1)

Appendix B Policy C(f)(II). The list of purposes and/or vendors shown in the UI must have the following characteristics: At a minimum, vendor name, link to privacy policy, purposes and features must be displayed.

[alanStocco]

I just made some changes to be compliance for IAB.
The result is quite ugly(I'm learning react stuff) anyway IAB said it's ok now.
http://store.larena.it
I'm not sure if pull or not the changes because maybe not everybody want it.

[ghost]

I just made some changes to be compliance for IAB.
The result is quite ugly(I'm learning react stuff) anyway IAB said it's ok now.
http://store.larena.it
I'm not sure if pull or not the changes because maybe not everybody want it.

Hi Alan,
I'm also working on the CMP and new to React. Could you please share the changes that you made for IAB compliance check?

Thanks

[alanStocco]

I just made some changes to be compliance for IAB.
The result is quite ugly(I'm learning react stuff) anyway IAB said it's ok now.
http://store.larena.it
I'm not sure if pull or not the changes because maybe not everybody want it.

Hi Alan,
I'm also working on the CMP and new to React. Could you please share the changes that you made for IAB compliance check?

Thanks

Hi Sajzo. You can see the changes for show in the popup for each vendors the features and puroposes here: https://github.com/alanStocco/cmp/blob/master/src/components/popup/details/vendorList/vendorList.jsx
Like said I'm not proud of this code because I'm new of React; the best solution should be use the descriptions in the json, not write that ugly if... anyway works.

[ghost]

I just made some changes to be compliance for IAB.
The result is quite ugly(I'm learning react stuff) anyway IAB said it's ok now.
http://store.larena.it
I'm not sure if pull or not the changes because maybe not everybody want it.

Hi Alan,
I'm also working on the CMP and new to React. Could you please share the changes that you made for IAB compliance check?
Thanks

Hi Sajzo. You can see the changes for show in the popup for each vendors the features and puroposes here: https://github.com/alanStocco/cmp/blob/master/src/components/popup/details/vendorList/vendorList.jsx
Like said I'm not proud of this code because I'm new of React; the best solution should be use the descriptions in the json, not write that ugly if... anyway works.

Thanks, Alan. I'll check your solution. I'll try to use it from JSON file. If I am able to do it by importing, I'll share it with you.

[giegi]

Hi,
I had the same problem trying to satisfy the IAB compliance request.
I found a solution similar to the one proposed by Alan, but in mine the language translation is preserved.
Like Alan, I'm new to React so I had to staticize into this class some data. I didn't understand how to pass data I need from outside the class.
I'll look into this later, but for now, it worked.

Maybe this can help some of you.

https://github.com/giegi/cmp/blob/master/src/components/popup/details/vendorList/vendorList.jsx

[alanStocco]

I didn't understand how to pass data I need from outside the class.

Anybody have discovered how to do this?
Just for curiosity and learning.
Thanks

[potench]

@alanStocco if you'd like I can PR this solution into the main repo:

1. Update UI for feature names and purposes per vendor FED-1184 feat (ui: features) add ui for features names and descriptions per vendor Openmail/system1-cmp#16
2. Direct link to vendors FED-1193 refactor (banner: ui) provide a direct link to the vendor li… Openmail/system1-cmp#17

Lemme know, or feel free to use this fork...

See src/components/popup/details/details.jsx for how to pass the correct json data in to the Details component.

The CMP passed all IAB compliance checks with these 2 PRs 🚀

[giegi]

@potench
Thanks for the hint. Extremely useful. I understood where to eventually do that.
In my version of this cmp (as I've been also asked by IAB to add the per vendor basis list), I used a different approach, introducing a brand new VendorList with LegInt, Purposes and Features shown on per vendor basis. Did not use the existing list inside each purpose.

I think the problem with this CMP is that the English translation is hardcoded. So everywhere you need some text, you cannot rely on LocalLabel because english part is empty into translations.js.
So you have to carry with you a bunch of informations from elsewhere outside the class.
In my fork, I cut every english descriptive text and moved it into translations.js.
This makes every adaptation or modify easier than before.

Feel free to check and use for your own purposes.

https://github.com/giegi/cmp