How to use the @webiny/app/i18n.i18n.namespace function in @webiny/app

// @flow
import React from "react";
import { css } from "emotion";
import { Typography } from "@webiny/ui/Typography";
import { I18NValue } from "@webiny/app-i18n/components";
import {
    Dialog,
    DialogBody,
    DialogHeader,
    DialogHeaderTitle,
    DialogCancel,
    DialogFooter
} from "@webiny/ui/Dialog";

import { i18n } from "@webiny/app/i18n";
const t = i18n.namespace("FormEditor.FormSubmissionDialog");

const dialogBody = css({
    "&.mdc-dialog__body": {
        marginTop: 0,
        padding: "25",
        div: {
            padding: "5px 0"
        }
    }
});

type Props = {
    formSubmission: Object,
    onClose: Function
};

// @flow
// $FlowFixMe
import React, { useEffect, useState } from "react";
import { Tab } from "@webiny/ui/Tabs";
import styled from "@emotion/styled";
import { Elevation } from "@webiny/ui/Elevation";
import FormPreview from "./FormPreview";
import Header from "./Header";
import { CircularProgress } from "@webiny/ui/Progress";
import { i18n } from "@webiny/app/i18n";
import type { FormDetailsPluginType } from "@webiny/app-forms/types";

const t = i18n.namespace("FormsApp.FormDetails.PreviewContent");

const RenderBlock = styled("div")({
    position: "relative",
    zIndex: 0,
    backgroundColor: "var(--mdc-theme-background)",
    height: "100%",
    overflow: "scroll",
    padding: 25
});

