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

package/src/RedactoPrivacyCenter/components/Form.tsx

@@ -8,10 +8,14 @@ import { useTranslation } from 'react-i18next';
 import { AiOutlineClose } from 'react-icons/ai';
 import { PiUploadBold } from 'react-icons/pi';
 import { toast } from '../utils/toast';
-import { PCButton, PCCheckbox, PCInput, PCLoader, PCSelect, PCTextarea } from '../ui';
-import { PCModal } from '../ui/PCModal';
+import { PCButton, PCCheckbox, PCInput, PCLoader, PCSelect, PCText, PCTextarea } from '../ui';
+import { buildGroupDataElements, buildGroupPurposes } from './groupHelpers';
 import { pcStyles } from '../styles/pcStyles';
-import { createCaseRequest, getFormData } from '../lib/api';
+import {
+  createCaseRequest,
+  createCaseRequestUnsafe,
+  getFormData,
+} from '../lib/api';
 import { ensureValidToken } from '../lib/utils';
 import { useAuth } from '../context/AuthContext';
 import { useBaseUrl } from '../context/BaseUrlContext';
@@ -23,8 +27,11 @@ import { useOrganization } from '../context/OrganizationContext';
 import i18n from '../lib/i18n';
 import { getLangParam } from '../lib/useCurrentLanguage';
 import type {
+  BatchCaseSubmitResult,
+  CreateCaseResponse,
   DataElement,
   FormData,
+  FormProductGroup,
   GrievanceOptions,
   GrievanceTypeElement,
   GrievanceValue,
@@ -38,14 +45,74 @@ import { RequestTypeEnum } from '../lib/types';
 import CorrectionDataSection from './DataRequest/CorrectionDataSection';
 import GrievanceDataSection from './DataRequest/GrievanceDataSection';
 import NominationDataSection from './DataRequest/NominationDataSection';
+import {
+  ProductSelectionSection,
+  productGroupKey,
+} from './DataRequest/ProductSelectionSection';
 import PurposeSelectionSection from './DataRequest/PurposeSelectionSection';
 import RequestSubmit from './RequestSubmit';
 import type { CaseHistoryProps } from './types';
-import { FiAlertCircle, FiChevronDown, FiChevronUp, FiX } from 'react-icons/fi';
-import { MAX_DISPLAYED_PURPOSE_NAMES_IN_ERASURE_MODAL } from './constant';
+import { FiChevronDown, FiChevronUp, FiX } from 'react-icons/fi';
 
 const getVar = (varName: string): string => `var(${varName})`;
 
+/**
+ * Narrow shape of the `case_id`/`uuid` fields extracted from a
+ * `CreateCaseResponse` (or its unwrapped privacy-center variant). Both
+ * are stringly returned — empty strings mean "not present on the
+ * response" rather than `null`, which keeps the call sites simple.
+ */
+type ExtractedCaseRef = { uuid: string; case_id: string };
+
+/**
+ * The two response shapes `extractCaseId` walks before resolving an
+ * `ExtractedCaseRef`. Privacy-center returns the unwrapped detail;
+ * case-management wraps it in `{ code, status, detail }`.
+ */
+type CaseIdContainer = { case_id?: string; uuid?: string };
+
+/**
+ * Request types that engage the Phase 2 product-step + per-product picker.
+ * Nomination and grievance are org-level and skip the product step.
+ *
+ * ACCESS/ERASURE drive a per-product `PurposeSelectionSection`; CORRECTION
+ * drives a per-product `CorrectionDataSection` whose `dataElements` are
+ * scoped to the selected group (dedup within product, not across products).
+ */
+const GROUPED_REQUEST_TYPES: ReadonlySet<RequestTypeEnum> = new Set([
+  RequestTypeEnum.ACCESS,
+  RequestTypeEnum.ERASURE,
+  RequestTypeEnum.CORRECTION,
+]);
+
+const isGroupedRequestType = (
+  rt: RequestTypeEnum | null,
+): rt is RequestTypeEnum => rt !== null && GROUPED_REQUEST_TYPES.has(rt);
+
+/**
+ * Pull the `case_id` out of a `createCaseRequest` response, handling both
+ * the privacy-center shape (unwrapped detail) and the case-management shape
+ * (wrapped { code, status, detail }).
+ */
+const extractCaseId = (
+  response: CreateCaseResponse | null,
+): ExtractedCaseRef | null => {
+  if (!response) {
+    return null;
+  }
+  if ('detail' in response && response.detail) {
+    const detail = response.detail as CaseIdContainer;
+    if (detail.case_id || detail.uuid) {
+      return { case_id: detail.case_id ?? '', uuid: detail.uuid ?? '' };
+    }
+  }
+  const direct = response as unknown as CaseIdContainer;
+  if (direct.case_id || direct.uuid) {
+    return { case_id: direct.case_id ?? '', uuid: direct.uuid ?? '' };
+  }
+  return null;
+};
+
 export default function Form({
   onCreateRequest,
   isPopup = false,
@@ -93,6 +160,18 @@ export default function Form({
   });
   const [erasurePurposes, setErasurePurposes] = useState<Purpose[]>([]);
   const [accessPurposes, setAccessPurposes] = useState<Purpose[]>([]);
+  // Phase 2 of TECH-3712. Set of product-group keys the user has selected on
+  // the new product-cards step. Keyed by `productGroupKey(group)` so a single
+  // product reached both directly and via a nominator stays distinct.
+  const [selectedProductKey, setSelectedProductKey] = useState<string | null>(
+    null,
+  );
+  // Phase 2 of TECH-3712. Per-product purpose state keyed by
+  // `productGroupKey(group)`. Each selected group keeps its own Purpose[]
+  // for the existing PurposeSelectionSection to drive.
+  const [purposesByGroupKey, setPurposesByGroupKey] = useState<
+    Map<string, Purpose[]>
+  >(new Map());
   const [selectedCorrectionElements, setSelectedCorrectionElements] = useState<
     string[]
   >([]);
@@ -102,7 +181,29 @@ export default function Form({
   const [correctionValues, setCorrectionValues] = useState<
     Record<string, { current: string; updated: string }>
   >({});
-  const [caseId, setCaseId] = useState<string | null>(null);
+  // TECH-3712 (correction grouped path). Per-product correction selections
+  // keyed by `productGroupKey(group)`. Parallel to `purposesByGroupKey`
+  // for ACCESS/ERASURE — each selected group keeps its own list of chosen
+  // data-element names and the {current, updated} value pairs for them.
+  const [correctionElementsByGroupKey, setCorrectionElementsByGroupKey] =
+    useState<Map<string, string[]>>(new Map());
+  const [correctionValuesByGroupKey, setCorrectionValuesByGroupKey] = useState<
+    Map<string, Record<string, { current: string; updated: string }>>
+  >(new Map());
+  // P2-SDK-4 of TECH-3712. Holds the aggregated batch result that
+  // `RequestSubmit` renders on the success step. Both paths populate this:
+  //   - Grouped DSAR: directly from `submitBatchCases`.
+  //   - Legacy single-case: a synthetic single-entry result.
+  const [batchResult, setBatchResult] = useState<BatchCaseSubmitResult | null>(
+    null,
+  );
+  // P2-SDK-4 of TECH-3712. Product-group keys currently mid-retry. Drives
+  // the per-row spinner state on the failure list. Keyed by
+  // `productGroupKey(group)` (not `product_uuid`) so a product picked both
+  // directly and via a nominator can be retried independently.
+  const [retryingGroupKeys, setRetryingGroupKeys] = useState<Set<string>>(
+    new Set(),
+  );
   const fileInputRef = useRef<HTMLInputElement>(null);
   // Store the original English form data for submission — translations are display-only
   const englishDataRef = useRef<FormData | null>(null);
@@ -134,10 +235,6 @@ export default function Form({
   const [isTranslating, setIsTranslating] = useState(false);
   const [isRequestDetailsExpanded, setIsRequestDetailsExpanded] =
     useState(true);
-  const [isErasureConsentModalOpen, setIsErasureConsentModalOpen] =
-    useState(false);
-  const [revokeConsentOnFulfilment, setRevokeConsentOnFulfilment] =
-    useState(false);
 
   const resetFileInput = () => {
     if (fileInputRef.current) {
@@ -145,6 +242,122 @@ export default function Form({
     }
   };
 
+  // Phase 2 of TECH-3712. Backwards-compat guard: the new grouped flow only
+  // engages when the backend ships the `direct_groups` field (Phase 1). Older
+  // backends fall through to the legacy flat-purposes render below.
+  const useGroupedRender = useMemo<boolean>(
+    () => Array.isArray(data?.direct_groups),
+    [data],
+  );
+
+  // Phase 2 of TECH-3712. Surface a one-time warning per data load when we
+  // fall back to the legacy flat-purposes render. Helps customer developers
+  // notice their backend hasn't been upgraded to Phase 1 yet (the form still
+  // works, but the new product-scoped DSAR UX is unavailable).
+  useEffect(() => {
+    if (data && !useGroupedRender) {
+      console.warn(
+        '[consent-sdk] Backend response lacks direct_groups; ' +
+          'falling back to legacy flat-purposes render. ' +
+          'Update consent-server to Phase 1 to enable product-scoped DSAR.',
+      );
+    }
+  }, [data, useGroupedRender]);
+
+  // Phase 2 of TECH-3712. Union of direct + nominated product groups used to
+  // drive both the cards step and the per-product purpose-picker step.
+  const allGroups = useMemo<FormProductGroup[]>(() => {
+    if (!useGroupedRender || !data) {
+      return [];
+    }
+    return [...(data.direct_groups ?? []), ...(data.nominated_groups ?? [])];
+  }, [data, useGroupedRender]);
+
+  // TECH-3712 UX: when the DP has exactly one consent group total
+  // (direct + nominated combined), the product-selection step is friction —
+  // there's nothing to choose. Skip rendering ProductSelectionSection
+  // entirely and auto-select the lone group below so step 3 (per-product
+  // purpose picker) renders without an intermediate card. With zero groups
+  // we still render the section so the empty-state message is visible.
+  const totalGroups = useMemo<number>(
+    () =>
+      (data?.direct_groups?.length ?? 0) +
+      (data?.nominated_groups?.length ?? 0),
+    [data],
+  );
+  const skipProductStep = totalGroups === 1;
+
+  // Phase 2 of TECH-3712. Subset of groups currently checked on the cards
+  // step — drives which `PurposeSelectionSection`s render and which cases
+  // get POSTed on submit.
+  const selectedGroups = useMemo<FormProductGroup[]>(() => {
+    if (selectedProductKey) {
+      const group = allGroups.find(
+        (g) => productGroupKey(g) === selectedProductKey,
+      );
+      if (group) {
+        return [group];
+      }
+    }
+    if (skipProductStep) {
+      const onlyGroup =
+        data?.direct_groups?.[0] ?? data?.nominated_groups?.[0];
+      return onlyGroup ? [onlyGroup] : [];
+    }
+    return [];
+  }, [allGroups, selectedProductKey, skipProductStep, data]);
+
+  // Phase 2 of TECH-3712. Stable select handler for ProductSelectionSection.
+  // Single-group auto-select fires this on mount via the child's effect.
+  const handleProductSelect = useCallback(
+    (key: string | null, _group: FormProductGroup | null) => {
+      setSelectedProductKey(key);
+    },
+    [],
+  );
+
+  // Phase 2 of TECH-3712. Stable per-group setter passed to the wrapped
+  // PurposeSelectionSection so each card edits its own slice of state.
+  const setPurposesForGroup = useCallback(
+    (key: string, updated: Purpose[]) => {
+      setPurposesByGroupKey((prev) => {
+        const next = new Map(prev);
+        next.set(key, updated);
+        return next;
+      });
+    },
+    [],
+  );
+
+  // TECH-3712 (correction grouped path). Stable per-group setters for the
+  // CORRECTION maps. CorrectionDataSection's `setSelected` and
+  // `setCorrectionValues` props are value-setters (not state updaters), so
+  // these accept the full replacement value the child computed.
+  const setCorrectionElementsForGroup = useCallback(
+    (key: string, values: string[]) => {
+      setCorrectionElementsByGroupKey((prev) => {
+        const next = new Map(prev);
+        next.set(key, values);
+        return next;
+      });
+    },
+    [],
+  );
+
+  const setCorrectionValuesForGroup = useCallback(
+    (
+      key: string,
+      values: Record<string, { current: string; updated: string }>,
+    ) => {
+      setCorrectionValuesByGroupKey((prev) => {
+        const next = new Map(prev);
+        next.set(key, values);
+        return next;
+      });
+    },
+    [],
+  );
+
   useEffect(() => {
     if (data?.purposes) {
       // Validate purposes array structure
@@ -164,11 +377,13 @@ export default function Form({
 
       const uniqueElements = new Map();
       extractedPurposes.forEach((purpose) => {
-        // Ensure data_elements is an array and filter out any null/undefined elements
-        // Only include data elements with selected === true
+        // Ensure data_elements is an array and filter out any null/undefined elements.
+        // Include every data element the org holds for this user, regardless of current
+        // consent state. Revoking consent does not delete data (TECH-4089), so purposes
+        // with revoked/withdrawn consent must remain raisable for access/erasure/correction.
         const validDataElements = Array.isArray(purpose.data_elements)
           ? purpose.data_elements.filter(
-            (element) => element !== null && element !== undefined && element.uuid && element.selected
+            (element) => element !== null && element !== undefined && element.uuid
           )
           : [];
 
@@ -188,13 +403,14 @@ export default function Form({
         Array.from(uniqueElements.values()) as DataElement[]
       );
 
-      // Ensure data_elements are properly preserved with all properties
-      // Only include data elements with selected === true, and filter out purposes with no data elements
+      // Ensure data_elements are properly preserved with all properties.
+      // Include data elements regardless of consent state (revocation ≠ deletion,
+      // TECH-4089); only drop purposes that genuinely have no data elements.
       const processedPurposes = extractedPurposes
         .map((p) => {
           const validDataElements = Array.isArray(p.data_elements)
             ? p.data_elements
-              .filter((de) => de !== null && de !== undefined && de.selected)
+              .filter((de) => de !== null && de !== undefined && de.uuid)
               .map((de) => ({
                 ...de,
                 selected: false,
@@ -316,18 +532,28 @@ export default function Form({
     setSelectedCorrectionElements([]);
     setCorrectionValues({});
     setNominationData({ nominee_email: '', nominee_mobile: '' });
+    // Phase 2 of TECH-3712. Drop product-step state too so switching from
+    // access to erasure (or back) starts the cards step from scratch.
+    setSelectedProductKey(null);
+    setPurposesByGroupKey(new Map());
+    // TECH-3712 (correction grouped path). Drop the per-group correction
+    // maps too so switching into/out of CORRECTION doesn't carry stale
+    // selections from a previous request-type pick.
+    setCorrectionElementsByGroupKey(new Map());
+    setCorrectionValuesByGroupKey(new Map());
     if (data?.purposes && Array.isArray(data.purposes)) {
       const extractedPurposes = data.purposes
         .map((p) => p?.purpose)
         .filter((p) => p !== null && p !== undefined);
 
-      // Ensure data_elements are properly preserved with all properties
-      // Only include data elements with selected === true, and filter out purposes with no data elements
+      // Ensure data_elements are properly preserved with all properties.
+      // Include data elements regardless of consent state (revocation ≠ deletion,
+      // TECH-4089); only drop purposes that genuinely have no data elements.
       const processedPurposes = extractedPurposes
         .map((p) => {
           const validDataElements = Array.isArray(p.data_elements)
             ? p.data_elements
-              .filter((de) => de !== null && de !== undefined && de.selected)
+              .filter((de) => de !== null && de !== undefined && de.uuid)
               .map((de) => ({
                 ...de,
                 selected: false,
@@ -361,6 +587,94 @@ export default function Form({
     }
   }, [requestType, data, grievanceOptions]);
 
+  // TECH-3712 UX: when `skipProductStep` is true (DP has exactly one consent
+  // group total), auto-select that group so step 3 (per-product purpose
+  // picker) renders directly without the user clicking a card. Placed AFTER
+  // the request-type-change clearing effect above so a request-type switch
+  // re-establishes the selection on the next tick — without this ordering,
+  // the clearing effect would wipe whatever this set on the same render.
+  // The child ProductSelectionSection has an equivalent mount-time effect,
+  // but that effect never fires here because the child is not rendered
+  // (see the JSX gate below).
+  useEffect(() => {
+    if (!skipProductStep) {
+      return;
+    }
+    const onlyGroup =
+      data?.direct_groups?.[0] ?? data?.nominated_groups?.[0];
+    if (!onlyGroup) {
+      return;
+    }
+    const key = productGroupKey(onlyGroup);
+    setSelectedProductKey((prev) => (prev === key ? prev : key));
+  }, [skipProductStep, data, requestType]);
+
+  // Phase 2 of TECH-3712. Initialise purpose state for newly-selected groups
+  // and prune entries for groups that have been deselected. Idempotent — only
+  // mutates when the keyset actually changes. Declared AFTER the request-type
+  // clearing effect so a type switch doesn't wipe freshly seeded entries.
+  useEffect(() => {
+    setPurposesByGroupKey((prev) => {
+      const next = new Map(prev);
+      const selectedKeys = new Set<string>();
+      for (const group of selectedGroups) {
+        const key = productGroupKey(group);
+        selectedKeys.add(key);
+        if (!next.has(key)) {
+          next.set(key, buildGroupPurposes(group));
+        }
+      }
+      for (const existingKey of Array.from(next.keys())) {
+        if (!selectedKeys.has(existingKey)) {
+          next.delete(existingKey);
+        }
+      }
+      return next;
+    });
+  }, [selectedGroups]);
+
+  // TECH-3712 (correction grouped path). Mirror the purpose-state effect
+  // for the CORRECTION per-group maps: seed empty slices for newly-selected
+  // groups and prune slices for deselected ones. Empty defaults keep the
+  // CorrectionDataSection signature unchanged (it expects a `string[]` and
+  // a `Record<string, {current, updated}>`).
+  useEffect(() => {
+    setCorrectionElementsByGroupKey((prev) => {
+      const next = new Map(prev);
+      const selectedKeys = new Set<string>();
+      for (const group of selectedGroups) {
+        const key = productGroupKey(group);
+        selectedKeys.add(key);
+        if (!next.has(key)) {
+          next.set(key, []);
+        }
+      }
+      for (const existingKey of Array.from(next.keys())) {
+        if (!selectedKeys.has(existingKey)) {
+          next.delete(existingKey);
+        }
+      }
+      return next;
+    });
+    setCorrectionValuesByGroupKey((prev) => {
+      const next = new Map(prev);
+      const selectedKeys = new Set<string>();
+      for (const group of selectedGroups) {
+        const key = productGroupKey(group);
+        selectedKeys.add(key);
+        if (!next.has(key)) {
+          next.set(key, {});
+        }
+      }
+      for (const existingKey of Array.from(next.keys())) {
+        if (!selectedKeys.has(existingKey)) {
+          next.delete(existingKey);
+        }
+      }
+      return next;
+    });
+  }, [selectedGroups]);
+
 
   // Fetch API translations when language changes (purposes, data elements, grievance options)
   useEffect(() => {
@@ -505,52 +819,60 @@ export default function Form({
     return translatedName;
   }, [data]);
 
-  const selectedErasurePurposeList = useMemo(
-    () =>
-      erasurePurposes
-        .filter((p) => p.selected || p.data_elements.some((de) => de.selected))
-        .map((p) => p.name)
-        .filter(Boolean),
-    [erasurePurposes]
-  );
-
-  const selectedErasurePurposeNames = useMemo(() => {
-    if (
-      selectedErasurePurposeList.length === 0 ||
-      selectedErasurePurposeList.length > MAX_DISPLAYED_PURPOSE_NAMES_IN_ERASURE_MODAL
-    ) {
-      return t('revokeConsentModalYourPurposes');
-    }
-    return selectedErasurePurposeList.join(', ');
-  }, [selectedErasurePurposeList, t]);
-
   const handleSubmitClick = () => {
-    if (!isFormValid){
-       return
-    };
-    if (requestType === RequestTypeEnum.ERASURE) {
-      setIsErasureConsentModalOpen(true);
+    if (!isFormValid) {
       return;
     }
-    setRevokeConsentOnFulfilment(false);
     void handleSubmit(false);
   };
 
-  const handleErasureModalChoice = (revoke: boolean) => {
-    setRevokeConsentOnFulfilment(revoke);
-    setIsErasureConsentModalOpen(false);
-    void handleSubmit(revoke);
-  };
-
-  const handleErasureModalClose = () => {
-    setIsErasureConsentModalOpen(false);
-  };
-
   const handleSubmit = async (revokeConsent: boolean = false) => {
-    if (!isFormValid){
-       return
-      };
+    if (!isFormValid) {
+      return;
+    }
 
+    // Phase 2 of TECH-3712. Multi-product DSAR batch path: fan one
+    // createCaseRequest per selected product via Promise.allSettled so
+    // partial failures don't tank the whole submission.
+    if (useGroupedRender && isGroupedRequestType(requestType) && selectedGroups.length > 0) {
+      try {
+        setIsLoading(true);
+        const result = await submitBatchCases(revokeConsent);
+
+        if (result.succeeded.length > 0) {
+          queryClient.invalidateQueries({ queryKey: ['caseHistory'] });
+          // P2-SDK-4 of TECH-3712. Thread the full BatchCaseSubmitResult
+          // through to RequestSubmit so the success surface can list every
+          // case_id and render per-card retry buttons for any failures.
+          setBatchResult(result);
+          setIsSubmitted(true);
+          if (result.failed.length === 0) {
+            toast.success(t('requestSubmittedSuccess'));
+          } else {
+            toast.error(t('requestSubmissionFailed'));
+          }
+          if (isPopup) {
+            onCreateRequest?.();
+          }
+        } else {
+          toast.error(t('requestSubmissionFailed'));
+        }
+      } catch (error) {
+        console.error('Error submitting batch request:', error);
+        toast.error(t('submissionFailed'));
+      } finally {
+        setIsLoading(false);
+        if (isPopup) {
+          onClose?.();
+        }
+      }
+      return;
+    }
+
+    // Legacy / non-DSAR path: a single createCaseRequest with org-level
+    // request_details. Untouched by Phase 2 — nomination and grievance are
+    // always org-level, and DSAR falls here only when the backend hasn't
+    // shipped Phase 1 yet (useGroupedRender === false).
     const requestDetails: {
       purposes: UpdatePurpose[];
       correction_data: UpdateCorrectionDataItem[];
@@ -639,29 +961,37 @@ export default function Form({
         authContext,
         consentClient
       );
-      // privacyCenterApiFetch unwraps { code, status, detail } responses and returns just the detail
-      // So response will be { uuid, case_id } if successful (privacy center), or null if error
-      // Case management returns the full CreateCaseResponse with { code, status, detail: { uuid, case_id } }
-      let caseId: string | null = null;
-      if (response) {
-        if ('detail' in response && response.detail) {
-          // Case management: wrapped response
-          caseId =
-            (response.detail as { case_id?: string; uuid?: string }).case_id ||
-            (response.detail as { case_id?: string; uuid?: string }).uuid ||
-            null;
-        } else if ('case_id' in response || 'uuid' in response) {
-          // Privacy center: unwrapped response
-          caseId =
-            (response as { case_id?: string; uuid?: string }).case_id ||
-            (response as { case_id?: string; uuid?: string }).uuid ||
-            null;
-        }
-      }
+      const extracted = extractCaseId(response);
+      const caseId = extracted?.case_id || extracted?.uuid || null;
 
       if (caseId) {
         queryClient.invalidateQueries({ queryKey: ['caseHistory'] });
-        setCaseId(caseId);
+        // P2-SDK-4 of TECH-3712. Wrap the lone response in a synthetic
+        // BatchCaseSubmitResult so RequestSubmit can render this path with
+        // the same UI it uses for the grouped batch path. When the grouped
+        // flow auto-selects a single product card we hydrate the synthetic
+        // entry with that product's identity so the success surface can
+        // render a product label alongside the case ID; otherwise we fall
+        // back to empty strings (legacy nomination/grievance/non-grouped
+        // DSAR have no product context to render).
+        const productInfo =
+          useGroupedRender && selectedGroups.length === 1
+            ? {
+                group_key: productGroupKey(selectedGroups[0]),
+                product_uuid: selectedGroups[0].product_uuid,
+                product_name: selectedGroups[0].product_name,
+              }
+            : { group_key: '', product_uuid: '', product_name: '' };
+        setBatchResult({
+          succeeded: [
+            {
+              ...productInfo,
+              case_id: caseId,
+              uuid: extracted?.uuid ?? caseId,
+            },
+          ],
+          failed: [],
+        });
         setIsSubmitted(true);
         toast.success(t('requestSubmittedSuccess'));
 
@@ -672,8 +1002,17 @@ export default function Form({
         toast.error(t('requestSubmissionFailed'));
       }
     } catch (error) {
+      // `createCaseRequest` returns null on non-auth errors (per its
+      // documented contract) — those land in the `else` branch above
+      // with a generic toast. This catch only fires on unexpected
+      // exceptions further up the legacy code path; surface whatever
+      // message the error carries.
       console.error('Error submitting request:', error);
-      toast.error(t('submissionFailed'));
+      const message =
+        error instanceof Error && error.message
+          ? error.message
+          : t('submissionFailed');
+      toast.error(message);
     } finally {
       setIsLoading(false);
       if (isPopup) {
@@ -682,10 +1021,315 @@ export default function Form({
     }
   };
 
+  /**
+   * Phase 2 of TECH-3712. Single-product POST shared by `submitBatchCases`
+   * and `handleRetry` (P2-SDK-4). Builds the per-group payload (anchors,
+   * purposes, principal) and invokes `createCaseRequest`. The caller is
+   * responsible for catching/aggregating errors — this helper either
+   * resolves with the response or throws.
+   *
+   * Anchors per group:
+   *   - `product_uuid` from the group.
+   *   - `data_principal_uuid` is set ONLY for nominated cards (the
+   *     requestor is acting on someone else's behalf — the nominator's
+   *     ConsentUser uuid). For direct cards we omit the field entirely
+   *     so the backend defaults it from `requestor_uuid` (derived from
+   *     the JWT). `formData.uuid` here is the FormDataOut session uuid,
+   *     NOT the requestor's ConsentUser uuid, and would be rejected by
+   *     the backend's ConsentUser lookup.
+   */
+  const submitSingleProductCase = async (
+    group: FormProductGroup,
+    revokeConsent: boolean,
+  ): Promise<CreateCaseResponse | null> => {
+    const groupKey = productGroupKey(group);
+
+    // ACCESS/ERASURE per-group purposes. Empty for CORRECTION — that path
+    // populates `correction_data` below instead.
+    const groupPurposes = purposesByGroupKey.get(groupKey) ?? [];
+    const purposesPayload: UpdatePurpose[] =
+      requestType === RequestTypeEnum.CORRECTION
+        ? []
+        : groupPurposes
+            .filter(
+              (p) =>
+                p.selected || p.data_elements.some((de) => de.selected),
+            )
+            .map((p) => ({
+              purpose_uuid: p.uuid,
+              data_element_uuids: p.data_elements
+                .filter((de) => de.selected)
+                .map((de) => de.uuid),
+            }));
+
+    // TECH-3712 (correction grouped path). Per-group correction items: map
+    // each selected element name to its {current, updated} pair. Names are
+    // reverse-translated back to English via `getEnglishDataElementName`
+    // so the backend always receives the canonical attribute name even
+    // when the UI is showing a translated label.
+    const groupSelectedNames =
+      requestType === RequestTypeEnum.CORRECTION
+        ? correctionElementsByGroupKey.get(groupKey) ?? []
+        : [];
+    const groupValues =
+      requestType === RequestTypeEnum.CORRECTION
+        ? correctionValuesByGroupKey.get(groupKey) ?? {}
+        : {};
+    const correctionPayload: UpdateCorrectionDataItem[] =
+      requestType === RequestTypeEnum.CORRECTION
+        ? groupSelectedNames.map((name) => ({
+            name: getEnglishDataElementName(name),
+            curr_value: groupValues[name]?.current ?? '',
+            new_value: groupValues[name]?.updated ?? '',
+          }))
+        : [];
+
+    const payload: UserDataRequest = {
+      name: ' ',
+      contact: formData.contact,
+      request_type: requestType?.toLowerCase() as RequestTypeEnum,
+      uuid: formData.uuid,
+      supporting_docs_uuids: [...uploadedDocumentId],
+      request_details: {
+        purposes: purposesPayload,
+        correction_data: correctionPayload,
+        grievance_types: [],
+      },
+      time_period:
+        requestType === RequestTypeEnum.ACCESS
+          ? parseInt(timePeriod || '30', 10)
+          : 0,
+      requestor_note: formData.additionalNote || '',
+      ...(requestType === RequestTypeEnum.ERASURE
+        ? { revoke_consent_on_fulfilment: revokeConsent }
+        : {}),
+      product_uuid: group.product_uuid,
+      // Only set data_principal_uuid for nominee-driven cases. Direct
+      // cards default server-side to the JWT-derived requestor_uuid.
+      ...(group.nominator
+        ? { data_principal_uuid: group.nominator.uuid }
+        : {}),
+    };
+
+    // Use the "unsafe" variant in the batch path so non-auth errors throw
+    // instead of being swallowed to null — `Promise.allSettled` upstream
+    // catches them and surfaces the backend message (e.g. `[400]
+    // invalid_data_principal`) in `failed[].error` for that row.
+    return await createCaseRequestUnsafe(
+      organizationId || '',
+      workspaceId || '',
+      payload,
+      isPopup,
+      isCaseManagementContext,
+      authContext,
+      consentClient,
+    );
+  };
+
+  /**
+   * Phase 2 of TECH-3712. Fan one `createCaseRequestUnsafe` per selected
+   * product group via `Promise.allSettled`, aggregate into
+   * `BatchCaseSubmitResult`.
+   */
+  const submitBatchCases = async (
+    revokeConsent: boolean,
+  ): Promise<BatchCaseSubmitResult> => {
+    const submissions = selectedGroups.map((group) =>
+      submitSingleProductCase(group, revokeConsent).then(
+        (response) => ({ group, response }),
+      ),
+    );
+
+    const results = await Promise.allSettled(submissions);
+    const batchResult: BatchCaseSubmitResult = { succeeded: [], failed: [] };
+
+    results.forEach((result, idx) => {
+      const group = selectedGroups[idx];
+      const groupKey = productGroupKey(group);
+      if (result.status === 'fulfilled') {
+        const extracted = extractCaseId(result.value.response);
+        if (extracted && (extracted.case_id || extracted.uuid)) {
+          batchResult.succeeded.push({
+            group_key: groupKey,
+            product_uuid: group.product_uuid,
+            product_name: group.product_name,
+            case_id: extracted.case_id || extracted.uuid,
+            uuid: extracted.uuid || extracted.case_id,
+          });
+        } else {
+          batchResult.failed.push({
+            group_key: groupKey,
+            product_uuid: group.product_uuid,
+            product_name: group.product_name,
+            error: t('requestSubmissionFailed'),
+          });
+        }
+      } else {
+        const reason = result.reason;
+        const message =
+          reason instanceof Error
+            ? reason.message
+            : typeof reason === 'string'
+              ? reason
+              : t('submissionFailed');
+        batchResult.failed.push({
+          group_key: groupKey,
+          product_uuid: group.product_uuid,
+          product_name: group.product_name,
+          error: message,
+        });
+      }
+    });
+
+    return batchResult;
+  };
+
+  /**
+   * P2-SDK-4 of TECH-3712. Re-issue a single POST for one product-group
+   * that previously failed in the batch. On success, promote the entry
+   * from `batchResult.failed` to `batchResult.succeeded` so the UI can
+   * update in place. On failure, refresh the recorded error message so
+   * the user can try again.
+   *
+   * Keyed by `productGroupKey(group)` — NOT `product_uuid` — so that a
+   * product picked both directly AND via a nominator (two distinct
+   * groups with the same `product_uuid`) retries the right entry. No-op
+   * for the legacy single-case path (which has no group context to
+   * retry against — failures there don't land on this surface; they
+   * short-circuit before `setIsSubmitted`).
+   */
+  const handleRetry = useCallback(
+    async (groupKey: string) => {
+      if (groupKey === '') {
+        return;
+      }
+      const group = selectedGroups.find(
+        (g) => productGroupKey(g) === groupKey,
+      );
+      if (!group) {
+        return;
+      }
+
+      setRetryingGroupKeys((prev) => {
+        const next = new Set(prev);
+        next.add(groupKey);
+        return next;
+      });
+
+      try {
+        const response = await submitSingleProductCase(group, false);
+        const extracted = extractCaseId(response);
+        if (extracted && (extracted.case_id || extracted.uuid)) {
+          queryClient.invalidateQueries({ queryKey: ['caseHistory'] });
+          setBatchResult((prev) => {
+            if (!prev) {
+              return prev;
+            }
+            return {
+              succeeded: [
+                ...prev.succeeded,
+                {
+                  group_key: groupKey,
+                  product_uuid: group.product_uuid,
+                  product_name: group.product_name,
+                  case_id: extracted.case_id || extracted.uuid,
+                  uuid: extracted.uuid || extracted.case_id,
+                },
+              ],
+              failed: prev.failed.filter((f) => f.group_key !== groupKey),
+            };
+          });
+          toast.success(t('requestSubmittedSuccess'));
+        } else {
+          setBatchResult((prev) => {
+            if (!prev) {
+              return prev;
+            }
+            return {
+              succeeded: prev.succeeded,
+              failed: prev.failed.map((f) =>
+                f.group_key === groupKey
+                  ? { ...f, error: t('requestSubmissionFailed') }
+                  : f,
+              ),
+            };
+          });
+        }
+      } catch (error) {
+        const message =
+          error instanceof Error ? error.message : t('submissionFailed');
+        setBatchResult((prev) => {
+          if (!prev) {
+            return prev;
+          }
+          return {
+            succeeded: prev.succeeded,
+            failed: prev.failed.map((f) =>
+              f.group_key === groupKey ? { ...f, error: message } : f,
+            ),
+          };
+        });
+      } finally {
+        setRetryingGroupKeys((prev) => {
+          const next = new Set(prev);
+          next.delete(groupKey);
+          return next;
+        });
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      selectedGroups,
+      queryClient,
+      t,
+      // submitSingleProductCase closes over many form-state values; we
+      // intentionally don't list it to avoid identity churn re-rendering
+      // RequestSubmit while a retry is in flight.
+    ],
+  );
+
   const isRequestDetailsValid = useCallback(() => {
-    if (!requestType){
-       return false
-      };
+    if (!requestType) {
+      return false;
+    }
+
+    // Phase 2 of TECH-3712. Grouped DSAR validity: at least one product
+    // selected, and EVERY selected group has at least one purpose/data
+    // element chosen. The batch path fires one POST per selected group
+    // (Promise.allSettled), so a partially-filled card would either
+    // produce an empty `purposes` / `correction_data` payload that the
+    // backend rejects, or land as a no-op case. Require completeness
+    // across all selected groups before allowing submit.
+    if (useGroupedRender && isGroupedRequestType(requestType)) {
+      if (selectedGroups.length === 0) {
+        return false;
+      }
+      if (requestType === RequestTypeEnum.CORRECTION) {
+        // For CORRECTION every selected group must have at least one
+        // chosen data element AND every chosen element must carry both
+        // current and updated values.
+        return selectedGroups.every((group) => {
+          const key = productGroupKey(group);
+          const selected = correctionElementsByGroupKey.get(key) ?? [];
+          const values = correctionValuesByGroupKey.get(key) ?? {};
+          return (
+            selected.length > 0 &&
+            selected.every(
+              (name) =>
+                values[name]?.current?.trim() &&
+                values[name]?.updated?.trim(),
+            )
+          );
+        });
+      }
+      return selectedGroups.every((group) => {
+        const purposes = purposesByGroupKey.get(productGroupKey(group)) ?? [];
+        return purposes.some(
+          (p) => p.selected || p.data_elements.some((de) => de.selected),
+        );
+      });
+    }
+
     switch (requestType) {
       case RequestTypeEnum.ACCESS:
         return accessPurposes.some(
@@ -718,6 +1362,11 @@ export default function Form({
     }
   }, [
     requestType,
+    useGroupedRender,
+    selectedGroups,
+    purposesByGroupKey,
+    correctionElementsByGroupKey,
+    correctionValuesByGroupKey,
     accessPurposes,
     erasurePurposes,
     selectedGrievances,
@@ -918,13 +1567,13 @@ export default function Form({
 
   return (
     <>
-      {isSubmitted && !isPopup ? (
+      {isSubmitted && batchResult && !isPopup ? (
         <RequestSubmit
-          caseId={caseId || ''}
+          result={batchResult}
           contact={formData?.contact}
           onCreateRequest={onCreateRequest}
-          revokeConsentOnFulfilment={revokeConsentOnFulfilment}
-          revokedPurposeNames={selectedErasurePurposeNames}
+          onRetry={handleRetry}
+          retryingGroupKeys={retryingGroupKeys}
         />
       ) : (
         <div>
@@ -1128,7 +1777,115 @@ export default function Form({
                       <div style={{
                         padding: getVar('--pc-spacing-md'),
                       }}>
-                        {requestType === RequestTypeEnum.ACCESS ||
+                        {useGroupedRender && isGroupedRequestType(requestType) ? (
+                          <div
+                            style={{
+                              ...pcStyles.flex,
+                              ...pcStyles.flexCol,
+                              gap: getVar('--pc-spacing-md'),
+                            }}
+                          >
+                            {!skipProductStep && (
+                              <ProductSelectionSection
+                                directGroups={data?.direct_groups ?? []}
+                                nominatedGroups={data?.nominated_groups ?? []}
+                                selectedProductKey={selectedProductKey}
+                                onSelect={handleProductSelect}
+                                requestTypeLabel={requestTypeLabels[requestType]}
+                                isTranslating={isTranslating}
+                              />
+                            )}
+                            {selectedGroups.length > 0 && (() => {
+                              const group = selectedGroups[0];
+                              const key = productGroupKey(group);
+                              const groupPurposes = purposesByGroupKey.get(key) ?? [];
+                              const isCorrection =
+                                requestType === RequestTypeEnum.CORRECTION;
+                              const groupDataElements = isCorrection
+                                ? buildGroupDataElements(group)
+                                : [];
+                              const groupCorrectionSelected =
+                                correctionElementsByGroupKey.get(key) ?? [];
+                              const groupCorrectionValues =
+                                correctionValuesByGroupKey.get(key) ?? {};
+                              const nominatorLabel = group.nominator
+                                ? group.nominator.name ??
+                                  group.nominator.email ??
+                                  ''
+                                : '';
+
+                              return (
+                                <div
+                                  className="pc-product-purpose-panel"
+                                  data-testid={`per-product-purposes-${key}`}
+                                >
+                                  <div className="pc-product-purpose-panel-header">
+                                    <div className="pc-product-purpose-panel-title-row">
+                                      <PCText
+                                        as="span"
+                                        size="base"
+                                        weight="semibold"
+                                        color="primary"
+                                        className="pc-product-purpose-panel-title"
+                                      >
+                                        {group.product_name}
+                                      </PCText>
+                                      {group.nominator && (
+                                        <PCText
+                                          as="span"
+                                          size="xs"
+                                          weight="medium"
+                                          color="secondary"
+                                          className="pc-product-purpose-panel-nominator"
+                                        >
+                                          {t('actingOnBehalfOfShort', {
+                                            nominator: nominatorLabel,
+                                          })}
+                                        </PCText>
+                                      )}
+                                    </div>
+                                    <PCText
+                                      as="span"
+                                      size="xs"
+                                      color="secondary"
+                                      className="pc-product-purpose-panel-subtitle"
+                                    >
+                                      {t('selectPurposesForThisProduct')}
+                                    </PCText>
+                                  </div>
+                                  <div
+                                    className="pc-product-purpose-panel-body"
+                                    data-testid={`per-product-purposes-body-${key}`}
+                                  >
+                                    {isCorrection ? (
+                                      <CorrectionDataSection
+                                        dataElements={groupDataElements}
+                                        selected={groupCorrectionSelected}
+                                        setSelected={(values) =>
+                                          setCorrectionElementsForGroup(key, values)
+                                        }
+                                        correctionValues={groupCorrectionValues}
+                                        setCorrectionValues={(values) =>
+                                          setCorrectionValuesForGroup(key, values)
+                                        }
+                                        isTranslating={isTranslating}
+                                      />
+                                    ) : (
+                                      <PurposeSelectionSection
+                                        purposes={groupPurposes}
+                                        setPurposes={(updated) =>
+                                          setPurposesForGroup(key, updated)
+                                        }
+                                        requestType={requestType}
+                                        isTranslating={isTranslating}
+                                      />
+                                    )}
+                                  </div>
+                                </div>
+                              );
+                            })()}
+                          </div>
+                        ) : requestType === RequestTypeEnum.ACCESS ||
                           requestType === RequestTypeEnum.ERASURE ? (
                           <PurposeSelectionSection
                             purposes={
@@ -1511,82 +2268,6 @@ export default function Form({
           </div>
         </div>
       )}
-      <PCModal
-        isOpen={isErasureConsentModalOpen}
-        onClose={handleErasureModalClose}
-        size="md"
-        showCloseButton={false}
-        footer={
-          <div className="pc-erasure-modal-footer">
-            <PCButton
-              variant="secondary"
-              onClick={() => handleErasureModalChoice(false)}
-              disabled={isLoading}
-            >
-              {t('revokeConsentNo')}
-            </PCButton>
-            <PCButton
-              variant="primary"
-              onClick={() => handleErasureModalChoice(true)}
-              disabled={isLoading}
-              isLoading={isLoading}
-            >
-              {t('revokeConsentYes')}
-            </PCButton>
-          </div>
-        }
-      >
-        <div className="pc-erasure-modal-content">
-          <div className="pc-erasure-modal-header">
-            <div className="pc-erasure-modal-icon">
-              <FiAlertCircle size={24} />
-            </div>
-            <p className="pc-erasure-modal-title">
-              {t('revokeConsentModalTitle')}
-            </p>
-            <p className="pc-erasure-modal-question">
-              {t('revokeConsentModalQuestion')}
-            </p>
-          </div>
-
-          <div className="pc-erasure-modal-purposes">
-            <p className="pc-erasure-modal-purposes-label">
-              {t('revokeConsentModalPurposesLabel')}
-            </p>
-            {selectedErasurePurposeList.length > 0 ? (
-              <>
-                {selectedErasurePurposeList
-                  .slice(0, MAX_DISPLAYED_PURPOSE_NAMES_IN_ERASURE_MODAL)
-                  .map((name) => (
-                    <div key={name} className="pc-erasure-modal-purpose-item">
-                      {name}
-                    </div>
-                  ))}
-                {selectedErasurePurposeList.length > MAX_DISPLAYED_PURPOSE_NAMES_IN_ERASURE_MODAL && (
-                  <span className="pc-erasure-modal-purposes-placeholder">
-                    {t('revokeConsentModalAndMore', {
-                      count: selectedErasurePurposeList.length - MAX_DISPLAYED_PURPOSE_NAMES_IN_ERASURE_MODAL,
-                    })}
-                  </span>
-                )}
-              </>
-            ) : (
-              <span className="pc-erasure-modal-purposes-placeholder">
-                {t('revokeConsentModalYourPurposes')}
-              </span>
-            )}
-          </div>
-
-          <div className="pc-erasure-modal-warning">
-            <p className="pc-erasure-modal-warning-text">
-              <span className="pc-erasure-modal-warning-label">
-                {t('revokeConsentModalIfYesLabel')}
-              </span>{' '}
-              {t('revokeConsentModalIfYesBody')}
-            </p>
-          </div>
-        </div>
-      </PCModal>
     </>
   );
 }