Adds ability to edit customer details page (#736)

* Adds ability to edit customer from customer details page * Removes unnecessary changes * Adds ability to delete customer
papercups-io · Apr 15, 2021 · a94d3ba · a94d3ba
1 parent 048caba
commit a94d3ba
Show file tree

Hide file tree

Showing 3 changed files with 319 additions and 62 deletions.
diff --git a/assets/src/components/customers/CustomerDetailsPageV2.tsx b/assets/src/components/customers/CustomerDetailsPageV2.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {Link, RouteComponentProps} from 'react-router-dom';
 import {Box, Flex} from 'theme-ui';
-import {Button, Empty, Title} from '../common';
+import {notification, Button, Empty, Title} from '../common';
 import {ArrowLeftOutlined} from '../icons';
 import * as API from '../../api';
 import {BrowserSession, Conversation, Customer} from '../../types';
@@ -13,21 +13,24 @@ import StartConversationButton from '../conversations/StartConversationButton';
 import CustomerDetailsSidebar from './CustomerDetailsSidebar';
 import {sortConversationMessages} from '../../utils';
 import CustomerDetailsCard from './CustomerDetailsCard';
+import EditCustomerDetailsModal from './EditCustomerDetailsModal';
 
 type Props = RouteComponentProps<{id: string}>;
 type State = {
   conversations: Array<Conversation>;
   customer: Customer | null;
-  session: BrowserSession | null;
   loading?: boolean;
+  session: BrowserSession | null;
+  isEditModalVisible: boolean;
 };
 
 class CustomerDetailsPage extends React.Component<Props, State> {
   state: State = {
     conversations: [],
     customer: null,
-    session: null,
     loading: true,
+    session: null,
+    isEditModalVisible: false,
   };
 
   async componentDidMount() {
@@ -98,12 +101,32 @@ class CustomerDetailsPage extends React.Component<Props, State> {
     this.props.history.push(url);
   };
 
+  handleCustomerUpdated = async () => {
+    const customer = await this.fetchCustomer();
+    this.setState({customer});
+    this.toggleIsEditModalVisible(false);
+    notification.success({
+      message: `Customer successfully updated`,
+      duration: 10,
+    });
+  };
+
   handleCustomerDeleted = () => {
     this.props.history.push('/customers');
   };
 
+  toggleIsEditModalVisible = (isEditModalVisible: boolean) => {
+    this.setState({isEditModalVisible});
+  };
+
   render() {
-    const {loading, customer, conversations = [], session} = this.state;
+    const {
+      conversations = [],
+      customer,
+      isEditModalVisible,
+      loading,
+      session,
+    } = this.state;
 
     // TODO: add error handling when customer can't be loaded
     if (loading || !customer) {
@@ -138,54 +161,71 @@ class CustomerDetailsPage extends React.Component<Props, State> {
           </Link>
         </Flex>
 
-        <Flex sx={{height: '100%'}}>
-          <Box mr={3}>
-            <CustomerDetailsSidebar customer={customer} session={session} />
-          </Box>
-
-          <Box sx={{flex: 3}}>
-            <CustomerDetailsCard>
-              <Flex
-                p={3}
-                sx={{
-                  borderBottom: '1px solid rgba(0,0,0,.06)',
-                  justifyContent: 'space-between',
-                }}
-              >
-                <Title level={4}>Conversations</Title>
-                <StartConversationButton
-                  customerId={this.getCustomerId()}
-                  isDisabled={this.hasOpenConversation()}
-                  onInitializeNewConversation={this.refetchConversations}
-                />
-              </Flex>
-
-              {conversations.length > 0 ? (
-                conversations.map((conversation) => {
-                  const {
-                    id: conversationId,
-                    customer_id: customerId,
-                    messages = [],
-                  } = conversation;
-                  const color = getColorByUuid(customerId);
-                  const sorted = sortConversationMessages(messages);
-
-                  return (
-                    <ConversationItem
-                      key={conversationId}
-                      conversation={conversation}
-                      messages={sorted}
-                      color={color}
-                      onSelectConversation={this.handleSelectConversation}
-                    />
-                  );
-                })
-              ) : (
-                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
-              )}
-            </CustomerDetailsCard>
-          </Box>
-        </Flex>
+        <Box sx={{height: '100%'}}>
+          <Flex sx={{flexDirection: 'row-reverse'}} mb={3}>
+            <Button
+              type="primary"
+              onClick={() => this.toggleIsEditModalVisible(true)}
+            >
+              Edit
+            </Button>
+            <EditCustomerDetailsModal
+              customer={customer}
+              isVisible={isEditModalVisible}
+              onClose={() => this.toggleIsEditModalVisible(false)}
+              onDelete={this.handleCustomerDeleted}
+              onUpdate={this.handleCustomerUpdated}
+            />
+          </Flex>
+          <Flex sx={{height: '100%'}}>
+            <Box mr={3}>
+              <CustomerDetailsSidebar customer={customer} session={session} />
+            </Box>
+
+            <Box sx={{flex: 3}}>
+              <CustomerDetailsCard>
+                <Flex
+                  p={3}
+                  sx={{
+                    borderBottom: '1px solid rgba(0,0,0,.06)',
+                    justifyContent: 'space-between',
+                  }}
+                >
+                  <Title level={4}>Conversations</Title>
+                  <StartConversationButton
+                    customerId={this.getCustomerId()}
+                    isDisabled={this.hasOpenConversation()}
+                    onInitializeNewConversation={this.refetchConversations}
+                  />
+                </Flex>
+
+                {conversations.length > 0 ? (
+                  conversations.map((conversation) => {
+                    const {
+                      id: conversationId,
+                      customer_id: customerId,
+                      messages = [],
+                    } = conversation;
+                    const color = getColorByUuid(customerId);
+                    const sorted = sortConversationMessages(messages);
+
+                    return (
+                      <ConversationItem
+                        key={conversationId}
+                        conversation={conversation}
+                        messages={sorted}
+                        color={color}
+                        onSelectConversation={this.handleSelectConversation}
+                      />
+                    );
+                  })
+                ) : (
+                  <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+                )}
+              </CustomerDetailsCard>
+            </Box>
+          </Flex>
+        </Box>
       </Flex>
     );
   }

diff --git a/assets/src/components/customers/CustomerDetailsSidebar.tsx b/assets/src/components/customers/CustomerDetailsSidebar.tsx
@@ -31,22 +31,22 @@ export const CustomerDetailsSidebar = ({
   session: BrowserSession | null;
 }) => {
   const {
-    email,
-    name,
     browser,
-    os,
-    phone,
-    pathname,
-    title,
     company,
-    id: customerId,
-    external_id: externalId,
     created_at: createdAt,
-    last_seen_at: lastSeenAt,
     current_url: currentUrl,
-    time_zone: timezone,
+    email,
+    external_id: externalId,
+    id: customerId,
     ip: lastIpAddress,
+    last_seen_at: lastSeenAt,
     metadata = {},
+    name,
+    os,
+    pathname,
+    phone,
+    time_zone: timezone,
+    title,
   } = customer;
   const hasMetadata = !!metadata && Object.keys(metadata).length > 0;
 
@@ -55,6 +55,7 @@ export const CustomerDetailsSidebar = ({
       <Box p={3}>
         <Title level={4}>{title}</Title>
         <Divider dashed />
+
         <CustomerDetailsSection title="Basic">
           <CustomerDetailsProperty
             icon={<UserOutlined style={{color: colors.primary}} />}
@@ -79,7 +80,9 @@ export const CustomerDetailsSidebar = ({
             value={<CustomerDetailsPropertyValue value={phone} />}
           />
         </CustomerDetailsSection>
+
         <Divider dashed />
+
         <CustomerDetailsSection title="Activity">
           <CustomerDetailsProperty
             icon={<CalendarOutlined style={{color: colors.primary}} />}
@@ -119,7 +122,9 @@ export const CustomerDetailsSidebar = ({
             </Box>
           )}
         </CustomerDetailsSection>
+
         <Divider dashed />
+
         <CustomerDetailsSection title="Device">
           <CustomerDetailsProperty
             icon={<GlobalOutlined style={{color: colors.primary}} />}
@@ -165,6 +170,7 @@ export const CustomerDetailsSidebar = ({
             <Divider dashed />
           </>
         )}
+
         <CustomerDetailsSection title="Tags">
           <SidebarCustomerTags customerId={customerId} />
         </CustomerDetailsSection>