Merge branch 'IDTEAM-2511-add-eoy-upgrade-and-ref' into 'main'

Add ref to upgrade and use EOY See merge request web/clients!8388 Changelog:
ProtonMail · Dec 21, 2023 · dc51488 · dc51488
2 parents b6fccf8 + deca57d
commit dc51488
Show file tree

Hide file tree

Showing 31 changed files with 149 additions and 58 deletions.
diff --git a/...ons/pass-extension/src/app/content/injections/apps/dropdown/components/DropdownSwitch.tsx b/...ons/pass-extension/src/app/content/injections/apps/dropdown/components/DropdownSwitch.tsx
@@ -1,4 +1,4 @@
-import { type ForwardRefRenderFunction, forwardRef } from 'react';
+import { forwardRef, type ForwardRefRenderFunction } from 'react';
 
 import { AliasAutoSuggest } from 'proton-pass-extension/app/content/injections/apps/dropdown/views/AliasAutoSuggest';
 import { ItemsList } from 'proton-pass-extension/app/content/injections/apps/dropdown/views/ItemsList';

diff --git a/...ations/pass-extension/src/app/content/injections/apps/dropdown/views/AliasAutoSuggest.tsx b/...ations/pass-extension/src/app/content/injections/apps/dropdown/views/AliasAutoSuggest.tsx
@@ -11,6 +11,7 @@ import { c } from 'ttag';
 import { CircleLoader } from '@proton/atoms/CircleLoader';
 import { AliasPreview } from '@proton/pass/components/Alias/legacy/Alias.preview';
 import { SubTheme } from '@proton/pass/components/Layout/Theme/types';
+import { UpsellRef } from '@proton/pass/constants';
 import { useEnsureMounted } from '@proton/pass/hooks/useEnsureMounted';
 import { useNavigateToUpgrade } from '@proton/pass/hooks/useNavigateToUpgrade';
 import { contentScriptMessage, sendMessage } from '@proton/pass/lib/extension/message';
