Update default policy version for TCF EU to 5, added error reporting for TCF decoding

src/js/app/decode.js

@@ -44,6 +44,9 @@ export function decode() {
 
     cmpApi.setGppString(gppString);
 
+    // clear error log
+    document.getElementById("tcf2-error-pane").value = "";
+
     if (cmpApi.hasSection("tcfeuv2")) {
       document.getElementById("tcfeuv2-included").checked = true;
       disableTcfEuV2(false);
@@ -53,7 +56,7 @@ export function decode() {
         document.getElementById("tcfeuv2-policy-version-2").checked = true;
         tcfEuV2PolicyVersionChanged(policyVersion);
       }
-      if(policyVersion === 4 && !document.getElementById("tcfeuv2-policy-version-4").checked) {
+      if(policyVersion === 5 && !document.getElementById("tcfeuv2-policy-version-5").checked) {
         document.getElementById("tcfeuv2-policy-version-2").checked = true;
         tcfEuV2PolicyVersionChanged(policyVersion);
       }
@@ -199,6 +202,26 @@ export function decode() {
       } else {
         document.getElementById("tcfeuv2-publisher-restrictions-container").setAttribute("hidden", "hidden");
       }
+      // check for TCF V2.2 errors and print these if any are found
+      let strError = "We found errors in the TCF string:\n";
+      const len1 = strError.length;
+      if (policyVersion !== 5) {
+        strError = strError + "Invalid policy number: " + policyVersion + "\n";
+      }
+      if (cmpApi.getFieldValue("tcfeuv2", "IsServiceSpecific") === false) {
+        strError = strError + "Invalid value for IsServiceSpecific. IsServiceSpecific must be true" + "\n";
+      }
+      if (cmpApi.getFieldValue("tcfeuv2", "VendorsDisclosed").length === 0) {
+        strError = strError + "Missing or incorrect disclosed vendors section. Disclosed Vendors must be present and properly populated."+ "\n";
+      }
+
+      if (strError.length > len1) {
+        document.getElementById("tcf2-error-pane").style.color = "red";
+        document.getElementById("tcf2-error-pane").value = strError;
+      } else {
+        document.getElementById("tcf2-error-pane").style.color = "green";
+        document.getElementById("tcf2-error-pane").value = "TCF string is looking good.";
+      }
     } else {
       document.getElementById("tcfeuv2-included").checked = false;
       document.getElementById("tcfeuv2-publisher-restrictions-container").setAttribute("hidden", "hidden");

src/js/app/disable.js

@@ -18,7 +18,7 @@ export function disableTcfEuV2(disabled) {
       "tcfeuv2-consent-language",
       "tcfeuv2-vendor-list-version",
       "tcfeuv2-policy-version-2",
-      "tcfeuv2-policy-version-4",
+      "tcfeuv2-policy-version-5",
       "tcfeuv2-is-service-specific",
       "tcfeuv2-use-non-standard-stacks",
       "tcfeuv2-special-feature-optins",

src/js/app/encode.js

@@ -1,6 +1,7 @@
 export function encode() {
   let errors = [];
 
+  document.getElementById("tcf2-error-pane").value = "";
   cmpApi.clear();
   let sectionIds = [];
   if (document.getElementById("tcfeuv2-included").checked == true) {
@@ -10,7 +11,7 @@ export function encode() {
       Array.prototype.push.apply(errors, processNumericInput("tcfeuv2-consent-screen", "tcfeuv2", "ConsentScreen"));
       Array.prototype.push.apply(errors, processStringSelect("tcfeuv2-consent-language", "tcfeuv2", "ConsentLanguage"));
       Array.prototype.push.apply(errors, processNumericInput("tcfeuv2-vendor-list-version", "tcfeuv2", "VendorListVersion"));
-      Array.prototype.push.apply(errors, processNumericRadio(["tcfeuv2-policy-version-2","tcfeuv2-policy-version-4"], "tcfeuv2", "PolicyVersion"));
+      Array.prototype.push.apply(errors, processNumericRadio(["tcfeuv2-policy-version-2","tcfeuv2-policy-version-5"], "tcfeuv2", "PolicyVersion"));
       Array.prototype.push.apply(errors, processCheckbox("tcfeuv2-is-service-specific", "tcfeuv2", "IsServiceSpecific"));
       Array.prototype.push.apply(errors, processCheckbox("tcfeuv2-use-non-standard-stacks", "tcfeuv2", "UseNonStandardStacks"));
       Array.prototype.push.apply(errors, processBitfieldSelect("tcfeuv2-special-feature-optins", "tcfeuv2", "SpecialFeatureOptins"));

src/js/app/main.js

@@ -71,7 +71,7 @@ async function init() {
   window.gvlV2Ca = await cmpApi.getGvlFromUrl({ baseUrl: "/vendorlist/v2/ca" });
   console.log(gvlV2Ca);
 
-  tcfEuV2PolicyVersionChanged(4);
+  tcfEuV2PolicyVersionChanged(5);
   tcfCaV1PolicyVersionChanged(2);
 
   let consentLanguageElements = [

src/js/app/tcf.js

@@ -26,7 +26,7 @@ export function tcfEuV2PolicyVersionChanged(value) {
 
   if(value === 2) {
     updateGvlRelatedElements(gvlV2, vendorListVersionElement, vendorListAvailableElements, vendorListIncludedElements, purposeElements,specialFeatureElements);
-  } else if(value === 4) {
+  } else if(value === 5) {
     updateGvlRelatedElements(gvlV3, vendorListVersionElement, vendorListAvailableElements, vendorListIncludedElements, purposeElements,specialFeatureElements);
   }
 }

src/tabs/tcfeuv2.html

@@ -1,3 +1,9 @@
+<!-- Errors section -->
+<div class="row m-3">
+  <textarea class="form-control" id="tcf2-error-pane" rows="2" readonly></textarea>
+</div>
+<!--hr /-->
+<!-- form section -->
   <div class="mt-3 mb-3 form-check">
     <input
       class="form-check-input"
@@ -19,8 +25,8 @@
       <label class="form-check-label" for="tcfeuv2-policy-version-2">2</label>
     </div>
     <div class="form-check form-check-inline">
-      <input class="form-check-input" type="radio" name="tcfeuv2-policy-version" id="tcfeuv2-policy-version-4" value="4" onclick="tcfEuV2PolicyVersionChanged(4)" disabled checked>
-      <label class="form-check-label" for="tcfeuv2-policy-version-4">4</label>
+      <input class="form-check-input" type="radio" name="tcfeuv2-policy-version" id="tcfeuv2-policy-version-5" value="5" onclick="tcfEuV2PolicyVersionChanged(5)" disabled checked>
+      <label class="form-check-label" for="tcfeuv2-policy-version-5">5</label>
     </div>
   </div>
   <div class="mb-3">