packages/components/containers/forward/ForwardCondition.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import Icon from '@proton/components/components/icon/Icon';
   5 import Option from '@proton/components/components/option/Option';
   6 import SelectTwo from '@proton/components/components/selectTwo/SelectTwo';
   7 import Tooltip from '@proton/components/components/tooltip/Tooltip';
   8
   9 import { COMPARATORS, TYPES, getComparatorLabels, getConditionTypeLabels } from '../filters/constants';
  10 import type { Condition, ConditionComparator } from '../filters/interfaces';
  11 import { ConditionType, FilterStatement } from '../filters/interfaces';
  12 import AttachmentsCondition from './AttachmentsCondition';
  13 import InputCondition from './InputCondition';
  14
  15 interface Props {
  16     condition: Condition;
  17     index: number;
  18     displayDelete: boolean;
  19     onDelete: () => void;
  20     onUpdate: (condition: Condition) => void;
  21     statement: FilterStatement;
  22     onChangeStatement: (statement: FilterStatement) => void;
  23     validator?: (validations: string[]) => string;
  24 }
  25
  26 const ForwardCondition = ({
  27     index,
  28     displayDelete,
  29     condition,
  30     onDelete,
  31     onUpdate,
  32     onChangeStatement,
  33     validator,
  34     statement,
  35 }: Props) => {
  36     const isFirst = index === 0;
  37     const typeOptions = TYPES.filter(
  38         ({ value }) => value !== ConditionType.RECIPIENT && value !== ConditionType.SELECT
  39     ).map(({ value }) => {
  40         return { text: getConditionTypeLabels(value), value };
  41     });
  42     const comparatorOptions = COMPARATORS.map(({ value }) => ({
  43         text: getComparatorLabels(value),
  44         value,
  45     }));
  46     return (
  47         <>
  48             <span id={`condition_${index}`} className="sr-only">{c('email_forwarding_2023: Placeholder')
  49                 .t`Condition:`}</span>
  50             {isFirst ? (
  51                 <label className="text-bold mb-0.5" id={`ifor_${index}`} aria-describedby={`condition_${index}`}>{c(
  52                     'Condition label'
  53                 ).t`If`}</label>
  54             ) : (
  55                 <div className="inline-block text-bold mb-0.5">
  56                     <SelectTwo
  57                         className="w-auto"
  58                         unstyled
  59                         value={statement}
  60                         onChange={({ value }) => onChangeStatement(value as FilterStatement)}
  61                         id={`ifor_${index}`}
  62                         aria-describedby={`condition_${index}`}
  63                         data-testid={`forward:condition:ifor-select_${index}`}
  64                     >
  65                         <Option value={FilterStatement.ALL} title={c('email_forwarding_2023: Label').t`And`} />
  66                         <Option value={FilterStatement.ANY} title={c('email_forwarding_2023: Label').t`Or`} />
  67                     </SelectTwo>
  68                 </div>
  69             )}
  70             <div className="flex flex-nowrap gap-2">
  71                 <div className="flex-1 flex gap-4">
  72                     <div className="flex-1 flex flex-wrap flex-column md:flex-row gap-4">
  73                         <div className="md:flex-1">
  74                             <SelectTwo
  75                                 value={condition.type}
  76                                 onChange={({ value }) => onUpdate({ ...condition, type: value as ConditionType })}
  77                                 aria-describedby={`condition_${index} ifor_${index}`}
  78                                 id={`conditiontype_${index}`}
  79                             >
  80                                 {typeOptions.map(({ text, value }) => (
  81                                     <Option key={value} value={value} title={text} />
  82                                 ))}
  83                             </SelectTwo>
  84                         </div>
  85                         <div className="md:flex-1">
  86                             {[ConditionType.SUBJECT, ConditionType.SENDER, ConditionType.RECIPIENT].includes(
  87                                 condition.type
  88                             ) && (
  89                                 <SelectTwo
  90                                     value={condition.comparator}
  91                                     onChange={({ value }) => {
  92                                         onUpdate({
  93                                             ...condition,
  94                                             comparator: value as ConditionComparator,
  95                                         });
  96                                     }}
  97                                     aria-describedby={`condition_${index} ifor_${index} conditiontype_${index}`}
  98                                     id={`conditioncomparator_${index}`}
  99                                 >
 100                                     {comparatorOptions.map(({ text, value }) => (
 101                                         <Option key={value} value={value} title={text} />
 102                                     ))}
 103                                 </SelectTwo>
 104                             )}
 105                         </div>
 106                     </div>
 107
 108                     {condition.type === ConditionType.ATTACHMENTS ? (
 109                         <AttachmentsCondition index={index} condition={condition} onUpdate={onUpdate} />
 110                     ) : (
 111                         <InputCondition index={index} validator={validator} condition={condition} onUpdate={onUpdate} />
 112                     )}
 113                 </div>
 114
 115                 {displayDelete && (
 116                     <div className="shrink-0 w-custom" style={{ '--w-custom': '3em' }}>
 117                         <Tooltip title={c('email_forwarding_2023: Action').t`Delete this condition`}>
 118                             <Button
 119                                 data-testid={`forward:condition:delete-button_${index}`}
 120                                 className="ml-auto flex"
 121                                 shape="ghost"
 122                                 onClick={() => onDelete()}
 123                                 icon
 124                             >
 125                                 <Icon name="trash" alt={c('email_forwarding_2023: Action').t`Delete this condition`} />
 126                             </Button>
 127                         </Tooltip>
 128                     </div>
 129                 )}
 130             </div>
 131         </>
 132     );
 133 };
 134
 135 export default ForwardCondition;