From 27484e42cae2a855a1a352b30d5ac3e5669789e2 Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Wed, 15 Nov 2017 16:06:54 +0200
Subject: [PATCH] Add transitions to OrderDetailsPanel

---
 .../OrderDetailsPanel/OrderDetailsPanel.js    |  13 +-
 .../OrderDetailsPanel.test.js.snap            | 702 ++++++++++++++++++
 2 files changed, 713 insertions(+), 2 deletions(-)

diff --git a/src/components/OrderDetailsPanel/OrderDetailsPanel.js b/src/components/OrderDetailsPanel/OrderDetailsPanel.js
index 7048ce91..4659dd76 100644
--- a/src/components/OrderDetailsPanel/OrderDetailsPanel.js
+++ b/src/components/OrderDetailsPanel/OrderDetailsPanel.js
@@ -155,7 +155,11 @@ export class OrderDetailsPanelComponent extends Component {
     const messagesContainerClasses = classNames(css.messagesContainer, {
       [css.messagesContainerWithInfoAbove]: showInfoMessage,
     });
-    const showMessages = messages.length > 0 || initialMessageFailed || fetchMessagesError;
+    const txTransitions = currentTransaction.attributes.transitions
+      ? currentTransaction.attributes.transitions
+      : [];
+    const showMessages =
+      messages.length > 0 || txTransitions.length > 0 || initialMessageFailed || fetchMessagesError;
     const messagesContainer = showMessages ? (
       <div className={messagesContainerClasses}>
         <h3 className={css.messagesHeading}>
@@ -171,7 +175,12 @@ export class OrderDetailsPanelComponent extends Component {
             <FormattedMessage id="OrderDetailsPanel.messageLoadingFailed" />
           </p>
         ) : null}
-        <Messages className={css.messages} messages={messages} currentUser={currentUser} />
+        <Messages
+          className={css.messages}
+          messages={messages}
+          transaction={currentTransaction}
+          currentUser={currentUser}
+        />
       </div>
     ) : null;
 
diff --git a/src/components/OrderDetailsPanel/__snapshots__/OrderDetailsPanel.test.js.snap b/src/components/OrderDetailsPanel/__snapshots__/OrderDetailsPanel.test.js.snap
index 75df49f9..9d4c1f7c 100644
--- a/src/components/OrderDetailsPanel/__snapshots__/OrderDetailsPanel.test.js.snap
+++ b/src/components/OrderDetailsPanel/__snapshots__/OrderDetailsPanel.test.js.snap
@@ -307,6 +307,123 @@ exports[`OrderDetailsPanel accepted matches snapshot 1`] = `
               },
             ]
           }
+          transaction={
+            Object {
+              "attributes": Object {
+                "createdAt": 2017-05-01T00:00:00.000Z,
+                "lastTransition": "transition/accept",
+                "lastTransitionedAt": 2017-06-01T00:00:00.000Z,
+                "lineItems": Array [
+                  Object {
+                    "code": "line-item/night",
+                    "lineTotal": Money {
+                      "amount": 16500,
+                      "currency": "USD",
+                    },
+                    "quantity": "3",
+                    "reversal": false,
+                    "unitPrice": Money {
+                      "amount": 5500,
+                      "currency": "USD",
+                    },
+                  },
+                  Object {
+                    "code": "line-item/provider-commission",
+                    "lineTotal": Money {
+                      "amount": -100,
+                      "currency": "USD",
+                    },
+                    "reversal": false,
+                    "unitPrice": Money {
+                      "amount": -100,
+                      "currency": "USD",
+                    },
+                  },
+                ],
+                "payinTotal": Money {
+                  "amount": 16500,
+                  "currency": "USD",
+                },
+                "payoutTotal": Money {
+                  "amount": 16400,
+                  "currency": "USD",
+                },
+                "transitions": Array [
+                  Object {
+                    "at": 2017-05-01T00:00:00.000Z,
+                    "by": "customer",
+                    "transition": "transition/preauthorize",
+                  },
+                  Object {
+                    "at": 2017-06-01T00:00:00.000Z,
+                    "by": "provider",
+                    "transition": "transition/accept",
+                  },
+                ],
+              },
+              "booking": Object {
+                "attributes": Object {
+                  "end": 2017-06-13T00:00:00.000Z,
+                  "start": 2017-06-10T00:00:00.000Z,
+                },
+                "id": UUID {
+                  "uuid": "booking1",
+                },
+                "type": "booking",
+              },
+              "customer": Object {
+                "attributes": Object {
+                  "banned": false,
+                  "profile": Object {
+                    "abbreviatedName": "TT",
+                    "displayName": "customer display name",
+                  },
+                },
+                "id": UUID {
+                  "uuid": "customer",
+                },
+                "type": "user",
+              },
+              "id": UUID {
+                "uuid": "order-accepted",
+              },
+              "listing": Object {
+                "attributes": Object {
+                  "address": "listing1 address",
+                  "closed": false,
+                  "deleted": false,
+                  "description": "listing1 description",
+                  "geolocation": LatLng {
+                    "lat": 40,
+                    "lng": 60,
+                  },
+                  "price": Money {
+                    "amount": 5500,
+                    "currency": "USD",
+                  },
+                  "title": "listing1 title",
+                },
+                "id": UUID {
+                  "uuid": "listing1",
+                },
+                "type": "listing",
+              },
+              "provider": Object {
+                "attributes": Object {
+                  "banned": false,
+                  "profile": Object {
+                    "abbreviatedName": "TT",
+                    "displayName": "provider display name",
+                  },
+                },
+                "id": UUID {
+                  "uuid": "provider",
+                },
+                "type": "user",
+              },
+              "type": "transaction",
+            }
+          }
         />
       </div>
       <SendMessageForm
@@ -819,6 +936,123 @@ exports[`OrderDetailsPanel autodeclined matches snapshot 1`] = `
               },
             ]
           }
