@redacto.io/consent-sdk-react 10.1.0-beta.2 → 10.2.0-beta.0

package/dist/index.js

@@ -420,6 +420,9 @@ var submitConsentEvent = async ({
     }));
     return {
       purpose_uuid: purpose.uuid,
+      // Omitted on a single-product notice, where the ledger applies the
+      // selection to every product the purpose covers.
+      product_uuid: purpose.product_uuid || void 0,
       selected: Boolean(purpose.selected),
       data_elements: dataElements.length > 0 ? dataElements : void 0
     };
@@ -679,6 +682,9 @@ var DPO_AUDIO_ELEMENT_MAP = [
   { audioKey: "dpo_text_audio_url", elementId: "dpo-dpo-text" },
   { audioKey: "dpo_anchor_text_audio_url", elementId: "dpo-dpo-link" }
 ];
+var PRODUCT_SECTION_COPY = {
+  toggleSelection: (productName, purposeCount) => `Toggle all ${purposeCount} purposes for ${productName}`
+};
 
 // src/RedactoNoticeConsent/styles.ts
 var styles = {
@@ -895,6 +901,28 @@ var styles = {
     padding: 0,
     boxSizing: "border-box"
   },
+  // A product section's heading. Its own tokens rather than the row's: sharing
+  // optionTitle rendered the group name at the same size, weight and indent as
+  // the purposes inside it, leaving nothing to mark it as a heading.
+  sectionHeader: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    margin: "0 0 8px",
+    padding: 0,
+    boxSizing: "border-box"
+  },
+  // No colour token: the header always overrides it with the notice's
+  // headingColor, so one here would imply a default that never applies.
+  sectionTitle: {
+    fontWeight: 600,
+    fontSize: "17px",
+    lineHeight: "150%",
+    letterSpacing: "0.2px",
+    margin: 0,
+    padding: 0,
+    textAlign: "left"
+  },
   optionTextContainer: {
     display: "flex",
     flexDirection: "column",
@@ -1236,18 +1264,76 @@ var NoticeFooter = ({
   ] });
 };
 
+// src/shared/productMatrix.ts
+var productPurposeKey = (productUuid, purposeUuid) => productUuid ? `${productUuid}:${purposeUuid}` : purposeUuid;
+var purposeCoversProduct = (purpose, productUuid) => {
+  const scope = purpose.product_uuids;
+  if (!scope || scope.length === 0) return true;
+  return scope.includes(productUuid);
+};
+var isMultiProduct = (products) => Boolean(products && products.length > 1);
+var groupPurposesByProduct = (products, purposes, order) => {
+  if (!products || products.length === 0) return [];
+  return products.map((product) => {
+    const covered = purposes.filter(
+      (purpose) => purposeCoversProduct(purpose, product.uuid)
+    );
+    const saved = order == null ? void 0 : order[product.uuid];
+    if (!saved || saved.length === 0) return { product, purposes: covered };
+    const byUuid = new Map(covered.map((p) => [p.uuid, p]));
+    const ordered = [];
+    for (const uuid of saved) {
+      const found = byUuid.get(uuid);
+      if (found) ordered.push(found);
+    }
+    const rest = covered.filter((p) => !saved.includes(p.uuid));
+    return { product, purposes: [...ordered, ...rest] };
+  }).filter((group) => group.purposes.length > 0);
+};
+var expandPurposesByProduct = (products, purposes, order) => {
+  if (!isMultiProduct(products)) return [];
+  const rows = [];
+  for (const group of groupPurposesByProduct(products, purposes, order)) {
+    for (const purpose of group.purposes) {
+      rows.push({ product: group.product, purpose });
+    }
+  }
+  return rows;
+};
+var noticePurposeRows = (products, purposes, order) => {
+  if (!isMultiProduct(products)) {
+    return purposes.map((purpose) => ({ purpose, productUuid: void 0 }));
+  }
+  const rows = expandPurposesByProduct(products, purposes, order).map(
+    (row) => ({
+      purpose: row.purpose,
+      productUuid: row.product.uuid
+    })
+  );
+  const rendered = new Set(rows.map((row) => row.purpose.uuid));
+  const orphaned = purposes.filter((purpose) => !rendered.has(purpose.uuid));
+  if (orphaned.length > 0) {
+    console.warn(
+      "[redacto] purposes cover no product on this notice and will not be shown or submitted:",
+      orphaned.map((purpose) => purpose.uuid)
+    );
+  }
+  return rows;
+};
+
 // src/RedactoNoticeConsent/utils/consentSelection.ts
