@redacto.io/consent-sdk-react 0.0.1

package/src/RedactoNoticeConsent/RedactoNoticeConsent.tsx

@@ -0,0 +1,765 @@
+import { useEffect, useMemo, useState } 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";
+
+export const RedactoNoticeConsent = ({
+  noticeId,
+  accessToken,
+  refreshToken,
+  language = "en",
+  blockUI = false,
+  onAccept,
+  onDecline,
+  onError,
+  settings,
+}: Props) => {
+  const [content, setContent] = useState<
+    ConsentContent["detail"]["active_config"] | null
+  >(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isLanguageDropdownOpen, setIsLanguageDropdownOpen] = 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);
+
+  // Add media query hooks
+  const isMobile = useMediaQuery("(max-width: 768px)");
+
+  // Responsive styles
+  const responsiveStyles = useMemo(
+    () => ({
+      modal: {
+        width: isMobile ? "90%" : "700px",
+      },
+      content: {
+        margin: isMobile ? "20px" : "22px",
+      },
+      title: {
+        fontSize: isMobile ? "16px" : "18px",
+      },
+      subTitle: {
+        fontSize: isMobile ? "14px" : "16px",
+      },
+      privacyText: {
+        fontSize: isMobile ? "14px" : "16px",
+      },
+      optionTitle: {
+        fontSize: isMobile ? "14px" : "16px",
+      },
+      optionDescription: {
+        fontSize: isMobile ? "11px" : "12px",
+      },
+      dataElementText: {
+        fontSize: isMobile ? "12px" : "14px",
+      },
+      topRight: {
+        fontSize: isMobile ? "11px" : "12px",
+        padding: isMobile ? "3px 6px" : "3px 9px",
+        height: isMobile ? "auto" : undefined,
+        width: isMobile ? "auto" : undefined,
+      },
+      languageItem: {
+        fontSize: isMobile ? "11px" : "12px",
+        padding: isMobile ? "6px 10px" : "8px 12px",
+      },
+      bottomSection: {
+        flexDirection: isMobile ? ("column" as const) : ("row" as const),
+        gap: isMobile ? "12px" : "29px",
+      },
+      button: {
+        fontSize: isMobile ? "14px" : "16px",
+        padding: isMobile ? "10px 20px" : "9px 45px",
+      },
+      middleSection: {
+        paddingRight: isMobile ? "10px" : "15px",
+      },
+    }),
+    [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]);
+
+  const acceptDisabled = isSubmitting || !areAllRequiredElementsChecked;
+
+  useEffect(() => {
+    if (hasAlreadyConsented) {
+      onAccept?.();
+    }
+  }, [hasAlreadyConsented, onAccept]);
+
+  const getTranslatedText = (
+    key: string,
+    defaultText: string,
+    itemId?: string
+  ): string => {
+    if (!content) return defaultText;
+
+    if (selectedLanguage === content.default_language) {
+      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") {
+        return translationMap.purposes?.[itemId] || defaultText;
+      }
+      if (key.startsWith("data_elements.")) {
+        return translationMap.data_elements?.[itemId] || defaultText;
+      }
+    }
+
+    const value = translationMap[key];
+    if (typeof value === "string") {
+      return value;
+    }
+
+    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) => ({
+              ...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);
+      }
+    };
+
+    fetchNotice();
+  }, [noticeId, accessToken, refreshToken, language, onError]);
+
+  const togglePurposeCollapse = (purposeUuid: string) => {
+    setCollapsedPurposes((prev) => ({
+      ...prev,
+      [purposeUuid]: !prev[purposeUuid],
+    }));
+  };
+
+  const toggleLanguageDropdown = () => {
+    setIsLanguageDropdownOpen(!isLanguageDropdownOpen);
+  };
+
+  const handleLanguageSelect = (lang: string) => {
+    setSelectedLanguage(lang);
+    setIsLanguageDropdownOpen(false);
+  };
+
+  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 for this purpose
+        setSelectedDataElements((prev) => {
+          const updated = { ...prev };
+          purpose.data_elements.forEach((el) => {
+            updated[`${purposeUuid}-${el.uuid}`] = newPurposeState;
+          });
+          return updated;
+        });
+      }
+    }
+  };
+
+  const handleDataElementCheckboxChange = (
+    elementUuid: string,
+    purposeUuid: string
+  ) => {
+    const combinedId = `${purposeUuid}-${elementUuid}`;
+
+    // Update data element state
+    setSelectedDataElements((prev) => {
+      const newState = {
+        ...prev,
+        [combinedId]: !prev[combinedId],
+      };
+
+      // Check if all required elements for this purpose are checked
+      if (content) {
+        const purpose = content.purposes.find((p) => p.uuid === purposeUuid);
+        if (purpose) {
+          const requiredElements = purpose.data_elements.filter(
+            (el) => el.required
+          );
+          const allRequiredElementsChecked = requiredElements.every(
+            (el) => newState[`${purposeUuid}-${el.uuid}`]
+          );
+
+          setSelectedPurposes((prevPurposes) => ({
+            ...prevPurposes,
+            [purposeUuid]: allRequiredElementsChecked,
+          }));
+        }
+      }
+
+      return newState;
+    });
+  };
+
+  const handleAccept = async () => {
+    try {
+      setIsSubmitting(true);
+      if (content) {
+        await submitConsentEvent({
+          accessToken,
+          noticeUuid: content.notice_uuid,
+          purposes: content.purposes.map((purpose) => ({
+            ...purpose,
+            selected: selectedPurposes[purpose.uuid] || false,
+            data_elements: purpose.data_elements.map((element) => ({
+              ...element,
+              selected: element.required
+                ? true
+                : selectedDataElements[`${purpose.uuid}-${element.uuid}`] ||
+                  false,
+            })),
+          })),
+          declined: false,
+        });
+      }
+      onAccept?.();
+    } catch (error) {
+      console.error("Error submitting consent:", error);
+      onError?.(error as Error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleDecline = async () => {
+    // try {
+    //   setIsSubmitting(true);
+    //   if (content) {
+    //     await submitConsentEvent(
+    //       accessToken,
+    //       content.notice_uuid,
+    //       content.purposes.map((purpose) => ({
+    //         ...purpose,
+    //         selected: false,
+    //         data_elements: purpose.data_elements.map((element) => ({
+    //           ...element,
+    //           selected: element.required ? true : false,
+    //         })),
+    //       })),
+    //       true
+    //     );
+    //   }
+    //   onDecline?.();
+    // } catch (error) {
+    //   console.error("Error submitting consent:", error);
+    //   onError?.(error as Error);
+    // } finally {
+    //   setIsSubmitting(false);
+    // }
+    onDecline?.();
+  };
+
+  const availableLanguages = useMemo(
+    () =>
+      content
+        ? [
+            content.default_language,
+            ...Object.keys(content.supported_languages_and_translations || {}),
+          ].filter((value, index, self) => self.indexOf(value) === index)
+        : [language],
+    [content, language]
+  );
+
+  const modalStyle = {
+    borderRadius: settings?.borderRadius || "8px",
+    backgroundColor: settings?.backgroundColor || "#ffffff",
+  };
+
+  const buttonStyle = {
+    borderRadius: settings?.borderRadius || "8px",
+  };
+
+  const acceptButtonStyle = {
+    ...buttonStyle,
+    backgroundColor: settings?.button?.accept?.backgroundColor || "#4f87ff",
+    color: settings?.button?.accept?.textColor || "#ffffff",
+  };
+
+  const declineButtonStyle = {
+    ...buttonStyle,
+    backgroundColor: settings?.button?.decline?.backgroundColor || "#ffffff",
+    color: settings?.button?.decline?.textColor || "#000000",
+    borderColor: settings?.borderColor || "#d0d5dd",
+  };
+
+  const linkStyle = {
+    color: settings?.link?.color || "#4f87ff",
+  };
+
+  const languageSelectorStyle = {
+    borderRadius: settings?.borderRadius || "8px",
+    borderColor: settings?.borderColor || "#d0d5dd",
+    backgroundColor: settings?.button?.language?.backgroundColor || "#ffffff",
+    color: settings?.button?.language?.textColor || "#344054",
+  };
+
+  const selectedLanguageItemStyle = {
+    ...languageSelectorStyle,
+    backgroundColor:
+      settings?.button?.language?.selectedBackgroundColor || "#f3f4f6",
+    color: settings?.button?.language?.selectedTextColor || "#344054",
+    fontWeight: 600,
+  };
+
+  const headingStyle = {
+    color: settings?.headingColor || "#101828",
+  };
+
+  const textStyle = {
+    color: settings?.textColor || "#344054",
+  };
+
+  const sectionStyle = {
+    backgroundColor: settings?.backgroundColor || "#ffffff",
+  };
+
+  return (
+    <>
+      {hasAlreadyConsented ? null : (
+        <>
+          {blockUI && <div style={styles.overlay} aria-hidden="true" />}
+          <div
+            style={{
+              ...styles.modal,
+              ...responsiveStyles.modal,
+              ...modalStyle,
+            }}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="privacy-notice-title"
+          >
+            {isLoading ? (
+              <div style={styles.loadingContainer}>
+                <div style={styles.loadingSpinner}></div>
+                <p style={{ ...styles.privacyText, ...textStyle }}>
+                  Loading...
+                </p>
+              </div>
+            ) : (
+              <div style={{ ...styles.content, ...responsiveStyles.content }}>
+                <div style={{ ...styles.topSection, ...sectionStyle }}>
+                  <div style={styles.topLeft}>
+                    <img
+                      style={styles.logo}
+                      src={content?.logo_url || logo}
+                      alt="logo"
+                    />
+                    <h2
+                      id="privacy-notice-title"
+                      style={{
+                        ...styles.title,
+                        ...responsiveStyles.title,
+                        ...headingStyle,
+                      }}
+                    >
+                      Your Privacy Matters
+                    </h2>
+                  </div>
+                  <div style={styles.languageSelectorContainer}>
+                    <button
+                      style={{
+                        ...styles.topRight,
+                        ...responsiveStyles.topRight,
+                        ...languageSelectorStyle,
+                      }}
+                      onClick={toggleLanguageDropdown}
+                      aria-expanded={isLanguageDropdownOpen}
+                      aria-haspopup="listbox"
+                    >
+                      {selectedLanguage}
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 16 16"
+                        fill="none"
+                        stroke={
+                          settings?.button?.language?.textColor ||
+                          "currentColor"
+                        }
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        style={{ flexShrink: 0, marginLeft: "4px" }}
+                      >
+                        <path d="M4 6l4 4 4-4" />
+                      </svg>
+                    </button>
+                    {isLanguageDropdownOpen && (
+                      <ul
+                        style={{
+                          ...styles.languageDropdown,
+                          ...languageSelectorStyle,
+                        }}
+                        role="listbox"
+                        aria-label="Select language"
+                      >
+                        {availableLanguages.map((lang: string) => (
+                          <li
+                            key={lang}
+                            style={{
+                              ...styles.languageItem,
+                              ...responsiveStyles.languageItem,
+                              ...(selectedLanguage === lang
+                                ? selectedLanguageItemStyle
+                                : languageSelectorStyle),
+                              listStyle: "none",
+                            }}
+                            onClick={() => handleLanguageSelect(lang)}
+                            role="option"
+                            aria-selected={selectedLanguage === lang}
+                            tabIndex={0}
+                          >
+                            {lang}
+                          </li>
+                        ))}
+                      </ul>
+                    )}
+                  </div>
+                </div>
+                <div
+                  style={{
+                    ...styles.middleSection,
+                    ...responsiveStyles.middleSection,
+                    ...sectionStyle,
+                  }}
+                >
+                  <p
+                    style={{
+                      ...styles.privacyText,
+                      ...responsiveStyles.privacyText,
+                      ...textStyle,
+                    }}
+                  >
+                    {content
+                      ? getTranslatedText("notice_text", content.notice_text)
+                      : ""}
+                    <br />
+                    Learn more in our{" "}
+                    <a
+                      style={{ ...styles.link, ...linkStyle }}
+                      href={content?.privacy_policy_url || "#"}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      [
+                      {getTranslatedText(
+                        "privacy_policy_anchor_text",
+                        content?.privacy_policy_anchor_text || "Privacy Policy"
+                      )}
+                      ]
+                    </a>{" "}
+                    and{" "}
+                    <a
+                      style={{ ...styles.link, ...linkStyle }}
+                      href={content?.sub_processors_url || "#"}
+                      target=""
+                    >
+                      [
+                      {getTranslatedText(
+                        "vendors_list_anchor_text",
+                        content?.vendors_list_anchor_text || "Vendors List"
+                      )}
+                      ]
+                    </a>
+                    .
+                  </p>
+                  <h2
+                    style={{
+                      ...styles.subTitle,
+                      ...responsiveStyles.subTitle,
+                      ...headingStyle,
+                    }}
+                  >
+                    {getTranslatedText(
+                      "purpose_section_heading",
+                      "Manage What You Share"
+                    )}
+                  </h2>
+                  <div style={styles.optionsContainer}>
+                    {content?.purposes?.map((purpose) => (
+                      <div key={purpose.uuid}>
+                        <div style={styles.optionItem}>
+                          <div
+                            style={styles.optionLeft}
+                            onClick={() => 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",
+                                }}
+                              >
+                                <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
+                            style={styles.checkboxLarge}
+                            type="checkbox"
+                            checked={selectedPurposes[purpose.uuid] || false}
+                            onChange={() =>
+                              handlePurposeCheckboxChange(purpose.uuid)
+                            }
+                          />
+                        </div>
+                        {!collapsedPurposes[purpose.uuid] &&
+                          purpose.data_elements &&
+                          purpose.data_elements.length > 0 && (
+                            <div 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",
+                                        }}
+                                      >
+                                        *
+                                      </span>
+                                    )}
+                                  </span>
+                                  <input
+                                    style={styles.checkboxSmall}
+                                    type="checkbox"
+                                    checked={
+                                      selectedDataElements[
+                                        `${purpose.uuid}-${dataElement.uuid}`
+                                      ] || false
+                                    }
+                                    onChange={() =>
+                                      handleDataElementCheckboxChange(
+                                        dataElement.uuid,
+                                        purpose.uuid
+                                      )
+                                    }
+                                  />
+                                </div>
+                              ))}
+                            </div>
+                          )}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+                <div
+                  style={{
+                    ...styles.bottomSection,
+                    ...responsiveStyles.bottomSection,
+                    ...sectionStyle,
+                  }}
+                >
+                  <button
+                    style={{
+                      ...styles.button,
+                      ...responsiveStyles.button,
+                      ...styles.acceptButton,
+                      ...acceptButtonStyle,
+                      opacity: acceptDisabled ? 0.5 : 1,
+                    }}
+                    onClick={handleAccept}
+                    disabled={acceptDisabled}
+                  >
+                    {isSubmitting
+                      ? "Processing..."
+                      : getTranslatedText(
+                          "confirm_button_text",
+                          content?.confirm_button_text || "Accept"
+                        )}
+                  </button>
+                  <button
+                    style={{
+                      ...styles.button,
+                      ...responsiveStyles.button,
+                      ...styles.cancelButton,
+                      ...declineButtonStyle,
+                    }}
+                    onClick={handleDecline}
+                    disabled={isSubmitting}
+                  >
+                    {isSubmitting
+                      ? "Processing..."
+                      : getTranslatedText(
+                          "decline_button_text",
+                          content?.decline_button_text || "Decline"
+                        )}
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        </>
+      )}
+    </>
+  );
+};