@redacto.io/consent-sdk-react 0.0.2 → 1.0.0

package/src/RedactoNoticeConsentInline/api/index.ts

@@ -0,0 +1,159 @@
+import type {
+  ConsentContent,
+  ConsentEventPayload,
+  FetchConsentContentParams,
+  SubmitConsentEventParams,
+} from "./types";
+
+const BASE_URL = "https://api.redacto.tech/consent";
+
+export const fetchConsentContent = async ({
+  org_uuid,
+  workspace_uuid,
+  notice_uuid,
+  baseUrl,
+  language = "en",
+  specific_uuid,
+}: FetchConsentContentParams): Promise<ConsentContent> => {
+  try {
+    const apiBaseUrl = baseUrl || BASE_URL;
+
+    const url = new URL(
+      `${apiBaseUrl}/public/organisations/${org_uuid}/workspaces/${workspace_uuid}/notices/get-notice/${notice_uuid}`
+    );
+
+    if (specific_uuid) {
+      url.searchParams.append("specific_uuid", specific_uuid);
+    }
+
+    const response = await fetch(url.toString(), {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (response.status === 401) {
+      const error = new Error("Unauthorized") as Error & {
+        status?: number;
+      };
+      error.status = 401;
+      throw error;
+    }
+
+    if (response.status === 409) {
+      const error = new Error("User has already provided consent") as Error & {
+        status?: number;
+      };
+      error.status = 409;
+      throw error;
+    }
+
+    if (!response.ok) {
+      throw new Error(
+        `Failed to fetch consent content: ${response.statusText}`
+      );
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Error fetching consent content:", error);
+    throw error;
+  }
+};
+
+export const submitConsentEvent = async ({
+  org_uuid,
+  workspace_uuid,
+  accessToken,
+  baseUrl,
+  noticeUuid,
+  purposes,
+  declined,
+  meta_data,
+}: SubmitConsentEventParams): Promise<void> => {
+  try {
+    const primaryEmail = localStorage.getItem("userEmail");
+    const primaryMobile = localStorage.getItem("userMobile");
+    const payload: ConsentEventPayload = {
+      primary_email: primaryEmail || undefined,
+      primary_mobile: primaryMobile || undefined,
+      notice_uuid: noticeUuid,
+      source: "WEB",
+      declined,
+      consents: {
+        purposes: purposes.map((purpose) => ({
+          uuid: purpose.uuid,
+          name: purpose.name,
+          description: purpose.description,
+          industries: purpose.industries || "",
+          selected: purpose.selected,
+          data_elements: purpose.data_elements.map((element) => ({
+            uuid: element.uuid,
+            name: element.name,
+            enabled: element.enabled,
+            required: element.required,
+            selected: element.required ? true : element.selected,
+          })),
+        })),
+      },
+      meta_data,
+    };
+
+    const apiBaseUrl = baseUrl || BASE_URL;
+
+    const response = await fetch(
+      `${apiBaseUrl}/public/organisations/${org_uuid}/workspaces/${workspace_uuid}/by-token`,
+      {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(payload),
+      }
+    );
+
+    if (!response.ok) {
+      // Try to parse error response body
+      let errorData;
+      try {
+        errorData = await response.json();
+      } catch {
+        // If parsing fails, use status text
+        errorData = { message: response.statusText };
+      }
+
+      // Handle 409 CONFLICT error (user has already consented)
+      if (response.status === 409) {
+        const error = new Error(
+          errorData.detail?.message || errorData.message || "User has already provided consent"
+        ) as Error & {
+          status?: number;
+          code?: number;
+          detail?: { message?: string };
+        };
+        error.status = 409;
+        error.code = errorData.code || 409;
+        error.detail = errorData.detail;
+        throw error;
+      }
+
+      const error = new Error(
+        errorData.detail?.message || errorData.message || `Failed to submit consent event: ${response.statusText}`
+      ) as Error & {
+        status?: number;
+        code?: number;
+        detail?: { message?: string };
+      };
+      error.status = response.status;
+      error.code = errorData.code;
+      error.detail = errorData.detail;
+      throw error;
+    }
+  } catch (error) {
+    console.error("Error submitting consent event:", error);
+    throw error;
+  }
+};

package/src/RedactoNoticeConsentInline/api/types.ts

@@ -0,0 +1,190 @@
+export type RedactoJwtPayload = {
+  organisation_uuid: string;
+  workspace_uuid: string;
+};
+
+export type ConsentContent = {
+  code: number;
+  status: string;
+  detail: {
+    uuid: string;
+    name: string;
+    organisation_uuid: string;
+    workspace_uuid: string;
+    collection_point_uuids: string[];
+    collection_points: {
+      uuid: string;
+      organisation_uuid: string;
+      workspace_uuid: string;
+      name: string;
+      created_at: string;
+      updated_at: string;
+    }[];
+    active_config: {
+      uuid: string;
+      notice_uuid: string;
+      organisation_uuid: string;
+      workspace_uuid: string;
+      version: number;
+      status: string;
+      notice_text: string;
+      additional_text: string;
+      confirm_button_text: string;
+      decline_button_text: string;
+      logo_url: string;
+      privacy_policy_url: string;
+      sub_processors_url: string;
+      primary_color: string;
+      secondary_color: string;
+      font_preference: string;
+      purposes: {
+        uuid: string;
+        name: string;
+        description: string;
+        industries?: string;
+        data_elements: {
+          uuid: string;
+          name: string;
+          description: string | null;
+          industries?: string | null;
+          enabled: boolean;
+          required: boolean;
+        }[];
+      }[];
+      default_language: string;
+      supported_languages_and_translations: {
+        [key: string]: {
+          notice_text: string;
+          additional_text: string;
+          confirm_button_text: string;
+          decline_button_text: string;
+          privacy_policy_prefix_text: string;
+          vendor_list_prefix_text: string;
+          privacy_policy_anchor_text: string;
+          vendors_list_anchor_text: string;
+          purpose_section_heading: string;
+          data_elements: {
+            [key: string]: string;
+          };
+          purposes: {
+            [key: string]: string;
+          };
+        };
+      };
+      created_at: string;
+      updated_at: string;
+      deployed_at: string;
+      privacy_policy_prefix_text: string;
+      vendor_list_prefix_text: string;
+      privacy_policy_anchor_text: string;
+      vendors_list_anchor_text: string;
+      purpose_section_heading: string;
+    };
+    created_at: string;
+    updated_at: string;
+  };
+};
+
+export type ConsentPreference = {
+  id: string;
+  name: string;
+  description: string;
+  required: boolean;
+};
+
+export type ConsentSelection = {
+  id: string;
+  enabled: boolean;
+};
+
+export type Settings = {
+  button: {
+    accept: {
+      backgroundColor: string;
+      textColor: string;
+    };
+    decline: {
+      backgroundColor: string;
+      textColor: string;
+    };
+    language: {
+      backgroundColor: string;
+      textColor: string;
+      selectedBackgroundColor?: string;
+      selectedTextColor?: string;
+    };
+  };
+  link: string;
+  borderRadius?: string;
+  backgroundColor?: string;
+  headingColor?: string;
+  textColor?: string;
+  borderColor?: string;
+};
+
+export type FetchConsentContentParams = {
+  org_uuid: string;
+  workspace_uuid: string;
+  notice_uuid: string;
+  baseUrl?: string;
+  language?: string;
+  specific_uuid?: string;
+};
+
+export type ConsentEventPayload = {
+  org_user_id?: string;
+  primary_email?: string;
+  primary_mobile?: string;
+  notice_uuid: string;
+  source: string;
+  declined: boolean;
+  consents: {
+    purposes: Array<{
+      uuid: string;
+      name: string;
+      description: string;
+      industries?: string;
+      selected: boolean;
+      data_elements: Array<{
+        uuid: string;
+        name: string;
+        enabled: boolean;
+        required: boolean;
+        selected: boolean;
+      }>;
+    }>;
+  };
+  meta_data?: {
+    specific_uuid: string;
+  };
+};
+
+export type DataElement = {
+  uuid: string;
+  name: string;
+  enabled: boolean;
+  required: boolean;
+  selected: boolean;
+};
+
+export type Purpose = {
+  uuid: string;
+  name: string;
+  description: string;
+  industries?: string;
+  selected: boolean;
+  data_elements: Array<DataElement>;
+};
+
+export type SubmitConsentEventParams = {
+  org_uuid: string;
+  workspace_uuid: string;
+  accessToken: string;
+  baseUrl?: string;
+  noticeUuid: string;
+  purposes: Array<Purpose>;
+  declined: boolean;
+  meta_data?: {
+    specific_uuid: string;
+  };
+};

package/src/RedactoNoticeConsentInline/index.ts

@@ -0,0 +1 @@
+export { RedactoConsentInline as default } from "./RedactoNoticeConsentInline";

package/src/RedactoNoticeConsentInline/injectStyles.ts

@@ -0,0 +1,40 @@
+// CSS injection utility for the consent SDK
+let spinnerAnimationInjected = false;
+
+/**
+ * Injects the spinner animation keyframes needed for the loading indicator.
+ * This is separate from checkbox styles since this component uses native checkboxes.
+ */
+export const injectSpinnerAnimation = () => {
+  if (spinnerAnimationInjected || typeof document === 'undefined') {
+    return;
+  }
+
+  const STYLE_ID = 'redacto-consent-spinner-animation';
+  
+  // Check if animation is already injected
+  if (document.getElementById(STYLE_ID)) {
+    spinnerAnimationInjected = true;
+    return;
+  }
+
+  const style = document.createElement('style');
+  style.id = STYLE_ID;
+  style.textContent = `
+    /* Loading spinner animation */
+    @keyframes spin {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+  `;
+
+  document.head.appendChild(style);
+  spinnerAnimationInjected = true;
+};
+
+// Keep the old function name for backward compatibility if needed elsewhere
+export const injectCheckboxStyles = injectSpinnerAnimation;