packages/pass/components/Onboarding/AliasSync.tsx

   1 import { type FC } from 'react';
   2 import { useSelector } from 'react-redux';
   3
   4 import { c, msgid } from 'ttag';
   5
   6 import { Button } from '@proton/atoms';
   7 import { useConnectivity } from '@proton/pass/components/Core/ConnectivityProvider';
   8 import { usePassCore } from '@proton/pass/components/Core/PassCoreProvider';
   9 import type { BaseSpotlightMessage } from '@proton/pass/components/Spotlight/SpotlightContent';
  10 import { AliasSyncIcon } from '@proton/pass/components/Spotlight/SpotlightIcon';
  11 import { selectUserData } from '@proton/pass/store/selectors';
  12 import { pipe } from '@proton/pass/utils/fp/pipe';
  13 import { PASS_APP_NAME, PASS_SHORT_APP_NAME } from '@proton/shared/lib/constants';
  14 import noop from '@proton/utils/noop';
  15
  16 export const AliasSync: FC<BaseSpotlightMessage> = ({ onClose = noop }) => {
  17     const online = useConnectivity();
  18     const { openSettings } = usePassCore();
  19     const { pendingAliasToSync: aliasCount } = useSelector(selectUserData);
  20
  21     return (
  22         <>
  23             <div className="flex-1">
  24                 <strong className="block">{c('Title').t`Sync your aliases from SimpleLogin`}</strong>
  25                 <span className="block text-sm">
  26                     {c('Info').ngettext(
  27                         msgid`You have ${aliasCount} alias that is present in SimpleLogin but missing in ${PASS_APP_NAME}. Would you like to sync it?`,
  28                         `You have ${aliasCount} aliases that are present in SimpleLogin but missing in ${PASS_APP_NAME}. Would you like to sync them?`,
  29                         aliasCount
  30                     )}
  31                     <span className="block text-sm">
  32                         {c('Warning')
  33                             .t`Once synced, deleting aliases in ${PASS_SHORT_APP_NAME} will also delete them in SimpleLogin.`}
  34                     </span>
  35                 </span>
  36                 <div className="mt-2">
  37                     <Button
  38                         pill
  39                         shape="solid"
  40                         color="norm"
  41                         size="small"
  42                         className="text-sm px-3"
  43                         onClick={pipe(onClose, () => openSettings?.('aliases'))}
  44                         disabled={!online}
  45                     >
  46                         {c('Action').ngettext(msgid`Sync alias`, `Sync aliases`, aliasCount)}
  47                     </Button>
  48                 </div>
  49             </div>
  50
  51             <div className="mr-2">
  52                 <AliasSyncIcon />
  53             </div>
  54         </>
  55     );
  56 };