Add mailing configuration

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<any>) => 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<SiteSettingsMailingProps> = props => {
+  const { data, disabled, errors, onChange } = props;
+  const classes = useStyles(props);
+  const intl = useIntl();
+
+  return (
+    <Card>
+      <CardTitle
+        title={intl.formatMessage({
+          defaultMessage: "Mailing Configuration",
+          description: "section header"
+        })}
+      />
+      <CardContent>
+        <Typography className={classes.cardHelperText}>
+          <FormattedMessage
+            defaultMessage="Mailing Configuration"
+            description="helper text"
+            id="siteSettingsMailingHelperText"
+          />
+        </Typography>
+        <Typography className={classes.cardHelperTextCaption} variant="body1">
+          <FormattedMessage defaultMessage="Configurate your email address from which all automatic emails will be sent to your customers." />
+        </Typography>
+        <TextField
+          disabled={disabled}
+          error={!!errors.email}
+          fullWidth
+          name="email"
+          label={intl.formatMessage({
+            defaultMessage: "Mailing email address"
+          })}
+          helperText={errors.email}
+          value={data.name}
+          onChange={onChange}
+        />
+        <FormSpacer />
+        <Hr />
+        <FormSpacer />
+        <TextField
+          disabled={disabled}
+          error={!!errors.passwordResetUrl}
+          fullWidth
+          name="passwordResetUrl"
+          label={intl.formatMessage({
+            defaultMessage: "URL address"
+          })}
+          helperText={
+            errors.passwordResetUrl ||
+            intl.formatMessage({
+              defaultMessage:
+                "This URL will be used as a main URL for password resets. It will be sent via email."
+            })
+          }
+          value={data.domain}
+          onChange={onChange}
+        />
+      </CardContent>
+    </Card>
+  );
+};
+SiteSettingsMailing.displayName = "SiteSettingsMailing";
+export default SiteSettingsMailing;

src/siteSettings/components/SiteSettingsMailing/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./SiteSettingsMailing";
+export * from "./SiteSettingsMailing";

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<SiteSettingsPageProps> = ({
+const useStyles = makeStyles(
-  disabled,
+  (theme: Theme) => ({
-  errors,
+    hr: {
-  saveButtonBarState,
+      gridColumnEnd: "span 2",
-  shop,
+      margin: `${theme.spacing.unit}px 0`
-  onBack,
+    }
-  onKeyAdd,
+  }),
-  onKeyRemove,
+  {
-  onSubmit
+    name: "SiteSettingsPage"
-}) => {
+  }
+);
+
+const SiteSettingsPage: React.FC<SiteSettingsPageProps> = 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<SiteSettingsPageProps> = ({
               title={intl.formatMessage(commonMessages.generalInformations)}
             />
             <Grid variant="inverted">
-              <Typography variant="h6">
+              <div>
-                {intl.formatMessage(sectionNames.siteSettings)}
+                <Typography>
-              </Typography>
+                  {intl.formatMessage(sectionNames.siteSettings)}
+                </Typography>
+                <Typography variant="body1">
+                  <FormattedMessage defaultMessage="These are general information about your store. They define what is the URL of your store and what is shown in browsers taskbar." />
+                </Typography>
+              </div>
               <SiteSettingsDetails
                 data={data}
                 errors={formErrors}
                 disabled={disabled}
                 onChange={change}
               />
-              <Typography variant="h6">
+              <Hr className={classes.hr} />
-                <FormattedMessage defaultMessage="Company information" />
+              <div>
-              </Typography>
+                <Typography>
+                  <FormattedMessage
+                    defaultMessage="Mailing Configuration"
+                    description="section header"
+                  />
+                </Typography>
+                <Typography variant="body1">
+                  <FormattedMessage defaultMessage="This where you will find all of the settings determining your stores e-mails. You can determine main email address and some of the contents of your emails." />
+                </Typography>
+              </div>
+              <SiteSettingsMailing
+                data={data}
+                errors={formErrors}
+                disabled={disabled}
+                onChange={change}
+              />
+              <Hr className={classes.hr} />
+              <div>
+                <Typography>
+                  <FormattedMessage
+                    defaultMessage="Company Information"
+                    description="section header"
+                  />
+                </Typography>
+                <Typography variant="body1">
+                  <FormattedMessage defaultMessage="This adress will be used to generate invoices and calculate shipping rates." />
+                  <FormattedMessage defaultMessage="Email adress you provide here will be used as a contact adress for your customers." />
+                </Typography>
+              </div>
               <SiteSettingsAddress
                 data={data}
                 displayCountry={displayCountry}
@@ -126,9 +179,18 @@ const SiteSettingsPage: React.StatelessComponent<SiteSettingsPageProps> = ({
                 onChange={change}
                 onCountryChange={handleCountryChange}
               />
-              <Typography variant="h6">
+              <Hr className={classes.hr} />
-                <FormattedMessage defaultMessage="Authentication keys" />
+              <div>
-              </Typography>
+                <Typography>
+                  <FormattedMessage
+                    defaultMessage="Authentication Methods"
+                    description="section header"
+                  />
+                </Typography>
+                <Typography variant="body1">
+                  <FormattedMessage defaultMessage="Authentication method defines additional ways that customers can log in to your ecommerce. " />
+                </Typography>
+              </div>
               <SiteSettingsKeys
                 disabled={disabled}
                 keys={maybe(() => shop.authorizationKeys)}
@@ -148,5 +210,6 @@ const SiteSettingsPage: React.StatelessComponent<SiteSettingsPageProps> = ({
     </Form>
   );
 };
+
 SiteSettingsPage.displayName = "SiteSettingsPage";
 export default SiteSettingsPage;