From 1e456ae0a7e4a9c2d362358d1f26b2bbb5ab36d1 Mon Sep 17 00:00:00 2001
From: Xavier <xavier@n3x.co>
Date: Sat, 1 Dec 2018 15:49:27 -0800
Subject: [PATCH 1/2] Deselect & cancel

---
 .../detail/detail-simpledeal-funded.html      | 29 +++++++-
 .../detail/detail-simpledeal-selected.html    | 48 ++++++++++--
 src/pages/detail/detail-simpledeal.html       | 74 +++++++++++++++----
 .../hashtag/hashtag-simpledeal-item.html      |  2 +-
 src/pages/hashtag/hashtag-simpledeal.html     |  6 +-
 src/redux/sagas/hashtag-saga.html             | 23 ++++--
 6 files changed, 150 insertions(+), 32 deletions(-)

diff --git a/src/pages/detail/detail-simpledeal-funded.html b/src/pages/detail/detail-simpledeal-funded.html
index 40d3860e..e5616223 100644
--- a/src/pages/detail/detail-simpledeal-funded.html
+++ b/src/pages/detail/detail-simpledeal-funded.html
@@ -55,6 +55,10 @@
                 @apply --layout-flex;
                 @apply --body-default;
                 color: var(--sc-grey4);
+                -webkit-user-select: text;
+                -moz-user-select: text;
+                -ms-user-select: text;
+                user-select: text;
             }
 
             .price {
@@ -162,6 +166,27 @@
                 opacity: 0.5;
             }
 
+
+            .dont-break-out {
+
+                /* These are technically the same, but use both */
+                overflow-wrap: break-word;
+                word-wrap: break-word;
+
+                -ms-word-break: break-all;
+                /* This is the dangerous one in WebKit, as it breaks things wherever */
+                word-break: break-all;
+                /* Instead use this non-standard one: */
+                word-break: break-word;
+
+                /* Adds a hyphen where the word breaks, if supported (No Blink) */
+                -ms-hyphens: auto;
+                -moz-hyphens: auto;
+                -webkit-hyphens: auto;
+                hyphens: auto;
+
+            }
+
             @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
             only screen and (min--moz-device-pixel-ratio: 1.5),
             only screen and (min-resolution: 240dpi) {
@@ -175,7 +200,7 @@
             <template is="dom-if" if="[[_isInvolved(item.seekerAddress, reply.providerAddress, address)]]">
                 <div class="whitebox">
                     <div class="descriptionbox">
-                        <div class="description">[[reply.message]]</div>
+                        <div class="description dont-break-out">[[reply.message]]</div>
                         <div class="price">for [[_formatValue(item.itemValue)]] SWT</div>
                     </div>
                     <div class="date">
@@ -323,7 +348,7 @@
             }
 
             _checkPending(status) {
-                return status == '1'? "greenbox" : "greenbox pending";
+                return status == '1' ? "greenbox" : "greenbox pending";
             }
         }
         window.customElements.define(
diff --git a/src/pages/detail/detail-simpledeal-selected.html b/src/pages/detail/detail-simpledeal-selected.html
index 213be12b..01d347a2 100644
--- a/src/pages/detail/detail-simpledeal-selected.html
+++ b/src/pages/detail/detail-simpledeal-selected.html
@@ -98,10 +98,32 @@
                 background-color: var(--sc-blue);
             }
 
+            .container[wide-layout] .bluebox {
+                @apply --layout-horizontal;
+                @apply --layout-start;
+                padding: 40px;
+            }
+
             .disabled {
                 opacity: 0.5;
             }
 
