first commit

common/resources/client/admin/settings/pages/localization-settings.tsx

@@ -0,0 +1,98 @@
+import {FormSelect, Option} from '../../../ui/forms/select/select';
+import {SettingsPanel} from '../settings-panel';
+import {useValueLists} from '../../../http/value-lists';
+import {Section} from '../../../ui/forms/listbox/section';
+import {FormRadio} from '../../../ui/forms/radio-group/radio';
+import {FormRadioGroup} from '../../../ui/forms/radio-group/radio-group';
+import {DateFormatPresets, FormattedDate} from '../../../i18n/formatted-date';
+import {FormSwitch} from '../../../ui/forms/toggle/switch';
+import {Trans} from '../../../i18n/trans';
+import {useCurrentDateTime} from '../../../i18n/use-current-date-time';
+import {useTrans} from '@common/i18n/use-trans';
+import {message} from '@common/i18n/message';
+
+export function LocalizationSettings() {
+  const {data} = useValueLists(['timezones', 'localizations']);
+  const today = useCurrentDateTime();
+  const {trans} = useTrans();
+  return (
+    <SettingsPanel
+      title={<Trans message="Localization" />}
+      description={
+        <Trans message="Configure global date, time and language settings." />
+      }
+    >
+      <FormSelect
+        className="mb-30"
+        required
+        name="client.dates.default_timezone"
+        showSearchField
+        selectionMode="single"
+        label={<Trans message="Default timezone" />}
+        searchPlaceholder={trans(message('Search timezones'))}
+        description={
+          <Trans message="Which timezone should be selected by default for new users and guests." />
+        }
+      >
+        <Option key="auto" value="auto">
+          <Trans message="Auto" />
+        </Option>
+        {Object.entries(data?.timezones || {}).map(([groupName, timezones]) => (
+          <Section key={groupName} label={groupName}>
+            {timezones.map(timezone => (
+              <Option key={timezone.value} value={timezone.value}>
+                {timezone.text}
+              </Option>
+            ))}
+          </Section>
+        ))}
+      </FormSelect>
+      <FormSelect
+        name="client.locale.default"
+        className="mb-30"
+        selectionMode="single"
+        label={<Trans message="Default language" />}
+        description={
+          <Trans message="Which localization should be selected by default for new users and guests." />
+        }
+      >
+        <Option key="auto" value="auto">
+          <Trans message="Auto" />
+        </Option>
+        {(data?.localizations || []).map(locale => (
+          <Option key={locale.language} value={locale.language} capitalizeFirst>
+            {locale.name}
+          </Option>
+        ))}
+      </FormSelect>
+      <FormRadioGroup
+        required
+        className="mb-30"
+        size="sm"
+        name="client.dates.format"
+        orientation="vertical"
+        label={<Trans message="Date verbosity" />}
+        description={
+          <Trans message="Default verbosity for all dates displayed across the site. Month/day order and separators will be adjusted automatically, based on user's locale." />
+        }
+      >
+        <FormRadio key="auto" value="auto">
+          <Trans message="Auto" />
+        </FormRadio>
+        {Object.entries(DateFormatPresets).map(([format, options]) => (
+          <FormRadio key={format} value={format}>
+            <FormattedDate date={today} options={options} />
+          </FormRadio>
+        ))}
+      </FormRadioGroup>
+      <FormSwitch
+        name="client.i18n.enable"
+        description={
+          <Trans message="If disabled, site will always be shown in default language and user will not be able to change their locale." />
+        }
+      >
+        <Trans message="Enable translations" />
+      </FormSwitch>
+    </SettingsPanel>
+  );
+}