packages/pass/components/Settings/Beta.tsx

   1 import { type FC } from 'react';
   2 import { useDispatch, useSelector } from 'react-redux';
   3
   4 import { c } from 'ttag';
   5
   6 import Toggle from '@proton/components/components/toggle/Toggle';
   7 import { settingsEditIntent } from '@proton/pass/store/actions';
   8 import { settingsEditRequest } from '@proton/pass/store/actions/requests';
   9 import { selectBetaEnabled, selectRequestInFlight } from '@proton/pass/store/selectors';
  10 import { BRAND_NAME, PASS_SHORT_APP_NAME } from '@proton/shared/lib/constants';
  11
  12 import { SettingsPanel } from './SettingsPanel';
  13
  14 export const Beta: FC = () => {
  15     const dispatch = useDispatch();
  16     const betaEnabled = useSelector(selectBetaEnabled);
  17     const loading = useSelector(selectRequestInFlight(settingsEditRequest('behaviors')));
  18
  19     return (
  20         <SettingsPanel title={c('Label').t`Beta Access`}>
  21             <div className="pt-2">
  22                 <Toggle
  23                     checked={betaEnabled}
  24                     disabled={loading}
  25                     loading={loading}
  26                     onChange={() => dispatch(settingsEditIntent('behaviors', { beta: !betaEnabled }))}
  27                 >
  28                     <span className="pl-2">
  29                         {c('Info').t`Enable ${PASS_SHORT_APP_NAME} beta`}
  30                         <span className="block color-weak text-sm">
  31                             {c('Info')
  32                                 .t`Try new ${BRAND_NAME} features, updates and products before they are released to the public. This will reload the application`}
  33                         </span>
  34                     </span>
  35                 </Toggle>
  36             </div>
  37         </SettingsPanel>
  38     );
  39 };