packages/components/containers/filters/FilterItemRow.tsx

   1 import type { ChangeEvent } from 'react';
   2 import { useState } from 'react';
   3
   4 import { c } from 'ttag';
   5
   6 import { useUser } from '@proton/account/user/hooks';
   7 import type { DropdownActionProps } from '@proton/components/components/dropdown/DropdownActions';
   8 import DropdownActions from '@proton/components/components/dropdown/DropdownActions';
   9 import useModalState from '@proton/components/components/modalTwo/useModalState';
  10 import OrderableTableRow from '@proton/components/components/orderableTable/OrderableTableRow';
  11 import Toggle from '@proton/components/components/toggle/Toggle';
  12 import FiltersUpsellModal from '@proton/components/components/upsell/modal/types/FiltersUpsellModal';
  13 import useApi from '@proton/components/hooks/useApi';
  14 import useEventManager from '@proton/components/hooks/useEventManager';
  15 import useNotifications from '@proton/components/hooks/useNotifications';
  16 import { useLoading } from '@proton/hooks';
  17 import { deleteFilter, toggleEnable } from '@proton/shared/lib/api/filters';
  18 import { FILTER_STATUS } from '@proton/shared/lib/constants';
  19 import { hasReachedFiltersLimit } from '@proton/shared/lib/helpers/filters';
  20
  21 import FilterWarningModal from './FilterWarningModal';
  22 import type { Filter } from './interfaces';
  23 import DeleteFilterModal from './modal/DeleteFilterModal';
  24 import FilterModal from './modal/FilterModal';
  25 import AdvancedFilterModal from './modal/advanced/AdvancedFilterModal';
  26 import { isSieve } from './utils';
  27
  28 interface Props {
  29     filter: Filter;
  30     filters: Filter[];
  31     index: number;
  32     onApplyFilter: (filterID: string) => void;
  33 }
  34
  35 function FilterItemRow({ filter, filters, index, onApplyFilter, ...rest }: Props) {
  36     const api = useApi();
  37     const [user] = useUser();
  38     const [loading, withLoading] = useLoading();
  39     const { call } = useEventManager();
  40     const { createNotification } = useNotifications();
  41
  42     const [applyFilterModalOpen, setApplyFilterModalOpen] = useState(false);
  43     const [filterModalProps, setFilterModalOpen, renderFilterModal] = useModalState();
  44     const [advancedFilterModalProps, setAdvancedFilterModalOpen, renderAdvancedFilterModal] = useModalState();
  45     const [deleteFilterModalProps, setDeleteFilterModalOpen, renderDeleteFilterModal] = useModalState();
  46
  47     const { ID, Name, Status } = filter;
  48
  49     const [upsellModalProps, handleUpsellModalDisplay, renderUpsellModal] = useModalState();
  50
  51     const handleChangeStatus = async ({ target }: ChangeEvent<HTMLInputElement>) => {
  52         await api(toggleEnable(ID, target.checked));
  53         await call();
  54         createNotification({
  55             text: c('Success notification').t`Status updated`,
  56         });
  57     };
  58
  59     const handleRemove = async () => {
  60         await api(deleteFilter(filter.ID));
  61         await call();
  62         createNotification({ text: c('Success notification').t`Filter removed` });
  63     };
  64
  65     const handleEdit = (type?: 'sieve') => () => {
  66         if (type === 'sieve') {
  67             setAdvancedFilterModalOpen(true);
  68         } else {
  69             setFilterModalOpen(true);
  70         }
  71     };
  72
  73     const editAction: DropdownActionProps = {
  74         text: c('Action').t`Edit`,
  75         onClick: handleEdit(),
  76     };
  77     const editSieveAction: DropdownActionProps = {
  78         text: c('Action').t`Edit sieve`,
  79         onClick: handleEdit('sieve'),
  80     };
  81     const applyFilterAction: DropdownActionProps = {
  82         text: c('Action').t`Apply to existing messages`,
  83         onClick: () => setApplyFilterModalOpen(true),
  84     };
  85
  86     const deleteFilterAction: DropdownActionProps = {
  87         text: c('Action').t`Delete`,
  88         actionType: 'delete',
  89         onClick: () => setDeleteFilterModalOpen(true),
  90     };
  91
  92     const list: DropdownActionProps[] = isSieve(filter)
  93         ? [editSieveAction, applyFilterAction, deleteFilterAction]
  94         : [editAction, applyFilterAction, editSieveAction, deleteFilterAction];
  95
  96     const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
  97         if (Status === FILTER_STATUS.DISABLED && hasReachedFiltersLimit(user, filters)) {
  98             handleUpsellModalDisplay(true);
  99         } else {
 100             withLoading(handleChangeStatus(e));
 101         }
 102     };
 103
 104     return (
 105         <>
 106             <OrderableTableRow
 107                 index={index}
 108                 cells={[
 109                     <div key="name" className="text-ellipsis max-w-full" title={Name}>
 110                         <Toggle
 111                             id={`item-${ID}`}
 112                             loading={loading}
 113                             checked={Status === FILTER_STATUS.ENABLED}
 114                             onChange={handleChange}
 115                             className="mr-2 align-bottom inline-flex"
 116                         />
 117                         {Name}
 118                     </div>,
 119                     <DropdownActions key="dropdown" size="small" list={list} />,
 120                 ]}
 121                 {...rest}
 122             />
 123             {renderFilterModal && <FilterModal {...filterModalProps} filter={filter} />}
 124             {renderAdvancedFilterModal && <AdvancedFilterModal {...advancedFilterModalProps} filter={filter} />}
 125             {renderDeleteFilterModal && (
 126                 <DeleteFilterModal {...deleteFilterModalProps} filterName={filter.Name} handleDelete={handleRemove} />
 127             )}
 128             <FilterWarningModal
 129                 open={applyFilterModalOpen}
 130                 onClose={() => {
 131                     setApplyFilterModalOpen(false);
 132                 }}
 133                 onConfirm={() => {
 134                     setApplyFilterModalOpen(false);
 135                     onApplyFilter(filter.ID);
 136                 }}
 137             />
 138             {renderUpsellModal && <FiltersUpsellModal modalProps={upsellModalProps} isSettings />}
 139         </>
 140     );
 141 }
 142
 143 export default FilterItemRow;