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

package/src/RedactoPrivacyCenter/components/Form.tsx

@@ -8,7 +8,8 @@ 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 { 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 { ensureValidToken } from '../lib/utils';
@@ -22,8 +23,9 @@ import { useOrganization } from '../context/OrganizationContext';
 import i18n from '../lib/i18n';
 import { getLangParam } from '../lib/useCurrentLanguage';
 import type {
-  DataElement,
+  CreateCaseResponse,
   FormData,
+  FormProductGroup,
   GrievanceOptions,
   GrievanceTypeElement,
   GrievanceValue,
@@ -37,6 +39,10 @@ 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';
@@ -44,6 +50,74 @@ 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 per-product picker and require a
+ * product anchor (`product_uuid`) on the submitted case. Nomination
+ * and grievance are org-level and skip the product step entirely.
+ */
+const PRODUCT_SCOPED_REQUEST_TYPES: ReadonlySet<RequestTypeEnum> = new Set([
+  RequestTypeEnum.ACCESS,
+  RequestTypeEnum.ERASURE,
+  RequestTypeEnum.CORRECTION,
+]);
+
+const isProductScopedRequestType = (
+  rt: RequestTypeEnum | null,
+): rt is RequestTypeEnum =>
+  rt !== null && PRODUCT_SCOPED_REQUEST_TYPES.has(rt);
+
+/**
+ * Result shape rendered by RequestSubmit after a successful submission.
+ * Product fields are populated only for product-scoped request types
+ * (ACCESS / ERASURE / CORRECTION); nomination and grievance leave them
+ * as empty strings so the success card omits the product label.
+ */
+type SubmittedCase = {
+  case_id: string;
+  uuid: string;
+  product_name: string;
+  product_uuid: string;
+};
+
+/**
+ * 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,
@@ -89,26 +163,39 @@ export default function Form({
     additionalNote: '',
     confirmCheckBox: false,
   });
-  const [erasurePurposes, setErasurePurposes] = useState<Purpose[]>([]);
-  const [accessPurposes, setAccessPurposes] = useState<Purpose[]>([]);
+  // Selected product-group key on the product-cards step. Keyed by
+  // `productGroupKey(group)` so the same product reached both directly
+  // AND via a nominator stays addressable as two distinct selections.
+  // null when no product is selected (or for org-level request types).
+  const [selectedProductKey, setSelectedProductKey] = useState<string | null>(
+    null,
+  );
+  // Purpose state for the currently-selected product group. Seeded from
+  // `buildGroupPurposes(group)` whenever `selectedProductKey` changes, then
+  // mutated in place by `PurposeSelectionSection` as the user picks
+  // purposes / data elements. Single-select means we never need a Map.
+  const [selectedPurposes, setSelectedPurposes] = useState<Purpose[]>([]);
+  // CORRECTION selections for the currently-selected product group. These
+  // are flat (not keyed by product) because the picker is single-select —
+  // switching products re-seeds them via the same effect that re-seeds
+  // `selectedPurposes`. Names are the data-element names visible in the
+  // UI; they're reverse-translated to English at submit time.
   const [selectedCorrectionElements, setSelectedCorrectionElements] = useState<
     string[]
   >([]);
-  const [uniqueDataElements, setUniqueDataElements] = useState<DataElement[]>(
-    []
-  );
   const [correctionValues, setCorrectionValues] = useState<
     Record<string, { current: string; updated: string }>
   >({});
-  const [caseId, setCaseId] = useState<string | null>(null);
+  // Result rendered by `RequestSubmit` after a successful submission.
+  // Replaces the prior batch-shape now that submit is 1-form / 1-case.
+  // Product fields are empty strings for nomination / grievance (no
+  // product anchor) so the success card omits the product label.
+  const [submittedCase, setSubmittedCase] = useState<SubmittedCase | null>(
+    null,
+  );
   const fileInputRef = useRef<HTMLInputElement>(null);
   // Store the original English form data for submission — translations are display-only
   const englishDataRef = useRef<FormData | null>(null);
-  // Store selections to restore after translation
-  const selectionsToRestoreRef = useRef<{
-    access: Map<string, { purposeSelected: boolean; dataElementSelections: Map<string, boolean> }>;
-    erasure: Map<string, { purposeSelected: boolean; dataElementSelections: Map<string, boolean> }>;
-  } | null>(null);
   const [uploadedDocumentId, setUploadedDocumentId] = useState<string[]>([]);
   const [uploadedDocuments, setUploadedDocuments] = useState<
     { uuid: string; name: string }[]
@@ -139,77 +226,47 @@ export default function Form({
     }
   };
 
-  useEffect(() => {
-    if (data?.purposes) {
-      // Validate purposes array structure
-      if (!Array.isArray(data.purposes)) {
-        console.warn('Form data purposes is not an array:', data.purposes);
-        return;
-      }
-
-      const extractedPurposes = data.purposes
-        .map((p) => p?.purpose)
-        .filter((p) => p !== null && p !== undefined);
-
-      if (extractedPurposes.length === 0) {
-        console.warn('No valid purposes found in form data');
-        return;
-      }
-
-      const uniqueElements = new Map();
-      extractedPurposes.forEach((purpose) => {
-        // 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
-          )
-          : [];
-
-        // Data elements are validated and processed
-
-        validDataElements.forEach((element) => {
-          if (element.uuid && !uniqueElements.has(element.uuid)) {
-            uniqueElements.set(element.uuid, {
-              ...element,
-              purposeName: purpose.name,
-            });
-          }
-        });
-      });
+  // Union of direct + nominated product groups exposed by the backend.
+  // Drives both the product-cards step and the per-product picker beneath.
+  const allGroups = useMemo<FormProductGroup[]>(() => {
+    if (!data) {
+      return [];
+    }
+    return [...(data.direct_groups ?? []), ...(data.nominated_groups ?? [])];
+  }, [data]);
 
-      setUniqueDataElements(
-        Array.from(uniqueElements.values()) as DataElement[]
+  // 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 the per-product
+  // picker renders without an intermediate card. With zero groups we
+  // still render the section so the empty-state message is visible.
+  const skipProductStep = allGroups.length === 1;
+
+  // The single product-group the user is currently working with. Null
+  // when no product is selected (the picker is shown empty / unselected)
+  // or when the request type is org-level (nomination / grievance).
+  const selectedGroup = useMemo<FormProductGroup | null>(() => {
+    if (selectedProductKey) {
+      return (
+        allGroups.find((g) => productGroupKey(g) === selectedProductKey) ??
+        null
       );
-
-      // 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.uuid)
-              .map((de) => ({
-                ...de,
-                selected: false,
-              }))
-            : [];
-
-          return {
-            ...p,
-            selected: false,
-            data_elements: validDataElements,
-          };
-        })
-        .filter((p) => p.data_elements.length > 0);
-
-      setAccessPurposes(processedPurposes);
-      setErasurePurposes(processedPurposes);
     }
-  }, [data]);
+    if (skipProductStep) {
+      return allGroups[0] ?? null;
+    }
+    return null;
+  }, [allGroups, selectedProductKey, skipProductStep]);
+
+  // 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);
+    },
+    [],
+  );
 
   const fetchAndApplyTranslations = useCallback(async (langValue: string) => {
     if (!organizationId || !workspaceId || !data) {
@@ -243,37 +300,6 @@ export default function Form({
         return;
       }
 
-      const currentAccessSelections = new Map<string, {
-        purposeSelected: boolean;
-        dataElementSelections: Map<string, boolean>;
-      }>();
-      const currentErasureSelections = new Map<string, {
-        purposeSelected: boolean;
-        dataElementSelections: Map<string, boolean>;
-      }>();
-
-      accessPurposes.forEach((purpose) => {
-        const dataElementSelections = new Map<string, boolean>();
-        purpose.data_elements.forEach((de) => {
-          dataElementSelections.set(de.uuid, de.selected);
-        });
-        currentAccessSelections.set(purpose.uuid, {
-          purposeSelected: purpose.selected,
-          dataElementSelections,
-        });
-      });
-
-      erasurePurposes.forEach((purpose) => {
-        const dataElementSelections = new Map<string, boolean>();
-        purpose.data_elements.forEach((de) => {
-          dataElementSelections.set(de.uuid, de.selected);
-        });
-        currentErasureSelections.set(purpose.uuid, {
-          purposeSelected: purpose.selected,
-          dataElementSelections,
-        });
-      });
-
       if (!translatedFormData.purposes ||
         !Array.isArray(translatedFormData.purposes) ||
         translatedFormData.purposes.length === 0) {
@@ -294,11 +320,6 @@ export default function Form({
         });
         setSelectedGrievances(updatedGrievanceSelections);
       }
-
-      selectionsToRestoreRef.current = {
-        access: currentAccessSelections,
-        erasure: currentErasureSelections,
-      };
     } catch (error) {
       console.error('Error fetching translation:', error);
       // Fallback to English when translation API fails
@@ -306,58 +327,71 @@ export default function Form({
     } finally {
       setIsTranslating(false);
     }
-  }, [organizationId, workspaceId, data, formData.contact, isPopup, isCaseManagementContext, authContext, consentClient, accessPurposes, erasurePurposes, selectedGrievances, t]);
+  }, [organizationId, workspaceId, data, formData.contact, isPopup, isCaseManagementContext, authContext, consentClient, selectedGrievances, t]);
+
+  // Clear product / org-level selections when request type changes.
+  // Per-product state (selectedPurposes, selectedCorrectionElements,
+  // correctionValues) is owned by the seed effect below — clearing it
+  // here too would race with that effect's re-seed when skipProductStep
+  // is true (the sole group stays selected across request-type changes
+  // because the auto-select effect refires on requestType).
+  useEffect(() => {
+    if (!skipProductStep) {
+      setSelectedProductKey(null);
+    }
+    setNominationData({ nominee_email: '', nominee_mobile: '' });
 
-  // Clear previous selections when request type changes
+    if (
+      requestType === RequestTypeEnum.GRIEVANCE &&
+      grievanceOptions.length > 0
+    ) {
+      const resetGrievances = grievanceOptions.reduce(
+        (acc, option) => {
+          acc[option.value] = false;
+          return acc;
+        },
+        {} as Record<string, boolean>,
+      );
+      setSelectedGrievances(resetGrievances);
+    }
+  }, [requestType, grievanceOptions, skipProductStep]);
+
+  // TECH-3712 UX: when `skipProductStep` is true (DP has exactly one
+  // consent group total), auto-select that group so the per-product
+  // 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. The child
+  // ProductSelectionSection has an equivalent mount-time effect, but
+  // that effect never fires here because the child is not rendered.
+  useEffect(() => {
+    if (!skipProductStep) {
+      return;
+    }
+    const onlyGroup = allGroups[0];
+    if (!onlyGroup) {
+      return;
+    }
+    const key = productGroupKey(onlyGroup);
+    setSelectedProductKey((prev) => (prev === key ? prev : key));
+  }, [skipProductStep, allGroups, requestType]);
+
+  // Seed (and re-seed on product switch or request-type switch) the
+  // purpose / correction state from the currently-selected group.
+  // Single-select means one re-seed per product change — no Map
+  // reconciliation needed. Clears selections entirely when the user
+  // de-selects the chip (selectedGroup -> null) or when the request
+  // type switches into NOMINATION / GRIEVANCE.
   useEffect(() => {
+    if (!selectedGroup || !isProductScopedRequestType(requestType)) {
+      setSelectedPurposes([]);
+      setSelectedCorrectionElements([]);
+      setCorrectionValues({});
+      return;
+    }
+    setSelectedPurposes(buildGroupPurposes(selectedGroup));
     setSelectedCorrectionElements([]);
     setCorrectionValues({});
-    setNominationData({ nominee_email: '', nominee_mobile: '' });
-    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.
-      // 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.uuid)
-              .map((de) => ({
-                ...de,
-                selected: false,
-              }))
-            : [];
-
-          return {
-            ...p,
-            selected: false,
-            data_elements: validDataElements,
-          };
-        })
-        .filter((p) => p.data_elements.length > 0);
-
-      setAccessPurposes(processedPurposes);
-      setErasurePurposes(processedPurposes);
-
-      if (
-        requestType === RequestTypeEnum.GRIEVANCE &&
-        grievanceOptions.length > 0
-      ) {
-        const resetGrievances = grievanceOptions.reduce(
-          (acc, option) => {
-            acc[option.value] = false;
-            return acc;
-          },
-          {} as Record<string, boolean>
-        );
-        setSelectedGrievances(resetGrievances);
-      }
-    }
-  }, [requestType, data, grievanceOptions]);
+  }, [selectedGroup, requestType]);
 
 
   // Fetch API translations when language changes (purposes, data elements, grievance options)
@@ -507,13 +541,40 @@ export default function Form({
     if (!isFormValid) {
       return;
     }
-    void handleSubmit(false);
+    // For ERASURE, set revoke_consent_on_fulfilment=true so the
+    // backend's auto-revoke task fires when the case is fulfilled.
+    // Erasing data without revoking the consent that authorized its
+    // processing is incoherent per DPDPA Sec 12. Other request types
+    // (ACCESS / CORRECTION / NOMINATION / GRIEVANCE) do not engage
+    // the auto-revoke path on the backend and pass false here.
+    void handleSubmit(requestType === RequestTypeEnum.ERASURE);
   };
 
+  /**
+   * Submit the form as a single case. Builds the payload from the
+   * currently-selected product group (for ACCESS/ERASURE/CORRECTION) or
+   * from the org-level state (for NOMINATION/GRIEVANCE), then POSTs once
+   * via `createCaseRequest`. The 1-form -> 1-case rule means no
+   * fan-out and no partial-failure UI to maintain.
+   *
+   * Anchors:
+   *   - `product_uuid` is set ONLY for product-scoped request types and
+   *     ONLY from `selectedGroup.product_uuid`. NOMINATION/GRIEVANCE
+   *     never carry a product anchor.
+   *   - `data_principal_uuid` is set ONLY for nominated cards (acting
+   *     on someone else's behalf — the nominator's ConsentUser uuid).
+   *     Direct cards omit the field so the backend defaults it from
+   *     the JWT-derived requestor_uuid. `formData.uuid` is the
+   *     FormDataOut session uuid, NOT the requestor's ConsentUser uuid,
+   *     and would be rejected by the backend's ConsentUser lookup.
+   */
   const handleSubmit = async (revokeConsent: boolean = false) => {
-    if (!isFormValid){
-       return
-      };
+    if (!isFormValid) {
+      return;
+    }
+
+    const isProductScoped = isProductScopedRequestType(requestType);
+    const anchorGroup = isProductScoped ? selectedGroup : null;
 
     const requestDetails: {
       purposes: UpdatePurpose[];
@@ -526,19 +587,11 @@ export default function Form({
       grievance_types: [],
     };
 
-    if (requestType === RequestTypeEnum.ACCESS) {
-      requestDetails.purposes = accessPurposes
-        .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),
-        }));
-    }
-
-    if (requestType === RequestTypeEnum.ERASURE) {
-      requestDetails.purposes = erasurePurposes
+    if (
+      requestType === RequestTypeEnum.ACCESS ||
+      requestType === RequestTypeEnum.ERASURE
+    ) {
+      requestDetails.purposes = selectedPurposes
         .filter((p) => p.selected || p.data_elements.some((de) => de.selected))
         .map((p) => ({
           purpose_uuid: p.uuid,
@@ -552,9 +605,9 @@ export default function Form({
       requestDetails.correction_data = selectedCorrectionElements.map(
         (name) => ({
           name: getEnglishDataElementName(name),
-          curr_value: correctionValues[name]?.current || '',
-          new_value: correctionValues[name]?.updated || '',
-        })
+          curr_value: correctionValues[name]?.current ?? '',
+          new_value: correctionValues[name]?.updated ?? '',
+        }),
       );
     }
 
@@ -590,6 +643,10 @@ export default function Form({
       ...(requestType === RequestTypeEnum.ERASURE
         ? { revoke_consent_on_fulfilment: revokeConsent }
         : {}),
+      ...(anchorGroup ? { product_uuid: anchorGroup.product_uuid } : {}),
+      ...(anchorGroup?.nominator
+        ? { data_principal_uuid: anchorGroup.nominator.uuid }
+        : {}),
     };
 
     try {
@@ -601,92 +658,107 @@ export default function Form({
         isPopup,
         isCaseManagementContext, // Use session auth if in case management context
         authContext,
-        consentClient
+        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);
+        setSubmittedCase({
+          case_id: caseId,
+          uuid: extracted?.uuid ?? caseId,
+          product_name: anchorGroup?.product_name ?? '',
+          product_uuid: anchorGroup?.product_uuid ?? '',
+        });
         setIsSubmitted(true);
         toast.success(t('requestSubmittedSuccess'));
 
         if (isPopup) {
           onCreateRequest?.();
+          // Only dismiss the popup on success. Closing in `finally`
+          // would discard the operator's filled form on a transient
+          // failure with no way to retry.
+          onClose?.();
         }
       } else {
         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; 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) {
-        onClose?.();
-      }
     }
   };
 
   const isRequestDetailsValid = useCallback(() => {
-    if (!requestType){
-       return false
-      };
-    switch (requestType) {
-      case RequestTypeEnum.ACCESS:
-        return accessPurposes.some(
-          (p) => p.selected || p.data_elements.some((de) => de.selected)
-        );
-
-      case RequestTypeEnum.ERASURE:
-        return erasurePurposes.some(
-          (p) => p.selected || p.data_elements.some((de) => de.selected)
-        );
-
-      case RequestTypeEnum.GRIEVANCE:
-        return Object.values(selectedGrievances).some(Boolean);
+    if (!requestType) {
+      return false;
+    }
 
-      case RequestTypeEnum.CORRECTION:
+    // Product-anchor validity gate: ACCESS/ERASURE/CORRECTION require a
+    // selected product before submit is allowed. The backend leaves
+    // `product_uuid` Optional for back-compat, so we enforce the anchor
+    // on the client — a product-scoped case without an anchor would
+    // land as an org-level case with no scoping, which violates the
+    // 1-form -> 1-case -> 1-product contract.
+    if (isProductScopedRequestType(requestType)) {
+      if (allGroups.length === 0) {
+        // No consent groups for this DP at all — the picker shows its
+        // empty state and we block submit. The DP has nothing they can
+        // raise a product-scoped case against.
+        return false;
+      }
+      if (!selectedGroup) {
+        // Groups exist but the user hasn't picked one. With the
+        // single-group auto-select effect this should be rare in
+        // practice, but the gate must still reject.
+        return false;
+      }
+      if (requestType === RequestTypeEnum.CORRECTION) {
         return (
           selectedCorrectionElements.length > 0 &&
           selectedCorrectionElements.every(
             (name) =>
               correctionValues[name]?.current?.trim() &&
-              correctionValues[name]?.updated?.trim()
+              correctionValues[name]?.updated?.trim(),
           )
         );
+      }
+      return selectedPurposes.some(
+        (p) => p.selected || p.data_elements.some((de) => de.selected),
+      );
+    }
+
+    switch (requestType) {
+      case RequestTypeEnum.GRIEVANCE:
+        return Object.values(selectedGrievances).some(Boolean);
 
       case RequestTypeEnum.NOMINATION:
-        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(nominationData.nominee_email.trim());
+        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(
+          nominationData.nominee_email.trim(),
+        );
 
       default:
         return false;
     }
   }, [
     requestType,
-    accessPurposes,
-    erasurePurposes,
-    selectedGrievances,
+    allGroups,
+    selectedGroup,
+    selectedPurposes,
     selectedCorrectionElements,
     correctionValues,
+    selectedGrievances,
     nominationData,
   ]);
 
@@ -882,9 +954,9 @@ export default function Form({
 
   return (
     <>
-      {isSubmitted && !isPopup ? (
+      {isSubmitted && submittedCase && !isPopup ? (
         <RequestSubmit
-          caseId={caseId || ''}
+          result={submittedCase}
           contact={formData?.contact}
           onCreateRequest={onCreateRequest}
         />
@@ -1090,31 +1162,102 @@ export default function Form({
                       <div style={{
                         padding: getVar('--pc-spacing-md'),
                       }}>
-                        {requestType === RequestTypeEnum.ACCESS ||
-                          requestType === RequestTypeEnum.ERASURE ? (
-                          <PurposeSelectionSection
-                            purposes={
-                              requestType === RequestTypeEnum.ACCESS
-                                ? accessPurposes
-                                : erasurePurposes
-                            }
-                            setPurposes={
-                              requestType === RequestTypeEnum.ACCESS
-                                ? setAccessPurposes
-                                : setErasurePurposes
-                            }
-                            requestType={requestType}
-                            isTranslating={isTranslating}
-                          />
-                        ) : requestType === RequestTypeEnum.CORRECTION ? (
-                          <CorrectionDataSection
-                            dataElements={uniqueDataElements}
-                            selected={selectedCorrectionElements}
-                            setSelected={setSelectedCorrectionElements}
-                            correctionValues={correctionValues}
-                            setCorrectionValues={setCorrectionValues}
-                            isTranslating={isTranslating}
-                          />
+                        {isProductScopedRequestType(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}
+                              />
+                            )}
+                            {selectedGroup && (() => {
+                              const key = productGroupKey(selectedGroup);
+                              const isCorrection =
+                                requestType === RequestTypeEnum.CORRECTION;
+                              const groupDataElements = isCorrection
+                                ? buildGroupDataElements(selectedGroup)
+                                : [];
+                              const nominatorLabel = selectedGroup.nominator
+                                ? selectedGroup.nominator.name ??
+                                  selectedGroup.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"
+                                      >
+                                        {selectedGroup.product_name}
+                                      </PCText>
+                                      {selectedGroup.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={selectedCorrectionElements}
+                                        setSelected={setSelectedCorrectionElements}
+                                        correctionValues={correctionValues}
+                                        setCorrectionValues={setCorrectionValues}
+                                        isTranslating={isTranslating}
+                                      />
+                                    ) : (
+                                      <PurposeSelectionSection
+                                        purposes={selectedPurposes}
+                                        setPurposes={setSelectedPurposes}
+                                        requestType={requestType}
+                                        isTranslating={isTranslating}
+                                      />
+                                    )}
+                                  </div>
+                                </div>
+                              );
+                            })()}
+                          </div>
                         ) : requestType === RequestTypeEnum.GRIEVANCE ? (
                           <GrievanceDataSection
                             grievanceOptions={grievanceOptions}