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

package/src/RedactoNoticeConsent/RedactoNoticeConsent.tsx

@@ -1,27 +1,31 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState, useRef } from "react";
 import { fetchConsentContent, submitConsentEvent } from "./api";
 import type { ConsentContent } from "./api/types";
 import type { Props, TranslationObject } from "./types";
 import { styles } from "./styles";
 import logo from "./assets/redacto-logo.png";
 import { useMediaQuery } from "./useMediaQuery";
+import { injectCheckboxStyles } from "./injectStyles";
 
 export const RedactoNoticeConsent = ({
   noticeId,
   accessToken,
   refreshToken,
+  baseUrl,
   language = "en",
-  blockUI = false,
+  blockUI = true,
   onAccept,
   onDecline,
   onError,
   settings,
+  applicationId,
 }: Props) => {
   const [content, setContent] = useState<
     ConsentContent["detail"]["active_config"] | null
   >(null);
   const [isLoading, setIsLoading] = useState(true);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isRefreshingToken, setIsRefreshingToken] = useState(false);
   const [isLanguageDropdownOpen, setIsLanguageDropdownOpen] = useState(false);
   const [selectedLanguage, setSelectedLanguage] = useState<string>(language);
   const [collapsedPurposes, setCollapsedPurposes] = useState<
@@ -34,6 +38,13 @@ export const RedactoNoticeConsent = ({
     Record<string, boolean>
   >({});
   const [hasAlreadyConsented, setHasAlreadyConsented] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [fetchError, setFetchError] = useState<Error | null>(null);
+  const modalRef = useRef<HTMLDivElement>(null);
+  const firstFocusableRef = useRef<HTMLButtonElement>(null);
+  const lastFocusableRef = useRef<HTMLButtonElement>(null);
+  const MAX_REFRESH_ATTEMPTS = 1;
+  const [refreshAttempts, setRefreshAttempts] = useState(0);
 
   // Add media query hooks
   const isMobile = useMediaQuery("(max-width: 768px)");
@@ -86,6 +97,28 @@ export const RedactoNoticeConsent = ({
       middleSection: {
         paddingRight: isMobile ? "10px" : "15px",
       },
+      errorDialog: {
+        padding: isMobile ? "12px" : "16px",
+        maxWidth: isMobile ? "100%" : "400px",
+        marginBottom: isMobile ? "16px" : "20px",
+      },
+      errorTitle: {
+        fontSize: isMobile ? "16px" : "18px",
+        margin: isMobile ? "0 0 8px 0" : "0 0 12px 0",
+      },
+      errorMessage: {
+        fontSize: isMobile ? "12px" : "14px",
+        margin: isMobile ? "0 0 12px 0" : "0 0 16px 0",
+      },
+      errorButton: {
+        padding: isMobile ? "6px 12px" : "8px 16px",
+        fontSize: isMobile ? "12px" : "14px",
+      },
+      closeButton: {
+        top: isMobile ? "4px" : "8px",
+        right: isMobile ? "4px" : "8px",
+        padding: isMobile ? "2px" : "4px",
+      },
     }),
     [isMobile]
   );
@@ -157,71 +190,91 @@ export const RedactoNoticeConsent = ({
     return defaultText;
   };
 
-  useEffect(() => {
-    const fetchNotice = async () => {
-      setIsLoading(true);
-      try {
-        const consentContentData = await fetchConsentContent({
-          noticeId,
-          accessToken,
-          refreshToken,
-          language,
-        });
-        setContent(consentContentData.detail.active_config);
-        if (consentContentData.detail.active_config.default_language) {
-          setSelectedLanguage(
-            consentContentData.detail.active_config.default_language
-          );
-        }
-        const initialCollapsedState =
-          consentContentData.detail.active_config.purposes.reduce(
-            (acc, purpose) => ({
+  const fetchNotice = async () => {
+    setIsLoading(true);
+    setFetchError(null);
+    try {
+      const consentContentData = await fetchConsentContent({
+        noticeId,
+        accessToken,
+        refreshToken,
+        baseUrl,
+        language,
+        specific_uuid: applicationId,
+      });
+      setContent(consentContentData.detail.active_config);
+      if (consentContentData.detail.active_config.default_language) {
+        setSelectedLanguage(
+          consentContentData.detail.active_config.default_language
+        );
+      }
+      const initialCollapsedState =
+        consentContentData.detail.active_config.purposes.reduce(
+          (acc, purpose) => ({
+            ...acc,
+            [purpose.uuid]: true,
+          }),
+          {}
+        );
+      setCollapsedPurposes(initialCollapsedState);
+
+      // Initialize selected states
+      const initialPurposeState: Record<string, boolean> =
+        consentContentData.detail.active_config.purposes.reduce(
+          (acc: Record<string, boolean>, purpose) => {
+            return {
               ...acc,
-              [purpose.uuid]: true,
-            }),
-            {}
-          );
-        setCollapsedPurposes(initialCollapsedState);
-
-        // Initialize selected states
-        const initialPurposeState: Record<string, boolean> =
-          consentContentData.detail.active_config.purposes.reduce(
-            (acc: Record<string, boolean>, purpose) => {
-              return {
-                ...acc,
-                [purpose.uuid]: false, // Initialize all purposes as unchecked
-              };
-            },
-            {}
-          );
-        setSelectedPurposes(initialPurposeState);
-
-        const initialDataElementState: Record<string, boolean> =
-          consentContentData.detail.active_config.purposes.reduce(
-            (acc: Record<string, boolean>, purpose) => {
-              purpose.data_elements.forEach((element) => {
-                const combinedId = `${purpose.uuid}-${element.uuid}`;
-                acc[combinedId] = false; // Initialize all data elements as unchecked
-              });
-              return acc;
-            },
-            {}
-          );
-        setSelectedDataElements(initialDataElementState);
-      } catch (err: unknown) {
-        console.error(err);
-        if ((err as Error & { status?: number }).status === 409) {
-          setHasAlreadyConsented(true);
-        } else {
-          onError?.(err as Error);
-        }
-      } finally {
-        setIsLoading(false);
+              [purpose.uuid]: false,
+            };
+          },
+          {}
+        );
+      setSelectedPurposes(initialPurposeState);
+
+      const initialDataElementState: Record<string, boolean> =
+        consentContentData.detail.active_config.purposes.reduce(
+          (acc: Record<string, boolean>, purpose) => {
+            purpose.data_elements.forEach((element) => {
+              const combinedId = `${purpose.uuid}-${element.uuid}`;
+              acc[combinedId] = false;
+            });
+            return acc;
+          },
+          {}
+        );
+      setSelectedDataElements(initialDataElementState);
+    } catch (err: unknown) {
+      console.error(err);
+      const error = err as Error & { status?: number };
+      setFetchError(error);
+      if (error.status === 401 && refreshAttempts < MAX_REFRESH_ATTEMPTS) {
+        setRefreshAttempts((c) => c + 1);
+        setIsRefreshingToken(true);
+        onError?.(error);
+      } else if (error.status === 409) {
+        setHasAlreadyConsented(true);
+      } else {
+        onError?.(error);
       }
-    };
+    } finally {
+      setIsLoading(false);
+      setIsRefreshingToken(false);
+    }
+  };
 
+  useEffect(() => {
+    // Inject checkbox styles when component mounts
+    injectCheckboxStyles();
     fetchNotice();
-  }, [noticeId, accessToken, refreshToken, language, onError]);
+  }, [
+    noticeId,
+    accessToken,
+    refreshToken,
+    language,
+    onError,
+    applicationId,
+    isRefreshingToken,
+  ]);
 
   const togglePurposeCollapse = (purposeUuid: string) => {
     setCollapsedPurposes((prev) => ({
@@ -301,9 +354,11 @@ export const RedactoNoticeConsent = ({
   const handleAccept = async () => {
     try {
       setIsSubmitting(true);
+      setErrorMessage(null);
       if (content) {
         await submitConsentEvent({
           accessToken,
+          baseUrl,
           noticeUuid: content.notice_uuid,
           purposes: content.purposes.map((purpose) => ({
             ...purpose,
@@ -317,11 +372,20 @@ export const RedactoNoticeConsent = ({
             })),
           })),
           declined: false,
+          meta_data: applicationId
+            ? { specific_uuid: applicationId }
+            : undefined,
         });
       }
       onAccept?.();
     } catch (error) {
       console.error("Error submitting consent:", error);
+      const err = error as Error & { status?: number };
+      if (err.status === 500) {
+        setErrorMessage(
+          "An error occurred while submitting your consent. Please try again later."
+        );
+      }
       onError?.(error as Error);
     } finally {
       setIsSubmitting(false);
@@ -378,7 +442,10 @@ export const RedactoNoticeConsent = ({
 
   const acceptButtonStyle = {
     ...buttonStyle,
-    backgroundColor: settings?.button?.accept?.backgroundColor || "#4f87ff",
+    backgroundColor:
+      settings?.button?.accept?.backgroundColor ||
+      content?.primary_color ||
+      "#4f87ff",
     color: settings?.button?.accept?.textColor || "#ffffff",
   };
 
@@ -390,7 +457,7 @@ export const RedactoNoticeConsent = ({
   };
 
   const linkStyle = {
-    color: settings?.link?.color || "#4f87ff",
+    color: settings?.link || content?.secondary_color || "#4f87ff",
   };
 
   const languageSelectorStyle = {
@@ -420,12 +487,74 @@ export const RedactoNoticeConsent = ({
     backgroundColor: settings?.backgroundColor || "#ffffff",
   };
 
+  const handleCloseError = () => {
+    setErrorMessage(null);
+  };
+
+  // Add keyboard event handler for the modal
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!modalRef.current) return;
+
+      const focusableElements = modalRef.current.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      if (!focusableElements.length) return;
+
+      if (event.key === "Escape") {
+        handleDecline();
+      }
+
+      if (event.key === "Tab") {
+        const firstElement = focusableElements[0] as HTMLElement;
+        const lastElement = focusableElements[
+          focusableElements.length - 1
+        ] as HTMLElement;
+
+        if (event.shiftKey) {
+          if (document.activeElement === firstElement) {
+            event.preventDefault();
+            lastElement.focus();
+          }
+        } else {
+          if (document.activeElement === lastElement) {
+            event.preventDefault();
+            firstElement.focus();
+          }
+        }
+      }
+    };
+
+    const modal = modalRef.current;
+    modal?.addEventListener("keydown", handleKeyDown);
+
+    // Focus the first focusable element when modal opens
+    if (modal && !isLoading) {
+      const focusableElements = modal.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      const firstElement = focusableElements[0] as HTMLElement;
+      firstElement?.focus();
+    }
+
+    return () => {
+      modal?.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isLoading, handleDecline]);
+
   return (
     <>
       {hasAlreadyConsented ? null : (
         <>
-          {blockUI && <div style={styles.overlay} aria-hidden="true" />}
+          {blockUI && (
+            <div
+              style={styles.overlay}
+              aria-hidden="true"
+              role="presentation"
+            />
+          )}
           <div
+            ref={modalRef}
             style={{
               ...styles.modal,
               ...responsiveStyles.modal,
@@ -434,22 +563,178 @@ export const RedactoNoticeConsent = ({
             role="dialog"
             aria-modal="true"
             aria-labelledby="privacy-notice-title"
+            aria-describedby="privacy-notice-description"
+            tabIndex={-1}
           >
-            {isLoading ? (
+            {isLoading || isRefreshingToken ? (
               <div style={styles.loadingContainer}>
                 <div style={styles.loadingSpinner}></div>
                 <p style={{ ...styles.privacyText, ...textStyle }}>
-                  Loading...
+                  {isRefreshingToken ? "Refreshing session..." : "Loading..."}
                 </p>
               </div>
+            ) : fetchError ? (
+              <div
+                style={{
+                  ...styles.content,
+                  ...responsiveStyles.content,
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  textAlign: "center",
+                  padding: "40px 20px",
+                }}
+              >
+                <div
+                  style={{
+                    color: "#DC2626",
+                    padding: responsiveStyles.errorDialog.padding,
+                    borderRadius: "8px",
+                    marginBottom: responsiveStyles.errorDialog.marginBottom,
+                    width: "100%",
+                    maxWidth: responsiveStyles.errorDialog.maxWidth,
+                    position: "relative",
+                  }}
+                >
+                  <button
+                    onClick={handleDecline}
+                    style={{
+                      position: "absolute",
+                      top: responsiveStyles.closeButton.top,
+                      right: responsiveStyles.closeButton.right,
+                      background: "none",
+                      border: "none",
+                      color: "#DC2626",
+                      cursor: "pointer",
+                      padding: responsiveStyles.closeButton.padding,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                    }}
+                    aria-label="Close error message"
+                  >
+                    <svg
+                      width={isMobile ? "14" : "16"}
+                      height={isMobile ? "14" : "16"}
+                      viewBox="0 0 16 16"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                      aria-hidden="true"
+                    >
+                      <path
+                        d="M12 4L4 12M4 4L12 12"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
+                  </button>
+                  <h3
+                    style={{
+                      margin: responsiveStyles.errorTitle.margin,
+                      fontSize: responsiveStyles.errorTitle.fontSize,
+                      fontWeight: "600",
+                    }}
+                  >
+                    Error Loading Consent Notice
+                  </h3>
+                  <p
+                    style={{
+                      margin: responsiveStyles.errorMessage.margin,
+                      fontSize: responsiveStyles.errorMessage.fontSize,
+                      lineHeight: "1.5",
+                    }}
+                  >
+                    {fetchError.message ||
+                      "Failed to load consent notice. Please try again."}
+                  </p>
+                  <button
+                    onClick={fetchNotice}
+                    style={{
+                      backgroundColor: "#DC2626",
+                      color: "#FFFFFF",
+                      border: "none",
+                      padding: responsiveStyles.errorButton.padding,
+                      borderRadius: "6px",
+                      cursor: "pointer",
+                      fontSize: responsiveStyles.errorButton.fontSize,
+                      fontWeight: "500",
+                      transition: "background-color 0.2s",
+                    }}
+                    onMouseOver={(e) =>
+                      (e.currentTarget.style.backgroundColor = "#B91C1C")
+                    }
+                    onMouseOut={(e) =>
+                      (e.currentTarget.style.backgroundColor = "#DC2626")
+                    }
+                  >
+                    Refresh
+                  </button>
+                </div>
+              </div>
             ) : (
               <div style={{ ...styles.content, ...responsiveStyles.content }}>
+                {errorMessage && (
+                  <div
+                    role="alert"
+                    style={{
+                      backgroundColor: "#FEE2E2",
+                      color: "#DC2626",
+                      padding: "12px",
+                      borderRadius: "6px",
+                      marginBottom: "16px",
+                      fontSize: "14px",
+                      border: "1px solid #FCA5A5",
+                      position: "relative",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                    }}
+                  >
+                    <span>{errorMessage}</span>
+                    <button
+                      type="button"
+                      onClick={handleCloseError}
+                      style={{
+                        background: "none",
+                        border: "none",
+                        color: "#DC2626",
+                        cursor: "pointer",
+                        padding: "4px",
+                        marginLeft: "8px",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                      }}
+                      aria-label="Close error message"
+                    >
+                      <svg
+                        width="16"
+                        height="16"
+                        viewBox="0 0 16 16"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                        aria-hidden="true"
+                      >
+                        <path
+                          d="M12 4L4 12M4 4L12 12"
+                          stroke="currentColor"
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        />
+                      </svg>
+                    </button>
+                  </div>
+                )}
                 <div style={{ ...styles.topSection, ...sectionStyle }}>
                   <div style={styles.topLeft}>
                     <img
                       style={styles.logo}
                       src={content?.logo_url || logo}
-                      alt="logo"
+                      alt="Redacto Logo"
                     />
                     <h2
                       id="privacy-notice-title"
@@ -464,6 +749,7 @@ export const RedactoNoticeConsent = ({
                   </div>
                   <div style={styles.languageSelectorContainer}>
                     <button
+                      ref={firstFocusableRef}
                       style={{
                         ...styles.topRight,
                         ...responsiveStyles.topRight,
@@ -472,6 +758,7 @@ export const RedactoNoticeConsent = ({
                       onClick={toggleLanguageDropdown}
                       aria-expanded={isLanguageDropdownOpen}
                       aria-haspopup="listbox"
+                      aria-controls="language-listbox"
                     >
                       {selectedLanguage}
                       <svg
@@ -488,12 +775,14 @@ export const RedactoNoticeConsent = ({
                         strokeLinecap="round"
                         strokeLinejoin="round"
                         style={{ flexShrink: 0, marginLeft: "4px" }}
+                        aria-hidden="true"
                       >
                         <path d="M4 6l4 4 4-4" />
                       </svg>
                     </button>
                     {isLanguageDropdownOpen && (
                       <ul
+                        id="language-listbox"
                         style={{
                           ...styles.languageDropdown,
                           ...languageSelectorStyle,
@@ -525,6 +814,7 @@ export const RedactoNoticeConsent = ({
                   </div>
                 </div>
                 <div
+                  id="privacy-notice-description"
                   style={{
                     ...styles.middleSection,
                     ...responsiveStyles.middleSection,
@@ -548,6 +838,7 @@ export const RedactoNoticeConsent = ({
                       href={content?.privacy_policy_url || "#"}
                       target="_blank"
                       rel="noopener noreferrer"
+                      aria-label="Privacy Policy (opens in new tab)"
                     >
                       [
                       {getTranslatedText(
@@ -560,7 +851,9 @@ export const RedactoNoticeConsent = ({
                     <a
                       style={{ ...styles.link, ...linkStyle }}
                       href={content?.sub_processors_url || "#"}
-                      target=""
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      aria-label="Vendors List (opens in new tab)"
                     >
                       [
                       {getTranslatedText(
@@ -590,6 +883,16 @@ export const RedactoNoticeConsent = ({
                           <div
                             style={styles.optionLeft}
                             onClick={() => togglePurposeCollapse(purpose.uuid)}
+                            role="button"
+                            tabIndex={0}
+                            aria-expanded={!collapsedPurposes[purpose.uuid]}
+                            aria-controls={`purpose-${purpose.uuid}`}
+                            onKeyDown={(e) => {
+                              if (e.key === "Enter" || e.key === " ") {
+                                e.preventDefault();
+                                togglePurposeCollapse(purpose.uuid);
+                              }
+                            }}
                           >
                             <div
                               style={{
@@ -615,6 +918,7 @@ export const RedactoNoticeConsent = ({
                                     : "rotate(0deg)",
                                   transition: "transform 0.3s ease",
                                 }}
+                                aria-hidden="true"
                               >
                                 <path d="M1 1L6 6L1 11" />
                               </svg>
@@ -649,18 +953,26 @@ export const RedactoNoticeConsent = ({
                             </div>
                           </div>
                           <input
-                            style={styles.checkboxLarge}
+                            className="redacto-checkbox-large"
                             type="checkbox"
                             checked={selectedPurposes[purpose.uuid] || false}
                             onChange={() =>
                               handlePurposeCheckboxChange(purpose.uuid)
                             }
+                            aria-label={`Select all data elements for ${getTranslatedText(
+                              `purposes.name`,
+                              purpose.name,
+                              purpose.uuid
+                            )}`}
                           />
                         </div>
                         {!collapsedPurposes[purpose.uuid] &&
                           purpose.data_elements &&
                           purpose.data_elements.length > 0 && (
-                            <div style={styles.dataElementsContainer}>
+                            <div
+                              id={`purpose-${purpose.uuid}`}
+                              style={styles.dataElementsContainer}
+                            >
                               {purpose.data_elements.map((dataElement) => (
                                 <div
                                   key={dataElement.uuid}
@@ -684,13 +996,14 @@ export const RedactoNoticeConsent = ({
                                           color: "red",
                                           marginLeft: "4px",
                                         }}
+                                        aria-label="required"
                                       >
                                         *
                                       </span>
                                     )}
                                   </span>
                                   <input
-                                    style={styles.checkboxSmall}
+                                    className="redacto-checkbox-small"
                                     type="checkbox"
                                     checked={
                                       selectedDataElements[
@@ -703,6 +1016,11 @@ export const RedactoNoticeConsent = ({
                                         purpose.uuid
                                       )
                                     }
+                                    aria-label={`Select ${getTranslatedText(
+                                      `data_elements.name`,
+                                      dataElement.name,
+                                      dataElement.uuid
+                                    )}${dataElement.required ? " (required)" : ""}`}
                                   />
                                 </div>
                               ))}
@@ -720,6 +1038,7 @@ export const RedactoNoticeConsent = ({
                   }}
                 >
                   <button
+                    ref={lastFocusableRef}
                     style={{
                       ...styles.button,
                       ...responsiveStyles.button,
@@ -729,6 +1048,10 @@ export const RedactoNoticeConsent = ({
                     }}
                     onClick={handleAccept}
                     disabled={acceptDisabled}
+                    aria-label={getTranslatedText(
+                      "confirm_button_text",
+                      content?.confirm_button_text || "Accept"
+                    )}
                   >
                     {isSubmitting
                       ? "Processing..."
@@ -746,6 +1069,10 @@ export const RedactoNoticeConsent = ({
                     }}
                     onClick={handleDecline}
                     disabled={isSubmitting}
+                    aria-label={getTranslatedText(
+                      "decline_button_text",
+                      content?.decline_button_text || "Decline"
+                    )}
                   >
                     {isSubmitting
                       ? "Processing..."