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

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);
@@ -1119,17 +1163,16 @@ export const RedactoNoticeConsent = ({
         validate_against: validateAgainst,
         signal: abortControllerRef.current?.signal,
       });
-      setContent(consentContentData.detail.active_config);
-      if (consentContentData.detail.active_config.default_language) {
+      const activeConfig = consentContentData.detail.active_config;
+      setContent(activeConfig);
+      if (activeConfig.default_language) {
         // Normalize "en" to "English" for consistency
-        const defaultLang =
-          consentContentData.detail.active_config.default_language;
+        const defaultLang = activeConfig.default_language;
         setSelectedLanguage(
           defaultLang === "en" || defaultLang === "EN" ? "English" : defaultLang
         );
       }
-      const initialCollapsedState =
-        consentContentData.detail.active_config.purposes.reduce(
+      const initialCollapsedState = activeConfig.purposes.reduce(
           (acc, purpose) => ({
             ...acc,
             [purpose.uuid]: true,
@@ -1145,8 +1188,7 @@ export const RedactoNoticeConsent = ({
       // Categorize purposes for reconsent UI
       const newCategorizedPurposes = isReconsentRequired
         ? {
-            alreadyConsented:
-              consentContentData.detail.active_config.purposes.filter(
+            alreadyConsented: activeConfig.purposes.filter(
                 (purpose) => {
                   const selection = purposeSelections?.[purpose.uuid];
                   return (
@@ -1157,8 +1199,7 @@ export const RedactoNoticeConsent = ({
                   );
                 }
               ),
-            needsConsent:
-              consentContentData.detail.active_config.purposes.filter(
+            needsConsent: activeConfig.purposes.filter(
                 (purpose) => {
                   const selection = purposeSelections?.[purpose.uuid];
                   return (
@@ -1174,7 +1215,7 @@ export const RedactoNoticeConsent = ({
       setCategorizedPurposes(newCategorizedPurposes);
 
       const initialPurposeState: Record<string, boolean> =
-        consentContentData.detail.active_config.purposes.reduce(
+        activeConfig.purposes.reduce(
           (acc: Record<string, boolean>, purpose) => {
             if (isReconsentRequired && purposeSelections?.[purpose.uuid]) {
               // Pre-populate with existing selection for reconsent
@@ -1190,7 +1231,7 @@ export const RedactoNoticeConsent = ({
       setSelectedPurposes(initialPurposeState);
 
       const initialDataElementState: Record<string, boolean> =
-        consentContentData.detail.active_config.purposes.reduce(
+        activeConfig.purposes.reduce(
           (acc: Record<string, boolean>, purpose) => {
             purpose.data_elements.forEach((element) => {
               const combinedId = `${purpose.uuid}-${element.uuid}`;
@@ -1213,6 +1254,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
@@ -1228,7 +1290,6 @@ export const RedactoNoticeConsent = ({
         return; // Don't update state for cancelled requests
       }
 
-      console.error(err);
       const error = err as Error & { status?: number };
       setFetchError(error);
       if (error.status === 409) {
@@ -1350,24 +1411,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 }
@@ -1382,45 +1471,50 @@ export const RedactoNoticeConsent = ({
         return;
       }
 
-      console.error("Error submitting consent:", error);
       const err = error as Error & { status?: number };
-      if (err.status === 500) {
-        setErrorMessage(
-          "An error occurred while submitting your consent. Please try again later."
-        );
-      }
+      const message =
+        err.status === 500
+          ? "An error occurred while submitting your consent. Please try again later."
+          : err.message || "Failed to submit consent. Please try again.";
+      setErrorMessage(message);
       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
@@ -1981,9 +2075,7 @@ export const RedactoNoticeConsent = ({
       })
       .catch((error) => {
         // Handle errors gracefully - don't break the UI if TTS API fails
-        // Only log if it's not an AbortError (which is expected when component unmounts or request is cancelled)
         if (error instanceof Error && error.name !== "AbortError") {
-          console.warn("Failed to fetch TTS audio URLs:", error.message);
           setIsTTSAvailable(false);
           setTtsAudioUrls(null);
         }
@@ -2606,6 +2698,7 @@ export const RedactoNoticeConsent = ({
                           getTranslatedText={getTranslatedText}
                           isAlreadyConsented={true}
                           selectedLanguage={selectedLanguage}
+                          initialDataElementSelections={initialDataElementSelections}
                         />
                       ))}
 
@@ -2671,13 +2764,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 +2784,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",

package/src/RedactoNoticeConsent/api/index.ts

@@ -5,11 +5,13 @@ import type {
   FetchConsentContentParams,
   FetchTTSAudioUrlsParams,
   GuardianInfoPayload,
+  LegacyConsentEventPayload,
   RedactoJwtPayload,
   SubmitConsentEventParams,
   SubmitGuardianInfoParams,
   TTSAudioUrlsResponse,
 } from "./types";
+import { isLegacyApi } from "../../utils/isLegacyApi";
 
 const BASE_URL = "https://api.redacto.io/consent";
 
@@ -45,16 +47,6 @@ function decodeTokenSafely(token: string): RedactoJwtPayload | null {
   }
 }
 
-// Abstract localStorage access for better testability
-const storage = {
-  getItem: (key: string): string | null => {
-    if (typeof window !== 'undefined') {
-      return localStorage.getItem(key);
-    }
-    return null;
-  }
-};
-
 // Function to clear API cache (useful for testing or when switching users)
 export const clearApiCache = (): void => {
   apiCache.clear();
@@ -146,8 +138,6 @@ export const fetchConsentContent = async ({
 
     return data;
   } catch (error) {
-    // Log error for debugging but don't expose sensitive information
-    console.error("Error fetching consent content:", error instanceof Error ? error.message : error);
     throw error;
   }
 };
@@ -177,48 +167,72 @@ export const submitConsentEvent = async ({
       throw new Error("Invalid token: missing organization or workspace UUID");
     }
 
-    const primaryEmail = storage.getItem("userEmail");
+    const apiBaseUrl = baseUrl || BASE_URL;
 
-    // Validate purposes data
-    const validatedPurposes = purposes.map((purpose) => {
-      if (!purpose.uuid || !purpose.name) {
-        throw new Error(`Invalid purpose data: missing uuid or name`);
-      }
+    let payload: ConsentEventPayload | LegacyConsentEventPayload;
+
+    if (isLegacyApi(apiBaseUrl)) {
+      // @deprecated Legacy payload for production (.io) backend
+      const primaryEmail = typeof window !== "undefined" ? localStorage.getItem("userEmail") : null;
+      payload = {
+        primary_email: primaryEmail || undefined,
+        notice_uuid: noticeUuid,
+        source: "WEB",
+        declined: Boolean(declined),
+        consents: {
+          purposes: purposes.map((purpose) => {
+            if (!purpose.uuid) {
+              throw new Error(`Invalid purpose data: missing uuid`);
+            }
+            return {
+              uuid: purpose.uuid,
+              name: purpose.name,
+              description: purpose.description || "",
+              industries: purpose.industries || "",
+              selected: Boolean(purpose.selected),
+              data_elements: (purpose.data_elements || []).map((element) => ({
+                uuid: element.uuid,
+                name: element.name,
+                enabled: Boolean(element.enabled),
+                required: Boolean(element.required),
+                selected: element.required ? true : Boolean(element.selected),
+              })),
+            };
+          }),
+        },
+        meta_data: meta_data ? { specific_uuid: meta_data.specific_uuid } : undefined,
+      };
+    } else {
+      // New payload for staging (.tech) / localhost
+      const validatedPurposes = purposes.map((purpose) => {
+        if (!purpose.uuid) {
+          throw new Error(`Invalid purpose data: missing uuid`);
+        }
 
-      return {
-        uuid: purpose.uuid,
-        name: purpose.name,
-        description: purpose.description || "",
-        industries: purpose.industries || "",
-        selected: Boolean(purpose.selected),
-        data_elements: (purpose.data_elements || []).map((element) => {
-          if (!element.uuid || !element.name) {
-            throw new Error(`Invalid data element: missing uuid or name`);
-          }
-
-          return {
+        // Only include enabled data elements (disabled elements are not selectable)
+        const dataElements = (purpose.data_elements || [])
+          .filter((element) => element.enabled)
+          .map((element) => ({
             uuid: element.uuid,
-            name: element.name,
-            enabled: Boolean(element.enabled),
-            required: Boolean(element.required),
             selected: element.required ? true : Boolean(element.selected),
-          };
-        }),
-      };
-    });
+          }));
 
-    const payload: ConsentEventPayload = {
-      primary_email: primaryEmail || undefined,
-      notice_uuid: noticeUuid,
-      source: "WEB",
-      declined: Boolean(declined),
-      consents: {
-        purposes: validatedPurposes,
-      },
-      meta_data: meta_data ? { specific_uuid: meta_data.specific_uuid } : undefined,
-    };
+        return {
+          purpose_uuid: purpose.uuid,
+          selected: Boolean(purpose.selected),
+          data_elements: dataElements.length > 0 ? dataElements : undefined,
+        };
+      });
 
-    const apiBaseUrl = baseUrl || BASE_URL;
+      payload = {
+        notice_uuid: noticeUuid,
+        purposes: validatedPurposes,
+        select_all_mandatory: false,
+        source: "WEB",
+        declined: Boolean(declined),
+        meta_data: meta_data ? { specific_uuid: meta_data.specific_uuid } : undefined,
+      };
+    }
 
     const response = await fetch(
       `${apiBaseUrl}/public/organisations/${ORGANISATION_UUID}/workspaces/${WORKSPACE_UUID}/submit-consent`,
@@ -257,8 +271,6 @@ export const submitConsentEvent = async ({
     apiCache.clear();
 
   } catch (error) {
-    // Log error for debugging but don't expose sensitive information
-    console.error("Error submitting consent event:", error instanceof Error ? error.message : error);
     throw error;
   }
 };
@@ -414,8 +426,6 @@ export const fetchTTSAudioUrls = async ({
 
     return data;
   } catch (error) {
-    // Log error for debugging but don't expose sensitive information
-    console.error("Error fetching TTS audio URLs:", error instanceof Error ? error.message : error);
     throw error;
   }
 };

package/src/RedactoNoticeConsent/api/types.ts

@@ -157,9 +157,26 @@ export type FetchConsentContentParams = {
 };
 
 export type ConsentEventPayload = {
-  org_user_id?: string;
+  notice_uuid: string;
+  purposes: Array<{
+    purpose_uuid: string;
+    selected: boolean;
+    data_elements?: Array<{
+      uuid: string;
+      selected: boolean;
+    }>;
+  }>;
+  select_all_mandatory: boolean;
+  source?: string;
+  declined?: boolean;
+  meta_data?: {
+    specific_uuid: string;
+  };
+};
+
+// @deprecated Remove when production backend supports the new payload format.
+export type LegacyConsentEventPayload = {
   primary_email?: string;
-  primary_mobile?: string;
   notice_uuid: string;
   source: string;
   declined: boolean;
@@ -179,9 +196,7 @@ export type ConsentEventPayload = {
       }>;
     }>;
   };
-  meta_data?: {
-    specific_uuid: string;
-  };
+  meta_data?: { specific_uuid: string };
 };
 
 export type DataElement = {