@redacto.io/consent-sdk-react 0.0.1

package/src/RedactoNoticeConsent/api/index.ts

@@ -0,0 +1,143 @@
+import { jwtDecode } from "jwt-decode";
+import type {
+  ConsentContent,
+  ConsentEventPayload,
+  FetchConsentContentParams,
+  RedactoJwtPayload,
+  SubmitConsentEventParams,
+} from "./types";
+
+const BASE_URL = "https://api.redacto.tech";
+const BACKEND_URL = "http://localhost:3000";
+
+export const fetchConsentContent = async ({
+  noticeId,
+  accessToken,
+  refreshToken,
+  language = "en",
+}: FetchConsentContentParams): Promise<ConsentContent> => {
+  try {
+    const decodedToken = jwtDecode(accessToken) as RedactoJwtPayload;
+
+    const ORGANISATION_UUID = decodedToken?.organisation_uuid;
+    const WORKSPACE_UUID = decodedToken?.workspace_uuid;
+
+    const response = await fetch(
+      `${BASE_URL}/consent/public/organisations/${ORGANISATION_UUID}/workspaces/${WORKSPACE_UUID}/notices/${noticeId}`,
+      {
+        method: "GET",
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+          "Accept-Language": language,
+          "Content-Type": "application/json",
+        },
+      }
+    );
+
+    if (response.status === 401) {
+      try {
+        const response = await fetch(
+          `${BACKEND_URL}/api/consent/refresh-token`,
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              refreshToken,
+            }),
+          }
+        );
+
+        if (!response.ok) {
+          throw new Error("Failed to get consent tokens");
+        }
+
+        const data = await response.json();
+
+        localStorage.setItem("accessToken", data.token);
+        localStorage.setItem("refreshToken", data.refresh_token);
+        localStorage.setItem("tokenExpiresAt", data.expires_at);
+      } catch (error) {
+        console.error("Failed to setup consent:", error);
+        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 ({
+  accessToken,
+  noticeUuid,
+  purposes,
+  declined,
+}: SubmitConsentEventParams): Promise<void> => {
+  try {
+    const primaryEmail = localStorage.getItem("userEmail");
+    const decodedToken = jwtDecode(accessToken) as RedactoJwtPayload;
+
+    const ORGANISATION_UUID = decodedToken.organisation_uuid;
+    const WORKSPACE_UUID = decodedToken.workspace_uuid;
+    const payload: ConsentEventPayload = {
+      primary_email: primaryEmail || 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,
+          })),
+        })),
+      },
+    };
+
+    const response = await fetch(
+      `${BASE_URL}/consent/public/consent-events/organisations/${ORGANISATION_UUID}/workspaces/${WORKSPACE_UUID}/by-token`,
+      {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(payload),
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error(`Failed to submit consent event: ${response.statusText}`);
+    }
+  } catch (error) {
+    console.error("Error submitting consent event:", error);
+    throw error;
+  }
+};

package/src/RedactoNoticeConsent/api/types.ts

@@ -0,0 +1,181 @@
+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: {
+    color: string;
+  };
+  borderRadius?: string;
+  backgroundColor?: string;
+  headingColor?: string;
+  textColor?: string;
+  borderColor?: string;
+};
+
+export type FetchConsentContentParams = {
+  noticeId: string;
+  accessToken: string;
+  refreshToken: string;
+  language?: 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;
+      }>;
+    }>;
+  };
+};
+
+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 = {
+  accessToken: string;
+  noticeUuid: string;
+  purposes: Array<Purpose>;
+  declined: boolean;
+};

package/src/RedactoNoticeConsent/index.ts

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

package/src/RedactoNoticeConsent/styles.ts

