@redacto.io/consent-sdk-react 3.5.0 → 3.6.0

package/src/RedactoPrivacyCenter/components/Form.tsx

@@ -0,0 +1,1455 @@
+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, PCTextarea } from '../ui';
+import { pcStyles } from '../styles/pcStyles';
+import { createCaseRequest, getFormData } from '../lib/api';
+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 {
+  DataElement,
+  FormData,
+  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 PurposeSelectionSection from './DataRequest/PurposeSelectionSection';
+import RequestSubmit from './RequestSubmit';
+import type { CaseHistoryProps } from './types';
+import { cn } from '../utils/cn';
+import { FiChevronDown, FiChevronUp, FiX } from 'react-icons/fi';
+
+const getVar = (varName: string): string => `var(${varName})`;
+
+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 } = 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,
+  });
+  const [erasurePurposes, setErasurePurposes] = useState<Purpose[]>([]);
+  const [accessPurposes, setAccessPurposes] = useState<Purpose[]>([]);
+  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);
+  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 }[]
+  >([]);
+  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 resetFileInput = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  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
+        // Only include data elements with selected === true
+        const validDataElements = Array.isArray(purpose.data_elements)
+          ? purpose.data_elements.filter(
+            (element) => element !== null && element !== undefined && element.uuid && element.selected
+          )
+          : [];
+
+        // Data elements are validated and processed
+
+        validDataElements.forEach((element) => {
+          if (element.uuid && !uniqueElements.has(element.uuid)) {
+            uniqueElements.set(element.uuid, {
+              ...element,
+              purposeName: purpose.name,
+            });
+          }
+        });
+      });
+
+      setUniqueDataElements(
+        Array.from(uniqueElements.values()) as DataElement[]
+      );
+
+      // Ensure data_elements are properly preserved with all properties
+      // Only include data elements with selected === true, and filter out purposes with no data elements
+      const processedPurposes = extractedPurposes
+        .map((p) => {
+          const validDataElements = Array.isArray(p.data_elements)
+            ? p.data_elements
+              .filter((de) => de !== null && de !== undefined && de.selected)
+              .map((de) => ({
+                ...de,
+                selected: false,
+              }))
+            : [];
+
+          return {
+            ...p,
+            selected: false,
+            data_elements: validDataElements,
+          };
+        })
+        .filter((p) => p.data_elements.length > 0);
+
+      setAccessPurposes(processedPurposes);
+      setErasurePurposes(processedPurposes);
+    }
+  }, [data]);
+
+  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;
+      }
+
+      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) {
+        // Fallback to English when no translations for this language
+        toast.info(t('translationNotAvailable'));
+        return;
+      }
+
+      setData(translatedFormData);
+
+      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);
+      }
+
+      selectionsToRestoreRef.current = {
+        access: currentAccessSelections,
+        erasure: currentErasureSelections,
+      };
+    } 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, accessPurposes, erasurePurposes, selectedGrievances, t]);
+
+  // Clear previous selections when request type changes
+  useEffect(() => {
+    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
+      // Only include data elements with selected === true, and filter out purposes with no data elements
+      const processedPurposes = extractedPurposes
+        .map((p) => {
+          const validDataElements = Array.isArray(p.data_elements)
+            ? p.data_elements
+              .filter((de) => de !== null && de !== undefined && de.selected)
+              .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]);
+
+
+  // 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');
+          }
+        }
+
+        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 || storedContact,
+        }));
+      } finally {
+      }
+    };
+
+    void initializePrivacyCenterForm();
+  }, [organizationId, workspaceId, isPopup, authContext, consentClient]);
+
+  /**
+   * 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]);
+
+  const handleSubmit = async () => {
+    if (!isFormValid) return;
+
+    const requestDetails: {
+      purposes: UpdatePurpose[];
+      correction_data: UpdateCorrectionDataItem[];
+      grievance_types: GrievanceTypeElement[];
+      nomination_data?: NominationData;
+    } = {
+      purposes: [],
+      correction_data: [],
+      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
+        .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 || '',
+    };
+
+    try {
+      setIsLoading(true);
+      const response = await createCaseRequest(
+        organizationId || '',
+        workspaceId || '',
+        payload,
+        isPopup,
+        isCaseManagementContext, // Use session auth if in case management context
+        authContext,
+        consentClient
+      );
+      // privacyCenterApiFetch unwraps { code, status, detail } responses and returns just the detail
+      // So response will be { uuid, case_id } if successful (privacy center), or null if error
+      // Case management returns the full CreateCaseResponse with { code, status, detail: { uuid, case_id } }
+      let caseId: string | null = null;
+      if (response) {
+        if ('detail' in response && response.detail) {
+          // Case management: wrapped response
+          caseId =
+            (response.detail as { case_id?: string; uuid?: string }).case_id ||
+            (response.detail as { case_id?: string; uuid?: string }).uuid ||
+            null;
+        } else if ('case_id' in response || 'uuid' in response) {
+          // Privacy center: unwrapped response
+          caseId =
+            (response as { case_id?: string; uuid?: string }).case_id ||
+            (response as { case_id?: string; uuid?: string }).uuid ||
+            null;
+        }
+      }
+
+      if (caseId) {
+        queryClient.invalidateQueries({ queryKey: ['caseHistory'] });
+        setCaseId(caseId);
+        setIsSubmitted(true);
+        toast.success(t('requestSubmittedSuccess'));
+
+        if (isPopup) {
+          onCreateRequest?.();
+        }
+      } else {
+        toast.error(t('requestSubmissionFailed'));
+      }
+    } catch (error) {
+      console.error('Error submitting request:', error);
+      toast.error(t('submissionFailed'));
+    } 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);
+
+      case RequestTypeEnum.CORRECTION:
+        return (
+          selectedCorrectionElements.length > 0 &&
+          selectedCorrectionElements.every(
+            (name) =>
+              correctionValues[name]?.current?.trim() &&
+              correctionValues[name]?.updated?.trim()
+          )
+        );
+
+      case RequestTypeEnum.NOMINATION:
+        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(nominationData.nominee_email.trim());
+
+      default:
+        return false;
+    }
+  }, [
+    requestType,
+    accessPurposes,
+    erasurePurposes,
+    selectedGrievances,
+    selectedCorrectionElements,
+    correctionValues,
+    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 && !isPopup ? (
+        <RequestSubmit
+          caseId={caseId || ''}
+          contact={formData?.contact}
+          onCreateRequest={onCreateRequest}
+        />
+      ) : (
+        <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'),
+                      }}>
+                        {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}
+                          />
+                        ) : 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="outline" onClick={onClose} style={{ flexShrink: 0 }}>
+                        {t('cancel') ?? 'Cancel'}
+                      </PCButton>
+                    ) : (
+                      <PCButton variant="outline" style={{ flexShrink: 0 }}>
+                        {t('saveDraft')}
+                      </PCButton>
+                    )}
+                    <PCButton
+                      variant="primary"
+                      onClick={handleSubmit}
+                      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>
+      )}
+    </>
+  );
+}