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