@redacto.io/consent-sdk-react 10.2.2-beta.2 → 10.2.2-beta.3

package/dist/index.js

@@ -792,6 +792,15 @@ var CONFIRM_DIALOG_COPY = {
   confirm: "Yes",
   cancel: "No"
 };
+var OTP_GATE_LENGTH = 6;
+var OTP_GATE_COPY = {
+  title: "Enter the verification code",
+  description: "Ask the customer to read out the code they were sent. Your selections are locked until it is confirmed.",
+  submit: "Confirm code",
+  verifying: "Verifying...",
+  failed: "Could not verify that code."
+};
+var PRODUCT_POLICIES_LABEL = "Privacy policies:";
 
 // src/RedactoNoticeConsent/styles.ts
 var styles = {
@@ -1186,6 +1195,65 @@ var styles = {
     textAlign: "center",
     fontFamily: "inherit"
   },
+  otpGateLocked: {
+    pointerEvents: "none",
+    opacity: 0.55
+  },
+  otpGatePanel: {
+    margin: "8px 0 4px",
+    padding: "12px",
+    border: "1px solid #e5e7eb",
+    borderRadius: "8px",
+    background: "#f9fafb"
+  },
+  otpGateTitle: {
+    margin: 0,
+    fontSize: "13px",
+    fontWeight: 600,
+    color: "#111827"
+  },
+  otpGateDescription: {
+    margin: "4px 0 10px",
+    fontSize: "12px",
+    lineHeight: 1.4,
+    color: "#6b7280"
+  },
+  otpGateDigits: {
+    display: "flex",
+    gap: "8px",
+    justifyContent: "space-between"
+  },
+  otpGateDigit: {
+    width: "100%",
+    minWidth: 0,
+    boxSizing: "border-box",
+    padding: "10px 0",
+    fontSize: "18px",
+    fontWeight: 600,
+    textAlign: "center",
+    border: "1px solid #d1d5db",
+    borderRadius: "8px",
+    background: "#ffffff"
+  },
+  otpGateInput: {
+    width: "100%",
+    boxSizing: "border-box",
+    padding: "8px 10px",
+    fontSize: "16px",
+    letterSpacing: "0.3em",
+    textAlign: "center",
+    border: "1px solid #d1d5db",
+    borderRadius: "6px"
+  },
+  otpGateError: {
+    margin: "8px 0 0",
+    fontSize: "12px",
+    color: "#dc2626"
+  },
+  otpGateButton: {
+    width: "100%",
+    marginTop: "10px"
+  },
   acceptButton: {
     backgroundColor: "#4f87ff",
     border: "none",
@@ -3759,6 +3827,7 @@ var RedactoNoticeConsent = ({
   onAccept,
   onDecline,
   onError,
+  otpGate,
   settings,
   applicationId,
   validateAgainst = "all",
@@ -3770,7 +3839,7 @@ var RedactoNoticeConsent = ({
   reviewModeButtonText = "Continue",
   defaultOpenProducts
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B;
   const sandboxParams = (0, import_react5.useMemo)(
     () => ({
       token,
@@ -3864,6 +3933,19 @@ var RedactoNoticeConsent = ({
   const [selfDeclaredAdult, setSelfDeclaredAdult] = (0, import_react5.useState)(false);
   const [showGuardianForm, setShowGuardianForm] = (0, import_react5.useState)(false);
   const [isSubmittingGuardian, setIsSubmittingGuardian] = (0, import_react5.useState)(false);
+  const [otpPendingMode, setOtpPendingMode] = (0, import_react5.useState)(null);
+  const otpVerifiedRef = (0, import_react5.useRef)(false);
+  const otpTokenAtVerifyRef = (0, import_react5.useRef)(void 0);
+  const [otpAcceptAfterToken, setOtpAcceptAfterToken] = (0, import_react5.useState)(null);
+  const [otpCode, setOtpCode] = (0, import_react5.useState)("");
+  const [otpError, setOtpError] = (0, import_react5.useState)(null);
+  const [otpBusy, setOtpBusy] = (0, import_react5.useState)(false);
+  const otpLocked = otpPendingMode !== null;
+  const focusOtpDigit = (index) => {
+    var _a2;
+    if (index < 0 || index >= OTP_GATE_LENGTH) return;
+    (_a2 = document.getElementById(`notice-otp-digit-${index}`)) == null ? void 0 : _a2.focus();
+  };
   const [guardianFormData, setGuardianFormData] = (0, import_react5.useState)({
     guardianName: "",
     guardianContact: "",
@@ -4691,6 +4773,11 @@ var RedactoNoticeConsent = ({
   };
   const handleAccept = async (mode = "selected") => {
     const submitController = new AbortController();
+    if ((otpGate == null ? void 0 : otpGate.required) && !otpVerifiedRef.current) {
+      setOtpPendingMode(mode);
+      setOtpError(null);
+      return;
+    }
     try {
       if (isMinorFlow && !verificationReference) {
         setErrorMessage(
@@ -5614,6 +5701,58 @@ var RedactoNoticeConsent = ({
       (content == null ? void 0 : content.decline_button_text) || DEFAULT_DECLINE_BUTTON_TEXT
     )
   };
+  const handleOtpConfirm = async () => {
+    var _a2;
+    if (!otpGate || otpCode.length !== OTP_GATE_LENGTH) {
+      return;
+    }
+    setOtpBusy(true);
+    setOtpError(null);
+    const result = await otpGate.onVerify(otpCode);
+    if (!result.ok) {
+      setOtpError((_a2 = result.message) != null ? _a2 : OTP_GATE_COPY.failed);
+      setOtpCode("");
+      setOtpBusy(false);
+      return;
+    }
+    const mode = otpPendingMode != null ? otpPendingMode : "selected";
+    otpVerifiedRef.current = true;
+    setOtpPendingMode(null);
+    setOtpBusy(false);
+    otpTokenAtVerifyRef.current = accessToken;
+    setOtpAcceptAfterToken(mode);
+  };
+  (0, import_react5.useEffect)(() => {
+    if (!otpAcceptAfterToken) {
+      return;
+    }
+    if (accessToken === otpTokenAtVerifyRef.current) {
+      return;
+    }
+    const mode = otpAcceptAfterToken;
+    setOtpAcceptAfterToken(null);
+    void handleAccept(mode);
+  }, [accessToken, otpAcceptAfterToken]);
+  const productPolicyLinks = (0, import_react5.useMemo)(() => {
+    var _a2;
+    const policies = content == null ? void 0 : content.product_privacy_policies;
+    if (!policies) {
+      return [];
+    }
+    return ((_a2 = content == null ? void 0 : content.products) != null ? _a2 : []).filter((product) => Boolean(policies[product.uuid])).map((product) => ({
+      uuid: product.uuid,
+      name: product.name,
+      url: policies[product.uuid]
+    }));
+  }, [content]);
+  const showNoticePolicyLink = (0, import_react5.useMemo)(() => {
+    var _a2;
+    const products = (_a2 = content == null ? void 0 : content.products) != null ? _a2 : [];
+    if (productPolicyLinks.length === 0 || products.length === 0) {
+      return true;
+    }
+    return productPolicyLinks.length < products.length;
+  }, [content, productPolicyLinks]);
   const handleAcceptAll = () => handleAccept("all");
   const handleAcceptSelected = () => handleAccept("selected");
   const linkStyle = {
@@ -6224,8 +6363,8 @@ var RedactoNoticeConsent = ({
                         },
                         `privacy-notice-text-${selectedLanguage}`
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("br", {}),
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                      showNoticePolicyLink && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("br", {}),
+                      showNoticePolicyLink && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                         "span",
                         {
                           id: "privacy-policy-text",
@@ -6274,10 +6413,33 @@ var RedactoNoticeConsent = ({
                   },
                   `purpose-section-heading-${selectedLanguage}`
                 ),
-                categorizedPurposes && !isMultiProduct(content == null ? void 0 : content.products) ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styles.optionsContainer, children: soleProductSection(
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-                    categorizedPurposes.alreadyConsented.map(
-                      (purpose) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: otpLocked ? styles.otpGateLocked : void 0, children: [
+                  categorizedPurposes && !isMultiProduct(content == null ? void 0 : content.products) ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styles.optionsContainer, children: soleProductSection(
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+                      categorizedPurposes.alreadyConsented.map(
+                        (purpose) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                          PurposeItem,
+                          {
+                            purpose,
+                            selectedPurposes,
+                            collapsedPurposes,
+                            selectedDataElements,
+                            recordedAnswers,
+                            settings,
+                            styles,
+                            responsiveStyles,
+                            onPurposeToggle: handlePurposeCheckboxChange,
+                            onPurposeCollapse: togglePurposeCollapse,
+                            onDataElementToggle: handleDataElementCheckboxChange,
+                            getTranslatedText,
+                            isAlreadyConsented: true,
+                            selectedLanguage,
+                            initialDataElementSelections
+                          },
+                          `${purpose.uuid}-${selectedLanguage}`
+                        )
+                      ),
+                      categorizedPurposes.needsConsent.map((purpose) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                         PurposeItem,
                         {
                           purpose,
@@ -6292,246 +6454,247 @@ var RedactoNoticeConsent = ({
                           onPurposeCollapse: togglePurposeCollapse,
                           onDataElementToggle: handleDataElementCheckboxChange,
                           getTranslatedText,
-                          isAlreadyConsented: true,
-                          selectedLanguage,
-                          initialDataElementSelections
+                          isAlreadyConsented: false,
+                          selectedLanguage
                         },
                         `${purpose.uuid}-${selectedLanguage}`
-                      )
-                    ),
-                    categorizedPurposes.needsConsent.map((purpose) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                      PurposeItem,
-                      {
-                        purpose,
-                        selectedPurposes,
-                        collapsedPurposes,
-                        selectedDataElements,
-                        recordedAnswers,
-                        settings,
-                        styles,
-                        responsiveStyles,
-                        onPurposeToggle: handlePurposeCheckboxChange,
-                        onPurposeCollapse: togglePurposeCollapse,
-                        onDataElementToggle: handleDataElementCheckboxChange,
-                        getTranslatedText,
-                        isAlreadyConsented: false,
-                        selectedLanguage
-                      },
-                      `${purpose.uuid}-${selectedLanguage}`
-                    ))
-                  ] })
-                ) }) : (
-                  /* Regular consent UI */
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styles.optionsContainer, children: isMultiProduct(content == null ? void 0 : content.products) ? productGroups.map((group) => {
-                    var _a2;
-                    const boxPurposes = productBoxPurposes(
-                      group.purposes
-                    );
-                    const selectedInGroup = boxPurposes.filter(
-                      (purpose) => selectedPurposes[productPurposeKey(
-                        group.product.uuid,
-                        purpose.uuid
-                      )]
-                    ).length;
-                    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                        ProductSectionHeader,
-                        {
-                          product: group.product,
-                          isRequired: productIsRequiredFor(
-                            group.product.uuid
-                          ),
-                          purposeCount: boxPurposes.length,
-                          requiredOnly: boxPurposes.length < group.purposes.length,
-                          allSelected: selectedInGroup === boxPurposes.length,
-                          someSelected: selectedInGroup > 0,
-                          collapsed: collapsedProducts[group.product.uuid] || false,
-                          locked: (_a2 = consentedProducts[group.product.uuid]) != null ? _a2 : false,
-                          settings,
-                          styles,
-                          responsiveStyles,
-                          onToggleCollapse: toggleProductCollapse,
-                          onToggleSelect: handleProductCheckboxChange,
-                          getTranslatedText
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                        "div",
-                        {
-                          id: `product-${group.product.uuid}`,
-                          style: styles.sectionBody,
-                          hidden: collapsedProducts[group.product.uuid] || false,
-                          children: group.purposes.map((purpose) => {
-                            var _a3;
-                            return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                              PurposeItem,
-                              {
-                                purpose,
-                                productUuid: group.product.uuid,
-                                selectedPurposes,
-                                collapsedPurposes,
-                                selectedDataElements,
-                                recordedAnswers,
-                                settings,
-                                styles,
-                                responsiveStyles,
-                                onPurposeToggle: handlePurposeCheckboxChange,
-                                onPurposeCollapse: togglePurposeCollapse,
-                                onDataElementToggle: handleDataElementCheckboxChange,
-                                getTranslatedText,
-                                isAlreadyConsented: (_a3 = consentedPurposes[productPurposeKey(
-                                  group.product.uuid,
-                                  purpose.uuid
-                                )]) != null ? _a3 : false,
-                                selectedLanguage,
-                                initialDataElementSelections
-                              },
-                              `${group.product.uuid}-${purpose.uuid}-${selectedLanguage}`
-                            );
-                          })
-                        }
-                      )
-                    ] }, group.product.uuid);
-                  }) : soleProductSection(
-                    (_y = content == null ? void 0 : content.purposes) == null ? void 0 : _y.map((purpose) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                      PurposeItem,
-                      {
-                        purpose,
-                        selectedPurposes,
-                        collapsedPurposes,
-                        selectedDataElements,
-                        recordedAnswers,
-                        settings,
-                        styles,
-                        responsiveStyles,
-                        onPurposeToggle: handlePurposeCheckboxChange,
-                        onPurposeCollapse: togglePurposeCollapse,
-                        onDataElementToggle: handleDataElementCheckboxChange,
-                        getTranslatedText,
-                        isAlreadyConsented: isFullyConsentedReviewMode,
-                        selectedLanguage,
-                        initialDataElementSelections
-                      },
-                      `${purpose.uuid}-${selectedLanguage}`
-                    ))
-                  ) })
-                ),
-                ((content == null ? void 0 : content.privacy_center_url) || (content == null ? void 0 : content.dpo_info)) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                  "div",
-                  {
-                    style: {
-                      ...styles.privacyText,
-                      ...responsiveStyles.privacyText,
-                      ...componentTextStyle,
-                      fontSize: isMobile ? "13px" : "14px",
-                      lineHeight: "1.4",
-                      borderTop: "1px solid rgba(152, 162, 179, 0.3)",
-                      paddingTop: "12px",
-                      marginTop: "12px"
-                    },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { style: { margin: 0, opacity: 0.6 }, children: [
-                      content.privacy_center_url && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-                        content.additional_text && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { id: "additional-text", children: getTranslatedText(
-                          "additional_text",
-                          content.additional_text
-                        ) }),
-                        " ",
+                      ))
+                    ] })
+                  ) }) : (
+                    /* Regular consent UI */
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styles.optionsContainer, children: isMultiProduct(content == null ? void 0 : content.products) ? productGroups.map((group) => {
+                      var _a2;
+                      const boxPurposes = productBoxPurposes(
+                        group.purposes
+                      );
+                      const selectedInGroup = boxPurposes.filter(
+                        (purpose) => selectedPurposes[productPurposeKey(
+                          group.product.uuid,
+                          purpose.uuid
+                        )]
+                      ).length;
+                      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
                         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                          "a",
+                          ProductSectionHeader,
                           {
-                            id: "privacy-center-link",
-                            style: { ...styles.link, ...linkStyle },
-                            href: content.privacy_center_url,
-                            target: "_blank",
-                            rel: "noopener noreferrer",
-                            children: getTranslatedText(
-                              "privacy_center_anchor_text",
-                              content.privacy_center_anchor_text || "Privacy Center"
-                            )
+                            product: group.product,
+                            isRequired: productIsRequiredFor(
+                              group.product.uuid
+                            ),
+                            purposeCount: boxPurposes.length,
+                            requiredOnly: boxPurposes.length < group.purposes.length,
+                            allSelected: selectedInGroup === boxPurposes.length,
+                            someSelected: selectedInGroup > 0,
+                            collapsed: collapsedProducts[group.product.uuid] || false,
+                            locked: (_a2 = consentedProducts[group.product.uuid]) != null ? _a2 : false,
+                            settings,
+                            styles,
+                            responsiveStyles,
+                            onToggleCollapse: toggleProductCollapse,
+                            onToggleSelect: handleProductCheckboxChange,
+                            getTranslatedText
                           }
                         ),
-                        "."
-                      ] }),
-                      content.dpo_info && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-                        content.privacy_center_url && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("br", {}),
-                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { id: "dpo-grievance-text", children: getTranslatedDpoText(
-                          "grievance_text",
-                          content.dpo_info.grievance_text || ""
-                        ) }),
-                        " ",
-                        content.dpo_info.grievance_url && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                          "a",
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                          "div",
                           {
-                            id: "dpo-grievance-link",
-                            style: { ...styles.link, ...linkStyle },
-                            href: content.dpo_info.grievance_url,
-                            target: "_blank",
-                            rel: "noopener noreferrer",
-                            children: getTranslatedDpoText(
-                              "grievance_anchor_text",
-                              content.dpo_info.grievance_anchor_text || "click here"
-                            )
+                            id: `product-${group.product.uuid}`,
+                            style: styles.sectionBody,
+                            hidden: collapsedProducts[group.product.uuid] || false,
+                            children: group.purposes.map((purpose) => {
+                              var _a3;
+                              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                                PurposeItem,
+                                {
+                                  purpose,
+                                  productUuid: group.product.uuid,
+                                  selectedPurposes,
+                                  collapsedPurposes,
+                                  selectedDataElements,
+                                  recordedAnswers,
+                                  settings,
+                                  styles,
+                                  responsiveStyles,
+                                  onPurposeToggle: handlePurposeCheckboxChange,
+                                  onPurposeCollapse: togglePurposeCollapse,
+                                  onDataElementToggle: handleDataElementCheckboxChange,
+                                  getTranslatedText,
+                                  isAlreadyConsented: (_a3 = consentedPurposes[productPurposeKey(
+                                    group.product.uuid,
+                                    purpose.uuid
+                                  )]) != null ? _a3 : false,
+                                  selectedLanguage,
+                                  initialDataElementSelections
+                                },
+                                `${group.product.uuid}-${purpose.uuid}-${selectedLanguage}`
+                              );
+                            })
                           }
-                        ),
-                        content.dpo_info.grievance_email && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-                          " ",
-                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { id: "dpo-grievance-email-connector", children: getTranslatedDpoText(
-                            "grievance_email_connector_text",
-                            content.dpo_info.grievance_email_connector_text || "or email to"
+                        )
+                      ] }, group.product.uuid);
+                    }) : soleProductSection(
+                      (_y = content == null ? void 0 : content.purposes) == null ? void 0 : _y.map((purpose) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                        PurposeItem,
+                        {
+                          purpose,
+                          selectedPurposes,
+                          collapsedPurposes,
+                          selectedDataElements,
+                          recordedAnswers,
+                          settings,
+                          styles,
+                          responsiveStyles,
+                          onPurposeToggle: handlePurposeCheckboxChange,
+                          onPurposeCollapse: togglePurposeCollapse,
+                          onDataElementToggle: handleDataElementCheckboxChange,
+                          getTranslatedText,
+                          isAlreadyConsented: isFullyConsentedReviewMode,
+                          selectedLanguage,
+                          initialDataElementSelections
+                        },
+                        `${purpose.uuid}-${selectedLanguage}`
+                      ))
+                    ) })
+                  ),
+                  ((content == null ? void 0 : content.privacy_center_url) || (content == null ? void 0 : content.dpo_info)) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    "div",
+                    {
+                      style: {
+                        ...styles.privacyText,
+                        ...responsiveStyles.privacyText,
+                        ...componentTextStyle,
+                        fontSize: isMobile ? "13px" : "14px",
+                        lineHeight: "1.4",
+                        borderTop: "1px solid rgba(152, 162, 179, 0.3)",
+                        paddingTop: "12px",
+                        marginTop: "12px"
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { style: { margin: 0, opacity: 0.6 }, children: [
+                        content.privacy_center_url && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+                          content.additional_text && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { id: "additional-text", children: getTranslatedText(
+                            "additional_text",
+                            content.additional_text
                           ) }),
                           " ",
                           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                             "a",
                             {
-                              id: "dpo-grievance-email",
+                              id: "privacy-center-link",
                               style: { ...styles.link, ...linkStyle },
-                              href: `mailto:${content.dpo_info.grievance_email}`,
-                              children: content.dpo_info.grievance_email
+                              href: content.privacy_center_url,
+                              target: "_blank",
+                              rel: "noopener noreferrer",
+                              children: getTranslatedText(
+                                "privacy_center_anchor_text",
+                                content.privacy_center_anchor_text || "Privacy Center"
+                              )
                             }
-                          )
+                          ),
+                          "."
                         ] }),
