import React from 'react';
import { c } from 'ttag';
import { LanguageSection, ThemesSection, SettingsPropsShared, EarlyAccessSection } from 'react-components';
import locales from 'proton-shared/lib/i18n/locales';

import PrivateMainSettingsAreaWithPermissions from '../components/page/PrivateMainSettingsAreaWithPermissions';

export const getGeneralPage = () => {
    return {
        text: c('Title').t`General`,
        to: '/general',
        icon: 'general',
        subsections: [
            {
                text: c('Title').t`Language`,
                id: 'language',
            },
            {
                text: c('Title').t`Themes`,
                id: 'themes',
            },
            {
                text: c('Title').t`Early Access`,
                id: 'early-access',
            },
        ],
    };
};

const GeneralContainer = ({ setActiveSection, location }: SettingsPropsShared) => {
    return (
        <PrivateMainSettingsAreaWithPermissions
            location={location}
            config={getGeneralPage()}
            setActiveSection={setActiveSection}
        >
            <LanguageSection locales={locales} />
            <ThemesSection />
            <EarlyAccessSection />
        </PrivateMainSettingsAreaWithPermissions>
    );
};

export default GeneralContainer;

import React from 'react';
import { c } from 'ttag';
import { LanguageSection, ThemesSection, SettingsPropsShared } from 'react-components';
import locales from 'proton-shared/lib/i18n/locales';

import PrivateMainSettingsAreaWithPermissions from '../components/page/PrivateMainSettingsAreaWithPermissions';

export const getGeneralPage = () => {
    return {
        text: c('Title').t`General`,
        to: '/general',
        icon: 'general',
        subsections: [
            {
                text: c('Title').t`Language`,
                id: 'language',
            },
            {
                text: c('Title').t`Themes`,
                id: 'themes',
            },
        ],
    };
};

const GeneralContainer = ({ setActiveSection, location }: SettingsPropsShared) => {
    return (
        <PrivateMainSettingsAreaWithPermissions
            location={location}
            config={getGeneralPage()}
            setActiveSection={setActiveSection}
        >
            <LanguageSection locales={locales} />
            <ThemesSection />
        </PrivateMainSettingsAreaWithPermissions>
    );
};

export default GeneralContainer;

--- 
+++ 
@@ -1,6 +1,6 @@
 import React from 'react';
 import { c } from 'ttag';
-import { LanguageSection, ThemesSection, SettingsPropsShared } from 'react-components';
+import { LanguageSection, ThemesSection, SettingsPropsShared, EarlyAccessSection } from 'react-components';
 import locales from 'proton-shared/lib/i18n/locales';
 
 import PrivateMainSettingsAreaWithPermissions from '../components/page/PrivateMainSettingsAreaWithPermissions';
@@ -19,6 +19,10 @@
                 text: c('Title').t`Themes`,
                 id: 'themes',
             },
+            {
+                text: c('Title').t`Early Access`,
+                id: 'early-access',
+            },
         ],
     };
 };
@@ -32,6 +36,7 @@
         >
             <LanguageSection locales={locales} />
             <ThemesSection />
+            <EarlyAccessSection />
         </PrivateMainSettingsAreaWithPermissions>
     );
 };
Add early access to general settings
