@redacto.io/consent-sdk-js 1.0.0 → 1.1.0

package/dist/redacto.mjs

@@ -186,7 +186,7 @@ function decodeTokenSafely(token) {
 // src/api/sandbox.ts
 var SANDBOX_TOKEN_HEADER = "X-Consent-Token";
 var resolveSandboxAuth = (options) => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f;
   const token = (_a = options.token) == null ? void 0 : _a.trim();
   if (!token) {
     return null;
@@ -194,16 +194,17 @@ var resolveSandboxAuth = (options) => {
   const organisationUuid = (_b = options.organisationUuid) == null ? void 0 : _b.trim();
   const workspaceUuid = (_c = options.workspaceUuid) == null ? void 0 : _c.trim();
   const ucic = (_d = options.sandboxUcic) == null ? void 0 : _d.trim();
-  const subject = (_e = options.sandboxSubject) == null ? void 0 : _e.trim();
+  const email = (_e = options.sandboxEmail) == null ? void 0 : _e.trim();
+  const mobile = (_f = options.sandboxMobile) == null ? void 0 : _f.trim();
   if (!organisationUuid || !workspaceUuid) {
     throw new Error(
       "Sandbox mode requires organisationUuid and workspaceUuid"
     );
   }
-  if (!ucic && !subject) {
+  if (!ucic && !email && !mobile) {
     throw new Error("Sandbox mode requires a UCIC, email, or mobile");
   }
-  return { token, ucic, subject: subject != null ? subject : "", organisationUuid, workspaceUuid };
+  return { token, ucic, email, mobile, organisationUuid, workspaceUuid };
 };
 var resolveRequestAuth = (accessToken, options) => {
   const sandbox = resolveSandboxAuth(options);
@@ -235,10 +236,17 @@ var buildAuthHeaders = (accessToken, sandbox) => {
   return { Authorization: `Bearer ${accessToken}` };
 };
 var sandboxBodyIdentity = (sandbox) => {
+  const payload = {};
   if (sandbox.ucic) {
-    return { org_user_id: sandbox.ucic };
+    payload.org_user_id = sandbox.ucic;
   }
-  return sandbox.subject.includes("@") ? { primary_email: sandbox.subject } : { primary_mobile: sandbox.subject };
+  if (sandbox.email) {
+    payload.primary_email = sandbox.email;
+  }
+  if (sandbox.mobile) {
+    payload.primary_mobile = sandbox.mobile;
+  }
+  return payload;
 };
 var sandboxQueryIdentity = (sandbox) => sandboxBodyIdentity(sandbox);
 
@@ -324,7 +332,7 @@ var fetchConsentContent = async ({
     sandboxParams
   );
   const apiBaseUrl = baseUrl || BASE_URL;
-  const cacheIdentity = sandbox ? `sandbox:${sandbox.organisationUuid}:${sandbox.workspaceUuid}:${sandbox.ucic || sandbox.subject}` : accessToken;
+  const cacheIdentity = sandbox ? `sandbox:${sandbox.organisationUuid}:${sandbox.workspaceUuid}:${sandbox.ucic || sandbox.email || sandbox.mobile}` : accessToken;
   const cacheKey = `${cacheIdentity}-${noticeId}-${validate_against}-${language}-${specific_uuid || ""}-${include_fully_consented_data}`;
   if (validate_against === "all" && !specific_uuid) {
     const cached = getCachedData(cacheKey);
@@ -336,7 +344,7 @@ var fetchConsentContent = async ({
   if (include_fully_consented_data) url.searchParams.append("include_fully_consented_data", "true");
   if (sandbox) {
     for (const [key, value] of Object.entries(sandboxQueryIdentity(sandbox))) {
-      url.searchParams.append(key, value);
+      if (value) url.searchParams.append(key, value);
     }
   }
   const response = await fetch(url.toString(), {
@@ -572,7 +580,7 @@ var fetchTTSAudioUrls = async ({
   );
   if (sandbox) {
     for (const [key, value] of Object.entries(sandboxQueryIdentity(sandbox))) {
-      url.searchParams.append(key, value);
+      if (value) url.searchParams.append(key, value);
     }
   }
   const response = await fetch(url.toString(), {
@@ -1287,6 +1295,32 @@ var styles = {
     margin: 0,
     boxSizing: "border-box"
   },
+  /**
+   * The main notice footer. Wide: one row with decline pushed left and the
+   * accepts grouped right. Narrow: a full-width stack. Review mode keeps
+   * `bottomSection` — it collapses to a single button.
+   */
+  actionButtonRow: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: "12px",
+    paddingTop: "15px",
+    borderTop: "none",
+    backgroundColor: "#ffffff",
+    margin: 0,
+    boxSizing: "border-box"
+  },
+  actionButtonStack: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px",
+    paddingTop: "15px",
+    borderTop: "none",
+    backgroundColor: "#ffffff",
+    margin: 0,
+    boxSizing: "border-box"
+  },
   button: {
     width: "100%",
     borderRadius: "8px",
@@ -1373,6 +1407,51 @@ var styles = {
   }
 };
 
+// src/constants.ts
+var DEFAULT_LOGO_POSITION = "left";
+var DEFAULT_ACCEPT_ALL_BUTTON_TEXT = "Accept All";
+var DEFAULT_ACCEPT_SELECTED_BUTTON_TEXT = "Accept Selected";
+var DEFAULT_DECLINE_BUTTON_TEXT = "Decline";
+var ACCEPT_ALL_BUTTON_ID = "accept-all-button-text";
+var ACCEPT_SELECTED_BUTTON_ID = "confirm-button-text";
+var DECLINE_BUTTON_ID = "decline-button-text";
+var SUBMITTING_BUTTON_TEXT = "Submitting...";
+var LOGO_POSITION_JUSTIFY = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end"
+};
+var REQUIRED_MARKER_GLYPH = "*";
+var REQUIRED_MARKER_ARIA_LABEL = "required";
+var REQUIRED_MARKER_COLOR = "red";
+var REQUIRED_MARKER_GAP = "4px";
+var REQUIRED_MARKER_STYLE = {
+  color: REQUIRED_MARKER_COLOR,
+  marginLeft: REQUIRED_MARKER_GAP
+};
+var DPO_AUDIO_ELEMENT_MAP = [
+  { audioKey: "grievance_text_audio_url", elementId: "dpo-grievance-text" },
+  { audioKey: "grievance_anchor_text_audio_url", elementId: "dpo-grievance-link" },
+  { audioKey: "grievance_email_connector_text_audio_url", elementId: "dpo-grievance-email-connector" },
+  { audioKey: "grievance_email_audio_url", elementId: "dpo-grievance-email" },
+  { audioKey: "dp_board_text_audio_url", elementId: "dpo-dp-board-text" },
+  { audioKey: "dp_board_anchor_text_audio_url", elementId: "dpo-dp-board-link" },
+  { audioKey: "dpo_text_audio_url", elementId: "dpo-dpo-text" },
+  { audioKey: "dpo_anchor_text_audio_url", elementId: "dpo-dpo-link" }
+];
+
+// src/core/required-marker.ts
+function createRequiredMarker(label = REQUIRED_MARKER_ARIA_LABEL) {
+  return el(
+    "span",
+    { style: REQUIRED_MARKER_STYLE, "aria-label": label },
+    REQUIRED_MARKER_GLYPH
+  );
+}
+function hasRequiredDataElement(purpose) {
+  return purpose.data_elements.some((element) => element.required);
+}
+
 // src/modal/purposes.ts
 function renderModalPurposes(purposes, options) {
   var _a, _b;
@@ -1438,6 +1517,9 @@ function renderModalPurposes(purposes, options) {
       }
     });
     titleEl.textContent = getTranslatedText("purposes.name", purpose.name, purpose.uuid);
+    if (hasRequiredDataElement(purpose)) {
+      titleEl.appendChild(createRequiredMarker());
+    }
     titleElements.set(purpose.uuid, titleEl);
     const descEl = el("h3", {
       id: `purpose-description-${purpose.uuid}`,
@@ -1505,9 +1587,7 @@ function renderModalPurposes(purposes, options) {
         labelSpan.textContent = getTranslatedText("data_elements.name", dataElement.name, dataElement.uuid);
         dataElementLabels.set(combinedId, labelSpan);
         if (dataElement.required) {
-          const asterisk = el("span", { style: { color: "red", marginLeft: "4px" }, "aria-label": "required" });
-          asterisk.textContent = "*";
-          labelSpan.appendChild(asterisk);
+          labelSpan.appendChild(createRequiredMarker());
         }
         let deRightElement;
         if (!isAlreadyConsented) {
@@ -1876,24 +1956,6 @@ var updateConsentState = (updates) => {
   }
 };
 
-// src/constants.ts
-var DEFAULT_LOGO_POSITION = "left";
-var LOGO_POSITION_JUSTIFY = {
-  left: "flex-start",
-  center: "center",
-  right: "flex-end"
-};
-var DPO_AUDIO_ELEMENT_MAP = [
-  { audioKey: "grievance_text_audio_url", elementId: "dpo-grievance-text" },
-  { audioKey: "grievance_anchor_text_audio_url", elementId: "dpo-grievance-link" },
-  { audioKey: "grievance_email_connector_text_audio_url", elementId: "dpo-grievance-email-connector" },
-  { audioKey: "grievance_email_audio_url", elementId: "dpo-grievance-email" },
-  { audioKey: "dp_board_text_audio_url", elementId: "dpo-dp-board-text" },
-  { audioKey: "dp_board_anchor_text_audio_url", elementId: "dpo-dp-board-link" },
-  { audioKey: "dpo_text_audio_url", elementId: "dpo-dpo-text" },
-  { audioKey: "dpo_anchor_text_audio_url", elementId: "dpo-dpo-link" }
-];
-
 // src/modal/tts.ts
 var TTSManager = class {
   /**
@@ -1947,7 +2009,8 @@ var TTSManager = class {
         signal: this.abortController.signal,
         token: params.token,
         sandboxUcic: params.sandboxUcic,
-        sandboxSubject: params.sandboxSubject,
+        sandboxEmail: params.sandboxEmail,
+        sandboxMobile: params.sandboxMobile,
         organisationUuid: params.organisationUuid,
         workspaceUuid: params.workspaceUuid
       });
@@ -2003,8 +2066,9 @@ var TTSManager = class {
         push(audioUrl, mapping.elementId);
       }
     }
-    push(urls.confirm_button_text_audio_url, "confirm-button-text");
-    push(urls.decline_button_text_audio_url, "decline-button-text");
+    push(urls.accept_all_button_text_audio_url, ACCEPT_ALL_BUTTON_ID);
+    push(urls.confirm_button_text_audio_url, ACCEPT_SELECTED_BUTTON_ID);
+    push(urls.decline_button_text_audio_url, DECLINE_BUTTON_ID);
     this.audioSequence = audioSeq;
     this.elementIdSequence = elementSeq;
   }
@@ -2895,14 +2959,17 @@ function renderVerificationScreen(options) {
 
 // src/modal/colors.ts
 function resolveColors(settings, activeConfig) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
   const primaryColor = (activeConfig == null ? void 0 : activeConfig.primary_color) || "#4f87ff";
   const secondaryColor = (activeConfig == null ? void 0 : activeConfig.secondary_color) || "#4f87ff";
   return {
     acceptBg: ((_b = (_a = settings == null ? void 0 : settings.button) == null ? void 0 : _a.accept) == null ? void 0 : _b.backgroundColor) || primaryColor,
     acceptText: ((_d = (_c = settings == null ? void 0 : settings.button) == null ? void 0 : _c.accept) == null ? void 0 : _d.textColor) || "#ffffff",
-    declineBg: ((_f = (_e = settings == null ? void 0 : settings.button) == null ? void 0 : _e.decline) == null ? void 0 : _f.backgroundColor) || "#ffffff",
-    declineText: ((_h = (_g = settings == null ? void 0 : settings.button) == null ? void 0 : _g.decline) == null ? void 0 : _h.textColor) || "#000000",
+    acceptShortcutBg: ((_f = (_e = settings == null ? void 0 : settings.button) == null ? void 0 : _e.acceptAll) == null ? void 0 : _f.backgroundColor) || "#ffffff",
+    acceptShortcutText: ((_h = (_g = settings == null ? void 0 : settings.button) == null ? void 0 : _g.acceptAll) == null ? void 0 : _h.textColor) || primaryColor,
+    acceptShortcutBorder: primaryColor,
+    declineBg: ((_j = (_i = settings == null ? void 0 : settings.button) == null ? void 0 : _i.decline) == null ? void 0 : _j.backgroundColor) || "#ffffff",
+    declineText: ((_l = (_k = settings == null ? void 0 : settings.button) == null ? void 0 : _k.decline) == null ? void 0 : _l.textColor) || "#000000",
     declineBorder: (settings == null ? void 0 : settings.borderColor) || "#d0d5dd",
     link: (settings == null ? void 0 : settings.link) || secondaryColor,
     heading: (settings == null ? void 0 : settings.headingColor) || "#323B4B",
@@ -2914,6 +2981,23 @@ function resolveColors(settings, activeConfig) {
   };
 }
 
+// src/modal/consentSelection.ts
+var dataElementKey = (purposeUuid, elementUuid) => `${purposeUuid}-${elementUuid}`;
+var buildSelectionForMode = (purposes, mode, current) => {
+  if (mode === "selected") {
+    return current;
+  }
+  const selectedPurposes = {};
+  const selectedDataElements = {};
+  purposes.forEach((purpose) => {
+    selectedPurposes[purpose.uuid] = true;
+    purpose.data_elements.forEach((element) => {
+      selectedDataElements[dataElementKey(purpose.uuid, element.uuid)] = element.enabled;
+    });
+  });
+  return { selectedPurposes, selectedDataElements };
+};
+
 // src/modal/layout.ts
 function resolveLogoPosition(raw) {
   return raw === "center" || raw === "right" ? raw : DEFAULT_LOGO_POSITION;
@@ -2946,6 +3030,7 @@ var ModalController = class {
     this.visibilityChangeHandler = null;
     // DOM refs for targeted updates
     this.acceptBtn = null;
+    this.acceptAllBtn = null;
     this.declineBtn = null;
     this.middleSection = null;
     this.errorEl = null;
@@ -3028,18 +3113,24 @@ var ModalController = class {
   // ─── Private ───
   /**
    * Sandbox auth options to forward to every API call. When `token` is set the
-   * API layer sends the single `X-Consent-Token` header, injects the subject
-   * into each request's payload, and reads org/workspace from these fields
-   * instead of decoding the JWT. Empty in the normal JWT flow.
+   * API layer sends the single `X-Consent-Token` header, carries every supplied
+   * identifier in each request's payload, and reads org/workspace from these
+   * fields instead of decoding the JWT. Empty in the normal JWT flow.
    */
   sandboxParams() {
+    var _a;
+    const legacySubject = (_a = this.options.sandboxSubject) == null ? void 0 : _a.trim();
+    const legacyEmail = (legacySubject == null ? void 0 : legacySubject.includes("@")) ? legacySubject : void 0;
+    const legacyMobile = legacySubject && !legacySubject.includes("@") ? legacySubject : void 0;
     return {
       token: this.options.token,
-      // The static token carries no identity; read the acting principal from the
-      // optional ucic/email/mobile. UCIC takes precedence server-side.
-      // sandboxUcic / sandboxSubject stay as fallbacks.
+      // The static token carries no identity; carry every supplied identifier
+      // (ucic/email/mobile) so the server can pick the principal by precedence
+      // (UCIC > email > mobile) and keep the rest as the sandbox contact.
+      // sandboxUcic / sandboxEmail / sandboxMobile stay as fallbacks.
       sandboxUcic: this.options.ucic || this.options.sandboxUcic,
-      sandboxSubject: this.options.email || this.options.mobile || this.options.sandboxSubject,
+      sandboxEmail: this.options.email || this.options.sandboxEmail || legacyEmail,
+      sandboxMobile: this.options.mobile || this.options.sandboxMobile || legacyMobile,
       organisationUuid: this.options.organisationUuid,
       workspaceUuid: this.options.workspaceUuid
     };
@@ -3640,24 +3731,57 @@ var ModalController = class {
         display: "none"
       }
     });
-    const acceptBtnText = state.isFullyConsentedReviewMode ? this.options.reviewModeButtonText || "Continue" : this.getTranslatedText("confirm_button_text", activeConfig.confirm_button_text);
+    const acceptBtnText = state.isFullyConsentedReviewMode ? this.options.reviewModeButtonText || "Continue" : this.getTranslatedText(
+      "confirm_button_text",
+      activeConfig.confirm_button_text || DEFAULT_ACCEPT_SELECTED_BUTTON_TEXT
+    );
+    const gridButtonBox = {
+      fontSize: isMobile ? "14px" : "16px",
+      padding: state.isFullyConsentedReviewMode ? isMobile ? "10px 20px" : "9px 45px" : "9px 20px",
+      width: state.isFullyConsentedReviewMode || isMobile ? "100%" : "auto",
+      whiteSpace: "normal",
+      wordBreak: "break-word"
+    };
     const acceptStyle = {
       ...styles.button,
-      ...styles.acceptButton,
-      backgroundColor: colors.acceptBg,
-      color: colors.acceptText,
+      ...state.isFullyConsentedReviewMode ? { ...styles.acceptButton, backgroundColor: colors.acceptBg, color: colors.acceptText } : {
+        ...styles.cancelButton,
+        backgroundColor: "#ffffff",
+        color: colors.acceptShortcutText,
+        borderColor: colors.acceptShortcutBorder
+      },
       borderRadius: colors.borderRadius,
-      fontSize: isMobile ? "14px" : "16px",
-      padding: isMobile ? "10px 20px" : "9px 45px"
+      ...gridButtonBox
     };
     this.acceptBtn = el("button", {
-      id: "confirm-button-text",
+      id: ACCEPT_SELECTED_BUTTON_ID,
       style: acceptStyle,
       type: "button",
-      onClick: () => this.handleAccept()
+      onClick: () => this.handleAccept("selected")
     });
     this.acceptBtn.textContent = acceptBtnText;
-    const declineBtnText = this.getTranslatedText("decline_button_text", activeConfig.decline_button_text);
+    const shortcutStyle = {
+      ...styles.button,
+      ...styles.acceptButton,
+      backgroundColor: colors.acceptBg,
+      color: colors.acceptText,
+      borderRadius: colors.borderRadius,
+      ...gridButtonBox
+    };
+    this.acceptAllBtn = el("button", {
+      id: ACCEPT_ALL_BUTTON_ID,
+      style: shortcutStyle,
+      type: "button",
+      onClick: () => this.handleAccept("all")
+    });
+    this.acceptAllBtn.textContent = this.getTranslatedText(
+      "accept_all_button_text",
+      activeConfig.accept_all_button_text || DEFAULT_ACCEPT_ALL_BUTTON_TEXT
+    );
+    const declineBtnText = this.getTranslatedText(
+      "decline_button_text",
+      activeConfig.decline_button_text || DEFAULT_DECLINE_BUTTON_TEXT
+    );
     const declineStyle = {
       ...styles.button,
       ...styles.cancelButton,
@@ -3665,11 +3789,13 @@ var ModalController = class {
       color: colors.declineText,
       borderColor: colors.declineBorder,
       borderRadius: colors.borderRadius,
-      fontSize: isMobile ? "14px" : "16px",
-      padding: isMobile ? "10px 20px" : "9px 45px"
+      ...gridButtonBox,
+      // Pushes everything after decline to the right edge, which is the whole
+      // of the wide layout. Inert in the stack and in review mode.
+      marginRight: state.isFullyConsentedReviewMode || isMobile ? "0" : "auto"
     };
     this.declineBtn = el("button", {
-      id: "decline-button-text",
+      id: DECLINE_BUTTON_ID,
       style: declineStyle,
       type: "button",
       onClick: () => this.handleDecline()
@@ -3677,12 +3803,19 @@ var ModalController = class {
     if (!state.isFullyConsentedReviewMode) {
       this.declineBtn.textContent = declineBtnText;
     }
-    const bottomSection = el("div", { style: styles.bottomSection });
-    if (!state.isFullyConsentedReviewMode) {
+    const bottomSection = el("div", {
+      style: state.isFullyConsentedReviewMode ? styles.bottomSection : isMobile ? styles.actionButtonStack : styles.actionButtonRow
+    });
+    if (state.isFullyConsentedReviewMode) {
+      bottomSection.appendChild(this.acceptBtn);
+    } else if (isMobile) {
+      bottomSection.appendChild(this.acceptAllBtn);
       bottomSection.appendChild(this.acceptBtn);
       bottomSection.appendChild(this.declineBtn);
     } else {
+      bottomSection.appendChild(this.declineBtn);
       bottomSection.appendChild(this.acceptBtn);
+      bottomSection.appendChild(this.acceptAllBtn);
     }
     const contentWrapper = el(
       "div",
@@ -3838,7 +3971,12 @@ var ModalController = class {
       selectedPurposes: { ...state.selectedPurposes, [purposeUuid]: shouldCheckPurpose }
     });
   }
-  async handleAccept() {
+  /**
+   * Shared by all three accept buttons. The mode only decides which
+   * purposes/data elements are submitted — everything downstream, including
+   * the host's `onAccept` callback, is identical.
+   */
+  async handleAccept(mode = "selected") {
     var _a, _b, _c;
     const state = this.store.getState();
     if (state.isSubmitting) return;
@@ -3857,6 +3995,16 @@ var ModalController = class {
     if (!content) return;
     this.abortController = new AbortController();
     this.store.setState({ isSubmitting: true, isSubmittingAccept: true, errorMessage: null });
+    const selection = buildSelectionForMode(content.purposes, mode, {
+      selectedPurposes: state.selectedPurposes,
+      selectedDataElements: state.selectedDataElements
+    });
+    if (mode !== "selected") {
+      this.store.setState({
+        selectedPurposes: selection.selectedPurposes,
+        selectedDataElements: selection.selectedDataElements
+      });
+    }
     try {
       const purposes = content.purposes.map((purpose) => {
         const dataElements = purpose.data_elements.filter((de) => de.enabled).map((de) => ({
@@ -3864,13 +4012,13 @@ var ModalController = class {
           name: de.name,
           enabled: de.enabled,
           required: de.required,
-          selected: state.selectedDataElements[`${purpose.uuid}-${de.uuid}`] || false
+          selected: selection.selectedDataElements[`${purpose.uuid}-${de.uuid}`] || false
         }));
         return {
           uuid: purpose.uuid,
           name: purpose.name,
           description: purpose.description,
-          selected: state.selectedPurposes[purpose.uuid] || false,
+          selected: selection.selectedPurposes[purpose.uuid] || false,
           data_elements: dataElements
         };
       });
@@ -3932,11 +4080,16 @@ var ModalController = class {
   }
   updateAcceptButtonState(state) {
     if (!this.acceptBtn || state.isFullyConsentedReviewMode) return;
+    const submitting = state.isSubmittingAccept || state.isSubmittingDecline;
     const allRequiredChecked = this.areAllRequiredChecked(state);
-    const disabled = !allRequiredChecked || state.isSubmittingAccept || state.isSubmittingDecline;
-    this.acceptBtn.disabled = disabled;
-    this.acceptBtn.style.opacity = disabled ? "0.5" : "1";
-    this.acceptBtn.style.cursor = disabled ? "not-allowed" : "pointer";
+    const setDisabled = (btn, disabled) => {
+      if (!btn) return;
+      btn.disabled = disabled;
+      btn.style.opacity = disabled ? "0.5" : "1";
+      btn.style.cursor = disabled ? "not-allowed" : "pointer";
+    };
+    setDisabled(this.acceptBtn, !allRequiredChecked || submitting);
+    setDisabled(this.acceptAllBtn, submitting);
   }
   updateCollapseState(state) {
     const updateRefs = (refs) => {
@@ -4309,25 +4462,34 @@ var ModalController = class {
   }
   updateButtonStates(state) {
     var _a;
-    if (this.acceptBtn) {
-      if (state.isSubmittingAccept) {
-        this.acceptBtn.textContent = "Submitting...";
-        this.acceptBtn.disabled = true;
-        this.acceptBtn.style.opacity = "0.7";
-        this.acceptBtn.style.cursor = "not-allowed";
-      } else {
-        const content = (_a = state.content) == null ? void 0 : _a.detail.active_config;
-        this.acceptBtn.textContent = state.isFullyConsentedReviewMode ? this.options.reviewModeButtonText || "Continue" : this.getTranslatedText("confirm_button_text", (content == null ? void 0 : content.confirm_button_text) || "Accept");
-        this.acceptBtn.disabled = false;
-        this.acceptBtn.style.opacity = "1";
-        this.acceptBtn.style.cursor = "pointer";
-      }
-    }
+    const content = (_a = state.content) == null ? void 0 : _a.detail.active_config;
+    const applySubmittingState = (btn, idleLabel) => {
+      if (!btn) return;
+      btn.textContent = state.isSubmittingAccept ? SUBMITTING_BUTTON_TEXT : idleLabel;
+      btn.disabled = state.isSubmittingAccept;
+      btn.style.opacity = state.isSubmittingAccept ? "0.7" : "1";
+      btn.style.cursor = state.isSubmittingAccept ? "not-allowed" : "pointer";
+    };
+    applySubmittingState(
+      this.acceptBtn,
+      state.isFullyConsentedReviewMode ? this.options.reviewModeButtonText || "Continue" : this.getTranslatedText(
+        "confirm_button_text",
+        (content == null ? void 0 : content.confirm_button_text) || DEFAULT_ACCEPT_SELECTED_BUTTON_TEXT
+      )
+    );
+    applySubmittingState(
+      this.acceptAllBtn,
+      this.getTranslatedText(
+        "accept_all_button_text",
+        (content == null ? void 0 : content.accept_all_button_text) || DEFAULT_ACCEPT_ALL_BUTTON_TEXT
+      )
+    );
     if (this.declineBtn) {
       this.declineBtn.disabled = state.isSubmitting;
       this.declineBtn.style.opacity = state.isSubmitting ? "0.7" : "1";
       this.declineBtn.style.cursor = state.isSubmitting ? "not-allowed" : "pointer";
     }
+    this.updateAcceptButtonState(state);
   }
 };
 
@@ -4528,6 +4690,9 @@ function renderInlinePurposes(purposes, options) {
       }
     });
     titleEl.textContent = getTranslatedText("purposes.name", purpose.name, purpose.uuid);
+    if (hasRequiredDataElement(purpose)) {
+      titleEl.appendChild(createRequiredMarker());
+    }
     titleElements.set(purpose.uuid, titleEl);
     const descEl = el("h3", {
       style: {
@@ -4580,12 +4745,7 @@ function renderInlinePurposes(purposes, options) {
         labelSpan.textContent = getTranslatedText("data_elements.name", dataElement.name, dataElement.uuid);
         dataElementLabels.set(combinedId, labelSpan);
         if (dataElement.required) {
-          const asterisk = el("span", {
-            style: { color: "red", marginLeft: "4px" },
-            "aria-label": "required"
-          });
-          asterisk.textContent = "*";
-          labelSpan.appendChild(asterisk);
+          labelSpan.appendChild(createRequiredMarker());
         }
         const deCheckbox = el("input", {
           type: "checkbox",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redacto.io/consent-sdk-js",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "main": "dist/redacto.js",
   "module": "dist/redacto.mjs",
   "types": "dist/redacto.d.ts",