+          transaction={
+            Object {
+              "attributes": Object {
+                "createdAt": 2017-05-01T00:00:00.000Z,
+                "lastTransition": "transition/auto-decline",
+                "lastTransitionedAt": 2017-06-01T00:00:00.000Z,
+                "lineItems": Array [
+                  Object {
+                    "code": "line-item/night",
+                    "lineTotal": Money {
+                      "amount": 16500,
+                      "currency": "USD",
+                    },
+                    "quantity": "3",
+                    "reversal": false,
+                    "unitPrice": Money {
+                      "amount": 5500,
+                      "currency": "USD",
+                    },
+                  },
+                  Object {
+                    "code": "line-item/provider-commission",
+                    "lineTotal": Money {
+                      "amount": -100,
+                      "currency": "USD",
+                    },
+                    "reversal": false,
+                    "unitPrice": Money {
+                      "amount": -100,
+                      "currency": "USD",
+                    },
+                  },
+                ],
+                "payinTotal": Money {
+                  "amount": 16500,
+                  "currency": "USD",
+                },
+                "payoutTotal": Money {
+                  "amount": 16400,
+                  "currency": "USD",
+                },
+                "transitions": Array [
+                  Object {
+                    "at": 2017-05-01T00:00:00.000Z,
+                    "by": "customer",
+                    "transition": "transition/preauthorize",
+                  },
+                  Object {
+                    "at": 2017-06-01T00:00:00.000Z,
+                    "by": "provider",
+                    "transition": "transition/accept",
+                  },
+                ],
+              },
+              "booking": Object {
+                "attributes": Object {
+                  "end": 2017-06-13T00:00:00.000Z,
+                  "start": 2017-06-10T00:00:00.000Z,
+                },
+                "id": UUID {
+                  "uuid": "booking1",
+                },
+                "type": "booking",
+              },
+              "customer": Object {
+                "attributes": Object {
+                  "banned": false,
+                  "profile": Object {
+                    "abbreviatedName": "TT",
+                    "displayName": "customer display name",
+                  },
+                },
+                "id": UUID {
+                  "uuid": "customer",
+                },
+                "type": "user",
+              },
+              "id": UUID {
+                "uuid": "order-autodeclined",
+              },
+              "listing": Object {
+                "attributes": Object {
+                  "address": "listing1 address",
+                  "closed": false,
+                  "deleted": false,
+                  "description": "listing1 description",
+                  "geolocation": LatLng {
+                    "lat": 40,
+                    "lng": 60,
+                  },
+                  "price": Money {
+                    "amount": 5500,
+                    "currency": "USD",
+                  },
+                  "title": "listing1 title",
+                },
+                "id": UUID {
+                  "uuid": "listing1",
+                },
+                "type": "listing",
+              },
+              "provider": Object {
+                "attributes": Object {
+                  "banned": false,
+                  "profile": Object {
+                    "abbreviatedName": "TT",
+                    "displayName": "provider display name",
+                  },
+                },
+                "id": UUID {
+                  "uuid": "provider",
+                },
+                "type": "user",
+              },
+              "type": "transaction",
+            }
+          }
         />
       </div>
       <SendMessageForm
