Add first and last name to customer and staff module

CHANGELOG.md

@@ -12,4 +12,5 @@ All notable, unreleased changes to this project will be documented in this file.
 - Add alt text to `Product` `thumbnail` and `background_image` of `Collection` and `Category` - #3429 by @fowczarek
 - Improve several payment validations - #3418 by @jxltom
 - Fix decimal value argument in GraphQL = #3457 by @fowczarek
+- Use first and last name of a customer or staff member in UI - #3247 by @Bonifacy1, @dominik-zeglen
 - Bump `urllib3` and `elasticsearch` to latest versions - #3460 by @maarcingebala

saleor/static/dashboard-next/customers/components/CustomerCreateDetails/CustomerCreateDetails.tsx

@@ -17,17 +17,22 @@ const styles = (theme: Theme) =>
     root: {
       display: "grid",
       gridColumnGap: theme.spacing.unit * 2 + "px",
+      gridRowGap: theme.spacing.unit * 3 + "px",
       gridTemplateColumns: "1fr 1fr"
     }
   });
 
 export interface CustomerCreateDetailsProps extends WithStyles<typeof styles> {
   data: {
     email: string;
+    firstName: string;
+    lastName: string;
   };
   disabled: boolean;
   errors: Partial<{
     email: string;
+    firstName: string;
+    lastName: string;
   }>;
   onChange: (event: React.ChangeEvent<any>) => void;
 }