+            .container[wide-layout] .flex {
+                @apply --layout-flex;
+            }
+
+            .container[wide-layout] .white-text {
+                margin-top: 20px;
+                text-align: left;
+
+            }
+
+            .container[wide-layout] .white-subtext {
+                margin-top: 5px;
+                text-align: left;
+
+            }
+
             .white-text {
                 @apply --body-bold;
                 color: var(--sc-white);
@@ -122,10 +144,16 @@
             }
 
             .button {
-                @apply --text-button-small;
-                @apply --small-bold;
+                @apply --text-button-big;
+                @apply --body-bold;
                 margin: 40px 0;
                 color: var(--sc-white);
+                width: 250px;
+            }
+
+            .container[wide-layout] .button {
+                margin: 0;
+
             }
 
             .button:active {
@@ -225,11 +253,14 @@
                     </div>
                 </template>
                 <template is="dom-if" if="[[!_isReplier(reply.replierAddress, address)]]">
-                    <div class="white-text">You selected [[reply.username]] to make a deal.</div>
-                    <div class="white-subtext">Waiting for [[reply.username]] to respond</div>
-                    <!-- <div class="button">
-                        unselect [[reply.username]]
-                    </div> -->
+                    <div class="text">
+                        <div class="white-text">You selected [[reply.username]] to make a deal.</div>
+                        <div class="white-subtext">Waiting for [[reply.username]] to respond</div>
+                    </div>
+                    <div class="flex"></div>
+                    <div class="button" on-tap="_deselect">
+                        deselect [[reply.username]]
+                    </div>
                 </template>
 
             </div>
@@ -322,6 +353,9 @@
             _fund() {
                 this.dispatchEvent(new CustomEvent('fund'));
             }
+            _deselect() {
+                this.dispatchEvent(new CustomEvent('deselect'));
+            }
             /**
             * Verifies user balance and displays error message
             */
diff --git a/src/pages/detail/detail-simpledeal.html b/src/pages/detail/detail-simpledeal.html
index 773c66db..046f4795 100644
--- a/src/pages/detail/detail-simpledeal.html
+++ b/src/pages/detail/detail-simpledeal.html
@@ -112,7 +112,7 @@
 
           <template is="dom-if" if="{{_isEqualTo(status, 'selected')}}">
             <detail-simpledeal-selected address="[[address]]" item="[[item]]" balance="[[balance]]" reply="[[_getProviderReply(item)]]"
-              on-status="_handleOnStatus" on-fund="_handleOnFund"></detail-simpledeal-selected>
+              on-status="_handleOnStatus" on-fund="_handleOnFund" on-deselect="_handleOnDeselect"></detail-simpledeal-selected>
           </template>
 
           <template is="dom-if" if="{{_isEqualTo(status, 'funded')}}">
@@ -141,7 +141,7 @@
             <detail-button-payout on-payout="_handleOnPayout"></detail-button-payout>
           </template>
 
-          <template is="dom-if" if="{{_showCancelButton()}}">
+          <template is="dom-if" if="{{_showCancelButton(item, address)}}">
             <detail-button-cancel on-cancel="_handleOnCancel"></detail-button-cancel>
           </template>
 
@@ -304,17 +304,16 @@
         }
       }
 
-      _showCancelButton(status, userAddress) {
-        // needs fix on simpledeal contract first -- see hackmd
-        return false
-        //  (
-        //   this.item
-        //   && this.item.status == '0'
-        //   && this.item.providerAddress
-        //   && this.item.providerAddress != '0x0000000000000000000000000000000000000000'
-        //   && this.item.seekerAddress
-        //   && this.item.seekerAddress == userAddress
-        // )
+      _showCancelButton(item, userAddress) {
+        return (
+          item
+          && item.status
+          && item.status == '0'
+          && item.providerAddress
+          && item.providerAddress == '0x0000000000000000000000000000000000000000'
+          && item.seekerAddress
+          && item.seekerAddress == userAddress
+        )
       }
 
       _showConflictButton(item, status) {
@@ -559,6 +558,54 @@
           }
         });
       }
