packages/pass/hooks/useSpotlightMessages.ts

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