Add first and last name to detail component

saleor · Nov 6, 2018 · 03975c3 · 03975c3
1 parent 4963a4f
commit 03975c3
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 6 deletions.
diff --git a/...tatic/dashboard-next/customers/components/CustomerCreateDetails/CustomerCreateDetails.tsx b/...tatic/dashboard-next/customers/components/CustomerCreateDetails/CustomerCreateDetails.tsx
@@ -43,7 +43,7 @@ const CustomerCreateDetails = decorate<CustomerCreateDetailsProps>(
             name="firstName"
             label={i18n.t("First Name")}
             helperText={errors.firstName}
-            type="firstName"
+            type="text"
             value={data.email}
             onChange={onChange}
           />
@@ -54,7 +54,7 @@ const CustomerCreateDetails = decorate<CustomerCreateDetailsProps>(
             name="lastName"
             label={i18n.t("Last Name")}
             helperText={errors.lastName}
-            type="lastName"
+            type="text"
             value={data.lastName}
             onChange={onChange}
           />

diff --git a/saleor/static/dashboard-next/customers/components/CustomerDetails/CustomerDetails.tsx b/saleor/static/dashboard-next/customers/components/CustomerDetails/CustomerDetails.tsx
@@ -16,23 +16,34 @@ import { CustomerDetails_user } from "../../types/CustomerDetails";
 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;
   };
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
-const decorate = withStyles({
+const decorate = withStyles(theme => ({
   cardTitle: {
     height: 64
+  },
+  root: {
+    display: "grid" as "grid",
+    gridColumnGap: theme.spacing.unit * 2 + "px",
+    gridRowGap: theme.spacing.unit * 3 + "px",
+    gridTemplateColumns: "1fr 1fr"
   }
-});
+}));
+
 const CustomerDetails = decorate<CustomerDetailsProps>(
   ({ classes, customer, data, disabled, errors, onChange }) => (
     <Card>
@@ -61,6 +72,31 @@ const CustomerDetails = decorate<CustomerDetailsProps>(
           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}

diff --git a/...or/static/dashboard-next/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx b/...or/static/dashboard-next/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx
@@ -17,6 +17,8 @@ import CustomerOrders from "../CustomerOrders/CustomerOrders";
 import CustomerStats from "../CustomerStats/CustomerStats";
 
 export interface CustomerDetailsPageFormData {
+  firstName: string;
+  lastName: string;
   email: string;
   isActive: boolean;
   note: string;
@@ -60,15 +62,20 @@ const CustomerDetailsPage = decorate<CustomerDetailsPageProps>(
       errors={errors}
       initial={{
         email: maybe(() => customer.email),
+        firstName: maybe(() => customer.firstName),
         isActive: maybe(() => customer.isActive),
+        lastName: maybe(() => customer.lastName),
         note: maybe(() => customer.note)
       }}
       key={JSON.stringify(customer)}
       onSubmit={onSubmit}
     >
       {({ change, data, errors: formErrors, hasChanged, submit }) => (
         <Container width="md">
-          <PageHeader onBack={onBack} title={maybe(() => customer.email)} />
+          <PageHeader
+            onBack={onBack}
+            title={maybe(() => `${customer.firstName} ${customer.lastName}`)}
+          />
           <div className={classes.root}>
             <div>
               <CustomerDetails

diff --git a/saleor/static/dashboard-next/customers/fixtures.ts b/saleor/static/dashboard-next/customers/fixtures.ts
@@ -946,6 +946,8 @@ export const customerList: ListCustomers_customers_edges_node[] = [
 export const customer: CustomerDetails_user = {
   __typename: "User",
   dateJoined: "2017-05-07T09:37:30.124154+00:00",
+  firstName: "Tom",
+
   defaultBillingAddress: {
     __typename: "Address",
     city: "Port Danielshire",
@@ -988,6 +990,7 @@ export const customer: CustomerDetails_user = {
   id: "VXNlcjoy",
   isActive: true,
   lastLogin: "2018-05-07T09:37:30.124154+00:00",
+  lastName: "Cooper",
   lastPlacedOrder: {
     __typename: "OrderCountableConnection",
     edges: [

diff --git a/saleor/static/dashboard-next/customers/types/CustomerDetails.ts b/saleor/static/dashboard-next/customers/types/CustomerDetails.ts
@@ -99,6 +99,8 @@ export interface CustomerDetails_user_lastPlacedOrder {
 
 export interface CustomerDetails_user {
   __typename: "User";
+  firstName: string;
+  lastName: string;
   id: string;
   email: string;
   dateJoined: any;

diff --git a/saleor/static/dashboard-next/storybook/stories/customers/CustomerDetailsPage.tsx b/saleor/static/dashboard-next/storybook/stories/customers/CustomerDetailsPage.tsx
@@ -21,6 +21,13 @@ const props: CustomerDetailsPageProps = {
   saveButtonBar: "default"
 };
 
+interface CustomerDetailsPageErrors {
+  firstName: string;
+  email: string;
+  lastName: string;
+  note: string;
+}
+
 storiesOf("Views / Customers / Customer details", module)
   .addDecorator(Decorator)
   .add("default", () => <CustomerDetailsPage {...props} />)
@@ -30,7 +37,9 @@ storiesOf("Views / Customers / Customer details", module)
   .add("form errors", () => (
     <CustomerDetailsPage
       {...props}
-      errors={[formError("email"), formError("note")]}
+      errors={(["email", "firstName", "lastName"] as Array<
+        keyof CustomerDetailsPageErrors
+      >).map(field => formError(field))}
     />
   ))
   .add("different addresses", () => (