diff --git a/src/siteSettings/components/SiteSettingsMailing/SiteSettingsMailing.tsx b/src/siteSettings/components/SiteSettingsMailing/SiteSettingsMailing.tsx new file mode 100644 index 000000000..69d817967 --- /dev/null +++ b/src/siteSettings/components/SiteSettingsMailing/SiteSettingsMailing.tsx @@ -0,0 +1,100 @@ +import Card from "@material-ui/core/Card"; +import CardContent from "@material-ui/core/CardContent"; +import { Theme } from "@material-ui/core/styles"; +import TextField from "@material-ui/core/TextField"; +import Typography from "@material-ui/core/Typography"; +import { makeStyles } from "@material-ui/styles"; +import React from "react"; +import { FormattedMessage, useIntl } from "react-intl"; + +import CardTitle from "@saleor/components/CardTitle"; +import FormSpacer from "@saleor/components/FormSpacer"; +import Hr from "@saleor/components/Hr"; +import { FormErrors } from "@saleor/types"; +import { SiteSettingsPageFormData } from "../SiteSettingsPage"; + +interface SiteSettingsMailingProps { + data: SiteSettingsPageFormData; + errors: FormErrors<"email" | "passwordResetUrl">; + disabled: boolean; + onChange: (event: React.ChangeEvent) => void; +} + +const useStyles = makeStyles( + (theme: Theme) => ({ + cardHelperText: { + position: "relative", + top: -theme.spacing.unit + }, + cardHelperTextCaption: { + marginBottom: theme.spacing.unit * 2 + } + }), + { + name: "SiteSettingsMailing" + } +); + +const SiteSettingsMailing: React.FC = props => { + const { data, disabled, errors, onChange } = props; + const classes = useStyles(props); + const intl = useIntl(); + + return ( + + + + + + + + + + + +
+ + +
+
+ ); +}; +SiteSettingsMailing.displayName = "SiteSettingsMailing"; +export default SiteSettingsMailing; diff --git a/src/siteSettings/components/SiteSettingsMailing/index.ts b/src/siteSettings/components/SiteSettingsMailing/index.ts new file mode 100644 index 000000000..424ec5bea --- /dev/null +++ b/src/siteSettings/components/SiteSettingsMailing/index.ts @@ -0,0 +1,2 @@ +export { default } from "./SiteSettingsMailing"; +export * from "./SiteSettingsMailing"; diff --git a/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx b/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx index 6b90808de..890874836 100644 --- a/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx +++ b/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx @@ -1,4 +1,6 @@ +import { Theme } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; +import { makeStyles } from "@material-ui/styles"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -7,6 +9,7 @@ import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; import Container from "@saleor/components/Container"; import Form from "@saleor/components/Form"; import Grid from "@saleor/components/Grid"; +import Hr from "@saleor/components/Hr"; import PageHeader from "@saleor/components/PageHeader"; import SaveButtonBar from "@saleor/components/SaveButtonBar"; import useStateFromProps from "@saleor/hooks/useStateFromProps"; @@ -20,6 +23,7 @@ import { SiteSettings_shop } from "../../types/SiteSettings"; import SiteSettingsAddress from "../SiteSettingsAddress/SiteSettingsAddress"; import SiteSettingsDetails from "../SiteSettingsDetails/SiteSettingsDetails"; import SiteSettingsKeys from "../SiteSettingsKeys/SiteSettingsKeys"; +import SiteSettingsMailing from "../SiteSettingsMailing"; export interface SiteSettingsPageAddressFormData { city: string; @@ -36,7 +40,9 @@ export interface SiteSettingsPageFormData extends SiteSettingsPageAddressFormData { description: string; domain: string; + email: string; name: string; + passwordResetUrl: string; } export interface SiteSettingsPageProps { @@ -50,16 +56,30 @@ export interface SiteSettingsPageProps { onSubmit: (data: SiteSettingsPageFormData) => void; } -const SiteSettingsPage: React.StatelessComponent = ({ - disabled, - errors, - saveButtonBarState, - shop, - onBack, - onKeyAdd, - onKeyRemove, - onSubmit -}) => { +const useStyles = makeStyles( + (theme: Theme) => ({ + hr: { + gridColumnEnd: "span 2", + margin: `${theme.spacing.unit}px 0` + } + }), + { + name: "SiteSettingsPage" + } +); + +const SiteSettingsPage: React.FC = props => { + const { + disabled, + errors, + saveButtonBarState, + shop, + onBack, + onKeyAdd, + onKeyRemove, + onSubmit + } = props; + const classes = useStyles(props); const intl = useIntl(); const [displayCountry, setDisplayCountry] = useStateFromProps( maybe(() => shop.companyAddress.country.code, "") @@ -105,18 +125,51 @@ const SiteSettingsPage: React.StatelessComponent = ({ title={intl.formatMessage(commonMessages.generalInformations)} /> - - {intl.formatMessage(sectionNames.siteSettings)} - +
+ + {intl.formatMessage(sectionNames.siteSettings)} + + + + +
- - - +
+
+ + + + + + +
+ +
+
+ + + + + + + +
= ({ onChange={change} onCountryChange={handleCountryChange} /> - - - +
+
+ + + + + + +
shop.authorizationKeys)} @@ -148,5 +210,6 @@ const SiteSettingsPage: React.StatelessComponent = ({ ); }; + SiteSettingsPage.displayName = "SiteSettingsPage"; export default SiteSettingsPage;