packages/components/containers/payments/subscription/cancelB2bSubscription/CancelB2bSubscriptionSection.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import useModalState from '@proton/components/components/modalTwo/useModalState';
   5 import SettingsParagraph from '@proton/components/containers/account/SettingsParagraph';
   6 import SettingsSection from '@proton/components/containers/account/SettingsSection';
   7 import { useSubscription } from '@proton/components/hooks';
   8
   9 import CancelB2bSubscriptionModal from './CancelB2bSubscriptionModal';
  10
  11 const CancelB2bSubscriptionSection = () => {
  12     const [subscription, loadingSubscription] = useSubscription();
  13
  14     const [modalProps, setModalOpen, render] = useModalState();
  15
  16     if (!subscription) {
  17         return null;
  18     }
  19
  20     return (
  21         <>
  22             {render && <CancelB2bSubscriptionModal {...modalProps} />}
  23             <SettingsSection>
  24                 <SettingsParagraph>
  25                     {c('Info').t`To cancel your subscription, please reach out to us.`}
  26                 </SettingsParagraph>
  27                 <Button onClick={() => setModalOpen(true)} color="norm" shape="outline" disabled={loadingSubscription}>
  28                     {c('Action').t`Contact us`}
  29                 </Button>
  30             </SettingsSection>
  31         </>
  32     );
  33 };
  34
  35 export default CancelB2bSubscriptionSection;