Use order notes for comments

frontend/src/actions/orders/processActions.js

@@ -62,27 +62,16 @@ const sendComment = () => ({
     type: SEND_ORDER_COMMENT
 })
 
-export const addComment = (idOrder, newComment, existingComments) => {
+export const addComment = (idOrder, newComment) => {
     return dispatch => {
         dispatch(sendComment());
-        //TODO: get real user name and store in comment object
-        const newCommentObject = {
-            comment : newComment,
-            date : moment().format("Do MMM, YY"),
-            username: localStorage.getItem('username') || '-',
-        }
-        const concatenatedComments = (existingComments) ? existingComments.concat(newCommentObject) : [newCommentObject];
 
         return htmlClient.fetch({
-            url: `${API_SERVER}/wp-json/wc/v2/orders/${idOrder}`,
-            method: 'put',
+            url: `${API_SERVER}/wp-json/wc/v2/orders/${idOrder}/notes`,
+            method: 'post',
             data: {
-                meta_data: [
-                    {
-                        key:'comments',
-                        value: JSON.stringify(concatenatedComments),
-                    }
-                ]
+                note : newComment || 'Test comment',
+                customer_note: true,
             }
         })
             .then(response => {

frontend/src/containers/orders/components/OrderComments.jsx

@@ -18,19 +18,19 @@ class OrderComments extends Component {
     }
 
     addNewComment(){
-        this.props.dispatch(addComment(this.props.orderInfo.id, this.state.newComment, this.props.orderComments));
+        this.props.dispatch(addComment(this.props.orderInfo.id, this.state.newComment));
     }
 
     onEditorChange(newComment){
         this.setState({newComment});
     }
 
-    getOffset(username){
-        return (username === localStorage.getItem('username')) ? 6 : 0;
+    getOffset(isOwner){
+        return isOwner ? 6 : 0;
     }
 
-    getClassByOwner(username){
-        return (username === localStorage.getItem('username')) ? 'mine' : '';
+    getClassByOwner(isOwner){
+        return isOwner ? 'mine' : '';
     }
 
     render() {
@@ -46,9 +46,9 @@ class OrderComments extends Component {
                                     orderComments &&
                                     orderComments.map((orderComment, index) =>
                                     <Row key={'order-comment-' + index}>
-                                        <Col xl={{size:6, offset:this.getOffset(orderComment.username)}}>
-                                            <div className={'order-comment ' + this.getClassByOwner(orderComment.username)} key={'order-comment-' + index}>
-                                                <div className="order-comment-header">{orderComment.username} - {orderComment.date}</div>
+                                        <Col xl={{size:6, offset:this.getOffset(orderComment.isOwner)}}>
+                                            <div className={'order-comment ' + this.getClassByOwner(orderComment.isOwner)} key={'order-comment-' + index}>
+                                                <div className="order-comment-header">{orderComment.username} - {orderComment.dateCreated}</div>
                                                 <div dangerouslySetInnerHTML={{__html: orderComment.comment}}></div>
                                             </div>
                                         </Col>

frontend/src/containers/orders/style/ProcessContainer.scss

@@ -26,6 +26,7 @@ $link-line-height: 1.5rem;
 
     .completed {
         border-left: $border-width $production-status-color solid;
+        background: $production-status-color;
     }
 
     .end-of-life {
@@ -131,7 +132,7 @@ $link-line-height: 1.5rem;
     background: $canceled-status-color;
 }
 
-.production {
+.completed {
     background: $production-status-color;
 }
 

frontend/src/helpers/OrderHelper.js

@@ -9,13 +9,6 @@ function formatAddress(addressObject) {
     return `${addressObject.address_1}, ${addressObject.city}, ${addressObject.country}, ${addressObject.postcode}`;
 }
 
-function extractComments(metaDataArray){
-    const commentsObject = metaDataArray.find(metaDataElement => {
-        return metaDataElement.key === "comments";
-    });
-    return commentsObject ? JSON.parse(commentsObject.value) : [];
-}
-
 export const fromWCOrder = (WCOrder) => {
     let processInfo = Object.assign({},WCOrder['delivery-process']);
     if (WCOrder['delivery-process']){
@@ -59,7 +52,13 @@ export const fromWCOrder = (WCOrder) => {
             };
         }),
         process: processInfo,
-        comments: extractComments(WCOrder.meta_data),
+        comments: WCOrder.comments ? WCOrder.comments.map(comment => ({
+            id: comment.id,
+            comment: comment.content,
+            username: comment.username,
+            dateCreated: formatDate(comment.date),
+            isOwner: comment['is_owner']
+        })) : [],
         deliveryAddress: formatAddress(WCOrder.shipping),
         customer: WCOrder.customer,
         commercialLead: WCOrder['commercial_lead']