packages/components/containers/offers/operations/mailTrial2023/Layout.tsx

   1 import { format, fromUnixTime } from 'date-fns';
   2 import { c } from 'ttag';
   3
   4 import { PLANS, PLAN_NAMES } from '@proton/payments';
   5 import { dateLocale } from '@proton/shared/lib/i18n';
   6
   7 import { useSubscription } from '@proton/account/subscription/hooks';
   8 import OfferFooter from '../../components/shared/OfferFooter';
   9 import OfferHeader from '../../components/shared/OfferHeader';
  10 import OfferLayout from '../../components/shared/OfferLayout';
  11 import OfferLoader from '../../components/shared/OfferLoader';
  12 import OfferTitle from '../../components/shared/OfferTitle';
  13 import Deals from '../../components/shared/deal/Deals';
  14 import hasOffer from '../../helpers/hasOffer';
  15 import type { OfferLayoutProps } from '../../interface';
  16
  17 const Layout = (props: OfferLayoutProps) => {
  18     const [subscription] = useSubscription();
  19     const { PeriodEnd = 0 } = subscription || {};
  20     const textDate = format(fromUnixTime(PeriodEnd), 'PPP', { locale: dateLocale });
  21     const planName = PLAN_NAMES[PLANS.MAIL];
  22
  23     return hasOffer(props) ? (
  24         <OfferLayout {...props}>
  25             <OfferHeader {...props}>
  26                 {/* translator: the full sentence is: Your Mail Plus free trial ends on April 29th */}
  27                 <OfferTitle>{c('Title').t`Your ${planName} free trial ends on ${textDate}`}</OfferTitle>
  28                 <p className="text-center">{c('Info')
  29                     .t`Upgrade now to get premium features, products and storage at a special price`}</p>
  30             </OfferHeader>
  31
  32             <Deals {...props} />
  33
  34             <OfferFooter {...props}>
  35                 <p className="text-sm text-center mb-4 color-weak">{c('specialoffer: Footer')
  36                     .t`This subscription will automatically renew every 2 years at the same rate until it is canceled.`}</p>
  37             </OfferFooter>
  38         </OfferLayout>
  39     ) : (
  40         <OfferLoader />
  41     );
  42 };
  43
  44 export default Layout;