-                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("br", {}),
-                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { id: "dpo-dp-board-text", children: getTranslatedDpoText(
-                          "dp_board_text",
-                          content.dpo_info.dp_board_text || ""
-                        ) }),
-                        " ",
-                        content.dpo_info.dp_board_url && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                          "a",
-                          {
-                            id: "dpo-dp-board-link",
-                            style: { ...styles.link, ...linkStyle },
-                            href: content.dpo_info.dp_board_url,
-                            target: "_blank",
-                            rel: "noopener noreferrer",
-                            children: getTranslatedDpoText(
-                              "dp_board_anchor_text",
-                              content.dpo_info.dp_board_anchor_text || "here"
+                        productPolicyLinks.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+                          content.privacy_center_url && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("br", {}),
+                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { id: "product-privacy-policies-label", children: getTranslatedText(
+                            "product_privacy_policies_label",
+                            PRODUCT_POLICIES_LABEL
+                          ) }),
+                          " ",
+                          productPolicyLinks.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
+                            index > 0 && ", ",
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                              "a",
+                              {
+                                id: `product-privacy-policy-${entry.uuid}`,
+                                style: { ...styles.link, ...linkStyle },
+                                href: entry.url,
+                                target: "_blank",
+                                rel: "noopener noreferrer",
+                                children: entry.name
+                              }
                             )
