Skip to content
This repository was archived by the owner on May 16, 2019. It is now read-only.

Commit 70d0204

Browse files
jjeffryesjjeffryes
committed
Wire into purchase flow.
1 parent 7e8d78e commit 70d0204

File tree

4 files changed

+174
-134
lines changed

4 files changed

+174
-134
lines changed

‎css/obBase.css‎

Lines changed: 130 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,134 @@ form {
186186
margin: 0;
187187
}
188188

189+
/*========== typography ==========*/
190+
191+
h1,h2,h3,h4,h5,h6,
192+
.h1,.h2,.h3,.h4,.h5,.h6 {
193+
margin: 0;
194+
font-weight: 700;
195+
-webkit-user-select: none;
196+
cursor: default;
197+
}
198+
199+
h1,h2,h3,
200+
.h1,.h2,.h3 {
201+
margin-bottom: 20px;
202+
line-height: 1.2;
203+
}
204+
205+
h4,h5,h6
206+
.h4,.h5,.h6 {
207+
margin-bottom: 10px;
208+
line-height: 1;
209+
}
210+
211+
h3, .h3 {
212+
font-size: 18px;
213+
}
214+
215+
h4, .h4 {
216+
font-size: 17px;
217+
}
218+
219+
h5, .h5 {
220+
font-size: 15px;
221+
}
222+
223+
h6, .h6 {
224+
font-size: 15px; /* TODO: refactor to remove h6 since it is identical to h5 */
225+
}
226+
227+
.fieldItem-textarea h2, .fieldItem-textarea h3, .editableContent h2, .editableContent h3 {
228+
margin-top: 30px;
229+
}
230+
231+
.fieldItem-textarea h2:first-child, .fieldItem-textarea h3:first-child, .editableContent h2:first-child, .editableContent h3:first-child {
232+
margin-top: 0;
233+
}
234+
235+
.note {
236+
/* use for instructions and incidental text */
237+
/*font-style: italic;*/
238+
font-size: 9px;
239+
opacity: 0.50;
240+
}
241+
242+
[class *= "ion-"]:before {
243+
font-size: 1.2em;
244+
pointer-events: none;
245+
}
246+
247+
.txt-center {
248+
text-align: center;
249+
}
250+
251+
#ov1 .txt-fade {
252+
opacity: 0.75;
253+
}
254+
255+
#ov1 .unfilled {
256+
opacity: 0.35;
257+
}
258+
259+
#ov1 .div-fade {
260+
opacity: 0.50;
261+
}
262+
263+
#ov1 .div-fadeExtra {
264+
opacity: 0.3;
265+
}
266+
267+
.txt-lowleading {
268+
line-height: 1.2;
269+
}
270+
.txt-unleaded {
271+
line-height: 1;
272+
margin-bottom: 0;
273+
}
274+
275+
#ov1 .unbold {
276+
font-weight: 400;
277+
}
278+
279+
#ov1 .allCaps {
280+
text-transform: uppercase;
281+
}
282+
283+
.noOverflow {
284+
text-overflow: ellipsis;
285+
white-space: nowrap;
286+
overflow: hidden;
287+
}
288+
289+
.noWrap {
290+
white-space: nowrap;
291+
}
292+
293+
.clamp2 {
294+
/* adds an ellipses to the end of wrapped text after 2 lines */
295+
overflow: hidden;
296+
text-overflow: ellipsis;
297+
display: -webkit-box;
298+
-webkit-line-clamp: 2;
299+
-webkit-box-orient: vertical;
300+
}
301+
302+
.clamp4 {
303+
/* adds an ellipses to the end of wrapped text after 4 lines */
304+
overflow: hidden;
305+
text-overflow: ellipsis;
306+
display: -webkit-box;
307+
-webkit-line-clamp: 4;
308+
-webkit-box-orient: vertical;
309+
}
310+
311+
.txtRow2 {
312+
/* limits an element to being 2 rows of text tall */
313+
line-height: 1.25em;;
314+
height: 2.5em;
315+
}
316+
189317

190318
/*========== structure classes ==========*/
191319

