@redacto.io/consent-sdk-react 10.2.1-beta.0 → 10.2.1-beta.1

package/dist/index.js

@@ -745,7 +745,9 @@ var DPO_AUDIO_ELEMENT_MAP = [
   { audioKey: "dpo_anchor_text_audio_url", elementId: "dpo-dpo-link" }
 ];
 var PRODUCT_SECTION_COPY = {
-  toggleSelection: (productName, purposeCount) => `Toggle all ${purposeCount} purposes for ${productName}`
+  toggleSelection: (productName, purposeCount) => `Toggle all ${purposeCount} purposes for ${productName}`,
+  toggleRequired: (productName, purposeCount) => `Toggle the ${purposeCount} required purposes for ${productName}`,
+  settled: (productName) => `Already consented to ${productName}`
 };
 
 // src/RedactoNoticeConsent/styles.ts
@@ -2128,6 +2130,7 @@ var ProductSectionHeader = ({
   product,
   isRequired,
   purposeCount,
+  requiredOnly,
   allSelected,
   someSelected,
   collapsed,
@@ -2183,7 +2186,39 @@ var ProductSectionHeader = ({
         }
       ) })
     ] }),
-    !locked && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    locked ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        role: "img",
+        style: {
+          ...reviewIndicatorStyle(20),
+          backgroundColor: "#10B981",
+          marginLeft: "12px"
+        },
+        "aria-label": PRODUCT_SECTION_COPY.settled(name),
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "svg",
+          {
+            width: "12",
+            height: "12",
+            viewBox: "0 0 12 12",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "path",
+              {
+                d: "M4 6L5.5 7.5L8.5 4.5",
+                stroke: "white",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        )
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "input",
       {
         ref: checkboxRef,
@@ -2191,7 +2226,7 @@ var ProductSectionHeader = ({
         type: "checkbox",
         checked: allSelected,
         onChange: handleToggleSelect,
-        "aria-label": PRODUCT_SECTION_COPY.toggleSelection(name, purposeCount)
+        "aria-label": requiredOnly ? PRODUCT_SECTION_COPY.toggleRequired(name, purposeCount) : PRODUCT_SECTION_COPY.toggleSelection(name, purposeCount)
       }
     )
   ] });
