From 4ab886a7ca5f1275f0c9a5ab454407d405811839 Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Tue, 12 Nov 2019 13:21:37 +0100
Subject: [PATCH 01/11] Update customer note design

---
 src/components/CardTitle/CardTitle.tsx        |   1 +
 src/components/ControlledCheckbox.tsx         |   5 +-
 .../CustomerDetails/CustomerDetails.tsx       |  80 +++--------
 .../CustomerDetailsPage.tsx                   |  17 ++-
 .../components/CustomerInfo/CustomerInfo.tsx  | 128 ++++++++++++++++++
 .../components/CustomerInfo/index.ts          |   2 +
 src/theme.ts                                  |   4 +-
 7 files changed, 171 insertions(+), 66 deletions(-)
 create mode 100644 src/customers/components/CustomerInfo/CustomerInfo.tsx
 create mode 100644 src/customers/components/CustomerInfo/index.ts

diff --git a/src/components/CardTitle/CardTitle.tsx b/src/components/CardTitle/CardTitle.tsx
index eb565e834..ec72d2f55 100644
--- a/src/components/CardTitle/CardTitle.tsx
+++ b/src/components/CardTitle/CardTitle.tsx
@@ -23,6 +23,7 @@ const useStyles = makeStyles(theme => ({
   }),
   title: {
     flex: 1,
+    fontWeight: 500,
     lineHeight: 1
   },
   toolbar: {
diff --git a/src/components/ControlledCheckbox.tsx b/src/components/ControlledCheckbox.tsx
index 7ed45d330..4a79d9085 100644
--- a/src/components/ControlledCheckbox.tsx
+++ b/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";
diff --git a/src/customers/components/CustomerDetails/CustomerDetails.tsx b/src/customers/components/CustomerDetails/CustomerDetails.tsx
index 5496ed387..1db8cf109 100644
--- a/src/customers/components/CustomerDetails/CustomerDetails.tsx
+++ b/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}
diff --git a/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx b/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx
index d51cb3dae..df9d557e4 100644
--- a/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx
+++ b/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,14 @@ const CustomerDetailsPage: React.FC<CustomerDetailsPageProps> = ({
                 onChange={change}
               />
               <CardSpacer />
+              <CustomerInfo
+                customer={customer}
+                data={data}
+                disabled={disabled}
+                errors={formErrors}
+                onChange={change}
+              />
+              <CardSpacer />
               <CustomerOrders
                 orders={maybe(() =>
                   customer.orders.edges.map(edge => edge.node)
diff --git a/src/customers/components/CustomerInfo/CustomerInfo.tsx b/src/customers/components/CustomerInfo/CustomerInfo.tsx
new file mode 100644
index 000000000..ca158a994
--- /dev/null
+++ b/src/customers/components/CustomerInfo/CustomerInfo.tsx
@@ -0,0 +1,128 @@
+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 moment from "moment-timezone";
+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 Skeleton from "@saleor/components/Skeleton";
+import { commonMessages } from "@saleor/intl";
+import { CustomerDetails_user } from "../../types/CustomerDetails";
+
+const useStyles = makeStyles(theme => ({
+  cardTitle: {
+    height: 64
+  },
+  content: {
+    paddingTop: theme.spacing(2)
+  },
+  hr: {
+    margin: theme.spacing(3, 0)
+  },
+  sectionHeader: {
+    marginBottom: theme.spacing()
+  }
+}));
+
+export interface CustomerDetailsProps {
+  customer: CustomerDetails_user;
+  data: {
+    firstName: string;
+    lastName: string;
+    email: string;
+  };
+  disabled: boolean;
+  errors: {
+    firstName?: string;
+    lastName?: string;
+    email?: string;
+  };
+  onChange: (event: React.ChangeEvent<any>) => void;
+}
+
+const CustomerDetails: React.FC<CustomerDetailsProps> = props => {
+  const { customer, data, disabled, errors, onChange } = props;
+  const classes = useStyles(props);
+
+  const intl = useIntl();
+
+  return (
+    <Card>
+      <CardTitle
+        className={classes.cardTitle}
+        title={
+          <>
+            <FormattedMessage {...commonMessages.generalInformations} />
+            {customer && customer.dateJoined ? (
+              <Typography variant="caption" component="div">
+                <FormattedMessage
+                  defaultMessage="Customer since: {date}"
+                  description="section subheader"
+                  values={{
+                    date: moment(customer.dateJoined).format("MMM YYYY")
+                  }}
+                />
+              </Typography>
+            ) : (
+              <Skeleton style={{ width: "10rem" }} />
+            )}
+          </>
+        }
+      />
+      <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>
+  );
+};
+CustomerDetails.displayName = "CustomerDetails";
+export default CustomerDetails;
diff --git a/src/customers/components/CustomerInfo/index.ts b/src/customers/components/CustomerInfo/index.ts
new file mode 100644
index 000000000..5add7b0f4
--- /dev/null
+++ b/src/customers/components/CustomerInfo/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./CustomerInfo";
+export * from "./CustomerInfo";
diff --git a/src/theme.ts b/src/theme.ts
index 3b41cc746..52a60e9c1 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -397,12 +397,12 @@ export default (colors: IThemeColors): Theme =>
       },
       MuiTableCell: {
         body: {
-          fontSize: ".875rem",
+          fontSize: "1rem",
           paddingBottom: 8,
           paddingTop: 8
         },
         head: {
-          fontSize: ".875rem"
+          fontSize: "1rem"
         },
         paddingCheckbox: {
           "&:first-child": {

From 0dfe0de548ce9697065bf14aea9cfd2f92f6fb84 Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Tue, 12 Nov 2019 13:27:40 +0100
Subject: [PATCH 02/11] Fix header

---
 .../components/CustomerInfo/CustomerInfo.tsx  | 38 +++++--------------
 1 file changed, 9 insertions(+), 29 deletions(-)

diff --git a/src/customers/components/CustomerInfo/CustomerInfo.tsx b/src/customers/components/CustomerInfo/CustomerInfo.tsx
index ca158a994..26c6893a9 100644
--- a/src/customers/components/CustomerInfo/CustomerInfo.tsx
+++ b/src/customers/components/CustomerInfo/CustomerInfo.tsx
@@ -3,21 +3,15 @@ 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 moment from "moment-timezone";
 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 Skeleton from "@saleor/components/Skeleton";
 import { commonMessages } from "@saleor/intl";
-import { CustomerDetails_user } from "../../types/CustomerDetails";
 
 const useStyles = makeStyles(theme => ({
-  cardTitle: {
-    height: 64
-  },
   content: {
     paddingTop: theme.spacing(2)
   },
@@ -29,8 +23,7 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-export interface CustomerDetailsProps {
-  customer: CustomerDetails_user;
+export interface CustomerInfoProps {
   data: {
     firstName: string;
     lastName: string;
@@ -45,8 +38,8 @@ export interface CustomerDetailsProps {
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
-const CustomerDetails: React.FC<CustomerDetailsProps> = props => {
-  const { customer, data, disabled, errors, onChange } = props;
+const CustomerInfo: React.FC<CustomerInfoProps> = props => {
+  const { data, disabled, errors, onChange } = props;
   const classes = useStyles(props);
 
   const intl = useIntl();
@@ -54,24 +47,11 @@ const CustomerDetails: React.FC<CustomerDetailsProps> = props => {
   return (
     <Card>
       <CardTitle
-        className={classes.cardTitle}
         title={
-          <>
-            <FormattedMessage {...commonMessages.generalInformations} />
-            {customer && customer.dateJoined ? (
-              <Typography variant="caption" component="div">
-                <FormattedMessage
-                  defaultMessage="Customer since: {date}"
-                  description="section subheader"
-                  values={{
-                    date: moment(customer.dateJoined).format("MMM YYYY")
-                  }}
-                />
-              </Typography>
-            ) : (
-              <Skeleton style={{ width: "10rem" }} />
-            )}
-          </>
+          <FormattedMessage
+            defaultMessage="Personal Informations"
+            description="customer informations, header"
+          />
         }
       />
       <CardContent className={classes.content}>
@@ -124,5 +104,5 @@ const CustomerDetails: React.FC<CustomerDetailsProps> = props => {
     </Card>
   );
 };
-CustomerDetails.displayName = "CustomerDetails";
-export default CustomerDetails;
+CustomerInfo.displayName = "CustomerInfo";
+export default CustomerInfo;

From eb58db95a5b02c8ac9a13194bda507e3e8ed561b Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Tue, 12 Nov 2019 13:31:05 +0100
Subject: [PATCH 03/11] Fix notification font size

---
 src/theme.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/theme.ts b/src/theme.ts
index 52a60e9c1..d57ce19d0 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -342,6 +342,9 @@ export default (colors: IThemeColors): Theme =>
             }
           }
         },
+        message: {
+          fontSize: 16
+        },
         root: {
           backgroundColor: colors.background.paper,
           boxShadow:

From b597f03c706b1731ae5ec4cd92784566d3107d36 Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Tue, 12 Nov 2019 13:33:54 +0100
Subject: [PATCH 04/11] Remove unused prop

---
 .../components/CustomerDetailsPage/CustomerDetailsPage.tsx       | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx b/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx
index df9d557e4..1b65f202e 100644
--- a/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx
+++ b/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx
@@ -84,7 +84,6 @@ const CustomerDetailsPage: React.FC<CustomerDetailsPageProps> = ({
               />
               <CardSpacer />
               <CustomerInfo
-                customer={customer}
                 data={data}
                 disabled={disabled}
                 errors={formErrors}

From 37bfd7b85549bb8f895725916d11c6080ba245de Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Tue, 12 Nov 2019 13:36:07 +0100
Subject: [PATCH 05/11] Update stories

---
 .../__snapshots__/Stories.test.ts.snap        | 1271 ++++++++++-------
 1 file changed, 786 insertions(+), 485 deletions(-)

diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index 9b17eea50..108699494 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -31787,11 +31787,11 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
               <span
                 class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
               >
-                General Informations
+                elizabeth.vaughn@example.com
                 <div
-                  class="MuiTypography-root-id MuiTypography-caption-id"
+                  class="MuiTypography-root-id makeStyles-subtitle-id MuiTypography-caption-id"
                 >
-                  Customer since: May 2017
+                  Active member since May 2017
                 </div>
               </span>
               <div
@@ -31805,10 +31805,10 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
               class="makeStyles-hr-id"
             />
             <div
-              class="MuiCardContent-root-id"
+              class="MuiCardContent-root-id makeStyles-content-id"
             >
               <label
-                class="MuiFormControlLabel-root-id"
+                class="MuiFormControlLabel-root-id makeStyles-checkbox-id"
               >
                 <button
                   class="MuiButtonBase-root-id makeStyles-root-id"
@@ -31829,10 +31829,82 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
                 </span>
               </label>
               <div
-                class="makeStyles-spacer-id"
-              />
+                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                  data-shrink="false"
+                >
+                  Note
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
+                >
+                  <textarea
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                    name="note"
+                    rows="1"
+                  />
+                  <textarea
+                    aria-hidden="true"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                    readonly=""
+                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
+                    tabindex="-1"
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="makeStyles-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+          >
+            <div
+              class="makeStyles-root-id"
+            >
+              <span
+                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              >
+                Personal Informations
+              </span>
               <div
-                class="makeStyles-root-id"
+                class="makeStyles-toolbar-id"
+              />
+            </div>
+            <div
+              class="makeStyles-children-id"
+            />
+            <hr
+              class="makeStyles-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id makeStyles-content-id"
+            >
+              <div
+                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+              >
+                General Informations
+              </div>
+              <div
+                class="makeStyles-root-id makeStyles-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -31905,9 +31977,14 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
                   </div>
                 </div>
               </div>
-              <div
-                class="makeStyles-spacer-id"
+              <hr
+                class="makeStyles-root-id makeStyles-hr-id"
               />
+              <div
+                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+              >
+                Contact Informations
+              </div>
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
               >
@@ -31943,50 +32020,6 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
                   </fieldset>
                 </div>
               </div>
-              <div
-                class="makeStyles-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Note
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                >
-                  <textarea
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    name="note"
-                    rows="1"
-                  />
-                  <textarea
-                    aria-hidden="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    readonly=""
-                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                    tabindex="-1"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
             </div>
           </div>
           <div
@@ -32282,11 +32315,11 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
               <span
                 class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
               >
-                General Informations
+                elizabeth.vaughn@example.com
                 <div
-                  class="MuiTypography-root-id MuiTypography-caption-id"
+                  class="MuiTypography-root-id makeStyles-subtitle-id MuiTypography-caption-id"
                 >
-                  Customer since: May 2017
+                  Active member since May 2017
                 </div>
               </span>
               <div
@@ -32300,10 +32333,10 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
               class="makeStyles-hr-id"
             />
             <div
-              class="MuiCardContent-root-id"
+              class="MuiCardContent-root-id makeStyles-content-id"
             >
               <label
-                class="MuiFormControlLabel-root-id"
+                class="MuiFormControlLabel-root-id makeStyles-checkbox-id"
               >
                 <button
                   class="MuiButtonBase-root-id makeStyles-root-id"
@@ -32324,10 +32357,82 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
                 </span>
               </label>
               <div
-                class="makeStyles-spacer-id"
-              />
+                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                  data-shrink="false"
+                >
+                  Note
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
+                >
+                  <textarea
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                    name="note"
+                    rows="1"
+                  />
+                  <textarea
+                    aria-hidden="true"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                    readonly=""
+                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
+                    tabindex="-1"
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="makeStyles-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+          >
+            <div
+              class="makeStyles-root-id"
+            >
+              <span
+                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              >
+                Personal Informations
+              </span>
               <div
-                class="makeStyles-root-id"
+                class="makeStyles-toolbar-id"
+              />
+            </div>
+            <div
+              class="makeStyles-children-id"
+            />
+            <hr
+              class="makeStyles-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id makeStyles-content-id"
+            >
+              <div
+                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+              >
+                General Informations
+              </div>
+              <div
+                class="makeStyles-root-id makeStyles-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -32400,9 +32505,14 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
                   </div>
                 </div>
               </div>
-              <div
-                class="makeStyles-spacer-id"
+              <hr
+                class="makeStyles-root-id makeStyles-hr-id"
               />
+              <div
+                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+              >
+                Contact Informations
+              </div>
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
               >
@@ -32438,50 +32548,6 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
                   </fieldset>
                 </div>
               </div>
-              <div
-                class="makeStyles-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Note
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                >
-                  <textarea
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    name="note"
-                    rows="1"
-                  />
-                  <textarea
-                    aria-hidden="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    readonly=""
-                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                    tabindex="-1"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
             </div>
           </div>
           <div
@@ -32814,11 +32880,11 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
               <span
                 class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
               >
-                General Informations
+                elizabeth.vaughn@example.com
                 <div
-                  class="MuiTypography-root-id MuiTypography-caption-id"
+                  class="MuiTypography-root-id makeStyles-subtitle-id MuiTypography-caption-id"
                 >
-                  Customer since: May 2017
+                  Active member since May 2017
                 </div>
               </span>
               <div
@@ -32832,10 +32898,10 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
               class="makeStyles-hr-id"
             />
             <div
-              class="MuiCardContent-root-id"
+              class="MuiCardContent-root-id makeStyles-content-id"
             >
               <label
-                class="MuiFormControlLabel-root-id"
+                class="MuiFormControlLabel-root-id makeStyles-checkbox-id"
               >
                 <button
                   class="MuiButtonBase-root-id makeStyles-root-id"
@@ -32856,10 +32922,82 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
                 </span>
               </label>
               <div
-                class="makeStyles-spacer-id"
-              />
+                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                  data-shrink="false"
+                >
+                  Note
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
+                >
+                  <textarea
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                    name="note"
+                    rows="1"
+                  />
+                  <textarea
+                    aria-hidden="true"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                    readonly=""
+                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
+                    tabindex="-1"
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="makeStyles-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+          >
+            <div
+              class="makeStyles-root-id"
+            >
+              <span
+                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              >
+                Personal Informations
+              </span>
               <div
-                class="makeStyles-root-id"
+                class="makeStyles-toolbar-id"
+              />
+            </div>
+            <div
+              class="makeStyles-children-id"
+            />
+            <hr
+              class="makeStyles-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id makeStyles-content-id"
+            >
+              <div
+                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+              >
+                General Informations
+              </div>
+              <div
+                class="makeStyles-root-id makeStyles-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -32942,9 +33080,14 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
                   </p>
                 </div>
               </div>
-              <div
-                class="makeStyles-spacer-id"
+              <hr
+                class="makeStyles-root-id makeStyles-hr-id"
               />
+              <div
+                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+              >
+                Contact Informations
+              </div>
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
               >
@@ -32985,50 +33128,6 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
                   Generic form error
                 </p>
               </div>
-              <div
-                class="makeStyles-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Note
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                >
-                  <textarea
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    name="note"
-                    rows="1"
-                  />
-                  <textarea
-                    aria-hidden="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    readonly=""
-                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                    tabindex="-1"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
             </div>
           </div>
           <div
@@ -33329,7 +33428,11 @@ exports[`Storyshots Views / Customers / Customer details loading 1`] = `
               <span
                 class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
               >
-                General Informations
+                <span
+                  class="makeStyles-skeleton-id"
+                >
+                  ‌
+                </span>
                 <span
                   class="makeStyles-skeleton-id"
                   style="width:10rem"
@@ -33348,10 +33451,10 @@ exports[`Storyshots Views / Customers / Customer details loading 1`] = `
               class="makeStyles-hr-id"
             />
             <div
-              class="MuiCardContent-root-id"
+              class="MuiCardContent-root-id makeStyles-content-id"
             >
               <label
-                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+                class="MuiFormControlLabel-root-id makeStyles-checkbox-id MuiFormControlLabel-disabled-id"
               >
                 <button
                   class="MuiButtonBase-root-id makeStyles-root-id MuiButtonBase-disabled-id"
@@ -33374,10 +33477,83 @@ exports[`Storyshots Views / Customers / Customer details loading 1`] = `
                 </span>
               </label>
               <div
-                class="makeStyles-spacer-id"
-              />
+                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
+                  data-shrink="false"
+                >
+                  Note
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
+                >
+                  <textarea
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                    disabled=""
+                    name="note"
+                    rows="1"
+                  />
+                  <textarea
+                    aria-hidden="true"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                    readonly=""
+                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
+                    tabindex="-1"
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="makeStyles-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+          >
+            <div
+              class="makeStyles-root-id"
+            >
+              <span
+                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              >
+                Personal Informations
+              </span>
               <div
-                class="makeStyles-root-id"
+                class="makeStyles-toolbar-id"
+              />
+            </div>
+            <div
+              class="makeStyles-children-id"
+            />
+            <hr
+              class="makeStyles-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id makeStyles-content-id"
+            >
+              <div
+                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+              >
+                General Informations
+              </div>
+              <div
+                class="makeStyles-root-id makeStyles-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -33452,9 +33628,14 @@ exports[`Storyshots Views / Customers / Customer details loading 1`] = `
                   </div>
                 </div>
               </div>
-              <div
-                class="makeStyles-spacer-id"
+              <hr
+                class="makeStyles-root-id makeStyles-hr-id"
               />
+              <div
+                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+              >
+                Contact Informations
+              </div>
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
               >
@@ -33491,51 +33672,6 @@ exports[`Storyshots Views / Customers / Customer details loading 1`] = `
                   </fieldset>
                 </div>
               </div>
-              <div
-                class="makeStyles-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Note
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                >
-                  <textarea
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    disabled=""
-                    name="note"
-                    rows="1"
-                  />
-                  <textarea
-                    aria-hidden="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    readonly=""
-                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                    tabindex="-1"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
             </div>
           </div>
           <div
@@ -33806,11 +33942,11 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
               <span
                 class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
               >
-                General Informations
+                elizabeth.vaughn@example.com
                 <div
-                  class="MuiTypography-root-id MuiTypography-caption-id"
+                  class="MuiTypography-root-id makeStyles-subtitle-id MuiTypography-caption-id"
                 >
-                  Customer since: May 2017
+                  Active member since May 2017
                 </div>
               </span>
               <div
@@ -33824,10 +33960,10 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
               class="makeStyles-hr-id"
             />
             <div
-              class="MuiCardContent-root-id"
+              class="MuiCardContent-root-id makeStyles-content-id"
             >
               <label
-                class="MuiFormControlLabel-root-id"
+                class="MuiFormControlLabel-root-id makeStyles-checkbox-id"
               >
                 <button
                   class="MuiButtonBase-root-id makeStyles-root-id"
@@ -33848,10 +33984,82 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
                 </span>
               </label>
               <div
-                class="makeStyles-spacer-id"
-              />
+                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                  data-shrink="false"
+                >
+                  Note
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
+                >
+                  <textarea
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                    name="note"
+                    rows="1"
+                  />
+                  <textarea
+                    aria-hidden="true"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                    readonly=""
+                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
+                    tabindex="-1"
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="makeStyles-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+          >
+            <div
+              class="makeStyles-root-id"
+            >
+              <span
+                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              >
+                Personal Informations
+              </span>
               <div
-                class="makeStyles-root-id"
+                class="makeStyles-toolbar-id"
+              />
+            </div>
+            <div
+              class="makeStyles-children-id"
+            />
+            <hr
+              class="makeStyles-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id makeStyles-content-id"
+            >
+              <div
+                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+              >
+                General Informations
+              </div>
+              <div
+                class="makeStyles-root-id makeStyles-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -33924,9 +34132,14 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
                   </div>
                 </div>
               </div>
-              <div
-                class="makeStyles-spacer-id"
+              <hr
+                class="makeStyles-root-id makeStyles-hr-id"
               />
+              <div
+                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+              >
+                Contact Informations
+              </div>
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
               >
@@ -33962,50 +34175,6 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
                   </fieldset>
                 </div>
               </div>
-              <div
-                class="makeStyles-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Note
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                >
-                  <textarea
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    name="note"
-                    rows="1"
-                  />
-                  <textarea
-                    aria-hidden="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    readonly=""
-                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                    tabindex="-1"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
             </div>
           </div>
           <div
@@ -34295,11 +34464,11 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
               <span
                 class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
               >
-                General Informations
+                elizabeth.vaughn@example.com
                 <div
-                  class="MuiTypography-root-id MuiTypography-caption-id"
+                  class="MuiTypography-root-id makeStyles-subtitle-id MuiTypography-caption-id"
                 >
-                  Customer since: May 2017
+                  Active member since May 2017
                 </div>
               </span>
               <div
@@ -34313,10 +34482,10 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
               class="makeStyles-hr-id"
             />
             <div
-              class="MuiCardContent-root-id"
+              class="MuiCardContent-root-id makeStyles-content-id"
             >
               <label
-                class="MuiFormControlLabel-root-id"
+                class="MuiFormControlLabel-root-id makeStyles-checkbox-id"
               >
                 <button
                   class="MuiButtonBase-root-id makeStyles-root-id"
@@ -34337,10 +34506,82 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
                 </span>
               </label>
               <div
-                class="makeStyles-spacer-id"
-              />
+                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                  data-shrink="false"
+                >
+                  Note
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
+                >
+                  <textarea
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                    name="note"
+                    rows="1"
+                  />
+                  <textarea
+                    aria-hidden="true"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                    readonly=""
+                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
+                    tabindex="-1"
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="makeStyles-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+          >
+            <div
+              class="makeStyles-root-id"
+            >
+              <span
+                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              >
+                Personal Informations
+              </span>
               <div
-                class="makeStyles-root-id"
+                class="makeStyles-toolbar-id"
+              />
+            </div>
+            <div
+              class="makeStyles-children-id"
+            />
+            <hr
+              class="makeStyles-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id makeStyles-content-id"
+            >
+              <div
+                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+              >
+                General Informations
+              </div>
+              <div
+                class="makeStyles-root-id makeStyles-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -34413,9 +34654,14 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
                   </div>
                 </div>
               </div>
-              <div
-                class="makeStyles-spacer-id"
+              <hr
+                class="makeStyles-root-id makeStyles-hr-id"
               />
+              <div
+                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+              >
+                Contact Informations
+              </div>
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
               >
@@ -34451,50 +34697,6 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
                   </fieldset>
                 </div>
               </div>
-              <div
-                class="makeStyles-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Note
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                >
-                  <textarea
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    name="note"
-                    rows="1"
-                  />
-                  <textarea
-                    aria-hidden="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    readonly=""
-                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                    tabindex="-1"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
             </div>
           </div>
           <div
@@ -34784,11 +34986,11 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
               <span
                 class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
               >
-                General Informations
+                elizabeth.vaughn@example.com
                 <div
-                  class="MuiTypography-root-id MuiTypography-caption-id"
+                  class="MuiTypography-root-id makeStyles-subtitle-id MuiTypography-caption-id"
                 >
-                  Customer since: May 2017
+                  Active member since May 2017
                 </div>
               </span>
               <div
@@ -34802,10 +35004,10 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
               class="makeStyles-hr-id"
             />
             <div
-              class="MuiCardContent-root-id"
+              class="MuiCardContent-root-id makeStyles-content-id"
             >
               <label
-                class="MuiFormControlLabel-root-id"
+                class="MuiFormControlLabel-root-id makeStyles-checkbox-id"
               >
                 <button
                   class="MuiButtonBase-root-id makeStyles-root-id"
@@ -34826,10 +35028,82 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
                 </span>
               </label>
               <div
-                class="makeStyles-spacer-id"
-              />
+                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                  data-shrink="false"
+                >
+                  Note
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
+                >
+                  <textarea
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                    name="note"
+                    rows="1"
+                  />
+                  <textarea
+                    aria-hidden="true"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                    readonly=""
+                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
+                    tabindex="-1"
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="makeStyles-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+          >
+            <div
+              class="makeStyles-root-id"
+            >
+              <span
+                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              >
+                Personal Informations
+              </span>
               <div
-                class="makeStyles-root-id"
+                class="makeStyles-toolbar-id"
+              />
+            </div>
+            <div
+              class="makeStyles-children-id"
+            />
+            <hr
+              class="makeStyles-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id makeStyles-content-id"
+            >
+              <div
+                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+              >
+                General Informations
+              </div>
+              <div
+                class="makeStyles-root-id makeStyles-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -34902,9 +35176,14 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
                   </div>
                 </div>
               </div>
-              <div
-                class="makeStyles-spacer-id"
+              <hr
+                class="makeStyles-root-id makeStyles-hr-id"
               />
+              <div
+                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+              >
+                Contact Informations
+              </div>
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
               >
@@ -34940,50 +35219,6 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
                   </fieldset>
                 </div>
               </div>
-              <div
-                class="makeStyles-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Note
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                >
-                  <textarea
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    name="note"
-                    rows="1"
-                  />
-                  <textarea
-                    aria-hidden="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    readonly=""
-                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                    tabindex="-1"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
             </div>
           </div>
           <div
@@ -35254,11 +35489,11 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
               <span
                 class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
               >
-                General Informations
+                elizabeth.vaughn@example.com
                 <div
-                  class="MuiTypography-root-id MuiTypography-caption-id"
+                  class="MuiTypography-root-id makeStyles-subtitle-id MuiTypography-caption-id"
                 >
-                  Customer since: May 2017
+                  Active member since May 2017
                 </div>
               </span>
               <div
@@ -35272,10 +35507,10 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
               class="makeStyles-hr-id"
             />
             <div
-              class="MuiCardContent-root-id"
+              class="MuiCardContent-root-id makeStyles-content-id"
             >
               <label
-                class="MuiFormControlLabel-root-id"
+                class="MuiFormControlLabel-root-id makeStyles-checkbox-id"
               >
                 <button
                   class="MuiButtonBase-root-id makeStyles-root-id"
@@ -35296,10 +35531,82 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
                 </span>
               </label>
               <div
-                class="makeStyles-spacer-id"
-              />
+                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                  data-shrink="false"
+                >
+                  Note
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
+                >
+                  <textarea
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                    name="note"
+                    rows="1"
+                  />
+                  <textarea
+                    aria-hidden="true"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                    readonly=""
+                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
+                    tabindex="-1"
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="makeStyles-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+          >
+            <div
+              class="makeStyles-root-id"
+            >
+              <span
+                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              >
+                Personal Informations
+              </span>
               <div
-                class="makeStyles-root-id"
+                class="makeStyles-toolbar-id"
+              />
+            </div>
+            <div
+              class="makeStyles-children-id"
+            />
+            <hr
+              class="makeStyles-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id makeStyles-content-id"
+            >
+              <div
+                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+              >
+                General Informations
+              </div>
+              <div
+                class="makeStyles-root-id makeStyles-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -35372,9 +35679,14 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
                   </div>
                 </div>
               </div>
-              <div
-                class="makeStyles-spacer-id"
+              <hr
+                class="makeStyles-root-id makeStyles-hr-id"
               />
+              <div
+                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+              >
+                Contact Informations
+              </div>
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
               >
@@ -35410,50 +35722,6 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
                   </fieldset>
                 </div>
               </div>
-              <div
-                class="makeStyles-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Note
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                >
-                  <textarea
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    name="note"
-                    rows="1"
-                  />
-                  <textarea
-                    aria-hidden="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    readonly=""
-                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                    tabindex="-1"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
             </div>
           </div>
           <div
@@ -35749,11 +36017,11 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
               <span
                 class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
               >
-                General Informations
+                elizabeth.vaughn@example.com
                 <div
-                  class="MuiTypography-root-id MuiTypography-caption-id"
+                  class="MuiTypography-root-id makeStyles-subtitle-id MuiTypography-caption-id"
                 >
-                  Customer since: May 2017
+                  Active member since May 2017
                 </div>
               </span>
               <div
@@ -35767,10 +36035,10 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
               class="makeStyles-hr-id"
             />
             <div
-              class="MuiCardContent-root-id"
+              class="MuiCardContent-root-id makeStyles-content-id"
             >
               <label
-                class="MuiFormControlLabel-root-id"
+                class="MuiFormControlLabel-root-id makeStyles-checkbox-id"
               >
                 <button
                   class="MuiButtonBase-root-id makeStyles-root-id"
@@ -35791,10 +36059,82 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
                 </span>
               </label>
               <div
-                class="makeStyles-spacer-id"
-              />
+                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                  data-shrink="false"
+                >
+                  Note
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
+                >
+                  <textarea
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                    name="note"
+                    rows="1"
+                  />
+                  <textarea
+                    aria-hidden="true"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                    readonly=""
+                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
+                    tabindex="-1"
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="makeStyles-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+          >
+            <div
+              class="makeStyles-root-id"
+            >
+              <span
+                class="MuiTypography-root-id makeStyles-title-id MuiTypography-h5-id"
+              >
+                Personal Informations
+              </span>
               <div
-                class="makeStyles-root-id"
+                class="makeStyles-toolbar-id"
+              />
+            </div>
+            <div
+              class="makeStyles-children-id"
+            />
+            <hr
+              class="makeStyles-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id makeStyles-content-id"
+            >
+              <div
+                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+              >
+                General Informations
+              </div>
+              <div
+                class="makeStyles-root-id makeStyles-uniform-id"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -35867,9 +36207,14 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
                   </div>
                 </div>
               </div>
-              <div
-                class="makeStyles-spacer-id"
+              <hr
+                class="makeStyles-root-id makeStyles-hr-id"
               />
+              <div
+                class="MuiTypography-root-id makeStyles-sectionHeader-id MuiTypography-body1-id"
+              >
+                Contact Informations
+              </div>
               <div
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
               >
@@ -35905,50 +36250,6 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
                   </fieldset>
                 </div>
               </div>
-              <div
-                class="makeStyles-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Note
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                >
-                  <textarea
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    name="note"
-                    rows="1"
-                  />
-                  <textarea
-                    aria-hidden="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    readonly=""
-                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                    tabindex="-1"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
             </div>
           </div>
           <div

From 4e56ae797e11df069165745c832f26028d45adc0 Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Tue, 12 Nov 2019 13:39:48 +0100
Subject: [PATCH 06/11] Update messages

---
 locale/messages.pot | 34 +++++++++++++++++++++++++---------
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/locale/messages.pot b/locale/messages.pot
index 394dd6744..3ad29f137 100644
--- a/locale/messages.pot
+++ b/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:

From 17575478f7dda45626c3dfaf22a2bc84798989ea Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Tue, 12 Nov 2019 13:45:51 +0100
Subject: [PATCH 07/11] Update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f06456061..76af0541f 100644
--- a/CHANGELOG.md
+++ b/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
 
 ## 2.0.0
 

From 6d0607032aed2ebb57290f008632b91e2574e7fa Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Wed, 13 Nov 2019 14:50:38 +0100
Subject: [PATCH 08/11] Add form validation

---
 .../CustomerCreatePage/CustomerCreatePage.tsx        |  9 +++++++--
 src/hooks/useAddressValidation.ts                    | 12 ++++++------
 src/misc.ts                                          |  6 +++---
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/customers/components/CustomerCreatePage/CustomerCreatePage.tsx b/src/customers/components/CustomerCreatePage/CustomerCreatePage.tsx
index 1ce4a9397..d6572883c 100644
--- a/src/customers/components/CustomerCreatePage/CustomerCreatePage.tsx
+++ b/src/customers/components/CustomerCreatePage/CustomerCreatePage.tsx
@@ -9,6 +9,7 @@ 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 createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
 import { UserError } from "../../../types";
@@ -67,12 +68,16 @@ const CustomerCreatePage: React.FC<CustomerCreatePageProps> = ({
     label: country.country,
     value: country.code
   }));
+  const {
+    errors: validationErrors,
+    submit: handleSubmit
+  } = useAddressValidation(onSubmit);
 
   return (
     <Form
       initial={initialForm}
-      onSubmit={onSubmit}
-      errors={errors}
+      onSubmit={handleSubmit}
+      errors={[...errors, ...validationErrors]}
       confirmLeave
     >
       {({ change, data, errors: formErrors, hasChanged, submit }) => {
diff --git a/src/hooks/useAddressValidation.ts b/src/hooks/useAddressValidation.ts
index 9bd1e401d..ef7ad365a 100644
--- a/src/hooks/useAddressValidation.ts
+++ b/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(
diff --git a/src/misc.ts b/src/misc.ts
index ff80d36a2..b6f3f958e 100644
--- a/src/misc.ts
+++ b/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)

From 0eec56e1bba95de381cb3691ff70f0ecf1f12591 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcin=20G=C4=99bala?= <maarcin.gebala@gmail.com>
Date: Thu, 14 Nov 2019 12:17:32 +0100
Subject: [PATCH 09/11] Enable Netlify redirects

---
 _redirects | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 _redirects

diff --git a/_redirects b/_redirects
new file mode 100644
index 000000000..c3eb143cd
--- /dev/null
+++ b/_redirects
@@ -0,0 +1,3 @@
+# Redirect rules for Netlify
+
+/*    /index.html   200

From e9dabd4f1caf726165c3c07ecefe3d7e78cfd8ec Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Thu, 14 Nov 2019 17:07:31 +0100
Subject: [PATCH 10/11] Fix submitting form without address

---
 .../CustomerCreatePage/CustomerCreatePage.tsx | 64 +++++++++++++++++--
 src/customers/views/CustomerCreate.tsx        | 36 +----------
 2 files changed, 61 insertions(+), 39 deletions(-)

diff --git a/src/customers/components/CustomerCreatePage/CustomerCreatePage.tsx b/src/customers/components/CustomerCreatePage/CustomerCreatePage.tsx
index d6572883c..00195850f 100644
--- a/src/customers/components/CustomerCreatePage/CustomerCreatePage.tsx
+++ b/src/customers/components/CustomerCreatePage/CustomerCreatePage.tsx
@@ -11,6 +11,7 @@ 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";
@@ -19,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: "",
@@ -50,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> = ({
@@ -70,8 +75,57 @@ const CustomerCreatePage: React.FC<CustomerCreatePageProps> = ({
   }));
   const {
     errors: validationErrors,
-    submit: handleSubmit
-  } = useAddressValidation(onSubmit);
+    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) => {
+    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 as any);
+    } else {
+      onSubmit({
+        address: null,
+        customerFirstName: formData.customerFirstName,
+        customerLastName: formData.customerLastName,
+        email: formData.email,
+        note: formData.note
+      });
+    }
+  };
 
   return (
     <Form
diff --git a/src/customers/views/CustomerCreate.tsx b/src/customers/views/CustomerCreate.tsx
index 60d729211..a8a4e108a 100644
--- a/src/customers/views/CustomerCreate.tsx
+++ b/src/customers/views/CustomerCreate.tsx
@@ -58,43 +58,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,

From 89b2958a2ff2e0e0eb3d29b4ec5dff211f33b3c5 Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Thu, 14 Nov 2019 17:14:59 +0100
Subject: [PATCH 11/11] Fix types

---
 .../components/CustomerCreatePage/CustomerCreatePage.tsx    | 6 ++++--
 src/customers/views/CustomerCreate.tsx                      | 3 +--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/customers/components/CustomerCreatePage/CustomerCreatePage.tsx b/src/customers/components/CustomerCreatePage/CustomerCreatePage.tsx
index 00195850f..f5e814572 100644
--- a/src/customers/components/CustomerCreatePage/CustomerCreatePage.tsx
+++ b/src/customers/components/CustomerCreatePage/CustomerCreatePage.tsx
@@ -98,7 +98,9 @@ const CustomerCreatePage: React.FC<CustomerCreatePageProps> = ({
     })
   );
 
-  const handleSubmit = (formData: CustomerCreatePageFormData) => {
+  const handleSubmit = (
+    formData: CustomerCreatePageFormData & AddressTypeInput
+  ) => {
     const areAddressInputFieldsModified = ([
       "city",
       "companyName",
@@ -115,7 +117,7 @@ const CustomerCreatePage: React.FC<CustomerCreatePageProps> = ({
       .some(field => field !== "");
 
     if (areAddressInputFieldsModified) {
-      handleSubmitWithAddress(formData as any);
+      handleSubmitWithAddress(formData);
     } else {
       onSubmit({
         address: null,
diff --git a/src/customers/views/CustomerCreate.tsx b/src/customers/views/CustomerCreate.tsx
index a8a4e108a..404b5fcff 100644
--- a/src/customers/views/CustomerCreate.tsx
+++ b/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";