Merge branch 'master' into ref/use-apollo-hooks

CHANGELOG.md

@@ -8,6 +8,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Fix tax settings updating - #243 by @dominik-zeglen
 - Add secret fields in plugin configuration - #246 by @dominik-zeglen
 - Fix subcategories pagination - #249 by @dominik-zeglen
+- Update customer's details page design - #248 by @dominik-zeglen
 - Use Apollo Hooks - #254 by @dominik-zeglen
 
 ## 2.0.0

_redirects

@@ -0,0 +1,3 @@
+# Redirect rules for Netlify
+
+/*    /index.html   200

locale/messages.pot

@@ -1,6 +1,6 @@
 msgid ""
 msgstr ""
-"POT-Creation-Date: 2019-11-08T10:47:25.155Z\n"
+"POT-Creation-Date: 2019-11-13T13:13:30.128Z\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "MIME-Version: 1.0\n"
@@ -127,6 +127,14 @@ msgctxt "time during voucher is active, header"
 msgid "Active Dates"
 msgstr ""
 
+#: build/locale/src/customers/components/CustomerDetails/CustomerDetails.json
+#. [src.customers.components.CustomerDetails.3298169382] - section subheader
+#. defaultMessage is:
+#. Active member since {date}
+msgctxt "section subheader"
+msgid "Active member since {date}"
+msgstr ""
+
 #: build/locale/src/home/components/HomeActivityCard/HomeActivityCard.json
 #. [homeActivityCardHeader] - header
 #. defaultMessage is:
@@ -2103,6 +2111,14 @@ msgctxt "subheader"
 msgid "Contact Information"
 msgstr ""
 
+#: build/locale/src/customers/components/CustomerInfo/CustomerInfo.json
+#. [src.customers.components.CustomerInfo.778526801] - customer contact section, header
+#. defaultMessage is:
+#. Contact Informations
+msgctxt "customer contact section, header"
+msgid "Contact Informations"
+msgstr ""
+
 #: build/locale/src/pages/components/PageInfo/PageInfo.json
 #. [src.pages.components.PageInfo.1116746286] - page content
 #. defaultMessage is:
@@ -2795,14 +2811,6 @@ msgctxt "description"
 msgid "Customer password reset URL"
 msgstr ""
 
-#: build/locale/src/customers/components/CustomerDetails/CustomerDetails.json
-#. [src.customers.components.CustomerDetails.2200102325] - section subheader
-#. defaultMessage is:
-#. Customer since: {date}
-msgctxt "section subheader"
-msgid "Customer since: {date}"
-msgstr ""
-
 #: build/locale/src/intl.json
 #. [src.customers] - customers section name
 #. defaultMessage is:
@@ -5943,6 +5951,14 @@ msgctxt "description"
 msgid "Permissions"
 msgstr ""
 
+#: build/locale/src/customers/components/CustomerInfo/CustomerInfo.json
+#. [src.customers.components.CustomerInfo.252313757] - customer informations, header
+#. defaultMessage is:
+#. Personal Informations
+msgctxt "customer informations, header"
+msgid "Personal Informations"
+msgstr ""
+
 #: build/locale/src/taxes/components/CountryTaxesPage/CountryTaxesPage.json
 #. [src.taxes.components.CountryTaxesPage.815189256] - tax rate
 #. defaultMessage is:

src/components/CardTitle/CardTitle.tsx

@@ -23,6 +23,7 @@ const useStyles = makeStyles(theme => ({
   }),
   title: {
     flex: 1,
+    fontWeight: 500,
     lineHeight: 1
   },
   toolbar: {

src/components/ControlledCheckbox.tsx

@@ -4,6 +4,7 @@ import React from "react";
 import Checkbox from "./Checkbox";
 
 interface ControlledCheckboxProps {
+  className?: string;
   name: string;
   label?: React.ReactNode;
   checked: boolean;
@@ -16,7 +17,8 @@ export const ControlledCheckbox: React.FC<ControlledCheckboxProps> = ({
   disabled,
   name,
   label,
-  onChange
+  onChange,
+  ...props
 }) => (
   <FormControlLabel
     disabled={disabled}
@@ -29,6 +31,7 @@ export const ControlledCheckbox: React.FC<ControlledCheckboxProps> = ({
       />
     }
     label={label}
+    {...props}
   />
 );
 ControlledCheckbox.displayName = "ControlledCheckbox";

src/customers/components/CustomerCreatePage/CustomerCreatePage.tsx

@@ -9,7 +9,9 @@ import Form from "@saleor/components/Form";
 import Grid from "@saleor/components/Grid";
 import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
+import useAddressValidation from "@saleor/hooks/useAddressValidation";
 import { sectionNames } from "@saleor/intl";
+import { AddressInput } from "@saleor/types/globalTypes";
 import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
 import { UserError } from "../../../types";
 import { AddressTypeInput } from "../../types";
@@ -18,14 +20,18 @@ import CustomerCreateAddress from "../CustomerCreateAddress/CustomerCreateAddres
 import CustomerCreateDetails from "../CustomerCreateDetails";
 import CustomerCreateNote from "../CustomerCreateNote/CustomerCreateNote";
 
-export interface CustomerCreatePageFormData extends AddressTypeInput {
+export interface CustomerCreatePageFormData {
   customerFirstName: string;
   customerLastName: string;
   email: string;
   note: string;
 }
+export interface CustomerCreatePageSubmitData
+  extends CustomerCreatePageFormData {
+  address: AddressInput;
+}
 
-const initialForm: CustomerCreatePageFormData = {
+const initialForm: CustomerCreatePageFormData & AddressTypeInput = {
   city: "",
   cityArea: "",
   companyName: "",
@@ -49,7 +55,7 @@ export interface CustomerCreatePageProps {
   errors: UserError[];
   saveButtonBar: ConfirmButtonTransitionState;
   onBack: () => void;
-  onSubmit: (data: CustomerCreatePageFormData) => void;
+  onSubmit: (data: CustomerCreatePageSubmitData) => void;
 }
 
 const CustomerCreatePage: React.FC<CustomerCreatePageProps> = ({
@@ -67,12 +73,67 @@ const CustomerCreatePage: React.FC<CustomerCreatePageProps> = ({
     label: country.country,
     value: country.code
   }));
+  const {
+    errors: validationErrors,
+    submit: handleSubmitWithAddress
+  } = useAddressValidation<CustomerCreatePageFormData>(formData =>
+    onSubmit({
+      address: {
+        city: formData.city,
+        cityArea: formData.cityArea,
+        companyName: formData.companyName,
+        country: formData.country,
+        countryArea: formData.countryArea,
+        firstName: formData.firstName,
+        lastName: formData.lastName,
+        phone: formData.phone,
+        postalCode: formData.postalCode,
+        streetAddress1: formData.streetAddress1,
+        streetAddress2: formData.streetAddress2
+      },
+      customerFirstName: formData.customerFirstName,
+      customerLastName: formData.customerLastName,
+      email: formData.email,
+      note: formData.note
+    })
+  );
+
+  const handleSubmit = (
+    formData: CustomerCreatePageFormData & AddressTypeInput
+  ) => {
+    const areAddressInputFieldsModified = ([
+      "city",
+      "companyName",
+      "country",
+      "countryArea",
+      "firstName",
+      "lastName",
+      "phone",
+      "postalCode",
+      "streetAddress1",
+      "streetAddress2"
+    ] as Array<keyof AddressTypeInput>)
+      .map(key => formData[key])
+      .some(field => field !== "");
+
+    if (areAddressInputFieldsModified) {
+      handleSubmitWithAddress(formData);
+    } else {
+      onSubmit({
+        address: null,
+        customerFirstName: formData.customerFirstName,
+        customerLastName: formData.customerLastName,
+        email: formData.email,
+        note: formData.note
+      });
+    }
+  };
 
   return (
     <Form
       initial={initialForm}
-      onSubmit={onSubmit}
-      errors={errors}
+      onSubmit={handleSubmit}
+      errors={[...errors, ...validationErrors]}
       confirmLeave
     >
       {({ change, data, errors: formErrors, hasChanged, submit }) => {

src/customers/components/CustomerDetails/CustomerDetails.tsx

@@ -9,39 +9,34 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import { ControlledCheckbox } from "@saleor/components/ControlledCheckbox";
-import { FormSpacer } from "@saleor/components/FormSpacer";
 import Skeleton from "@saleor/components/Skeleton";
-import { commonMessages } from "@saleor/intl";
+import { maybe } from "@saleor/misc";
+import { FormErrors } from "@saleor/types";
 import { CustomerDetails_user } from "../../types/CustomerDetails";
 
 const useStyles = makeStyles(theme => ({
   cardTitle: {
-    height: 64
+    height: 72
   },
-  root: {
-    display: "grid" as "grid",
-    gridColumnGap: theme.spacing(2),
-    gridRowGap: theme.spacing(3),
-    gridTemplateColumns: "1fr 1fr"
+  checkbox: {
+    marginBottom: theme.spacing()
+  },
+  content: {
+    paddingTop: theme.spacing()
+  },
+  subtitle: {
+    marginTop: theme.spacing()
   }
 }));
 
 export interface CustomerDetailsProps {
   customer: CustomerDetails_user;
   data: {
-    firstName: string;
-    lastName: string;
-    email: string;
     isActive: boolean;
     note: string;
   };
   disabled: boolean;
-  errors: {
-    firstName?: string;
-    lastName?: string;
-    email?: string;
-    note?: string;
-  };
+  errors: FormErrors<"isActive" | "note">;
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
@@ -57,11 +52,15 @@ const CustomerDetails: React.FC<CustomerDetailsProps> = props => {
         className={classes.cardTitle}
         title={
           <>
-            <FormattedMessage {...commonMessages.generalInformations} />
+            {maybe<React.ReactNode>(() => customer.email, <Skeleton />)}
             {customer && customer.dateJoined ? (
-              <Typography variant="caption" component="div">
+              <Typography
+                className={classes.subtitle}
+                variant="caption"
+                component="div"
+              >
                 <FormattedMessage
-                  defaultMessage="Customer since: {date}"
+                  defaultMessage="Active member since {date}"
                   description="section subheader"
                   values={{
                     date: moment(customer.dateJoined).format("MMM YYYY")
@@ -74,9 +73,10 @@ const CustomerDetails: React.FC<CustomerDetailsProps> = props => {
           </>
         }
       />
-      <CardContent>
+      <CardContent className={classes.content}>
         <ControlledCheckbox
           checked={data.isActive}
+          className={classes.checkbox}
           disabled={disabled}
           label={intl.formatMessage({
             defaultMessage: "User account active",
@@ -85,44 +85,6 @@ const CustomerDetails: React.FC<CustomerDetailsProps> = props => {
           name="isActive"
           onChange={onChange}
         />
-        <FormSpacer />
-        <div className={classes.root}>
-          <TextField
-            disabled={disabled}
-            error={!!errors.firstName}
-            fullWidth
-            helperText={errors.firstName}
-            name="firstName"
-            type="text"
-            label={intl.formatMessage(commonMessages.firstName)}
-            value={data.firstName}
-            onChange={onChange}
-          />
-          <TextField
-            disabled={disabled}
-            error={!!errors.lastName}
-            fullWidth
-            helperText={errors.lastName}
-            name="lastName"
-            type="text"
-            label={intl.formatMessage(commonMessages.lastName)}
-            value={data.lastName}
-            onChange={onChange}
-          />
-        </div>
-        <FormSpacer />
-        <TextField
-          disabled={disabled}
-          error={!!errors.email}
-          fullWidth
-          helperText={errors.email}
-          name="email"
-          type="email"
-          label={intl.formatMessage(commonMessages.email)}
-          value={data.email}
-          onChange={onChange}
-        />
-        <FormSpacer />
         <TextField
           disabled={disabled}
           error={!!errors.note}

src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx

@@ -13,10 +13,11 @@ import { sectionNames } from "@saleor/intl";
 import { getUserName, maybe } from "../../../misc";
 import { UserError } from "../../../types";
 import { CustomerDetails_user } from "../../types/CustomerDetails";
-import CustomerAddresses from "../CustomerAddresses/CustomerAddresses";
-import CustomerDetails from "../CustomerDetails/CustomerDetails";
-import CustomerOrders from "../CustomerOrders/CustomerOrders";
-import CustomerStats from "../CustomerStats/CustomerStats";
+import CustomerAddresses from "../CustomerAddresses";
+import CustomerDetails from "../CustomerDetails";
+import CustomerInfo from "../CustomerInfo";
+import CustomerOrders from "../CustomerOrders";
+import CustomerStats from "../CustomerStats";
 
 export interface CustomerDetailsPageFormData {
   firstName: string;
@@ -82,6 +83,13 @@ const CustomerDetailsPage: React.FC<CustomerDetailsPageProps> = ({
                 onChange={change}
               />
               <CardSpacer />
+              <CustomerInfo
+                data={data}
+                disabled={disabled}
+                errors={formErrors}
+                onChange={change}
+              />
+              <CardSpacer />
               <CustomerOrders
                 orders={maybe(() =>
                   customer.orders.edges.map(edge => edge.node)

src/customers/components/CustomerInfo/CustomerInfo.tsx

@@ -0,0 +1,108 @@
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
+import { makeStyles } from "@material-ui/core/styles";
+import TextField from "@material-ui/core/TextField";
+import Typography from "@material-ui/core/Typography";
+import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+
+import CardTitle from "@saleor/components/CardTitle";
+import Grid from "@saleor/components/Grid";
+import Hr from "@saleor/components/Hr";
+import { commonMessages } from "@saleor/intl";
+
+const useStyles = makeStyles(theme => ({
+  content: {
+    paddingTop: theme.spacing(2)
+  },
+  hr: {
+    margin: theme.spacing(3, 0)
+  },
+  sectionHeader: {
+    marginBottom: theme.spacing()
+  }
+}));
+
+export interface CustomerInfoProps {
+  data: {
+    firstName: string;
+    lastName: string;
+    email: string;
+  };
+  disabled: boolean;
+  errors: {
+    firstName?: string;
+    lastName?: string;
+    email?: string;
+  };
+  onChange: (event: React.ChangeEvent<any>) => void;
+}
+
+const CustomerInfo: React.FC<CustomerInfoProps> = props => {
+  const { data, disabled, errors, onChange } = props;
+  const classes = useStyles(props);
+
+  const intl = useIntl();
+
+  return (
+    <Card>
+      <CardTitle
+        title={
+          <FormattedMessage
+            defaultMessage="Personal Informations"
+            description="customer informations, header"
+          />
+        }
+      />
+      <CardContent className={classes.content}>
+        <Typography className={classes.sectionHeader}>
+          <FormattedMessage {...commonMessages.generalInformations} />
+        </Typography>
+        <Grid variant="uniform">
+          <TextField
+            disabled={disabled}
+            error={!!errors.firstName}
+            fullWidth
+            helperText={errors.firstName}
+            name="firstName"
+            type="text"
+            label={intl.formatMessage(commonMessages.firstName)}
+            value={data.firstName}
+            onChange={onChange}
+          />
+          <TextField
+            disabled={disabled}
+            error={!!errors.lastName}
+            fullWidth
+            helperText={errors.lastName}
+            name="lastName"
+            type="text"
+            label={intl.formatMessage(commonMessages.lastName)}
+            value={data.lastName}
+            onChange={onChange}
+          />
+        </Grid>
+        <Hr className={classes.hr} />
+        <Typography className={classes.sectionHeader}>
+          <FormattedMessage
+            defaultMessage="Contact Informations"
+            description="customer contact section, header"
+          />
+        </Typography>
+        <TextField
+          disabled={disabled}
+          error={!!errors.email}
+          fullWidth
+          helperText={errors.email}
+          name="email"
+          type="email"
+          label={intl.formatMessage(commonMessages.email)}
+          value={data.email}
+          onChange={onChange}
+        />
+      </CardContent>
+    </Card>
+  );
+};
+CustomerInfo.displayName = "CustomerInfo";
+export default CustomerInfo;

src/customers/components/CustomerInfo/index.ts

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

src/customers/views/CustomerCreate.tsx

@@ -4,11 +4,10 @@ import { useIntl } from "react-intl";
 import { WindowTitle } from "@saleor/components/WindowTitle";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
-import { maybe, transformFormToAddress } from "../../misc";
+import { maybe } from "../../misc";
 import CustomerCreatePage from "../components/CustomerCreatePage";
 import { TypedCreateCustomerMutation } from "../mutations";
 import { TypedCustomerCreateDataQuery } from "../queries";
-import { AddressTypeInput } from "../types";
 import { CreateCustomer } from "../types/CreateCustomer";
 import { customerListUrl, customerUrl } from "../urls";
 
@@ -58,43 +57,11 @@ export const CustomerCreate: React.FC<{}> = () => {
                 }
                 onBack={() => navigate(customerListUrl())}
                 onSubmit={formData => {
-                  const areAddressInputFieldsModified = ([
-                    "city",
-                    "companyName",
-                    "country",
-                    "countryArea",
-                    "firstName",
-                    "lastName",
-                    "phone",
-                    "postalCode",
-                    "streetAddress1",
-                    "streetAddress2"
-                  ] as Array<keyof AddressTypeInput>)
-                    .map(key => formData[key])
-                    .some(field => field !== "");
-
-                  const address = {
-                    city: formData.city,
-                    cityArea: formData.cityArea,
-                    companyName: formData.companyName,
-                    country: formData.country,
-                    countryArea: formData.countryArea,
-                    firstName: formData.firstName,
-                    lastName: formData.lastName,
-                    phone: formData.phone,
-                    postalCode: formData.postalCode,
-                    streetAddress1: formData.streetAddress1,
-                    streetAddress2: formData.streetAddress2
-                  };
                   createCustomer({
                     variables: {
                       input: {
-                        defaultBillingAddress: areAddressInputFieldsModified
-                          ? transformFormToAddress(address)
-                          : null,
-                        defaultShippingAddress: areAddressInputFieldsModified
-                          ? transformFormToAddress(address)
-                          : null,
+                        defaultBillingAddress: formData.address,
+                        defaultShippingAddress: formData.address,
                         email: formData.email,
                         firstName: formData.customerFirstName,
                         lastName: formData.customerLastName,

src/hooks/useAddressValidation.ts

@@ -8,14 +8,14 @@ import { UserError } from "@saleor/types";
 import { AddressInput } from "@saleor/types/globalTypes";
 import { add, remove } from "@saleor/utils/lists";
 
-interface UseAddressValidation {
+interface UseAddressValidation<T> {
   errors: UserError[];
-  submit: (data: AddressTypeInput) => void;
+  submit: (data: T & AddressTypeInput) => void;
 }
 
-function useAddressValidation(
-  onSubmit: (address: AddressInput) => void
-): UseAddressValidation {
+function useAddressValidation<T>(
+  onSubmit: (address: T & AddressInput) => void
+): UseAddressValidation<T> {
   const intl = useIntl();
   const [validationErrors, setValidationErrors] = useState<UserError[]>([]);
 
@@ -26,7 +26,7 @@ function useAddressValidation(
 
   return {
     errors: validationErrors,
-    submit: (data: AddressTypeInput) => {
+    submit: (data: T & AddressTypeInput) => {
       try {
         setValidationErrors(
           remove(

src/misc.ts

@@ -339,9 +339,9 @@ export function capitalize(s: string) {
   return s.charAt(0).toLocaleUpperCase() + s.slice(1);
 }
 
-export function transformFormToAddress(
-  address: AddressTypeInput
-): AddressInput {
+export function transformFormToAddress<T>(
+  address: T & AddressTypeInput
+): T & AddressInput {
   return {
     ...address,
     country: findInEnum(address.country, CountryCode)

src/theme.ts

@@ -342,6 +342,9 @@ export default (colors: IThemeColors): Theme =>
             }
           }
         },
+        message: {
+          fontSize: 16
+        },
         root: {
           backgroundColor: colors.background.paper,
           boxShadow:
@@ -397,12 +400,12 @@ export default (colors: IThemeColors): Theme =>
       },
       MuiTableCell: {
         body: {
-          fontSize: ".875rem",
+          fontSize: "1rem",
           paddingBottom: 8,
           paddingTop: 8
         },
         head: {
-          fontSize: ".875rem"
+          fontSize: "1rem"
         },
         paddingCheckbox: {
           "&:first-child": {