feat: add "Email Backups" to "Backups" section (#778)
* feat: add "Email Backups" to "Backups" section * chore: remove comment * chore: better wording * chore: put working snjs version * chore: better wording * style: reuse existing css classes and add the missing one * feat: add "No email backup" option * refactor: move the function outside of the useEffect, remove unused utility function * feat (WIP): move CloudLink to backups section * chore: versions bump, type fixes * fix: handle the case when the setting update fails * style: remove dashed border from the confirmation code, UI improvements * feat: implement removing integration, improve interaction on different events * feat: implement non-interactive textarea for showing and copying the code * fix: fix TS errors * feat: implement "Perform backup" logic - remove the code for copying the confirmation code for backup integration - also remove unnecessary parameters passed to Provider * feat: don't show "CloudLink" in preferences pane * chore: show error in console on exception * refactor: better naming, add `coverage` folder to gitignore * fix: return correct setting name * refactor: use async/await for the sake of consistency * chore: remove duplicate line * feat: get urls for cloud backup from snjs * chore: update dependencies * refactor: set both `token` and `frequency` settings when enabling cloud integration; get only `frequency` when checking the integration status * refactor: once the setting is successfully saved, don't get its value from backend; instead, use its value that's still in frontend * feat: move "Receive a notification email if a cloud backup fails." into cloud backups section * fix: text correction * fix: get correct cloud integration url from snjs based on prod/dev environment
This commit is contained in:
Vardan Hakobyan
@@ -0,0 +1,188 @@
|
||||
import { convertStringifiedBooleanToBoolean, isDesktopApplication } from '@/utils';
|
||||
import { STRING_FAILED_TO_UPDATE_USER_SETTING } from '@/strings';
|
||||
import { useCallback, useEffect, useState } from 'preact/hooks';
|
||||
import { WebApplication } from '@/ui_models/application';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import {
|
||||
PreferencesGroup,
|
||||
PreferencesSegment,
|
||||
Subtitle,
|
||||
Text,
|
||||
Title,
|
||||
} from '../../components';
|
||||
import { EmailBackupFrequency, SettingName } from '@standardnotes/settings';
|
||||
import { Dropdown, DropdownItem } from '@/components/Dropdown';
|
||||
import { Switch } from '@/components/Switch';
|
||||
import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
|
||||
import { FeatureIdentifier } from '@standardnotes/features';
|
||||
import { FeatureStatus } from '@standardnotes/snjs';
|
||||
|
||||
type Props = {
|
||||
application: WebApplication;
|
||||
};
|
||||
|
||||
export const EmailBackups = observer(({ application }: Props) => {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [emailFrequency, setEmailFrequency] = useState<EmailBackupFrequency>(
|
||||
EmailBackupFrequency.Disabled
|
||||
);
|
||||
const [emailFrequencyOptions, setEmailFrequencyOptions] = useState<
|
||||
DropdownItem[]
|
||||
>([]);
|
||||
const [isFailedBackupEmailMuted, setIsFailedBackupEmailMuted] =
|
||||
useState(true);
|
||||
const [isEntitledForEmailBackups, setIsEntitledForEmailBackups] =
|
||||
useState(false);
|
||||
|
||||
const loadEmailFrequencySetting = useCallback(async () => {
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
const userSettings = await application.listSettings();
|
||||
setEmailFrequency(
|
||||
(userSettings.EMAIL_BACKUP_FREQUENCY ||
|
||||
EmailBackupFrequency.Disabled) as EmailBackupFrequency
|
||||
);
|
||||
setIsFailedBackupEmailMuted(
|
||||
convertStringifiedBooleanToBoolean(
|
||||
userSettings[SettingName.MuteFailedBackupsEmails] as string
|
||||
)
|
||||
);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [application]);
|
||||
|
||||
useEffect(() => {
|
||||
const emailBackupsFeatureStatus = application.getFeatureStatus(
|
||||
FeatureIdentifier.DailyEmailBackup
|
||||
);
|
||||
setIsEntitledForEmailBackups(
|
||||
emailBackupsFeatureStatus === FeatureStatus.Entitled
|
||||
);
|
||||
|
||||
const frequencyOptions = [];
|
||||
for (const frequency in EmailBackupFrequency) {
|
||||
const frequencyValue =
|
||||
EmailBackupFrequency[frequency as keyof typeof EmailBackupFrequency];
|
||||
frequencyOptions.push({
|
||||
value: frequencyValue,
|
||||
label: application.getEmailBackupFrequencyOptionLabel(frequencyValue),
|
||||
});
|
||||
}
|
||||
setEmailFrequencyOptions(frequencyOptions);
|
||||
|
||||
loadEmailFrequencySetting();
|
||||
}, [application, loadEmailFrequencySetting]);
|
||||
|
||||
const updateSetting = async (
|
||||
settingName: SettingName,
|
||||
payload: string
|
||||
): Promise<boolean> => {
|
||||
try {
|
||||
await application.updateSetting(settingName, payload);
|
||||
return true;
|
||||
} catch (e) {
|
||||
application.alertService.alert(STRING_FAILED_TO_UPDATE_USER_SETTING);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const updateEmailFrequency = async (frequency: EmailBackupFrequency) => {
|
||||
const previousFrequency = emailFrequency;
|
||||
setEmailFrequency(frequency);
|
||||
|
||||
const updateResult = await updateSetting(
|
||||
SettingName.EmailBackupFrequency,
|
||||
frequency
|
||||
);
|
||||
if (!updateResult) {
|
||||
setEmailFrequency(previousFrequency);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleMuteFailedBackupEmails = async () => {
|
||||
const previousValue = isFailedBackupEmailMuted;
|
||||
setIsFailedBackupEmailMuted(!isFailedBackupEmailMuted);
|
||||
|
||||
const updateResult = await updateSetting(
|
||||
SettingName.MuteFailedBackupsEmails,
|
||||
`${!isFailedBackupEmailMuted}`
|
||||
);
|
||||
if (!updateResult) {
|
||||
setIsFailedBackupEmailMuted(previousValue);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<PreferencesGroup>
|
||||
<PreferencesSegment>
|
||||
<Title>Email Backups</Title>
|
||||
{!isEntitledForEmailBackups && (
|
||||
<>
|
||||
<Text>
|
||||
A <span className={'font-bold'}>Plus</span> or{' '}
|
||||
<span className={'font-bold'}>Pro</span> subscription plan is
|
||||
required to enable Email Backups.{' '}
|
||||
<a target="_blank" href="https://standardnotes.com/features">
|
||||
Learn more
|
||||
</a>
|
||||
.
|
||||
</Text>
|
||||
<HorizontalSeparator classes="mt-3 mb-3" />
|
||||
</>
|
||||
)}
|
||||
<div
|
||||
className={
|
||||
isEntitledForEmailBackups
|
||||
? ''
|
||||
: 'faded cursor-default pointer-events-none'
|
||||
}
|
||||
>
|
||||
{!isDesktopApplication() && (
|
||||
<Text className="mb-3">
|
||||
Daily encrypted email backups of your entire data set delivered
|
||||
directly to your inbox.
|
||||
</Text>
|
||||
)}
|
||||
<Subtitle>Email frequency</Subtitle>
|
||||
<Text>How often to receive backups.</Text>
|
||||
<div className="mt-2">
|
||||
{isLoading ? (
|
||||
<div className={'sk-spinner info small'} />
|
||||
) : (
|
||||
<Dropdown
|
||||
id="def-editor-dropdown"
|
||||
label="Select email frequency"
|
||||
items={emailFrequencyOptions}
|
||||
defaultValue={emailFrequency}
|
||||
onChange={(item) => {
|
||||
updateEmailFrequency(item as EmailBackupFrequency);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<HorizontalSeparator classes="mt-5 mb-4" />
|
||||
<Subtitle>Email preferences</Subtitle>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex flex-col">
|
||||
<Text>
|
||||
Receive a notification email if an email backup fails.
|
||||
</Text>
|
||||
</div>
|
||||
{isLoading ? (
|
||||
<div className={'sk-spinner info small'} />
|
||||
) : (
|
||||
<Switch
|
||||
onChange={toggleMuteFailedBackupEmails}
|
||||
checked={!isFailedBackupEmailMuted}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</PreferencesSegment>
|
||||
</PreferencesGroup>
|
||||
);
|
||||
});
|
||||
Reference in New Issue
Block a user