@redacto.io/consent-sdk-react 0.0.3 → 1.1.0

package/src/RedactoNoticeConsent/RedactoNoticeConsent.tsx

@@ -1,12 +1,692 @@
-import { useEffect, useMemo, useState, useRef } from "react";
-import { fetchConsentContent, submitConsentEvent } from "./api";
-import type { ConsentContent } from "./api/types";
+/**
+ * Redacto Notice Consent Component
+ *
+ * A comprehensive consent management component that handles both initial consent
+ * collection and reconsent flows with visual distinction between already-consented
+ * and needs-consent purposes.
+ */
+
+// React imports
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+// API imports
+import {
+  clearApiCache,
+  fetchConsentContent,
+  submitConsentEvent,
+  submitGuardianInfo,
+} from "./api";
+
+// Type imports
+import type {
+  ConsentContent,
+  PurposeItemData,
+  PurposeItemProps,
+} from "./api/types";
 import type { Props, TranslationObject } from "./types";
-import { styles } from "./styles";
+
+// Asset imports
 import logo from "./assets/redacto-logo.png";
-import { useMediaQuery } from "./useMediaQuery";
+
+// Utility imports
 import { injectCheckboxStyles } from "./injectStyles";
+import { styles } from "./styles";
+import { useMediaQuery } from "./useMediaQuery";
+import { useTextToSpeech } from "./useTextToSpeech";
+import type { TextSegment } from "./types";
+
+// =============================================================================
+// SUB-COMPONENTS
+// =============================================================================
+
+/**
+ * PurposeItem Component
+ *
+ * Displays an individual purpose with its data elements.
+ * Supports both regular consent and reconsent UI modes.
+ */
+const PurposeItem: React.FC<PurposeItemProps> = ({
+  purpose,
+  selectedPurposes,
+  collapsedPurposes,
+  selectedDataElements,
+  settings,
+  styles,
+  responsiveStyles,
+  onPurposeToggle,
+  onPurposeCollapse,
+  onDataElementToggle,
+  getTranslatedText,
+  isAlreadyConsented,
+}) => {
+  const headingStyle = useMemo(
+    () => ({
+      color: settings?.headingColor || "#323B4B",
+      fontFamily: settings?.font || "inherit",
+    }),
+    [settings]
+  );
+
+  const textStyle = useMemo(
+    () => ({
+      color: settings?.textColor || "#344054",
+      fontFamily: settings?.font || "inherit",
+    }),
+    [settings]
+  );
+
+  return (
+    <div key={purpose.uuid}>
+      <div style={styles.optionItem}>
+        <div
+          style={styles.optionLeft}
+          onClick={() => onPurposeCollapse(purpose.uuid)}
+          role="button"
+          tabIndex={0}
+          aria-expanded={!collapsedPurposes[purpose.uuid]}
+          aria-controls={`purpose-${purpose.uuid}`}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              onPurposeCollapse(purpose.uuid);
+            }
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              marginLeft: "5px",
+            }}
+          >
+            <svg
+              width="7"
+              height="12"
+              viewBox="0 0 7 12"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              stroke={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"
+            >
+              <path d="M1 1L6 6L1 11" />
+            </svg>
+          </div>
+          <div style={styles.optionTextContainer}>
+            <h2
+              id={`purpose-name-${purpose.uuid}`}
+              style={{
+                ...styles.optionTitle,
+                ...responsiveStyles.optionTitle,
+                ...headingStyle,
+              }}
+            >
+              {getTranslatedText(`purposes.name`, purpose.name, purpose.uuid)}
+            </h2>
+            <h3
+              id={`purpose-description-${purpose.uuid}`}
+              style={{
+                ...styles.optionDescription,
+                ...responsiveStyles.optionDescription,
+                ...textStyle,
+              }}
+            >
+              {getTranslatedText(
+                `purposes.description`,
+                purpose.description,
+                purpose.uuid
+              )}
+            </h3>
+          </div>
+        </div>
+        {!isAlreadyConsented && (
+          <input
+            className="redacto-checkbox-large"
+            type="checkbox"
+            checked={selectedPurposes[purpose.uuid] || false}
+            onChange={() => onPurposeToggle(purpose.uuid)}
+            aria-label={`Select all data elements for ${getTranslatedText(
+              `purposes.name`,
+              purpose.name,
+              purpose.uuid
+            )}`}
+          />
+        )}
+        {isAlreadyConsented && (
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "20px",
+              height: "20px",
+              borderRadius: "50%",
+              backgroundColor: "#10B981",
+              marginLeft: "12px",
+            }}
+          >
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 12 12"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M4 6L5.5 7.5L8.5 4.5"
+                stroke="white"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </div>
+        )}
+      </div>
+      {!collapsedPurposes[purpose.uuid] &&
+        purpose.data_elements &&
+        purpose.data_elements.length > 0 && (
+          <div
+            id={`purpose-${purpose.uuid}`}
+            style={styles.dataElementsContainer}
+          >
+            {purpose.data_elements.map((dataElement: any) => (
+              <div key={dataElement.uuid} style={styles.dataElementItem}>
+                <span
+                  id={`data-element-${purpose.uuid}-${dataElement.uuid}`}
+                  style={{
+                    ...styles.dataElementText,
+                    ...responsiveStyles.dataElementText,
+                    ...textStyle,
+                  }}
+                >
+                  {getTranslatedText(
+                    `data_elements.name`,
+                    dataElement.name,
+                    dataElement.uuid
+                  )}
+                  {dataElement.required && (
+                    <span
+                      style={{
+                        color: "red",
+                        marginLeft: "4px",
+                      }}
+                      aria-label="required"
+                    >
+                      *
+                    </span>
+                  )}
+                </span>
+                {!isAlreadyConsented && (
+                  <input
+                    className="redacto-checkbox-small"
+                    type="checkbox"
+                    checked={
+                      selectedDataElements[
+                        `${purpose.uuid}-${dataElement.uuid}`
+                      ] || false
+                    }
+                    onChange={() =>
+                      onDataElementToggle(dataElement.uuid, purpose.uuid)
+                    }
+                    aria-label={`Select ${getTranslatedText(
+                      `data_elements.name`,
+                      dataElement.name,
+                      dataElement.uuid
+                    )}${dataElement.required ? " (required)" : ""}`}
+                  />
+                )}
+                {isAlreadyConsented && (
+                  <div
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: "16px",
+                      height: "16px",
+                      borderRadius: "50%",
+                      backgroundColor: "#10B981",
+                    }}
+                  >
+                    <svg
+                      width="10"
+                      height="10"
+                      viewBox="0 0 10 10"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M3 5L4.5 6.5L7.5 3.5"
+                        stroke="white"
+                        strokeWidth="1.5"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+    </div>
+  );
+};
+
+/**
+ * GuardianForm Component
+ *
+ * Displays a form for collecting guardian information for minor consent.
+ */
+const GuardianForm: React.FC<{
+  formData: {
+    guardianName: string;
+    guardianContact: string;
+    guardianRelationship: string;
+  };
+  errors: Record<string, string>;
+  isSubmitting: boolean;
+  onChange: (field: string, value: string) => void;
+  onNext: () => void;
+  onDecline: () => void;
+  styles: any;
+  responsiveStyles: any;
+  settings?: any;
+  componentHeadingStyle: any;
+  componentTextStyle: any;
+  acceptButtonStyle: any;
+  declineButtonStyle: any;
+  logoUrl: string;
+}> = ({
+  formData,
+  errors,
+  isSubmitting,
+  onChange,
+  onNext,
+  onDecline,
+  styles,
+  responsiveStyles,
+  settings,
+  componentHeadingStyle,
+  componentTextStyle,
+  acceptButtonStyle,
+  declineButtonStyle,
+  logoUrl,
+}) => {
+  const inputStyle = {
+    width: "100%",
+    padding: "10px 12px",
+    border: `1px solid ${settings?.borderColor || "#d0d5dd"}`,
+    borderRadius: settings?.borderRadius || "8px",
+    fontSize: "13px",
+    fontFamily: settings?.font || "inherit",
+    color: settings?.textColor || "#344054",
+    backgroundColor: settings?.backgroundColor || "#ffffff",
+    marginBottom: "4px",
+    boxSizing: "border-box" as const,
+  };
+
+  const errorStyle = {
+    color: "#DC2626",
+    fontSize: "12px",
+    marginTop: "4px",
+    marginBottom: "16px",
+  };
+
+  const labelStyle = {
+    ...componentTextStyle,
+    fontSize: "13px",
+    fontWeight: "500",
+    marginBottom: "6px",
+    display: "block",
+  };
+
+  return (
+    <>
+      <div style={{ ...styles.topSection, ...componentTextStyle }}>
+        <div style={styles.topLeft}>
+          <img style={styles.logo} src={logoUrl} alt="Redacto Logo" />
+          <h2
+            id="guardian-form-title"
+            style={{
+              ...styles.title,
+              ...responsiveStyles.title,
+              ...componentHeadingStyle,
+              fontSize: "16px",
+              fontWeight: 600,
+            }}
+          >
+            Guardian Information Required
+          </h2>
+        </div>
+      </div>
+
+      <div
+        style={{
+          ...styles.middleSection,
+          ...responsiveStyles.middleSection,
+          ...componentTextStyle,
+        }}
+      >
+        <p
+          style={{
+            ...styles.privacyText,
+            ...responsiveStyles.privacyText,
+            ...componentTextStyle,
+            fontSize: "14px",
+            lineHeight: "1.4",
+          }}
+        >
+          As you are under the age of consent, we need to collect information
+          about your legal guardian to proceed.
+        </p>
+
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: "12px",
+            marginTop: "16px",
+          }}
+        >
+          <div>
+            <label
+              htmlFor="guardianName"
+              style={{ ...labelStyle, marginBottom: "8px", display: "block" }}
+            >
+              Name of Guardian *
+            </label>
+            <input
+              id="guardianName"
+              type="text"
+              value={formData.guardianName}
+              onChange={(e) => onChange("guardianName", e.target.value)}
+              style={{
+                ...inputStyle,
+                borderColor: errors.guardianName
+                  ? "#DC2626"
+                  : inputStyle.border,
+              }}
+              placeholder="Enter guardian's full name"
+            />
+            {errors.guardianName && (
+              <div style={errorStyle}>{errors.guardianName}</div>
+            )}
+          </div>
+
+          <div>
+            <label
+              htmlFor="guardianContact"
+              style={{ ...labelStyle, marginBottom: "8px", display: "block" }}
+            >
+              Contact of Guardian *
+            </label>
+            <input
+              id="guardianContact"
+              type="text"
+              value={formData.guardianContact}
+              onChange={(e) => onChange("guardianContact", e.target.value)}
+              style={{
+                ...inputStyle,
+                borderColor: errors.guardianContact
+                  ? "#DC2626"
+                  : inputStyle.border,
+              }}
+              placeholder="Enter guardian's email or phone number"
+            />
+            {errors.guardianContact && (
+              <div style={errorStyle}>{errors.guardianContact}</div>
+            )}
+          </div>
+
+          <div>
+            <label
+              htmlFor="guardianRelationship"
+              style={{ ...labelStyle, marginBottom: "8px", display: "block" }}
+            >
+              Relationship to Guardian *
+            </label>
+            <input
+              id="guardianRelationship"
+              type="text"
+              value={formData.guardianRelationship}
+              onChange={(e) => onChange("guardianRelationship", e.target.value)}
+              style={{
+                ...inputStyle,
+                borderColor: errors.guardianRelationship
+                  ? "#DC2626"
+                  : inputStyle.border,
+              }}
+              placeholder="e.g., Parent, Legal Guardian, etc."
+            />
+            {errors.guardianRelationship && (
+              <div style={errorStyle}>{errors.guardianRelationship}</div>
+            )}
+          </div>
+        </div>
+
+        {errors.general && (
+          <div
+            role="alert"
+            style={{
+              color: "#DC2626",
+              fontSize: "14px",
+              marginTop: "16px",
+              padding: "12px",
+              borderRadius: "6px",
+              border: "1px solid #FCA5A5",
+              backgroundColor: "#FEF2F2",
+              textAlign: "center",
+            }}
+          >
+            {errors.general}
+          </div>
+        )}
+      </div>
 
+      <div
+        style={{
+          ...styles.bottomSection,
+          ...responsiveStyles.bottomSection,
+          ...componentTextStyle,
+          paddingTop: "12px",
+        }}
+      >
+        <button
+          style={{
+            ...styles.button,
+            ...responsiveStyles.button,
+            ...styles.acceptButton,
+            ...acceptButtonStyle,
+          }}
+          onClick={onNext}
+          disabled={isSubmitting}
+          type="button"
+        >
+          {isSubmitting ? "Submitting..." : "Next"}
+        </button>
+        <button
+          style={{
+            ...styles.button,
+            ...responsiveStyles.button,
+            ...styles.cancelButton,
+            ...declineButtonStyle,
+          }}
+          onClick={onDecline}
+          type="button"
+        >
+          Cancel
+        </button>
+      </div>
+    </>
+  );
+};
+
+/**
+ * AgeVerification Component
+ *
+ * Displays an age verification screen asking if the user is 18+.
+ */
+const AgeVerification: React.FC<{
+  onYes: () => void;
+  onNo: () => void;
+  onClose: () => void;
+  styles: any;
+  responsiveStyles: any;
+  componentHeadingStyle: any;
+  componentTextStyle: any;
+  acceptButtonStyle: any;
+  declineButtonStyle: any;
+  logoUrl: string;
+  isMobile: boolean;
+}> = ({
+  onYes,
+  onNo,
+  onClose,
+  styles,
+  responsiveStyles,
+  componentHeadingStyle,
+  componentTextStyle,
+  acceptButtonStyle,
+  declineButtonStyle,
+  logoUrl,
+  isMobile,
+}) => {
+  return (
+    <>
+      <div style={{ ...styles.topSection, ...componentTextStyle }}>
+        <div style={styles.topLeft}>
+          <img style={styles.logo} src={logoUrl} alt="Redacto Logo" />
+          <h2
+            id="age-verification-title"
+            style={{
+              ...styles.title,
+              ...responsiveStyles.title,
+              ...componentHeadingStyle,
+            }}
+          >
+            Age Verification Required
+          </h2>
+        </div>
+        <button
+          onClick={onClose}
+          style={{
+            background: "none",
+            border: "none",
+            color: componentHeadingStyle?.color || "#323B4B",
+            cursor: "pointer",
+            padding: isMobile ? "2px" : "4px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+          aria-label="Close modal"
+        >
+          <svg
+            width={isMobile ? "18" : "20"}
+            height={isMobile ? "18" : "20"}
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+          >
+            <path
+              d="M15 5L5 15M5 5L15 15"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </button>
+      </div>
+
+      <div
+        style={{
+          ...styles.middleSection,
+          ...responsiveStyles.middleSection,
+          ...componentTextStyle,
+        }}
+      >
+        <p
+          style={{
+            ...styles.privacyText,
+            ...responsiveStyles.privacyText,
+            ...componentTextStyle,
+            marginBottom: "16px",
+          }}
+        >
+          To proceed with this consent form, we need to verify your age.
+        </p>
+
+        <p
+          style={{
+            ...styles.subTitle,
+            ...componentTextStyle,
+            marginBottom: "24px",
+            textAlign: "left",
+          }}
+        >
+          Are you 18 years of age or older?
+        </p>
+      </div>
+
+      <div
+        style={{
+          ...styles.bottomSection,
+          ...responsiveStyles.bottomSection,
+          ...componentTextStyle,
+        }}
+      >
+        <button
+          style={{
+            ...styles.button,
+            ...responsiveStyles.button,
+            ...styles.acceptButton,
+            ...acceptButtonStyle,
+          }}
+          onClick={onYes}
+          type="button"
+        >
+          Yes, I am 18 or older
+        </button>
+        <button
+          style={{
+            ...styles.button,
+            ...responsiveStyles.button,
+            ...styles.cancelButton,
+            ...declineButtonStyle,
+          }}
+          onClick={onNo}
+          type="button"
+        >
+          No, I am under 18
+        </button>
+      </div>
+    </>
+  );
+};
+
+// =============================================================================
+// MAIN COMPONENT
+// =============================================================================
+
+/**
+ * RedactoNoticeConsent
+ *
+ * Main consent management component that provides a comprehensive UI for users
+ * to view and manage their consent preferences. Supports both initial consent
+ * collection and reconsent flows.
+ */
 export const RedactoNoticeConsent = ({
   noticeId,
   accessToken,
@@ -19,37 +699,107 @@ export const RedactoNoticeConsent = ({
   onError,
   settings,
   applicationId,
+  checkMode = "all",
 }: Props) => {
+  // =============================================================================
+  // PROP VALIDATION
+  // =============================================================================
+
+  // Validate required props gracefully
+  const propValidationError = useMemo(() => {
+    if (!noticeId?.trim()) {
+      return "RedactoNoticeConsent: 'noticeId' prop is required and cannot be empty";
+    }
+    if (!accessToken?.trim()) {
+      return "RedactoNoticeConsent: 'accessToken' prop is required and cannot be empty";
+    }
+    return null;
+  }, [noticeId, accessToken]);
+
+  // Show error UI if props are invalid
+  if (propValidationError) {
+    return (
+      <div
+        style={{
+          padding: "20px",
+          backgroundColor: "#fee",
+          border: "1px solid #fcc",
+          borderRadius: "4px",
+          color: "#c33",
+        }}
+      >
+        <h3>Configuration Error</h3>
+        <p>{propValidationError}</p>
+        <p>Please check your component props and try again.</p>
+      </div>
+    );
+  }
+
+  // =============================================================================
+  // STATE MANAGEMENT
+  // =============================================================================
+
+  // Loading and submission states
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Content and consent data
   const [content, setContent] = useState<
     ConsentContent["detail"]["active_config"] | null
   >(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [isRefreshingToken, setIsRefreshingToken] = useState(false);
-  const [isLanguageDropdownOpen, setIsLanguageDropdownOpen] = useState(false);
-  const [selectedLanguage, setSelectedLanguage] = useState<string>(language);
-  const [collapsedPurposes, setCollapsedPurposes] = useState<
-    Record<string, boolean>
-  >({});
+  const [categorizedPurposes, setCategorizedPurposes] = useState<{
+    alreadyConsented: Array<PurposeItemData>;
+    needsConsent: Array<PurposeItemData>;
+  } | null>(null);
+
+  // User interaction states
   const [selectedPurposes, setSelectedPurposes] = useState<
     Record<string, boolean>
   >({});
   const [selectedDataElements, setSelectedDataElements] = useState<
     Record<string, boolean>
   >({});
+  const [collapsedPurposes, setCollapsedPurposes] = useState<
+    Record<string, boolean>
+  >({});
   const [hasAlreadyConsented, setHasAlreadyConsented] = useState(false);
+
+  // UI states
+  const [isLanguageDropdownOpen, setIsLanguageDropdownOpen] = useState(false);
+  const [selectedLanguage, setSelectedLanguage] = useState<string>(language);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [fetchError, setFetchError] = useState<Error | null>(null);
+
+  // Age verification states
+  const [showAgeVerification, setShowAgeVerification] = useState(false);
+
+  // Guardian form states
+  const [showGuardianForm, setShowGuardianForm] = useState(false);
+  const [isSubmittingGuardian, setIsSubmittingGuardian] = useState(false);
+  const [guardianFormData, setGuardianFormData] = useState({
+    guardianName: "",
+    guardianContact: "",
+    guardianRelationship: "",
+  });
+  const [guardianFormErrors, setGuardianFormErrors] = useState<
+    Record<string, string>
+  >({});
+
+  // Refs and constants
   const modalRef = useRef<HTMLDivElement>(null);
   const firstFocusableRef = useRef<HTMLButtonElement>(null);
   const lastFocusableRef = useRef<HTMLButtonElement>(null);
-  const MAX_REFRESH_ATTEMPTS = 1;
-  const [refreshAttempts, setRefreshAttempts] = useState(0);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const isRequestInProgressRef = useRef(false); // Prevent rapid successive calls
+
+  // =============================================================================
+  // RESPONSIVE DESIGN & STYLING
+  // =============================================================================
 
-  // Add media query hooks
+  // Media query hooks
   const isMobile = useMediaQuery("(max-width: 768px)");
 
-  // Responsive styles
+  // Memoize responsive styles to avoid recalculation
   const responsiveStyles = useMemo(
     () => ({
       modal: {
@@ -64,38 +814,21 @@ export const RedactoNoticeConsent = ({
       subTitle: {
         fontSize: isMobile ? "14px" : "16px",
       },
-      privacyText: {
-        fontSize: isMobile ? "14px" : "16px",
-      },
       optionTitle: {
         fontSize: isMobile ? "14px" : "16px",
       },
       optionDescription: {
-        fontSize: isMobile ? "11px" : "12px",
+        fontSize: isMobile ? "12px" : "14px",
       },
       dataElementText: {
         fontSize: isMobile ? "12px" : "14px",
       },
-      topRight: {
-        fontSize: isMobile ? "11px" : "12px",
-        padding: isMobile ? "3px 6px" : "3px 9px",
-        height: isMobile ? "auto" : undefined,
-        width: isMobile ? "auto" : undefined,
-      },
-      languageItem: {
-        fontSize: isMobile ? "11px" : "12px",
-        padding: isMobile ? "6px 10px" : "8px 12px",
-      },
       bottomSection: {
         flexDirection: isMobile ? ("column" as const) : ("row" as const),
-        gap: isMobile ? "12px" : "29px",
+        gap: isMobile ? "12px" : "16px",
       },
-      button: {
+      privacyText: {
         fontSize: isMobile ? "14px" : "16px",
-        padding: isMobile ? "10px 20px" : "9px 45px",
-      },
-      middleSection: {
-        paddingRight: isMobile ? "10px" : "15px",
       },
       errorDialog: {
         padding: isMobile ? "12px" : "16px",
@@ -119,10 +852,60 @@ export const RedactoNoticeConsent = ({
         right: isMobile ? "4px" : "8px",
         padding: isMobile ? "2px" : "4px",
       },
+      topRight: {
+        fontSize: isMobile ? "11px" : "12px",
+        padding: isMobile ? "3px 6px" : "3px 9px",
+        height: isMobile ? "auto" : undefined,
+        width: isMobile ? "auto" : undefined,
+      },
+      languageItem: {
+        fontSize: isMobile ? "11px" : "12px",
+        padding: isMobile ? "6px 10px" : "8px 12px",
+      },
+      middleSection: {
+        paddingRight: isMobile ? "10px" : "15px",
+      },
+      button: {
+        fontSize: isMobile ? "14px" : "16px",
+        padding: isMobile ? "10px 20px" : "9px 45px",
+      },
     }),
     [isMobile]
   );
 
+  // Memoize component-level styles
+  const componentHeadingStyle = useMemo(
+    () => ({
+      color: settings?.headingColor || "#323B4B",
+      fontFamily: settings?.font || "inherit",
+    }),
+    [settings?.headingColor, settings?.font]
+  );
+
+  const componentTextStyle = useMemo(
+    () => ({
+      color: settings?.textColor || "#344054",
+      fontFamily: settings?.font || "inherit",
+    }),
+    [settings?.textColor, settings?.font]
+  );
+
+  // Memoize section style for buttons
+  const sectionStyle = useMemo(
+    () => ({
+      color: settings?.textColor || "#344054",
+      fontFamily: settings?.font || "inherit",
+    }),
+    [settings?.textColor, settings?.font]
+  );
+
+  // =============================================================================
+  // COMPUTED VALUES & BUSINESS LOGIC
+  // =============================================================================
+
+  /**
+   * Checks if all required data elements are selected for consent submission
+   */
   const areAllRequiredElementsChecked = useMemo(() => {
     if (!content) return false;
 
@@ -138,6 +921,46 @@ export const RedactoNoticeConsent = ({
 
   const acceptDisabled = isSubmitting || !areAllRequiredElementsChecked;
 
+  // =============================================================================
+  // EFFECTS & LIFECYCLE
+  // =============================================================================
+
+  /**
+   * Reset component state when accessToken changes to prevent stale data
+   */
+  useEffect(() => {
+    // Clear API cache to prevent data from previous user sessions
+    clearApiCache();
+
+    // Reset request flag when token changes
+    isRequestInProgressRef.current = false;
+
+    // Clear component state when token changes
+    setContent(null);
+    setCategorizedPurposes(null);
+    setSelectedPurposes({});
+    setSelectedDataElements({});
+    setCollapsedPurposes({});
+    setHasAlreadyConsented(false);
+    setErrorMessage(null);
+    setFetchError(null);
+    setIsLoading(true);
+
+    // Clear age verification and guardian form state
+    setShowAgeVerification(false);
+    setShowGuardianForm(false);
+    setIsSubmittingGuardian(false);
+    setGuardianFormData({
+      guardianName: "",
+      guardianContact: "",
+      guardianRelationship: "",
+    });
+    setGuardianFormErrors({});
+  }, [accessToken]);
+
+  /**
+   * Handle automatic acceptance if user has already consented
+   */
   useEffect(() => {
     if (hasAlreadyConsented) {
       onAccept?.();
@@ -151,7 +974,8 @@ export const RedactoNoticeConsent = ({
   ): string => {
     if (!content) return defaultText;
 
-    if (selectedLanguage === content.default_language) {
+    // If English is selected, use the base content from active_config
+    if (selectedLanguage === "English" || selectedLanguage === "en") {
       if (
         key === "privacy_policy_anchor_text" &&
         content.privacy_policy_anchor_text
@@ -161,6 +985,7 @@ export const RedactoNoticeConsent = ({
       return defaultText;
     }
 
+    // For other languages, check supported_languages_and_translations
     if (!content.supported_languages_and_translations) {
       return defaultText;
     }
@@ -190,9 +1015,33 @@ export const RedactoNoticeConsent = ({
     return defaultText;
   };
 
+  // =============================================================================
+  // EVENT HANDLERS
+  // =============================================================================
+
+  /**
+   * Fetches consent notice data from the API
+   */
   const fetchNotice = async () => {
+    // Prevent rapid successive calls
+    if (isRequestInProgressRef.current) {
+      return;
+    }
+    isRequestInProgressRef.current = true;
+
+    // Cancel any existing request
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+
+    // Create new abort controller for this request
+    abortControllerRef.current = new AbortController();
+
     setIsLoading(true);
     setFetchError(null);
+    // Reset age verification and guardian form states when starting a new fetch
+    setShowAgeVerification(false);
+    setShowGuardianForm(false);
     try {
       const consentContentData = await fetchConsentContent({
         noticeId,
@@ -201,11 +1050,16 @@ export const RedactoNoticeConsent = ({
         baseUrl,
         language,
         specific_uuid: applicationId,
+        check_mode: checkMode,
+        signal: abortControllerRef.current?.signal,
       });
       setContent(consentContentData.detail.active_config);
       if (consentContentData.detail.active_config.default_language) {
+        // Normalize "en" to "English" for consistency
+        const defaultLang =
+          consentContentData.detail.active_config.default_language;
         setSelectedLanguage(
-          consentContentData.detail.active_config.default_language
+          defaultLang === "en" || defaultLang === "EN" ? "English" : defaultLang
         );
       }
       const initialCollapsedState =
@@ -218,14 +1072,52 @@ export const RedactoNoticeConsent = ({
         );
       setCollapsedPurposes(initialCollapsedState);
 
-      // Initialize selected states
+      // Initialize selected states - handle reconsent pre-population
+      const isReconsentRequired = consentContentData.detail.reconsent_required;
+      const purposeSelections = consentContentData.detail.purpose_selections;
+
+      // Categorize purposes for reconsent UI
+      const newCategorizedPurposes = isReconsentRequired
+        ? {
+            alreadyConsented:
+              consentContentData.detail.active_config.purposes.filter(
+                (purpose) => {
+                  const selection = purposeSelections?.[purpose.uuid];
+                  return (
+                    selection &&
+                    (selection.status === "ACTIVE" ||
+                      selection.status === "EXPIRED") &&
+                    !selection.needs_reconsent
+                  );
+                }
+              ),
+            needsConsent:
+              consentContentData.detail.active_config.purposes.filter(
+                (purpose) => {
+                  const selection = purposeSelections?.[purpose.uuid];
+                  return (
+                    !selection ||
+                    selection.status !== "ACTIVE" ||
+                    selection.needs_reconsent
+                  );
+                }
+              ),
+          }
+        : null;
+
+      setCategorizedPurposes(newCategorizedPurposes);
+
       const initialPurposeState: Record<string, boolean> =
         consentContentData.detail.active_config.purposes.reduce(
           (acc: Record<string, boolean>, purpose) => {
-            return {
-              ...acc,
-              [purpose.uuid]: false,
-            };
+            if (isReconsentRequired && purposeSelections?.[purpose.uuid]) {
+              // Pre-populate with existing selection for reconsent
+              acc[purpose.uuid] = purposeSelections[purpose.uuid].selected;
+            } else {
+              // Default to false for new consent
+              acc[purpose.uuid] = false;
+            }
+            return acc;
           },
           {}
         );
@@ -236,29 +1128,53 @@ export const RedactoNoticeConsent = ({
           (acc: Record<string, boolean>, purpose) => {
             purpose.data_elements.forEach((element) => {
               const combinedId = `${purpose.uuid}-${element.uuid}`;
-              acc[combinedId] = false;
+              if (
+                isReconsentRequired &&
+                purposeSelections?.[purpose.uuid]?.data_elements?.[element.uuid]
+              ) {
+                // Pre-populate with existing selection for reconsent
+                acc[combinedId] =
+                  purposeSelections[purpose.uuid].data_elements[
+                    element.uuid
+                  ].selected;
+              } else {
+                // Default to false for new consent (including required elements)
+                acc[combinedId] = false;
+              }
             });
             return acc;
           },
           {}
         );
       setSelectedDataElements(initialDataElementState);
+
+      // Check if age verification is required - set this after all content is loaded
+      // but before setIsLoading(false) to ensure proper render order
+      if (consentContentData.detail.is_minor) {
+        setShowAgeVerification(true);
+      }
+
+      // Set loading to false after all state updates are complete
+      setIsLoading(false);
     } catch (err: unknown) {
+      // Don't treat AbortError as an actual error - it's expected when requests are cancelled
+      if (err instanceof Error && err.name === "AbortError") {
+        console.log("Request was cancelled");
+        return; // Don't update state for cancelled requests
+      }
+
       console.error(err);
       const error = err as Error & { status?: number };
       setFetchError(error);
-      if (error.status === 401 && refreshAttempts < MAX_REFRESH_ATTEMPTS) {
-        setRefreshAttempts((c) => c + 1);
-        setIsRefreshingToken(true);
-        onError?.(error);
-      } else if (error.status === 409) {
+      if (error.status === 409) {
         setHasAlreadyConsented(true);
       } else {
         onError?.(error);
       }
-    } finally {
+      // Ensure loading is set to false even on error
       setIsLoading(false);
-      setIsRefreshingToken(false);
+    } finally {
+      isRequestInProgressRef.current = false; // Reset request flag
     }
   };
 
@@ -271,9 +1187,10 @@ export const RedactoNoticeConsent = ({
     accessToken,
     refreshToken,
     language,
-    onError,
     applicationId,
-    isRefreshingToken,
+    checkMode,
+    // 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: string) => {
@@ -320,6 +1237,9 @@ export const RedactoNoticeConsent = ({
     elementUuid: string,
     purposeUuid: string
   ) => {
+    // Prevent state updates if content is not loaded yet
+    if (!content) return;
+
     const combinedId = `${purposeUuid}-${elementUuid}`;
 
     // Update data element state
@@ -330,21 +1250,19 @@ export const RedactoNoticeConsent = ({
       };
 
       // Check if all required elements for this purpose are checked
-      if (content) {
-        const purpose = content.purposes.find((p) => p.uuid === purposeUuid);
-        if (purpose) {
-          const requiredElements = purpose.data_elements.filter(
-            (el) => el.required
-          );
-          const allRequiredElementsChecked = requiredElements.every(
-            (el) => newState[`${purposeUuid}-${el.uuid}`]
-          );
+      const purpose = content.purposes.find((p) => p.uuid === purposeUuid);
+      if (purpose) {
+        const requiredElements = purpose.data_elements.filter(
+          (el) => el.required
+        );
+        const allRequiredElementsChecked = requiredElements.every(
+          (el) => newState[`${purposeUuid}-${el.uuid}`]
+        );
 
-          setSelectedPurposes((prevPurposes) => ({
-            ...prevPurposes,
-            [purposeUuid]: allRequiredElementsChecked,
-          }));
-        }
+        setSelectedPurposes((prevPurposes) => ({
+          ...prevPurposes,
+          [purposeUuid]: allRequiredElementsChecked,
+        }));
       }
 
       return newState;
@@ -352,6 +1270,9 @@ export const RedactoNoticeConsent = ({
   };
 
   const handleAccept = async () => {
+    // Create abort controller for submission
+    const submitController = new AbortController();
+
     try {
       setIsSubmitting(true);
       setErrorMessage(null);
@@ -375,10 +1296,17 @@ export const RedactoNoticeConsent = ({
           meta_data: applicationId
             ? { specific_uuid: applicationId }
             : undefined,
+          signal: submitController.signal,
         });
       }
       onAccept?.();
     } catch (error) {
+      // Don't treat AbortError as an actual error
+      if (error instanceof Error && error.name === "AbortError") {
+        console.log("Consent submission was cancelled");
+        return;
+      }
+
       console.error("Error submitting consent:", error);
       const err = error as Error & { status?: number };
       if (err.status === 500) {
@@ -392,7 +1320,7 @@ export const RedactoNoticeConsent = ({
     }
   };
 
-  const handleDecline = async () => {
+  const handleDecline = useCallback(async () => {
     // try {
     //   setIsSubmitting(true);
     //   if (content) {
@@ -418,19 +1346,319 @@ export const RedactoNoticeConsent = ({
     //   setIsSubmitting(false);
     // }
     onDecline?.();
-  };
+  }, [onDecline]);
 
-  const availableLanguages = useMemo(
-    () =>
-      content
-        ? [
-            content.default_language,
-            ...Object.keys(content.supported_languages_and_translations || {}),
-          ].filter((value, index, self) => self.indexOf(value) === index)
-        : [language],
-    [content, language]
+  // Guardian form handlers
+  const handleGuardianFormChange = useCallback(
+    (field: string, value: string) => {
+      setGuardianFormData((prev) => ({
+        ...prev,
+        [field]: value,
+      }));
+      // Clear error when user starts typing
+      if (guardianFormErrors[field]) {
+        setGuardianFormErrors((prev) => ({
+          ...prev,
+          [field]: "",
+        }));
+      }
+    },
+    [guardianFormErrors]
   );
 
+  const validateGuardianForm = () => {
+    const errors: Record<string, string> = {};
+
+    if (!guardianFormData.guardianName.trim()) {
+      errors.guardianName = "Guardian name is required";
+    }
+    if (!guardianFormData.guardianContact.trim()) {
+      errors.guardianContact = "Guardian contact is required";
+    }
+    if (!guardianFormData.guardianRelationship.trim()) {
+      errors.guardianRelationship = "Relationship to guardian is required";
+    }
+
+    setGuardianFormErrors(errors);
+    return Object.keys(errors).length === 0;
+  };
+
+  const handleGuardianFormNext = useCallback(async () => {
+    if (!validateGuardianForm()) {
+      return;
+    }
+
+    // Create abort controller for submission
+    const guardianController = new AbortController();
+
+    try {
+      setIsSubmittingGuardian(true);
+      setGuardianFormErrors({}); // Clear any previous errors
+
+      await submitGuardianInfo({
+        accessToken,
+        baseUrl,
+        guardianName: guardianFormData.guardianName,
+        guardianContact: guardianFormData.guardianContact,
+        guardianRelationship: guardianFormData.guardianRelationship,
+        signal: guardianController.signal,
+      });
+
+      // Success - proceed to consent form
+      setShowGuardianForm(false);
+    } catch (error) {
+      // Handle API errors
+      const err = error as Error & { status?: number };
+
+      if (err.status === 422) {
+        // Validation error from server - try to extract field-specific errors
+        if (err.message.includes("guardian_contact")) {
+          setGuardianFormErrors({ guardianContact: err.message });
+        } else if (err.message.includes("guardian_name")) {
+          setGuardianFormErrors({ guardianName: err.message });
+        } else if (err.message.includes("guardian_relationship")) {
+          setGuardianFormErrors({ guardianRelationship: err.message });
+        } else {
+          setGuardianFormErrors({ general: err.message });
+        }
+      } else {
+        // Other errors - show general error
+        setGuardianFormErrors({
+          general:
+            err.message ||
+            "Failed to submit guardian information. Please try again.",
+        });
+        onError?.(err);
+      }
+    } finally {
+      setIsSubmittingGuardian(false);
+    }
+  }, [accessToken, baseUrl, guardianFormData, onError]);
+
+  // Age verification handlers
+  const handleAgeVerificationYes = useCallback(() => {
+    setShowAgeVerification(false);
+    // User is 18+, proceed directly to consent
+  }, []);
+
+  const handleAgeVerificationNo = useCallback(() => {
+    setShowAgeVerification(false);
+    setShowGuardianForm(true);
+    // User is under 18, show guardian form
+  }, []);
+
+  const availableLanguages = useMemo(() => {
+    if (!content) return [language];
+
+    // English is always available since it's in active_config
+    const languages = ["English"];
+
+    // Add default language if it's not English
+    if (
+      content.default_language &&
+      content.default_language !== "English" &&
+      content.default_language !== "en"
+    ) {
+      languages.push(content.default_language);
+    }
+
+    // Add all supported languages from translations
+    if (content.supported_languages_and_translations) {
+      Object.keys(content.supported_languages_and_translations).forEach(
+        (lang) => {
+          if (!languages.includes(lang)) {
+            languages.push(lang);
+          }
+        }
+      );
+    }
+
+    return languages;
+  }, [content, language]);
+
+  // =============================================================================
+  // TEXT-TO-SPEECH FUNCTIONALITY
+  // =============================================================================
+
+  // Create text segments for TTS in reading order
+  const textSegments = useMemo<TextSegment[]>(() => {
+    if (!content) return [];
+
+    const segments: TextSegment[] = [];
+
+    // 1. Notice banner heading
+    const noticeHeading = getTranslatedText(
+      "notice_banner_heading",
+      content.notice_banner_heading || "Privacy Notice"
+    );
+    if (noticeHeading) {
+      segments.push({
+        text: noticeHeading,
+        elementId: "privacy-notice-title",
+      });
+    }
+
+    // 2. Notice text
+    const noticeText = getTranslatedText("notice_text", content.notice_text);
+    if (noticeText) {
+      segments.push({
+        text: noticeText,
+        elementId: "privacy-notice-text",
+      });
+    }
+
+    // 3. Privacy policy text
+    const privacyPrefix = getTranslatedText(
+      "privacy_policy_prefix_text",
+      content.privacy_policy_prefix_text || ""
+    );
+    const privacyAnchor = getTranslatedText(
+      "privacy_policy_anchor_text",
+      content.privacy_policy_anchor_text || "Privacy Policy"
+    );
+    if (privacyPrefix || privacyAnchor) {
+      const privacyText = `${privacyPrefix} ${privacyAnchor}`.trim();
+      if (privacyText) {
+        segments.push({
+          text: privacyText,
+          elementId: "privacy-policy-text",
+        });
+      }
+    }
+
+    // 4. Purpose section heading
+    const purposeHeading = getTranslatedText(
+      "purpose_section_heading",
+      "Manage What You Share"
+    );
+    if (purposeHeading) {
+      segments.push({
+        text: purposeHeading,
+        elementId: "purpose-section-heading",
+      });
+    }
+
+    // 5. Purposes and data elements
+    const purposesToRead = categorizedPurposes
+      ? [
+          ...categorizedPurposes.alreadyConsented,
+          ...categorizedPurposes.needsConsent,
+        ]
+      : content.purposes || [];
+
+    purposesToRead.forEach((purpose) => {
+      // Purpose name
+      const purposeName = getTranslatedText(
+        `purposes.name`,
+        purpose.name,
+        purpose.uuid
+      );
+      if (purposeName) {
+        segments.push({
+          text: purposeName,
+          elementId: `purpose-name-${purpose.uuid}`,
+        });
+      }
+
+      // Purpose description
+      const purposeDescription = getTranslatedText(
+        `purposes.description`,
+        purpose.description,
+        purpose.uuid
+      );
+      if (purposeDescription) {
+        segments.push({
+          text: purposeDescription,
+          elementId: `purpose-description-${purpose.uuid}`,
+        });
+      }
+
+      // Data elements
+      if (purpose.data_elements && purpose.data_elements.length > 0) {
+        purpose.data_elements.forEach((dataElement) => {
+          const elementName = getTranslatedText(
+            `data_elements.name`,
+            dataElement.name,
+            dataElement.uuid
+          );
+          if (elementName) {
+            const requiredText = dataElement.required ? " (required)" : "";
+            segments.push({
+              text: `${elementName}${requiredText}`,
+              elementId: `data-element-${purpose.uuid}-${dataElement.uuid}`,
+            });
+          }
+        });
+      }
+    });
+
+    return segments;
+  }, [content, categorizedPurposes, getTranslatedText]);
+
+  // Initialize TTS hook
+  const tts = useTextToSpeech(textSegments, selectedLanguage);
+
+  // Auto-expand collapsed purposes when TTS is reading their content
+  // This ensures accessibility - users can see what's being read even if sections were collapsed
+  useEffect(() => {
+    if (!tts.isPlaying || !content || textSegments.length === 0) return;
+
+    const currentSegment = textSegments[tts.currentIndex];
+    if (!currentSegment) return;
+
+    // Extract purpose UUID from element ID
+    let purposeUuid: string | null = null;
+
+    // Check if current segment is a data element (format: data-element-{purposeUuid}-{elementUuid})
+    const dataElementMatch = currentSegment.elementId.match(
+      /^data-element-(.+?)-(.+)$/
+    );
+    if (dataElementMatch) {
+      purposeUuid = dataElementMatch[1];
+    } else {
+      // Check if current segment is a purpose name or description (format: purpose-name-{purposeUuid} or purpose-description-{purposeUuid})
+      const purposeNameMatch =
+        currentSegment.elementId.match(/^purpose-name-(.+)$/);
+      const purposeDescMatch = currentSegment.elementId.match(
+        /^purpose-description-(.+)$/
+      );
+      if (purposeNameMatch) {
+        purposeUuid = purposeNameMatch[1];
+      } else if (purposeDescMatch) {
+        purposeUuid = purposeDescMatch[1];
+      }
+    }
+
+    // Expand the purpose if it's collapsed
+    if (purposeUuid && collapsedPurposes[purposeUuid]) {
+      setCollapsedPurposes((prev) => ({
+        ...prev,
+        [purposeUuid!]: false,
+      }));
+    }
+  }, [
+    tts.isPlaying,
+    tts.currentIndex,
+    textSegments,
+    content,
+    collapsedPurposes,
+  ]);
+
+  // Stop TTS when language changes
+  useEffect(() => {
+    tts.stop();
+  }, [selectedLanguage]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Stop TTS when content changes
+  useEffect(() => {
+    tts.stop();
+  }, [content]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Handle TTS button click
+  const handleTTSButtonClick = useCallback(() => {
+    tts.toggle();
+  }, [tts]);
+
   const modalStyle = {
     borderRadius: settings?.borderRadius || "8px",
     backgroundColor: settings?.backgroundColor || "#ffffff",
@@ -475,18 +1703,6 @@ export const RedactoNoticeConsent = ({
     fontWeight: 600,
   };
 
-  const headingStyle = {
-    color: settings?.headingColor || "#101828",
-  };
-
-  const textStyle = {
-    color: settings?.textColor || "#344054",
-  };
-
-  const sectionStyle = {
-    backgroundColor: settings?.backgroundColor || "#ffffff",
-  };
-
   const handleCloseError = () => {
     setErrorMessage(null);
   };
@@ -542,6 +1758,20 @@ export const RedactoNoticeConsent = ({
     };
   }, [isLoading, handleDecline]);
 
+  // Cleanup effect - cancel any pending requests when component unmounts
+  useEffect(() => {
+    return () => {
+      // Cancel any pending fetch request
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+    };
+  }, []);
+
+  // =============================================================================
+  // RENDER
+  // =============================================================================
+
   return (
     <>
       {hasAlreadyConsented ? null : (
@@ -566,15 +1796,23 @@ export const RedactoNoticeConsent = ({
             aria-describedby="privacy-notice-description"
             tabIndex={-1}
           >
-            {isLoading || isRefreshingToken ? (
-              <div style={styles.loadingContainer}>
-                <div style={styles.loadingSpinner}></div>
-                <p style={{ ...styles.privacyText, ...textStyle }}>
-                  {isRefreshingToken ? "Refreshing session..." : "Loading..."}
+            {isLoading ? (
+              <div
+                role="status"
+                aria-live="polite"
+                aria-label="Loading consent notice"
+                style={styles.loadingContainer}
+              >
+                <div style={styles.loadingSpinner} aria-hidden="true"></div>
+                <p style={{ ...styles.privacyText, ...componentTextStyle }}>
+                  Loading...
                 </p>
               </div>
             ) : fetchError ? (
               <div
+                role="alert"
+                aria-live="assertive"
+                aria-label="Error loading consent notice"
                 style={{
                   ...styles.content,
                   ...responsiveStyles.content,
@@ -674,6 +1912,41 @@ export const RedactoNoticeConsent = ({
                   </button>
                 </div>
               </div>
+            ) : showAgeVerification ? (
+              <div style={{ ...styles.content, ...responsiveStyles.content }}>
+                <AgeVerification
+                  onYes={handleAgeVerificationYes}
+                  onNo={handleAgeVerificationNo}
+                  onClose={handleDecline}
+                  styles={styles}
+                  responsiveStyles={responsiveStyles}
+                  componentHeadingStyle={componentHeadingStyle}
+                  componentTextStyle={componentTextStyle}
+                  acceptButtonStyle={acceptButtonStyle}
+                  declineButtonStyle={declineButtonStyle}
+                  logoUrl={content?.logo_url || logo}
+                  isMobile={isMobile}
+                />
+              </div>
+            ) : showGuardianForm ? (
+              <div style={{ ...styles.content, ...responsiveStyles.content }}>
+                <GuardianForm
+                  formData={guardianFormData}
+                  errors={guardianFormErrors}
+                  isSubmitting={isSubmittingGuardian}
+                  onChange={handleGuardianFormChange}
+                  onNext={handleGuardianFormNext}
+                  onDecline={handleDecline}
+                  styles={styles}
+                  responsiveStyles={responsiveStyles}
+                  settings={settings}
+                  componentHeadingStyle={componentHeadingStyle}
+                  componentTextStyle={componentTextStyle}
+                  acceptButtonStyle={acceptButtonStyle}
+                  declineButtonStyle={declineButtonStyle}
+                  logoUrl={content?.logo_url || logo}
+                />
+              </div>
             ) : (
               <div style={{ ...styles.content, ...responsiveStyles.content }}>
                 {errorMessage && (
@@ -741,45 +2014,128 @@ export const RedactoNoticeConsent = ({
                       style={{
                         ...styles.title,
                         ...responsiveStyles.title,
-                        ...headingStyle,
+                        ...componentHeadingStyle,
                       }}
                     >
-                      Your Privacy Matters
+                      {getTranslatedText(
+                        "notice_banner_heading",
+                        content?.notice_banner_heading || "Privacy Notice"
+                      )}
                     </h2>
                   </div>
                   <div style={styles.languageSelectorContainer}>
-                    <button
-                      ref={firstFocusableRef}
+                    <div
                       style={{
-                        ...styles.topRight,
-                        ...responsiveStyles.topRight,
-                        ...languageSelectorStyle,
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "8px",
                       }}
-                      onClick={toggleLanguageDropdown}
-                      aria-expanded={isLanguageDropdownOpen}
-                      aria-haspopup="listbox"
-                      aria-controls="language-listbox"
                     >
-                      {selectedLanguage}
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="16"
-                        height="16"
-                        viewBox="0 0 16 16"
-                        fill="none"
-                        stroke={
-                          settings?.button?.language?.textColor ||
-                          "currentColor"
-                        }
-                        strokeWidth="2"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        style={{ flexShrink: 0, marginLeft: "4px" }}
-                        aria-hidden="true"
-                      >
-                        <path d="M4 6l4 4 4-4" />
-                      </svg>
-                    </button>
+                      <div>
+                        <button
+                          ref={firstFocusableRef}
+                          style={{
+                            ...styles.topRight,
+                            ...responsiveStyles.topRight,
+                            ...languageSelectorStyle,
+                          }}
+                          onClick={toggleLanguageDropdown}
+                          aria-expanded={isLanguageDropdownOpen}
+                          aria-haspopup="listbox"
+                          aria-controls="language-listbox"
+                        >
+                          {selectedLanguage}
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="16"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            fill="none"
+                            stroke={
+                              settings?.button?.language?.textColor ||
+                              "currentColor"
+                            }
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            style={{ flexShrink: 0, marginLeft: "4px" }}
+                            aria-hidden="true"
+                          >
+                            <path d="M4 6l4 4 4-4" />
+                          </svg>
+                        </button>
+                      </div>
+                      {(selectedLanguage === "English" ||
+                        selectedLanguage === "en") && (
+                        <button
+                          onClick={handleTTSButtonClick}
+                          style={{
+                            ...styles.topRight,
+                            ...responsiveStyles.topRight,
+                            ...languageSelectorStyle,
+                            padding: "3px 9px",
+                            opacity: textSegments.length === 0 ? 0.5 : 1,
+                          }}
+                          aria-label={
+                            tts.isPlaying && !tts.isPaused
+                              ? "Pause text-to-speech"
+                              : tts.isPaused
+                                ? "Resume text-to-speech"
+                                : "Start text-to-speech"
+                          }
+                          title={
+                            tts.isPlaying && !tts.isPaused
+                              ? "Pause Talkback"
+                              : tts.isPaused
+                                ? "Resume Talkback"
+                                : "Start Talkback"
+                          }
+                          disabled={textSegments.length === 0}
+                        >
+                          {tts.isPlaying && !tts.isPaused ? (
+                            // Pause icon
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="16"
+                              height="16"
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke={
+                                settings?.button?.language?.textColor ||
+                                "currentColor"
+                              }
+                              strokeWidth="2"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              aria-hidden="true"
+                            >
+                              <rect x="6" y="4" width="4" height="16" />
+                              <rect x="14" y="4" width="4" height="16" />
+                            </svg>
+                          ) : (
+                            // Play/Sound icon
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="16"
+                              height="16"
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke={
+                                settings?.button?.language?.textColor ||
+                                "currentColor"
+                              }
+                              strokeWidth="2"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              aria-hidden="true"
+                            >
+                              <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
+                              <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07" />
+                            </svg>
+                          )}
+                        </button>
+                      )}
+                    </div>
                     {isLanguageDropdownOpen && (
                       <ul
                         id="language-listbox"
@@ -825,50 +2181,42 @@ export const RedactoNoticeConsent = ({
                     style={{
                       ...styles.privacyText,
                       ...responsiveStyles.privacyText,
-                      ...textStyle,
+                      ...componentTextStyle,
                     }}
                   >
-                    {content
-                      ? getTranslatedText("notice_text", content.notice_text)
-                      : ""}
+                    <span id="privacy-notice-text">
+                      {content
+                        ? getTranslatedText("notice_text", content.notice_text)
+                        : ""}
+                    </span>
                     <br />
-                    Learn more in our{" "}
-                    <a
-                      style={{ ...styles.link, ...linkStyle }}
-                      href={content?.privacy_policy_url || "#"}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      aria-label="Privacy Policy (opens in new tab)"
-                    >
-                      [
-                      {getTranslatedText(
-                        "privacy_policy_anchor_text",
-                        content?.privacy_policy_anchor_text || "Privacy Policy"
-                      )}
-                      ]
-                    </a>{" "}
-                    and{" "}
-                    <a
-                      style={{ ...styles.link, ...linkStyle }}
-                      href={content?.sub_processors_url || "#"}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      aria-label="Vendors List (opens in new tab)"
-                    >
-                      [
+                    <span id="privacy-policy-text">
                       {getTranslatedText(
-                        "vendors_list_anchor_text",
-                        content?.vendors_list_anchor_text || "Vendors List"
-                      )}
-                      ]
-                    </a>
-                    .
+                        "privacy_policy_prefix_text",
+                        content?.privacy_policy_prefix_text || ""
+                      )}{" "}
+                      <a
+                        id="privacy-policy-link"
+                        style={{ ...styles.link, ...linkStyle }}
+                        href={content?.privacy_policy_url || "#"}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        aria-label="Privacy Policy (opens in new tab)"
+                      >
+                        {getTranslatedText(
+                          "privacy_policy_anchor_text",
+                          content?.privacy_policy_anchor_text ||
+                            "Privacy Policy"
+                        )}
+                      </a>
+                    </span>
                   </p>
                   <h2
+                    id="purpose-section-heading"
                     style={{
                       ...styles.subTitle,
                       ...responsiveStyles.subTitle,
-                      ...headingStyle,
+                      ...componentHeadingStyle,
                     }}
                   >
                     {getTranslatedText(
@@ -876,159 +2224,70 @@ export const RedactoNoticeConsent = ({
                       "Manage What You Share"
                     )}
                   </h2>
-                  <div style={styles.optionsContainer}>
-                    {content?.purposes?.map((purpose) => (
-                      <div key={purpose.uuid}>
-                        <div style={styles.optionItem}>
-                          <div
-                            style={styles.optionLeft}
-                            onClick={() => togglePurposeCollapse(purpose.uuid)}
-                            role="button"
-                            tabIndex={0}
-                            aria-expanded={!collapsedPurposes[purpose.uuid]}
-                            aria-controls={`purpose-${purpose.uuid}`}
-                            onKeyDown={(e) => {
-                              if (e.key === "Enter" || e.key === " ") {
-                                e.preventDefault();
-                                togglePurposeCollapse(purpose.uuid);
-                              }
-                            }}
-                          >
-                            <div
-                              style={{
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: "center",
-                                marginLeft: "5px",
-                              }}
-                            >
-                              <svg
-                                width="7"
-                                height="12"
-                                viewBox="0 0 7 12"
-                                fill="none"
-                                xmlns="http://www.w3.org/2000/svg"
-                                stroke={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"
-                              >
-                                <path d="M1 1L6 6L1 11" />
-                              </svg>
-                            </div>
-                            <div style={styles.optionTextContainer}>
-                              <h2
-                                style={{
-                                  ...styles.optionTitle,
-                                  ...responsiveStyles.optionTitle,
-                                  ...headingStyle,
-                                }}
-                              >
-                                {getTranslatedText(
-                                  `purposes.name`,
-                                  purpose.name,
-                                  purpose.uuid
-                                )}
-                              </h2>
-                              <h3
-                                style={{
-                                  ...styles.optionDescription,
-                                  ...responsiveStyles.optionDescription,
-                                  ...textStyle,
-                                }}
-                              >
-                                {getTranslatedText(
-                                  `purposes.description`,
-                                  purpose.description,
-                                  purpose.uuid
-                                )}
-                              </h3>
-                            </div>
-                          </div>
-                          <input
-                            className="redacto-checkbox-large"
-                            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
-                            )}`}
-                          />
-                        </div>
-                        {!collapsedPurposes[purpose.uuid] &&
-                          purpose.data_elements &&
-                          purpose.data_elements.length > 0 && (
-                            <div
-                              id={`purpose-${purpose.uuid}`}
-                              style={styles.dataElementsContainer}
-                            >
-                              {purpose.data_elements.map((dataElement) => (
-                                <div
-                                  key={dataElement.uuid}
-                                  style={styles.dataElementItem}
-                                >
-                                  <span
-                                    style={{
-                                      ...styles.dataElementText,
-                                      ...responsiveStyles.dataElementText,
-                                      ...textStyle,
-                                    }}
-                                  >
-                                    {getTranslatedText(
-                                      `data_elements.name`,
-                                      dataElement.name,
-                                      dataElement.uuid
-                                    )}
-                                    {dataElement.required && (
-                                      <span
-                                        style={{
-                                          color: "red",
-                                          marginLeft: "4px",
-                                        }}
-                                        aria-label="required"
-                                      >
-                                        *
-                                      </span>
-                                    )}
-                                  </span>
-                                  <input
-                                    className="redacto-checkbox-small"
-                                    type="checkbox"
-                                    checked={
-                                      selectedDataElements[
-                                        `${purpose.uuid}-${dataElement.uuid}`
-                                      ] || false
-                                    }
-                                    onChange={() =>
-                                      handleDataElementCheckboxChange(
-                                        dataElement.uuid,
-                                        purpose.uuid
-                                      )
-                                    }
-                                    aria-label={`Select ${getTranslatedText(
-                                      `data_elements.name`,
-                                      dataElement.name,
-                                      dataElement.uuid
-                                    )}${dataElement.required ? " (required)" : ""}`}
-                                  />
-                                </div>
-                              ))}
-                            </div>
-                          )}
-                      </div>
-                    ))}
-                  </div>
+
+                  {/* Reconsent UI with visual indicators only */}
+                  {categorizedPurposes ? (
+                    <div style={styles.optionsContainer}>
+                      {/* Already Consented Purposes */}
+                      {categorizedPurposes.alreadyConsented.map((purpose) => (
+                        <PurposeItem
+                          key={purpose.uuid}
+                          purpose={purpose}
+                          selectedPurposes={selectedPurposes}
+                          collapsedPurposes={collapsedPurposes}
+                          selectedDataElements={selectedDataElements}
+                          settings={settings}
+                          styles={styles}
+                          responsiveStyles={responsiveStyles}
+                          onPurposeToggle={handlePurposeCheckboxChange}
+                          onPurposeCollapse={togglePurposeCollapse}
+                          onDataElementToggle={handleDataElementCheckboxChange}
+                          getTranslatedText={getTranslatedText}
+                          isAlreadyConsented={true}
+                        />
+                      ))}
+
+                      {/* Need Consent Purposes */}
+                      {categorizedPurposes.needsConsent.map((purpose) => (
+                        <PurposeItem
+                          key={purpose.uuid}
+                          purpose={purpose}
+                          selectedPurposes={selectedPurposes}
+                          collapsedPurposes={collapsedPurposes}
+                          selectedDataElements={selectedDataElements}
+                          settings={settings}
+                          styles={styles}
+                          responsiveStyles={responsiveStyles}
+                          onPurposeToggle={handlePurposeCheckboxChange}
+                          onPurposeCollapse={togglePurposeCollapse}
+                          onDataElementToggle={handleDataElementCheckboxChange}
+                          getTranslatedText={getTranslatedText}
+                          isAlreadyConsented={false}
+                        />
+                      ))}
+                    </div>
+                  ) : (
+                    /* Regular consent UI */
+                    <div style={styles.optionsContainer}>
+                      {content?.purposes?.map((purpose) => (
+                        <PurposeItem
+                          key={purpose.uuid}
+                          purpose={purpose}
+                          selectedPurposes={selectedPurposes}
+                          collapsedPurposes={collapsedPurposes}
+                          selectedDataElements={selectedDataElements}
+                          settings={settings}
+                          styles={styles}
+                          responsiveStyles={responsiveStyles}
+                          onPurposeToggle={handlePurposeCheckboxChange}
+                          onPurposeCollapse={togglePurposeCollapse}
+                          onDataElementToggle={handleDataElementCheckboxChange}
+                          getTranslatedText={getTranslatedText}
+                          isAlreadyConsented={false}
+                        />
+                      ))}
+                    </div>
+                  )}
                 </div>
                 <div
                   style={{