Multiple tweaks

js/languages/en_US.json

@@ -1426,7 +1426,9 @@
         "heading": "Fulfilled",
         "shippedByLabel": "Order Shipped via:",
         "trackingNumberLabel": "Tracking #:",
-        "noteFromLabel": "Note from %{store}:",
+        "yourNoteLabel": "Your note:",
+        "noteFromVendorLabel": "Note from the vendor:",
+        "noteFromStoreLabel": "Note from %{store}:",
         "copyLink": "Copy",
         "digitalReadyForDlHeading": "Digital files are ready for download!",
         "digitalReadyForDlText": "The files have been delivered. Download when you're ready.",

js/lib/selectize.js

@@ -2677,7 +2677,7 @@ import { _tagsDelimiter } from '../utils/selectize';
     persist: true,
     diacritics: true,
     create: false,
-    createOnBlur: false,
+    createOnBlur: true,
     createFilter: null,
     highlight: true,
     openOnFocus: true,

js/templates/modals/orderDetail/profileBox.html

@@ -1,8 +1,4 @@
-<% if (ob.isFetching) { %>
-  <div class="center">
-    <%= ob.spinner({ className: 'spinnerMd' }) %>
-  </div>
-<% } else { %>
+<% if (!ob.isFetching) { %>
   <%
     let featuredProfileAvatarStyle = ob.getAvatarBgImage(ob.avatarHashes,
       {

js/templates/modals/orderDetail/summaryTab/fulfilled.html

@@ -19,7 +19,7 @@ <h2 class="tx4 margRTn"><%= ob.polyT('orderDetail.summaryTab.fulfilled.heading')
           <% } %>
         </div>
       <% } %>
-      <div class="rowTn"><%= ob.polyT('orderDetail.summaryTab.fulfilled.noteFromLabel', { store: ob.storeName }) %></div>
+      <div class="rowTn txB"><%= ob.noteFromLabel %></div>
       <div><%= ob.note ? ob.parseEmojis(ob.note) : ob.polyT('orderDetail.summaryTab.notApplicable') %></div>
     </div>
   </div>
@@ -40,15 +40,15 @@ <h2 class="tx4 margRTn"><%= ob.polyT('orderDetail.summaryTab.fulfilled.heading')
       <div class="rowTn txB"><%= ob.polyT('orderDetail.summaryTab.fulfilled.passwordLabel') %></div>
       <div class="row"><%= digitalDelivery.password || ob.polyT('orderDetail.summaryTab.notApplicable') %></div> 
       <% } %>
-      <div class="rowTn"><%= ob.polyT('orderDetail.summaryTab.fulfilled.noteFromLabel', { store: ob.storeName }) %></div>
+      <div class="rowTn txB"><%= ob.noteFromLabel %></div>
       <div><%= ob.note ? ob.parseEmojis(ob.note) : ob.polyT('orderDetail.summaryTab.notApplicable') %></div>      
     </div>
   </div>
   <% } else if (ob.contractType === 'SERVICE') { %>
   <div class="flex gutterH clrT">
     <div class="statusIconCol clrT"><span class="clrBr ion-ios-body"></span></div>
     <div class="flexExpand tx5">
-      <div class="rowTn"><%= ob.polyT('orderDetail.summaryTab.fulfilled.noteFromLabel', { store: ob.storeName }) %></div>
+      <div class="rowTn txB"><%= ob.noteFromLabel %></div>
       <div><%= ob.note ? ob.parseEmojis(ob.note) : ob.polyT('orderDetail.summaryTab.notApplicable') %></div>
     </div>
   </div>  

js/views/modals/editListing/Variant.js

@@ -94,7 +94,6 @@ export default class extends BaseView {
         valueField: 'value',
         options: variantOptions,
         items: variantItems,
-        createOnBlur: true,
         create: input => ({
           name: input,
           value: input,
@@ -103,7 +102,7 @@ export default class extends BaseView {
           option: data => `<div>${data.name}</div>`,
           item: data => `<div>${data.name}</div>`,
         },
-      });
+      }).on('change', () => this.trigger('choiceChange', { view: this }));
     });
 
     return this;

js/views/modals/orderDetail/OrderDetail.js