-                          }
-                        ),
-                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("br", {}),
-                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { id: "dpo-dpo-text", children: getTranslatedDpoText(
-                          "dpo_text",
-                          content.dpo_info.dpo_text || ""
-                        ) }),
-                        " ",
-                        content.dpo_info.dpo_email && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                          "a",
-                          {
-                            id: "dpo-dpo-link",
-                            style: { ...styles.link, ...linkStyle },
-                            href: `mailto:${content.dpo_info.dpo_email}`,
-                            children: getTranslatedDpoText(
-                              "dpo_anchor_text",
-                              content.dpo_info.dpo_anchor_text || "Click here"
+                          ] }, entry.uuid))
+                        ] }),
+                        content.dpo_info && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+                          (content.privacy_center_url || productPolicyLinks.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("br", {}),
+                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { id: "dpo-grievance-text", children: getTranslatedDpoText(
+                            "grievance_text",
+                            content.dpo_info.grievance_text || ""
+                          ) }),
+                          " ",
+                          content.dpo_info.grievance_url && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                            "a",
+                            {
+                              id: "dpo-grievance-link",
+                              style: { ...styles.link, ...linkStyle },
+                              href: content.dpo_info.grievance_url,
+                              target: "_blank",
+                              rel: "noopener noreferrer",
+                              children: getTranslatedDpoText(
+                                "grievance_anchor_text",
+                                content.dpo_info.grievance_anchor_text || "click here"
+                              )
+                            }
+                          ),
+                          content.dpo_info.grievance_email && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+                            " ",
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { id: "dpo-grievance-email-connector", children: getTranslatedDpoText(
+                              "grievance_email_connector_text",
+                              content.dpo_info.grievance_email_connector_text || "or email to"
+                            ) }),
+                            " ",
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                              "a",
+                              {
+                                id: "dpo-grievance-email",
+                                style: { ...styles.link, ...linkStyle },
+                                href: `mailto:${content.dpo_info.grievance_email}`,
+                                children: content.dpo_info.grievance_email
+                              }
                             )
