Render SendMessageForm in Order page

src/components/OrderDetailsPanel/OrderDetailsPanel.css

@@ -83,22 +83,26 @@
 }
 
 .orderInfo {
+  margin-bottom: 210px;
+
   @media (--viewportLarge) {
     max-width: 538px;
     margin-right: 108px;
+    margin-bottom: 0;
   }
 }
 
 .heading {
-  margin: 27px 24px 0 24px;
+  margin: 29px 24px 0 24px;
 
   @media (--viewportMedium) {
+    margin: 25px 24px 0 24px;
     max-width: 80%;
   }
 
   @media (--viewportLarge) {
     max-width: 100%;
-    margin: 177px 0 0 0;
+    margin: 175px 0 0 0;
   }
 }
 
@@ -152,6 +156,9 @@
     width: 409px;
     display: block;
     padding-bottom: 55px;
+    background-color: var(--matterColorLight);
+    border: 1px solid var(--matterColorNegative);
+    border-radius: 2px;
   }
 }
 
@@ -166,12 +173,9 @@
   margin: 1px 0 0 0;
 
   @media (--viewportLarge) {
-    margin-top: 122px;
+    margin-top: 121px;
     margin-left: 0;
     margin-right: 0;
-    background-color: var(--matterColorLight);
-    border: 1px solid var(--matterColorNegative);
-    border-radius: 2px;
   }
 }
 
@@ -189,7 +193,7 @@
   margin-bottom: 10px;
 
   @media (--viewportLarge) {
-    margin-top: 13px;
+    margin-top: 14px;
     margin-bottom: 0;
   }
 }
@@ -262,3 +266,16 @@
     margin-top: 19px;
   }
 }
+
+.sendMessageForm {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  box-shadow: var(--boxShadowBottomForm);
+
+  @media (--viewportLarge) {
+    margin-top: 47px;
+    position: relative;
+    box-shadow: none;
+  }
+}

src/components/OrderDetailsPanel/OrderDetailsPanel.js

@@ -12,6 +12,7 @@ import {
   AvatarMedium,
   Messages,
 } from '../../components';
+import { SendMessageForm } from '../../containers';
 
 import css from './OrderDetailsPanel.css';
 
@@ -163,6 +164,17 @@ export const OrderDetailsPanelComponent = props => {
     </div>
   ) : null;
 
+  const sendMessagePlaceholder = intl.formatMessage(
+    { id: 'OrderDetailsPanel.sendMessagePlaceholder' },
+    { name: 'Juho' }
+  );
+  const sendMessageForm = (
+    <SendMessageForm
+      rootClassName={css.sendMessageForm}
+      messagePlaceholder={sendMessagePlaceholder}
+    />
+  );
+
   const classes = classNames(rootClassName || css.root, className);
 
   return (
@@ -196,6 +208,7 @@ export const OrderDetailsPanelComponent = props => {
             {bookingInfo}
           </div>
           {messagesContainer}
+          {sendMessageForm}
         </div>
         <div className={css.bookingBreakdownContainer}>
           <div className={css.breakdownDesktop}>

src/components/OrderDetailsPanel/__snapshots__/OrderDetailsPanel.test.js.snap

@@ -211,6 +211,9 @@ exports[`OrderDetailsPanel accepted matches snapshot 1`] = `
           userRole="customer"
         />
       </div>
+      <SendMessageForm
+        messagePlaceholder="OrderDetailsPanel.sendMessagePlaceholder"
+      />
     </div>
     <div>
       <div>
@@ -603,6 +606,9 @@ exports[`OrderDetailsPanel autodeclined matches snapshot 1`] = `
           userRole="customer"
         />
       </div>
+      <SendMessageForm
+        messagePlaceholder="OrderDetailsPanel.sendMessagePlaceholder"
+      />
     </div>
     <div>
       <div>
@@ -1018,6 +1024,9 @@ exports[`OrderDetailsPanel canceled matches snapshot 1`] = `
           userRole="customer"
         />
       </div>
+      <SendMessageForm
+        messagePlaceholder="OrderDetailsPanel.sendMessagePlaceholder"
+      />
     </div>
     <div>
       <div>
@@ -1410,6 +1419,9 @@ exports[`OrderDetailsPanel declined matches snapshot 1`] = `
           userRole="customer"
         />
       </div>
+      <SendMessageForm
+        messagePlaceholder="OrderDetailsPanel.sendMessagePlaceholder"
+      />
     </div>
     <div>
       <div>
@@ -1802,6 +1814,9 @@ exports[`OrderDetailsPanel delivered matches snapshot 1`] = `
           userRole="customer"
         />
       </div>
+      <SendMessageForm
+        messagePlaceholder="OrderDetailsPanel.sendMessagePlaceholder"
+      />
     </div>
     <div>
       <div>
@@ -2217,6 +2232,9 @@ exports[`OrderDetailsPanel preauthorized matches snapshot 1`] = `
           userRole="customer"
         />
       </div>
+      <SendMessageForm
+        messagePlaceholder="OrderDetailsPanel.sendMessagePlaceholder"
+      />
     </div>
     <div>
       <div>

src/containers/OrderPage/OrderPage.css

@@ -1,7 +1,9 @@
 @import '../../marketplace.css';
 
 .mainContent {
-  margin-bottom: 122px;
+  @media (--viewportLarge) {
+    margin-bottom: 122px;
+  }
 }
 
 .loading {
@@ -26,3 +28,11 @@
 .activeTab {
   font-weight: bold;
 }
+
+.footer {
+  display: none;
+
+  @media (--viewportLarge) {
+    display: block;
+  }
+}

src/containers/OrderPage/OrderPage.js

@@ -100,7 +100,7 @@ export const OrderPageComponent = props => {
         </LayoutWrapperTopbar>
         <LayoutWrapperMain className={css.mainContent}>{panel}</LayoutWrapperMain>
         <LayoutWrapperFooter>
-          <Footer />
+          <Footer className={css.footer} />
         </LayoutWrapperFooter>
       </LayoutSingleColumn>
     </Page>

src/containers/SendMessageForm/SendMessageForm.js

@@ -157,4 +157,6 @@ const SendMessageForm = compose(reduxForm({ form: defaultFormName }), injectIntl
   SendMessageFormComponent
 );
 
+SendMessageForm.displayName = 'SendMessageForm';
+
 export default SendMessageForm;

src/translations/en.json

@@ -272,6 +272,7 @@
   "OrderDetailsPanel.orderPreauthorizedStatus": "{providerName} has been notified about the booking request, so sit back and relax.",
   "OrderDetailsPanel.orderPreauthorizedSubtitle": "You have requested to book {listingLink}",
   "OrderDetailsPanel.orderPreauthorizedTitle": "Great success, {customerName}!",
+  "OrderDetailsPanel.sendMessagePlaceholder": "Send a message to {name}…",
   "OrderPage.fetchOrderFailed": "Fetching order data failed.",
   "OrderPage.loadingData": "Loading order data.",
   "OrderPage.title": "Order details: {listingTitle}",