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

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
@@ -1219,6 +1221,24 @@ var purposeCoversProduct = (purpose, productUuid) => {
   return scope.includes(productUuid);
 };
 var isMultiProduct = (products) => Boolean(products && products.length > 1);
+var serverMarksMandatoryProducts = (products) => Boolean(
+  products && products.length > 0 && products.every((product) => product.mandatory !== void 0)
+);
+var gatedProductUuids = (products) => new Set(
+  (products != null ? products : []).filter((product) => product.mandatory === true).map((product) => product.uuid)
+);
+var rowProductUuid = (row, products) => {
+  var _a;
+  return (_a = row.productUuid) != null ? _a : (products == null ? void 0 : products.length) === 1 ? products[0].uuid : void 0;
+};
+var rowsUnderGate = (rows, products) => {
+  const gated = gatedProductUuids(products);
+  if (gated.size === 0) return [];
+  return rows.filter((row) => {
+    const productUuid = rowProductUuid(row, products);
+    return productUuid !== void 0 && gated.has(productUuid);
+  });
+};
 var groupPurposesByProduct = (products, purposes, order) => {
   if (!products || products.length === 0) return [];
   return products.map((product) => {
@@ -1318,6 +1338,7 @@ var buildPreselection = (purposes, mode) => {
   return { selectedPurposes, selectedDataElements };
 };
 var hasRequiredDataElement = (purpose) => purpose.data_elements.some((element) => element.required);
+var isBlockingRequiredElement = (element) => element.required && element.enabled;
 
 // src/RedactoNoticeConsent/layout.ts
 var resolveLogoPosition = (raw) => raw === "center" || raw === "right" ? raw : DEFAULT_LOGO_POSITION;
@@ -1750,6 +1771,16 @@ var CHEVRON_WRAPPER_STYLE = {
   justifyContent: "center",
   marginLeft: "5px"
 };
+var reviewIndicatorStyle = (size) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: `${size}px`,
+  height: `${size}px`,
+  borderRadius: "50%",
+  flexShrink: 0,
+  boxSizing: "border-box"
+});
 var CollapseChevron = ({ open, color }) => /* @__PURE__ */ jsx3("div", { style: CHEVRON_WRAPPER_STYLE, children: /* @__PURE__ */ jsx3(
   "svg",
   {
@@ -1772,7 +1803,9 @@ var CollapseChevron = ({ open, color }) => /* @__PURE__ */ jsx3("div", { style:
 ) });
 var ProductSectionHeader = ({
   product,
+  isRequired,
   purposeCount,
+  requiredOnly,
   allSelected,
   someSelected,
   collapsed,
@@ -1812,7 +1845,7 @@ var ProductSectionHeader = ({
           children: /* @__PURE__ */ jsx3(CollapseChevron, { open: !collapsed, color: headingColor })
         }
       ),
-      /* @__PURE__ */ jsx3("div", { style: styles4.optionTextContainer, children: /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx3("div", { style: styles4.optionTextContainer, children: /* @__PURE__ */ jsxs2(
         "h2",
         {
           id: `product-name-${product.uuid}`,
@@ -1821,11 +1854,46 @@ var ProductSectionHeader = ({
             ...responsiveStyles.optionTitle,
             color: headingColor
           },
-          children: name
+          children: [
+            name,
+            isRequired && /* @__PURE__ */ jsx3(RequiredMarker, {})
+          ]
         }
       ) })
     ] }),
-    !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,
@@ -1833,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)
       }
     )
   ] });