+
+      _handleOnDeselect() {
+        this.$.unlock._getPrivateKey().then(res => {
+          try {
+            const { privateKey, address, publicKey } = res;
+            if (!privateKey) {
+              throw Error("Missing address");
+            }
+            const seeker = {
+              address,
+              privateKey
+            };
+
+            const provider = {
+              address: '0x0000000000000000000000000000000000000000',
+            };
+
+            const item = {
+              itemHash: this.item.itemHash,
+              hashtag: this.hashtag.address
+            };
+
+            this.$.simpledeal
+              .selectReplier({ seeker, provider, item })
+              .then(receipt => {
+                console.log(
+                  "Successfully deselected replier, receipt:",
+                  receipt
+                );
+                this.dispatch({
+                  type: "UPDATE_ITEM",
+                  hashtagAddress: item.hashtag,
+                  itemHash: item.itemHash,
+                  data: {
+                    providerAddress: provider.address,
+                    status: "selected-pending"
+                  }
+                });
+              })
+              .catch(err => {
+                console.log("Error deselecting replier:", err);
+              });
+          } catch (e) {
+            console.error("Error deselecting replier (catch block): ", e.stack);
+          }
+        });
+
+      }
       _handleOnCancel() {
         this.$.unlock._getPrivateKey().then(res => {
           try {
@@ -576,6 +623,7 @@
               .cancelItem({ seeker, itemHash, hashtagAddress })
               .then(receipt => {
                 console.log("Successfully cancelled item, receipt:", receipt);
+                this._handleOnClose();
                 this.dispatch({
                   type: "UPDATE_ITEM",
                   hashtagAddress,
diff --git a/src/pages/hashtag/hashtag-simpledeal-item.html b/src/pages/hashtag/hashtag-simpledeal-item.html
index 181f43df..cd7fac5f 100644
--- a/src/pages/hashtag/hashtag-simpledeal-item.html
+++ b/src/pages/hashtag/hashtag-simpledeal-item.html
@@ -226,7 +226,7 @@
                         [[_formatDate(item)]]
                     </div>
                 </div>
-                <div class="replycount">[[_replycount(item)]]</div>
+                <div class="replycount">[[item.status]]</div>
                 <div class="replyicon"></div>
                 <template is="dom-if" if="[[_hasProvider(item)]]">
                     <iron-image class="item-avatar-topright" sizing="cover" preload src="https://scapiweb3-c.swarm.city/img/[[item.providerAvatarHash]]"
diff --git a/src/pages/hashtag/hashtag-simpledeal.html b/src/pages/hashtag/hashtag-simpledeal.html
index 400c9f8b..ab03c943 100644
--- a/src/pages/hashtag/hashtag-simpledeal.html
+++ b/src/pages/hashtag/hashtag-simpledeal.html
@@ -165,18 +165,18 @@
                     this.hashtag.metadata && 
                     this.hashtag.metadata.maintainer &&
                     this.hashtag.maintainerAddress && 
-                    this.hashtag.maintainerAddress == this.address) &&(
+                    this.hashtag.maintainerAddress == this.address) && (
                         item.status &&
                         item.status == '3'
                     )) involved = true;
                 }
-                if (item.status && (item.status == '2' || item.status == '4')) involved = false
+                if (item.status && (item.status == '2' || item.status == '4'|| item.status == '5' || item.status == '5-pending')) involved = false
                 return involved;
             }
 
             _isNotInvolved(item) {
                 return (
-                    !this._isInvolved(item) && (item.status || {}) != '1' && (item.status || {}) != '3' && (item.seekerAddress || {}) != '0x0000000000000000000000000000000000000000');
+                    !this._isInvolved(item) && (item.status || {}) != '1' && (item.status || {}) != '3' && (item.status || {}) != '5' && (item.status || {}) != '5-pending' && (item.seekerAddress || {}) != '0x0000000000000000000000000000000000000000');
             }
 
             _handleOnDetail(e) {
diff --git a/src/redux/sagas/hashtag-saga.html b/src/redux/sagas/hashtag-saga.html
index 7a12e277..17545e5d 100644
--- a/src/redux/sagas/hashtag-saga.html
+++ b/src/redux/sagas/hashtag-saga.html
@@ -374,12 +374,23 @@
             // Step 1. Store the item info
             console.log('Handling ItemChange', event)
             const { itemHash, newstatus, providerAddress } = event.returnValues
-            yield put({
-                type: 'UPDATE_ITEM', hashtagAddress, itemHash, data: {
-                    status: newstatus,
-                    providerAddress,
-                }
-            });
+
+            if (newstatus == '5') {
+                yield put({
+                    type: 'UPDATE_ITEM', hashtagAddress, itemHash, data: {
+                        status: newstatus,
+                        providerAddress,
+                    }
+                });
+            } else {
+                yield put({
+                    type: 'UPDATE_ITEM', hashtagAddress, itemHash, data: {
+                        status: newstatus,
+                        providerAddress,
+                    }
+                });
+
+            }
             yield call(openChat, { hashtagAddress, itemHash, itemStatus: newstatus, providerAddress })
         }
 

From 9c3d008e2e30ba999a1ef4f695ba3e0525b5d04f Mon Sep 17 00:00:00 2001
From: Xavier <xavier@n3x.co>
Date: Sat, 1 Dec 2018 16:17:19 -0800
Subject: [PATCH 2/2] Fix

---
 src/redux/sagas/hashtag-saga.html | 22 ++++++----------------
 1 file changed, 6 insertions(+), 16 deletions(-)

diff --git a/src/redux/sagas/hashtag-saga.html b/src/redux/sagas/hashtag-saga.html
index 17545e5d..1edbe211 100644
--- a/src/redux/sagas/hashtag-saga.html
+++ b/src/redux/sagas/hashtag-saga.html
@@ -375,22 +375,12 @@
             console.log('Handling ItemChange', event)
             const { itemHash, newstatus, providerAddress } = event.returnValues
 
-            if (newstatus == '5') {
-                yield put({
-                    type: 'UPDATE_ITEM', hashtagAddress, itemHash, data: {
-                        status: newstatus,
-                        providerAddress,
-                    }
-                });
-            } else {
-                yield put({
-                    type: 'UPDATE_ITEM', hashtagAddress, itemHash, data: {
-                        status: newstatus,
-                        providerAddress,
-                    }
-                });
-
-            }
+            yield put({
+                type: 'UPDATE_ITEM', hashtagAddress, itemHash, data: {
+                    status: newstatus,
+                    providerAddress,
+                }
+            });
             yield call(openChat, { hashtagAddress, itemHash, itemStatus: newstatus, providerAddress })
         }