packages/shared/lib/helpers/upsell.ts

   1 import { PLANS } from '@proton/payments';
   2 import type { APP_NAMES, UPSELL_COMPONENT, UPSELL_FEATURE } from '@proton/shared/lib/constants';
   3 import { APPS, APP_UPSELL_REF_PATH } from '@proton/shared/lib/constants';
   4 import { getPlan } from '@proton/shared/lib/helpers/subscription';
   5 import type { Api, Audience, Subscription, UserModel } from '@proton/shared/lib/interfaces';
   6 import useVariant from '@proton/unleash/useVariant';
   7
   8 import { TelemetryMeasurementGroups, TelemetryUpsellModalsEvents } from '../api/telemetry';
   9 import { sendTelemetryReport } from './metrics';
  10
  11 export const useNewUpsellModalVariant = () => {
  12     const InboxNewUpsellModalsVariant = useVariant('InboxNewUpsellModals');
  13
  14     if (InboxNewUpsellModalsVariant.name === 'old') {
  15         return false;
  16     }
  17
  18     return true;
  19 };
  20
  21 export const enum UPSELL_MODALS {
  22     CLICK = 'CLICK',
  23 }
  24
  25 export const enum UPSELL_MODALS_TYPE {
  26     OLD = 'OLD-MODALS',
  27     NEW = 'NEW-MODALS',
  28 }
  29
  30 export type SourceEventUpsell =
  31     | 'BUTTON_SCHEDULE_SEND'
  32     | 'BUTTON_CONTACT_GROUPS'
  33     | 'BUTTON_SHORT_DOMAIN'
  34     | 'BUTTON_AUTO_DELETE'
  35     | 'BUTTON_MORE_LABELS_FOLDERS'
  36     | 'BUTTON_MORE_ADDRESSES'
  37     | 'BUTTON_CUSTOM_FILTERS'
  38     | 'BUTTON_MAIL_FOOTER'
  39     | 'BUTTON_SNOOZE'
  40     | 'BUTTON_FORWARD_EMAILS'
  41     | 'BUTTON_PASS_ALIASES'
  42     | 'BUTTON_COLOR_PER_EVENT'
  43     | 'BUTTON_SENTINEL'
  44     | 'BUTTON_SCRIBE'
  45     | 'BUTTON_ZOOM'
  46     | 'STATE_ACCOUNT_LOCKED'
  47     | 'BUTTON_DWM';
  48
  49 export const sendRequestUpsellModalReport = ({
  50     api,
  51     action = UPSELL_MODALS.CLICK,
  52     application,
  53     sourceEvent,
  54     upsellModalType,
  55 }: {
  56     api: Api;
  57     action?: UPSELL_MODALS;
  58     application: APP_NAMES;
  59     sourceEvent: SourceEventUpsell;
  60     upsellModalType: UPSELL_MODALS_TYPE;
  61 }) => {
  62     void sendTelemetryReport({
  63         api,
  64         measurementGroup: TelemetryMeasurementGroups.upsellModals,
  65         event: TelemetryUpsellModalsEvents.clickUpsellModals,
  66         dimensions: {
  67             action,
  68             application,
  69             sourceEvent,
  70             upsellModalType,
  71         },
  72     });
  73 };
  74
  75 /**
  76  * Add an upsell ref param to a URL
  77  */
  78 export const addUpsellPath = (link: string, upsellPath?: string) => {
  79     if (!upsellPath) {
  80         return link;
  81     }
  82
  83     const hasParams = link.includes('?');
  84     return hasParams ? `${link}&ref=${upsellPath}` : `${link}?ref=${upsellPath}`;
  85 };
  86
  87 export const getUpgradePath = ({
  88     user,
  89     subscription,
  90     plan,
  91     app,
  92     audience,
  93     target,
  94 }: {
  95     user?: UserModel;
  96     plan?: PLANS;
  97     subscription?: Subscription;
  98     audience?: Audience;
  99     app?: APP_NAMES;
 100     target?: 'compare' | 'checkout';
 101 }) => {
 102     const params = new URLSearchParams();
 103     if (plan) {
 104         params.set('plan', plan);
 105     }
 106     if (audience) {
 107         params.set('audience', audience);
 108     }
 109     if (!user || user.isFree) {
 110         if (app === APPS.PROTONVPN_SETTINGS) {
 111             return `/dashboard${params.size ? `?${params}` : ''}`;
 112         }
 113         return `/upgrade${params.size ? `?${params}` : ''}`;
 114     }
 115     const currentPlan = getPlan(subscription);
 116     // A plan is needed to open the subscription modal
 117     if (!params.has('plan')) {
 118         params.set('plan', currentPlan?.Name ?? PLANS.BUNDLE);
 119     }
 120     params.set('target', target ?? 'compare');
 121     return `/dashboard?${params}`;
 122 };
 123
 124 /**
 125  * Generate upsell ref from app component and feature
 126  *
 127  * @param app => Current app from which we open a link
 128  * @param feature => feature identifier to include in the path
 129  * @param component => Optional, ref component (e.g. banner, modal, button)
 130  * @param isSettings => Optional, true if this upsell ref is in the apps settings
 131  */
 132 export const getUpsellRef = ({
 133     app,
 134     feature,
 135     component,
 136     isSettings = false,
 137 }: {
 138     app: `${APP_UPSELL_REF_PATH}`;
 139     feature: UPSELL_FEATURE;
 140     component?: `${UPSELL_COMPONENT}`;
 141     /** Is in settings section */
 142     isSettings?: boolean;
 143 }) => {
 144     const upsellComponent = component || '';
 145     const upsellInSettings = isSettings ? '_settings' : '';
 146
 147     return `${app}${upsellComponent}${feature}${upsellInSettings}`;
 148 };
 149
 150 /**
 151  * Generate upsell ref from the current app, the "feature" identifier, the "component" and the "from app"
 152  *
 153  * @param app => Current app from which we open a link
 154  * @param feature => feature identifier to include in the path
 155  * @param component => Optional, ref component (e.g. banner, modal, button)
 156  * @param fromApp => Optional, "parent app" of the current app (e.g. in mail settings, app=account and fromApp=mail)
 157  *
 158  * Return a ref string like "upsell_mail-banner-auto-reply_settings"
 159  */
 160 export const getUpsellRefFromApp = ({
 161     app,
 162     fromApp,
 163     component,
 164     feature,
 165 }: {
 166     app: APP_NAMES;
 167     feature: UPSELL_FEATURE;
 168     component?: UPSELL_COMPONENT;
 169     fromApp?: APP_NAMES;
 170 }) => {
 171     if (app === APPS.PROTONMAIL) {
 172         return getUpsellRef({ app: APP_UPSELL_REF_PATH.MAIL_UPSELL_REF_PATH, feature, component });
 173     } else if (app === APPS.PROTONCALENDAR) {
 174         return getUpsellRef({ app: APP_UPSELL_REF_PATH.CALENDAR_UPSELL_REF_PATH, feature, component });
 175     } else if (app === APPS.PROTONDRIVE) {
 176         return getUpsellRef({ app: APP_UPSELL_REF_PATH.DRIVE_UPSELL_REF_PATH, feature, component });
 177     } else if (app === APPS.PROTONACCOUNT && fromApp) {
 178         if (fromApp === APPS.PROTONMAIL) {
 179             return getUpsellRef({
 180                 app: APP_UPSELL_REF_PATH.MAIL_UPSELL_REF_PATH,
 181                 feature,
 182                 component,
 183                 isSettings: true,
 184             });
 185         } else if (fromApp === APPS.PROTONCALENDAR) {
 186             return getUpsellRef({
 187                 app: APP_UPSELL_REF_PATH.CALENDAR_UPSELL_REF_PATH,
 188                 feature,
 189                 component,
 190                 isSettings: true,
 191             });
 192         } else if (fromApp === APPS.PROTONDRIVE) {
 193             return getUpsellRef({
 194                 app: APP_UPSELL_REF_PATH.DRIVE_UPSELL_REF_PATH,
 195                 feature,
 196                 component,
 197                 isSettings: true,
 198             });
 199         } else if (fromApp === APPS.PROTONPASS) {
 200             return getUpsellRef({
 201                 app: APP_UPSELL_REF_PATH.PASS_UPSELL_REF_PATH,
 202                 feature,
 203                 component,
 204                 isSettings: true,
 205             });
 206         } else if (fromApp === APPS.PROTONVPN_SETTINGS) {
 207             return getUpsellRef({ app: APP_UPSELL_REF_PATH.VPN_UPSELL_REF_PATH, feature, component, isSettings: true });
 208         }
 209     }
 210
 211     return undefined;
 212 };