packages/pass/components/Form/Field/Control/ExtraFieldsControl.tsx

   1 import { type FC, useCallback } from 'react';
   2 import { useSelector } from 'react-redux';
   3
   4 import { getExtraFieldOption } from '@proton/pass/components/Form/Field/ExtraFieldGroup/ExtraField';
   5 import { FieldsetCluster } from '@proton/pass/components/Form/Field/Layout/FieldsetCluster';
   6 import { TextAreaReadonly } from '@proton/pass/components/Form/legacy/TextAreaReadonly';
   7 import { UpsellRef } from '@proton/pass/constants';
   8 import { selectExtraFieldLimits } from '@proton/pass/store/selectors';
   9 import type { UnsafeItemExtraField } from '@proton/pass/types';
  10 import { isEmptyString } from '@proton/pass/utils/string/is-empty-string';
  11
  12 import { OTPValueControl } from './OTPValueControl';
  13 import { UpgradeControl } from './UpgradeControl';
  14 import { ValueControl } from './ValueControl';
  15
  16 type ExtraFieldsControlProps = {
  17     extraFields: UnsafeItemExtraField[];
  18     itemId: string;
  19     shareId: string;
  20 };
  21
  22 export const ExtraFieldsControl: FC<ExtraFieldsControlProps> = ({ extraFields, itemId, shareId }) => {
  23     const { needsUpgrade } = useSelector(selectExtraFieldLimits);
  24
  25     const getControlByType = useCallback(
  26         ({ fieldName, type, data }: UnsafeItemExtraField, index: number) => {
  27             const { icon } = getExtraFieldOption(type);
  28             const key = `${index}-${fieldName}`;
  29
  30             if (needsUpgrade) {
  31                 return (
  32                     <UpgradeControl icon={icon} key={key} label={fieldName} upsellRef={UpsellRef.LIMIT_EXTRA_FIELD} />
  33                 );
  34             }
  35
  36             switch (type) {
  37                 case 'totp':
  38                     return isEmptyString(data.totpUri) ? (
  39                         <ValueControl icon={icon} key={key} label={fieldName} value={undefined} />
  40                     ) : (
  41                         <OTPValueControl key={key} label={fieldName} payload={{ totpUri: data.totpUri, type: 'uri' }} />
  42                     );
  43                 case 'hidden':
  44                 case 'text':
  45                     return (
  46                         <ValueControl
  47                             clickToCopy
  48                             as={TextAreaReadonly}
  49                             key={key}
  50                             hidden={type === 'hidden'}
  51                             icon={icon}
  52                             label={fieldName}
  53                             value={data.content}
  54                         />
  55                     );
  56             }
  57         },
  58         [itemId, shareId]
  59     );
  60
  61     return (
  62         <FieldsetCluster mode="read" as="div">
  63             {extraFields.map((extraField, index) => getControlByType(extraField, index))}
  64         </FieldsetCluster>
  65     );
  66 };