@redacto.io/consent-sdk-react 10.2.0-beta.0 → 10.2.0

package/dist/chunk-6EET4YOY.mjs

@@ -0,0 +1,93 @@
+// src/shared/idempotency.ts
+var HEADER = "Idempotency-Key";
+var pending = /* @__PURE__ */ new Map();
+var MAX_PENDING = 16;
+var mintKey = () => {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 14)}-${Math.random().toString(36).slice(2, 14)}`;
+};
+var statusOf = (outcome) => {
+  if (typeof Response !== "undefined" && outcome instanceof Response) {
+    return outcome.status;
+  }
+  if (outcome && typeof outcome === "object" && "status" in outcome) {
+    const status = outcome.status;
+    if (typeof status === "number") return status;
+  }
+  return void 0;
+};
+var settledOnResolve = (result) => {
+  const status = statusOf(result);
+  return status === void 0 || status < 500;
+};
+var settledOnReject = (error) => {
+  const status = statusOf(error);
+  return status !== void 0 && status < 500;
+};
+var withIdempotencyKey = async (url, body, send) => {
+  const signature = `${url}
+${body}`;
+  let entry = pending.get(signature);
+  if (!entry) {
+    entry = { key: mintKey(), inFlight: 0, keep: false };
+    if (pending.size >= MAX_PENDING) {
+      const oldest = pending.keys().next().value;
+      if (oldest !== void 0) pending.delete(oldest);
+    }
+    pending.set(signature, entry);
+  } else if (entry.inFlight === 0) {
+    entry.keep = false;
+  }
+  entry.inFlight += 1;
+  const settle = (settled) => {
+    entry.inFlight -= 1;
+    if (!settled) entry.keep = true;
+    if (entry.inFlight === 0 && !entry.keep) pending.delete(signature);
+  };
+  try {
+    const result = await send({ [HEADER]: entry.key });
+    settle(settledOnResolve(result));
+    return result;
+  } catch (error) {
+    settle(settledOnReject(error));
+    throw error;
+  }
+};
+
+// src/RedactoNoticeConsent/useMediaQuery.ts
+import { useState, useEffect } from "react";
+var useMediaQuery = (query) => {
+  const getMatches = () => typeof window !== "undefined" ? window.matchMedia(query).matches : false;
+  const [matches, setMatches] = useState(getMatches);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const media = window.matchMedia(query);
+    const listener = (e) => {
+      setMatches(e.matches);
+    };
+    if (media.addEventListener) {
+      media.addEventListener("change", listener);
+    } else {
+      media.addListener(listener);
+    }
+    return () => {
+      if (media.removeEventListener) {
+        media.removeEventListener("change", listener);
+      } else {
+        media.removeListener(listener);
+      }
+    };
+  }, [query]);
+  return matches;
+};
+
+// src/shared/sandbox.ts
+var SANDBOX_TOKEN_HEADER = "X-Consent-Token";
+
+export {
+  SANDBOX_TOKEN_HEADER,
+  withIdempotencyKey,
+  useMediaQuery
+};

package/dist/index.js

@@ -219,6 +219,64 @@ var sandboxBodyIdentity = (sandbox) => {
 };
 var sandboxQueryIdentity = (sandbox) => sandboxBodyIdentity(sandbox);
 
+// src/shared/idempotency.ts
+var HEADER = "Idempotency-Key";
+var pending = /* @__PURE__ */ new Map();
+var MAX_PENDING = 16;
+var mintKey = () => {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 14)}-${Math.random().toString(36).slice(2, 14)}`;
+};
+var statusOf = (outcome) => {
+  if (typeof Response !== "undefined" && outcome instanceof Response) {
+    return outcome.status;
+  }
+  if (outcome && typeof outcome === "object" && "status" in outcome) {
+    const status = outcome.status;
+    if (typeof status === "number") return status;
+  }
+  return void 0;
+};
+var settledOnResolve = (result) => {
+  const status = statusOf(result);
+  return status === void 0 || status < 500;
+};
+var settledOnReject = (error) => {
+  const status = statusOf(error);
+  return status !== void 0 && status < 500;
+};
+var withIdempotencyKey = async (url, body, send) => {
+  const signature = `${url}
+${body}`;
+  let entry = pending.get(signature);
+  if (!entry) {
+    entry = { key: mintKey(), inFlight: 0, keep: false };
+    if (pending.size >= MAX_PENDING) {
+      const oldest = pending.keys().next().value;
+      if (oldest !== void 0) pending.delete(oldest);
+    }
+    pending.set(signature, entry);
+  } else if (entry.inFlight === 0) {
+    entry.keep = false;
+  }
+  entry.inFlight += 1;
+  const settle = (settled) => {
+    entry.inFlight -= 1;
+    if (!settled) entry.keep = true;
+    if (entry.inFlight === 0 && !entry.keep) pending.delete(signature);
+  };
+  try {
+    const result = await send({ [HEADER]: entry.key });
+    settle(settledOnResolve(result));
+    return result;
+  } catch (error) {
+    settle(settledOnReject(error));
+    throw error;
+  }
+};
+
 // src/shared/notice-consent-status.ts
 var import_jwt_decode = require("jwt-decode");
 var decodeNoticeConsentToken = (token) => {
@@ -439,17 +497,21 @@ var submitConsentEvent = async ({
     self_declared_adult: selfDeclaredAdult
   };
   const requestBody = sandbox ? { ...payload, ...sandboxBodyIdentity(sandbox) } : payload;
-  const response = await fetch(
-    `${apiBaseUrl}/public/organisations/${ORGANISATION_UUID}/workspaces/${WORKSPACE_UUID}/submit-consent`,
-    {
+  const url = `${apiBaseUrl}/public/organisations/${ORGANISATION_UUID}/workspaces/${WORKSPACE_UUID}/submit-consent`;
+  const serialisedBody = JSON.stringify(requestBody);
+  const response = await withIdempotencyKey(
+    url,
+    serialisedBody,
+    (idempotencyHeaders) => fetch(url, {
       method: "POST",
       headers: {
         ...buildAuthHeaders(accessToken, sandbox),
-        "Content-Type": "application/json"
+        "Content-Type": "application/json",
+        ...idempotencyHeaders
       },
-      body: JSON.stringify(requestBody),
+      body: serialisedBody,
       signal
-    }
+    })
   );
   if (!response.ok) {
     throw await parseApiError(
@@ -912,6 +974,15 @@ var styles = {
     padding: 0,
     boxSizing: "border-box"
   },
+  // The purposes belonging to one product. Indented so the product chevron and
+  // the purpose chevrons below it do not sit on the same vertical line, which
+  // read as one flat list rather than a heading and its contents. The trailing
+  // margin separates a section from the next product heading.
+  sectionBody: {
+    paddingLeft: "18px",
+    margin: "0 0 14px",
+    boxSizing: "border-box"
+  },
   // No colour token: the header always overrides it with the notice's
   // headingColor, so one here would imply a default that never applies.
   sectionTitle: {
@@ -1067,10 +1138,10 @@ var styles = {
     color: "#ffffff"
   },
   /**
-     * The accept-all shortcut. Tinted rather than filled so the primary
-     * "accept selected" action stays visually dominant, and outlined-but-coloured
-     * so it still reads as an accept next to the neutral decline button.
-     */
+   * The accept-all shortcut. Tinted rather than filled so the primary
+   * "accept selected" action stays visually dominant, and outlined-but-coloured
+   * so it still reads as an accept next to the neutral decline button.
+   */
   acceptSecondaryButton: {
     backgroundColor: "#ffffff",
     border: "1px solid #4f87ff",
@@ -1478,6 +1549,7 @@ var injectCheckboxStyles = () => {
       cursor: pointer !important;
       position: relative !important;
       box-sizing: border-box !important;
+      flex-shrink: 0 !important;
       margin: 0 !important;
       padding: 4px !important;
     }
@@ -1494,6 +1566,7 @@ var injectCheckboxStyles = () => {
       cursor: pointer !important;
       position: relative !important;
       box-sizing: border-box !important;
+      flex-shrink: 0 !important;
       margin: 0 !important;
       padding: 4px !important;
     }
@@ -1822,9 +1895,9 @@ var toFontFaceCss = (entry, sources) => sources.map(
 ).join("\n\n");
 var fontSourceLoads = /* @__PURE__ */ new Map();
 var loadFontSources = (entry, importSources) => {
-  const pending = fontSourceLoads.get(entry.id);
-  if (pending) {
-    return pending;
+  const pending2 = fontSourceLoads.get(entry.id);
+  if (pending2) {
+    return pending2;
   }
   const load = importSources().then((module2) => module2.NOTICE_FONT_SOURCES).catch((error) => {
     fontSourceLoads.delete(entry.id);
@@ -3762,7 +3835,19 @@ var RedactoNoticeConsent = ({
         {}
       );
       setCollapsedPurposes(initialCollapsedState);
-      setCollapsedProducts({});
+      setCollapsedProducts(
+        groupPurposesByProduct(
+          activeConfig.products,
+          activeConfig.purposes,
+          activeConfig.product_purpose_order
+        ).reduce(
+          (acc, group, index) => ({
+            ...acc,
+            [group.product.uuid]: index > 0
+          }),
+          {}
+        )
+      );
       const isReconsentRequired = consentContentData.detail.reconsent_required;
       const purposeSelections = consentContentData.detail.purpose_selections;
       const newCategorizedPurposes = isReconsentRequired ? {
@@ -5646,6 +5731,7 @@ var RedactoNoticeConsent = ({
                         "div",
                         {
                           id: `product-${group.product.uuid}`,
+                          style: styles.sectionBody,
                           hidden: collapsedProducts[group.product.uuid] || false,
                           children: group.purposes.map((purpose) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                             PurposeItem,
@@ -5936,16 +6022,20 @@ var submitConsentEvent2 = async ({
     declined,
     meta_data
   };
-  const response = await fetch(
-    `${apiBaseUrl}/public/organisations/${org_uuid}/workspaces/${workspace_uuid}/submit-consent`,
-    {
+  const url = `${apiBaseUrl}/public/organisations/${org_uuid}/workspaces/${workspace_uuid}/submit-consent`;
+  const serialisedBody = JSON.stringify(payload);
+  const response = await withIdempotencyKey(
+    url,
+    serialisedBody,
+    (idempotencyHeaders) => fetch(url, {
       method: "POST",
       headers: {
         Authorization: `Bearer ${accessToken}`,
-        "Content-Type": "application/json"
+        "Content-Type": "application/json",
+        ...idempotencyHeaders
       },
-      body: JSON.stringify(payload)
-    }
+      body: serialisedBody
+    })
   );
   if (!response.ok) {
     throw await parseApiError(
@@ -8115,16 +8205,22 @@ var submitAssistedConsent = async ({
     language: language || void 0
   };
   const url = `${publicScope(ledgerBaseUrl || baseUrl, organisationUuid, workspaceUuid)}/submit-consent`;
-  const response = await fetch(url, {
-    method: "POST",
-    headers: {
-      accept: "application/json",
-      Authorization: `Bearer ${accessToken}`,
-      "Content-Type": "application/json"
-    },
-    body: JSON.stringify(payload),
-    signal
-  });
+  const serialisedBody = JSON.stringify(payload);
+  const response = await withIdempotencyKey(
+    url,
+    serialisedBody,
+    (idempotencyHeaders) => fetch(url, {
+      method: "POST",
+      headers: {
+        accept: "application/json",
+        Authorization: `Bearer ${accessToken}`,
+        "Content-Type": "application/json",
+        ...idempotencyHeaders
+      },
+      body: serialisedBody,
+      signal
+    })
+  );
   if (!response.ok) {
     throw await parseApiError(
       response,

package/dist/index.mjs

@@ -1,7 +1,8 @@
 import {
   SANDBOX_TOKEN_HEADER,
-  useMediaQuery
-} from "./chunk-OGL6OC3A.mjs";
+  useMediaQuery,
+  withIdempotencyKey
+} from "./chunk-6EET4YOY.mjs";
 import {
   FONT_FAMILY_SEPARATOR,
   FONT_NAME_QUOTE_CHARACTERS,
@@ -372,17 +373,21 @@ var submitConsentEvent = async ({
     self_declared_adult: selfDeclaredAdult
   };
   const requestBody = sandbox ? { ...payload, ...sandboxBodyIdentity(sandbox) } : payload;
-  const response = await fetch(
-    `${apiBaseUrl}/public/organisations/${ORGANISATION_UUID}/workspaces/${WORKSPACE_UUID}/submit-consent`,
-    {
+  const url = `${apiBaseUrl}/public/organisations/${ORGANISATION_UUID}/workspaces/${WORKSPACE_UUID}/submit-consent`;
+  const serialisedBody = JSON.stringify(requestBody);
+  const response = await withIdempotencyKey(
+    url,
+    serialisedBody,
+    (idempotencyHeaders) => fetch(url, {
       method: "POST",
       headers: {
         ...buildAuthHeaders(accessToken, sandbox),
-        "Content-Type": "application/json"
+        "Content-Type": "application/json",
+        ...idempotencyHeaders
       },
-      body: JSON.stringify(requestBody),
+      body: serialisedBody,
       signal
-    }
+    })
   );
   if (!response.ok) {
     throw await parseApiError(
@@ -845,6 +850,15 @@ var styles = {
     padding: 0,
     boxSizing: "border-box"
   },
+  // The purposes belonging to one product. Indented so the product chevron and
+  // the purpose chevrons below it do not sit on the same vertical line, which
+  // read as one flat list rather than a heading and its contents. The trailing
+  // margin separates a section from the next product heading.
+  sectionBody: {
+    paddingLeft: "18px",
+    margin: "0 0 14px",
+    boxSizing: "border-box"
+  },
   // No colour token: the header always overrides it with the notice's
   // headingColor, so one here would imply a default that never applies.
   sectionTitle: {
@@ -1000,10 +1014,10 @@ var styles = {
     color: "#ffffff"
   },
   /**
-     * The accept-all shortcut. Tinted rather than filled so the primary
-     * "accept selected" action stays visually dominant, and outlined-but-coloured
-     * so it still reads as an accept next to the neutral decline button.
-     */
+   * The accept-all shortcut. Tinted rather than filled so the primary
+   * "accept selected" action stays visually dominant, and outlined-but-coloured
+   * so it still reads as an accept next to the neutral decline button.
+   */
   acceptSecondaryButton: {
     backgroundColor: "#ffffff",
     border: "1px solid #4f87ff",
@@ -1411,6 +1425,7 @@ var injectCheckboxStyles = () => {
       cursor: pointer !important;
       position: relative !important;
       box-sizing: border-box !important;
+      flex-shrink: 0 !important;
       margin: 0 !important;
       padding: 4px !important;
     }
@@ -1427,6 +1442,7 @@ var injectCheckboxStyles = () => {
       cursor: pointer !important;
       position: relative !important;
       box-sizing: border-box !important;
+      flex-shrink: 0 !important;
       margin: 0 !important;
       padding: 4px !important;
     }
@@ -3494,7 +3510,19 @@ var RedactoNoticeConsent = ({
         {}
       );
       setCollapsedPurposes(initialCollapsedState);
-      setCollapsedProducts({});
+      setCollapsedProducts(
+        groupPurposesByProduct(
+          activeConfig.products,
+          activeConfig.purposes,
+          activeConfig.product_purpose_order
+        ).reduce(
+          (acc, group, index) => ({
+            ...acc,
+            [group.product.uuid]: index > 0
+          }),
+          {}
+        )
+      );
       const isReconsentRequired = consentContentData.detail.reconsent_required;
       const purposeSelections = consentContentData.detail.purpose_selections;
       const newCategorizedPurposes = isReconsentRequired ? {
@@ -5378,6 +5406,7 @@ var RedactoNoticeConsent = ({
                         "div",
                         {
                           id: `product-${group.product.uuid}`,
+                          style: styles.sectionBody,
                           hidden: collapsedProducts[group.product.uuid] || false,
                           children: group.purposes.map((purpose) => /* @__PURE__ */ jsx3(
                             PurposeItem,
@@ -5668,16 +5697,20 @@ var submitConsentEvent2 = async ({
     declined,
     meta_data
   };
-  const response = await fetch(
-    `${apiBaseUrl}/public/organisations/${org_uuid}/workspaces/${workspace_uuid}/submit-consent`,
-    {
+  const url = `${apiBaseUrl}/public/organisations/${org_uuid}/workspaces/${workspace_uuid}/submit-consent`;
+  const serialisedBody = JSON.stringify(payload);
+  const response = await withIdempotencyKey(
+    url,
+    serialisedBody,
+    (idempotencyHeaders) => fetch(url, {
       method: "POST",
       headers: {
         Authorization: `Bearer ${accessToken}`,
-        "Content-Type": "application/json"
+        "Content-Type": "application/json",
+        ...idempotencyHeaders
       },
-      body: JSON.stringify(payload)
-    }
+      body: serialisedBody
+    })
   );
   if (!response.ok) {
     throw await parseApiError(
@@ -7847,16 +7880,22 @@ var submitAssistedConsent = async ({
     language: language || void 0
   };
   const url = `${publicScope(ledgerBaseUrl || baseUrl, organisationUuid, workspaceUuid)}/submit-consent`;
-  const response = await fetch(url, {
-    method: "POST",
-    headers: {
-      accept: "application/json",
-      Authorization: `Bearer ${accessToken}`,
-      "Content-Type": "application/json"
-    },
-    body: JSON.stringify(payload),
-    signal
-  });
+  const serialisedBody = JSON.stringify(payload);
+  const response = await withIdempotencyKey(
+    url,
+    serialisedBody,
+    (idempotencyHeaders) => fetch(url, {
+      method: "POST",
+      headers: {
+        accept: "application/json",
+        Authorization: `Bearer ${accessToken}`,
+        "Content-Type": "application/json",
+        ...idempotencyHeaders
+      },
+      body: serialisedBody,
+      signal
+    })
+  );
   if (!response.ok) {
     throw await parseApiError(
       response,

package/dist/privacy-center.js

@@ -10032,6 +10032,64 @@ var useAuth = () => {
 // src/RedactoPrivacyCenter/context/BaseUrlContext.tsx
 var import_react4 = require("react");
 
+// src/shared/idempotency.ts
+var HEADER = "Idempotency-Key";
+var pending = /* @__PURE__ */ new Map();
+var MAX_PENDING = 16;
+var mintKey = () => {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 14)}-${Math.random().toString(36).slice(2, 14)}`;
+};
+var statusOf = (outcome) => {
+  if (typeof Response !== "undefined" && outcome instanceof Response) {
+    return outcome.status;
+  }
+  if (outcome && typeof outcome === "object" && "status" in outcome) {
+    const status = outcome.status;
+    if (typeof status === "number") return status;
+  }
+  return void 0;
+};
+var settledOnResolve = (result) => {
+  const status = statusOf(result);
+  return status === void 0 || status < 500;
+};
+var settledOnReject = (error) => {
+  const status = statusOf(error);
+  return status !== void 0 && status < 500;
+};
+var withIdempotencyKey = async (url, body, send) => {
+  const signature = `${url}
+${body}`;
+  let entry = pending.get(signature);
+  if (!entry) {
+    entry = { key: mintKey(), inFlight: 0, keep: false };
+    if (pending.size >= MAX_PENDING) {
+      const oldest = pending.keys().next().value;
+      if (oldest !== void 0) pending.delete(oldest);
+    }
+    pending.set(signature, entry);
+  } else if (entry.inFlight === 0) {
+    entry.keep = false;
+  }
+  entry.inFlight += 1;
+  const settle = (settled) => {
+    entry.inFlight -= 1;
+    if (!settled) entry.keep = true;
+    if (entry.inFlight === 0 && !entry.keep) pending.delete(signature);
+  };
+  try {
+    const result = await send({ [HEADER]: entry.key });
+    settle(settledOnResolve(result));
+    return result;
+  } catch (error) {
+    settle(settledOnReject(error));
+    throw error;
+  }
+};
+
 // src/RedactoPrivacyCenter/api/client.ts
 function createConsentClient(baseUrl, ledgerBaseUrl) {
   const ledgerConfigured = Boolean(ledgerBaseUrl);
@@ -10453,11 +10511,19 @@ function createConsentClient(baseUrl, ledgerBaseUrl) {
         ...language ? { language } : {}
       };
       const url = ledgerUrl(baseRequest, "/submit-consent");
-      return privacyCenterApiFetch(url, {
-        ...options,
-        method: "POST",
-        body: JSON.stringify(body),
-        authToken: resolveAuthToken(authToken, baseRequest)
+      const serialisedBody = JSON.stringify(body);
+      return withIdempotencyKey(url, serialisedBody, (idempotencyHeaders) => {
+        const headers = new Headers(options == null ? void 0 : options.headers);
+        Object.entries(idempotencyHeaders).forEach(
+          ([name, value]) => headers.set(name, value)
+        );
+        return privacyCenterApiFetch(url, {
+          ...options,
+          method: "POST",
+          body: serialisedBody,
+          headers,
+          authToken: resolveAuthToken(authToken, baseRequest)
+        });
       });
     },
     /**

package/dist/privacy-center.mjs

@@ -1,7 +1,8 @@
 import {
   SANDBOX_TOKEN_HEADER,
-  useMediaQuery
-} from "./chunk-OGL6OC3A.mjs";
+  useMediaQuery,
+  withIdempotencyKey
+} from "./chunk-6EET4YOY.mjs";
 
 // src/RedactoPrivacyCenter/RedactoPrivacyCenter.tsx
 import { I18nextProvider } from "react-i18next";
@@ -10385,11 +10386,19 @@ function createConsentClient(baseUrl, ledgerBaseUrl) {
         ...language ? { language } : {}
       };
       const url = ledgerUrl(baseRequest, "/submit-consent");
-      return privacyCenterApiFetch(url, {
-        ...options,
-        method: "POST",
-        body: JSON.stringify(body),
-        authToken: resolveAuthToken(authToken, baseRequest)
+      const serialisedBody = JSON.stringify(body);
+      return withIdempotencyKey(url, serialisedBody, (idempotencyHeaders) => {
+        const headers = new Headers(options == null ? void 0 : options.headers);
+        Object.entries(idempotencyHeaders).forEach(
+          ([name, value]) => headers.set(name, value)
+        );
+        return privacyCenterApiFetch(url, {
+          ...options,
+          method: "POST",
+          body: serialisedBody,
+          headers,
+          authToken: resolveAuthToken(authToken, baseRequest)
+        });
       });
     },
     /**

package/package.json

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

package/dist/chunk-OGL6OC3A.mjs

@@ -1,34 +0,0 @@
-// src/RedactoNoticeConsent/useMediaQuery.ts
-import { useState, useEffect } from "react";
-var useMediaQuery = (query) => {
-  const getMatches = () => typeof window !== "undefined" ? window.matchMedia(query).matches : false;
-  const [matches, setMatches] = useState(getMatches);
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    const media = window.matchMedia(query);
-    const listener = (e) => {
-      setMatches(e.matches);
-    };
-    if (media.addEventListener) {
-      media.addEventListener("change", listener);
-    } else {
-      media.addListener(listener);
-    }
-    return () => {
-      if (media.removeEventListener) {
-        media.removeEventListener("change", listener);
-      } else {
-        media.removeListener(listener);
-      }
-    };
-  }, [query]);
-  return matches;
-};
-
-// src/shared/sandbox.ts
-var SANDBOX_TOKEN_HEADER = "X-Consent-Token";
-
-export {
-  SANDBOX_TOKEN_HEADER,
-  useMediaQuery
-};