packages/pass/components/Settings/AliasSyncDisabled.tsx

   1 import { type FC, useEffect, useId, useState } from 'react';
   2 import { useSelector } from 'react-redux';
   3
   4 import { c, msgid } from 'ttag';
   5
   6 import { Button, CircleLoader } from '@proton/atoms';
   7 import { Card } from '@proton/pass/components/Layout/Card/Card';
   8 import { AliasSyncModal } from '@proton/pass/components/Settings/AliasSyncModal';
   9 import { SettingsPanel } from '@proton/pass/components/Settings/SettingsPanel';
  10 import { useRequest } from '@proton/pass/hooks/useActionRequest';
  11 import { aliasSyncStatus } from '@proton/pass/store/actions';
  12 import { selectUserData } from '@proton/pass/store/selectors';
  13 import { PASS_APP_NAME } from '@proton/shared/lib/constants';
  14
  15 export const AliasSyncDisabled: FC = () => {
  16     const aliasSyncId = useId();
  17     const [confirm, setConfirm] = useState(false);
  18     const { pendingAliasToSync: aliasCount } = useSelector(selectUserData);
  19     const { dispatch, loading } = useRequest(aliasSyncStatus, {});
  20
  21     useEffect(dispatch, []);
  22
  23     if (!aliasCount) return null;
  24
  25     return (
  26         <SettingsPanel
  27             title={c('Label').t`Sync aliases with SimpleLogin`}
  28             actions={loading ? [<CircleLoader key={aliasSyncId} size="small" />] : undefined}
  29         >
  30             <Card type="primary">
  31                 <>
  32                     <strong className="color-norm block mb-1 flex-1 text-ellipsis">
  33                         {c('Info').t`Aliases out of sync (${aliasCount})`}
  34                     </strong>
  35
  36                     <div className="text-sm mb-4">
  37                         {c('Info').ngettext(
  38                             msgid`We detected that you have ${aliasCount} alias that is present in SimpleLogin but missing in ${PASS_APP_NAME}. Would you like to import it?`,
  39                             `We detected that you have ${aliasCount} aliases that are present in SimpleLogin but missing in ${PASS_APP_NAME}. Would you like to import them?`,
  40                             aliasCount
  41                         )}
  42                     </div>
  43
  44                     <Button fullWidth color="norm" onClick={() => setConfirm(true)}>
  45                         {c('Action').t`Sync aliases`}
  46                     </Button>
  47
  48                     {confirm && <AliasSyncModal aliasCount={aliasCount} onClose={() => setConfirm(false)} />}
  49                 </>
  50             </Card>
  51         </SettingsPanel>
  52     );
  53 };