packages/pass/components/Settings/Offline.tsx

   1 import { type FC } from 'react';
   2 import { useSelector } from 'react-redux';
   3
   4 import { c } from 'ttag';
   5
   6 import { Checkbox } from '@proton/components';
   7 import { useAuthStore } from '@proton/pass/components/Core/AuthStoreProvider';
   8 import { UpgradeButton } from '@proton/pass/components/Layout/Button/UpgradeButton';
   9 import { usePasswordUnlock } from '@proton/pass/components/Lock/PasswordUnlockProvider';
  10 import { UpsellRef } from '@proton/pass/constants';
  11 import { useRequest } from '@proton/pass/hooks/useActionRequest';
  12 import { isPaidPlan } from '@proton/pass/lib/user/user.predicates';
  13 import { offlineToggle } from '@proton/pass/store/actions';
  14 import { selectOfflineEnabled, selectPassPlan, selectUserSettings } from '@proton/pass/store/selectors';
  15 import { BRAND_NAME, PASS_APP_NAME } from '@proton/shared/lib/constants';
  16 import { SETTINGS_PASSWORD_MODE } from '@proton/shared/lib/interfaces';
  17
  18 import { SettingsPanel } from './SettingsPanel';
  19
  20 export const Offline: FC = () => {
  21     const confirmPassword = usePasswordUnlock();
  22     const authStore = useAuthStore();
  23
  24     const enabled = useSelector(selectOfflineEnabled);
  25     const plan = useSelector(selectPassPlan);
  26     const pwdMode = useSelector(selectUserSettings)?.Password?.Mode;
  27     const freeUser = !isPaidPlan(plan);
  28     const twoPwdMode = pwdMode === SETTINGS_PASSWORD_MODE.TWO_PASSWORD_MODE;
  29     const canEnableOffline = !freeUser && (!twoPwdMode || (authStore?.hasOfflinePassword() ?? false));
  30     const disabled = !canEnableOffline;
  31
  32     const toggle = useRequest(offlineToggle, { initial: true });
  33     offlineToggle.requestID();
  34
  35     const toggleOffline = async (enabled: boolean) =>
  36         confirmPassword({
  37             onSubmit: (loginPassword) => toggle.dispatch({ loginPassword, enabled }),
  38             message: c('Info').t`Please confirm your ${BRAND_NAME} password in order to enable offline mode`,
  39         });
  40
  41     return (
  42         <>
  43             <SettingsPanel
  44                 title={c('Label').t`Offline mode`}
  45                 {...(disabled
  46                     ? {
  47                           contentClassname: 'opacity-50 pointer-events-none py-4',
  48                           actions: freeUser
  49                               ? [
  50                                     <UpgradeButton
  51                                         upsellRef={UpsellRef.SETTING}
  52                                         inline
  53                                         className="text-sm"
  54                                         key="upgrade"
  55                                     />,
  56                                 ]
  57                               : [],
  58                           subTitle: freeUser
  59                               ? c('Error')
  60                                     .t`Offline mode isn't currently available for your plan and not compatible with two password mode.`
  61                               : c('Error').t`Offline mode is currently not available for two password mode.`,
  62                       }
  63                     : {})}
  64             >
  65                 <Checkbox
  66                     checked={enabled}
  67                     disabled={toggle.loading || disabled}
  68                     loading={toggle.loading}
  69                     onChange={(e) => toggleOffline(e.target.checked)}
  70                 >
  71                     <span>
  72                         {c('Label').t`Enable offline access`}
  73                         <span className="block color-weak text-sm">
  74                             {c('Info')
  75                                 .t`${PASS_APP_NAME} will require your ${BRAND_NAME} password in order to access data offline.`}
  76                         </span>
  77                     </span>
  78                 </Checkbox>
  79             </SettingsPanel>
  80         </>
  81     );
  82 };