const PreviewContentTab = props => {
    const [revisionId, setRevisionId] = useState();
    useEffect(() => {
        setRevisionId(props.form.revisions[0].id);
    }, [props.form.id]);

// @flow
import React from "react";
import { Mutation } from "react-apollo";
import { Form } from "@webiny/form";
import { Input } from "@webiny/ui/Input";
import get from "lodash.get";
import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
import { CircularProgress } from "@webiny/ui/Progress";
import { Grid, Cell } from "@webiny/ui/Grid";
import { UPDATE_FORMS_SETTINGS } from "./graphql";
import { useFormEditor } from "@webiny/app-forms/admin/components/FormEditor/Context";
import { validation } from "@webiny/validation";
import { i18n } from "@webiny/app/i18n";
const t = i18n.namespace("Forms.ReCaptchaSettingsDialog");

import { Dialog, DialogTitle, DialogContent, DialogActions } from "@webiny/ui/Dialog";
import { ButtonDefault } from "@webiny/ui/Button";

type Props = {
    open: boolean,
    onClose: Function,
    onSubmit: Function,
    reCaptchaSettings: Object
};

const ReCaptchaSettingsDialog = ({ open, onClose, reCaptchaSettings, onSubmit }: Props) => {
    // $FlowFixMe
    const [loading, setLoading] = React.useState(false);
    const { setData } = useFormEditor();
    const { showSnackbar } = useSnackbar();

Dialog,
    DialogBody,
    DialogHeader,
    DialogHeaderTitle,
    DialogCancel,
    DialogFooter,
    DialogFooterButton
} from "@webiny/ui/Dialog";
import { Form } from "@webiny/form";
import { getPlugins } from "@webiny/plugins";
import { Tabs, Tab } from "@webiny/ui/Tabs";
import GeneralTab from "./EditFieldDialog/GeneralTab";
import ValidatorsTab from "./EditFieldDialog/ValidatorsTab";
import FieldTypeSelector from "./EditFieldDialog/FieldTypeSelector";
import { i18n } from "@webiny/app/i18n";
const t = i18n.namespace("FormEditor.EditFieldDialog");
import { useFormEditor } from "@webiny/app-forms/admin/components/FormEditor/Context";
import { useI18N } from "@webiny/app-i18n/context";

const dialogBody = css({
    "&.mdc-dialog__body": {
        marginTop: 0,
        padding: "0"
    }
});

const FieldTypeList = styled("div")({
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    flexWrap: "wrap",
    paddingTop: 25,

import {
    DataList,
    ScrollList,
    ListItem,
    ListItemText,
    ListItemTextSecondary,
    ListItemMeta,
    ListActions,
    ListItemGraphic
} from "@webiny/ui/List";

import { DeleteIcon } from "@webiny/ui/List/DataList/icons";
import { Avatar } from "@webiny/ui/Avatar";

const t = i18n.namespace("Security.UsersDataList");

const UsersDataList = ({ dataList, location, history, security, deleteRecord }) => {
    const query = new URLSearchParams(location.search);

    return (

import { useI18N } from "@webiny/app-i18n/hooks/useI18N";
import { SplitView, LeftPanel, RightPanel } from "@webiny/app-admin/components/SplitView";
import { List, ListItem } from "@webiny/ui/List";
import { Typography } from "@webiny/ui/Typography";
import { ButtonPrimary, ButtonIcon } from "@webiny/ui/Button";
import { ReactComponent as DoneIcon } from "./icons/baseline-done-24px.svg";

import {
    SimpleForm,
    SimpleFormContent,
    SimpleFormHeader
} from "@webiny/app-admin/components/SimpleForm";
import { listItem, ListItemTitle, listStyle, TitleContent } from "./I18NInputLocalesOverlayStyled";

import { i18n } from "@webiny/app/i18n";
const t = i18n.namespace("@webiny/app-i18n/components/translations-overlay");

type Props = {
    onChange: ?Function,
    images?: boolean,
    multiple?: boolean,
    accept?: Array,
    children: ({ showI18nInputDialogg: Function }) => React.Node,
    maxSize?: string,
    multipleMaxCount?: number,
    multipleMaxSize?: string
};

const Content = ({ richText, onClose, values, onSubmit }: Props) => {
    const { getLocales } = useI18N();
    const [activeLocaleIndex, setActiveLocaleIndex] = React.useState(0);

List,
    ListItem,
    ListItemText,
    ListTextOverline,
    ListItemMeta,
    ListSelectBox
} from "@webiny/ui/List";
import FormSubmissionDialog from "./FormSubmissionDialog";
import { ReactComponent as ImportExport } from "./icons/round-cloud_download-24px.svg";
import { IconButton } from "@webiny/ui/Button";
import { EXPORT_FORM_SUBMISSIONS } from "@webiny/app-forms/admin/viewsGraphql";
import { Mutation } from "react-apollo";
import { Tooltip } from "@webiny/ui/Tooltip";
import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
import { i18n } from "@webiny/app/i18n";
const t = i18n.namespace("FormsApp.FormsDataList");

const rightAlign = css({
    alignItems: "flex-end !important"
});

const FullName = ({ submission }) => {
    const {
        data: { firstName, lastName, email }
    } = submission;

    const output = [firstName, lastName, email && `<${email}>`].filter(Boolean).join(" ");
    return output || "N/A";
};

const FormVersion = ({ submission }) => {
    return `Form revision #${submission.form.revision.version}`;

import React from "react";
import { css } from "emotion";
import useReactRouter from "use-react-router";
import { Menu, MenuItem } from "@webiny/ui/Menu";
import { ButtonDefault } from "@webiny/ui/Button";
import { Icon } from "@webiny/ui/Icon";
import { Typography } from "@webiny/ui/Typography";
import { ReactComponent as DownButton } from "./icons/round-arrow_drop_down-24px.svg";
import { useFormEditor } from "@webiny/app-forms/admin/components/FormEditor/Context";

import { i18n } from "@webiny/app/i18n";
const t = i18n.namespace("FormEditor.RevisionsMenu");

const buttonStyle = css({
    "&.mdc-button": {
        color: "var(--mdc-theme-text-primary-on-background) !important"
    }
});

const menuList = css({
    ".mdc-list-item": {
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "baseline",
        textAlign: "left"
    }
});

import { withHandlers, compose } from "recompose";
import { withSnackbar } from "@webiny/app-admin/components";
import { get, upperFirst } from "lodash";
import {
    DataList,
    List,
    ListItem,
    ListItemText,
    ListItemTextSecondary,
    ListTextOverline,
    ListItemMeta,
    ListActions
} from "@webiny/ui/List";

import { i18n } from "@webiny/app/i18n";
const t = i18n.namespace("FormsApp.FormsDataList");

const rightAlign = css({
    alignItems: "flex-end !important"
});

const FormsDataList = props => {
    const { dataList, location, history, deleteRecord, gqlCreate, showSnackbar } = props;
    const query = new URLSearchParams(location.search);

    return (

import { Typography } from "@webiny/ui/Typography";
import {
    Footer,
    alignRight,
    InnerContent,
    LoginContent,
    Logo,
    Title,
    Wrapper,
    errorMessage
} from "./Login/StyledComponents";
import logoOrange from "./../assets/images/logo_orange.png";
import { loginMutation } from "./Login/graphql";
import { CircularProgress } from "@webiny/ui/Progress";

const t = i18n.namespace("Webiny.Admin.Login");

const Login = (props: Object) => {
    const { login, error, loading }: { loading: boolean, login: Function, error?: Object } = props;
    return (
        
            
                
                <form>
                    {({ form, Bind }) =&gt; (
                        
                            
                                
                                    
                                        {loading &amp;&amp; }
                                        <title>
                                            &lt;h1&gt;</title></form>