@@ -1343,6 +1577,123 @@ exports[`OrderDetailsPanel canceled matches snapshot 1`] = `
               },
             ]
           }
+          transaction={
+            Object {
+              "attributes": Object {
+                "createdAt": 2017-05-01T00:00:00.000Z,
+                "lastTransition": "transition/accept",
+                "lastTransitionedAt": 2017-06-01T00:00:00.000Z,
+                "lineItems": Array [
+                  Object {
+                    "code": "line-item/night",
+                    "lineTotal": Money {
+                      "amount": 16500,
+                      "currency": "USD",
+                    },
+                    "quantity": "3",
+                    "reversal": false,
+                    "unitPrice": Money {
+                      "amount": 5500,
+                      "currency": "USD",
+                    },
+                  },
+                  Object {
+                    "code": "line-item/provider-commission",
+                    "lineTotal": Money {
+                      "amount": -100,
+                      "currency": "USD",
+                    },
+                    "reversal": false,
+                    "unitPrice": Money {
+                      "amount": -100,
+                      "currency": "USD",
+                    },
+                  },
+                ],
+                "payinTotal": Money {
+                  "amount": 16500,
+                  "currency": "USD",
+                },
+                "payoutTotal": Money {
+                  "amount": 16400,
+                  "currency": "USD",
+                },
+                "transitions": Array [
+                  Object {
+                    "at": 2017-05-01T00:00:00.000Z,
+                    "by": "customer",
+                    "transition": "transition/preauthorize",
+                  },
+                  Object {
+                    "at": 2017-06-01T00:00:00.000Z,
+                    "by": "provider",
+                    "transition": "transition/accept",
+                  },
+                ],
+              },
+              "booking": Object {
+                "attributes": Object {
+                  "end": 2017-06-13T00:00:00.000Z,
+                  "start": 2017-06-10T00:00:00.000Z,
+                },
+                "id": UUID {
+                  "uuid": "booking1",
+                },
+                "type": "booking",
+              },
+              "customer": Object {
+                "attributes": Object {
+                  "banned": false,
+                  "profile": Object {
+                    "abbreviatedName": "TT",
+                    "displayName": "customer display name",
+                  },
+                },
+                "id": UUID {
+                  "uuid": "customer",
+                },
+                "type": "user",
+              },
+              "id": UUID {
+                "uuid": "order-canceled",
+              },
+              "listing": Object {
+                "attributes": Object {
+                  "address": "listing1 address",
+                  "closed": false,
+                  "deleted": false,
+                  "description": "listing1 description",
+                  "geolocation": LatLng {
+                    "lat": 40,
+                    "lng": 60,
+                  },
+                  "price": Money {
+                    "amount": 5500,
+                    "currency": "USD",
+                  },
+                  "title": "listing1 title",
+                },
+                "id": UUID {
+                  "uuid": "listing1",
+                },
+                "type": "listing",
+              },
+              "provider": Object {
+                "attributes": Object {
+                  "banned": false,
+                  "profile": Object {
+                    "abbreviatedName": "TT",
+                    "displayName": "provider display name",
+                  },
+                },
+                "id": UUID {
+                  "uuid": "provider",
+                },
+                "type": "user",
+              },
+              "type": "transaction",
+            }
+          }
         />
       </div>
       <SendMessageForm
@@ -1855,6 +2206,123 @@ exports[`OrderDetailsPanel declined matches snapshot 1`] = `
               },
             ]
           }
