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

package/src/RedactoPrivacyCenter/components/ConsentManagerPurposeCards.tsx

@@ -1,102 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { PCEmpty, PCText } from '../ui';
-import type { ConsentModalRecord, DisplayPurposeRow } from '../lib/types';
-import {
-  renderGivenDate,
-  renderMethod,
-  renderModifyButton,
-  renderStatusBadge,
-  renderValidTill,
-} from './ConsentManagerCells';
-
-type ConsentManagerPurposeCardsProps = {
-  rows: DisplayPurposeRow[];
-  onModify: (record: ConsentModalRecord) => void;
-};
-
-const toModalRecord = (row: DisplayPurposeRow): ConsentModalRecord => ({
-  ...row,
-});
-
-export function ConsentManagerPurposeCards({
-  rows,
-  onModify,
-}: ConsentManagerPurposeCardsProps) {
-  const { t } = useTranslation();
-
-  if (rows.length === 0) {
-    return (
-      <div className="pc-consent-mobile-empty">
-        <PCEmpty title={t('noData')} />
-      </div>
-    );
-  }
-
-  return (
-    <div className="pc-consent-mobile-list">
-      {rows.map((row) => (
-        <article
-          key={`${row.product_uuid}:${row.purpose_uuid}`}
-          className="pc-consent-mobile-card"
-        >
-          <div className="pc-consent-mobile-purpose-head">
-            <div style={{ minWidth: 0 }}>
-              <PCText size="sm" weight="semibold">{row.name}</PCText>
-              {row.description && (
-                <PCText size="sm" color="secondary" className="pc-consent-mobile-subtle-text">
-                  {row.description}
-                </PCText>
-              )}
-            </div>
-            {renderStatusBadge(row.status, t)}
-          </div>
-
-          <div className="pc-consent-mobile-activity-row">
-            <PCText size="sm" color="secondary" className="pc-consent-mobile-meta-label">
-              {t('product')}
-            </PCText>
-            <PCText size="sm" weight="medium">{row.product_name || '-'}</PCText>
-          </div>
-
-          {row.nominator && (
-            <div className="pc-consent-mobile-activity-row">
-              <PCText size="sm" color="secondary" className="pc-consent-mobile-meta-label">
-                {t('nominatedBy')}
-              </PCText>
-              <PCText size="sm" weight="medium">
-                {row.nominator.name || row.nominator.email || row.nominator.org_user_id}
-              </PCText>
-            </div>
-          )}
-
-          <div className="pc-consent-mobile-meta-grid">
-            <div>
-              <PCText size="sm" color="secondary" className="pc-consent-mobile-meta-label">
-                {t('givenDate')}
-              </PCText>
-              {renderGivenDate(row.given_date, { showTooltip: false })}
-            </div>
-            <div>
-              <PCText size="sm" color="secondary" className="pc-consent-mobile-meta-label">
-                {t('validTill')}
-              </PCText>
-              {renderValidTill(row, t)}
-            </div>
-            <div>
-              <PCText size="sm" color="secondary" className="pc-consent-mobile-meta-label">
-                {t('method')}
-              </PCText>
-              {renderMethod(row.method)}
-            </div>
-            <div className="pc-consent-mobile-action-cell">
-              <PCText size="sm" color="secondary" className="pc-consent-mobile-meta-label">
-                {t('action')}
-              </PCText>
-              {renderModifyButton(toModalRecord(row), onModify, t)}
-            </div>
-          </div>
-        </article>
-      ))}
-    </div>
-  );
-}

package/src/RedactoPrivacyCenter/components/ConsentManagerTableSkeleton.tsx

