Merge pull request #954 from OpenBazaar/addSocialButtons

Add social buttons

Author: rmisio

js/languages/en-US.json

@@ -1138,7 +1138,16 @@
       "vendorMessagePlaceholder": "Provide additional details, ask a question, provide feedback…",
       "vendorMessageLink": "discussion section of the order details",
       "vendorMessageSent": "Your message has been sent to %{name}, you can continue the conversation in the %{orderLink}.",
-      "send": "Send"
+      "send": "Send",
+      "share": {
+        "title": "Share with friends",
+        "body": "I just made a purchase on OpenBazaar, the free marketplace without fees or restrictions. Learn more at %{link}.",
+        "shareMsg": "I just made a purchase on @OpenBazaar, the free marketplace without fees or restrictions.",
+        "postToTwitter": "Post to Twitter",
+        "postToFacebook": "Post to Facebook",
+        "postToPinterest": "Post to Pinterest",
+        "postToTumblr": "Post to Tumblr"
+      }
     },
     "receipt": {
       "summary": "Order Summary",

js/templates/modals/purchase/complete.html

@@ -1,4 +1,4 @@
-<div class="flexColRows">
+<div class="flexColRows gutterV">
   <div class="flexRow pad rowMd txCtr">
     <div class="col2"></div>
     <div class="col8">
@@ -18,7 +18,33 @@ <h4><%= ob.polyT('purchase.completeSection.paymentSent') %></h4>
     </div>
     <div class="col2"></div>
   </div>
-  <hr class="clrBr rowHg">
+  <div class="contentBox clrP clrBr padMd socialBtns">
+    <h5><%= ob.polyT('purchase.completeSection.share.title') %></h5>
+    <p><%= ob.polyT('purchase.completeSection.share.body', { link: "<a class='clrTEm' href='https://openbazaar.org'>https://openbazaar.org</a>" }) %></p>
+    <div class="flexRow flexKidsExpand gutterH">
+      <% var shareURL = "https://openbazaar.org" %>
+      <a class="btn btnThin clrP clrBr" href="https://twitter.com/intent/tweet/?text=<%= ob.polyT('purchase.completeSection.share.shareMsg') %>&url=<%= shareURL %>&hashtags=TradeFree,bitcoin&related=openbazaar">
+        <span class="flexInline gutterHSm">
+          <i class="ion-social-twitter twitterColor"></i><span><%= ob.polyT('purchase.completeSection.share.postToTwitter') %></span>
+        </span>
+      </a>
+      <a class="btn btnThin clrP clrBr" href="https://www.facebook.com/sharer/sharer.php?u=<%= shareURL %>">
+        <span class="flexInline gutterHSm">
+          <i class="ion-social-facebook facebookColor"></i><span><%= ob.polyT('purchase.completeSection.share.postToFacebook') %></span>
+        </span>
+      </a>
+      <a class="btn btnThin clrP clrBr" href="https://pinterest.com/pin/create/button/?url=<%= shareURL %>">
+        <span class="flexInline gutterHSm">
+          <i class="ion-social-pinterest pinterestColor"></i><span><%= ob.polyT('purchase.completeSection.share.postToPinterest') %></span>
+        </span>
+      </a>
+      <a class="btn btnThin clrP clrBr" href="https://www.tumblr.com/share/link?url=<%= shareURL %>&name=OpenBazaar">
+        <span class="flexInline gutterHSm">
+          <i class="ion-social-tumblr tumblrColor"></i><span><%= ob.polyT('purchase.completeSection.share.postToTumblr') %></span>
+        </span>
+      </a>
+    </div>
+  </div>
   <h5><%= ob.polyT('purchase.completeSection.vendorMessage') %></h5>
   <div class="clrBr clrP flex gutterHSm message js-message">
     <div class="avatar clrBr2 clrSh1 disc" style="<%= ob.getAvatarBgImage(ob.ownProfile.avatarHashes) %>"></div>

styles/_base.scss

@@ -352,6 +352,23 @@ svg {
   .pointer {
     cursor: pointer;
   }
+
+  // external brand colors. They should not be overwritten by theme colors.
+  .twitterColor {
+    color: #00aced;
+  }
+
+  .facebookColor {
+    color: #3b5998;
+  }
+
+  .pinterestColor {
+    color: #bd081c;
+  }
+
+  .tumblrColor {
+    color: #35465c;
+  }
 }
 
 // Sometimes, I just like floats.

styles/modules/modals/_purchase.scss

@@ -68,6 +68,12 @@
         border: none;
       }
     }
+
+    .socialBtns .btn {
+      height: auto;
+      padding-top: 8px;
+      padding-bottom: 8px;
+    }
   }
 
   .actionBtn {