diff --git a/src/components/Messages/__snapshots__/Messages.test.js.snap b/src/components/Messages/__snapshots__/Messages.test.js.snap
index b054976d..05ef3aac 100644
--- a/src/components/Messages/__snapshots__/Messages.test.js.snap
+++ b/src/components/Messages/__snapshots__/Messages.test.js.snap
@@ -6,6 +6,7 @@ exports[`Messages matches snapshot 1`] = `
 >
   <li
     className={undefined}
+    id="msg-msg1"
   >
     <div
       className={undefined}
@@ -41,6 +42,7 @@ exports[`Messages matches snapshot 1`] = `
   </li>
   <li
     className={undefined}
+    id="msg-msg2"
   >
     <div
       className={undefined}
diff --git a/src/components/OrderDetailsPanel/OrderDetailsPanel.test.js b/src/components/OrderDetailsPanel/OrderDetailsPanel.test.js
index ccaed4fd..11528825 100644
--- a/src/components/OrderDetailsPanel/OrderDetailsPanel.test.js
+++ b/src/components/OrderDetailsPanel/OrderDetailsPanel.test.js
@@ -1,7 +1,14 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { types } from '../../util/sdkLoader';
-import { createBooking, createListing, createUser, createTransaction } from '../../util/test-data';
+import {
+  createBooking,
+  createListing,
+  createUser,
+  createTransaction,
+  createCurrentUser,
+  createMessage,
+} from '../../util/test-data';
 import { renderShallow } from '../../util/test-helpers';
 import { fakeIntl } from '../../util/test-data';
 import * as propTypes from '../../util/propTypes';
@@ -57,11 +64,20 @@ const txDelivered = createTransaction({
   ...baseTxAttrs,
 });
 
