diff --git a/scm-ui/public/images/iconCommunitySupport.png b/scm-ui/public/images/iconCommunitySupport.png new file mode 100644 index 0000000000..7a080903a0 Binary files /dev/null and b/scm-ui/public/images/iconCommunitySupport.png differ diff --git a/scm-ui/public/images/iconEnterpriseSupport.png b/scm-ui/public/images/iconEnterpriseSupport.png new file mode 100644 index 0000000000..0eadfaf85b Binary files /dev/null and b/scm-ui/public/images/iconEnterpriseSupport.png differ diff --git a/scm-ui/public/locales/de/admin.json b/scm-ui/public/locales/de/admin.json index dea74053e9..54ae1ab91a 100644 --- a/scm-ui/public/locales/de/admin.json +++ b/scm-ui/public/locales/de/admin.json @@ -6,8 +6,18 @@ "settingsNavLink": "Einstellungen", "generalNavLink": "Generell" }, - "information": { - "currentAppVersion": "Aktuelle Software-Versionsnummer" + "info": { + "currentAppVersion": "Aktuelle Software-Versionsnummer", + "communityTitle": "Community Support", + "communityIconAlt": "Community Support Icon", + "communityInfo": "Das SCM-Manager Support-Team steht für allgemeine Fragen, die Meldung von Fehlern sowie Anfragen für Features gerne für Sie über die offiziellen Kanäle bereit.", + "communityButton": "Unser Team kontaktieren", + "enterpriseTitle": "Enterprise Support", + "enterpriseIconAlt": "Enterprise Support Icon", + "enterpriseInfo": "Sie benötigen Unterstützung bei der Integration von SCM-Manager in Ihre Prozesse, bei der Anpassung des Tools auf Ihre Anforderungen oder einfach ein Service Level Agreement (SLA)?", + "enterprisePartner": "Treten Sie mit unserem Entwicklungs-Partner Cloudogu in Kontakt! Das Team freut sich auf den Austausch über Ihre individuellen Anforderungen und erstellt Ihnen gerne ein maßgeschneidertes Angebot.", + "enterpriseLink": "https://cloudogu.com/de/scm-manager-enterprise/", + "enterpriseButton": "Enterprise Support anfragen" } }, "plugins": { diff --git a/scm-ui/public/locales/en/admin.json b/scm-ui/public/locales/en/admin.json index a5697ea4fe..2402f21423 100644 --- a/scm-ui/public/locales/en/admin.json +++ b/scm-ui/public/locales/en/admin.json @@ -6,8 +6,18 @@ "settingsNavLink": "Settings", "generalNavLink": "General" }, - "information": { - "currentAppVersion": "Current Application Version" + "info": { + "currentAppVersion": "Current Application Version", + "communityTitle": "Community Support", + "communityIconAlt": "Community Support Icon", + "communityInfo": "Contact the SCM-Manager support team for questions about SCM-Manager, to report bugs or to request features through the official channels.", + "communityButton": "Contact our team", + "enterpriseTitle": "Enterprise Support", + "enterpriseIconAlt": "Enterprise Support Icon", + "enterpriseInfo": "You require support with the integration of SCM-Manager into your processes, with the customization of the tool or simply a service level agreement (SLA)?", + "enterprisePartner": "Contact our development partner Cloudogu! Their team is looking forward to discussing your individual requirements with you and will be more than happy to give you a quote.", + "enterpriseLink": "https://cloudogu.com/en/scm-manager-enterprise/", + "enterpriseButton": "Request Enterprise Support" } }, "plugins": { diff --git a/scm-ui/src/admin/containers/AdminDetails.js b/scm-ui/src/admin/containers/AdminDetails.js index a7a135aa97..803524abed 100644 --- a/scm-ui/src/admin/containers/AdminDetails.js +++ b/scm-ui/src/admin/containers/AdminDetails.js @@ -1,9 +1,11 @@ // @flow import React from "react"; -import { connect } from "react-redux"; -import { translate } from "react-i18next"; -import { Loading, Title, Subtitle } from "@scm-manager/ui-components"; -import { getAppVersion } from "../../modules/indexResource"; +import {connect} from "react-redux"; +import injectSheet from "react-jss"; +import {translate} from "react-i18next"; +import classNames from "classnames"; +import {Image, Loading, Subtitle, Title} from "@scm-manager/ui-components"; +import {getAppVersion} from "../../modules/indexResource"; type Props = { loading: boolean, @@ -11,22 +13,71 @@ type Props = { version: string, - // context objects + // context props + classes: any, t: string => string }; +const styles = { + boxShadow: { + boxShadow: "0 2px 3px rgba(40, 177, 232, 0.1), 0 0 0 2px rgb(40, 177, 232, 0.2)" + }, + boxTitle: { + fontWeight: "500 !important" + }, + imagePadding: { + padding: "0.2rem 0.4rem" + } +}; + class AdminDetails extends React.Component { render() { - const { t, loading } = this.props; + const {loading, classes, t} = this.props; if (loading) { - return ; + return ; } return ( <> - - <Subtitle subtitle={this.props.version} /> + <Title title={t("admin.info.currentAppVersion")}/> + <Subtitle subtitle={this.props.version}/> + <div className={classNames("box", classes.boxShadow)}> + <article className="media"> + <div className={classNames("media-left", classes.imagePadding)}> + <Image + src="/images/iconCommunitySupport.png" + alt={t("admin.info.communityIconAlt")} + /> + </div> + <div className="media-content"> + <div className="content"> + <h3 className={classes.boxTitle}>{t("admin.info.communityTitle")}</h3> + <p>{t("admin.info.communityInfo")}</p> + <a className="button is-info is-pulled-right" target="_blank" + href="https://scm-manager.org/support/">{t("admin.info.communityButton")}</a> + </div> + </div> + </article> + </div> + <div className={classNames("box", classes.boxShadow)}> + <article className="media"> + <div className={classNames("media-left", classes.imagePadding)}> + <Image + src="/images/iconEnterpriseSupport.png" + alt={t("admin.info.enterpriseIconAlt")} + /> + </div> + <div className="media-content"> + <div className="content"> + <h3 className={classes.boxTitle}>{t("admin.info.enterpriseTitle")}</h3> + <p>{t("admin.info.enterpriseInfo")}<br/><strong>{t("admin.info.enterprisePartner")}</strong></p> + <a className="button is-info is-pulled-right is-normal" target="_blank" + href={t("admin.info.enterpriseLink")}>{t("admin.info.enterpriseButton")}</a> + </div> + </div> + </article> + </div> </> ); } @@ -39,4 +90,4 @@ const mapStateToProps = (state: any) => { }; }; -export default connect(mapStateToProps)(translate("admin")(AdminDetails)); +export default connect(mapStateToProps)(injectSheet(styles)(translate("admin")(AdminDetails)));