-var dataElementKey = (purposeUuid, elementUuid) => `${purposeUuid}-${elementUuid}`;
-var buildSelectionForMode = (purposes, mode, current) => {
+var dataElementKey = (purposeUuid, elementUuid, productUuid) => `${productPurposeKey(productUuid, purposeUuid)}-${elementUuid}`;
+var buildSelectionForMode = (rows, mode, current) => {
   if (mode === "selected") {
     return current;
   }
   const selectedPurposes = {};
   const selectedDataElements = {};
-  purposes.forEach((purpose) => {
-    selectedPurposes[purpose.uuid] = true;
+  rows.forEach(({ purpose, productUuid }) => {
+    const key = productPurposeKey(productUuid, purpose.uuid);
+    selectedPurposes[key] = true;
     purpose.data_elements.forEach((element) => {
-      selectedDataElements[dataElementKey(purpose.uuid, element.uuid)] = element.enabled;
+      selectedDataElements[dataElementKey(purpose.uuid, element.uuid, productUuid)] = element.enabled;
     });
   });
   return { selectedPurposes, selectedDataElements };
@@ -1267,10 +1353,11 @@ var buildPreselection = (purposes, mode) => {
   const selectedPurposes = {};
   const selectedDataElements = {};
   if (mode === "ALL") {
-    return buildSelectionForMode(purposes, "all", {
-      selectedPurposes,
-      selectedDataElements
-    });
+    return buildSelectionForMode(
+      purposes.map((purpose) => ({ purpose, productUuid: void 0 })),
+      "all",
+      { selectedPurposes, selectedDataElements }
+    );
   }
   purposes.forEach((purpose) => {
     let hasPreselectedElement = false;
@@ -1899,8 +1986,113 @@ var updateConsentState = (updates) => {
 
 // src/RedactoNoticeConsent/RedactoNoticeConsent.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var DEFAULT_HEADING_COLOR = "#323B4B";
+var CHEVRON_BUTTON_STYLE = {
+  background: "none",
+  border: "none",
+  padding: 0,
+  margin: 0,
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center"
+};
+var CHEVRON_WRAPPER_STYLE = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  marginLeft: "5px"
+};
+var CollapseChevron = ({ open, color }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: CHEVRON_WRAPPER_STYLE, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  "svg",
+  {
+    width: "7",
+    height: "12",
+    viewBox: "0 0 7 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    style: {
+      transform: open ? "rotate(90deg)" : "rotate(0deg)",
+      transition: "transform 0.3s ease"
+    },
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M1 1L6 6L1 11" })
+  }
+) });
+var ProductSectionHeader = ({
+  product,
+  purposeCount,
+  allSelected,
+  someSelected,
+  collapsed,
+  locked,
+  settings,
+  styles: styles4,
+  responsiveStyles,
+  onToggleCollapse,
+  onToggleSelect,
+  getTranslatedText
+}) => {
+  const checkboxRef = (0, import_react3.useRef)(null);
+  const name = getTranslatedText("products.name", product.name, product.uuid);
+  const headingColor = (settings == null ? void 0 : settings.headingColor) || DEFAULT_HEADING_COLOR;
+  (0, import_react3.useEffect)(() => {
+    if (checkboxRef.current) {
+      checkboxRef.current.indeterminate = someSelected && !allSelected;
+    }
+  }, [someSelected, allSelected]);
+  const handleToggleCollapse = () => {
+    onToggleCollapse(product.uuid);
+  };
+  const handleToggleSelect = () => {
+    onToggleSelect(product.uuid);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles4.sectionHeader, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles4.optionLeft, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: handleToggleCollapse,
+          "aria-expanded": !collapsed,
+          "aria-controls": `product-${product.uuid}`,
+          "aria-labelledby": `product-name-${product.uuid}`,
+          style: CHEVRON_BUTTON_STYLE,
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CollapseChevron, { open: !collapsed, color: headingColor })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles4.optionTextContainer, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "h2",
+        {
+          id: `product-name-${product.uuid}`,
+          style: {
+            ...styles4.sectionTitle,
+            ...responsiveStyles.optionTitle,
+            color: headingColor
+          },
+          children: name
+        }
+      ) })
+    ] }),
+    !locked && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "input",
+      {
+        ref: checkboxRef,
+        className: "redacto-checkbox-large",
+        type: "checkbox",
+        checked: allSelected,
+        onChange: handleToggleSelect,
+        "aria-label": PRODUCT_SECTION_COPY.toggleSelection(name, purposeCount)
+      }
+    )
+  ] });
+};
 var PurposeItem = ({
   purpose,
+  productUuid,
   selectedPurposes,
   collapsedPurposes,
   selectedDataElements,
@@ -1915,9 +2107,10 @@ var PurposeItem = ({
   selectedLanguage,
   initialDataElementSelections = {}
 }) => {
+  const stateKey = productPurposeKey(productUuid, purpose.uuid);
   const headingStyle = (0, import_react3.useMemo)(
     () => ({
-      color: (settings == null ? void 0 : settings.headingColor) || "#323B4B"
+      color: (settings == null ? void 0 : settings.headingColor) || DEFAULT_HEADING_COLOR
     }),
     [settings == null ? void 0 : settings.headingColor]
   );
@@ -1933,12 +2126,12 @@ var PurposeItem = ({
         "div",
         {
           style: styles4.optionLeft,
-          onClick: () => onPurposeCollapse(purpose.uuid),
+          onClick: () => onPurposeCollapse(purpose.uuid, productUuid),
           role: "button",
           tabIndex: 0,
-          "aria-expanded": !collapsedPurposes[purpose.uuid],
+          "aria-expanded": !collapsedPurposes[stateKey],
           "aria-controls": `purpose-${purpose.uuid}`,
-          "aria-label": `${collapsedPurposes[purpose.uuid] ? "Expand" : "Collapse"} ${getTranslatedText(
+          "aria-label": `${collapsedPurposes[stateKey] ? "Expand" : "Collapse"} ${getTranslatedText(
             `purposes.name`,
             purpose.name,
             purpose.uuid
@@ -1946,46 +2139,22 @@ var PurposeItem = ({
           onKeyDown: (e) => {
             if (e.key === "Enter" || e.key === " ") {
               e.preventDefault();
-              onPurposeCollapse(purpose.uuid);
+              onPurposeCollapse(purpose.uuid, productUuid);
             }
           },
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "div",
+              CollapseChevron,
               {
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  marginLeft: "5px"
-                },
-                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  "svg",
-                  {
-                    width: "7",
-                    height: "12",
-                    viewBox: "0 0 7 12",
-                    fill: "none",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    stroke: (settings == null ? void 0 : settings.headingColor) || "#323B4B",
-                    strokeWidth: "2",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    style: {
-                      transform: !collapsedPurposes[purpose.uuid] ? "rotate(90deg)" : "rotate(0deg)",
-                      transition: "transform 0.3s ease"
-                    },
-                    "aria-hidden": "true",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M1 1L6 6L1 11" })
-                  }
-                )
+                open: !collapsedPurposes[stateKey],
+                color: (settings == null ? void 0 : settings.headingColor) || DEFAULT_HEADING_COLOR
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles4.optionTextContainer, children: [
               /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
                 "h2",
                 {
-                  id: `purpose-name-${purpose.uuid}`,
+                  id: `purpose-name-${stateKey}`,
                   style: {
                     ...styles4.optionTitle,
                     ...responsiveStyles.optionTitle,
@@ -2001,7 +2170,7 @@ var PurposeItem = ({
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "h3",
                 {
-                  id: `purpose-description-${purpose.uuid}`,
+                  id: `purpose-description-${stateKey}`,
                   style: {
                     ...styles4.optionDescription,
                     ...responsiveStyles.optionDescription,
@@ -2024,8 +2193,8 @@ var PurposeItem = ({
         {
           className: "redacto-checkbox-large",
           type: "checkbox",
-          checked: selectedPurposes[purpose.uuid] || false,
-          onChange: () => onPurposeToggle(purpose.uuid),
+          checked: selectedPurposes[stateKey] || false,
+          onChange: () => onPurposeToggle(purpose.uuid, productUuid),
           "aria-label": `Select all data elements for ${getTranslatedText(
             `purposes.name`,
             purpose.name,
@@ -2075,7 +2244,7 @@ var PurposeItem = ({
         }
       )
     ] }),
-    !collapsedPurposes[purpose.uuid] && purpose.data_elements && purpose.data_elements.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    !collapsedPurposes[stateKey] && purpose.data_elements && purpose.data_elements.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "div",
       {
         id: `purpose-${purpose.uuid}`,
@@ -2088,7 +2257,7 @@ var PurposeItem = ({
               /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
                 "span",
                 {
-                  id: `data-element-${purpose.uuid}-${dataElement.uuid}`,
+                  id: `data-element-${stateKey}-${dataElement.uuid}`,
                   style: {
                     ...styles4.dataElementText,
                     ...responsiveStyles.dataElementText,
@@ -2110,8 +2279,12 @@ var PurposeItem = ({
                 {
                   className: "redacto-checkbox-small",
                   type: "checkbox",
-                  checked: selectedDataElements[`${purpose.uuid}-${dataElement.uuid}`] || false,
-                  onChange: () => onDataElementToggle(dataElement.uuid, purpose.uuid),
+                  checked: selectedDataElements[`${stateKey}-${dataElement.uuid}`] || false,
+                  onChange: () => onDataElementToggle(
+                    dataElement.uuid,
+                    purpose.uuid,
+                    productUuid
+                  ),
                   "aria-label": `Select ${getTranslatedText(
                     `data_elements.name`,
                     dataElement.name,
@@ -2120,7 +2293,7 @@ var PurposeItem = ({
                 }
               ),
               isAlreadyConsented && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: (() => {
-                const combinedId = `${purpose.uuid}-${dataElement.uuid}`;
+                const combinedId = `${stateKey}-${dataElement.uuid}`;
                 const wasOriginallySelected = initialDataElementSelections[combinedId] || false;
                 if (wasOriginallySelected) {
                   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -2258,7 +2431,9 @@ var GuardianForm = ({
     switch (e.key) {
       case "ArrowDown":
         e.preventDefault();
-        setFocusedIndex((prev) => Math.min(prev + 1, RELATIONSHIP_OPTIONS.length - 1));
+        setFocusedIndex(
+          (prev) => Math.min(prev + 1, RELATIONSHIP_OPTIONS.length - 1)
+        );
         break;
       case "ArrowUp":
         e.preventDefault();
@@ -2267,7 +2442,8 @@ var GuardianForm = ({
       case "Enter":
       case " ":
         e.preventDefault();
-        if (focusedIndex >= 0) handleSelect(RELATIONSHIP_OPTIONS[focusedIndex].value);
+        if (focusedIndex >= 0)
+          handleSelect(RELATIONSHIP_OPTIONS[focusedIndex].value);
         break;
       case "Escape":
       case "Tab":
@@ -2332,7 +2508,9 @@ var GuardianForm = ({
     lineHeight: "1.5",
     color: "#1E40AF"
   };
-  const selectedLabel = (_a = RELATIONSHIP_OPTIONS.find((o) => o.value === formData.guardianRelationship)) == null ? void 0 : _a.label;
+  const selectedLabel = (_a = RELATIONSHIP_OPTIONS.find(
+    (o) => o.value === formData.guardianRelationship
+  )) == null ? void 0 : _a.label;
   const hasError = Boolean(errors.guardianRelationship);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { ...styles4.topSection, ...componentTextStyle }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles4.topLeft, children: [
@@ -2432,7 +2610,8 @@ var GuardianForm = ({
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
                   /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { htmlFor: "guardianContact", style: labelStyle, children: [
-                    "Guardian's Phone Number ",
+                    "Guardian's Phone Number",
+                    " ",
                     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: "#DC2626" }, children: "*" })
                   ] }),
                   /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -2488,7 +2667,17 @@ var GuardianForm = ({
                         transition: "border-color 0.15s, box-shadow 0.15s"
                       },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: selectedLabel || "Select relationship" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          "span",
+                          {
+                            style: {
+                              overflow: "hidden",
+                              textOverflow: "ellipsis",
+                              whiteSpace: "nowrap"
+                            },
+                            children: selectedLabel || "Select relationship"
+                          }
+                        ),
                         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                           "svg",
                           {
@@ -3156,6 +3345,7 @@ var RedactoNoticeConsent = ({
   const [selectedPurposes, setSelectedPurposes] = (0, import_react3.useState)({});
   const [selectedDataElements, setSelectedDataElements] = (0, import_react3.useState)({});
   const [initialDataElementSelections, setInitialDataElementSelections] = (0, import_react3.useState)({});
+  const [collapsedProducts, setCollapsedProducts] = (0, import_react3.useState)({});
   const [collapsedPurposes, setCollapsedPurposes] = (0, import_react3.useState)({});
   const [hasAlreadyConsented, setHasAlreadyConsented] = (0, import_react3.useState)(false);
   const [isFullyConsentedReviewMode, setIsFullyConsentedReviewMode] = (0, import_react3.useState)(false);
@@ -3201,7 +3391,9 @@ var RedactoNoticeConsent = ({
   const statusPollIntervalRef = (0, import_react3.useRef)(null);
   const verificationPopupRef = (0, import_react3.useRef)(null);
   const pollingCleanupRef = (0, import_react3.useRef)(null);
-  const autoTransitionTimerRef = (0, import_react3.useRef)(null);
+  const autoTransitionTimerRef = (0, import_react3.useRef)(
+    null
+  );
   const digilockerRedirectTimeoutRef = (0, import_react3.useRef)(null);
   const isInitialMountRef = (0, import_react3.useRef)(true);
   const isPollingStatusRef = (0, import_react3.useRef)(false);
@@ -3311,21 +3503,70 @@ var RedactoNoticeConsent = ({
   const logoRowStyle = (0, import_react3.useMemo)(
     () => ({
       ...styles.logoRow,
-      justifyContent: logoRowJustify(resolveLogoPosition(content == null ? void 0 : content.logo_position))
+      justifyContent: logoRowJustify(
+        resolveLogoPosition(content == null ? void 0 : content.logo_position)
+      )
     }),
     [content == null ? void 0 : content.logo_position]
   );
+  const purposeRows = (0, import_react3.useMemo)(
+    () => {
+      var _a2;
+      return noticePurposeRows(
+        content == null ? void 0 : content.products,
+        (_a2 = content == null ? void 0 : content.purposes) != null ? _a2 : [],
+        content == null ? void 0 : content.product_purpose_order
+      );
+    },
+    [content]
+  );
+  const productGroups = (0, import_react3.useMemo)(
+    () => {
+      var _a2;
+      return groupPurposesByProduct(
+        content == null ? void 0 : content.products,
+        (_a2 = content == null ? void 0 : content.purposes) != null ? _a2 : [],
+        content == null ? void 0 : content.product_purpose_order
+      );
+    },
+    [content]
+  );
   const areAllRequiredElementsChecked = (0, import_react3.useMemo)(() => {
+    var _a2;
     if (!content) return false;
-    return content.purposes.every((purpose) => {
+    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[`${purpose.uuid}-${element.uuid}`]
+        (element) => selectedDataElements[`${key}-${element.uuid}`]
       );
-    });
-  }, [content, selectedDataElements]);
+    };
+    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(
+          (element) => element.required && element.enabled
+        )
+      )
+    );
+    return everyProductHasMandatory ? groups.some((rows) => rows.every(isSatisfied)) : purposeRows.every(isSatisfied);
+  }, [content, purposeRows, selectedDataElements]);
   const acceptDisabled = isSubmitting || !areAllRequiredElementsChecked;
   (0, import_react3.useEffect)(() => {
     var _a2, _b2;
@@ -3337,6 +3578,7 @@ var RedactoNoticeConsent = ({
     setSelectedDataElements({});
     setInitialDataElementSelections({});
     setCollapsedPurposes({});
+    setCollapsedProducts({});
     setHasAlreadyConsented(false);
     setErrorMessage(null);
     setFetchError(null);
@@ -3401,7 +3643,7 @@ var RedactoNoticeConsent = ({
     return false;
   };
   const getTranslatedText = (key, defaultText, itemId) => {
-    var _a2, _b2;
+    var _a2, _b2, _c2;
     if (!content) return defaultText;
     if (isDefaultLanguage(selectedLanguage)) {
       if (key === "privacy_policy_anchor_text" && content.privacy_policy_anchor_text) {
@@ -3439,8 +3681,18 @@ var RedactoNoticeConsent = ({
         }
         return defaultText;
       }
+      if (key === "products.name" || key === "products.description") {
+        const productData = (_b2 = translationMap.products) == null ? void 0 : _b2[itemId];
+        if (productData) {
+          if (typeof productData === "string") {
+            return key === "products.name" ? productData : defaultText;
+          }
+          return key === "products.name" ? productData.name || defaultText : productData.description || defaultText;
+        }
+        return defaultText;
+      }
       if (key.startsWith("data_elements.")) {
-        return ((_b2 = translationMap.data_elements) == null ? void 0 : _b2[itemId]) || defaultText;
+        return ((_c2 = translationMap.data_elements) == null ? void 0 : _c2[itemId]) || defaultText;
       }
     }
     const value = translationMap[key];
@@ -3498,63 +3750,76 @@ var RedactoNoticeConsent = ({
           defaultLang === "en" || defaultLang === "EN" ? "English" : defaultLang
         );
       }
-      const initialCollapsedState = activeConfig.purposes.reduce(
-        (acc, purpose) => ({
+      const initialCollapsedState = noticePurposeRows(
+        activeConfig.products,
+        activeConfig.purposes,
+        activeConfig.product_purpose_order
+      ).reduce(
+        (acc, { purpose, productUuid }) => ({
           ...acc,
-          [purpose.uuid]: true
+          [productPurposeKey(productUuid, purpose.uuid)]: true
         }),
         {}
       );
       setCollapsedPurposes(initialCollapsedState);
+      setCollapsedProducts({});
       const isReconsentRequired = consentContentData.detail.reconsent_required;
       const purposeSelections = consentContentData.detail.purpose_selections;
       const newCategorizedPurposes = isReconsentRequired ? {
-        alreadyConsented: activeConfig.purposes.filter(
-          (purpose) => {
-            const selection = purposeSelections == null ? void 0 : purposeSelections[purpose.uuid];
-            return selection && (selection.status === "ACTIVE" || selection.status === "EXPIRED") && !selection.needs_reconsent;
-          }
-        ),
-        needsConsent: activeConfig.purposes.filter(
-          (purpose) => {
-            const selection = purposeSelections == null ? void 0 : purposeSelections[purpose.uuid];
-            return !selection || selection.status !== "ACTIVE" || selection.needs_reconsent;
-          }
-        )
+        alreadyConsented: activeConfig.purposes.filter((purpose) => {
+          const selection = purposeSelections == null ? void 0 : purposeSelections[purpose.uuid];
+          return selection && (selection.status === "ACTIVE" || selection.status === "EXPIRED") && !selection.needs_reconsent;
+        }),
+        needsConsent: activeConfig.purposes.filter((purpose) => {
+          const selection = purposeSelections == null ? void 0 : purposeSelections[purpose.uuid];
+          return !selection || selection.status !== "ACTIVE" || selection.needs_reconsent;
+        })
       } : null;
       setCategorizedPurposes(newCategorizedPurposes);
       const preselection = buildPreselection(
         activeConfig.purposes,
         resolvePurposePreselection(activeConfig.purpose_preselection)
       );
-      const initialPurposeState = activeConfig.purposes.reduce(
-        (acc, purpose) => {
+      const seedRows = noticePurposeRows(
+        activeConfig.products,
+        activeConfig.purposes,
+        activeConfig.product_purpose_order
+      );
+      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;
+        return perProduct != null ? perProduct : purposeSelections == null ? void 0 : purposeSelections[purposeUuid];
+      };
+      const initialPurposeState = seedRows.reduce(
+        (acc, { purpose, productUuid }) => {
           var _a3;
-          const recorded = purposeSelections == null ? void 0 : purposeSelections[purpose.uuid];
+          const key = productPurposeKey(productUuid, purpose.uuid);
+          const recorded = recordedFor(purpose.uuid, productUuid);
           if (hasRecordedPurposeState(recorded)) {
-            acc[purpose.uuid] = recorded.selected;
+            acc[key] = recorded.selected;
           } else {
-            acc[purpose.uuid] = (_a3 = preselection.selectedPurposes[purpose.uuid]) != null ? _a3 : false;
+            acc[key] = (_a3 = preselection.selectedPurposes[purpose.uuid]) != null ? _a3 : false;
           }
           return acc;
         },
         {}
       );
       setSelectedPurposes(initialPurposeState);
-      const initialDataElementState = activeConfig.purposes.reduce(
-        (acc, purpose) => {
-          const hasRecordedSelection = hasRecordedPurposeState(
-            purposeSelections == null ? void 0 : purposeSelections[purpose.uuid]
-          );
+      const initialDataElementState = seedRows.reduce(
+        (acc, { purpose, productUuid }) => {
+          const key = productPurposeKey(productUuid, purpose.uuid);
+          const recorded = recordedFor(purpose.uuid, productUuid);
+          const hasRecordedSelection = hasRecordedPurposeState(recorded);
           purpose.data_elements.forEach((element) => {
-            var _a3, _b2, _c2;
-            const combinedId = `${purpose.uuid}-${element.uuid}`;
-            if ((_b2 = (_a3 = purposeSelections == null ? void 0 : purposeSelections[purpose.uuid]) == null ? void 0 : _a3.data_elements) == null ? void 0 : _b2[element.uuid]) {
-              acc[combinedId] = purposeSelections[purpose.uuid].data_elements[element.uuid].selected;
+            var _a3, _b2;
+            const combinedId = `${key}-${element.uuid}`;
+            const recordedElement = (_a3 = recorded == null ? void 0 : recorded.data_elements) == null ? void 0 : _a3[element.uuid];
+            if (recordedElement) {
+              acc[combinedId] = recordedElement.selected;
             } else if (hasRecordedSelection) {
               acc[combinedId] = false;
             } else {
-              acc[combinedId] = (_c2 = preselection.selectedDataElements[combinedId]) != null ? _c2 : false;
+              acc[combinedId] = (_b2 = preselection.selectedDataElements[`${purpose.uuid}-${element.uuid}`]) != null ? _b2 : false;
             }
           });
           return acc;
@@ -3565,10 +3830,14 @@ var RedactoNoticeConsent = ({
       if (isReconsentRequired && newCategorizedPurposes) {
         setIsFullyConsentedReviewMode(false);
         const initialSelections = {};
-        newCategorizedPurposes.alreadyConsented.forEach((purpose) => {
+        const alreadyConsentedUuids = new Set(
+          newCategorizedPurposes.alreadyConsented.map((p) => p.uuid)
+        );
+        seedRows.filter(({ purpose }) => alreadyConsentedUuids.has(purpose.uuid)).forEach(({ purpose, productUuid }) => {
+          const rowKey = productPurposeKey(productUuid, purpose.uuid);
           purpose.data_elements.forEach((element) => {
             var _a3, _b2;
-            const combinedId = `${purpose.uuid}-${element.uuid}`;
+            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 {
@@ -3578,28 +3847,27 @@ var RedactoNoticeConsent = ({
         });
         setInitialDataElementSelections(initialSelections);
       } else if (includeFullyConsentedData && purposeSelections) {
-        const allPurposesSelected = activeConfig.purposes.length > 0 && activeConfig.purposes.every(
-          (p) => {
+        const allPurposesSelected = seedRows.length > 0 && seedRows.every(
+          ({ purpose, productUuid }) => {
             var _a3;
-            return ((_a3 = purposeSelections[p.uuid]) == null ? void 0 : _a3.selected) === true;
+            return ((_a3 = recordedFor(purpose.uuid, productUuid)) == null ? void 0 : _a3.selected) === true;
           }
         );
         setIsFullyConsentedReviewMode(allPurposesSelected);
         if (allPurposesSelected) {
           const initialSelections = {};
-          activeConfig.purposes.forEach(
-            (purpose) => {
-              purpose.data_elements.forEach((element) => {
-                var _a3, _b2;
-                const combinedId = `${purpose.uuid}-${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;
-                }
-              });
-            }
-          );
+          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);
@@ -3649,10 +3917,11 @@ var RedactoNoticeConsent = ({
     // Removed onError and isRefreshingToken from dependencies to prevent duplicate API calls
     // onError is only called on errors, not needed for initial data fetching
   ]);
-  const togglePurposeCollapse = (purposeUuid) => {
+  const togglePurposeCollapse = (purposeUuid, productUuid) => {
+    const key = productPurposeKey(productUuid, purposeUuid);
     setCollapsedPurposes((prev) => ({
       ...prev,
-      [purposeUuid]: !prev[purposeUuid]
+      [key]: !prev[key]
     }));
   };
   const toggleLanguageDropdown = () => {
@@ -3662,28 +3931,70 @@ var RedactoNoticeConsent = ({
     setSelectedLanguage(lang);
     setIsLanguageDropdownOpen(false);
   };
-  const handlePurposeCheckboxChange = (purposeUuid) => {
+  const handlePurposeCheckboxChange = (purposeUuid, productUuid) => {
     if (content) {
       const purpose = content.purposes.find((p) => p.uuid === purposeUuid);
       if (purpose) {
-        const newPurposeState = !selectedPurposes[purposeUuid];
+        const key = productPurposeKey(productUuid, purposeUuid);
+        const newPurposeState = !selectedPurposes[key];
         setSelectedPurposes((prev) => ({
           ...prev,
-          [purposeUuid]: newPurposeState
+          [key]: newPurposeState
         }));
         setSelectedDataElements((prev) => {
           const updated = { ...prev };
           purpose.data_elements.forEach((el) => {
-            updated[`${purposeUuid}-${el.uuid}`] = newPurposeState;
+            updated[`${key}-${el.uuid}`] = newPurposeState;
           });
           return updated;
         });
       }
     }
   };
-  const handleDataElementCheckboxChange = (elementUuid, purposeUuid) => {
+  const toggleProductCollapse = (productUuid) => {
+    setCollapsedProducts((prev) => ({
+      ...prev,
+      [productUuid]: !prev[productUuid]
+    }));
+  };
+  const handleProductCheckboxChange = (productUuid) => {
+    if (!content) {
+      return;
+    }
+    const group = productGroups.find(
+      (candidate) => candidate.product.uuid === productUuid
+    );
+    if (!group) {
+      return;
+    }
+    const nextState = !group.purposes.every(
+      (purpose) => selectedPurposes[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 }));
+    }
+  };
+  const handleDataElementCheckboxChange = (elementUuid, purposeUuid, productUuid) => {
     if (!content) return;
-    const combinedId = `${purposeUuid}-${elementUuid}`;
+    const key = productPurposeKey(productUuid, purposeUuid);
+    const combinedId = `${key}-${elementUuid}`;
     setSelectedDataElements((prev) => {
       const newState = {
         ...prev,
@@ -3697,16 +4008,16 @@ var RedactoNoticeConsent = ({
         let shouldCheckPurpose;
         if (requiredElements.length > 0) {
           shouldCheckPurpose = requiredElements.every(
-            (el) => newState[`${purposeUuid}-${el.uuid}`]
+            (el) => newState[`${key}-${el.uuid}`]
           );
         } else {
           shouldCheckPurpose = purpose.data_elements.some(
-            (el) => newState[`${purposeUuid}-${el.uuid}`]
+            (el) => newState[`${key}-${el.uuid}`]
           );
         }
         setSelectedPurposes((prevPurposes) => ({
           ...prevPurposes,
-          [purposeUuid]: shouldCheckPurpose
+          [key]: shouldCheckPurpose
         }));
       }
       return newState;
@@ -3716,14 +4027,16 @@ var RedactoNoticeConsent = ({
     const submitController = new AbortController();
     try {
       if (isMinorFlow && !verificationReference) {
-        setErrorMessage("Guardian verification is required before consent can be submitted.");
+        setErrorMessage(
+          "Guardian verification is required before consent can be submitted."
+        );
         return;
       }
       setIsSubmittingAccept(true);
       setIsSubmitting(true);
       setErrorMessage(null);
       if (content) {
-        const selection = buildSelectionForMode(content.purposes, mode, {
+        const selection = buildSelectionForMode(purposeRows, mode, {
           selectedPurposes,
           selectedDataElements
         });
@@ -3736,14 +4049,20 @@ var RedactoNoticeConsent = ({
           baseUrl,
           ledgerBaseUrl,
           noticeUuid: content.notice_uuid,
-          purposes: content.purposes.map((purpose) => {
+          // One entry per (product, purpose) once a notice covers several. The
+          // ledger keys consent on the pair, and repeating a purpose under two
+          // products is how one submission accepts it for one and declines it
+          // for the other. Collapses to content.purposes on a single-product
+          // notice, so that payload is byte-identical to before.
+          purposes: purposeRows.map(({ purpose, productUuid }) => {
+            const stateKey = productPurposeKey(productUuid, purpose.uuid);
             const isAlreadyConsented = (categorizedPurposes == null ? void 0 : categorizedPurposes.alreadyConsented.some(
               (p) => p.uuid === purpose.uuid
             )) || false;
-            let purposeSelected = selection.selectedPurposes[purpose.uuid] || false;
+            let purposeSelected = selection.selectedPurposes[stateKey] || false;
             if (mode === "selected" && isAlreadyConsented) {
               const wasModified = purpose.data_elements.some((element) => {
-                const combinedId = `${purpose.uuid}-${element.uuid}`;
+                const combinedId = `${stateKey}-${element.uuid}`;
                 const currentSelection = selection.selectedDataElements[combinedId] || false;
                 const initialSelection = initialDataElementSelections[combinedId] || false;
                 return currentSelection !== initialSelection;
@@ -3754,10 +4073,11 @@ var RedactoNoticeConsent = ({
             }
             return {
               ...purpose,
+              ...productUuid ? { product_uuid: productUuid } : {},
               selected: purposeSelected,
               data_elements: purpose.data_elements.map((element) => ({
                 ...element,
-                selected: element.required ? true : selection.selectedDataElements[`${purpose.uuid}-${element.uuid}`] || false
+                selected: element.required ? true : selection.selectedDataElements[`${stateKey}-${element.uuid}`] || false
               }))
             };
           }),
@@ -3860,7 +4180,9 @@ var RedactoNoticeConsent = ({
         return;
       }
       if (!response.session_token || !response.digilocker_redirect_url) {
-        throw new Error("Invalid response from server: missing required fields");
+        throw new Error(
+          "Invalid response from server: missing required fields"
+        );
       }
       setShowGuardianForm(false);
       setShowVerificationScreen(true);
@@ -3950,7 +4272,18 @@ var RedactoNoticeConsent = ({
     } finally {
       setIsSubmittingGuardian(false);
     }
-  }, [accessToken, sandboxParams, baseUrl, guardianFormData, digilockerMode, digilockerCallbackUrl, selectedPurposes, selectedDataElements, noticeId, onError]);
+  }, [
+    accessToken,
+    sandboxParams,
+    baseUrl,
+    guardianFormData,
+    digilockerMode,
+    digilockerCallbackUrl,
+    selectedPurposes,
+    selectedDataElements,
+    noticeId,
+    onError
+  ]);
   const handleAgeVerificationYes = (0, import_react3.useCallback)(() => {
     setShowAgeVerification(false);
     setIsMinorFlow(false);
@@ -4001,20 +4334,21 @@ var RedactoNoticeConsent = ({
       } catch {
       }
     }
-    setVerificationError(
-      "Verification window was closed. Please try again."
-    );
+    setVerificationError("Verification window was closed. Please try again.");
     setIsPollingStatus(false);
     isPollingStatusRef.current = false;
     setIsInitiatingVerification(false);
   }, [accessToken, sandboxParams, baseUrl]);
-  const startPopupMonitoring = (0, import_react3.useCallback)((popup) => {
-    popupCheckIntervalRef.current = window.setInterval(() => {
-      if (popup.closed) {
-        handlePopupClosed();
-      }
-    }, 500);
-  }, [handlePopupClosed]);
+  const startPopupMonitoring = (0, import_react3.useCallback)(
+    (popup) => {
+      popupCheckIntervalRef.current = window.setInterval(() => {
+        if (popup.closed) {
+          handlePopupClosed();
+        }
+      }, 500);
+    },
+    [handlePopupClosed]
+  );
   const getVerificationErrorMessage = (0, import_react3.useCallback)(
     (errorCode, fallbackError) => {
       switch (errorCode) {
@@ -4116,7 +4450,10 @@ var RedactoNoticeConsent = ({
             return;
           }
           if (!paused) {
-            statusPollIntervalRef.current = window.setTimeout(poll, POLL_INTERVAL);
+            statusPollIntervalRef.current = window.setTimeout(
+              poll,
+              POLL_INTERVAL
+            );
           }
         } catch (error) {
           const err = error;
@@ -4137,7 +4474,10 @@ var RedactoNoticeConsent = ({
             );
             return;
           }
-          statusPollIntervalRef.current = window.setTimeout(poll, POLL_INTERVAL);
+          statusPollIntervalRef.current = window.setTimeout(
+            poll,
+            POLL_INTERVAL
+          );
         }
       };
       const onVisibilityChange = () => {
@@ -4438,12 +4778,19 @@ var RedactoNoticeConsent = ({
       const dataElementsAudioCount = ((_a2 = purpose.data_elements) == null ? void 0 : _a2.length) || 0;
       const totalPurposeAudioCount = purposeAudioCount + dataElementsAudioCount;
       if (currentIndex >= audioOffset && currentIndex < audioOffset + totalPurposeAudioCount) {
-        if (collapsedPurposes[purpose.uuid]) {
-          setCollapsedPurposes((prev) => ({
-            ...prev,
-            [purpose.uuid]: false
-          }));
-        }
+        setCollapsedPurposes((prev) => {
+          const next = { ...prev };
+          let changed = false;
+          for (const row of purposeRows) {
+            if (row.purpose.uuid !== purpose.uuid) continue;
+            const rowKey = productPurposeKey(row.productUuid, purpose.uuid);
+            if (next[rowKey]) {
+              next[rowKey] = false;
+              changed = true;
+            }
+          }
+          return changed ? next : prev;
+        });
         break;
       }
       audioOffset += totalPurposeAudioCount;
@@ -4521,7 +4868,15 @@ var RedactoNoticeConsent = ({
     return () => {
       ttsAbortController.abort();
     };
-  }, [content, selectedLanguage, accessToken, sandboxParams, baseUrl, ledgerBaseUrl, getLanguageCode]);
+  }, [
+    content,
+    selectedLanguage,
+    accessToken,
+    sandboxParams,
+    baseUrl,
+    ledgerBaseUrl,
+    getLanguageCode
+  ]);
   const modalStyle = {
     borderRadius: (settings == null ? void 0 : settings.borderRadius) || "8px",
     backgroundColor: (settings == null ? void 0 : settings.backgroundColor) || "#ffffff",
@@ -5220,7 +5575,7 @@ var RedactoNoticeConsent = ({
                   },
                   `purpose-section-heading-${selectedLanguage}`
                 ),
-                categorizedPurposes ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles.optionsContainer, children: [
+                categorizedPurposes && !isMultiProduct(content == null ? void 0 : content.products) ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles.optionsContainer, children: [
                   categorizedPurposes.alreadyConsented.map((purpose) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                     PurposeItem,
                     {
@@ -5262,7 +5617,61 @@ var RedactoNoticeConsent = ({
                   ))
                 ] }) : (
                   /* Regular consent UI */
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles.optionsContainer, children: (_y = content == null ? void 0 : content.purposes) == null ? void 0 : _y.map((purpose) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles.optionsContainer, children: isMultiProduct(content == null ? void 0 : content.products) ? productGroups.map((group) => {
+                    const selectedInGroup = group.purposes.filter(
+                      (purpose) => selectedPurposes[productPurposeKey(
+                        group.product.uuid,
+                        purpose.uuid
+                      )]
+                    ).length;
+                    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        ProductSectionHeader,
+                        {
+                          product: group.product,
+                          purposeCount: group.purposes.length,
+                          allSelected: selectedInGroup === group.purposes.length,
+                          someSelected: selectedInGroup > 0,
+                          collapsed: collapsedProducts[group.product.uuid] || false,
+                          locked: isFullyConsentedReviewMode,
+                          settings,
+                          styles,
+                          responsiveStyles,
+                          onToggleCollapse: toggleProductCollapse,
+                          onToggleSelect: handleProductCheckboxChange,
+                          getTranslatedText
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "div",
+                        {
+                          id: `product-${group.product.uuid}`,
+                          hidden: collapsedProducts[group.product.uuid] || false,
+                          children: group.purposes.map((purpose) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                            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}`
+                          ))
+                        }
+                      )
+                    ] }, group.product.uuid);
+                  }) : (_y = content == null ? void 0 : content.purposes) == null ? void 0 : _y.map((purpose) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                     PurposeItem,
                     {
                       purpose,
@@ -5973,7 +6382,6 @@ var RedactoConsentInlineComponent = ({
   settings,
   applicationId
 }) => {
-  var _a;
   const [content, setContent] = (0, import_react5.useState)(null);
   const [isLoading, setIsLoading] = (0, import_react5.useState)(true);
   const [isSubmitting, setIsSubmitting] = (0, import_react5.useState)(false);
@@ -6030,7 +6438,7 @@ var RedactoConsentInlineComponent = ({
     }
   }, [hasAlreadyConsented, onAccept]);
   const getTranslatedText = (key, defaultText, itemId) => {
-    var _a2, _b;
+    var _a, _b, _c;
     if (!content) return defaultText;
     if (selectedLanguage === "English" || selectedLanguage === "en" || selectedLanguage === "EN") {
       if (key === "privacy_policy_anchor_text" && content.privacy_policy_anchor_text) {
@@ -6047,7 +6455,7 @@ var RedactoConsentInlineComponent = ({
     }
     if (itemId) {
       if (key === "purposes.name" || key === "purposes.description") {
-        const purposeData = (_a2 = translationMap.purposes) == null ? void 0 : _a2[itemId];
+        const purposeData = (_a = translationMap.purposes) == null ? void 0 : _a[itemId];
         if (purposeData) {
           if (typeof purposeData === "string") {
             return key === "purposes.name" ? purposeData : defaultText;
@@ -6056,8 +6464,18 @@ var RedactoConsentInlineComponent = ({
         }
         return defaultText;
       }
+      if (key === "products.name" || key === "products.description") {
+        const productData = (_b = translationMap.products) == null ? void 0 : _b[itemId];
+        if (productData) {
+          if (typeof productData === "string") {
+            return key === "products.name" ? productData : defaultText;
+          }
+          return key === "products.name" ? productData.name || defaultText : productData.description || defaultText;
+        }
+        return defaultText;
+      }
       if (key.startsWith("data_elements.")) {
-        return ((_b = translationMap.data_elements) == null ? void 0 : _b[itemId]) || defaultText;
+        return ((_c = translationMap.data_elements) == null ? void 0 : _c[itemId]) || defaultText;
       }
     }
     const value = translationMap[key];
@@ -6166,25 +6584,27 @@ var RedactoConsentInlineComponent = ({
       controller.abort();
     };
   }, [ledgerBaseUrl, applicationId, accessToken, content, notice_uuid]);
-  const togglePurposeCollapse = (purposeUuid) => {
+  const togglePurposeCollapse = (purposeUuid, productUuid) => {
+    const key = productPurposeKey(productUuid, purposeUuid);
     setCollapsedPurposes((prev) => ({
       ...prev,
-      [purposeUuid]: !prev[purposeUuid]
+      [key]: !prev[key]
     }));
   };
-  const handlePurposeCheckboxChange = (purposeUuid) => {
+  const handlePurposeCheckboxChange = (purposeUuid, productUuid) => {
     if (content) {
       const purpose = content.purposes.find((p) => p.uuid === purposeUuid);
       if (purpose) {
-        const newPurposeState = !selectedPurposes[purposeUuid];
+        const key = productPurposeKey(productUuid, purposeUuid);
+        const newPurposeState = !selectedPurposes[key];
         setSelectedPurposes((prev) => ({
           ...prev,
-          [purposeUuid]: newPurposeState
+          [key]: newPurposeState
         }));
         setSelectedDataElements((prev) => {
           const updated = { ...prev };
           purpose.data_elements.forEach((el) => {
-            const combinedId = `${purposeUuid}-${el.uuid}`;
+            const combinedId = `${key}-${el.uuid}`;
             updated[combinedId] = newPurposeState;
           });
           return updated;
@@ -6192,7 +6612,7 @@ var RedactoConsentInlineComponent = ({
       }
     }
   };
-  const handleDataElementCheckboxChange = (elementUuid, purposeUuid) => {
+  const handleDataElementCheckboxChange = (elementUuid, purposeUuid, productUuid) => {
     if (!content) return;
     const purpose = content.purposes.find((p) => p.uuid === purposeUuid);
     if (!purpose) return;
@@ -6200,7 +6620,8 @@ var RedactoConsentInlineComponent = ({
       (el) => el.uuid === elementUuid
     );
     if (!dataElement) return;
-    const combinedId = `${purposeUuid}-${elementUuid}`;
+    const key = productPurposeKey(productUuid, purposeUuid);
+    const combinedId = `${key}-${elementUuid}`;
     const currentState = selectedDataElements[combinedId] || false;
     const newElementState = !currentState;
     setSelectedDataElements((prev) => {
@@ -6214,16 +6635,16 @@ var RedactoConsentInlineComponent = ({
       let shouldCheckPurpose;
       if (requiredElements.length > 0) {
         shouldCheckPurpose = requiredElements.every(
-          (el) => newState[`${purposeUuid}-${el.uuid}`]
+          (el) => newState[`${key}-${el.uuid}`]
         );
       } else {
         shouldCheckPurpose = purpose.data_elements.some(
-          (el) => newState[`${purposeUuid}-${el.uuid}`]
+          (el) => newState[`${key}-${el.uuid}`]
         );
       }
       setSelectedPurposes((prevPurposes) => ({
         ...prevPurposes,
-        [purposeUuid]: shouldCheckPurpose
+        [key]: shouldCheckPurpose
       }));
       return newState;
     });
@@ -6244,20 +6665,36 @@ var RedactoConsentInlineComponent = ({
           baseUrl,
           ledgerBaseUrl,
           noticeUuid: content.notice_uuid,
-          purposes: content.purposes.map((purpose) => {
+          // One entry per (product, purpose) once a notice covers several, so a
+          // purpose can be accepted for one product and declined for another.
+          // Collapses to content.purposes below two products, leaving that
+          // payload byte-identical to before.
+          purposes: (isMultiProduct(content.products) ? expandPurposesByProduct(
+            content.products,
+            content.purposes,
+            content.product_purpose_order
+          ).map((row) => ({
+            purpose: row.purpose,
+            productUuid: row.product.uuid
+          })) : content.purposes.map((purpose) => ({
+            purpose,
+            productUuid: void 0
+          }))).map(({ purpose, productUuid }) => {
+            const key = productPurposeKey(productUuid, purpose.uuid);
             const hasSelectedRequiredElement = purpose.data_elements.some(
-              (element) => element.required && (selectedDataElements[`${purpose.uuid}-${element.uuid}`] || false)
+              (element) => element.required && (selectedDataElements[`${key}-${element.uuid}`] || false)
             );
             const hasSelectedDataElement = purpose.data_elements.some(
-              (element) => selectedDataElements[`${purpose.uuid}-${element.uuid}`] || false
+              (element) => selectedDataElements[`${key}-${element.uuid}`] || false
             );
-            const purposeSelected = selectedPurposes[purpose.uuid] || hasSelectedRequiredElement || hasSelectedDataElement;
+            const purposeSelected = selectedPurposes[key] || hasSelectedRequiredElement || hasSelectedDataElement;
             return {
               ...purpose,
+              ...productUuid ? { product_uuid: productUuid } : {},
               selected: purposeSelected,
               data_elements: purpose.data_elements.map((element) => ({
                 ...element,
-                selected: selectedDataElements[`${purpose.uuid}-${element.uuid}`] || false
+                selected: selectedDataElements[`${key}-${element.uuid}`] || false
               }))
             };
           }),
@@ -6358,133 +6795,99 @@ var RedactoConsentInlineComponent = ({
         children: errorMessage
       }
     ),
-    (_a = content == null ? void 0 : content.purposes) == null ? void 0 : _a.map((purpose) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles2.optionItem, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-          "div",
-          {
-            style: styles2.optionLeft,
-            onClick: () => togglePurposeCollapse(purpose.uuid),
-            role: "button",
-            tabIndex: 0,
-            "aria-expanded": !collapsedPurposes[purpose.uuid],
-            "aria-controls": `purpose-${purpose.uuid}`,
-            "aria-label": `${collapsedPurposes[purpose.uuid] ? "Expand" : "Collapse"} ${getTranslatedText(
-              `purposes.name`,
-              purpose.name,
-              purpose.uuid
-            )} details`,
-            onKeyDown: (e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                togglePurposeCollapse(purpose.uuid);
-              }
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    marginLeft: "5px"
-                  },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                    "svg",
-                    {
-                      width: "7",
-                      height: "12",
-                      viewBox: "0 0 7 12",
-                      fill: "none",
-                      xmlns: "http://www.w3.org/2000/svg",
-                      stroke: (settings == null ? void 0 : settings.headingColor) || "#323B4B",
-                      strokeWidth: "2",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      style: {
-                        transform: !collapsedPurposes[purpose.uuid] ? "rotate(90deg)" : "rotate(0deg)",
-                        transition: "transform 0.3s ease"
-                      },
-                      "aria-hidden": "true",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M1 1L6 6L1 11" })
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles2.optionTextContainer, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-                  "h2",
-                  {
-                    style: {
-                      ...styles2.optionTitle,
-                      ...responsiveStyles.optionTitle,
-                      ...headingStyle
-                    },
-                    children: [
-                      getTranslatedText(
-                        `purposes.name`,
-                        purpose.name,
-                        purpose.uuid
-                      ),
-                      hasRequiredDataElement(purpose) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RequiredMarker, {})
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  "h3",
-                  {
-                    style: {
-                      ...styles2.optionDescription,
-                      ...responsiveStyles.optionDescription,
-                      ...textStyle
-                    },
-                    children: getTranslatedText(
-                      `purposes.description`,
-                      purpose.description,
-                      purpose.uuid
-                    )
-                  }
-                )
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "input",
-          {
-            type: "checkbox",
-            checked: selectedPurposes[purpose.uuid] || false,
-            onChange: () => handlePurposeCheckboxChange(purpose.uuid),
-            "aria-label": `Select all data elements for ${getTranslatedText(
-              `purposes.name`,
-              purpose.name,
-              purpose.uuid
-            )}`
-          }
-        )
-      ] }),
-      !collapsedPurposes[purpose.uuid] && purpose.data_elements && purpose.data_elements.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        "div",
-        {
-          id: `purpose-${purpose.uuid}`,
-          style: styles2.dataElementsContainer,
-          children: purpose.data_elements.map((dataElement) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles2.dataElementItem, children: [
+    (() => {
+      var _a, _b;
+      const renderPurpose = (purpose, productUuid) => {
+        const stateKey = productPurposeKey(productUuid, purpose.uuid);
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles2.optionItem, children: [
             /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-              "span",
+              "div",
               {
-                style: {
-                  ...styles2.dataElementText,
-                  ...responsiveStyles.dataElementText,
-                  ...textStyle
+                style: styles2.optionLeft,
+                onClick: () => togglePurposeCollapse(purpose.uuid, productUuid),
+                role: "button",
+                tabIndex: 0,
+                "aria-expanded": !collapsedPurposes[stateKey],
+                "aria-controls": `purpose-${stateKey}`,
+                "aria-label": `${collapsedPurposes[stateKey] ? "Expand" : "Collapse"} ${getTranslatedText(
+                  `purposes.name`,
+                  purpose.name,
+                  purpose.uuid
+                )} details`,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    togglePurposeCollapse(purpose.uuid, productUuid);
+                  }
                 },
                 children: [
-                  getTranslatedText(
-                    `data_elements.name`,
-                    dataElement.name,
-                    dataElement.uuid
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        marginLeft: "5px"
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                        "svg",
+                        {
+                          width: "7",
+                          height: "12",
+                          viewBox: "0 0 7 12",
+                          fill: "none",
+                          xmlns: "http://www.w3.org/2000/svg",
+                          stroke: (settings == null ? void 0 : settings.headingColor) || "#323B4B",
+                          strokeWidth: "2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          style: {
+                            transform: !collapsedPurposes[stateKey] ? "rotate(90deg)" : "rotate(0deg)",
+                            transition: "transform 0.3s ease"
+                          },
+                          "aria-hidden": "true",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M1 1L6 6L1 11" })
+                        }
+                      )
+                    }
                   ),
-                  dataElement.required && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RequiredMarker, {})
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles2.optionTextContainer, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                      "h2",
+                      {
+                        style: {
+                          ...styles2.optionTitle,
+                          ...responsiveStyles.optionTitle,
+                          ...headingStyle
+                        },
+                        children: [
+                          getTranslatedText(
+                            `purposes.name`,
+                            purpose.name,
+                            purpose.uuid
+                          ),
+                          hasRequiredDataElement(purpose) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RequiredMarker, {})
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "h3",
+                      {
+                        style: {
+                          ...styles2.optionDescription,
+                          ...responsiveStyles.optionDescription,
+                          ...textStyle
+                        },
+                        children: getTranslatedText(
+                          `purposes.description`,
+                          purpose.description,
+                          purpose.uuid
+                        )
+                      }
+                    )
+                  ] })
                 ]
               }
             ),
@@ -6492,22 +6895,87 @@ var RedactoConsentInlineComponent = ({
               "input",
               {
                 type: "checkbox",
-                checked: selectedDataElements[`${purpose.uuid}-${dataElement.uuid}`] || false,
-                onChange: () => handleDataElementCheckboxChange(
-                  dataElement.uuid,
+                checked: selectedPurposes[stateKey] || false,
+                onChange: () => handlePurposeCheckboxChange(purpose.uuid, productUuid),
+                "aria-label": `Select all data elements for ${getTranslatedText(
+                  `purposes.name`,
+                  purpose.name,
                   purpose.uuid
-                ),
-                "aria-label": `Select ${getTranslatedText(
-                  `data_elements.name`,
-                  dataElement.name,
-                  dataElement.uuid
-                )}${dataElement.required ? " (required)" : ""}`
+                )}`
               }
             )
-          ] }, dataElement.uuid))
-        }
-      )
-    ] }, purpose.uuid))
+          ] }),
+          !collapsedPurposes[stateKey] && purpose.data_elements && purpose.data_elements.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "div",
+            {
+              id: `purpose-${stateKey}`,
+              style: styles2.dataElementsContainer,
+              children: purpose.data_elements.map((dataElement) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                "div",
+                {
+                  style: styles2.dataElementItem,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                      "span",
+                      {
+                        style: {
+                          ...styles2.dataElementText,
+                          ...responsiveStyles.dataElementText,
+                          ...textStyle
+                        },
+                        children: [
+                          getTranslatedText(
+                            `data_elements.name`,
+                            dataElement.name,
+                            dataElement.uuid
+                          ),
+                          dataElement.required && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RequiredMarker, {})
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "input",
+                      {
+                        type: "checkbox",
+                        checked: selectedDataElements[`${stateKey}-${dataElement.uuid}`] || false,
+                        onChange: () => handleDataElementCheckboxChange(
+                          dataElement.uuid,
+                          purpose.uuid,
+                          productUuid
+                        ),
+                        "aria-label": `Select ${getTranslatedText(
+                          `data_elements.name`,
+                          dataElement.name,
+                          dataElement.uuid
+                        )}${dataElement.required ? " (required)" : ""}`
+                      }
+                    )
+                  ]
+                },
+                dataElement.uuid
+              ))
+            }
+          )
+        ] }, stateKey);
+      };
+      if (!isMultiProduct(content == null ? void 0 : content.products)) {
+        return (_a = content == null ? void 0 : content.purposes) == null ? void 0 : _a.map((purpose) => renderPurpose(purpose));
+      }
+      return groupPurposesByProduct(
+        content == null ? void 0 : content.products,
+        (_b = content == null ? void 0 : content.purposes) != null ? _b : [],
+        content == null ? void 0 : content.product_purpose_order
+      ).map((group) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { ...styles2.optionTitle, margin: "0 0 8px" }, children: getTranslatedText(
+          "products.name",
+          group.product.name,
+          group.product.uuid
+        ) }),
+        group.purposes.map(
+          (purpose) => renderPurpose(purpose, group.product.uuid)
+        )
+      ] }, group.product.uuid));
+    })()
   ] });
 };
 RedactoConsentInlineComponent.displayName = "RedactoConsentInline";
@@ -9649,10 +10117,14 @@ var RedactoNoticeAssisted = ({
   const handleConfirmStep = (0, import_react7.useCallback)(
     (mode = "selected") => {
       if (mode !== "selected" && content) {
-        const selection = buildSelectionForMode(content.purposes, mode, {
-          selectedPurposes,
-          selectedDataElements
-        });
+        const selection = buildSelectionForMode(
+          noticePurposeRows(void 0, content.purposes),
+          mode,
+          {
+            selectedPurposes,
+            selectedDataElements
+          }
+        );
         setSelectedPurposes(selection.selectedPurposes);
         setSelectedDataElements(selection.selectedDataElements);
       }
@@ -9853,10 +10325,14 @@ var RedactoNoticeAssisted = ({
           return;
         }
       }
-      const selection = buildSelectionForMode(content.purposes, acceptMode, {
-        selectedPurposes,
-        selectedDataElements
-      });
+      const selection = buildSelectionForMode(
+        noticePurposeRows(void 0, content.purposes),
+        acceptMode,
+        {
+          selectedPurposes,
+          selectedDataElements
+        }
+      );
       const submitPurposes = content.purposes.map((purpose) => ({
         ...purpose,
         selected: selection.selectedPurposes[purpose.uuid] || false,