-                          }
-                        )
+                          ] }),
+                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("br", {}),
+                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { id: "dpo-dp-board-text", children: getTranslatedDpoText(
+                            "dp_board_text",
+                            content.dpo_info.dp_board_text || ""
+                          ) }),
+                          " ",
+                          content.dpo_info.dp_board_url && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                            "a",
+                            {
+                              id: "dpo-dp-board-link",
+                              style: { ...styles.link, ...linkStyle },
+                              href: content.dpo_info.dp_board_url,
+                              target: "_blank",
+                              rel: "noopener noreferrer",
+                              children: getTranslatedDpoText(
+                                "dp_board_anchor_text",
+                                content.dpo_info.dp_board_anchor_text || "here"
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("br", {}),
+                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { id: "dpo-dpo-text", children: getTranslatedDpoText(
+                            "dpo_text",
+                            content.dpo_info.dpo_text || ""
+                          ) }),
+                          " ",
+                          content.dpo_info.dpo_email && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                            "a",
+                            {
+                              id: "dpo-dpo-link",
+                              style: { ...styles.link, ...linkStyle },
+                              href: `mailto:${content.dpo_info.dpo_email}`,
+                              children: getTranslatedDpoText(
+                                "dpo_anchor_text",
+                                content.dpo_info.dpo_anchor_text || "Click here"
+                              )
+                            }
+                          )
+                        ] })
                       ] })