+const noop = () => null;
+
 describe('OrderDetailsPanel', () => {
   const panelBaseProps = {
     intl: fakeIntl,
-    messages: [],
+    currentUser: createCurrentUser('user2'),
+    messages: [
+      createMessage('msg1', {}, { sender: createUser('user1') }),
+      createMessage('msg2', {}, { sender: createUser('user2') }),
+    ],
     initialMessageFailed: false,
+    sendMessageInProgress: false,
+    onSendMessage: noop,
+    onResetForm: noop,
   };
 
   it('preauthorized matches snapshot', () => {
diff --git a/src/components/OrderDetailsPanel/__snapshots__/OrderDetailsPanel.test.js.snap b/src/components/OrderDetailsPanel/__snapshots__/OrderDetailsPanel.test.js.snap
index 5c7e55e3..7566cd1d 100644
--- a/src/components/OrderDetailsPanel/__snapshots__/OrderDetailsPanel.test.js.snap
+++ b/src/components/OrderDetailsPanel/__snapshots__/OrderDetailsPanel.test.js.snap
@@ -211,8 +211,98 @@ exports[`OrderDetailsPanel accepted matches snapshot 1`] = `
           userRole="customer"
         />
       </div>
+      <div
+        className=""
+      >
+        <h3>
+          <FormattedMessage
+            id="OrderDetailsPanel.messagesHeading"
+            values={Object {}}
+          />
+        </h3>
+        <InjectIntl(Component)
+          currentUser={
+            Object {
+              "attributes": Object {
+                "banned": false,
+                "email": "user2@example.com",
+                "emailVerified": true,
+                "profile": Object {
+                  "abbreviatedName": "user2 abbreviated name",
+                  "displayName": "user2 display name",
+                  "firstName": "user2 first name",
+                  "lastName": "user2 last name",
+                },
+                "stripeConnected": true,
+              },
+              "id": UUID {
+                "uuid": "user2",
+              },
+              "type": "currentUser",
+            }
+          }
+          messages={
+            Array [
+              Object {
+                "attributes": Object {
+                  "at": 2017-11-09T08:12:00.000Z,
+                  "content": "Message msg1
+            
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+                },
+                "id": UUID {
+                  "uuid": "msg1",
+                },
+                "sender": Object {
+                  "attributes": Object {
+                    "banned": false,
+                    "profile": Object {
+                      "abbreviatedName": "TT",
+                      "displayName": "user1 display name",
+                    },
+                  },
+                  "id": UUID {
+                    "uuid": "user1",
+                  },
+                  "type": "user",
+                },
+                "type": "message",
+              },
+              Object {
+                "attributes": Object {
+                  "at": 2017-11-09T08:12:00.000Z,
+                  "content": "Message msg2
+            
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+                },
+                "id": UUID {
+                  "uuid": "msg2",
+                },
+                "sender": Object {
+                  "attributes": Object {
+                    "banned": false,
+                    "profile": Object {
+                      "abbreviatedName": "TT",
+                      "displayName": "user2 display name",
+                    },
+                  },
+                  "id": UUID {
+                    "uuid": "user2",
+                  },
+                  "type": "user",
+                },
+                "type": "message",
+              },
+            ]
+          }
+        />
+      </div>
       <SendMessageForm
+        form="OrderDetailsPanel.SendMessageForm"
+        inProgress={false}
         messagePlaceholder="OrderDetailsPanel.sendMessagePlaceholder"
+        onSubmit={[Function]}
+        sendMessageError={null}
       />
     </div>
     <div>
@@ -606,8 +696,98 @@ exports[`OrderDetailsPanel autodeclined matches snapshot 1`] = `
           userRole="customer"
         />
       </div>
+      <div
+        className=""
+      >
+        <h3>
+          <FormattedMessage
+            id="OrderDetailsPanel.messagesHeading"
+            values={Object {}}
+          />
+        </h3>
+        <InjectIntl(Component)
+          currentUser={
+            Object {
+              "attributes": Object {
+                "banned": false,
+                "email": "user2@example.com",
+                "emailVerified": true,
+                "profile": Object {
+                  "abbreviatedName": "user2 abbreviated name",
+                  "displayName": "user2 display name",
+                  "firstName": "user2 first name",
+                  "lastName": "user2 last name",
+                },
+                "stripeConnected": true,
+              },
+              "id": UUID {
+                "uuid": "user2",
+              },
+              "type": "currentUser",
+            }
+          }
+          messages={
+            Array [
+              Object {
+                "attributes": Object {
+                  "at": 2017-11-09T08:12:00.000Z,
+                  "content": "Message msg1
+            
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+                },
+                "id": UUID {
+                  "uuid": "msg1",
+                },
+                "sender": Object {
+                  "attributes": Object {
+                    "banned": false,
+                    "profile": Object {
+                      "abbreviatedName": "TT",
+                      "displayName": "user1 display name",
+                    },
+                  },
+                  "id": UUID {
+                    "uuid": "user1",
+                  },
+                  "type": "user",
+                },
+                "type": "message",
+              },
+              Object {
+                "attributes": Object {
+                  "at": 2017-11-09T08:12:00.000Z,
+                  "content": "Message msg2
+            
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+                },
+                "id": UUID {
+                  "uuid": "msg2",
+                },
+                "sender": Object {
+                  "attributes": Object {
+                    "banned": false,
+                    "profile": Object {
+                      "abbreviatedName": "TT",
+                      "displayName": "user2 display name",
+                    },
+                  },
+                  "id": UUID {
+                    "uuid": "user2",
+                  },
+                  "type": "user",
+                },
+                "type": "message",
+              },
+            ]
+          }
+        />
+      </div>
       <SendMessageForm
+        form="OrderDetailsPanel.SendMessageForm"
+        inProgress={false}
         messagePlaceholder="OrderDetailsPanel.sendMessagePlaceholder"
+        onSubmit={[Function]}
+        sendMessageError={null}
       />
     </div>
     <div>
@@ -1024,8 +1204,98 @@ exports[`OrderDetailsPanel canceled matches snapshot 1`] = `
           userRole="customer"
         />
       </div>
+      <div
+        className="undefined"
+      >
+        <h3>
+          <FormattedMessage
+            id="OrderDetailsPanel.messagesHeading"
+            values={Object {}}
+          />
+        </h3>
+        <InjectIntl(Component)
+          currentUser={
+            Object {
+              "attributes": Object {
+                "banned": false,
+                "email": "user2@example.com",
+                "emailVerified": true,
+                "profile": Object {
+                  "abbreviatedName": "user2 abbreviated name",
+                  "displayName": "user2 display name",
+                  "firstName": "user2 first name",
+                  "lastName": "user2 last name",
+                },
+                "stripeConnected": true,
+              },
+              "id": UUID {
+                "uuid": "user2",
+              },
+              "type": "currentUser",
+            }
+          }
+          messages={
+            Array [
+              Object {
+                "attributes": Object {
+                  "at": 2017-11-09T08:12:00.000Z,
+                  "content": "Message msg1
+            
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+                },
+                "id": UUID {
+                  "uuid": "msg1",
+                },
+                "sender": Object {
+                  "attributes": Object {
+                    "banned": false,
+                    "profile": Object {
+                      "abbreviatedName": "TT",
+                      "displayName": "user1 display name",
+                    },
+                  },
+                  "id": UUID {
+                    "uuid": "user1",
+                  },
+                  "type": "user",
+                },
+                "type": "message",
+              },
+              Object {
+                "attributes": Object {
+                  "at": 2017-11-09T08:12:00.000Z,
+                  "content": "Message msg2
+            
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+                },
+                "id": UUID {
+                  "uuid": "msg2",
+                },
+                "sender": Object {
+                  "attributes": Object {
+                    "banned": false,
+                    "profile": Object {
+                      "abbreviatedName": "TT",
+                      "displayName": "user2 display name",
+                    },
+                  },
+                  "id": UUID {
+                    "uuid": "user2",
+                  },
+                  "type": "user",
+                },
+                "type": "message",
+              },
+            ]
+          }
+        />
+      </div>
       <SendMessageForm
+        form="OrderDetailsPanel.SendMessageForm"
+        inProgress={false}
         messagePlaceholder="OrderDetailsPanel.sendMessagePlaceholder"
+        onSubmit={[Function]}
+        sendMessageError={null}
       />
     </div>
     <div>
@@ -1419,8 +1689,98 @@ exports[`OrderDetailsPanel declined matches snapshot 1`] = `
           userRole="customer"
         />
       </div>
+      <div
+        className=""
+      >
+        <h3>
+          <FormattedMessage
+            id="OrderDetailsPanel.messagesHeading"
+            values={Object {}}
+          />
+        </h3>
+        <InjectIntl(Component)
+          currentUser={
+            Object {
+              "attributes": Object {
+                "banned": false,
+                "email": "user2@example.com",
+                "emailVerified": true,
+                "profile": Object {
+                  "abbreviatedName": "user2 abbreviated name",
+                  "displayName": "user2 display name",
+                  "firstName": "user2 first name",
+                  "lastName": "user2 last name",
+                },
+                "stripeConnected": true,
+              },
+              "id": UUID {
+                "uuid": "user2",
+              },
+              "type": "currentUser",
+            }
+          }
+          messages={
+            Array [
+              Object {
+                "attributes": Object {
+                  "at": 2017-11-09T08:12:00.000Z,
+                  "content": "Message msg1
+            
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+                },
+                "id": UUID {
+                  "uuid": "msg1",
+                },
+                "sender": Object {
+                  "attributes": Object {
+                    "banned": false,
+                    "profile": Object {
+                      "abbreviatedName": "TT",
+                      "displayName": "user1 display name",
+                    },
+                  },
+                  "id": UUID {
+                    "uuid": "user1",
+                  },
+                  "type": "user",
+                },
+                "type": "message",
+              },
+              Object {
+                "attributes": Object {
+                  "at": 2017-11-09T08:12:00.000Z,
+                  "content": "Message msg2
+            
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+                },
+                "id": UUID {
+                  "uuid": "msg2",
+                },
+                "sender": Object {
+                  "attributes": Object {
+                    "banned": false,
+                    "profile": Object {
+                      "abbreviatedName": "TT",
+                      "displayName": "user2 display name",
+                    },
+                  },
+                  "id": UUID {
+                    "uuid": "user2",
+                  },
+                  "type": "user",
+                },
+                "type": "message",
+              },
+            ]
+          }
+        />
+      </div>
       <SendMessageForm
+        form="OrderDetailsPanel.SendMessageForm"
+        inProgress={false}
         messagePlaceholder="OrderDetailsPanel.sendMessagePlaceholder"
+        onSubmit={[Function]}
+        sendMessageError={null}
       />
     </div>
     <div>
@@ -1814,8 +2174,98 @@ exports[`OrderDetailsPanel delivered matches snapshot 1`] = `
           userRole="customer"
         />
       </div>
+      <div
+        className=""
+      >
+        <h3>
+          <FormattedMessage
+            id="OrderDetailsPanel.messagesHeading"
+            values={Object {}}
+          />
+        </h3>
+        <InjectIntl(Component)
+          currentUser={
+            Object {
+              "attributes": Object {
+                "banned": false,
+                "email": "user2@example.com",
+                "emailVerified": true,
+                "profile": Object {
+                  "abbreviatedName": "user2 abbreviated name",
+                  "displayName": "user2 display name",
+                  "firstName": "user2 first name",
+                  "lastName": "user2 last name",
+                },
+                "stripeConnected": true,
+              },
+              "id": UUID {
+                "uuid": "user2",
+              },
+              "type": "currentUser",
+            }
+          }
+          messages={
+            Array [
+              Object {
+                "attributes": Object {
+                  "at": 2017-11-09T08:12:00.000Z,
+                  "content": "Message msg1
+            
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+                },
+                "id": UUID {
+                  "uuid": "msg1",
+                },
+                "sender": Object {
+                  "attributes": Object {
+                    "banned": false,
+                    "profile": Object {
+                      "abbreviatedName": "TT",
+                      "displayName": "user1 display name",
+                    },
+                  },
+                  "id": UUID {
+                    "uuid": "user1",
+                  },
+                  "type": "user",
+                },
+                "type": "message",
+              },
+              Object {
+                "attributes": Object {
+                  "at": 2017-11-09T08:12:00.000Z,
+                  "content": "Message msg2
+            
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+                },
+                "id": UUID {
+                  "uuid": "msg2",
+                },
+                "sender": Object {
+                  "attributes": Object {
+                    "banned": false,
+                    "profile": Object {
+                      "abbreviatedName": "TT",
+                      "displayName": "user2 display name",
+                    },
+                  },
+                  "id": UUID {
+                    "uuid": "user2",
+                  },
+                  "type": "user",
+                },
+                "type": "message",
+              },
+            ]
+          }
+        />
+      </div>
       <SendMessageForm
+        form="OrderDetailsPanel.SendMessageForm"
+        inProgress={false}
         messagePlaceholder="OrderDetailsPanel.sendMessagePlaceholder"
+        onSubmit={[Function]}
+        sendMessageError={null}
       />
     </div>
     <div>
@@ -2232,8 +2682,98 @@ exports[`OrderDetailsPanel preauthorized matches snapshot 1`] = `
           userRole="customer"
         />
       </div>
+      <div
+        className="undefined"
+      >
+        <h3>
+          <FormattedMessage
+            id="OrderDetailsPanel.messagesHeading"
+            values={Object {}}
+          />
+        </h3>
+        <InjectIntl(Component)
+          currentUser={
+            Object {
+              "attributes": Object {
+                "banned": false,
+                "email": "user2@example.com",
+                "emailVerified": true,
+                "profile": Object {
+                  "abbreviatedName": "user2 abbreviated name",
+                  "displayName": "user2 display name",
+                  "firstName": "user2 first name",
+                  "lastName": "user2 last name",
+                },
+                "stripeConnected": true,
+              },
+              "id": UUID {
+                "uuid": "user2",
+              },
+              "type": "currentUser",
+            }
+          }
+          messages={
+            Array [
+              Object {
+                "attributes": Object {
+                  "at": 2017-11-09T08:12:00.000Z,
+                  "content": "Message msg1
+            
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+                },
+                "id": UUID {
+                  "uuid": "msg1",
+                },
+                "sender": Object {
+                  "attributes": Object {
+                    "banned": false,
+                    "profile": Object {
+                      "abbreviatedName": "TT",
+                      "displayName": "user1 display name",
+                    },
+                  },
+                  "id": UUID {
+                    "uuid": "user1",
+                  },
+                  "type": "user",
+                },
+                "type": "message",
+              },
+              Object {
+                "attributes": Object {
+                  "at": 2017-11-09T08:12:00.000Z,
+                  "content": "Message msg2
+            
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+                },
+                "id": UUID {
+                  "uuid": "msg2",
+                },
+                "sender": Object {
+                  "attributes": Object {
+                    "banned": false,
+                    "profile": Object {
+                      "abbreviatedName": "TT",
+                      "displayName": "user2 display name",
+                    },
+                  },
+                  "id": UUID {
+                    "uuid": "user2",
+                  },
+                  "type": "user",
+                },
+                "type": "message",
+              },
+            ]
+          }
+        />
+      </div>
       <SendMessageForm
+        form="OrderDetailsPanel.SendMessageForm"
+        inProgress={false}
         messagePlaceholder="OrderDetailsPanel.sendMessagePlaceholder"
+        onSubmit={[Function]}
+        sendMessageError={null}
       />
     </div>
     <div>
diff --git a/src/containers/OrderPage/OrderPage.test.js b/src/containers/OrderPage/OrderPage.test.js
index e01e2c4b..3d5c74ad 100644
--- a/src/containers/OrderPage/OrderPage.test.js
+++ b/src/containers/OrderPage/OrderPage.test.js
@@ -34,8 +34,11 @@ describe('OrderPage', () => {
 
       currentUser: createCurrentUser('customer1'),
       messages: [],
+      sendMessageInProgress: false,
       scrollingDisabled: false,
       transaction,
+      onSendMessage: noop,
+      onResetForm: noop,
 
       intl: fakeIntl,
     };
diff --git a/src/containers/OrderPage/__snapshots__/OrderPage.test.js.snap b/src/containers/OrderPage/__snapshots__/OrderPage.test.js.snap
index 4fb96448..2bcba8a0 100644
--- a/src/containers/OrderPage/__snapshots__/OrderPage.test.js.snap
+++ b/src/containers/OrderPage/__snapshots__/OrderPage.test.js.snap
@@ -19,7 +19,7 @@ exports[`OrderPage matches snapshot 1`] = `
       className={null}
       rootClassName={null}
     >
-      <InjectIntl(Component)
+      <InjectIntl(OrderDetailsPanelComponent)
         className="undefined"
         currentUser={
           Object {
@@ -44,6 +44,10 @@ exports[`OrderPage matches snapshot 1`] = `
         fetchMessagesError={null}
         initialMessageFailed={false}
         messages={Array []}
+        onResetForm={[Function]}
+        onSendMessage={[Function]}
+        sendMessageError={null}
+        sendMessageInProgress={false}
         transaction={
           Object {
             "attributes": Object {