@@ -2312,6 +2347,7 @@ var PurposeItem = ({
       isAlreadyConsented && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "div",
         {
+          role: "img",
           style: {
             ...reviewIndicatorStyle(20),
             backgroundColor: "#10B981",
@@ -2401,6 +2437,7 @@ var PurposeItem = ({
                   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                     "div",
                     {
+                      role: "img",
                       style: {
                         ...reviewIndicatorStyle(16),
                         backgroundColor: "#10B981"
@@ -2437,6 +2474,7 @@ var PurposeItem = ({
                   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                     "div",
                     {
+                      role: "img",
                       style: {
                         ...reviewIndicatorStyle(16),
                         border: "2px solid #d0d5dd",
@@ -4122,6 +4160,16 @@ var RedactoNoticeConsent = ({
     });
     setSelectedDataElements((prev) => ({ ...prev, ...elementOverrides }));
   };
+  const productBoxPurposes = (0, import_react3.useCallback)(
+    (product, purposes) => {
+      if (productIsRequiredFor(product) === false) {
+        return purposes;
+      }
+      const required = purposes.filter(hasRequiredDataElement);
+      return required.length > 0 ? required : purposes;
+    },
+    [productIsRequiredFor]
+  );
   const handleProductCheckboxChange = (productUuid) => {
     if (!content) {
       return;
@@ -4132,7 +4180,7 @@ var RedactoNoticeConsent = ({
     if (!group) {
       return;
     }
-    const editable = group.purposes.filter(
+    const editable = productBoxPurposes(productUuid, group.purposes).filter(
       (purpose) => !consentedPurposes[productPurposeKey(productUuid, purpose.uuid)]
     );
     if (editable.length === 0) {
@@ -4148,7 +4196,8 @@ var RedactoNoticeConsent = ({
     }
     const product = products[0];
     const purposes = (_a2 = content == null ? void 0 : content.purposes) != null ? _a2 : [];
-    const selectedCount = purposes.filter(
+    const boxPurposes = productBoxPurposes(product.uuid, purposes);
+    const selectedCount = boxPurposes.filter(
       (purpose) => selectedPurposes[productPurposeKey(void 0, purpose.uuid)]
     ).length;
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
@@ -4157,8 +4206,9 @@ var RedactoNoticeConsent = ({
         {
           product,
           isRequired: productIsRequiredFor(product.uuid),
-          purposeCount: purposes.length,
-          allSelected: purposes.length > 0 && selectedCount === purposes.length,
+          purposeCount: boxPurposes.length,
+          requiredOnly: boxPurposes.length < purposes.length,
+          allSelected: boxPurposes.length > 0 && selectedCount === boxPurposes.length,
           someSelected: selectedCount > 0,
           collapsed: collapsedProducts[product.uuid] || false,
           locked: (_b2 = consentedProducts[product.uuid]) != null ? _b2 : isFullyConsentedReviewMode,
@@ -4166,7 +4216,7 @@ var RedactoNoticeConsent = ({
           styles,
           responsiveStyles,
           onToggleCollapse: () => toggleProductCollapse(product.uuid),
-          onToggleSelect: () => toggleSection(purposes, void 0),
+          onToggleSelect: () => toggleSection(boxPurposes, void 0),
           getTranslatedText
         }
       ),
@@ -5811,7 +5861,11 @@ var RedactoNoticeConsent = ({
                   /* Regular consent UI */
                   /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles.optionsContainer, children: isMultiProduct(content == null ? void 0 : content.products) ? productGroups.map((group) => {
                     var _a2;
-                    const selectedInGroup = group.purposes.filter(
+                    const boxPurposes = productBoxPurposes(
+                      group.product.uuid,
+                      group.purposes
+                    );
+                    const selectedInGroup = boxPurposes.filter(
                       (purpose) => selectedPurposes[productPurposeKey(
                         group.product.uuid,
                         purpose.uuid
@@ -5825,8 +5879,9 @@ var RedactoNoticeConsent = ({
                           isRequired: productIsRequiredFor(
                             group.product.uuid
                           ),
-                          purposeCount: group.purposes.length,
-                          allSelected: selectedInGroup === group.purposes.length,
+                          purposeCount: boxPurposes.length,
+                          requiredOnly: boxPurposes.length < group.purposes.length,
+                          allSelected: selectedInGroup === boxPurposes.length,
                           someSelected: selectedInGroup > 0,
                           collapsed: collapsedProducts[group.product.uuid] || false,
                           locked: (_a2 = consentedProducts[group.product.uuid]) != null ? _a2 : false,

package/dist/index.mjs

@@ -621,7 +621,9 @@ var DPO_AUDIO_ELEMENT_MAP = [
   { audioKey: "dpo_anchor_text_audio_url", elementId: "dpo-dpo-link" }
 ];
 var PRODUCT_SECTION_COPY = {
-  toggleSelection: (productName, purposeCount) => `Toggle all ${purposeCount} purposes for ${productName}`
+  toggleSelection: (productName, purposeCount) => `Toggle all ${purposeCount} purposes for ${productName}`,
+  toggleRequired: (productName, purposeCount) => `Toggle the ${purposeCount} required purposes for ${productName}`,
+  settled: (productName) => `Already consented to ${productName}`
 };
 
 // src/RedactoNoticeConsent/styles.ts
@@ -1803,6 +1805,7 @@ var ProductSectionHeader = ({
   product,
   isRequired,
   purposeCount,
+  requiredOnly,
   allSelected,
   someSelected,
   collapsed,
@@ -1858,7 +1861,39 @@ var ProductSectionHeader = ({
         }
       ) })
     ] }),
-    !locked && /* @__PURE__ */ jsx3(
+    locked ? /* @__PURE__ */ jsx3(
+      "div",
+      {
+        role: "img",
+        style: {
+          ...reviewIndicatorStyle(20),
+          backgroundColor: "#10B981",
+          marginLeft: "12px"
+        },
+        "aria-label": PRODUCT_SECTION_COPY.settled(name),
+        children: /* @__PURE__ */ jsx3(
+          "svg",
+          {
+            width: "12",
+            height: "12",
+            viewBox: "0 0 12 12",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx3(
+              "path",
+              {
+                d: "M4 6L5.5 7.5L8.5 4.5",
+                stroke: "white",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        )
+      }
+    ) : /* @__PURE__ */ jsx3(
       "input",
       {
         ref: checkboxRef,
@@ -1866,7 +1901,7 @@ var ProductSectionHeader = ({
         type: "checkbox",
         checked: allSelected,
         onChange: handleToggleSelect,
-        "aria-label": PRODUCT_SECTION_COPY.toggleSelection(name, purposeCount)
+        "aria-label": requiredOnly ? PRODUCT_SECTION_COPY.toggleRequired(name, purposeCount) : PRODUCT_SECTION_COPY.toggleSelection(name, purposeCount)
       }
     )
   ] });
@@ -1987,6 +2022,7 @@ var PurposeItem = ({
       isAlreadyConsented && /* @__PURE__ */ jsx3(
         "div",
         {
+          role: "img",
           style: {
             ...reviewIndicatorStyle(20),
             backgroundColor: "#10B981",
@@ -2076,6 +2112,7 @@ var PurposeItem = ({
                   return /* @__PURE__ */ jsx3(
                     "div",
                     {
+                      role: "img",
                       style: {
                         ...reviewIndicatorStyle(16),
                         backgroundColor: "#10B981"
@@ -2112,6 +2149,7 @@ var PurposeItem = ({
                   return /* @__PURE__ */ jsx3(
                     "div",
                     {
+                      role: "img",
                       style: {
                         ...reviewIndicatorStyle(16),
                         border: "2px solid #d0d5dd",
@@ -3797,6 +3835,16 @@ var RedactoNoticeConsent = ({
     });
     setSelectedDataElements((prev) => ({ ...prev, ...elementOverrides }));
   };
+  const productBoxPurposes = useCallback(
+    (product, purposes) => {
+      if (productIsRequiredFor(product) === false) {
+        return purposes;
+      }
+      const required = purposes.filter(hasRequiredDataElement);
+      return required.length > 0 ? required : purposes;
+    },
+    [productIsRequiredFor]
+  );
   const handleProductCheckboxChange = (productUuid) => {
     if (!content) {
       return;
@@ -3807,7 +3855,7 @@ var RedactoNoticeConsent = ({
     if (!group) {
       return;
     }
-    const editable = group.purposes.filter(
+    const editable = productBoxPurposes(productUuid, group.purposes).filter(
       (purpose) => !consentedPurposes[productPurposeKey(productUuid, purpose.uuid)]
     );
     if (editable.length === 0) {
@@ -3823,7 +3871,8 @@ var RedactoNoticeConsent = ({
     }
     const product = products[0];
     const purposes = (_a2 = content == null ? void 0 : content.purposes) != null ? _a2 : [];
-    const selectedCount = purposes.filter(
+    const boxPurposes = productBoxPurposes(product.uuid, purposes);
+    const selectedCount = boxPurposes.filter(
       (purpose) => selectedPurposes[productPurposeKey(void 0, purpose.uuid)]
     ).length;
     return /* @__PURE__ */ jsxs2("div", { children: [
@@ -3832,8 +3881,9 @@ var RedactoNoticeConsent = ({
         {
           product,
           isRequired: productIsRequiredFor(product.uuid),
-          purposeCount: purposes.length,
-          allSelected: purposes.length > 0 && selectedCount === purposes.length,
+          purposeCount: boxPurposes.length,
+          requiredOnly: boxPurposes.length < purposes.length,
+          allSelected: boxPurposes.length > 0 && selectedCount === boxPurposes.length,
           someSelected: selectedCount > 0,
           collapsed: collapsedProducts[product.uuid] || false,
           locked: (_b2 = consentedProducts[product.uuid]) != null ? _b2 : isFullyConsentedReviewMode,
@@ -3841,7 +3891,7 @@ var RedactoNoticeConsent = ({
           styles,
           responsiveStyles,
           onToggleCollapse: () => toggleProductCollapse(product.uuid),
-          onToggleSelect: () => toggleSection(purposes, void 0),
+          onToggleSelect: () => toggleSection(boxPurposes, void 0),
           getTranslatedText
         }
       ),
@@ -5486,7 +5536,11 @@ var RedactoNoticeConsent = ({
                   /* Regular consent UI */
                   /* @__PURE__ */ jsx3("div", { style: styles.optionsContainer, children: isMultiProduct(content == null ? void 0 : content.products) ? productGroups.map((group) => {
                     var _a2;
-                    const selectedInGroup = group.purposes.filter(
+                    const boxPurposes = productBoxPurposes(
+                      group.product.uuid,
+                      group.purposes
+                    );
+                    const selectedInGroup = boxPurposes.filter(
                       (purpose) => selectedPurposes[productPurposeKey(
                         group.product.uuid,
                         purpose.uuid
@@ -5500,8 +5554,9 @@ var RedactoNoticeConsent = ({
                           isRequired: productIsRequiredFor(
                             group.product.uuid
                           ),
-                          purposeCount: group.purposes.length,
-                          allSelected: selectedInGroup === group.purposes.length,
+                          purposeCount: boxPurposes.length,
+                          requiredOnly: boxPurposes.length < group.purposes.length,
+                          allSelected: selectedInGroup === boxPurposes.length,
                           someSelected: selectedInGroup > 0,
                           collapsed: collapsedProducts[group.product.uuid] || false,
                           locked: (_a2 = consentedProducts[group.product.uuid]) != null ? _a2 : false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redacto.io/consent-sdk-react",
-  "version": "10.2.1-beta.0",
+  "version": "10.2.1-beta.1",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",