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

package/src/RedactoPrivacyCenter/components/RequestSubmit.tsx

@@ -1,3 +1,4 @@
+import type { CSSProperties, ReactNode } from 'react';
 import character from '../assets/character.svg';
 import greenTick from '../assets/greenTick.svg';
 import sentImg from '../assets/sentImg.svg';
@@ -9,14 +10,234 @@ import { Mail } from 'lucide-react';
 
 const getVar = (varName: string): string => `var(${varName})`;
 
+type SummaryCardProps = Readonly<{
+  children: ReactNode;
+  backgroundColor?: CSSProperties['backgroundColor'];
+  borderColor?: CSSProperties['borderColor'];
+}>;
+
+/**
+ * Shared visual container for the post-submit success / partial-success
+ * blocks. Same shape is used for the single Case-ID card, the multi-case
+ * list, and the failures list (with warning colors overriding the
+ * defaults).
+ */
+const SummaryCard = ({
+  children,
+  backgroundColor,
+  borderColor,
+}: SummaryCardProps) => (
+  <div
+    style={{
+      marginTop: pcStyles.mtMd.marginTop,
+      padding: pcStyles.pSm.padding,
+      ...(backgroundColor === undefined
+        ? pcStyles.bgSecondary
+        : { backgroundColor }),
+      borderRadius: pcStyles.borderRadiusMd,
+      border: `1px solid ${borderColor ?? pcStyles.borderColor}`,
+    }}
+  >
+    {children}
+  </div>
+);
+
+/**
+ * Success / partial-success surface shown after a case (or batch of cases)
+ * is submitted. See `RequestSubmitProps` for the shape contract.
+ *
+ * Rendering rules:
+ *   - Exactly one succeeded entry + no failures → single Case-ID card
+ *     (same look as the pre-P2-SDK-4 behaviour). Used by legacy single-
+ *     case paths (nomination / grievance / non-grouped DSAR fallback).
+ *   - More than one succeeded entry → list of `product_name: case_id`
+ *     rows under a "{n} cases created" header.
+ *   - Any failed entries → a separate "Some requests failed" block with
+ *     a per-row Retry button that calls `onRetry(product_uuid)`.
+ */
 export default function RequestSubmit({
-  caseId,
+  result,
   contact,
   onCreateRequest,
+  onRetry,
+  retryingGroupKeys,
   revokeConsentOnFulfilment,
   revokedPurposeNames,
 }: RequestSubmitProps) {
   const { t } = useTranslation();
+
+  const succeeded = result.succeeded;
+  const failed = result.failed;
+  const successCount = succeeded.length;
+  const hasFailures = failed.length > 0;
+  const isSingleCase = successCount === 1 && !hasFailures;
+
+  const renderCaseList = () => {
+    if (successCount === 0) {
+      return null;
+    }
+    if (isSingleCase) {
+      const only = succeeded[0];
+      return (
+        <SummaryCard>
+          {only.product_name !== '' && (
+            <PCText
+              size="sm"
+              weight="medium"
+              style={{
+                marginBottom: pcStyles.mbXs.marginBottom,
+                wordBreak: 'break-word',
+              }}
+            >
+              {only.product_name}
+            </PCText>
+          )}
+          <PCText
+            size="base"
+            weight="bold"
+            style={{
+              color: pcStyles.primary,
+              wordBreak: 'break-word',
+              marginBottom: pcStyles.mbXs.marginBottom,
+            }}
+            className="pc-text-responsive"
+          >
+            {t('caseID')}: {only.case_id}
+          </PCText>
+          <PCText size="xs" weight="medium" color="secondary">
+            {t('saveThisID')}.
+          </PCText>
+        </SummaryCard>
+      );
+    }
+    return (
+      <SummaryCard>
+        <PCText
+          size="sm"
+          weight="semibold"
+          style={{
+            color: pcStyles.primary,
+            marginBottom: pcStyles.mbSm.marginBottom,
+          }}
+        >
+          {t('casesCreatedCount', { count: successCount })}
+        </PCText>
+        <ul
+          style={{
+            margin: 0,
+            padding: 0,
+            listStyle: 'none',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: getVar('--pc-spacing-xs'),
+          }}
+        >
+          {succeeded.map((entry) => (
+            <li
+              key={`${entry.group_key}:${entry.case_id}`}
+              style={{ wordBreak: 'break-word' }}
+            >
+              <PCText size="sm" weight="medium">
+                {entry.product_name}
+              </PCText>
+              <PCText
+                size="sm"
+                weight="bold"
+                style={{ color: pcStyles.primary, wordBreak: 'break-word' }}
+              >
+                {t('caseID')}: {entry.case_id}
+              </PCText>
+            </li>
+          ))}
+        </ul>
+        <PCText
+          size="xs"
+          weight="medium"
+          color="secondary"
+          style={{ marginTop: pcStyles.mtSm.marginTop }}
+        >
+          {t('saveThisID')}.
+        </PCText>
+      </SummaryCard>
+    );
+  };
+
+  const renderFailures = () => {
+    if (!hasFailures) {
+      return null;
+    }
+    return (
+      <SummaryCard
+        backgroundColor={pcStyles.warningBg}
+        borderColor={pcStyles.warningBorder}
+      >
+        <PCText
+          size="sm"
+          weight="semibold"
+          style={{
+            color: pcStyles.warningText,
+            marginBottom: pcStyles.mbSm.marginBottom,
+          }}
+        >
+          {t('someRequestsFailed')}
+        </PCText>
+        <ul
+          style={{
+            margin: 0,
+            padding: 0,
+            listStyle: 'none',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: getVar('--pc-spacing-sm'),
+          }}
+        >
+          {failed.map((entry) => {
+            const isRetrying =
+              retryingGroupKeys?.has(entry.group_key) === true;
+            return (
+              <li
+                key={entry.group_key}
+                style={{
+                  display: 'flex',
+                  alignItems: 'flex-start',
+                  justifyContent: 'space-between',
+                  gap: getVar('--pc-spacing-sm'),
+                  flexWrap: 'wrap',
+                }}
+              >
+                <div
+                  style={{
+                    minWidth: 0,
+                    flex: 1,
+                    wordBreak: 'break-word',
+                  }}
+                >
+                  <PCText size="sm" weight="medium">
+                    {entry.product_name}
+                  </PCText>
+                  <PCText size="xs" weight="medium" color="secondary">
+                    {entry.error}
+                  </PCText>
+                </div>
+                {onRetry !== undefined && (
+                  <PCButton
+                    variant="outline"
+                    size="sm"
+                    onClick={() => onRetry(entry.group_key)}
+                    disabled={isRetrying}
+                    isLoading={isRetrying}
+                  >
+                    {isRetrying ? t('retrying') : t('retry')}
+                  </PCButton>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      </SummaryCard>
+    );
+  };
+
   return (
     <div style={{ marginTop: pcStyles.mtMd.marginTop, position: 'relative' }}>
       <img
@@ -33,37 +254,47 @@ export default function RequestSubmit({
           filter: 'brightness(0) saturate(100%) invert(var(--pc-icon-filter, 0))',
         }}
       />
-      <div style={{
-        ...pcStyles.card,
-        borderRadius: pcStyles.borderRadiusXl,
-        padding: pcStyles.pLg.padding,
-        position: 'relative',
-        ...pcStyles.bgPrimary,
-        border: `1px solid ${pcStyles.borderColor}`,
-      }} className="pc-padding-responsive">
-        <div style={{
-          ...pcStyles.flex,
-          ...pcStyles.flexCol,
-          ...pcStyles.itemsStart,
-          ...pcStyles.gapMd,
-        }} className="pc-flex-responsive">
-          <div style={{
+      <div
+        style={{
+          ...pcStyles.card,
+          borderRadius: pcStyles.borderRadiusXl,
+          padding: pcStyles.pLg.padding,
+          position: 'relative',
+          ...pcStyles.bgPrimary,
+          border: `1px solid ${pcStyles.borderColor}`,
+        }}
+        className="pc-padding-responsive"
+      >
+        <div
+          style={{
             ...pcStyles.flex,
+            ...pcStyles.flexCol,
             ...pcStyles.itemsStart,
             ...pcStyles.gapMd,
-            width: '100%',
-          }}>
-            <div style={{
-              height: '2.5rem',
-              width: '2.5rem',
-              flexShrink: 0,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              borderRadius: '50%',
-              backgroundColor: `${getVar('--pc-success')}33`,
-              padding: '0.375rem',
-            }}>
+          }}
+          className="pc-flex-responsive"
+        >
+          <div
+            style={{
+              ...pcStyles.flex,
+              ...pcStyles.itemsStart,
+              ...pcStyles.gapMd,
+              width: '100%',
+            }}
+          >
+            <div
+              style={{
+                height: '2.5rem',
+                width: '2.5rem',
+                flexShrink: 0,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: '50%',
+                backgroundColor: `${getVar('--pc-success')}33`,
+                padding: '0.375rem',
+              }}
+            >
               <img
                 src={greenTick}
                 alt="success"
@@ -94,42 +325,19 @@ export default function RequestSubmit({
               >
                 {t('thankYouForSubmittingYourRequest')}.
               </PCText>
-              <div style={{
-                marginTop: pcStyles.mtMd.marginTop,
-                padding: pcStyles.pSm.padding,
-                ...pcStyles.bgSecondary,
-                borderRadius: pcStyles.borderRadiusMd,
-                border: `1px solid ${pcStyles.borderColor}`,
-              }}>
-                <PCText
-                  size="base"
-                  weight="bold"
-                  style={{
-                    color: pcStyles.primary,
-                    wordBreak: 'break-word',
-                    marginBottom: pcStyles.mbXs.marginBottom,
-                  }}
-                  className="pc-text-responsive"
-                >
-                  {t('caseID')}: {caseId}
-                </PCText>
-                <PCText
-                  size="xs"
-                  weight="medium"
-                  color="secondary"
-                >
-                  {t('saveThisID')}.
-                </PCText>
-              </div>
-              <div style={{
-                ...pcStyles.flex,
-                ...pcStyles.itemsStart,
-                ...pcStyles.gapSm,
-                marginTop: pcStyles.mtMd.marginTop,
-                padding: '0.5rem 0.625rem',
-                ...pcStyles.bgSecondary,
-                borderRadius: pcStyles.borderRadiusMd,
-              }}>
+              {renderCaseList()}
+              {renderFailures()}
+              <div
+                style={{
+                  ...pcStyles.flex,
+                  ...pcStyles.itemsStart,
+                  ...pcStyles.gapSm,
+                  marginTop: pcStyles.mtMd.marginTop,
+                  padding: '0.5rem 0.625rem',
+                  ...pcStyles.bgSecondary,
+                  borderRadius: pcStyles.borderRadiusMd,
+                }}
+              >
                 <Mail
                   size={16}
                   style={{
@@ -187,11 +395,13 @@ export default function RequestSubmit({
                 opacity: 0.9,
               }}
             />
-            <div style={{
-              marginTop: pcStyles.mtMd.marginTop,
-              ...pcStyles.flex,
-              ...pcStyles.justifyCenter
-            }}>
+            <div
+              style={{
+                marginTop: pcStyles.mtMd.marginTop,
+                ...pcStyles.flex,
+                ...pcStyles.justifyCenter,
+              }}
+            >
               <PCButton
                 variant="primary"
                 size="sm"
@@ -203,7 +413,10 @@ export default function RequestSubmit({
             </div>
           </div>
         </div>
-        <div className="pc-block-xs pc-hidden-md" style={{ marginTop: pcStyles.mtMd.marginTop }}>
+        <div
+          className="pc-block-xs pc-hidden-md"
+          style={{ marginTop: pcStyles.mtMd.marginTop }}
+        >
           <div style={{ ...pcStyles.flex, ...pcStyles.justifyCenter }}>
             <PCButton
               variant="primary"

package/src/RedactoPrivacyCenter/components/SideMenuBarPC/constants.tsx

@@ -1,4 +1,4 @@
-import { Activity, MessageCircleWarning, ShieldCheck } from 'lucide-react';
+import { Activity, MessageCircleWarning, ReceiptText, ShieldCheck } from 'lucide-react';
 import type { MenuItem } from './types';
 
 export const menuItemsPC: MenuItem[] = [
@@ -17,4 +17,9 @@ export const menuItemsPC: MenuItem[] = [
     href: 'activity',
     icon: <Activity size={18} strokeWidth={1.75} />,
   },
+  {
+    name: 'My Receipt',
+    href: 'receipts',
+    icon: <ReceiptText size={18} strokeWidth={1.75} />,
+  },
 ];

package/src/RedactoPrivacyCenter/components/groupHelpers.ts

@@ -0,0 +1,56 @@
+import type { DataElement, FormProductGroup, Purpose } from '../lib/types';
+
+/**
+ * Build the per-purpose state used by `PurposeSelectionSection` for a single
+ * product group. Mirrors the legacy `data.purposes`-derived shape so the
+ * existing checkbox component works unchanged: data-elements default to
+ * `selected: false` and purposes are filtered to those with at least one
+ * data element.
+ *
+ * Lives in its own module so both `Form.tsx` (which seeds the per-group
+ * state Map) and `ProductSelectionSection.tsx` (which computes the
+ * activeCount shown on each product card) can share the same filter —
+ * otherwise the card header drifts from the list-body it summarises.
+ */
+export const buildGroupPurposes = (group: FormProductGroup): Purpose[] =>
+  group.purposes
+    .filter((p): p is Purpose => p !== null && p !== undefined)
+    .map((p) => {
+      const validDataElements = Array.isArray(p.data_elements)
+        ? p.data_elements
+            .filter((de) => de !== null && de !== undefined && Boolean(de.uuid))
+            .map((de) => ({ ...de, selected: false }))
+        : [];
+      return {
+        ...p,
+        selected: false,
+        data_elements: validDataElements,
+      };
+    })
+    .filter((p) => p.data_elements.length > 0);
+
+export type GroupCorrectionDataElement = DataElement & { purposeName: string };
+
+/**
+ * Build a product-scoped deduped data-element list for grouped CORRECTION.
+ * Dedup is done by data-element UUID within the product group.
+ */
+export const buildGroupDataElements = (
+  group: FormProductGroup,
+): GroupCorrectionDataElement[] => {
+  const byUuid = new Map<string, GroupCorrectionDataElement>();
+  for (const purpose of group.purposes) {
+    if (!purpose) {
+      continue;
+    }
+    const dataElements = Array.isArray(purpose.data_elements)
+      ? purpose.data_elements
+      : [];
+    for (const de of dataElements) {
+      if (de && de.uuid && !byUuid.has(de.uuid)) {
+        byUuid.set(de.uuid, { ...de, purposeName: purpose.name });
+      }
+    }
+  }
+  return Array.from(byUuid.values());
+};

package/src/RedactoPrivacyCenter/components/receiptColumns.tsx

@@ -0,0 +1,203 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { createColumnHelper } from '@tanstack/react-table';
+import dayjs from 'dayjs';
+import { Download } from 'lucide-react';
+import { PCText, PCButton, PCBadge } from '../ui';
+import { pcStyles } from '../styles/pcStyles';
+import { STATUS_COLORS } from '../lib/constants';
+import { getVar } from '../lib/utils';
+import type { Receipt } from '../lib/types';
+
+const columnHelper = createColumnHelper<Receipt>();
+
+type EventPalette = { color: string; bg: string };
+type BadgeVariant = 'success' | 'error' | 'warning' | 'info';
+
+// Map the raw event_type enum to a status palette + a fallback i18n label.
+// The localized `event_type_display` from the API is preferred when present.
+const EVENT_PALETTE: Record<string, EventPalette> = {
+  GRANTED: STATUS_COLORS.success,
+  WITHDRAWN: STATUS_COLORS.warning,
+  DECLINED: STATUS_COLORS.error,
+  EXPIRED: STATUS_COLORS.warning,
+};
+
+const EVENT_LABEL_KEY: Record<string, string> = {
+  GRANTED: 'consentGranted',
+  WITHDRAWN: 'consentRevoked',
+  DECLINED: 'consentDeclined',
+  EXPIRED: 'consentExpired',
+};
+
+const FALLBACK_PALETTE: EventPalette = STATUS_COLORS.info;
+const EVENT_BADGE_VARIANT: Record<string, BadgeVariant> = {
+  GRANTED: 'success',
+  WITHDRAWN: 'warning',
+  DECLINED: 'error',
+  EXPIRED: 'warning',
+};
+
+// First two alphanumerics of the product name, e.g. "Website" → "WE", "Mobile App" → "MO".
+function getProductInitials(name: string): string {
+  const cleaned = name.replace(/[^a-zA-Z0-9]/g, '');
+  return cleaned.slice(0, 2).toUpperCase() || '?';
+}
+
+const cellPad = { paddingTop: pcStyles.pySm.paddingTop, paddingBottom: pcStyles.pySm.paddingBottom };
+
+export const useReceiptColumns = ({
+  onDownload,
+  downloadingUuid,
+}: {
+  onDownload: (receipt: Receipt) => void;
+  downloadingUuid: string | null;
+}) => {
+  const { t } = useTranslation();
+  return useMemo(
+    () => [
+      columnHelper.accessor('event_type', {
+        id: 'event',
+        header: t('event'),
+        cell: (info) => {
+          const row = info.row.original;
+          const raw = String(row.event_type ?? '').toUpperCase();
+          const palette = EVENT_PALETTE[raw] ?? FALLBACK_PALETTE;
+          const badgeVariant = EVENT_BADGE_VARIANT[raw] ?? 'info';
+          const labelKey = EVENT_LABEL_KEY[raw];
+          const label = row.event_type_display || (labelKey ? t(labelKey) : row.event_type || '—');
+          return (
+            <div style={cellPad}>
+              <PCBadge
+                variant={badgeVariant}
+                size="sm"
+                style={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: '0.4375rem',
+                  fontWeight: 600,
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                <span
+                  aria-hidden="true"
+                  style={{
+                    width: 7,
+                    height: 7,
+                    borderRadius: '50%',
+                    backgroundColor: palette.color,
+                    flexShrink: 0,
+                  }}
+                />
+                {label}
+              </PCBadge>
+            </div>
+          );
+        },
+        enableSorting: false,
+        enableColumnFilter: false,
+      }),
+      columnHelper.accessor('product_name', {
+        id: 'product',
+        header: t('product'),
+        cell: (info) => {
+          const row = info.row.original;
+          const name = row.product_name_display || row.product_name || '—';
+          return (
+            <div style={{ ...cellPad, display: 'flex', alignItems: 'center', gap: '0.625rem' }}>
+              <span
+                aria-hidden="true"
+                style={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  width: 32,
+                  height: 32,
+                  borderRadius: 8,
+                  backgroundColor: getVar('--pc-bg-tertiary'),
+                  color: getVar('--pc-text-secondary'),
+                  border: `1px solid ${getVar('--pc-border-color')}`,
+                  fontSize: '0.6875rem',
+                  fontWeight: 600,
+                  flexShrink: 0,
+                }}
+              >
+                {getProductInitials(name)}
+              </span>
+              <PCText size="sm" weight="medium" color="primary">
+                {name}
+              </PCText>
+            </div>
+          );
+        },
+        enableSorting: false,
+        enableColumnFilter: false,
+      }),
+      columnHelper.accessor('created_at', {
+        id: 'date',
+        header: t('date'),
+        cell: (info) => {
+          const d = dayjs(info.getValue());
+          return (
+            <div style={cellPad}>
+              <PCText size="sm" color="primary" weight="medium">
+                {d.isValid() ? d.format('MMM D, YYYY') : '—'}
+              </PCText>
+            </div>
+          );
+        },
+        enableSorting: false,
+        enableColumnFilter: false,
+      }),
+      columnHelper.display({
+        id: 'time',
+        header: t('time'),
+        cell: (info) => {
+          const d = dayjs(info.row.original.created_at);
+          return (
+            <div style={cellPad}>
+              <PCText size="sm" color="secondary">
+                {d.isValid() ? d.format('h:mm A') : '—'}
+              </PCText>
+            </div>
+          );
+        },
+        enableSorting: false,
+        enableColumnFilter: false,
+      }),
+      columnHelper.display({
+        id: 'download',
+        header: t('download'),
+        meta: { align: 'right' },
+        cell: (info) => {
+          const row = info.row.original;
+          const isDownloading = downloadingUuid === row.uuid;
+          return (
+            <div style={{ ...cellPad, display: 'flex', justifyContent: 'flex-end' }}>
+              <PCButton
+                variant="outline"
+                size="sm"
+                isLoading={isDownloading}
+                disabled={isDownloading || !row.uuid}
+                onClick={() => onDownload(row)}
+                style={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: '0.375rem',
+                  minWidth: '6.75rem',
+                  justifyContent: 'center',
+                }}
+              >
+                {!isDownloading && <Download size={15} strokeWidth={1.9} />}
+                {t('download')}
+              </PCButton>
+            </div>
+          );
+        },
+        enableSorting: false,
+        enableColumnFilter: false,
+      }),
+    ],
+    [t, onDownload, downloadingUuid]
+  );
+};