@@ -1841,6 +1909,7 @@ var ProductSectionHeader = ({
 var PurposeItem = ({
   purpose,
   productUuid,
+  productIsRequired,
   selectedPurposes,
   collapsedPurposes,
   selectedDataElements,
@@ -1910,7 +1979,7 @@ var PurposeItem = ({
                   },
                   children: [
                     getTranslatedText(`purposes.name`, purpose.name, purpose.uuid),
-                    hasRequiredDataElement(purpose) && /* @__PURE__ */ jsx3(RequiredMarker, {})
+                    productIsRequired !== false && hasRequiredDataElement(purpose) && /* @__PURE__ */ jsx3(RequiredMarker, {})
                   ]
                 },
                 `purpose-name-${purpose.uuid}-${selectedLanguage}`
@@ -1953,13 +2022,9 @@ var PurposeItem = ({
       isAlreadyConsented && /* @__PURE__ */ jsx3(
         "div",
         {
+          role: "img",
           style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            width: "20px",
-            height: "20px",
-            borderRadius: "50%",
+            ...reviewIndicatorStyle(20),
             backgroundColor: "#10B981",
             marginLeft: "12px"
           },
@@ -2047,13 +2112,9 @@ var PurposeItem = ({
                   return /* @__PURE__ */ jsx3(
                     "div",
                     {
+                      role: "img",
                       style: {
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        width: "16px",
-                        height: "16px",
-                        borderRadius: "50%",
+                        ...reviewIndicatorStyle(16),
                         backgroundColor: "#10B981"
                       },
                       "aria-label": `Consented to ${getTranslatedText(
@@ -2088,13 +2149,9 @@ var PurposeItem = ({
                   return /* @__PURE__ */ jsx3(
                     "div",
                     {
+                      role: "img",
                       style: {
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        width: "16px",
-                        height: "16px",
-                        borderRadius: "50%",
+                        ...reviewIndicatorStyle(16),
                         border: "2px solid #d0d5dd",
                         backgroundColor: "transparent"
                       },
@@ -3024,7 +3081,8 @@ var RedactoNoticeConsent = ({
   digilockerCallbackUrl = "/digilocker-callback",
   // Default callback path
   includeFullyConsentedData = false,
-  reviewModeButtonText = "Continue"
+  reviewModeButtonText = "Continue",
+  defaultOpenProducts
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
   const sandboxParams = useMemo2(
@@ -3096,6 +3154,8 @@ var RedactoNoticeConsent = ({
   const [collapsedProducts, setCollapsedProducts] = useState({});
   const [collapsedPurposes, setCollapsedPurposes] = useState({});
   const [hasAlreadyConsented, setHasAlreadyConsented] = useState(false);
+  const [consentedProducts, setConsentedProducts] = useState({});
+  const [consentedPurposes, setConsentedPurposes] = useState({});
   const [isFullyConsentedReviewMode, setIsFullyConsentedReviewMode] = useState(false);
   const [isLanguageDropdownOpen, setIsLanguageDropdownOpen] = useState(false);
   const [selectedLanguage, setSelectedLanguage] = useState(language);
@@ -3279,42 +3339,67 @@ var RedactoNoticeConsent = ({
     },
     [content]
   );
-  const areAllRequiredElementsChecked = useMemo2(() => {
-    var _a2;
-    if (!content) return false;
-    if (purposeRows.length === 0) return true;
-    const isSatisfied = ({
-      purpose,
-      productUuid
-    }) => {
-      const key = productPurposeKey(productUuid, purpose.uuid);
-      const requiredElements = purpose.data_elements.filter(
-        (element) => element.required && element.enabled
-      );
-      return requiredElements.every(
-        (element) => selectedDataElements[`${key}-${element.uuid}`]
-      );
-    };
-    const rowsByProduct = /* @__PURE__ */ new Map();
-    for (const row of purposeRows) {
-      const groupKey = (_a2 = row.productUuid) != null ? _a2 : "";
-      const group = rowsByProduct.get(groupKey);
-      if (group) {
-        group.push(row);
-      } else {
-        rowsByProduct.set(groupKey, [row]);
+  const productMandatoryIsAuthoritative = useMemo2(
+    () => serverMarksMandatoryProducts(content == null ? void 0 : content.products),
+    [content]
+  );
+  const gatedProducts = useMemo2(
+    () => gatedProductUuids(content == null ? void 0 : content.products),
+    [content]
+  );
+  const productIsRequiredFor = useCallback(
+    (productUuid) => {
+      var _a2;
+      if (!productMandatoryIsAuthoritative) return void 0;
+      const resolved = productUuid != null ? productUuid : ((_a2 = content == null ? void 0 : content.products) == null ? void 0 : _a2.length) === 1 ? content.products[0].uuid : void 0;
+      return resolved !== void 0 && gatedProducts.has(resolved);
+    },
+    [productMandatoryIsAuthoritative, gatedProducts, content]
+  );
+  const confirmSatisfiedWith = useCallback(
+    (selection) => {
+      var _a2;
+      if (!content) return false;
+      if (purposeRows.length === 0) return true;
+      const isSatisfied = ({
+        purpose,
+        productUuid
+      }) => {
+        const key = productPurposeKey(productUuid, purpose.uuid);
+        const requiredElements = purpose.data_elements.filter(
+          isBlockingRequiredElement
+        );
+        return requiredElements.every(
+          (element) => selection[`${key}-${element.uuid}`]
+        );
+      };
+      if (serverMarksMandatoryProducts(content.products)) {
+        return rowsUnderGate(purposeRows, content.products).every(isSatisfied);
       }
-    }
-    const groups = [...rowsByProduct.values()];
-    const everyProductHasMandatory = groups.every(
-      (rows) => rows.some(
-        ({ purpose }) => purpose.data_elements.some(
-          (element) => element.required && element.enabled
+      const rowsByProduct = /* @__PURE__ */ new Map();
+      for (const row of purposeRows) {
+        const groupKey = (_a2 = row.productUuid) != null ? _a2 : "";
+        const group = rowsByProduct.get(groupKey);
+        if (group) {
+          group.push(row);
+        } else {
+          rowsByProduct.set(groupKey, [row]);
+        }
+      }
+      const groups = [...rowsByProduct.values()];
+      const everyProductHasMandatory = groups.every(
+        (rows) => rows.some(
+          ({ purpose }) => purpose.data_elements.some(isBlockingRequiredElement)
         )
-      )
-    );
-    return everyProductHasMandatory ? groups.some((rows) => rows.every(isSatisfied)) : purposeRows.every(isSatisfied);
-  }, [content, purposeRows, selectedDataElements]);
+      );
+      return everyProductHasMandatory ? groups.some((rows) => rows.every(isSatisfied)) : purposeRows.every(isSatisfied);
+    },
+    [content, purposeRows]
+  );
+  const areAllRequiredElementsChecked = useMemo2(
+    () => confirmSatisfiedWith(selectedDataElements),
+    [confirmSatisfiedWith, selectedDataElements]
+  );
   const acceptDisabled = isSubmitting || !areAllRequiredElementsChecked;
   useEffect2(() => {
     var _a2, _b2;
@@ -3327,6 +3412,7 @@ var RedactoNoticeConsent = ({
     setInitialDataElementSelections({});
     setCollapsedPurposes({});
     setCollapsedProducts({});
+    setConsentedProducts({});
     setHasAlreadyConsented(false);
     setErrorMessage(null);
     setFetchError(null);
@@ -3510,15 +3596,18 @@ var RedactoNoticeConsent = ({
         {}
       );
       setCollapsedPurposes(initialCollapsedState);
+      const openByDefault = new Set(defaultOpenProducts != null ? defaultOpenProducts : []);
+      const groups = groupPurposesByProduct(
+        activeConfig.products,
+        activeConfig.purposes,
+        activeConfig.product_purpose_order
+      );
+      const soleSection = groups.length === 1;
       setCollapsedProducts(
-        groupPurposesByProduct(
-          activeConfig.products,
-          activeConfig.purposes,
-          activeConfig.product_purpose_order
-        ).reduce(
-          (acc, group, index) => ({
+        groups.reduce(
+          (acc, group) => ({
             ...acc,
-            [group.product.uuid]: index > 0
+            [group.product.uuid]: !soleSection && !openByDefault.has(group.product.uuid)
           }),
           {}
         )
@@ -3545,9 +3634,10 @@ var RedactoNoticeConsent = ({
         activeConfig.purposes,
         activeConfig.product_purpose_order
       );
+      const productPurposeSelections = consentContentData.detail.product_purpose_selections;
       const recordedFor = (purposeUuid, productUuid) => {
-        var _a3, _b2;
-        const perProduct = productUuid ? (_b2 = (_a3 = activeConfig.product_purpose_selections) == null ? void 0 : _a3[productUuid]) == null ? void 0 : _b2[purposeUuid] : void 0;
+        var _a3;
+        const perProduct = productUuid ? (_a3 = productPurposeSelections == null ? void 0 : productPurposeSelections[productUuid]) == null ? void 0 : _a3[purposeUuid] : void 0;
         return perProduct != null ? perProduct : purposeSelections == null ? void 0 : purposeSelections[purposeUuid];
       };
       const initialPurposeState = seedRows.reduce(
@@ -3587,55 +3677,63 @@ var RedactoNoticeConsent = ({
         {}
       );
       setSelectedDataElements(initialDataElementState);
+      const rowIsRecorded = ({
+        purpose,
+        productUuid
+      }) => {
+        var _a3;
+        return ((_a3 = recordedFor(purpose.uuid, productUuid)) == null ? void 0 : _a3.selected) === true;
+      };
+      const recordedElementSelections = () => {
+        const selections = {};
+        seedRows.filter(rowIsRecorded).forEach(({ purpose, productUuid }) => {
+          const rowKey = productPurposeKey(productUuid, purpose.uuid);
+          purpose.data_elements.forEach((element) => {
+            var _a3, _b2, _c2, _d2;
+            selections[`${rowKey}-${element.uuid}`] = (_d2 = (_c2 = (_b2 = (_a3 = recordedFor(purpose.uuid, productUuid)) == null ? void 0 : _a3.data_elements) == null ? void 0 : _b2[element.uuid]) == null ? void 0 : _c2.selected) != null ? _d2 : false;
+          });
+        });
+        return selections;
+      };
+      if (purposeSelections || productPurposeSelections) {
+        const settled = {};
+        const settledRows = {};
+        seedRows.forEach((row) => {
+          var _a3;
+          const recorded = rowIsRecorded(row);
+          if (!row.productUuid) {
+            return;
+          }
+          settledRows[productPurposeKey(row.productUuid, row.purpose.uuid)] = recorded;
+          settled[row.productUuid] = ((_a3 = settled[row.productUuid]) != null ? _a3 : true) && recorded;
+        });
+        setConsentedProducts(settled);
+        setConsentedPurposes(settledRows);
+      }
       if (isReconsentRequired && newCategorizedPurposes) {
         setIsFullyConsentedReviewMode(false);
         const initialSelections = {};
         const alreadyConsentedUuids = new Set(
           newCategorizedPurposes.alreadyConsented.map((p) => p.uuid)
         );
-        seedRows.filter(({ purpose }) => alreadyConsentedUuids.has(purpose.uuid)).forEach(({ purpose, productUuid }) => {
+        seedRows.filter(
+          (row) => alreadyConsentedUuids.has(row.purpose.uuid) || rowIsRecorded(row)
+        ).forEach(({ purpose, productUuid }) => {
           const rowKey = productPurposeKey(productUuid, purpose.uuid);
           purpose.data_elements.forEach((element) => {
-            var _a3, _b2;
+            var _a3, _b2, _c2, _d2;
             const combinedId = `${rowKey}-${element.uuid}`;
-            if ((_b2 = (_a3 = purposeSelections == null ? void 0 : purposeSelections[purpose.uuid]) == null ? void 0 : _a3.data_elements) == null ? void 0 : _b2[element.uuid]) {
-              initialSelections[combinedId] = purposeSelections[purpose.uuid].data_elements[element.uuid].selected;
-            } else {
-              initialSelections[combinedId] = false;
-            }
+            initialSelections[combinedId] = (_d2 = (_c2 = (_b2 = (_a3 = recordedFor(purpose.uuid, productUuid)) == null ? void 0 : _a3.data_elements) == null ? void 0 : _b2[element.uuid]) == null ? void 0 : _c2.selected) != null ? _d2 : false;
           });
         });
         setInitialDataElementSelections(initialSelections);
-      } else if (includeFullyConsentedData && purposeSelections) {
-        const allPurposesSelected = seedRows.length > 0 && seedRows.every(
-          ({ purpose, productUuid }) => {
-            var _a3;
-            return ((_a3 = recordedFor(purpose.uuid, productUuid)) == null ? void 0 : _a3.selected) === true;
-          }
-        );
+      } else if (includeFullyConsentedData && (purposeSelections || productPurposeSelections)) {
+        const allPurposesSelected = seedRows.length > 0 && seedRows.every(rowIsRecorded);
         setIsFullyConsentedReviewMode(allPurposesSelected);
-        if (allPurposesSelected) {
-          const initialSelections = {};
-          seedRows.forEach(({ purpose, productUuid }) => {
-            const rowKey = productPurposeKey(productUuid, purpose.uuid);
-            purpose.data_elements.forEach((element) => {
-              var _a3, _b2;
-              const combinedId = `${rowKey}-${element.uuid}`;
-              if ((_b2 = (_a3 = purposeSelections[purpose.uuid]) == null ? void 0 : _a3.data_elements) == null ? void 0 : _b2[element.uuid]) {
-                initialSelections[combinedId] = purposeSelections[purpose.uuid].data_elements[element.uuid].selected;
-              } else {
-                initialSelections[combinedId] = false;
-              }
-            });
-          });
-          setInitialDataElementSelections(initialSelections);
-        } else {
-          setIsFullyConsentedReviewMode(false);
-          setInitialDataElementSelections({});
-        }
+        setInitialDataElementSelections(recordedElementSelections());
       } else {
         setIsFullyConsentedReviewMode(false);
-        setInitialDataElementSelections({});
+        setInitialDataElementSelections(recordedElementSelections());
       }
       if (consentContentData.detail.is_minor) {
         setIsMinorFlow(true);
@@ -3717,6 +3815,36 @@ var RedactoNoticeConsent = ({
       [productUuid]: !prev[productUuid]
     }));
   };
+  const toggleSection = (sectionPurposes, keyProductUuid) => {
+    const nextState = !sectionPurposes.every(
+      (purpose) => selectedPurposes[productPurposeKey(keyProductUuid, purpose.uuid)]
+    );
+    setSelectedPurposes((prev) => {
+      const updated = { ...prev };
+      sectionPurposes.forEach((purpose) => {
+        updated[productPurposeKey(keyProductUuid, purpose.uuid)] = nextState;
+      });
+      return updated;
+    });
+    const elementOverrides = {};
+    sectionPurposes.forEach((purpose) => {
+      const key = productPurposeKey(keyProductUuid, purpose.uuid);
+      purpose.data_elements.forEach((element) => {
+        elementOverrides[`${key}-${element.uuid}`] = nextState;
+      });
+    });
+    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;
@@ -3727,29 +3855,48 @@ var RedactoNoticeConsent = ({
     if (!group) {
       return;
     }
-    const nextState = !group.purposes.every(
-      (purpose) => selectedPurposes[productPurposeKey(productUuid, purpose.uuid)]
+    const editable = productBoxPurposes(productUuid, group.purposes).filter(
+      (purpose) => !consentedPurposes[productPurposeKey(productUuid, purpose.uuid)]
     );
-    setSelectedPurposes((prev) => {
-      const updated = { ...prev };
-      group.purposes.forEach((purpose) => {
-        updated[productPurposeKey(productUuid, purpose.uuid)] = nextState;
-      });
-      return updated;
-    });
-    setSelectedDataElements((prev) => {
-      const updated = { ...prev };
-      group.purposes.forEach((purpose) => {
-        const key = productPurposeKey(productUuid, purpose.uuid);
-        purpose.data_elements.forEach((element) => {
-          updated[`${key}-${element.uuid}`] = nextState;
-        });
-      });
-      return updated;
-    });
-    if (!nextState) {
-      setCollapsedProducts((prev) => ({ ...prev, [productUuid]: false }));
+    if (editable.length === 0) {
+      return;
     }
+    toggleSection(editable, productUuid);
+  };
+  const soleProductSection = (rows) => {
+    var _a2, _b2;
+    const products = content == null ? void 0 : content.products;
+    if (!products || products.length !== 1) {
+      return rows;
+    }
+    const product = products[0];
+    const purposes = (_a2 = content == null ? void 0 : content.purposes) != null ? _a2 : [];
+    const boxPurposes = productBoxPurposes(product.uuid, purposes);
+    const selectedCount = boxPurposes.filter(
+      (purpose) => selectedPurposes[productPurposeKey(void 0, purpose.uuid)]
+    ).length;
+    return /* @__PURE__ */ jsxs2("div", { children: [
+      /* @__PURE__ */ jsx3(
+        ProductSectionHeader,
+        {
+          product,
+          isRequired: productIsRequiredFor(product.uuid),
+          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,
+          settings,
+          styles,
+          responsiveStyles,
+          onToggleCollapse: () => toggleProductCollapse(product.uuid),
+          onToggleSelect: () => toggleSection(boxPurposes, void 0),
+          getTranslatedText
+        }
+      ),
+      !collapsedProducts[product.uuid] && /* @__PURE__ */ jsx3("div", { style: styles.sectionBody, children: rows })
+    ] });
   };
   const handleDataElementCheckboxChange = (elementUuid, purposeUuid, productUuid) => {
     if (!content) return;
@@ -5335,50 +5482,65 @@ var RedactoNoticeConsent = ({
                   },
                   `purpose-section-heading-${selectedLanguage}`
                 ),
-                categorizedPurposes && !isMultiProduct(content == null ? void 0 : content.products) ? /* @__PURE__ */ jsxs2("div", { style: styles.optionsContainer, children: [
-                  categorizedPurposes.alreadyConsented.map((purpose) => /* @__PURE__ */ jsx3(
-                    PurposeItem,
-                    {
-                      purpose,
-                      selectedPurposes,
-                      collapsedPurposes,
-                      selectedDataElements,
-                      settings,
-                      styles,
-                      responsiveStyles,
-                      onPurposeToggle: handlePurposeCheckboxChange,
-                      onPurposeCollapse: togglePurposeCollapse,
-                      onDataElementToggle: handleDataElementCheckboxChange,
-                      getTranslatedText,
-                      isAlreadyConsented: true,
-                      selectedLanguage,
-                      initialDataElementSelections
-                    },
-                    `${purpose.uuid}-${selectedLanguage}`
-                  )),
-                  categorizedPurposes.needsConsent.map((purpose) => /* @__PURE__ */ jsx3(
-                    PurposeItem,
-                    {
-                      purpose,
-                      selectedPurposes,
-                      collapsedPurposes,
-                      selectedDataElements,
-                      settings,
-                      styles,
-                      responsiveStyles,
-                      onPurposeToggle: handlePurposeCheckboxChange,
-                      onPurposeCollapse: togglePurposeCollapse,
-                      onDataElementToggle: handleDataElementCheckboxChange,
-                      getTranslatedText,
-                      isAlreadyConsented: false,
-                      selectedLanguage
-                    },
-                    `${purpose.uuid}-${selectedLanguage}`
-                  ))
-                ] }) : (
+                categorizedPurposes && !isMultiProduct(content == null ? void 0 : content.products) ? /* @__PURE__ */ jsx3("div", { style: styles.optionsContainer, children: soleProductSection(
+                  /* @__PURE__ */ jsxs2(Fragment2, { children: [
+                    categorizedPurposes.alreadyConsented.map(
+                      (purpose) => /* @__PURE__ */ jsx3(
+                        PurposeItem,
+                        {
+                          purpose,
+                          productIsRequired: productIsRequiredFor(
+                            void 0
+                          ),
+                          selectedPurposes,
+                          collapsedPurposes,
+                          selectedDataElements,
+                          settings,
+                          styles,
+                          responsiveStyles,
+                          onPurposeToggle: handlePurposeCheckboxChange,
+                          onPurposeCollapse: togglePurposeCollapse,
+                          onDataElementToggle: handleDataElementCheckboxChange,
+                          getTranslatedText,
+                          isAlreadyConsented: true,
+                          selectedLanguage,
+                          initialDataElementSelections
+                        },
+                        `${purpose.uuid}-${selectedLanguage}`
+                      )
+                    ),
+                    categorizedPurposes.needsConsent.map((purpose) => /* @__PURE__ */ jsx3(
+                      PurposeItem,
+                      {
+                        purpose,
+                        productIsRequired: productIsRequiredFor(
+                          void 0
+                        ),
+                        selectedPurposes,
+                        collapsedPurposes,
+                        selectedDataElements,
+                        settings,
+                        styles,
+                        responsiveStyles,
+                        onPurposeToggle: handlePurposeCheckboxChange,
+                        onPurposeCollapse: togglePurposeCollapse,
+                        onDataElementToggle: handleDataElementCheckboxChange,
+                        getTranslatedText,
+                        isAlreadyConsented: false,
+                        selectedLanguage
+                      },
+                      `${purpose.uuid}-${selectedLanguage}`
+                    ))
+                  ] })
+                ) }) : (
                   /* Regular consent UI */
                   /* @__PURE__ */ jsx3("div", { style: styles.optionsContainer, children: isMultiProduct(content == null ? void 0 : content.products) ? productGroups.map((group) => {
-                    const selectedInGroup = group.purposes.filter(
+                    var _a2;
+                    const boxPurposes = productBoxPurposes(
+                      group.product.uuid,
+                      group.purposes
+                    );
+                    const selectedInGroup = boxPurposes.filter(
                       (purpose) => selectedPurposes[productPurposeKey(
                         group.product.uuid,
                         purpose.uuid
@@ -5389,11 +5551,15 @@ var RedactoNoticeConsent = ({
                         ProductSectionHeader,
                         {
                           product: group.product,
-                          purposeCount: group.purposes.length,
-                          allSelected: selectedInGroup === group.purposes.length,
+                          isRequired: productIsRequiredFor(
+                            group.product.uuid
+                          ),
+                          purposeCount: boxPurposes.length,
+                          requiredOnly: boxPurposes.length < group.purposes.length,
+                          allSelected: selectedInGroup === boxPurposes.length,
                           someSelected: selectedInGroup > 0,
                           collapsed: collapsedProducts[group.product.uuid] || false,
-                          locked: isFullyConsentedReviewMode,
+                          locked: (_a2 = consentedProducts[group.product.uuid]) != null ? _a2 : false,
                           settings,
                           styles,
                           responsiveStyles,
@@ -5408,50 +5574,64 @@ var RedactoNoticeConsent = ({
                           id: `product-${group.product.uuid}`,
                           style: styles.sectionBody,
                           hidden: collapsedProducts[group.product.uuid] || false,
-                          children: group.purposes.map((purpose) => /* @__PURE__ */ jsx3(
-                            PurposeItem,
-                            {
-                              purpose,
-                              productUuid: group.product.uuid,
-                              selectedPurposes,
-                              collapsedPurposes,
-                              selectedDataElements,
-                              settings,
-                              styles,
-                              responsiveStyles,
-                              onPurposeToggle: handlePurposeCheckboxChange,
-                              onPurposeCollapse: togglePurposeCollapse,
-                              onDataElementToggle: handleDataElementCheckboxChange,
-                              getTranslatedText,
-                              isAlreadyConsented: isFullyConsentedReviewMode,
-                              selectedLanguage,
-                              initialDataElementSelections
-                            },
-                            `${group.product.uuid}-${purpose.uuid}-${selectedLanguage}`
-                          ))
+                          children: group.purposes.map((purpose) => {
+                            var _a3;
+                            return /* @__PURE__ */ jsx3(
+                              PurposeItem,
+                              {
+                                purpose,
+                                productUuid: group.product.uuid,
+                                productIsRequired: productIsRequiredFor(
+                                  group.product.uuid
+                                ),
+                                selectedPurposes,
+                                collapsedPurposes,
+                                selectedDataElements,
+                                settings,
+                                styles,
+                                responsiveStyles,
+                                onPurposeToggle: handlePurposeCheckboxChange,
+                                onPurposeCollapse: togglePurposeCollapse,
+                                onDataElementToggle: handleDataElementCheckboxChange,
+                                getTranslatedText,
+                                isAlreadyConsented: (_a3 = consentedPurposes[productPurposeKey(
+                                  group.product.uuid,
+                                  purpose.uuid
+                                )]) != null ? _a3 : false,
+                                selectedLanguage,
+                                initialDataElementSelections
+                              },
+                              `${group.product.uuid}-${purpose.uuid}-${selectedLanguage}`
+                            );
+                          })
                         }
                       )
                     ] }, group.product.uuid);
-                  }) : (_y = content == null ? void 0 : content.purposes) == null ? void 0 : _y.map((purpose) => /* @__PURE__ */ jsx3(
-                    PurposeItem,
-                    {
-                      purpose,
-                      selectedPurposes,
-                      collapsedPurposes,
-                      selectedDataElements,
-                      settings,
-                      styles,
-                      responsiveStyles,
-                      onPurposeToggle: handlePurposeCheckboxChange,
-                      onPurposeCollapse: togglePurposeCollapse,
-                      onDataElementToggle: handleDataElementCheckboxChange,
-                      getTranslatedText,
-                      isAlreadyConsented: isFullyConsentedReviewMode,
-                      selectedLanguage,
-                      initialDataElementSelections
-                    },
-                    `${purpose.uuid}-${selectedLanguage}`
-                  )) })
+                  }) : soleProductSection(
+                    (_y = content == null ? void 0 : content.purposes) == null ? void 0 : _y.map((purpose) => /* @__PURE__ */ jsx3(
+                      PurposeItem,
+                      {
+                        purpose,
+                        productIsRequired: productIsRequiredFor(
+                          void 0
+                        ),
+                        selectedPurposes,
+                        collapsedPurposes,
+                        selectedDataElements,
+                        settings,
+                        styles,
+                        responsiveStyles,
+                        onPurposeToggle: handlePurposeCheckboxChange,
+                        onPurposeCollapse: togglePurposeCollapse,
+                        onDataElementToggle: handleDataElementCheckboxChange,
+                        getTranslatedText,
+                        isAlreadyConsented: isFullyConsentedReviewMode,
+                        selectedLanguage,
+                        initialDataElementSelections
+                      },
+                      `${purpose.uuid}-${selectedLanguage}`
+                    ))
+                  ) })
                 ),
                 ((content == null ? void 0 : content.privacy_center_url) || (content == null ? void 0 : content.dpo_info)) && /* @__PURE__ */ jsx3(
                   "div",