@redacto.io/consent-sdk-react 9.1.0 → 9.2.0-beta.1

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

@@ -0,0 +1,222 @@
+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 activeCount = buildGroupPurposes(group).length;
+          return (
+            <ProductChip
+              key={key}
+              group={group}
+              isSelected={selectedProductKey === key || isSingleGroup}
+              isLocked={isSingleGroup}
+              onSelect={onSelect}
+              activePurposesLabel={t('activePurposes', { count: activeCount })}
+            />
+          );
+        })}
+
+        {nominatedGroups.map((group) => {
+          const key = productGroupKey(group);
+          const activeCount = 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: activeCount })}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}

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

@@ -145,6 +145,18 @@ export default function PurposeSelectionSection({
             ? 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')}