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

package/src/RedactoPrivacyCenter/components/Form.tsx

@@ -1,1796 +0,0 @@
-import fileAttachIcon from '../assets/fileAttach.svg';
-import uploadFileIcon from '../assets/uploadFileIcon.svg';
-import { uploadFileWithS2S } from '../api/upload';
-import { FormBlockWrapper } from '../ui/FormBlockWrapper';
-import { useQueryClient } from '@tanstack/react-query';
-import { useEffect, useRef, useState, useMemo, useCallback } from 'react';
-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, PCText, PCTextarea } from '../ui';
-import { PCModal } from '../ui/PCModal';
-import { buildGroupDataElements, buildGroupPurposes, consentGroupToFormProductGroup } from './groupHelpers';
-import { pcStyles } from '../styles/pcStyles';
-import { createCaseRequest, fetchUserConsents, getFormData } from '../lib/api';
-import { FORM_PICKER_GROUP_LIMIT } from '../lib/constants';
-import { ensureValidToken } from '../lib/utils';
-import { useAuth } from '../context/AuthContext';
-import { useBaseUrl } from '../context/BaseUrlContext';
-import {
-  useRequestTypeLabels,
-  useTimePeriodOptions,
-} from '../lib/constants';
-import { useOrganization } from '../context/OrganizationContext';
-import i18n from '../lib/i18n';
-import { getLangParam } from '../lib/useCurrentLanguage';
-import type {
-  CreateCaseResponse,
-  FormData,
-  FormProductGroup,
-  GrievanceOptions,
-  GrievanceTypeElement,
-  GrievanceValue,
-  NominationData,
-  Purpose,
-  UpdateCorrectionDataItem,
-  UpdatePurpose,
-  UserDataRequest,
-} from '../lib/types';
-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';
-
-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,
-  onClose,
-}: CaseHistoryProps) {
-  const queryClient = useQueryClient();
-  const timePeriodOptions = useTimePeriodOptions();
-  const { organization } = useOrganization();
-  const orgSlug = organization?.slug || organization?.name || '';
-
-  // Detect if we're in case management context (admin side)
-  // Case management uses session auth, not JWT Bearer
-  // We rely on an explicit pathname check rather than absence of access_token
-  // to avoid incorrectly flagging unauthenticated privacy-center users as case-management
-  const isCaseManagementContext =
-    typeof window !== 'undefined' &&
-    window.location.pathname.includes('/case-management');
-  const [requestType, setRequestType] = useState<RequestTypeEnum | null>(null);
-  const [timePeriod, setTimePeriod] = useState('');
-  const [isSubmitted, setIsSubmitted] = useState(false);
-  const { t } = useTranslation();
-  const { accessToken, refreshToken, onError, updateTokens } = useAuth();
-  const { consentClient, baseUrl, ledgerBaseUrl } = useBaseUrl();
-  const organizationId = organization?.uuid;
-  const workspaceId = organization?.workspaces[0]?.uuid;
-
-  // Create auth context object for API calls - memoized to prevent infinite loops
-  const authContext = useMemo(() => ({
-    accessToken,
-    refreshToken,
-    onError,
-    updateTokens,
-  }), [accessToken, refreshToken, onError, updateTokens]);
-  const [data, setData] = useState<FormData | null>(null);
-  const [formData, setFormData] = useState({
-    uuid: '',
-    case_id: '',
-    name: '',
-    contact: '',
-    requestType: '',
-    requestDetails: '',
-    supportingDocumentation: '',
-    additionalNote: '',
-    confirmCheckBox: false,
-  });
-  // 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 [correctionValues, setCorrectionValues] = useState<
-    Record<string, { current: string; updated: string }>
-  >({});
-  // 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);
-  const [uploadedDocumentId, setUploadedDocumentId] = useState<string[]>([]);
-  const [uploadedDocuments, setUploadedDocuments] = useState<
-    { uuid: string; name: string }[]
-  >([]);
-  const [isDocumentUploading, setIsDocumentUploading] = useState(false);
-  const [isDocument, setIsDocument] = useState(false);
-  const [isPopupFormEnabled, setIsPopupFormEnabled] = useState(!isPopup);
-  const [isVerifyingContact, setIsVerifyingContact] = useState(false);
-  const requestTypeLabels = useRequestTypeLabels();
-  const [grievanceOptions, setGrievanceOptions] = useState<GrievanceOptions[]>(
-    []
-  );
-  const [selectedGrievances, setSelectedGrievances] = useState<
-    Record<string, boolean>
-  >({});
-  const [nominationData, setNominationData] = useState<NominationData>({
-    nominee_email: '',
-    nominee_mobile: '',
-  });
-  const [isLoading, setIsLoading] = useState(false);
-  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) {
-      fileInputRef.current.value = '';
-    }
-  };
-
-  // 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]);
-
-  // 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
-      );
-    }
-    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);
-    },
-    [],
-  );
-
-  // Approach A: source the DSAR request-form product picker from the Go
-  // ledger's user-consents. After the consent cutover, consents live in the
-  // ledger, so Python's form/data returns no product groups; we overlay the
-  // ledger's product-grouped consents onto the form data instead. Only the
-  // end-user privacy-center path is eligible — popup / case-management resolve
-  // an arbitrary contact, which the JWT-scoped ledger endpoint cannot serve,
-  // so those keep the Python form/data groups. Returns the form data unchanged
-  // when ineligible or when the ledger read fails (graceful fallback to
-  // whatever groups form/data supplied). Without a configured ledgerBaseUrl,
-  // consents still live in Python and form/data groups are authoritative, so
-  // the overlay must not run (fetchUserConsents would return the legacy Python
-  // shape, which consentGroupToFormProductGroup does not map).
-  const withLedgerPickerGroups = useCallback(
-    async (form: FormData, language?: string): Promise<FormData> => {
-      if (!ledgerBaseUrl || isPopup || isCaseManagementContext || !organizationId || !workspaceId) {
-        return form;
-      }
-      const consents = await fetchUserConsents({
-        organizationId,
-        workspaceId,
-        authContext,
-        consentClient,
-        // No status filter: include every status (active / expired / withdrawn
-        // / declined), matching Python form/data, so a DSAR can target products
-        // the user no longer actively consents to.
-        limit: FORM_PICKER_GROUP_LIMIT,
-        nominatedLimit: FORM_PICKER_GROUP_LIMIT,
-        language,
-      });
-      if (!consents) {
-        return form;
-      }
-      return {
-        ...form,
-        direct_groups: (consents.direct ?? []).map(consentGroupToFormProductGroup),
-        nominated_groups: (consents.nominated ?? []).map(
-          consentGroupToFormProductGroup,
-        ),
-      };
-    },
-    [
-      ledgerBaseUrl,
-      isPopup,
-      isCaseManagementContext,
-      organizationId,
-      workspaceId,
-      authContext,
-      consentClient,
-    ],
-  );
-
-  const fetchAndApplyTranslations = useCallback(async (langValue: string) => {
-    if (!organizationId || !workspaceId || !data) {
-      return;
-    }
-
-    const contact = formData.contact ||
-      (typeof window !== 'undefined' ? sessionStorage.getItem('email') || '' : '');
-
-    if (!contact) {
-      return;
-    }
-
-    setIsTranslating(true);
-
-    try {
-      const translatedFormData = await getFormData(
-        organizationId,
-        workspaceId,
-        contact,
-        isPopup,
-        isCaseManagementContext,
-        authContext,
-        consentClient,
-        langValue
-      );
-
-      if (!translatedFormData) {
-        // Fallback to English when translation API unavailable
-        toast.info(t('translationNotAvailable'));
-        return;
-      }
-
-      if (!translatedFormData.purposes ||
-        !Array.isArray(translatedFormData.purposes) ||
-        translatedFormData.purposes.length === 0) {
-        // Fallback to English when no translations for this language
-        toast.info(t('translationNotAvailable'));
-        return;
-      }
-
-      setData(await withLedgerPickerGroups(translatedFormData, langValue));
-
-      if (translatedFormData.grievance_options) {
-        const currentGrievanceSelections = { ...selectedGrievances };
-        setGrievanceOptions(translatedFormData.grievance_options);
-        const updatedGrievanceSelections: Record<string, boolean> = {};
-        translatedFormData.grievance_options.forEach((option) => {
-          updatedGrievanceSelections[option.value] =
-            currentGrievanceSelections[option.value] || false;
-        });
-        setSelectedGrievances(updatedGrievanceSelections);
-      }
-    } catch (error) {
-      console.error('Error fetching translation:', error);
-      // Fallback to English when translation API fails
-      toast.info(t('translationNotAvailable'));
-    } finally {
-      setIsTranslating(false);
-    }
-  }, [organizationId, workspaceId, data, formData.contact, isPopup, isCaseManagementContext, authContext, consentClient, selectedGrievances, t, withLedgerPickerGroups]);
-
-  // 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: '' });
-
-    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({});
-  }, [selectedGroup, requestType]);
-
-
-  // Fetch API translations when language changes (purposes, data elements, grievance options)
-  useEffect(() => {
-    const handleLanguageChanged = () => {
-      const lang = i18n.language;
-      if (organizationId && workspaceId && data) {
-        const contact = formData.contact ||
-          (typeof window !== 'undefined' ? sessionStorage.getItem('email') || '' : '');
-        if (contact) {
-          fetchAndApplyTranslations(lang);
-        }
-      }
-    };
-
-    i18n.on('languageChanged', handleLanguageChanged);
-
-    return () => {
-      i18n.off('languageChanged', handleLanguageChanged);
-    };
-  }, [organizationId, workspaceId, data, formData.contact, fetchAndApplyTranslations]);
-
-  useEffect(() => {
-    const initializePrivacyCenterForm = async () => {
-      if (isPopup) {
-        return;
-      }
-
-      if (!organizationId || !workspaceId) {
-        onError?.(new Error('Organization or workspace not found'));
-        return;
-      }
-
-      const storedContact =
-        typeof window !== 'undefined'
-          ? sessionStorage.getItem('email') || ''
-          : '';
-
-      if (!storedContact) {
-        onError?.(new Error('Contact email not found'));
-        return;
-      }
-
-      try {
-        // Always fetch English data first and store for submission
-        const englishData = await getFormData(
-          organizationId,
-          workspaceId,
-          storedContact,
-          isPopup,
-          isCaseManagementContext,
-          authContext,
-          consentClient
-        );
-
-        if (!englishData) {
-          toast.error(t('failedToFetchFormData'));
-          onError?.(new Error('Failed to fetch form data'));
-          return;
-        }
-
-        englishDataRef.current = englishData;
-
-        // If current language is non-English, fetch translated data for display
-        const langParam = getLangParam(i18n.language);
-        const displayData = langParam
-          ? (await getFormData(
-            organizationId,
-            workspaceId,
-            storedContact,
-            isPopup,
-            isCaseManagementContext,
-            authContext,
-            consentClient,
-            langParam
-          )) || englishData
-          : englishData;
-
-        if (displayData.purposes && Array.isArray(displayData.purposes)) {
-          const purposesWithDataElements = displayData.purposes.filter(
-            (p) => p.purpose?.data_elements && p.purpose.data_elements.length > 0
-          );
-
-          if (purposesWithDataElements.length === 0) {
-            console.warn('No purposes with data elements found in API response');
-          }
-        }
-
-        const pickerData = await withLedgerPickerGroups(
-          displayData,
-          langParam || undefined,
-        );
-        setData(pickerData);
-        setGrievanceOptions(displayData.grievance_options || []);
-        const initialGrievances = (
-          displayData.grievance_options || []
-        ).reduce(
-          (acc, option) => {
-            acc[option.value] = false;
-            return acc;
-          },
-          {} as Record<string, boolean>
-        );
-        setSelectedGrievances(initialGrievances);
-        setFormData((prev) => ({
-          ...prev,
-          uuid: displayData.uuid || '',
-          name: displayData.name || '',
-          contact: displayData.contact || storedContact,
-        }));
-      } finally {
-      }
-    };
-
-    void initializePrivacyCenterForm();
-  }, [organizationId, workspaceId, isPopup, authContext, consentClient, withLedgerPickerGroups]);
-
-  /**
-   * Maps translated correction element names back to English names using UUID lookup.
-   */
-  const getEnglishDataElementName = useCallback((translatedName: string): string => {
-    if (!englishDataRef.current?.purposes){
-       return translatedName
-      }
-
-    // Build a map from translated name -> english name via UUID
-    const translatedToUuid = new Map<string, string>();
-    if (data?.purposes) {
-      data.purposes.forEach((pw) => {
-        pw.purpose?.data_elements?.forEach((de) => {
-          translatedToUuid.set(de.name, de.uuid);
-        });
-      });
-    }
-
-    const uuid = translatedToUuid.get(translatedName);
-    if (!uuid){
-       return translatedName
-      }
-
-    for (const pw of englishDataRef.current.purposes) {
-      const englishDe = pw.purpose?.data_elements?.find((de) => de.uuid === uuid);
-      if (englishDe){
-         return englishDe.name
-        }
-    }
-    return translatedName;
-  }, [data]);
-
-  // Purpose names selected in an ERASURE request — surfaced in the
-  // consent-revoke modal and the post-submit notice. When the list is
-  // empty or too long to enumerate, fall back to a generic phrase.
-  const selectedErasurePurposeList = useMemo(
-    () =>
-      selectedPurposes
-        .filter((p) => p.selected || p.data_elements.some((de) => de.selected))
-        .map((p) => p.name)
-        .filter(Boolean),
-    [selectedPurposes]
-  );
-
-  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;
-    }
-    // ERASURE asks the data principal whether to also revoke consent on
-    // fulfilment — the choice is made in the modal and threaded into the
-    // payload via handleErasureModalChoice. Other request types
-    // (ACCESS / CORRECTION / NOMINATION / GRIEVANCE) submit directly.
-    if (requestType === RequestTypeEnum.ERASURE) {
-      setIsErasureConsentModalOpen(true);
-      return;
-    }
-    setRevokeConsentOnFulfilment(false);
-    void handleSubmit(false);
-  };
-
-  const handleErasureModalChoice = (revoke: boolean) => {
-    setRevokeConsentOnFulfilment(revoke);
-    setIsErasureConsentModalOpen(false);
-    void handleSubmit(revoke);
-  };
-
-  const handleErasureModalClose = () => {
-    setIsErasureConsentModalOpen(false);
-  };
-
-  /**
-   * 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;
-    }
-
-    const isProductScoped = isProductScopedRequestType(requestType);
-    const anchorGroup = isProductScoped ? selectedGroup : null;
-
-    const requestDetails: {
-      purposes: UpdatePurpose[];
-      correction_data: UpdateCorrectionDataItem[];
-      grievance_types: GrievanceTypeElement[];
-      nomination_data?: NominationData;
-    } = {
-      purposes: [],
-      correction_data: [],
-      grievance_types: [],
-    };
-
-    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,
-          data_element_uuids: p.data_elements
-            .filter((de) => de.selected)
-            .map((de) => de.uuid),
-        }));
-    }
-
-    if (requestType === RequestTypeEnum.CORRECTION) {
-      requestDetails.correction_data = selectedCorrectionElements.map(
-        (name) => ({
-          name: getEnglishDataElementName(name),
-          curr_value: correctionValues[name]?.current ?? '',
-          new_value: correctionValues[name]?.updated ?? '',
-        }),
-      );
-    }
-
-    if (requestType === RequestTypeEnum.GRIEVANCE) {
-      requestDetails.grievance_types = Object.entries(selectedGrievances)
-        .filter(([, checked]) => checked)
-        .map(([key]) => ({
-          grievance: key as GrievanceValue,
-        }));
-    }
-
-    if (requestType === RequestTypeEnum.NOMINATION) {
-      requestDetails.nomination_data = {
-        nominee_email: nominationData.nominee_email.trim(),
-        ...(nominationData.nominee_mobile?.trim()
-          ? { nominee_mobile: nominationData.nominee_mobile.trim() }
-          : {}),
-      };
-    }
-
-    const payload: UserDataRequest = {
-      name: ' ',
-      contact: formData.contact,
-      request_type: requestType?.toLowerCase() as RequestTypeEnum,
-      uuid: formData.uuid,
-      supporting_docs_uuids: [...uploadedDocumentId],
-      request_details: requestDetails,
-      time_period:
-        requestType === RequestTypeEnum.ACCESS
-          ? parseInt(timePeriod || '30', 10)
-          : 0,
-      requestor_note: formData.additionalNote || '',
-      ...(requestType === RequestTypeEnum.ERASURE
-        ? { revoke_consent_on_fulfilment: revokeConsent }
-        : {}),
-      ...(anchorGroup ? { product_uuid: anchorGroup.product_uuid } : {}),
-      ...(anchorGroup?.nominator
-        ? { data_principal_uuid: anchorGroup.nominator.uuid }
-        : {}),
-    };
-
-    try {
-      setIsLoading(true);
-      const response = await createCaseRequest(
-        organizationId || '',
-        workspaceId || '',
-        payload,
-        isPopup,
-        isCaseManagementContext, // Use session auth if in case management context
-        authContext,
-        consentClient,
-      );
-      const extracted = extractCaseId(response);
-      const caseId = extracted?.case_id || extracted?.uuid || null;
-
-      if (caseId) {
-        queryClient.invalidateQueries({ queryKey: ['caseHistory'] });
-        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);
-      const message =
-        error instanceof Error && error.message
-          ? error.message
-          : t('submissionFailed');
-      toast.error(message);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const isRequestDetailsValid = useCallback(() => {
-    if (!requestType) {
-      return false;
-    }
-
-    // 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(),
-          )
-        );
-      }
-      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(),
-        );
-
-      default:
-        return false;
-    }
-  }, [
-    requestType,
-    allGroups,
-    selectedGroup,
-    selectedPurposes,
-    selectedCorrectionElements,
-    correctionValues,
-    selectedGrievances,
-    nominationData,
-  ]);
-
-  const isFormValid = useMemo(() => {
-    return (
-      (!isPopup || isPopupFormEnabled) &&
-      !!formData.contact?.trim() &&
-      !!requestType &&
-      isRequestDetailsValid() &&
-      formData.confirmCheckBox
-    );
-  }, [
-    isPopup,
-    isPopupFormEnabled,
-    formData.contact,
-    formData.confirmCheckBox,
-    requestType,
-    isRequestDetailsValid,
-  ]);
-
-  const handleFileUpload = async (
-    file: File,
-    isPublic: boolean,
-    caseId: string
-  ) => {
-    setIsDocumentUploading(true);
-    try {
-      const metaData = {
-        group_by: 'privacy',
-        case_uuid: caseId,
-        product: 'privacy_center',
-      };
-
-      const payload = {
-        organization_uuid: organizationId || '',
-        space: `privacy/${caseId}`,
-        uuid: crypto.randomUUID(),
-        is_public: isPublic,
-        allow_ai_processing: true,
-        ...(metaData ? { metadata: metaData } : {}),
-      };
-
-      // Create FormData on client side - this can be passed to server actions
-      const formData = new FormData();
-      formData.append('file', file);
-      formData.append('payload', JSON.stringify(payload));
-
-      // Ensure we have a valid token before uploading
-      if (!organizationId || !workspaceId) {
-        throw new Error('Organization ID and Workspace ID are required for file upload');
-      }
-
-      const authToken = await ensureValidToken(organizationId, workspaceId, orgSlug, authContext, consentClient);
-      if (!authToken) {
-        throw new Error('Authentication token is required for file upload');
-      }
-
-      // uploadFileWithS2S is a client-side function that uses JWT Bearer token authentication
-      const uploadedDoc = await uploadFileWithS2S({
-        formData,
-        fileName: file.name,
-        authToken,
-        baseUrl,
-      });
-
-      if (!uploadedDoc.success) {
-        toast.error(t('failedToUploadFile', { fileName: file.name }));
-        throw new Error(uploadedDoc.error);
-      }
-
-      if (uploadedDoc.uuid) {
-        setUploadedDocuments((prev) => [
-          ...prev,
-          { uuid: uploadedDoc.uuid!, name: file.name },
-        ]);
-        setUploadedDocumentId((prevIds) => [...prevIds, uploadedDoc.uuid!]);
-        setIsDocument(true);
-        toast.success(t('fileUploadedSuccess'));
-      }
-    } catch (error) {
-      console.error('Upload error:', error);
-      toast.error(t('uploadError', { error: String(error) }));
-      return null;
-    } finally {
-      setIsDocumentUploading(false);
-    }
-  };
-
-  const handleFileChange = async (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => {
-    const files = Array.from(event.target.files || []);
-    handleFileUpload(files[0], true, formData.uuid);
-    resetFileInput();
-  };
-
-  const handleRemoveDocument = (uuidToRemove: string) => {
-    setUploadedDocuments((prev) =>
-      prev.filter((doc) => doc.uuid !== uuidToRemove)
-    );
-    setUploadedDocumentId((prev) => prev.filter((id) => id !== uuidToRemove));
-  };
-
-  const handleVerifyContact = async () => {
-    if (!isPopup) {
-      return
-    };
-    if (!formData.contact) {
-      toast.error(t('pleaseEnterContactToVerify'));
-      return;
-    }
-    if (!organizationId || !workspaceId) {
-      toast.error(t('missingOrgOrWorkspace'));
-      return;
-    }
-
-    setIsVerifyingContact(true);
-    try {
-      // Always fetch English data first and store for submission
-      const englishData = await getFormData(
-        organizationId,
-        workspaceId,
-        formData.contact,
-        isPopup,
-        isCaseManagementContext,
-        authContext,
-        consentClient
-      );
-
-      if (englishData) {
-        englishDataRef.current = englishData;
-
-        // If current language is non-English, fetch translated data for display
-        const langParam = getLangParam(i18n.language);
-        const displayData = langParam
-          ? (await getFormData(
-            organizationId,
-            workspaceId,
-            formData.contact,
-            isPopup,
-            isCaseManagementContext,
-            authContext,
-            consentClient,
-            langParam
-          )) || englishData
-          : englishData;
-
-        if (displayData.purposes && Array.isArray(displayData.purposes)) {
-          const purposesWithDataElements = displayData.purposes.filter(
-            (p) => p.purpose?.data_elements && p.purpose.data_elements.length > 0
-          );
-
-          if (purposesWithDataElements.length === 0) {
-            console.warn('No purposes with data elements found in API response (popup)');
-          }
-        }
-
-        setData(displayData);
-        setGrievanceOptions(displayData.grievance_options || []);
-        const initialGrievances = (displayData.grievance_options || []).reduce(
-          (acc, option) => {
-            acc[option.value] = false;
-            return acc;
-          },
-          {} as Record<string, boolean>
-        );
-        setSelectedGrievances(initialGrievances);
-        setFormData((prev) => ({
-          ...prev,
-          uuid: displayData.uuid || '',
-          name: displayData.name || '',
-          contact: displayData.contact || prev.contact,
-        }));
-        // Translations are handled locally via i18next, no API call needed
-        setIsPopupFormEnabled(true);
-        toast.success(t('contactVerifiedSuccess'));
-      } else {
-        setIsPopupFormEnabled(false);
-        toast.error(t('unableToVerifyContact'));
-      }
-    } catch (error: any) {
-      if (error.response?.status === 404) {
-        toast.info(t('noUserFoundForContact', { contact: formData.contact }));
-        onClose?.();
-      } else {
-        toast.error(t('failedToVerifyContact'));
-        setIsVerifyingContact(false);
-      }
-    } finally {
-      setIsVerifyingContact(false);
-    }
-  };
-
-  return (
-    <>
-      {isSubmitted && submittedCase && !isPopup ? (
-        <RequestSubmit
-          result={submittedCase}
-          contact={formData?.contact}
-          onCreateRequest={onCreateRequest}
-          revokeConsentOnFulfilment={revokeConsentOnFulfilment}
-          revokedPurposeNames={selectedErasurePurposeNames}
-        />
-      ) : (
-        <div>
-          <div>
-            {!isPopup && (
-              <p style={{
-                marginTop: 0,
-                marginBottom: getVar('--pc-spacing-sm'),
-                lineHeight: 1.5,
-                fontSize: pcStyles.textSm.fontSize,
-                color: getVar('--pc-text-secondary'),
-              }}>{t('description')}</p>
-            )}
-            <div
-              style={{
-                backgroundColor: getVar('--pc-bg-primary'),
-                ...(isPopup ? {
-                  marginTop: 0,
-                  marginBottom: 0,
-                  borderRadius: pcStyles.borderRadiusXl,
-                } : {
-                  marginTop: pcStyles.mtSm.marginTop,
-                  marginBottom: pcStyles.mbSm.marginBottom,
-                  borderRadius: pcStyles.borderRadiusXl,
-                  border: `1px solid ${getVar('--pc-border-color')}`,
-                  boxShadow: getVar('--pc-shadow-sm'),
-                }),
-              }}
-            >
-              <FormBlockWrapper inputClassName="mx-auto">
-                <div
-                  style={{
-                    ...pcStyles.flex,
-                    ...pcStyles.itemsCenter,
-                    ...pcStyles.justifyBetween,
-                    backgroundColor: `var(--pc-bg-secondary)`,
-                    padding: getVar('--pc-spacing-md'),
-                    width: '100%',
-                    overflow: 'visible',
-                    ...(isPopup ? {
-                      position: 'sticky',
-                      top: 0,
-                      zIndex: 20,
-                      borderBottom: `1px solid var(--pc-border-color)`,
-                    } : {
-                      position: 'relative',
-                      borderRadius: `${getVar('--pc-border-radius-lg')} ${getVar('--pc-border-radius-lg')} 0 0`,
-                    }),
-                  }}
-                  className="pc-padding-responsive"
-                >
-                  <p style={{
-                    fontSize: pcStyles.textSm.fontSize,
-                    fontWeight: pcStyles.fontWeightSemibold.fontWeight,
-                    color: `var(--pc-text-primary)`,
-                    margin: 0,
-                    whiteSpace: 'nowrap',
-                    flexShrink: 0,
-                    flexGrow: 0,
-                  }} className="pc-text-responsive">
-                    {t('raiseDataRequest')}
-                  </p>
-                  {isPopup && (
-                    <PCButton
-                      variant="text"
-                      onClick={onClose}
-                      style={{ padding: 0, flexShrink: 0, marginLeft: 'auto' }}
-                    >
-                      <FiX size={20} />
-                    </PCButton>
-                  )}
-                </div>
-                <div
-                  style={{
-                    ...pcStyles.flex,
-                    ...pcStyles.flexCol,
-                    gap: getVar('--pc-spacing-lg'),
-                    padding: getVar('--pc-spacing-lg'),
-                  }}
-                  className="pc-padding-responsive pc-spacing-responsive"
-                >
-                  <div style={{
-                    ...pcStyles.flex,
-                    width: '100%',
-                    ...pcStyles.itemsEnd,
-                    gap: getVar('--pc-spacing-sm'),
-                    flexWrap: 'wrap',
-                  }}>
-                    <PCInput
-                      style={{ flex: 1, minWidth: '200px' }}
-                      label={
-                        <span>
-                          {t('contact')}
-                          <span style={{ color: getVar('--pc-error') }}>*</span>
-                        </span>
-                      }
-                      placeholder={t('contactPlaceholder')}
-                      value={formData.contact}
-                      readOnly={!isPopup}
-                      onChange={(e) => {
-                        if (!isPopup){
-                           return
-                          };
-                        setFormData({
-                          ...formData,
-                          contact: e.target.value,
-                        });
-                        setIsPopupFormEnabled(false);
-                      }}
-                    />
-                    {isPopup && !isPopupFormEnabled && (
-                      <div style={{ ...pcStyles.flex, ...pcStyles.justifyEnd }}>
-                        <PCButton
-                          size="sm"
-                          onClick={handleVerifyContact}
-                          style={{ height: '2.25rem', flexShrink: 0 }}
-                          disabled={!formData.contact || isVerifyingContact}
-                        >
-                          {isVerifyingContact ? t('verifying') : t('verify')}
-                        </PCButton>
-                      </div>
-                    )}
-                  </div>
-                  <PCSelect
-                    label={
-                      <span>
-                        {t('requestType')}
-                        <span style={{ color: getVar('--pc-error') }}>*</span>
-                      </span>
-                    }
-                    options={Object.values(RequestTypeEnum).map((type) => ({
-                      value: type,
-                      label: requestTypeLabels[type],
-                    }))}
-                    value={
-                      Object.values(RequestTypeEnum)
-                        .map((type) => ({
-                          value: type,
-                          label: requestTypeLabels[type],
-                        }))
-                        .find((opt) => opt.value === requestType) || null
-                    }
-                    onChange={(value) => {
-                      if (value) {
-                        setRequestType(value.value as RequestTypeEnum);
-                        setTimePeriod('');
-                        setIsRequestDetailsExpanded(true);
-                      }
-                    }}
-                    placeholder={t('selectRequestType')}
-                    disabled={isPopup && !isPopupFormEnabled}
-                  />
-                  <div
-                    style={{
-                      ...pcStyles.flex,
-                      ...pcStyles.flexCol,
-                      borderRadius: pcStyles.borderRadiusLg,
-                      border: `1px solid ${getVar('--pc-border-color')}`,
-                      backgroundColor: getVar('--pc-bg-secondary'),
-                      overflow: 'hidden',
-                      ...(isPopup && !isPopupFormEnabled ? {
-                        pointerEvents: 'none',
-                        opacity: 0.6,
-                      } : {}),
-                    }}
-                  >
-                    <div style={{
-                      ...pcStyles.flex,
-                      ...pcStyles.itemsCenter,
-                      ...pcStyles.justifyBetween,
-                      padding: getVar('--pc-spacing-md'),
-                      borderBottom: isRequestDetailsExpanded ? `1px solid ${getVar('--pc-border-color')}` : 'none',
-                    }}>
-                      <p style={{
-                        fontWeight: pcStyles.fontWeightSemibold.fontWeight,
-                        color: `var(--pc-text-primary)`,
-                        fontSize: pcStyles.textSm.fontSize,
-                        margin: 0,
-                      }}>
-                        {t('requestDetails')}{' '}
-                        <span style={{ color: getVar('--pc-error') }}>*</span>
-                      </p>
-                      <PCButton
-                        variant="text"
-                        size="sm"
-                        style={{ height: 'auto', padding: 0, color: 'var(--pc-text-secondary)', flexShrink: 0 }}
-                        onClick={() =>
-                          setIsRequestDetailsExpanded(
-                            !isRequestDetailsExpanded
-                          )
-                        }
-                      >
-                        {isRequestDetailsExpanded ? (
-                          <FiChevronUp size={20} />
-                        ) : (
-                          <FiChevronDown size={20} />
-                        )}
-                      </PCButton>
-                    </div>
-                    {isRequestDetailsExpanded && (
-                      <div style={{
-                        padding: getVar('--pc-spacing-md'),
-                      }}>
-                        {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}
-                            selectedGrievances={selectedGrievances}
-                            setSelectedGrievances={setSelectedGrievances}
-                            isTranslating={isTranslating}
-                          />
-                        ) : requestType === RequestTypeEnum.NOMINATION ? (
-                          <NominationDataSection
-                            nominationData={nominationData}
-                            setNominationData={setNominationData}
-                            isTranslating={isTranslating}
-                          />
-                        ) : (
-                          <div
-                            style={{
-                              color: getVar('--pc-text-secondary'),
-                              ...(isPopup ? {
-                                padding: getVar('--pc-spacing-md'),
-                              } : {
-                                ...pcStyles.flex,
-                                height: '8rem',
-                                ...pcStyles.itemsCenter,
-                                ...pcStyles.justifyCenter,
-                                padding: getVar('--pc-spacing-lg'),
-                              }),
-                              textAlign: 'center',
-                            }}
-                          >
-                            {t('selectRequestType')}
-                          </div>
-                        )}
-                      </div>
-                    )}
-                  </div>
-                  <div
-                    style={{
-                      ...pcStyles.flex,
-                      ...pcStyles.flexCol,
-                      gap: getVar('--pc-spacing-sm'),
-                      ...(isPopup && !isPopupFormEnabled ? {
-                        pointerEvents: 'none',
-                        opacity: 0.6,
-                      } : {}),
-                    }}
-                  >
-                    <p style={{
-                      fontWeight: pcStyles.fontWeightSemibold.fontWeight,
-                      color: `var(--pc-text-primary)`,
-                      fontSize: pcStyles.textSm.fontSize,
-                      margin: 0,
-                    }}>
-                      {t('supportingDocumentation')}
-                    </p>
-                    <input
-                      ref={fileInputRef}
-                      id="privacy-file-upload"
-                      type="file"
-                      onChange={(e) => handleFileChange(e)}
-                      style={{ display: 'none' }}
-                    />
-                    <div
-                      style={{
-                        ...pcStyles.flex,
-                        flexWrap: 'wrap',
-                        ...pcStyles.itemsStart,
-                        borderRadius: pcStyles.borderRadiusMd,
-                        border: `1px solid var(--pc-border-color)`,
-                        backgroundColor: `var(--pc-bg-secondary)`,
-                        padding: getVar('--pc-spacing-md'),
-                        minHeight: '100px',
-                        ...(isPopup ? {
-                          gap: '0.5rem',
-                          ...pcStyles.overflowYAuto,
-                        } : {
-                          gap: getVar('--pc-spacing-sm'),
-                        }),
-                      }}
-                    >
-                      {/* Always render documents list container to prevent layout shift */}
-                      {(isDocument && uploadedDocuments.length > 0) && (
-                        <div
-                          style={{
-                            ...pcStyles.flex,
-                            ...pcStyles.gapSm,
-                            ...(isPopup ? { flexWrap: 'wrap' } : {}),
-                            width: '100%',
-                          }}
-                        >
-                          {uploadedDocuments.map((doc) => (
-                            <div
-                              key={doc.uuid}
-                              style={{
-                                position: 'relative',
-                                ...pcStyles.flex,
-                                ...pcStyles.itemsCenter,
-                                ...pcStyles.gapXs,
-                                borderRadius: pcStyles.borderRadiusMd,
-                                border: `1px solid var(--pc-border-color)`,
-                                backgroundColor: `var(--pc-bg-primary)`,
-                                padding: getVar('--pc-spacing-sm'),
-                              }}
-                            >
-                              <img
-                                src={fileAttachIcon}
-                                alt="fileAttach"
-                                width={24}
-                                height={24}
-                              />
-                              <p
-                                style={{
-                                  fontWeight: pcStyles.fontWeightMedium.fontWeight,
-                                  color: `var(--pc-text-primary)`,
-                                  ...(isPopup ? {
-                                    maxWidth: '100px',
-                                    overflow: 'hidden',
-                                    textOverflow: 'ellipsis',
-                                    whiteSpace: 'nowrap',
-                                    fontSize: pcStyles.textXs.fontSize,
-                                  } : {
-                                    fontSize: pcStyles.textSm.fontSize,
-                                  }),
-                                }}
-                              >
-                                {doc.name}
-                              </p>
-                              <div
-                                style={{
-                                  position: 'absolute',
-                                  right: '-0.25rem',
-                                  top: '-0.5rem',
-                                  cursor: 'pointer',
-                                }}
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  handleRemoveDocument(doc.uuid);
-                                }}
-                              >
-                                <div style={{
-                                  borderRadius: '50%',
-                                  border: `1px solid var(--pc-border-color)`,
-                                  backgroundColor: `var(--pc-bg-secondary)`,
-                                  padding: '0.125rem',
-                                }}>
-                                  <AiOutlineClose size={12} style={{ color: 'var(--pc-error)' }} />
-                                </div>
-                              </div>
-                            </div>
-                          ))}
-                        </div>
-                      )}
-
-                      {/* Upload button or loading state - always in same position */}
-                      <div style={{
-                        width: uploadedDocuments.length > 0 ? 'auto' : '100%',
-                        ...pcStyles.flex,
-                        ...pcStyles.itemsCenter,
-                        ...pcStyles.justifyCenter,
-                        minHeight: uploadedDocuments.length > 0 ? 'auto' : '100px',
-                      }}>
-                        {isDocumentUploading ? (
-                          <div style={{
-                            padding: uploadedDocuments.length > 0 ? getVar('--pc-spacing-sm') : getVar('--pc-spacing-lg'),
-                            borderRadius: pcStyles.borderRadiusMd,
-                            border: uploadedDocuments.length > 0 ? `1px solid var(--pc-border-color)` : 'none',
-                            backgroundColor: `var(--pc-bg-primary)`,
-                            fontWeight: pcStyles.fontWeightSemibold.fontWeight,
-                            color: `var(--pc-text-primary)`,
-                            ...pcStyles.flex,
-                            ...pcStyles.itemsCenter,
-                            ...pcStyles.justifyCenter,
-                            gap: uploadedDocuments.length > 0 ? getVar('--pc-spacing-sm') : getVar('--pc-spacing-md'),
-                            width: 'auto',
-                          }}>
-                            <PCLoader variant="spinner" size="sm" />
-                            <span>{t('uploading')}</span>
-                          </div>
-                        ) : (
-                          <div
-                            style={{
-                              ...pcStyles.flex,
-                              width: uploadedDocuments.length > 0 ? 'auto' : '100%',
-                              cursor: 'pointer',
-                              ...pcStyles.itemsCenter,
-                              ...pcStyles.justifyCenter,
-                              gap: uploadedDocuments.length > 0 ? getVar('--pc-spacing-sm') : getVar('--pc-spacing-md'),
-                              borderRadius: pcStyles.borderRadiusMd,
-                              padding: uploadedDocuments.length > 0 ? getVar('--pc-spacing-sm') : getVar('--pc-spacing-lg'),
-                              border: uploadedDocuments.length > 0 ? `1px solid var(--pc-border-color)` : 'none',
-                              backgroundColor: uploadedDocuments.length > 0 ? `var(--pc-bg-primary)` : 'transparent',
-                              transition: 'all 0.2s ease',
-                            }}
-                            onMouseEnter={(e) => {
-                              e.currentTarget.style.backgroundColor = uploadedDocuments.length > 0
-                                ? `var(--pc-bg-hover)`
-                                : `var(--pc-bg-hover)`;
-                              if (uploadedDocuments.length > 0) {
-                                e.currentTarget.style.borderColor = `var(--pc-primary)`;
-                              }
-                            }}
-                            onMouseLeave={(e) => {
-                              e.currentTarget.style.backgroundColor = uploadedDocuments.length > 0
-                                ? `var(--pc-bg-primary)`
-                                : 'transparent';
-                              if (uploadedDocuments.length > 0) {
-                                e.currentTarget.style.borderColor = `var(--pc-border-color)`;
-                              }
-                            }}
-                            role="button"
-                            tabIndex={0}
-                            aria-label={t('uploadFile')}
-                            onClick={() =>
-                              document
-                                .getElementById('privacy-file-upload')
-                                ?.click()
-                            }
-                            onKeyDown={(e) => {
-                              if (e.key === 'Enter' || e.key === ' ') {
-                                e.preventDefault();
-                                document.getElementById('privacy-file-upload')?.click();
-                              }
-                            }}
-                          >
-                            {uploadedDocuments.length === 0 ? (
-                              <>
-                                <div>
-                                  <img
-                                    src={uploadFileIcon}
-                                    width={44}
-                                    height={44}
-                                    alt="upload"
-                                  />
-                                </div>
-                                <span style={{
-                                  color: 'var(--pc-text-secondary)',
-                                  fontSize: pcStyles.textSm.fontSize,
-                                }}>
-                                  {t('uploadFile')}
-                                </span>
-                              </>
-                            ) : (
-                              <div style={{ ...pcStyles.flex, ...pcStyles.itemsCenter, ...pcStyles.justifyCenter, ...pcStyles.gapSm }}>
-                                <PiUploadBold
-                                  size={isPopup ? 20 : 16}
-                                  style={{ color: 'var(--pc-text-secondary)' }}
-                                />
-                                {!isPopup && (
-                                  <p style={{
-                                    fontWeight: pcStyles.fontWeightMedium.fontWeight,
-                                    color: `var(--pc-text-primary)`,
-                                  }}>
-                                    {t('uploadFileButton')}
-                                  </p>
-                                )}
-                              </div>
-                            )}
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                  {requestType === RequestTypeEnum.ACCESS && (
-                    <PCSelect
-                      label={t('timePeriod')}
-                      options={timePeriodOptions}
-                      value={timePeriodOptions.find(
-                        (opt) => opt.value === timePeriod
-                      ) || null}
-                      onChange={(value) => {
-                        if (value) {
-                          setTimePeriod(value.value as string);
-                        }
-                      }}
-                      disabled={isPopup && !isPopupFormEnabled}
-                    />
-                  )}
-                  <PCTextarea
-                    label={t('additionalNote')}
-                    placeholder={t('reasonOptional')}
-                    value={formData.additionalNote}
-                    onChange={(e) =>
-                      setFormData({
-                        ...formData,
-                        additionalNote: e.target.value,
-                      })
-                    }
-                    style={isPopup ? { minHeight: '60px' } : {}}
-                    disabled={isPopup && !isPopupFormEnabled}
-                  />
-                  <PCCheckbox
-                    size="sm"
-                    label={
-                      <span>
-                        {t('confirmCheckBox')}{' '}
-                        <span style={{ color: getVar('--pc-error') }}>*</span>
-                      </span>
-                    }
-                    checked={formData.confirmCheckBox}
-                    onChange={(e) =>
-                      setFormData({
-                        ...formData,
-                        confirmCheckBox: e.target.checked,
-                      })
-                    }
-                    disabled={isPopup && !isPopupFormEnabled}
-                  />
-                  <div
-                    style={{
-                      ...pcStyles.flex,
-                      ...pcStyles.flexRow,
-                      ...pcStyles.justifyEnd,
-                      gap: getVar('--pc-spacing-sm'),
-                      ...(isPopup ? {
-                        position: 'sticky',
-                        bottom: 0,
-                        left: 0,
-                        right: 0,
-                        zIndex: 20,
-                        borderTop: `1px solid ${getVar('--pc-border-color')}`,
-                        backgroundColor: getVar('--pc-bg-primary'),
-                        padding: '0.75rem',
-                        marginLeft: '-0.75rem',
-                        marginRight: '-0.75rem',
-                      } : {
-                        marginTop: pcStyles.mtMd.marginTop,
-                      }),
-                    }}
-                    className="pc-flex-responsive pc-spacing-responsive"
-                  >
-                    {isPopup && (
-                      <PCButton variant="secondary" onClick={onClose} style={{ flexShrink: 0 }}>
-                        {t('cancel') ?? 'Cancel'}
-                      </PCButton>
-                    )}
-                    <PCButton
-                      variant="primary"
-                      onClick={handleSubmitClick}
-                      disabled={!isFormValid || isLoading}
-                      isLoading={isLoading}
-                      style={{
-                        ...pcStyles.flex,
-                        ...pcStyles.itemsCenter,
-                        ...pcStyles.justifyCenter,
-                        minWidth: '120px',
-                        flexShrink: 0,
-                        opacity: (!isFormValid || isLoading) ? 0.5 : 1,
-                        cursor: (!isFormValid || isLoading) ? 'not-allowed' : (isLoading ? 'wait' : 'pointer'),
-                      }}
-                    >
-                      {t('submit')}
-                    </PCButton>
-                  </div>
-                </div>
-              </FormBlockWrapper>
-            </div>
-          </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>
-    </>
-  );
-}