packages/pass/hooks/useOnboardingMessages.tsx

   1 import { useMemo } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { usePassCore } from '@proton/pass/components/Core/PassCoreProvider';
   6 import { AliasSync } from '@proton/pass/components/Onboarding/AliasSync';
   7 import { BlackFriday2024Offer } from '@proton/pass/components/Onboarding/BlackFriday2024Offer';
   8 import { UserRenewal } from '@proton/pass/components/Onboarding/UserRenewal';
   9 import type { SpotlightMessageDefinition } from '@proton/pass/components/Spotlight/SpotlightContent';
  10 import { FiveStarIcon, ShieldIcon } from '@proton/pass/components/Spotlight/SpotlightIcon';
  11 import { useSpotlight } from '@proton/pass/components/Spotlight/SpotlightProvider';
  12 import { PASS_LEARN_MORE_URL, UpsellRef } from '@proton/pass/constants';
  13 import { OnboardingMessage } from '@proton/pass/types';
  14 import { BRAND_NAME, PASS_APP_NAME, PASS_SHORT_APP_NAME } from '@proton/shared/lib/constants';
  15 import noop from '@proton/utils/noop';
  16
  17 export const useOnboardingMessages = () => {
  18     const { onLink, openSettings, promptForPermissions, getRatingURL, onForceUpdate } = usePassCore();
  19     const { setPendingShareAccess, setUpselling } = useSpotlight();
  20
  21     return useMemo<Partial<Record<OnboardingMessage, SpotlightMessageDefinition>>>(
  22         () => ({
  23             [OnboardingMessage.PENDING_SHARE_ACCESS]: {
  24                 mode: 'default',
  25                 id: 'welcome',
  26                 hidden: true,
  27                 title: c('Title').t`Pending access to the shared data`,
  28                 message: c('Info').t`For security reasons, your access needs to be confirmed`,
  29                 weak: true,
  30                 onClose: () => setPendingShareAccess(false),
  31             },
  32             [OnboardingMessage.WELCOME]: {
  33                 mode: 'default',
  34                 id: 'welcome',
  35                 title: c('Title').t`Why ${PASS_APP_NAME}?`,
  36                 message: c('Info').t`Privacy is a big concern for us. Learn why ${PASS_APP_NAME} is different.`,
  37                 className: 'ui-teal',
  38                 icon: ShieldIcon,
  39                 action: {
  40                     label: c('Label').t`Learn more`,
  41                     type: 'link',
  42                     onClick: () => onLink(PASS_LEARN_MORE_URL),
  43                 },
  44             },
  45             [OnboardingMessage.TRIAL]: {
  46                 mode: 'default',
  47                 id: 'trial',
  48                 title: c('Title').t`Our welcome gift to you`,
  49                 message: c('Info')
  50                     .t`7 days to try premium features for free. Only during your first week of ${BRAND_NAME}.`,
  51                 className: 'ui-orange',
  52                 onClose: () => setUpselling(null),
  53                 action: {
  54                     label: c('Label').t`Learn more`,
  55                     type: 'link',
  56                     onClick: () => setUpselling({ type: 'free-trial', upsellRef: UpsellRef.FREE_TRIAL }),
  57                 },
  58             },
  59             [OnboardingMessage.SECURE_EXTENSION]: {
  60                 mode: 'default',
  61                 id: 'pin',
  62                 title: c('Title').t`Secure your data`,
  63                 message: c('Info').t`Enable auto-locking to secure your data`,
  64                 className: 'ui-violet',
  65                 icon: ShieldIcon,
  66                 action: {
  67                     label: c('Label').t`Create lock`,
  68                     type: 'button',
  69                     onClick: () => openSettings?.('security'),
  70                 },
  71             },
  72             [OnboardingMessage.UPDATE_AVAILABLE]: {
  73                 mode: 'default',
  74                 id: 'update',
  75                 title: c('Title').t`Update available`,
  76                 message: c('Info')
  77                     .t`A new version of ${PASS_APP_NAME} is available. Update it to enjoy the latest features and bug fixes.`,
  78                 className: 'ui-orange',
  79                 action: {
  80                     label: c('Label').t`Update`,
  81                     type: 'button',
  82                     onClick: onForceUpdate ?? noop,
  83                 },
  84             },
  85             [OnboardingMessage.PERMISSIONS_REQUIRED]: {
  86                 mode: 'default',
  87                 id: 'permissions',
  88                 title: c('Title').t`Grant permissions`,
  89                 message: c('Info')
  90                     .t`In order to get the best experience out of ${PASS_APP_NAME}, please grant the necessary extension permissions`,
  91                 className: 'ui-orange',
  92                 action: {
  93                     label: c('Label').t`Grant`,
  94                     type: 'button',
  95                     onClick: () => promptForPermissions?.(),
  96                 },
  97             },
  98             [OnboardingMessage.USER_RATING]: {
  99                 mode: 'default',
 100                 id: 'rating',
 101                 title: c('Title').t`Enjoying ${PASS_APP_NAME}?`,
 102                 message: c('Info').t`Please consider leaving a review.`,
 103                 className: 'ui-lime',
 104                 icon: FiveStarIcon,
 105                 action: {
 106                     label: c('Label').t`Rate us`,
 107                     type: 'button',
 108                     onClick: getRatingURL ? () => onLink(getRatingURL()) : noop,
 109                 },
 110             },
 111             [OnboardingMessage.STORAGE_ISSUE]: {
 112                 mode: 'default',
 113                 id: 'storage',
 114                 title: c('Title').t`Low disk space`,
 115                 message: c('Info')
 116                     .t`We are having trouble syncing data to your local storage. Please make sure you have sufficient disk space for ${PASS_SHORT_APP_NAME} to work smoothly.`,
 117                 className: 'ui-red',
 118                 action: {
 119                     label: c('Label').t`Need help?`,
 120                     type: 'button',
 121                     onClick: () => openSettings?.('support'),
 122                 },
 123             },
 124             [OnboardingMessage.B2B_ONBOARDING]: {
 125                 mode: 'default',
 126                 id: 'b2b',
 127                 title: c('Title').t`Get Started`,
 128                 message: '',
 129                 className: 'ui-teal hidden',
 130                 icon: ShieldIcon,
 131             },
 132             [OnboardingMessage.EARLY_ACCESS]: {
 133                 mode: 'default',
 134                 id: 'early-access',
 135                 hidden: true,
 136                 title: c('Title').t`Upgrade to Unlock Premium Features`,
 137                 message: c('Info').t`Please upgrade to have early access ${PASS_APP_NAME} web app`,
 138                 weak: true,
 139                 onClose: () => setUpselling(null),
 140             },
 141             [OnboardingMessage.ALIAS_SYNC_ENABLE]: {
 142                 mode: 'custom',
 143                 component: AliasSync,
 144                 id: 'alias-sync',
 145                 className: 'ui-teal',
 146             },
 147             [OnboardingMessage.BLACK_FRIDAY_2024]: {
 148                 mode: 'custom',
 149                 component: BlackFriday2024Offer,
 150                 id: 'bf-2024',
 151                 className: 'pass-bf2024-banner ui-violet',
 152             },
 153             [OnboardingMessage.USER_RENEWAL]: {
 154                 mode: 'custom',
 155                 component: UserRenewal,
 156                 id: 'user-renewal',
 157                 className: 'ui-red',
 158             },
 159         }),
 160         []
 161     );
 162 };