@redacto.io/consent-sdk-react 0.0.1 → 0.0.3

package/src/RedactoNoticeConsent/api/index.ts

@@ -7,14 +7,14 @@ import type {
   SubmitConsentEventParams,
 } from "./types";
 
-const BASE_URL = "https://api.redacto.tech";
-const BACKEND_URL = "http://localhost:3000";
+const BASE_URL = "https://api.redacto.tech/consent";
 
 export const fetchConsentContent = async ({
   noticeId,
   accessToken,
-  refreshToken,
+  baseUrl,
   language = "en",
+  specific_uuid,
 }: FetchConsentContentParams): Promise<ConsentContent> => {
   try {
     const decodedToken = jwtDecode(accessToken) as RedactoJwtPayload;
@@ -22,46 +22,31 @@ export const fetchConsentContent = async ({
     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",
-        },
-      }
+    const apiBaseUrl = baseUrl || BASE_URL;
+
+    const url = new URL(
+      `${apiBaseUrl}/public/organisations/${ORGANISATION_UUID}/workspaces/${WORKSPACE_UUID}/notices/${noticeId}`
     );
 
+    if (specific_uuid) {
+      url.searchParams.append("specific_uuid", specific_uuid);
+    }
+
+    const response = await fetch(url.toString(), {
+      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;
-      }
+      const error = new Error("Unauthorized") as Error & {
+        status?: number;
+      };
+      error.status = 401;
+      throw error;
     }
 
     if (response.status === 409) {
@@ -88,9 +73,11 @@ export const fetchConsentContent = async ({
 
 export const submitConsentEvent = async ({
   accessToken,
+  baseUrl,
   noticeUuid,
   purposes,
   declined,
+  meta_data,
 }: SubmitConsentEventParams): Promise<void> => {
   try {
     const primaryEmail = localStorage.getItem("userEmail");
@@ -108,7 +95,7 @@ export const submitConsentEvent = async ({
           uuid: purpose.uuid,
           name: purpose.name,
           description: purpose.description,
-          industries: purpose.industries,
+          industries: purpose.industries || "",
           selected: purpose.selected,
           data_elements: purpose.data_elements.map((element) => ({
             uuid: element.uuid,
@@ -119,10 +106,13 @@ export const submitConsentEvent = async ({
           })),
         })),
       },
+      meta_data,
     };
 
+    const apiBaseUrl = baseUrl || BASE_URL;
+
     const response = await fetch(
-      `${BASE_URL}/consent/public/consent-events/organisations/${ORGANISATION_UUID}/workspaces/${WORKSPACE_UUID}/by-token`,
+      `${apiBaseUrl}/public/organisations/${ORGANISATION_UUID}/workspaces/${WORKSPACE_UUID}/by-token`,
       {
         method: "POST",
         headers: {

package/src/RedactoNoticeConsent/api/types.ts

@@ -41,12 +41,12 @@ export type ConsentContent = {
         uuid: string;
         name: string;
         description: string;
-        industries: string;
+        industries?: string;
         data_elements: {
           uuid: string;
           name: string;
           description: string | null;
-          industries: string | null;
+          industries?: string | null;
           enabled: boolean;
           required: boolean;
         }[];
@@ -114,9 +114,7 @@ export type Settings = {
       selectedTextColor?: string;
     };
   };
-  link: {
-    color: string;
-  };
+  link: string;
   borderRadius?: string;
   backgroundColor?: string;
   headingColor?: string;
@@ -128,7 +126,9 @@ export type FetchConsentContentParams = {
   noticeId: string;
   accessToken: string;
   refreshToken: string;
+  baseUrl?: string;
   language?: string;
+  specific_uuid?: string;
 };
 
 export type ConsentEventPayload = {
@@ -143,7 +143,7 @@ export type ConsentEventPayload = {
       uuid: string;
       name: string;
       description: string;
-      industries: string;
+      industries?: string;
       selected: boolean;
       data_elements: Array<{
         uuid: string;
@@ -154,6 +154,9 @@ export type ConsentEventPayload = {
       }>;
     }>;
   };
+  meta_data?: {
+    specific_uuid: string;
+  };
 };
 
 export type DataElement = {
@@ -168,14 +171,18 @@ export type Purpose = {
   uuid: string;
   name: string;
   description: string;
-  industries: string;
+  industries?: string;
   selected: boolean;
   data_elements: Array<DataElement>;
 };
 
 export type SubmitConsentEventParams = {
   accessToken: string;
+  baseUrl?: string;
   noticeUuid: string;
   purposes: Array<Purpose>;
   declined: boolean;
+  meta_data?: {
+    specific_uuid: string;
+  };
 };

package/src/RedactoNoticeConsent/injectStyles.ts

@@ -0,0 +1,102 @@
+// CSS injection utility for the consent SDK
+let stylesInjected = false;
+
+export const injectCheckboxStyles = () => {
+  if (stylesInjected || typeof document === 'undefined') {
+    return;
+  }
+
+  const STYLE_ID = 'redacto-consent-checkbox-styles';
+  
+  // Check if styles are already injected
+  if (document.getElementById(STYLE_ID)) {
+    stylesInjected = true;
+    return;
+  }
+
+  const style = document.createElement('style');
+  style.id = STYLE_ID;
+  style.textContent = `
+    /* Redacto Consent SDK Checkbox Styles */
+    .redacto-checkbox-large {
+      appearance: none !important;
+      -webkit-appearance: none !important;
+      -moz-appearance: none !important;
+      height: 20px !important;
+      width: 20px !important;
+      border: 2px solid #d0d5dd !important;
+      border-radius: 5px !important;
+      background-color: transparent !important;
+      cursor: pointer !important;
+      position: relative !important;
+      box-sizing: border-box !important;
+      margin: 0 !important;
+      padding: 4px !important;
+    }
+
+    .redacto-checkbox-small {
+      appearance: none !important;
+      -webkit-appearance: none !important;
+      -moz-appearance: none !important;
+      height: 16px !important;
+      width: 16px !important;
+      border: 2px solid #d0d5dd !important;
+      border-radius: 5px !important;
+      background-color: transparent !important;
+      cursor: pointer !important;
+      position: relative !important;
+      box-sizing: border-box !important;
+      margin: 0 !important;
+      padding: 4px !important;
+    }
+
+    .redacto-checkbox-large:checked {
+      background-color: #4f87ff !important;
+      border-color: #4f87ff !important;
+    }
+
+    .redacto-checkbox-small:checked {
+      background-color: #4f87ff !important;
+      border-color: #4f87ff !important;
+    }
+
+    .redacto-checkbox-large:checked::after {
+      content: '' !important;
+      position: absolute !important;
+      left: 50% !important;
+      top: 50% !important;
+      transform: translate(-50%, -50%) rotate(45deg) !important;
+      width: 4px !important;
+      height: 8px !important;
+      border: solid white !important;
+      border-width: 0 2px 2px 0 !important;
+      box-sizing: border-box !important;
+    }
+
+    .redacto-checkbox-small:checked::after {
+      content: '' !important;
+      position: absolute !important;
+      left: 50% !important;
+      top: 50% !important;
+      transform: translate(-50%, -50%) rotate(45deg) !important;
+      width: 3px !important;
+      height: 6px !important;
+      border: solid white !important;
+      border-width: 0 1.5px 1.5px 0 !important;
+      box-sizing: border-box !important;
+    }
+
+    .redacto-checkbox-large:focus {
+      outline: 2px solid #4f87ff !important;
+      outline-offset: 2px !important;
+    }
+
+    .redacto-checkbox-small:focus {
+      outline: 2px solid #4f87ff !important;
+      outline-offset: 2px !important;
+    }
+  `;
+
+  document.head.appendChild(style);
+  stylesInjected = true;
+};

package/src/RedactoNoticeConsent/styles.ts

@@ -12,6 +12,9 @@ export const styles = {
     zIndex: 999,
     animation: "overlayFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1)",
     pointerEvents: "all",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
   },
 
   modal: {
@@ -28,6 +31,11 @@ export const styles = {
     flexDirection: "column",
     maxHeight: "90vh",
     zIndex: 1000,
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
+    textAlign: "left",
+    fontFamily: "inherit",
   },
 
   content: {
@@ -37,6 +45,8 @@ export const styles = {
     flexGrow: 1,
     overflow: "hidden",
     minHeight: 0,
+    boxSizing: "border-box",
+    textAlign: "left",
   },
 
   topSection: {
@@ -47,18 +57,27 @@ export const styles = {
     borderBottom: "1px solid #e5e7eb",
     boxShadow: "0 1px 2px rgba(0, 0, 0, 0.03)",
     backgroundColor: "#ffffff",
+    margin: 0,
+    boxSizing: "border-box",
+    textAlign: "left",
   },
 
   topLeft: {
     display: "flex",
     alignItems: "center",
     gap: "10px",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
   },
 
   logo: {
     height: "32px",
     width: "auto",
     objectFit: "contain",
+    margin: 0,
+    padding: 0,
+    display: "block",
   },
 
   title: {
@@ -68,6 +87,9 @@ export const styles = {
     letterSpacing: "0.2px",
     verticalAlign: "middle",
     color: "#101828",
+    margin: 0,
+    padding: 0,
+    textAlign: "left",
   },
 
   topRight: {
@@ -84,6 +106,9 @@ export const styles = {
     verticalAlign: "middle",
     color: "#344054",
     gap: "5px",
+    margin: 0,
+    boxSizing: "border-box",
+    textAlign: "left",
     cursor: "pointer",
     backgroundColor: "#ffffff",
   },
@@ -97,6 +122,8 @@ export const styles = {
     overflowY: "auto",
     minHeight: 0,
     paddingRight: "15px",
+    boxSizing: "border-box",
+    textAlign: "left",
   },
 
   privacyText: {
@@ -105,11 +132,17 @@ export const styles = {
     lineHeight: "150%",
     letterSpacing: "0.2px",
     color: "#344054",
+    margin: 0,
+    padding: 0,
+    textAlign: "left",
   },
 
   link: {
     color: "#4f87ff",
     textDecoration: "none",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
   },
 
   subTitle: {
@@ -118,18 +151,27 @@ export const styles = {
     lineHeight: "150%",
     letterSpacing: "0.2px",
     color: "#101828",
+    margin: 0,
+    padding: 0,
+    textAlign: "left",
   },
 
   optionsContainer: {
     display: "flex",
     flexDirection: "column",
     gap: "14px",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
   },
 
   optionItem: {
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
   },
 
   optionLeft: {
@@ -137,11 +179,17 @@ export const styles = {
     gap: "12px",
     alignItems: "center",
     cursor: "pointer",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
   },
 
   optionTextContainer: {
     display: "flex",
     flexDirection: "column",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
   },
 
   optionTitle: {
@@ -150,6 +198,9 @@ export const styles = {
     lineHeight: "150%",
     letterSpacing: "0.2px",
     color: "#101828",
+    margin: 0,
+    padding: 0,
+    textAlign: "left",
   },
 
   optionDescription: {
@@ -159,6 +210,9 @@ export const styles = {
     letterSpacing: "0.2px",
     color: "#475467",
     verticalAlign: "middle",
+    margin: 0,
+    padding: 0,
+    textAlign: "left",
   },
 
   checkboxLarge: {
@@ -167,12 +221,24 @@ export const styles = {
     padding: "4px",
     borderRadius: "5px",
     border: "2px solid #d0d5dd",
+    margin: 0,
+    boxSizing: "border-box",
+    appearance: "none",
+    WebkitAppearance: "none",
+    MozAppearance: "none",
+    cursor: "pointer",
+    position: "relative",
+    backgroundColor: "transparent",
   },
 
   dataElementsContainer: {
     marginLeft: "27px",
     display: "flex",
     flexDirection: "column",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
+    paddingLeft: "22px",
   },
 
   dataElementItem: {
@@ -180,6 +246,10 @@ export const styles = {
     alignItems: "center",
     gap: "10px",
     justifyContent: "space-between",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
+    minHeight: "24px",
   },
 
   dataElementText: {
@@ -188,6 +258,9 @@ export const styles = {
     lineHeight: "150%",
     letterSpacing: "0.2px",
     color: "#344054",
+    margin: 0,
+    padding: 0,
+    textAlign: "left",
   },
 
   checkboxSmall: {
@@ -196,6 +269,14 @@ export const styles = {
     padding: "4px",
     borderRadius: "5px",
     border: "2px solid #d0d5dd",
+    margin: 0,
+    boxSizing: "border-box",
+    appearance: "none",
+    WebkitAppearance: "none",
+    MozAppearance: "none",
+    cursor: "pointer",
+    position: "relative",
+    backgroundColor: "transparent",
   },
 
   bottomSection: {
@@ -206,6 +287,8 @@ export const styles = {
     borderTop: "1px solid #e5e7eb",
     boxShadow: "0 -1px 2px rgba(0, 0, 0, 0.03)",
     backgroundColor: "#ffffff",
+    margin: 0,
+    boxSizing: "border-box",
   },
 
   button: {
@@ -217,6 +300,9 @@ export const styles = {
     lineHeight: "150%",
     letterSpacing: "0.2px",
     cursor: "pointer",
+    margin: 0,
+    boxSizing: "border-box",
+    textAlign: "center",
   },
 
   acceptButton: {
@@ -233,6 +319,9 @@ export const styles = {
 
   languageSelectorContainer: {
     position: "relative",
+    margin: 0,
+    padding: 0,
+    boxSizing: "border-box",
   },
 
   languageDropdown: {
@@ -246,6 +335,9 @@ export const styles = {
     zIndex: 10,
     width: "max-content",
     marginTop: "4px",
+    padding: 0,
+    boxSizing: "border-box",
+    textAlign: "left",
   },
 
   languageItem: {
@@ -255,6 +347,9 @@ export const styles = {
     color: "#344054",
     backgroundColor: "#ffffff",
     borderBottom: "1px solid #e5e7eb",
+    margin: 0,
+    boxSizing: "border-box",
+    textAlign: "left",
   },
 
   selectedLanguageItem: {
@@ -269,6 +364,8 @@ export const styles = {
     justifyContent: "center",
     padding: "2rem",
     minHeight: "200px",
+    margin: 0,
+    boxSizing: "border-box",
   },
 
   loadingSpinner: {
@@ -279,55 +376,7 @@ export const styles = {
     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",
-    },
+    boxSizing: "border-box",
   },
 } as const;
 

package/src/RedactoNoticeConsent/types.ts

@@ -4,12 +4,14 @@ export type Props = Readonly<{
   noticeId: string;
   accessToken: string;
   refreshToken: string;
+  baseUrl?: string;
   settings?: Partial<Settings>;
   language?: string;
   blockUI?: boolean;
   onAccept: () => void;
   onDecline: () => void;
   onError?: (error: Error) => void;
+  applicationId?: string;
 }>;
 
 export type PurposeTranslations = {

package/tests/mocks.ts

@@ -95,7 +95,7 @@ export const defaultProps = {
   accessToken: "mock-token",
   refreshToken: "mock-refresh-token",
   language: "en",
-  blockUI: false,
+  blockUI: true,
   onAccept: vi.fn(),
   onDecline: vi.fn(),
   onError: vi.fn(),
@@ -109,6 +109,6 @@ export const defaultProps = {
       decline: { backgroundColor: "#ffffff", textColor: "#000000" },
       language: { backgroundColor: "#ffffff", textColor: "#344054" },
     },
-    link: { color: "#4f87ff" },
+    link: "#4f87ff",
   },
 } as const;