packages/pass/components/Onboarding/FamilyPlanPromo2024.tsx

   1 import { type FC, useEffect, useMemo } from 'react';
   2 import { useSelector } from 'react-redux';
   3
   4 import { c } from 'ttag';
   5
   6 import { Button } from '@proton/atoms';
   7 import { getSimplePriceString } from '@proton/components/components/price/helper';
   8 import img from '@proton/pass/assets/upsell/family-plan-2024.png';
   9 import type { BaseSpotlightMessage } from '@proton/pass/components/Spotlight/SpotlightContent';
  10 import { UpsellRef } from '@proton/pass/constants';
  11 import { useNavigateToUpgrade } from '@proton/pass/hooks/useNavigateToUpgrade';
  12 import { selectUser, selectUserPlan } from '@proton/pass/store/selectors';
  13 import type { MaybeNull } from '@proton/pass/types';
  14 import { pipe } from '@proton/pass/utils/fp/pipe';
  15 import { DEFAULT_CURRENCY } from '@proton/payments';
  16 import { PASS_APP_NAME, PASS_SHORT_APP_NAME } from '@proton/shared/lib/constants';
  17 import { PASS_LAUNCH_OFFER } from '@proton/shared/lib/helpers/subscription';
  18 import noop from '@proton/utils/noop';
  19
  20 import './FamilyPlanPromo2024.scss';
  21
  22 enum FamilyPlanCohort {
  23     EARLY_SUPPORTER = 1,
  24     PASS_PLUS = 2,
  25     FREE = 3,
  26 }
  27
  28 const FamilyPlanUpsellRefs = {
  29     [FamilyPlanCohort.EARLY_SUPPORTER]: UpsellRef.PASS_FAMILY_1LT_299,
  30     [FamilyPlanCohort.PASS_PLUS]: UpsellRef.PASS_FAMILY_PLUS_399,
  31     [FamilyPlanCohort.FREE]: UpsellRef.PASS_FAMILY_FREE_399,
  32 };
  33
  34 export const FamilyPlanPromo2024: FC<BaseSpotlightMessage> = ({ onClose = noop }) => {
  35     const planNameJSX = <strong key="plan-name">{`${PASS_SHORT_APP_NAME} Family`}</strong>;
  36     const userPlan = useSelector(selectUserPlan);
  37     const user = useSelector(selectUser);
  38
  39     const cohort = useMemo<MaybeNull<FamilyPlanCohort>>(() => {
  40         const isPass2023 = userPlan?.InternalName === 'pass2023';
  41         const isFree = userPlan?.InternalName === 'free';
  42         const isPassLaunch = userPlan?.SubscriptionOffer === PASS_LAUNCH_OFFER;
  43
  44         if (isPass2023 && isPassLaunch) return FamilyPlanCohort.EARLY_SUPPORTER;
  45         if (isPass2023) return FamilyPlanCohort.PASS_PLUS;
  46         if (isFree) return FamilyPlanCohort.FREE;
  47
  48         return null;
  49     }, [userPlan]);
  50
  51     const price = getSimplePriceString(
  52         user?.Currency ?? DEFAULT_CURRENCY,
  53         cohort === FamilyPlanCohort.EARLY_SUPPORTER ? 299 : 399
  54     );
  55
  56     const upgrade = useNavigateToUpgrade({
  57         coupon: cohort === FamilyPlanCohort.EARLY_SUPPORTER ? 'PASSEARLYSUPPORTER' : 'PASSFAMILYLAUNCH',
  58         cycle: '12',
  59         offer: true,
  60         plan: 'passfamily2024',
  61         upsellRef: cohort ? FamilyPlanUpsellRefs[cohort] : undefined,
  62         email: user?.Email,
  63     });
  64
  65     useEffect(() => {
  66         /* If the user upgraded in the background */
  67         if (!cohort) onClose();
  68     }, [cohort]);
  69
  70     return (
  71         <>
  72             <div className="flex items-center w-full z-up">
  73                 <div className="flex flex-column text-sm gap-2 w-3/5">
  74                     <h4>{c('FamilyPlanPromo2024').jt`Introducing ${planNameJSX}`}</h4>
  75                     <div>
  76                         <span className="block">
  77                             {c('FamilyPlanPromo2024').t`All premium features. 6 users. 1 easy subscription.`}
  78                         </span>
  79                         <span className="block">
  80                             {cohort === FamilyPlanCohort.EARLY_SUPPORTER
  81                                 ? c('FamilyPlanPromo2024').t`Exclusive offer for ${PASS_APP_NAME} early supporters.`
  82                                 : c('FamilyPlanPromo2024').t`Limited-time offer only.`}
  83                         </span>
  84                     </div>
  85                 </div>
  86
  87                 <div className="flex-1 text-center">
  88                     <Button
  89                         className="button pass-family-plan-banner--btn"
  90                         size="medium"
  91                         type="button"
  92                         onClick={pipe(onClose, upgrade)}
  93                         pill
  94                     >
  95                         {c('FamilyPlanPromo2024').t`Get it for ${price}/month`}
  96                     </Button>
  97                 </div>
  98             </div>
  99             <img src={img} className="pass-family-plan-banner--img" alt="" />
 100         </>
 101     );
 102 };