standardnotes-app-web/app/assets/javascripts/preferences/panes/backups-segments/cloud-backups/index.tsx

import React from 'react';
import { CloudBackupProvider } from './CloudBackupProvider';
import { useCallback, useEffect, useState } from 'preact/hooks';
import { WebApplication } from '@/ui_models/application';
import {
  PreferencesGroup,
  PreferencesSegment,
  Subtitle,
  Text,
  Title,
} from '@/preferences/components';
import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
import { FeatureIdentifier } from '@standardnotes/features';
import { FeatureStatus } from '@standardnotes/snjs';
import { FunctionComponent } from 'preact';
import {
  CloudProvider,
  EmailBackupFrequency,
  SettingName,
} from '@standardnotes/settings';
import { Switch } from '@/components/Switch';
import { convertStringifiedBooleanToBoolean } from '@/utils';
import { STRING_FAILED_TO_UPDATE_USER_SETTING } from '@/strings';

const providerData = [
  {
    name: CloudProvider.Dropbox,
  },
  {
    name: CloudProvider.Google,
  },
  {
    name: CloudProvider.OneDrive,
  },
];

type Props = {
  application: WebApplication;
};

export const CloudLink: FunctionComponent<Props> = ({ application }) => {
  const [isEntitledForCloudBackups, setIsEntitledForCloudBackups] =
    useState(false);
  const [isFailedCloudBackupEmailMuted, setIsFailedCloudBackupEmailMuted] =
    useState(true);
  const [isLoading, setIsLoading] = useState(false);

  const loadIsFailedCloudBackupEmailMutedSetting = useCallback(async () => {
    setIsLoading(true);

    try {
      const userSettings = await application.listSettings();
      setIsFailedCloudBackupEmailMuted(
        convertStringifiedBooleanToBoolean(
          userSettings[SettingName.MuteFailedCloudBackupsEmails] as string
        )
      );
    } catch (error) {
      console.error(error);
    } finally {
      setIsLoading(false);
    }
  }, [application]);

  useEffect(() => {
    const cloudBackupsFeatureStatus = application.getFeatureStatus(
      FeatureIdentifier.CloudLink
    );
    setIsEntitledForCloudBackups(
      cloudBackupsFeatureStatus === FeatureStatus.Entitled
    );
    loadIsFailedCloudBackupEmailMutedSetting();
  }, [application, loadIsFailedCloudBackupEmailMutedSetting]);

  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 toggleMuteFailedCloudBackupEmails = async () => {
    const previousValue = isFailedCloudBackupEmailMuted;
    setIsFailedCloudBackupEmailMuted(!isFailedCloudBackupEmailMuted);

    const updateResult = await updateSetting(
      SettingName.MuteFailedCloudBackupsEmails,
      `${!isFailedCloudBackupEmailMuted}`
    );
    if (!updateResult) {
      setIsFailedCloudBackupEmailMuted(previousValue);
    }
  };

  return (
    <PreferencesGroup>
      <PreferencesSegment>
        <Title>Cloud Backups</Title>
        {!isEntitledForCloudBackups && (
          <>
            <Text>
              A <span className={'font-bold'}>Plus</span> or{' '}
              <span className={'font-bold'}>Pro</span> subscription plan is
              required to enable Cloud Backups.{' '}
              <a target="_blank" href="https://standardnotes.com/features">
                Learn more
              </a>
              .
            </Text>
            <HorizontalSeparator classes="mt-3 mb-3" />
          </>
        )}
        <div
          className={
            isEntitledForCloudBackups
              ? ''
              : 'faded cursor-default pointer-events-none'
          }
        >
          <Text>
            Configure the integrations below to enable automatic daily backups
            of your encrypted data set to your third-party cloud provider.
          </Text>
          <div>
            <HorizontalSeparator classes={'mt-3 mb-3'} />
            <div>
              {providerData.map(({ name }) => (
                <>
                  <CloudBackupProvider
                    application={application}
                    providerName={name}
                  />
                  <HorizontalSeparator classes={'mt-3 mb-3'} />
                </>
              ))}
            </div>
          </div>

          <Subtitle>Email preferences</Subtitle>
          <div className="flex items-center justify-between mt-1">
            <div className="flex flex-col">
              <Text>Receive a notification email if a cloud backup fails.</Text>
            </div>
            {isLoading ? (
              <div className={'sk-spinner info small'} />
            ) : (
              <Switch
                onChange={toggleMuteFailedCloudBackupEmails}
                checked={!isFailedCloudBackupEmailMuted}
              />
            )}
          </div>
        </div>
      </PreferencesSegment>
    </PreferencesGroup>
  );
};