+          transaction={
+            Object {
+              "attributes": Object {
+                "createdAt": 2017-05-01T00:00:00.000Z,
+                "lastTransition": "transition/decline",
+                "lastTransitionedAt": 2017-06-01T00:00:00.000Z,
+                "lineItems": Array [
+                  Object {
+                    "code": "line-item/night",
+                    "lineTotal": Money {
+                      "amount": 16500,
+                      "currency": "USD",
+                    },
+                    "quantity": "3",
+                    "reversal": false,
+                    "unitPrice": Money {
+                      "amount": 5500,
+                      "currency": "USD",
+                    },
+                  },
+                  Object {
+                    "code": "line-item/provider-commission",
+                    "lineTotal": Money {
+                      "amount": -100,
+                      "currency": "USD",
+                    },
+                    "reversal": false,
+                    "unitPrice": Money {
+                      "amount": -100,
+                      "currency": "USD",
+                    },
+                  },
+                ],
+                "payinTotal": Money {
+                  "amount": 16500,
+                  "currency": "USD",
+                },
+                "payoutTotal": Money {
+                  "amount": 16400,
+                  "currency": "USD",
+                },
+                "transitions": Array [
+                  Object {
+                    "at": 2017-05-01T00:00:00.000Z,
+                    "by": "customer",
+                    "transition": "transition/preauthorize",
+                  },
+                  Object {
+                    "at": 2017-06-01T00:00:00.000Z,
+                    "by": "provider",
+                    "transition": "transition/accept",
+                  },
+                ],
+              },
+              "booking": Object {
+                "attributes": Object {
+                  "end": 2017-06-13T00:00:00.000Z,
+                  "start": 2017-06-10T00:00:00.000Z,
+                },
+                "id": UUID {
+                  "uuid": "booking1",
+                },
+                "type": "booking",
+              },
+              "customer": Object {
+                "attributes": Object {
+                  "banned": false,
+                  "profile": Object {
+                    "abbreviatedName": "TT",
+                    "displayName": "customer display name",
+                  },
+                },
+                "id": UUID {
+                  "uuid": "customer",
+                },
+                "type": "user",
+              },
+              "id": UUID {
+                "uuid": "order-declined",
+              },
+              "listing": Object {
+                "attributes": Object {
+                  "address": "listing1 address",
+                  "closed": false,
+                  "deleted": false,
+                  "description": "listing1 description",
+                  "geolocation": LatLng {
+                    "lat": 40,
+                    "lng": 60,
+                  },
+                  "price": Money {
+                    "amount": 5500,
+                    "currency": "USD",
+                  },
+                  "title": "listing1 title",
+                },
+                "id": UUID {
+                  "uuid": "listing1",
+                },
+                "type": "listing",
+              },
+              "provider": Object {
+                "attributes": Object {
+                  "banned": false,
+                  "profile": Object {
+                    "abbreviatedName": "TT",
+                    "displayName": "provider display name",
+                  },
+                },
+                "id": UUID {
+                  "uuid": "provider",
+                },
+                "type": "user",
+              },
+              "type": "transaction",
+            }
+          }
         />
       </div>
       <SendMessageForm
@@ -2367,6 +2835,123 @@ exports[`OrderDetailsPanel delivered matches snapshot 1`] = `
               },
             ]
           }
+          transaction={
+            Object {
+              "attributes": Object {
+                "createdAt": 2017-05-01T00:00:00.000Z,
+                "lastTransition": "transition/mark-delivered",
+                "lastTransitionedAt": 2017-06-01T00:00:00.000Z,
+                "lineItems": Array [
+                  Object {
+                    "code": "line-item/night",
+                    "lineTotal": Money {
+                      "amount": 16500,
+                      "currency": "USD",
+                    },
+                    "quantity": "3",
+                    "reversal": false,
+                    "unitPrice": Money {
+                      "amount": 5500,
+                      "currency": "USD",
+                    },
+                  },
+                  Object {
+                    "code": "line-item/provider-commission",
+                    "lineTotal": Money {
+                      "amount": -100,
+                      "currency": "USD",
+                    },
+                    "reversal": false,
+                    "unitPrice": Money {
+                      "amount": -100,
+                      "currency": "USD",
+                    },
+                  },
+                ],
+                "payinTotal": Money {
+                  "amount": 16500,
+                  "currency": "USD",
+                },
+                "payoutTotal": Money {
+                  "amount": 16400,
+                  "currency": "USD",
+                },
+                "transitions": Array [
+                  Object {
+                    "at": 2017-05-01T00:00:00.000Z,
+                    "by": "customer",
+                    "transition": "transition/preauthorize",
+                  },
+                  Object {
+                    "at": 2017-06-01T00:00:00.000Z,
+                    "by": "provider",
+                    "transition": "transition/accept",
+                  },
+                ],
+              },
+              "booking": Object {
+                "attributes": Object {
+                  "end": 2017-06-13T00:00:00.000Z,
+                  "start": 2017-06-10T00:00:00.000Z,
+                },
+                "id": UUID {
+                  "uuid": "booking1",
+                },
+                "type": "booking",
+              },
+              "customer": Object {
+                "attributes": Object {
+                  "banned": false,
+                  "profile": Object {
+                    "abbreviatedName": "TT",
+                    "displayName": "customer display name",
+                  },
+                },
+                "id": UUID {
+                  "uuid": "customer",
+                },
+                "type": "user",
+              },
+              "id": UUID {
+                "uuid": "order-delivered",
+              },
+              "listing": Object {
+                "attributes": Object {
+                  "address": "listing1 address",
+                  "closed": false,
+                  "deleted": false,
+                  "description": "listing1 description",
+                  "geolocation": LatLng {
+                    "lat": 40,
+                    "lng": 60,
+                  },
+                  "price": Money {
+                    "amount": 5500,
+                    "currency": "USD",
+                  },
+                  "title": "listing1 title",
+                },
+                "id": UUID {
+                  "uuid": "listing1",
+                },
+                "type": "listing",
+              },
+              "provider": Object {
+                "attributes": Object {
+                  "banned": false,
+                  "profile": Object {
+                    "abbreviatedName": "TT",
+                    "displayName": "provider display name",
+                  },
+                },
+                "id": UUID {
+                  "uuid": "provider",
+                },
+                "type": "user",
+              },
+              "type": "transaction",
+            }
+          }
         />
       </div>
       <SendMessageForm
@@ -2902,6 +3487,123 @@ exports[`OrderDetailsPanel preauthorized matches snapshot 1`] = `
               },
             ]
           }
