[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/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;