@@ -125,20 +125,31 @@ export default class extends BaseModal {
 
   onFirstOrderSync() {
     this.stopListening(this.model, null, this.onOrderRequest);
+    const featuredProfileState = { isFetching: false };
+    let featuredProfileFetch;
 
     if (this.type === 'case') {
-      this.featuredProfileFetch =
-        this.model.get('buyerOpened') ? this.getBuyerProfile() : this.getVendorProfile();
+      if (this.model.get('buyerOpened')) {
+        featuredProfileFetch = this.getBuyerProfile();
+        this.featuredProfilePeerId = featuredProfileState.peerID = this.buyerId;
+      } else {
+        featuredProfileFetch = this.getVendorProfile();
+        this.featuredProfilePeerId = featuredProfileState.peerID = this.vendorId;
+      }
     } else if (this.type === 'sale') {
-      this.featuredProfileFetch = this.getBuyerProfile();
+      featuredProfileFetch = this.getBuyerProfile();
+      this.featuredProfilePeerId = featuredProfileState.peerID = this.buyerId;
     } else {
-      this.featuredProfileFetch = this.getVendorProfile();
+      featuredProfileFetch = this.getVendorProfile();
+      this.featuredProfilePeerId = featuredProfileState.peerID = this.vendorId;
     }
 
-    this.featuredProfileFetch.done(profile => {
+    featuredProfileFetch.done(profile => {
       this.featuredProfileMd = profile;
-      this.featuredProfile.setModel(this.featuredProfileMd);
-    }).always(() => this.featuredProfile.setState({ isFetching: false }));
+      if (this.featuredProfile) this.featuredProfile.setModel(this.featuredProfileMd);
+    });
+
+    if (this.featuredProfile) this.featuredProfile.setState(featuredProfileState);
   }
 
   onClickRetryFetch() {
@@ -171,6 +182,11 @@ export default class extends BaseModal {
     if (!this._participantIds) {
       let contract = this.model.get('contract');
 
+      if (!contract) {
+        throw new Error('Unable to determine the participant IDs. The contract is not ' +
+          'available. The order model has likely not been synced yet.');
+      }
+
       if (this.type === 'case') {
         contract = this.model.get('buyerOpened') ?
           this.model.get('buyerContract') :
@@ -496,7 +512,8 @@ export default class extends BaseModal {
       this.featuredProfile = this.createChild(ProfileBox, {
         model: this.featuredProfileMd || null,
         initialState: {
-          isFetching: this.featuredProfileFetch && this.featuredProfileFetch.state() === 'pending',
+          isFetching: !this.featuredProfilePeerId,
+          peerID: this.featuredProfilePeerId,
         },
       });
       this.$('.js-featuredProfile').html(this.featuredProfile.render().el);

js/views/modals/orderDetail/summaryTab/Fulfilled.js

@@ -2,6 +2,7 @@ import _ from 'underscore';
 import moment from 'moment';
 import { clipboard } from 'electron';
 import '../../../../utils/velocity';
+import app from '../../../../app';
 import loadTemplate from '../../../../utils/loadTemplate';
 import BaseVw from '../../../baseVw';
 
@@ -17,6 +18,8 @@ export default class extends BaseVw {
       contractType: 'PHYSICAL_GOOD',
       isLocalPickup: false,
       showPassword: false,
+      noteFromLabel:
+        app.polyglot.t('orderDetail.summaryTab.fulfilled.noteFromVendorLabel'),
       ...options.initialState || {},
     };
 

js/views/modals/orderDetail/summaryTab/Summary.js

@@ -556,9 +556,18 @@ export default class extends BaseVw {
       },
     });
 
-    this.vendor.getProfile()
-      .done(profile =>
-        this.fulfilled.setState({ storeName: profile.get('name') }));
+    if (app.profile.id === this.vendor.id) {
+      this.fulfilled.setState({ noteFromLabel:
+        app.polyglot.t('orderDetail.summaryTab.fulfilled.yourNoteLabel') });
+    } else {
+      this.vendor.getProfile()
+        .done(profile => {
+          this.fulfilled.setState({
+            noteFromLabel: app.polyglot.t('orderDetail.summaryTab.fulfilled.noteFromStoreLabel',
+              { store: profile.get('name') }),
+          });
+        });
+    }
 
     this.$subSections.prepend(this.fulfilled.render().el);