@redacto.io/consent-sdk-react 4.0.0 → 5.1.0

package/src/RedactoPrivacyCenter/components/DataRequest/GrievanceDataSection.tsx

@@ -0,0 +1,118 @@
+import { useTranslation } from 'react-i18next';
+import { PCCheckbox } from '../../ui';
+import { pcStyles } from '../../styles/pcStyles';
+import type { GrievanceDataSectionProps } from '../../lib/types';
+
+const getVar = (varName: string): string => `var(${varName})`;
+
+export default function GrievanceDataSection({
+  grievanceOptions,
+  selectedGrievances,
+  setSelectedGrievances,
+  isTranslating = false,
+}: GrievanceDataSectionProps & { isTranslating?: boolean }) {
+  const { t } = useTranslation();
+
+  // Map grievance values to translation keys
+  const getGrievanceTranslationKey = (value: string): string => {
+    const mapping: Record<string, string> = {
+      'consent_violation': 'consentViolation',
+      'unlawful_processing': 'unlawfulProcessing',
+      'data_breach': 'dataBreach',
+    };
+    return mapping[value] || value;
+  };
+
+  const handleSelectAll = (checked: boolean) => {
+    const updated: Record<string, boolean> = {};
+    grievanceOptions.forEach((opt) => {
+      updated[opt.value] = checked;
+    });
+    setSelectedGrievances(updated);
+  };
+
+  const handleGrievanceChange = (value: string, checked: boolean) => {
+    setSelectedGrievances((prev) => ({
+      ...prev,
+      [value]: checked,
+    }));
+  };
+
+  const isAllSelected =
+    Object.keys(selectedGrievances).length > 0 &&
+    Object.values(selectedGrievances).every(Boolean);
+
+  if (isTranslating) {
+    return (
+      <div style={{ ...pcStyles.flex, ...pcStyles.flexCol, gap: getVar('--pc-spacing-sm') }}>
+        <div style={{ marginBottom: '0.375rem' }}>
+          <div style={{ height: '1rem', width: '8rem', animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', borderRadius: pcStyles.borderRadiusMd, backgroundColor: getVar('--pc-bg-tertiary') }}></div>
+        </div>
+        <div style={{
+          backgroundColor: getVar('--pc-bg-secondary'),
+          borderRadius: pcStyles.borderRadiusMd,
+          padding: getVar('--pc-spacing-sm'),
+          border: `1px solid ${getVar('--pc-border-color')}`,
+        }}>
+          {[1, 2, 3].map((skeletonIndex) => (
+            <div key={skeletonIndex} style={{ marginBottom: skeletonIndex < 3 ? getVar('--pc-spacing-xs') : 0, ...pcStyles.flex, ...pcStyles.itemsCenter, ...pcStyles.gapSm }}>
+              <div style={{ height: '1rem', width: '1rem', animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', borderRadius: pcStyles.borderRadiusMd, backgroundColor: getVar('--pc-bg-tertiary') }}></div>
+              <div style={{ height: '1rem', width: '10rem', animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', borderRadius: pcStyles.borderRadiusMd, backgroundColor: getVar('--pc-bg-tertiary') }}></div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ ...pcStyles.flex, ...pcStyles.flexCol, gap: getVar('--pc-spacing-xs') }}>
+      <p style={{
+        margin: 0,
+        fontSize: pcStyles.textXs.fontSize,
+        color: getVar('--pc-text-secondary'),
+      }}>
+        {t('selectGrievance')}
+      </p>
+      <div style={{
+        backgroundColor: getVar('--pc-bg-secondary'),
+        borderRadius: pcStyles.borderRadiusMd,
+        padding: getVar('--pc-spacing-sm'),
+        border: `1px solid ${getVar('--pc-border-color')}`,
+      }}>
+        <PCCheckbox
+          label={t('selectAll')}
+          size="sm"
+          labelClassName="text-sm font-medium"
+          style={{ marginBottom: getVar('--pc-spacing-sm') }}
+          checked={isAllSelected}
+          onChange={(e) => handleSelectAll(e.target.checked)}
+        />
+        <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: getVar('--pc-spacing-xs'),
+        }}>
+          {grievanceOptions.map((option) => {
+            // Translate the label using i18next based on the value
+            const translationKey = getGrievanceTranslationKey(option.value);
+            const translatedLabel = t(translationKey);
+
+            return (
+              <PCCheckbox
+                key={option.value}
+                label={translatedLabel}
+                size="sm"
+                labelClassName="text-sm capitalize"
+                checked={selectedGrievances[option.value]}
+                onChange={(e) =>
+                  handleGrievanceChange(option.value, e.target.checked)
+                }
+              />
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/RedactoPrivacyCenter/components/DataRequest/NominationDataSection.tsx

@@ -0,0 +1,66 @@
+import { useTranslation } from 'react-i18next';
+import { PCInput } from '../../ui';
+import { pcStyles } from '../../styles/pcStyles';
+import type { NominationDataSectionProps } from '../../lib/types';
+
+const getVar = (varName: string): string => `var(${varName})`;
+
+export default function NominationDataSection({
+  nominationData,
+  setNominationData,
+  isTranslating = false,
+}: NominationDataSectionProps) {
+  const { t } = useTranslation();
+
+  if (isTranslating) {
+    return (
+      <div style={{ ...pcStyles.flex, ...pcStyles.flexCol, gap: getVar('--pc-spacing-sm') }}>
+        {[1, 2].map((skeletonIndex) => (
+          <div key={skeletonIndex} style={{ ...pcStyles.flex, ...pcStyles.flexCol, gap: getVar('--pc-spacing-xs') }}>
+            <div style={{ height: '1rem', width: '8rem', animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', borderRadius: pcStyles.borderRadiusMd, backgroundColor: getVar('--pc-bg-tertiary') }}></div>
+            <div style={{ height: '2.25rem', width: '100%', animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', borderRadius: pcStyles.borderRadiusMd, backgroundColor: getVar('--pc-bg-tertiary') }}></div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ ...pcStyles.flex, ...pcStyles.flexCol, gap: getVar('--pc-spacing-sm') }}>
+      <p style={{
+        margin: 0,
+        fontSize: pcStyles.textXs.fontSize,
+        color: getVar('--pc-text-secondary'),
+      }}>
+        {t('enterNomineeDetails')}
+      </p>
+      <PCInput
+        label={
+          <span>
+            {t('nomineeEmail')}
+            <span style={{ color: getVar('--pc-error') }}>*</span>
+          </span>
+        }
+        placeholder={t('nomineeEmailPlaceholder')}
+        value={nominationData.nominee_email ?? ''}
+        onChange={(e) =>
+          setNominationData((prev) => ({
+            ...prev,
+            nominee_email: e.target.value,
+          }))
+        }
+      />
+      <PCInput
+        label={t('nomineeMobile')}
+        placeholder={t('nomineeMobilePlaceholder')}
+        value={nominationData.nominee_mobile ?? ''}
+        onChange={(e) =>
+          setNominationData((prev) => ({
+            ...prev,
+            nominee_mobile: e.target.value,
+          }))
+        }
+      />
+    </div>
+  );
+}

package/src/RedactoPrivacyCenter/components/DataRequest/PurposeSelectionSection.tsx

@@ -0,0 +1,304 @@
+import { PCCheckbox } from '../../ui';
+import { pcStyles } from '../../styles/pcStyles';
+import { ChevronDown } from 'lucide-react';
+import { RequestTypeEnum } from '../../lib/types';
+import type { Purpose, DataElement } from '../../lib/types';
+import { useTranslation } from 'react-i18next';
+import { useEffect, useState } from 'react';
+
+const getVar = (varName: string): string => `var(${varName})`;
+
+export default function PurposeSelectionSection({
+  purposes,
+  setPurposes,
+  requestType,
+  isTranslating = false,
+}: {
+  purposes: Purpose[];
+  setPurposes: (values: Purpose[]) => void;
+  requestType: RequestTypeEnum;
+  isTranslating?: boolean;
+}) {
+  const isAccess = requestType === RequestTypeEnum.ACCESS;
+  const isErasure = requestType === RequestTypeEnum.ERASURE;
+
+  const [selectAllChecked, setSelectAllChecked] = useState(false);
+  const [openIndexes, setOpenIndexes] = useState<number[]>([]);
+
+  useEffect(() => {
+    setSelectAllChecked(false);
+    setOpenIndexes([]);
+  }, [requestType]);
+
+  const { t } = useTranslation();
+
+  const handleSelectAll = (checked: boolean) => {
+    setSelectAllChecked(checked);
+    const updated = purposes.map((p) => ({
+      ...p,
+      data_elements: p.data_elements.map((de: DataElement) => ({
+        ...de,
+        selected: checked, // Allow deselection for all elements, including required ones
+      })),
+    }));
+    setPurposes(updated);
+  };
+
+  useEffect(() => {
+    const allSelected = purposes.every((p) =>
+      p.data_elements.every((de) => de.selected)
+    );
+    setSelectAllChecked(allSelected);
+  }, [purposes, isAccess, isErasure]);
+
+  const handleDataElementChange = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    purposeIndex: number,
+    dataElementIndex: number
+  ) => {
+    // Allow deselection for all elements, including required ones
+    const updatedPurposes = purposes.map((purpose, pIdx) => {
+      if (pIdx !== purposeIndex) return purpose;
+      return {
+        ...purpose,
+        data_elements: purpose.data_elements.map((de, deIdx) =>
+          deIdx === dataElementIndex
+            ? { ...de, selected: e.target.checked }
+            : de
+        ),
+      };
+    });
+    setPurposes(updatedPurposes);
+  };
+
+  const handlePurposeSelectAll = (purposeIndex: number, checked: boolean) => {
+    const updatedPurposes = purposes.map((purpose, pIdx) => {
+      if (pIdx !== purposeIndex) return purpose;
+      return {
+        ...purpose,
+        data_elements: purpose.data_elements.map((de) => ({
+          ...de,
+          selected: checked, // Always allow selection/deselection for all elements
+        })),
+      };
+    });
+    setPurposes(updatedPurposes);
+  };
+
+  const toggleAccordion = (index: number) => {
+    setOpenIndexes((prev) =>
+      prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]
+    );
+  };
+
+  if (isTranslating) {
+    return (
+      <div>
+        <div style={{ paddingLeft: pcStyles.pxMd.paddingLeft, paddingRight: pcStyles.pxMd.paddingRight, marginBottom: pcStyles.mbMd.marginBottom }}>
+          <div style={{ height: '1rem', width: '8rem', animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', borderRadius: pcStyles.borderRadiusMd, backgroundColor: getVar('--pc-bg-tertiary'), marginBottom: '0.375rem' }}></div>
+          {!isErasure && (
+            <div style={{ height: '1rem', width: '6rem', animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', borderRadius: pcStyles.borderRadiusMd, backgroundColor: getVar('--pc-bg-tertiary') }}></div>
+          )}
+        </div>
+        {[1, 2, 3].map((skeletonIndex) => (
+          <div
+            key={skeletonIndex}
+            style={{
+              borderBottom: `1px solid ${getVar('--pc-border-color')}`,
+              backgroundColor: getVar('--pc-bg-secondary'),
+              borderRadius: pcStyles.borderRadiusMd,
+              overflow: 'hidden',
+            }}
+          >
+            <div style={{
+              ...pcStyles.flex,
+              width: '100%',
+              ...pcStyles.itemsCenter,
+              ...pcStyles.justifyBetween,
+              padding: getVar('--pc-spacing-md'),
+            }}>
+              <div style={{ ...pcStyles.flex, ...pcStyles.itemsCenter, ...pcStyles.gapSm }}>
+                <div style={{ height: '1rem', width: '1rem', animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', borderRadius: pcStyles.borderRadiusMd, backgroundColor: getVar('--pc-bg-tertiary') }}></div>
+                <div style={{ height: '1rem', width: '10rem', animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', borderRadius: pcStyles.borderRadiusMd, backgroundColor: getVar('--pc-bg-tertiary') }}></div>
+              </div>
+              <div style={{ height: '1.25rem', width: '1.25rem', animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', borderRadius: pcStyles.borderRadiusMd, backgroundColor: getVar('--pc-bg-tertiary') }}></div>
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div style={{ 
+        paddingLeft: pcStyles.pxMd.paddingLeft, 
+        paddingRight: pcStyles.pxMd.paddingRight, 
+        marginBottom: pcStyles.mbMd.marginBottom 
+      }}>
+        <p style={{
+          marginBottom: '0.375rem',
+          fontSize: pcStyles.textXs.fontSize,
+          color: getVar('--pc-text-secondary'),
+        }}>
+          {requestType === RequestTypeEnum.ACCESS
+            ? t('whatDataToAccess')
+            : t('whatDataToDelete')}
+        </p>
+        {!isErasure && (
+          <PCCheckbox
+            label={t('selectAll')}
+            size="sm"
+            checked={selectAllChecked}
+            onChange={(e) => handleSelectAll(e.target.checked)}
+            style={{
+              accentColor: getVar('--pc-primary'),
+            }}
+            labelClassName="text-sm font-medium"
+          />
+        )}
+      </div>
+
+      {purposes.map((item, index) => {
+        const isOpen = openIndexes.includes(index);
+        const areAllDataElementsSelected = item.data_elements.every(
+          (de) => de.selected
+        );
+
+        return (
+          <div
+            key={item.uuid}
+            style={{
+              borderBottom: `1px solid ${getVar('--pc-border-color')}`,
+              backgroundColor: getVar('--pc-bg-secondary'),
+              borderRadius: pcStyles.borderRadiusMd,
+              overflow: 'hidden',
+            }}
+          >
+            <div style={{
+              ...pcStyles.flex,
+              width: '100%',
+              ...pcStyles.itemsCenter,
+              ...pcStyles.justifyBetween,
+              padding: getVar('--pc-spacing-md'),
+              fontSize: pcStyles.textSm.fontSize,
+              fontWeight: pcStyles.fontWeightSemibold.fontWeight,
+              textTransform: 'capitalize',
+              color: getVar('--pc-text-primary'),
+            }}>
+              <PCCheckbox
+                size="sm"
+                labelClassName="text-sm font-medium capitalize"
+                checked={areAllDataElementsSelected}
+                label={item.name}
+                onChange={(e) => {
+                  e.stopPropagation();
+                  handlePurposeSelectAll(index, e.target.checked);
+                }}
+                onClick={(e) => e.stopPropagation()}
+                style={{
+                  accentColor: getVar('--pc-primary'),
+                }}
+              />
+
+              <button
+                type="button"
+                onClick={() => toggleAccordion(index)}
+                style={{
+                  marginLeft: getVar('--pc-spacing-lg'),
+                  color: getVar('--pc-text-secondary'),
+                  background: 'none',
+                  border: 'none',
+                  cursor: 'pointer',
+                  padding: 0,
+                  flexShrink: 0,
+                }}
+              >
+                <ChevronDown
+                  size={20}
+                  style={{
+                    transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+                    transition: 'transform 0.3s',
+                  }}
+                />
+              </button>
+            </div>
+
+            {isOpen && (
+              <div style={{
+                paddingTop: 0,
+                paddingLeft: getVar('--pc-spacing-2xl'),
+                paddingRight: getVar('--pc-spacing-md'),
+                paddingBottom: getVar('--pc-spacing-md'),
+              }} className="pc-padding-responsive">
+                {item.data_elements && item.data_elements.length > 0 ? (
+                  <>
+                    <p style={{
+                      marginTop: getVar('--pc-spacing-sm'),
+                      marginBottom: getVar('--pc-spacing-sm'),
+                      fontSize: pcStyles.textSm.fontSize,
+                      fontWeight: pcStyles.fontWeightMedium.fontWeight,
+                      color: getVar('--pc-text-primary'),
+                    }}>
+                      {t('dataCollected')}
+                    </p>
+                    <div style={{
+                      display: 'grid',
+                      gridTemplateColumns: 'repeat(1, 1fr)',
+                      gap: getVar('--pc-spacing-xs'),
+                    }} className="pc-grid-responsive">
+                      {item.data_elements
+                        .filter((de: DataElement) => {
+                          // For ACCESS and ERASURE, show all data elements regardless of given_consent
+                          // The backend should handle consent validation
+                          return de !== null && de !== undefined;
+                        })
+                        .map((de: DataElement) => {
+                          // Find the original index in the unfiltered array for proper state updates
+                          const actualIndex = item.data_elements.findIndex(
+                            (el) => el.uuid === de.uuid
+                          );
+                          return (
+                            <PCCheckbox
+                              key={de.uuid}
+                              size="sm"
+                              checked={de.selected}
+                              onChange={(e) =>
+                                handleDataElementChange(e, index, actualIndex)
+                              }
+                              labelClassName="text-sm capitalize"
+                              label={de.name}
+                              style={{
+                                accentColor: getVar('--pc-primary'),
+                              }}
+                            />
+                          );
+                        })}
+                    </div>
+                    {item.data_elements.filter(
+                      (de: DataElement) => de !== null && de !== undefined
+                    ).length === 0 && (
+                      <p style={{
+                        fontSize: pcStyles.textSm.fontSize,
+                        color: getVar('--pc-text-secondary'),
+                      }}>
+                        {t('noDataElementsAvailable') || 'No data elements available'}
+                      </p>
+                    )}
+                  </>
+                ) : (
+                  <p style={{
+                    fontSize: pcStyles.textSm.fontSize,
+                    color: getVar('--pc-text-secondary'),
+                  }}>
+                    {t('noDataElementsAvailable') || 'No data elements available'}
+                  </p>
+                )}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}