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

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

@@ -1,222 +0,0 @@
-import { type CSSProperties, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PCEmpty } from '../../ui/PCEmpty';
-import { pcStyles } from '../../styles/pcStyles';
-import type { FormProductGroup } from '../../lib/types';
-import { buildGroupPurposes } from '../groupHelpers';
-
-const getVar = (varName: string): string => `var(${varName})`;
-
-/**
- * Compute the unique selection key for a product group.
- *
- * Direct (own-data) groups key on `product_uuid`. Nominated groups append
- * the nominator UUID so two chips on the same product — one direct and one
- * via a nominator — register as distinct selections.
- */
-export const productGroupKey = (group: FormProductGroup): string =>
-  group.nominator
-    ? `${group.product_uuid}:${group.nominator.uuid}`
-    : group.product_uuid;
-
-export type ProductSelectionSectionProps = Readonly<{
-  directGroups: FormProductGroup[];
-  nominatedGroups: FormProductGroup[];
-  selectedProductKey: string | null;
-  onSelect: (key: string | null, group: FormProductGroup | null) => void;
-  /** Optional human label of the request type, e.g. "access". Folded into
-   *  the instruction header when supplied. */
-  requestTypeLabel?: string;
-  isTranslating?: boolean;
-}>;
-
-type ChipProps = Readonly<{
-  group: FormProductGroup;
-  isSelected: boolean;
-  isLocked: boolean;
-  onSelect: (key: string | null, group: FormProductGroup | null) => void;
-  nominationSuffix?: string;
-  activePurposesLabel: string;
-}>;
-
-const productSelectHeaderStyle: CSSProperties = {
-  paddingLeft: pcStyles.pxMd.paddingLeft,
-  paddingRight: pcStyles.pxMd.paddingRight,
-  marginBottom: pcStyles.mbMd.marginBottom,
-};
-
-const ProductChip = ({
-  group,
-  isSelected,
-  isLocked,
-  onSelect,
-  nominationSuffix,
-  activePurposesLabel,
-}: ChipProps) => {
-  const key = productGroupKey(group);
-
-  return (
-    <button
-      type="button"
-      role="option"
-      aria-selected={isSelected}
-      disabled={isLocked}
-      title={group.product_name}
-      className={`pc-product-select-chip ${isSelected ? 'pc-product-select-chip--selected' : ''}`}
-      data-testid={`product-chip-${key}`}
-      onClick={() => {
-        if (isLocked) {
-          return;
-        }
-        if (isSelected) {
-          onSelect(null, null);
-        } else {
-          onSelect(key, group);
-        }
-      }}
-    >
-      <span className="pc-product-select-chip-inner">
-        <span className="pc-product-select-chip-label">{group.product_name}</span>
-        {nominationSuffix && (
-          <span className="pc-product-select-chip-suffix">{nominationSuffix}</span>
-        )}
-        <span className="pc-product-select-chip-meta">{activePurposesLabel}</span>
-      </span>
-    </button>
-  );
-};
-
-const SkeletonChip = () => (
-  <div
-    className="pc-product-select-chip pc-product-select-chip--skeleton"
-    aria-hidden="true"
-  >
-    <div
-      style={{
-        height: '0.875rem',
-        width: '6rem',
-        animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-        borderRadius: pcStyles.borderRadiusMd,
-        backgroundColor: getVar('--pc-bg-tertiary'),
-      }}
-    />
-  </div>
-);
-
-export function ProductSelectionSection({
-  directGroups,
-  nominatedGroups,
-  selectedProductKey,
-  onSelect,
-  requestTypeLabel,
-  isTranslating = false,
-}: ProductSelectionSectionProps) {
-  const { t } = useTranslation();
-
-  const totalGroups = directGroups.length + nominatedGroups.length;
-  const isSingleGroup = totalGroups === 1;
-  const singleGroup = isSingleGroup
-    ? (directGroups[0] ?? nominatedGroups[0] ?? null)
-    : null;
-
-  // Auto-select the only group when present. This drives the parent's
-  // selection state without requiring a click — per spec, single-group
-  // step is pre-selected and rendered read-only.
-  useEffect(() => {
-    if (!singleGroup) {
-      return;
-    }
-    const key = productGroupKey(singleGroup);
-    if (selectedProductKey !== key) {
-      onSelect(key, singleGroup);
-    }
-  }, [singleGroup, selectedProductKey, onSelect]);
-
-  if (isTranslating) {
-    return (
-      <div className="pc-product-select-section">
-        <div
-          className="pc-product-select-chips"
-          data-testid="product-selection-chips"
-          role="listbox"
-          aria-label={t('selectProductsForRequestGeneric')}
-        >
-          {[0, 1, 2].map((i) => (
-            <SkeletonChip key={i} />
-          ))}
-        </div>
-      </div>
-    );
-  }
-
-  if (totalGroups === 0) {
-    return (
-      <PCEmpty
-        title={t('noProductsAvailable')}
-        description={t('noProductsAvailableDescription')}
-      />
-    );
-  }
-
-  const headerText = requestTypeLabel
-    ? t('selectProductsForRequest', { requestType: requestTypeLabel })
-    : t('selectProductsForRequestGeneric');
-
-  return (
-    <div className="pc-product-select-section">
-      <div style={productSelectHeaderStyle} className="pc-product-select-header">
-        <p
-          style={{
-            margin: 0,
-            fontSize: pcStyles.textXs.fontSize,
-            color: getVar('--pc-text-secondary'),
-          }}
-        >
-          {headerText}
-        </p>
-      </div>
-
-      <div
-        className="pc-product-select-chips"
-        data-testid="product-selection-chips"
-        role="listbox"
-        aria-label={headerText}
-      >
-        {directGroups.map((group) => {
-          const key = productGroupKey(group);
-          const purposeCount = buildGroupPurposes(group).length;
-          return (
-            <ProductChip
-              key={key}
-              group={group}
-              isSelected={selectedProductKey === key || isSingleGroup}
-              isLocked={isSingleGroup}
-              onSelect={onSelect}
-              activePurposesLabel={t('activePurposes', { count: purposeCount })}
-            />
-          );
-        })}
-
-        {nominatedGroups.map((group) => {
-          const key = productGroupKey(group);
-          const purposeCount = buildGroupPurposes(group).length;
-          const nominatorLabel =
-            group.nominator?.name ?? group.nominator?.email ?? '';
-          return (
-            <ProductChip
-              key={key}
-              group={group}
-              isSelected={selectedProductKey === key || isSingleGroup}
-              isLocked={isSingleGroup}
-              onSelect={onSelect}
-              nominationSuffix={t('nominationChipSuffix', {
-                nominator: nominatorLabel,
-              })}
-              activePurposesLabel={t('activePurposes', { count: purposeCount })}
-            />
-          );
-        })}
-      </div>
-    </div>
-  );
-}

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

@@ -1,331 +0,0 @@
-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>
-        <p style={{
-          marginTop: '0.25rem',
-          marginBottom: '0.5rem',
-          paddingLeft: getVar('--pc-spacing-sm'),
-          borderLeft: `2px solid ${getVar('--pc-primary')}`,
-          fontSize: pcStyles.textXs.fontSize,
-          color: getVar('--pc-text-secondary'),
-          lineHeight: 1.4,
-        }}>
-          {t('revocationNotDeletionNote') ||
-            'Revoking consent does not delete data the organization already holds. You can still request access to or erasure of this data, including for purposes whose consent you have withdrawn.'}
-        </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
-                          );
-                          if (isErasure) {
-                            return (
-                              <p
-                                key={de.uuid}
-                                style={{
-                                  fontSize: pcStyles.textSm.fontSize,
-                                  color: getVar('--pc-text-primary'),
-                                  textTransform: 'capitalize',
-                                  margin: 0,
-                                }}
-                              >
-                                {de.name}
-                              </p>
-                            );
-                          }
-                          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>
-  );
-}