-                    ] })
-                  }
-                )
+                    }
+                  )
+                ] })
               ]
             }
           ),
@@ -6544,6 +6707,72 @@ var RedactoNoticeConsent = ({
               children: confirmHint
             }
           ),
+          otpLocked && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: styles.otpGatePanel, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { style: styles.otpGateTitle, children: (_z = otpGate == null ? void 0 : otpGate.title) != null ? _z : OTP_GATE_COPY.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { style: styles.otpGateDescription, children: (_A = otpGate == null ? void 0 : otpGate.description) != null ? _A : OTP_GATE_COPY.description }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styles.otpGateDigits, children: Array.from({ length: OTP_GATE_LENGTH }).map((_, i) => {
+              var _a2;
+              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "input",
+                {
+                  id: `notice-otp-digit-${i}`,
+                  style: styles.otpGateDigit,
+                  inputMode: "numeric",
+                  autoComplete: i === 0 ? "one-time-code" : "off",
+                  maxLength: 1,
+                  value: (_a2 = otpCode[i]) != null ? _a2 : "",
+                  disabled: otpBusy,
+                  "aria-label": `Digit ${i + 1}`,
+                  onChange: (e) => {
+                    const digit = e.target.value.replace(/[^0-9]/g, "");
+                    if (!digit) return;
+                    const next = otpCode.split("");
+                    next[i] = digit[digit.length - 1];
+                    setOtpCode(next.join("").slice(0, OTP_GATE_LENGTH));
+                    focusOtpDigit(i + 1);
+                  },
+                  onKeyDown: (e) => {
+                    if (e.key !== "Backspace") return;
+                    e.preventDefault();
+                    const next = otpCode.split("");
+                    if (next[i]) {
+                      next[i] = "";
+                      setOtpCode(next.join(""));
+                      return;
+                    }
+                    next[i - 1] = "";
+                    setOtpCode(next.join(""));
+                    focusOtpDigit(i - 1);
+                  },
+                  onPaste: (e) => {
+                    e.preventDefault();
+                    const pasted = e.clipboardData.getData("text").replace(/[^0-9]/g, "").slice(0, OTP_GATE_LENGTH);
+                    if (!pasted) return;
+                    setOtpCode(pasted);
+                    focusOtpDigit(pasted.length - 1);
+                  }
+                },
+                `notice-otp-digit-${i}`
+              );
+            }) }),
+            otpError && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { style: styles.otpGateError, children: otpError }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                type: "button",
+                style: {
+                  ...styles.button,
+                  ...responsiveStyles.button,
+                  ...styles.acceptButton,
+                  ...acceptAllButtonStyle,
+                  ...styles.otpGateButton
+                },
+                onClick: handleOtpConfirm,
+                disabled: otpBusy || otpCode.length !== OTP_GATE_LENGTH,
+                children: otpBusy ? OTP_GATE_COPY.verifying : (_B = otpGate == null ? void 0 : otpGate.submitLabel) != null ? _B : OTP_GATE_COPY.submit
+              }
+            )
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "div",
             {