packages/components/containers/filters/ActionsFilterToolbar.tsx

   1 import { c } from 'ttag';
   2
   3 import { useUser } from '@proton/account/user/hooks';
   4 import { Button } from '@proton/atoms';
   5 import useModalState from '@proton/components/components/modalTwo/useModalState';
   6 import MailUpsellButton from '@proton/components/components/upsell/MailUpsellButton';
   7 import FiltersUpsellModal from '@proton/components/components/upsell/modal/types/FiltersUpsellModal';
   8 import { useFilters } from '@proton/mail/filters/hooks';
   9 import { hasReachedFiltersLimit } from '@proton/shared/lib/helpers/filters';
  10
  11 import FilterModal from './modal/FilterModal';
  12 import AdvancedFilterModal from './modal/advanced/AdvancedFilterModal';
  13
  14 function ActionsFilterToolbar() {
  15     const [user] = useUser();
  16     const [filterModalProps, setFilterModalOpen] = useModalState();
  17     const [advancedFilterModalProps, setAdvancedFilterModalOpen] = useModalState();
  18     const [filters = []] = useFilters();
  19
  20     const canCreateFilters = !hasReachedFiltersLimit(user, filters);
  21
  22     const [upsellModalProps, handleUpsellModalDisplay, renderUpsellModal] = useModalState();
  23
  24     return (
  25         <>
  26             <div className="mb-4">
  27                 {canCreateFilters ? (
  28                     <>
  29                         <Button color="norm" onClick={() => setFilterModalOpen(true)} className="mb-2 md:mb-0 mr-4">
  30                             {c('Action').t`Add filter`}
  31                         </Button>
  32                         <Button
  33                             shape="outline"
  34                             onClick={() => setAdvancedFilterModalOpen(true)}
  35                             className="mb-2 md:mb-0"
  36                         >
  37                             {c('Action').t`Add sieve filter`}
  38                         </Button>
  39                     </>
  40                 ) : (
  41                     <MailUpsellButton
  42                         onClick={() => handleUpsellModalDisplay(true)}
  43                         text={c('Action').t`Get more filters`}
  44                     />
  45                 )}
  46             </div>
  47             <FilterModal {...filterModalProps} />
  48             <AdvancedFilterModal {...advancedFilterModalProps} />
  49
  50             {renderUpsellModal && <FiltersUpsellModal modalProps={upsellModalProps} isSettings />}
  51         </>
  52     );
  53 }
  54
  55 export default ActionsFilterToolbar;