+          transaction={
+            Object {
+              "attributes": Object {
+                "createdAt": 2017-05-01T00:00:00.000Z,
+                "lastTransition": "transition/preauthorize",
+                "lastTransitionedAt": 2017-06-01T00:00:00.000Z,
+                "lineItems": Array [
+                  Object {
+                    "code": "line-item/night",
+                    "lineTotal": Money {
+                      "amount": 16500,
+                      "currency": "USD",
+                    },
+                    "quantity": "3",
+                    "reversal": false,
+                    "unitPrice": Money {
+                      "amount": 5500,
+                      "currency": "USD",
+                    },
+                  },
+                  Object {
+                    "code": "line-item/provider-commission",
+                    "lineTotal": Money {
+                      "amount": -100,
+                      "currency": "USD",
+                    },
+                    "reversal": false,
+                    "unitPrice": Money {
+                      "amount": -100,
+                      "currency": "USD",
+                    },
+                  },
+                ],
+                "payinTotal": Money {
+                  "amount": 16500,
+                  "currency": "USD",
+                },
+                "payoutTotal": Money {
+                  "amount": 16400,
+                  "currency": "USD",
+                },
+                "transitions": Array [
+                  Object {
+                    "at": 2017-05-01T00:00:00.000Z,
+                    "by": "customer",
+                    "transition": "transition/preauthorize",
+                  },
+                  Object {
+                    "at": 2017-06-01T00:00:00.000Z,
+                    "by": "provider",
+                    "transition": "transition/accept",
+                  },
+                ],
+              },
+              "booking": Object {
+                "attributes": Object {
+                  "end": 2017-06-13T00:00:00.000Z,
+                  "start": 2017-06-10T00:00:00.000Z,
+                },
+                "id": UUID {
+                  "uuid": "booking1",
+                },
+                "type": "booking",
+              },
+              "customer": Object {
+                "attributes": Object {
+                  "banned": false,
+                  "profile": Object {
+                    "abbreviatedName": "TT",
+                    "displayName": "customer display name",
+                  },
+                },
+                "id": UUID {
+                  "uuid": "customer",
+                },
+                "type": "user",
+              },
+              "id": UUID {
+                "uuid": "order-preauthorized",
+              },
+              "listing": Object {
+                "attributes": Object {
+                  "address": "listing1 address",
+                  "closed": false,
+                  "deleted": false,
+                  "description": "listing1 description",
+                  "geolocation": LatLng {
+                    "lat": 40,
+                    "lng": 60,
+                  },
+                  "price": Money {
+                    "amount": 5500,
+                    "currency": "USD",
+                  },
+                  "title": "listing1 title",
+                },
+                "id": UUID {
+                  "uuid": "listing1",
+                },
+                "type": "listing",
+              },
+              "provider": Object {
+                "attributes": Object {
+                  "banned": false,
+                  "profile": Object {
+                    "abbreviatedName": "TT",
+                    "displayName": "provider display name",
+                  },
+                },
+                "id": UUID {
+                  "uuid": "provider",
+                },
+                "type": "user",
+              },
+              "type": "transaction",
+            }
+          }
         />
       </div>
       <SendMessageForm