packages/components/containers/account/FamilyPlanSection.tsx

   1 import { c } from 'ttag';
   2
   3 import { useAddresses } from '@proton/account/addresses/hooks';
   4 import { useMember } from '@proton/account/member/hook';
   5 import { useOrganization } from '@proton/account/organization/hooks';
   6 import { useUser } from '@proton/account/user/hooks';
   7 import { Button } from '@proton/atoms';
   8 import { useCalendars } from '@proton/calendar/calendars/hooks';
   9 import Loader from '@proton/components/components/loader/Loader';
  10 import useModalState from '@proton/components/components/modalTwo/useModalState';
  11 import { PASS_SHORT_APP_NAME } from '@proton/shared/lib/constants';
  12 import {
  13     isOrganizationDuo,
  14     isOrganizationFamily,
  15     isOrganizationPassFamily,
  16 } from '@proton/shared/lib/organization/helper';
  17
  18 import { UsagePanel } from '../payments/subscription/panels';
  19 import LeaveFamilyModal from './LeaveFamilyModal';
  20 import SettingsParagraph from './SettingsParagraph';
  21
  22 const FamilyPlanSection = () => {
  23     const [organization, organisationLoading] = useOrganization();
  24     const [user, userLoading] = useUser();
  25     const [calendars, calendarsLoading] = useCalendars();
  26     const [addresses, addressLoading] = useAddresses();
  27     const [, memberLoading] = useMember();
  28
  29     const [leaveFamilyModal, setLeaveFamilyModal, renderLeaveFamilyModal] = useModalState();
  30
  31     const isLoading =
  32         !organization || organisationLoading || userLoading || calendarsLoading || addressLoading || memberLoading;
  33
  34     const isFamilyPlan = isOrganizationFamily(organization);
  35     const isPassFamilyPlan = isOrganizationPassFamily(organization);
  36     const isDuoPlan = isOrganizationDuo(organization);
  37
  38     const content = (() => {
  39         if (isFamilyPlan) {
  40             return c('familyOffer_2023:Family plan').t`Leave Family plan`;
  41         }
  42         if (isPassFamilyPlan) {
  43             return c('familyOffer_2023:Family plan').t`Leave ${PASS_SHORT_APP_NAME} Family plan`;
  44         }
  45         if (isDuoPlan) {
  46             return c('familyOffer_2023:Family plan').t`Leave Duo plan`;
  47         }
  48         return c('familyOffer_2023:Family plan').t`Leave Visionary plan`;
  49     })();
  50
  51     return isLoading ? (
  52         <Loader />
  53     ) : (
  54         <>
  55             <SettingsParagraph>{c('familyOffer_2023:Family plan')
  56                 .t`You are part of ${organization.Name}.`}</SettingsParagraph>
  57             <div className="w-full lg:w-1/2 max-w-custom" style={{ '--max-w-custom': '33em' }}>
  58                 <UsagePanel addresses={addresses} calendars={calendars} organization={organization} user={user}>
  59                     <Button
  60                         shape="ghost"
  61                         color="danger"
  62                         fullWidth
  63                         onClick={() => {
  64                             setLeaveFamilyModal(true);
  65                         }}
  66                     >
  67                         {content}
  68                     </Button>
  69                 </UsagePanel>
  70             </div>
  71             {renderLeaveFamilyModal && <LeaveFamilyModal organisationName={organization.Name} {...leaveFamilyModal} />}
  72         </>
  73     );
  74 };
  75
  76 export default FamilyPlanSection;