@redacto.io/consent-sdk-react 3.1.0 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @redacto.io/consent-sdk-react
 
+## 3.2.0
+
+### Minor Changes
+
+- enhance PurposeItem component to track initial data elements
+
 ## 3.1.0
 
 ### Minor Changes

package/dist/index.js

@@ -899,7 +899,8 @@ var PurposeItem = ({
   onDataElementToggle,
   getTranslatedText,
   isAlreadyConsented,
-  selectedLanguage
+  selectedLanguage,
+  initialDataElementSelections = {}
 }) => {
   const headingStyle = (0, import_react2.useMemo)(
     () => ({
@@ -1114,46 +1115,68 @@ var PurposeItem = ({
                   )}${dataElement.required ? " (required)" : ""}`
                 }
               ),
-              isAlreadyConsented && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    width: "16px",
-                    height: "16px",
-                    borderRadius: "50%",
-                    backgroundColor: "#10B981"
-                  },
-                  "aria-label": `Already consented to ${getTranslatedText(
-                    `data_elements.name`,
-                    dataElement.name,
-                    dataElement.uuid
-                  )}`,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    "svg",
+              isAlreadyConsented && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: (() => {
+                const combinedId = `${purpose.uuid}-${dataElement.uuid}`;
+                const isCurrentlySelected = selectedDataElements[combinedId] || false;
+                const wasOriginallySelected = initialDataElementSelections[combinedId] || false;
+                if (isCurrentlySelected && wasOriginallySelected) {
+                  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "div",
                     {
-                      width: "10",
-                      height: "10",
-                      viewBox: "0 0 10 10",
-                      fill: "none",
-                      xmlns: "http://www.w3.org/2000/svg",
-                      "aria-hidden": "true",
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        width: "16px",
+                        height: "16px",
+                        borderRadius: "50%",
+                        backgroundColor: "#10B981"
+                      },
+                      "aria-label": `Already consented to ${getTranslatedText(
+                        `data_elements.name`,
+                        dataElement.name,
+                        dataElement.uuid
+                      )}`,
                       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                        "path",
+                        "svg",
                         {
-                          d: "M3 5L4.5 6.5L7.5 3.5",
-                          stroke: "white",
-                          strokeWidth: "1.5",
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round"
+                          width: "10",
+                          height: "10",
+                          viewBox: "0 0 10 10",
+                          fill: "none",
+                          xmlns: "http://www.w3.org/2000/svg",
+                          "aria-hidden": "true",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "path",
+                            {
+                              d: "M3 5L4.5 6.5L7.5 3.5",
+                              stroke: "white",
+                              strokeWidth: "1.5",
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round"
+                            }
+                          )
                         }
                       )
                     }
-                  )
+                  );
+                } else {
+                  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "input",
+                    {
+                      className: "redacto-checkbox-small",
+                      type: "checkbox",
+                      checked: isCurrentlySelected,
+                      onChange: () => onDataElementToggle(dataElement.uuid, purpose.uuid),
+                      "aria-label": `Select ${getTranslatedText(
+                        `data_elements.name`,
+                        dataElement.name,
+                        dataElement.uuid
+                      )}${dataElement.required ? " (required)" : ""}`
+                    }
+                  );
                 }
-              )
+              })() })
             ]
           },
           `${dataElement.uuid}-${selectedLanguage}`
@@ -1592,10 +1615,13 @@ var RedactoNoticeConsent = ({
   }
   const [isLoading, setIsLoading] = (0, import_react2.useState)(true);
   const [isSubmitting, setIsSubmitting] = (0, import_react2.useState)(false);
+  const [isSubmittingAccept, setIsSubmittingAccept] = (0, import_react2.useState)(false);
+  const [isSubmittingDecline, setIsSubmittingDecline] = (0, import_react2.useState)(false);
   const [content, setContent] = (0, import_react2.useState)(null);
   const [categorizedPurposes, setCategorizedPurposes] = (0, import_react2.useState)(null);
   const [selectedPurposes, setSelectedPurposes] = (0, import_react2.useState)({});
   const [selectedDataElements, setSelectedDataElements] = (0, import_react2.useState)({});
+  const [initialDataElementSelections, setInitialDataElementSelections] = (0, import_react2.useState)({});
   const [collapsedPurposes, setCollapsedPurposes] = (0, import_react2.useState)({});
   const [hasAlreadyConsented, setHasAlreadyConsented] = (0, import_react2.useState)(false);
   const [isLanguageDropdownOpen, setIsLanguageDropdownOpen] = (0, import_react2.useState)(false);
@@ -1736,11 +1762,14 @@ var RedactoNoticeConsent = ({
     setCategorizedPurposes(null);
     setSelectedPurposes({});
     setSelectedDataElements({});
+    setInitialDataElementSelections({});
     setCollapsedPurposes({});
     setHasAlreadyConsented(false);
     setErrorMessage(null);
     setFetchError(null);
     setIsLoading(true);
+    setIsSubmittingAccept(false);
+    setIsSubmittingDecline(false);
     setShowAgeVerification(false);
     setShowGuardianForm(false);
     setIsSubmittingGuardian(false);
@@ -1883,6 +1912,23 @@ var RedactoNoticeConsent = ({
         {}
       );
       setSelectedDataElements(initialDataElementState);
+      if (isReconsentRequired && newCategorizedPurposes) {
+        const initialSelections = {};
+        newCategorizedPurposes.alreadyConsented.forEach((purpose) => {
+          purpose.data_elements.forEach((element) => {
+            var _a3, _b2;
+            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]) {
+              initialSelections[combinedId] = purposeSelections[purpose.uuid].data_elements[element.uuid].selected;
+            } else {
+              initialSelections[combinedId] = false;
+            }
+          });
+        });
+        setInitialDataElementSelections(initialSelections);
+      } else {
+        setInitialDataElementSelections({});
+      }
       if (consentContentData.detail.is_minor) {
         setShowAgeVerification(true);
       }
@@ -1983,6 +2029,7 @@ var RedactoNoticeConsent = ({
   const handleAccept = async () => {
     const submitController = new AbortController();
     try {
+      setIsSubmittingAccept(true);
       setIsSubmitting(true);
       setErrorMessage(null);
       if (content) {
@@ -1990,14 +2037,31 @@ var RedactoNoticeConsent = ({
           accessToken,
           baseUrl,
           noticeUuid: content.notice_uuid,
-          purposes: content.purposes.map((purpose) => ({
-            ...purpose,
-            selected: selectedPurposes[purpose.uuid] || false,
-            data_elements: purpose.data_elements.map((element) => ({
-              ...element,
-              selected: element.required ? true : selectedDataElements[`${purpose.uuid}-${element.uuid}`] || false
-            }))
-          })),
+          purposes: content.purposes.map((purpose) => {
+            const isAlreadyConsented = (categorizedPurposes == null ? void 0 : categorizedPurposes.alreadyConsented.some(
+              (p) => p.uuid === purpose.uuid
+            )) || false;
+            let purposeSelected = selectedPurposes[purpose.uuid] || false;
+            if (isAlreadyConsented) {
+              const wasModified = purpose.data_elements.some((element) => {
+                const combinedId = `${purpose.uuid}-${element.uuid}`;
+                const currentSelection = selectedDataElements[combinedId] || false;
+                const initialSelection = initialDataElementSelections[combinedId] || false;
+                return currentSelection !== initialSelection;
+              });
+              if (wasModified) {
+                purposeSelected = true;
+              }
+            }
+            return {
+              ...purpose,
+              selected: purposeSelected,
+              data_elements: purpose.data_elements.map((element) => ({
+                ...element,
+                selected: element.required ? true : selectedDataElements[`${purpose.uuid}-${element.uuid}`] || false
+              }))
+            };
+          }),
           declined: false,
           meta_data: applicationId ? { specific_uuid: applicationId } : void 0,
           signal: submitController.signal
@@ -2017,11 +2081,19 @@ var RedactoNoticeConsent = ({
       }
       onError == null ? void 0 : onError(error);
     } finally {
+      setIsSubmittingAccept(false);
       setIsSubmitting(false);
     }
   };
   const handleDecline = (0, import_react2.useCallback)(async () => {
-    onDecline == null ? void 0 : onDecline();
+    try {
+      setIsSubmittingDecline(true);
+      setIsSubmitting(true);
+      onDecline == null ? void 0 : onDecline();
+    } finally {
+      setIsSubmittingDecline(false);
+      setIsSubmitting(false);
+    }
   }, [onDecline]);
   const handleGuardianFormChange = (0, import_react2.useCallback)(
     (field, value) => {
@@ -2995,7 +3067,8 @@ var RedactoNoticeConsent = ({
                       onDataElementToggle: handleDataElementCheckboxChange,
                       getTranslatedText,
                       isAlreadyConsented: true,
-                      selectedLanguage
+                      selectedLanguage,
+                      initialDataElementSelections
                     },
                     `${purpose.uuid}-${selectedLanguage}`
                   )),
@@ -3065,12 +3138,12 @@ var RedactoNoticeConsent = ({
                       opacity: acceptDisabled ? 0.5 : 1
                     },
                     onClick: handleAccept,
-                    disabled: acceptDisabled,
+                    disabled: acceptDisabled || isSubmittingDecline,
                     "aria-label": getTranslatedText(
                       "confirm_button_text",
                       (content == null ? void 0 : content.confirm_button_text) || "Accept"
                     ),
-                    children: isSubmitting ? "Processing..." : getTranslatedText(
+                    children: isSubmittingAccept ? "Processing..." : getTranslatedText(
                       "confirm_button_text",
                       (content == null ? void 0 : content.confirm_button_text) || "Accept"
                     )
@@ -3084,15 +3157,16 @@ var RedactoNoticeConsent = ({
                       ...styles.button,
                       ...responsiveStyles.button,
                       ...styles.cancelButton,
-                      ...declineButtonStyle
+                      ...declineButtonStyle,
+                      opacity: isSubmittingAccept ? 0.5 : 1
                     },
                     onClick: handleDecline,
-                    disabled: isSubmitting,
+                    disabled: isSubmittingDecline || isSubmittingAccept,
                     "aria-label": getTranslatedText(
                       "decline_button_text",
                       (content == null ? void 0 : content.decline_button_text) || "Decline"
                     ),
-                    children: isSubmitting ? "Processing..." : getTranslatedText(
+                    children: isSubmittingDecline ? "Processing..." : getTranslatedText(
                       "decline_button_text",
                       (content == null ? void 0 : content.decline_button_text) || "Decline"
                     )

package/dist/index.mjs

@@ -872,7 +872,8 @@ var PurposeItem = ({
   onDataElementToggle,
   getTranslatedText,
   isAlreadyConsented,
-  selectedLanguage
+  selectedLanguage,
+  initialDataElementSelections = {}
 }) => {
   const headingStyle = useMemo(
     () => ({
@@ -1087,46 +1088,68 @@ var PurposeItem = ({
                   )}${dataElement.required ? " (required)" : ""}`
                 }
               ),
-              isAlreadyConsented && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    width: "16px",
-                    height: "16px",
-                    borderRadius: "50%",
-                    backgroundColor: "#10B981"
-                  },
-                  "aria-label": `Already consented to ${getTranslatedText(
-                    `data_elements.name`,
-                    dataElement.name,
-                    dataElement.uuid
-                  )}`,
-                  children: /* @__PURE__ */ jsx(
-                    "svg",
+              isAlreadyConsented && /* @__PURE__ */ jsx(Fragment, { children: (() => {
+                const combinedId = `${purpose.uuid}-${dataElement.uuid}`;
+                const isCurrentlySelected = selectedDataElements[combinedId] || false;
+                const wasOriginallySelected = initialDataElementSelections[combinedId] || false;
+                if (isCurrentlySelected && wasOriginallySelected) {
+                  return /* @__PURE__ */ jsx(
+                    "div",
                     {
-                      width: "10",
-                      height: "10",
-                      viewBox: "0 0 10 10",
-                      fill: "none",
-                      xmlns: "http://www.w3.org/2000/svg",
-                      "aria-hidden": "true",
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        width: "16px",
+                        height: "16px",
+                        borderRadius: "50%",
+                        backgroundColor: "#10B981"
+                      },
+                      "aria-label": `Already consented to ${getTranslatedText(
+                        `data_elements.name`,
+                        dataElement.name,
+                        dataElement.uuid
+                      )}`,
                       children: /* @__PURE__ */ jsx(
-                        "path",
+                        "svg",
                         {
-                          d: "M3 5L4.5 6.5L7.5 3.5",
-                          stroke: "white",
-                          strokeWidth: "1.5",
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round"
+                          width: "10",
+                          height: "10",
+                          viewBox: "0 0 10 10",
+                          fill: "none",
+                          xmlns: "http://www.w3.org/2000/svg",
+                          "aria-hidden": "true",
+                          children: /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: "M3 5L4.5 6.5L7.5 3.5",
+                              stroke: "white",
+                              strokeWidth: "1.5",
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round"
+                            }
+                          )
                         }
                       )
                     }
-                  )
+                  );
+                } else {
+                  return /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      className: "redacto-checkbox-small",
+                      type: "checkbox",
+                      checked: isCurrentlySelected,
+                      onChange: () => onDataElementToggle(dataElement.uuid, purpose.uuid),
+                      "aria-label": `Select ${getTranslatedText(
+                        `data_elements.name`,
+                        dataElement.name,
+                        dataElement.uuid
+                      )}${dataElement.required ? " (required)" : ""}`
+                    }
+                  );
                 }
