@redacto.io/consent-sdk-react 10.0.0-beta.1 → 10.0.0-beta.12

package/src/RedactoNoticeConsentInline/RedactoNoticeConsentInline.tsx

@@ -1,629 +0,0 @@
-import { useEffect, useMemo, useState, useRef, useCallback, memo } from "react";
-import { fetchConsentContent, submitConsentEvent } from "./api";
-import type { ConsentContent } from "./api/types";
-import type { Props, TranslationObject } from "./types";
-import { styles } from "./styles";
-import { useMediaQuery } from "./useMediaQuery";
-import { injectSpinnerAnimation } from "./injectStyles";
-
-const RedactoConsentInlineComponent = ({
-  org_uuid,
-  workspace_uuid,
-  notice_uuid,
-  accessToken,
-  baseUrl,
-  ledgerBaseUrl,
-  language = "en",
-  onAccept,
-  onError,
-  onValidationChange,
-  settings,
-  applicationId,
-}: Props) => {
-  const [content, setContent] = useState<
-    ConsentContent["detail"]["active_config"] | null
-  >(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [selectedLanguage, setSelectedLanguage] = useState<string>(language);
-  const [collapsedPurposes, setCollapsedPurposes] = useState<
-    Record<string, boolean>
-  >({});
-  const [selectedPurposes, setSelectedPurposes] = useState<
-    Record<string, boolean>
-  >({});
-  const [selectedDataElements, setSelectedDataElements] = useState<
-    Record<string, boolean>
-  >({});
-  const [hasAlreadyConsented, setHasAlreadyConsented] = useState(false);
-  const [fetchError, setFetchError] = useState<Error | null>(null);
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
-
-  // Ref to track if we've already submitted consent to prevent duplicate submissions
-  const hasSubmittedRef = useRef(false);
-
-  // Inject spinner animation for loading indicator
-  useEffect(() => {
-    injectSpinnerAnimation();
-  }, []);
-
-  // Add media query hooks
-  const isMobile = useMediaQuery("(max-width: 768px)");
-
-  // Responsive styles
-  const responsiveStyles = useMemo(
-    () => ({
-      optionTitle: {
-        fontSize: isMobile ? "14px" : "16px",
-      },
-      optionDescription: {
-        fontSize: isMobile ? "11px" : "12px",
-      },
-      dataElementText: {
-        fontSize: isMobile ? "12px" : "14px",
-      },
-      button: {
-        fontSize: isMobile ? "14px" : "16px",
-        padding: isMobile ? "10px 20px" : "9px 45px",
-      },
-    }),
-    [isMobile]
-  );
-
-  const areAllRequiredElementsChecked = useMemo(() => {
-    if (!content) return false;
-
-    return content.purposes.every((purpose) => {
-      const requiredElements = purpose.data_elements.filter(
-        (element) => element.required
-      );
-      return requiredElements.every(
-        (element) => selectedDataElements[`${purpose.uuid}-${element.uuid}`]
-      );
-    });
-  }, [content, selectedDataElements]);
-
-  // Notify parent component when validation state changes
-  useEffect(() => {
-    onValidationChange?.(areAllRequiredElementsChecked);
-  }, [areAllRequiredElementsChecked, onValidationChange]);
-
-  useEffect(() => {
-    if (hasAlreadyConsented) {
-      onAccept?.();
-    }
-  }, [hasAlreadyConsented, onAccept]);
-
-  const getTranslatedText = (
-    key: string,
-    defaultText: string,
-    itemId?: string
-  ): string => {
-    if (!content) return defaultText;
-
-    if (selectedLanguage === "English" || selectedLanguage === "en" || selectedLanguage === "EN") {
-      if (
-        key === "privacy_policy_anchor_text" &&
-        content.privacy_policy_anchor_text
-      ) {
-        return content.privacy_policy_anchor_text;
-      }
-      return defaultText;
-    }
-
-    if (!content.supported_languages_and_translations) {
-      return defaultText;
-    }
-
-    const translationMap = content.supported_languages_and_translations[
-      selectedLanguage
-    ] as TranslationObject | undefined;
-
-    if (!translationMap) {
-      return defaultText;
-    }
-
-    if (itemId) {
-      if (key === "purposes.name" || key === "purposes.description") {
-        const purposeData = translationMap.purposes?.[itemId];
-        if (purposeData) {
-          if (typeof purposeData === "string") {
-            return key === "purposes.name" ? purposeData : defaultText;
-          }
-          return key === "purposes.name"
-            ? purposeData.name || defaultText
-            : purposeData.description || defaultText;
-        }
-        return defaultText;
-      }
-      if (key.startsWith("data_elements.")) {
-        return translationMap.data_elements?.[itemId] || defaultText;
-      }
-    }
-
-    const value = translationMap[key];
-    if (typeof value === "string" && value) {
-      return value;
-    }
-
-    return defaultText;
-  };
-
-  const fetchNotice = async () => {
-    setIsLoading(true);
-    setFetchError(null);
-    try {
-      const consentContentData = await fetchConsentContent({
-        org_uuid,
-        workspace_uuid,
-        notice_uuid,
-        baseUrl,
-        language,
-        specific_uuid: applicationId,
-      });
-      const activeConfig = consentContentData.detail.active_config;
-      setContent(activeConfig);
-      if (activeConfig.default_language) {
-        setSelectedLanguage(activeConfig.default_language);
-      }
-      const initialCollapsedState = activeConfig.purposes.reduce(
-        (acc, purpose) => ({
-          ...acc,
-          [purpose.uuid]: true,
-        }),
-        {}
-      );
-      setCollapsedPurposes(initialCollapsedState);
-
-      // Initialize selected states
-      // All elements start unchecked, but required elements cannot be unchecked once checked
-      const initialDataElementState: Record<string, boolean> =
-        activeConfig.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);
-
-      // Initialize purpose states - all start unchecked
-      const initialPurposeState: Record<string, boolean> =
-        activeConfig.purposes.reduce(
-          (acc: Record<string, boolean>, purpose) => {
-            return {
-              ...acc,
-              [purpose.uuid]: false,
-            };
-          },
-          {}
-        );
-      setSelectedPurposes(initialPurposeState);
-    } catch (err: unknown) {
-      const error = err as Error & { status?: number };
-      setFetchError(error);
-      if (error.status === 409) {
-        setHasAlreadyConsented(true);
-      } else {
-        onError?.(error);
-      }
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    fetchNotice();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [org_uuid, workspace_uuid, notice_uuid, language, applicationId]);
-
-  const togglePurposeCollapse = (purposeUuid: string) => {
-    setCollapsedPurposes((prev) => ({
-      ...prev,
-      [purposeUuid]: !prev[purposeUuid],
-    }));
-  };
-
-  const handlePurposeCheckboxChange = (purposeUuid: string) => {
-    if (content) {
-      const purpose = content.purposes.find((p) => p.uuid === purposeUuid);
-      if (purpose) {
-        const newPurposeState = !selectedPurposes[purposeUuid];
-
-        // Update purpose state
-        setSelectedPurposes((prev) => ({
-          ...prev,
-          [purposeUuid]: newPurposeState,
-        }));
-
-        // Update ALL data elements (including required) when purpose checkbox is toggled
-        setSelectedDataElements((prev) => {
-          const updated = { ...prev };
-          purpose.data_elements.forEach((el) => {
-            const combinedId = `${purposeUuid}-${el.uuid}`;
-            updated[combinedId] = newPurposeState;
-          });
-          return updated;
-        });
-      }
-    }
-  };
-
-  const handleDataElementCheckboxChange = (
-    elementUuid: string,
-    purposeUuid: string
-  ) => {
-    if (!content) return;
-
-    const purpose = content.purposes.find((p) => p.uuid === purposeUuid);
-    if (!purpose) return;
-
-    const dataElement = purpose.data_elements.find(
-      (el) => el.uuid === elementUuid
-    );
-    if (!dataElement) return;
-
-    const combinedId = `${purposeUuid}-${elementUuid}`;
-    const currentState = selectedDataElements[combinedId] || false;
-    const newElementState = !currentState;
-
-    // Update data element state
-    setSelectedDataElements((prev) => {
-      const newState = {
-        ...prev,
-        [combinedId]: newElementState,
-      };
-
-      // Check if all required elements are checked
-      const requiredElements = purpose.data_elements.filter(
-        (el) => el.required
-      );
-
-      let shouldCheckPurpose: boolean;
-
-      if (requiredElements.length > 0) {
-        // Has required elements: check purpose when all required are selected
-        shouldCheckPurpose = requiredElements.every(
-          (el) => newState[`${purposeUuid}-${el.uuid}`]
-        );
-      } else {
-        // No required elements: check purpose when ANY element is selected
-        shouldCheckPurpose = purpose.data_elements.some(
-          (el) => newState[`${purposeUuid}-${el.uuid}`]
-        );
-      }
-
-      setSelectedPurposes((prevPurposes) => ({
-        ...prevPurposes,
-        [purposeUuid]: shouldCheckPurpose,
-      }));
-
-      return newState;
-    });
-  };
-
-  const handleAcceptWithToken = useCallback(
-    async (tokenToUse: string) => {
-      if (!tokenToUse || !content) {
-        setErrorMessage("Unable to submit consent. Please try again.");
-        throw new Error("Access token or content not available");
-      }
-
-      try {
-        setIsSubmitting(true);
-        setErrorMessage(null);
-
-        await submitConsentEvent({
-          org_uuid,
-          workspace_uuid,
-          accessToken: tokenToUse,
-          baseUrl,
-          ledgerBaseUrl,
-          noticeUuid: content.notice_uuid,
-          purposes: content.purposes.map((purpose) => {
-            // Check if any required data element is selected
-            const hasSelectedRequiredElement = purpose.data_elements.some(
-              (element) =>
-                element.required &&
-                (selectedDataElements[`${purpose.uuid}-${element.uuid}`] ||
-                  false)
-            );
-
-            // Check if any data element is selected
-            const hasSelectedDataElement = purpose.data_elements.some(
-              (element) =>
-                selectedDataElements[`${purpose.uuid}-${element.uuid}`] || false
-            );
-
-            // Purpose is selected if: purpose checkbox is checked OR any required element is selected OR any data element is selected
-            const purposeSelected =
-              selectedPurposes[purpose.uuid] ||
-              hasSelectedRequiredElement ||
-              hasSelectedDataElement;
-
-            return {
-              ...purpose,
-              selected: purposeSelected,
-              data_elements: purpose.data_elements.map((element) => ({
-                ...element,
-                selected:
-                  selectedDataElements[`${purpose.uuid}-${element.uuid}`] ||
-                  false,
-              })),
-            };
-          }),
-          declined: false,
-          meta_data: applicationId
-            ? { specific_uuid: applicationId }
-            : undefined,
-        });
-
-        onAccept?.();
-        // Reset ref on success to allow re-submission if needed
-        hasSubmittedRef.current = false;
-      } catch (error) {
-        const err = error as Error;
-        // The SDK is a passthrough: server-owned message wins. Only the
-        // bare-Error fallback is used when no message is present (e.g. a
-        // network failure that never produced a Response).
-        const message =
-          err.message || "Failed to submit consent. Please try again.";
-        setErrorMessage(message);
-        // Reset ref on error to allow retry
-        hasSubmittedRef.current = false;
-        throw error;
-      } finally {
-        setIsSubmitting(false);
-      }
-    },
-    [
-      content,
-      org_uuid,
-      workspace_uuid,
-      baseUrl,
-      ledgerBaseUrl,
-      selectedDataElements,
-      selectedPurposes,
-      applicationId,
-      onAccept,
-    ]
-  );
-
-  // Auto-submit consent when all conditions are met
-  useEffect(() => {
-    if (
-      accessToken &&
-      content &&
-      areAllRequiredElementsChecked &&
-      !isSubmitting &&
-      !hasSubmittedRef.current
-    ) {
-      hasSubmittedRef.current = true;
-      const autoSubmit = async () => {
-        try {
-          await handleAcceptWithToken(accessToken);
-        } catch (err) {
-          hasSubmittedRef.current = false;
-          onError?.(err as Error);
-        }
-      };
-      autoSubmit();
-    }
-  }, [
-    accessToken,
-    content,
-    areAllRequiredElementsChecked,
-    isSubmitting,
-    handleAcceptWithToken,
-  ]);
-
-  // Reset submission ref when accessToken changes (allows re-submission with new token)
-  useEffect(() => {
-    if (!accessToken) {
-      hasSubmittedRef.current = false;
-    }
-  }, [accessToken]);
-
-  const headingStyle = {
-    color: settings?.headingColor || "#101828",
-  };
-
-  const textStyle = {
-    color: settings?.textColor || "#344054",
-  };
-
-  if (hasAlreadyConsented || fetchError) {
-    return null;
-  }
-
-  if (isLoading) {
-    return (
-      <div style={styles.loadingContainer}>
-        <div style={styles.loadingSpinner}></div>
-        <p style={{ ...styles.privacyText, ...textStyle }}>Loading...</p>
-      </div>
-    );
-  }
-
-  if (!content) {
-    return null;
-  }
-
-  return (
-    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
-      {errorMessage && (
-        <div
-          role="alert"
-          style={{
-            backgroundColor: "#FEE2E2",
-            color: "#DC2626",
-            padding: "12px",
-            borderRadius: "6px",
-            fontSize: "14px",
-            border: "1px solid #FCA5A5",
-          }}
-        >
-          {errorMessage}
-        </div>
-      )}
-
-      {content?.purposes?.map((purpose) => (
-        <div key={purpose.uuid}>
-          <div style={styles.optionItem}>
-            <div
-              style={styles.optionLeft}
-              onClick={() => togglePurposeCollapse(purpose.uuid)}
-              role="button"
-              tabIndex={0}
-              aria-expanded={!collapsedPurposes[purpose.uuid]}
-              aria-controls={`purpose-${purpose.uuid}`}
-              aria-label={`${collapsedPurposes[purpose.uuid] ? "Expand" : "Collapse"} ${getTranslatedText(
-                `purposes.name`,
-                purpose.name,
-                purpose.uuid
-              )} details`}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  togglePurposeCollapse(purpose.uuid);
-                }
-              }}
-            >
-              <div
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  marginLeft: "5px",
-                }}
-              >
-                <svg
-                  width="7"
-                  height="12"
-                  viewBox="0 0 7 12"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                  stroke={settings?.headingColor || "#323B4B"}
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  style={{
-                    transform: !collapsedPurposes[purpose.uuid]
-                      ? "rotate(90deg)"
-                      : "rotate(0deg)",
-                    transition: "transform 0.3s ease",
-                  }}
-                  aria-hidden="true"
-                >
-                  <path d="M1 1L6 6L1 11" />
-                </svg>
-              </div>
-              <div style={styles.optionTextContainer}>
-                <h2
-                  style={{
-                    ...styles.optionTitle,
-                    ...responsiveStyles.optionTitle,
-                    ...headingStyle,
-                  }}
-                >
-                  {getTranslatedText(
-                    `purposes.name`,
-                    purpose.name,
-                    purpose.uuid
-                  )}
-                </h2>
-                <h3
-                  style={{
-                    ...styles.optionDescription,
-                    ...responsiveStyles.optionDescription,
-                    ...textStyle,
-                  }}
-                >
-                  {getTranslatedText(
-                    `purposes.description`,
-                    purpose.description,
-                    purpose.uuid
-                  )}
-                </h3>
-              </div>
-            </div>
-            <input
-              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
-                id={`purpose-${purpose.uuid}`}
-                style={styles.dataElementsContainer}
-              >
-                {purpose.data_elements.map((dataElement) => (
-                  <div key={dataElement.uuid} style={styles.dataElementItem}>
-                    <span
-                      style={{
-                        ...styles.dataElementText,
-                        ...responsiveStyles.dataElementText,
-                        ...textStyle,
-                      }}
-                    >
-                      {getTranslatedText(
-                        `data_elements.name`,
-                        dataElement.name,
-                        dataElement.uuid
-                      )}
-                      {dataElement.required && (
-                        <span
-                          style={{
-                            color: "red",
-                            marginLeft: "4px",
-                          }}
-                          aria-label="required"
-                        >
-                          *
-                        </span>
-                      )}
-                    </span>
-                    <input
-                      type="checkbox"
-                      checked={
-                        selectedDataElements[
-                          `${purpose.uuid}-${dataElement.uuid}`
-                        ] || false
-                      }
-                      onChange={() =>
-                        handleDataElementCheckboxChange(
-                          dataElement.uuid,
-                          purpose.uuid
-                        )
-                      }
-                      aria-label={`Select ${getTranslatedText(
-                        `data_elements.name`,
-                        dataElement.name,
-                        dataElement.uuid
-                      )}${dataElement.required ? " (required)" : ""}`}
-                    />
-                  </div>
-                ))}
-              </div>
-            )}
-        </div>
-      ))}
-    </div>
-  );
-};
-
-RedactoConsentInlineComponent.displayName = "RedactoConsentInline";
-
-// Memoize the component to prevent unnecessary re-renders when props haven't changed
-export const RedactoConsentInline = memo(RedactoConsentInlineComponent);