@@ -0,0 +1,352 @@
+export const styles = {
+  overlay: {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 999,
+    animation: "overlayFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1)",
+    pointerEvents: "all",
+  },
+
+  modal: {
+    position: "fixed",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: "700px",
+    borderRadius: "8px",
+    backgroundColor: "#ffffff",
+    boxShadow: "4px 0px 4px 0px #00000040",
+    border: "none",
+    display: "flex",
+    flexDirection: "column",
+    maxHeight: "90vh",
+    zIndex: 1000,
+  },
+
+  content: {
+    margin: "22px",
+    display: "flex",
+    flexDirection: "column",
+    flexGrow: 1,
+    overflow: "hidden",
+    minHeight: 0,
+  },
+
+  topSection: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingBottom: "15px",
+    borderBottom: "1px solid #e5e7eb",
+    boxShadow: "0 1px 2px rgba(0, 0, 0, 0.03)",
+    backgroundColor: "#ffffff",
+  },
+
+  topLeft: {
+    display: "flex",
+    alignItems: "center",
+    gap: "10px",
+  },
+
+  logo: {
+    height: "32px",
+    width: "auto",
+    objectFit: "contain",
+  },
+
+  title: {
+    fontSize: "18px",
+    fontWeight: 700,
+    lineHeight: "150%",
+    letterSpacing: "0.2px",
+    verticalAlign: "middle",
+    color: "#101828",
+  },
+
+  topRight: {
+    borderRadius: "8px",
+    padding: "3px 9px",
+    border: "1px solid #d0d5dd",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontWeight: 400,
+    fontSize: "12px",
+    lineHeight: "150%",
+    letterSpacing: "0.2px",
+    verticalAlign: "middle",
+    color: "#344054",
+    gap: "5px",
+    cursor: "pointer",
+    backgroundColor: "#ffffff",
+  },
+
+  middleSection: {
+    margin: "20px 0px",
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px",
+    flexGrow: 1,
+    overflowY: "auto",
+    minHeight: 0,
+    paddingRight: "15px",
+  },
+
+  privacyText: {
+    fontSize: "16px",
+    fontWeight: 400,
+    lineHeight: "150%",
+    letterSpacing: "0.2px",
+    color: "#344054",
+  },
+
+  link: {
+    color: "#4f87ff",
+    textDecoration: "none",
+  },
+
+  subTitle: {
+    fontWeight: 600,
+    fontSize: "16px",
+    lineHeight: "150%",
+    letterSpacing: "0.2px",
+    color: "#101828",
+  },
+
+  optionsContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "14px",
+  },
+
+  optionItem: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+
+  optionLeft: {
+    display: "flex",
+    gap: "12px",
+    alignItems: "center",
+    cursor: "pointer",
+  },
+
+  optionTextContainer: {
+    display: "flex",
+    flexDirection: "column",
+  },
+
+  optionTitle: {
+    fontWeight: 500,
+    fontSize: "16px",
+    lineHeight: "150%",
+    letterSpacing: "0.2px",
+    color: "#101828",
+  },
+
+  optionDescription: {
+    fontWeight: 400,
+    fontSize: "12px",
+    lineHeight: "150%",
+    letterSpacing: "0.2px",
+    color: "#475467",
+    verticalAlign: "middle",
+  },
+
+  checkboxLarge: {
+    height: "20px",
+    width: "20px",
+    padding: "4px",
+    borderRadius: "5px",
+    border: "2px solid #d0d5dd",
+  },
+
+  dataElementsContainer: {
+    marginLeft: "27px",
+    display: "flex",
+    flexDirection: "column",
+  },
+
+  dataElementItem: {
+    display: "flex",
+    alignItems: "center",
+    gap: "10px",
+    justifyContent: "space-between",
+  },
+
+  dataElementText: {
+    fontWeight: 400,
+    fontSize: "14px",
+    lineHeight: "150%",
+    letterSpacing: "0.2px",
+    color: "#344054",
+  },
+
+  checkboxSmall: {
+    height: "16px",
+    width: "16px",
+    padding: "4px",
+    borderRadius: "5px",
+    border: "2px solid #d0d5dd",
+  },
+
+  bottomSection: {
+    display: "flex",
+    justifyContent: "space-between",
+    gap: "29px",
+    paddingTop: "15px",
+    borderTop: "1px solid #e5e7eb",
+    boxShadow: "0 -1px 2px rgba(0, 0, 0, 0.03)",
+    backgroundColor: "#ffffff",
+  },
+
+  button: {
+    width: "100%",
+    borderRadius: "8px",
+    padding: "9px 45px",
+    fontWeight: 400,
+    fontSize: "16px",
+    lineHeight: "150%",
+    letterSpacing: "0.2px",
+    cursor: "pointer",
+  },
+
+  acceptButton: {
+    backgroundColor: "#4f87ff",
+    border: "none",
+    color: "#ffffff",
+  },
+
+  cancelButton: {
+    border: "1px solid #d0d5dd",
+    backgroundColor: "#ffffff",
+    color: "#000000",
+  },
+
+  languageSelectorContainer: {
+    position: "relative",
+  },
+
+  languageDropdown: {
+    position: "absolute",
+    top: "100%",
+    right: 0,
+    backgroundColor: "#ffffff",
+    border: "1px solid #d0d5dd",
+    borderRadius: "4px",
+    boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
+    zIndex: 10,
+    width: "max-content",
+    marginTop: "4px",
+  },
+
+  languageItem: {
+    padding: "8px 12px",
+    cursor: "pointer",
+    fontSize: "12px",
+    color: "#344054",
+    backgroundColor: "#ffffff",
+    borderBottom: "1px solid #e5e7eb",
+  },
+
+  selectedLanguageItem: {
+    backgroundColor: "#f3f4f6",
+    fontWeight: 600,
+  },
+
+  loadingContainer: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "2rem",
+    minHeight: "200px",
+  },
+
+  loadingSpinner: {
+    width: "40px",
+    height: "40px",
+    border: "4px solid #f3f3f3",
+    borderTop: "4px solid #3498db",
+    borderRadius: "50%",
+    animation: "spin 1s linear infinite",
+    marginBottom: "1rem",
+  },
+
+  // Media query styles
+  "@media (max-width: 768px)": {
+    modal: {
+      width: "90%",
+    },
+    content: {
+      margin: "20px",
+    },
+    title: {
+      fontSize: "16px",
+    },
+    subTitle: {
+      fontSize: "14px",
+    },
+    privacyText: {
+      fontSize: "14px",
+    },
+    optionTitle: {
+      fontSize: "14px",
+    },
+    optionDescription: {
+      fontSize: "11px",
+    },
+    dataElementText: {
+      fontSize: "12px",
+    },
+    topRight: {
+      fontSize: "11px",
+      padding: "3px 6px",
+      height: "auto",
+      width: "auto",
+    },
+    languageItem: {
+      fontSize: "11px",
+      padding: "6px 10px",
+    },
+    bottomSection: {
+      flexDirection: "column",
+      gap: "12px",
+    },
+    button: {
+      fontSize: "14px",
+      padding: "10px 20px",
+    },
+    middleSection: {
+      paddingRight: "10px",
+    },
+  },
+} as const;
+
+// Keyframes
+export const keyframes = {
+  overlayFadeIn: {
+    from: {
+      opacity: 0,
+    },
+    to: {
+      opacity: 1,
+    },
+  },
+  spin: {
+    "0%": {
+      transform: "rotate(0deg)",
+    },
+    "100%": {
+      transform: "rotate(360deg)",
+    },
+  },
+} as const;

package/src/RedactoNoticeConsent/types.ts

@@ -0,0 +1,41 @@
+import type { Settings } from "./api/types";
+
+export type Props = Readonly<{
+  noticeId: string;
+  accessToken: string;
+  refreshToken: string;
+  settings?: Partial<Settings>;
+  language?: string;
+  blockUI?: boolean;
+  onAccept: () => void;
+  onDecline: () => void;
+  onError?: (error: Error) => void;
+}>;
+
+export type PurposeTranslations = {
+  [purposeId: string]: string;
+};
+
+export type DataElementTranslations = {
+  [elementId: string]: string;
+};
+
+export type TranslationObject = {
+  notice_text?: string;
+  additional_text?: string;
+  confirm_button_text?: string;
+  decline_button_text?: string;
+  purposes?: PurposeTranslations;
+  data_elements?: DataElementTranslations;
+  purpose_section_heading?: string;
+  privacy_policy_prefix_text?: string;
+  vendor_list_prefix_text?: string;
+  privacy_policy_anchor_text?: string;
+  vendors_list_anchor_text?: string;
+  [key: string]:
+    | string
+    | PurposeTranslations
+    | DataElementTranslations
+    | Record<string, string>
+    | undefined;
+};