[CORL-406] Tenant Locale Selection (#2450)

* feat: added preload config

* feat: support changing locale

* fix: name case

* fix: removed unused code

* feat: added translations for default reactions

* fix: do not translate icon

* fix: shorter i18n keys

src/core/client/install/App/InstallWizard.tsx

@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 
+import { LanguageCode } from "coral-common/helpers/i18n";
 import { InstallInput } from "coral-framework/rest";
 
 import { InstallMutation, withInstallMutation } from "./InstallMutation";
@@ -8,6 +9,7 @@ import CreateYourAccountStep from "./steps/CreateYourAccountStep";
 import FinalStep from "./steps/FinalStep";
 import InitialStep from "./steps/InitialStep";
 import PermittedDomainsStep from "./steps/PermittedDomainsStep";
+import SelectLanguageStep from "./steps/SelectLanguageStep";
 import Wizard from "./Wizard";
 
 interface FormData {
@@ -19,6 +21,7 @@ interface FormData {
   password: string;
   confirmPassword: string;
   allowedDomains: string[];
+  locale: LanguageCode;
 }
 
 interface InstallWizardState {
@@ -35,6 +38,7 @@ function shapeFinalData(data: FormData): InstallInput {
     username,
     password,
     email,
+    locale,
   } = data;
 
   return {
@@ -45,6 +49,7 @@ function shapeFinalData(data: FormData): InstallInput {
         url: organizationURL,
       },
       allowedDomains,
+      locale,
     },
     user: {
       username,
@@ -70,6 +75,7 @@ class InstallWizard extends Component<Props, InstallWizardState> {
       password: "",
       confirmPassword: "",
       allowedDomains: [],
+      locale: "en-US" as LanguageCode,
     },
   };
 
@@ -99,6 +105,12 @@ class InstallWizard extends Component<Props, InstallWizardState> {
     return (
       <Wizard currentStep={this.state.step}>
         <InitialStep onGoToNextStep={this.handleGoToNextStep} />
+        <SelectLanguageStep
+          data={this.state.data}
+          onSaveData={this.handleSaveData}
+          onGoToNextStep={this.handleGoToNextStep}
+          onGoToPreviousStep={this.handleGoToPreviousStep}
+        />
         <CreateYourAccountStep
           data={this.state.data}
           onSaveData={this.handleSaveData}

src/core/client/install/App/Wizard.tsx

@@ -30,6 +30,11 @@ class Wizard extends Component<WizardProps> {
         {currentStep !== 0 && currentStep !== wizardChildren.length - 1 && (
           <StepBar currentStep={currentStep - 1} className={styles.stepBar}>
             <Step hidden>Start</Step>
+            <Step>
+              <Localized id="install-selectLanguage-stepTitleSelect">
+                <span>Select Language</span>
+              </Localized>
+            </Step>
             <Step>
               <Localized id="install-createYourAccount-stepTitle">
                 <span>Create Admin Account</span>

src/core/client/install/App/steps/CreateYourAccountStep.tsx

@@ -26,6 +26,7 @@ import {
   Typography,
 } from "coral-ui/components";
 
+import BackButton from "./BackButton";
 import NextButton from "./NextButton";
 
 interface FormProps {
@@ -188,8 +189,12 @@ class CreateYourAccountStep extends Component<Props> {
                 )}
               </Field>
 
-              <Flex direction="row-reverse">
+              <Flex direction="row-reverse" itemGutter>
                 <NextButton submitting={submitting} />
+                <BackButton
+                  submitting={submitting}
+                  onGoToPreviousStep={this.props.onGoToPreviousStep}
+                />
               </Flex>
             </HorizontalGutter>
           </form>

src/core/client/install/App/steps/SelectLanguageStep.tsx

@@ -0,0 +1,93 @@
+import { Localized } from "fluent-react/compat";
+import React, { FunctionComponent, useCallback } from "react";
+import { Field, Form } from "react-final-form";
+
+import { LanguageCode } from "coral-common/helpers/i18n";
+import { LocaleField } from "coral-framework/components";
+import { useCoralContext } from "coral-framework/lib/bootstrap";
+import { OnSubmit, ValidationMessage } from "coral-framework/lib/form";
+import { required } from "coral-framework/lib/validation";
+import {
+  CallOut,
+  Flex,
+  FormField,
+  HorizontalGutter,
+  InputLabel,
+  Typography,
+} from "coral-ui/components";
+
+import NextButton from "./NextButton";
+
+interface FormProps {
+  locale: string;
+}
+
+interface Props {
+  onGoToNextStep: () => void;
+  onGoToPreviousStep: () => void;
+  data: FormProps;
+  onSaveData: (newData: FormProps) => void;
+}
+
+const SelectLanguageStep: FunctionComponent<Props> = props => {
+  const { changeLocale } = useCoralContext();
+  const onSubmit = useCallback<OnSubmit<FormProps>>(
+    async (input, form) => {
+      props.onSaveData(input);
+      await changeLocale(input.locale as LanguageCode);
+      return props.onGoToNextStep();
+    },
+    [changeLocale, props.onSaveData, props.onGoToNextStep]
+  );
+
+  return (
+    <Form
+      onSubmit={onSubmit}
+      initialValues={{
+        locale: props.data.locale,
+      }}
+    >
+      {({ handleSubmit, submitting, submitError }) => (
+        <form autoComplete="off" onSubmit={handleSubmit}>
+          <HorizontalGutter size="double">
+            <Localized id="install-selectLanguage-selectLanguage">
+              <Typography variant="heading1" align="center">
+                Select language for Coral
+              </Typography>
+            </Localized>
+
+            <Localized id="install-selectLanguage-description">
+              <Typography variant="bodyCopy" align="center">
+                Choose the language to be used during the installation process.
+                This will also be the default language for your Coral community.
+              </Typography>
+            </Localized>
+
+            {submitError && (
+              <CallOut color="error" fullWidth>
+                {submitError}
+              </CallOut>
+            )}
+
+            <Field name="locale" validate={required}>
+              {({ input, meta }) => (
+                <FormField>
+                  <Localized id="install-selectLanguage-language">
+                    <InputLabel>Language</InputLabel>
+                  </Localized>
+                  <LocaleField disabled={submitting} fullWidth {...input} />
+                  <ValidationMessage meta={meta} fullWidth />
+                </FormField>
+              )}
+            </Field>
+            <Flex direction="row-reverse">
+              <NextButton submitting={submitting} />
+            </Flex>
+          </HorizontalGutter>
+        </form>
+      )}
+    </Form>
+  );
+};
+
+export default SelectLanguageStep;

src/core/client/install/index.tsx

@@ -12,7 +12,6 @@ import "coral-ui/theme/variables.css";
 async function main() {
   const ManagedCoralContextProvider = await createManaged({
     localesData,
-    userLocales: navigator.languages,
   });
 
   const Index: FunctionComponent = () => (