-              )
+              })() })
             ]
           },
           `${dataElement.uuid}-${selectedLanguage}`
@@ -1565,10 +1588,13 @@ var RedactoNoticeConsent = ({
   }
   const [isLoading, setIsLoading] = useState2(true);
   const [isSubmitting, setIsSubmitting] = useState2(false);
+  const [isSubmittingAccept, setIsSubmittingAccept] = useState2(false);
+  const [isSubmittingDecline, setIsSubmittingDecline] = useState2(false);
   const [content, setContent] = useState2(null);
   const [categorizedPurposes, setCategorizedPurposes] = useState2(null);
   const [selectedPurposes, setSelectedPurposes] = useState2({});
   const [selectedDataElements, setSelectedDataElements] = useState2({});
+  const [initialDataElementSelections, setInitialDataElementSelections] = useState2({});
   const [collapsedPurposes, setCollapsedPurposes] = useState2({});
   const [hasAlreadyConsented, setHasAlreadyConsented] = useState2(false);
   const [isLanguageDropdownOpen, setIsLanguageDropdownOpen] = useState2(false);
@@ -1709,11 +1735,14 @@ var RedactoNoticeConsent = ({
     setCategorizedPurposes(null);
     setSelectedPurposes({});
     setSelectedDataElements({});
+    setInitialDataElementSelections({});
     setCollapsedPurposes({});
     setHasAlreadyConsented(false);
     setErrorMessage(null);
     setFetchError(null);
     setIsLoading(true);
+    setIsSubmittingAccept(false);
+    setIsSubmittingDecline(false);
     setShowAgeVerification(false);
     setShowGuardianForm(false);
     setIsSubmittingGuardian(false);
@@ -1856,6 +1885,23 @@ var RedactoNoticeConsent = ({
         {}
       );
       setSelectedDataElements(initialDataElementState);
+      if (isReconsentRequired && newCategorizedPurposes) {
+        const initialSelections = {};
+        newCategorizedPurposes.alreadyConsented.forEach((purpose) => {
+          purpose.data_elements.forEach((element) => {
+            var _a3, _b2;
+            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]) {
+              initialSelections[combinedId] = purposeSelections[purpose.uuid].data_elements[element.uuid].selected;
+            } else {
+              initialSelections[combinedId] = false;
+            }
+          });
+        });
+        setInitialDataElementSelections(initialSelections);
+      } else {
+        setInitialDataElementSelections({});
+      }
       if (consentContentData.detail.is_minor) {
         setShowAgeVerification(true);
       }
@@ -1956,6 +2002,7 @@ var RedactoNoticeConsent = ({
   const handleAccept = async () => {
     const submitController = new AbortController();
     try {
+      setIsSubmittingAccept(true);
       setIsSubmitting(true);
       setErrorMessage(null);
       if (content) {
@@ -1963,14 +2010,31 @@ var RedactoNoticeConsent = ({
           accessToken,
           baseUrl,
           noticeUuid: content.notice_uuid,
-          purposes: content.purposes.map((purpose) => ({
-            ...purpose,
-            selected: selectedPurposes[purpose.uuid] || false,
-            data_elements: purpose.data_elements.map((element) => ({
-              ...element,
-              selected: element.required ? true : selectedDataElements[`${purpose.uuid}-${element.uuid}`] || false
-            }))
-          })),
+          purposes: content.purposes.map((purpose) => {
+            const isAlreadyConsented = (categorizedPurposes == null ? void 0 : categorizedPurposes.alreadyConsented.some(
+              (p) => p.uuid === purpose.uuid
+            )) || false;
+            let purposeSelected = selectedPurposes[purpose.uuid] || false;
+            if (isAlreadyConsented) {
+              const wasModified = purpose.data_elements.some((element) => {
+                const combinedId = `${purpose.uuid}-${element.uuid}`;
+                const currentSelection = selectedDataElements[combinedId] || false;
+                const initialSelection = initialDataElementSelections[combinedId] || false;
+                return currentSelection !== initialSelection;
+              });
+              if (wasModified) {
+                purposeSelected = true;
+              }
+            }
+            return {
+              ...purpose,
+              selected: purposeSelected,
+              data_elements: purpose.data_elements.map((element) => ({
+                ...element,
+                selected: element.required ? true : selectedDataElements[`${purpose.uuid}-${element.uuid}`] || false
+              }))
+            };
+          }),
           declined: false,
           meta_data: applicationId ? { specific_uuid: applicationId } : void 0,
           signal: submitController.signal
@@ -1990,11 +2054,19 @@ var RedactoNoticeConsent = ({
       }
       onError == null ? void 0 : onError(error);
     } finally {
+      setIsSubmittingAccept(false);
       setIsSubmitting(false);
     }
   };
   const handleDecline = useCallback(async () => {
-    onDecline == null ? void 0 : onDecline();
+    try {
+      setIsSubmittingDecline(true);
+      setIsSubmitting(true);
+      onDecline == null ? void 0 : onDecline();
+    } finally {
+      setIsSubmittingDecline(false);
+      setIsSubmitting(false);
+    }
   }, [onDecline]);
   const handleGuardianFormChange = useCallback(
     (field, value) => {
@@ -2968,7 +3040,8 @@ var RedactoNoticeConsent = ({
                       onDataElementToggle: handleDataElementCheckboxChange,
                       getTranslatedText,
                       isAlreadyConsented: true,
-                      selectedLanguage
+                      selectedLanguage,
+                      initialDataElementSelections
                     },
                     `${purpose.uuid}-${selectedLanguage}`
                   )),
@@ -3038,12 +3111,12 @@ var RedactoNoticeConsent = ({
                       opacity: acceptDisabled ? 0.5 : 1
                     },
                     onClick: handleAccept,
-                    disabled: acceptDisabled,
+                    disabled: acceptDisabled || isSubmittingDecline,
                     "aria-label": getTranslatedText(
                       "confirm_button_text",
                       (content == null ? void 0 : content.confirm_button_text) || "Accept"
                     ),
-                    children: isSubmitting ? "Processing..." : getTranslatedText(
+                    children: isSubmittingAccept ? "Processing..." : getTranslatedText(
                       "confirm_button_text",
                       (content == null ? void 0 : content.confirm_button_text) || "Accept"
                     )
@@ -3057,15 +3130,16 @@ var RedactoNoticeConsent = ({
                       ...styles.button,
                       ...responsiveStyles.button,
                       ...styles.cancelButton,
-                      ...declineButtonStyle
+                      ...declineButtonStyle,
+                      opacity: isSubmittingAccept ? 0.5 : 1
                     },
                     onClick: handleDecline,
-                    disabled: isSubmitting,
+                    disabled: isSubmittingDecline || isSubmittingAccept,
                     "aria-label": getTranslatedText(
                       "decline_button_text",
                       (content == null ? void 0 : content.decline_button_text) || "Decline"
                     ),
-                    children: isSubmitting ? "Processing..." : getTranslatedText(
+                    children: isSubmittingDecline ? "Processing..." : getTranslatedText(
                       "decline_button_text",
                       (content == null ? void 0 : content.decline_button_text) || "Decline"
                     )

package/package.json

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

package/src/RedactoNoticeConsent/RedactoNoticeConsent.tsx

@@ -45,7 +45,10 @@ import { useMediaQuery } from "./useMediaQuery";
  * Supports both regular consent and reconsent UI modes.
  */
 const PurposeItem: React.FC<
-  PurposeItemProps & { selectedLanguage: string }
+  PurposeItemProps & {
+    selectedLanguage: string;
+    initialDataElementSelections?: Record<string, boolean>;
+  }
 > = ({
   purpose,
   selectedPurposes,
@@ -60,6 +63,7 @@ const PurposeItem: React.FC<
   getTranslatedText,
   isAlreadyConsented,
   selectedLanguage,
+  initialDataElementSelections = {},
 }) => {
   const headingStyle = useMemo(
     () => ({
@@ -266,39 +270,71 @@ const PurposeItem: React.FC<
                   />
                 )}
                 {isAlreadyConsented && (
-                  <div
-                    style={{
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      width: "16px",
-                      height: "16px",
-                      borderRadius: "50%",
-                      backgroundColor: "#10B981",
-                    }}
-                    aria-label={`Already consented to ${getTranslatedText(
-                      `data_elements.name`,
-                      dataElement.name,
-                      dataElement.uuid
-                    )}`}
-                  >
-                    <svg
-                      width="10"
-                      height="10"
-                      viewBox="0 0 10 10"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                      aria-hidden="true"
-                    >
-                      <path
-                        d="M3 5L4.5 6.5L7.5 3.5"
-                        stroke="white"
-                        strokeWidth="1.5"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      />
-                    </svg>
-                  </div>
+                  <>
+                    {(() => {
+                      const combinedId = `${purpose.uuid}-${dataElement.uuid}`;
+                      const isCurrentlySelected =
+                        selectedDataElements[combinedId] || false;
+                      const wasOriginallySelected =
+                        initialDataElementSelections[combinedId] || false;
+
+                      // Show green tick only if it was originally selected
+                      // Show checkbox if it's newly selected or unselected
+                      if (isCurrentlySelected && wasOriginallySelected) {
+                        return (
+                          <div
+                            style={{
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              width: "16px",
+                              height: "16px",
+                              borderRadius: "50%",
+                              backgroundColor: "#10B981",
+                            }}
+                            aria-label={`Already consented to ${getTranslatedText(
+                              `data_elements.name`,
+                              dataElement.name,
+                              dataElement.uuid
+                            )}`}
+                          >
+                            <svg
+                              width="10"
+                              height="10"
+                              viewBox="0 0 10 10"
+                              fill="none"
+                              xmlns="http://www.w3.org/2000/svg"
+                              aria-hidden="true"
+                            >
+                              <path
+                                d="M3 5L4.5 6.5L7.5 3.5"
+                                stroke="white"
+                                strokeWidth="1.5"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                              />
+                            </svg>
+                          </div>
+                        );
+                      } else {
+                        return (
+                          <input
+                            className="redacto-checkbox-small"
+                            type="checkbox"
+                            checked={isCurrentlySelected}
+                            onChange={() =>
+                              onDataElementToggle(dataElement.uuid, purpose.uuid)
+                            }
+                            aria-label={`Select ${getTranslatedText(
+                              `data_elements.name`,
+                              dataElement.name,
+                              dataElement.uuid
+                            )}${dataElement.required ? " (required)" : ""}`}
+                          />
+                        );
+                      }
+                    })()}
+                  </>
                 )}
               </div>
             ))}
@@ -776,6 +812,8 @@ export const RedactoNoticeConsent = ({
   // Loading and submission states
   const [isLoading, setIsLoading] = useState(true);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isSubmittingAccept, setIsSubmittingAccept] = useState(false);
+  const [isSubmittingDecline, setIsSubmittingDecline] = useState(false);
 
   // Content and consent data
   const [content, setContent] = useState<
@@ -793,6 +831,9 @@ export const RedactoNoticeConsent = ({
   const [selectedDataElements, setSelectedDataElements] = useState<
     Record<string, boolean>
   >({});
+  // Track initial data element selections for already-consented purposes
+  const [initialDataElementSelections, setInitialDataElementSelections] =
+    useState<Record<string, boolean>>({});
   const [collapsedPurposes, setCollapsedPurposes] = useState<
     Record<string, boolean>
   >({});
@@ -987,11 +1028,14 @@ export const RedactoNoticeConsent = ({
     setCategorizedPurposes(null);
     setSelectedPurposes({});
     setSelectedDataElements({});
+    setInitialDataElementSelections({});
     setCollapsedPurposes({});
     setHasAlreadyConsented(false);
     setErrorMessage(null);
     setFetchError(null);
     setIsLoading(true);
+    setIsSubmittingAccept(false);
+    setIsSubmittingDecline(false);
 
     // Clear age verification and guardian form state
     setShowAgeVerification(false);
@@ -1213,6 +1257,27 @@ export const RedactoNoticeConsent = ({
           {}
         );
       setSelectedDataElements(initialDataElementState);
+      // Store initial selections for already-consented purposes to track modifications
+      if (isReconsentRequired && newCategorizedPurposes) {
+        const initialSelections: Record<string, boolean> = {};
+        newCategorizedPurposes.alreadyConsented.forEach((purpose) => {
+          purpose.data_elements.forEach((element) => {
+            const combinedId = `${purpose.uuid}-${element.uuid}`;
+            if (
+              purposeSelections?.[purpose.uuid]?.data_elements?.[element.uuid]
+            ) {
+              initialSelections[combinedId] =
+                purposeSelections[purpose.uuid].data_elements[element.uuid]
+                  .selected;
+            } else {
+              initialSelections[combinedId] = false;
+            }
+          });
+        });
+        setInitialDataElementSelections(initialSelections);
+      } else {
+        setInitialDataElementSelections({});
+      }
 
       // Check if age verification is required - set this after all content is loaded
       // but before setIsLoading(false) to ensure proper render order
@@ -1350,24 +1415,52 @@ export const RedactoNoticeConsent = ({
     const submitController = new AbortController();
 
     try {
-      setIsSubmitting(true);
+      setIsSubmittingAccept(true);
+      setIsSubmitting(true); // Keep for backward compatibility with acceptDisabled
       setErrorMessage(null);
       if (content) {
         await submitConsentEvent({
           accessToken,
           baseUrl,
           noticeUuid: content.notice_uuid,
-          purposes: content.purposes.map((purpose) => ({
-            ...purpose,
-            selected: selectedPurposes[purpose.uuid] || false,
-            data_elements: purpose.data_elements.map((element) => ({
-              ...element,
-              selected: element.required
-                ? true
-                : selectedDataElements[`${purpose.uuid}-${element.uuid}`] ||
-                  false,
-            })),
-          })),
+          purposes: content.purposes.map((purpose) => {
+            // Check if this is an already-consented purpose that was modified
+            const isAlreadyConsented =
+              categorizedPurposes?.alreadyConsented.some(
+                (p) => p.uuid === purpose.uuid
+              ) || false;
+
+            let purposeSelected = selectedPurposes[purpose.uuid] || false;
+
+            // If it's an already-consented purpose, check if any data elements were modified
+            if (isAlreadyConsented) {
+              const wasModified = purpose.data_elements.some((element) => {
+                const combinedId = `${purpose.uuid}-${element.uuid}`;
+                const currentSelection =
+                  selectedDataElements[combinedId] || false;
+                const initialSelection =
+                  initialDataElementSelections[combinedId] || false;
+                return currentSelection !== initialSelection;
+              });
+
+              // If modified, treat as new selection (mark purpose as selected)
+              if (wasModified) {
+                purposeSelected = true;
+              }
+            }
+
+            return {
+              ...purpose,
+              selected: purposeSelected,
+              data_elements: purpose.data_elements.map((element) => ({
+                ...element,
+                selected: element.required
+                  ? true
+                  : selectedDataElements[`${purpose.uuid}-${element.uuid}`] ||
+                    false,
+              })),
+            };
+          }),
           declined: false,
           meta_data: applicationId
             ? { specific_uuid: applicationId }
@@ -1391,36 +1484,42 @@ export const RedactoNoticeConsent = ({
       }
       onError?.(error as Error);
     } finally {
-      setIsSubmitting(false);
+      setIsSubmittingAccept(false);
+      setIsSubmitting(false); // Keep for backward compatibility
     }
   };
 
   const handleDecline = useCallback(async () => {
-    // try {
-    //   setIsSubmitting(true);
-    //   if (content) {
-    //     await submitConsentEvent(
-    //       accessToken,
-    //       content.notice_uuid,
-    //       content.purposes.map((purpose) => ({
-    //         ...purpose,
-    //         selected: false,
-    //         data_elements: purpose.data_elements.map((element) => ({
-    //           ...element,
-    //           selected: element.required ? true : false,
-    //         })),
-    //       })),
-    //       true
-    //     );
-    //   }
-    //   onDecline?.();
-    // } catch (error) {
-    //   console.error("Error submitting consent:", error);
-    //   onError?.(error as Error);
-    // } finally {
-    //   setIsSubmitting(false);
-    // }
-    onDecline?.();
+    try {
+      setIsSubmittingDecline(true);
+      setIsSubmitting(true); // Keep for backward compatibility
+      // try {
+      //   if (content) {
+      //     await submitConsentEvent(
+      //       accessToken,
+      //       content.notice_uuid,
+      //       content.purposes.map((purpose) => ({
+      //         ...purpose,
+      //         selected: false,
+      //         data_elements: purpose.data_elements.map((element) => ({
+      //           ...element,
+      //           selected: element.required ? true : false,
+      //         })),
+      //       })),
+      //       true
+      //     );
+      //   }
+      // } catch (error) {
+      //   console.error("Error submitting consent:", error);
+      //   onError?.(error as Error);
+      // } finally {
+      //   setIsSubmitting(false);
+      // }
+      onDecline?.();
+    } finally {
+      setIsSubmittingDecline(false);
+      setIsSubmitting(false); // Keep for backward compatibility
+    }
   }, [onDecline]);
 
   // Guardian form handlers
@@ -2606,6 +2705,7 @@ export const RedactoNoticeConsent = ({
                           getTranslatedText={getTranslatedText}
                           isAlreadyConsented={true}
                           selectedLanguage={selectedLanguage}
+                          initialDataElementSelections={initialDataElementSelections}
                         />
                       ))}
 
@@ -2671,13 +2771,13 @@ export const RedactoNoticeConsent = ({
                       opacity: acceptDisabled ? 0.5 : 1,
                     }}
                     onClick={handleAccept}
-                    disabled={acceptDisabled}
+                    disabled={acceptDisabled || isSubmittingDecline}
                     aria-label={getTranslatedText(
                       "confirm_button_text",
                       content?.confirm_button_text || "Accept"
                     )}
                   >
-                    {isSubmitting
+                    {isSubmittingAccept
                       ? "Processing..."
                       : getTranslatedText(
                           "confirm_button_text",
@@ -2691,15 +2791,16 @@ export const RedactoNoticeConsent = ({
                       ...responsiveStyles.button,
                       ...styles.cancelButton,
                       ...declineButtonStyle,
+                      opacity: isSubmittingAccept ? 0.5 : 1,
                     }}
                     onClick={handleDecline}
-                    disabled={isSubmitting}
+                    disabled={isSubmittingDecline || isSubmittingAccept}
                     aria-label={getTranslatedText(
                       "decline_button_text",
                       content?.decline_button_text || "Decline"
                     )}
                   >
-                    {isSubmitting
+                    {isSubmittingDecline
                       ? "Processing..."
                       : getTranslatedText(
                           "decline_button_text",