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

   1 import useSettingsLink from '@proton/components/components/link/useSettingsLink';
   2 import useUpsellConfig from '@proton/components/components/upsell/useUpsellConfig';
   3 import { SUBSCRIPTION_STEPS } from '@proton/components/containers/payments/subscription/constants';
   4 import { APPS, APP_UPSELL_REF_PATH, MAIL_UPSELL_PATHS, UPSELL_COMPONENT } from '@proton/shared/lib/constants';
   5 import { getUpsellRef } from '@proton/shared/lib/helpers/upsell';
   6
   7 import type { OfferLayoutProps } from '../../interface';
   8 import LayoutPrivacy from './layout/LayoutPrivacy';
   9 import LayoutProductivity from './layout/LayoutProductivity';
  10
  11 // We don't want the value to change on each render
  12 const versionToDisplay = Math.random() > 0.5;
  13
  14 const Layout = (props: OfferLayoutProps) => {
  15     const { onCloseModal } = props;
  16     const goToSettings = useSettingsLink();
  17
  18     const upsellRef = getUpsellRef({
  19         app: APP_UPSELL_REF_PATH.MAIL_UPSELL_REF_PATH,
  20         component: UPSELL_COMPONENT.BANNER,
  21         feature: versionToDisplay
  22             ? MAIL_UPSELL_PATHS.SUBSCRIPTION_REMINDER_PRIVACY
  23             : MAIL_UPSELL_PATHS.SUBSCRIPTION_REMINDER_PRODUCTIVITY,
  24     });
  25
  26     const { upgradePath, onUpgrade } = useUpsellConfig({ upsellRef, step: SUBSCRIPTION_STEPS.PLAN_SELECTION });
  27     const onUpgradeClick = () => {
  28         if (onUpgrade) {
  29             onCloseModal();
  30             onUpgrade();
  31         } else {
  32             goToSettings(upgradePath, APPS.PROTONMAIL);
  33         }
  34     };
  35
  36     return versionToDisplay ? (
  37         <LayoutPrivacy onClick={onUpgradeClick} onClose={onCloseModal} />
  38     ) : (
  39         <LayoutProductivity onClick={onUpgradeClick} onClose={onCloseModal} />
  40     );
  41 };
  42
  43 export default Layout;