@@ -1,159 +0,0 @@
-import { SKELETON_ROW_COUNT } from './ConsentManagerConstants';
-import { pcStyles } from '../styles/pcStyles';
-
-const getVar = (varName: string): string => `var(${varName})`;
-
-export const ConsentManagerTableSkeleton = () => {
-  return (
-    <div style={{
-      borderRadius: `${getVar('--pc-border-radius-lg')} ${getVar('--pc-border-radius-lg')} 0 0`,
-      border: `1px solid ${getVar('--pc-border-color')}`,
-      borderBottom: 'none',
-      backgroundColor: getVar('--pc-bg-primary'),
-    }}>
-      {/* Table Header */}
-      <div style={{
-        borderBottom: `1px solid ${getVar('--pc-border-color')}`,
-        backgroundColor: getVar('--pc-bg-secondary'),
-      }}>
-        <div style={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(7, 1fr)',
-          gap: getVar('--pc-spacing-md'),
-          paddingLeft: getVar('--pc-spacing-lg'),
-          paddingRight: getVar('--pc-spacing-lg'),
-          paddingTop: getVar('--pc-spacing-md'),
-          paddingBottom: getVar('--pc-spacing-md'),
-        }} className="pc-grid-responsive">
-          {Array.from({ length: 7 }).map((_, i) => (
-            <div 
-              key={i}
-              style={{ 
-                height: '1rem', 
-                width: '6rem', 
-                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', 
-                borderRadius: getVar('--pc-border-radius-md'), 
-                backgroundColor: getVar('--pc-bg-tertiary'),
-              }}
-            />
-          ))}
-        </div>
-      </div>
-
-      {/* Table Rows */}
-      {Array.from({ length: SKELETON_ROW_COUNT }).map((_, index) => (
-        <div
-          key={index}
-          style={{
-            borderBottom:
-              index === SKELETON_ROW_COUNT - 1
-                ? 'none'
-                : `1px solid ${getVar('--pc-border-color')}`,
-            backgroundColor: getVar('--pc-bg-primary'),
-          }}
-        >
-          <div style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(7, 1fr)',
-            gap: getVar('--pc-spacing-md'),
-            paddingLeft: getVar('--pc-spacing-lg'),
-            paddingRight: getVar('--pc-spacing-lg'),
-            paddingTop: getVar('--pc-spacing-md'),
-            paddingBottom: getVar('--pc-spacing-md'),
-          }} className="pc-grid-responsive">
-            {/* Purpose */}
-            <div style={{ ...pcStyles.flex, ...pcStyles.flexCol, ...pcStyles.gapXs }}>
-              <div style={{ 
-                height: '1rem', 
-                width: '8rem', 
-                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', 
-                borderRadius: getVar('--pc-border-radius-md'), 
-                backgroundColor: getVar('--pc-bg-tertiary'),
-              }} />
-              <div style={{ 
-                height: '0.75rem', 
-                width: '12rem', 
-                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', 
-                borderRadius: getVar('--pc-border-radius-md'), 
-                backgroundColor: getVar('--pc-bg-tertiary'),
-              }} />
-            </div>
-
-            {/* Product */}
-            <div style={{ ...pcStyles.flex, ...pcStyles.flexCol, ...pcStyles.gapXs }}>
-              <div style={{ 
-                height: '1rem', 
-                width: '6rem', 
-                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', 
-                borderRadius: getVar('--pc-border-radius-md'), 
-                backgroundColor: getVar('--pc-bg-tertiary'),
-              }} />
-              <div style={{ 
-                height: '0.75rem', 
-                width: '8rem', 
-                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', 
-                borderRadius: getVar('--pc-border-radius-md'), 
-                backgroundColor: getVar('--pc-bg-tertiary'),
-              }} />
-            </div>
-
-            {/* Status */}
-            <div style={{ ...pcStyles.flex, ...pcStyles.itemsCenter }}>
-              <div style={{ 
-                height: '1.5rem', 
-                width: '5rem', 
-                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', 
-                borderRadius: '9999px', 
-                backgroundColor: getVar('--pc-bg-tertiary'),
-              }} />
-            </div>
-
-            {/* Given Date */}
-            <div style={{ ...pcStyles.flex, ...pcStyles.itemsCenter }}>
-              <div style={{ 
-                height: '1rem', 
-                width: '6rem', 
-                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', 
-                borderRadius: getVar('--pc-border-radius-md'), 
-                backgroundColor: getVar('--pc-bg-tertiary'),
-              }} />
-            </div>
-
-            {/* Valid till */}
-            <div style={{ ...pcStyles.flex, ...pcStyles.itemsCenter }}>
-              <div style={{ 
-                height: '1rem', 
-                width: '6rem', 
-                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', 
-                borderRadius: getVar('--pc-border-radius-md'), 
-                backgroundColor: getVar('--pc-bg-tertiary'),
-              }} />
-            </div>
-
-            {/* Method */}
-            <div style={{ ...pcStyles.flex, ...pcStyles.itemsCenter }}>
-              <div style={{ 
-                height: '1rem', 
-                width: '4rem', 
-                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', 
-                borderRadius: getVar('--pc-border-radius-md'), 
-                backgroundColor: getVar('--pc-bg-tertiary'),
-              }} />
-            </div>
-
-            {/* Action */}
-            <div style={{ ...pcStyles.flex, ...pcStyles.itemsCenter }}>
-              <div style={{ 
-                height: '1.5rem', 
-                width: '4rem', 
-                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', 
-                borderRadius: getVar('--pc-border-radius-md'), 
-                backgroundColor: getVar('--pc-bg-tertiary'),
-              }} />
-            </div>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};

package/src/RedactoPrivacyCenter/components/DataRequest/CorrectionDataSection.tsx

@@ -1,189 +0,0 @@
-import { PCCheckbox, PCInput } from '../../ui';
-import { pcStyles } from '../../styles/pcStyles';
-import type { DataElement } from '../../lib/types';
-import { useTranslation } from 'react-i18next';
-
-const getVar = (varName: string): string => `var(${varName})`;
-
-export default function CorrectionDataSection({
-  dataElements,
-  selected,
-  setSelected,
-  correctionValues,
-  setCorrectionValues,
-  isTranslating = false,
-}: {
-  dataElements: DataElement[];
-  selected: string[];
-  setSelected: (values: string[]) => void;
-  correctionValues: Record<string, { current: string; updated: string }>;
-  setCorrectionValues: (
-    values: Record<string, { current: string; updated: string }>
-  ) => void;
-  isTranslating?: boolean;
-}) {
-  const { t } = useTranslation();
-
-  const handleSelectAll = (checked: boolean) => {
-    setSelected(checked ? dataElements.map((el) => el.name) : []);
-  };
-
-  const handleToggle = (name: string, checked: boolean) => {
-    setSelected(
-      checked ? [...selected, name] : selected.filter((n) => n !== name)
-    );
-  };
-
-  const getElementByName = (name: string) =>
-    dataElements.find((el) => el.name === name);
-
-  if (isTranslating) {
-    return (
-      <div>
-        <div style={{ marginBottom: '0.375rem', paddingLeft: pcStyles.pxMd.paddingLeft, paddingRight: pcStyles.pxMd.paddingRight }}>
-          <div style={{ height: '1rem', width: '10rem', animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', borderRadius: pcStyles.borderRadiusMd, backgroundColor: getVar('--pc-bg-tertiary'), marginBottom: '0.375rem' }}></div>
-          <div style={{ height: '1rem', width: '6rem', animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', borderRadius: pcStyles.borderRadiusMd, backgroundColor: getVar('--pc-bg-tertiary'), marginBottom: '0.5rem' }}></div>
-        </div>
-        <div style={{
-          backgroundColor: getVar('--pc-bg-secondary'),
-          borderRadius: pcStyles.borderRadiusMd,
-          padding: getVar('--pc-spacing-sm'),
-          border: `1px solid ${getVar('--pc-border-color')}`,
-        }}>
-          {[1, 2, 3, 4].map((skeletonIndex) => (
-            <div key={skeletonIndex} style={{ marginBottom: skeletonIndex < 4 ? getVar('--pc-spacing-xs') : 0, ...pcStyles.flex, ...pcStyles.itemsCenter, ...pcStyles.gapSm }}>
-              <div style={{ height: '1rem', width: '1rem', animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', borderRadius: pcStyles.borderRadiusMd, backgroundColor: getVar('--pc-bg-tertiary') }}></div>
-              <div style={{ height: '1rem', width: '8rem', animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', borderRadius: pcStyles.borderRadiusMd, backgroundColor: getVar('--pc-bg-tertiary') }}></div>
-            </div>
-          ))}
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <div style={{ ...pcStyles.flex, ...pcStyles.flexCol, gap: getVar('--pc-spacing-xs') }}>
-        <p style={{
-          margin: 0,
-          fontSize: pcStyles.textXs.fontSize,
-          color: getVar('--pc-text-secondary'),
-        }}>
-          {t('selectFieldsToUpdate')}
-        </p>
-        <div style={{
-          backgroundColor: getVar('--pc-bg-secondary'),
-          borderRadius: pcStyles.borderRadiusMd,
-          padding: getVar('--pc-spacing-sm'),
-          border: `1px solid ${getVar('--pc-border-color')}`,
-        }}>
-          <PCCheckbox
-            label={t('selectAll')}
-            size="sm"
-            checked={
-              dataElements.length > 0 && selected.length === dataElements.length
-            }
-            onChange={(e) => handleSelectAll(e.target.checked)}
-            labelClassName="text-sm font-medium"
-            style={{ marginBottom: getVar('--pc-spacing-xl') }}
-          />
-          <div style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
-            gap: getVar('--pc-spacing-md'),
-          }}>
-            {dataElements.map((element) => (
-              <PCCheckbox
-                key={element.uuid}
-                label={element.name}
-                size="sm"
-                checked={selected.includes(element.name)}
-                onChange={(e) => handleToggle(element.name, e.target.checked)}
-                labelClassName="text-sm capitalize"
-              />
-            ))}
-          </div>
-        </div>
-      </div>
-      {selected.length > 0 && (
-        <div style={{
-          marginTop: getVar('--pc-spacing-md'),
-          paddingTop: getVar('--pc-spacing-md'),
-          borderTop: `1px solid ${getVar('--pc-border-color')}`,
-        }}>
-          <p style={{
-            marginBottom: getVar('--pc-spacing-sm'),
-            fontSize: pcStyles.textSm.fontSize,
-            fontWeight: pcStyles.fontWeightMedium.fontWeight,
-            color: getVar('--pc-text-primary'),
-          }}>
-            <span style={{ color: getVar('--pc-error') }}>*</span>{' '}
-            {t('enterCorrectValue')}
-          </p>
-          <div style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(1, 1fr)',
-            gap: getVar('--pc-spacing-sm'),
-          }}>
-            {selected.map((name) => {
-              const field = getElementByName(name);
-              return (
-                <div key={name} style={{
-                  padding: getVar('--pc-spacing-sm'),
-                  backgroundColor: getVar('--pc-bg-secondary'),
-                  borderRadius: pcStyles.borderRadiusSm,
-                }}>
-                  <label style={{
-                    marginBottom: getVar('--pc-spacing-xs'),
-                    display: 'block',
-                    fontSize: pcStyles.textSm.fontSize,
-                    fontWeight: pcStyles.fontWeightMedium.fontWeight,
-                    color: getVar('--pc-text-primary'),
-                  }}>
-                    {field?.name}
-                  </label>
-                  <div style={{
-                    display: 'grid',
-                    gridTemplateColumns: 'repeat(1, 1fr)',
-                    gap: getVar('--pc-spacing-xs'),
-                  }}>
-                    <PCInput
-                      placeholder={t('currentValuePlaceholder')}
-                      size="sm"
-                      required
-                      value={correctionValues[name]?.current || ''}
-                      onChange={(e) =>
-                        setCorrectionValues({
-                          ...correctionValues,
-                          [name]: {
-                            ...correctionValues[name],
-                            current: e.target.value,
-                          },
-                        })
-                      }
-                    />
-                    <PCInput
-                      placeholder={t('updatedValuePlaceholder')}
-                      size="sm"
-                      required
-                      value={correctionValues[name]?.updated || ''}
-                      onChange={(e) =>
-                        setCorrectionValues({
-                          ...correctionValues,
-                          [name]: {
-                            ...correctionValues[name],
-                            updated: e.target.value,
-                          },
-                        })
-                      }
-                    />
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      )}
-    </>
-  );
-}

package/src/RedactoPrivacyCenter/components/DataRequest/GrievanceDataSection.tsx

@@ -1,118 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { PCCheckbox } from '../../ui';
-import { pcStyles } from '../../styles/pcStyles';
-import type { GrievanceDataSectionProps } from '../../lib/types';
-
-const getVar = (varName: string): string => `var(${varName})`;
-
-export default function GrievanceDataSection({
-  grievanceOptions,
-  selectedGrievances,
-  setSelectedGrievances,
-  isTranslating = false,
-}: GrievanceDataSectionProps & { isTranslating?: boolean }) {
-  const { t } = useTranslation();
-
-  // Map grievance values to translation keys
-  const getGrievanceTranslationKey = (value: string): string => {
-    const mapping: Record<string, string> = {
-      'consent_violation': 'consentViolation',
-      'unlawful_processing': 'unlawfulProcessing',
-      'data_breach': 'dataBreach',
-    };
-    return mapping[value] || value;
-  };
-
-  const handleSelectAll = (checked: boolean) => {
-    const updated: Record<string, boolean> = {};
-    grievanceOptions.forEach((opt) => {
-      updated[opt.value] = checked;
-    });
-    setSelectedGrievances(updated);
-  };
-
-  const handleGrievanceChange = (value: string, checked: boolean) => {
-    setSelectedGrievances((prev) => ({
-      ...prev,
-      [value]: checked,
-    }));
-  };
-
-  const isAllSelected =
-    Object.keys(selectedGrievances).length > 0 &&
-    Object.values(selectedGrievances).every(Boolean);
-
-  if (isTranslating) {
-    return (
-      <div style={{ ...pcStyles.flex, ...pcStyles.flexCol, gap: getVar('--pc-spacing-sm') }}>
-        <div style={{ marginBottom: '0.375rem' }}>
-          <div style={{ height: '1rem', width: '8rem', animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', borderRadius: pcStyles.borderRadiusMd, backgroundColor: getVar('--pc-bg-tertiary') }}></div>
-        </div>
-        <div style={{
-          backgroundColor: getVar('--pc-bg-secondary'),
-          borderRadius: pcStyles.borderRadiusMd,
-          padding: getVar('--pc-spacing-sm'),
-          border: `1px solid ${getVar('--pc-border-color')}`,
-        }}>
-          {[1, 2, 3].map((skeletonIndex) => (
-            <div key={skeletonIndex} style={{ marginBottom: skeletonIndex < 3 ? getVar('--pc-spacing-xs') : 0, ...pcStyles.flex, ...pcStyles.itemsCenter, ...pcStyles.gapSm }}>
-              <div style={{ height: '1rem', width: '1rem', animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', borderRadius: pcStyles.borderRadiusMd, backgroundColor: getVar('--pc-bg-tertiary') }}></div>
-              <div style={{ height: '1rem', width: '10rem', animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', borderRadius: pcStyles.borderRadiusMd, backgroundColor: getVar('--pc-bg-tertiary') }}></div>
-            </div>
-          ))}
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div style={{ ...pcStyles.flex, ...pcStyles.flexCol, gap: getVar('--pc-spacing-xs') }}>
-      <p style={{
-        margin: 0,
-        fontSize: pcStyles.textXs.fontSize,
-        color: getVar('--pc-text-secondary'),
-      }}>
-        {t('selectGrievance')}
-      </p>
-      <div style={{
-        backgroundColor: getVar('--pc-bg-secondary'),
-        borderRadius: pcStyles.borderRadiusMd,
-        padding: getVar('--pc-spacing-sm'),
-        border: `1px solid ${getVar('--pc-border-color')}`,
-      }}>
-        <PCCheckbox
-          label={t('selectAll')}
-          size="sm"
-          labelClassName="text-sm font-medium"
-          style={{ marginBottom: getVar('--pc-spacing-sm') }}
-          checked={isAllSelected}
-          onChange={(e) => handleSelectAll(e.target.checked)}
-        />
-        <div style={{
-          display: 'flex',
-          flexDirection: 'column',
-          gap: getVar('--pc-spacing-xs'),
-        }}>
-          {grievanceOptions.map((option) => {
-            // Translate the label using i18next based on the value
-            const translationKey = getGrievanceTranslationKey(option.value);
-            const translatedLabel = t(translationKey);
-
-            return (
-              <PCCheckbox
-                key={option.value}
-                label={translatedLabel}
-                size="sm"
-                labelClassName="text-sm capitalize"
-                checked={selectedGrievances[option.value]}
-                onChange={(e) =>
-                  handleGrievanceChange(option.value, e.target.checked)
-                }
-              />
-            );
-          })}
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/RedactoPrivacyCenter/components/DataRequest/NominationDataSection.tsx

@@ -1,66 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { PCInput } from '../../ui';
-import { pcStyles } from '../../styles/pcStyles';
-import type { NominationDataSectionProps } from '../../lib/types';
-
-const getVar = (varName: string): string => `var(${varName})`;
-
-export default function NominationDataSection({
-  nominationData,
-  setNominationData,
-  isTranslating = false,
-}: NominationDataSectionProps) {
-  const { t } = useTranslation();
-
-  if (isTranslating) {
-    return (
-      <div style={{ ...pcStyles.flex, ...pcStyles.flexCol, gap: getVar('--pc-spacing-sm') }}>
-        {[1, 2].map((skeletonIndex) => (
-          <div key={skeletonIndex} style={{ ...pcStyles.flex, ...pcStyles.flexCol, gap: getVar('--pc-spacing-xs') }}>
-            <div style={{ height: '1rem', width: '8rem', animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', borderRadius: pcStyles.borderRadiusMd, backgroundColor: getVar('--pc-bg-tertiary') }}></div>
-            <div style={{ height: '2.25rem', width: '100%', animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', borderRadius: pcStyles.borderRadiusMd, backgroundColor: getVar('--pc-bg-tertiary') }}></div>
-          </div>
-        ))}
-      </div>
-    );
-  }
-
-  return (
-    <div style={{ ...pcStyles.flex, ...pcStyles.flexCol, gap: getVar('--pc-spacing-sm') }}>
-      <p style={{
-        margin: 0,
-        fontSize: pcStyles.textXs.fontSize,
-        color: getVar('--pc-text-secondary'),
-      }}>
-        {t('enterNomineeDetails')}
-      </p>
-      <PCInput
-        label={
-          <span>
-            {t('nomineeEmail')}
-            <span style={{ color: getVar('--pc-error') }}>*</span>
-          </span>
-        }
-        placeholder={t('nomineeEmailPlaceholder')}
-        value={nominationData.nominee_email ?? ''}
-        onChange={(e) =>
-          setNominationData((prev) => ({
-            ...prev,
-            nominee_email: e.target.value,
-          }))
-        }
-      />
-      <PCInput
-        label={t('nomineeMobile')}
-        placeholder={t('nomineeMobilePlaceholder')}
-        value={nominationData.nominee_mobile ?? ''}
-        onChange={(e) =>
-          setNominationData((prev) => ({
-            ...prev,
-            nominee_mobile: e.target.value,
-          }))
-        }
-      />
-    </div>
-  );
-}