1 import { c } from 'ttag';
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';
11 import FilterModal from './modal/FilterModal';
12 import AdvancedFilterModal from './modal/advanced/AdvancedFilterModal';
14 function ActionsFilterToolbar() {
15 const [user] = useUser();
16 const [filterModalProps, setFilterModalOpen] = useModalState();
17 const [advancedFilterModalProps, setAdvancedFilterModalOpen] = useModalState();
18 const [filters = []] = useFilters();
20 const canCreateFilters = !hasReachedFiltersLimit(user, filters);
22 const [upsellModalProps, handleUpsellModalDisplay, renderUpsellModal] = useModalState();
26 <div className="mb-4">
29 <Button color="norm" onClick={() => setFilterModalOpen(true)} className="mb-2 md:mb-0 mr-4">
30 {c('Action').t`Add filter`}
34 onClick={() => setAdvancedFilterModalOpen(true)}
35 className="mb-2 md:mb-0"
37 {c('Action').t`Add sieve filter`}
42 onClick={() => handleUpsellModalDisplay(true)}
43 text={c('Action').t`Get more filters`}
47 <FilterModal {...filterModalProps} />
48 <AdvancedFilterModal {...advancedFilterModalProps} />
50 {renderUpsellModal && <FiltersUpsellModal modalProps={upsellModalProps} isSettings />}
55 export default ActionsFilterToolbar;