@craftercms/studio-ui/components/AboutCrafterCMSView/AboutCrafterCMSView.js

Services, components, models & utils to build CrafterCMS authoring extensions.

/*
 * Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Lesser General Public License version 3 as published by
 * the Free Software Foundation.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

/*
 * Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License version 3 as published by
 * the Free Software Foundation.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
import React from 'react';
import GlobalAppToolbar from '../GlobalAppToolbar';
import { FormattedMessage } from 'react-intl';
import Paper from '@mui/material/Paper';
import useStyles from './styles';
import CrafterCMSLogo from '../../icons/CrafterCMSLogo';
import Box from '@mui/material/Box';
import Link from '@mui/material/Link';
import Typography from '@mui/material/Typography';
import { useSelection } from '../../hooks/useSelection';
import { useEnv } from '../../hooks/useEnv';
export function AboutCrafterCMSView() {
  const env = useEnv();
  const { classes } = useStyles();
  const localeBranch = useSelection((state) => state.uiConfig.locale);
  return React.createElement(
    Paper,
    { elevation: 0 },
    React.createElement(
      Box,
      { display: 'flex', flexDirection: 'column', height: 'calc(100vh - 215px)' },
      React.createElement(GlobalAppToolbar, {
        title: React.createElement(FormattedMessage, { id: 'global.about', defaultMessage: 'About' })
      }),
      React.createElement(
        Box,
        { display: 'flex', alignItems: 'center', justifyContent: 'center', flexGrow: [1] },
        React.createElement(
          Paper,
          { className: classes.paperRoot },
          React.createElement(CrafterCMSLogo, { width: 250, className: classes.logo }),
          React.createElement(
            'div',
            { className: classes.row },
            React.createElement(
              Typography,
              { variant: 'subtitle2', className: 'aboutLabel' },
              React.createElement(FormattedMessage, { id: 'about.versionNumber', defaultMessage: 'Version Number' }),
              ':'
            ),
            React.createElement(
              Typography,
              { variant: 'body2' },
              `${env.packageVersion}-${env.packageBuild?.substring(0, 6)}`
            )
          ),
          React.createElement(
            'div',
            { className: classes.row },
            React.createElement(
              Typography,
              { variant: 'subtitle2', className: 'aboutLabel' },
              React.createElement(FormattedMessage, { id: 'about.buildNumber', defaultMessage: 'Build Number' }),
              ':'
            ),
            React.createElement(Typography, { variant: 'body2' }, env.packageBuild)
          ),
          React.createElement(
            'div',
            { className: classes.row },
            React.createElement(
              Typography,
              { variant: 'subtitle2', className: 'aboutLabel' },
              React.createElement(FormattedMessage, { id: 'about.buildDate', defaultMessage: 'Build Date' }),
              ':'
            ),
            React.createElement(
              Typography,
              { variant: 'body2' },
              new Intl.DateTimeFormat(localeBranch.localeCode, localeBranch.dateTimeFormatOptions).format(
                new Date(env.packageBuildDate)
              )
            )
          ),
          React.createElement(
            'div',
            { className: classes.externalLink },
            React.createElement(
              Typography,
              { variant: 'body2' },
              React.createElement(FormattedMessage, {
                id: 'aboutView.attribution',
                defaultMessage: 'CrafterCMS is made possible by these other <a>open source software projects</a>.',
                values: {
                  a: (msg) =>
                    React.createElement(
                      Link,
                      {
                        href: `https://docs.craftercms.org/en/${env.packageVersion?.substr(0, 3)}/acknowledgements/index.html`,
                        target: '_blank'
                      },
                      msg
                    )
                }
              })
            )
          )
        )
      )
    )
  );
}
export default AboutCrafterCMSView;