@@ -46,12 +51,34 @@ const CustomerCreateDetails = withStyles(styles, {
       <CardTitle title={i18n.t("Customer overview")} />
       <CardContent>
         <div className={classes.root}>
+          <TextField
+            disabled={disabled}
+            error={!!errors.firstName}
+            fullWidth
+            name="firstName"
+            label={i18n.t("First Name")}
+            helperText={errors.firstName}
+            type="text"
+            value={data.email}
+            onChange={onChange}
+          />
+          <TextField
+            disabled={disabled}
+            error={!!errors.lastName}
+            fullWidth
+            name="lastName"
+            label={i18n.t("Last Name")}
+            helperText={errors.lastName}
+            type="text"
+            value={data.lastName}
+            onChange={onChange}
+          />
           <TextField
             disabled={disabled}
             error={!!errors.email}
             fullWidth
             name="email"
-            label={i18n.t("E-mail")}
+            label={i18n.t("Email address")}
             helperText={errors.email}
             type="email"
             value={data.email}

saleor/static/dashboard-next/customers/components/CustomerDetails/CustomerDetails.tsx

@@ -1,6 +1,11 @@
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
-import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
+import {
+  createStyles,
+  Theme,
+  withStyles,
+  WithStyles
+} from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
 import * as moment from "moment-timezone";
@@ -13,21 +18,32 @@ import Skeleton from "../../../components/Skeleton";
 import i18n from "../../../i18n";
 import { CustomerDetails_user } from "../../types/CustomerDetails";
 
-const styles = createStyles({
-  cardTitle: {
-    height: 64
-  }
-});
+const styles = (theme: Theme) =>
+  createStyles({
+    cardTitle: {
+      height: 64
+    },
+    root: {
+      display: "grid" as "grid",
+      gridColumnGap: theme.spacing.unit * 2 + "px",
+      gridRowGap: theme.spacing.unit * 3 + "px",
+      gridTemplateColumns: "1fr 1fr"
+    }
+  });
 
 export interface CustomerDetailsProps extends WithStyles<typeof styles> {
   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;
   };
@@ -73,6 +89,31 @@ const CustomerDetails = withStyles(styles, { name: "CustomerDetails" })(
           onChange={onChange}
         />
         <FormSpacer />
+        <div className={classes.root}>
+          <TextField
+            disabled={disabled}
+            error={!!errors.firstName}
+            fullWidth
+            helperText={errors.firstName}
+            name="firstName"
+            type="text"
+            label={i18n.t("First Name")}
+            value={data.firstName}
+            onChange={onChange}
+          />
+          <TextField
+            disabled={disabled}
+            error={!!errors.lastName}
+            fullWidth
+            helperText={errors.lastName}
+            name="lastName"
+            type="text"
+            label={i18n.t("Last Name")}
+            value={data.lastName}
+            onChange={onChange}
+          />
+        </div>
+        <FormSpacer />
         <TextField
           disabled={disabled}
           error={!!errors.email}

saleor/static/dashboard-next/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx

@@ -12,7 +12,7 @@ import Container from "../../../components/Container";
 import Form from "../../../components/Form";
 import PageHeader from "../../../components/PageHeader";
 import SaveButtonBar from "../../../components/SaveButtonBar";
-import { maybe } from "../../../misc";
+import { getUserName, maybe } from "../../../misc";
 import { UserError } from "../../../types";
 import { CustomerDetails_user } from "../../types/CustomerDetails";
 import CustomerAddresses from "../CustomerAddresses/CustomerAddresses";
@@ -21,6 +21,8 @@ import CustomerOrders from "../CustomerOrders/CustomerOrders";
 import CustomerStats from "../CustomerStats/CustomerStats";
 
 export interface CustomerDetailsPageFormData {
+  firstName: string;
+  lastName: string;
   email: string;
   isActive: boolean;
   note: string;
@@ -66,15 +68,17 @@ const CustomerDetailsPage = withStyles(styles, { name: "CustomerDetailsPage" })(
       errors={errors}
       initial={{
         email: maybe(() => customer.email),
+        firstName: maybe(() => customer.firstName),
         isActive: maybe(() => customer.isActive, false),
+        lastName: maybe(() => customer.lastName),
         note: maybe(() => customer.note)
       }}
       onSubmit={onSubmit}
       confirmLeave
     >
       {({ change, data, errors: formErrors, hasChanged, submit }) => (
         <Container width="md">
-          <PageHeader onBack={onBack} title={maybe(() => customer.email)} />
+          <PageHeader onBack={onBack} title={getUserName(customer, true)} />
           <div className={classes.root}>
             <div>
               <CustomerDetails

saleor/static/dashboard-next/customers/components/CustomerList/CustomerList.tsx

@@ -11,16 +11,16 @@ import * as React from "react";
 import Skeleton from "../../../components/Skeleton";
 import TablePagination from "../../../components/TablePagination";
 import i18n from "../../../i18n";
-import { maybe, renderCollection } from "../../../misc";
+import { getUserName, maybe, renderCollection } from "../../../misc";
 import { ListProps } from "../../../types";
 import { ListCustomers_customers_edges_node } from "../../types/ListCustomers";
 
 const styles = createStyles({
   tableRow: {
     cursor: "pointer"
   },
-  textRight: {
-    textAlign: "right"
+  textCenter: {
+    textAlign: "center"
   },
   wideCell: {
     width: "60%"
@@ -47,18 +47,21 @@ const CustomerList = withStyles(styles, { name: "CustomerList" })(
       <Table>
         <TableHead>
           <TableRow>
+            <TableCell>
+              {i18n.t("Customer Name", { context: "table header" })}
+            </TableCell>
             <TableCell className={classes.wideCell}>
               {i18n.t("Customer e-mail", { context: "table header" })}
             </TableCell>
-            <TableCell className={classes.textRight}>
+            <TableCell className={classes.textCenter}>
               {i18n.t("Orders", { context: "table header" })}
             </TableCell>
           </TableRow>
         </TableHead>
         <TableFooter>
           <TableRow>
             <TablePagination
-              colSpan={2}
+              colSpan={3}
               hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
               onNextPage={onNextPage}
               hasPreviousPage={
@@ -80,9 +83,12 @@ const CustomerList = withStyles(styles, { name: "CustomerList" })(
                 <TableCell
                   onClick={customer ? onRowClick(customer.id) : undefined}
                 >
+                  {getUserName(customer)}
+                </TableCell>
+                <TableCell>
                   {maybe<React.ReactNode>(() => customer.email, <Skeleton />)}
                 </TableCell>
-                <TableCell className={classes.textRight}>
+                <TableCell className={classes.textCenter}>
                   {maybe<React.ReactNode>(
                     () => customer.orders.totalCount,
                     <Skeleton />
@@ -92,7 +98,7 @@ const CustomerList = withStyles(styles, { name: "CustomerList" })(
             ),
             () => (
               <TableRow>
-                <TableCell colSpan={2}>
+                <TableCell colSpan={3}>
                   {i18n.t("No customers found")}
                 </TableCell>
               </TableRow>