@@ -401,6 +529,7 @@ form {
401529
.barTxt {
402530
height: 50px;
403531
line-height: 50px;
532+
margin-bottom: 0;
404533
}
405534

406535
.bar .btn {
@@ -1297,134 +1426,6 @@ label.fieldItem {
12971426
width: calc(100% - 230px);
12981427
}
12991428

1300-
/*========== typography ==========*/
1301-
1302-
h1,h2,h3,h4,h5,h6,
1303-
.h1,.h2,.h3,.h4,.h5,.h6 {
1304-
margin: 0;
1305-
font-weight: 700;
1306-
-webkit-user-select: none;
1307-
cursor: default;
1308-
}
1309-
1310-
h1,h2,h3,
1311-
.h1,.h2,.h3 {
1312-
margin-bottom: 20px;
1313-
line-height: 1.2;
1314-
}
1315-
1316-
h4,h5,h6
1317-
.h4,.h5,.h6 {
1318-
margin-bottom: 10px;
1319-
line-height: 1;
1320-
}
1321-
1322-
h3, .h3 {
1323-
font-size: 18px;
1324-
}
1325-
1326-
h4, .h4 {
1327-
font-size: 17px;
1328-
}
1329-
1330-
h5, .h5 {
1331-
font-size: 15px;
1332-
}
1333-
1334-
h6, .h6 {
1335-
font-size: 15px; /* TODO: refactor to remove h6 since it is identical to h5 */
1336-
}
1337-
1338-
.fieldItem-textarea h2, .fieldItem-textarea h3, .editableContent h2, .editableContent h3 {
1339-
margin-top: 30px;
1340-
}
1341-
1342-
.fieldItem-textarea h2:first-child, .fieldItem-textarea h3:first-child, .editableContent h2:first-child, .editableContent h3:first-child {
1343-
margin-top: 0;
1344-
}
1345-
1346-
.note {
1347-
/* use for instructions and incidental text */
1348-
/*font-style: italic;*/
1349-
font-size: 9px;
1350-
opacity: 0.50;
1351-
}
1352-
1353-
[class *= "ion-"]:before {
1354-
font-size: 1.2em;
1355-
pointer-events: none;
1356-
}
1357-
1358-
.txt-center {
1359-
text-align: center;
1360-
}
1361-
1362-
#ov1 .txt-fade {
1363-
opacity: 0.75;
1364-
}
1365-
1366-
#ov1 .unfilled {
1367-
opacity: 0.35;
1368-
}
1369-
1370-
#ov1 .div-fade {
1371-
opacity: 0.50;
1372-
}
1373-
1374-
#ov1 .div-fadeExtra {
1375-
opacity: 0.3;
1376-
}
1377-
1378-
.txt-lowleading {
1379-
line-height: 1.2;
1380-
}
1381-
.txt-unleaded {
1382-
line-height: 1;
1383-
margin-bottom: 0;
1384-
}
1385-
1386-
#ov1 .unbold {
1387-
font-weight: 400;
1388-
}
1389-
1390-
#ov1 .allCaps {
1391-
text-transform: uppercase;
1392-
}
1393-
1394-
.noOverflow {
1395-
text-overflow: ellipsis;
1396-
white-space: nowrap;
1397-
overflow: hidden;
1398-
}
1399-
1400-
.noWrap {
1401-
white-space: nowrap;
1402-
}
1403-
1404-
.clamp2 {
1405-
/* adds an ellipses to the end of wrapped text after 2 lines */
1406-
overflow: hidden;
1407-
text-overflow: ellipsis;
1408-
display: -webkit-box;
1409-
-webkit-line-clamp: 2;
1410-
-webkit-box-orient: vertical;
1411-
}
1412-
1413-
.clamp4 {
1414-
/* adds an ellipses to the end of wrapped text after 4 lines */
1415-
overflow: hidden;
1416-
text-overflow: ellipsis;
1417-
display: -webkit-box;
1418-
-webkit-line-clamp: 4;
1419-
-webkit-box-orient: vertical;
1420-
}
1421-
1422-
.txtRow2 {
1423-
/* limits an element to being 2 rows of text tall */
1424-
line-height: 1.25em;;
1425-
height: 2.5em;
1426-
}
1427-
14281429
/*========== skin classes ==========*/
14291430

14301431
.userPageImageUpload {
@@ -4965,6 +4966,7 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
49654966
#ov1 .textOpacity0,
49664967
#ov1 .opacity0 {
49674968
opacity: 0;
4969+
pointer-events: none;
49684970
}
49694971

49704972
#ov1 .textOpacity25 {