@@ -37,7 +38,7 @@ const getInitialLoadingText = (): string => c('Info').t`Generating alias...`;
 
 export const AliasAutoSuggest: VFC<Props> = ({ hostname, prefix, visible, onClose, onMessage }) => {
     const ensureMounted = useEnsureMounted();
-    const navigateToUpgrade = useNavigateToUpgrade();
+    const navigateToUpgrade = useNavigateToUpgrade({ upsellRef: UpsellRef.LIMIT_ALIAS });
     const { userEmail } = useIFrameContext();
     const [aliasOptions, setAliasOptions] = useState<MaybeNull<AliasState['aliasOptions']>>(null);
     const [needsUpgrade, setNeedsUpgrade] = useState<boolean>(false);

diff --git a/applications/pass-extension/src/app/content/injections/apps/dropdown/views/ItemsList.tsx b/applications/pass-extension/src/app/content/injections/apps/dropdown/views/ItemsList.tsx
@@ -10,6 +10,7 @@ import type { IFrameCloseOptions, IFrameMessage } from 'proton-pass-extension/ap
 import { IFrameMessageType } from 'proton-pass-extension/app/content/types';
 import { c } from 'ttag';
 
+import { UpsellRef } from '@proton/pass/constants';
 import { useNavigateToUpgrade } from '@proton/pass/hooks/useNavigateToUpgrade';
 import { contentScriptMessage, sendMessage } from '@proton/pass/lib/extension/message';
 import { createTelemetryEvent } from '@proton/pass/lib/telemetry/event';
@@ -30,7 +31,7 @@ type Props = {
 
 export const ItemsList: VFC<Props> = ({ hostname, items, needsUpgrade, visible, onMessage, onClose }) => {
     const { settings } = useIFrameContext();
-    const navigateToUpgrade = useNavigateToUpgrade();
+    const navigateToUpgrade = useNavigateToUpgrade({ upsellRef: UpsellRef.LIMIT_AUTOFILL });
 
     useEffect(() => {
         if (visible) {

diff --git a/applications/pass-extension/src/app/pages/settings/Settings.tsx b/applications/pass-extension/src/app/pages/settings/Settings.tsx
@@ -16,6 +16,7 @@ import { Avatar } from '@proton/atoms/Avatar';
 import { Icon, Tabs, useNotifications } from '@proton/components';
 import { UpgradeButton } from '@proton/pass/components/Layout/Button/UpgradeButton';
 import { LockConfirmContextProvider } from '@proton/pass/components/Lock/LockConfirmContextProvider';
+import { UpsellRef } from '@proton/pass/constants';
 import { pageMessage } from '@proton/pass/lib/extension/message';
 import {
     selectPassPlan,
@@ -127,7 +128,7 @@ const SettingsTabs: FC<{ pathname: string }> = ({ pathname }) => {
                                                 )})`}
                                         </span>
                                     </span>
-                                    <UpgradeButton inline />
+                                    <UpgradeButton inline upsellRef={UpsellRef.SETTING} />
                                 </>
                             )}
                         </div>

diff --git a/applications/pass-extension/src/app/popup/Views/Header/MenuDropdown.tsx b/applications/pass-extension/src/app/popup/Views/Header/MenuDropdown.tsx
@@ -28,6 +28,7 @@ import { Submenu } from '@proton/pass/components/Menu/Submenu';
 import { VaultMenu } from '@proton/pass/components/Menu/Vault/VaultMenu';
 import { useVaultActions } from '@proton/pass/components/Vault/VaultActionsProvider';
 import { VaultIcon } from '@proton/pass/components/Vault/VaultIcon';
+import { UpsellRef } from '@proton/pass/constants';
 import { useMenuItems } from '@proton/pass/hooks/useMenuItems';
 import {
     selectHasRegisteredLock,
@@ -133,7 +134,7 @@ export const MenuDropdown: VFC = () => {
 
                         {passPlan !== UserPassPlan.PLUS && (
                             <div className="pb-2 px-4">
-                                <UpgradeButton className="w-full" />
+                                <UpgradeButton className="w-full" upsellRef={UpsellRef.MENU} />
                             </div>
                         )}
 

diff --git a/applications/pass-extension/src/app/popup/Views/Sidebar/ItemsListPlaceholder.tsx b/applications/pass-extension/src/app/popup/Views/Sidebar/ItemsListPlaceholder.tsx
@@ -14,6 +14,7 @@ import { UpgradeButton } from '@proton/pass/components/Layout/Button/UpgradeButt
 import { Card } from '@proton/pass/components/Layout/Card/Card';
 import { itemTypeToIconName } from '@proton/pass/components/Layout/Icon/ItemIcon';
 import { SubTheme } from '@proton/pass/components/Layout/Theme/types';
+import { UpsellRef } from '@proton/pass/constants';
 import { isWritableVault } from '@proton/pass/lib/vaults/vault.predicates';
 import { selectAllVaults, selectOwnReadOnlyVaults, selectShare, selectVaultLimits } from '@proton/pass/store/selectors';
 import type { ItemType } from '@proton/pass/types';
@@ -95,7 +96,7 @@ export const ItemsListPlaceholder: VFC = () => {
                     {c('Info')
                         .t`You have exceeded the number of vaults included in your subscription. New items can only be created in your first two vaults. To create new items in all vaults upgrade your subscription.`}
                 </Card>
-                <UpgradeButton />
+                <UpgradeButton upsellRef={UpsellRef.LIMIT_VAULT} />
             </div>
         );
     }

diff --git a/applications/pass-extension/src/lib/hooks/useOnboardingListener.ts b/applications/pass-extension/src/lib/hooks/useOnboardingListener.ts
@@ -2,8 +2,10 @@ import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 
 import { useSpotlight } from '@proton/pass/components/Spotlight/SpotlightProvider';
+import { UpsellRef } from '@proton/pass/constants';
 import { useOnboardingMessages } from '@proton/pass/hooks/useOnboardingMessages';
 import { popupMessage, sendMessage } from '@proton/pass/lib/extension/message';
+import { isEOY } from '@proton/pass/lib/onboarding/upselling';
 import { selectCreatedItemsCount } from '@proton/pass/store/selectors';
 import type { WorkerMessageWithSender } from '@proton/pass/types';
 import { OnboardingMessage, WorkerMessageType } from '@proton/pass/types';
@@ -36,7 +38,13 @@ export const useOnboardingListener = () => {
             async ({ message }) => {
                 await wait(200);
                 if (message === OnboardingMessage.PENDING_SHARE_ACCESS) setPendingShareAccess(true);
-                if (message === OnboardingMessage.EARLY_ACCESS) setUpselling('early-access');
+                if (message === OnboardingMessage.EARLY_ACCESS) {
+                    setUpselling({
+                        type: 'early-access',
+                        upsellRef: isEOY() ? UpsellRef.EOY_2023 : UpsellRef.EARLY_ACCESS,
+                    });
+                }
+
                 setOnboardingMessage(message ? definitions[message] ?? null : null);
             }
         );

diff --git a/packages/pass/components/Form/Field/Control/ExtraFieldsControl.tsx b/packages/pass/components/Form/Field/Control/ExtraFieldsControl.tsx
@@ -1,6 +1,7 @@
 import { type VFC, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 
+import { UpsellRef } from '@proton/pass/constants';
 import { selectExtraFieldLimits } from '@proton/pass/store/selectors';
 import type { UnsafeItemExtraField } from '@proton/pass/types';
 import { isEmptyString } from '@proton/pass/utils/string/is-empty-string';
@@ -27,7 +28,9 @@ export const ExtraFieldsControl: VFC<ExtraFieldsControlProps> = ({ extraFields,
             const key = `${index}-${fieldName}`;
 
             if (needsUpgrade) {
-                return <UpgradeControl icon={icon} key={key} label={fieldName} />;
+                return (
+                    <UpgradeControl icon={icon} key={key} label={fieldName} upsellRef={UpsellRef.LIMIT_EXTRA_FIELD} />
+                );
             }
 
             switch (type) {

diff --git a/packages/pass/components/Form/Field/Control/UpgradeControl.tsx b/packages/pass/components/Form/Field/Control/UpgradeControl.tsx
@@ -2,16 +2,18 @@ import { type VFC } from 'react';
 
 import { type IconName } from '@proton/components/components';
 import { UpgradeButton } from '@proton/pass/components/Layout/Button/UpgradeButton';
+import { type UpsellRef } from '@proton/pass/constants';
 
 import { ValueControl } from './ValueControl';
 
 type UpgradeControlProps = {
     icon: IconName;
     label: string;
+    upsellRef: UpsellRef;
 };
 
-export const UpgradeControl: VFC<UpgradeControlProps> = ({ icon, label }) => (
+export const UpgradeControl: VFC<UpgradeControlProps> = ({ icon, label, upsellRef }) => (
     <ValueControl icon={icon} label={label}>
-        <UpgradeButton inline />
+        <UpgradeButton inline upsellRef={upsellRef} />
     </ValueControl>
 );
diff --git a/packages/pass/components/Import/ImportVaultsPickerModal.tsx b/packages/pass/components/Import/ImportVaultsPickerModal.tsx
@@ -9,6 +9,7 @@ import { Button } from '@proton/atoms/Button';
 import { Card } from '@proton/atoms/Card';
 import type { ModalProps } from '@proton/components/components';
 import { ModalTwo, ModalTwoContent, ModalTwoFooter, ModalTwoHeader } from '@proton/components/components';
+import { UpsellRef } from '@proton/pass/constants';
 import { type ImportPayload, type ImportVault } from '@proton/pass/lib/import/types';
 import {
     selectDefaultVault,
@@ -96,7 +97,7 @@ export const ImportVaultsPickerModal: VFC<ImportVaultsPickerProps> = ({ payload,
                                         <>
                                             {c('Warning')
                                                 .t`Your subscription does not allow you to create multiple vaults. All items will be imported to your first vault. To import into multiple vaults upgrade your subscription.`}
-                                            <UpgradeButton inline className="ml-1" />
+                                            <UpgradeButton inline className="ml-1" upsellRef={UpsellRef.LIMIT_IMPORT} />
                                         </>
                                     ) : (
                                         c('Warning').t`You cannot create more vaults than your subscription allows.`

diff --git a/packages/pass/components/Invite/VaultAccessManager.tsx b/packages/pass/components/Invite/VaultAccessManager.tsx
@@ -14,6 +14,7 @@ import { PanelHeader } from '@proton/pass/components/Layout/Panel/PanelHeader';
 import { ShareMember } from '@proton/pass/components/Share/ShareMember';
 import { PendingExistingMember, PendingNewMember } from '@proton/pass/components/Share/SharePendingMember';
 import { SharedVaultItem } from '@proton/pass/components/Vault/SharedVaultItem';
+import { UpsellRef } from '@proton/pass/constants';
 import { useShareAccessOptionsPolling } from '@proton/pass/hooks/useShareAccessOptionsPolling';
 import { isShareManageable } from '@proton/pass/lib/shares/share.predicates';
 import { isVaultMemberLimitReached } from '@proton/pass/lib/vaults/vault.predicates';
@@ -60,7 +61,13 @@ export const VaultAccessManager: FC<Props> = ({ shareId }) => {
 
     const warning = (() => {
         if (canManage && memberLimitReached) {
-            const upgradeLink = <UpgradeButton inline label={c('Action').t`Upgrade now to share with more people`} />;
+            const upgradeLink = (
+                <UpgradeButton
+                    inline
+                    label={c('Action').t`Upgrade now to share with more people`}
+                    upsellRef={UpsellRef.LIMIT_SHARING}
+                />
+            );
             return plan === UserPassPlan.FREE
                 ? c('Warning').jt`You have reached the limit of users in this vault. ${upgradeLink}`
                 : c('Warning').t`You have reached the limit of members who can access this vault.`;

diff --git a/packages/pass/components/Item/Alias/Alias.modal.tsx b/packages/pass/components/Item/Alias/Alias.modal.tsx
@@ -13,6 +13,7 @@ import { Card } from '@proton/pass/components/Layout/Card/Card';
 import { SidebarModal } from '@proton/pass/components/Layout/Modal/SidebarModal';
 import { Panel } from '@proton/pass/components/Layout/Panel/Panel';
 import { PanelHeader } from '@proton/pass/components/Layout/Panel/PanelHeader';
+import { UpsellRef } from '@proton/pass/constants';
 import type { SanitizedAliasOptions } from '@proton/pass/hooks/useAliasOptions';
 import { validateAliasForm } from '@proton/pass/lib/validation/alias';
 import { selectAliasLimits } from '@proton/pass/store/selectors';
@@ -82,7 +83,7 @@ export const AliasModal = <T extends AliasFormValues>({
                             /* if user has reached his alias limit prompt
                              * him to upgrade his plan*/
                             needsUpgrade ? (
-                                <UpgradeButton key="upgrade-button" />
+                                <UpgradeButton key="upgrade-button" upsellRef={UpsellRef.LIMIT_ALIAS} />
                             ) : (
                                 <Button
                                     className="text-sm"

diff --git a/packages/pass/components/Item/Alias/Alias.new.tsx b/packages/pass/components/Item/Alias/Alias.new.tsx
@@ -15,7 +15,7 @@ import { UpgradeButton } from '@proton/pass/components/Layout/Button/UpgradeButt
 import { Card } from '@proton/pass/components/Layout/Card/Card';
 import { ItemCreatePanel } from '@proton/pass/components/Layout/Panel/ItemCreatePanel';
 import type { ItemNewViewProps } from '@proton/pass/components/Views/types';
-import { MAX_ITEM_NAME_LENGTH, MAX_ITEM_NOTE_LENGTH } from '@proton/pass/constants';
+import { MAX_ITEM_NAME_LENGTH, MAX_ITEM_NOTE_LENGTH, UpsellRef } from '@proton/pass/constants';
 import { useAliasOptions } from '@proton/pass/hooks/useAliasOptions';
 import { useItemDraft } from '@proton/pass/hooks/useItemDraft';
 import { deriveAliasPrefix, reconciliateAliasFromDraft, validateNewAliasForm } from '@proton/pass/lib/validation/alias';
@@ -148,7 +148,9 @@ export const AliasNew: VFC<ItemNewViewProps<'alias'>> = ({ shareId, url, onSubmi
             valid={form.isValid && userVerified}
             discardable={!form.dirty}
             /* if user has reached his alias limit: disable submit and prompt for upgrade */
-            renderSubmitButton={needsUpgrade ? <UpgradeButton key="upgrade-button" /> : undefined}
+            renderSubmitButton={
+                needsUpgrade ? <UpgradeButton key="upgrade-button" upsellRef={UpsellRef.LIMIT_ALIAS} /> : undefined
+            }
         >
             {({ didEnter }) => (
                 <>

diff --git a/packages/pass/components/Item/CreditCard/CreditCard.view.tsx b/packages/pass/components/Item/CreditCard/CreditCard.view.tsx
@@ -15,6 +15,7 @@ import {
 import { TextAreaReadonly } from '@proton/pass/components/Form/legacy/TextAreaReadonly';
 import { ItemViewPanel } from '@proton/pass/components/Layout/Panel/ItemViewPanel';
 import type { ItemViewProps } from '@proton/pass/components/Views/types';
+import { UpsellRef } from '@proton/pass/constants';
 import { useDeobfuscatedItem } from '@proton/pass/hooks/useDeobfuscatedItem';
 import { selectPassPlan } from '@proton/pass/store/selectors';
 import { UserPassPlan } from '@proton/pass/types/api/plan';
@@ -34,7 +35,11 @@ export const CreditCardView: VFC<ItemViewProps<'creditCard'>> = ({ vault, revisi
             <FieldsetCluster mode="read" as="div">
                 <ValueControl clickToCopy icon="user" label={c('Label').t`Name on card`} value={cardholderName} />
                 {isFreePlan ? (
-                    <UpgradeControl icon="credit-card" label={c('Label').t`Card number`} />
+                    <UpgradeControl
+                        icon="credit-card"
+                        label={c('Label').t`Card number`}
+                        upsellRef={UpsellRef.LIMIT_CC}
+                    />
                 ) : (
                     <MaskedValueControl
                         clickToCopy

diff --git a/packages/pass/components/Item/List/ItemsList.Placeholder.tsx b/packages/pass/components/Item/List/ItemsList.Placeholder.tsx
@@ -13,6 +13,7 @@ import { UpgradeButton } from '@proton/pass/components/Layout/Button/UpgradeButt
 import { Card } from '@proton/pass/components/Layout/Card/Card';
 import { itemTypeToIconName } from '@proton/pass/components/Layout/Icon/ItemIcon';
 import { SubTheme } from '@proton/pass/components/Layout/Theme/types';
+import { UpsellRef } from '@proton/pass/constants';
 import { useFilteredItems } from '@proton/pass/hooks/useFilteredItems';
 import { isWritableVault } from '@proton/pass/lib/vaults/vault.predicates';
 import { selectAllVaults, selectOwnReadOnlyVaults, selectShare, selectVaultLimits } from '@proton/pass/store/selectors';
@@ -109,7 +110,7 @@ export const ItemsListPlaceholder: FC<Props> = ({ noActions, noImport }) => {
                     {c('Info')
                         .t`You have exceeded the number of vaults included in your subscription. New items can only be created in your first two vaults. To create new items in all vaults upgrade your subscription.`}
                 </Card>
-                <UpgradeButton />
+                <UpgradeButton upsellRef={UpsellRef.LIMIT_VAULT} />
             </div>
         );
     }

diff --git a/packages/pass/components/Item/Login/Login.edit.tsx b/packages/pass/components/Item/Login/Login.edit.tsx
@@ -21,7 +21,7 @@ import { DropdownMenuButton } from '@proton/pass/components/Layout/Dropdown/Drop
 import { QuickActionsDropdown } from '@proton/pass/components/Layout/Dropdown/QuickActionsDropdown';
 import { ItemEditPanel } from '@proton/pass/components/Layout/Panel/ItemEditPanel';
 import type { ItemEditViewProps } from '@proton/pass/components/Views/types';
-import { MAX_ITEM_NAME_LENGTH, MAX_ITEM_NOTE_LENGTH } from '@proton/pass/constants';
+import { MAX_ITEM_NAME_LENGTH, MAX_ITEM_NOTE_LENGTH, UpsellRef } from '@proton/pass/constants';
 import { useAliasForLoginModal } from '@proton/pass/hooks/useAliasForLoginModal';
 import { useDeobfuscatedItem } from '@proton/pass/hooks/useDeobfuscatedItem';
 import { useItemDraft, useItemDraftLocationState } from '@proton/pass/hooks/useItemDraft';
@@ -283,7 +283,7 @@ export const LoginEdit: VFC<ItemEditViewProps<'login'>> = ({ revision, url, vaul
                                      * the secret or remove it */
                                     needsUpgrade && isEmptyString(form.values.totpUri) ? (
                                         <ValueControl icon="lock" label={c('Label').t`2FA secret key (TOTP)`}>
-                                            <UpgradeButton inline />
+                                            <UpgradeButton inline upsellRef={UpsellRef.LIMIT_2FA} />
                                         </ValueControl>
                                     ) : (
                                         <Field

diff --git a/packages/pass/components/Item/Login/Login.new.tsx b/packages/pass/components/Item/Login/Login.new.tsx
@@ -24,7 +24,7 @@ import { QuickActionsDropdown } from '@proton/pass/components/Layout/Dropdown/Qu
 import { ItemCreatePanel } from '@proton/pass/components/Layout/Panel/ItemCreatePanel';
 import { usePasswordContext } from '@proton/pass/components/Password/PasswordProvider';
 import type { ItemNewViewProps } from '@proton/pass/components/Views/types';
-import { MAX_ITEM_NAME_LENGTH, MAX_ITEM_NOTE_LENGTH } from '@proton/pass/constants';
+import { MAX_ITEM_NAME_LENGTH, MAX_ITEM_NOTE_LENGTH, UpsellRef } from '@proton/pass/constants';
 import { useAliasForLoginModal } from '@proton/pass/hooks/useAliasForLoginModal';
 import { useItemDraft, useItemDraftLocationState } from '@proton/pass/hooks/useItemDraft';
 import { obfuscateExtraFields } from '@proton/pass/lib/items/item.obfuscation';
@@ -290,7 +290,7 @@ export const LoginNew: VFC<ItemNewViewProps<'login'>> = ({ shareId, url, onCance
                                      * has not reached his plan's TOTP limit */
                                     needsUpgrade ? (
                                         <ValueControl icon="lock" label={c('Label').t`2FA secret key (TOTP)`}>
-                                            <UpgradeButton inline />
+                                            <UpgradeButton inline upsellRef={UpsellRef.LIMIT_2FA} />
                                         </ValueControl>
                                     ) : (
                                         <Field

diff --git a/packages/pass/components/Item/Login/Login.view.tsx b/packages/pass/components/Item/Login/Login.view.tsx
@@ -13,6 +13,7 @@ import { UpgradeButton } from '@proton/pass/components/Layout/Button/UpgradeButt
 import { MoreInfoDropdown } from '@proton/pass/components/Layout/Dropdown/MoreInfoDropdown';
 import { ItemViewPanel } from '@proton/pass/components/Layout/Panel/ItemViewPanel';
 import type { ItemViewProps } from '@proton/pass/components/Views/types';
+import { UpsellRef } from '@proton/pass/constants';
 import { useDeobfuscatedItem } from '@proton/pass/hooks/useDeobfuscatedItem';
 import { getCharsGroupedByColor } from '@proton/pass/hooks/usePasswordGenerator';
 import { selectAliasByAliasEmail, selectTOTPLimits } from '@proton/pass/store/selectors';
@@ -64,7 +65,7 @@ export const LoginView: VFC<ItemViewProps<'login'>> = ({ vault, revision, ...ite
 
                 {totpUri && !totpAllowed && (
                     <ValueControl icon="lock" label={c('Label').t`2FA secret key (TOTP)`}>
-                        <UpgradeButton inline />
+                        <UpgradeButton inline upsellRef={UpsellRef.LIMIT_2FA} />
                     </ValueControl>
                 )}
             </FieldsetCluster>