‎js/templates/buyWizard.html‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ <h2 class="ion-android-close custCol-text clickable"></h2>
1515
<h3 class="custCol-text padding30"><%= polyglot.t('CheckExchanges') %> </h3>
1616
</div>
1717
</div>
18-
<div class="modal-hero modal-heroFullHeightNoButtons padding40 js-buyWizardPay hide background1 custCol-primary">
18+
<div class="modal-hero modal-heroFullHeightNoButtons padding30 js-buyWizardPay hide background1 custCol-primary">
1919
<div class="width100 row20">
2020
<img class="blockCenter qrCode js-buyWizardPayQRCode" height="250" width="250" src="imgs/defaultItem.png"/>
2121
</div>
@@ -39,6 +39,18 @@ <h3 class="custCol-text padding30"><%= polyglot.t('CheckExchanges') %> </h3>
3939
<%= polyglot.t('buyFlow.paymentNote') %>
4040
</div>
4141
</div>
42+
<div class="positionBottom width100 padding20 custCol-background borderTop custCol-border txt-center js-partialPaymentMsg opacity0">
43+
<div class="h4 width100">
44+
<i class="ion-alert-circled"></i>
45+
<span class="js-partialPaymentTxt"></span>
46+
</div>
47+
<div class="txt-fade fontSize12 rowTop10">
48+
<%= polyglot.t('transactions.BuyerPaidMessageHelp') %>
49+
</div>
50+
<div class="btn btn-corner btn-cornerTR btn-txtOnly js-partialPaymentClose">
51+
<i class="ion-close"></i>
52+
</div>
53+
</div>
4254
</div>
4355
<div class="modal-hero js-buyWizardOrderSummary background1 hide">
4456
<div class="width100 txt-center">

‎js/templates/transactionModal.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -601,7 +601,6 @@ <h3 class="txt-bright"><%= polyglot.t('CheckExchanges') %> </h3>
601601
}) %>
602602
<% } %>
603603
</div>
604-
<hr>
605604
<div class="txt-fade fontSize12 rowTop10">
606605
<% if(ob.transactionType == "purchases"){ %>
607606
<%= polyglot.t('transactions.BuyerPaidMessageHelp') %>

‎js/views/buyWizardVw.js‎

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ var __ = require('underscore'),
1313
chosen = require('../utils/chosen.jquery.min.js'),
1414
qr = require('qr-encode'),
1515
app = require('../App').getApp(),
16-
clipboard = require('clipboard');
16+
clipboard = require('clipboard'),
17+
templateHelpers = require('../utils/templateHelpers');
1718
Backbone.$ = $;
1819

1920
// randomize function
@@ -59,6 +60,7 @@ module.exports = baseVw.extend({
5960
'click .js-buyWizardCloseSummary': 'closeWizard',
6061
'click input[name="radioPaymentType"]': 'changePaymentType',
6162
'click #BuyWizardQRDetailsInput': 'toggleQRDetails',
63+
'click .js-partialPaymentClose': 'hidePartialPaymentMsg',
6264
'blur input': 'validateInput'
6365
},
6466

@@ -81,6 +83,7 @@ module.exports = baseVw.extend({
8183
this.model.set('selectedModerator', "");
8284
this.model.updateAttributes();
8385
this.cachePayData = "";
86+
this.partialPaymentAmount = 0;
8487

8588
//create the country select list
8689
this.countryList = countries.get('countries');
@@ -102,11 +105,35 @@ module.exports = baseVw.extend({
102105

103106
handleSocketMessage: function(response) {
104107
var data = JSON.parse(response.data);
105-
if (data.notification && data.notification.order_id == this.orderID && data.notification.type == "payment received"){
106-
this.showSummary();
108+
if (data.notification && data.notification.order_id == this.orderID){
109+
if (data.notification.type == "payment received") {
110+
this.showSummary();
111+
this.hidePartialPaymentMsg();
112+
} else if (data.notification.type == "partial payment"){
113+
this.showPartialPaymentMsg(data.notification);
114+
}
107115
}
108116
},
109117

118+
showPartialPaymentMsg: function(data){
119+
var payMsg = "";
120+
this.partialPaymentAmount = data.amount_funded / 100000000; //amount is sent in satoshis
121+
payMsg = window.polyglot.t('transactions.BuyerPaidMessage', {
122+
paidAmount: templateHelpers.intlNumFormat(this.partialPaymentAmount, 8),
123+
totalAmount: templateHelpers.intlNumFormat(this.model.get('totalBTCDisplayPrice'), 8)
124+
});
125+
126+
this.$('.js-partialPaymentMsg')
127+
.addClass('fadeIn')
128+
.find('.js-partialPaymentTxt').text(payMsg);
129+
130+
this.showPayAddress();
131+
},
132+
133+
hidePartialPaymentMsg: function(){
134+
this.$('.js-partialPaymentMsg').removeClass('fadeIn');
135+
},
136+
110137
initAccordion: function(targ){
111138
this.acc = $(targ);
112139
this.accWidth = this.acc.width();
@@ -540,7 +567,7 @@ module.exports = baseVw.extend({
540567
dataURI;
541568
this.$el.find('.js-buyWizardSpinner').addClass('hide');
542569
this.orderID = data.order_id;
543-
totalBTCPrice = data.amount;
570+
totalBTCPrice = data.amount - this.partialPaymentAmount;
544571
this.$el.find('.js-buyWizardDetailsTotalBTC').text(totalBTCPrice);
545572
this.payURL = data.payment_address;
546573

0 commit comments

Comments
 (0)